/* =====================================================================
   Roboto — self-hosted (DSGVO: kein Google-Fonts-Request, kein IP-Transfer).
   Variable Font (Gewichtsachse 100–900) je Subset. Ersetzt den frueheren
   @import von fonts.googleapis.com.
   ===================================================================== */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   ULT Laserspeed OEM — Version 2 (Ascon-naher Editorial-Stil)
   Eigenständiges Stylesheet. ULT-Design-Tokens für Farben/Typo/Buttons,
   aber freies Layout mit Card-Overlap, Number-Circles, viel Whitespace.
   ===================================================================== */

:root {
  --font-size: 16px;
  --text-h1: 55px;
  --text-h2: 35px;
  --text-h3: 25px;
  --text-h4: 23px;
  --text-base: 16px;
  --text-sm: 14px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --background: #FFFFFF;
  --foreground: #004EA8;
  --card: #FFFFFF;
  --primary: #E5007D;
  --primary-foreground: #FFFFFF;
  --secondary: #004EA8;
  --secondary-foreground: #FFFFFF;
  --muted: #E5E5E5;
  --muted-foreground: #999999;
  --accent: #FF25A8;
  --border: #004EA8;
  --ring: #004EA8;

  --chart-1: #E5007D;
  --chart-2: #36B7FF;
  --chart-3: #79CFFF;
  --chart-4: #BCE7FF;
  --chart-5: #DEF3FF;

  --cyan-bar: #009FE2;

  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  --elevation-sm: 0px 0px 30px 0px rgba(0, 0, 0, 0.12);
  --elevation-md: 0px 12px 40px 0px rgba(0, 0, 0, 0.10);

  /* V2-spezifisch: noch ruhigerer Editorial-Rhythmus */
  --container: 1400px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(3.5rem, 6vw, 6rem);

  /* Hintergrundfarbe für Sektionen mit ruhiger Bühne (statt reinem Weiß) */
  --canvas: #DEF3FF;
}

* , *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Full-bleed-Sektionen (z. B. .quote-stage) brechen per width:100vw aus dem
     Container aus. 100vw schliesst die vertikale Scrollbar-Breite mit ein, wodurch
     der Inhalt um genau die Scrollbar-Breite ueberlaeuft -> stoerende horizontale
     Scrollleiste. Die horizontale Achse cappen entfernt den Ueberlauf.
     `clip` statt `hidden`, damit KEIN Scroll-Container entsteht und position:sticky
     (Navigation, Hero) unveraendert funktioniert. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 0;
  color: var(--foreground);
  letter-spacing: -0.015em;
  line-height: 1.08;
}
p { margin: 0; }

/* =====================================================================
   Container & Sektion-Rhythmus
   ===================================================================== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--canvas { background: var(--canvas); }
.section--blue   { background: var(--secondary); color: var(--secondary-foreground); }
.section--blue h1,
.section--blue h2,
.section--blue h3 { color: var(--secondary-foreground); }

/* =====================================================================
   Navigation
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 0;
  box-shadow: rgba(0, 78, 168, 0.1) 0px 2px 15px 0px;
}
.nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(0.85rem, 1.2vw, 1.1rem) var(--gutter);
  display: flex; align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  line-height: 0;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: auto;
  height: clamp(36px, 4vw, 56px);
  display: block;
}
.nav-logo:hover { color: var(--primary); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nav-list {
  display: none; list-style: none; padding: 0; margin: 0;
  gap: clamp(1rem, 2vw, 2rem);
  flex: 1;
  justify-content: flex-start;
  margin-left: clamp(1.5rem, 3vw, 3.5rem);
}
.nav-list a {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--foreground);
  white-space: nowrap;
}
.nav-list a:hover { color: var(--primary); }

/* Rechts-Cluster: Sprache (Globe-Icon) */
.nav-utils {
  display: none;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.5rem);
  flex-shrink: 0;
}
.nav-icon {
  background: transparent;
  border: 0;
  padding: 0.35rem;
  cursor: pointer;
  color: var(--foreground);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color .2s ease, background .2s ease;
}
.nav-icon svg { width: 22px; height: 22px; display: block; }
.nav-icon:hover { color: var(--primary); }

.nav-cta { flex-shrink: 0; margin-left: auto; }
.nav-cta.btn {
  min-height: 42px;
  padding: 0.55rem 0.95rem;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

/* Unter Tablet-Größe CTA ausblenden, damit Logo + Hamburger sauber bleiben.
   Höhere Specificity via .nav .nav-cta, damit es .btn { display: inline-flex } überschreibt. */
@media (max-width: 599px) {
  .nav .nav-cta { display: none; }
}

.nav-toggle {
  background: transparent; border: 0; padding: 0.5rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--foreground);
}
.nav-toggle-burger {
  display: inline-flex; flex-direction: column; gap: 5px;
}
.nav-toggle-burger span { width: 26px; height: 1.5px; background: currentColor; display: block; }
.nav-toggle-close {
  display: none;
  width: 26px; height: 26px;
  background-color: currentColor;
  -webkit-mask-image: url('../icons/icon-close.svg');
          mask-image: url('../icons/icon-close.svg');
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
}
/* Wenn das Menü aufgeklappt ist: Burger ausblenden, Close-Icon zeigen */
.nav.is-open .nav-toggle-burger { display: none; }
.nav.is-open .nav-toggle-close { display: inline-block; }

@media (min-width: 1200px) {
  .nav-list, .nav-utils { display: inline-flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Ab 1400 kommen Globe- und Such-Icon dazu, Button etwas größer */
@media (min-width: 1400px) {
  .nav-icon { display: inline-flex; }
  .nav-cta.btn {
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    font-size: 14px;
  }
}

.nav.is-open .nav-list {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column;
  background: #FFFFFF;
  padding: 1.25rem var(--gutter);
  border-bottom: 0;
  gap: 0.75rem;
  margin-left: 0;
  box-shadow: rgba(0, 78, 168, 0.1) 0px 2px 15px 0px;
}

/* =====================================================================
   Buttons (ULT-Slide-Bar-Pattern)
   ===================================================================== */
.btn {
  --bg: var(--primary);
  --fg: var(--primary-foreground);
  --bd: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.875rem 1.75rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .2s ease-out, border-color .2s ease-out, filter .2s ease;
}
.btn .slide {
  position: absolute; inset: 0 auto 0 -1px;
  width: 1px; background: var(--accent);
  transition: width .3s ease-out; z-index: -1;
}
.btn > span:not(.slide) { position: relative; z-index: 1; }
.btn:hover .slide { width: 100%; }
.btn:active { filter: brightness(0.9); }

.btn--outline-blue {
  --bg: transparent; --fg: var(--foreground); --bd: var(--foreground);
}
.btn--outline-blue:hover { color: #FFFFFF; border-color: var(--primary); }
.btn--outline-white {
  --bg: transparent; --fg: #FFFFFF; --bd: rgba(255,255,255,0.7);
}
.btn--outline-white:hover { border-color: var(--primary); }

/* Weiße Variante: weiße Fläche, Magenta Schrift + Border (für blaue Sektionen) */
.btn--white {
  --bg: var(--card); --fg: var(--primary); --bd: var(--primary);
}
.btn--white:hover { color: var(--card); }

/* Download-Icon im Button — wird NACH dem Text gerendert, Farbe = currentColor */
.btn .btn-icon-dl {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: url('../icons/icon-download.svg');
          mask-image: url('../icons/icon-download.svg');
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.btn--ghost {
  --bg: transparent; --fg: var(--foreground); --bd: transparent;
  min-height: 0; padding: 0.5rem 0;
  text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 14px;
}
.btn--ghost::after { content: " →"; transition: transform .2s ease-out; }
.btn--ghost:hover::after { transform: translateX(4px); }
.btn--ghost:hover { color: var(--primary); }
/* Wenn ein Download-Icon im Ghost-Button steht, den Pfeil ausblenden
   (es soll nur EIN Icon je Button geben). */
.btn--ghost:has(.btn-icon-dl)::after { content: none; }

/* =====================================================================
   Editorial-Grid: Headline links, Body rechts (Asymmetrisch, eng beieinander)
   ===================================================================== */
.editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  align-items: start;
}
.editorial .editorial-head {
  grid-column: 1;
}
.editorial .editorial-body {
  grid-column: 1;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.65;
  color: var(--foreground);
  opacity: 0.85;
}

/* CTA-Pärchen direkt unter dem Body-Text */
.editorial-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  opacity: 1; /* gegen das opacity: 0.85 vom editorial-body */
}
@media (min-width: 900px) {
  .editorial {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
  }
  .editorial .editorial-head { grid-column: 1; }
  .editorial .editorial-body { grid-column: 2; padding-bottom: 0.6rem; }
}

/* Number-Bubble (kleiner Magenta-Kreis vor jeder Section-Headline) */
.sec-num {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: 13px; font-weight: 400;
  color: var(--foreground); opacity: 0.7;
  letter-spacing: 0.04em;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
.sec-num .circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  color: var(--primary);
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0;
}
.sec-num .label {
  text-transform: none;
  font-weight: 400;
}
/* Nummer + Tagline sind seit 13.10.2026 auf allen Sektionen ausgeblendet.
   Markup bleibt erhalten; zum Einblenden diese Regel entfernen. */
.sec-num { display: none; }

/* Headlines V2 — leiseres Letter-Spacing, sehr großes Display */
h1.display {
  font-size: clamp(40px, 5.5vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 18ch;
}
h2.display {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 20ch;
}
h3.display {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 400;
}
em.brand {
  font-style: normal;
  color: var(--primary);
}

/* =====================================================================
   HERO V2
   - Editorial Grid: Headline links, kleiner Body rechts
   - Scroll-Indicator unten links
   - Bottom-Tagline mittig
   - Full-Width Hero-Foto darunter
   ===================================================================== */
.hero-v2 {
  position: relative;
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  min-height: clamp(420px, 60vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-v2 .container {
  position: relative;
  z-index: 2;
}

/* Vollflächiges Hintergrund-Video für beliebige Sektionen */
.section--has-video {
  position: relative;
  overflow: hidden;
}

/* Dezenter Play/Pause-Toggle für das Hintergrund-Video. Steht im
   Editorial-Body: mobil rechts unter dem Einleitungstext, ab 900 px in
   derselben Zeile rechts neben dem Text (kein eigener Leerraum). */
.video-controls {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
.section--has-video .editorial-body { opacity: 1; }
.section--has-video .editorial-body > p { opacity: 0.85; }
@media (min-width: 900px) {
  .section--has-video .editorial-body {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
  .section--has-video .editorial-body > p { max-width: 56ch; }
  .video-controls { margin-top: 0; flex-shrink: 0; }
}
.video-toggle {
  /* Outline-Blau-Tokens: dezent im Ruhezustand (transparent + ULT-Blau-Rand
     & Icon), Magenta-Slide-Fill auf Hover wie .btn--outline-blue. */
  --bg: transparent;
  --fg: var(--foreground);
  --bd: var(--foreground);
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .2s ease-out, border-color .2s ease-out, filter .2s ease;
}
.video-toggle:hover {
  color: #FFFFFF;
  border-color: var(--primary);
}
/* Hover-Slide: füllt von links nach rechts mit --accent (hellerer Magenta-Ton),
   identisch zu .btn .slide bei .btn--primary */
.video-toggle .slide {
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 1px;
  background: var(--accent);
  transition: width .3s ease-out;
  z-index: -1;
}
.video-toggle:hover .slide { width: 100%; }
.video-toggle:active { filter: brightness(0.9); }
.video-toggle:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}
.video-toggle > svg {
  position: relative;
  z-index: 1;
}
.video-toggle-icon {
  width: 16px;
  height: 16px;
  display: block;
}
/* Default: Video läuft → Pause-Icon sichtbar, Play versteckt */
.video-toggle .icon-play { display: none; }
.video-toggle .icon-pause { display: block; }
/* Wenn pausiert: Play-Icon sichtbar, Pause versteckt */
.video-toggle.is-paused .icon-play { display: block; }
.video-toggle.is-paused .icon-pause { display: none; }
.section--has-video > .container {
  position: relative;
  z-index: 2;
}
.section-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Gespiegelte Variante (Vertrauen), damit das Rauchspiel nicht wie eine
   Wiederholung der Partner-Sektion wirkt */
.section-video-bg--mirrored { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .section-video-bg { display: none; }
}
/* Lesbarkeits-Wash: aufhellender Verlauf, damit Headlines, Body und
   Karten gegen das Rauchspiel sicher kontrastieren */
.section-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.2) 35%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0.4) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.25) 100%);
}
/* Hero: H1 nimmt 2/3 der Inhaltsbreite, Body + CTAs sitzen rechts auf 1/3.
   H1 startet linksbündig am Container-Rand (wie die Nav darüber),
   Body-Spalte endet rechts am Container-Rand (wie die CTA in der Nav). */
.hero-v2 .editorial { align-items: end; }
.hero-v2 .editorial-body { max-width: none; }
@media (min-width: 900px) {
  .hero-v2 .editorial { grid-template-columns: 2fr 1fr; }
}
.hero-v2 .hero-cta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 1.5rem;
}

.hero-tagline {
  margin-top: clamp(3rem, 5vw, 5rem);
  margin-bottom: clamp(2rem, 3vw, 3rem);
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--foreground);
}
.scroll-down {
  position: absolute;
  left: 50%; bottom: clamp(2rem, 4vw, 3rem);
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,78,168,0.4);
  display: grid; place-items: center;
  color: var(--foreground);
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.scroll-down:hover { transform: translateX(-50%) translateY(2px); }
.scroll-down:hover { border-color: var(--primary); color: var(--primary); }
.scroll-down svg { width: 14px; height: 14px; }

/* =====================================================================
   HERO-BILD — Full-Bleed Visual unter dem Hero
   ===================================================================== */
.hero-image {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Mobile-Fallback-Bild für die Storytelling-Sektion.
   Default: versteckt; wird ab <600 px sichtbar (siehe @media unten). */
.hero-image-static-mobile {
  display: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.hero-image-static-mobile > img:not(.ki-marker) {
  display: block;
  width: 100%;
  height: auto;
}

/* Fallback (noscript / Browser ohne Canvas-Support) */
.hero-image > img.hero-image-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  vertical-align: top;
}

/* Scroll-Animation: Section wird zur „Scroll-Spur" und pinnt
   das Visual am oberen Viewport-Rand, während die Frames durchlaufen. */
.hero-image--scroll {
  position: relative;
  /* Spurlänge bestimmt, wieviel Scroll man zum Durchlaufen aller Frames
     braucht. ~200vh = bequemer, langsamer Durchlauf. */
  height: 220vh;
}
.hero-image-track {
  position: relative;
  height: 100%;
  width: 100%;
}
.hero-image-sticky {
  position: sticky;
  top: 0;
  bottom: auto;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--secondary);
}
/* Canvas füllt komplett den 100-vh-Sticky-Container (volle Viewport-Höhe).
   Object-fit: cover beschneidet seitlich/vertikal, damit kein Weißraum
   entsteht und die Header-Inhalte komplett überdeckt werden. */
.hero-image-sticky > canvas.hero-image-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--secondary);
}

/* Reduced motion: keine 220vh-Spur, statisches Bild reicht */
@media (prefers-reduced-motion: reduce) {
  .hero-image--scroll { height: auto; }
  .hero-image-track   { height: auto; }
  .hero-image-sticky  {
    position: static;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .hero-image-sticky > canvas.hero-image-media {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}


/* =====================================================================
   Card-Overlap-Pattern (Kernidee aus Ascon)
   ===================================================================== */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.stage-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 30% 70%, rgba(0,78,168,0.45) 0%, transparent 70%),
    linear-gradient(135deg, #6e7e8c 0%, #3a4a5c 100%);
  margin: 0;
}
.stage-photo > img:not(.ki-marker) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bild-Variante auf Wash-Hintergrund: helle Bühne, Bild nicht beschneiden, kein Gradient dahinter */
.stage-photo--wash {
  background: var(--chart-5);
}
.stage-photo--wash > img:not(.ki-marker) {
  object-fit: contain;
  padding: clamp(1rem, 2vw, 2rem);
}
/* Bild-Variante „bleed": volle Inhaltsbreite, natürliches Seitenverhältnis, kein Hintergrund */
.stage-photo--bleed {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
  position: relative;
}
.stage-photo--bleed > img:not(.world-map-dots):not(.ki-marker) {
  position: static;
  width: 100%;
  height: auto;
  object-fit: initial;
  padding: 0;
}

/* OEM-Partner-Standorte als SVG-Overlay auf der Weltkarte.
   Die SVG-Datei ist proportional auf das Weltkarten-Foto abgestimmt;
   per object-fit: fill liegt sie exakt darüber. */
.stage-photo--bleed > img.world-map-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.stage-photo:not(:has(> img))::after {
  content: attr(data-caption);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.45);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1rem; text-align: center;
}

/* Card-Shelf: Reihe von 3 weißen Karten, ggf. über Foto liegend */
.card-shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  position: relative;
  z-index: 2;
  margin-top: -2rem;
}
@media (min-width: 760px) {
  .card-shelf { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .card-shelf { grid-template-columns: repeat(3, 1fr); margin-top: -5rem; }
}
/* 4-Spalten-Variante (z. B. Fast Change Process mit 4 Schritten) */
.card-shelf--4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  position: relative;
  z-index: 2;
  margin-top: -2rem;
}
@media (min-width: 760px)  { .card-shelf--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .card-shelf--4 { grid-template-columns: repeat(4, 1fr); margin-top: -5rem; } }

.feature-card {
  background: var(--card);
  padding: 2rem 1.75rem;
  /* gleicher Rundum-Schatten wie die Karten in „Nutzen für den Partner“ */
  box-shadow: var(--elevation-sm);
  display: flex; flex-direction: column;
  gap: 0.85rem;
  position: relative;
}
.feature-card .ficon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.feature-card .ficon svg { width: 100%; height: 100%; }
.feature-card h3 {
  font-size: 22px; line-height: 1.2;
  font-weight: 400;
  color: var(--foreground);
}
.feature-card p {
  font-size: 16px; line-height: 1.6;
  color: var(--foreground); opacity: 0.85;
}

/* Argument-Raster (Vertrauen): vier Karten unter der Headline,
   ohne Foto-Overlap wie bei .card-shelf */
.argument-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 760px)  { .argument-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .argument-grid { grid-template-columns: repeat(4, 1fr); } }
/* Icons wie bei den Technologie-Kacheln: SVG in ULT-Blau als Hintergrund */
.argument-grid .ficon {
  width: 64px; height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0.5rem;
}
.argument-grid .ficon--konstruktion   { background-image: url('../icons/icon-konstruktion.svg'); }
.argument-grid .ficon--veraenderung   { background-image: url('../icons/icon-veraenderung.svg'); }
.argument-grid .ficon--baukasten      { background-image: url('../icons/icon-baukasten.svg'); }
.argument-grid .ficon--folgegeschaeft { background-image: url('../icons/icon-folgegeschaeft.svg'); }

/* Stage-Layout-Varianten: Foto rechts oder links */
.stage--right .stage-photo { grid-column: 1; }
.stage--right .card-shelf,
.stage--right .card-shelf--4 { grid-column: 1; }
@media (min-width: 1100px) {
  .stage {
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    gap: 0;
  }
  .stage--right .stage-photo { grid-column: 2; grid-row: 1; }
  .stage--right .card-shelf,
  .stage--right .card-shelf--4  { grid-column: 1 / span 2; grid-row: 2; margin-top: -10rem; }
  .stage--left  .stage-photo { grid-column: 1; grid-row: 1; }
  .stage--left  .card-shelf,
  .stage--left  .card-shelf--4  { grid-column: 1 / span 2; grid-row: 2; margin-top: -10rem; }
}
/* Tight-Top: Stage direkt unter der Headline – auf Mobile noch etwas Abstand,
   ab Desktop bündig (0 px) */
.stage--tight-top { margin-top: clamp(1rem, 2vw, 2rem); }
@media (min-width: 1100px) {
  .stage--tight-top { margin-top: 0; }
}

/* Stacked-Variante: Foto über Karten in voller Inhaltsbreite */
.stage--stacked { grid-template-columns: 1fr; }
.stage--stacked .stage-photo {
  grid-column: 1; grid-row: 1;
  position: relative;
  z-index: 1;
}
.stage--stacked .card-shelf,
.stage--stacked .card-shelf--4,
.stage--stacked .stat-card {
  grid-column: 1; grid-row: 2;
  margin-top: clamp(2rem, 3vw, 3rem);
  position: relative;
  z-index: 2;
}
/* Auf Tablet leichten Überlapp ins Bild, auf Desktop deutlicher */
@media (min-width: 760px) {
  .stage--stacked .stat-card {
    margin-top: clamp(-4rem, -5vw, -2rem);
  }
}
@media (min-width: 1100px) {
  .stage--stacked .stat-card {
    margin-top: clamp(-14rem, -11vw, -6rem);
  }
}

/* Weltweit im Einsatz: Desktop (ab 900 px) zeigt die kompakte Variante
   (#weltweit-kompakt), darunter die ursprüngliche (#weltweit) mit Karte
   oben und Kennzahlen-Kachel darunter. Entscheidung 15.10.2026. */
@media (min-width: 900px) { #weltweit { display: none; } }
@media (max-width: 899px) { #weltweit-kompakt { display: none; } }

/* =====================================================================
   WELTWEIT KOMPAKT — Kennzahlen ohne Kachel links (untereinander),
   Weltkarte rechts. Ab 900 px 12-Spalten-Raster: Zahlen in 2/3 von
   Spalte 1–4, Karte Spalte 3–13, die Zahlen ragen leicht in die Karte.
   Darunter: Karte oben, Zahlen nebeneinander darunter.
   ===================================================================== */
.ww-compact {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.ww-map {
  position: relative;
  margin: 0;
  grid-row: 1;
}
.ww-map > img:not(.world-map-dots) { display: block; width: 100%; height: auto; }
.ww-map > img.world-map-dots {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
}
/* Zahlen ohne Kachel: kein Hintergrund, kein Schatten, kein Innenabstand.
   Mobil stehen sie unter der Karte (ohne Überlappung, da ohne Fläche). */
.ww-compact .stat-card {
  grid-row: 2;
  z-index: 2;
  margin-top: 1.5rem;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
/* Zahlen behalten beim Hochzählen ihre Breite */
.ww-compact .stat-num { font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .ww-compact {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }
  .ww-map { grid-column: 3 / 13; grid-row: 1; }
  .ww-compact .stat-card {
    grid-column: 1 / 5; grid-row: 1;
    width: 66.667%;
    margin-top: 0;
  }
  .stat-card.stat-card--stacked {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2vw, 1.75rem);
    padding: 0;
  }
  .stat-card.stat-card--stacked .stat-col { padding: 0; gap: 0.5rem; }
  .stat-card.stat-card--stacked .stat-col + .stat-col { border-left: 0; }
  .stat-card.stat-card--stacked .stat-num { font-size: clamp(40px, 4vw, 60px); }
}

/* =====================================================================
   STAT-CARD — Zusammengesetzte Kennzahlen-Kachel (3 Spalten, ein Block)
   Hellblauer Hintergrund (chart-5), dünne blaue Trennlinien, große
   Zahlen im ULT-Blau, „+" in Magenta.
   ===================================================================== */
.stat-card {
  background: var(--card);
  box-shadow: var(--elevation-md);
  padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.75rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.stat-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}
.stat-col + .stat-col {
  border-left: 1px solid rgba(0, 78, 168, 0.25);
}
.stat-col:first-child { padding-left: 0; }
.stat-col:last-child  { padding-right: 0; }
.stat-num {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--foreground);
  display: inline-flex;
  align-items: baseline;
}
.stat-num .stat-plus {
  color: var(--foreground);
  font-weight: 400;
  margin-left: 0.05em;
}
.stat-lbl {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--foreground);
  opacity: 0.85;
}
.stat-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--foreground);
  opacity: 0.85;
  max-width: 36ch;
  margin: 0;
}
/* Stat-Card-Layout ist jetzt durchgehend 3-spaltig (auch responsive) */

/* =====================================================================
   QUOTE-STAGE — Hintergrund-Foto in voller Viewport-Breite mit Quote-Card.
   Stat-Card oben überdeckt das Bild um ca. 32 px – Stat-Card-Schatten
   wird dadurch direkt auf dem Bild sichtbar.
   ===================================================================== */
.quote-stage {
  position: relative;
  z-index: 1;
  margin-top: -32px;
  /* Full-bleed: bricht aus dem Container heraus auf 100 vw */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.quote-bg {
  display: block;
  width: 100%;
  height: auto;
}
.quote-card {
  position: relative;
  background: var(--card);
  box-shadow: var(--elevation-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  max-width: clamp(320px, 36vw, 480px);
  margin: -2rem var(--gutter) 0;
  z-index: 2;
}
.quote-card blockquote {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: var(--font-weight-normal);
  line-height: 1.35;
  color: var(--foreground);
}
.quote-card cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--foreground);
  opacity: 0.7;
}

/* Ab Tablet: Card schwebt links unten über dem Bild, ausgerichtet am Container */
@media (min-width: 760px) {
  .quote-card {
    position: absolute;
    top: auto;
    bottom: clamp(2.5rem, 7vw, 7rem);
    left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    margin: 0;
  }
}

/* =====================================================================
   PRODUCTS V2 — Editorial-Anordnung
   ===================================================================== */
/* =====================================================================
   PRODUCT-SLIDER — Full-Bleed 16:9-Banner mit Tab-Navigation am Boden
   Auto-rotierend, klickbare Tabs, weiße Progress-Linie über dem aktiven
   Tab, Caption-Box links unten pro Slide.
   ===================================================================== */
/* Produktportfolio: kein Bottom-Padding, damit Slider bündig zur nächsten Sektion sitzt */
#produkte { padding-bottom: 0; }

.product-slider {
  position: relative;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  margin-bottom: 0;
  aspect-ratio: 16 / 9;
  background: var(--secondary);
  overflow: hidden;
  isolation: isolate;
}

.ps-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ps-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.ps-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.ps-slide > img:not(.ki-marker) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dezenter dunkler Bodenverlauf für Lesbarkeit der Tab-Navigation */
.product-slider::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Tab-Navigation am unteren Rand */
.ps-nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.ps-tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: clamp(1rem, 1.6vw, 1.6rem) clamp(1rem, 2vw, 1.75rem);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  font: inherit;
  transition: color .2s ease;
  /* Min-Höhe für alle Tabs reservieren, damit das Layout nicht
     springt, wenn der aktive Tab seinen Untertext einblendet. */
  min-height: clamp(4.5rem, 6vw, 5.5rem);
}
.ps-tab-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ps-tab-sub {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .35s ease, max-height .35s ease;
}
.ps-tab.is-active .ps-tab-sub {
  opacity: 1;
  max-height: 4em;
}
.ps-tab:hover,
.ps-tab.is-active { color: #FFFFFF; }
.ps-tab:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
}

/* Dünne weiße Spur oben am Tab + Magenta-Progress beim aktiven Tab */
.ps-tab-bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.ps-tab-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--primary);
}
.ps-tab.is-active .ps-tab-bar-fill {
  animation: ps-progress var(--ps-duration, 6s) linear forwards;
}
@keyframes ps-progress {
  from { width: 0; }
  to   { width: 100%; }
}

.ps-tab-label {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Reduced motion: keine Übergänge, keine Auto-Progress-Animation */
@media (prefers-reduced-motion: reduce) {
  .ps-slide { transition: none; }
  .ps-tab.is-active .ps-tab-bar-fill { animation: none; width: 100%; }
}

.products-shelf {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 4vw, 4rem);
}
.products-row h3 {
  font-size: clamp(20px, 1.6vw, 22px);
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}
.products-row .row-kicker {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.product-tile {
  display: flex; flex-direction: column;
  text-decoration: none;
}
.product-tile .tile-img {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(80% 60% at 50% 60%, rgba(0,78,168,0.18), transparent 70%),
    var(--chart-5);
  position: relative;
  overflow: hidden;
}
/* Fake-Silhouette nur bei leeren Tiles (Platzhalter ohne <img>) */
.product-tile .tile-img:not(:has(> img))::after {
  content: "";
  position: absolute;
  inset: 26% 30%;
  background: linear-gradient(180deg, var(--secondary), #00337a);
  box-shadow: var(--elevation-sm);
  transition: transform .5s ease-out;
}
.product-tile:hover .tile-img:not(:has(> img))::after { transform: scale(1.05); }

/* Echtes Produktbild: vollflächig, mit etwas Atemraum, contain (nichts beschneiden) */
.product-tile .tile-img > img:not(.ki-marker) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(0.5rem, 2.5%, 1.25rem);
  transition: transform .5s ease-out;
  display: block;
}
.product-tile:hover .tile-img > img:not(.ki-marker) { transform: scale(1.05); }
.product-tile .accent-line { height: 4px; width: 0; background: var(--primary); transition: width .5s ease-out; }
.product-tile:hover .accent-line { width: 100%; }
.product-tile .tile-body { padding: 1rem 0 0; }
.product-tile h4 {
  font-size: 18px; font-weight: 700;
  margin: 0 0 0.35rem;
}
.product-tile p {
  font-size: 16px; line-height: 1.5;
  color: var(--foreground); opacity: 0.85;
}

/* =====================================================================
   TECHNOLOGIES V2 — Slider + Card-Stack
   Slider: 4 Bilder, Auto-Cycle 3 s, Magenta-Progress-Bar oben.
   Karten unter dem Bild aktivieren auf Hover/Focus das passende Bild.
   ===================================================================== */
.tech-slider {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Bühne mit allen Slides – Aspect matched die Bilder (1.89:1),
   damit die Höhe nicht abgeschnitten wird */
.tech-stage {
  position: relative;
  aspect-ratio: 1.81 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--secondary);
}
.tech-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease-out;
  pointer-events: none;
}
.tech-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.tech-slide img:not(.ki-marker) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption mittig in der Bildhöhe, links ausgerichtet */
.tech-slide-caption {
  position: absolute;
  top: 50%;
  left: clamp(1.5rem, 5vw, 5rem);
  right: clamp(1.5rem, 5vw, 5rem);
  transform: translateY(-50%);
  color: #FFFFFF;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tech-slide-tag {
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0;
  color: #FFFFFF;
  opacity: 0.95;
}
.tech-slide-name {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: #FFFFFF;
}

/* Magenta-Progress-Bar oben auf dem Bild */
.tech-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 3;
}
.tech-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--primary);
  transform-origin: left center;
}
.tech-progress-fill.is-running {
  animation: tech-progress 3000ms linear forwards;
}
@keyframes tech-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Karten unter der Bühne – überlappen den Slider von unten um 32 px */
.tech-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: -32px;
  position: relative;
  z-index: 2;
}
@media (min-width: 760px)  { .tech-stack { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .tech-stack { grid-template-columns: repeat(4, 1fr); } }
.tech-tile {
  background: var(--card);
  border: 1px solid rgba(0,78,168,0.08);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tech-tile:hover,
.tech-tile:focus-visible,
.tech-tile.is-active {
  box-shadow: 0 4px 24px rgba(0, 78, 168, 0.08);
}
/* Magenta Top-Linie wächst von links nach rechts – wie in Produktportfolio.
   Sitzt bündig am Rand und überdeckt die 1-px-Border. */
.tech-tile::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 0;
  height: 3px;
  background: var(--primary);
  transition: width .5s ease-out;
}
.tech-tile:hover::before,
.tech-tile:focus-visible::before,
.tech-tile.is-active::before {
  width: calc(100% + 2px);
}

/* Tech-Icons als Hintergrund-SVG (rendert in den Original-Farben aus der Datei = ULT-Blau) */
.tech-tile .ficon {
  width: 64px; height: 64px;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tech-tile .ficon--ecoflow   { background-image: url('../icons/icon-ecoflow.svg'); }
.tech-tile .ficon--silent    { background-image: url('../icons/icon-silent.svg'); }
.tech-tile .ficon--filtermax { background-image: url('../icons/icon-filtermax.svg'); }
.tech-tile .ficon--prosight  { background-image: url('../icons/icon-prosight.svg'); }

/* Kategoriezeile über dem Technologienamen (wie .fcp-tab-kicker) */
.tech-tile .tech-tile-tag {
  font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--foreground); opacity: 0.7;
  margin-bottom: -0.5rem;
}
.tech-tile h3 {
  font-size: 22px; font-weight: 400; line-height: 1.2;
}
.tech-tile p {
  font-size: 16px; line-height: 1.55;
  color: var(--foreground); opacity: 0.85;
}

/* Reduzierte Bewegung: keine Animation, statisch erste Bühne */
@media (prefers-reduced-motion: reduce) {
  .tech-slide { transition: none; }
  .tech-progress-fill.is-running { animation: none; width: 100%; }
}

/* =====================================================================
   FORMULAR-BAUSTEINE
   Generische Feld-, Zeilen- und Consent-Regeln. Bewusst ohne Bindung an
   eine konkrete Sektion, damit jedes Formular sie wiederverwenden kann.
   ===================================================================== */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--foreground);
}
.field input, .field select {
  width: 100%;
  background: #FFFFFF;
  color: var(--foreground);
  border: 1px solid rgba(0,78,168,0.3);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  min-height: 48px;
  font-size: var(--text-base);
  font-family: 'Roboto', sans-serif;
  appearance: none;
}
.field input:focus, .field select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,78,168,0.18);
  border-color: var(--ring);
}
.field-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } }
.consent { font-size: 13px; line-height: 1.5; display: flex; gap: 0.6rem; align-items: flex-start; opacity: 0.85; }
.consent input { transform: translateY(3px); accent-color: var(--primary); }

/* =====================================================================
   CASE STUDY (Eurolaser Polska) — Editorial-Slider
   Tab-Liste links (2/3) mit vertikaler Magenta-Balken-Animation wie FCP,
   Bild-Stack rechts (1/3) mit Crossfade. CTA unten links verankert.
   ===================================================================== */
.cs-slider {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 4vw, 4rem);
  align-items: stretch;
}
@media (min-width: 1000px) {
  .cs-slider { grid-template-columns: 2fr 1fr; gap: clamp(2.5rem, 4vw, 4.5rem); }
}

.cs-text { display: flex; flex-direction: column; }
.cs-tabs { display: flex; flex-direction: column; min-height: 34rem; }
.cs-tab {
  position: relative;
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  align-items: stretch;
  text-align: left;
  background: transparent;
  border: 0;
  padding: clamp(1.25rem, 2vw, 1.5rem) 0;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  width: 100%;
}
/* Dünne Trennlinie zwischen den Tabs (nicht am ersten und letzten) */
.cs-tab + .cs-tab { border-top: 1px solid rgba(0, 78, 168, 0.15); }
.cs-tab-bar {
  position: relative;
  width: 2px;
  background: rgba(0, 78, 168, 0.22);
  border-radius: 1px;
  overflow: hidden;
  align-self: stretch;
}
.cs-tab-bar-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;
  background: var(--primary);
  border-radius: 1px;
}
.cs-tab.is-active .cs-tab-bar-fill {
  animation: cs-progress 5500ms linear forwards;
}
@keyframes cs-progress {
  from { height: 0; }
  to   { height: 100%; }
}

.cs-tab-content { display: flex; flex-direction: column; gap: 0.4rem; }
.cs-tab-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foreground);
  opacity: 0.55;
  transition: color .25s ease, opacity .25s ease;
}
.cs-tab.is-active .cs-tab-kicker { opacity: 1; color: var(--primary); }
.cs-tab-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: var(--foreground);
  opacity: 0.7;
  transition: opacity .25s ease;
}
.cs-tab.is-active .cs-tab-title { opacity: 1; }
.cs-tab:hover .cs-tab-title { opacity: 1; }

/* Body-Collapse mittels grid-row Trick */
.cs-tab-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
  overflow: hidden;
}
.cs-tab-body > div { min-height: 0; }
.cs-tab-body p {
  margin-top: 0.6rem;
  font-size: 16px;
  line-height: 1.55;
  color: var(--foreground);
  opacity: 0.85;
}
.cs-tab-body cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary);
}
.cs-tab.is-active .cs-tab-body { grid-template-rows: 1fr; }

/* Bild-Stack rechts — Crossfade, kein Schatten.
   align-self: start verhindert vertikales Stretchen durch die hohe Tabs-Spalte,
   damit das aspect-ratio nicht in eine zu große Breite umkippt. */
.cs-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--chart-4);
  margin: 0;
  width: 100%;
  align-self: start;
}
.cs-visual img:not(.ki-marker) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease-out;
}
.cs-visual img.is-active { opacity: 1; }

/* Case-Study-Slider: KI-Marker wird ausgeblendet, solange das Team-Foto
   (idx 0, kein KI-Bild) das aktive Slide ist. */
.cs-visual .ki-marker {
  transition: opacity .6s ease-out;
  opacity: 1;
}
.cs-visual:has(> img[data-idx="0"].is-active) .ki-marker {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cs-visual .ki-marker { transition: none; }
}

/* CTA-Button unten in der Text-Spalte verankert (springt nicht beim Tab-Wechsel) */
.cs-cta-row {
  display: flex;
  margin-top: auto;
  padding-top: clamp(2rem, 3vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  .cs-tab.is-active .cs-tab-bar-fill { animation: none; height: 100%; }
  .cs-tab-body { transition: none; }
  .cs-visual img:not(.ki-marker) { transition: none; }
}

/* =====================================================================
   CASE STUDY V2 (alt) — Editorial mit Hero-Foto + überlappender 3-Spalten-Card
   Pattern identisch zum Vertrauen-Stat-Card-Overlap.
   Typografie strikt nach ULT-Design-System.
   ===================================================================== */
.cs-stage {
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

/* Hero-Foto in voller Container-Breite, natürliches Seitenverhältnis */
.cs-photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  grid-column: 1; grid-row: 1;
}
.cs-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.cs-tag {
  position: absolute;
  left: 1.25rem; bottom: 1.25rem;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.45rem 0.8rem;
}

/* Weiße Card mit 3 Spalten, überlappt das Bild von unten */
.cs-card {
  grid-column: 1; grid-row: 2;
  position: relative;
  z-index: 2;
  background: var(--card);
  box-shadow: var(--elevation-md);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 760px) {
  .cs-card {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: clamp(-4rem, -5vw, -2rem);
  }
}
@media (min-width: 1100px) {
  .cs-card { margin-top: clamp(-10rem, -8vw, -4rem); }
}

/* Spalte: Mobile horizontal-Trennlinie, Tablet+ vertikal-Trennlinie */
.cs-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
}
.cs-col + .cs-col {
  border-top: 1px solid rgba(0, 78, 168, 0.18);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}
@media (min-width: 760px) {
  .cs-col { padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); }
  .cs-col + .cs-col {
    border-top: none;
    border-left: 1px solid rgba(0, 78, 168, 0.18);
    padding-top: 0;
    margin-top: 0;
  }
  .cs-col:first-child { padding-left: 0; }
  .cs-col:last-child  { padding-right: 0; }
}

/* Typografie nach ULT-Design-System */
.cs-lbl {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.5;
}
.cs-card h3 {
  font-size: var(--text-h4);          /* 23 px laut CD */
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
  color: var(--foreground);
  margin: 0;
  max-width: 22ch;
}
.cs-card p {
  font-size: var(--text-base);        /* 16 px */
  line-height: 1.6;
  color: var(--foreground);
  opacity: 0.9;
  margin: 0;
}

/* Ergebnis-Stats */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.25rem;
}
.cs-stats .num {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: var(--font-weight-normal);
  color: var(--primary);
  line-height: 1;
}
.cs-stats .stat-lbl {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 0.5rem;
  line-height: 1.4;
}

.cs-cta {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  display: flex;
}

/* =====================================================================
   CASE STUDY V2 (Variante 2) — Bild voll, 3 Kacheln rechts überlappen
   Letzte Kachel (Ergebnis) in ULT-Blau mit weißer Schrift.
   ===================================================================== */
.cs-stage--side {
  position: relative;
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}
.cs-stage--side .cs-photo {
  margin: 0;
  position: relative;
}
.cs-stage--side .cs-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.cs-cards-side {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.25vw, 1.25rem);
  margin-top: 1.5rem;
}
.cs-card-side {
  background: var(--card);
  box-shadow: var(--elevation-md);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cs-card-side .cs-lbl {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.5;
}
.cs-card-side h3 {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
  color: var(--foreground);
  margin: 0;
}
.cs-card-side p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--foreground);
  opacity: 0.9;
  margin: 0;
}
.cs-card-side .cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.25rem;
}
.cs-card-side .cs-stats .num {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: var(--font-weight-normal);
  color: var(--primary);
  line-height: 1;
}
.cs-card-side .cs-stats .stat-lbl {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Dunkle Ergebnis-Kachel: ULT-Blau, weiße Texte und Zahlen */
.cs-card-side--dark {
  background: var(--secondary);
}
.cs-card-side--dark h3,
.cs-card-side--dark p {
  color: var(--secondary-foreground);
}
.cs-card-side--dark .cs-lbl {
  color: var(--chart-4);
}
.cs-card-side--dark .cs-stats .num {
  color: var(--secondary-foreground);
}
.cs-card-side--dark .cs-stats .stat-lbl {
  color: var(--chart-4);
}

/* Ab Tablet: Kacheln schweben rechts über dem Bild */
@media (min-width: 900px) {
  .cs-stage--side .cs-cards-side {
    position: absolute;
    top: clamp(1.25rem, 2.5vw, 2.5rem);
    right: clamp(1.25rem, 2.5vw, 2.5rem);
    width: 45%;
    max-width: 460px;
    margin: 0;
    z-index: 2;
  }
}

/* Full-Width-Variante: Bild bricht aus dem Container auf 100 vw,
   Kacheln sitzen links auf dem Bild (gespiegeltes Motiv) */
.cs-stage--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (min-width: 900px) {
  .cs-stage--full .cs-cards-side {
    right: auto;
    left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
}

/* =====================================================================
   WHITEPAPER — dunkelblaue Sektion (.section--blue). Links Mockup,
   rechts die weiße Formular-Karte, darunter die Inhaltsliste. Felder nutzen die
   generischen Formular-Bausteine (.field, .field-row, .consent).
   Das Mockup-JPEG ist auf ULT-Blau (#004EA8) freigestellt.
   ===================================================================== */
#whitepaper .sec-num,
#whitepaper .editorial-body { color: var(--secondary-foreground); }
#whitepaper .sec-num { opacity: 0.85; }

.wp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: clamp(3rem, 5vw, 5rem);
}
/* Desktop: dasselbe 4er-Raster wie .argument-grid (gleiche Gaps), damit
   das Formular exakt auf der Linie der 3. Karte beginnt (Spalten 3–4).
   Das Mockup ist 20 % breiter als seine Hälfte und läuft unter die
   Formular-Karte. */
/* Mobil/Tablet (einspaltig): Formular-Karte überdeckt das untere Fünftel
   des Mockups. Mockup 900 × 734 → Höhe = 81,6 % der Breite, 20 % davon
   = 16,3 % der Breite (Prozent-Margins beziehen sich auf die Breite). */
.wp-form { position: relative; z-index: 1; }
@media (max-width: 999px) {
  .wp-form { margin-top: calc(-16.3% - clamp(2rem, 4vw, 4rem)); }
}
@media (min-width: 1000px) {
  .wp-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .wp-mockup { grid-column: 1 / 3; grid-row: 1; }
  .wp-form   { grid-column: 3 / 5; grid-row: 1; position: relative; z-index: 1; }
}

/* JPEG ist auf ULT-Blau freigestellt, die Bildkante ist unsichtbar */
.wp-mockup { margin: 0; }
.wp-mockup img { display: block; width: 100%; height: auto; }
@media (min-width: 1000px) {
  .wp-mockup img { width: 126%; max-width: none; margin-left: -64px; }
}

/* Inhaltsliste: volle Breite zwischen Einleitung und Mockup + Formular.
   Überschrift darüber, Punkte ohne Trennlinien in 1 / 2 / 3 Spalten,
   spaltenweise von oben nach unten (Desktop: 3 · 3 · 2). */
.wp-toc {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  color: var(--secondary-foreground);
}
.wp-toc-head {
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; line-height: 1.2;
  margin-bottom: 1.25rem;
}
.wp-toc ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem clamp(1.5rem, 3vw, 3rem);
}
.wp-toc li {
  display: flex; gap: 1rem; align-items: baseline;
  font-size: 16px; line-height: 1.5;
}
@media (min-width: 700px) {
  .wp-toc ul {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }
}
@media (min-width: 1100px) {
  .wp-toc ul { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); }
}
/* Aufzählungszeichen: kleines weißes Quadrat, mittig zur ersten Zeile
   (line-height 1.5 → Zeilenmitte bei 0.75em), wie die Magenta-Quadrate
   in „Zwei Perspektiven“ */
.wp-toc-bullet {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 6px; height: 6px;
  margin-top: calc(0.75em - 3px);
  background: var(--secondary-foreground);
}

.wp-form {
  background: var(--card);
  color: var(--foreground);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--elevation-md);
  display: flex; flex-direction: column; gap: 1.25rem;
}
#whitepaper .wp-form h3 { color: var(--foreground); }
.wp-form h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; line-height: 1.2; }
.wp-form > p { font-size: 16px; line-height: 1.55; opacity: 0.85; }
.wp-form .consent a { color: inherit; text-decoration: underline; }
.wp-form .btn { align-self: stretch; justify-content: center; }
.wp-form .wp-required { font-size: 13px; opacity: 0.7; }
.wp-form .btn:disabled { opacity: 0.6; cursor: wait; }
.wp-form-status {
  font-size: 15px; line-height: 1.5;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--primary);
  background: var(--chart-5);
}

/* Thank-you panel that covers the whole form after a successful submit */
.wp-form-done {
  position: absolute; inset: 0; z-index: 2;
  background: var(--card);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
}
.wp-form-done[hidden] { display: none; }
.wp-form-done h3:focus { outline: none; }
.wp-form-done-message { font-size: 16px; line-height: 1.55; }

/* =====================================================================
   KONTAKT V2 — Editorial mit großem Portrait und 30-min-Promise
   ===================================================================== */
.contact-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: stretch;
  margin-top: clamp(2.5rem, 4vw, 4rem);
}
.kam-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.kam-portrait {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--chart-3), var(--chart-5));
  display: grid; place-items: center;
  color: var(--secondary);
  font-size: 32px;
}
.kam-name { font-size: 22px; line-height: 1.2; }
.kam-role { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--chart-4); margin-top: 0.25rem; }
.kam-bio  { font-size: 16px; line-height: 1.55; color: var(--chart-4); }
.kam-contact { display: flex; flex-direction: column; gap: 0.4rem; font-size: 16px; }
.kam-contact a { color: var(--chart-4); }
.kam-contact a:hover { color: #FFFFFF; }

.promise-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 720px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }
.promise {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.promise strong { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.promise span { font-size: 16px; line-height: 1.55; color: var(--chart-4); }

@media (min-width: 1000px) { .contact-grid { grid-template-columns: 0.5fr 1fr; } }

/* Cyan-Bar an rechter Kante der Kontakt-Sektion */
.contact-cyan {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 24px; background: var(--cyan-bar);
}
@media (min-width: 1024px) { .contact-cyan { width: 110px; } }

/* Container neben der Cyan-Bar nicht in sie hineinlaufen lassen */
#kontakt .container,
#kontakt-v2 .container { padding-right: calc(var(--gutter) + 24px); }
@media (min-width: 1024px) {
  #kontakt .container,
  #kontakt-v2 .container { padding-right: calc(var(--gutter) + 110px + 1rem); }
}

/* =====================================================================
   KONTAKT V2 — Portrait-Foto links, Info-Card rechts
   ===================================================================== */
.contact-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}
.contact-photo-v2 {
  margin: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--elevation-md);
}
.contact-photo-v2 img {
  display: block;
  width: 100%;
  height: auto;
}
.contact-info-v2 {
  background: transparent;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: var(--secondary-foreground);
  max-width: 520px;
}
.contact-info-v2 .kam-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--chart-4);
  line-height: 1.5;
}
.contact-info-v2 .kam-name-v2 {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
  color: var(--secondary-foreground);
  margin: 0;
}
.contact-info-v2 .kam-role-v2 {
  font-size: 14px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--chart-4);
  margin: 0;
  line-height: 1.5;
}
.contact-info-v2 .kam-bio-v2 {
  font-size: 16px;
  line-height: 1.6;
  color: var(--chart-4);
  margin: 0.5rem 0 0.25rem;
}
.contact-info-v2 .kam-contact-v2 {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 16px;
  margin-bottom: 0.5rem;
}
.contact-info-v2 .kam-contact-v2 a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--chart-4);
  text-decoration: none;
  transition: color .2s ease-out;
}
.contact-info-v2 .kam-contact-v2 a svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.contact-info-v2 .kam-contact-v2 a:hover {
  color: var(--secondary-foreground);
}
.contact-info-v2 .kam-cta-v2 {
  align-self: flex-start;
  margin-top: 0.5rem;
}

@media (min-width: 900px) {
  .contact-grid-v2 {
    grid-template-columns: 0.85fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .contact-info-v2 { justify-self: start; }
}

/* =====================================================================
   Persona-Cards (Sektion 03)
   ===================================================================== */
.personas2 {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 4vw, 4rem);
}
.persona2 {
  background: var(--card);
  padding: clamp(2rem, 3vw, 2.5rem) clamp(1.75rem, 2.5vw, 2.25rem);
  box-shadow: var(--elevation-sm);
  display: flex; flex-direction: column; gap: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Animierte Magenta-Linie oben, läuft auf Hover von links nach rechts –
   gleiches Pattern wie product-tile .accent-line und tech-tile::before */
.persona2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 4px;
  background: var(--primary);
  transition: width .5s ease-out;
  z-index: 1;
}
.persona2:hover::before,
.persona2:focus-within::before {
  width: 100%;
}

/* Tag: ohne Hintergrund, blau, auf Hover der Kachel → magenta */
.persona2 .ptag {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--secondary);
  align-self: flex-start;
  background: transparent;
  padding: 0;
  transition: color .2s ease-out;
}
.persona2:hover .ptag,
.persona2:focus-within .ptag {
  color: var(--primary);
}
.persona2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
}
.persona2-head h3 { flex: 1; }
.persona2-icon {
  flex-shrink: 0;
  width: clamp(80px, 8vw, 104px);
  height: clamp(80px, 8vw, 104px);
  color: var(--secondary);
  border: 2px solid currentColor;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.persona2-icon::before {
  content: "";
  width: 64%;
  height: 64%;
  background-color: currentColor;
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
}
.persona2-icon.icon-management::before {
  -webkit-mask-image: url('../icons/icon-management.svg');
          mask-image: url('../icons/icon-management.svg');
}
.persona2-icon.icon-profit::before {
  -webkit-mask-image: url('../icons/icon-profit.svg');
          mask-image: url('../icons/icon-profit.svg');
}
.persona2--magenta .persona2-icon { color: var(--primary); }
.persona2 h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; line-height: 1.2; }
.persona2 ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.persona2 ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 16px; line-height: 1.55;
}
/* Aufzählungszeichen: kleines Magenta-Quadrat, mittig zur ersten Zeile
   (line-height 1.55 → Zeilenmitte bei 0.775em) */
.persona2 ul li::before {
  content: "";
  position: absolute; left: 0; top: calc(0.775em - 3px);
  width: 6px; height: 6px;
  background: var(--primary);
}

/* 16:9-Bild bündig am Kachel-Boden – Full-Bleed bis an die Card-Kanten */
.persona2-photo {
  position: relative;
  align-self: stretch;
  margin-left: calc(-1 * clamp(1.75rem, 2.5vw, 2.25rem));
  margin-right: calc(-1 * clamp(1.75rem, 2.5vw, 2.25rem));
  margin-bottom: calc(-1 * clamp(2rem, 3vw, 2.5rem));
  margin-top: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 30% 70%, rgba(0,78,168,0.45) 0%, transparent 70%),
    linear-gradient(135deg, #6e7e8c 0%, #3a4a5c 100%);
}
.persona2-photo > img:not(.ki-marker) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.persona2-photo:not(:has(> img))::after {
  content: attr(data-caption);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem;
  text-align: center;
}

@media (min-width: 900px) { .personas2 { grid-template-columns: 1fr 1fr; } }

/* (Override entfernt – die Top-Border ist global aus, statt sie wird nur
   noch die animierte Magenta-Linie auf Hover angezeigt) */

/* Engerer Abstand zur vorhergehenden Vertrauen-Sektion */
#partner { padding-top: 80px; }

/* Dunkelblaue Persona-Variante: Bühne in ULT-Blau, Texte und Icons weiß */
.persona2--dark {
  background: var(--secondary);          /* #004EA8 */
  color: var(--secondary-foreground);    /* #FFFFFF */
  border-top-color: var(--secondary-foreground);
}
.persona2--dark.persona2--magenta { border-top-color: var(--primary); }
.persona2--dark h3 { color: var(--secondary-foreground); }
.persona2--dark .ptag {
  color: var(--secondary-foreground);
  background: rgba(255, 255, 255, 0.12);
}
.persona2--dark.persona2--magenta .ptag {
  color: var(--secondary-foreground);
  background: var(--primary);
}
.persona2--dark .persona2-icon,
.persona2--dark.persona2--magenta .persona2-icon {
  color: var(--secondary-foreground);
}
.persona2--dark ul li { color: var(--secondary-foreground); }
.persona2--dark ul li::before { background: var(--secondary-foreground); }

/* =====================================================================
   KONTAKT V3 — Karriere-Pattern: Foto links mit Cyan-Bar, Text rechts.
   Sektion in weiß, ohne section--blue, ohne contact-cyan rechts.
   ===================================================================== */
.contact-grid-v3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid-v3 {
    grid-template-columns: 0.7fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* Foto links mit Cyan-Bar daneben (dicker, bündig am Foto) */
.contact-photo-wrap-v3 {
  display: grid;
  grid-template-columns: clamp(16px, 2vw, 32px) 1fr;
  gap: 0;
  align-items: stretch;
}
.contact-photo-bar-v3 {
  background: var(--cyan-bar);
}
.contact-photo-v3 {
  margin: 0;
  overflow: hidden;
}
.contact-photo-v3 img {
  display: block;
  width: 100%;
  height: auto;
}

/* Rechter Textblock auf blauer Bühne */
.contact-info-v3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 56ch;
  color: var(--secondary-foreground);
}
.contact-headline-v3 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  color: var(--secondary-foreground);
}
.contact-lead-v3 {
  font-size: 18px;
  line-height: 1.6;
  color: var(--chart-4);
  margin: 0 0 0.5rem;
}
.contact-lead-v3--strong {
  font-weight: 700;
  color: var(--secondary-foreground);
}
.kam-name-v3 {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--secondary-foreground);
  margin: 1rem 0 0;
}
.kam-role-v3 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--chart-4);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.kam-contact-v3 {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 16px;
  margin-bottom: 0.5rem;
}
.kam-contact-v3 a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--chart-4);
  text-decoration: none;
  transition: color .2s ease-out;
}
.kam-contact-v3 a svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.kam-contact-v3 a:hover {
  color: var(--secondary-foreground);
}
.kam-cta-v3 {
  align-self: flex-start;
  margin-top: 1rem;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 4rem 0 2rem;
  border-top: 0;
}
.footer-inner {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; font-size: 14px;
  align-items: end;
  color: var(--secondary-foreground);
  /* Eine einzige Trennlinie oben vor dem Footer-Inhalt */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: clamp(2rem, 3vw, 3rem);
}
.footer-meta {
  display: flex; flex-direction: column; gap: 0.4rem;
  color: var(--secondary-foreground);
  font-size: 14px;
  opacity: 0.8;
}
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
/* Links und Cookie-Button einheitlich. Kontrast auf #004EA8:
   Weiß 80 % = 5,7:1 (normal), Weiß 100 % = 7,9:1 (Hover/Fokus).
   Kein Magenta-Hover: auf dem Blau nur 1,7–2,3:1. */
.footer-links a,
.footer-links .footer-cookie-btn {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary-foreground);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  opacity: 0.8;
  transition: opacity .2s ease-out;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links .footer-cookie-btn:hover,
.footer-links .footer-cookie-btn:focus-visible {
  opacity: 1;
  color: var(--secondary-foreground);
  text-decoration-line: underline;
}
.footer-links a:focus-visible,
.footer-links .footer-cookie-btn:focus-visible {
  outline: 2px solid var(--secondary-foreground);
  outline-offset: 3px;
}
@media (min-width: 720px) { .footer-inner { grid-template-columns: 1fr auto; } }

/* =====================================================================
   FAST CHANGE PROCESS — Tab-Variante (Google-Style Vertikal-Tabs)
   Auto-rotierende Tabs mit dünner Progress-Linie links, ein Bild
   pro Tab, Body öffnet sich beim aktiven Tab.
   ===================================================================== */
.fcp {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  /* Linke Spalte etwas breiter, damit die zwei Hero-Größen-Buttons
     unter dem Bild nebeneinander passen */
  .fcp { grid-template-columns: 1.18fr 0.82fr; }
}

/* Technologien-Variante: Foto links, Tabs rechts (wie die Prozess-Sektion).
   Im DOM stehen die Tabs zuerst (Lesereihenfolge, Mobile-Akkordeon),
   ab 900 px holt order das Foto nach links. */
@media (min-width: 900px) {
  .fcp--reverse { grid-template-columns: 1.18fr 0.82fr; }
  .fcp--reverse .fcp-col-left { order: -1; }
}
/* Technologie-Fotos (1200 × 636): links 1/6 und rechts 1/10 abschneiden,
   damit das Bild höher wird. Sichtbar bleiben 11/15 der Breite
   → Rahmen 880 : 636. object-position 62,5 % = (1/6) / (1/6 + 1/10).
   ProSight (1200 × 662) wird mit derselben Position fast gleich beschnitten. */
.fcp--reverse .fcp-visual { aspect-ratio: 880 / 636; }
.fcp--reverse .fcp-image > img:not(.ki-marker) { object-position: 62.5% center; }
.fcp--reverse .fcp-tab-lead { display: none; }
.fcp--reverse .fcp-tab.is-active .fcp-tab-lead { display: block; }
/* Nutzenzeile und Fließtext nur beim aktiven Tab; inaktive Tabs zeigen
   Kategoriezeile und Name */
.fcp-tab-lead {
  margin-top: 0.5rem;
  font-size: 16px; font-weight: 700; line-height: 1.45;
  color: var(--foreground);
}

/* Linke Spalte: Bild + CTA-Pärchen darunter */
.fcp-col-left {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  min-width: 0;
}
.fcp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Links: gestapelte Bilder, sichtbar wird nur das aktive */
.fcp-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 30% 70%, rgba(0,78,168,0.45) 0%, transparent 70%),
    linear-gradient(135deg, #6e7e8c 0%, #3a4a5c 100%);
}
.fcp-image {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.fcp-image.is-active { opacity: 1; }
.fcp-image > img:not(.ki-marker) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fcp-image:not(:has(> img))::after {
  content: attr(data-caption);
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
}

/* Rechts: Tab-Liste */
.fcp-list {
  display: flex;
  flex-direction: column;
}
.fcp-tab {
  position: relative;
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  align-items: stretch;
  text-align: left;
  background: transparent;
  border: 0;
  padding: clamp(1.25rem, 2vw, 1.5rem) 0;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.fcp-tab + .fcp-tab { border-top: 1px solid rgba(0,78,168,0.12); }
.fcp-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Linke vertikale Spur mit Füllbalken — schlank, klar sichtbar
   (parallel zur dünnen Spur über den Slider-Tabs aufgebaut) */
.fcp-tab-bar {
  position: relative;
  width: 2px;
  background: rgba(0, 78, 168, 0.22);
  border-radius: 1px;
  overflow: hidden;
  align-self: stretch;
}
.fcp-tab-bar-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;
  background: var(--primary);
  border-radius: 1px;
}
.fcp-tab.is-active .fcp-tab-bar-fill {
  animation: fcp-progress var(--fcp-duration, 6s) linear forwards;
}
@keyframes fcp-progress {
  from { height: 0; }
  to   { height: 100%; }
}

/* Tab-Inhalt */
.fcp-tab-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fcp-tab-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foreground);
  opacity: 0.55;
  transition: color .25s ease, opacity .25s ease;
}
.fcp-tab.is-active .fcp-tab-kicker {
  opacity: 1;
  color: var(--primary);
}

.fcp-tab-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: var(--foreground);
  opacity: 0.7;
  transition: opacity .25s ease;
}
.fcp-tab.is-active .fcp-tab-title { opacity: 1; }
.fcp-tab:hover .fcp-tab-title { opacity: 1; }

/* Body-Collapse mittels modern grid-row Trick (Chrome 117+, Safari 17+) */
.fcp-tab-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
  overflow: hidden;
}
.fcp-tab-body > p {
  min-height: 0;
  margin-top: 0.6rem;
  font-size: 16px;
  line-height: 1.55;
  color: var(--foreground);
  opacity: 0.85;
}
.fcp-tab.is-active .fcp-tab-body {
  grid-template-rows: 1fr;
}

/* Reduced motion: keine Auto-Animation, Body sofort offen */
@media (prefers-reduced-motion: reduce) {
  .fcp-tab.is-active .fcp-tab-bar-fill { animation: none; height: 100%; }
  .fcp-tab-body { transition: none; }
  .fcp-image { transition: none; }
}

/* =====================================================================
   Reveal (Progressive Enhancement)
   ===================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   FCP / TECH / CS — Inline-Image-Wrapper (nur Mobile sichtbar)
   Default kollabiert (grid-template-rows: 0fr) und auf Desktop unsichtbar.
   ===================================================================== */
.fcp-tab-image-wrap,
.tech-tile-image-wrap,
.cs-tab-image-wrap { display: none; }
.fcp-tab-inline-image,
.tech-tile-inline-image,
.cs-tab-inline-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
}

/* Chevron-Icon (Accordion-Indikator) – Default ausgeblendet, nur Mobile sichtbar */
.tile-chevron {
  display: none;
  position: absolute;
  top: clamp(1rem, 2vw, 1.25rem);
  right: clamp(1rem, 2vw, 1.5rem);
  width: 22px;
  height: 22px;
  color: var(--foreground);
  opacity: 0.55;
  transition: transform .35s ease-out, opacity .25s ease-out, color .25s ease-out;
  pointer-events: none;
  z-index: 2;
}
.tile-chevron svg { width: 100%; height: 100%; display: block; }
.tech-tile.is-active .tile-chevron,
.fcp-tab.is-active .tile-chevron,
.cs-tab.is-active .tile-chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--primary);
}

/* =====================================================================
   MOBILE-OVERRIDES  (≤ 599 px)
   ===================================================================== */
@media (max-width: 599px) {
  /* 0) Globaler horizontaler Scroll-Schutz auf Mobile.
        overflow-x: clip statt hidden, damit position: sticky weiter
        funktioniert (hidden würde einen Scroll-Container auf html/body
        erzeugen und die sticky Nav ihrer Viewport-Bindung berauben). */
  html, body { overflow-x: clip; }

  /* Storytelling auf Mobile deaktiviert: stattdessen wird das Static-Bild
     `storytelling-mobile.webp` angezeigt. Sticky-Animation hier aus. */
  .hero-image--scroll { height: auto; }
  .hero-image-track   { display: none; }
  .hero-image-static-mobile { display: block; }
  /* Vertrauen-Sektion oben mit weniger Padding */
  #vertrauen { padding-top: 1.5rem; }
  /* Bilder, Buttons und Card-Container sicherheitshalber begrenzen */
  img { max-width: 100%; height: auto; }
  .btn { max-width: 100%; }
  .cs-tab,
  .cs-text,
  .cs-tabs,
  .cs-tab-content,
  .cs-tab-body,
  .cs-tab-image-wrap,
  .contact-info-v3,
  .contact-photo-wrap-v3,
  .footer-inner { min-width: 0; }
  /* Worte trennen statt überlaufen */
  .cs-tab-title,
  .contact-headline-v3,
  h2.display { overflow-wrap: anywhere; word-break: break-word; }
  /* Alle .btn-Texte dürfen auf Mobile umbrechen, damit der Button nicht
     über den Container hinausgeht. Ausnahme: Nav-CTA bleibt nowrap. */
  .btn:not(.nav-cta) {
    white-space: normal;
    text-align: center;
  }

  /* Footer Mobile: Links als vertikaler Stapel, Copyright als letzte Zeile.
     Großer Abstand zur Kontakt-Sektion und unter den Links gekürzt.
     Nur EINE Trennlinie oben (auf .footer-inner). */
  .footer {
    padding: 0 0 1.5rem;
    box-shadow: none;
    border-top: 0;
    border-bottom: 0;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: 1.5rem;
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .footer-links {
    flex-direction: column;
    gap: 0.85rem;
    order: 1;
    border: 0;
  }
  .footer-meta {
    order: 2;
    border: 0;
    padding-top: 0;
  }

  /* 1) Nav-CTA und Burger gemeinsam rechtsbündig:
        margin-left: auto auf der CTA schiebt CTA + Burger an die rechte Kante */
  .nav-cta { margin-left: auto; }
  .nav-toggle { margin-left: 0; }

  /* Ausgeklapptes Menü: Items größer und mit großzügigem Abstand */
  .nav.is-open .nav-list {
    gap: 30px;
    padding: 1.75rem var(--gutter) 2rem;
  }
  .nav.is-open .nav-list a {
    font-size: 20px;
    line-height: 1.3;
  }

  /* 2) Nav-CTA auf Mobile sichtbar lassen, Text auf „Whitepaper" kürzen */
  .nav .nav-cta { display: inline-flex; }
  .nav-cta-extra { display: none; }
  .nav-cta.btn {
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    font-size: 11.5px;
  }

  /* 3) Stat-Card bleibt 3-spaltig auf Mobile, kompakte Padding/Schriftgrößen */
  .stat-card {
    grid-template-columns: repeat(3, 1fr);
    padding: 1.25rem 0.75rem;
    gap: 0;
  }
  .stat-col { padding: 0 0.5rem; }
  .stat-col + .stat-col {
    border-top: none;
    border-left: 1px solid rgba(0, 78, 168, 0.2);
  }
  .stat-col:first-child { padding-left: 0; }
  .stat-col:last-child  { padding-right: 0; }
  .stat-num { font-size: clamp(22px, 7vw, 32px); }
  .stat-lbl { font-size: 9.5px; letter-spacing: 0.05em; }
  /* Stat-Card überdeckt das Bild um ca. 30 % der Bildhöhe von unten.
     Bei 1.89:1-Image entspricht 30 % der Höhe ≈ 16 % der Breite. */
  .stage--stacked .stat-card { margin-top: -16vw; }

  /* 4) Quote-Card auf Mobile in voller Container-Breite */
  .quote-card { max-width: none; }

  /* FCP, Tech und Case Study Accordion-/Inline-Image-Regeln liegen
     jetzt in eigenen breiteren Media-Queries (siehe unten ab @media
     max-width: 999px / 899px / 759px) — gelten auch hier kaskadierend. */

  /* 5d) Produktportfolio — Bild oben, Tabs darunter in weißer Fläche.
         Magenta-Balken-Animation am oberen Tab-Rand (direkt unter dem Bild),
         Tab-Texte in ULT-Blau, kein dunkler Bodenverlauf.
         Min-Höhe auf den Tabs reserviert Platz für den Subtext, damit
         beim Wechsel des aktiven Tabs nichts springt. */
  .product-slider {
    aspect-ratio: auto;
    background: var(--card);
    display: flex;
    flex-direction: column;
    padding-bottom: 1.5rem;
  }
  .product-slider::after { display: none; }
  .ps-stage {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--secondary);
  }
  .ps-nav {
    position: relative;
    left: auto; right: auto; bottom: auto;
    background: var(--card);
  }
  .ps-tab {
    color: var(--foreground);
    /* Platz für Label + 2 Zeilen Subtext reservieren — kein Springen */
    min-height: 6.5rem;
    padding: clamp(0.85rem, 2vw, 1.1rem) clamp(0.5rem, 1.5vw, 1rem);
    align-items: flex-start;
  }
  .ps-tab:hover,
  .ps-tab.is-active { color: var(--foreground); }
  .ps-tab-sub { color: var(--foreground); }
  .ps-tab-bar { background: rgba(0, 78, 168, 0.15); }
  .ps-tab:focus-visible { outline-color: var(--primary); }

  /* CS Accordion-Regeln stehen im breiteren @media (max-width: 999px)
     Block weiter unten und kaskadieren auch auf Mobile. */
}

/* =====================================================================
   RESPONSIVE ACCORDION — FCP & Case Study verhalten sich wie Mobile
   bereits ab dem Single-Column-Breakpoint der jeweiligen Sektion.
   ===================================================================== */

/* Case Study: ab <1000px wird .cs-slider 1-spaltig → Accordion-Verhalten */
@media (max-width: 999px) {
  .cs-visual { display: none; }
  .cs-tabs { min-height: 0; }
  .cs-tab-image-wrap {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    margin-top: 0;
    transition: grid-template-rows .45s ease-out, margin-top .35s ease-out;
  }
  .cs-tab.is-active .cs-tab-image-wrap {
    grid-template-rows: 1fr;
    margin-top: 1rem;
  }
  .cs-tab .tile-chevron { display: block; }
  .cs-tab-title { padding-right: 2.5rem; }
}

/* Fast Change Process: ab <900px wird .fcp 1-spaltig → Accordion-Verhalten */
@media (max-width: 899px) {
  .fcp-visual { display: none; }
  .fcp-tab-image-wrap {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    margin-top: 0;
    transition: grid-template-rows .45s ease-out, margin-top .35s ease-out;
  }
  .fcp-tab.is-active .fcp-tab-image-wrap {
    grid-template-rows: 1fr;
    margin-top: 1rem;
  }
  .fcp-tab-body > p { display: none; }
  .fcp-tab.is-active .fcp-tab-body > p { display: block; }
  .fcp-tab .fcp-tab-title { opacity: 1; }
  .fcp-tab .fcp-tab-kicker { opacity: 1; }
  .fcp-tab .tile-chevron { display: block; }
  .fcp-tab-title { padding-right: 2.5rem; }
}

/* Technologien: ab <760px wird .tech-stack 1-spaltig → Bild pro Tile zeigen */
@media (max-width: 759px) {
  .tech-stage { display: none; }
  .tech-stack { margin-top: 0; }
  .tech-tile::before { display: none; }
  .tech-tile-image-wrap {
    display: block;
    margin-top: 1.25rem;
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    margin-bottom: -2rem;
  }
  .tech-tile-inline-image { display: block; width: 100%; height: auto; }
}

/* =========================================================
   KI-MARKIERUNG — Overlay-Icon zur Kennzeichnung
   KI-generierter Bilder & Videos
   Nutzung: <img class="ki-marker" src="assets/icons/icon-ki-marker.svg" alt="KI-generiertes Bild" />
   als letztes Kind eines Containers mit position:relative
   (z. B. figure, .stage-photo, .quote-stage, video-Wrapper).
   ========================================================= */

/* Positionierungs-Anker für Container, die normalerweise keinen
   eigenen Stacking-Context haben, aber einen Marker hosten sollen. */
.fcp-tab-image-wrap,
.cs-tab-image-wrap,
.tech-tile-image-wrap,
.ki-host {
  position: relative;
}


img.ki-marker,
.ki-marker {
  position: absolute;
  inset: auto;
  top: auto;
  left: auto;
  right: 12px;
  bottom: 12px;
  width: 24px;
  height: auto;
  max-width: 24px;
  max-height: none;
  padding: 0;
  margin: 0;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  display: block;
  transform: none;
  transition: none;
}
@media (max-width: 599px) {
  img.ki-marker,
  .ki-marker {
    width: 22px;
    max-width: 22px;
    right: 10px;
    bottom: 10px;
  }
}

/* Technologien-Sektion: Marker oben rechts statt unten rechts
   (Desktop-Slide & Mobile-Accordion-Bild). */
.tech-slide .ki-marker,
.tech-tile-image-wrap .ki-marker {
  top: 12px;
  bottom: auto;
}
@media (max-width: 599px) {
  .tech-slide .ki-marker,
  .tech-tile-image-wrap .ki-marker {
    top: 10px;
    bottom: auto;
  }
}

/* Vertrauen / Zitat-Stage auf Mobile: die quote-card rutscht weiter
   nach unten und überdeckt das Foto, daher Marker nach oben rechts auf
   die Foto-Fläche verschieben (statt unten rechts hinter der Kachel). */
@media (max-width: 599px) {
  .quote-stage .ki-marker {
    top: 10px;
    bottom: auto;
  }
}