/* page.css - Common styles for inner pages */

/* Clear fixed header on all pages */
body { padding-top: 0; }

/* SiteHero Component Styling */
site-hero {
  display: block;
}

/* Page Hero - used on all inner pages as the intro section */
.page-hero {
  background-color: var(--color-black);
  /* Extra top breathing room below the fixed header so the H1 doesn't
     stick to the top edge of the hero (was --hdr-h + 80px).
     Horizontaler Einzug = 0: der innere .width-content liefert den Gutter
     (wie bei content-sections), damit der Hero-Titel bündig mit dem Body steht. */
  padding: calc(var(--hdr-h) + 220px) 0 80px;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* horizontal centering of children inside max-width */
  text-align: left !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -10%; left: -5%; 
  width: 60%; height: 120%;
  background-image: url('/assets/images/aceArt_Ace_Red-Pik.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}
.page-hero > * { width: 100%; max-width: var(--max-content); position: relative; z-index: 2; }
/* Der innere .width-content soll sich exakt wie im Body verhalten (gleicher
   4%-Rand + Gutter), damit der Hero-Titel mit dem restlichen Content fluchtet.
   Die obige `> *`-Regel würde ihn sonst auf 100% zwingen. */
.page-hero > .width-content { width: var(--pad-content); margin-inline: auto; }
/* Direkte (nicht in .width-content/.container gewrappte) Hero-Kinder — z.B. das
   <h1> der Support-Seiten — bekommen den Gutter, damit sie nach dem Entfernen des
   page-hero-Paddings nicht an die Bildschirmkante stoßen. */
.page-hero > h1 { padding-inline: var(--gutter); }
.page-hero h1 { color: var(--color-off-white); font-size: clamp(40px, 6vw, 80px); line-height: 1.1; margin-bottom: 1.5rem; text-align: left !important; overflow-wrap: break-word; hyphens: auto; }
.page-hero .subtitle,
.page-hero .hero-sub { color: var(--color-off-white); font-size: clamp(18px, 2.5vw, 25px); line-height: 1.5; max-width: var(--max-content); text-align: left !important; }
.page-hero .subtitle { margin-top: 1rem; }
.page-hero .subtitle--wide { max-width: 850px; }
.page-hero .color-red { color: var(--color-red); }
/* Brighter, narrower hero subtitle used on overview pages
   (tech-stack, glossar) where the intro line should pop. */
.page-hero .hero-sub--intro { color: var(--color-off-white); max-width: 850px; }
/* Hub-spoke page-hero typography (layouts/landingpage/list.html). */
.page-hero .spoke-breadcrumb { color: var(--color-off-white); margin-bottom: 0.5rem; }
.page-hero .spoke-breadcrumb a { color: var(--color-off-white); text-decoration: none; }
.page-hero .spoke-intro { color: var(--color-off-white); max-width: 800px; margin-top: 1rem; }

/* Light hero variant – for legal pages (Impressum, Datenschutz) */
.page-hero--light {
  background-color: var(--color-off-white);
  min-height: auto;
  padding-bottom: 60px;
}
.page-hero--light h1 {
  color: var(--color-black);
}

/* .width-content wird zentral in style.css definiert (max-width + var(--gutter)).
   Der frühere prozentuale Override (padding 5%) ist entfernt, damit der
   Seiteneinzug auf allen Seiten identisch ist — inkl. der Home, die page.css
   nicht lädt. Siehe content-breiten-sanierungsplan.md. */

/* Content sections */
.content-section { padding: 80px 0; }
.content-section.bg-black { background: var(--color-black); }
.content-section.bg-off-white { background: var(--color-off-white); }

/* Typography for generated spoke-page content blocks */
.content-section .width-content h2,
.section .width-content h2 { font-size: clamp(28px, 3.5vw, 35px); line-height: 1.2; margin-top: 2.5rem; margin-bottom: 1.5rem; }
.content-section .width-content h2:first-child,
.section .width-content h2:first-child { margin-top: 0; }
.content-section .width-content h3 { font-size: clamp(20px, 2.5vw, 24px); line-height: 1.3; margin-top: 0.5rem; margin-bottom: 1.25rem; color: var(--color-off-white); }
.content-section .width-content h4 { font-size: 20px; line-height: 1.3; margin-top: 2rem; margin-bottom: 0.75rem; }
.content-section .width-content h4:first-child { margin-top: 0; }

/* Glossary / Wissen body headings — match the reference's "weight 500
   on a single-master Regular font" rendering, which is visually Regular.
   Where the source markdown wraps heading text in **bold**, the resulting
   <strong> child renders at 700, which is the intended emphasis. */
.post-body h2, .post-body h3, .post-body h4 {
  font-family: var(--font-regular);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-black);
}

/* Accordion component styles live in style.css (global). */

.post-body h2 {
  font-size: clamp(26px, 4vw, 32px);
  margin-top: 3rem;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 15px;
}

.post-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  background-color: var(--color-red);
  border-radius: 2px;
}

.post-body h3 {
  font-size: clamp(20px, 3vw, 24px);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.post-body h4 {
  font-size: 20px;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.post-body p + h2, 
.post-body p + h3, 
.post-body p + h4 {
  margin-top: 3rem;
}

.post-body h2 + h3,
.post-body h3 + h4 {
  margin-top: 1rem;
}

.content-section .width-content p  { font-size: 18px; line-height: 1.7; margin-bottom: 1.25rem; }
.content-section .width-content p:last-child { margin-bottom: 0; }

/* Hub-spoke landing pages (layouts/landingpage/list.html) render naked
   h3/p inside .width-content. The broad
   `.content-section .width-content h3 { color: var(--color-off-white) }`
   above was authored for dark sections, so on bg-off-white it renders
   near-invisible light grey on light grey. And bare `<p>` on a bg-black
   section inherits the default black body color → black on black.
   Per-bg overrides (direct-child to avoid touching cards / nested
   widgets that bring their own typography). */
.content-section.bg-off-white > .width-content > h3 { color: var(--color-black); }
.content-section.bg-black > .width-content > h2,
.content-section.bg-black > .width-content > h3 { color: var(--color-off-white); }
.content-section.bg-black > .width-content > p { color: var(--color-off-white); }
.content-section .width-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.5rem 0; display: block; }
.content-section .width-content .spoke-inline-img { float: right; max-width: 40%; margin: 0 0 20px 30px; border-radius: 15px; clear: right; }
.content-section .width-content::after { content: ''; display: table; clear: both; }
.content-section .width-content ul { font-size: 18px; line-height: 1.6; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.content-section .width-content li { margin-bottom: 0.5rem; }

/* Inner pages: all .section get centered content */
.section {
}
.section > .text-content,
.section > .split-section,
.section > .steps-list,
.section > .contact-grid,
.section > .legal-content,
.section > .proj-grid {
  /* 92%-Breite + Gutter wie .width-content, damit diese Section-Wrapper an
     allen Breakpoints auf der Content-Kante sitzen (nicht nur Desktop). */
  width: var(--pad-content);
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}

/* Generic container — used by legal-columns/contact/legal layouts as the
   direct child of a page-hero or content-section. Was an empty class on
   the legacy site so its lateral padding came from happenstance; now
   defined so the standard Kontakt/Impressum/Datenschutz/AGB pages get
   proper edge breathing room at every viewport. */
.container {
  /* Gleiches Breiten-/Einzugsmodell wie .width-content, damit Legal/Contact
     an allen Breakpoints exakt auf der Content-Kante sitzen (241/65/35). */
  width: var(--pad-content);
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}

/* Text content */
.text-content { max-width: var(--max-content); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
/* Wenn .text-content in einem .width-content liegt, liefert dieses bereits den
   Gutter — kein doppelter Einzug (z.B. Projekt-Detailseiten). */
.width-content .text-content { padding-inline: 0; }

/* Reserve space for the fixed vertical breadcrumb on iPad-landscape
   viewports (1025-1400px). The breadcrumb sits 28px from the left
   edge after rotation; full-width containers like .container would
   otherwise reach into that strip and overlap the rotated text. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .container,
  .text-content {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.text-content h2 { margin-bottom: 1.5rem; }
.text-content h3 { margin-bottom: 1rem; margin-top: 2rem; }
.text-content p  { font-size: 20px; line-height: 1.6; margin-bottom: 1.2em; }
.text-content ul, .text-content ol { padding-left: 1.5rem; margin-bottom: 1.5em; }
.text-content li { font-size: 20px; line-height: 1.6; margin-bottom: 0.5em; }
/* On dark sections (tech-stack uses this pattern repeatedly)
   the wrapper and its h2 should flip to off-white. */
.text-content--off-white,
.text-content--off-white h2 { color: var(--color-off-white); }
/* White-card variant for the glossar single-term body. */
.text-content--card {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* "Glossar" kicker label under the term title on glossar single pages. */
.glossar-kicker {
  color: var(--color-red);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Global in-content link style: orange, no underline, underlined
   on hover. Scoped to body copy (paragraphs, list items, headings)
   inside content sections so it doesn't affect button anchors,
   nav, footer, or whole-card link wrappers. .glossary-link keeps
   its own dashed-underline treatment. */
.text-content a:not(.aceart-button):not(.glossary-link):not(.feature-card-link),
.content-section .width-content :is(p, li, h3, h4) a:not(.aceart-button):not(.glossary-link):not(.feature-card-link),
.section .width-content :is(p, li, h3, h4) a:not(.aceart-button):not(.glossary-link):not(.feature-card-link),
.advantage-card p a:not(.aceart-button):not(.glossary-link):not(.feature-card-link),
portfolio-slider p a:not(.aceart-button):not(.glossary-link):not(.feature-card-link) {
  color: var(--color-red);
  text-decoration: none;
  transition: text-decoration-color 0.2s;
}
.text-content a:not(.aceart-button):not(.glossary-link):not(.feature-card-link):hover,
.content-section .width-content :is(p, li, h3, h4) a:not(.aceart-button):not(.glossary-link):not(.feature-card-link):hover,
.section .width-content :is(p, li, h3, h4) a:not(.aceart-button):not(.glossary-link):not(.feature-card-link):hover,
.advantage-card p a:not(.aceart-button):not(.glossary-link):not(.feature-card-link):hover,
portfolio-slider p a:not(.aceart-button):not(.glossary-link):not(.feature-card-link):hover {
  text-decoration: underline;
}
.text-content strong { font-weight: 700; }

/* Feature grid - 2 or 3 columns */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* Vertically-stacked feature-card column used in the continuous-support
   pages (Skalierbarkeit / Wartung / Sicherheit / Weiterentwicklung)
   for follow-up detail cards under the main feature grid. Add
   `.mt-40` / `.mt-50` to control the gap above. */
.feature-stack { display: grid; gap: 1.5rem; max-width: 1100px; }
/* The bare .feature-card used on the /continuous-support detail pages.
   Earlier the border was set to var(--color-off-white) — i.e. exactly
   the bg-off-white section background — which made the card edge
   invisible, and the global `.content-section .width-content h3` rule
   forced the heading to off-white too, making it grey-on-grey. The
   cards visually disappeared into the section background. Give the
   card a white surface with a soft border + shadow so it lifts off
   the section, and use a higher-specificity heading rule to win over
   the global off-white declaration. */
.feature-card {
  background: var(--color-white);
  padding: 2rem 1.75rem;
  border: 1px solid #d8d9dc;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 14px rgba(17, 16, 22, 0.06);
}
.content-section .feature-card h3 {
  color: var(--color-black);
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 22px;
  font-weight: 700;
}
.feature-card p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-black);
  margin: 0;
}
.feature-card p + p { margin-top: 0.75rem; }

/* Dark-section variant: subtle elevated tint instead of pure white,
   off-white text. */
.content-section.bg-black .feature-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.content-section.bg-black .feature-card h3 { color: var(--color-off-white); }
.content-section.bg-black .feature-card p  { color: var(--color-off-white); }

@media (max-width: 640px) {
  /* Tighter chrome on phones so the narrow column doesn't lose half
     the line width to the card padding. */
  .feature-stack { gap: 1rem; }
  .feature-card { padding: 1.25rem 1.125rem; }
  .content-section .feature-card h3 { font-size: 19px; margin-bottom: 0.5rem; }
  .feature-card p { font-size: 16px; }
  .section-cta-row { margin-top: 28px; }
}

/* Numbered "step"-style feature cards used on the
   "Individuelle App-Entwicklung" section. Light variant for
   bg-off-white sections — white cards lift off the grey section
   background, large red display digit anchors each card, red
   accent strip + hover lift complete the brand language. */
.feature-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 50px;
}
@media (max-width: 980px) { .feature-step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-step-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.feature-step-card {
  position: relative;
  padding: 2.5rem 2rem 2rem;
  background: #ffffff;
  border-top: 4px solid var(--color-red);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(17, 16, 22, 0.04);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}
.feature-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(240, 83, 62, 0.18);
}
.feature-step-card__num {
  font-family: var(--font-bold);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-red);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
/* Tiny brand-red Pik next to the digit pulls the card into the
   recurring spade motif used elsewhere on the site. */
.feature-step-card__num::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 15px;
  background-image: url('/assets/images/aceArt_Ace_Red-Pik.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  transform: translateY(-2px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-step-card:hover .feature-step-card__num::after {
  transform: translateY(-2px) rotate(15deg) scale(1.15);
}
/* Bump specificity past `.content-section .width-content h3 {
   color: var(--color-off-white) }` so the card titles stay black. */
.content-section .width-content .feature-step-card h3,
.feature-step-card h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  color: var(--color-black);
}
.feature-step-card p {
  font-size: 17px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}
.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-red);
  text-decoration: none;
}
.feature-card__link:hover { text-decoration: underline; }

/* ---- Advantage cards (used on the Custom Software service page) ----
   Centered red heading + off-white body on a dark section, with an
   optional CTA link at the bottom. Mirrors the reference site's
   "Vorteile der individuellen Softwareentwicklung" layout. */
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 50px;
}
.advantage-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 2.25rem 2rem;
  border: 2px solid rgba(225, 226, 228, 0.18);
  border-radius: 18px;
  background: rgba(225, 226, 228, 0.03);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.advantage-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-red);
  background: rgba(240, 83, 62, 0.06);
}
/* Specificity bumped with .content-section so the existing
   `.content-section .width-content h3` grey rule doesn't win. */
.content-section .advantage-card h3,
.advantage-card h3 {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-red);
  margin-bottom: 1rem;
}
.content-section .advantage-card p,
.advantage-card p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-off-white);
  margin: 0 0 1.5rem;
}
.advantage-card p:last-child {
  margin-bottom: 0;
}
/* The standard <aceart-button> wraps in a display:contents host,
   so flex rules attach to the inner <a>. margin-top:auto pins the
   button to the card's bottom regardless of paragraph length;
   align-self:center keeps it horizontally centered. */
.advantage-card .aceart-button {
  margin-top: auto;
  align-self: center;
}
/* Partner-logo plate inside an .advantage-card. Used on
   /agentur/netzwerk so partner logos with mixed colour profiles
   (purple, black, blue, dark-on-white) stay legible on the dark
   bg-black section background. The white plate is the universal
   compromise that works for every brand asset without us having to
   commission new monochrome variants. */
.advantage-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin: 0 auto 1.25rem;
  width: 100%;
  max-width: 240px;
  height: 90px;
}
.content-section .advantage-card__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  margin: 0;
}
/* Dark-plate variant — used for partner logos that ship as white-only
   assets (e.g. the ITsNET _w SVG) and would be invisible on the default
   white plate. */
.advantage-card__logo--dark {
  background: var(--color-black);
  border: 1px solid rgba(225, 226, 228, 0.18);
}
/* Two-up variant — used when there are only two cards (e.g. the
   CMS block on /leistungen/website-entwicklung). Stays 2 cols up
   to mobile, then collapses to a single column. */
.advantage-grid--two-up {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin-inline: auto;
}
@media (max-width: 980px) {
  .advantage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .advantage-grid,
  .advantage-grid--two-up { grid-template-columns: 1fr; gap: 1.25rem; }
  .advantage-card { padding: 1.75rem 1.5rem; }
}

/* aceArt-Team SVG inside the custom-software Agentur split-section.
   Capped at 340px on desktop so it doesn't fill the half-column;
   shrinks further at tablet-portrait, mobile-landscape and
   mobile-portrait so it doesn't visually dominate the heading and
   paragraph beneath it. */
.agentur-team-img {
  display: flex;
  justify-content: center;
}
/* Specificity bumped — `.content-section .width-content img` (line ~130)
   already targets every image inside content sections with max-width:100%,
   which would otherwise win over a single-class selector here. */
.content-section .width-content .agentur-team-img img,
.agentur-team-img img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--border-radius);
}
@media (max-width: 1024px) {
  .content-section .width-content .agentur-team-img img,
  .agentur-team-img img { max-width: 260px; }
}
@media (max-width: 820px) {
  .content-section .width-content .agentur-team-img img,
  .agentur-team-img img { max-width: 220px; }
}
@media (max-width: 480px) {
  .content-section .width-content .agentur-team-img img,
  .agentur-team-img img { max-width: 180px; }
}

/* Förderung block — text + spade icon split. On mobile-portrait the
   icon is hidden so the copy can use the full width. */
.foerderung-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}
@media (max-width: 640px) {
  .foerderung-grid { grid-template-columns: 1fr; gap: 0; }
  .foerderung-grid__icon { display: none; }
}
.foerderung-lead { color: var(--color-off-white); font-size: 20px; line-height: 1.6; }

/* Two-column text + image layout */
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-section.reverse { direction: rtl; }
.split-section.reverse > * { direction: ltr; }
.split-section img { width: 100%; border-radius: 12px; }
/* Split-section typography. Default copy is 18px / 1.6; the
   lead paragraph (first one under the H2) is 20px so the user
   gets a clear visual hierarchy. Colours follow the parent
   section's bg variant. */
.split-section p { font-size: 18px; line-height: 1.6; }
.split-section p.lead { font-size: 20px; line-height: 1.6; }
/* A lead immediately followed by a normal paragraph is not a standalone
   intro — drop it to body size so there is no jarring 20px→18px step in
   the same block. A lead followed by another lead keeps the 20px hierarchy. */
.split-section p.lead:has(+ p:not(.lead)) { font-size: 18px; }
.split-section p + p { margin-top: 1rem; }
.content-section.bg-black .split-section p,
.section.bg-black .split-section p { color: var(--color-off-white); }
.content-section.bg-black .split-section strong,
.section.bg-black .split-section strong { color: var(--color-off-white); }

/* Ansprechpartner / contact-person card — right column of a split-section.
   Features a centered portrait, name, role and contact details. Used on
   /consulting/foerderung; works on bg-off-white and bg-black. */
.ansprechpartner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.content-section .width-content .ansprechpartner-card img,
.ansprechpartner-card img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--border-radius);
  margin: 0 0 1.25rem;
}
.content-section .ansprechpartner-card h3 { font-size: 24px; margin: 0 0 0.2rem; color: var(--color-off-white); }
.content-section .ansprechpartner-card .ansprechpartner-card__role {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-off-white);
  margin: 0 0 0.75rem;
}
.content-section .ansprechpartner-card .ansprechpartner-card__contact { font-size: 17px; line-height: 1.5; margin: 0; }
.ansprechpartner-card__contact a { color: var(--color-red); }
.content-section.bg-black .ansprechpartner-card__contact a { color: var(--color-red); }

/* Section-level subtitle pattern: a paragraph that follows the
   H2 inside a content/section block. Standard reading-column
   width; colour adapts to the parent section's bg variant. */
.content-section .subtitle,
.section .subtitle { max-width: 850px; }
.content-section.bg-black .subtitle,
.section.bg-black .subtitle { color: var(--color-off-white); }
.content-section.bg-off-white .subtitle,
.section.bg-off-white .subtitle { color: var(--color-black); }
/* Hero subtitle stays narrower than the 1520px max-content
   ceiling for comfortable line lengths. */
.page-hero .subtitle { max-width: 900px; }
/* Opt-in variant for subtitles that want the wider hero-style 900px
   inside a regular .section / .content-section context. Used on
   continuous-support intro blocks where the default 850px feels
   cramped against the lead paragraph above. */
.subtitle--wide,
.content-section .subtitle--wide,
.section .subtitle--wide { max-width: 900px; }

/* Smaller body-copy variant (18px / 1.6) used for follow-up
   paragraphs in dark intro blocks. Inherits the section colour
   but is widened to align with the rest of the section. */
.content-section.bg-black .copy { color: var(--color-off-white); font-size: 18px; line-height: 1.6; }
.content-section.bg-off-white .copy { color: var(--color-black); font-size: 18px; line-height: 1.6; }

/* Centered CTA row that closes a card grid. */
.section-cta-row { text-align: center; margin-top: 50px; }

/* Wrapper around an accordion shortcode — keeps a comfortable
   reading column inside wider content sections. */
.accordion-wrap { max-width: 900px; }
.accordion-wrap--spaced { max-width: 900px; margin-top: 50px; }

/* Narrow text block sitting inside a wider .content-section /
   .width-content. Used for follow-up "Welches CMS …" copy below
   a card grid. */
.text-content--narrow { max-width: 900px; margin-top: 60px; }

/* Vertical icon+text row list, used inside .split-section to
   call out 3-4 sub-points alongside the main copy + image.
   Compact typography so the visual focus stays on the section
   heading + side image. */
/* "Trigger checklist" — used on /consulting to enumerate the
   discovery questions ("Wenn eine davon zutrifft, sind wir die
   Richtigen"). Each item leads with a red Pik glyph for visual
   reinforcement of the brand. 2-col grid on desktop, 1-col on
   tablet/mobile so the questions stay readable. */
.checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2.5rem;
  margin-top: 40px;
  list-style: none;
  padding: 0;
}
@media (max-width: 980px) {
  .checklist { grid-template-columns: 1fr; gap: 1rem; }
}
.checklist > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 18px;
  line-height: 1.55;
}
.checklist > li::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 4px;
  background-image: url('/assets/images/aceArt_Ace_Red-Pik.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.content-section.bg-black .checklist > li,
.section.bg-black .checklist > li { color: var(--color-off-white); }

.split-points { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
.split-point { display: flex; gap: 20px; align-items: flex-start; }
/* Specificity bumped twice over: past `.split-section img { width:100% }`
   AND past `.content-section .width-content img { border-radius: 10px;
   margin: 1.5rem 0; height: auto }`. Without the .content-section
   prefix the global rule rounds the 50×50 icon corners (chopping the
   outer pixels of pik / heart / team line art) and overrides the
   explicit height. */
.content-section img.split-point__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 0;
  margin: 0;
}
/* flex:1 + min-width:0 lets the text column shrink within narrow
   parents (e.g. tablet viewport, 1-col split-section). Without
   them the body's intrinsic content width pushes past the
   viewport. */
.split-point__body { flex: 1; min-width: 0; }
.split-point__body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: var(--color-black);
}
.split-point__body p {
  font-size: 16px;
  line-height: 1.55;
  color: #444;
  margin: 0;
}
/* Specificity bump past `.content-section .width-content h3 {
   color: var(--color-off-white) }`. */
.content-section .width-content .split-point__body h3 {
  color: var(--color-black);
}
/* On dark sections the body copy takes the grey colour and the
   smaller 18px size — gives the same visual hierarchy as the
   .lead paragraphs in split-sections without being a "lead". */
.content-section.bg-black .text-content--narrow p,
.section.bg-black .text-content--narrow p {
  color: var(--color-off-white);
  font-size: 18px;
  line-height: 1.6;
}

/* Process/steps */
.steps-list { display: flex; flex-direction: column; gap: 2rem; }
.step-item, .step { display: flex; gap: 2rem; align-items: flex-start; }
.step-number, .step-num { font-size: 50px; font-weight: 700; color: var(--color-red); line-height: 1; min-width: 60px; flex-shrink: 0; }
.step-body h3 { margin-bottom: 0.5rem; }

/* History timeline */
.history-module {
  background-color: var(--color-black);
  padding: 48px 20px;
  overflow: hidden;
}
.timeline-module {
  position: relative;
  max-width: 50%;
  margin: 0 auto;
  padding: 0;
  border-left: 2px solid var(--color-off-white);
}
.timeline-heart {
  position: sticky;
  top: 40vh;
  width: 20px;
  height: 20px;
  margin-left: -11px;
  z-index: 22;
}
.timeline-heart img {
  transform: rotate(90deg);
}
.timeline-entry {
  position: relative;
}
.timeline-dot {
  position: absolute;
  left: -1px;
  top: 0;
  width: 32px;
  height: 32px;
  z-index: 10;
  transform: translateX(-50%);
}
.timeline-dot img {
  width: 32px;
  height: 32px;
  display: block;
}
/* Right-side entries (odd: 2013, 2015, 2017...) */
.timeline-right .timeline-content {
  text-align: left;
  max-width: 450px;
  margin-left: 44px;
  position: relative;
}
.timeline-right .timeline-content::after {
  content: "";
  height: 2px;
  display: block;
  background-color: var(--color-off-white);
  top: 18px;
  position: absolute;
  left: -44px;
  width: 44px;
  transition: background-color 0.5s ease;
}
/* Left-side entries (even: 2014, 2016, 2018...) */
.timeline-left {
  margin-top: 120px;
  margin-bottom: 120px;
}
.timeline-left .timeline-content {
  text-align: right;
  max-width: 350px;
  position: relative;
  transform: translateX(calc(-100% - 44px));
  white-space: normal;
}
.timeline-left .timeline-content::after {
  content: none;
}
/* Horizontal connector line from year text to the centre axis */
.timeline-left .timeline-content strong::after {
  content: "";
  position: absolute;
  height: 2px;
  background-color: var(--color-off-white);
  top: 50%;
  left: 100%;
  width: 44px;
  transition: background-color 0.5s ease;
}
/* Horizontal connectors turn orange in sync with their Piek going active
   (the .timeline-dot immediately precedes .timeline-content in each entry). */
.timeline-right .timeline-dot.active + .timeline-content::after,
.timeline-left .timeline-dot.active + .timeline-content strong::after {
  background-color: var(--color-red);
}
/* Timeline text styles */
.timeline-module .timeline-content p {
  color: var(--color-off-white);
  font-size: 20px;
  line-height: 1.35;
  padding-bottom: 0;
  margin: 0;
}
.timeline-module .timeline-content strong {
  color: var(--color-red);
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  position: relative;
  display: inline-block;
}
.timeline-module .timeline-content p:first-child {
  margin-bottom: 4px;
}

/* Timeline mobile */
@media (max-width: 980px) {
  .timeline-module {
    max-width: 90%;
    margin-left: 28px;
  }
  .timeline-heart {
    margin-left: -11px;
  }
  .timeline-dot {
    left: -1px;
  }
  .timeline-right .timeline-content {
    margin-left: 40px;
  }
  .timeline-left {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .timeline-left .timeline-content {
    position: relative;
    transform: none;
    max-width: none;
    margin-left: 40px;
    text-align: left;
  }
  .timeline-right .timeline-content {
    max-width: none;
  }
  .timeline-left .timeline-content::after,
  .timeline-right .timeline-content::after {
    content: none;
  }
  .timeline-left .timeline-content strong::after {
    content: none;
  }
}

/* Projekt card grid */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* Contact form (legacy two-column layout, kept for any other consumer) */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-info h2 { margin-bottom: 2rem; }
.contact-info p  { font-size: 20px; line-height: 1.8; }
.contact-info a  { color: var(--color-red); }
.contact-form { background: var(--color-white, #fff); border-radius: var(--border-radius); padding: 2.5rem; }
.contact-form h2 { margin-bottom: 2rem; }
/* Full-width submit button (covers the aceart-button + inner <a>/<button>). */
.contact-form .form-submit,
.contact-form .form-submit a,
.contact-form .form-submit button { width: 100%; justify-content: center; }
/* Success message — hidden until the JS handler reveals it. */
.contact-form .form-success {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: #e8f5e9;
  border-radius: 8px;
  color: #2e7d32;
  font-weight: 500;
}

/* ============================================================
   /kontakt — redesigned page
   ============================================================ */

/* Hero: trim the vertical space; the long subtitle is gone so the hero
   doesn't need the same generous padding as a content hero. */
.kontakt-hero .container { max-width: var(--max-content); padding-inline: var(--gutter); }
.kontakt-hero .subtitle { max-width: 56ch; }

/* Quick-contact bar: three brand-coloured cards as a scan-row that
   surfaces the most useful contact methods immediately under the hero. */
.kontakt-quickbar {
  background: var(--color-off-white);
  padding: 0 0 3rem;
}
.kontakt-quickbar .container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.kontakt-quickbar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: -3rem;          /* lifts the cards into the hero edge */
  position: relative;
  z-index: 2;
}
.kontakt-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--color-white, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--color-black);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.kontakt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  border-color: var(--color-red);
}
.kontakt-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background: rgba(240,83,62,0.12);
  color: var(--color-red);
  margin-bottom: 0.5rem;
}
.kontakt-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #5a5a68);
}
.kontakt-card__value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-black);
}

/* Main: form (dominant, ~60%) + map aside (~40%). */
.kontakt-main {
  background: var(--color-off-white);
  padding-top: 1.5rem;
}
.kontakt-main .container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.kontakt-form-card {
  background: var(--color-white, #fff);
  border-radius: var(--border-radius);
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}
/* Slim red accent rail on the left edge — a visual anchor that says
   "this is the primary action on the page". */
.kontakt-form-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--color-red);
  pointer-events: none;
}
.kontakt-form-card h2 {
  margin: 0 0 0.75rem;
}
.kontakt-form-card__lead {
  font-size: 16px;
  color: var(--color-text-muted, #5a5a68);
  margin-bottom: 2rem;
}

/* Aside: map + opening hours */
.kontakt-aside h3 {
  margin: 0 0 1.25rem;
}
.kontakt-map {
  display: block;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.kontakt-map:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
}
.kontakt-map img {
  display: block;
  width: 100%;
  height: auto;
}
.kontakt-aside__hours {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-white, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--border-radius);
  font-size: 16px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
  .kontakt-quickbar__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: -2rem;
  }
  .kontakt-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .kontakt-form-card {
    padding: 1.75rem;
  }
}

/* Legal text – two-column layout (matches reference) */
.legal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.legal-columns .legal-content { max-width: none; }

/* Multi-column flow for long legal text (AGB, Datenschutz). Unlike
   .legal-columns (a 2-cell grid that wants two explicit blocks), this
   pours the whole block of running text into two columns automatically
   so authors don't have to balance the split by hand. */
.legal-content--multicol {
  column-count: 2;
  column-gap: 4rem;
}
.legal-content--multicol h2,
.legal-content--multicol h3,
.legal-content--multicol h4 {
  break-after: avoid;
  break-inside: avoid;
}
.legal-content--multicol p,
.legal-content--multicol ul,
.legal-content--multicol ol,
.legal-content--multicol blockquote {
  break-inside: avoid;
}
@media (max-width: 900px) {
  .legal-content--multicol {
    column-count: 1;
    column-gap: 0;
  }
}
.legal-content h1 { margin-bottom: 3rem; }
.legal-content h2 { font-size: 30px; margin: 2.5rem 0 1rem; }
.legal-content h3 { font-size: 22px; margin: 2rem 0 0.75rem; }
.legal-content p, .legal-content li { font-size: 17px; line-height: 1.8; color: #444; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.legal-content ul, .legal-content ol { padding-left: 1.5rem; margin-bottom: 1em; }
.legal-content a { color: var(--color-red); text-decoration: underline; }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.team-card { text-align: center; padding: 1.5rem 1rem; }
.team-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: 1rem; }
.team-card h3 { font-size: 20px; margin-bottom: 0.25rem; }
.team-card p { font-size: 16px; color: #666; }
.team-card p a { display: block; margin-top: 0.25rem; color: var(--color-red); text-decoration: none; }
.team-card p a:hover { text-decoration: underline; }

/* Tag / badge */
.badge { display: inline-block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-red); background: rgba(240,83,62,.1); padding: 3px 12px; border-radius: 100px; }

/* CTA section */
.cta-section { text-align: center; padding: 100px 5%; }
/* Flush variant: parent section already provides the 80px vertical
   padding, so the inner cta-section drops its own 100px frame. */
.cta-section--flush { padding: 0; }
.cta-section__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-section h2 { margin-bottom: 1rem; }
.cta-section p  { font-size: 22px; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ---- Filter bar ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 3rem;
}
.filter-btn {
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 15px;
  padding: 7px 18px;
  border: 2px solid var(--color-black);
  border-radius: 100px;
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--color-black);
  color: var(--color-off-white);
}

/* ---- Project detail (moved from inline <style>) ---- */
.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.project-meta-item {
  padding: 1.5rem 2rem;
  border: 2px solid var(--color-black);
  border-radius: 12px;
  background: var(--color-off-white);
}
.project-meta-item .meta-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-red);
  margin-bottom: 0.5rem;
}
.project-meta-item .meta-value {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
.project-hero-video {
  width: 100%;
  height: auto;
  max-width: 800px;
  border-radius: var(--border-radius);
  overflow: hidden;
  display: block;
  margin: 0 auto 1.25rem;
}
.project-screenshot {
  width: 100%;
  border-radius: 12px;
  border: 2px solid var(--color-black);
  display: block;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.5rem;
}
.tag {
  font-size: 14px;
  font-weight: 600;
  background: rgba(240,83,62,.12);
  color: var(--color-red);
  border-radius: 100px;
  padding: 4px 14px;
}

/* Glossary Tags */
.aceart-glossary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2rem;
  margin-top: -0.5rem;
}
.aceart-glossary-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-red);
  background: rgba(240,83,62,.1);
  padding: 4px 14px;
  border-radius: 100px;
  border: 1px solid var(--color-red);
  line-height: 1.2;
}
/* Project detail: category tags above hero */
.project-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.project-categories .tag {
  font-size: 14px;
  font-weight: 600;
  background: rgba(240,83,62,.12);
  color: var(--color-red);
  border-radius: 100px;
  padding: 4px 14px;
}
.project-categories a.tag {
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.project-categories a.tag:hover {
  background: var(--color-red);
  color: var(--color-off-white);
}

/* Project detail: "Zur Website" button row */
.project-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  border: 2px solid var(--color-black);
  border-radius: 100px;
  padding: 10px 24px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  margin-bottom: 2rem;
}
.project-ext-link:hover {
  background: var(--color-black);
  color: var(--color-off-white);
}
/* Flex container for multiple external project links — overrides
   each pill's bottom margin (the container provides its own). */
.project-ext-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.project-ext-links .project-ext-link { margin-bottom: 0; }
/* Tighter top padding for the project body section directly under
   the hero — the hero already provides enough breathing room. */
.section--snug-top { padding-top: 3rem; }

/* Project detail: Key Facts dark box */
.project-keyfacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--color-black);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--color-black);
}
.project-keyfacts__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-keyfacts__content {
  padding: 2.5rem;
  color: var(--color-off-white);
}
.project-keyfacts__content h3 {
  color: var(--color-red);
  font-size: 22px;
  margin-bottom: 1.5rem;
}
.project-keyfacts__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-keyfacts__list li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-off-white);
}
.project-keyfacts__list li strong {
  display: block;
  color: var(--color-off-white);
  font-size: 18px;
  font-weight: 700;
}

/* Project detail: Fokus section */
.project-fokus {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
  background: var(--color-off-white);
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  padding: 2.5rem;
}
.project-fokus h3 {
  color: var(--color-red);
  font-size: 22px;
  margin-bottom: 1.5rem;
}
.project-fokus p {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 1rem;
}
/* Glossary links keep their own dashed-underline treatment — a normal
   underline on top would double-underline them. */
.project-fokus p a:not(.glossary-link) {
  color: var(--color-red);
  text-decoration: underline;
}
.project-fokus__images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-fokus__images img {
  width: 100%;
  border-radius: var(--radius-project-img);
  border: 2px solid #e0e0e0;
  display: block;
}

/* Trim the vertical padding the stacked bg-off-white sections produce
   between Description / Video / Key Facts / Fokus blocks on ALL viewports.
   The section-level .pt-0 already removes the top half; this trims the
   bottom half so each block sits close to the next instead of floating
   in an empty strip (FG: "über und unter dem Video sehr viel Abstand"). */
.page-projekt-section { padding-bottom: 24px; }
.page-projekt-section.section--snug-top { padding-top: 32px; }

@media (max-width: 760px) {
  .project-meta-grid { grid-template-columns: 1fr 1fr; }
  .project-keyfacts { grid-template-columns: 1fr; }
  .project-fokus { grid-template-columns: 1fr; }
  .page-projekt-section { padding-bottom: 16px; }
  .page-projekt-section.section--snug-top { padding-top: 24px; }

  /* FG follow-up: card text was double-indented vs the video / H1 edge
     (`.width-content` gutter ~4% + card padding 24px). Extend the cards
     exactly across the .width-content gutter (4% each side, matching
     --pad-content: 92%) and use that same 4% as the internal padding,
     so the card BG is full-bleed while the card body text lands at the
     same x as the video / hero / description content above. */
  .page-projekt-section .project-keyfacts,
  .page-projekt-section .project-fokus {
    /* 4/92 ≈ 4.35% — pulls the card edge from .width-content to the
       section edge on each side; works regardless of viewport size. */
    margin-left: -4.35%;
    margin-right: -4.35%;
  }
  .page-projekt-section .project-fokus {
    padding: 1.5rem 4.35%;
    gap: 1.25rem;
  }
  .page-projekt-section .project-keyfacts__content {
    padding: 1.5rem 4.35%;
  }
  /* Also flatten the .text-content's own 20px horizontal padding so the
     description H2 + paragraph line up at that same content edge. */
  .page-projekt-section .text-content { padding-left: 0; padding-right: 0; }

  /* Keep the keyfacts image's top corners rounded to match the card's
     12px radius (the card is rounded again on mobile). */
  .project-keyfacts__img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@media (max-width: 500px) {
  .project-meta-grid { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 980px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid.cols-2 { grid-template-columns: 1fr; }
  .split-section { grid-template-columns: 1fr; gap: 2rem; }
  .split-section.reverse { direction: ltr; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .legal-columns { grid-template-columns: 1fr; gap: 2rem; }
  .content-section .width-content .spoke-inline-img { float: none; max-width: 100%; width: 100%; margin: 30px 0; }
  .site-main .hero-wrap + section { padding-top: 150px !important; }
  .hero-image { width: 100px !important; height: 100px !important; bottom: -50px !important; right: 20px !important; position: absolute !important; }
  .hero-image img, .hero-image svg, .loop-img { width: 100px !important; height: 100px !important; max-width: 100px !important; }
}
@media (max-width: 767px) {
  .feature-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: 320px; margin: 0 auto; }
  .team-card { padding: 1rem; }
  .content-section .width-content .spoke-inline-img { float: none; max-width: 100%; width: 100%; margin: 30px 0; }
}
@media (max-width: 640px) {
  .proj-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 36px; }
}

@media (max-width: 980px) {
    .page-hero {
        flex-direction: column;
        /* Horizontal 0 — der innere .width-content liefert den Gutter (bündig mit Body). */
        padding: calc(var(--hdr-h) + 120px) 0 40px;
    }
    .page-hero h1 {
        margin-bottom: 1rem;
    }
    .page-hero .hero-sub {
        max-width: 100%;
    }
    .site-main .hero-wrap + section,
    .hero-wrap + .section.bg-black,
    .hero-wrap + section { 
        padding-top: 150px !important; 
    }
    .hero-image { 
        width: 100px !important; 
        height: 100px !important; 
        bottom: -50px !important; 
        right: 20px !important; 
        position: absolute !important; 
    }
    .hero-image img, 
    .hero-image svg, 
    .hero-img,
    .turnjoke,
    .loop-img {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
    }
}


:root {
  --color-primary: #e30613;
  --color-white: #ffffff;
  --color-black: #101015;
  --color-dark: #1a1a1f;
  --color-gray: #f4f4f4;
  --corner-bg: #101015;
}

.bg-gray {
  background-color: var(--color-off-white);
  --corner-bg: var(--color-off-white);
}

.bg-black {
  --corner-bg: #101015;
}

/* ============================================================
   TEAM MEMBER COMPONENT
============================================================ */
.team-member {
  position: relative;
  width: 100%;
}
.team-member__card {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  /* Perspective for the playing-card flip. No overflow/border-radius here —
     each face rounds + clips ITSELF, so the 3D rotation is not sliced by the
     container, and the rounded corners are rasterised per face. */
  perspective: 1400px;
  /* NO box-shadow here: a shadow on this static container does not rotate
     with the flip — mid-flip the unshadowed card footprint shows as a light
     card-sized ghost behind the turning card. Elevation lives on the faces. */
  border-radius: 12px;
}
.team-member__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.2, 1);
}
/* Flip on hover, on keyboard focus (a contact link on the back gets focus),
   and on .is-flipped (tap toggle for touch — see components.js). */
.team-member:hover .team-member__flip,
.team-member:focus-within .team-member__flip,
.team-member.is-flipped .team-member__flip {
  transform: rotateY(180deg);
}
/* The two card faces. Each rounds + clips itself; backface-visibility hides
   the away-facing one. The hover state shows the solid DARK back — its edge
   colour equals the section, so there is no high-contrast photo edge to bleed
   at the rounded corners (the old transform-on-a-photo-card pixel issue). */
.team-member__face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Soft elevation ON the face (not the container) so the shadow rotates
     with the card during the flip; backface-visibility hides the shadow of
     the away-facing side along with the face itself. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.team-member__front {
  /* Transparent, not a fixed colour: during image load and the edge-on moment
     of the flip the actual section background shows through (e.g. the light
     team-page section) instead of a baked-in light/white. */
  background-color: transparent;
}
.team-member__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder for new hires without a photo yet: dark ground consistent with
   the card back, a large low-opacity Pik watermark, and initials — reads as
   "on brand, photo pending" rather than a broken image. */
.team-member__photo-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(160deg, #1c1c22 0%, #101015 100%);
}
.team-member__photo-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/aceArt_Ace_Grey-Pik.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46%;
  opacity: 0.14;
}
.team-member__initials {
  position: relative;
  z-index: 1;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 980px) {
  .team-member__initials { font-size: 34px; }
}
.team-member__back {
  transform: rotateY(180deg);
  /* The card's BACK — like a real playing card: dark ground (a step lighter
     than the page dark so it still reads as an object on the dark agentur
     section), fine red inner frame, ornamental Herz pattern. The centered
     info makes it the person's business card. */
  background-color: #15151b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
/* Fine red inner frame — the printed border of a playing-card back. */
.team-member__back::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(240, 83, 62, 0.85);
  border-radius: 7px;
  pointer-events: none;
  z-index: 1;
}
/* Staggered Herz motif inside the frame (alternate rows point down, like the
   mirrored repeat on classic card backs). Low opacity: texture, not noise. */
.team-member__back::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23F0533E' fill-opacity='0.09'%3E%3Cpath transform='translate(11 10) scale(0.55)' d='M1.142,19.804c-1.1-3.201-1.55-7.002-0.8-10.203C3.993-1.301,15.045-2.752,23.448,4.4c6.902,6.252,13.904,12.403,20.806,17.605l1.901,1.4c1.1,0.85,1.1,2.501,0,3.351l-1.901,1.45C36.001,34.958,31.3,39.109,24.848,44.911c-8.452,8.352-22.806,6.552-24.707-6.352c-0.3-3.151,0.9-7.052,1.1-7.702l2.201-5.852L1.142,19.804z'/%3E%3Cpath transform='translate(59 58) scale(0.55) rotate(180 23.5 25)' d='M1.142,19.804c-1.1-3.201-1.55-7.002-0.8-10.203C3.993-1.301,15.045-2.752,23.448,4.4c6.902,6.252,13.904,12.403,20.806,17.605l1.901,1.4c1.1,0.85,1.1,2.501,0,3.351l-1.901,1.45C36.001,34.958,31.3,39.109,24.848,44.911c-8.452,8.352-22.806,6.552-24.707-6.352c-0.3-3.151,0.9-7.052,1.1-7.702l2.201-5.852L1.142,19.804z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  z-index: 0;
}
/* Corner suit index like a playing card: Pik on the front, Herz on the back. */
.team-member__index {
  position: absolute;
  top: 16px;
  left: 16px;
  height: 30px;
  width: auto;
  /* drop-shadow keeps it legible directly on the photo (front). */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  z-index: 3;
}
/* Second index bottom-right, rotated — real playing-card corner symmetry. */
.team-member__index--bottom {
  top: auto;
  left: auto;
  bottom: 16px;
  right: 16px;
  transform: rotate(180deg);
}
/* On the back the indices sit INSIDE the red frame (inset 12px), not on it. */
.team-member__back .team-member__index {
  top: 26px;
  left: 26px;
  filter: none;
}
.team-member__back .team-member__index--bottom {
  top: auto;
  left: auto;
  bottom: 26px;
  right: 26px;
}
.team-member__info {
  position: relative;
  z-index: 2;
  text-align: center;
}
/* Red accent line above the name — the card's "title plaque". */
.team-member__info::before {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-red);
  margin: 0 auto 14px;
}
.team-member__info h3 {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}
.team-member__info p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  margin-bottom: 1rem;
}
.team-member__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.team-member__contact a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.team-member__contact a:hover {
  color: var(--color-red);
  text-decoration: underline;
}

@media (max-width: 980px) {
  .team-member__back { padding: 24px; }
  .team-member__info h3 { font-size: 20px; }
  .team-member__info p { font-size: 12px; letter-spacing: 0.12em; }
}


/* --- Hero --- */
.agentur-hero {
  width: var(--pad-content);
  max-width: var(--max-content);
  margin: 0 auto;
  /* The wrapping .hero-wrap already clears the fixed header (padding-top:
     var(--hdr-h)); add generous breathing room on top of that so the H1
     doesn't stick up under the header — matches the .page-hero spacing. */
  padding: 220px var(--gutter) 40px;
  position: relative;
}
@media (max-width: 980px) {
  .agentur-hero { padding-top: 120px; }
}
/* Alle Rail-Container des Agentur-Index auf das .width-content-Modell (92% Breite
   + var(--gutter)), damit Hero, Bild-Grid, Founders, Partner-Cards und CTA bündig
   mit dem restlichen Content (Content-Kante) stehen statt an der Rail-Kante. */
.agentur-images__grid,
.agentur-stats__inner,
.agentur-founders,
.agentur-partner__desc,
.agentur-partner__header,
.agentur-partner__cards,
.agentur-cta__inner {
  width: var(--pad-content);
  padding-inline: var(--gutter);
}
.agentur-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}
.agentur-hero__top h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.1;
  color: var(--color-black);
  flex: 1;
}
.agentur-hero__icon {
  flex-shrink: 0;
  width: 200px;
  height: auto;
}
.agentur-hero__desc {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
  color: var(--color-black);
  max-width: 900px;
}
.agentur-hero__loop {
  position: absolute;
  right: 0;
  /* Sit inside the hero, clear of the image grid that starts right below —
     a negative bottom used to let the circle hang into the images. */
  bottom: 24px;
  width: 180px !important;
  height: 180px !important;
}

/* --- Image Grid --- */
.agentur-images {
  background: var(--color-off-white);
  padding: 60px 0 80px;
}
.agentur-images__grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.agentur-images__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.agentur-images__col--left {
  margin-top: 40px;
}
.agentur-images__col--right {
  margin-top: 0;
}
.agentur-images img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* --- Stats Slider --- */
.agentur-stats {
  background: #e1e2e4;
  /* Bottom breathing room so the facts slider (+ its heart pagination, which
     sits absolute at bottom:20px of the inner) isn't cramped against the
     following dark timeline module. */
  padding: 0 0 56px;
  text-align: center;
}
.agentur-stats__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  position: relative;
}
.stats-swiper {
  position: relative;
  height: 310px;
  overflow: hidden;
}
.agentur-stats__inner {
  position: relative;
  overflow: visible;
}
.stats-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.stats-number {
  font-size: 80px;
  font-weight: 700;
  color: var(--color-red);
  line-height: 1.1;
  margin: 0 0 0.15em;
}
.stats-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.3;
  color: var(--color-red);
  margin: 0;
}

/* Arrows – heart outline SVGs */
/* Unified with the site's other slider arrows (ref: "Das realisierten wir"
   portfolio slider): brand-red heart icon, hover = zoom + directional lean +
   red glow, click = squish. Replaced the old black outline→filled swap. */
.stats-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: block;
  text-indent: -9999px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(17, 16, 22, 0));
}
.stats-arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.stats-arrow--prev {
  left: 5px;
}
.stats-arrow--prev::before {
  background-image: url('/assets/images/aceArt_Ace_Red-Heart_left.svg');
}
.stats-arrow--next {
  right: 5px;
}
.stats-arrow--next::before {
  background-image: url('/assets/images/aceArt_Ace_Red-Heart.svg');
}
.stats-arrow--prev:hover {
  transform: translate(-6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.stats-arrow--next:hover {
  transform: translate(6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.stats-arrow--prev:active,
.stats-arrow--next:active {
  transform: translateY(-50%) scale(0.95);
}

/* Pagination – heart bullets */
.stats-swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}
.stats-swiper-pagination .swiper-pagination-bullet {
  width: 17px;
  height: 17px;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  margin: 0 5px;
  background-image: url('/assets/images/aceArt_Ace_Black-Heart_Outline.svg');
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(90deg);
}
.stats-swiper-pagination .swiper-pagination-bullet-active {
  background-image: url('/assets/images/aceArt_Ace_Black-Heart.svg');
}

@media (max-width: 768px) {
  .agentur-stats { padding-bottom: 40px; }
  /* Keep the slide text clear of the prev/next arrows (arrows span ~5–33px
     from each edge); pad the content in so long labels don't slide under them. */
  .stats-swiper .swiper-slide { padding-inline: 48px; }
  .stats-number { font-size: 48px; }
  .stats-label { font-size: 20px; }
  .stats-swiper { height: 240px; }
  .stats-arrow { width: 28px; height: 28px; }
}

/* --- Dark Section (Timeline + Gründer) --- */
.agentur-dark {
  background: var(--color-black);
  /* Zentrierter Inhalt (Header/Timeline) — Gutter nur als Kanten-Sicherheit,
     keine Rail-Ausrichtung nötig. */
  padding: 54px var(--gutter);
  overflow: visible;
}
.agentur-dark__header {
  max-width: 600px;
  margin: 0 auto 40px;
  border: 2px solid var(--color-off-white);
  border-radius: var(--border-radius);
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.agentur-dark__year {
  color: var(--color-red);
  font-size: 28px;
  font-weight: 700;
}
.agentur-dark__title {
  color: var(--color-off-white);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
}

/* Timeline adjustments for agentur page (reuses existing timeline styles) */
.agentur-dark .timeline-module {
  max-width: 50%;
  margin: 0 0 0 50%;
  padding: 0;
  border-left: 2px solid var(--color-off-white);
  position: relative;
}

/* Timeline progress line (red fill over grey border) */
.progress-line {
  position: absolute;
  top: 0;
  left: -2px;
  width: 2px;
  height: 0;
  background-color: var(--color-red);
  z-index: 20;
  pointer-events: none;
}

/* Timeline dot: dual-image swap (grey → red) without hue-rotate */
.timeline-dot {
  position: absolute;
  left: -1px;
  top: 0;
  width: 32px;
  height: 32px;
  z-index: 10;
  transform: translateX(-50%);
}
.timeline-dot .dot-grey {
  display: block;
  transition: opacity 0.5s ease;
}
.timeline-dot .dot-red {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.timeline-dot.active .dot-grey {
  opacity: 0;
}
.timeline-dot.active .dot-red {
  opacity: 1;
}

/* Timeline end icon. bottom:-35 (was -40) tucks the Pik a few pixels
   closer to the last entry so the silhouette overlaps the residual
   off-white border-stub that would otherwise peek through. No more
   mask pseudo-element behind it — Issue #39 caught that the dark
   strip read as a deliberate black block in the design. */
.timeline-end-icon {
  position: absolute;
  left: -1px;
  bottom: -35px;
  transform: translateX(-50%);
  z-index: 25;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.6s ease;
}
.timeline-end-icon img {
  display: block;
}

/* Heart fade-out when approaching the end */
.timeline-heart {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.timeline-heart.heart-merging {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

/* End-icon pulse when heart merges into it */
.timeline-end-icon.end-pulse {
  transform: translateX(-50%) scale(1.3);
  filter: drop-shadow(0 0 12px var(--color-red)) drop-shadow(0 0 24px rgba(200, 16, 46, 0.4));
}
@keyframes timeline-end-glow {
  0%, 100% { filter: drop-shadow(0 0 8px var(--color-red)) drop-shadow(0 0 16px rgba(200, 16, 46, 0.3)); transform: translateX(-50%) scale(1.25); }
  50% { filter: drop-shadow(0 0 18px var(--color-red)) drop-shadow(0 0 32px rgba(200, 16, 46, 0.5)); transform: translateX(-50%) scale(1.35); }
}
.timeline-end-icon.end-pulse {
  animation: timeline-end-glow 2s ease-in-out infinite;
}

/* --- Founders --- */
.agentur-founders {
  max-width: var(--max-content);
  margin: 0 auto;
  text-align: center;
  padding-top: 100px; /* Increased to account for absolute icon */
}
.agentur-founders__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.agentur-founders__header h2 {
  color: var(--color-off-white);
  font-size: clamp(28px, 4vw, 42px);
  white-space: nowrap;
}
.agentur-founders__line {
  flex: 1;
  height: 2px;
  background: var(--color-red);
  min-width: 40px;
}
.agentur-founders__subtitle {
  color: var(--color-red);
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.agentur-founders__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
/* Sizing for the two <team-member> custom elements that sit inside
   the founders grid. Custom elements are inline by default — pin
   them to 330px the same width as .agentur-founders__card. */
.agentur-founders__grid team-member { display: block; width: 330px; flex-shrink: 0; }
.agentur-founders__card {
  position: relative;
  width: 330px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background-color: var(--color-dark);
}
.agentur-founders__heart {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 50px;
  padding: 10px;
  z-index: 3;
  background-color: var(--corner-bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 12px;
}
.agentur-founders__heart::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 0px;
  left: -20px;
  height: 20px;
  width: 20px;
  border-top-right-radius: 12px;
  box-shadow: 10px -10px 0 0 var(--corner-bg, #fff) !important;
  pointer-events: none;
  z-index: 4;
}
.agentur-founders__heart::after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: -20px;
  right: 0px;
  height: 20px;
  width: 20px;
  border-top-right-radius: 12px;
  box-shadow: 10px -10px 0 0 var(--corner-bg, #fff) !important;
  pointer-events: none;
  z-index: 4;
}
  content: "";
  position: absolute;
  background-color: transparent;
  top: 0px;
  left: -20px;
  height: 40px;
  width: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -15px 0 0 transparent;
  border: none;
}
.agentur-founders__heart-img-hover {
  display: none;
}
.agentur-founders__card:hover .agentur-founders__heart-img-normal {
  display: none;
}
.agentur-founders__card:hover .agentur-founders__heart-img-hover {
  display: block;
}
.agentur-founders__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.agentur-founders__card:hover .agentur-founders__photo {
  transform: scale(0.99);
  filter: blur(4px);
}
.agentur-founders__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(238, 238, 238, 0.5); /* #eeeeee81 equivalent */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.agentur-founders__card:hover .agentur-founders__overlay {
  opacity: 1;
}
.agentur-founders__info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.agentur-founders__card:hover .agentur-founders__info {
  opacity: 1;
}
.agentur-founders__info h3 {
  color: var(--color-black);
  font-size: 22px;
  margin-bottom: 0.25rem;
  text-align: left;
}
.agentur-founders__info p {
  color: #333;
  font-size: 16px;
  text-align: left;
}
.agentur-founders__loop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Zusammen stark (Partner section) --- */
.agentur-partner {
  background: var(--color-off-white);
  padding: 54px 0;
}
.agentur-partner__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--max-content);
  margin: 0 auto 2rem;
  flex-wrap: wrap;
}
.agentur-partner__header h2 {
  font-size: clamp(28px, 4vw, 42px);
  color: var(--color-black);
  white-space: nowrap;
}
.agentur-partner__line {
  flex: 1;
  height: 2px;
  background: var(--color-red);
  min-width: 40px;
}
.agentur-partner__label {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-black);
  white-space: nowrap;
}
.agentur-partner__desc {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
  color: var(--color-black);
  max-width: var(--max-content);
  margin: 0 auto 3rem;
}
.agentur-partner__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: var(--max-content);
  margin: 0 auto;
}
.agentur-partner__card {
  background: var(--color-black);
  border-radius: var(--border-radius);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.agentur-partner__card h3 {
  color: var(--color-red);
  font-size: 28px;
  margin-bottom: 0.5rem;
}
.agentur-partner__card p {
  color: var(--color-off-white);
  font-size: 18px;
  line-height: 1.6;
}

/* --- CTA Bar (red background) --- */
.agentur-cta {
  background: var(--color-red);
  padding: 80px 0;
  text-align: center;
}
.agentur-cta__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.agentur-cta h2 {
  color: var(--color-black);
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 1rem;
}
.agentur-cta p {
  color: var(--color-black);
  font-size: 20px;
  margin-bottom: 2rem;
}
.agentur-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.agentur-cta .cta-category-btn {
  background: transparent;
  border: 2px solid var(--color-black);
  border-radius: 100px;
  padding: 14px 40px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 220px;
  justify-content: center;
}
.agentur-cta .cta-category-btn:hover {
  background: var(--color-black);
  color: var(--color-off-white);
}

/* Button style for outline-white on dark bg */
.aceart-button--outline-white {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-off-white);
  border: 2px solid var(--color-off-white);
  border-radius: 100px;
  padding: 10px 24px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.aceart-button--outline-white:hover {
  background: var(--color-off-white);
  color: var(--color-black);
}
/* Bumps the trailing icon a touch further than the flex `gap: 6px`
   alone — matches the relaunch reference's icon-to-text rhythm. */
.aceart-button--outline-white img { margin-left: 6px; }

/* --- Agentur responsive --- */
@media (max-width: 980px) {
  .agentur-hero__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .agentur-hero__icon {
    width: 120px;
  }
  .agentur-hero__loop {
    width: 100px !important;
    height: 100px !important;
    bottom: -30px;
  }
  /* The global `.loop-img.turnjoke { animation: none }` (style.css, ≤980)
     stops the homepage hero/flip-card loops on mobile; re-enable it for the
     agentur decorative circles so the "APPS + SOFTWARE + WEBSITE" ring keeps
     turning. Equal specificity, later source → wins over the disable. */
  .agentur-hero__loop.turnjoke,
  .agentur-founders__loop .turnjoke {
    animation: turnSlow 20s linear infinite;
  }
  .agentur-images__col--left {
    margin-top: 0;
  }
  .agentur-dark .timeline-module {
    max-width: 90%;
    margin-left: 28px;
  }
  .agentur-founders__grid {
    gap: 1.5rem;
  }
  .agentur-founders__card {
    width: 260px;
  }
  .agentur-partner__cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .agentur-images__grid {
    grid-template-columns: 1fr;
  }
  .agentur-founders__card {
    width: 100%;
    max-width: 280px;
  }
  .agentur-founders__loop {
    display: none;
  }
  .agentur-cta__buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   WEBGL LIVE-DEMO (leistungen/webgl.html)
   Draggable Three.js card — see /assets/js/webgl-demo.js. The
   fallback text is shown by JS when WebGL isn't available.
============================================================ */
.webgl-demo {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 2.5 / 3.5;
  margin: 50px auto 0;
  border-radius: 18px;
  overflow: hidden;
  touch-action: none;
  background: #15151b;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.webgl-demo canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.webgl-demo__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--color-off-white);
  font-size: 15px;
  line-height: 1.5;
}
.webgl-demo__fallback[hidden] {
  display: none;
}
.webgl-demo__hint {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(17, 16, 22, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 640px) {
  .webgl-demo { max-width: 260px; margin-top: 36px; }
}