/* ============================================================
   Schriften — selbst gehostet (seit 24.09.2026)
   Montserrat 400/600/700 + Instrument Serif normal/kursiv, 1:1 die
   Deklarationen, die Google Fonts vorher geliefert hat (gleiche
   Dateien, gleiche unicode-range, gleiche Einzelgewichte) — nur die
   Adressen zeigen auf fonts/. Montserrat ist eine variable Schrift: EINE
   Datei je Zeichensatz trägt alle drei Gewichte. Grund: beim Seitenaufruf
   gehen keine Besucherdaten mehr an Google (LG München I, 20.01.2022).
   Die drei Dateien fürs erste Bild werden in head-assets.html vorgeladen.
   Lizenz: SIL Open Font License 1.1, Texte liegen in fonts/.
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-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;
}

/* ============================================================
   Bese Media GmbH — Digitales CI
   Token-Werte 1:1 aus digital-ci/DIGITAL_CI.md
   ============================================================ */
:root {
  /* Kernfarben */
  --brand-blue:   #2C6EA9;
  --black:        #000000;
  --white:        #FFFFFF;
  --dark-gray:    #3A3A3A;

  /* 5er-Blaupalette (~210° Hue) */
  --deep-navy:    #192939;
  --navy:         #1F3447;
  --accent:       #2C6EA9;
  --accent-hover: #4DA8DA;
  --silver-blue:  #B3CCDF;
  --cyan-hi:      #6BC4F0;

  /* Surfaces */
  --surface-0: #060A0E;
  --surface-1: #0C141C;
  --surface-2: #131F2B;
  --surface-3: #192939;
  --surface-4: #1F3447;

  /* Text-Opacity */
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);

  /* Verläufe */
  --grad-standard:  linear-gradient(180deg, #000000 0%, #0C141C 40%, #1F3447 100%);
  --grad-umgekehrt: linear-gradient(180deg, #1F3447 0%, #0C141C 60%, #000000 100%);
  --grad-spotlight: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(44,110,169,0.12) 0%, rgba(31,52,71,0.06) 40%, transparent 70%);
  --grad-kombi-overlay: radial-gradient(ellipse 70% 80% at 50% 30%, rgba(44,110,169,0.10) 0%, transparent 65%);

  /* Typografie */
  --font-ui:      'Montserrat', sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type Scale — fluid skaliert von 320px bis 1920px+
     (CI-Tokens, erweitert nach unten für Galaxy Fold / iPhone SE 1)
     Body + Lead einheitlich 16px (CI §04: Body = 16px). Lead-Skala
     bewusst nicht fluid bis 20px, damit Fließtext über die ganze
     Seite identisch wirkt — Hierarchie kommt aus max-width +
     line-height + Position, nicht aus Schriftgröße (Marie 2026-05-27). */
  --text-display: clamp(2rem, 7.2vw, 5rem);
  --text-h2:      clamp(1.65rem, 5.6vw, 4rem);
  --text-h3:      clamp(1.5rem, 3vw, 2rem);   /* 24–32px */
  --text-h4:      clamp(1.25rem, 2vw, 1.5rem); /* 20–24px */
  --text-lead:    16px;
  --text-body:    16px;
  --text-small:   14px;
  --text-caption: 12px;

  /* Spacing (8px Basis) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Vertikaler Section-Rhythmus (kanonisch, fuer harmonische Abstaende) */
  /* Vertikaler Section-Rhythmus (Marie 2026-09-11: „zu wenig Abstaende …
     teilweise mehr, teilweise weniger, sieht unruhig aus"). GEMESSEN gegen
     den §1.12-Pool (Inhalt→Inhalt, 1440 + 1864): estateanfrage 248/302,
     talenthafen 208/214, saleshax 166, wir vorher 227/227 — und weil der
     alte Deckel bei 104px lag, wuchs der Abstand auf Maries 1864er Fenster
     NICHT mit (dort las sich die Seite am gedraengtesten). Jetzt 9vw bis
     144px: 1440 → 130 (Naht 260), ab 1600 → 144 (Naht 288). Vorher 104/208.
     Der Wert ist der EINZIGE Hebel fuer den Rhythmus — neue Sections immer
     var(--section-py), nie eigene clamp()-Werte (§0a). */
  --section-py:        clamp(64px, 9vw, 144px);    /* Standard-Abstand oben/unten je Section */
  --section-py-tight:  clamp(32px, 4.5vw, 72px);   /* EXAKT die Hälfte von --section-py (alle drei Clamp-Werte halbiert) — für thematisch zusammengehörende Nachbarn: .ki/.recruit, .cs-hero/.cs-article, seit 09/2026 auch .bkarte (Website), .kkos, .bsys--raster, .skreis und .sysapp (Startseite). ⚠ Zwei „tight"-Nachbarn ergeben zusammen unter 1180 px weniger als die CI-Mindestlücke 96 px — dann eine Seite voll setzen (Lehre 18.09.) */

  /* Mobile-Override (Marie 2026-05-29): Section-Abstaende auf schmalen
     Viewports spuerbar enger, damit weniger Scroll-Leerraum entsteht.
     Greift via @media unten — Token bleibt kanonisch, alle Sections ziehen nach. */

  /* Radien */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Glasmorphismus */
  --glass-bg:           rgba(255, 255, 255, 0.04);
  --glass-bg-hover:     rgba(255, 255, 255, 0.07);
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --glass-blur:         blur(16px);

  /* Transitions */
  --ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-morph: cubic-bezier(0.19, 1, 0.22, 1);
  --duration:   0.25s;

  /* Layout — bewusste Abweichung vom CI-Wert 1120 px (von Marie 2026-05-11
     freigegeben: 1440). Seit 2026-09-09 1540 px = 1476 px INNENBREITE (Marie,
     Boxbreiten-Runde: „du kannst es auf 1476 zurückstellen, aber alle Sections
     müssen dann auch so breit sein"). Herkunft der Zahl: saleshax fährt 79 %
     des Fensters, bei Maries Fensterbreite 1864 px sind das 1476 px; Marie
     schaut auf 1600–1900 px breiten Fenstern (Ultrawide 5120×1440 @1×), dort
     stand die Seite mit 1440 bei 74 % Bildbreite, jetzt 79 %. Bei ≤1440
     ändert sich NICHTS (alle dokumentierten 1376-px-Messwerte bleiben gültig);
     ab 1540 px Fenster ist die Box fest — auf sehr breiten Fenstern (2560 =
     58 %) wächst saleshax weiter (69 %), eine fluide Fassung wäre
     `clamp(1440px, calc(79.2vw + 64px), 1834px)`. §5a-Zeile „--max-width". */
  --max-width: 1540px;
  /* Fluides Container-Padding: 16px @ 320px → 24px @ 600px → 32px @ 1024px+.
     Liegt am :root, damit auch Blöcke OHNE .container (Bese-AI-Frame,
     Testimonial-Bleed) exakt dieselbe Kante treffen. */
  --container-pad: clamp(16px, 3.5vw, 32px);

  /* ----------------------------------------------------------
     Theme-Tokens (Light/Dark-Umschalter, Marie 2026-06-11 — §5a)
     :root = Dark-Token-Werte (CI). html[data-theme="light"] überschreibt
     dieselben Tokens weiter unten. SEIT 2026-06-19 ist LIGHT die
     Voreinstellung (data-theme="light" steht fest am <html>, siehe
     head-open.html); Dark greift nur bei ausdrücklicher Wahl
     (data-theme="dark" → :root). Neue Komponenten beziehen Farben NUR
     über Tokens und müssen in beiden Themes geprüft werden.
     ---------------------------------------------------------- */
  --page-bg: #000000;                              /* body + .page Grundfläche */
  --heading-color: var(--white);                   /* H1–H4 (Light: Near-Black-Tinte) */
  --em-grad-a: var(--silver-blue);                 /* Headline-Italic-Gradient Start */
  --em-grad-b: var(--accent-hover);                /* Headline-Italic-Gradient Ende */
  --logo-mono-filter: brightness(0) invert(1);     /* Marquee-/Social-Logos → weiß */
  --focus-ring: #FFFFFF;                           /* :focus-visible Outline */
  --shadow-rgb: 0, 0, 0;                           /* Kanal-Tripel aller Drop-Shadows/Scrims */
  --glow-rgb: 77, 168, 218;                        /* Kanal-Tripel aller Cyan-Glows/Tints */
  --aurora-blend: screen;                          /* Aurora-Beams: additives Licht auf dunkel */
  --aurora-opacity: 1;                             /* Multiplikator auf den Beam-Containern */
  color-scheme: dark;
}

/* Mobile: engerer Section-Rhythmus (Marie 2026-05-29) */
@media (max-width: 767px) {
  :root {
    /* Mobil bewusst enger (Marie 2026-05-29) — aber nicht mehr unter die
       CI-Vorgabe: DIGITAL_CI Sektion 06 verlangt „Mindestens space-9 (96px)
       ZWISCHEN Sektionen", also fuer die Luecke = padding-bottom + padding-top.
       Mit 48px je Seite sind das exakt 96px schon bei 320px Breite (vorher
       38px = 76px Luecke, also eine stille Unterschreitung). */
    --section-py:       clamp(48px, 9.6vw, 70px);
    --section-py-tight: clamp(24px, 4.8vw, 35px);
  }
}

/* ============================================================
   LIGHT MODE — Token-Override (§5a-Abweichung, Marie 2026-06-11)
   digital-ci definiert nur Dark; Light ist eine von Marie
   autorisierte Abweichung: kühles Off-White, KEINE blauen
   Flächen, Blau nur dezent als Akzent. Kein Attribut = Dark.
   Komponenten-Feinschliff lebt gesammelt am Datei-Ende
   („LIGHT MODE — Komponenten-Overrides").
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;

  /* Flächen — neutral-kühle Grau-Rampe (Hue ~210°, fast entsättigt).
     Elevation invertiert: höher = heller, Karten dürfen Weiß sein. */
  --page-bg:   #EEF1F3;
  --surface-0: #EEF1F3;
  --surface-1: #F4F6F8;
  --surface-2: #F9FAFB;
  --surface-3: #FDFDFE;
  --surface-4: #FFFFFF;

  /* Text — Near-Black-Tinte mit kühlem Unterton (kein Navy-Blau) */
  --text-100: rgba(16, 24, 32, 0.92);
  --text-200: rgba(16, 24, 32, 0.70);
  --text-300: rgba(16, 24, 32, 0.46);
  --text-400: rgba(16, 24, 32, 0.22);
  --text-500: rgba(16, 24, 32, 0.08);

  /* Glas — dunkel-auf-hell */
  --glass-bg:           rgba(16, 24, 32, 0.04);
  --glass-bg-hover:     rgba(16, 24, 32, 0.07);
  --glass-border:       rgba(16, 24, 32, 0.10);
  --glass-border-hover: rgba(16, 24, 32, 0.18);

  /* Akzente — Blau bleibt, dunkelt aber für Kontrast auf hell.
     --accent / --brand-blue / --navy / --deep-navy unverändert. */
  --accent-hover: #25618F;
  --cyan-hi:      #1B72AE;
  --silver-blue:  #44627C;

  /* Verläufe — hell, Spotlights stark gedimmt */
  --grad-standard:  linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 40%, #E7EBEF 100%);
  --grad-umgekehrt: linear-gradient(180deg, #E7EBEF 0%, #F4F6F8 60%, #FFFFFF 100%);
  --grad-spotlight: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(44,110,169,0.07) 0%, rgba(31,52,71,0.03) 40%, transparent 70%);
  --grad-kombi-overlay: radial-gradient(ellipse 70% 80% at 50% 30%, rgba(44,110,169,0.05) 0%, transparent 65%);

  /* Headlines: Weiß → Near-Black-Tinte */
  --heading-color: var(--text-100);

  /* Headline-Italic-Gradient: Navy → Brand-Blau (zurückhaltend) */
  --em-grad-a: #1F3447;
  --em-grad-b: #2C6EA9;

  /* Kanal-Tripel: Schatten werden weiches Navy-Grau,
     Cyan-Glows werden dezente Brand-Blau-Tints */
  --shadow-rgb: 31, 45, 58;
  --glow-rgb: 44, 110, 169;

  /* Sonstiges */
  --logo-mono-filter: brightness(0) opacity(0.6);  /* Logos → dunkelgrau monochrom */
  --focus-ring: #101820;
  --aurora-blend: normal;                          /* Aquarell-Hauch statt additivem Licht */
  --aurora-opacity: 0.35;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-100);
  background: var(--page-bg);
  overflow-x: hidden;
  min-height: 100vh;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Seiten-Hintergrund — durchgehend Schwarz (Marie 2026-05-26)
   Kein Gradient mehr, keine Verläufe. Highlights kommen sektion-
   weise als runde, ausgeblendete Color-Blobs (siehe .vs::before,
   .ki::before, .recruit::before, .capacity::before, .cases::before).
   CI-Token --grad-standard bleibt unverändert — Override nur auf
   .page. Dokumentiert in CLAUDE.md §5a.
   ============================================================ */
.page {
  min-height: 100vh;
  background: var(--page-bg);
  position: relative;
  isolation: isolate;
  /* Dekorative Aurora-/Glow-Layer in mehreren Sections ragen prinzipbedingt
     leicht über den Viewport hinaus. `overflow-x: clip` enthält das Ganze
     site-weit, ohne sticky/transform-Verhalten zu brechen (anders als overflow: hidden). */
  overflow-x: clip;
}

/* ============================================================
   Container
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  /* --container-pad liegt seit 2026-09-09 am :root (ein Wert für .container
     UND Blöcke ohne .container). Kinder, die bis an die Container-Außenkante
     ausbrechen (Schatten-Bleed des Testimonial-Sliders), lesen es weiter. */
  padding-inline: var(--container-pad);
}

/* ============================================================
   Typografie
   ============================================================ */
h1, h2, h3, h4 {
  color: var(--heading-color);
  /* Safety-Net: bei Extremen (320px o. lange Wörter wie "Schädlingsbekämpfung") nicht überlaufen */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h3);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 em, h2 em {
  font-family: var(--font-display);
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Italic-Overshoot: padding sorgt dafür, dass Glyphen-Überstände nicht
     abgeschnitten werden.
     - padding-inline: A am Wortanfang, e/r/f am Wortende (horizontal)
     - padding-block-end: Descender von g/j/y/p (vertikal). Ohne diesen
       Wert endet die background-clip:text-Maske auf der Baseline und
       der untere Teil des italic 'g' rendert transparent (Marie
       2026-06-02). Negativer margin-block-end kompensiert visuell, damit
       der Zeilenrhythmus unverändert bleibt. */
  padding-inline: 0.08em;
  padding-block-end: 0.12em;
  margin-inline: -0.04em;
  margin-block-end: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Umbruch-Steuerung der Headlines (Marie 2026-09-02: „möglichst viele
   Wörter in den Zeilen, Akzent-Wörter zusammen in einer Zeile"):
   - text-wrap: pretty verhindert Einzelwort-Reste auf der letzten Zeile
     (progressive enhancement, ältere Browser ignorieren es folgenlos).
   - Akzent-<em>-Phrasen brechen nie intern um; unter 480px wieder frei,
     dort passen lange Komposita sonst nicht in die Zeile (§1.5-H-Scroll). */
h1, h2, h3 {
  text-wrap: pretty;
}
@media (min-width: 480px) {
  h1 em, h2 em, h3 em { white-space: nowrap; }
}

p { color: var(--text-100); }

.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--text-200);
}

/* ============================================================
   Buttons — Accent (Haupt-CTA), Specs aus DIGITAL_CI Sektion 08
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity var(--duration) var(--ease);
}

.btn:active::before {
  opacity: 1;
  transition-duration: 0.04s;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Accent (Haupt-CTA) */
.btn-accent {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 35%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.05) 100%) padding-box,
    radial-gradient(ellipse 75% 80% at center,
      rgba(var(--shadow-rgb), 0.22) 0%,
      rgba(var(--shadow-rgb), 0.08) 55%,
      rgba(var(--shadow-rgb), 0) 90%) padding-box,
    /* Navy-Basis bewusst über --navy/--deep-navy statt Surface-Tokens:
       der CTA bleibt in BEIDEN Themes der dunkle Marken-Button
       (Dark: identische Hex-Werte; Light: dunkler Kontrast-Block). */
    linear-gradient(90deg, var(--navy) 0%, var(--deep-navy) 100%) padding-box,
    /* Border-Verlauf: Start bewusst fixer --accent-Wert, Ende über --glow-rgb —
       im Light-Theme (Glow = Brand-Blau) wird der Verlauf flach, das ist ok */
    linear-gradient(0deg, rgba(44, 110, 169, 0.55) 0%, rgba(var(--glow-rgb), 0.55) 100%) border-box;
  color: var(--white);
  border: 1px solid transparent;
  letter-spacing: 0.4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.22),
    0 1px 2px rgba(var(--shadow-rgb), 0.30),
    0 6px 18px rgba(var(--shadow-rgb), 0.20);
}

.btn-accent:hover {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.06) 35%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.08) 100%) padding-box,
    radial-gradient(ellipse 75% 80% at center,
      rgba(var(--shadow-rgb), 0.18) 0%,
      rgba(var(--shadow-rgb), 0.06) 55%,
      rgba(var(--shadow-rgb), 0) 90%) padding-box,
    linear-gradient(90deg, var(--navy) 0%, var(--deep-navy) 100%) padding-box,
    linear-gradient(0deg, rgba(44, 110, 169, 0.75) 0%, rgba(var(--glow-rgb), 0.75) 100%) border-box;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.26),
    0 4px 14px rgba(var(--shadow-rgb), 0.35),
    0 8px 22px rgba(var(--shadow-rgb), 0.22);
}

.btn-accent:active {
  transform: translateY(0);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0) 100%) padding-box,
    radial-gradient(ellipse 75% 80% at center,
      rgba(var(--shadow-rgb), 0.30) 0%,
      rgba(var(--shadow-rgb), 0.12) 55%,
      rgba(var(--shadow-rgb), 0) 90%) padding-box,
    /* :active dunkelt die Navy-Basis ab — bewusst Literale statt Surface-Tokens,
       damit der CTA auch im Light-Theme dunkel bleibt (#131F2B = Dark-Surface-2) */
    linear-gradient(90deg, var(--deep-navy) 0%, #131F2B 100%) padding-box,
    linear-gradient(0deg, rgba(44, 110, 169, 0.40) 0%, rgba(var(--glow-rgb), 0.40) 100%) border-box;
  box-shadow:
    inset 0 1px 2px rgba(var(--shadow-rgb), 0.45),
    inset 0 0 20px rgba(var(--shadow-rgb), 0.20);
  transition-duration: 0.08s;
}

/* Outline (sekundäre Aktion) — Frost-Glas. Specs aus DIGITAL_CI §08.
   Verwendet für nicht-Beratungs-Conversion-CTAs wie „Zum Kanalservice
   Magazin" oder „Mehr zur Auftragsgewinnung". Signature-Button bleibt
   dem primären Beratungs-CTA vorbehalten (CLAUDE.md §1.8). */
.btn-outline {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 35%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(180deg,
      rgba(31, 52, 71, 0.28) 0%,
      rgba(25, 41, 57, 0.42) 100%);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.22),
    inset 0 0 24px rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(var(--shadow-rgb), 0.25),
    0 6px 18px rgba(var(--shadow-rgb), 0.18);
}

.btn-outline:hover {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.06) 35%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.08) 100%),
    linear-gradient(180deg,
      rgba(31, 52, 71, 0.40) 0%,
      rgba(25, 41, 57, 0.55) 100%);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.28),
    inset 0 0 28px rgba(255, 255, 255, 0.06),
    0 2px 4px rgba(var(--shadow-rgb), 0.28),
    0 8px 22px rgba(var(--shadow-rgb), 0.25);
}

.btn-outline:active {
  transform: translateY(0);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg,
      rgba(12, 20, 28, 0.50) 0%,
      rgba(var(--shadow-rgb), 0.60) 100%);
  box-shadow:
    inset 0 1px 2px rgba(var(--shadow-rgb), 0.40),
    inset 0 0 20px rgba(var(--shadow-rgb), 0.15);
  transition-duration: 0.08s;
}

/* Ghost (Text-Link). Specs aus DIGITAL_CI §08. Transparenter
   Pill-Knopf ohne Border — reiner Text-Akzent mit Cyan-Hover. */
.btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-3) 16px;
}

.btn-ghost::before { display: none; }

.btn-ghost:hover {
  color: var(--accent-hover);
  background: rgba(255, 255, 255, 0.03);
}

/* Größenvarianten */
.btn-sm {
  padding: 11px 24px;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.btn-lg {
  /* Fluid: skaliert kompakt auf engen Viewports, voll auf Desktop */
  padding: clamp(13px, 1.6vw, 16px) clamp(20px, 4vw, 36px);
  font-size: clamp(13px, 1.4vw, 15px);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ============================================================
   Accent Signature — globaler Haupt-CTA (siehe CLAUDE.md §1.8)
   Bese-Bildmarke (3 einzeln animierte Teile) + Text-Shine.
   Wird auf JEDEM primären Beratungs-CTA der Seite verwendet
   (Header, Hero, Section-CTAs, Footer-CTA). Größenvarianten
   über zusätzliche Klasse: Default = Header (kompakt), .btn-lg
   = Hero/Sections (großzügig), siehe Override-Block weiter unten.
   ============================================================ */
.btn-logo-mark {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  transform-origin: center;
}
.btn-logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.btn-logo-mark .p1,
.btn-logo-mark .p2,
.btn-logo-mark .p3 {
  fill: var(--white);
}

.btn-shine {
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 1)   42%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 1)   58%,
    rgba(255, 255, 255, 1)  100%);
  background-size: 300% 100%;
  background-repeat: repeat;
  background-position: 0 center;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: btn-text-shine 9s linear infinite;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  will-change: background-position;
}
@keyframes btn-text-shine {
  from { background-position:    0 center; }
  to   { background-position: -300% center; }
}

.btn-accent-signature {
  padding: 14px 2.4em 14px 20px;
  gap: 12px;
  justify-content: flex-start;
}
.btn-accent-signature .btn-logo-mark {
  transition: transform 0.8s var(--ease-morph);
}
.btn-accent-signature:hover .btn-logo-mark {
  transform: translateX(0.35em) scale(1.06);
}
@keyframes mark-blink-sharp {
  0%, 17%   { fill: var(--white); }
  18%, 26%  { fill: var(--accent-hover); }
  27%, 40%  { fill: var(--white); }
  41%, 50%  { fill: var(--cyan-hi); }
  51%, 100% { fill: var(--white); }
}
.btn-accent-signature:hover .btn-logo-mark .p1 { animation: mark-blink-sharp 1.2s ease-out 0s; }
.btn-accent-signature:hover .btn-logo-mark .p2 { animation: mark-blink-sharp 1.2s ease-out 0.12s; }
.btn-accent-signature:hover .btn-logo-mark .p3 { animation: mark-blink-sharp 1.2s ease-out 0.24s; }
.btn-accent-signature .btn-shine {
  transition: transform 0.8s var(--ease-morph);
}
.btn-accent-signature:hover .btn-shine {
  transform: translateX(0.8em);
}

/* Hero-/Section-Größe für den Signature-CTA. Ohne diese Regel
   würde .btn-accent-signature das Padding von .btn-lg überschreiben
   und der Hero-Button auf Header-Größe schrumpfen. */
.btn-accent-signature.btn-lg {
  padding: clamp(14px, 1.6vw, 18px) clamp(28px, 4vw, 40px)
           clamp(14px, 1.6vw, 18px) clamp(22px, 3vw, 28px);
  gap: clamp(10px, 1.2vw, 14px);
}
.btn-accent-signature.btn-lg .btn-logo-mark {
  width: clamp(15px, 1.4vw, 17px);
  height: clamp(17px, 1.6vw, 19px);
}

/* Bei extrem engen Viewports darf der Button-Text ausnahmsweise umbrechen,
   damit kein Inhalt unter den Rand läuft */
@media (max-width: 360px) {
  .btn {
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}

/* ============================================================
   Icons — Lucide-Sprite-System
   ============================================================ */
/* Off-screen-Container für das <symbol>-Sprite (ersetzt das
   bisherige Inline-style="position:absolute" auf dem <svg>) */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}

.icon--xs { width: 14px; height: 14px; stroke-width: 2.2; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

.icon--filled {
  fill: currentColor;
  stroke: none;
}

.icon--accent { color: var(--accent-hover); }
.icon--brand  { color: var(--accent); }

/* ============================================================
   Formular-Utilities (CI §10)
   ============================================================ */
.form-input {
  width: 100%;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-100);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.form-input::placeholder {
  color: var(--text-300);
}

.form-input:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 110, 169, 0.18);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Site-Header — Topbar + Navbar (Sticky)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* — Navbar (CI §11) — */
.navbar {
  position: relative;
  z-index: 2; /* über Mobile-Nav innerhalb des Header-Stacking-Contexts */
  background: rgba(12, 20, 28, 0.78); /* Surface 1 + Transparenz für Glas */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--text-500);
}

.navbar__inner {
  display: grid;
  /* Logo — Menü (1fr) — Telefon — CTA (der Theme-Toggle ist seit dem
     2026-09-18 raus, Marie — die Seite läuft fest hell) */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  /* ⚠ ABHÄNGIGKEIT: Diese 72px + der 1px `border-bottom` der `.navbar`
     darüber ergeben die Header-Höhe von 73px, die der Startseiten-Hero
     hart abzieht (`.page-home .hero { min-height: calc(100svh - 73px) }` — das Logo-Band liegt seit dem 17.09. als Innenabstand IM Hero, s. `.hero-band` —,
     Block „Startseite: Hero füllt den ersten Bildschirm"). Der Header ist
     `sticky` und steht im Fluss — stimmt der Abzug nicht mehr, ragt die
     nächste Section wieder in den ersten Bildschirm bzw. entsteht ein
     Überhang. Bei Änderung hier also dort nachziehen. */
  min-height: 72px;
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  height: 32px;
}

.navbar__brand img {
  height: 32px;
  width: auto;
}

.navbar__brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.navbar__menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  justify-content: center;
}

@media (min-width: 1180px) {
  .navbar__menu { display: flex; }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--text-100);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--accent-hover);
  background: rgba(255, 255, 255, 0.03);
}

.nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-link__chevron {
  transition: transform var(--duration) var(--ease);
}

.nav-item--has-dropdown:hover .nav-link__chevron,
.nav-item--has-dropdown:focus-within .nav-link__chevron {
  transform: rotate(180deg);
}

/* Noch nicht gebaute Seiten: Link bleibt in der Navigation sichtbar (die
   Menü-Struktur soll vollständig wirken), trägt aber KEIN href → kein 404.
   Inert + gedimmt signalisiert „kommt noch". Greift in Navbar, Mobile-Nav
   und Footer gleichermaßen über das data-soon-Attribut. Marie 2026-06-15.
   Sobald die Zielseite gebaut ist: data-soon zurück auf href="…" setzen. */
[data-soon] {
  pointer-events: none;
  cursor: default;
  opacity: 0.4;
}
/* Dropdown-Eltern (Leistungen/Branchen) öffnen beim Hovern weiterhin ihr
   Menü (Trigger ist :hover auf dem <li>, der über das pointer-events:none
   des Links durchgereicht wird) — ihr eigener Klick ist inert, sie werden
   aber NICHT gedimmt, sonst sähe die ganze Navigation halb-deaktiviert aus. */
.nav-link[aria-haspopup][data-soon] {
  opacity: 1;
}

/* Telefon im Header (links neben CTA, ersetzt die alte Topbar).
   Größe matched .btn-sm (siehe Buttons-Sektion), damit Telefon-Pill
   und „Beratung anfragen"-CTA optisch gleichwertig stehen. */
.navbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: var(--text-100);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.navbar__phone-number {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transition: text-decoration-color var(--duration) var(--ease);
}

.navbar__phone:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-border-hover);
  color: var(--white);
}

.navbar__phone:hover .navbar__phone-number {
  text-decoration-color: var(--accent-hover);
}

.navbar__phone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Auf Mobile: Telefon ohne Rahmen/Hintergrund — nur Icon + Nummer,
   dafür deutlich größer als der CTA-Text. Logo wird zugunsten der Nummer kleiner. */
@media (max-width: 1179px) {
  .navbar__phone {
    padding: 4px 0;
    gap: 8px;
    font-size: 16px;
    letter-spacing: 0.2px;
    background: transparent;
    border: 1px solid transparent;
  }
  .navbar__phone:hover { background: transparent; border-color: transparent; }
  .navbar__phone .icon { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .navbar__phone { font-size: 15px; gap: 7px; }
}

@media (max-width: 359px) {
  .navbar__phone .icon { display: none; }
}

.navbar__cta { justify-self: end; }

/* Signature-Button in der Navbar: Höhe auf Phone-Pill abgestimmt (btn-sm),
   horizontale Padding-Reserve rechts bleibt für den Text-Slide-Effekt erhalten */
.navbar__cta.btn-accent-signature {
  padding: 11px 2.4em 11px 18px;
  font-size: 14px;
  letter-spacing: 0.3px;
  gap: 10px;
}
.navbar__cta .btn-logo-mark {
  width: 13px;
  height: 15px;
}

@media (max-width: 1179px) {
  /* Logo (links) — Telefon (mittig im verfügbaren Restraum) — Burger (rechts).
     `auto 1fr auto` mit `justify-self: center` auf dem Telefon platziert die
     Nummer mittig zwischen Logo und Burger (bis 2026-09-18 stand hier noch
     der Theme-Toggle als dritte Spalte).
     Größeres Logo auf Mobile; Burger wird per negativem Margin näher an
     den rechten Rand gezogen, ohne das Container-Padding zu verkleinern. */
  .navbar__inner {
    grid-template-columns: auto 1fr auto;
    gap: clamp(8px, 2vw, 16px);
  }
  .navbar__brand,
  .navbar__brand img { height: 40px; }
  .navbar__brand { justify-self: start; grid-column: 1; }
  .navbar__phone { justify-self: center; grid-column: 2; }
  .navbar__hamburger {
    justify-self: end;
    grid-column: 3;
    margin-right: calc(var(--container-pad) * -0.5); /* halbes Container-Padding, Token seit 2026-09-09 */
  }
  .navbar__cta { display: none; }
}

.navbar__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--text-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.navbar__hamburger:hover {
  border-color: var(--text-400);
  background: rgba(255, 255, 255, 0.03);
}

.navbar__hamburger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1179px) {
  .navbar__hamburger {
    display: inline-block;
    border-color: transparent;
    background: transparent;
  }
  .navbar__hamburger:hover {
    border-color: transparent;
    background: transparent;
  }
}

.hamburger__bar {
  display: block;
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--text-100);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.hamburger__bar:nth-child(1) { top: 14px; }
.hamburger__bar:nth-child(2) { top: 21px; }
.hamburger__bar:nth-child(3) { top: 28px; }

.navbar__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

/* — Theme-Toggle: ENTFERNT (Marie 2026-09-18: die Webseite läuft standardmäßig
   und fest in der hellen Version). Button, Sonne-Mond-Morph und Soft-Klick
   sind restlos raus (Markup navbar.html, Engine scripts.html, Pre-Paint-Script
   head-open.html). Das Light-Theme steht fest am <html>; das Dark-Token-Paket
   in :root bleibt, weil alle Dunkel-Inseln es lokal re-deklarieren. — */

/* Logo-Swap: weißes Logo im Dark-Theme, Vollfarb-Variante im Light-Theme.
   Zwei <img> + Display-Toggle (kein JS-src-Swap — robust ggü. build.js-
   Pfad-Rewriting, kein Lade-Flackern beim Umschalten). */
.brand-logo--light { display: none; }
html[data-theme="light"] .brand-logo--dark { display: none; }
html[data-theme="light"] .brand-logo--light { display: block; }

/* — Dropdown (Desktop, CI §11) — */
.nav-item {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 260px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(25, 41, 57, 0.96) 0%, rgba(19, 31, 43, 0.96) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.30),
    0 12px 36px rgba(var(--shadow-rgb), 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Schließen mit 0.16s Gnadenfrist: kurzes Verlassen der Hover-Zone
     (z. B. diagonale Maus-Bewegung Richtung Menüpunkt) klappt das
     Menü nicht mehr sofort zu. Öffnen bleibt sofort (Hover-Regel
     unten setzt eigene Delays auf 0s). */
  transition:
    opacity 0.18s var(--ease) 0.16s,
    transform 0.18s var(--ease) 0.16s,
    visibility 0s linear 0.34s;
  z-index: 10;
}

/* Unsichtbare Hover-Brücke über dem Panel: überdeckt den 6px-Spalt
   zwischen Menüpunkt und Dropdown (top: calc(100% + 6px)), damit der
   Hover auf .nav-item beim Runterfahren nicht abreißt — das Menü
   „sprang" sonst beim Ansteuern der Einträge immer wieder zu
   (Marie 2026-07-23). Volle Panel-Breite → auch diagonale Wege sind
   abgedeckt. Nur aktiv, solange das Panel offen ist (pointer-events
   erbt vom Panel-Zustand). Höhe = 6px-Spalt + 2px Puffer — NICHT
   größer machen, sonst ragt die Brücke in die Navbar-Zeile und
   schluckt Hover/Klicks der Nachbar-Menüpunkte (Guardian-Befund). */
.dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nav-item--has-dropdown:hover > .dropdown,
.nav-item--has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease),
    visibility 0s linear 0s;
}

.dropdown__arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border);
  transform: translateX(-50%) rotate(45deg);
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-100);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.dropdown__item + .dropdown__item { margin-top: 2px; }

.dropdown__item:hover,
.dropdown__item:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  outline: none;
}

.dropdown__item:focus-visible {
  box-shadow: inset 0 0 0 1px var(--glass-border-hover);
}

/* ============================================================
   Mobile-Nav-Overlay (CI §11 Mobile Navigation)
   ============================================================ */
.mobile-nav {
  position: fixed;
  inset: 0;
  top: 0; /* erweitert sich relativ zur sticky-Header-Höhe */
  z-index: 1; /* unter Topbar/Navbar im selben Header-Stacking-Context */
  background: rgba(6, 10, 14, 0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    visibility 0s linear 0.28s;
  overflow-y: auto;
}

body.is-mobile-nav-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
}

body.is-mobile-nav-open { overflow: hidden; }

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 116px var(--space-5) var(--space-7); /* 116px = Topbar + Navbar Höhe + Puffer */
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav__link,
.mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-100);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  border: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.mobile-nav__summary::-webkit-details-marker { display: none; }
.mobile-nav__summary::marker { content: ''; }

.mobile-nav__link:hover,
.mobile-nav__summary:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--glass-border);
  color: var(--white);
}

.mobile-nav__chevron {
  transition: transform var(--duration) var(--ease);
  color: var(--text-300);
}

.mobile-nav__group[open] .mobile-nav__chevron {
  transform: rotate(180deg);
  color: var(--accent-hover);
}

.mobile-nav__group[open] .mobile-nav__summary {
  color: var(--accent-hover);
}

.mobile-nav__sublink {
  display: block;
  padding: 12px var(--space-5) 12px 44px;
  color: var(--text-200);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  border-left: 2px solid var(--text-500);
  margin-left: var(--space-4);
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.mobile-nav__sublink:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.mobile-nav__cta {
  margin-top: auto;
  padding-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: 1px solid var(--text-500);
}

.mobile-nav__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: var(--white);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3px;
}

.mobile-nav__phone:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-border-hover);
}

/* ============================================================
   Section 01 — Hero
   ============================================================ */
.hero {
  position: relative;
  /* Mobile: oben etwas kompakter (sitzt direkt unter der Navbar). */
  padding-block: var(--space-6) var(--space-9);
  /* Aurora-Layer wird gekappt + eigener stacking-context, damit
     z-index: -1 unter dem Hero-Content bleibt, aber nicht in andere
     Sections oder unter den globalen page-Hintergrund durchschlägt */
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-10);
    min-height: calc(100vh - var(--space-9));
    display: flex;
    align-items: center;
  }
}

/* ============================================================
   Hero — Aurora-Background
   (CSS-only, conic-gradient Beams + Noise-Overlay,
   GPU-friendly: nur transform/opacity, mix-blend-mode: screen)
   ============================================================ */
.hero__aurora {
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  pointer-events: none;
  filter: blur(55px) saturate(135%);
  opacity: calc(0.62 * var(--aurora-opacity));
  /* Repaint-Bereich auf die Aurora kapseln — Beam-Bewegung soll
     keine Layout-/Paint-Folgen im restlichen Hero auslösen */
  contain: layout paint;
}

@media (min-width: 1024px) {
  .hero__aurora { filter: blur(85px) saturate(135%); }
}

.hero__beam {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: var(--aurora-blend);
  /* Kein will-change auf den Beams selbst — translate3d in den
     Keyframes triggert bereits GPU-Compositing. Explizites
     will-change hier würde unter dem filter-Wrapper zusätzliche
     Layer erzwingen und das mix-blend-mode-Screen-Ergebnis
     auf manchen GPUs/Browsern verfälschen. */
}

.hero__beam--1 {
  top: -25%;
  left: -10%;
  width: 60%;
  height: 70%;
  background: conic-gradient(
    from 210deg at 50% 50%,
    transparent 0deg,
    rgba(44, 110, 169, 0.50) 50deg,
    rgba(var(--glow-rgb), 0.48) 100deg,
    rgba(107, 196, 240, 0.22) 150deg,
    transparent 210deg
  );
  animation: hero-aurora-drift-a 14s linear infinite;
}

.hero__beam--2 {
  top: 4%;
  right: -14%;
  width: 58%;
  height: 70%;
  background: conic-gradient(
    from 40deg at 50% 50%,
    transparent 0deg,
    rgba(179, 204, 223, 0.22) 70deg,
    rgba(44, 110, 169, 0.42) 130deg,
    rgba(var(--glow-rgb), 0.20) 190deg,
    transparent 250deg
  );
  animation: hero-aurora-drift-b 18s linear infinite reverse;
}

.hero__beam--3 {
  bottom: -30%;
  left: 30%;
  width: 55%;
  height: 65%;
  background: conic-gradient(
    from 290deg at 50% 50%,
    transparent 0deg,
    rgba(var(--glow-rgb), 0.30) 80deg,
    rgba(107, 196, 240, 0.18) 140deg,
    transparent 210deg
  );
  animation: hero-aurora-drift-c 24s linear infinite;
}

/* Auf sehr engen Viewports den dritten Beam aussparen — weniger
   blur-Layer = ruhigeres GPU-Profil auf Low-End-Mobiles */
@media (max-width: 480px) {
  .hero__beam--3 { display: none; }
  .hero__aurora { filter: blur(55px) saturate(130%); }
}

/* Feinkorn-Noise (SVG inline, ~1.4 KB), hebt das Aurora-Glow auf
   das gewohnte CI-Look von dunkel-glanzendem Glas */
.hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 220px 220px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes hero-aurora-drift-a {
  0%   { transform: translate3d(-12%, -6%, 0) rotate(0deg)   scale(0.88); }
  50%  { transform: translate3d(14%,  10%, 0) rotate(180deg) scale(1.20); }
  100% { transform: translate3d(-12%, -6%, 0) rotate(360deg) scale(0.88); }
}

@keyframes hero-aurora-drift-b {
  0%   { transform: translate3d(8%,  4%, 0) rotate(0deg)    scale(0.92); }
  50%  { transform: translate3d(-16%, -8%, 0) rotate(-180deg) scale(1.16); }
  100% { transform: translate3d(8%,  4%, 0) rotate(-360deg) scale(0.92); }
}

@keyframes hero-aurora-drift-c {
  0%   { transform: translate3d(0, 6%, 0)    rotate(0deg)   scale(0.85); }
  50%  { transform: translate3d(10%, -10%, 0) rotate(180deg) scale(1.15); }
  100% { transform: translate3d(0, 6%, 0)    rotate(360deg) scale(0.85); }
}

/* ============================================================
   Hero — Office-Hintergrundvideo (Marie 2026-08-27)
   Läuft seit dem 2026-09-04 NUR NOCH auf dem Karriere-Hero (Marie hat
   es an dem Tag von der Startseite genommen: „das passt hier nicht") —
   Markup + Poster-Preload liegen inline in templates/pages/karriere/.
   Zur Startseiten-Fassung (fixed am Viewport) s. die HISTORIE unten.
   Stummer 1080p-Loop vom Firmensitz als unterste Hero-Ebene
   (z-index -2, unter der Aurora). Poster als Wrapper-Background =
   sofortiger Erst-Paint + No-JS-/reduced-motion-Fallback; das
   <video> fadet erst bei 'playing' ein ([data-playing]).
   Scrim: Nahschwarz rgba(6, 10, 14, …) = --surface-0 (#060A0E) als
   Roh-Tripel — exakt der projektweite theme-feste Scrim-Ton
   (.mawx__photo-claim, Foto-Scrims; Guardian-Fix 2026-08-27),
   symmetrisch (Text steht seit dem Zentrier-Umbau MITTIG) mit
   Bodenvignette (Stats/CTA/Trust). Kontrast über den Textzonen
   GEMESSEN (§1.6-Methodik: Textspalte ausgeblendet, hellster
   BG-Pixel je Zone über 5 Loop-Frames; nach dem Lesbarkeits-Scrim
   vom 2026-08-27): 1440px Headline 11,59:1 · Lead 13,04:1 ·
   Stats 13,53:1; 390px 11,76 / 11,62 / 11,74 — alle ≥ 4,5:1.
   Nach Scrim-Änderungen NEU messen, nicht schätzen.
   ============================================================ */
/* Der Layer liegt ABSOLUT im Hero und füllt ihn ganz. `.hero` trägt
   `position: relative; overflow: hidden; isolation: isolate` — das clippt
   ihn sauber und hält z-index:-2 unter Text und Aurora, ohne in
   Nachbar-Sektionen zu lecken.
   HISTORIE (für einen möglichen Wiedereinbau auf der Startseite): dort lief
   er vom 2026-08-27 bis 2026-09-04 stattdessen `position: fixed; top:0;
   left:0; width:100%; height:100lvh` am VIEWPORT (Marie: „HG der
   Hero-Section fixiert, die Section danach slidet überlappend") — dafür
   braucht es zwingend eine opake Ebene über allen Folge-Sektionen (damals
   der `.home-flow`-Wrapper), sonst scheint das Video unter der ganzen
   Seite durch. Die Karriere-Seite hat so eine Ebene nicht. */
.hero__bgvideo {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url("Bilder/office-hintergrund-poster.webp") center 38% / cover no-repeat;
}

.hero__bgvideo-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__bgvideo[data-playing="true"] .hero__bgvideo-media { opacity: 1; }

/* Scrim: EINE gleichmäßige 25-%-Überlagerung über der ganzen Bühne
   (Marie 2026-09-10: „eine 25%ige Schwarz-Überlagerung von dem Video im
   Hintergrund"). Ton ist der projektweit theme-feste Near-Black
   rgba(6, 10, 14, …) = --surface-0 als Roh-Tripel (.mawx__photo-claim,
   Foto-Scrims, Guardian-Fix 2026-08-27) — bei 25 % ist er von reinem
   Schwarz nicht zu unterscheiden, bleibt aber der dokumentierte Scrim-Ton.
   ⚠ LESBARKEIT — offener Marie-Punkt: Der Hero-Text steht in einer HELLEN
   Glas-Karte (weißes Alpha-Rezept, Marie 2026-07-31) und ist selbst weiß —
   die Karte hellt also zusätzlich auf, statt zu tragen. GEMESSEN mit den
   25 % (§1.6-Methodik: Karten-Inhalt ausgeblendet, hellster bzw. mittlerer
   Hintergrundpixel je Zone über drei Video-Frames, 1440×900):
     Headline 2,45 (Median 3,30) · Lead 2,65 (3,03) · Rotator 2,75 (3,65)
   — unter der WCAG-Schwelle 4,5:1; mit dem abgelösten dreischichtigen
   Scrim (~0,64 Abdunklung hinter dem Text) waren es Headline 4,67–5,30 ·
   Lead 4,63–5,96 · Rotator 5,09–5,56.
   Die Lesbarkeit ließe sich zurückholen, OHNE die 25 % auf dem Video
   anzutasten: ein dunkler Grund unter dem Weiß-Alpha der Karte selbst
   (`.ka-hero__card`, zusätzlich `rgba(6,10,14,0.38)` — gemessen
   4,83/5,05/5,17:1). Nicht gebaut: das Karten-Rezept ist Marie-hoheitlich
   (§1.1), sie entscheidet.
   HISTORIE — die abgelöste Fassung, falls der Kontrast zurück soll:
     radial-gradient(ellipse 60% 62% at 50% 50%,
       rgba(6,10,14,0.34) 0%, rgba(6,10,14,0.16) 58%, transparent 80%),
     linear-gradient(180deg,
       rgba(6,10,14,0.34) 0%, rgba(6,10,14,0.28) 45%, rgba(6,10,14,0.44) 100%),
     rgba(6,10,14,0.22)
   Auf der Startseite stand der Text bis 2026-09-04 FREI auf dem Video und
   brauchte noch mehr (0.45/0.20 · 0.66/0.58/0.80 · Basis 0.48 → gemessen
   11,6–13,5:1). Steht der Text je wieder ohne Karte auf dem Video, diese
   Werte zurückholen — und danach NEU MESSEN, nicht schätzen. */
/* SEIT 18.09.2026 70 % (Marie: „bei Über uns habe ich die Hintergrund-
   überlagerung stärker — bitte auch in der Hero-Section" der Karriere-
   Seite): dieselbe Stärke wie Über uns, deshalb gilt sie jetzt in der
   geteilten Regel für beide Seiten und die frühere Über-uns-Sonderregel
   ist entfallen. Die 25 % der Kommentare oben und ihre Messwerte sind
   HISTORIE (Stand 10.09.–18.09.). */
.hero__bgvideo-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 14, 0.70);
}

/* Die frühere `.home-flow`-Ebene (opaker Wrapper um alle Startseiten-
   Sections nach dem Hero) ist am 2026-09-04 mit dem Video ENTFERNT — sie
   existierte nur, damit die Sections beim Scrollen über das FIXIERTE
   Video schoben. Ohne Video ist sie wirkungslos: gemessen 0 abweichende
   Hintergrund-Pixel über die ganze Seite in beiden Themes (Vergleich mit
   ausgeblendeten Section-Inhalten — ein reiner Fullpage-Diff taugt dafür
   NICHT, dessen Rauschen aus Ticker/Slider/Zählern lag mit 0,08–0,34 %
   über dem gesuchten Effekt). Käme das Video je auf die Startseite
   zurück, gehören Wrapper + Regel wieder mit dazu. */

/* Print: ein fixierter Layer wiederholt sich in Paged Media auf jeder
   Druckseite — fürs Drucken schlicht ausblenden (Guardian 2026-08-27). */
@media print {
  .hero__bgvideo { display: none; }
}

/* Die frühere Aurora-Dämpfung der Startseite (`opacity: calc(0.30 * …)`,
   damit die Aurora das Video nicht zukleistert) ist am 2026-09-04 mit dem
   Video ENTFERNT — der Startseiten-Hero läuft wieder mit voller Aurora wie
   jeder andere Hero. Käme der Layer je auf eine Seite zurück, gehört die
   Dämpfung mit: zwei großflächige Licht-Ebenen übereinander ergeben Matsch
   statt Tiefe (dieselbe Regel wie beim .hv-sys-Layer). Der Karriere-Hero
   braucht sie nicht — er hat gar keine Aurora im Markup. */

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* Startseite: seit 2026-09-11 (abends) wieder ZWEISPALTIG — Text links,
   rechts das Cockpit (.hv-dash, Block am Dateiende). Vom 2026-08-27 bis
   dahin war der Hero zentriert ohne Visual (Marie damals: „keine Animation,
   die ganzen Elemente mittig"); die dafür nötige Neutralisierung des
   globalen .hero__trust-cta-Versatzes (-24px, richtet den Badge an der
   linken CTA-Kante aus) ist mit der linksbündigen Spalte wieder entfallen —
   der Badge steht wie auf AG/MA unter dem CTA. Die .hero--centered-Regeln
   der Breiten-Runde (unten) bleiben stehen: sie greifen nur, solange die
   Section die Klasse trägt (Rückweg zur zentrierten Fassung). Der Text
   liegt über dem Bühnen-Überhang der Cockpit-Kacheln (AG-Muster). */
.page-home .hero__text:where(:not(.kanal-hero *)) {
  position: relative;
  z-index: 2;
}

/* Startseite: Hero-Content zieht in die Breite (Marie 2026-08-28 — „das ist
   mir noch ein bisschen zu krass geboxt … ruhig weiter an die Breite ziehen,
   die Elemente und die Texte"). Vorher stand der Inhalt als 746px schmale
   Säule mittig im 1440px-Bild: die H1 brach durch den optionalen <br> hinter
   „und" dreizeilig auf nur 502px um, und Lead + Kennzahlen erbten diese
   Schmalheit — .hero--centered .hero__text ist eine Flex-Spalte mit
   align-items:center, ihre Breite ist damit die max-content-Breite des
   breitesten Kindes (also der H1).
   Zwei Hebel hier, der dritte im Markup (H1 jetzt zweizeilig → 832px):
   1. Die Textspalte streckt sich auf die volle Container-Breite, damit Lead
      und Kennzahlen überhaupt Raum zum Wachsen haben (ohne diesen Schritt
      verpuffen die max-width-Werte unten an der shrink-to-fit-Breite).
   2. Lead 58 → 70ch, Kennzahlen-Reihe auf 1100px als breites Fundament unter
      der Headline. Beide bewusst GEDECKELT statt auf volle Containerbreite:
      bei 1376px reißt die Zähler-Reihe optisch auseinander und liest sich
      nicht mehr als ein Block, und der Lead käme auf >120 Zeichen je Zeile.
   Alles auf .page-home gescoped — .hero--centered läuft auf 9 weiteren
   Seiten (Team, Presse, Kontakt, Ratgeber …) unverändert weiter.
   `hyphens: manual` sichert die einzeilige H1 ab: ohne sie trennt die
   globale Auto-Hyphenation an knappen Breiten „Mitarbei-ter"
   (§5a-Pattern wie .capacity__title). */
.page-home .hero__headline:where(:not(.kanal-hero *)) {
  hyphens: manual;
}

/* Der Lead ist seit dem Fokus-Umbau EIN Satz (Phase 7). Mit dem globalen
   52ch-Deckel brach er bei 1440 px dreizeilig mit „wird." als einzelnem
   Wort auf der letzten Zeile; 60ch (636 px in der 672 px breiten Spalte)
   macht daraus zwei vollere Zeilen. Gedeckelt bleibt er trotzdem — über
   die volle Containerbreite käme er auf mehr als 120 Zeichen je Zeile. */
:is(.page-home, .page-auftragsgewinnung) .hero__lead:where(:not(.kanal-hero *)) { max-width: 60ch; }

/* Startseite: Hero füllt den ersten Bildschirm (Marie 2026-08-28 — „der
   Hintergrund, also die Hero-Section, immer 100 % Viewpoint-Höhe am
   Anfang"). Vorher stand die Startseite in einer `min-height: auto`-Regel
   (Block „Hero-Innenabstand AG + Startseite", galt danach nur noch für die
   AG und ist seit dem 2026-09-11 ERSATZLOS WEG — auch die AG fährt jetzt
   dieses Rezept, s. Block „Auftragsgewinnung: Hero füllt den ersten
   Bildschirm") und war je nach
   Fenster nur 644–812px hoch — am unteren Rand ragte schon die nächste
   Section herein (bei 1440×1080 fast 200px), während das fixierte
   Office-Video im Hintergrund über die volle Viewport-Höhe weiterlief.
   Genau diese Naht hat Marie gemeint.
   ZWEI Details, an denen die Rechnung sonst scheitert:
   1. Abgezogen wird die Navbar-Höhe. `.site-header` ist `position: sticky`
      und steht damit IM FLUSS — ein Hero mit vollen 100svh ergäbe
      Header + Hero = ein Bildschirm PLUS 73px Überhang. Die 73px sind
      `.navbar__inner { min-height: 72px }` + 1px `border-bottom` der
      `.navbar`; ändert sich dort etwas, muss dieser Wert mit.
   2. `svh` statt `vh`: auf Mobile meint `vh` die GROSSE Viewport-Höhe
      (Adressleiste eingefahren) — beim Laden mit sichtbarer Leiste ragte
      der Hero dann unter die Bildkante. `100svh` ist der immer sichtbare
      Bereich; die `vh`-Zeile darüber bleibt als Fallback für Browser ohne
      svh-Unterstützung stehen (Reihenfolge = Fallback-Kette, wie beim
      Video-Layer). Der Video-Layer selbst bleibt bewusst auf `100lvh` —
      er soll die GRÖSSERE Fläche abdecken, damit beim Einfahren der
      Adressleiste kein Loch am unteren Rand entsteht.
   `min-height` (nicht `height`): auf sehr niedrigen Viewports (Landscape,
   kleine Phones) darf der Inhalt den Hero wachsen lassen, statt aus einer
   festen Höhe herauszulaufen. Bewusst OHNE Media-Query — Marie: „immer".
   Die vertikale Zentrierung kommt unter 1024px nicht aus `.hero` und wird
   deshalb hier für alle Breiten mitgegeben. */
.page-home .hero:where(:not(.kanal-hero)) {
  /* Hero + Logo-Band = ein Bildschirm (Token `--hero-band-h`, Begründung am
     `.hero-band`-Block). Bis 16.09. zog der Hero das Band von seiner Höhe
     AB und das Band stand als eigene Fläche darunter — Marie 17.09.: „die
     sind abgekapselt auf so einem schwarzen Hintergrund … da nicht mehr so
     eine Kante". Seitdem ist der Hero wieder voll bildschirmhoch, der Film
     läuft bis zur Unterkante durch, und das Band legt sich per negativem
     Abstand ÜBER seinen Fuß. Damit der Text nicht unter die Logos rutscht,
     reserviert der Hero die Bandhöhe als Innenabstand nach unten (unten
     und in der 1024er-Regel). Bleibt `min-height`: ist der Inhalt höher
     (1366×768, 1024×768), wächst der Hero und das Band rutscht mit seinem
     Fuß unter die Falz — Inhalt vor Höhe. */
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  padding-bottom: calc(var(--space-9) + var(--hero-band-h, 0px));
  display: flex;
  align-items: center;
}

/* Innenabstand an die FENSTERHÖHE gekoppelt (ab 1024px): die Vollbild-Regel
   oben ist `min-height` — reicht der Platz nicht, GEWINNT der Inhalt und der
   Hero wächst über den Bildschirm hinaus (richtig so, nichts darf
   abgeschnitten werden). Mit festen 96px oben+unten trat das schon in der
   zentrierten Fassung auf verbreiteten Laptop-Auflösungen ein (1366×768:
   113px Überhang, 1280×720: 160px) — deshalb galt der clamp seit 2026-08-28
   für Fenster bis 860px Höhe. SEIT DER ZWEISPALTIGEN FASSUNG (2026-09-11)
   gilt er für ALLE Fensterhöhen: die Textspalte ist mit dreizeiliger H1
   (CI-Größe, 832px Zeilenbreite gegen 672–723px Spalte), Lead, Kennzahlen,
   CTA und Trustpilot rund 720px hoch — bei 1440×900 ließen 2×96px nur 635px
   Inhalt zu (gemessen 935px Hero-Höhe), bei Maries 1864×1000 735px. 5vh sind
   bei 900px Fensterhöhe 45px, bei 1117px 56px, der 96px-Deckel greift erst
   ab 1920px Höhe; da der Inhalt per Flex zentriert steht, ändert das
   Padding an hohen Fenstern nichts Sichtbares — es begrenzt nur, wie hoch
   der Inhalt werden darf, bevor der Hero wächst. 4,5vh statt 5vh, weil
   die 743 px Textspalte bei 1440×900 mit 5vh (45 px) um 6 px über die
   Bildschirmhöhe liefen (gemessen 833 statt 827 px) — mit 40 px passt
   sie. Der Sockel von 24px hält den Text von der Bildkante weg. Nur
   Desktop-Breiten: die Mobile-Abstände (`.hero` in der 767px-Query)
   bleiben bewusst unangetastet. */
@media (min-width: 1024px) {
  .page-home .hero:where(:not(.kanal-hero)) {
    /* unten plus die Bandhöhe — das Logo-Band liegt über dem Hero-Fuß */
    padding-block: clamp(24px, 4.5vh, 96px) calc(clamp(24px, 4.5vh, 96px) + var(--hero-band-h, 0px));
  }
}

/* Unter 768 px setzt die geteilte Mobil-Regel (`.hero`, 767er-Query) den
   Innenabstand auf `--space-5`/`--space-6` — die Band-Reserve muss dort
   auf DIESEM Wert aufsetzen, nicht auf dem Desktop-`--space-9` (sonst
   rutscht der Text um 32 px hoch; gemessen 17.09.). */
@media (max-width: 767px) {
  .page-home .hero:where(:not(.kanal-hero)) {
    padding-bottom: calc(var(--space-6) + var(--hero-band-h, 0px));
  }
}

@media (min-width: 1024px) {
  .page-home .hero--centered .hero__text {
    max-width: none;
    width: 100%;
  }

  .page-home .hero--centered .hero__lead {
    max-width: 70ch;
  }

  .page-home .hero-stats:where(:not(.kanal-hero *)) {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
  }
}

/* Reihenfolge folgt DOM-Order: Text zuerst (Headline oben semantisch),
   Video rechts auf Desktop (Marie 2026-05-18). */

/* Hero-Typescale — Marie 2026-05-21: max. 3 Schriftgrößen im Hero.
   L = var(--text-display) = clamp(2rem, 7.2vw, 5rem) → H1 (CI-Wert)
   M = clamp(1.4rem, 3vw, 2.2rem)                     → Counter-Zahlen
   S = 12px (CI-Caption)                              → Lead, CTA, alle Labels
   Marie: Lead unter H1 hat dieselbe Schriftart + Größe wie die
   Counter-Labels — beide tragen S. */
.hero__headline {
  margin-bottom: var(--space-5);
  /* Kein Override — übernimmt --text-display aus :root (CI). */
}
@media (min-width: 1024px) {
  /* Marie 2026-09-02 („komisch umgebrochen"): auf der breiten Hero-Bühne
     brechen lange Komposita nicht mehr per Silbentrennung/&shy;
     („Rohrreinigungs-/betrieb", „Schädlings-/bekämpfung"), sondern an
     Wortgrenzen — hyphens:none schaltet auch die &shy;-Marken ab.
     Unter 1024px bleibt die Trennung aktiv, dort passen die Komposita
     sonst nicht in die Zeile (§1.5). */
  /* section.hero-Präfix = Spezifität (0,2,1): schlägt die späteren
     (0,2,0)-Regeln .hero--sub/.page-home .hero__headline { hyphens: manual }
     — manual honoriert &shy; und brach die Komposita weiter. */
  section.hero .hero__headline { hyphens: none; -webkit-hyphens: none; }
}

.hero__lead {
  max-width: 52ch;
  margin-bottom: var(--space-6);
  font-size: var(--text-lead);
}

@media (min-width: 1024px) {
  .hero__lead { margin-bottom: var(--space-7); }
}

/* Hero-Conversion-CTA — Schlüssel-Aktion der Startseite. Hebt sich
   bewusst durch breiteren Innenabstand und größere Schriftgröße von
   den übrigen Signature-CTAs ab (§5a). Padding-Y und Asymmetrie
   (Logo-Mark links) kommen aus .btn-accent-signature.btn-lg —
   muss daher im Stylesheet NACH der Signature-Block-Definition
   stehen, sonst greift der padding-inline-Override nicht. */
.hero__cta {
  padding-right: clamp(36px, 5.5vw, 56px);
  padding-left: clamp(26px, 4vw, 38px);
  font-size: clamp(15px, 1.7vw, 18px);
}


/* ============================================================
   Hero · Vertrauenszeile (.hero__trust) — Startseite
   ============================================================
   Go-Live-Plan Phase 7, Briefing 2.1 Regel 3: „Links: H1 + ein Satz
   + ein CTA + eine Vertrauenszeile. Die Vertrauenszeile trägt das
   TÜV-Siegel (ISO 9001:2015, verlinkt auf /zertifizierungen), das
   Trustpilot-Widget und die Betriebszahl — als eine Zeile, nicht als
   vier Zähler." Markup + Begründung der Reihenfolge stehen im Partial
   section-01-hero.html.

   KEINE Trennlinien zwischen den drei Zeichen: die CI schreibt für
   Reihen mit Vertrauenszeichen „gleich hoch, gleicher Abstand, keine
   senkrechten Trennlinien — Abstand trennt" (ci-design-system,
   DIGITAL_CI Sektion 23). Der `gap` ist deshalb das einzige
   Trennmittel und bewusst größer als der Wortabstand.

   Farben: der Hero ist in BEIDEN Themes eine Dunkel-Insel (§5a), die
   Zeile bezieht ihre Töne deshalb direkt aus den theme-festen
   CI-Tokens (--white, --silver-blue) — genau wie die Dashboard-Texte
   daneben. Kein Blau als Fläche (Marie 2026-09-08), kein Filter auf
   dem Siegel (CI-Verbot).
   ============================================================ */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Abstand trennt (CI Sektion 23) — bewusst großzügig, damit die drei
     Zeichen als drei Angaben und nicht als ein Satz gelesen werden.
     GEMESSEN: die drei Zeichen brauchen zusammen 551 px (Zahl 95 +
     Trustpilot-Ink 258 + Siegel 198). Ab rund 1330 px Fenster stehen sie
     deshalb auf EINER Zeile, darunter bricht die Reihe auf zwei um — die
     Hero-Höhe bleibt dabei überall innerhalb eines Bildschirms (gemessen
     827 px bei 1024–2560 px). Der gap absichtlich NICHT weiter gedrückt:
     um 1280 px einzeilig zu halten, müsste er auf 19 px fallen und läge
     damit 0,6 px vor dem Umbruch — das würde bei jeder Textänderung
     kippen. */
  gap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* Betriebszahl — Zahl aus daten.json (§0a: Zahlen-Claims nie hart im
   Template). Zweizeilig wie das Siegel daneben, damit die Reihe EINE
   Zeilenlage hat. */
.hero__trust-num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.hero__trust-num b {
  font: 700 clamp(19px, 1.5vw, 22px) / 1 var(--font-ui);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.hero__trust-num span {
  font: 500 11px / 1.2 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--silver-blue);
}

/* Der Trustpilot-Wrapper steht auf den übrigen Seiten ALLEIN unter dem
   CTA und trägt dafür `margin-top` + `margin-left: -24px` (die globale
   Regel weiter unten). In der Reihe gilt beides nicht mehr:
   · margin-top macht der Flex-`gap`,
   · der Versatz muss auf BEIDEN Seiten heraus, sonst sind die Abstände
     zu Zahl und Siegel unterschiedlich groß.
   GEMESSEN bei 1440 px (nicht geschätzt): der Trustpilot-iframe füllt
   die 300-px-Box, sein sichtbarer Inhalt beginnt 24 px hinter der
   linken und endet 18 px vor der rechten Boxkante. Genau diese beiden
   Werte werden hier herausgerechnet — danach ist der optische Abstand
   links und rechts derselbe wie zwischen den anderen Zeichen.

   `flex: 0 0 auto` ist Absicht und NACHGEMESSEN (Guardian-Hinweis):
   die 300-px-Box ist die feste Rahmengröße des Widget-Templates „Micro
   TrustScore" — sie darf nicht schrumpfen, sonst zentriert das Widget
   seinen Inhalt neu und die beiden Werte oben stimmen nicht mehr (das
   Markup selbst ist nach §5a unveränderlich). Auf schmalen Viewports
   ragt damit die LEERE Box über die Textspalte hinaus, der sichtbare
   Inhalt aber nie: gemessen bei 320/360/375/390/414/480/1024 px liegt
   die Ink-Kante bei 16–387 px innerhalb einer Spalte von 16–398 px,
   und kein Lauf erzeugt Horizontal-Scroll. */
.hero__trust .hero__trust-cta {
  margin-top: 0;
  margin-inline: -24px -18px;
  flex: 0 0 auto;
}

/* Siegel = CI-Größe M: farbiges Oktagon 36 px + zwei Zeilen. Klick
   führt auf die Nachweis-Seite (/zertifizierungen/, Phase 2) — ein
   Link auf die TÜV-Website ist verboten. Hover/Fokus liegen auf dem
   TEXT (Unterstreichung), nicht auf dem Zeichen: ein Prüfzeichen darf
   nicht umgefärbt, gefiltert oder animiert werden. */
.hero__trust-seal {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.hero__trust-seal img {
  /* CI-Größe M = Oktagon 32–36 px; hier das obere Ende, damit das Zeichen
     im Hero wirklich als Siegel gelesen wird (Erich: „Das TÜV-Siegel muss
     im Hero sichtbar sein"). Mindestgröße laut Siegel-README: 22 px. */
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: block;
}
.hero__trust-seal > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__trust-seal b {
  font: 700 12px / 1.2 var(--font-ui);
  color: var(--white);
}
.hero__trust-seal i {
  font: 500 11px / 1.2 var(--font-ui);
  font-style: normal;
  color: var(--silver-blue);
}
.hero__trust-seal:hover b,
.hero__trust-seal:focus-visible b { text-decoration: underline; }
.hero__trust-seal:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Schmale Viewports: die drei Zeichen stehen untereinander, sobald sie
   nicht mehr nebeneinander passen (flex-wrap). Der gap wird dabei zum
   Zeilenabstand — deshalb hier eine Stufe kleiner, sonst reißt die
   Zeile zu einem dritten Block auf. */
@media (max-width: 479px) {
  .hero__trust { gap: 16px 18px; }
}


/* Mobile: Hero kompakter, damit Headline weniger umbricht und das
   Video frueher sichtbar wird — moeglichst innerhalb eines Viewports
   (Marie 2026-05-29). */
@media (max-width: 767px) {
  .hero {
    padding-block: var(--space-5) var(--space-6);
  }
  .hero__grid { gap: var(--space-5); }
  .hero__headline {
    /* font-size seit 18.09. abends im Block „MOBIL-OPTIMIERUNG, RUNDE 2" (1b) am Dateiende:
       clamp(2.1rem, 10vw, 2.9rem) — Marie: „Überschriften mobil größer, speziell H1 und H2".
       Davor hier clamp(1.7rem, 8.5vw, 2.4rem); die Zeile ist bewusst raus, damit nicht zwei
       gleich-spezifische Regeln nur über die Reihenfolge entscheiden (§0a Edit-Falle). */
    line-height: 1.1;
    margin-bottom: var(--space-4);
  }
  /* Mobil hoechstens ein Umbruch: "Mehr Aufträge." ist Zeile 1, danach
     fliesst "Und genug zu tun für dich und die Jungs." zusammen. Der
     optionale <br class="hero__hl-br"> wird unter 768px ausgeblendet. */
  .hero__hl-br { display: none; }
  .hero__lead { margin-bottom: var(--space-4); }
  .hero-stats {
    gap: clamp(16px, 4vw, 24px) clamp(16px, 3vw, 28px);
    margin-bottom: var(--space-5);
  }
}

/* ============================================================
   Hero · Frame-Wrapper (Brand-Platzhalterbild mit Glas-Rahmen
   + Cyan-Glow). Das frühere Hero-Video wurde 2026-06-16 entfernt.
   ============================================================ */
.video-frame {
  position: relative;
  width: 100%;
}

.hero-photo {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.30),
    0 12px 40px rgba(var(--shadow-rgb), 0.45),
    0 0 0 1px rgba(var(--glow-rgb), 0.10),
    0 24px 80px -20px rgba(var(--glow-rgb), 0.20);
}

/* Hero-Platzhalterbild (Brand) — Interim an der Stelle des früheren
   Hero-Videos, bis echtes Kundenfoto/-Clip (Paket S1) vorliegt. */
.hero-photo { aspect-ratio: 16 / 9; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Hero · Counter-Row
   ------------------------------------------------------------
   Editorial-Layout: Zahl (Instrument Serif Italic, weiß-domi-
   niert mit zarter Silver-Blue-Note am Fuß — kein Cyan-
   Gradient nach Marie 2026-05-21 „zu viel Blau"). Suffix klein
   in Cyan unten rechts an die Zahl gesetzt — kein Pill mehr
   (Marie 2026-05-21: „klein unten rechts in die Ecke").
   Diamond + Hairline als Fleuron zwischen Zahl und Label.
   Typescale folgt der 3-Tier-Regel (siehe Block oben):
     Zahl   = M = clamp(1.4rem, 3vw, 2.2rem)
     Suffix = S = 14 px
     Label  = S = 14 px
   ============================================================ */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 40px) clamp(20px, 2.4vw, 36px);
  margin-top: clamp(4px, 0.5vw, 8px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
  max-width: 640px;
}

@media (min-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2vw, 32px);
    max-width: none;
  }
}

.hero-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-stat__value {
  display: flex;
  /* Suffix sitzt unten rechts → align-items: flex-start, suffix
     überschreibt mit align-self: flex-end. */
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  /* Sans-Zähler (Marie 2026-08-25 P5, seit 2026-08-26 GLOBAL statt
     .page-home): Montserrat-Bold statt Serif-Italic — Montserrat läuft
     breiter, daher eine Stufe kleiner als die frühere Serif-Größe. */
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: var(--weight-bold);
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.hero-stat__num {
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #FFFFFF 55%,
    rgba(179, 204, 223, 0.85) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* tabular-nums hält die Ziffernbreite konstant — Counter-Animation
     darf das Layout nicht zappeln lassen. */
  font-variant-numeric: tabular-nums;
  /* Inline-Buffer gegen italic-Glyphen-Clipping bei background-clip:
     text. MUSS am gradient-clipping Element selbst sitzen, nicht am
     Parent — sonst wird der Glyph-Overstand (linke Seite vom ersten
     Zeichen) abgeschnitten. Pattern §1.6. */
  padding-inline: 0.1em;
  margin-inline: -0.05em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Suffix klein in der Ecke unten rechts an der Zahl. Kein Pill,
   kein Border, kein Background — seit 2026-08-26 neutral-weiß statt
   Cyan (Marie P7, global — Blau bleibt CTAs + Headline-em). */
.hero-stat__suffix {
  display: inline-block;
  font-family: var(--font-ui);
  font-style: normal;
  /* Größer (Marie 2026-06-17): vorher 12px wirkte zu klein neben der
     großen Italic-Zahl. */
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  align-self: flex-end;
  /* Kleiner Lift nach oben, damit der Akzent nicht unter die
     Baseline der Italic-Zahl fällt. */
  margin-bottom: 0.32em;
  font-variant-numeric: tabular-nums;
}

/* Rule (Fleuron): Diamond + zarte Hairline trennt Zahl vom Label.
   Liest sich wie ein editorial Kapitel-Trenner. */
.hero-stat__rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 1.8vw, 22px);
  margin-bottom: clamp(8px, 0.9vw, 12px);
}

.hero-stat__diamond {
  width: 4px;
  height: 4px;
  /* Neutral statt Cyan-Glow (Marie 2026-08-25 P7, global). */
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: none;
}

.hero-stat__rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

.hero-stat__label {
  /* Marie 2026-05-21: Label-Typografie matched 1:1 den Lead unter
     der H1 — also Sentence-Case Paragraph-Style, kein Uppercase-
     Caption mehr. */
  font-family: var(--font-ui);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-200);
  line-height: 1.55;
  margin: 0;
  /* Lange Komposita („Auftragswert", „Partnerbetriebe") brechen
     bei Bedarf — kein Clipping unter 360 px. */
  overflow-wrap: break-word;
  hyphens: manual;
}

/* ============================================================
   Hero · Live-Ticker (unter dem Wistia-Video)
   Glas-Card mit Header-Strip (Live-Dot + Tageszähler) und
   rotierender 3-Items-Liste. backdrop-filter ist hier OK —
   Hero hat Aurora-Beams, BG ist visuell variabel (vgl. §5a).
   ============================================================ */
.hero-ticker {
  position: relative;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 22px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0.012) 100%
  );
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 1px rgba(var(--shadow-rgb), 0.30),
    0 14px 40px -18px rgba(var(--shadow-rgb), 0.45);
  isolation: isolate;
  overflow: hidden;
}

.hero-ticker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* flex-wrap erlaubt dem Trustpilot-Score rechts neben dem Eyebrow,
     auf schmalen Hero-Breiten unter den Eyebrow zu rutschen statt
     den Ticker horizontal zu sprengen. */
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: clamp(10px, 1.2vw, 14px);
  margin-bottom: clamp(8px, 1vw, 12px);
  border-bottom: 1px solid var(--glass-border);
}

/* Trustpilot-Wrapper im Ticker-Header (rechts neben dem Live-Eyebrow).
   margin-left: auto schiebt ihn ans rechte Ende; min/max-width geben dem
   Score einen sinnvollen Renderbereich, ohne den Header zu dominieren. */
.hero-ticker__trustpilot {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 320px;
}
/* Anti-CLS: alle Micro-TrustScore-Widgets laden mit
   data-style-height="40px" — Höhe vorab reservieren, damit das
   nachladende iframe keinen Lade-Shift erzeugt (Jitter-Audit
   2026-06-11). Höhe von 20px → 40px erhöht (Marie 2026-06-29):
   die deutsche Bewertungs-Zeile „Hervorragend"/TrustScore bricht
   unter die Sterne und wurde bei 20px (Content braucht 37px)
   unten abgeschnitten. */
.trustpilot-widget {
  min-height: 40px;
}

/* Weißer-Kasten-Fix (Marie 2026-06-12): Seit dem Theme-System steht
   `color-scheme: dark` auf :root. Chrome malt bei einem color-scheme-
   Mismatch (Seite dark, Cross-Origin-iframe-Inhalt light) eine OPAKE
   WEISSE Backplate hinter transparente iframes — das Trustpilot-
   Widget wurde dadurch zum weißen Balken. `color-scheme: light` am
   iframe-Element gleicht die Erwartung an den Inhalt an → Backplate
   entfällt, das Widget rendert wieder transparent über der Surface.
   (Im Light-Theme ohnehin deckungsgleich.) */
.trustpilot-widget iframe {
  color-scheme: light;
}

.hero-ticker__trustpilot .trustpilot-widget {
  width: 100%;
}

/* Mobile-Slot des Trustpilot-Scores: zwischen Video und Live-Ticker
   (Marie 2026-06-10). Es gibt nur EIN Widget — das Relocation-Script
   am Body-Ende verschiebt den Knoten unter 768px hierher, ab 768px
   zurück in den Ticker-Header. Die display-Toggles räumen zusätzlich
   den jeweils leeren Slot aus dem Layout (der Header-Slot würde sonst
   via min-width Platz im Flex-Header reservieren). Abstände Video →
   Score → Ticker bewusst halbiert, damit der Gesamt-Rhythmus dem
   bisherigen Video-→-Ticker-Abstand nahekommt. */
.hero-trustpilot-mobile {
  display: none;
}

@media (max-width: 767px) {
  .hero-trustpilot-mobile {
    display: block;
    margin-top: clamp(12px, 1.4vw, 16px);
    max-width: 320px;
  }
  .hero-trustpilot-mobile .trustpilot-widget {
    width: 100%;
  }
  .hero-ticker__trustpilot {
    display: none;
  }
  .hero-ticker {
    margin-top: clamp(12px, 1.4vw, 16px);
  }
}

.hero-ticker__eyebrow {
  /* Über visuell variablem Aurora-BG ist die default-eyebrow
     ohne backdrop-filter etwas zu transparent — bisschen
     mehr Substanz für Lesbarkeit. */
  background: rgba(255, 255, 255, 0.04);
  /* S-Tier (12 px) — alle kleinen Texte im Hero auf einer Schriftgröße. */
  font-size: 12px;
}

.hero-ticker__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 10px);
  /* Relative-Container, damit .is-leaving via position: absolute aus
     dem Flow tritt und nach oben rausgleitet — die Liste behält
     ihre 2-Item-Höhe konstant. */
  position: relative;
}

.hero-ticker__item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  padding: clamp(8px, 1vw, 10px) clamp(10px, 1.2vw, 12px);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  min-width: 0;
  /* Slide-Up-Animation auf transform + opacity (GPU-friendly, kein
     Layout-Reflow). Dauer großzügig genug für sichtbare Bewegung. */
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}

/* Slide-in: neues Item kommt von UNTEN ins Bild (Bottom-In).
   Marie 2026-05-21: „wenn neue dazukommt, dann geht es immer so hoch". */
.hero-ticker__item.is-entering {
  opacity: 0;
  transform: translateY(18px);
}

/* Slide-out: ältestes (oberstes) Item gleitet nach OBEN raus.
   position: absolute nimmt es aus dem Flow → die restlichen 2 Items
   im Flow rendern sofort an Position 0/1, das ausgehende Item
   überlagert sich an Position 0 und gleitet hoch. Damit bleibt die
   Listen-Höhe konstant. */
.hero-ticker__item.is-leaving {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.hero-ticker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  color: var(--accent-hover);
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(var(--glow-rgb), 0.22) 0%,
      rgba(var(--glow-rgb), 0.06) 60%,
      transparent 100%
    );
  border: 1px solid rgba(var(--glow-rgb), 0.22);
}

.hero-ticker__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hero-ticker__type {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-100);
  line-height: 1.3;
  /* Nicht abschneiden — Container ist schmal auf Mobile. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-ticker__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-regular);
  color: var(--text-300);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.hero-ticker__ago {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hero-ticker__item,
  .hero-ticker__item.is-entering,
  .hero-ticker__item.is-leaving {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Section 02 — Partnerbetriebe & Stimmen aus der Praxis
   Eine Section, EINE Headline (.section-header oben), darunter
   nahtlos: Logo-Marquee → Testimonials-Slider → Progress-Bar.
   Logos und Stimmen gehören zur selben Trust-Aussage (Original-
   Seiten-Pattern). Repaint-Scope auf .trust = Flicker-Schutz.
   ============================================================ */
.trust {
  padding-block: var(--section-py);
  contain: layout paint;
  isolation: isolate;
}

/* Wiederverwendbares Section-Header-Muster (Eyebrow + Headline, zentriert).
   Wird für alle folgenden Sections genutzt; H1/H2/H3 em bekommen den
   Italic-Silver-Cyan-Gradient — siehe globale h1 em, h2 em Regel oben. */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  margin-bottom: clamp(48px, 6vw, 88px);
}

.section-header__title {
  /* 22ch → 34ch (Marie 2026-09-02): Headlines sollen volle Zeilen fahren —
     der alte Deckel brach z. B. „Der Branchenpartner für deinen Betrieb"
     unnötig zweizeilig um; 34ch lässt auch „Den ganzen Weg, bis der
     richtige Mann da ist." und die Branchenpartner-Zeile einzeilig durch. */
  max-width: 34ch;
  margin: 0;
}

/* ============================================================
   Eyebrow — kleine Label-Pille (mit optionalem Live-Dot)
   Wird in mehreren Sections eingesetzt, daher als allgemeine
   Utility-Klasse (Partner-Section, Voices-Section etc.).
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  /* backdrop-filter bewusst NICHT gesetzt: über uniform dunklem
     Page-BG wirkungslos und verursacht in Chrome Flicker beim
     Compositing in Kombi mit benachbarten glass-Elementen. */
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-200);
  line-height: 1;
}

.eyebrow--with-dot {
  padding-left: 10px;
}

.eyebrow__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-hover);
  flex-shrink: 0;
}

.eyebrow__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-hover);
  opacity: 0.55;
  animation: eyebrow-dot-pulse 2.4s ease-out infinite;
}

@keyframes eyebrow-dot-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Eyebrow mit Facetten-Icon (Marie 2026-09-02, saleshax-Design-Runde):
   der Puls-Punkt der Section-Auftakte weicht einem thematischen
   Facetten-Icon aus dem Sprite (fx-*-Symbole, CI Sektion 13).
   Die Verläufe sind fixe CI-Werte → identisch in beiden Themes.
   Der Live-Ticker im Hero behält bewusst den Puls-Dot (semantisch). */
.eyebrow--fx { padding-left: 10px; }

.eyebrow__fx { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   Logo-Marquee — gerahmt in einer Glas-Karte mit Label-Strip
   ============================================================ */
.logo-marquee--framed {
  position: relative;
  padding: clamp(16px, 2vw, 28px) 0 clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius-xl);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.012) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* Kein backdrop-filter: BG ist uniform, Blur visuell wirkungslos
     und Flicker-Quelle in Kombi mit Marquee-Filter + Mask-Image. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(var(--shadow-rgb), 0.30),
    0 28px 70px -28px rgba(var(--shadow-rgb), 0.6);
  isolation: isolate;
}

/* Cyan-Top-Edge: dünner Licht-Akzent oben auf dem Frame.
   Mittig hell, zu den Rändern transparent — wirkt wie ein
   subtiler Lichtstrahl auf der oberen Kante. */
.logo-marquee--framed::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), 0.55) 50%,
    rgba(var(--glow-rgb), 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.logo-marquee__strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 clamp(20px, 2.6vw, 32px) clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--glass-border);
}

.logo-marquee__strip-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-200);
  line-height: 1;
}

.logo-marquee__strip-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-hover);
  flex-shrink: 0;
}

.logo-marquee__strip-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-hover);
  opacity: 0.55;
  animation: eyebrow-dot-pulse 2.4s ease-out infinite;
}

/* ============================================================
   Testimonials-Slider (unterer Block der .trust-Section).
   Folgt direkt auf den Logo-Marquee ohne eigenen Header — beide
   gehören zur selben Trust-Section unter der oberen H2.
   ============================================================ */
.testimonials {
  position: relative;
  /* flow-root: die negativen Margins des Viewports (Schatten-Bleed, s. u.)
     bleiben IM Block statt mit dem margin-top zu kollabieren → Slider-Box
     und Pfeil-Position (top: 50 %) sind exakt dieselben wie ohne Bleed. */
  display: flow-root;
  margin-top: clamp(56px, 7vw, 96px);
}

/* Schatten-Bleed (Marie 2026-09-09: „der Schatten ist so begrenzt und hat
   so eine harte Kante"): overflow-x:auto macht den Viewport zum Scroll-
   Container und erzwingt overflow-y:auto — er klippt an ALLEN vier Kanten.
   Der Karten-Schatten (dunkle Karte 0 28px 70px -28px, Gauß σ = 35 px)
   läuft erst ~100 px unter und ~40 px neben der Karte aus; bisher hatte er
   6 px oben, 0 px seitlich und 32–56 px unten → sichtbare harte Kante.
   Rezept: der Viewport bekommt SO VIEL Padding, dass der Schatten vor der
   Clip-Kante auf null ist, und negative Margins in gleicher Höhe, damit
   Karten, Pfeile und Rhythmus exakt an ihrem Platz bleiben:
   - oben 32 px Raum (Hover-Lift 4 px + Rest-Streuung; bewusst literal,
     weil er sich mit dem Margin -26px exakt zum alten 6-px-Abstand
     verrechnet — ein Token dürfte hier nicht allein wandern), unten --tm-room
     (88–104 px, gleiche Steigung wie --section-py: auf Mobil ist der
     Sektions-Innenabstand nur 38 px, und .trust clippt per contain:paint
     an seiner Padding-Box — 104 px liefen dort 11 px darüber hinaus).
     Gerechnet am Gauß-Rand des dunklen Karten-Schattens: 104 px unter
     der Karte 0,1 % Alpha, 88 px 0,3 %, 32 px darüber 0,4 % — alles
     unter einer Farbstufe;
   - seitlich bis an die Container-AUSSENKANTE (--tm-bleed = Container-
     Padding → der Viewport ist genau so breit wie der Container-Rahmen,
     kein Überstand, kein H-Scroll); scroll-padding hält die Snap-Position
     der Karten am Container-Rand (das Slider-JS rechnet mit scrollWidth/
     clientWidth und ist davon unabhängig).
   Seitlich darf der Schatten aber NICHT einfach weiter laufen: 24 px
   (= --space-5, der Kartenabstand) hinter der letzten sichtbaren Karte
   beginnt schon die nächste — ein Clip weiter außen zeigte sie als
   Streifen (bei 1440 8 px, bei 1920 fast eine Viertelkarte). Deshalb
   blendet eine Maske den Viewport genau über diese 24 px vom Container-
   Inhaltsrand nach außen aus: der Schatten läuft weich aus, die nächste
   Karte steht exakt dort, wo die Maske auf 0 ist. Auf schmalen Breiten
   (Container-Padding < 24 px) endet die Zone an der Bildschirmkante.
   - --tm-gap = der SICHTBARE Abstand Karten → Progress-Bar (Basis 6 px
     wie vorher; die Light-Regeln überschreiben nur noch diese Variable). */
.testimonials__viewport {
  --tm-bleed: var(--container-pad, clamp(16px, 3.5vw, 32px));
  --tm-fade: var(--space-5);
  --tm-room: clamp(88px, 7.5vw, 104px);
  --tm-gap: 6px;
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--tm-bleed);
  scroll-behavior: smooth;
  padding: 32px var(--tm-bleed) var(--tm-room);
  margin: -26px calc(-1 * var(--tm-bleed)) calc(var(--tm-gap) - var(--tm-room));
  -webkit-mask-image: linear-gradient(
    to right,
    transparent calc(var(--tm-bleed) - var(--tm-fade)),
    #000 var(--tm-bleed),
    #000 calc(100% - var(--tm-bleed)),
    transparent calc(100% - var(--tm-bleed) + var(--tm-fade))
  );
          mask-image: linear-gradient(
    to right,
    transparent calc(var(--tm-bleed) - var(--tm-fade)),
    #000 var(--tm-bleed),
    #000 calc(100% - var(--tm-bleed)),
    transparent calc(100% - var(--tm-bleed) + var(--tm-fade))
  );
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonials__viewport::-webkit-scrollbar { display: none; }

/* Cards-Breite pro Breakpoint: 1 / 2 / 3 sichtbar */
.testimonials__viewport > .testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

@media (min-width: 720px) {
  .testimonials__viewport > .testimonial-card {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }
}

@media (min-width: 1024px) {
  .testimonials__viewport > .testimonial-card {
    flex-basis: calc((100% - var(--space-5) * 2) / 3);
  }
}

/* Nav-Buttons seitlich, vertikal mittig auf Slider-Höhe.
   Solid-Glas — präsenter als zuvor, ohne Cyan-Glow (CI-konform). */
.testimonials__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: clamp(44px, 4.4vw, 56px);
  height: clamp(44px, 4.4vw, 56px);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  color: var(--text-100);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(var(--shadow-rgb), 0.22),
    0 12px 28px -14px rgba(var(--shadow-rgb), 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.testimonials__btn--prev { left: clamp(-20px, -1.8vw, -8px); }
.testimonials__btn--next { right: clamp(-20px, -1.8vw, -8px); }

/* Auf sehr engen Viewports (<480 px) sitzen die Buttons innerhalb
   des Containers, damit body { overflow-x: hidden } sie nicht
   visuell beschneidet (Guardian-Befund 2026-05-18). */
@media (max-width: 479px) {
  .testimonials__btn--prev { left: 4px; }
  .testimonials__btn--next { right: 4px; }
}

@media (min-width: 1280px) {
  .testimonials__btn--prev { left: -32px; }
  .testimonials__btn--next { right: -32px; }
}

.testimonials__btn:hover,
.testimonials__btn:focus-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: var(--glass-border-hover);
  color: var(--white);
  outline: none;
}

.testimonials__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.testimonials__btn:active {
  transform: translateY(-50%) scale(0.96);
}

.testimonials__btn[aria-disabled="true"] {
  opacity: 0.30;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   Testimonial Card — echtes Glasmorphismus (CI-Pattern §07)
   - Avatar mit Cyan-Halo-Ring (oben)
   - Quote (Mitte)
   - 5-Sterne-Row + Name + Firma (Attribution unten)
   - Hover hebt Card um 4px (CI-Card-Hover)
   Marie 2026-05-26: Sterne in die Attribution gewandert, deko
   Großzitat entfernt.
   ============================================================ */
.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.020) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* backdrop-filter bewusst weggelassen: in §5a dokumentiert.
     Auf uniform dunklem Section-BG visuell wirkungslos (Blur über
     einheitliche Farbe ergibt dieselbe Farbe) und verursachte beim
     Hover-Transform Repaint-Flicker (Chrome). Glas-Wirkung kommt
     vollständig aus Gradient-BG + Inset-Shadows + Border. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 1px rgba(var(--shadow-rgb), 0.22),
    0 20px 48px -20px rgba(var(--shadow-rgb), 0.6);
  transition:
    border-color var(--duration) var(--ease),
    background var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
  isolation: isolate;
  overflow: hidden;
  /* Eigene GPU-Compositing-Layer → stabiler Hover-Lift, kein Flicker */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Cyan-Top-Akzent: dünner Lichtstreifen auf der Oberkante jeder Card.
   Hebt die Card vom dunklen BG ab und schafft visuelle Hierarchie zur
   Headline. Mittig hell, zu den Rändern transparent (gleicher Trick
   wie auf dem Marquee-Frame — visuelle Klammer in der Section). */
.testimonial-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), 0.5) 50%,
    rgba(var(--glow-rgb), 0) 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--duration) var(--ease);
}

/* Großes deko-„-Zitat als Wasserzeichen oben rechts.
   Display-Font, extrem niedrige Opacity → wirkt editorial,
   nicht „lauter Sticker". */
.testimonial-card::after {
  content: '\201E'; /* deutsches öffnendes Anführungszeichen „ */
  position: absolute;
  top: clamp(-8px, -0.6vw, -4px);
  right: clamp(14px, 2vw, 24px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(96px, 11vw, 156px);
  line-height: 1;
  color: rgba(var(--glow-rgb), 0.09);
  pointer-events: none;
  /* z-index: -1 + isolation: isolate auf der Card → Wasserzeichen
     sitzt hinter dem Quote-Text, bleibt aber in der Card-Stacking-Context */
  z-index: -1;
  user-select: none;
}

.testimonial-card:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.025) 100%
  );
  border-color: color-mix(in srgb, var(--accent-hover) 32%, transparent);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(var(--shadow-rgb), 0.18),
    0 28px 56px -22px rgba(var(--shadow-rgb), 0.65);
}

/* Star-Rating-Row (5 Sterne in Cyan) — sitzt jetzt in der
   Attribution oberhalb des Namens (Marie 2026-05-26). */
.testimonial-card__rating {
  display: flex;
  gap: 4px;
  color: var(--accent-hover);
  line-height: 0;
  margin-bottom: 10px;
}

.testimonial-card__rating .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Avatar — größer als zuvor (64px), mit Cyan-Halo-Ring via Gradient-Padding */
.testimonial-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--silver-blue) 50%, var(--accent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px -6px rgba(var(--shadow-rgb), 0.45);
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: var(--surface-3);
  display: block;
}

.testimonial-card__quote {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--text-100);
  flex: 1;
}

/* Marie 2026-05-29: Hervorhebungen in der Trust-Section in Montserrat + Blau
   statt Italic-Gradient — der Gradient war auf den Cards schlecht lesbar. */
.testimonial-card__quote em {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
  color: var(--accent-hover);
}

.testimonial-card__attribution {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.testimonial-card__name {
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--white);
}

.testimonial-card__company {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-300);
}

/* Progress-Bar unter dem Slider — visuelle Position im Scroll-Verlauf.
   Animiert wird nur transform: scaleX (GPU-Layer), nicht width →
   keine Layout-Reflows beim Scrollen, kein Flicker. */
.testimonials__progress {
  position: relative;
  height: 3px;
  width: 100%;
  max-width: 220px;
  margin: clamp(28px, 3.6vw, 44px) auto 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.testimonials__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}

/* ============================================================
   Logo-Marquee · Drei gegenläufige Reihen
   - Track 1: links → rechts geschwungen (48s)
   - Track 2: gegenläufig (reverse, 70s) als visueller Kontrapunkt
   - Track 3: links → rechts (56s)
   - GPU-composited via will-change + translate3d (smooth, kein Ruckeln)
   - Mask sitzt auf dem Tracks-Wrapper, NICHT auf .logo-marquee selbst —
     sonst würde der Edge-Fade auch den Label-Strip beschneiden.
   - prefers-reduced-motion stoppt alle drei Tracks
   ============================================================ */
.logo-marquee {
  position: relative;
  /* Wenn nicht --framed: einfach ein Wrapper, der die Tracks zusammenhält. */
}

.logo-marquee__tracks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 36px);
  overflow: hidden;
  /* Edge-Fades, damit Logos nicht abrupt am Container-Rand abschneiden */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  /* GPU-isoliert, damit Marquee-Repaints den Hero nicht beeinflussen */
  contain: layout paint;
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  /* GPU-Compositing erzwingen + filter EINMAL auf Track-Ebene rastern
     (statt 40× auf jedem img). Das ist der Schlüssel für ruckelfreies
     Scrollen — der Browser hebt den Track auf eine eigene Layer und
     animiert nur Transform statt jeden Frame zu repainten. */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.logo-marquee__track--top {
  animation: logo-scroll 48s linear infinite;
}

.logo-marquee__track--middle {
  animation: logo-scroll 70s linear infinite reverse;
}

.logo-marquee__track--bottom {
  animation: logo-scroll 56s linear infinite;
}

.logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}

/* Mono-Weiß-Filter sitzt pro BILD (nicht auf dem Track), damit einzelne
   Logos im gemischten Marquee davon ausgenommen werden können — ein
   Track-Filter würde alle Kinder mit-rastern und ließe keine Ausnahme zu.
   GPU-Compositing kommt weiterhin von will-change/translateZ auf dem Track;
   der Filter wird je Bild einmal gerastert und gecacht (Animation ist reines
   Transform → bleibt ruckelfrei). */
.logo-marquee__track img {
  filter: var(--logo-mono-filter);
}

/* Schädlingsbekämpfer-Logos liegen bewusst als weiße PNGs MIT schwarzen
   Detail-Linien vor (Erxleben „X über der Maus", ALL-EX …). Der Mono-Weiß-
   Filter würde diese Linien wegdrücken — daher bei diesen Logos abschalten
   und die PNGs 1:1 zeigen, AUCH im gemischten Marquee auf Home/Leistungen.
   Marie 2026-06-15. Light-Theme: invertiert (dunkle Logos, helle Linien)
   → Detail bleibt auf hellem Grund erkennbar. */
.logo-marquee--natural .logo-marquee__track img,
.logo-marquee__track img.is-natural {
  filter: none;
}
html[data-theme="light"] .logo-marquee--natural .logo-marquee__track img,
html[data-theme="light"] .logo-marquee__track img.is-natural {
  filter: invert(1);
}

.logo-marquee__track li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-marquee__track img {
  height: clamp(42px, 5.2vw, 68px);
  width: auto;
  max-width: 240px;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.35s var(--ease-morph);
}

/* Magnify-Hover: das Logo schwillt subtil an
   — der „coole" Mikro-Moment beim Drüberfahren */
.logo-marquee__track li:hover img {
  transform: scale(1.18);
}

@keyframes logo-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   Modal — Kostenfreie Potenzialanalyse
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.22s var(--ease),
    visibility 0s linear 0.22s;
}

.modal[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.22s var(--ease);
}

body.is-modal-open { overflow: hidden; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-7));
  overflow-y: auto;
  padding: var(--space-7) var(--space-6);
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.30),
    0 20px 60px rgba(var(--shadow-rgb), 0.55),
    0 0 0 1px rgba(var(--shadow-rgb), 0.25);
  transform: scale(0.96);
  transition: transform 0.28s var(--ease-morph);
  container-type: inline-size;
}

.modal[aria-hidden="false"] .modal__panel {
  transform: scale(1);
}

@media (min-width: 640px) {
  .modal__panel {
    padding: 48px 44px;
  }
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--text-200);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--glass-border);
  color: var(--white);
}

.modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.85rem, 7.5cqw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--heading-color);
  padding-right: 36px; /* Platz für Close-Button */
  margin-bottom: var(--space-5);
}

.modal__title em {
  font-family: var(--font-display);
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Italic-Overshoot-Schutz — siehe CLAUDE.md §1.5 */
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.modal__usp {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--text-500);
  border-bottom: 1px solid var(--text-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.modal__usp-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-100);
}

.modal__usp-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================================
   Anfrage-Versand (24.09.2026) — Status, Danke, Spam-Falle.
   Gilt für Pop-up (.modal__form) und Kontaktformular (.kt-form);
   Logik in partials/scripts-anfrage.html.
   ============================================================ */
.anfrage-falle {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.anfrage-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  line-height: 1.55;
}
.anfrage-status[hidden] { display: none; }
.anfrage-status--fehler {
  color: #9A3412;
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.22);
}
.anfrage-status a { color: inherit; font-weight: var(--weight-semibold, 600); white-space: nowrap; }

.anfrage-hinweis {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--text-300);
}
.anfrage-hinweis a,
.kt-form__micro a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* focus() on the first missing field must not park it under the sticky header */
[data-anfrage-form] .form-input { scroll-margin-top: 120px; }

.form-input[aria-invalid="true"] {
  border-color: rgba(234, 88, 12, 0.55);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.10);
}

.anfrage-danke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  outline: none;
  animation: anfrage-danke-rein 0.4s var(--ease) both;
}
.anfrage-danke__icon {
  width: 40px;
  height: 40px;
  color: var(--accent);
}
.anfrage-danke__titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5cqw, 1.9rem);
  line-height: 1.15;
  color: var(--heading-color);
}
.anfrage-danke__text {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-200);
}
.anfrage-danke__text a { color: var(--accent); font-weight: var(--weight-semibold, 600); white-space: nowrap; }
@keyframes anfrage-danke-rein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anfrage-danke { animation: none; }
}

/* ============================================================
   Section 03 — Kapazität / Mehr leisten
   Split-Layout: Visualisierungs-Card links, Copy + CTA rechts.
   Eine einzige choreografierte Animation:
     IntersectionObserver triggert .is-revealed bei 35 % Sichtbar-
     keit → SVG-Linie zeichnet sich (stroke-dashoffset) + Fläche
     füllt sich (clip-path) + Endpunkt-Marker + Label fadet ein.
     One-shot, kein Loop, kein Pulse, keine Sekundär-Animation.
   prefers-reduced-motion → kein Reveal, sofortiger End-State.
   ============================================================ */
.capacity {
  position: relative;
  padding-block: var(--section-py);
  contain: layout paint;
  isolation: isolate;
}

/* Ausgeblendeter Cyan-Blob als Section-Highlight auf schwarzem
   Page-BG (Marie 2026-05-26). Sitzt links-unten, atmosphärischer
   Anker hinter der Visualisierungs-Card. */
.capacity::before {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -8%;
  width: min(720px, 70vw);
  height: min(720px, 70vw);
  background: radial-gradient(
    circle at center,
    rgba(var(--glow-rgb), 0.10) 0%,
    rgba(var(--glow-rgb), 0.04) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.capacity__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 1024px) {
  .capacity__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(48px, 5vw, 88px);
  }
}

/* ----- Visualisierung (links) ----- */
.capacity__visual {
  position: relative;
  margin: 0;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(255, 255, 255, 0)    100%),
    var(--surface-1);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.30),
    0 12px 40px rgba(var(--shadow-rgb), 0.45),
    0 0 0 1px rgba(var(--glow-rgb), 0.08),
    0 24px 80px -20px rgba(var(--glow-rgb), 0.18);
  /* Subtiles Dot-Grid im Hintergrund — wird vom Card-BG selbst getragen,
     gibt der Visualisierung Tiefe ohne extra DOM-Knoten. */
  background-image:
    radial-gradient(circle at center, rgba(var(--glow-rgb), 0.08) 0.8px, transparent 1.4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%);
  background-size: 22px 22px, 100% 100%;
  background-position: 11px 11px, 0 0;
  overflow: hidden;
}

.capacity__visual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-200);
  line-height: 1;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.capacity__visual-eyebrow .icon {
  width: 14px;
  height: 14px;
  color: var(--accent-hover);
}

.capacity-chart {
  position: relative;
  width: 100%;
  /* Konstanter Aspect-Ratio sorgt für gleiche Kurven-Anmutung auf allen Breiten */
  aspect-ratio: 600 / 360;
  /* Clip-Kontext direkt am Chart-Container — verhindert dass Labels bei
     320 px Viewport über die Chart-Box hinaus rendern (z. B. weil das
     „Mitarbeiteranzahl"-Label mit nowrap ~120 px breit ist). */
  overflow: hidden;
}

.capacity-chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Linie: Initial unsichtbar (komplett offset), reveal animiert auf 0.
   --capacity-line-len wird per JS aus getTotalLength() gesetzt; CSS-Fallback
   1000 deckt die Pfadlänge mit etwas Reserve ab, falls JS nicht greift. */
.capacity-chart__line {
  stroke-dasharray: var(--capacity-line-len, 1000);
  stroke-dashoffset: var(--capacity-line-len, 1000);
}

.capacity-chart__area {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}

/* GPU-Hint nur während der Animation aktiv: gilt ab .is-revealed,
   wird durch .is-settled (von JS auf animationend gesetzt) wieder
   aufgehoben — damit nach dem one-shot Reveal keine Compositing-
   Layer der SVG-Pfade permanent offen bleibt. */
.capacity__visual.is-revealed .capacity-chart__line {
  will-change: stroke-dashoffset;
}
.capacity__visual.is-revealed .capacity-chart__area {
  will-change: clip-path;
}
.capacity__visual.is-settled .capacity-chart__line,
.capacity__visual.is-settled .capacity-chart__area {
  will-change: auto;
}

/* Statisch — Mitarbeiteranzahl als gestrichelte Referenz-Linie.
   Bewusst silver-blue mit reduzierter Deckkraft, damit die Auftrags-
   kurve im Vordergrund bleibt. */
.capacity-chart__baseline {
  stroke: rgba(179, 204, 223, 0.55);
  stroke-width: 1.6;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
}

/* Endpunkt-Position kommt ausschließlich aus CSS (siehe Markup-Hinweis im HTML).
   transform-box: view-box → translate-Werte beziehen sich auf das SVG-Koordinaten-
   system (viewBox 600 × 360), nicht auf die Element-Bounding-Box. */
.capacity-chart__endpoint {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 560px 32px;
  transform: translate(560px, 32px) scale(0.4);
}

/* Beschriftungen über dem SVG. Positionen sind prozentual zur Card-
   Box, damit sie über alle Card-Breiten exakt zu den SVG-Koordinaten
   passen (SVG nutzt preserveAspectRatio="none" → 1:1 mapping). */
.capacity-chart__caption {
  position: absolute;
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 1.05vw, 0.92rem);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-200);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

/* Mitarbeiteranzahl-Label: sitzt links über der gestrichelten Referenz-Linie
   (y=170 / 360 ≈ 47 % von oben). */
.capacity-chart__caption--baseline {
  left: 11%;
  top: 41%;
  color: rgba(179, 204, 223, 0.85);
}

/* Auftragslage-Label: sitzt rechts UNTER der Kurve im ruhigen Bereich
   der Area-Fill — kreuzt weder die Auftragskurve noch die Mitarbeiter-
   Referenz-Linie. Dezenter Text-Shadow gibt zusätzliche Lesbarkeit über
   dem semi-transparenten Gradient. Fadet am Ende der einzigen Animation ein. */
.capacity-chart__caption--orders {
  right: 8%;
  top: 62%;
  color: var(--cyan-hi);
  text-shadow: 0 1px 8px rgba(6, 10, 14, 0.65);
  opacity: 0;
  transform: translateY(6px);
}

/* ----- Reveal-Animation (one-shot, ein orchestrierter Moment) ----- */
.capacity__visual.is-revealed .capacity-chart__line {
  animation: capacity-line-draw 2400ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.capacity__visual.is-revealed .capacity-chart__area {
  animation: capacity-area-reveal 2400ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.capacity__visual.is-revealed .capacity-chart__endpoint {
  animation: capacity-endpoint-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 2200ms forwards;
}

.capacity__visual.is-revealed .capacity-chart__caption--orders {
  animation: capacity-label-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 2300ms forwards;
}

/* Endpoint-Composition: Halo + Dot + Core. Farben aus CI-Tokens
   (statt früher inline-fill auf den SVG-Circles — §1.3-konform). */
.capacity-chart__endpoint-halo {
  fill: var(--accent-hover);
  fill-opacity: 0.18;
}
.capacity-chart__endpoint-dot {
  fill: var(--cyan-hi);
}
.capacity-chart__endpoint-core {
  fill: var(--white);
}

/* Dauerhaft pulsierende Ringe am Peak der Auftragslage.
   Starten nach Abschluss der Endpoint-Reveal-Animation (≈2800 ms),
   laufen anschließend infinite. Zwei Ringe mit Phase-Shift erzeugen
   eine kontinuierliche Live-Pulse-Welle (≈jede Sekunde ein neuer Ring).
   Animation auf `transform: scale()` (statt SVG-`r`) — funktioniert
   in allen Browsern inkl. iOS-Safari <16.4 und ist GPU-composited.
   `transform-box: fill-box` + `transform-origin: center` skalieren
   den Ring um seinen eigenen Mittelpunkt, unabhängig von der Group-
   Transformation des Parent-Elements. */
.capacity-chart__pulse-ring {
  opacity: 0;
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
}

.capacity__visual.is-revealed .capacity-chart__pulse-ring {
  animation: capacity-pulse-ring 2200ms cubic-bezier(0.16, 0.84, 0.44, 1) 2800ms infinite;
}

.capacity__visual.is-revealed .capacity-chart__pulse-ring--b {
  animation-delay: 3900ms;
}

@keyframes capacity-line-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes capacity-area-reveal {
  to {
    clip-path: inset(0 0% 0 0);
    -webkit-clip-path: inset(0 0% 0 0);
  }
}

@keyframes capacity-endpoint-in {
  to {
    opacity: 1;
    transform: translate(560px, 32px) scale(1);
  }
}

@keyframes capacity-label-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes capacity-pulse-ring {
  0%, 6% {
    transform: scale(1);
    opacity: 0;
    stroke-width: 1.8;
  }
  20% {
    opacity: 0.85;
    stroke-width: 1.6;
  }
  100% {
    transform: scale(4.3);
    opacity: 0;
    stroke-width: 0.4;
  }
}

/* Reduced-Motion: kein Reveal, sofortiger End-State.
   Pro Element nur die Properties zurücksetzen, die für dieses Element
   relevant sind (kein pauschales transform auf <path>-Elemente, das
   visuell wirkungslos wäre — Position kommt aus dem d-Attribut). */
@media (prefers-reduced-motion: reduce) {
  .capacity-chart__line {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .capacity-chart__area {
    animation: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .capacity-chart__endpoint {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(560px, 32px) scale(1) !important;
  }
  .capacity-chart__caption--orders {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .capacity-chart__pulse-ring {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ----- Copy (rechts) ----- */
.capacity__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.capacity__sub-eyebrow {
  align-self: flex-start;
  /* Sub-Eyebrow bleibt links-bündig in der Copy-Spalte, ohne Live-Dot */
}

/* H3 strikt nach CI (DIGITAL_CI.md §05): Montserrat Bold 32 px.
   KEINE Headlines (H3–H4) in Regular, KEIN Italic-Gradient-Akzent —
   das Schlüsselwort-Pattern mit <em> gilt laut CI nur für H1 + H2.
   Fluid-clamp zwischen 22 und 32 px für saubere Mobile-Skalierung,
   Desktop-Endpunkt trifft den CI-Wert. */
.capacity__sub {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--heading-color);
  /* Komposita wie "Mitarbeiter" nicht automatisch trennen — siehe §5a */
  hyphens: manual;
  -webkit-hyphens: manual;
  margin: 0;
}

.capacity__body {
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
  max-width: 56ch;
}

.capacity__cta {
  align-self: flex-start;
  margin-top: var(--space-3);
}

/* Mobile: CTA voll ausnutzen, Visual zuerst aber CTA-Tap-Target groß */
@media (max-width: 639px) {
  .capacity__cta {
    align-self: stretch;
    white-space: normal;
  }
}

/* ============================================================
   Section 04 — Kanalservice-Magazin
   Zweispaltig: links Content + KM-Lottie-Siegel, rechts Live-
   Feed-iframe in Glas-Card. Bricht ab <960 px in Single-Column;
   iframe rückt unter den Content.
   ============================================================ */
.magazin {
  position: relative;
  padding-block: var(--section-py);
  isolation: isolate;
  /* overflow: clip schneidet den `.magazin::before`-Blob am
     Sektionsrand ab, ohne neuen Scroll-Container zu erzeugen
     (sticky Header bleiben intakt). */
  overflow: clip;
}

/* Ausgeblendeter Cyan-Blob als Section-Highlight auf schwarzem
   Page-BG (Marie 2026-05-26). Sitzt rechts-oben hinter dem
   Live-Feed-iframe — atmosphärischer Rahmen, kein Spotlight. */
.magazin::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -8%;
  width: min(680px, 65vw);
  height: min(680px, 65vw);
  background: radial-gradient(
    circle at center,
    rgba(var(--glow-rgb), 0.09) 0%,
    rgba(var(--glow-rgb), 0.04) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.magazin__container {
  position: relative;
  /* Container erbt fluid-padding-inline aus .container */
}

/* ----- Raster — Fassung „Magazin-Seite" (2026-09-11) --------------------
   Marie: „das Badge ist ungünstig platziert, die Animation ist nicht
   mittig zum Text oder bündig, zu viel Weißraum … das Badge woanders hin,
   sodass da mehr Platz ist, sodass es hochwertig und besonders aussieht."
   GEMESSEN (1864 px, Fassung vom 2026-09-10): der Kopf lief über die
   volle Breite und das Siegel stand neben der H2 mit 617 px Leere rechts
   davon; darunter blieben neben dem 626 px hohen Feed unter der 342 px
   hohen Textspalte 284 px frei — Feed und Text hatten keine gemeinsame
   Kante.
   Jetzt drei Raster-Bereiche head / copy / stage:
     ≥ 1280   "head stage" / "copy stage" — Pille, H2, Text und CTA in
              der linken Spalte; die Magazin-Seite (weiße Feed-Karte +
              Siegel) spannt beide Zeilen und wird per Grid-Stretch GENAU
              so hoch wie Pille bis CTA → oben und unten bündig, kein
              Restraum. Die Feed-Liste scrollt intern (flex: 1).
     960–1279 Kopf über die volle Breite — die H2-Zeile „Das Kanalservice-
              Magazin —" misst 622 px, die Spalte wäre dort schmaler und
              das Kompositum bräche am Bindestrich (Guardian 2026-09-10).
              Darunter der Text MITTIG neben der Karte fester Höhe.
     < 960    gestapelt: Kopf, Text, Magazin-Seite.
   Das KM-Siegel ist kein Kopf-Anhängsel mehr, sondern über die Ecke der
   Feed-Karte gestempelt (Block „Magazin-Seite" weiter unten). */
.magazin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "copy"
    "stage";
  row-gap: clamp(32px, 4vw, 44px);
  column-gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

.magazin__head  { grid-area: head; }
.magazin__copy  { grid-area: copy; }
.magazin__stage { grid-area: stage; }

@media (min-width: 960px) {
  .magazin__grid {
    /* 1.12 : 0.88 — bei 1280 px bleibt die linke Spalte 638 px breit,
       damit die 622-px-H2-Zeile ab dem nächsten Schaltpunkt in die Spalte
       passt; die Karte ist mit 500–610 px breiter als das Original-Widget. */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas:
      "head head"
      "copy stage";
    row-gap: 52px;   /* fest: das Siegel ragt 28 px über die Kartenkante in diese Lücke (gemessen: bei 44/40 berührte sein Halo die H2-Zeile) */
  }
  .magazin__copy { align-self: center; }
}

@media (min-width: 1280px) {
  .magazin__grid {
    grid-template-areas:
      "head stage"
      "copy stage";
    grid-template-rows: auto auto;
    row-gap: clamp(28px, 3vw, 44px);
    align-items: stretch;
  }
  .magazin__head  { align-self: start; }
  .magazin__copy  { align-self: start; }
  .magazin__stage { align-self: stretch; }
}

/* ----- Kopf: Auftakt-Pille + H2 ----- */
.magazin__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Gap = Abstand Pille → H2: fix var(--space-5), ein Clamp ergab bei
     768–1180 px nur 16–23 px und die Pille klebte an der Headline
     (Guardian 2026-09-11, Marie: „zu nah an der Überschrift"). Die Pille
     selbst läuft ohne eigene Regel über die Basis .eyebrow.eyebrow--fx. */
  gap: var(--space-5);
  min-width: 0;
}

/* H2 — folgt dem globalen h2-Pattern; das Italic-em bekommt den
   Silver-Cyan-Gradient über die globale h1 em / h2 em-Regel.
   32ch hält „Das Kanalservice-Magazin —" ganz auf Zeile 1, der harte <br>
   im Markup setzt die zweite Zeile; hyphens: manual + nbsp gegen die
   Trennung im Kompositum bzw. in der Akzent-Phrase (§5a-Pattern). */
.magazin__title {
  margin: 0;
  max-width: 32ch;
  min-width: 0;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ----- Text + CTA ----- */
.magazin__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
  min-width: 0;
}

.magazin__body-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.magazin__body {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
  max-width: 58ch;
}

/* Hervorhebung im Fließtext.
   BUG-FIX (Marie 2026-09-10: „links im Text hast du zum Beispiel weiß
   gemacht, das passt hier nicht — mach das bitte blau"): stand hart auf
   var(--white). Im Dark-Theme richtig, auf dem grauen MIST-Band der
   Kanalservice-Seite aber praktisch unlesbar (Weiß auf #E6E6E8 ≈ 1,1:1).
   Jetzt token-basiert auf den Akzent: Light = Markenblau-Tiefe #25618F
   (5,0:1 auf dem Band), Dark = Cyan #4DA8DA. */
.magazin__body strong,
.magazin__accent {
  color: var(--accent-hover);
  font-weight: var(--weight-semibold);
}

/* ----- Sekundärer CTA „Zum Kanalservice Magazin" -----------------
   Eigenes Pillen-Design statt des geteilten .btn-outline (Marie
   2026-09-10: „der Button gefällt mir an der Stelle nicht als
   Button-Design").
   Warum nicht der Ghost-Button: .btn-outline trägt in seiner
   BASIS-Regel einen halbtransparenten Navy-Fill
   (rgba(31,52,71,.28) → rgba(25,41,57,.42)); der Light-Override
   korrigiert nur color + border-color, nicht den Fill. Auf hellem
   Grund las er sich deshalb als matter grau-blauer, deaktiviert
   wirkender Knopf. (Derselbe Fill trifft jeden .btn-outline auf
   hellem Band — site-weiter Nebenbefund, bewusst NICHT in dieser
   Runde mitgeändert.)
   Hier: deckende Tinte-Pille mit Außen-Pfeil (externer Link).
   Token-basiert → im Dark-Theme dreht sie sich automatisch um
   (helle Pille auf dunklem Grund). Kein Logo-Mark, kein Shine,
   kein Markenblau-Fill — der Signature-Look bleibt dem primären
   Beratungs-CTA vorbehalten (CLAUDE.md §1.8). */
.magazin__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(20px, 2vw, 26px);
  border-radius: 9999px;
  background: var(--text-100);
  color: var(--surface-0);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: normal;
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), 0.16),
              0 10px 26px rgba(var(--shadow-rgb), 0.14);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease;
}

.magazin__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.20),
              0 16px 36px rgba(var(--shadow-rgb), 0.20);
}

.magazin__cta:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Pfeil wandert beim Hover in seine Richtung (externer Link). */
.magazin__cta-arrow {
  flex: 0 0 auto;
  color: currentColor;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.magazin__cta:hover .magazin__cta-arrow {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .magazin__cta,
  .magazin__cta-arrow { transition: none; }
  .magazin__cta:hover { transform: none; }
  .magazin__cta:hover .magazin__cta-arrow { transform: none; }
}

/* ----- Die Magazin-Seite: Feed-Karte + gestempeltes KM-Siegel ----------
   Ein Objekt statt zweier loser Teile: die weiße Feed-Karte ist die
   „Seite" des Magazins, das runde KM-Siegel liegt als STEMPEL über ihrer
   Ecke — leicht gedreht, mit Schlagschatten auf der Seite und dem Cyan-
   Halo dahinter. Der Überstand geht in die Spaltenlücke (links) und in
   den Innenabstand der Sektion (oben); beides ist gemessener Freiraum,
   die Sektion clippt an ihrem Rand (overflow: clip), deshalb bleibt der
   Überstand IMMER kleiner als das jeweilige Polster.
   Die drei Maße leben als Custom-Properties auf .magazin__stage:
     --mg-seal        Durchmesser
     --mg-seal-up     Überstand über die Kartenoberkante
     --mg-seal-side   Überstand über die linke Kartenkante (ab 960 px)
   Die Widget-Kopfzeile reserviert darunter den belegten Platz
   (.magazin__stage .ks-feed-header). */
.magazin__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  --mg-seal: clamp(96px, 22vw, 132px);
  --mg-seal-up: calc(var(--mg-seal) * 0.25);   /* < 960: 24–33 px in der 40–72-px-Lücke unter dem CTA */
  --mg-seal-side: calc(var(--mg-seal) * 0.36);
}

@media (min-width: 960px) {
  .magazin__stage {
    --mg-seal: 132px;
    --mg-seal-up: 28px;                          /* 960–1279: bleibt in der 52-px-Zeilenlücke, 24 px Luft zum Kopf */
  }
}

@media (min-width: 1280px) {
  .magazin__stage {
    --mg-seal: clamp(132px, 9.4vw, 168px);       /* ≈ 27 % der Kartenbreite — Recherche §1.12: Overlays der Referenzen bleiben unter ~25 %, das Siegel soll kein zweites Motiv neben dem Feed werden */
    --mg-seal-up: calc(var(--mg-seal) * 0.36);   /* Stempel-Mitte innen: 36 % über Ecke UND Kante (Recherche: Referenzen ≤ 25 % Überstand — hier bewusst mehr, weil der Stempel DIE Setzung der Section ist); ragt in den Sektions-Innenabstand (≥ 115 px) */
  }
}

.magazin__feed {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.008) 100%);
  border: 1px solid var(--glass-border);
  padding: clamp(8px, 0.8vw, 12px);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(var(--shadow-rgb), 0.28);
  /* Höhe: gestapelt (< 960) fest, 960–1279 fensterhöhen-gekoppelt,
     ab 1280 KEINE eigene Höhe — die Karte ist so hoch wie die Textspalte
     (Grid-Stretch der .magazin__stage), die Liste scrollt intern. */
  height: 600px;
}

@media (min-width: 960px) {
  .magazin__feed { height: clamp(480px, 52vh, 560px); }
}

@media (min-width: 1280px) {
  .magazin__feed { height: auto; }
}

/* Die Liste darf die Karte NICHT hoch drücken: als Flex-Kind mit
   min-height: 0 wird sie zwar auf den Restraum begrenzt, ihr Inhalt
   (6 Karten ≈ 540 px) ginge aber in die Eigenhöhe des Grid-Bereichs
   ein — gemessen wuchs die Magazin-Seite dadurch auf 686 px und stand
   53 px unter dem CTA statt bündig. contain: size nimmt die Liste aus
   der Größenrechnung (Eigenhöhe 0), flex: 1 füllt den Rest, overflow
   scrollt weiter. */
.magazin__stage .ks-live-feed {
  contain: size;
}

/* Weicher Auslauf am unteren Listenrand: die letzte sichtbare Karte wird
   nicht hart von der Kartenunterkante abgeschnitten, sondern läuft ins
   Weiß der Seite aus. Als Overlay ÜBER der Liste — kein mask-image auf
   dem Scroll-Container (Safari/iOS-Risikokombination, Lehre 2026-09-09);
   pointer-events: none, Scrollen und Klicken bleiben frei; rechts bleibt
   die schmale Scrollbar frei. Weiß hart wie das Panel selbst (§5a-
   Widget-Farben, kein Token). */
.magazin__stage .ks-live-wrap {
  position: relative;
}

.magazin__stage .ks-live-wrap::after {
  content: '';
  position: absolute;
  left: clamp(16px, 1.6vw, 22px);
  right: calc(clamp(16px, 1.6vw, 22px) + 10px);
  bottom: clamp(16px, 1.6vw, 22px);
  height: 64px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 78%);
  pointer-events: none;
}

/* Widget-Kopfzeile in DIESER Instanz: LIVE-Pille + „Aktivitäten"
   rechtsbündig, links bleibt die Ecke dem Siegel. min-height = Anteil
   des Siegels auf der Karte (Durchmesser − Überstand) minus Karten-
   Polster (12 + 22) plus 10 px Luft — die Liste beginnt erst unter dem
   Siegel. (Spezifität 0,2,0 schlägt die geteilte .ks-feed-header.) */
.magazin__stage .ks-feed-header {
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  min-height: calc(var(--mg-seal) - var(--mg-seal-up) - 24px);
  padding-right: calc(var(--mg-seal) - 10px);   /* < 960: Siegel innen rechts */
}

@media (min-width: 960px) {
  .magazin__stage .ks-feed-header {
    padding-right: 0;
    padding-left: calc(var(--mg-seal) - var(--mg-seal-side) - 22px);
  }
}

/* Das Siegel. Basis (< 960): innen an der rechten Kartenkante, ein
   Viertel über die Oberkante. Ab 960: links, über die Ecke in die
   Spaltenlücke. rotate(-6deg) = Stempel-Charakter, beim Zeigen richtet
   es sich auf. */
.magazin__seal {
  position: absolute;
  z-index: 2;
  margin: 0;
  width: var(--mg-seal);
  top: calc(-1 * var(--mg-seal-up));
  right: 12px;
  transform: rotate(-6deg);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 960px) {
  .magazin__seal {
    right: auto;
    left: calc(-1 * var(--mg-seal-side));
  }
}

.magazin__seal:hover {
  transform: rotate(0deg) scale(1.04);
}

/* Cyan-Halo hinter dem Siegel — radial, weich, pulsiert im 5-s-Takt.
   mix-blend-mode bewusst NICHT gesetzt: die rotate()-Transform des
   Parents erzeugt eine eigene Compositing-Layer, gegen die der Blend
   unzuverlässig wirkt; der leise Effekt kommt aus den niedrigen
   rgba-Deckkräften. */
.magazin__seal::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--glow-rgb), 0.30) 0%,
    rgba(var(--glow-rgb), 0.12) 45%,
    rgba(var(--glow-rgb), 0) 75%
  );
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
  animation: magazin-seal-halo 5s ease-in-out infinite;
}

/* Schlagschatten des Stempels auf der Seite — als runde Scheibe unter
   dem Siegel statt filter: drop-shadow (der Filter müsste bei der
   laufenden Lottie jedes Bild neu gerechnet werden). */
.magazin__seal::after {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  box-shadow: 0 14px 30px -6px rgba(var(--shadow-rgb), 0.28),
              0 3px 8px rgba(var(--shadow-rgb), 0.12);
  z-index: -1;
  pointer-events: none;
}

@keyframes magazin-seal-halo {
  0%, 100% { transform: scale(1);    opacity: 0.78; }
  50%      { transform: scale(0.94); opacity: 1; }
}

/* Aufstempeln beim Reinscrollen: bis zum Reveal unsichtbar (ohne JS gibt
   es ohnehin keine Lottie), dann landet der Stempel von „über der Seite"
   (1,4×, leicht überdreht) auf seiner Ruhelage. animation-fill-mode:
   backwards → nach dem Ende gilt wieder die Basis-Regel, damit die
   Hover-Transition auf transform weiter funktioniert (forwards würde
   den Transform dauerhaft festhalten). */
.magazin[data-reveal]:not(.is-revealed) .magazin__seal {
  opacity: 0;
}

.magazin.is-revealed .magazin__seal {
  animation: magazin-stamp 640ms cubic-bezier(0.22, 1, 0.36, 1) 320ms backwards;
}

@keyframes magazin-stamp {
  from { opacity: 0; transform: rotate(4deg) scale(1.4); }
  to   { opacity: 1; transform: rotate(-6deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .magazin__seal::before { animation: none; }
  .magazin[data-reveal]:not(.is-revealed) .magazin__seal { opacity: 1; }
  .magazin.is-revealed .magazin__seal { animation: none; }
  .magazin__seal,
  .magazin__seal:hover { transition: none; transform: rotate(-6deg); }
}

.magazin__seal-lottie {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
}

.magazin__seal-lottie > svg,
.magazin__seal-lottie > canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* --- Live-Aktivitaeten-Feed (Nachbau Kanalservice-Magazin-Widget) -----
   BEWUSSTE CI-ABWEICHUNG: weisses Panel + Magazin-Gruen (#045C40) statt
   dunkles Glas/Cyan. Von Marie freigegeben (2026-05-28, siehe §5a) —
   1:1-Replik des Original-Widgets, das frueher per iframe eingebettet war.
   Die Hex-Werte sind hier bewusst hart kodiert (externe Marken-Optik,
   nicht Teil der digital-ci-Palette). */
.ks-live-wrap {
  --ks-green:  #045C40;
  --ks-black:  #222222;
  --ks-border: #E6E6EA;
  --ks-muted:  #555555;
  --ks-shadow: 0 4px 14px rgba(34, 34, 34, 0.08);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: #FFFFFF;
  border-radius: calc(var(--radius-xl) - clamp(8px, 0.8vw, 12px));
  padding: clamp(16px, 1.6vw, 22px);
}

.ks-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.ks-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(4, 92, 64, 0.08);
  color: var(--ks-green);
  border: 1px solid rgba(4, 92, 64, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.ks-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-green);
  box-shadow: 0 0 0 0 rgba(4, 92, 64, 0.5);
  animation: ksPulse 2.2s infinite;
}

@keyframes ksPulse {
  0%   { box-shadow: 0 0 0 0 rgba(4, 92, 64, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(4, 92, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(4, 92, 64, 0); }
}

.ks-feed-hint {
  font-size: 12px;
  color: var(--ks-muted);
}

.ks-live-feed {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--ks-border) transparent;
}

.ks-live-feed::-webkit-scrollbar { width: 6px; }
.ks-live-feed::-webkit-scrollbar-thumb {
  background: var(--ks-border);
  border-radius: 999px;
}

.ks-item {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  border: 1px solid var(--ks-border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  background: #FFFFFF;
  box-shadow: var(--ks-shadow);
  animation: ksSlideInDown 0.4s ease-out;
}

@keyframes ksSlideInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ks-icon {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--ks-green);
}

.ks-body {
  flex: 1;
  min-width: 0;
}

.ks-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ks-black);
  overflow-wrap: break-word;
}

.ks-text strong { font-weight: 700; }

.ks-meta {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.6rem;
  font-size: 12px;
  color: var(--ks-muted);
}

.ks-meta-right { text-align: right; }

.ks-item.ks-hot {
  border-color: rgba(4, 92, 64, 0.45);
  background: rgba(4, 92, 64, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .ks-live-dot,
  .ks-item { animation: none; }
}

/* ============================================================
   Section 05 — App-Steuerung
   Layout: zentriertes Intro → Phone-Showcase mit Floating-Badges
   und Aurora-Glow → 5-Card-Bento → Signature-CTA-Footer.
   Counter / Bar / Slider / Feed animieren beim Reveal-Trigger
   via IntersectionObserver (.is-revealed-Klasse auf der Section).
   ============================================================ */
.app-control {
  padding-block: var(--section-py);
  position: relative;
  overflow: hidden; /* Aurora-Beams sind innerhalb der Section. */
}

.app-control__container {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 96px);
}

/* ---------- Intro (Eyebrow + H2 + Sub) ---------- */
.app-control__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  max-width: 920px;
  margin: 0 auto;
}

.app-control__title {
  font-family: var(--font-display);
  /* Volle CI-H2-Größe wie alle Section-Überschriften (Marie 2026-09-08:
     H2 sollen überall gleich groß sein — die frühere kleinere
     Sondergröße war Token-Drift). Die <br/>-getrennten Sätze brechen
     bei voller Größe ggf. mehrzeilig; max-width zähmt die Zeilenlänge. */
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  max-width: 42ch;
  margin: 0;
  /* §5a-Pattern: manual hyphens für Headline-Kontrolle, overflow-wrap
     als Hard-Wrap-Safety auf 320 px. „App-Fernbedienung" hält der
     Bindestrich beim Layout-Bruch automatisch zusammen. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

.app-control__lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--text-200);
  max-width: 58ch;
  margin: 0;
}

/* ---------- Showcase: Stage + Aurora + Connectors ---------- */
.app-control__showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate; /* Aurora bleibt unter dem Phone, schneidet nicht raus. */
}

/* Langsam rotierender Conic-Glow-Ring hinter dem Phone — zusaetzliche
   Hintergrund-Bewegung (Marie 2026-05-29), greift auch auf Mobile, wo
   die Drift-Partikel ausgeblendet sind. Reines CSS, GPU-only (transform).
   z-index 0 → sitzt ueber der Aurora (-1), unter dem Phone (2). */
.app-control__showcase::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 42vw, 480px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--glow-rgb), 0) 0deg,
    rgba(var(--glow-rgb), 0.22) 70deg,
    rgba(107, 196, 240, 0.10) 150deg,
    rgba(44, 110, 169, 0) 230deg,
    rgba(var(--glow-rgb), 0.18) 320deg,
    rgba(var(--glow-rgb), 0) 360deg
  );
  filter: blur(34px);
  opacity: 0.6;
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform;
  animation: app-halo-spin 38s linear infinite;
}

@keyframes app-halo-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app-control__showcase::after { animation: none; }
}

/* Aurora-Glow hinter dem Phone — drei weiche, langsam driftende
   Conic-/Radial-Beams im Cyan-Spektrum. Kein WebGL, rein CSS.
   blur(80px) + mix-blend-mode: screen lässt sie verschmelzen. */
.app-control__aurora {
  position: absolute;
  inset: -5% -10%;
  z-index: -1;
  pointer-events: none;
  filter: blur(78px);
  /* Deutlich zurückgenommener Glow — vorher 0.85 wirkte zu blau im
     Hintergrund. Die Aurora soll Atmosphäre sein, nicht Hauptakteur. */
  opacity: 0.42;
}

.app-control__beam {
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.app-control__beam--a {
  top: 6%;
  left: -10%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.5) 0%, rgba(var(--glow-rgb), 0) 65%);
  animation: app-aurora-a 24s ease-in-out infinite alternate;
}

.app-control__beam--b {
  top: 22%;
  right: -12%;
  background: radial-gradient(circle, rgba(107, 196, 240, 0.4) 0%, rgba(107, 196, 240, 0) 65%);
  animation: app-aurora-b 28s ease-in-out infinite alternate;
}

.app-control__beam--c {
  bottom: -10%;
  left: 22%;
  background: radial-gradient(circle, rgba(44, 110, 169, 0.45) 0%, rgba(44, 110, 169, 0) 65%);
  animation: app-aurora-c 32s ease-in-out infinite alternate;
}

@keyframes app-aurora-a {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(6%, 4%, 0) rotate(8deg); }
}
@keyframes app-aurora-b {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-5%, 5%, 0) rotate(-10deg); }
}
@keyframes app-aurora-c {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(4%, -6%, 0) rotate(6deg); }
}

/* Connector-Linien Badge → Phone. Nur auf Desktop sichtbar
   (>=1024 px), weil Badges auf Mobile als Reihe unter dem Phone
   stehen. Die Pfade sind im viewBox-Koord-System; preserveAspectRatio
   "none" streckt sie auf die Stage-Fläche. */
.app-control__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: none;
}

/* Breakpoint seit dem Geräte-Duo (18.09.2026) 1180 statt 1024: die Bühne ist 1120 px breit
   (viewBox 1120 × 700) und braucht Maßstab 1, damit die Leitungen an den gemessenen
   Badge-Kanten ansetzen — bei 1024 wäre der Showcase nur 960 px (Skalierung 0,857, die
   Badges bleiben aber px-fest → Startpunkte 30 px daneben). 1024–1179 läuft das Tablet-Layout. */
@media (min-width: 1180px) {
  .app-control__connectors {
    display: block;
    /* Stärkerer Glow auf der ganzen Connector-SVG — Pfade und Pulse-
       Circles erben den Filter via Compositing. */
    filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), 0.55));
  }
}

.app-control__connector {
  fill: none;
  /* Deutlich kräftigere Linie, damit der Daten-Korridor klar sichtbar
     wird statt nur eine Andeutung zu sein. */
  stroke: rgba(var(--glow-rgb), 0.7);
  stroke-width: 2.2;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 700ms ease-out 800ms;
}

.app-control.is-revealed .app-control__connector {
  opacity: 1;
  animation: app-connector-flow 2.2s linear infinite 1400ms;
}

@keyframes app-connector-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -24; }
}

/* Datenstrom-Head-Particles — große Cyan-Kreise, die vom Badge zum
   Phone laufen. Glow via drop-shadow im SVG-Render. Vor Reveal-Trigger
   unsichtbar, danach permanent (animateMotion läuft die ganze Zeit). */
.app-control__connector-pulse {
  fill: var(--cyan-hi);
  filter: drop-shadow(0 0 10px var(--accent-hover))
          drop-shadow(0 0 4px var(--cyan-hi));
  opacity: 0;
  transition: opacity 700ms ease-out 1400ms;
}

.app-control.is-revealed .app-control__connector-pulse {
  opacity: 1;
}

/* Trail-Particles — kleinere, dimmer Kreise direkt hinter dem
   Head-Particle. Verstärken den Comet-Effekt. */
.app-control__connector-pulse--trail {
  fill: var(--accent-hover);
  filter: drop-shadow(0 0 6px var(--accent-hover));
}

.app-control.is-revealed .app-control__connector-pulse--trail {
  opacity: 0.55;
}

/* ==========================================================
   Daten-Feld (Layer A) — Wireframe-Orbital-Sphere
   Drei langsam rotierende Ellipsen verschiedener Tilt-Achsen
   um den Phone-Center → 3D-Hologram-Tiefe. Niedrige Stroke-
   Opacity hält die Sphere hinter dem Phone, lenkt nicht ab.
   ========================================================== */
.app-orbit {
  /* transform-box: view-box → CSS-Transform-Origin nutzt
     viewBox-Koordinaten. 50%/50% von 800×640 = (400, 320) =
     Phone-Center. So rotiert die Sphere um ihre eigene Mitte.
     Animation läuft erst nach is-revealed-Trigger (siehe unten),
     damit GPU-Layer nicht ab Seiten-Load promotet werden. */
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0;
  transition: opacity 1.2s ease-out 600ms;
  will-change: transform;
}

.app-control.is-revealed .app-orbit {
  opacity: 1;
  animation: app-orbit-rotate 80s linear infinite;
}

.app-orbit__ring {
  fill: none;
  stroke: rgba(var(--glow-rgb), 0.22);
  stroke-width: 1.2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}

.app-orbit__ring--tilt-a {
  stroke: rgba(107, 196, 240, 0.18);
}
.app-orbit__ring--tilt-b {
  stroke: rgba(var(--glow-rgb), 0.14);
  stroke-dasharray: 1 11;
}

@keyframes app-orbit-rotate {
  to { transform: rotate(360deg); }
}

/* ==========================================================
   Daten-Feld (Layer B) — Konzentrische Energie-Ringe
   Vom Phone-Center expandierende Sonar-Wellen. transform-box:
   fill-box + transform-origin: center sorgt für korrekten
   Skalierungspunkt um den Kreismittelpunkt.
   ========================================================== */
.app-rings {
  opacity: 0;
  transition: opacity 1.2s ease-out 1000ms;
}

.app-control.is-revealed .app-rings {
  opacity: 1;
}

.app-ring {
  fill: none;
  /* Dezenter als vorher (0.65) — die Sonar-Wellen sollen spürbar
     sein, aber den blauen Gesamt-Eindruck nicht dominieren. */
  stroke: rgba(var(--glow-rgb), 0.42);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}

/* Ring-Expand-Animation erst nach Reveal — verhindert, dass
   die drei Ringe ab Seiten-Load auf eigene Compositor-Layer
   promotet werden, bevor Section 05 im Viewport ist. */
.app-control.is-revealed .app-ring {
  animation: app-ring-expand 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes app-ring-expand {
  0%   { opacity: 0;    transform: scale(1);   stroke-width: 1.6; }
  18%  { opacity: 0.85; }
  100% { opacity: 0;    transform: scale(2.6); stroke-width: 0.4; }
}

/* ==========================================================
   Daten-Feld (Layer D) — Phone-Entry-Flashes
   Pulsierende Glow-Punkte an den Phone-Kanten. Animation
   nutzt SVG-Geometry `r` (kein Layout-Reflow) + opacity.
   Phasen-versetzte Delays/Dauer → asynchrones Pulsieren.
   ========================================================== */
.app-entry {
  fill: var(--cyan-hi);
  filter: drop-shadow(0 0 8px var(--accent-hover))
          drop-shadow(0 0 3px var(--cyan-hi));
  opacity: 0;
  transition: opacity 600ms ease-out 1500ms;
}

.app-control.is-revealed .app-entry {
  opacity: 1;
  animation: app-entry-flash 2.8s ease-out infinite;
}

/* Modifier-Delays/Durations innerhalb des is-revealed-Scopes,
   sonst überschreibt die animation-Shorthand der is-revealed-
   Basis-Regel (Spezifität 0,3,0) die Modifier-Werte (vorher
   0,1,0) und alle vier Flashes pulsieren synchron. */
.app-control.is-revealed .app-entry--1 { animation-delay: 0s;   animation-duration: 2.8s; }
.app-control.is-revealed .app-entry--2 { animation-delay: 0.7s; animation-duration: 3.2s; }
.app-control.is-revealed .app-entry--3 { animation-delay: 1.4s; animation-duration: 2.6s; }
.app-control.is-revealed .app-entry--4 { animation-delay: 2.1s; animation-duration: 3.0s; }
.app-control.is-revealed .app-entry--5 { animation-delay: 1.4s; animation-duration: 3.3s; }   /* NEU 18.09.2026: Calltracking-Leitung */
.app-control.is-revealed .app-entry--6 { animation-delay: 2.7s; animation-duration: 2.9s; }   /* NEU 18.09.2026: Bese-AI-Leitung */

@keyframes app-entry-flash {
  0%, 60% { opacity: 0; r: 0; }
  72%     { opacity: 1; r: 7; }
  100%    { opacity: 0; r: 18; }
}

/* ==========================================================
   Ambient-Particle-Feld — driftende Glow-Punkte im Hintergrund
   Position, Bewegungsvektor und Timing kommen per Inline-
   Custom-Property aus dem Markup → klare 1:1-Zuordnung pro
   Partikel ohne nth-child-Kaskade. Auf Mobile (<1024 px)
   ausgeblendet (Section nutzt dort Phone+Badges-Grid).
   ========================================================== */
.app-control__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}

@media (min-width: 1180px) {   /* seit dem Geräte-Duo 1180 statt 1024, s. .app-control__connectors */
  .app-control__particles {
    display: block;
  }
}

.app-control__particle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan-hi);
  /* Dezenterer Glow — vorher zu cyan-dominant im Hintergrund.
     Kleinere Partikel + weniger Streu-Glow = ruhigere Atmosphäre. */
  box-shadow:
    0 0 5px var(--accent-hover),
    0 0 10px rgba(var(--glow-rgb), 0.3);
  opacity: 0;
  animation: app-particle-drift var(--dur, 14s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}

@keyframes app-particle-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
  20%      { opacity: 0.55; }
  50%      { transform: translate3d(var(--mx, 20px), var(--my, -20px), 0); opacity: 0.65; }
  80%      { opacity: 0.55; }
}

/* Reduced-Motion-Gate für Section 05 (App-Steuerung):
   - alle Background-Animationen anhalten (Orbit, Ring, Entry,
     Particles bleiben statisch sichtbar bzw. ausgeblendet)
   - Beams + Connector-Dash-Flow + Status-Dot stoppen
   - Phone-Counter/Slider/Feed-Rows landen direkt im End-State,
     damit keine UI „unsichtbar" bleibt
   Alle Section-05-Pause-Regeln gebündelt — sonst landen Teile
   am Dateiende und driften vom Rest der Section ab. */
@media (prefers-reduced-motion: reduce) {
  .app-orbit,
  .app-ring,
  .app-entry,
  .app-control__particle {
    animation: none;
  }
  .app-ring,
  .app-entry,
  .app-control__particle {
    opacity: 0;
  }
  .app-control__beam,
  .phone-app__status-dot,
  .phone-card__live-dot,
  .app-control.is-revealed .app-control__connector,
  .app-control__connector-pulse {
    /* `animation: none` stoppt CSS-Animationen — funktioniert für
       Beams, Status-Dot, Connector-Dash-Flow. SVG `<animateMotion>`
       läuft aber als SMIL-Element-Animation und ignoriert diese
       CSS-Regel. Deshalb darunter zusätzlich `display: none` auf
       den Pulse-Circles. */
    animation: none !important;
  }
  /* Pulse-Circles komplett ausblenden — stoppt indirekt auch
     `<animateMotion>`, weil das Element nicht mehr gerendert wird. */
  .app-control__connector-pulse {
    display: none;
  }
  .phone-card__fill,
  .phone-card__slider-fill,
  .phone-card__slider-thumb,
  .phone-card__spark-path,
  .phone-feed__row,
  .control-badge,
  .app-control__connector,
  .control-feature,
  .control-feature__bar {
    transition: none !important;
  }
  /* Tilt-Hover-Lift unterdrücken (JS-Tilt ist schon via Gate aus). */
  .control-feature:hover { transform: none; }
  /* Alle End-States hart setzen, damit nichts „unsichtbar" bleibt. */
  .app-control .phone-card__fill            { width: 78%; }
  .app-control .phone-card__slider-fill     { width: 62%; }
  .app-control .phone-card__slider-thumb    { left: 62%; }
  .app-control .phone-card__spark-path      { stroke-dashoffset: 0; }
  .app-control .phone-feed__row             { opacity: 1; transform: none; }
  .app-control .control-badge               { opacity: 1; transform: none; }
  .app-control .app-control__connector      { opacity: 1; }
  .app-control .control-feature__bar        { transform: scaleY(1); }
  .phone-mockup                              { transform: rotate(0deg); }
}

/* Stage: relative Box, in der Phone (zentriert) + Badges
   (absolut an den Ecken) leben. Auf Desktop eine fixe
   Aspect-Ratio, auf Mobile umgestellt auf Grid (Phone oben,
   Badges in 2-Spalten-Grid darunter). */
.app-control__stage {
  position: relative;
  width: 100%;
  /* 1120 seit dem Geräte-Duo (18.09.2026, vorher 800): Laptop + Handy + je drei Badges links
     und rechts brauchen die Breite; bei 1180 px Fenster ist der Showcase 1116 px (Skalierung
     0,996 — sub-pixel), ab 1200 px Maßstab 1. */
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Höhe folgt dem Inhalt — auf Mobile bestimmt Phone+Badges-Grid das
     Layout, auf Desktop spannt die aspect-ratio die Stage auf. */
}

@media (min-width: 1180px) {
  .app-control__stage {
    /* 8/5 = 1120 × 700 seit dem Geräte-Duo (vorher 5/4 = 800 × 640): Laptop-Szene 627 px
       breit (Höhe 525) mittig oben, Handy 196 × 414 rechts unten davor bis 7 px über den Boden,
       Badges an den Rändern — Werte im Block „GERÄTE-DUO" am Dateiende (Runde 4, 18.09.). */
    aspect-ratio: 8 / 5;
  }
}

/* ---------- Phone-Mockup ---------- */
.phone-mockup {
  position: relative;
  /* Width-Cap bei 300 px: aspect-ratio 9/19 ergibt ~633 px Höhe —
     passt mit 7 px Buffer in die 5/4-Stage (800 × 640). Inklusive
     Drop-Shadow (–6% Bottom) bleibt der Glow sichtbar, wird nicht
     vom Section-overflow:hidden weggeschnitten. */
  width: clamp(200px, 24vw, 260px);
  aspect-ratio: 9 / 19;
  z-index: 2;
  /* Aufrecht ohne Tilt (Marie 2026-05-29: gerade statt schraeg). */
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-mockup:hover {
  transform: translateY(-4px);
}

.phone-mockup__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(28px, 3vw, 40px);
  /* Bezel-Gradient ausschließlich aus CI-Surface-Tokens —
     surface-4 → surface-2 → surface-1 ergibt einen plausiblen,
     leicht gewölbten Phone-Frame, ohne fremde Hex-Werte. */
  background: linear-gradient(135deg, var(--surface-4) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
  padding: clamp(8px, 1vw, 12px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 30px 60px -20px rgba(var(--shadow-rgb), 0.65),
    0 60px 120px -30px rgba(var(--glow-rgb), 0.22);
}

.phone-mockup__notch {
  position: absolute;
  top: clamp(8px, 1vw, 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: clamp(18px, 2vw, 22px);
  background: var(--black);
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

.phone-mockup__screen {
  width: 100%;
  height: 100%;
  border-radius: clamp(22px, 2.4vw, 30px);
  /* Screen-Gradient: surface-0 (sehr dunkel) → surface-2 → surface-3,
     erzeugt subtilen Oben-zu-Unten-Verlauf wie auf einem echten
     OLED-Display. Alle Werte aus CI-Surface-Token. */
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-2) 70%, var(--surface-3) 100%);
  overflow: hidden;
  padding: clamp(28px, 3vw, 38px) clamp(8px, 1vw, 12px) clamp(12px, 1.4vw, 16px);
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.9vw, 11px);
  position: relative;
}

/* Sanfter Glow unter dem Phone — separat von der Frame-Shadow,
   damit der Effekt nicht den Frame selbst weichzeichnet. */
.phone-mockup__shadow {
  position: absolute;
  bottom: -6%;
  left: 8%;
  right: 8%;
  height: 24%;
  background: radial-gradient(ellipse at top, rgba(var(--glow-rgb), 0.3) 0%, transparent 65%);
  filter: blur(24px);
  z-index: 1;
  pointer-events: none;
}

/* ---------- App-Header in der Screen ---------- */
.phone-app__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Bese-Bild-Logo im App-Header. Höhe ist klein (~13 px) gehalten,
   damit der Header schlank bleibt; Aspect-Ratio 776/146 ergibt
   automatisch eine sinnvolle Breite. */
.phone-app__logo {
  height: 13px;
  width: auto;
  display: block;
  /* Logo-SVG ist schon weiß — Filter sichert auch bei späterer
     Asset-Umbenennung / Dark-Variant fallback. */
  filter: brightness(1.05);
}

.phone-app__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  color: var(--accent-hover);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.phone-app__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 6px var(--accent-hover);
  animation: phone-status-pulse 2.2s ease-out infinite;
}

@keyframes phone-status-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.5); }
}

/* ---------- Phone-Cards (Base + Spezial-Modifier) ---------- */
.phone-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: clamp(10px, 1vw, 14px);
  padding: clamp(8px, 1vw, 12px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phone-card__head,
.phone-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Label-Row mit Mini-Icon vor dem Label — gibt jeder Card einen
   visuellen Anker passend zum Inhalt (Target/Gauge/Map-Pin/Bell). */
.phone-card__label-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0; /* erlaubt text-overflow */
}

.phone-card__icon {
  width: 12px;
  height: 12px;
  color: var(--accent-hover);
  opacity: 1;
  flex-shrink: 0;
  /* Lucide-Symbole im Sprite haben keine eigenen fill-/stroke-
     Attribute — die Outline-Optik kommt erst hier zustande. Identisch
     zur .icon-Basisklasse, aber nicht via inheritance erbbar. */
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phone-card__label {
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-card__trend {
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: var(--weight-semibold);
  color: var(--accent-hover);
  background: rgba(var(--glow-rgb), 0.14);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* Live-Pill für Card 04 (Anfragen — bis Runde 4 des Geräte-Duos „Eingehende Anfragen") — pulsierender Cyan-
   Dot + Mikro-Label. Aktiver als die Standard-Trend-Pill. */
.phone-card__live-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: var(--weight-semibold);
  color: var(--accent-hover);
  background: rgba(var(--glow-rgb), 0.16);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phone-card__live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 5px var(--accent-hover);
  animation: phone-status-pulse 2.2s ease-out infinite;
}

.phone-card__pct {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--white);
  line-height: 1;
}

/* Card 01: Hero (großer Counter + Sparkline) */
.phone-card--hero {
  padding-bottom: clamp(6px, 0.8vw, 10px);
}

.phone-card--hero .phone-card__value {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--white);
  line-height: 1;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.phone-card__spark {
  width: 100%;
  height: 22px;
  margin-top: 4px;
  overflow: visible;
}

.phone-card__spark-path {
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(var(--glow-rgb), 0.6));
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1800ms cubic-bezier(0.16, 1, 0.3, 1) 700ms;
}

.app-control.is-revealed .phone-card__spark-path {
  stroke-dashoffset: 0;
}

/* Card 02: Auslastungs-Bar */
.phone-card__bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-top: 6px;
  position: relative;
}

.phone-card__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: inherit;
  box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.5);
  transition: width 1800ms cubic-bezier(0.16, 1, 0.3, 1) 500ms;
}

/* Limit-Marker auf der Bar — vertikaler Strich an einer fest
   konfigurierten Position. Visuelles „bis hierhin"-Indiz. */
.phone-card__bar-marker {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
}

.phone-card__bar-marker--limit {
  left: 90%;
  transform: translateX(-50%);
}

/* Card 03: Slider mit Thumb */
.phone-card__slider {
  position: relative;
  height: 18px;
  margin-top: 4px;
}

.phone-card__slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-50%);
}

.phone-card__slider-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.5);
  transition: width 1800ms cubic-bezier(0.16, 1, 0.3, 1) 700ms;
}

.phone-card__slider-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 0 0 2px var(--accent-hover),
    0 4px 8px rgba(var(--shadow-rgb), 0.5);
  transform: translate(-50%, -50%);
  transition: left 1800ms cubic-bezier(0.16, 1, 0.3, 1) 700ms;
}

/* Card 04: Live-Feed */
.phone-feed {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.phone-feed__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text-200);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.app-control.is-revealed .phone-feed__row:nth-child(1) { opacity: 1; transform: none; transition-delay: 1400ms; }
.app-control.is-revealed .phone-feed__row:nth-child(2) { opacity: 1; transform: none; transition-delay: 1700ms; }
.app-control.is-revealed .phone-feed__row:nth-child(3) { opacity: 1; transform: none; transition-delay: 2000ms; }

.phone-feed__avatar {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--white);
  font-size: 7px;
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Pro-Avatar Gradient-Modifier — drei Cyan-Surface-Varianten aus der
   CI-Palette (accent-hover, cyan-hi, silver-blue → navy/accent/deep-
   navy). Bewusst als Klassen (kein Inline-CSS, §1.3-konform). */
.phone-feed__avatar--a {
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--navy) 100%);
}

.phone-feed__avatar--b {
  background: linear-gradient(135deg, var(--cyan-hi) 0%, var(--accent) 100%);
}

.phone-feed__avatar--c {
  background: linear-gradient(135deg, var(--silver-blue) 0%, var(--deep-navy) 100%);
}

.phone-feed__name {
  flex: 1 1 auto;
  color: var(--text-100);
  font-weight: var(--weight-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-feed__time {
  flex-shrink: 0;
  color: var(--text-300);
  font-size: 8px;
  letter-spacing: 0.04em;
}

/* ---------- Control-Badges (4 schwebend, an Phone-Ecken) ----------
   Größere, präsentere Glas-Pillen — Inhalt: Icon-Tile + 2-Zeilen-Label.
   Padding, Icon-Tile und Schrift sind bewusst kräftiger gewählt als
   in der ersten Version, damit die Badges als eigenständige UI-
   Elemente lesbar bleiben und nicht in den Aurora-Glow „verschwinden". */
.control-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 13px 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 18px 40px -10px rgba(var(--shadow-rgb), 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 3;
  /* Reveal-States (Desktop): aus -translate, mit Stagger einfaden */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms ease-out,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-control.is-revealed .control-badge {
  opacity: 1;
  transform: none;
}

.app-control.is-revealed .control-badge--top-left    { transition-delay: 600ms; }
.app-control.is-revealed .control-badge--top-right   { transition-delay: 800ms; }
.app-control.is-revealed .control-badge--bottom-right{ transition-delay: 1000ms; }
.app-control.is-revealed .control-badge--bottom-left { transition-delay: 1200ms; }
.app-control.is-revealed .control-badge--mid-left    { transition-delay: 1400ms; }   /* NEU 18.09.2026: Calltracking */
.app-control.is-revealed .control-badge--mid-right   { transition-delay: 1600ms; }   /* NEU 18.09.2026: Bese-AI */

.control-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--glow-rgb), 0.26), rgba(44, 110, 169, 0.12));
  border: 1px solid rgba(var(--glow-rgb), 0.28);
  color: var(--accent-hover);
  flex-shrink: 0;
}

.control-badge__icon .icon {
  width: 20px;
  height: 20px;
}

.control-badge__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.control-badge__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-100);
  letter-spacing: 0;
}

.control-badge__hint {
  font-family: var(--font-ui);
  font-size: 13px;
  /* Marie 2026-05-21: Hint war in text-300 (helles Grau) schwer
     lesbar — auf text-100 (Weiß) gesetzt für volle Lesbarkeit. */
  color: var(--text-100);
  letter-spacing: 0.02em;
}

/* Desktop-Layout: Badges sitzen absolut an den Phone-Ecken.
   Float-Animation bewusst entfernt (Marie 2026-05-21) —
   die ±8 px Schwebe-Bewegung war die Ursache dafür, dass die
   statischen Connector-Pfade nicht sauber an den Badge-Kanten
   ansetzten. Statische Badges + präzise Pfade = saubere Anbindung. */
@media (min-width: 1180px) {   /* seit dem Geräte-Duo 1180 statt 1024, s. .app-control__connectors */
  .control-badge {
    position: absolute;
  }
  /* Geräte-Duo (18.09.2026): drei Badges je Seite an den Bühnenrändern (left/right 0 — die
     Bühne ist 1120 px, Überhang wie früher bei −6 % liefe bei 1180 px aus dem Fenster). Boxen
     GEMESSEN (Höhe 68): TL 204 · ML 199 · BL 186 · TR 235 · MR 198 · BR 175 px breit; die
     Leitungen in app-showcase.html sind an diesen Kanten kalibriert. */
  .control-badge--top-left     { top: 6%;  left: 0;  }
  .control-badge--top-right    { top: 8%; right: 0; }
  .control-badge--bottom-right { bottom: 10%; right: 0; }
  .control-badge--bottom-left  { bottom: 6%; left: 0; }
  /* NEU 18.09.2026 (Marie: „weitere Punkte zu dieser Animation"): Mitte-links Calltracking, Mitte-rechts
     Bese-AI — Badge-Höhe ≈ 68 px, top 44/45 % legt die Mitte auf ≈ 330 (Phone-Mitte). left/right −6 %:
     die Badges ragen 48 px aus der 800-px-Bühne (der Showcase ist ab 1024 px ≥ 960 breit), sonst bleibt
     zwischen Kachel und Handy (x 270–530) kein Platz für die Leitung — Marie 18.09.: „die Linien sollen
     erst an der Kachel anfangen". Startpunkte der Leitungen app-conn-05/-06 sind an den gemessenen
     Kachelkanten kalibriert (app-showcase.html). */
  .control-badge--mid-left     { top: 44%; left: 0; }
  .control-badge--mid-right    { top: 44%; right: 0; }
}

/* Mobile / Tablet: Badges unter dem Phone als 2-spaltiges Grid.
   Stage wird zum Grid, Phone spannt beide Spalten und kommt
   visuell zuerst (über DOM-Order via order: -1). */
@media (max-width: 1179px) {   /* seit dem Geräte-Duo 1179 statt 1023, s. .app-control__connectors */
  .app-control__stage {
    container-type: inline-size;   /* Bezug für die cqw-Rechnung der Duo-Höhe (Runde 4, 18.09.) */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.5vw, 14px);
    padding-block: clamp(24px, 4vw, 40px);
    align-items: stretch;
  }
  /* seit dem Geräte-Duo ist .app-duo (Laptop + Handy) das Grid-Kind, nicht mehr das Handy allein */
  .app-duo {
    grid-column: 1 / -1;
    justify-self: center;
    order: -1;
    margin-bottom: clamp(20px, 3vw, 32px);
  }
  .control-badge {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 420px) {
  /* Sehr schmale Viewports: Badges noch eine Spalte */
  .app-control__stage {
    grid-template-columns: 1fr;
  }
}

/* ---------- 5-Card-Bento (Verkaufs-Argumente) ---------- */
.control-bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  /* Bühne für den Highlight-Glow hinter den Kacheln (::before). */
  position: relative;
  isolation: isolate;
}

/* Highlight-Hintergrund hinter dem Bento-Grid — analog zur Aurora
   hinter dem Phone darüber: weiche Cyan-Radials, damit die Kacheln
   sich vom dunklen Section-BG abheben und klar als Karten lesbar
   sind. Liegt hinter den Tiles (z-index -1), greift über die
   Grid-Fläche hinaus, damit der Glow zwischen den Karten durchscheint. */
.control-bento::before {
  content: '';
  position: absolute;
  /* Konservativer Inset: bleibt sicher innerhalb der .app-control-Bounds
     (Section hat overflow:hidden) — sonst clippt der Blur-Kern auf engen
     Viewports (320/375 px) an einer harten Kante. */
  inset: -4% -3%;
  z-index: -1;
  pointer-events: none;
  /* CI-Cyan-Spektrum: --accent-hover (#4DA8DA), --accent (#2C6EA9),
     --cyan-hi (#6BC4F0), jeweils stark transparent. */
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(var(--glow-rgb), 0.16) 0%, rgba(var(--glow-rgb), 0) 70%),
    radial-gradient(55% 50% at 82% 60%, rgba(44, 110, 169, 0.16) 0%, rgba(44, 110, 169, 0) 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(107, 196, 240, 0.12) 0%, rgba(107, 196, 240, 0) 72%);
  /* Statisch (nicht animiert): das Phone-Aurora-Layer darüber läuft
     bereits mit blur — ein zweiter animierter blur-Pass wäre GPU-Last
     auf Mobile. Der Kontrast-Effekt braucht keine Bewegung. */
  filter: blur(24px);
}

@media (min-width: 720px) {
  .control-bento {
    grid-template-columns: 1fr 1fr;
  }
  /* Foto-Card (1), Stat-Card (2) und Chart-Card (5) sind die visuell
     schwereren Karten und nehmen auf Tablet die volle Breite ein —
     dazwischen sitzen Standard (3) und Icon-Hero (4) als Paar. */
  .control-feature:nth-child(1),
  .control-feature:nth-child(2),
  .control-feature:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  /* Desktop-Bento: 2-3-Layout (analog Bese-Karriere-Pattern).
     Row 1: Foto-Card + Stat-Card jeweils 50 % (span 3/6).
     Row 2: Standard + Icon-Hero + Chart jeweils 33 % (span 2/6). */
  .control-bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .control-feature:nth-child(1),
  .control-feature:nth-child(2) {
    grid-column: span 3;
  }
  .control-feature:nth-child(3),
  .control-feature:nth-child(4),
  .control-feature:nth-child(5) {
    grid-column: span 2;
  }
}

.control-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Kompakteres Tile-Spacing analog Karriere-Seite — weniger luftig
     als die Hero-Cards in Section 03, dafür stärker als „Listen-
     Eintrag" lesbar. */
  gap: clamp(12px, 1.3vw, 18px);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066) 0%, rgba(255, 255, 255, 0.022) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px -10px rgba(var(--shadow-rgb), 0.45);
  overflow: hidden;
  /* 3D-Maus-Tilt (Pattern §0a Mouse-Tilt): --mx/--my werden per JS
     gesetzt (-1..+1), --tilt-max begrenzt den Roll-Winkel, --lift
     trägt den Hover-Z-Lift in dieselbe Transform-Kette. */
  --mx: 0;
  --my: 0;
  --tilt-max: 6deg;
  --lift: 0px;
  /* flat statt preserve-3d: das Element selbst rotiert (perspective im
     Transform), es gibt keine 3D-Kinder zu erhalten. overflow:hidden +
     preserve-3d würde in Safari ohnehin auf flat zurückfallen. */
  transform-style: flat;
  transform: perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease,
    box-shadow 480ms ease;
}

.control-feature:hover {
  --lift: -3px;
  border-color: rgba(var(--glow-rgb), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 44px -16px rgba(var(--glow-rgb), 0.28),
    0 10px 28px -10px rgba(var(--shadow-rgb), 0.55);
}

/* Aktive Maus-Tilt-Phase: kürzere Transition für Cursor-Follow. */
.control-feature.is-tilting {
  transition:
    transform 140ms ease-out,
    border-color 320ms ease,
    box-shadow 480ms ease;
}

.control-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--glow-rgb), 0.2) 0%, rgba(44, 110, 169, 0.08) 100%);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  color: var(--accent-hover);
}

.control-feature__icon .icon {
  width: 22px;
  height: 22px;
}

/* H3-Card-Titel: bewusster Mix aus Sans + Serif-Italic.
   Hauptzeile in Montserrat Bold (kompakt, modern, UI-Look),
   Italic-Akzent (em) bleibt Instrument Serif mit Silver-Cyan-
   Gradient — etabliertes Brand-Akzent-Pattern. */
.control-feature__title {
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 1.5vw, 1.375rem);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  margin: 0;
  max-width: 22ch;
  /* Damit auf 320 px lange Komposita („Erfolgsorientiert") sauber
     umbrechen, ohne aber stumpf in der Mitte zu zerteilen. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

/* Photo-Cards: Title darf breiter laufen, damit der Sub-Lockup
   („Wir sind echte Experten" / „Perfekte Infrastruktur nutzen")
   einzeilig steht. Mit dem Overlay-Layout sitzt der Text unten
   auf dem Foto — eine kompakte 1-Zeilen-Lockup-Höhe schiebt
   weniger Vorhang über das Bild und mehr vom Motiv bleibt
   sichtbar.

   font-size etwas kleiner als der globale Title-Default
   (1.1–1.375 rem), damit der Lockup auch im Engpass-Viewport
   1080–1199 px (Bento springt dort auf 6-col, Card 04 als
   span-2 wird auf ~220–260 px Content-Breite eng) zuverlässig
   einzeilig bleibt. Auf großen Viewports gleicht sich der Wert
   wieder dem globalen Maximum an. */
.control-feature--photo .control-feature__title {
  max-width: 30ch;
  /* Min etwas unter 1rem, damit der Sub-Lockup auch auf sehr engen
     320 px-Viewports (Photo-Card-Mobile-Content-Breite ≈ 240 px)
     zuverlässig in eine Zeile passt. */
  font-size: clamp(0.95rem, 1.35vw, 1.375rem);
  /* Lesbarkeit über dem Foto: drop-shadow folgt der Glyphen-Alpha
     (auch beim gradient-geclippten <em>), damit „Spezialisierung"
     sich gegen helle Bildbereiche klar absetzt. */
  filter: drop-shadow(0 2px 10px rgba(var(--shadow-rgb), 0.7));
}

/* Auf Mobile sitzt der Title auf dem Card-BG (kein Foto dahinter) —
   Shadow dort unnötig und würde den Text matschig wirken lassen. */
@media (max-width: 719px) {
  .control-feature--photo .control-feature__title {
    filter: none;
  }
}

/* Stat-Card: Title darf ebenfalls breiter laufen, damit der
   Sub-Lockup („Mach, was du am besten kannst") sowohl auf Mobile
   als auch auf Desktop einzeilig bleibt. Auf Mobile sitzt die
   Hero-Zahl neben dem Label — ein kompakter H3-Lockup hält die
   Card als Ganzes niedriger. */
.control-feature--stat .control-feature__title {
  max-width: 30ch;
  /* Min etwas unter 1rem aus dem gleichen Grund wie bei der
     Photo-Card-Variante — bei 320 px Viewport ist Card-Content
     ≈ 280 px, „Mach, was du am besten kannst" (30 Zeichen) liegt
     bei 16 px knapp am Limit. */
  font-size: clamp(0.95rem, 1.35vw, 1.375rem);
}

/* Italic-Akzent im H3-Titel — eigene Regel, da die globale
   `h1 em, h2 em` H3 nicht abdeckt (§5a-Pattern wie .capacity__sub em).
   Display-Schrift explizit, weil der Parent jetzt auf Montserrat steht.
   Etwas größer + leichter, damit der Italic-Akzent gegenüber dem
   Sans-Bold optisch nicht „unter geht". §1.6-Padding gegen Clipping. */
.control-feature__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 1.18em;
  letter-spacing: 0;
  background: linear-gradient(135deg, var(--silver-blue) 0%, var(--accent-hover) 55%, var(--cyan-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.control-feature__body {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-200);
  margin: 0;
  max-width: 56ch;
}

/* Wrapper-Group für Title + Body bei Modifier-Karten, damit der
   Content-Block visuell zusammensteht und vom Visual (Foto, Stat,
   Hero-Icon, Chart) eindeutig getrennt ist. */
.control-feature__content {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  position: relative;
  z-index: 2;
}

/* ============================================================
   Card-Modifier — 01 Photo, 02 Stat, 03 Chart, 04 Photo, 05 CTA
   Cards 01 + 04 nutzen denselben .control-feature--photo-Modifier
   (Foto-BG mit Dark-Gradient-Overlay). Alle Modifier erben die
   Base-Card-Specs (Border, Padding, Hover-Lift) und überschreiben
   nur das Visual-Setup.
   ============================================================ */

/* ---- 01 + 04 Foto-Card ---- */
/* Auf Desktop liegt der Text als Overlay unten auf dem Foto (Dark-
   Gradient trägt die Lesbarkeit). Auf Mobile wechselt das Layout zu
   einem 2-Block-Stack: Foto oben (Aspect-Block), Text darunter auf
   solidem Card-BG — so liegt nie wieder Text über Gesichtern. */
.control-feature--photo {
  /* Moderate Tile-Höhe — niedriger als vorher (war 220–300 px), damit
     die Bottom-Row (Card 03 mit Text-Wrap-Chart, Card 04 Photo, Card
     05 CTA) nicht durch das Photo-min-height überproportional
     hochgezogen wird. Die Personen werden über einen gezielten
     Photo-Zoom (Modifier --shift-up) sichtbar gemacht, nicht über
     die Card-Höhe. */
  min-height: clamp(230px, 24vw, 300px);
}

/* Text als Overlay unten — nur im Desktop-Layout. Auf Mobile sitzt
   der Content als regulärer Block unter dem Foto (siehe Override
   weiter unten), deshalb gehört flex-end nicht in die Basis-Regel. */
@media (min-width: 720px) {
  .control-feature--photo {
    justify-content: flex-end;
  }
}

.control-feature__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.control-feature__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default-Framing für die Photo-Card (Card 01). Wird vom
     Modifier --shift-up unten überschrieben. */
  object-position: center 18%;
  /* Höhere Deckkraft / Helligkeit: Foto deutlich präsenter, der
     Dunkel-Gradient unten trägt die Text-Lesbarkeit allein. */
  filter: saturate(0.95) brightness(0.95) contrast(1.05);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
              filter   480ms ease;
}

/* Photo-Position-Modifier (Card 01 — Bese-Team mit Tablet):
   Im Original-Foto stehen die zwei Personen rechts in der oberen
   Bildhälfte. Bei der kompakten Card-Höhe wären sie ohne Zoom klein
   und schwer erkennbar. Lösung: zusätzlicher Scale auf das <img>
   mit transform-origin auf die Gesichter (ca. 65 % / 38 %) — die
   Personen wirken so deutlich größer und stehen mittig im Frame,
   während die BESEMEDIA-Moos-Wand als Kontext-Anker links sichtbar
   bleibt. Card-Höhe unverändert. */
.control-feature__photo--shift-up img {
  /* Köpfe nach oben-rechts geschoben (Marie 2026-06-18): die beiden
     Personen sitzen jetzt in der oberen rechten Card-Ecke, die linke
     Bildhälfte bleibt als ruhiger, dunkler Hintergrund frei für die
     Titel-Zeile „Spezialisierung". */
  object-position: 34% 48%;
  transform: scale(1.14);
  transform-origin: 40% 40%;
}

.control-feature--photo:hover .control-feature__photo img {
  transform: scale(1.05);
  filter: saturate(1.05) brightness(1) contrast(1.05);
}

/* Hover-Scale relativ zum Base-Scale der --shift-up-Variante,
   sonst würde der Hover den 1.28-Zoom plattmachen. Klasse doppelt
   selektiert, damit der Override eine höhere Spezifität hat als die
   generische Hover-Regel darüber — sonst gewinnt nur die Source-Order
   und ein neuer Regel-Block dazwischen würde den Zoom kippen. */
.control-feature--photo:hover .control-feature__photo--shift-up.control-feature__photo--shift-up img {
  transform: scale(1.26);
}

/* Dark-Gradient-Overlay: oben transparent (Foto sichtbar), unten
   kräftig dunkel für Text-Lesbarkeit. Verstärkt im mittleren Bereich
   (Knick bei 45 % statt 55 %), damit Headlines wie „Spezialisierung"
   gegen helle Bildbereiche durchsetzungsfähig bleiben. */
.control-feature__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 14, 0) 0%,
    rgba(6, 10, 14, 0.2) 22%,
    rgba(12, 20, 28, 0.82) 48%,
    rgba(6, 10, 14, 0.98) 72%,
    rgba(6, 10, 14, 1) 100%
  );
  pointer-events: none;
}

/* Card 01 (--shift-up): zusätzlicher diagonaler Schleier, der die
   linke obere Ecke abdunkelt — dort liegt der Titel „Spezialisierung",
   während die Köpfe rechts oben sichtbar bleiben (Marie 2026-06-18). */
.control-feature__photo--shift-up::after {
  content: '';
  background:
    /* nur die obere LINKE Ecke abdunkeln (Titel „Spezialisierung") —
       die Köpfe liegen rechts/zentral und bleiben sichtbar. */
    linear-gradient(
      128deg,
      rgba(6, 10, 14, 0.82) 0%,
      rgba(6, 10, 14, 0.34) 20%,
      rgba(6, 10, 14, 0) 40%
    ),
    linear-gradient(
      180deg,
      rgba(6, 10, 14, 0) 0%,
      rgba(6, 10, 14, 0.18) 26%,
      rgba(12, 20, 28, 0.8) 50%,
      rgba(6, 10, 14, 0.98) 74%,
      rgba(6, 10, 14, 1) 100%
    );
}

/* ---- Card 01 „Spezialisierung": Text bricht um die Köpfe ----
   Marie 2026-06-18: die zwei Köpfe sitzen oben rechts, der Text soll
   diagonal darum herum umbrechen (an der „roten Linie" entlang) statt
   volle Breite unter den Gesichtern durchzulaufen. Float-Guard +
   shape-outside reservieren die obere rechte Ecke; der Text füllt die
   Karte von oben links und wird dort schmaler, wo die Köpfe sind. Nur
   Desktop — auf Mobile gilt das Stack-Layout (Foto oben, Text unten). */
.control-feature__faceguard { display: none; }
/* Feste Umbrüche im Spezialisierungs-Text (Marie 2026-09-07, eingezeichnet:
   nach „eine" / „morgen für den" / „jeden Tag."). Aktiv nur dort, wo der
   Absatz breit genug ist, dass alle vier Zeilen wie gezeichnet fallen:
   720–1179px (1–2 Spalten, Absatz auf seinem 56ch-Deckel = 593px) und ab
   1380px. Im 3-Spalten-Bento 1180–1379px ist die Kachel nur 546–646px
   breit, der Absatz 488–584px — Zeile 3 („Online-Shop … jeden Tag.",
   570px) braucht gemessen mindestens 1360px (574px, 4px Reserve), die
   Grenze liegt mit 14px Reserve bei 1380px; darunter erzeugten feste
   Umbrüche Einzelwort-Zeilen und schoben Text in die Gesichter → dort
   fließt der Text frei wie bisher. */
.control-feature__br { display: none; }

@media (min-width: 720px) {
  .control-feature--faces {
    /* Karte oben „abgeschnitten" (Marie 2026-06-18): kleinere
       min-height als die Basis-Photo-Card (300px), damit der leere
       Ceiling-Streifen über den Köpfen wegfällt. Bildausschnitt
       bleibt gleich (object-position unverändert). */
    min-height: clamp(196px, 21vw, 262px);
  }
  .control-feature--faces .control-feature__content {
    /* Block statt Flex, sonst greift float/shape-outside nicht.
       Nur kleiner padding-top — der frühere große Wert erzeugte oben
       den leeren Bildstreifen, der jetzt weggeschnitten ist. */
    display: block;
    flex: 1 1 auto;
    padding-top: clamp(6px, 1vw, 14px);
  }
  .control-feature--faces .control-feature__title {
    margin-bottom: clamp(8px, 1vw, 12px);
  }
  .control-feature--faces .control-feature__faceguard {
    display: block;
    float: right;
    width: 56%;
    height: clamp(128px, 15vw, 162px);
    /* Dreieck oben-rechts (Hypotenuse von oben-links nach unten-
       rechts) → Text läuft im unteren linken Bereich, oben kurz,
       unten voll. */
    shape-outside: polygon(0 0, 100% 0, 100% 100%);
    shape-margin: clamp(10px, 1.4vw, 16px);
  }
}
/* Steht bewusst HINTER dem Basisblock (gleiche Spezifität → Quellreihenfolge
   entscheidet über die Freihalter-Höhe). */
@media (min-width: 720px) and (max-width: 1179px), (min-width: 1380px) {
  .control-feature__br { display: inline; }
  /* Im selben Breitenfenster endet der Kopf-Freihalter knapp unter den
     Gesichtern (per Gesichtserkennung gemessen: Köpfe bis y≈120–143 der
     Karte, Freihalter beginnt bei y≈36–45 → 104px + shape-margin). Mit
     der Basis-Höhe clamp(128px, 15vw, 162px) ragte er 30–60px tiefer und
     nahm der festen dritten Zeile („Online-Shop … jeden Tag.", 570px)
     die Breite — sie brach vor „jeden Tag." noch einmal um. */
  .control-feature--faces .control-feature__faceguard { height: min(15vw, 104px); }
}

/* ---- Mobile-Layout für Photo-Cards (kein Overlay) ----
   Foto und Text werden zu zwei eigenständigen Stapel-Blöcken: oben
   das Foto im 4:3-Block, darunter der Text auf dem normalen
   Card-Background. Damit liegt kein Text mehr über Gesichtern und
   die Lesbarkeit ist garantiert. */
@media (max-width: 719px) {
  .control-feature--photo {
    /* min-height aufheben — die Card ist so hoch wie ihr Inhalt
       (Foto + Text), keine künstliche Mindesthöhe. */
    min-height: 0;
    /* Card-Padding entfernen — Foto soll bis zum Rand stehen, der
       Text bekommt eigenes Padding (siehe Content-Override). */
    padding: 0;
    gap: 0;
  }
  .control-feature--photo .control-feature__photo {
    /* Aus dem absoluten Overlay-Modus rausholen — als regulärer
       Block oben in der Card. */
    position: relative;
    inset: auto;
    width: 100%;
    /* 4:3 ist ein guter Kompromiss: zeigt genug Kontext, Gesichter
       wirken proportional groß, Card wird nicht zu sehr in die Höhe
       gezogen. */
    aspect-ratio: 4 / 3;
    height: auto;
    flex-shrink: 0;
    /* Nur die Top-Corners runden — die Bottom-Corners macht der
     Text-Block. Card hat overflow:hidden, also clipped sie alles
     auf den Outer-Radius — aber falls das Foto-Img später per
     Transform bewegt wird, ist explicit besser. */
    border-radius: 0;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .control-feature--photo .control-feature__photo::after {
    /* Dark-Overlay ausblenden — Text liegt nicht mehr drüber, also
       darf das Foto ungetrübt wirken. */
    background: none;
  }
  .control-feature--photo .control-feature__content {
    /* Eigenes Padding für den Text-Block, da die Card padding:0 hat. */
    padding: clamp(20px, 5.2vw, 28px);
  }
  /* Desktop-Zoom auf der Card-01-Variante (--shift-up) zurücksetzen.
     Im Mobile-4:3-Block ist das Foto ohnehin groß dargestellt — der
     1.28er Scale mit Origin 62%/42% würde im anders proportionierten
     Block die Köpfe nach oben rausschneiden. Auf Mobile reicht eine
     reine object-position-Justierung. */
  .control-feature__photo--shift-up img {
    transform: none;
    transform-origin: initial;
    object-position: center 30%;
  }
}

/* ---- 02 Stat-Card ----
   Horizontales Editorial-Layout: Content links (Title + Body),
   große Italic-Zahl rechts. Auf Mobile stack vertikal (Zahl oben,
   Content unten — die Zahl bleibt der erste Anker). */
@media (min-width: 720px) {
  .control-feature--stat {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(20px, 2.4vw, 36px);
    align-items: center;
  }
  /* DOM-Order: Stat zuerst, Content zweitens. Auf Desktop drehen
     wir die Reihenfolge per order, damit Content links sitzt und
     die Hero-Zahl rechts. */
  .control-feature--stat .control-feature__content { order: 1; }
  .control-feature--stat .control-feature__stat    { order: 2; }
}

.control-feature__stat {
  display: flex;
  /* Mobile-Default: 260+ und Label nebeneinander (Marie-Wunsch).
     Hero-Zahl links, Label rechts — die große Italic-Zahl fungiert
     als visueller Anker, das Label liest sich als Beschriftung
     daneben. Auf Desktop wechselt das Layout zur vertikalen
     Edge-rechts-Spalte (siehe Desktop-Override unten). */
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 3.5vw, 18px);
}

@media (min-width: 720px) {
  .control-feature__stat {
    flex-direction: column;
    /* Label mittig unter der großen 250+-Zahl (Marie 2026-06-18) —
       vorher flex-end/right, dadurch saß „Partnerbetriebe" am rechten
       Rand statt zentriert unter der Zahl. */
    align-items: center;
    text-align: center;
    gap: clamp(4px, 0.6vw, 8px);
  }
}

.control-feature__stat-value {
  /* Sans-Zähler (Marie 2026-08-25 P5, global): Montserrat-Bold statt
     Serif-Italic. */
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: var(--weight-bold);
  /* Editorial-Hero-Zahl auf Desktop — Mobile-Override sitzt unten,
     nach dieser Basisregel (Source-Order-konventionell). */
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.9;
  /* Identischer Cyan-Silver-Gradient wie Headlines — §1.6-Padding gegen
     Italic-Glyph-Clipping. */
  background: linear-gradient(135deg, var(--silver-blue) 0%, var(--accent-hover) 55%, var(--cyan-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 719px) {
  /* Auf Mobile etwas kompakter, damit die Hero-Zahl im
     horizontalen Layout neben dem Label nicht die ganze Card
     dominiert. Höhere Spezifität als die Basisregel oben durch
     den .control-feature--stat-Prefix, damit der Override unabhängig
     von Source-Order zuverlässig greift. */
  .control-feature--stat .control-feature__stat-value {
    font-size: clamp(44px, 12vw, 64px);
  }
}

.control-feature__stat-plus {
  font-size: 0.5em;
  vertical-align: 0.4em;
  margin-left: 2px;
}

.control-feature__stat-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-300);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  max-width: 14ch;
}

/* ---- 03 CTA-Card ----
   Conversion-Moment innerhalb des Bento-Grids: kompakter Eyebrow +
   Mixed-Font-H3 + Italic-Akzent + Sub-Zeile + Signature-Button.
   Cyan-Spotlight-Background hebt die Card subtle gegenüber den
   anderen vier ab, ohne aus dem Glas-System auszubrechen. */
.control-feature--cta {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(10px, 1.2vw, 16px);
  /* Stärkerer Cyan-Spotlight statt Standard-Glas-Background +
     leicht kräftigerer Border-Akzent + Outer-Glow für Premium-Look. */
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(var(--glow-rgb), 0.16) 0%, rgba(var(--glow-rgb), 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.014) 100%);
  border-color: rgba(var(--glow-rgb), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -12px rgba(var(--glow-rgb), 0.3),
    0 10px 28px -10px rgba(var(--shadow-rgb), 0.5);
}

.control-feature--cta:hover {
  border-color: rgba(var(--glow-rgb), 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 26px 52px -16px rgba(var(--glow-rgb), 0.42),
    0 12px 30px -12px rgba(var(--shadow-rgb), 0.55);
}

.control-feature__cta-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--accent-hover);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(var(--glow-rgb), 0.14);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  line-height: 1;
}

/* H3-Override für die CTA-Card: Display-Schrift statt Sans-Bold,
   etwas größer als die anderen Card-Titel für Conversion-Präsenz. */
.control-feature__title--cta {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  max-width: 20ch; /* 14→20ch (Marie 2026-09-02): „Übernimm das Steuer" einzeilig */
  letter-spacing: -0.01em;
}

/* Der bestehende `.control-feature__title em` (Sans-Mix-Regel) würde
   für die CTA-Card eine kleinere em-Größe ergeben. Override für
   einheitliche Italic-Größe in der Display-Variante. */
.control-feature__title--cta em {
  font-size: 1em;
}

.control-feature__cta-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.4;
  color: var(--text-100);
  margin: 0;
  max-width: 22ch;
}

.control-feature__cta-btn {
  margin-top: clamp(4px, 0.5vw, 8px);
}

/* ---- Chart-Card: Mini-Trend-Bars ----
   Sowohl auf Mobile als auch auf Desktop fließt der Body-Text als
   Text-Wrap um die Chart-Bars herum und schmiegt sich an die
   ansteigende Treppe. Die Chart-SVG sitzt in einem Float-Host mit
   shape-outside-Polygon (Treppen-Sperrzone). Mobile- und Desktop-
   Varianten unterscheiden sich nur in Float-Größe und Push-Down. */

/* Card-Reset: Default `.control-feature` hat `overflow: hidden` für
   Photo-Card-Img-Clipping. Chart-Card braucht das nicht (kein Foto-
   BG) und der Float-Host würde durch den Push-Down knapp an die
   Card-Untergrenze stoßen — overflow:visible ist hier sicherer. */
.control-feature--chart {
  overflow: visible;
}

/* Content-Container: Floats wirken nicht in Flex-Containern, der
   generische `.control-feature__content` ist aber flex-column. Für
   die Chart-Card auf flow-root umstellen — erzeugt einen Block-
   Formatting-Context, der den Float einschließt und verhindert,
   dass die Card-Höhe nicht um den Float kollabiert. */
.control-feature--chart .control-feature__content {
  display: flow-root;
}
.control-feature--chart .control-feature__content > h3 {
  /* Ersatz für den entfallenen Flex-Gap zwischen H3 und Float-Host
     bzw. H3 und Body. */
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
.control-feature--chart .control-feature__content > .control-feature__body {
  margin: 0;
}
.control-feature--chart .control-feature__body {
  /* Standard-max-width (56ch) würde den Wrap-Effekt um die Treppe
     verkürzen — der Body soll alle verfügbare Breite nutzen. */
  max-width: none;
}

/* SVG füllt den Float-Host komplett aus. Mit aspect-ratio 2:1 auf
   dem Host und `preserveAspectRatio="xMaxYMax meet"` auf der SVG
   liegen Bars und shape-outside-Polygon deckungsgleich. */
.control-feature__chart {
  position: static;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Float-Host (Mobile-Default): kompakte Werte für die einspaltige
   Bento-Card. Treppen-Polygon und Push-Down funktionieren identisch
   zur Desktop-Variante, nur in kleinerer Skala. */
.control-feature--chart .control-feature__chart-host {
  float: right;
  width: clamp(96px, 28vw, 140px);
  /* aspect-ratio 2:1 matched die viewBox der Bars (120 × 60). */
  aspect-ratio: 2 / 1;
  /* Treppe-Polygon: Sperrzone als rechtwinkliges Dreieck mit
     Hypothenuse von links-unten nach rechts-oben — entspricht der
     Bar-Oberkante (Bars wachsen linear nach rechts). */
  shape-outside: polygon(0 100%, 100% 100%, 100% 0);
  shape-margin: clamp(6px, 1.4vw, 12px);
  /* Push-Down: Float sitzt nicht direkt oben rechts, sondern weiter
     unten — die Bars stehen damit im unteren Drittel der Card, der
     Body-Text läuft oben breit und legt sich unten um die Treppe. */
  margin: clamp(20px, 5.5vw, 48px) 0 0 clamp(12px, 2vw, 18px);
  /* Eigener Stacking-Context für die Chart-Animation. */
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  /* Desktop: größerer Float-Host und stärkerer Push-Down — die
     Card ist breiter, der Text-Wrap kann großzügiger ausgelegt
     werden. */
  .control-feature--chart .control-feature__chart-host {
    width: clamp(120px, 13vw, 170px);
    shape-margin: clamp(8px, 1vw, 14px);
    margin: clamp(40px, 5.5vw, 84px) 0 0 clamp(16px, 1.5vw, 24px);
  }
}

.control-feature__bar {
  fill: var(--accent-hover);
  opacity: 0.35;
  transform-origin: center bottom;
  transform-box: fill-box;
  transform: scaleY(0);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity   480ms ease;
}

/* Letzter Bar etwas kräftiger — Peak-Akzent */
.control-feature__bar:last-of-type {
  opacity: 0.65;
  filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), 0.4));
}

/* Reveal-Stagger pro Bar — beginnt nach dem Phone-Animations-Cluster */
.app-control.is-revealed .control-feature__bar:nth-of-type(1) { transform: scaleY(1); transition-delay: 1600ms; }
.app-control.is-revealed .control-feature__bar:nth-of-type(2) { transform: scaleY(1); transition-delay: 1700ms; }
.app-control.is-revealed .control-feature__bar:nth-of-type(3) { transform: scaleY(1); transition-delay: 1800ms; }
.app-control.is-revealed .control-feature__bar:nth-of-type(4) { transform: scaleY(1); transition-delay: 1900ms; }
.app-control.is-revealed .control-feature__bar:nth-of-type(5) { transform: scaleY(1); transition-delay: 2000ms; }
.app-control.is-revealed .control-feature__bar:nth-of-type(6) { transform: scaleY(1); transition-delay: 2100ms; }
.app-control.is-revealed .control-feature__bar:nth-of-type(7) { transform: scaleY(1); transition-delay: 2200ms; }

.control-feature--chart:hover .control-feature__bar {
  opacity: 0.55;
}

.control-feature--chart:hover .control-feature__bar:last-of-type {
  opacity: 0.85;
}

/* ---------- Section-Footer mit Signature-CTA ---------- */
.app-control__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.5vw, 32px);
  text-align: center;
}

.app-control__footer-lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-style: italic;
  color: var(--text-100);
  margin: 0;
  max-width: 30ch;
  line-height: 1.3;
}

/* .app-control__cta erbt vollständige Signature-CTA-Specs aus
   .btn-accent-signature + .btn-lg — keine eigenen Styles nötig. */

/* ============================================================
   Section 06 — Erfolgsgeschichten (Cinema-Carousel)
   ============================================================
   Bühnen-Layout mit drei sichtbaren Slots (-1 / 0 / 1). Cards
   sind absolut positioniert auf einer gemeinsamen Mittel-Anker-
   Linie. Aktiver Slot (offset 0) ist groß, scharf, opaque; die
   beiden Nachbarn (offset ±1) sind zurückgesetzt, leicht
   gekippt, blasser. Alles weitere ist off-stage (opacity 0).
   JS setzt `data-offset` zyklisch von -2…+3 — Cards mit
   |offset| ≥ 2 sind unsichtbar, bleiben aber im DOM, damit der
   Übergang flüssig läuft (auch beim Wrap-Around).
   ============================================================ */
.cases {
  position: relative;
  padding-block: var(--section-py);
  isolation: isolate;
  overflow: clip;
}

/* Sanftes Spotlight hinter der Bühne — bleibt ruhig, dient nur
   als optischer Anker für die mittlere Karte. Wird vom aktiven
   Card-Glow überlagert, nicht ersetzt. */
.cases::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1120px, 90vw);
  height: min(640px, 70vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--glow-rgb), 0.10) 0%,
    rgba(var(--glow-rgb), 0.04) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.cases__container {
  position: relative;
  z-index: 1;
}

.cases__header {
  /* Section-Header erbt margin-bottom via .section-header — hier
     etwas enger, damit Eyebrow → H2 → Intro als kompakter Block
     wirken (Marie 2026-05-28). */
  margin-bottom: clamp(28px, 3.5vw, 52px);
  gap: var(--space-3);
}

.cases__intro {
  /* Breiter als 56ch, damit der Intro-Satz mit weniger Umbrüchen
     auskommt (Marie 2026-05-28). pretty hält die letzte Zeile
     gefüllt statt einzelner Waisen-Wörter. */
  max-width: 72ch;
  margin: 0;
  font-size: var(--text-lead);
  color: var(--text-200);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Bühne ---------- */
.cases__stage {
  position: relative;
  /* Weicher Rand statt hartem Abriss (Befund 2026-09-10): unterhalb von
     1180 px stehen die Nachbarkarten des Coverflows so dicht an der
     Sektionskante, dass `overflow: clip` sie mitten im Wort kappt
     (gemessen 45 px bei 768, 66 px bei 1024 — „…twestfalen GmbH" las
     sich als kaputter Text, nicht als angeschnittene Karte). Die Maske
     lässt sie stattdessen ausfaden. Ab 1180 px ist genug Rand da, dort
     bleibt der Blick unmaskiert. */
  /* Höhe wird per JS auf die exakte Karten-Höhe gesetzt
     (data-cases-stage). min-height ist nur No-JS-Fallback,
     damit der Container nicht kollabiert (alle Cards sind
     absolut positioniert). */
  min-height: clamp(440px, 50vw, 580px);
  perspective: 1800px;
  perspective-origin: 50% 50%;
  margin-inline: calc(var(--space-5) * -1);
  padding-inline: var(--space-5);
}

@media (max-width: 1179px) {
  .cases__stage {
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg,
      transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}

.cases__track {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

/* ---------- Case-Card · Default (Side-State) ---------- */
.case-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 56vw, 660px);
  list-style: none;
  /* Kein pointer-events bis JS Offset gesetzt hat → vermeidet
     phantom-Clicks während des Initial-Paints. */
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 480ms ease,
    filter 480ms ease;
  z-index: 1;
  /* GPU-Compositing-Hint — verhindert Flackern bei großen
     scale/rotate-Übergängen ohne Layout-Reflow. */
  will-change: transform, opacity;
}

.case-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: var(--radius-xl);
  background: linear-gradient(
    160deg,
    rgba(31, 52, 71, 0.55) 0%,
    rgba(19, 31, 43, 0.65) 50%,
    rgba(12, 20, 28, 0.85) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 48px -16px rgba(var(--shadow-rgb), 0.55);
  overflow: hidden;
}

/* ---------- Slot-Verteilung über [data-offset] ---------- */
.case-card[data-offset="0"] {
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 5;
  filter: none;
}

.case-card[data-offset="-1"] {
  pointer-events: auto;
  opacity: 0.42;
  transform: translate(calc(-50% - 64%), -50%) scale(0.74) rotateY(18deg);
  filter: blur(1.5px) saturate(0.7);
  cursor: pointer;
  z-index: 3;
}

.case-card[data-offset="1"] {
  pointer-events: auto;
  opacity: 0.42;
  transform: translate(calc(-50% + 64%), -50%) scale(0.74) rotateY(-18deg);
  filter: blur(1.5px) saturate(0.7);
  cursor: pointer;
  z-index: 3;
}

/* Hover hebt Side-Cards leicht an, damit Klick-Affordance
   spürbar ist. */
.case-card[data-offset="-1"]:hover,
.case-card[data-offset="1"]:hover {
  opacity: 0.65;
  filter: blur(0) saturate(0.85);
}

/* Aktive Karte: dezenter Cyan-Akzent-Ring über dem Glas. */
.case-card[data-offset="0"] .case-card__inner {
  /* Marie 2026-05-28: Cyan-Akzent deutlich zurückgenommen — die
     aktive Kachel wirkte vorher zu blau-dominant. Glas-Tiefe kommt
     jetzt v. a. aus dem dunklen Drop-Shadow, Cyan nur als Hauch. */
  border-color: rgba(var(--glow-rgb), 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(var(--glow-rgb), 0.08),
    0 30px 60px -20px rgba(var(--shadow-rgb), 0.6),
    0 0 60px -28px rgba(var(--glow-rgb), 0.18);
}

/* ---------- Sterne-Rating (sitzt jetzt direkt unter dem Video) ---------- */
.case-card__rating {
  display: inline-flex;
  gap: 3px;
  /* Marie 2026-05-28: Sterne weiß statt Cyan — weniger Blau auf
     der Kachel. */
  color: var(--white);
  /* Wird im Body links angesetzt — visuell auf einer Linie mit
     Bullets und Firmen-Name. */
}

.case-card__rating .icon {
  width: 16px;
  height: 16px;
  /* Globales .icon = Lucide-Outline (fill:none + stroke). Sterne
     gehören gefüllt — lokales Override statt globaler Klassen-
     Inflation (.icon--filled würde 5× pro Card am Markup hängen). */
  fill: currentColor;
  stroke: none;
}

/* ---------- Media (Poster + Play-Button + Wistia-Mount) ---------- */
.case-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
  isolation: isolate;
}

.case-card__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Filter dämpft den Wistia-Swatch leicht ab, damit der
     Play-Button immer kontrastreich obendrauf sitzt. */
  filter: brightness(0.85) saturate(0.96);
}

/* Wenn der Wistia-Player gemountet wurde, Poster + Play-Button
   ausblenden (JS setzt `data-mounted="true"` auf .case-card__media). */
.case-card__media[data-mounted="true"] .case-card__poster,
.case-card__media[data-mounted="true"] .case-card__play {
  display: none;
}

.case-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(56px, 7vw, 80px);
  height: clamp(56px, 7vw, 80px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(25, 41, 57, 0.92);
  /* Marie 2026-05-28: weißes Play-Icon statt Cyan, Ring/Schatten
     neutral (weiß-transparent) — kein Blau mehr auf der Kachel. */
  color: var(--white);
  cursor: pointer;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms ease,
    box-shadow 280ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 32px -6px rgba(var(--shadow-rgb), 0.55);
}

/* Sanfter Pulse-Ring um den Play-Button (nur auf der aktiven
   Karte, sonst zu unruhig im peripheren Blickfeld). */
.case-card[data-offset="0"] .case-card__play::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.45);
  animation: case-play-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes case-play-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(1.6); opacity: 0;    }
  100% { transform: scale(1.6); opacity: 0;    }
}

.case-card__play:hover,
.case-card__play:focus-visible {
  transform: scale(1.06);
  background: rgba(31, 52, 71, 0.98);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 14px 40px -6px rgba(var(--shadow-rgb), 0.6);
}

.case-card__play:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
}

.case-card__play-icon {
  width: 36%;
  height: 36%;
  /* Optisches Centering passiert über das Polygon selbst (Centroid
     links der Viewbox-Mitte) — kein zusätzlicher Margin-Shift. */
}

/* ---------- Body (Rating + Bullets + Meta) ---------- */
.case-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-small);
  color: var(--text-200);
  line-height: 1.5;
}

.case-card__bullets .icon {
  flex-shrink: 0;
  margin-top: 2px;
  /* Marie 2026-05-28: Häkchen weiß statt Cyan (überschreibt
     .icon--accent aus dem Markup) — einheitlich mit den Sternen. */
  color: var(--white);
}

.case-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--text-500);
}

.case-card__company {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--text-100);
  line-height: 1.3;
}

.case-card__person,
.case-card__location {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-300);
  line-height: 1.4;
}

.case-card__location .icon {
  color: var(--accent-hover);
}

/* ---------- Bühnen-Arrows (Prev/Next direkt an der aktiven Karte) ---------- */
.cases__arrow {
  --size: clamp(52px, 5.5vw, 64px);
  position: absolute;
  top: 50%;
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Weißer Fill, dunkles Chevron für Kontrast (Marie 2026-05-26). */
  background: var(--white);
  color: var(--surface-0);
  cursor: pointer;
  z-index: 10;
  transform: translateY(-50%);
  box-shadow:
    0 14px 36px -8px rgba(var(--shadow-rgb), 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 32px -12px rgba(255, 255, 255, 0.35);
  transition:
    background 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Position: arrows sitzen mit kleinem Gap direkt an der Kante
   der aktiven Karte. Card-Half-Width clamp(140, 28vw, 330) +
   8 px Gap → Arrow-Innenkante. */
.cases__arrow--prev {
  right: calc(50% + clamp(140px, 28vw, 330px) + 8px);
  left: auto;
}

.cases__arrow--next {
  left: calc(50% + clamp(140px, 28vw, 330px) + 8px);
  right: auto;
}

.cases__arrow .icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.6;
}

.cases__arrow:hover,
.cases__arrow:focus-visible {
  background: var(--white);
  color: var(--surface-0);
  box-shadow:
    0 16px 40px -8px rgba(var(--shadow-rgb), 0.7),
    0 0 0 2px rgba(255, 255, 255, 0.65),
    0 0 56px -10px rgba(255, 255, 255, 0.55);
  transform: translateY(-50%) scale(1.08);
}

.cases__arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.cases__arrow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---------- Pagination (nur Dots, mittig unter der Bühne) ---------- */
.cases__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nah an der Bühne — Dots dienen als unmittelbare Positions-
     Anzeige, kein optisches Distanz-Hop. */
  margin-top: clamp(8px, 1.4vw, 18px);
}

.cases__dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases__dots li {
  display: flex;
}

.cases__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  /* Marie 2026-05-28: kein langsames Breit-Ausfahren mehr — width
     ist aus der Transition raus, nur Farbe/Glow blenden weich. */
  transition:
    background 200ms ease,
    box-shadow 200ms ease;
}

.cases__dot:hover {
  background: rgba(255, 255, 255, 0.38);
}

.cases__dot[aria-current="true"] {
  /* Dezente kurze Cyan-Pille (Marie 2026-05-28) — sauberes Accent-
     Cyan, kurzer Glow, kein weißlicher Schein. */
  width: 20px;
  border-radius: var(--radius-full);
  background: var(--accent-hover);
  box-shadow: 0 0 10px -4px rgba(var(--glow-rgb), 0.55);
}

.cases__dot:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* ---------- Section-CTA (Brücke zur Beratung) ---------- */
.cases__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: clamp(48px, 6vw, 88px);
}

.cases__cta-bridge {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--text-200);
  text-wrap: balance;
  text-align: center;
}

/* .cases__cta erbt Signature-CTA-Specs aus .btn-accent-signature
   + .btn-lg (§1.8) — keine eigenen Styles nötig. */

/* ---------- Mobile (<768px): nur eine Karte sichtbar ---------- */
@media (max-width: 767px) {
  .cases__stage {
    /* Mobile-Fallback für No-JS. JS misst die Karte und setzt
       die Höhe exakt — siehe syncStageHeight() im Carousel-JS. */
    min-height: clamp(420px, 100vw, 600px);
    perspective: none;
  }

  /* Side-Cards komplett verstecken — kein 3D-Tilt auf Mobile,
     weil das die kleinen Touch-Targets zu fragil macht. */
  .case-card[data-offset="-1"],
  .case-card[data-offset="1"] {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.7);
    filter: none;
  }

  .case-card {
    width: min(100%, 420px);
  }

  .case-card__inner {
    padding: var(--space-4);
  }

  /* Arrows: an die Viewport-Kanten (calc-Position aus Desktop
     würde sie auf 320 px off-screen rutschen lassen). */
  /* ⚠ Gilt seit 2026-09-16 NICHT mehr für die Fächer-Fassung: dort
     stehen die Pfeile unter der Bühne, der Block „Pfeile UNTER die
     Bühne" am Dateiende überschreibt Größe und Position bei jeder
     Breite — seit dem Rollout desselben Tages auf allen fünf Seiten
     mit dem Fächer, nicht mehr nur auf der Startseite. */
  .cases__arrow {
    --size: 44px;
  }
  .cases__arrow--prev {
    left: 4px;
    right: auto;
  }
  .cases__arrow--next {
    right: 4px;
    left: auto;
  }
  .cases__arrow .icon {
    width: 22px;
    height: 22px;
  }
}

/* ---------- Reduced Motion: alles ruhig stellen ---------- */
@media (prefers-reduced-motion: reduce) {
  .case-card {
    transition: opacity 200ms ease;
  }
  .case-card[data-offset="-1"],
  .case-card[data-offset="1"] {
    /* Tilt und Blur weg — nur Opacity + leichte Scale-Reduktion
       bleiben als Tiefenhinweis. */
    transform: translate(-50%, -50%) scale(0.78);
    filter: none;
  }
  .case-card[data-offset="-1"] {
    transform: translate(calc(-50% - 60%), -50%) scale(0.78);
  }
  .case-card[data-offset="1"] {
    transform: translate(calc(-50% + 60%), -50%) scale(0.78);
  }
  .case-card[data-offset="0"] .case-card__play::before {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   Bilanz-Strip — wiederverwendbares 4-Spalten-Stats-Pattern
   ============================================================
   Sitzt aktuell innerhalb von Section 06 (zwischen Carousel-
   Dots und Conversion-CTA), kann aber überall im Markup
   verwendet werden, wo Bilanz-Zahlen gezeigt werden sollen.
   Display-Font italic, Silver-Cyan-Gradient (CI). Vertikale
   Hairlines zwischen den Items als Gradient-Lines (oben/unten
   ausgeblendet — wirken ruhiger als harte Rahmen). Mobile
   bricht in 2×2.
   ============================================================ */
.stats__grid {
  position: relative;
  display: grid;
  /* Desktop: 4 gleiche Spalten. */
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: clamp(32px, 4vw, 60px) 0 0;
  padding: 0;
  list-style: none;
  isolation: isolate;
}

/* Sanftes Cyan-Spotlight hinter dem Strip — gibt den Zahlen
   Aufmerksamkeit, ohne die Inhalte visuell zu überlagern. */
.stats__grid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 92vw);
  height: min(280px, 40vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--glow-rgb), 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.stats__item {
  position: relative;
  display: flex;
  /* DOM-Reihenfolge: dt → dd (semantisch korrekt). Visuelle
     Reihenfolge: dd (Zahl) oben, dt (Label) unten. */
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.6vw, 9px);
  padding: clamp(14px, 1.8vw, 26px) clamp(12px, 2vw, 24px);
  text-align: center;
  min-width: 0; /* erlaubt Schrumpfen, verhindert overflow */
}

/* Vertikale Hairlines zwischen den Items — Gradient-Linie, an
   den Enden ausgeblendet, wirkt ruhiger als ein durchgehender
   Border. */
.stats__item + .stats__item::before {
  content: '';
  position: absolute;
  top: 16%;
  left: 0;
  width: 1px;
  height: 68%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 35%,
    rgba(255, 255, 255, 0.14) 65%,
    transparent 100%
  );
  pointer-events: none;
}

/* ---------- Wert (große Zahl) ----------
   Marie 2026-05-26: gerade (nicht-italic) + Weiß statt Italic-
   Silver-Cyan-Gradient. Wirkt sachlicher, weniger dekorativ. */
.stats__value {
  margin: 0;
  /* Sans-Zähler (Marie 2026-08-25 P5, global): Montserrat-Bold. */
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: var(--weight-bold);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--white);
  /* tabular-nums hält die Ziffern beim Hochzählen auf gleicher
     Breite — sonst springt das Layout bei jedem Frame. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Label (klein, uppercase) ---------- */
.stats__label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-300);
  line-height: 1.3;
  text-wrap: balance;
}

/* ---------- Mobile/Tablet: 2 × 2 ---------- */
@media (max-width: 767px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hairlines anpassen: vertikal nur zwischen den beiden
     Spalten (Item 2 + 4), horizontal zwischen Reihe 1 + 2
     (Item 3 + 4). */
  .stats__item + .stats__item::before {
    display: none;
  }
  /* Vertikale Linie zwischen Spalte 1 und 2 (Items in geraden
     Positionen) */
  .stats__item:nth-child(2n)::before {
    content: '';
    position: absolute;
    top: 16%;
    left: 0;
    width: 1px;
    height: 68%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.14) 35%,
      rgba(255, 255, 255, 0.14) 65%,
      transparent 100%
    );
  }
  /* Horizontale Linie zwischen Reihe 1 und 2 (Items 3 + 4) */
  .stats__item:nth-child(n + 3)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    width: 76%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.14) 35%,
      rgba(255, 255, 255, 0.14) 65%,
      transparent 100%
    );
  }
}

/* Schmale Phones: Wert weiter verkleinern, damit der längste
   Wert „442.500+" (white-space: nowrap) in der ~140px-Spalte der
   2×2-Anordnung nicht seitlich ausbricht. */
@media (max-width: 420px) {
  .stats__value {
    font-size: clamp(1.4rem, 7.5vw, 2rem);
  }
}

/* Hinweis: Counter respektiert prefers-reduced-motion direkt im
   JS (statReduced-Flag setzt den End-Wert ohne rAF-Loop) — kein
   CSS-Override für die Bilanz-Zahlen nötig. */

/* ============================================================
   Section 09 — Andere Agenturen vs. Bese Media
   ============================================================
   Asymmetrische Comparison: linke Card entsättigt + leicht
   abgesenkt, rechte Card voll-Glas + Cyan-Top-Akzent + leicht
   angehoben. Hairline-Divider als 1-px Gradient zentriert
   zwischen den Cards (Desktop). Reveal-Cascade via
   [data-vs].is-revealed + nth-child-Delays.
   ============================================================ */
.vs {
  position: relative;
  padding-block: var(--section-py);
  isolation: isolate;
  /* `overflow: clip` (statt hidden) verhindert Horizontal-Scroll
     durch das negative inset des Aurora-Pseudo-Elements
     (.vs-card--us::after, inset: -30% -25%), ohne einen neuen
     Scroll-Container zu erzeugen → Sticky-Header bleiben intakt. */
  overflow: clip;
}

/* Sanftes Section-BG-Glow (statisch). Stärker als die simple
   Spotlight-Variante davor — driftet aber bewusst nicht, damit
   die Aurora hinter der Bese-Card als einziger Motion-Anker
   im Hintergrund sichtbar bleibt. */
.vs::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1200px, 96vw);
  height: min(560px, 70vw);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 60% 70% at 70% 50%, rgba(var(--glow-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 25% 55%, rgba(31, 52, 71, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.vs__container {
  position: relative;
  z-index: 1;
}

/* ---------- Headline — bewusst größer und mit mehr Drama ----------
   Boost über das globale section-header__title hinaus. Erste
   Zeile fett-anziehend (mit Italic-Akzent „Handwerk"), zweite
   Zeile editorial-gedimmt. */
.vs__title {
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 18ch;
  /* §5a-Pattern: Auto-Hyphenation produzierte in der „Gegen die
     Großen"-Variante mid-word-Trennungen („Vor-teil") — manual +
     nbsp im Markup, overflow-wrap bleibt als 320px-Safety. */
  hyphens: manual;
}

.vs__title-second {
  /* Zweite Zeile erbt Display-Font und Weiß-Ton (text-100) vom
     h2 — kein eigenes color-Override, sonst wirkt sie ausgegraut.
     Inline-block bleibt für sauberes Line-Wrapping mit dem
     vorausgehenden <br>. */
  display: inline-block;
}

/* .vs__title em erbt den Silver-Cyan-Gradient + §1.6-Padding
   aus der globalen h2 em-Regel — kein eigener Override nötig. */

/* Intro-Prosa unter der VS-Headline (nur die „Gegen die Großen"-
   Variante auf der Schädlingsbekämpfung-Seite nutzt sie; die
   Original-Agenturen-Sektion hat keinen Intro-Text). Ruhige,
   zentrierte Lesespalte im Section-Header-Rhythmus. */
.vs__intro {
  max-width: 68ch;
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--text-200);
}

/* ---------- Grid: 2 Cards + zentraler Vs-Anker mit 3D-Perspektive ---------- */
.vs__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
  margin-bottom: clamp(48px, 6vw, 88px);
  /* 3D-Stage: Karten kippen einander zugewandt (rotateY).
     Perspective steht hier am Grid, damit beide Cards von der
     gleichen virtuellen Kamera aus gesehen werden. */
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

/* ---------- Vertikaler „vs."-Typo-Anker (Desktop) ---------- */
/* Editorial Anker zwischen den Karten: Cyan-Italic „vs." in
   Display-Font, flankiert von zwei vertikalen Cyan-Hairlines.
   Kein Badge-Ring, kein Esports-Stempel — premium typografisch.
   Mobile wird das Element via CSS-Override ausgeblendet
   (siehe @media unten). */
.vs__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 28px);
  position: relative;
  align-self: stretch;
  padding-block: clamp(20px, 3vw, 40px);
  z-index: 2;
}

.vs__mark-line {
  flex: 1 1 auto;
  width: 1px;
  /* Silver-blue Hairlines (statt cyan) — der Vs-Anker bekommt
     seine Aufmerksamkeit über das Italic-„vs."-Typo, nicht über
     blaues Glow. */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(179, 204, 223, 0.4) 60%,
    rgba(179, 204, 223, 0.55) 100%
  );
  min-height: 32px;
}

.vs__mark-line--bottom {
  background: linear-gradient(
    to bottom,
    rgba(179, 204, 223, 0.55) 0%,
    rgba(179, 204, 223, 0.4) 40%,
    transparent 100%
  );
}

.vs__mark-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* §1.6 — Inline-Buffer gegen Italic-Glyph-Clipping. */
  padding-inline: 0.12em;
  margin-inline: -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* Sanfter Pulse für Aufmerksamkeit. Kein Layout-Reflow —
     opacity ist GPU-cheap. */
  animation: vs-mark-pulse 3.6s ease-in-out infinite;
}

@keyframes vs-mark-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1;    }
}

/* ---------- Card-Basis ---------- */
.vs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px);
  border-radius: var(--radius-xl);
  /* 3D-Compositing-Hint — verhindert Flackern beim rotateY,
     gibt der GPU eine eigene Layer pro Card. */
  transform-style: preserve-3d;
  will-change: transform, opacity;
  /* Maus-Tilt-Variablen: werden vom Cursor-Tracker am Body-Ende
     gesetzt (--mx/-my in [-1, +1] über die Card-Fläche). CSS
     rechnet daraus die zusätzliche Rotation. Default 0 → Card
     bleibt in ihrer Base-Position. */
  --mx: 0;
  --my: 0;
  --tilt-max: 7deg;
  /* Reveal-Initial-State: Cards sind unsichtbar, JS toggelt
     .is-revealed auf der Section, dann fadet sie über CSS ein. */
  opacity: 0;
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Während Maus über der Card → schneller transitionen, damit
   die Drehung dem Cursor flüssig folgt. Sobald die Maus die
   Card verlässt, schaltet JS die Klasse mit einer kurzen
   Verzögerung wieder ab — der Rück-Snap erbt dann den langen
   Reveal-Transition wieder.
   WICHTIG: opacity-Transition explizit mit-aufgeführt, sonst
   würde der Shorthand opacity auf 0 s zurücksetzen → wenn der
   User vor dem Reveal mit der Maus über eine Card streift,
   würde der Fade-In abrupt springen statt sauber einzublenden. */
.vs-card.is-tilting {
  transition:
    transform 140ms ease-out,
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ---------- Linke Card (Andere Agenturen) ----------
   Bewusste Abweichung von --glass-bg: entsättigte Gradient-
   Variante (60/55/75 % Alpha) auf CI-Surface-Tokens, damit die
   Others-Card visuell „leichter" wirkt als die Bese-Card.
   Material-Asymmetrie + 3D-Tilt (rotateY-Tilt zur Mitte hin)
   ist der Premium-Trick statt Glow-Spam
   (handwerk-web-designer-Konzept, 2026-05-22). */
.vs-card--others {
  background: linear-gradient(
    160deg,
    rgba(25, 41, 57, 0.4) 0%,
    rgba(19, 31, 43, 0.55) 60%,
    rgba(12, 20, 28, 0.75) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 16px 32px -16px rgba(var(--shadow-rgb), 0.5);
  transform-origin: right center;
  /* Initial: leicht abgesenkt, zurückgesetzt, nach rechts (zur
     Mitte) gekippt — wie ein Buch, das nach innen aufgeschlagen
     ist. */
  transform: translateY(16px) scale(0.97) rotateY(-4deg);
}

/* Reveal: Others fadet zuerst, nur bis 0.82 opacity (entsättigter
   Final-State, nicht voll opaque — visualisiert „weniger Gewicht").
   Transform-Formel addiert die Maus-Werte ON TOP der Basis-Rotation. */
[data-vs].is-revealed .vs-card--others {
  opacity: 0.82;
  transform:
    translateY(0)
    scale(0.97)
    rotateY(calc(-4deg + var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition-delay: 0ms;
}

/* ---------- Rechte Card (Bese Media) ---------- */
.vs-card--us {
  background: linear-gradient(
    160deg,
    rgba(31, 52, 71, 0.55) 0%,
    rgba(19, 31, 43, 0.65) 50%,
    rgba(12, 20, 28, 0.85) 100%
  );
  border: 1px solid rgba(var(--glow-rgb), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(var(--glow-rgb), 0.14),
    0 28px 56px -18px rgba(var(--shadow-rgb), 0.6),
    0 0 80px -16px rgba(var(--glow-rgb), 0.38);
  transform-origin: left center;
  /* Asymmetrie: leicht angehoben + nach links (zur Mitte)
     gekippt — facing the Others-Card. */
  transform: translateY(-8px) rotateY(4deg);
}

/* Silberner Top-Akzent (1-px Gradient-Strip am oberen Card-Rand).
   Bewusst nicht cyan — die Aufmerksamkeit auf der Bese-Card
   entsteht über Material + Aurora + Asymmetrie, nicht über
   eine harte blaue Linie. Silver-blue bleibt CI-konform. */
.vs-card--us::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--silver-blue) 50%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0.7;
}

/* Subtile Aurora hinter der Bese-Card. Kombination aus Silver
   (warm, hell) + leicht Cyan (Brand-Touch) statt vollem Cyan-
   Strahler — wirkt edler und reduziert „in-your-face blau".
   Drift läuft sehr langsam (12 s, große Easing), wird per
   IO-Hook (.is-revealed) zur Laufzeit gestartet. Inset
   bewusst eingegrenzt (vs. früherer -30% -25%), damit das
   Pseudo-Element nicht außerhalb des `overflow: clip` der
   Section sichtbar wird. */
.vs-card--us::after {
  content: '';
  position: absolute;
  inset: -25% -20% -25% -20%;
  background: radial-gradient(
    ellipse 60% 70% at 50% 50%,
    rgba(179, 204, 223, 0.12) 0%,
    rgba(var(--glow-rgb), 0.06) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: vs-aurora-drift 12s ease-in-out infinite;
  animation-play-state: paused;
}

[data-vs].is-revealed .vs-card--us::after {
  animation-play-state: running;
}

@keyframes vs-aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.85; }
  50%      { transform: translate(-2%, 2%) scale(1.08); opacity: 1; }
}

/* Reveal: Bese folgt mit Versatz und volle Opacity. Transform-
   Formel addiert die Maus-Werte ON TOP der Basis-Rotation. */
[data-vs].is-revealed .vs-card--us {
  opacity: 1;
  transform:
    translateY(-8px)
    rotateY(calc(4deg + var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition-delay: 300ms;
}

/* ---------- Card-Header ---------- */
.vs-card__head {
  padding-bottom: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--text-500);
  text-align: center;
}

.vs-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-200);
  line-height: 1;
}

.vs-card--us .vs-card__title {
  color: var(--accent-hover);
}

/* ---------- Bullet-Liste ---------- */
.vs-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 18px);
}

.vs-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 16px);
  padding: 4px 8px 4px 4px;
  margin-inline: -4px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--text-100);
  /* Stagger-Initial-State: Items sind unsichtbar + 8 px y. */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 480ms ease-out,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms ease-out;
}

/* ---------- Strikethrough-Sweep auf Negativ-Items ----------
   Beim Reveal wischt eine silberne Hairline horizontal durch
   den Text — das ist die dramatischste Aussage der Section
   („was andere nicht liefern → wir schon"). Inspiriert von
   Fullstack/Apple-Keynote-Pattern, ohne Esports-Niveau. */
.vs-item--negative .vs-item__text {
  position: relative;
  /* `display: block` (statt inline-block) — Item-Layout ist
     Flex-Row, der Text-Span darf die volle Restbreite einnehmen.
     Bei mehrzeiligen Bullets sitzt der Strich dann auf der
     geometrischen Mitte des Block-Layouts statt zwischen den
     Zeilen zu „kleben". */
  display: block;
}

.vs-item--negative .vs-item__text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 12%,
    rgba(255, 255, 255, 0.55) 88%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-vs].is-revealed .vs-item--negative .vs-item__text::after {
  transform: scaleX(1);
}

/* Stagger-Delays für die Strikethrough-Sweeps. Synchronisiert
   sich mit dem Item-Fade-Stagger (200 ms versetzt, damit das
   Item zuerst sichtbar ist, dann durchgestrichen wird). */
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(1) .vs-item__text::after { transition-delay: 320ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(2) .vs-item__text::after { transition-delay: 400ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(3) .vs-item__text::after { transition-delay: 480ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(4) .vs-item__text::after { transition-delay: 560ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(5) .vs-item__text::after { transition-delay: 640ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(6) .vs-item__text::after { transition-delay: 720ms; }

/* Hover-Glow nur auf den Positiv-Items — visualisiert
   Interaktionsbereitschaft + „Bese-Seite ist lebendig". Cyan
   erscheint hier erst auf Hover (statt permanent als Icon-Fill),
   das macht das Cyan zu einem Belohnungs-Moment statt zu einem
   Hintergrundrauschen. */
.vs-item--positive:hover {
  background: rgba(var(--glow-rgb), 0.06);
}

.vs-item--positive:hover .vs-item__icon {
  background: rgba(var(--glow-rgb), 0.22);
  border-color: rgba(var(--glow-rgb), 0.55);
  color: var(--accent-hover);
  box-shadow: 0 0 18px -4px rgba(var(--glow-rgb), 0.55);
}

/* Stagger: nth-child schaltet pro Item den Delay weiter.
   Basis-Delay je Karte:
     Others: 200 ms (startet kurz nach der Card)
     Us:     500 ms (startet kurz nach der Us-Card)
   Schritt: 80 ms pro Item. */
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(1) { transition-delay: 200ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(2) { transition-delay: 280ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(3) { transition-delay: 360ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(4) { transition-delay: 440ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(5) { transition-delay: 520ms; }
[data-vs].is-revealed .vs-card--others .vs-item:nth-child(6) { transition-delay: 600ms; }

[data-vs].is-revealed .vs-card--us .vs-item:nth-child(1) { transition-delay: 500ms; }
[data-vs].is-revealed .vs-card--us .vs-item:nth-child(2) { transition-delay: 580ms; }
[data-vs].is-revealed .vs-card--us .vs-item:nth-child(3) { transition-delay: 660ms; }
[data-vs].is-revealed .vs-card--us .vs-item:nth-child(4) { transition-delay: 740ms; }
[data-vs].is-revealed .vs-card--us .vs-item:nth-child(5) { transition-delay: 820ms; }
[data-vs].is-revealed .vs-card--us .vs-item:nth-child(6) { transition-delay: 900ms; }

[data-vs].is-revealed .vs-item {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Icon-Wrapper (Kreis um X / Check) ---------- */
.vs-item__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background 240ms ease,
    border-color 240ms ease,
    color 240ms ease,
    box-shadow 240ms ease,
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vs-item--negative .vs-item__icon {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-300);
}

.vs-item--positive .vs-item__icon {
  /* Default: silbern-leuchtend statt cyan-gefüllt. Cyan kommt
     erst auf Hover (siehe :hover-Regel). So bleibt das Cyan-
     Reservoir der Section beim VS-Anker + dem CTA-Button,
     wo es Aufmerksamkeit erzeugt — und überlädt nicht die
     einzelnen Bullet-Items. */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(179, 204, 223, 0.35);
  color: var(--silver-blue);
  /* Pop-In Initial: stark zusammengezogen + unsichtbar. Nach
     Reveal springt das Icon mit leichtem Overshoot in seine
     Form — cubic-bezier(0.34, 1.56, 0.64, 1) gibt den „Bing!" -
     Effekt, ohne Schmunzler-Niveau zu erreichen. */
  transform: scale(0.4);
  opacity: 0;
}

[data-vs].is-revealed .vs-item--positive .vs-item__icon {
  transform: scale(1);
  opacity: 1;
}

.vs-item--negative .vs-item__text {
  color: var(--text-300);
}

/* ---------- Section-CTA ---------- */
.vs__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* .vs__cta erbt Signature-Specs aus .btn-accent-signature
   + .btn-lg (§1.8) — keine eigenen Styles nötig. */

/* ---------- Mobile (<960px): Cards stapeln, vs-Anker weg ---------- */
@media (max-width: 959px) {
  .vs__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 44px);
    /* Kein 3D auf Mobile — die getilteten Karten würden
       übereinander gestapelt unschön scheren. */
    perspective: none;
  }

  /* Vs-Anker (vertikales „vs.") nur auf Desktop. Auf Mobile
     übernimmt der Cyan-Dot zwischen den Karten die Aufgabe. */
  .vs__mark {
    display: none;
  }

  /* Cyan-Dot-Separator zwischen den beiden gestapelten Cards.
     Sitzt absolut unter der Others-Card, leicht herausragend. */
  .vs-card--others::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * clamp(28px, 6vw, 44px) / 2);
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-hover);
    transform: translate(-50%, 50%);
    box-shadow: 0 0 18px -2px rgba(var(--glow-rgb), 0.7);
    z-index: 2;
  }

  /* Mobile-Asymmetrie zurücknehmen — beide Karten gerade stehen,
     keine Tilts (kein 3D, kein Maus-Tracking auf Touch). Reveal-
     States überschreiben dasselbe Set. */
  .vs-card--others,
  [data-vs].is-revealed .vs-card--others,
  .vs-card--us,
  [data-vs].is-revealed .vs-card--us {
    transform: none;
    --mx: 0;
    --my: 0;
  }
}

/* ============================================================
   Section 10 — KI-Auftragsgewinnung
   ============================================================
   Zweispaltiges Split-Layout, rechts ein animiertes Venn-
   Diagramm: drei überlappende Silver-Blue-Outline-Kreise pulsen
   versetzt (Outline-Helligkeit + minimale Skalierung), über
   jedem Kreis wandert ein helles Silver-White-Highlight-Segment
   (Comet-Trail via stroke-dasharray + dashoffset) in eigener
   Dauer + Richtung. Ein Cyan-Radial-Glow atmet aus dem Triple-
   Intersection heraus und das Bese-Logo darüber atmet auf
   eigenem Takt mit. Cyan-Akzent bewusst nur im Center-Glow
   (Marie-Feedback 2026-05-22). Auf Mobile stapelt sich der
   Layout (Content oben, Visual unten).
   ============================================================ */
.ki {
  position: relative;
  /* Auftragsgewinnung + Mitarbeitergewinnung gehoeren thematisch zusammen:
     bewusst engerer Abstand zur folgenden .recruit-Section (halber Rhythmus). */
  padding-block: var(--section-py) var(--section-py-tight);
  isolation: isolate;
}

/* Section-Background-Glow: bewusst sehr leise — das Venn-Diagramm
   bringt seinen eigenen Center-Glow mit, der den Cyan-Akzent
   trägt. Wäre der Section-Glow zu stark, würde die ganze rechte
   Hälfte cyan-überzogen wirken (Marie-Feedback 2026-05-22). */
.ki::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: min(700px, 60vw);
  height: min(560px, 60vw);
  transform: translate(20%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--glow-rgb), 0.04) 0%,
    rgba(31, 52, 71, 0.10) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

.ki__container {
  position: relative;
  z-index: 1;
}

.ki__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ---------- Linke Spalte: Content ---------- */
.ki__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}


/* H2 nimmt die CI-Standard-Größe (--text-h2 = clamp(1.65rem,
   5.6vw, 4rem)) aus der globalen h2-Regel. Hier nur Layout-
   Constraints. Max-Width auf 28ch + hyphens: manual: der
   natürliche Umbruch landet nach „datenbasierte", „Auf-
   tragsgewinnung" bleibt als Wort intakt und „für deinen
   Betrieb" hängt an Zeile 2 / 3 — analog zum Original-
   Screenshot. §5a-Pattern (lokaler hyphens-Override) wie schon
   in Section 03 angewandt, damit lange Komposita nicht
   mid-word abgehackt werden. */
.ki__title {
  margin: 0;
  max-width: 28ch;
  line-height: 1.1;
  hyphens: manual;
}

/* .ki__title em erbt Italic-Silver-Cyan-Gradient + §1.6-
   Padding aus der globalen h2 em-Regel — kein Override nötig. */

.ki__body {
  margin: 0;
  font-size: var(--text-lead);
  color: var(--text-200);
  line-height: 1.7;
  max-width: 56ch;
}

.ki__body strong {
  color: var(--text-100);
  font-weight: var(--weight-semibold);
}

/* Layout-Hook für den KI-CTA. Optik kommt vollständig aus
   .btn + .btn-outline (CI §08). */
.ki__cta {
  align-self: flex-start;
}

/* ---------- Rechte Spalte: Venn-Diagramm ---------- */
.ki__visual {
  position: relative;
  width: 100%;
  /* Größer als Standard, damit das Diagramm die rechte Spalte
     visuell trägt (Marie-Feedback 2026-05-22). */
  max-width: 720px;
  margin-inline: auto;
  aspect-ratio: 640 / 600;
}

.ki-venn {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Eigene Compositing-Layer: das SVG trägt 8 parallel laufende
     Stroke-/Transform-Animationen (3× Pulse + 3× Trace + Glow +
     Logo-Pulse). will-change hebt den ganzen Layer auf die GPU,
     der Browser muss nicht pro Frame rastern. */
  will-change: transform;
}

/* Cyan-Center-Glow Gradient-Stops: CI-Token statt hardcoded
   rgba — falls --accent-hover in der digital-ci jemals
   nachjustiert wird, zieht der Glow automatisch mit. */
.ki-venn__grad-stop {
  stop-color: var(--accent-hover);
}
.ki-venn__grad-stop--inner { stop-opacity: 0.40; }
.ki-venn__grad-stop--mid   { stop-opacity: 0.10; }
.ki-venn__grad-stop--outer { stop-opacity: 0;    }

/* Äußere Halo (weiche, große Cyan-Wolke → Tiefe). */
.ki-halo-stop { stop-color: var(--accent-hover); }
.ki-halo-stop--in  { stop-opacity: 0.22; }
.ki-halo-stop--mid { stop-opacity: 0.07; }
.ki-halo-stop--out { stop-opacity: 0;    }

/* Heller Kern hinter dem Logo: weiß-Zentrum → Cyan → transparent.
   Das ist der „stärkere" Center, den Marie wollte (2026-05-28). */
/* Kern komplett weiß + weicher Verlauf → diffuser, ausgeblurter
   Glühpunkt hinter dem Logo (Marie 2026-05-28: weiß statt blau,
   etwas mehr ausgeblurrt). */
.ki-core-stop      { stop-color: var(--text-100); }
.ki-core-stop--in  { stop-opacity: 0.55; }
.ki-core-stop--mid { stop-opacity: 0.18; }
.ki-core-stop--out { stop-opacity: 0;    }

/* Kreis-Basis: nahezu transparente Füllung + dezente Silver-
   Blue-Outline (NICHT cyan, sonst wirkt das ganze Diagramm
   überzogen — Marie-Feedback 2026-05-22). Jeder Kreis bekommt
   eine eigene Pulse-Animation mit Versatz.
   transform-box: fill-box → transform-origin bezieht sich auf
   die Bounding-Box des Circle-Elements selbst (also den Kreis-
   Mittelpunkt). Ohne fill-box würde Chrome (0, 0) der Viewbox
   nehmen — Scale würde dann visuell unkontrolliert wandern. */
.ki-venn__circle {
  fill: rgba(179, 204, 223, 0.035);
  stroke: rgba(214, 230, 245, 0.55);
  stroke-width: 1.25;
  transform-box: fill-box;
  transform-origin: center;
  /* Animationen sind initial paused, .is-revealed startet
     sie (siehe IntersectionObserver-Hook am Body-Ende). */
  animation: ki-venn-pulse 4.2s ease-in-out infinite;
  animation-play-state: paused;
}

/* Per-Kreis Animation-Delays (negative Werte → Phase-Shift, so
   starten die drei Kreise zueinander versetzt, ohne dass auf
   den ersten kompletten Zyklus gewartet werden muss). */
.ki-venn__circle--ki   { animation-delay: 0s;    }
.ki-venn__circle--geo  { animation-delay: -1.4s; }
.ki-venn__circle--call { animation-delay: -2.8s; }

/* Pulse-Animation bewusst minimal: Outline-Helligkeit + sehr
   leichte Skalierung. Kein Fill-Wechsel mehr (wäre cyan-overload). */
@keyframes ki-venn-pulse {
  0%, 100% {
    stroke-opacity: 0.45;
    transform: scale(1);
  }
  50% {
    stroke-opacity: 0.80;
    transform: scale(1.014);
  }
}

/* Spitz auslaufender Lichtstreifen pro Kreis (Marie 2026-05-28).
   Bewegung = Rotation der ganzen Gruppe um den Kreis-Mittelpunkt
   (transform-origin pro Kreis), während die Glow-/Core-Pfade
   statisch am Kreis-Scheitel sitzen. */
.ki-venn__trace {
  transform-box: view-box;
  /* Leichter Blur auf der ganzen Gruppe → macht die Kanten der
     Füllflächen zusätzlich weich (Marie 2026-05-28). */
  filter: url(#ki-soft-glow);
  animation-name: ki-venn-trace-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.ki-venn__trace--ki   { transform-origin: 320px 208px; animation-duration: 7s; }
.ki-venn__trace--geo  { transform-origin: 400px 346px; animation-duration: 9s; animation-direction: reverse; }
.ki-venn__trace--call { transform-origin: 240px 346px; animation-duration: 8s; }

@keyframes ki-venn-trace-spin {
  to { transform: rotate(360deg); }
}

/* Geometrisch tapernde Füllflächen (kein Stroke, keine Stufen):
   die breitere Cyan-Glow-Fläche gibt das Scheinen, der schmalere
   weiße Kern liegt darüber. Beide laufen an den Enden stufenlos
   auf eine Spitze zu. Der leichte Gruppen-Blur (siehe
   .ki-venn__trace) macht die Kanten zusätzlich weich. */
.ki-venn__trace-glow {
  fill: var(--accent-hover);
  opacity: 0.45;
}
.ki-venn__trace-core {
  fill: var(--text-100);
  opacity: 0.95;
}

/* Labels: weiß-transparent, dezent. Sitzen INSIDE den jeweiligen
   Kreisen im nicht-überlappenden Außenbereich. */
.ki-venn__label {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  fill: var(--text-200);
}

/* Mehrschichtiger Center-Glow für Tiefe + Stärke-Variation
   (Marie 2026-05-28: das Center-Element darf viel mehr
   Dimensionen haben). Drei Layer atmen auf eigenen, leicht
   versetzten Takten: weiche Halo (6.5s) → mittlerer Glow
   (5.2s) → heller Kern (3.6s). transform-box: fill-box →
   Skalierung um den jeweiligen Circle-Mittelpunkt (320,300).
   mix-blend-mode: screen → additives Licht auf dunklem BG. */
.ki-venn__halo,
.ki-venn__pulse,
.ki-venn__core {
  transform-box: fill-box;
  transform-origin: center;
  animation-play-state: paused;
  mix-blend-mode: screen;
}

.ki-venn__halo { animation: ki-venn-halo 6.5s ease-in-out infinite; }
.ki-venn__pulse { animation: ki-venn-glow 5.2s ease-in-out infinite; }
.ki-venn__core  { animation: ki-venn-core 3.6s ease-in-out infinite; }

@keyframes ki-venn-halo {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 0.95; }
}
@keyframes ki-venn-glow {
  0%, 100% { transform: scale(0.80); opacity: 0.35; }
  50%      { transform: scale(1.05); opacity: 0.65; }
}
@keyframes ki-venn-core {
  0%, 100% { transform: scale(0.82); opacity: 0.70; }
  50%      { transform: scale(1.04); opacity: 1;    }
}

/* Bese-Logo im Center: dreischichtige Group-Struktur.
   - .ki-venn__logo-anchor (Attribut translate 320,300) →
     verschiebt die lokale Ursprungs-Position auf den Triple-
     Intersection-Punkt.
   - .ki-venn__logo-spin (CSS-Animation) → langsame Pulse-
     Bewegung um (0, 0) der Anchor-Group, also genau um den
     Logo-Mittelpunkt. (Klassen-Name historisch — die Animation
     pulsiert mittlerweile, statt zu rotieren.)
   - .ki-venn__logo-offset (Attribut translate -38,-42) →
     zentriert das 76 × 84 user-units große Logo (Bbox-Halbbreite
     38, Bbox-Halbhöhe 42) auf (0,0) der Spin-Group. Die Pflicht-
     Größen sitzen auf den <use>-Elementen, sonst würde das
     Symbol-viewBox auf 100 % × 100 % des äußeren SVG gestreckt.
   CSS-Transform sitzt ausschließlich auf der Spin-Group, ohne
   Markup-Transforms zu überschreiben. */
.ki-venn__logo-spin {
  animation: ki-venn-logo-pulse 4.4s ease-in-out infinite;
  animation-play-state: paused;
  /* Cyan-Drop-Shadow gibt dem Logo Tiefe + Stärke (Marie
     2026-05-28). color-mix bleibt CI-Token-konform (Alpha
     auf --accent-hover statt hardcoded rgba). */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-hover) 55%, transparent));
}

/* Logo atmet auf eigenem 4.4-s-Takt, Center-Glow auf 5.2 s →
   bewusst leicht phasenverschoben, ergibt eine lebendigere
   Komposition als ein gemeinsamer Takt. */
@keyframes ki-venn-logo-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1;    }
}

/* Logo-Fill bewusst weiß (NICHT cyan) — siehe Marie-Feedback
   2026-05-22. Der Cyan-Akzent kommt ausschließlich aus dem
   Center-Glow hinter dem Logo. */
.ki-venn__logo-p {
  fill: var(--text-100);
  transition: fill 240ms ease;
}

/* Trigger: data-ki + .is-revealed startet alle Animationen. */
.ki.is-revealed .ki-venn__circle,
.ki.is-revealed .ki-venn__trace,
.ki.is-revealed .ki-venn__halo,
.ki.is-revealed .ki-venn__pulse,
.ki.is-revealed .ki-venn__core,
.ki.is-revealed .ki-venn__logo-spin {
  animation-play-state: running;
}

/* ---------- Mobile (<960px): Spalten stapeln ---------- */
@media (max-width: 959px) {
  .ki__grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 64px);
  }

  .ki__visual {
    max-width: 480px;
  }

  .ki__title {
    max-width: 22ch;
  }
}

/* ---------- Reduced Motion: Section 10 — Venn-Animationen stoppen ---------- */
@media (prefers-reduced-motion: reduce) {
  .ki-venn__circle,
  .ki-venn__trace,
  .ki-venn__halo,
  .ki-venn__pulse,
  .ki-venn__core,
  .ki-venn__logo-spin {
    animation: none !important;
  }
  /* Static End-State: das Diagramm bleibt als ruhiges Ornament
     stehen (Glow + spitze Lichtstreifen sichtbar), nur ohne
     Wanderung. Die Trace-Schichten bleiben über ihren statischen
     stroke-dashoffset zentriert sichtbar. */
  .ki-venn__circle { stroke-opacity: 0.6; }
  .ki-venn__halo   { opacity: 0.55; }
  .ki-venn__pulse  { opacity: 0.40; }
  .ki-venn__core   { opacity: 0.85; }
}

/* ---------- Reduced Motion: Section 09 — VS-Cards (Reveal/Drift) ---------- */
@media (prefers-reduced-motion: reduce) {
  .vs-card,
  .vs-item,
  .vs-item__icon {
    transition: none !important;
    opacity: 1 !important;
  }
  .vs-item,
  .vs-item__icon {
    transform: none !important;
  }
  /* Asymmetrie + 3D-Tilt aber beibehalten — das ist Layout-
     Aussage, keine Animation, und ein visueller Anker. WICHTIG:
     KEIN translateY-Versatz in Reduced-Motion. Der Versatz ist
     bei der normalen Reveal-Cascade nur Initial-State und wird
     auf 0 abgeräumt; ohne Reveal-Animation würde die Karte
     sonst dauerhaft abgesackt erscheinen.
     Maus-Tilt (--mx/--my) wird hier ebenfalls eingefroren, damit
     auch bei prefers-reduced-motion keine Cursor-getriebenen
     Bewegungen entstehen. */
  .vs-card {
    --mx: 0 !important;
    --my: 0 !important;
  }
  .vs-card--others {
    transform: scale(0.97) rotateY(-4deg) !important;
    opacity: 0.82 !important;
  }
  .vs-card--us {
    transform: rotateY(4deg) !important;
  }
  /* Aurora-Drift + Vs-Mark-Pulse stoppen. */
  .vs-card--us::after,
  .vs__mark-text {
    animation: none !important;
  }
  /* Strikethrough auf Negativ-Items direkt im End-State zeigen
     — ohne Reveal-Animation würde der Strich sonst dauerhaft
     bei scaleX(0) bleiben und nie sichtbar werden. */
  .vs-item--negative .vs-item__text::after {
    transition: none !important;
    transform: scaleX(1) !important;
  }
}

/* ============================================================
   Section 11 — Mitarbeitergewinnung
   ============================================================
   Layout-Spiegel zu Section 10: Animation LINKS, Content RECHTS
   (Grid-Reihenfolge umgedreht). Cinematic-Spotlight-Animation:
     - Fünf Berufs-Silhouetten-Avatare in einer Reihe
     - Lupe pendelt sanft horizontal um den Match-Avatar
       (mittig, Handwerker mit Helm)
     - Match-Avatar trägt einen Cyan-Halo + Check-Badge +
       kontinuierlich aussendenden Pulse-Ring
     - Non-Match-Avatare leicht zurückgenommen (silver-blue,
       dezent), bleiben aber sichtbar
   IO-Trigger setzt .is-revealed → CSS startet alle paused
   Animationen. Cyan-Akzent bewusst nur auf Match + Halo +
   Badge + Pulse-Ring (Marie-Pattern von Section 10 bestätigt).
   ============================================================ */
.recruit {
  position: relative;
  /* Gegenstueck zu .ki: enger Abstand nach oben, Standard nach unten. */
  padding-block: var(--section-py-tight) var(--section-py);
  isolation: isolate;
}

/* Section-Background-Glow: spiegelbildlich zu .ki::before (dort
   rechts), hier links — die Animation lebt links und braucht
   den dezenten Cyan-Glow als atmosphärischen Rahmen. */
.recruit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: min(700px, 60vw);
  height: min(560px, 60vw);
  transform: translate(-20%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--glow-rgb), 0.04) 0%,
    rgba(31, 52, 71, 0.10) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

.recruit__container {
  position: relative;
  z-index: 1;
}

/* Grid-Layout: Visual links, Copy rechts.
   Auf Mobile (<960 px) stapelt sich's: Copy ZUERST, Funnel-Visual
   darunter — Marie 2026-05-27: Animation kommt unter den Text,
   damit erst Kontext, dann Visualisierung gelesen wird. */
.recruit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ---------- Rechte Spalte: Content ---------- */
.recruit__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}


/* H2 nimmt die CI-Standard-Größe aus der globalen h2-Regel.
   hyphens: manual + max-width 24ch: „Top-Fachkräfte" + „Fach-
   kräftemangel" sind kritisch lange Komposita, die der Browser
   mid-word brechen würde (§5a-Pattern wie in Section 03/10). */
.recruit__title {
  margin: 0;
  max-width: 24ch;
  line-height: 1.1;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* .recruit__title em erbt Italic-Silver-Cyan-Gradient + §1.6-
   Padding aus der globalen h2 em-Regel — kein Override nötig. */

.recruit__body {
  margin: 0;
  font-size: var(--text-lead);
  color: var(--text-200);
  line-height: 1.7;
  max-width: 56ch;
}

.recruit__body + .recruit__body {
  margin-top: calc(-1 * clamp(8px, 1vw, 12px));
}

/* Layout-Hook für den Recruit-CTA. Optik kommt vollständig aus
   .btn + .btn-outline (CI §08). */
.recruit__cta {
  align-self: flex-start;
}

/* ---------- Linke Spalte: Talent-Funnel-Pipeline (Simple) ---------- */
.recruit__visual {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

/* Funnel = drei vertikale Zonen mit universellen Mensch-Silhouetten:
   (1) Pool oben — 20 Person-Icons in 5×4-Grid, gentle idle-pulse
       (Periode --p individuell pro Icon).
   (2) Funnel Mitte — Trichter-SVG, dashed Cyan-Edge wandert. Vier
       Person-Icons "regnen" in versetzten Cycles durch den Trichter:
       zwei fallen ganz durch (pass), zwei werden seitlich aus-
       sortiert (reject) mit dezentem X-Badge.
   (3) Matches unten — drei große Person-Icons mit Cyan-Halo-Glow
       und Check-Badge als die Gefundenen.
   Animationen sind initial paused / via transition-delay verzögert.
   IO-Trigger setzt .is-revealed → CSS startet alles. */
.funnel {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(10px, 1.6vw, 16px);
  isolation: isolate;
}

.funnel__stage {
  position: relative;
}

/* ===== POOL — eingehende Bewerbungen ===== */
.funnel__stage--pool {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vw, 14px);
}

/* Plain Text-Label mit Cyan-Dot — keine Pille, keine Umrandung. */
.funnel__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--text-300);
  font-family: var(--font-ui);
  font-size: clamp(10px, 0.95vw, 11px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.funnel__label-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--glow-rgb), 0.18);
  animation: funnel-dot-pulse 2.4s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes funnel-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.72); opacity: 0.62; }
}

/* Pool-Grid: 5×4 = 20 Person-Icons. §5a-Pattern: --i, --p als CSS-
   Custom-Properties (reine Animations-Parameter, kein Sizing). */
.funnel__pool {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1.2vw, 10px);
  justify-items: center;
}

.funnel__person {
  position: relative;
  width: clamp(18px, 2.6vw, 24px);
  aspect-ratio: 1;
  display: block;
  color: rgba(255, 255, 255, 0.55);
  /* Reveal: scale 0.6 → 1, opacity 0 → 1, stagger via --i */
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 40ms + 200ms);
}

.funnel__person svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.recruit.is-revealed .funnel__person {
  opacity: 1;
  transform: scale(1);
  animation: funnel-person-pulse var(--p, 3.5s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 80ms + 1200ms);
}

@keyframes funnel-person-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.88); opacity: 0.55; }
}

/* ===== FUNNEL Mitte — Trichter mit regnenden Person-Icons ===== */
.funnel__stage--filter {
  position: relative;
  aspect-ratio: 320 / 160;
  overflow: visible;
}

.funnel__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  overflow: visible;
}

.funnel__trapezoid {
  filter: drop-shadow(0 8px 24px rgba(var(--glow-rgb), 0.15));
  animation: funnel-edge-flow 22s linear infinite;
  animation-play-state: paused;
}

@keyframes funnel-edge-flow {
  to { stroke-dashoffset: -180; }
}

/* Regnende Person-Icons. --x: horizontale Position relativ zum
   Filter-Stage (50 % = Trichter-Mitte). --d: Animation-Delay.
   Animation läuft auf `top` (Container-relativ in %) + `transform:
   translateX` für horizontal centering und Deflection bei Rejects.
   Pure `transform: translate(-, %)` würde element-relativ rechnen. */
.funnel__drop {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  transform: translateX(-50%);
  width: clamp(16px, 2.2vw, 22px);
  aspect-ratio: 1;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  /* will-change hebt das Element auf eine eigene Compositing-Layer,
     mindert Layout-Reflow-Kosten der `top`-Animation. */
  will-change: top, transform, opacity;
}

.funnel__drop svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), 0.4));
}

/* PASS — Person fällt durch den Trichter, fadet am Boden raus.
   Cyan-Glow durch das Drop-Shadow auf dem SVG. */
.recruit.is-revealed .funnel__drop--pass {
  animation: funnel-drop-pass 6.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: calc(var(--d, 0s) + 1.4s);
}

@keyframes funnel-drop-pass {
  0%        { top: -8%;  transform: translateX(-50%); opacity: 0; }
  6%        { top: 0;    transform: translateX(-50%); opacity: 1; }
  60%       { top: 58%;  transform: translateX(-50%); opacity: 1; }
  82%       { top: 88%;  transform: translateX(-50%); opacity: 0.5; }
  90%, 100% { top: 100%; transform: translateX(-50%); opacity: 0; }
}

/* REJECT — Person fällt halb runter, wird seitlich abgelenkt
   und fadet aus. Dezent, kein dramatic flash. */
.recruit.is-revealed .funnel__drop--reject-left {
  animation: funnel-drop-reject-left 5.6s cubic-bezier(0.55, 0.06, 0.68, 0.19) infinite;
  animation-delay: calc(var(--d, 0s) + 1.4s);
}

@keyframes funnel-drop-reject-left {
  0%        { top: -8%; transform: translateX(-50%);             opacity: 0; }
  6%        { top: 0;   transform: translateX(-50%);             opacity: 1; }
  35%       { top: 38%; transform: translateX(-50%);             opacity: 1; }
  55%       { top: 48%; transform: translateX(calc(-50% - 40px)); opacity: 0.4; }
  75%, 100% { top: 55%; transform: translateX(calc(-50% - 66px)); opacity: 0; }
}

.recruit.is-revealed .funnel__drop--reject-right {
  animation: funnel-drop-reject-right 5.6s cubic-bezier(0.55, 0.06, 0.68, 0.19) infinite;
  animation-delay: calc(var(--d, 0s) + 1.4s);
}

@keyframes funnel-drop-reject-right {
  0%        { top: -8%; transform: translateX(-50%);             opacity: 0; }
  6%        { top: 0;   transform: translateX(-50%);             opacity: 1; }
  35%       { top: 38%; transform: translateX(-50%);             opacity: 1; }
  55%       { top: 48%; transform: translateX(calc(-50% + 40px)); opacity: 0.4; }
  75%, 100% { top: 55%; transform: translateX(calc(-50% + 66px)); opacity: 0; }
}

/* Reject-Cross — dezenter X-Badge erscheint im Deflection-Moment.
   Surface-Token statt rotem Alarm-Look, weißer Border für klare
   "verworfen"-Lesbarkeit ohne CI-Bruch. */
.funnel__drop-cross {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(19, 31, 43, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.funnel__drop-cross svg {
  width: 64%;
  height: 64%;
  display: block;
  filter: none;
  color: var(--white);
}

.recruit.is-revealed .funnel__drop--reject .funnel__drop-cross {
  animation: funnel-cross-pop 5.6s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) + 1.4s);
}

@keyframes funnel-cross-pop {
  0%, 30%   { opacity: 0; transform: scale(0.5); }
  38%       { opacity: 1; transform: scale(1.1); }
  55%       { opacity: 1; transform: scale(1); }
  68%, 100% { opacity: 0; transform: scale(0.8); }
}

/* ===== MATCHES unten — drei gefundene Fachkräfte ===== */
.funnel__stage--matches {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3.2vw, 28px);
  padding-top: clamp(6px, 1.2vw, 10px);
}

.funnel__match {
  position: relative;
  width: clamp(36px, 5.4vw, 48px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.8);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 220ms + 2.2s);
}

.recruit.is-revealed .funnel__match {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.funnel__match-halo {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(var(--glow-rgb), 0.45) 0%,
    rgba(var(--glow-rgb), 0.18) 35%,
    rgba(var(--glow-rgb), 0) 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: funnel-match-halo-pulse 3.4s ease-in-out infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--i, 0) * 600ms + 3s);
}

.recruit.is-revealed .funnel__match-halo {
  animation-play-state: running;
}

@keyframes funnel-match-halo-pulse {
  0%, 100% { transform: scale(0.9);  opacity: 0.8; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.funnel__match-icon {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: var(--white);
  filter: drop-shadow(0 0 12px rgba(var(--glow-rgb), 0.5));
}

.funnel__match-check {
  position: absolute;
  top: -3px;
  right: -3px;
  width: clamp(15px, 2vw, 18px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-hover);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow:
    0 0 0 2px rgba(var(--shadow-rgb), 0.35),
    0 0 12px rgba(var(--glow-rgb), 0.55);
}

.funnel__match-check svg {
  width: 60%;
  height: 60%;
  display: block;
}

/* Reveal-Trigger: setzt alle paused Animationen auf running. */
.recruit.is-revealed .funnel__label-dot,
.recruit.is-revealed .funnel__trapezoid {
  animation-play-state: running;
}

/* ---------- Mobile (<960px): Stapeln, Copy zuerst ---------- */
@media (max-width: 959px) {
  .recruit__grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 64px);
  }

  /* Copy ZUERST, Funnel darunter — Marie 2026-05-27: erst Text, dann
     Animation, damit auf Mobile kein langer Visual-Block vor dem
     Lesefluss steht. DOM-Reihenfolge ist Visual → Copy (Desktop hat
     Visual links), daher hier per `order` umgekehrt. */
  .recruit__copy {
    order: -1;
  }
  .recruit__visual {
    max-width: 360px;
  }

  .recruit__title {
    max-width: 22ch;
  }
}

/* Sehr schmal (<360px): Pool 4 statt 5 Spalten */
@media (max-width: 359px) {
  .funnel__pool {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Reduced Motion: Section 11 — Funnel-Animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .funnel__person,
  .funnel__drop,
  .funnel__drop-cross,
  .funnel__label-dot,
  .funnel__trapezoid,
  .funnel__match,
  .funnel__match-halo {
    animation: none !important;
    transition: none !important;
  }
  /* Static End-State: Pool + Matches sichtbar, Drops/Cross unsichtbar */
  .funnel__person     { opacity: 1; transform: scale(1); }
  .funnel__match      { opacity: 1; transform: none; }
  .funnel__drop       { opacity: 0; }
  .funnel__drop-cross { opacity: 0; }
}

/* ============================================================
   Section 12 — Über uns
   Kompaktes Stack-Layout: zentrierter Schmal-Container (~960 px),
   Block A oben (Portrait + Story als 2-spaltige Mini-Card),
   horizontaler Aurora-Mini-Trenner, darunter Block B (3-Foto-
   Reihe + Body + Ghost-CTA). Inhalte 1:1 aus Original-Live-Seite.
   Reveal-Cascade via [data-about].is-revealed.
   ============================================================ */
.about {
  position: relative;
  /* Unten OHNE Rhythmus-Padding: die Sektion endet seit dem
     Umbau vom 2026-08-28 mit dem randlosen .crew-Porträt-Fries.
     Mit dem üblichen var(--section-py) bliebe darunter ein ~104px
     schmaler Streifen der Bandfarbe stehen — das Band soll bündig in
     die nächste Sektion laufen. */
  padding: var(--section-py) 0 0;
  isolation: isolate;
}

.about__header {
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

/* Hyphenation-Override (§5a-Pattern): die globale h1–h4-Regel
   setzt hyphens: auto. Bei Lead-Headlines wie „Branchenpartner",
   „Bese Media GmbH" und „Spezialisten" produziert das semantisch
   unschöne Mitten-Trennungen („dei-nen", „Branchen-partner"). */
.about__header .section-header__title {
  /* 36ch (Marie 2026-09-02): „Der Branchenpartner für Kanalservice-Betriebe"
     brach unter dem globalen 34ch-Deckel am Kompositum-Bindestrich. */
  max-width: 36ch;
}
.about__header .section-header__title,
.about-lead__name,
.about-team__title {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- Stack-Container (Container-Breite) ----------
   Marie 2026-09-09 (Boxbreiten-Runde, Nachrunde): „wichtig ist, dass alle
   Sections in der Breite so breit sind und nicht manche, zum Beispiel Über
   Bese Media, plötzlich wieder so komprimiert" — deshalb KEIN eigener Deckel
   mehr (vorher 960, in der ersten Runde kurz 1120): der Stack läuft auf
   Container-Breite. Damit die Story bei 1476 px Innenbreite lesbar bleibt,
   läuft sie ab 1280 px in ZWEI Zeitungsspalten (.about-lead__text; GEMESSEN
   34–54 Zeichen je Zeile: Spalten 361px bei 1280, 436 bei 1440, 484 bei
   1614–1864) neben dem 400-px-Portrait; die Spezialisten-Absätze bleiben
   zweispaltig mit 68ch. */
.about__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  max-width: none;
  margin: 0 auto;
}

/* Der frühere Aurora-Mini-Trenner (.about__divider) zwischen Block A
   und Block B ist auf Marie-Zuruf 2026-08-28 ersatzlos entfernt —
   der .about__stack-Gap allein trennt die Blöcke. */

/* ============================================================
   Block A — Geschäftsführer Erich Bese
   2-spaltig auf >=640 px: Portrait links, Story rechts.
   Auf Mobile gestapelt.
   ============================================================ */
.about-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
  align-items: center;
}

@media (min-width: 640px) {
  .about-lead {
    grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 3.5vw, 44px);
  }
}
/* Story-Text: Wrapper um die drei Absätze (Markup seit 2026-09-09 in beiden
   Über-uns-Partials). Bis 1279px eine Spalte, ab 1024px auf 70ch gedeckelt;
   ab 1280px zwei ausgeglichene Zeitungsspalten (column-count) — so füllt der
   Block die Container-Breite, ohne dass eine Zeile über ~55 Zeichen läuft
   (gemessen 34–54 bei 1280–1864). */
.about-lead__text {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
}
@media (min-width: 1024px) {
  .about-lead__text { max-width: 70ch; }
}
@media (min-width: 1280px) {
  .about-lead__text {
    display: block;
    max-width: none;
    column-count: 2;
    column-gap: clamp(32px, 3.4vw, 52px);
    column-fill: balance;
    orphans: 2;  /* nur Fallback für Browser ohne break-inside (unten) */
    widows: 2;
  }
  /* Absätze nicht über die Spaltengrenze reißen — bei drei kurzen Absätzen
     las sich ein mitten im Satz umbrechender Absatz wie ein Layoutfehler
     (Sichtprüfung 1864px); ergibt [1] | [2,3] bzw. ausgeglichen je nach Länge. */
  .about-lead__text .about-lead__body { margin: 0 0 clamp(12px, 1.4vw, 16px); break-inside: avoid; }
  .about-lead__text .about-lead__body:last-child { margin-bottom: 0; }
}

/* Ab 1024px: Bild-Spalte in px deckeln statt fr (§0a „Ausgewogene Foto/
   Text-Spalten") — auf Container-Breite bekäme das Portrait sonst eine
   600px-Spalte mit 100px Luft je Seite. DIESE Spalte bestimmt die Desktop-
   Portraitbreite (320 → 400px, Boxbreiten-Runde 2026-09-09): Quelle
   1200×800, 3:4-Ausschnitt = 600×800px → bei 400px @2× 1,33-fach
   hochskaliert (vorher 1,07); auf Maries 1×-Ultrawide verlustfrei. Mehr
   als 400 wäre auf Retina sichtbar weich. */
@media (min-width: 1024px) {
  .about-lead {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 56px);
  }
}

/* ---------- Portrait-Frame ---------- */
.about-lead__portrait {
  position: relative;
  margin: 0;
  border-radius: 24px 24px 72px 24px;
  isolation: isolate;
  /* 320px gilt NUR unter 640px (gestapeltes Layout, Portrait zentriert).
     Ab 640px setzt die Regel unten `max-width: none` — die Portrait-Breite
     kommt dort aus der GRID-SPALTE (`.about-lead`, ab 1024px 400px), nicht
     aus dieser Property (Guardian 2026-09-09). */
  max-width: 320px;
  width: 100%;
  justify-self: center;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.about.is-revealed .about-lead__portrait {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (min-width: 640px) {
  .about-lead__portrait {
    justify-self: start;
    /* schlägt bewusst den 320px-Basiswert: ab hier füllt das Portrait seine
       Grid-Spalte (0.85fr bis 1023px, ab 1024px fest 400px — s. `.about-lead`).
       Wer die Desktop-Portraitbreite ändern will, ändert die Spalte, nicht
       diese Property (Guardian 2026-09-09). */
    max-width: none;
  }
}

.about-lead__portrait-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 24px 24px 72px 24px;
  box-shadow:
    0 20px 40px -28px rgba(var(--shadow-rgb), 0.55),
    inset 0 0 0 1px rgba(var(--glow-rgb), 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

/* Aurora-Halo hinter dem Portrait (subtil). */
.about-lead__portrait-glow {
  position: absolute;
  inset: -14% -10% -6% -18%;
  background:
    radial-gradient(60% 50% at 30% 35%, rgba(var(--glow-rgb), 0.18) 0%, transparent 70%),
    radial-gradient(40% 35% at 70% 80%, rgba(107, 196, 240, 0.08) 0%, transparent 75%);
  filter: blur(24px);
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  pointer-events: none;
  mix-blend-mode: screen;
}
.about.is-revealed .about-lead__portrait-glow { opacity: 1; }

/* ---------- Lead-Copy (Story-Spalte) ---------- */
.about-lead__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.about.is-revealed .about-lead__copy {
  opacity: 1;
  transform: translateY(0);
}

.about-lead__name {
  margin: 0 0 clamp(4px, 0.8vw, 8px);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--heading-color);
  font-weight: var(--weight-regular);
}
.about-lead__name em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about-lead__body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
}

.about-lead__cta {
  margin-top: clamp(8px, 1.2vw, 14px);
  align-self: flex-start;
  white-space: normal;
}

/* ============================================================
   Block B — Unsere Spezialisten
   Editorial-Kopf (Headline + CTA links, Copy rechts) über einem
   randlosen Porträt-Fries.

   Marie 2026-08-28 (3. Runde): „Die Section ,Unsere Spezialisten'
   gefällt mir gar nicht. Überarbeite diese komplett." Davor lag hier
   ein Vollflächen-Foto der Terrassen-Runde (Grill/Sommerfest) — es
   erzählte Betriebsfeier, während die Copy von Spezialgebieten
   spricht, und kostete 1114px Höhe für eine Aussage, die es nicht
   traf. Referenzen §1.12: talenthafen.com/ueber-uns („Unser Team" —
   Porträt-Karten mit Name + Rolle auf dem Foto) und fullstack.de
   („Echte Experten statt Theoretiker" — Person MIT Fachgebiet).

   Der Fries ist bewusst kein Karten-Raster: die Porträts stammen aus
   EINER Serie (gleicher Glas-Korridor, gleiches Licht), ohne Lücke
   aneinandergesetzt verschmelzen die Hintergründe zu einer
   durchgehenden Aufnahme — das Ensemble trägt, nicht die Einzelkarte.
   Ein Raster wäre außerdem die Dublette der Teamseite, auf die der
   CTA zeigt.
   ============================================================ */
.about-team {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.2vw, 46px);
}

/* ---------- Kopf ----------
   Bewusst ANDERS gegliedert als Block A (dort Bild links / Text
   rechts): hier eine Kapitel-Zeile über die volle Breite des
   Schmal-Stacks, darunter die Copy in zwei Spalten. Zwei gleich
   gebaute Zweispalter hintereinander lesen sich als Wiederholung.
   Der Textblock bleibt dadurch flach — das Gewicht der Sektion
   liegt beim Fries darunter, nicht beim Fließtext. */
.about-team__head {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 30px);
}

/* Kapitel-Zeile: nur noch die Headline. Die frühere Akzent-Linie
   (.about-team__rule), die von der Headline bis zur Stack-Kante
   durchlief, ist auf Marie-Zuruf 2026-08-28 entfernt („diese
   Trennlinie bitte weg") — zusammen mit dem Aurora-Mini-Trenner
   über dem Block ist die Zone zwischen Erich und den Spezialisten
   jetzt linienfrei. */
.about-team__lede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}


.about-team__title {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: var(--weight-regular);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--heading-color);
}
.about-team__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Beides nötig: als Flex-Kind (gestapelt) zieht align-self, als
   Grid-Kind (zweispaltige Copy) justify-self — ohne das wird der
   Button auf die volle Spaltenbreite gestreckt. */
.about-team__cta {
  align-self: flex-start;
  justify-self: start;
  margin-top: clamp(6px, 1vw, 14px);
  white-space: normal;
}

.about-team__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
}

.about-team__body {
  margin: 0;
  max-width: 68ch;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-200);
}

/* Ab 900px stehen die beiden Absätze nebeneinander. MUSS nach der
   Basisregel stehen — eine Media-Query erhöht die Spezifität nicht,
   davor gesetzt verliert sie gegen das display:flex per
   Quell-Reihenfolge (hier einmal passiert). */
@media (min-width: 900px) {
  .about-team__copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 52px);
    row-gap: clamp(12px, 1.4vw, 18px);
    align-items: start;
  }
  .about-team__cta { grid-column: 1 / -1; }
}

/* ---------- Der Fries ----------
   Randlos über die volle Breite (bricht aus .about__stack UND
   .container aus). html/body tragen bereits overflow-x:hidden bzw.
   clip, der 100vw-Ausbruch ist damit scrollbar-sicher.
   Die Streifen sind schmaler als das 2:3-Original — bei cover wird
   deshalb SEITLICH beschnitten, die Figur bleibt in voller Höhe
   stehen. Besetzung = komplettes Live-Team-Roster ohne Erich
   (Marie 2026-08-28: „alle Mitarbeiter … guck auf der Live-Seite").
   Seit der Zwei-Reihen-Fassung (9/8) sind die Streifen wieder breit:
   bei 1440px sind ~72 % der Bildbreite sichtbar (160px Fenster auf
   221px skaliertem Bild) — die Gesichter (gemessen 40–55 % der
   Breite) liegen komfortabel drin.
   Zwei Modi: >=1180px mit Maus = Fries (alle 17 auf einen Blick,
   Name immer sichtbar, FUNKTION erst auf dem geöffneten
   Hover-Streifen) · sonst (unter 1180px oder Touch) = zwei
   wischbare Snap-Reihen mit vollen Dauer-Labels. */
/* Seit der 6. Runde 2026-08-28 (Marie: „viel zu viele gequetscht …
   lieber zwei Reihen untereinander") stapelt der Wrapper .crew-wall
   ZWEI .crew-Reihen (9 + 8) nahtlos untereinander — er traegt den
   Full-Bleed, den dunklen Grund und die Insel-Tokens; das
   Hover-Accordion (flex-grow) wirkt pro Reihe. */
.crew-wall {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #060A0E;
  /* Theme-fest: der Fries ist eine Karten-Dunkel-Insel (§0a) — die
     Beschriftung liegt auf dem Foto-Scrim und muss im Light-Theme
     hell bleiben. Nur die tatsächlich verbrauchten Tokens. */
  --glow-rgb: 77, 168, 218;
  --accent-hover: #4DA8DA;
}

.crew {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* Kein gap: die Hintergründe sollen ineinanderlaufen. */
}

.crew__member {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* Zwei gestapelte Reihen: je Reihe flacher als der fruehere
     Einzel-Fries (30vw/520px), sonst wuerde die Wand > 1000px hoch.
     23vw haelt das Streifen-Seitenverhaeltnis (~0.48) des
     freigegebenen 7er-Frieses: 160px breit / 331px hoch bei 1440. */
  height: clamp(250px, 23vw, 400px);
  overflow: hidden;
  isolation: isolate;
  /* Reveal über die translate-Property, damit sie sich nicht mit dem
     transform des Bild-Zooms ins Gehege kommt (§0a Reveal-Kollision). */
  opacity: 0;
  translate: 0 20px;
  /* 45ms statt 70ms Stagger seit der 17er-Besetzung — sonst liefe
     die Reveal-Staffelung über 1,1s. */
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 45ms),
    translate 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 45ms),
    flex-grow 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about.is-revealed .crew__member {
  opacity: 1;
  translate: 0 0;
}

.crew__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anker im oberen Drittel: greift erst, wenn ein Streifen beim
     Hover breiter wird als das 2:3-Original und der Beschnitt von
     der Seite nach oben/unten kippt. */
  object-position: 50% 18%;
  /* Minimal überskaliert gegen Subpixel-Haarlinien zwischen den
     nahtlos aneinanderstehenden Streifen. */
  transform: scale(1.02);
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 450ms ease;
}

/* Verlauf für die Beschriftung + etwas Tiefe oben. */
.crew__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 14, 0.16) 0%,
    rgba(6, 10, 14, 0) 26%,
    rgba(6, 10, 14, 0.30) 58%,
    rgba(6, 10, 14, 0.78) 82%,
    rgba(6, 10, 14, 0.94) 100%);
}

/* Feine Trennkante — gibt dem Fries den Filmstreifen-Rhythmus,
   ohne die Hintergründe wirklich zu zerschneiden. */
.crew__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 55%,
    rgba(255, 255, 255, 0) 100%);
}
.crew__member:first-child .crew__edge { opacity: 0; }

.crew__id {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: clamp(12px, 1.2vw, 20px) clamp(10px, 1vw, 18px);
}

.crew__name {
  font-family: var(--font-ui);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(6, 10, 14, 0.6);
}

/* min-height = zwei Zeilen: die längeren Funktionen ("Leitende
   Marketing-Managerin") brechen auf schmalen Streifen um, die kurzen
   ("Redaktion") nicht. Ohne die Reserve säßen die Namen darüber auf
   unterschiedlicher Höhe und der Fries verlöre seine Grundlinie. */
.crew__role {
  font-family: var(--font-ui);
  font-size: clamp(10px, 0.76vw, 12px);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  min-height: 2.6em;
  color: rgba(255, 255, 255, 0.74);
  text-shadow: 0 1px 8px rgba(6, 10, 14, 0.55);
  /* Seit der 12er-Besetzung sind die Streifen schmaler; lange
     Funktionen („Geschäftsführung") brauchen die Trenn-Erlaubnis,
     sonst laufen sie über die Streifenkante (§1.5-Safety). */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Desktop-Fries mit Maus (>=1180px) ----------
   Auch mit zwei Reihen (9/8 Streifen à ~131–213px) bleibt das
   Verhalten einheitlich: der NAME steht immer (kompakte, buendige
   Grundlinie per Konstruktion, weil die Funktions-Box kollabiert
   ist), die FUNKTION erscheint erst auf dem per Hover geoeffneten
   Streifen — lange Funktionen („Assistenz der Geschaeftsfuehrung")
   braechen auf den 131px-Streifen bei 1180px sonst 3-zeilig um und
   zerstoerten die Namens-Grundlinie (dieselbe Messung wie bei der
   17er-Einzelreihe). Touch-Geraete haben keinen Hover — sie
   bekommen über die (hover: none)-Weiche unten die Snap-Reihen,
   dort sind Name + Funktion immer voll sichtbar. */
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .crew__id { padding-inline: 6px; }
  /* Schriftgröße so gewählt, dass der längste Einzelname („Benjamin",
     „Dickmann") auch im 69px-Streifen bei 1180px OHNE Wortbruch
     passt — break-word bleibt nur als §1.5-Notnagel. */
  .crew__name {
    font-size: clamp(10px, 0.85vw, 13px);
    overflow-wrap: break-word;
  }
  .crew__role {
    min-height: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 300ms ease, max-height 300ms ease;
  }
  .crew:hover .crew__member:hover .crew__role {
    max-height: 4em;
    opacity: 1;
  }
}

/* ---------- Hover: der Fries öffnet sich ----------
   Nur mit echtem Zeiger. Der angesteuerte Streifen bekommt Platz,
   die übrigen treten zurück — Aufmerksamkeit ohne Layout-Sprung,
   weil sich allein die flex-Verteilung ändert. */
@media (hover: hover) and (pointer: fine) {
  /* Zurücktreten aller Streifen, sobald der Fries angesteuert wird. */
  .crew:hover .crew__member { flex-grow: 0.9; }
  .crew:hover .crew__shot { filter: saturate(0.55) brightness(0.68); }
  .crew:hover .crew__id { opacity: 0.55; transition: opacity 450ms ease; }

  /* Der aktive Streifen. Die Selektoren tragen bewusst BEIDE
     Hover-Stufen (.crew:hover .crew__member:hover): ein blankes
     .crew__member:hover ist (0,2,0) und verliert gegen die
     Zurücktreten-Regel darüber (0,3,0) — der angesteuerte Streifen
     wäre dann geschrumpft statt gewachsen (hier einmal passiert). */
  /* 2.2 statt 1.65 seit der 12er-Besetzung: bei zwölf Streifen wäre
     der 1.65er-Zuwachs kaum noch wahrnehmbar (Ruhe-Anteil 1/12). */
  .crew:hover .crew__member:hover { flex-grow: 2.2; }
  .crew:hover .crew__member:hover .crew__shot {
    filter: none;
    transform: scale(1.06);
  }
  .crew:hover .crew__member:hover .crew__id { opacity: 1; }

  /* Cyan-Oberkante am aktiven Streifen (Idiom .vs-card). */
  .crew__member::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3;
    background: linear-gradient(90deg, rgba(var(--glow-rgb), 0), var(--accent-hover), rgba(var(--glow-rgb), 0));
    opacity: 0;
    transition: opacity 400ms ease;
  }
  .crew__member:hover::after { opacity: 1; }
}

/* ---------- Schmale Breiten: stehendes Porträt-Raster (seit 2026-09-18) ----------
   Marie 2026-09-18: „absolut nicht mobiloptimiert" — vorher liefen
   hier zwei unabhängig wischbare Snap-Reihen (148–230px je Karte):
   auf dem Handy sah man 2½ von 16 Personen, dazu zwei Scroller
   übereinander ohne Wisch-Hinweis. Jetzt ein STEHENDES Raster wie die
   Team-Wand auf Über uns (Marie 18.09.: „nebeneinander, ohne Abstand,
   eckig"): alle auf einen Blick, nahtlos, kein horizontales Scrollen.
   Die zwei .crew-Reihen lösen sich per display: contents auf, damit
   ALLE Karten in EINEM Umbruch-Fluss stehen (sonst bräche jede Reihe
   für sich um und hinterließe mitten in der Wand eine halbe Zeile);
   role="list" steht explizit am <ul>, die Listen-Semantik bleibt.
   Die letzte, unvollständige Zeile steht mittig (16 = 5 × 3 + 1,
   17 = 5 × 3 + 2) — der dunkle Grund der Wand trägt die Lücken.
   Spalten: < 480px drei · 480–719px vier · 720–1179px sechs.
   Seitenverhältnis 3 : 4 statt 2 : 3, damit die Wand auf dem Handy
   nicht über 1.200px wächst; die Gesichter sitzen per object-position
   (50% 18%) im oberen Drittel und bleiben ganz im Bild. */
@media (max-width: 1179px) {
  .crew-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .crew { display: contents; }
  /* flex-grow hart auf 0 — auch gegen die Hover-Regeln (schmales
     Desktop-Fenster mit Maus), die sonst die mittige letzte Zeile
     aufzögen. Selektoren tragen dieselbe Stufe wie die Hover-Regeln
     (0,3,0 / 0,4,0) — dieser Block MUSS deshalb HINTER dem Hover-Block
     „der Fries öffnet sich" stehen, sonst kippt es lautlos. */
  .crew .crew__member,
  .crew:hover .crew__member,
  .crew:hover .crew__member:hover {
    flex: 0 0 calc(100% / var(--crew-cols, 3));
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .crew__id {
    align-items: center;
    text-align: center;
    gap: 2px;
    /* Nur block: die Seiten-Regeln .page-home/-karriere/-ueber-uns
       .crew__id setzen padding-inline (12–18px) und gelten weiter. */
    padding-block: 10px 12px;
  }
  .crew__name {
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.2;
    overflow-wrap: break-word;
  }
  /* Zwei Zeilen Reserve wie im Fries: sonst stünden die Namen je
     nach Länge der Funktion auf verschiedener Höhe. */
  .crew__role {
    font-size: clamp(10px, 2.6vw, 12px);
    line-height: 1.25;
    min-height: 2.5em;
  }
  /* Der Verlauf beginnt früher — Name + Funktion belegen auf den
     ~130px breiten Karten ein Drittel der Höhe. */
  .crew__veil {
    background: linear-gradient(
      180deg,
      rgba(6, 10, 14, 0.10) 0%,
      rgba(6, 10, 14, 0) 30%,
      rgba(6, 10, 14, 0.45) 56%,
      rgba(6, 10, 14, 0.86) 78%,
      rgba(6, 10, 14, 0.96) 100%);
  }
  /* Die Filmstreifen-Kante gehört zum Fries; im Raster trennt nichts. */
  .crew__edge { display: none; }
}
/* Ab 375px passt jedes Einzelwort der Funktionen („Prozessmanagement")
   in die Karte — dort keine Silbentrennung („Prozessmanage-ment");
   darunter bleibt sie als §1.5-Notnagel. */
@media (min-width: 375px) and (max-width: 479px), (min-width: 720px) and (max-width: 1179px) {
  .crew__role { hyphens: manual; -webkit-hyphens: manual; }
}
/* Vier Spalten: Karten ab 120px — Schrift an die Kartenbreite gekoppelt,
   Silbentrennung bleibt hier als Notnagel an (bei 480px gemessen). */
@media (min-width: 480px) and (max-width: 1179px) {
  .crew-wall { --crew-cols: 4; }
  .crew__name { font-size: clamp(12px, 2.4vw, 15px); }
  .crew__role { font-size: clamp(10px, 1.9vw, 12px); }
}
@media (min-width: 720px) and (max-width: 1179px) {
  .crew-wall { --crew-cols: 6; }
  .crew__name { font-size: clamp(12px, 1.4vw, 15px); }
  .crew__role { font-size: clamp(10px, 1.1vw, 12px); }
}

/* ---------- Touch ab 1180px (iPad quer, Touch-Displays) ----------
   Dort bleibt der Fries (alle in zwei Reihen), nur ohne Hover-
   Accordion — die Funktion steht über die Basis-Regel dauerhaft
   (der Verbergen-Block oben verlangt hover + feinen Zeiger). Früher
   lief hier dieselbe Snap-Reihe wie auf dem Handy. */

/* ---------- Reduced Motion: Section 12 — About ----------
   Reveal-States hart auflösen, Fries-Bewegung abschalten. Der
   Hover-Zustand bleibt als reine Farb-/Breitenänderung erhalten. */
@media (prefers-reduced-motion: reduce) {
  .about-lead__portrait,
  .about-lead__portrait-glow,
  .about-lead__copy,
  .crew__member {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }
  .crew__shot,
  .crew__role,
  .crew__id,
  .crew__member::after { transition: none !important; }
}

/* ============================================================
   Section 13 — FAQ
   Zweispaltig auf Desktop (links sticky Intro mit Eyebrow + H2
   + Body + KI-Pillen „Frag ChatGPT/Claude" [Block „FAQ — Frag die KI"
   am Dateiende; der frühere Signature-CTA ist seit 2026-09-10 raus],
   rechts <details>/<summary>-Akkordeon).
   Smooth-Open via grid-template-rows-0fr→1fr-Trick auf dem
   Answer-Wrap. Chevron rotiert 180°, wenn [open]. Browser-native
   Toggle — JS nur für „nur ein Item gleichzeitig offen".
   ============================================================ */
.faq {
  position: relative;
  padding: var(--section-py) 0;
  isolation: isolate;
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  /* Kein 1240px-Deckel mehr (2026-09-09, alle Seiten — vorher nur die
     Startseite per Override): das Grid läuft auf Container-Breite, die
     Antworten sind unten per ch gedeckelt. */
  margin: 0 auto;
}

@media (min-width: 960px) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }
}

/* ---------- Intro-Column (links, sticky auf Desktop) ---------- */
.faq__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px);
  align-items: flex-start;
}

@media (min-width: 960px) {
  .faq__intro {
    position: sticky;
    /* 160 px Offset = Header-Höhe + Atemraum. Falls Header später
       in der Höhe wechselt, hier zentral anpassen. */
    top: 120px;
  }
}

.faq__title {
  margin: 0;
  font-family: var(--font-display);
  /* Volle CI-H2-Größe wie alle Section-Überschriften (Marie 2026-09-08).
     Der frühere eigene Clamp deckte sich bei ≥1280px zufällig mit
     var(--text-h2), wich aber bei 768–1180px (kleiner) und mobil
     (größer) ab — Token-Drift. */
  font-size: var(--text-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--heading-color);
  font-weight: var(--weight-regular);
  hyphens: manual;
  -webkit-hyphens: manual;
  /* Globale h2 em-Regel (§1.6) deckt das em-Padding ab. */
}

.faq__body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
  max-width: 44ch;
}

/* ============================================================
   Akkordeon-Liste
   ============================================================ */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  position: relative;
  background:
    linear-gradient(180deg, rgba(25, 41, 57, 0.42) 0%, rgba(19, 31, 43, 0.48) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.32s ease-out,
    background 0.32s ease-out,
    box-shadow 0.32s ease-out;
}
.faq-item:hover {
  border-color: color-mix(in srgb, var(--accent-hover) 32%, transparent);
}
/* Geöffneter Zustand: cyan-Border-Glow, leicht angehoben. */
.faq-item[open] {
  border-color: rgba(var(--glow-rgb), 0.55);
  background:
    linear-gradient(180deg, rgba(25, 41, 57, 0.6) 0%, rgba(19, 31, 43, 0.62) 100%);
  box-shadow:
    0 18px 32px -20px rgba(var(--shadow-rgb), 0.55),
    inset 0 0 0 1px rgba(var(--glow-rgb), 0.18);
}

/* ---------- Summary (klickbarer Frage-Header) ---------- */
.faq-item__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--white);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Native Markers ausblenden (Safari + Firefox/Chrome). */
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker                 { display: none; content: ""; }

.faq-item__question {
  flex: 1 1 auto;
  min-width: 0;
}

/* Chevron-Icon mit Cyan-Akzent-Ring */
.faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(var(--glow-rgb), 0.08);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  color: var(--accent-hover);
  transition:
    background 0.32s ease-out,
    border-color 0.32s ease-out,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item:hover .faq-item__icon {
  background: rgba(var(--glow-rgb), 0.14);
  border-color: rgba(var(--glow-rgb), 0.42);
}
.faq-item[open] .faq-item__icon {
  background: rgba(var(--glow-rgb), 0.2);
  border-color: rgba(var(--glow-rgb), 0.6);
  transform: rotate(180deg);
}

/* Fokus-Indikator (Tab-Navigation) */
.faq-item__summary:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

/* ---------- Smooth-Open via grid-template-rows-Trick ---------- */
.faq-item__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item[open] .faq-item__answer-wrap {
  grid-template-rows: 1fr;
}
.faq-item__answer-wrap > * {
  /* Wichtig für den 0fr-Trick — sonst clipped overflow nicht. */
  min-height: 0;
  overflow: hidden;
}
.faq-item__answer {
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
}
.faq-item__answer p {
  margin: 0;
  padding-top: 2px;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-200);
  /* Lesemaß: die Antwortspalte ist auf Container-Breite 760–900px breit,
     ohne Deckel liefe der Text auf 90–105 Zeichen/Zeile (2026-09-09). */
  max-width: 66ch;
  /* Top-Border als visueller Trenner zur Frage */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(14px, 1.6vw, 18px) 0 0;
}
/* Inline-Links in Antworten (z. B. „Bese-AI Potenzial-Check"):
   UA-Default-Blau wäre auf den dunklen FAQ-Karten unlesbar —
   Akzent-Token greift in beiden Themes (Karten sind Dunkel-Inseln). */
.faq-item__answer a {
  color: var(--accent-hover);
  text-decoration-color: rgba(var(--glow-rgb), 0.5);
  text-underline-offset: 3px;
}
.faq-item__answer a:hover {
  text-decoration-color: var(--accent-hover);
}

/* ---------- Reduced Motion: Section 13 — FAQ ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item__icon,
  .faq-item__answer-wrap {
    transition: none !important;
  }
  /* Open-State soll instant, aber sichtbar sein. Reduced-Motion
     verzichtet auf die smooth-Animation, behält die Funktion. */
  .faq-item[open] .faq-item__icon {
    transform: rotate(180deg);
  }
}

/* ============================================================
   Section 14 — Presse & Berichte
   Zwei großformatige Glas-Cards nebeneinander (≥760 px),
   gestapelt unter 760 px. Cards sind komplett verlinkt — Glas-
   Rahmen, Beitrags-Still oben, darunter Source-Meta + Title +
   Excerpt + Ghost-Link „Bericht lesen". Hover hebt die Card
   leicht an und schiebt das Still um 3 % weiter (Ken-Burns-
   Anmutung); Cyan-Border und Pfeil-Drift signalisieren die
   externe Navigation.
   ============================================================ */
.press {
  padding-block: var(--section-py);
  position: relative;
}

.press__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 24px);
  /* Bis 2026-09-09 auf 820px gedeckelt („kompakter Pool, zurückhaltend",
     Marie 2026-05-26) — mit der Box-Regel der Boxbreiten-Runde („alle
     Sections gleich breit, keine komprimiert") läuft das Grid jetzt auf
     Container-Breite: zwei Karten je ~700px. */
}

@media (min-width: 760px) {
  .press__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.press__item {
  display: flex;
}

/* ---------- Card ---------- */
.press-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* §5a-Abweichung (2026-05-26): bewusst opaker als var(--glass-bg)
     0.04 und var(--glass-border) 0.08. Marie-Feedback: Cards auf
     dem dunklen Section-BG nicht ausreichend Kontrast — vor allem
     hinter dem überwiegend dunklen German-Web-Award-Still. Werte
     liegen zwischen Standard-Glas und Hover-Glas (--glass-bg-hover
     0.07), damit die Karten sich abheben, ohne den ruhigen
     Section-Charakter zu sprengen. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.018) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 44px rgba(var(--shadow-rgb), 0.34);
  /* 3D-Maus-Tilt (Pattern §0a Mouse-Tilt): --mx/--my per JS (-1..+1),
     --tilt-max begrenzt den Roll-Winkel, --lift trägt den Hover-
     Z-Lift in dieselbe Transform-Kette. */
  --mx: 0;
  --my: 0;
  --tilt-max: 6deg;
  --lift: 0px;
  /* flat statt preserve-3d: kein 3D-Kind zu erhalten, overflow:hidden
     würde preserve-3d in Safari ohnehin auf flat zwingen. */
  transform-style: flat;
  transform: perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 260ms ease;
}

@media (hover: hover) {
  .press-card:hover {
    --lift: -3px;
    border-color: rgba(var(--glow-rgb), 0.34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 20px 56px rgba(var(--shadow-rgb), 0.40);
    /* will-change nur in der Hover-Phase setzen: vermeidet eine
       permanente Compositing-Layer auf zwei statischen Cards. */
    will-change: transform;
  }
}

/* Aktive Maus-Tilt-Phase: kürzere Transition für Cursor-Follow. */
.press-card.is-tilting {
  transition:
    transform 140ms ease-out,
    border-color 220ms ease,
    box-shadow 260ms ease;
}

.press-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- Media (Beitrags-Still) ---------- */
.press-card__media {
  position: relative;
  margin: 0;
  /* Flacher als das 768/499-Original (1.54:1) → 16:9 spart vertikale
     Höhe, damit die Cards kompakter wirken. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(var(--shadow-rgb), 0.4);
  /* Subtle Bottom-Trennung zum Body, damit das Still gerahmt wirkt
     und sich auch dann vom Card-BG abhebt, wenn das Still selbst
     überwiegend dunkel ist (z. B. German-Web-Award-Card). */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.press-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Minimaler Brightness-Boost gleicht dunkle Beitrags-Stills aus,
     ohne helle (Unternehmer-Journal) zu überstrahlen. */
  filter: brightness(1.04) saturate(1.02);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .press-card:hover .press-card__media img {
    transform: scale(1.03);
  }
}

/* ---------- Body ---------- */
.press-card__body {
  padding: clamp(16px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  flex: 1;
}

.press-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-200);
  font-weight: var(--weight-semibold);
}

.press-card__source {
  color: var(--accent-hover);
}

.press-card__sep {
  opacity: 0.4;
}

.press-card__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: var(--weight-regular);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--heading-color);
  margin: 0;
  /* §5a-Pattern: hyphens manual + overflow-wrap als Hard-Wrap-Safety
     auf 320 px, damit „Platzhirsch" nicht mid-word bricht. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

.press-card__excerpt {
  max-width: 70ch; /* Lesemaß auf den ~700px breiten Karten (Boxbreiten-Runde 2026-09-09: 91 Zeichen/Zeile gemessen) */
  font-family: var(--font-ui);
  font-size: clamp(13px, 0.92vw, 14px);
  line-height: 1.6;
  color: var(--text-200);
  margin: 0;
}

.press-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: clamp(8px, 1vw, 12px);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--accent-hover);
  transition: gap 220ms ease;
}

.press-card__link-icon {
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .press-card:hover .press-card__link {
    gap: 12px;
  }
  .press-card:hover .press-card__link-icon {
    transform: translate(2px, -2px);
  }
}

/* ---------- Reduced Motion: Section 14 ---------- */
@media (prefers-reduced-motion: reduce) {
  .press-card,
  .press-card__media img,
  .press-card__link,
  .press-card__link-icon {
    transition: none !important;
  }
  .press-card:hover {
    transform: none;
  }
  .press-card:hover .press-card__media img {
    transform: none;
  }
}

/* ============================================================
   Section 15 — Google-Bewertungen
   Elfsight-Widget (platform.js, ID fe95c8fb-…163e) sitzt in
   `.reviews-card` — wir behalten nur den Glas-Frame als Kachel-
   Hintergrund, das Widget bringt seine eigene Slider-/Card-UI mit.
   ============================================================ */
.reviews {
  padding-block: var(--section-py);
  position: relative;
}

.reviews-card {
  position: relative;
  margin: clamp(36px, 4.4vw, 56px) auto 0;
  /* Kein 1240px-Deckel mehr (2026-09-09, alle Seiten): das Widget läuft auf
     Container-Breite wie die Nachbar-Sections. */
  /* min-height reserviert Platz, bis das Elfsight-Widget rendert — verhindert CLS. */
  min-height: 420px;
  isolation: isolate;
  /* MARIE-REGEL (2026-09-04, site-weit, beide Themes): die einzelnen
     Bewertungskacheln des Elfsight-Widgets werden NIE noch einmal in eine
     eigene Kachel/Glas-Frame gepackt — der Wrapper ist nur Platzhalter
     (CLS-Reserve); die Breite kommt seit 2026-09-09 vom .container-Eltern
     (der 1240px-Deckel ist raus). Der frühere Glas-Frame (Verlauf +
     Hairline + Schatten + Padding) ist restlos raus; der Look der Kopfzeile
     + Karten kommt allein aus dem Widget bzw. den es-*-Overrides. */
}



/* ============================================================
   Section 16 — Nächste Schritte & Potenzial-CTA (Redesign v5)
   ------------------------------------------------------------
   Editorial Process Spine. Komplett zentrische Composition:
     • .ns-spine            → zentrische Vertikal-Achse mit
                              scroll-driven weiß-silber Progress-Fill
                              (CSS var --spine-progress, 0..1)
     • .ns-station          → drei symmetrisch zentrierte
                              Stationen (huge Italic-Numeral +
                              Knoten an Spine + Glas-Card)
     • .ns-finale           → Step 04 = Conversion-Card am
                              Spine-Endpunkt (mit Erich-Avatar)
   ============================================================ */
.next-steps {
  padding-block: var(--section-py);
  position: relative;
}
.next-steps .section-header {
  margin-bottom: clamp(48px, 6vw, 88px);
}

/* --- Spine: vertikale Achse mit progressivem Fill ----------- */
.ns-spine {
  --spine-progress: 0;
  --spine-w: 2px;
  --node-size: clamp(44px, 4.4vw, 56px);
  --card-w: clamp(320px, 40vw, 540px);
  --media-w: clamp(120px, 14vw, 200px);
  --gap-y: clamp(56px, 7vw, 96px);
  position: relative;
  margin-inline: auto;
  padding-block: clamp(16px, 2vw, 32px);
  isolation: isolate;
}

.ns-spine__rail {
  position: absolute;
  left: 50%;
  top: 0;
  /* Schiene endet exakt am Finale-Knoten (JS setzt --rail-end-px;
     Fallback = bis zum Container-Boden, falls JS nicht läuft). */
  height: var(--rail-end-px, 100%);
  width: var(--spine-w);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  /* Spitz auslaufender Verlauf — oben weicher Fade-In (edler Look),
     unten harter Abschluss am Knoten.
     FENSTER FÜR DIE ABBINDER-ZEILE (Marie 2026-08-03): Die Schiene lief
     vorher mitten durch den .ns-note-Text — die Zeile wirkte dadurch
     „random dazwischengerutscht". Jetzt blendet die Maske sie im Bereich
     der Zeile weich aus: die Spur endet sichtbar über dem Satz und setzt
     darunter zum Finale-Knoten wieder an, der Satz liest sich als
     Abschluss der Schritt-Spur. --rail-gap-a/-b setzt das JS aus der
     tatsächlichen Position; Default 100% = kein Fenster (No-JS-Fallback). */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--shadow-rgb), 0.25) 4%,
    rgba(var(--shadow-rgb), 0.7) 10%,
    #000 18%,
    #000 var(--rail-gap-a, 100%),
    transparent calc(var(--rail-gap-a, 100%) + 14px),
    transparent var(--rail-gap-b, 100%),
    #000 calc(var(--rail-gap-b, 100%) + 14px),
    #000 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--shadow-rgb), 0.25) 4%,
    rgba(var(--shadow-rgb), 0.7) 10%,
    #000 18%,
    #000 var(--rail-gap-a, 100%),
    transparent calc(var(--rail-gap-a, 100%) + 14px),
    transparent var(--rail-gap-b, 100%),
    #000 calc(var(--rail-gap-b, 100%) + 14px),
    #000 100%);
}
.ns-spine__rail-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.14) 20%,
    rgba(255, 255, 255, 0.14) 80%,
    rgba(255, 255, 255, 0.05) 100%);
  border-radius: 999px;
}
.ns-spine__rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(220, 230, 240, 0.85) 50%,
    rgba(220, 230, 240, 0.55) 100%);
  border-radius: 999px;
  transform-origin: top center;
  transform: scaleY(var(--spine-progress));
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.45),
    0 0 28px rgba(220, 230, 240, 0.25);
  will-change: transform;
}

/* --- Stations-Liste: zentrische Stack-Komposition ----------- */
.ns-spine__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-y);
}

.ns-station {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--node-size) 1fr;
  grid-template-rows: auto;
  align-items: center;
  column-gap: clamp(20px, 3vw, 44px);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1)
      calc(var(--i, 0) * 120ms),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1)
      calc(var(--i, 0) * 120ms);
}
.ns-station.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Numeral: huge Italic, bündig zur Spine, alternierend Seite */
.ns-station__numeral {
  font-family: var(--font-display, "Instrument Serif"), serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(96px, 11vw, 168px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-align: right;
  background: linear-gradient(180deg,
    rgba(220, 230, 240, 0.95) 0%,
    rgba(var(--glow-rgb), 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  align-self: center;
  user-select: none;
}

.ns-station:nth-child(even) .ns-station__numeral {
  grid-column: 3;
  grid-row: 1;
  text-align: left;
}
.ns-station:nth-child(even) .ns-station__card {
  grid-column: 1;
  grid-row: 1;
}
.ns-station:nth-child(odd) .ns-station__numeral {
  grid-column: 1;
  grid-row: 1;
}
.ns-station:nth-child(odd) .ns-station__card {
  grid-column: 3;
  grid-row: 1;
}

/* Knoten an der Spine */
.ns-station__node {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  justify-self: center;
  align-self: center;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%,
    rgba(35, 56, 78, 0.95) 0%,
    rgba(19, 31, 43, 0.95) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px -10px rgba(var(--shadow-rgb), 0.6);
  color: rgba(255, 255, 255, 0.92);
  z-index: 2;
  transform: scale(0.6);
  transition:
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(var(--i, 0) * 120ms + 200ms),
    border-color 400ms ease,
    box-shadow 400ms ease;
}
.ns-station.is-revealed .ns-station__node {
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 4px rgba(255, 255, 255, 0.08),
    0 0 22px -4px rgba(255, 255, 255, 0.4);
}
.ns-station__node-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}
.ns-station.is-revealed .ns-station__node-pulse {
  animation: ns-node-pulse 2.8s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 120ms + 700ms);
}
@keyframes ns-node-pulse {
  0%   { transform: scale(0.85); opacity: 0.85; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Glas-Card pro Station — Split-Komposition: Bild + Body, edge-bleed.
   3D-Tilt-Pattern (siehe Section 09 / CLAUDE.md §0a Mouse-Tilt):
     --mx/--my werden per JS gesetzt (-1..+1), --tilt-max begrenzt
     den Roll-Winkel. Transform liegt auf der Card, der Reveal-
     Transform auf der parent .ns-station — sie kollidieren nicht. */
.ns-station__card {
  --mx: 0;
  --my: 0;
  --tilt-max: 7deg;
  width: 100%;
  max-width: var(--card-w);
  border-radius: clamp(18px, 1.4vw, 22px);
  overflow: hidden;
  background: linear-gradient(160deg,
    rgba(35, 56, 78, 0.55) 0%,
    rgba(19, 31, 43, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.35),
    0 8px 18px -10px rgba(var(--shadow-rgb), 0.45),
    0 28px 64px -30px rgba(var(--shadow-rgb), 0.65);
  /* §5a: kein backdrop-filter über uniform dunklem BG — Flicker-Schutz. */
  display: grid;
  grid-template-columns: 1fr var(--media-w);
  align-items: stretch;
  justify-self: end;
  min-height: clamp(180px, 18vw, 240px);
  transform-style: preserve-3d;
  transform: perspective(1100px)
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1))
    translateZ(0);
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 400ms ease,
    border-color 400ms ease;
  will-change: transform;
}
/* Aktive Maus-Tilt-Phase: kürzere Transition für Cursor-Follow. */
.ns-station__card.is-tilting {
  transition:
    transform 140ms ease-out,
    box-shadow 200ms ease,
    border-color 200ms ease;
}
/* Hover: leichter Z-Lift + verstärkter Schatten + heller Border. */
.ns-station__card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(var(--shadow-rgb), 0.4),
    0 14px 28px -14px rgba(var(--shadow-rgb), 0.55),
    0 40px 90px -36px rgba(var(--shadow-rgb), 0.75);
}
/* Glanz-Layer: dezente Sheen-Reflexion, folgt der Maus über --mx/--my.
   Schwebt vor dem Card-Content via Z-Translate für echten 3D-Effekt. */
.ns-station__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at calc(50% + var(--mx) * 35%) calc(50% + var(--my) * 35%),
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 45%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 3;
  transform: translateZ(1px);
}
.ns-station__card:hover::before { opacity: 1; }
.ns-station {
  /* Children werden auf 3D-Layer gehoben — gibt der Card Volumen. */
  position: relative;
}
.ns-station__card { position: relative; }
/* Even-Stationen: Card sitzt links der Spine → Bild auf der äußeren
   (linken) Seite, Body rechts (Richtung Spine). */
.ns-station:nth-child(even) .ns-station__card {
  justify-self: start;
  grid-template-columns: var(--media-w) 1fr;
}

.ns-station__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: rgba(19, 31, 43, 0.6);
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
}
.ns-station:nth-child(even) .ns-station__media {
  grid-column: 1;
}
/* Absolut positioniert: Bild diktiert NICHT die Card-Row-Höhe. */
.ns-station__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Angleich-Filter, damit die Stations-Bilder eine visuelle Familie
   bilden. BEWUSST an einer Modifier-Klasse statt an nth-child():
   die Startseite („So läuft's ab") und die Unterseiten („In drei
   Schritten") haben unterschiedliche Reihenfolgen — bis 2026-08-28
   hing die Regel an Position 3 und traf auf den Unterseiten damit
   das falsche Foto (dort sitzt der Handschlag an Position 2).
   --dim  : handschlag.webp — Outdoor-Shot, deutlich heller und
            gesättigter als die Indoor-Motive.
   --lift : fatih-kocak-86.webp — dunkler Pullover in dunklem Raum,
            fiel neben dem neuen Erstgespräch-Foto ab (Marie
            2026-08-28: „ein bisschen zu dunkel"). Wert bewusst
            zurückhaltend: 1.26 war Marie „zu krass aufgehellt",
            1.13 hält das Motiv als das dunkelste der Reihe —
            gemessene Helligkeit 62 → 93 (Nachbarn 128 / 122). */
.ns-station__media--dim img {
  filter: brightness(0.78) saturate(0.82) contrast(1.05);
}
.ns-station__media--lift img {
  filter: brightness(1.13) saturate(1.02) contrast(0.99);
}
/* Beschnitt-Anker links — für Querformat-Motive, deren Person nicht in
   der Bildmitte steht (Station 01 „Kontakt aufnehmen“,
   erstgespraech-telefonat.webp). In der schmalen Desktop-Bildspur
   (--media-w: 120–200px) wird aus einem 3:2-Foto ein hochkanter
   Ausschnitt; zentriert gerechnet fällt der Kopf aus der Spur.
   Unter 861px liegt das Bild als breites Kopfbild über der Karte —
   dort greift wieder der Standard-Anker der Mobil-Regel. */
@media (min-width: 861px) {
  .ns-station__media--anchor-left img { object-position: 10% center; }
}

.ns-station__body {
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ns-station:nth-child(even) .ns-station__body {
  grid-column: 2;
}

.ns-station__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.35);
  color: var(--accent-hover, #4DA8DA);
  font-family: var(--font-ui, "Montserrat"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ns-station__title {
  font-family: var(--font-display, "Instrument Serif"), serif;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Token-getrieben (Marie 2026-06-19): war var(--text-primary,#ECEFF8)
     — --text-primary ist nirgends definiert, also immer das Literal.
     --heading-color folgt dem Theme (Dark/Subpage-Light = passend) und
     wird auf den Home-Dark-Inseln per Insel-Token auf Weiß gedreht. */
  color: var(--heading-color);
  margin: 0 0 10px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ns-station__text {
  font-family: var(--font-ui, "Montserrat"), sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(236, 239, 248, 0.78);
  margin: 0;
  overflow-wrap: break-word;
}

/* Kontakt-Block (Step 1) — alles in einer Zeile:
   grüner Live-Dot + „Jetzt erreichbar" + Telefon-Icon + Nummer.
   Telefon-Typo + Icon-Setup identisch zum Header (.navbar__phone). */
.ns-station__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  align-self: flex-start;
}
.ns-station__status {
  font-family: var(--font-ui, "Montserrat"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(236, 239, 248, 0.82);
}
/* Live-Status-Dot: Grün (Marie-Wunsch, §5a — kein CI-Token,
   bewusster „Online/Verfügbar"-Status-Indicator). */
.ns-station__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  animation: ns-status-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ns-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    transform: scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ns-station__status-dot { animation: none; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); }
}

.ns-station__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-100, var(--text-primary, #ECEFF8));
  font-family: var(--font-ui, "Montserrat"), sans-serif;
  font-weight: var(--weight-semibold, 600);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration, 200ms) var(--ease, ease);
}
.ns-station__phone .icon {
  color: var(--accent-hover, #4DA8DA);
  flex-shrink: 0;
}
.ns-station__phone-number {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transition: text-decoration-color var(--duration, 200ms) var(--ease, ease);
}
.ns-station__phone:hover .ns-station__phone-number,
.ns-station__phone:focus-visible .ns-station__phone-number {
  text-decoration-color: var(--accent-hover, #4DA8DA);
}
.ns-station__phone:focus-visible {
  outline: 2px solid var(--accent, #2a90c5);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Finale-Karte (Conversion am Spine-Endpunkt) ------------ */
.ns-finale {
  position: relative;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(48px, 5vw, 72px);
  z-index: 1;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1)
      calc(var(--i, 3) * 120ms),
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1)
      calc(var(--i, 3) * 120ms);
}
.ns-finale.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.ns-finale__node {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(54px, 5.4vw, 68px);
  height: clamp(54px, 5.4vw, 68px);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(220, 230, 240, 0.95) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.1),
    0 0 32px rgba(255, 255, 255, 0.45);
  z-index: 3;
}
.ns-finale__node-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
}
.ns-finale.is-revealed .ns-finale__node-pulse {
  animation: ns-finale-pulse 3.2s ease-out infinite;
  animation-delay: 600ms;
}
.ns-finale.is-revealed .ns-finale__node-pulse--lag {
  animation-delay: 1.6s;
}
@keyframes ns-finale-pulse {
  0%   { transform: scale(0.85); opacity: 0.85; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.ns-finale__card {
  position: relative;
  max-width: clamp(720px, 86vw, 1120px);
  margin-inline: auto;
  border-radius: clamp(20px, 1.6vw, 28px);
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 0%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg,
      rgba(12, 20, 28, 0.97) 0%,
      rgba(12, 20, 28, 1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 36px 80px -32px rgba(var(--shadow-rgb), 0.7);
  /* §5a: kein backdrop-filter — Flicker-Schutz. */
  display: grid;
  grid-template-columns: clamp(220px, 32%, 360px) 1fr;
  align-items: stretch;
  text-align: left;
  min-height: clamp(300px, 28vw, 400px);
}

.ns-finale__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: rgba(19, 31, 43, 0.6);
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
}
/* Absolut positioniert, damit das Bild NICHT die Row-Höhe diktiert
   (sonst zieht das 1200×1799-Aspect die Card auf ~540 px Höhe). */
.ns-finale__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: block;
}
/* Sanfter Verlauf am rechten Bildrand → Übergang in die Body-Spalte */
.ns-finale__media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(40px, 5vw, 80px);
  background: linear-gradient(90deg,
    rgba(19, 31, 43, 0) 0%,
    rgba(19, 31, 43, 0.45) 100%);
  pointer-events: none;
}

.ns-finale__body {
  grid-column: 2;
  grid-row: 1;
  padding: clamp(20px, 2.2vw, 32px) clamp(28px, 3.4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ns-finale__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--glow-rgb), 0.14);
  border: 1px solid rgba(var(--glow-rgb), 0.4);
  color: var(--accent-hover, #4DA8DA);
  font-family: var(--font-ui, "Montserrat"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  align-self: flex-start;
}
.ns-finale__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-hover, #4DA8DA);
  box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.85);
  animation: ns-finale-dot 2s ease-in-out infinite;
}
@keyframes ns-finale-dot {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

.ns-finale__title {
  font-family: var(--font-display, "Instrument Serif"), serif;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  /* siehe .ns-station__title: token-getrieben statt undefiniertem
     --text-primary-Literal (Marie 2026-06-19). */
  color: var(--heading-color);
  margin: 0 0 10px;
  hyphens: manual;
  overflow-wrap: break-word;
}
.ns-finale__title em {
  font-style: italic;
  /* Globales h1/h2-Pattern (180deg, Silber-Blau → Accent-Hover) —
     identisch zur globalen Regel, lokal definiert weil H3. */
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ns-finale__text {
  font-family: var(--font-ui, "Montserrat"), sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(236, 239, 248, 0.82);
  margin: 0 0 16px;
  max-width: 56ch;
  overflow-wrap: break-word;
}
.ns-finale__cta { align-self: flex-start; }

/* --- Responsivität ------------------------------------------ */
@media (max-width: 860px) {
  .ns-spine {
    --node-size: clamp(40px, 9vw, 52px);
  }
  /* Spine wandert nach links, Stationen werden linksbündig */
  .ns-spine__rail {
    left: clamp(22px, 6vw, 32px);
    transform: none;
  }
  .ns-station {
    grid-template-columns: var(--node-size) 1fr !important;
    grid-template-rows: auto auto;
    padding-left: 0;
    margin-left: clamp(8px, 2vw, 16px);
    column-gap: clamp(16px, 3vw, 24px);
  }
  .ns-station__numeral,
  .ns-station:nth-child(even) .ns-station__numeral,
  .ns-station:nth-child(odd) .ns-station__numeral {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left;
    font-size: clamp(72px, 18vw, 120px);
    margin-bottom: 4px;
  }
  .ns-station__node {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start;
    margin-top: clamp(14px, 4vw, 22px);
  }
  .ns-station__card,
  .ns-station:nth-child(even) .ns-station__card,
  .ns-station:nth-child(odd) .ns-station__card {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start;
    max-width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: clamp(210px, 66vw, 300px) auto;
    min-height: 0;
  }
  .ns-station__media,
  .ns-station:nth-child(even) .ns-station__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .ns-station__media img { object-position: center 28%; }
  /* Kopf-Anker je Motiv (Handy): das höhere Bildfeld zeigt die Gesichter
     vollständig — Person 01 sitzt oben rechts, Person 02 knapp unter dem
     Bildrand, das Telefonat-Foto oben mittig. */
  .ns-station__media img[src$="01-infos-am-handy.webp"] { object-position: 72% 42%; }
  .ns-station__media img[src$="02-wir-bauen-am-laptop.webp"] { object-position: center 4%; }
  .ns-station__media img[src$="erstgespraech-telefonat.webp"] { object-position: 30% 20%; }
  .ns-station__body,
  .ns-station:nth-child(even) .ns-station__body {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .ns-finale__node {
    left: clamp(22px, 6vw, 32px);
  }
  .ns-finale__card {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: clamp(220px, 56vw, 320px) auto;
    text-align: left;
    min-height: 0;
  }
  .ns-finale__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .ns-finale__media::after {
    inset: auto 0 0 0;
    width: 100%;
    height: clamp(40px, 10vw, 80px);
    background: linear-gradient(180deg,
      rgba(19, 31, 43, 0) 0%,
      rgba(19, 31, 43, 0.55) 100%);
  }
  .ns-finale__body {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: clamp(24px, 6vw, 36px) clamp(22px, 5vw, 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-station,
  .ns-finale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ns-station__node {
    transform: scale(1);
    transition: none;
  }
  .ns-station__node-pulse,
  .ns-finale__node-pulse,
  .ns-finale__chip-dot {
    animation: none;
    opacity: 0;
  }
  .ns-spine__rail-fill {
    transform: scaleY(1);
  }
  .ns-station__card {
    --mx: 0;
    --my: 0;
    transform: none;
    transition: none;
  }
  .ns-station__card::before { display: none; }
}
/* Touch-/Coarse-Pointer-Geräte: kein Tilt, kein Glanz-Layer. */
@media (hover: none), (pointer: coarse) {
  .ns-station__card {
    --mx: 0;
    --my: 0;
    transform: none;
  }
  .ns-station__card::before { display: none; }
}

/* --- „So läuft's ab"-Closing (v6 S11, 2026-07-08) -------------
   Zentrierte Abschluss-Zeile zwischen den 4 Stationen und der
   Finale-Conversion-Card = der Abbinder der Schritt-Spur (Copy-Paket
   S11, letzter Absatz).
   Überarbeitung 2026-08-03 (Marie: „der ist irgendwie sehr random da
   eingebaut"): Die Zeile stand als nackter Fließtext auf der Achse,
   die Spine-Linie lief mitten hindurch — sie sah aus wie zwischen zwei
   Elemente gefallen. Jetzt liest sie sich als eigener Takt der Spur:
   die Schiene bekommt ein Fenster (Maske, siehe .ns-spine__rail), über
   dem Satz sitzt ein kurzer Endpunkt-Strich als sichtbarer Abschluss
   der vier Schritte, und der Satz selbst trägt Lead-Größe statt
   Body-Größe. Der Kern-Beleg ist per <em> akzentuiert (Montserrat +
   Cyan wie in den Testimonial-Zitaten, §5a — KEIN Italic-Gradient,
   der ist Headlines vorbehalten). */
.ns-note {
  position: relative;
  z-index: 1;
  max-width: 54ch;
  margin: clamp(36px, 4.6vw, 60px) auto clamp(40px, 5.2vw, 68px);
  padding-top: clamp(26px, 3vw, 38px);
  text-align: center;
  color: var(--text-200);
  font-size: var(--text-lead);
  line-height: 1.75;
  text-wrap: balance;
}
/* Endpunkt der Schritt-Spur: kurzer, zur Mitte hin heller Strich —
   nimmt die Linienführung der Schiene auf, ohne sie fortzusetzen. */
.ns-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(56px, 7vw, 88px);
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), 0.55) 50%,
    rgba(var(--glow-rgb), 0) 100%);
}
.ns-note em {
  font-style: normal;
  color: var(--accent-hover);
}
/* Mobil sitzt die Schiene links (nicht mittig) — der Endpunkt-Strich
   wandert mit auf ihre Achse, sonst schwebt er ohne Bezug in der Mitte.
   Der Satz bleibt zentriert (er fasst die Spur zusammen). */
@media (max-width: 860px) {
  .ns-note::before {
    left: clamp(22px, 6vw, 32px);
    width: clamp(34px, 10vw, 48px);
  }
}


/* ===========================================================
   Section „Passt das zu dir?" — Eignungs-Filter (NUR Startseite,
   Copy-Paket v6 S13, neu 2026-07-08)
   Zweispaltig: links Copy (Eyebrow + H2 + Intro + ehrlicher
   Abschluss + Signature-CTA), rechts der „ehrliche Check" als
   bewusst DUNKLE Kriterien-Kachel (in beiden Themes dunkel —
   Karten-Dunkel-Insel-Pattern §0a; auf dem hellen Band wird sie
   zum Kontrast-Anker). 3 Häkchen-Zeilen mit Icon-Badges.
   Reveal: IO one-shot auf [data-fitcheck] → .is-revealed,
   Zeilen staffeln via --i.
   =========================================================== */
.fitcheck {
  position: relative;
  padding-block: var(--section-py);
}

.fitcheck__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 1024px) {
  .fitcheck__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* --- Copy-Spalte ------------------------------------------- */
.fitcheck__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.fitcheck__title {
  margin: 0;
  max-width: 28ch; /* 20→28ch (Marie 2026-09-02): vollere Zeilen */
  /* §5a-Pattern: Auto-Hyphenation trennte „je-dem" mitten im
     Kern-Statement — manuelle Kontrolle wie .capacity__title. */
  hyphens: manual;
  -webkit-hyphens: manual;
}
.fitcheck__lead,
.fitcheck__note {
  margin: 0;
  max-width: 52ch;
  color: var(--text-200);
  line-height: 1.7;
}
.fitcheck__cta {
  margin-top: var(--space-2);
}

/* --- Kriterien-Kachel („Der ehrliche Check") ----------------
   Bewusst opak dunkel in BEIDEN Themes (Karten-Dunkel-Insel):
   Kinder laufen über lokale Dark-Tokens, damit der Look im
   Light-Theme identisch bleibt. */
.fitcheck__panel {
  --text-100: #F4F7FA;
  --text-200: #C2CDD8;
  --glass-border: rgba(255, 255, 255, 0.14);
  --glow-rgb: 77, 168, 218;
  position: relative;
  border-radius: var(--radius-lg, 24px);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(var(--glow-rgb), 0.10) 0%, rgba(var(--glow-rgb), 0) 55%),
    linear-gradient(160deg, #18242F 0%, #101B26 55%, #0C141C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.35);
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
}
/* Feine Cyan-Top-Linie als Akzent (analog .vs-card--bese) */
.fitcheck__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), 0.75) 50%,
    rgba(var(--glow-rgb), 0) 100%);
  opacity: 0.9;
}

.fitcheck__panel-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui, "Montserrat"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-200);
  margin-bottom: clamp(18px, 2vw, 26px);
}
.fitcheck__panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-hover, #4DA8DA);
  box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.8);
}

.fitcheck__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fitcheck__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  padding-block: clamp(16px, 1.8vw, 22px);
  /* Reveal-Initial-State (IO setzt .is-revealed auf der Section) */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 0.14s);
}
.fitcheck__item + .fitcheck__item {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.fitcheck.is-revealed .fitcheck__item {
  opacity: 1;
  transform: none;
}

.fitcheck__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4.4vw, 52px);
  height: clamp(44px, 4.4vw, 52px);
  border-radius: 14px;
  border: 1px solid rgba(var(--glow-rgb), 0.35);
  background: rgba(var(--glow-rgb), 0.10);
  color: var(--accent-hover, #4DA8DA);
  flex: none;
}
.fitcheck__badge .icon {
  width: clamp(20px, 2vw, 24px);
  height: clamp(20px, 2vw, 24px);
}
.fitcheck__item-text {
  margin: 0;
  color: var(--text-100);
  font-size: var(--text-body);
  line-height: 1.6;
}
.fitcheck__tick {
  color: var(--accent-hover, #4DA8DA);
  opacity: 0.9;
  flex: none;
}

/* Copy-Spalte Reveal (weich nach den Zeilen) */
.fitcheck__copy > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fitcheck__copy > *:nth-child(1) { transition-delay: 0s; }
.fitcheck__copy > *:nth-child(2) { transition-delay: 0.08s; }
.fitcheck__copy > *:nth-child(3) { transition-delay: 0.16s; }
.fitcheck__copy > *:nth-child(4) { transition-delay: 0.24s; }
.fitcheck__copy > *:nth-child(5) { transition-delay: 0.32s; }
.fitcheck.is-revealed .fitcheck__copy > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fitcheck__item,
  .fitcheck__copy > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ===========================================================
   AG/MA-Paket-Sektionen (neu 2026-07-09):
   .ra     — AG S4 „Die richtigen Aufträge" (Zwei-Anrufe-Visual)
   .mawx   — MA S4 „Wahrheit über Wachstum" (Balance)
   .maweg  — MA S5 „Der 5-Stufen-Weg"
   .mapc   — MA S7 „Sieh, was bei dir geht" (CTA-Band)
   .mahand — MA S9 „Aufträge + Leute aus einer Hand" (App-Panel)
   .manf   — MA S10 „Die Nachfolge-Frage"
   Gemeinsames Reveal: [data-reveal] → .is-revealed (IO-Hook in
   scripts.html), Kinder staffeln über --i (§5a-Timing-Parameter).
   =========================================================== */

/* §5a-Pattern: Auto-Hyphenation trennte „rich-tige" / „weiter-macht"
   mitten in den Kern-Headlines → manuelle Kontrolle auf allen
   Headlines der neuen Sektionen (wie .capacity__title). */
.ra__title,
.mawx .section-header__title,
.maweg .section-header__title,
.mapc__title,
.mahand__title,
.manf__title {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* --- Gemeinsame Reveal-Initial-States ------------------------ */
[data-reveal] :is(.ra-ticket, .ra__scanline, .mawx__row, .mawx__sum, .mawx__photo, .mawx__note, .maweg__step, .maweg__outro, .mapc__inner > *, .mapc__photo,
  .mahand__lane, .mahand__control, .manf__photo, .manf__body, .manf__note) {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.1s),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.1s);
}
[data-reveal].is-revealed :is(.ra-ticket, .ra__scanline, .mawx__row, .mawx__sum, .mawx__photo, .mawx__note, .maweg__step, .maweg__outro,
  .mapc__inner > *, .mapc__photo, .mahand__lane, .mahand__control, .manf__photo,
  .manf__body, .manf__note) {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] :is(.ra-ticket, .ra__scanline, .mawx__row, .mawx__sum, .mawx__photo, .mawx__note, .maweg__step, .maweg__outro, .mapc__inner > *, .mapc__photo,
    .mahand__lane, .mahand__control, .manf__photo, .manf__body, .manf__note) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- .ra — Die richtigen Aufträge (AG S4) ---------- */
.ra {
  position: relative;
  padding-block: var(--section-py);
}
.ra__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 1024px) {
  .ra__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.ra__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.ra__title {
  margin: 0;
  max-width: 22ch;
}
.ra__body {
  margin: 0;
  max-width: 54ch;
  color: var(--text-200);
  line-height: 1.75;
}

/* Anruf-Tickets: bewusst OPAKE dunkle Kacheln in BEIDEN Themes
   (Karten-Dunkel-Insel §0a) — auf dem hellen Band der Kontrast-Anker,
   im Dark-Theme eine Geräte-Fläche. Charcoal-Familie der Startseite. */
.ra-ticket {
  --text-100: rgba(255, 255, 255, 0.90);
  --text-200: rgba(255, 255, 255, 0.62);
  --glow-rgb: 77, 168, 218;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
  border-radius: var(--radius-lg, 24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(160deg, #26282C 0%, #1B1D20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 54px -26px rgba(0, 0, 0, 0.45);
  /* Maus-Tilt (Variante B) — Transform lebt in der .is-revealed-Regel
     unten (§0a Reveal-Kollision) */
  --mx: 0;
  --my: 0;
  --tilt-max: 5deg;
  --lift: 0px;
}
.ra-ticket--small {
  opacity: 0.999; /* eigener Layer */
  filter: saturate(0.75);
  max-width: 88%;
}
.ra-ticket--big {
  border-color: rgba(var(--glow-rgb), 0.35);
  background:
    radial-gradient(130% 100% at 90% 0%, rgba(var(--glow-rgb), 0.12) 0%, rgba(var(--glow-rgb), 0) 55%),
    linear-gradient(160deg, #26282C 0%, #17191D 100%);
  margin-left: auto;
  max-width: 94%;
}
/* Cyan-Top-Linie auf dem Featured-Ticket (analog .vs-card--bese) */
.ra-ticket--big::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), 0.8) 50%,
    rgba(var(--glow-rgb), 0) 100%);
}
.ra-ticket__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ra-ticket__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-200);
  flex: none;
}
.ra-ticket__icon--hot {
  border-color: rgba(var(--glow-rgb), 0.4);
  background: rgba(var(--glow-rgb), 0.12);
  color: var(--accent-hover, #4DA8DA);
}
.ra-ticket__meta {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-200);
}
.ra-ticket__value {
  margin-left: auto;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: var(--text-200);
  white-space: nowrap;
}
.ra-ticket__value--big {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  background: linear-gradient(92deg, var(--silver-blue, #B3CCDF), var(--accent-hover, #4DA8DA));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* §1.6: Italic-Glyphen-Überstand nicht abschneiden */
  padding-inline: 0.08em;
  margin-inline: -0.04em;
}
.ra-ticket__text {
  margin: 0;
  color: var(--text-100);
  font-size: var(--text-body);
  line-height: 1.6;
}
.ra-ticket__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 13px;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ra-ticket__tag--muted {
  color: var(--text-200);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.ra-ticket__tag--ai {
  color: var(--accent-hover, #4DA8DA);
  border: 1px solid rgba(var(--glow-rgb), 0.4);
  background: rgba(var(--glow-rgb), 0.10);
  text-transform: none;
  letter-spacing: 0.02em;
}
.ra-ticket__tag--ai .icon { color: var(--accent-hover, #4DA8DA); }

/* Verbindungs-Scanline zwischen den Tickets: Bese-AI „liest" beide */
.ra__scanline {
  position: relative;
  width: 2px;
  height: clamp(28px, 3.4vw, 44px);
  margin-left: clamp(48px, 22%, 180px);
  background: linear-gradient(180deg,
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), 0.55) 50%,
    rgba(var(--glow-rgb), 0) 100%);
}
.ra__scan-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent-hover, #4DA8DA);
  box-shadow: 0 0 12px rgba(var(--glow-rgb), 0.9);
  animation: ra-scan 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
.ra.is-revealed .ra__scan-dot { animation-play-state: running; }
@keyframes ra-scan {
  0%, 100% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  50% { top: 100%; opacity: 1; }
  65% { opacity: 0; }
}

/* Maus-Tilt auf den Tickets (Variante B, §0a) — Transform in der
   Reveal-End-Regel, damit er nicht mit dem Einblenden kollidiert. */
.ra.is-revealed .ra-ticket {
  transform:
    perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
}
.ra-ticket:hover { --lift: -3px; }
.ra-ticket.is-tilting {
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 140ms ease-out;
}
@media (hover: none), (pointer: coarse) {
  .ra.is-revealed .ra-ticket { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ra.is-revealed .ra-ticket { transform: none; }
  .ra__scan-dot { animation: none; opacity: 0; }
}

/* ---------- Copy-Hierarchie (Marie 2026-09-10: „links zu viel Text")
   Wortlaut unverändert (§1.13) — sichtbar gemacht wird nur, dass die
   drei Absätze verschiedene Rollen haben: Lead → Argument → Beleg. */
.ra__body--lead {
  font-size: var(--text-lead);
  color: var(--text-100);
}
.ra__body--proof {
  position: relative;
  padding-left: clamp(16px, 1.6vw, 22px);
  font-size: 15px;
  color: var(--text-200);   /* --text-200, nicht --text-300: 15-px-Fließtext braucht ≥ 4,5:1 (Light-Theme --text-300 misst 2,95:1) */
}
.ra__body--proof::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(var(--glow-rgb), 0.55) 0%,
    rgba(var(--glow-rgb), 0.10) 100%);
}

/* ---------- Bühne als Sequenz (Marie 2026-09-10: „rechts ist die
   Animation zu gering") ---------------------------------------------
   Ein Zyklus von 12 s, reines CSS, gepaused bis .ra.is-revealed:
     0.0–0.9 s  Anruf A fliegt herein
     1.4–2.2 s  A wird als Routine abgehakt und tritt zurück
     2.6–3.5 s  Anruf B fliegt herein
     3.9–5.3 s  Bese-AI liest B (Scan-Balken wandert über die Karte)
     5.4 s      „Sanierung dahinter erkannt" + Wert-Balken wachsen
     5.4–10.6 s Halten
    10.6–11.6 s alles blendet ab, dann von vorn
   Die Karten behalten dabei ihre Größe — es bewegen sich nur Deckkraft,
   ein kurzer Y-Versatz und die Balkenbreite (kein Layout-Reflow). */
.ra__stage {
  --ra-cycle: 12s;
}

/* Die drei Bühnen-Elemente starten unsichtbar und kommen im Takt.
   WICHTIG: die Tickets tragen ihren Tilt-Transform in der
   .ra.is-revealed-Regel (§0a Reveal-Kollision) — die Sequenz animiert
   deshalb NUR opacity und einen eigenen Offset über die
   translate-Property, nicht über transform. */
.ra.is-revealed .ra-ticket--small {
  animation: ra-seq-a var(--ra-cycle) linear infinite;
}
.ra.is-revealed .ra-ticket--big {
  animation: ra-seq-b var(--ra-cycle) linear infinite;
}
@keyframes ra-seq-a {
  0%              { opacity: 0; translate: 0 16px; }
  7.5%            { opacity: 1; translate: 0 0; }
  18%             { opacity: 1; }
  /* nach dem Abhaken tritt der Routine-Anruf zurück */
  22%, 88%        { opacity: 0.5; translate: 0 0; }
  97%, 100%       { opacity: 0; translate: 0 8px; }
}
@keyframes ra-seq-b {
  0%, 21%         { opacity: 0; translate: 0 18px; }
  29%             { opacity: 1; translate: 0 0; }
  88%             { opacity: 1; translate: 0 0; }
  97%, 100%       { opacity: 0; translate: 0 8px; }
}

/* Der Routine-Tag erscheint, wenn A abgehakt ist. */
.ra.is-revealed .ra-ticket--small .ra-ticket__tag {
  animation: ra-seq-tag-a var(--ra-cycle) linear infinite;
}
@keyframes ra-seq-tag-a {
  0%, 11%   { opacity: 0; }
  15%, 88%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* Bese-AI liest den zweiten Anruf: ein Lichtbalken wandert über die
   Karte. Eigenes Element wäre Markup — hier reicht das ::before, das
   die Featured-Karte ohnehin schon trägt … deshalb ein ::after. */
.ra-ticket--big { position: relative; overflow: hidden; }
.ra-ticket--big::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(var(--glow-rgb), 0) 42%,
    rgba(var(--glow-rgb), 0.16) 50%,
    rgba(var(--glow-rgb), 0) 58%);
  opacity: 0;
}
.ra.is-revealed .ra-ticket--big::after {
  animation: ra-seq-scan var(--ra-cycle) linear infinite;
}
@keyframes ra-seq-scan {
  0%, 32%   { opacity: 0; background-position: -140% 0; }
  33%       { opacity: 1; background-position: -140% 0; }
  44%       { opacity: 1; background-position: 140% 0; }
  46%, 100% { opacity: 0; background-position: 140% 0; }
}

/* Das Urteil poppt nach dem Scan. */
.ra.is-revealed .ra-ticket__tag--ai {
  animation: ra-seq-verdict var(--ra-cycle) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ra-seq-verdict {
  0%, 44%   { opacity: 0; translate: 0 6px; }
  47%       { opacity: 1; translate: 0 0; }
  88%       { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}

/* ---------- Wert-Vergleich ---------------------------------------- */
/* EIN gemeinsames Raster für beide Balken: die Zellen der Balken sind
   per display:contents direkte Grid-Kinder, damit Label-, Spur- und
   Wert-Spalte über beide Zeilen exakt fluchten. Mit je eigenem Grid
   waren die Spuren unterschiedlich breit (142 px vs. 82 px bei 320 px,
   gemessen 2026-09-10) — das verfälscht genau den Größenvergleich,
   um den es hier geht. */
.ra__compare {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--glass-border);
  display: grid;
  grid-template-columns: minmax(0, 86px) minmax(0, 1fr) auto;
  column-gap: clamp(10px, 1.2vw, 16px);
  row-gap: 12px;
  align-items: center;
}
/* Zellen EXPLIZIT platzieren (Zeile UND Spalte). Grid-Auto-Placement
   arbeitet „sparse": nachdem der Wert in Spalte 3 gesetzt war, konnte
   die danach folgende Spur nicht mehr in die freie Spalte 2 derselben
   Zeile zurück und rutschte in die nächste — der Desktop sah aus wie
   das Mobil-Layout (gemessen 2026-09-10). */
.ra__bar { display: contents; }
.ra__bar--small .ra__bar-label,
.ra__bar--small .ra__bar-track,
.ra__bar--small .ra__bar-value { grid-row: 2; }
.ra__bar--big .ra__bar-label,
.ra__bar--big .ra__bar-track,
.ra__bar--big .ra__bar-value { grid-row: 3; }
.ra__bar-label { grid-column: 1; }
.ra__bar-track { grid-column: 2; }
.ra__bar-value { grid-column: 3; }
.ra__compare-cap {
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Versal-Kleintext eine Stufe kräftiger (Projekt-Regel) */
  color: var(--text-200);
}
.ra__bar-label {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-200);
}
.ra__bar-track {
  position: relative;
  height: 10px;
  border-radius: 9999px;
  background: rgba(var(--shadow-rgb), 0.28);
  overflow: hidden;
}
html[data-theme="light"] .ra__bar-track { background: rgba(var(--shadow-rgb), 0.14); }
.ra__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  border-radius: 9999px;
  background: linear-gradient(90deg,
    rgba(var(--glow-rgb), 0.45) 0%,
    var(--accent-hover) 100%);
}
.ra__bar--small .ra__bar-fill { background: linear-gradient(90deg, var(--text-400), var(--text-300)); }
.ra__bar-value {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 19px);
  font-style: italic;
  color: var(--text-200);
  white-space: nowrap;
}
.ra__bar--big .ra__bar-value { color: var(--accent-hover); }

/* Unter 480 px reicht die Breite nicht für drei Spalten (Spur wäre
   ~74 px): Label und Wert teilen sich Zeile 1, die Spur läuft in
   Zeile 2 über die volle Breite. */
@media (max-width: 479px) {
  .ra__compare {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  /* Je Balken zwei Zeilen: Label + Wert oben, Spur darunter über die
     volle Breite. Zeilen wieder explizit, aus demselben Grund wie oben. */
  .ra__bar--small .ra__bar-label,
  .ra__bar--small .ra__bar-value { grid-row: 2; }
  .ra__bar--small .ra__bar-track { grid-row: 3; }
  .ra__bar--big .ra__bar-label,
  .ra__bar--big .ra__bar-value { grid-row: 4; }
  .ra__bar--big .ra__bar-track { grid-row: 5; }
  .ra__bar-label { grid-column: 1; }
  .ra__bar-value { grid-column: 2; text-align: right; }
  .ra__bar-track { grid-column: 1 / -1; }
  /* Abstand zwischen den beiden Balken-Gruppen */
  .ra__bar--big .ra__bar-label,
  .ra__bar--big .ra__bar-value { margin-top: 8px; }
}

/* Die Balken wachsen erst, wenn Bese-AI eingeordnet hat (ab 47 % des
   Zyklus). Ohne JS/Reveal stehen sie auf ihrer Endbreite (No-JS- und
   Reduced-Motion-Zustand, s. u.). */
.ra__bar--small .ra__bar-fill { --w: 12%; }
.ra__bar--big   .ra__bar-fill { --w: 100%; }
.ra.is-revealed .ra__bar--small .ra__bar-fill {
  animation: ra-seq-bar-a var(--ra-cycle) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ra.is-revealed .ra__bar--big .ra__bar-fill {
  animation: ra-seq-bar-b var(--ra-cycle) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ra-seq-bar-a {
  0%, 45%   { width: 0%; }
  52%, 88%  { width: 12%; }
  97%, 100% { width: 0%; }
}
@keyframes ra-seq-bar-b {
  0%, 47%   { width: 0%; }
  62%, 88%  { width: 100%; }
  97%, 100% { width: 0%; }
}
/* Der Vergleichs-Block selbst blendet mit der Sequenz ein. */
.ra.is-revealed .ra__compare {
  animation: ra-seq-compare var(--ra-cycle) linear infinite;
}
@keyframes ra-seq-compare {
  0%, 40%   { opacity: 0; }
  47%, 88%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* Sequenz anhalten, sobald die Sektion den Viewport verlässt oder der
   Tab in den Hintergrund geht: `.is-paused` kommt vom Block
   „Schleifen-Sektionen pausieren" in scripts.html ([data-loop-pause]) —
   der generische [data-reveal]-Hook ist one-shot und die Sequenz liefe
   sonst für den Rest der Sitzung weiter.

   SPEZIFITÄT IST HIER DER GANZE TRICK (Guardian-Blocker 2026-09-10):
   Die Trigger-Regeln setzen die Läufe über das `animation`-SHORTHAND —
   und das setzt `animation-play-state: running` implizit mit. Eine
   Pause-Regel muss die Trigger-Regel also nicht nur ergänzen, sondern
   SCHLAGEN. Die erste Fassung stand auf `.ra .ra-ticket--small` (0,2,0)
   gegen `.ra.is-revealed .ra-ticket--small` (0,3,0) und war damit
   wirkungslos; die Sequenz lief trotz `.is-paused` weiter (empirisch
   verifiziert). Jede Zeile unten spiegelt deshalb die Spezifität ihrer
   Trigger-Regel exakt und steht später im Quelltext.
   Vorbild im selben Update: `.kspez.is-paused .kspez__caret`. */
.ra.is-paused .ra-ticket--small,
.ra.is-paused .ra-ticket--big,
.ra.is-paused .ra-ticket__tag--ai,
.ra.is-paused .ra__compare {
  animation-play-state: paused;                 /* 0,3,0 = Trigger */
}
.ra.is-paused .ra-ticket--small .ra-ticket__tag,
.ra.is-paused .ra__bar--small .ra__bar-fill,
.ra.is-paused .ra__bar--big .ra__bar-fill {
  animation-play-state: paused;                 /* 0,4,0 = Trigger */
}
.ra.is-paused .ra-ticket--big::after {
  animation-play-state: paused;                 /* 0,3,1 = Trigger */
}

@media (prefers-reduced-motion: reduce) {
  /* Endzustand statisch: beide Anrufe da, Urteil sichtbar, Balken auf
     ihrer Endbreite (die kommt aus der Basisregel `width: var(--w)`).
     WICHTIG — die Selektoren spiegeln die der Animations-Zuweisungen
     Zeichen für Zeichen: eine kürzere `:is()`-Sammelregel (0,3,0) verlor
     gegen `.ra.is-revealed .ra__bar--big .ra__bar-fill` (0,4,0), und die
     Sequenz lief bei prefers-reduced-motion einfach weiter (gemessen
     2026-09-10). Ein @media-Block erhöht die Spezifität NICHT. */
  .ra.is-revealed .ra-ticket--small,
  .ra.is-revealed .ra-ticket--big,
  .ra.is-revealed .ra-ticket--small .ra-ticket__tag,
  .ra.is-revealed .ra-ticket__tag--ai,
  .ra.is-revealed .ra__compare,
  .ra.is-revealed .ra__bar--small .ra__bar-fill,
  .ra.is-revealed .ra__bar--big .ra__bar-fill {
    animation: none;
    opacity: 1;
    translate: none;
  }
  .ra.is-revealed .ra-ticket--big::after { animation: none; opacity: 0; }
}

/* ---------- .kspez — Spezialisiert auf dein Gewerk (Kanalservice S4,
   neu 2026-07-15, Paket BRANCHE-KANALSERVICE.md): zweispaltig, links
   Copy, rechts das Suchanfragen-Panel — eine feste dunkle
   „Geräte"-Fläche wie .bsys-app (lesbar in BEIDEN Themes, §5a):
   Innen-Farben über lokale --kspez-*-Tokens, NICHT die globalen
   Theme-Tokens. Reveal über den generischen [data-reveal]-Hook,
   Zeilen staffeln via --i.
   Die Basis-Regeln hier (Grid, Panel, Suchfeld, Zeilen, Pillen) sind
   seit 2026-09-19 ohne aktiven Zweispalten-Nutzer: Schädlingsbekämpfung
   trägt die Fassung „Die Suche" (.sfok/.sfs, Block am Dateiende), die
   Website-Fassung liegt in _ARCHIV-website-entfernte-sektionen.html
   (reaktivierbar, darum bleiben die Regeln); Kanalservice fährt
   seit 2026-09-10 die Fassung „Dossier" (.kspez--dossier, eigener
   Block hinter dem reduced-motion-Zweig) und verbraucht davon nur
   Suchfeld, Zeilen, Pillen, den Live-Punkt und den H2-Grundstil
   (.kspez__title). ---------- */
.kspez {
  position: relative;
  padding-block: var(--section-py);
}
.kspez__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  /* Zweispalten-Fassung: seit 19.09. ohne aktiven Nutzer (Schädlinge →
     .sfok, Website archiviert), reaktivierbar. Kanalservice fährt seit 2026-09-10 die
     Fassung „Dossier" (.kspez--dossier, Block unten). */
  align-items: start;
}
@media (min-width: 1024px) {
  .kspez__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.kspez__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.kspez__title {
  margin: 0;
  max-width: 24ch;
  /* §5a-Pattern: Auto-Hyphenation würde „Kanal-service" trennen */
  hyphens: manual;
  -webkit-hyphens: manual;
}
.kspez__body {
  margin: 0;
  max-width: 54ch;
  color: var(--text-200);
  line-height: 1.75;
}

/* Suchanfragen-Panel: feste dunkle Geräte-Fläche (beide Themes) —
   Werte 1:1 wie .bsys-app (§5a-Geräte-Panel-Ausnahme: Gradient,
   Border rgba(214,230,245,0.12) und --kspez-txt-* sind bewusst
   KEINE Theme-Tokens, das Panel bleibt in beiden Themes dunkel). */
.kspez__panel {
  --kspez-cyan:  #4DA8DA;
  --kspez-txt-1: rgba(226, 238, 248, 0.94);
  --kspez-txt-2: rgba(214, 230, 245, 0.72);
  --kspez-txt-3: rgba(214, 230, 245, 0.48);
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(158deg, #1C2D3B 0%, #131F2B 56%, #0C141C 100%);
  border: 1px solid rgba(214, 230, 245, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 38px rgba(77, 168, 218, 0.05),
    0 26px 50px -22px rgba(var(--shadow-rgb), 0.6);
}
.kspez__panel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: var(--kspez-txt-2);
}
.kspez__panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kspez-cyan);
  box-shadow: 0 0 8px var(--kspez-cyan);
  animation: bsys-livedot 2s ease-in-out infinite;
  animation-play-state: paused;
}
.kspez.is-revealed .kspez__panel-dot { animation-play-state: running; }
/* Dossier-Engine stellt die Section per .is-paused still (Viewport/Tab) —
   gleiche Spezifität, steht NACH der running-Regel → gewinnt. */
.kspez.is-paused .kspez__panel-dot { animation-play-state: paused; }
.kspez__panel-brand {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kspez-txt-3);
}
.kspez__queries {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kspez__query {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.kspez__query-ic {
  display: flex;
  color: var(--kspez-cyan);
}
.kspez__query-text {
  font-size: 14.5px;
  font-weight: var(--weight-medium);
  color: var(--kspez-txt-1);
  min-width: 0;
  overflow-wrap: break-word;
}
.kspez__query-pill {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 3px 9px;
  border-radius: 9999px;
  white-space: nowrap;
  color: var(--kspez-txt-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.kspez__query-pill--hot {
  color: var(--kspez-cyan);
  background: rgba(77, 168, 218, 0.12);
  border-color: rgba(77, 168, 218, 0.4);
}
.kspez__panel-foot {
  margin: 0;
  padding: 13px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
  line-height: 1.6;
  color: var(--kspez-txt-2);
}

/* Reveal: Zeilen staffeln (generischer [data-reveal]-Hook) */
.kspez .kspez__query {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.12s),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.12s);
}
.kspez.is-revealed .kspez__query {
  opacity: 1;
  transform: none;
}
@media (max-width: 400px) {
  /* Sehr schmale Screens: Pille rutscht unter die Suchzeile,
     statt sie zusammenzudrücken */
  .kspez__query {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .kspez__query-pill {
    grid-column: 2;
    justify-self: start;
  }
}
/* ---------- Suchfeld: hier tippt die Engine ------------------
   (Marie 2026-09-10: „rechts zu wenig Animation".) Das Feld sitzt
   zwischen Kopfzeile und Liste; [data-kspez-search] in scripts.html
   tippt echte Suchbegriffe Zeichen für Zeichen ein, lässt die fertige
   Suche als Zeile in die Liste fallen und ordnet sie ein. */
.kspez__field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 10px 0;
  padding: 14px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.kspez__field-ic {
  display: flex;
  color: var(--kspez-txt-3);
}
.kspez__field-text {
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  color: var(--kspez-txt-1);
  overflow-wrap: anywhere;
}
/* Cursor blinkt nur, solange die Konsole läuft (IO-gated). */
.kspez__caret {
  width: 2px;
  height: 1.05em;
  border-radius: 1px;
  background: var(--kspez-txt-2);
  opacity: 0;
}
.kspez.is-revealed .kspez__caret {
  animation: kspez-caret 1.05s steps(1, end) infinite;
}
.kspez.is-paused .kspez__caret { animation-play-state: paused; }
@keyframes kspez-caret {
  0%, 49%   { opacity: 0.9; }
  50%, 100% { opacity: 0; }
}

/* Eine neu eingeworfene Zeile fällt von oben in die Liste. */
.kspez__query.is-entering {
  animation: kspez-drop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes kspez-drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* Die Kontext-Pille erscheint erst, wenn Bese-AI eingeordnet hat. */
.kspez__query .kspez__query-pill {
  transition: opacity 0.4s ease 0.22s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
}
.kspez__query.is-entering .kspez__query-pill {
  opacity: 0;
  transform: translateX(6px);
  animation: kspez-pill 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}
@keyframes kspez-pill {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kspez .kspez__query {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .kspez__panel-dot { animation: none; }
  /* Konsole steht still: Cursor aus, keine Einwurf-/Abgangs-Animation
     (die Engine überspringt in diesem Zweig ohnehin die Schleife). */
  .kspez.is-revealed .kspez__caret { animation: none; opacity: 0; }
  .kspez__query.is-entering,
  .kspez__query.is-entering .kspez__query-pill { animation: none; }
}

/* ---------- .kspez--dossier — Fassung „Dossier" (Kanalservice S4,
   2026-09-10; Marie: „das Bild ist sehr wahllos platziert auf der
   rechten Seite, links zu viel Text, die Section sieht nicht
   designtechnisch hochwertig aus"). Stand RUNDE 4 (2026-09-11, Marie:
   „links bei dem Bild die Schrift quasi über das Bild gelegt und dann
   von unten so ein Schatten, ein dunkler — das fand ich sehr schön …
   rechts irgendwie Platz sparen, sodass es in der Höhe reduziert wird"):
   1) KOPF — Eyebrow + H2, linksbündig (der Lead-Absatz wurde von einer
      parallelen Session auf Maries Zuruf „immer noch zu viel Text"
      gestrichen; sein Argument steht im Bese-System derselben Seite).
   2) DOSSIER — EIN Objekt über die Container-Breite: links das echte
      640×400-Foto („nur reale Bilder", der Browser skaliert bicubisch)
      als FLÄCHE des Panels, darauf die Folgerung des Pakets als CLAIM
      über einem Near-Black-Verlauf von unten (Montserrat Semibold, wie
      Runde 3); rechts die Wissens-Konsole — Titel „Wir wissen es."
      (Montserrat Bold), Such-Demo mit Feld + ZWEI Zeilen, 24-h-Profil
      der Notdienst-Anrufe mit laufender Stundenmarke, Fußzeile —
      VERDICHTET (Runde 4: Leiste/Module/Feld/Zeilen/Balken/Fuß je eine
      Stufe enger, gemessen 749 → ≈ 520 px bei 1440). Die Konsole gibt
      die Höhe des Objekts vor (Grid-Stretch), das Foto folgt per cover;
      Anker 50 % 40 % hält die Köpfe (y 17–47 % im Motiv) im Bild.
      Beide teilen sich Radius, Rand und Schatten; die Konsole ist
      dieselbe feste dunkle Geräte-Fläche wie .kspez__panel (§5a-Geräte-
      Ausnahme, beide Themes), die --kspez-*-Tokens werden hier neu
      gesetzt und geerbt.
      Drei Lagen des linken Panels: ≥ 1280 Claim AUF dem Foto (absolut,
      Scrim); 900–1279 Claim als Spalte NEBEN dem Foto (Foto bleibt
      ≤ ~650 px breit = keine sichtbare Hochskalierung, darunter die
      Konsole); < 900 Claim als Block UNTER dem 16:10-Foto.
      Der Folgerungs-Block unter dem Foto (Runde 3, .kspez__proof) ist
      damit abgelöst.
   Bewegung: gestaffelter Reveal (generischer [data-reveal]-Hook, --i),
   Balken wachsen beim Reveal, Tipp-Cursor/Live-Punkt/Stundenmarke laufen
   nur, solange die Engine die Section nicht mit .is-paused stillstellt
   (Viewport/Tab). ---------- */
.kspez--dossier > .container {
  display: grid;
  /* Runde 2 (Marie: „möglichst in einem Viewport"): enger Rhythmus */
  gap: clamp(24px, 2.6vw, 36px);
}

/* 1) Kopf — nur Eyebrow + H2, linksbündig (Lead-Absatz gestrichen,
   s. Blockkopf). */
.kspez__head {
  display: grid;
  grid-template-columns: 1fr;
}
.kspez__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* 2) Dossier — ein Objekt */
.kspez__dossier {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  /* Grund hinter Foto UND Konsole: Surface-1 als Literal, weil das
     Objekt in beiden Themen dunkel bleibt (Geräte-Ausnahme §5a). */
  background: #0C141C;
  border: 1px solid rgba(214, 230, 245, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 6px rgba(var(--shadow-rgb), 0.14),
    0 44px 90px -40px rgba(var(--shadow-rgb), 0.62);
}
@media (min-width: 1280px) {
  /* 1.08 : 0.92 — die Konsole darf schmaler sein als das Foto; erst ab
     1280 px, weil die Konsole bei schmaleren Spalten stark umbricht
     (Marie 3b: „zu früh umgebrochen"). */
  .kspez__dossier { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

/* Linkes Panel = Foto + Claim. Basis (< 900 px): Foto im 16:10-Format
   oben, der Claim als Block darunter. Das <img> liegt ABSOLUT im
   Rahmen — ein Bild mit height:100 % im Fluss schreibt sonst seine
   intrinsische Höhe in die Grid-Zeile (§0a-Falle, Karriere 2026-08-05). */
.kspez__side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0C141C;
}
.kspez--dossier .kspez__photo {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0C141C;
}
.kspez--dossier .kspez__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Köpfe bei y 17–47 % des Motivs: bei einem Panel, das flacher als
     16:10 ist, fällt der Beschnitt nach unten (Boden), nie auf Köpfe. */
  object-position: 50% 40%;
}
/* Weicher Fuß-Scrim (unter 1280 px nur für die Bildunterschrift-Lesart;
   ab 1280 trägt er den Claim, s. u.) */
.kspez--dossier .kspez__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(6, 10, 14, 0) 0%, rgba(6, 10, 14, 0.58) 100%);
  pointer-events: none;
}
.kspez__claim {
  padding: clamp(18px, 1.8vw, 26px) clamp(18px, 2vw, 26px);
}
.kspez__payoff {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.0625rem, 1.28vw, 1.3125rem);
  font-weight: var(--weight-semibold);
  line-height: 1.38;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  text-wrap: pretty;
}
/* Tablet 900–1279: Foto und Claim NEBENEINANDER im Panel, die Konsole
   darunter (Dossier einspaltig). Das Foto bleibt so ≤ ~650 px breit
   (Quelle 640 = keine sichtbare Hochskalierung) statt als 1200-px-
   Banner zu laufen; der Claim sitzt mittig in seiner Spalte. */
@media (min-width: 900px) and (max-width: 1279px) {
  .kspez__side {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .kspez__claim {
    display: grid;
    align-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
  }
}
/* Desktop ≥ 1280: das Foto IST das Panel (absolut, füllt die Zeile, die
   die Konsole vorgibt), der Claim liegt unten links AUF dem Foto über
   dem Near-Black-Verlauf (Runde 4, Marie: „Schrift über das Bild gelegt,
   von unten ein dunkler Schatten"). Scrim-Ton = --surface-0 als
   Roh-Tripel (projektweit theme-feste Foto-Scrims, .mawx__photo-claim);
   Kontrast am Bildpunkt gemessen, nicht geschätzt (Chronik 2026-09-11). */
@media (min-width: 1280px) {
  .kspez--dossier .kspez__photo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .kspez--dossier .kspez__photo::after {
    height: 74%;
    background: linear-gradient(
      180deg,
      rgba(6, 10, 14, 0) 0%,
      rgba(6, 10, 14, 0.34) 34%,
      rgba(6, 10, 14, 0.72) 68%,
      rgba(6, 10, 14, 0.90) 100%
    );
  }
  .kspez__claim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 32px) clamp(22px, 2.1vw, 30px);
  }
  .kspez__payoff {
    /* ~3 Zeilen bei 1280–1864 (gemessen: 30ch ergab vier, 40ch drei) */
    max-width: 40ch;
    text-shadow: 0 1px 2px rgba(6, 10, 14, 0.4);
  }
}
/* Bildunterschrift als Glas-Chip oben links — theme-fest weiß, weil
   sie auf dem Foto liegt (Muster .mawx__photo-claim). */
.kspez--dossier .kspez__photo-cap {
  position: absolute;
  left: clamp(16px, 1.8vw, 26px);
  top: clamp(16px, 1.8vw, 26px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: rgba(6, 10, 14, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.kspez--dossier .kspez__photo-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4DA8DA;
  box-shadow: 0 0 0 3px rgba(77, 168, 218, 0.22);
}

/* Wissens-Konsole = rechte Hälfte (Geräte-Fläche, beide Themes).
   Runde 4: alle Innenabstände eine Stufe enger — die Konsole ist der
   Höhen-Geber des Objekts, jede Zeile hier ist Sektionshöhe. */
.kspez__console {
  --kspez-cyan:  #4DA8DA;
  --kspez-txt-1: rgba(226, 238, 248, 0.94);
  --kspez-txt-2: rgba(214, 230, 245, 0.72);
  /* txt-3 eine Stufe kräftiger als im geteilten Panel (0,48 → 0,58):
     Achsen-/Legenden-Labels und die grauen Pillen messen damit
     ≥ 4,6:1 auf der hellsten Verlaufsstufe (0,48 → 3,8:1, gerechnet
     2026-09-10). Kleintext auf Geräte-Fläche = Glas-Regel §Design. */
  --kspez-txt-3: rgba(214, 230, 245, 0.58);
  --kspez-pad-x: clamp(16px, 1.7vw, 22px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(158deg, #1C2D3B 0%, #131F2B 56%, #0C141C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 56px rgba(77, 168, 218, 0.05);
  border-top: 1px solid rgba(214, 230, 245, 0.10);
}
@media (min-width: 1280px) {
  .kspez__console {
    border-top: 0;
    border-left: 1px solid rgba(214, 230, 245, 0.10);
  }
}
.kspez__console-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(11px, 0.95vw, 14px) var(--kspez-pad-x);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* Die These des Absatzes („Wir wissen es.") — Runde 3 (Marie: „neben dem
   pulsierenden Punkt auch die normale Schriftart, größer und fett"):
   Montserrat Bold 17–20 px; bleibt die kräftigste Zeile der Konsole. */
.kspez__console-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.kspez__console-tag {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kspez-txt-3);
}

.kspez__module {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(12px, 1.05vw, 15px) var(--kspez-pad-x);
}
.kspez__module + .kspez__module { border-top: 1px solid rgba(255, 255, 255, 0.07); }
/* Die Paket-Sätze in der Konsole: lesbarer Text, kein Deko-Label.
   Runde 3b (Marie: „zu früh umgebrochen … Element zu groß in der Höhe"):
   KEIN ch-Deckel — die Sätze laufen über die volle Konsolenbreite. */
.kspez__know {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  font-weight: var(--weight-medium);
  line-height: 1.42;
  color: var(--kspez-txt-1);
  text-wrap: pretty;
}
.kspez__demo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Suchfeld + Zeilen kommen aus den geteilten Regeln; im Dossier ohne
   deren Innenabstand (das Modul bringt seinen eigenen) und eine Stufe
   kompakter (Runde 4). */
.kspez--dossier .kspez__field { margin: 0; padding: 9px 12px; }
/* Leeres Tippfeld hält seine Zeilenbox (Zero-Width-Space): sobald die
   Engine das Feld leert, kollabierte der Text-Span um ~4 px, die Konsole
   wurde kürzer — und weil das Foto seit Runde 4 der Konsolenhöhe folgt,
   sprang das ganze Objekt bei jeder Runde (gemessen 533 → 529 px). */
.kspez--dossier .kspez__field-text:empty::before { content: "\200B"; }
.kspez--dossier .kspez__queries { padding: 0; gap: 5px; }
.kspez--dossier .kspez__query { padding: 8px 11px; }
/* Demo-Zeilen einen Rang unter der Copy (txt-2, regular) — das Tippfeld
   bleibt txt-1, es ist das lebende Element. */
.kspez--dossier .kspez__query-text {
  color: var(--kspez-txt-2);
  font-weight: var(--weight-regular);
}

/* Tages-Profil der Notdienst-Anrufe (Geräte-Demo). 24 Balken, Höhe
   aus --v (Markup), Stundenmarke aus --h (Engine). Runde 4: Profil
   52–62 px hoch (vorher 84–108) — die Kurve liest sich auch flach. */
.kspez__hours {
  --h: 19;
  display: grid;
  gap: 5px;
  /* Raum für das Marken-Label über dem Profil */
  padding-top: 22px;
}
.kspez__hours-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: clamp(52px, 4.2vw, 62px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.kspez__hours-bar {
  display: block;
  height: calc(var(--v) * 100%);
  border-radius: 3px 3px 1px 1px;
  background: rgba(214, 230, 245, 0.20);
  transform-origin: bottom;
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 26ms + 0.35s),
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}
.kspez .kspez__hours-bar { transform: scaleY(0); }
.kspez.is-revealed .kspez__hours-bar { transform: none; }
.kspez__hours-bar--hot {
  background: var(--kspez-cyan);
  box-shadow: 0 0 14px rgba(77, 168, 218, 0.28);
}
.kspez__hours-bar.is-now { background: rgba(214, 230, 245, 0.46); }
.kspez__hours-bar--hot.is-now {
  background: #FFFFFF;
  box-shadow: 0 0 24px rgba(77, 168, 218, 0.7);
}
/* Stundenmarke: Linie über die Profilhöhe + Label darüber */
.kspez__hours-now {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--h) + 0.5) / 24 * 100%);
  width: 0;
  pointer-events: none;
  transition: left 1s linear;
}
.kspez__hours.is-jump .kspez__hours-now { transition: none; }
.kspez__hours-now::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.5px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.10));
}
.kspez__hours-now-label {
  position: absolute;
  top: -22px;
  left: 0;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.kspez__hours-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--kspez-txt-3);
}
.kspez__hours-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--kspez-txt-2);
}
.kspez__hours-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.kspez__hours-key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(214, 230, 245, 0.30);
}
.kspez__hours-key--hot::before {
  background: var(--kspez-cyan);
  box-shadow: 0 0 6px rgba(77, 168, 218, 0.5);
}

/* Fußzeile: die Seite, die zum Hörer greifen lässt */
.kspez__console-foot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
  padding: clamp(11px, 1vw, 14px) var(--kspez-pad-x);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}
.kspez__foot-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  color: #FFFFFF;
  background: rgba(77, 168, 218, 0.16);
  border: 1px solid rgba(77, 168, 218, 0.42);
}

/* Reveal der zwei Ebenen (generischer Hook setzt .is-revealed) */
.kspez--dossier .kspez__head-main,
.kspez--dossier .kspez__dossier {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.14s),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.14s);
}
.kspez--dossier .kspez__dossier { --i: 1; }
.kspez--dossier.is-revealed .kspez__head-main,
.kspez--dossier.is-revealed .kspez__dossier {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kspez--dossier .kspez__head-main,
  .kspez--dossier .kspez__dossier,
  .kspez .kspez__hours-bar {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .kspez__hours-now { transition: none; }
}

/* (Hier standen die .kanal-hero__actions/-__subcta-Overrides — sie waren
   WIRKUNGSLOS: gleiche Spezifitaet (0,1,0) wie die geteilten
   .mf-hero__*-Regeln, die ~6.200 Zeilen spaeter stehen und per Quell-
   Reihenfolge gewinnen. Folge: der Signature-CTA stand als einziges
   Element der Textspalte 90px eingerueckt, gemessen 2026-09-04.
   Die Seite haengt jetzt an der :is()-Liste bei den mf-hero-Regeln
   weiter unten, wo Marktfuehrerschaft und Plattform schon stehen.) */

/* ---------- .mawx — Wahrheit über Wachstum (MA S4) ----------
   REDESIGN-RUNDE 2 2026-08-27 (Marie: „immer noch ein bisschen
   ungünstig platziert — hol die Inspiration bei den Inspiration-
   Seiten"; kompletter §1.12-Pool gerendert): EIN zusammenhängendes
   Zwei-Spalten-Ensemble nach dem Yeldra-Strategie-Muster — links
   die Erzähl-Spur (Lead → Übergangssatz → nummerierte Gleichungs-
   zeilen 01/02 [Saleshax-Leistungszeilen] → Summen-Panel mit Cyan-
   Hairline als EIN Akzent), rechts die Beweis-Spur (Foto mit
   aufliegender These über Bottom-Scrim [Saleshax-„Warum"-Karten /
   estateanfrage Foto+Daten-Box] + Beleg-Karte). Kein frei
   schwebender Textblock mehr. Die Sektion ist im Light-Theme eine
   Dunkel-Insel (konsolidierte Liste) — alle Farben laufen über die
   Insel-Tokens; das Foto-Overlay ist bewusst theme-fest (weiße
   Schrift auf Foto-Scrim, wie Team-/Karriere-Foto-Scrims). */
.mawx {
  position: relative;
  padding-block: var(--section-py);
}

/* Kopf: linksbündig, kompakt */
.mawx__header {
  align-items: flex-start;
  text-align: left;
  gap: var(--space-4);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.mawx__header .section-header__title { max-width: 32ch; } /* 24→32ch (Marie 2026-09-02) */

/* Die eine Bühne: Erzähl-Spur links, Beweis-Spur rechts */
.mawx__frame {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
@media (min-width: 980px) {
  .mawx__frame {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 480px);
  }
}

/* — Erzähl-Spur — */
.mawx__story {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mawx__lead {
  margin: 0 0 var(--space-4);
  color: var(--text-200);
  line-height: 1.75;
  /* Lesemaß (Boxbreiten-Runde 2026-09-09): die Story-Spalte wächst mit dem
     fluiden Container auf ~1100px (1920px Fenster) — ohne Deckel liefe der
     Lead auf 109 Zeichen/Zeile (gemessen), bei 1440 auf 85. */
  max-width: 78ch;
}
/* Paket-Übergangssatz als betonte Serif-Zeile — leitet in die
   nummerierten Zeilen über */
.mawx__kicker {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: var(--text-100);
}

/* Gleichungszeilen (Saleshax-Idiom): Nummer | Titel + Italic-Folge |
   ruhiges Glas-Icon */
.mawx__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(14px, 1.8vw, 24px);
  padding-block: clamp(14px, 1.7vw, 22px);
  border-top: 1px solid var(--glass-border);
}
.mawx__row-num {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  color: var(--text-300);
  font-variant-numeric: tabular-nums;
}
.mawx__row-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.45em;
}
.mawx__row-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.25;
  color: var(--heading-color, var(--white));
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Folge als Display-Italic in derselben Zeile — bewusst KEIN
   em-Gradient (der bleibt H2 und Summe vorbehalten, Akzent-Budget) */
.mawx__row-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.25;
  color: var(--text-300);
}
.mawx__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-200);
}
.mawx__row-icon .icon { width: 20px; height: 20px; }

/* Die Gleichung hängt als Block an der Unterkante der Bühne
   (margin-top:auto auf der ERSTEN Zeile) — die flexible Luft sitzt
   zwischen Erzähltext und Gleichung, Story- und Beweis-Spur
   schließen bündig ab. */
.mawx__story .mawx__row:first-of-type { margin-top: auto; }

/* Summe: Glas-Panel mit Cyan-Hairline = der eine Akzent-Moment */
.mawx__sum {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(10px, 1.2vw, 16px);
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-bg), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.mawx__sum::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb), 0.75), transparent);
}
.mawx__sum-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--glow-rgb), 0.4);
  background: rgba(var(--glow-rgb), 0.10);
  color: var(--accent-hover, #4DA8DA);
}
.mawx__sum-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  line-height: 1.4;
  color: var(--text-100);
}
.mawx__sum-text em {
  font-style: italic;
  background: linear-gradient(100deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: 0.08em; margin-inline: -0.04em;
  padding-block-end: 0.12em; margin-block-end: -0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* — Beweis-Spur: Foto mit aufliegender These + Beleg-Karte — */
.mawx__proof {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}
.mawx__photo {
  position: relative;
  flex: 1;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 56px -30px rgba(var(--shadow-rgb), 0.65);
  min-height: 260px;
}
@media (max-width: 979px) {
  .mawx__photo { aspect-ratio: 16 / 11; min-height: 0; flex: none; }
}
.mawx__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Aufliegende These über Bottom-Scrim — theme-fest weiß auf Foto
   (Idiom Team-/Karriere-Hero-Scrim; Scrim-Ton = fixes Near-Black,
   damit die weiße Schrift in BEIDEN Themes trägt) */
.mawx__photo-claim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: clamp(48px, 5vw, 72px) clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 26px);
  background: linear-gradient(180deg, rgba(6, 10, 14, 0) 0%, rgba(6, 10, 14, 0.78) 62%);
  color: #FFFFFF;
  font-weight: var(--weight-medium);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.55;
}
.mawx__note {
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-200);
  line-height: 1.7;
}
.mawx__note p { margin: 0; }

/* ---------- .maweg — Der 5-Stufen-Weg (MA S5) ---------- */
.maweg {
  position: relative;
  padding-block: var(--section-py);
}
.maweg__lead {
  margin: 0;
  max-width: 56ch;
  color: var(--text-200);
  line-height: 1.7;
}
.maweg__track {
  list-style: none;
  margin: clamp(36px, 4.5vw, 64px) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 36px);
}
@media (min-width: 1100px) {
  .maweg__track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
  }
  /* Verbindende Spur auf Disc-Höhe */
  .maweg__track::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(var(--glow-rgb), 0) 0%,
      rgba(var(--glow-rgb), 0.35) 12%,
      rgba(var(--glow-rgb), 0.35) 88%,
      rgba(var(--glow-rgb), 0) 100%);
  }
}
/* Mobil/Tablet: vertikale Linie links */
@media (max-width: 1099px) {
  .maweg__track::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 27px;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(var(--glow-rgb), 0) 0%,
      rgba(var(--glow-rgb), 0.35) 10%,
      rgba(var(--glow-rgb), 0.35) 90%,
      rgba(var(--glow-rgb), 0) 100%);
  }
}
/* Stufen: Disc auf der Spur, Kachel darunter (alle Breiten gestapelt —
   mobil behalten die Kacheln so die volle Lesebreite, die vertikale
   Linie läuft links durch die Discs). */
.maweg__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Ab 1100px stehen die 5 Stufen nebeneinander — dort gehört die Disc
   MITTIG über ihre Kachel (Marie 2026-08-06: „die Punkte sind
   irgendwie nicht mittig über den Kacheln platziert"). Darunter
   stapeln die Stufen und die Spur läuft als senkrechte Linie links
   durch die Discs → dort bleibt linksbündig richtig. */
@media (min-width: 1100px) {
  .maweg__step { align-items: center; }
}
/* Disc: feste dunkle Geräte-Fläche (beide Themes, §5a analog .bsys) */
.maweg__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #26282C 0%, #17191D 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 28px -14px rgba(var(--shadow-rgb), 0.5);
  /* Feste Akzentfarbe statt var(--accent-hover): die Disc ist eine
     theme-unabhängig dunkle Fläche — das Light-Theme dunkelt
     --accent-hover ab und machte die Icons hier unsichtbar
     (Marie-Befund 2026-07-09, §0a-Falle „dunkles Gerät"). */
  color: #4DA8DA;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}
.maweg__disc .icon { width: 22px; height: 22px; }
/* Disc-Pop beim Reveal (erbt --i vom Step, Spring-Overshoot) */
[data-reveal] .maweg__disc {
  transform: scale(0.55);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
    calc(var(--i, 0) * 0.1s + 0.15s);
}
[data-reveal].is-revealed .maweg__disc { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] .maweg__disc { transform: none; transition: none; }
}
/* Stufen-Kachel: kanonisches Glas-Kachel-Design + Maus-Tilt (analog
   .ba-skill, früher .doitem) — Reveal liegt auf .maweg__step, Tilt auf der Karte, daher
   keine Transform-Kollision. */
.maweg__card {
  flex: 1;
  width: 100%;
  --maweg-card-p: clamp(18px, 1.8vw, 24px);
  padding: var(--maweg-card-p);
  /* Kopfbild läuft per negativer Margin bis an die Kartenkante →
     die Karte muss selbst clippen (Radius bleibt sauber rund). */
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066) 0%, rgba(255, 255, 255, 0.022) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px -10px rgba(var(--shadow-rgb), 0.45);
  --mx: 0;
  --my: 0;
  --tilt-max: 6deg;
  --lift: 0px;
  transform-style: flat;
  transform: perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease,
    box-shadow 480ms ease;
}
.maweg__card:hover {
  --lift: -3px;
  border-color: rgba(var(--glow-rgb), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 44px -16px rgba(var(--glow-rgb), 0.28),
    0 10px 28px -10px rgba(var(--shadow-rgb), 0.55);
}
/* Kein opacity-Eintrag im Tilt-Shorthand nötig: die Reveal-Opacity
   liegt auf .maweg__step (Elternelement), nicht auf der Karte —
   keine Shorthand-Kollision (§0a Mouse-Tilt-Reveal-Hinweis). */
.maweg__card.is-tilting {
  transition:
    transform 140ms ease-out,
    border-color 320ms ease,
    box-shadow 480ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .maweg__card,
  .maweg__card:hover { transform: none; }
}
/* Vollflächiges Kopfbild der Stufen-Kachel (neu 2026-08-05, Marie
   „zu wenig Bilder") — Full-Bleed über negative Margins gegen
   --maweg-card-p, Muster .ka-step__media der Karriere-Seite.
   Kopf-Anker (26 %), damit bei den Personen-Motiven nicht die
   Köpfe angeschnitten werden. */
.maweg__media {
  position: relative;
  margin: calc(var(--maweg-card-p) * -1) calc(var(--maweg-card-p) * -1)
          clamp(14px, 1.4vw, 18px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(var(--shadow-rgb), 0.12);
}
.maweg__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Unter 1100px stapeln die Stufen und die Karten werden bis zu 960px
   breit — ein 16:10-Bild wäre dort 600px hoch und würde die Sektion
   auf über 4000px aufblasen. Deshalb im gestapelten Bereich ein
   flacher Banner-Zuschnitt, auf dem Telefon wieder 16:9. */
@media (max-width: 1099px) {
  .maweg__media { aspect-ratio: 3 / 1; }
}
@media (max-width: 639px) {
  .maweg__media { aspect-ratio: 16 / 9; }
}
/* Screenshot-Variante (Stufe 01): oben ankern statt Kopf-Anker — bei
   einer Webseite will man den Seitenkopf sehen, nicht die Mitte. */
.maweg__media--screen img { object-position: 50% 0%; }
.maweg__card:hover .maweg__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .maweg__media img,
  .maweg__card:hover .maweg__media img { transform: none; transition: none; }
}
.maweg__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
  line-height: 1;
  color: var(--text-400);
  margin-bottom: 6px;
}
.maweg__step-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  color: var(--heading-color, var(--white));
}
.maweg__step-text {
  margin: 0;
  color: var(--text-200);
  font-size: 0.95rem;
  line-height: 1.65;
}
.maweg__outro {
  max-width: 58ch;
  margin: clamp(36px, 4.5vw, 60px) auto 0;
  text-align: center;
  color: var(--text-100);
  line-height: 1.7;
}

/* ---------- .mapc — Sieh, was bei dir geht (MA S7) ---------- */
.mapc {
  position: relative;
  padding-block: var(--section-py);
}
.mapc__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
/* --- .mapc--media: CTA-Band MIT Foto (neu 2026-08-05, Marie „zu wenig
   Bilder") — bewusst als Modifier, damit die übrigen mapc-Bänder
   (Karriere, Presse, Website, Branchen, EG …) zentriert bleiben.
   Foto links, Copy/CTA rechts linksbündig; ≤980px gestapelt und
   wieder zentriert, damit der CTA auf Mobil mittig sitzt. */
.mapc--media .mapc__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 60px -34px rgba(var(--shadow-rgb), 0.55);
}
.mapc--media .mapc__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
@media (min-width: 980px) {
  .mapc--media .mapc__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(32px, 4.4vw, 72px);
    align-items: center;
  }
  .mapc--media .mapc__inner {
    max-width: none;
    margin: 0;
    align-items: flex-start;
    text-align: left;
  }
  .mapc--media .mapc__actions { justify-content: flex-start; }
}
@media (max-width: 979px) {
  .mapc--media .mapc__photo { margin-bottom: clamp(28px, 4vw, 40px); }
}
.mapc__title {
  margin: 0;
  max-width: 32ch; /* 24→32ch (Marie 2026-09-02): CTA-Band-Titel fahren volle Zeilen */
}
.mapc__body {
  margin: 0;
  max-width: 58ch;
  color: var(--text-200);
  line-height: 1.75;
}
.mapc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
}
.mapc__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 9999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-100);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.mapc__phone:hover {
  border-color: rgba(var(--glow-rgb), 0.45);
  background: rgba(var(--glow-rgb), 0.08);
}
.mapc__micro {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-300);
}
/* Link im Micro-Hinweis (Branchen-Hub: „Mach den Potenzial-Check")
   — UA-Link-Blau wäre auf beiden Themes fehl am Platz. */
.mapc__micro a {
  color: var(--accent-hover);
  text-underline-offset: 3px;
}

/* ---------- .mahand — Aufträge + Leute aus einer Hand (MA S9) --- */
.mahand {
  position: relative;
  padding-block: var(--section-py);
}
.mahand__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 1024px) {
  .mahand__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.mahand__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.mahand__title { margin: 0; max-width: 30ch; } /* 20→30ch (Marie 2026-09-02) */
.mahand__body {
  margin: 0;
  max-width: 54ch;
  color: var(--text-200);
  line-height: 1.75;
}
/* Geräte-Panel: feste dunkle Fläche in BEIDEN Themes (§5a analog
   .bsys-app / Phone-Mockup) — Charcoal-Familie, Status-Grün wie
   Bese-System (#46d39a). */
.mahand__device {
  --dev-text: rgba(255, 255, 255, 0.88);
  --dev-muted: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg, 24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(170deg, #26282C 0%, #1B1D20 55%, #141619 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px -30px rgba(var(--shadow-rgb), 0.45);
  padding: clamp(18px, 2vw, 26px);
}
.mahand__device-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dev-muted);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.mahand__device-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #46d39a;
  box-shadow: 0 0 10px rgba(70, 211, 154, 0.8);
}
.mahand__lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.4vw, 18px);
}
@media (min-width: 560px) {
  .mahand__lanes { grid-template-columns: 1fr 1fr; }
}
.mahand__lane {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: clamp(12px, 1.4vw, 16px);
}
.mahand__lane-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dev-muted);
  margin-bottom: 10px;
}
.mahand__lane-label .icon { color: var(--accent-hover, #4DA8DA); }
.mahand__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mahand__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mahand__row-text {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--dev-text);
  min-width: 0;
}
.mahand__row-value {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  color: var(--dev-muted);
  white-space: nowrap;
}
.mahand__row-value--ok { color: #46d39a; }
.mahand__control {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(14px, 1.6vw, 20px);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.mahand__control-label,
.mahand__control-state {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  color: var(--dev-muted);
  white-space: nowrap;
}
.mahand__control-state { color: #46d39a; }
/* Bedienbarer Mitarbeitersuche-Regler (Marie 2026-08-06 „damit das so ein
   bisschen interaktiv ist"). Natives <input type="range">, damit Tastatur,
   Touch und Screenreader ohne Eigenbau funktionieren; der Look bleibt der
   der bisherigen Attrappe (6px-Schiene, Cyan-Füllung, weißer Knopf).
   Die Füllung kommt aus --val (0–100), gesetzt im style-Attribut und vom
   JS fortgeschrieben → ohne JS steht der Balken trotzdem richtig.
   Feste Geräte-Farben in BEIDEN Themes, wie das übrige Panel (§5a). */
.mahand__range {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
          appearance: none;
  height: 18px;                     /* Trefferfläche, Schiene wird gemalt */
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.mahand__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(var(--glow-rgb), 0.5), #4DA8DA)
      0 0 / calc(var(--val, 70) * 1%) 100% no-repeat,
    rgba(255, 255, 255, 0.10);
}
.mahand__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(var(--glow-rgb), 0.5), #4DA8DA)
      0 0 / calc(var(--val, 70) * 1%) 100% no-repeat,
    rgba(255, 255, 255, 0.10);
}
.mahand__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;                 /* Knopf auf der 6px-Schiene zentrieren */
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.mahand__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.mahand__range:hover::-webkit-slider-thumb,
.mahand__range:active::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 2px 12px rgba(var(--glow-rgb), 0.55);
}
.mahand__range:hover::-moz-range-thumb,
.mahand__range:active::-moz-range-thumb {
  transform: scale(1.18);
  box-shadow: 0 2px 12px rgba(var(--glow-rgb), 0.55);
}
.mahand__range:focus { outline: none; }
.mahand__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(var(--glow-rgb), 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);
}
.mahand__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(var(--glow-rgb), 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* Der Zustands-Text wechselt beim Schieben die Länge → feste Mindest-
   breite, sonst springt die Schiene bei jedem Schritt (§0a
   Counter-Anti-Jitter-Pattern, gleiche Ursache). */
.mahand__control-state {
  min-width: 11ch;
  text-align: right;
}
/* Bewerbungs-Zeilen reagieren auf den Regler: je weiter aufgedreht,
   desto mehr Zeilen sind „scharf". Der Dimm-Zustand kommt vom JS. */
.mahand__row[data-mahand-dim="true"] {
  opacity: 0.28;
  transition: opacity 320ms ease;
}
.mahand__row { transition: opacity 320ms ease; }
@media (prefers-reduced-motion: reduce) {
  .mahand__row,
  .mahand__range::-webkit-slider-thumb,
  .mahand__range::-moz-range-thumb { transition: none; }
}

/* ---------- .manf — Die Nachfolge-Frage (MA S10) ---------- */
.manf {
  position: relative;
  padding-block: var(--section-py);
}
.manf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 960px) {
  .manf__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}
.manf__photo {
  margin: 0;
  padding: clamp(10px, 1.2vw, 14px);
  border-radius: var(--radius-lg, 24px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: 0 26px 60px -30px rgba(var(--shadow-rgb), 0.4);
  max-width: 460px;
  justify-self: center;
}
.manf__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg, 24px) - 8px);
}
.manf__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.manf__title { margin: 0; max-width: 30ch; } /* 20→30ch (Marie 2026-09-02) */
.manf__body {
  margin: 0;
  max-width: 58ch;
  color: var(--text-200);
  line-height: 1.75;
}
.manf__note {
  margin: 0;
  max-width: 54ch;
  padding-left: clamp(16px, 1.8vw, 22px);
  border-left: 2px solid rgba(var(--glow-rgb), 0.55);
  color: var(--text-100);
  line-height: 1.7;
}


/* ===========================================================
   Section 17 — Büroräume Wiehl · Sticky-Scroll Standort
   Eine gepinnte Komposition füllt den Viewport: zentrierter Kopf
   (Eyebrow + Titel + Lead) oben, darunter die Bühne (dunkle Map
   links gepinnt + Bilder rechts, die beim Scrollen einblenden),
   darunter die Reise-Facts + Route-CTA. Alles bleibt während des
   Scrollens stehen, nur die Bilder rechts wechseln. Kein toter
   Leerraum mehr. JS mappt Scroll-Progress auf den Bild-Index.
   Mobile (<900px): Pin löst sich → normaler Stack.
   =========================================================== */
.bueroraeume {
  position: relative;
  padding-block: var(--section-py);
}

/* --- Pin-Container + Sticky-Bühne ------------------------- */
.bueroraeume__pin {
  position: relative;
  /* Scroll-Strecke für 3 Bilder — bewusst kompakt, damit man zügig
     durchscrollen kann (ca. halber Viewport je Bildwechsel). */
  height: 220vh;
}

.bueroraeume__sticky {
  position: sticky;
  /* unter der sticky Navbar (min-height 72px) pinnen, sonst verdeckt sie
     den Kopf der Komposition (Header z-index 50). */
  top: 72px;
  height: calc(100vh - 72px);
  display: flex;
  align-items: center;
}

.bueroraeume__stage-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.6vw, 34px);
  width: 100%;
}

/* --- Kopf (zentriert, bleibt gepinnt) ---------------------
   Layout + Titel kommen aus dem globalen .section-header /
   .section-header__title-Pattern (Konsistenz mit allen Sections).
   .bueroraeume__head trägt nur den BEM-Hook, keine eigenen Styles. */
.bueroraeume__lead {
  margin: 0;
  max-width: 56ch;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

/* --- Bühne (Map links | Frames rechts) -------------------- */
.bueroraeume__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.2vw, 30px);
  width: 100%;
  height: min(48vh, 440px);
  align-items: stretch;
}

/* --- Map (gepinnt) ---------------------------------------- */
.bueroraeume__mapwrap {
  position: relative;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--surface-1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 70px -34px rgba(var(--shadow-rgb), 0.7);
  isolation: isolate;
}

.bueroraeume__map-iframe {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  border: 0;
  pointer-events: none;
  /* Karte wird normal (Original-Farben) eingeblendet. */
  z-index: 0;
}

.bueroraeume__map-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* nur dezenter Verlauf unten, damit die Adress-Card lesbar aufsitzt */
  background: linear-gradient(0deg, rgba(12, 20, 28, 0.55) 0%, rgba(12, 20, 28, 0.12) 22%, transparent 42%);
}

.bueroraeume__mapcard {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(25, 41, 57, 0.78), rgba(12, 20, 28, 0.9));
  border: 1px solid rgba(179, 204, 223, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bueroraeume__mapcard-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.22), rgba(var(--glow-rgb), 0.06));
  border: 1px solid rgba(var(--glow-rgb), 0.45);
  color: var(--accent-cyan);
}

.bueroraeume__mapcard-text { display: flex; flex-direction: column; min-width: 0; }
.bueroraeume__mapcard-1 { font-weight: 600; font-size: 14px; color: var(--text-primary); line-height: 1.2; }
.bueroraeume__mapcard-2 { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.2; }

/* --- Frames (Scroll-Reveal) ------------------------------- */
.bueroraeume__frames {
  position: relative;
  height: 100%;
}

.bueroraeume__frame {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 70px -34px rgba(var(--shadow-rgb), 0.7);
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bueroraeume__frame.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bueroraeume__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Progress-Dots — vertikal rechts neben den Frames */
.bueroraeume__dots {
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bueroraeume__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(179, 204, 223, 0.25);
  transition: background 300ms ease, transform 300ms ease;
}

.bueroraeume__dots i.on {
  background: var(--accent-cyan);
  transform: scale(1.4);
}

/* --- Tablet/Mobile: Pin auflösen, alles stackt ------------ */
@media (max-width: 900px) {
  .bueroraeume__pin { height: auto; }
  .bueroraeume__sticky { position: static; height: auto; display: block; }
  .bueroraeume__stage-inner { gap: clamp(22px, 4vw, 32px); }
  .bueroraeume__lead { font-size: 16px; }
  .bueroraeume__stage {
    grid-template-columns: 1fr;
    height: auto;
    gap: 16px;
  }
  .bueroraeume__mapwrap { height: clamp(280px, 64vw, 400px); }
  .bueroraeume__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bueroraeume__frame + .bueroraeume__frame { margin-top: 16px; }
  .bueroraeume__dots { display: none; }
}

/* --- Reduced-Motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bueroraeume__frame {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Bühnen-Fassung (18.09.2026, Marie: Foto als Hintergrund, Karte als
   Kachel darüber, Überlagerung für den Kopf; der Bus bleibt frei) ------
   Kein Pin, kein Sticky, keine Frames. Theme-fest: das Foto ist in beiden
   Themes derselbe dunkle Grund, Text deshalb Weiß, Scrim aus dem
   surface-0-Tripel rgba(6,10,14) (Präzedenz Karriere-/Team-Hero, §5a). */
.bueroraeume--buehne {
  padding-block: 0;
  overflow: hidden;
  isolation: isolate;
}

.bueroraeume__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bueroraeume__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ausschnitt so, dass der Bus (Bildmitte, untere Hälfte) auch bei
     flachen Bühnen im Bild bleibt */
  object-position: 50% 62%;
}

.bueroraeume__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* lokaler Hof hinter dem Kopf (1024 px maß die Lead-Zeile sonst 4,3 : 1) */
    radial-gradient(ellipse 58% 52% at 12% 30%, rgba(6, 10, 14, 0.55), rgba(6, 10, 14, 0) 72%),
    /* Kopf oben links: dicht, läuft zur Bildmitte aus */
    linear-gradient(112deg, rgba(6, 10, 14, 0.88) 0%, rgba(6, 10, 14, 0.72) 28%, rgba(6, 10, 14, 0.5) 44%, rgba(6, 10, 14, 0.16) 62%, rgba(6, 10, 14, 0.04) 100%),
    /* obere Kante (heller Himmel) + Fuß (Karten-Kachel) */
    linear-gradient(180deg, rgba(6, 10, 14, 0.55) 0%, rgba(6, 10, 14, 0.08) 34%, rgba(6, 10, 14, 0.06) 62%, rgba(6, 10, 14, 0.5) 100%);
}

.bueroraeume__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(560px, 78vh, 760px);
  padding-block: clamp(48px, 6vw, 80px);
}

.bueroraeume--buehne .bueroraeume__head {
  grid-row: 1;
  justify-self: start;
  max-width: 56ch;
}

.bueroraeume__title {
  margin: 0 0 var(--space-5);
  /* „Unsere Büroräume / in Wiehl" — zwei Zeilen, damit der Kopf über dem
     Schild endet und die Lead-Zeile nicht in die Bildmitte läuft */
  max-width: 20ch;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(6, 10, 14, 0.45);
}

.bueroraeume--buehne .bueroraeume__lead {
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 14px rgba(6, 10, 14, 0.5);
}

/* Karten-Kachel unten rechts — Breite gedeckelt, damit Bus und Schild
   frei bleiben (Bus sitzt in der Bildmitte, die Kachel rechts über
   Stellplätzen und Hecke) */
.bueroraeume--buehne .bueroraeume__mapwrap {
  grid-row: 3;
  justify-self: end;
  width: min(100%, clamp(320px, 30vw, 420px));
  height: clamp(220px, 30vh, 290px);
  border-color: rgba(179, 204, 223, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 80px -30px rgba(6, 10, 14, 0.85);
}

@media (max-width: 900px) {
  /* Foto wird zum oberen Band (3:4, Kopf darauf, Bus frei darunter),
     die Karte steht als eigener Block darunter auf der Insel-Fläche.
     Raster statt absoluter Lagen: Band, Scrim und Kopf teilen Zelle 1,
     die Karte bekommt Zelle 2 — nichts kann in den Bus hineinragen. */
  .bueroraeume--buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 20px;
    padding-bottom: clamp(40px, 8vw, 56px);
  }
  .bueroraeume--buehne .bueroraeume__bg {
    position: static;
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 560px;
  }
  .bueroraeume--buehne .bueroraeume__bg img { object-position: 50% 50%; }
  .bueroraeume--buehne .bueroraeume__scrim {
    position: static;
    grid-area: 1 / 1;
    background:
      linear-gradient(180deg, rgba(6, 10, 14, 0.9) 0%, rgba(6, 10, 14, 0.82) 28%, rgba(6, 10, 14, 0.66) 44%, rgba(6, 10, 14, 0.12) 57%, rgba(6, 10, 14, 0.04) 78%, rgba(6, 10, 14, 0.42) 100%);
  }
  .bueroraeume--buehne .bueroraeume__inner { display: contents; }
  .bueroraeume--buehne .bueroraeume__head {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: start;
    max-width: none;
    padding: clamp(36px, 8vw, 52px) var(--container-pad) 0;
  }
  .bueroraeume--buehne .bueroraeume__mapwrap {
    grid-area: 2 / 1;
    z-index: 2;
    justify-self: stretch;
    width: auto;
    margin-inline: var(--container-pad);
    height: clamp(260px, 62vw, 340px);
  }
}

/* ============================================================
   Section 18 — Kanalservice-Magazin · Closing-CTA-Band
   Dunkles Glas-Panel mit Cyan-Radial-Glow. Zweispaltig:
   links KM-Lockup, rechts Eyebrow + H2 + Body + Ghost-CTA.
   Staggered Reveal via .is-revealed auf [data-km-cta].
   ============================================================ */
.km-cta {
  position: relative;
  padding: var(--section-py) 0;
  background:
    linear-gradient(135deg,
      rgba(44, 110, 169, 0.20) 0%,
      rgba(25, 41, 57, 0.65) 45%,
      rgba(12, 20, 28, 0.92) 100%);
  border-top: 1px solid rgba(179, 204, 223, 0.14);
  border-bottom: 1px solid rgba(179, 204, 223, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  isolation: isolate;
}

.km-cta__glow {
  position: absolute;
  inset: -20% -10% auto -20%;
  height: 70%;
  z-index: 0;
  background: radial-gradient(
    ellipse 55% 70% at 22% 30%,
    rgba(var(--glow-rgb), 0.28) 0%,
    rgba(var(--glow-rgb), 0.10) 35%,
    transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}

.km-cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* Copy-Spalte gedeckelt (statt 1fr-Stretch) + Grid als Einheit
     zentriert — sonst klebt der Block am linken Container-Rand und
     rechts bleibt viel Leerraum (Marie 2026-05-28). */
  grid-template-columns: minmax(240px, 420px) minmax(0, 760px); /* 2026-09-09: 300+600 → 420+760, Text bleibt 58ch */
  justify-content: center;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Linkes Lockup — dekorativ. Großes KM in Display-Font mit
   Silver-Blue→Cyan-Gradient, schmale Rule, Label in UI-Font.
   Eingerahmt von eigener Glas-Card mit Cyan-Top-Akzent. */
.km-cta__lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 3D-Maus-Tilt (Pattern §0a Mouse-Tilt). Tilt-Transform lebt im
     .is-revealed-State (s. u.), damit er nicht mit dem Reveal kollidiert. */
  --mx: 0;
  --my: 0;
  --tilt-max: 6deg;
  transform-style: flat;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.6vw, 32px);
  border-radius: clamp(16px, 1.8vw, 22px);
  background:
    linear-gradient(180deg,
      rgba(31, 52, 71, 0.55) 0%,
      rgba(19, 31, 43, 0.75) 100%);
  border: 1px solid rgba(179, 204, 223, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(var(--shadow-rgb), 0.25);
}

.km-cta__lockup::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--glow-rgb), 0.55) 50%,
    transparent 100%);
}

.km-cta__logo {
  display: block;
  width: 100%;
  max-width: clamp(140px, 16vw, 220px);
  height: auto;
}

/* Rechte Copy-Spalte. */
.km-cta__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}


.km-cta__title {
  margin: 0;
  font-family: var(--font-display, "Instrument Serif"), Georgia, serif;
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 28ch; /* 22→28ch (Marie 2026-09-02): vollere Zeilen im KM-Band */
  overflow-wrap: break-word;
  hyphens: manual;
}

.km-cta__body {
  margin: 0;
  font-size: var(--text-lead, 16px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 58ch;
}

.km-cta__body strong {
  color: var(--white);
  font-weight: 600;
}

.km-cta__btn {
  align-self: flex-start;
  margin-top: clamp(4px, 0.6vw, 8px);
}

/* Reveal-Cascade — initial verborgen, .is-revealed staffelt rein. */
[data-km-cta] .km-cta__lockup,
[data-km-cta] .km-cta__title,
[data-km-cta] .km-cta__body,
[data-km-cta] .km-cta__btn {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-km-cta].is-revealed .km-cta__lockup  {
  opacity: 1;
  transform: perspective(900px)
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition-delay: 120ms;
}
/* Aktive Maus-Tilt-Phase: kürzere Transition für Cursor-Follow.
   opacity MUSS mit aufgeführt sein (§0a Mouse-Tilt) — sonst überschreibt
   der Shorthand die langsame Reveal-Opacity, falls schon während der
   Einblend-Phase getiltet wird. */
[data-km-cta] .km-cta__lockup.is-tilting {
  transition:
    transform 140ms ease-out,
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-km-cta].is-revealed .km-cta__title   { opacity: 1; transform: none; transition-delay: 300ms; }
[data-km-cta].is-revealed .km-cta__body    { opacity: 1; transform: none; transition-delay: 420ms; }
[data-km-cta].is-revealed .km-cta__btn     { opacity: 1; transform: none; transition-delay: 560ms; }

/* Tablet: Lockup wird kompakter. */
@media (max-width: 860px) {
  .km-cta__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  .km-cta__lockup {
    max-width: 320px;
    width: 100%;
    justify-self: start;
    padding: clamp(24px, 5vw, 32px) clamp(20px, 4vw, 28px);
  }
  .km-cta__logo { max-width: clamp(140px, 30vw, 200px); }
  /* Keine Sonder-Verkleinerung mehr — .km-cta__title folgt überall
     var(--text-h2) wie alle Section-H2 (Marie 2026-09-08). */
}

@media (max-width: 480px) {
  .km-cta { padding: var(--section-py) 0; }
  .km-cta__lockup { max-width: 100%; }
  .km-cta__body { line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  [data-km-cta] .km-cta__lockup,
  [data-km-cta] .km-cta__title,
  [data-km-cta] .km-cta__body,
  [data-km-cta] .km-cta__btn,
  /* Höhere Spezifität als die .is-revealed-Tilt-Regel — sonst bliebe
     der perspective()-Transform aktiv (auch ohne Bewegung). */
  [data-km-cta].is-revealed .km-cta__lockup {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   Footer — Editorial-Schluss-Anker
   Asymmetrisches Layout: links Brand-Block, rechts 3 Link-Spalten.
   Mega-Wordmark „Bese Media" als Silver-Blue→Cyan-Gradient
   in den Footer-Boden eingelassen — gibt dem Abschluss eine
   eigene Marken-Identitaet (Linear-/Vercel-Pattern). Bottom-Bar
   mit Copyright, Rechts-Links, Social-Icons.
   ============================================================ */
.site-footer {
  position: relative;
  /* bewusst kein --section-py: Footer hat eigenen Rhythmus. Kein
     Bottom-Padding — die dunkle Bottom-Bar (.site-footer__bottombar)
     schließt Kante zu Kante mit dem Seitenende ab. */
  padding: clamp(64px, 7vw, 96px) 0 0;
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
  border-top: 1px solid rgba(179, 204, 223, 0.10);
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  isolation: isolate;
}

/* Aurora-Background — gleiche Mechanik wie Hero (.hero__aurora),
   nur lokal gescoped, damit beide unabhaengig konfigurierbar sind.
   Drift-Animationen werden aus dem Hero-Block geteilt
   (@keyframes hero-aurora-drift-a/b/c sind global definiert). */
.site-footer__aurora {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  pointer-events: none;
  filter: blur(55px) saturate(135%);
  opacity: calc(0.50 * var(--aurora-opacity));
  contain: layout paint;
}

@media (min-width: 1024px) {
  .site-footer__aurora { filter: blur(85px) saturate(135%); }
}

.site-footer__beam {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: var(--aurora-blend);
}

.site-footer__beam--1 {
  top: -25%;
  left: -10%;
  width: 60%;
  height: 70%;
  background: conic-gradient(
    from 210deg at 50% 50%,
    transparent 0deg,
    rgba(44, 110, 169, 0.50) 50deg,
    rgba(var(--glow-rgb), 0.48) 100deg,
    rgba(107, 196, 240, 0.22) 150deg,
    transparent 210deg
  );
  animation: hero-aurora-drift-a 14s linear infinite;
}

.site-footer__beam--2 {
  top: 4%;
  right: -14%;
  width: 58%;
  height: 70%;
  background: conic-gradient(
    from 40deg at 50% 50%,
    transparent 0deg,
    rgba(179, 204, 223, 0.22) 70deg,
    rgba(44, 110, 169, 0.42) 130deg,
    rgba(var(--glow-rgb), 0.20) 190deg,
    transparent 250deg
  );
  animation: hero-aurora-drift-b 18s linear infinite reverse;
}

.site-footer__beam--3 {
  bottom: -30%;
  left: 30%;
  width: 55%;
  height: 65%;
  background: conic-gradient(
    from 290deg at 50% 50%,
    transparent 0deg,
    rgba(var(--glow-rgb), 0.30) 80deg,
    rgba(107, 196, 240, 0.18) 140deg,
    transparent 210deg
  );
  animation: hero-aurora-drift-c 24s linear infinite;
}

@media (max-width: 480px) {
  .site-footer__beam--3 { display: none; }
  .site-footer__aurora { filter: blur(55px) saturate(130%); }
}

.site-footer__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 220px 220px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__beam { animation: none; }
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

/* ---------- Top-Row: Brand + Nav-Grid ---------- */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2.2fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(16px, 2vw, 24px);
}

/* Brand-Spalte */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 16px);
  max-width: 380px;
}

.site-footer__logo img {
  /* kein display:block hier — sonst überschreibt es .brand-logo--light's
     display:none (Theme-Logo-Swap). Der globale img-Reset setzt display:block. */
  width: clamp(160px, 12vw, 188px);
  height: auto;
}

/* Claim — Montserrat, schlank, kein Italic-Gradient.
   Klare, ruhige Untertextzeile zum Logo. */
.site-footer__claim {
  margin: 0;
  font-family: var(--font-ui, "Montserrat"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  max-width: 32ch;
}

.site-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer__contact-item a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

.site-footer__contact-item a:hover,
.site-footer__contact-item a:focus-visible {
  color: var(--accent-hover);
}

/* Icon-Pille (Heroicons-Solid in subtilem Glas-Chip). */
.site-footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(var(--glow-rgb), 0.10);
  border: 1px solid rgba(var(--glow-rgb), 0.20);
  color: var(--accent-hover);
  transition: background 200ms ease, border-color 200ms ease;
}

.site-footer__contact-item:hover .site-footer__contact-icon {
  background: rgba(var(--glow-rgb), 0.16);
  border-color: rgba(var(--glow-rgb), 0.35);
}

.site-footer__contact-icon svg {
  width: 16px;
  height: 16px;
}

/* Link-Grid */
.site-footer__nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
}

.site-footer__col-title {
  margin: 0 0 clamp(10px, 1vw, 14px);
  font-family: var(--font-ui, "Montserrat"), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-blue);
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.site-footer__links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
  transition: color 200ms ease, transform 200ms ease;
  display: inline-block;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--accent-hover);
  transform: translateX(2px);
}

/* ---------- Disclaimer / Hinweistext ----------
   Steht oberhalb der Bottom-Bar. Kleine, etwas gedimmte Type;
   bezieht sich auf die Testimonials/Erfolgsgeschichten. */
.site-footer__disclaimer {
  position: relative;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid rgba(179, 204, 223, 0.08);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.48);
}

/* ---------- Siegel-Leiste „Geprüft. Zertifiziert. Ausgezeichnet." ----------
   (Marie 2026-09-07: alle Qualitätszertifikate im Footer; Runde 2: „keinen
   weißen Hintergrundkasten".) Sitzt zwischen dem Link-Grid und dem
   Disclaimer. Die Zeichen stehen OHNE eigene Kachel direkt auf der Footer-
   Fläche (Marie: kein CSS-Hintergrundkasten). Runde 3 (Marie): das TÜV-
   Zeichen läuft als ORIGINALBILD mit seinem weißen Rahmen (de-Kombifassung,
   der Rahmen gehört zum Zeichen), die kununu-Badges mit ihrem eigenen
   weißen Rand — der Rand ist jeweils Teil des Bildes, kein CSS. Prüfzeichen
   werden nie umgefärbt (TÜV-Richtlinie ISOF-44, §5a Marken-Authentizität) —
   im Dark-Theme stehen sie in ihren Originalfarben auf Dunkel. Eine gemeinsame
   HÖHE (--seal-h) hält die Reihe bündig, die Breite folgt dem
   Seitenverhältnis; der Trustpilot-Score ist die letzte Position derselben
   Reihe (theme-aware über applyTpTheme, kein festes Theme). Die kununu-
   Badges sind Hochformat und tragen die volle Höhe, damit „Top Company"
   lesbar bleibt. */
.site-footer__seals {
  --seal-h: clamp(72px, 6vw, 88px);
  position: relative;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid rgba(179, 204, 223, 0.08);
}

.site-footer__seals-label {
  margin-bottom: clamp(14px, 1.4vw, 18px);
}

.site-footer__seal-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.2vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--seal-h);
}

/* TÜV-Siegel ist als einziges Zeichen der Reihe ein Link (verlinkt auf
   die Nachweis-Seite, GO-LIVE-PLAN.md Phase 2) — der <a> braucht eine
   definierte Höhe, sonst löst `img { height: 100% }` eine Ebene tiefer
   gegen eine unbestimmte Höhe auf und rendert in Originalgröße. */
.site-footer__seal a {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-footer__seal img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Drei Formatstufen halten die höhen-normierte Reihe optisch im Lot:
   TÜV (Querformat mit weißem Rahmen) und DWA-Mitgliedslogo (Querformat)
   eine Stufe kleiner als die Hochformat-Badges, sonst dominieren sie. */
.site-footer__seal--tuev img { height: 82%; }
.site-footer__seal--dwa img  { height: 82%; }

/* German Web Award: EXTREM-Hochformat (1 : 1,94 — schmaler als jedes
   andere Zeichen der Reihe). Bei der normalen Siegelhöhe wäre der Wimpel
   nur 45px breit und läse sich als dunkler Streifen statt als Auszeichnung;
   gemessen bei 1x (Maries Fensterbreite) wird „official WINNER" erst ab
   dieser Stufe klar erkennbar. Damit hat die Reihe drei Formatstufen:
   Querformat 82 % (TÜV, DWA) · Hochformat 100 % (kununu) · Extrem-
   Hochformat 118 %. Der Überstand fällt nicht auf, weil der Wimpel unten
   spitz ausläuft; 135 % wurde verworfen — dort dominiert er die Reihe. */
.site-footer__seal--gwa img { height: 118%; }

/* kununu: die drei Badges sind EINE Position (Familie) mit halbem
   Listen-Gap dazwischen — beim Umbruch bleiben sie zusammen. */
.site-footer__seal--kununu { gap: clamp(8px, 1.1vw, 18px); }

/* Trustpilot: das Widget ist 40px hoch und ~250px breit. */
.site-footer__seal--trustpilot { min-width: 240px; }
.site-footer__seal--trustpilot .trustpilot-widget {
  width: 100%;
  max-width: 260px;
}

@media (max-width: 720px) {
  .site-footer__seal-list { justify-content: center; gap: 18px 22px; }
  .site-footer__seals-label { text-align: center; }
}
@media (max-width: 480px) {
  .site-footer__seals { --seal-h: 68px; }
  .site-footer__seal--trustpilot { min-width: 0; width: 100%; }
}

/* ---------- Bottom-Bar ---------- */
/* Vollbreites dunkles Abschluss-Band (Marie 2026-07-23): bleibt in
   BEIDEN Themes dunkel (Karten-Dunkel-Insel-Rezept §0a) — feste
   dunkle Fläche aus der etablierten Geräte-Farbfamilie + lokal
   re-deklarierte Dark-Tokens, damit die bestehenden Light-Theme-
   Overrides (var(--text-200/300), var(--accent-hover)) automatisch
   helle Werte auflösen. Liegt außerhalb des Containers → Kante zu
   Kante; position/z-index heben es über die Footer-Aurora. */
.site-footer__bottombar {
  position: relative;
  z-index: 1;
  margin-top: clamp(24px, 2.5vw, 32px);
  padding-block: clamp(18px, 2vw, 24px);
  background: linear-gradient(180deg, #0e1822 0%, #0a121a 100%);
  border-top: 1px solid rgba(179, 204, 223, 0.10);
  --text-200: rgba(255, 255, 255, 0.72);
  --text-300: rgba(255, 255, 255, 0.55);
  --accent-hover: #4da8da;
}

.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  font-size: 13px;
}

.site-footer__copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 200ms ease;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--accent-hover);
}

.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Social-Buttons — 1:1 von der Live-Seite uebernommen:
   weisser Kreis 36px, helles Icon (#ECEFF8), 5px Gap,
   „pop"-Hover (kurze Skalierung). */
.site-footer__social {
  gap: 5px;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #0C141C;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), color 200ms ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--accent);
  transform: scale(1.1);
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
}

/* ---------- Responsive ---------- */

/* Tablet: Brand oben breit, dann Nav-Grid 3 Spalten unter. */
@media (max-width: 960px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 56px);
  }
  .site-footer__brand { max-width: 100%; }
}

/* Klein-Tablet: Nav-Grid auf 2 Spalten. */
@media (max-width: 720px) {
  .site-footer__nav-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* Mobile: alles einspaltig, Bottom-Bar links-bündig. */
@media (max-width: 480px) {
  .site-footer { padding-top: clamp(48px, 14vw, 72px); }
  .site-footer__nav-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer__bottom {
    justify-content: flex-start;
    gap: 14px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__links a,
  .site-footer__social a {
    transition: none;
  }
  .site-footer__links a:hover,
  .site-footer__social a:hover {
    transform: none;
  }
}

/* ============================================================
   Unterseiten (Leistungen) — Subpage-Hero + Seiten-Kontext
   Der Hero der Leistungsseiten folgt dem Live-Schema = exakt die
   Homepage-Hero-Komposition (Text links, Video + Live-Ticker
   rechts via hero-media-Partial, Kennzahlen via hero-stats-
   Partial). Seitenspezifisch sind nur Eyebrow, H1 und Lead —
   deshalb braucht .hero--sub nur zwei kleine Ergänzungen.
   ============================================================ */

/* Eyebrow über der H1 wurde auf Marie-Wunsch entfernt (2026-06-10) —
   die Subpage-Heroes starten direkt mit der H1. */

/* §5a-Pattern (wie .capacity__title): Auto-Hyphenation produzierte
   mid-word-Trennungen wie „Aufträ-ge" in der Kern-Headline —
   manual + bewusste <br>-Struktur im Markup, overflow-wrap bleibt
   als Hard-Wrap-Safety für 320px. */
.hero--sub .hero__headline {
  hyphens: manual;
}

/* Auftragsgewinnung: Hero füllt den ersten Bildschirm (Marie 2026-09-11 —
   „Ich möchte, dass du die Hero-Section bitte auf 100% Viewport-Höhe
   machst"). VORHER stand hier die Regel „Hero-Innenabstand AG + Startseite"
   (Marie 2026-07-03/07-15) mit `min-height: auto` + 96px Padding — gemessen
   war der Hero dadurch auf JEDEM Fenster rund 832px hoch, unabhängig von der
   Bildschirmhöhe: auf Maries MacBook (1728×1117) fehlten 212px, auf ihrem
   Ultrawide-Fenster (1864×1000) 95px, und genau dort ragte die nächste
   Section in den ersten Bildschirm. Die Startseite ist am 2026-08-28 aus
   jener Regel ausgezogen, Kanalservice und Karriere folgten — die AG war
   die letzte Seite mit dem alten Verhalten.
   Rezept identisch zu `.page-home` (dort die ausführliche Begründung):
   1. Abgezogen wird die Navbar — `.site-header` ist `sticky` und steht IM
      FLUSS, volle 100svh ergäben Header + Hero = ein Bildschirm PLUS 73px.
      Die 73px sind `.navbar__inner { min-height: 72px }` + 1px Border;
      ändert sich dort etwas, muss dieser Wert mit (Rückverweis steht dort).
   2. `svh` statt `vh` (Mobile-Adressleiste), die `vh`-Zeile davor ist der
      Fallback für Browser ohne svh-Unterstützung.
   3. `min-height`, nicht `height`: reicht der Platz nicht, gewinnt der
      INHALT und der Hero wächst — nichts wird abgeschnitten. Bewusst ohne
      Media-Query (Marie: „100 % Viewport-Höhe", nicht „ab Desktop"). */
.page-auftragsgewinnung .hero {
  /* HISTORIE: die -73px galten der Leiste im Fluss. Seit [Block: kopfleiste-r24] (24.09.) ist die Kopfleiste fixed, dieser Hero misst 100svh — Regel dort. */
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  display: flex;
  align-items: center;
}

/* Innenabstand an die FENSTERHÖHE gekoppelt (ab 1024px) — mit den festen
   96px der alten Regel lief der Hero auf verbreiteten Laptop-Auflösungen
   über die Kante (der Inhalt ist hier zweispaltig: Textspalte gegen die
   640px hohe Phone-Bühne). Wie auf der Startseite: 24px Sockel, sonst
   4,5vh, Deckel 96px. Mobile-Abstände (767px-Query) bleiben unangetastet. */
@media (min-width: 1024px) {
  .page-auftragsgewinnung .hero {
    padding-block: clamp(24px, 4.5vh, 96px);
  }
}

/* Seiten-Kontext-Overrides (body-Klasse pro Unterseite):
   Die Homepage-Teaser-Sections 10/11 laufen auf ihrer eigenen
   Leistungsseite als Methoden-Erklärer mit — dort entfällt der
   „Mehr zur …"-Ghost-CTA (Selbst-Link) und der tight-Abstand
   der Homepage-Paarung 10+11 wird auf den Standard-Rhythmus
   normalisiert (vgl. §0a Section-Rhythmus). */
/* AG nutzt seit dem v6-Umbau (2026-06-22) Section 10 (.ki) nicht mehr —
   nur noch MA (.recruit). Daher nur die MA-Selektoren. */
.page-mitarbeitergewinnung .recruit__cta {
  display: none;
}

.page-mitarbeitergewinnung .recruit {
  padding-block: var(--section-py);
}

/* Selbstständig machen: Section 03 läuft dort als Live-„Wachstums-
   Block" (@set-Texte im Page-File) — das Original hat weder Sub-Kopf
   noch CTA, der Signature-Button entfällt (§1.13). */
.page-selbststaendig-machen .capacity__cta {
  display: none;
}

/* ============================================================
   Zentrierter Hero (Selbstständig machen) — Live-Schema dieser
   Seite: kein Video, Content mittig, darunter Trustpilot +
   schlanker Logo-Marquee. BG: Aurora (Bestand) — der „Gründerpfad"-
   Layer wurde von Marie verworfen (2026-06-10).
   ============================================================ */
.hero--centered .hero__grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.hero--centered .hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
}

.hero--centered .hero__lead {
  max-width: 58ch;
  margin-inline: auto;
}

/* Teamseite: zentrierter Hero OHNE Logo-Marquee/Video (anders als Video/
   Selbst, wo der Marquee die Höhe füllt). Mit dem geerbten min-height
   (~100vh) + space-10-Padding wirkte der Hero sehr leer — Inhalt ~318px
   in ~804px Hero (Marie 2026-06-26). Daher auf Desktop kompakter: kein
   100vh-min-height, halbiertes Padding. (Hier kommt später das
   Imagevideo/der Imagefilm rein — dann ggf. wieder mehr Höhe.) */
@media (min-width: 1024px) {
  .page-team .hero {
    /* Wieder mehr Höhe, damit das Hero-Foto (16:9) richtig zur Geltung
       kommt (Marie 2026-06-26) — der frühere Kompakt-Wert beschnitt das
       Bild zu stark. Inhalt bleibt vertikal zentriert, das Foto füllt den
       Rest ober-/unterhalb. */
    min-height: clamp(660px, 82vh, 860px);
    padding-block: var(--space-10);
  }
}

/* ---- Teamseite: Hero-Hintergrundbild (Marie 2026-06-26) ----
   Echtes Team-/Standort-Banner (HG-Team.webp, 16:9: Mitarbeiter links/
   rechts, Bese-Media-Gebäude mittig) als Hero-Hintergrund statt leerem
   Hero. Gescrimt (radial mittig stärker, wo der zentrierte Text sitzt),
   damit heller Text in BEIDEN Themes lesbar bleibt. Ersetzt die Aurora.
   Hintergrund-Wert als Custom-Property, damit der Light-Override ihn ohne
   Literal-Duplikat erneut setzen kann (er müsste sonst das weiße BRIGHT-
   Band überschreiben). Später kann hier das Imagevideo davorgelegt werden. */
.page-team .hero {
  --team-hero-bg:
    radial-gradient(ellipse 80% 90% at 50% 47%, rgba(6, 10, 14, 0.66) 0%, rgba(6, 10, 14, 0.34) 70%),
    linear-gradient(180deg, rgba(6, 10, 14, 0.30) 0%, rgba(6, 10, 14, 0.30) 48%, rgba(6, 10, 14, 0.60) 100%),
    url(Bilder/HG-Team.webp) center / cover no-repeat;
  background: var(--team-hero-bg);
}
.page-team .hero__aurora { display: none; }
/* Heller Text auf dem gescrimten Foto — in Dark-Theme ohnehin hell, im
   Light-Theme muss das weiße BRIGHT-Band + die dunkle Schrift überschrieben
   werden (Dark-Token-Insel-Teilsatz, Akzent = Cyan statt Slate). `body.`
   erhöht die Spezifität auf (0,3,2), damit der Foto-Hintergrund das
   gleich-spezifische, aber später stehende BRIGHT-Weiß-Band schlägt. */
html[data-theme="light"] body.page-team .hero {
  background: var(--team-hero-bg);
  --heading-color: var(--white);
  --text-100: rgba(255, 255, 255, 0.92);
  --text-200: rgba(255, 255, 255, 0.72);
  --accent-hover: #4DA8DA;
  --silver-blue: #B3CCDF;
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  /* Seit dem Hero-Logo-Band (Marie 2026-09-10) auch hier nötig: die
     Foto-Bühne ist eine Dunkel-Insel, ihr Token-Paket ist aber nicht
     Teil der konsolidierten Insel-Regel (§5a-Ausnahme „eigenes,
     getuntes Scrim-Paket"). Ohne die Zeile zog der Marquee im
     Light-Theme den HELLEN Filter und stand als dunkles Logo auf
     dunklem Foto (gemessen 1,3:1). */
  --logo-mono-filter: brightness(0) invert(1);
  color: rgba(255, 255, 255, 0.92);
}

/* Hero-Kicker: Zeile 1 einer zweizeiligen Live-H1 (z. B. „Unsere
   Partner im besten Licht", Videoproduktion) als kleiner Vorspann
   INNERHALB der H1 — Wortlaut bleibt 1:1 (§1.13), Eyebrow-Pillen
   über der H1 sind auf Leistungsseiten entfernt (Marie 2026-06-10). */
.hero__kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  font-weight: var(--weight-semibold);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin-bottom: clamp(10px, 1.6vw, 18px);
}

/* Ohne Video-Spalte trägt der zentrierte Hero seine Höhe selbst —
   gleiche Höhen-Logik wie der Homepage-Hero ab 1024px (flex/center
   kommt aus .hero), nur das Grid ist einspaltig. */

/* Trustpilot Micro TrustScore — zentriert unter dem CTA. Optisch
   ruhig (kein Glas-Rahmen): der Score ist hier Beleg, nicht Card. */
.hero-trustpilot-center {
  width: 100%;
  max-width: 360px;
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* ENTFERNT 2026-09-04: `.hero__media--no-ticker` war die tickerlose
   rechte Hero-Spalte der Leistungs-Übersicht (Score mittig unter dem
   Platzhalterbild, Marie 2026-06-26). Mit dem Umbau des Hub-Heros auf
   zentriert ohne Bild („Ich möchte das Bild einmal weg haben") ist der
   Modifier in keinem Template mehr vergeben — Regel deshalb gelöscht
   statt als toter Selektor stehen zu lassen. Der Trustpilot-Score sitzt
   dort jetzt über `.hero-trustpilot-center` unter dem CTA (Branchen-
   Muster). Wiederherstellung nur nötig, falls je wieder eine rechte
   Hero-Spalte ohne Live-Ticker gebraucht wird. */

/* ============================================================
   HERO-VISUAL — Auftragsgewinnung: „Bese-AI"
   Bespoke rechte Hero-Spalte (ersetzt hero-media auf AG):
   GROSSER, dunkler Wireframe-Orb (Three.js, CI-Navy #1F3447 mit
   Fresnel-Rim) als KI-Energie-Zentrum im Hintergrund + weicher
   Schatten; davor unten die schwebende Konsole (Label + 2 Live-
   Benachrichtigungen + Trustpilot). Rahmenlos (Marie 2026-07-07).
   IO-getriggert (.is-revealed) + reduced-motion-safe.
   ============================================================ */
.hv-orders {
  position: relative;
  width: 100%;
  /* Status-Grün = KI-Bewertung „echter Auftrag" wie Bese-System (§5a) */
  --hv-ok: #46d39a;
  --hv-txt: #f4f7fb;
  --hv-txt-2: #aebfce;
  --hv-txt-3: #7f91a3;
  --hv-line: rgba(255, 255, 255, 0.08);
  --hv-glow: 77, 168, 218;
  /* Maus-Tilt (generische Utility Variante B, §0a) — subtil */
  --mx: 0; --my: 0; --tilt-max: 4deg; --lift: 0px;
  transform-style: flat;
  transform: perspective(1100px) translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  will-change: transform;
}
.hv-orders.is-tilting { transition: transform 140ms ease-out; }
@media (hover: none) { .hv-orders { will-change: auto; } }

/* Rahmenlos + GROSS (Marie 2026-07-07): kein Panel-Kasten. Der Orb liegt
   als grosses, dunkles Element im HINTERGRUND (absolut, mit Schatten) →
   gibt der Hero-Section Dimension. Davor unten schwebt die „Konsole"
   (Label + Live-Karten + Trustpilot) als eine zusammengehörende Einheit. */
.hv-orders--frameless {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(480px, 52vw, 660px);
  color: var(--hv-txt-2);
}
/* Orb = grosses Hintergrund-Element, bricht nach oben/rechts aus (wird
   vom .hero overflow:hidden sauber beschnitten → kein H-Scroll).
   Nochmals vergrößert (Marie 2026-07-08). */
.hv-orders--frameless > .hv-blob {
  position: absolute;
  z-index: 1;
  /* Runde 3–6 (Marie 2026-08-25): große Hintergrund-Ebene, vertikal
     mittig, „mehr nach rechts — aber links und rechts NICHT
     abgeschnitten". Lehre aus Runde 5: die Kugel wurde von der
     CANVAS-Kante geclippt, weil die Bühne schmaler als der
     Kugel-Durchmesser (~0,8 × Höhe) war → die Bühne ist jetzt
     QUADRATISCH (Kugel passt immer komplett rein). Mobile/Tablet:
     mittig in der Spalte, voll sichtbar. Kein translate fürs
     Zentrieren — transform gehört der Float-Animation. */
  top: calc(50% - clamp(420px, 60vw, 720px) / 2);
  left: clamp(-40px, -4vw, -8px);
  right: clamp(-40px, -4vw, -8px);
  width: auto;
  height: clamp(420px, 60vw, 720px);
  margin: 0;
}
@media (min-width: 1024px) {
  /* Desktop: quadratische Bühne, RECHTS verankert. Runde 7 (Marie):
     „weiter nach rechts, darf aus der Box raus — aber der Text bleibt
     frei": großer Rechts-Überhang → die Kugel läuft an der rechten
     Hero-Kante aus dem Bild, ihre linke Kante beginnt erst RECHTS
     der Textspalte (kein Gitter hinter Lead/Stats/CTA). */
  .hv-orders--frameless > .hv-blob {
    left: auto;
    /* Runde 8 (Marie): ~40px zurück nach links. */
    right: clamp(-440px, calc(-30vw + 40px), -100px);
    width: clamp(720px, 76vw, 1080px);
    height: clamp(720px, 76vw, 1080px);
    top: calc(50% - clamp(720px, 76vw, 1080px) / 2);
  }
}
/* Schwebende Konsole davor (unten) */
.hv-orders__console {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.2vw, 13px);
}

/* Ambient-Licht des Orbs — dezent (Marie: dunkel), blutet in die Aurora.
   Seit 2026-08-25 NEUTRAL-WEISS statt Cyan (Marie P2: Weiß/Grau statt
   Blau — der einzige Blau-Akzent bleibt der kleine .hv-blob__glow-Halo). */
.hv-orders__glow {
  position: absolute;
  inset: -12% -12% 22% -12%;
  background:
    radial-gradient(52% 48% at 62% 30%, rgba(255, 255, 255, 0.09), transparent 72%);
  filter: blur(26px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

/* --- Marken-Label (Glas-Pille, Kopf der Konsole, linksbündig) ---
   ⚠ RESERVIERT, NICHT LÖSCHEN: die komplette Konsolen-Familie
   (.hv-cockpit__head/__brand/__live/__signal, .hv-orders__feed/
   __track, .hv-order*, .hv-orders__trust) ist seit 2026-08-24/25
   auf der Startseite deaktiviert (Marie: „Anrufen"-Feed + Bese-AI-
   Pille raus) und aktuell auf KEINER Seite verbraucht — sie bleibt
   für den geplanten Wiedereinsatz auf der Auftragsgewinnungs-Seite
   stehen (Markup als Kommentar im Partial hero-viz-auftragsgewinnung). */
.hv-cockpit__head {
  display: inline-flex; align-items: center; gap: 12px;
  align-self: flex-start;
  /* Sitzt bewusst höher, mit Abstand über den Live-Karten (Marie
     2026-07-07) — die Konsole ist unten verankert, der Abstand hebt
     das Label hoch in die Orb-Zone. */
  margin-bottom: clamp(52px, 11vw, 116px);
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 32, 45, 0.72), rgba(12, 20, 28, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.55);
  /* backdrop-filter unter dem getilteten Vorfahren → Compositing-Layer
     pinnen gegen den Chrome-Repaint-Flicker (§5a). */
  will-change: transform;
}
@media (hover: none) { .hv-cockpit__head { will-change: auto; } }
.hv-cockpit__brand { display: inline-flex; align-items: center; gap: 9px; }
.hv-cockpit__mark { width: 20px; height: 22px; display: block; }
.hv-cockpit__mark svg { width: 100%; height: 100%; overflow: visible; }
.hv-cockpit__mark use { fill: var(--hv-txt); }
.hv-cockpit__brand-txt {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--hv-txt);
}
.hv-cockpit__live {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 2px; padding: 2px 9px 2px 8px; border-radius: 999px;
  border: 1px solid rgba(var(--hv-glow), 0.28);
  background: rgba(var(--hv-glow), 0.10);
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hv-txt-2);
}
.hv-cockpit__live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hv-ok); animation: hv-pulse 2.4s ease-out infinite;
}
@keyframes hv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(70, 211, 154, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(70, 211, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 211, 154, 0); }
}
.hv-cockpit__signal { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.hv-cockpit__signal i {
  width: 3px; border-radius: 2px; background: rgba(var(--hv-glow), 0.55);
  transform-origin: 50% 100%; animation: hv-eq 1.4s ease-in-out infinite;
}
.hv-cockpit__signal i:nth-child(1) { height: 5px;  animation-delay: 0s; }
.hv-cockpit__signal i:nth-child(2) { height: 9px;  animation-delay: 0.18s; }
.hv-cockpit__signal i:nth-child(3) { height: 13px; animation-delay: 0.36s; }
.hv-cockpit__signal i:nth-child(4) { height: 7px;  animation-delay: 0.54s; }
@keyframes hv-eq {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* --- Bese-AI Orb (Three.js-Canvas + Fallback) --- */
.hv-blob {
  position: relative;
  width: 100%;
  height: clamp(210px, 27vw, 272px);
  isolation: isolate;
  /* Rahmenlos (Marie 2026-07-07): kein Kasten/Border/Fläche — der Orb
     schwebt frei; sanftes Schweben gibt der Hero-Section Dimension. */
  animation: hv-blob-float 7s ease-in-out infinite;
}
@keyframes hv-blob-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
/* Weicher, dunkler Schatten hinter dem Orb (Marie 2026-07-07) → Tiefe.
   Auf hellem Band deutlich sichtbar, auf dunklem Grund atmosphärisch. */
.hv-blob__shadow {
  position: absolute;
  left: 50%; top: 57%;
  width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(4, 8, 13, 0.6), rgba(4, 8, 13, 0.34) 46%, transparent 70%);
  filter: blur(34px);
  z-index: 0; pointer-events: none;
}
/* Dark-Theme: statischen Schatten stark zurücknehmen — dunkler Fleck auf
   dunklem Grund las sich als „Schleier" (Marie 2026-07-08). Auf dem hellen
   Band bleibt er voll da (Tiefe). */
html[data-theme="dark"] .hv-blob__shadow { opacity: 0.45; }
/* Enger Halo direkt hinter dem Orb = der EINE sparsame Blau-Akzent des
   ansonsten neutralen Visuals (Marie 2026-08-25, P2) — Alpha reduziert. */
.hv-blob__glow {
  position: absolute; left: 50%; top: 48%;
  width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hv-glow), 0.08), transparent 66%);
  filter: blur(12px); z-index: 0; pointer-events: none;
}
.hv-blob__canvas {
  position: relative; z-index: 1; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.7s ease;
}
/* Runde 3+4 (Marie 2026-08-25): transparenter — der Orb tritt als
   Hintergrund-Ebene zurück statt als Vordergrund-Objekt zu stehen. */
.hv-blob.is-ready .hv-blob__canvas { opacity: 0.5; }
.hv-blob.is-fallback .hv-blob__canvas { display: none; }
.hv-blob__fallback {
  position: absolute; left: 50%; top: 50%;
  width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Neutral-graue Kugel statt Navy (Marie 2026-08-25, P2 — Töne aus der
     etablierten Charcoal-Familie §5a). */
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.24), transparent 44%),
    radial-gradient(circle at 50% 56%, #2C3034, #1F2226 58%, #131518 78%);
  box-shadow:
    0 26px 60px -18px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(255, 255, 255, 0.08);
  z-index: 1; opacity: 0; pointer-events: none;
}
.hv-blob.is-fallback .hv-blob__fallback {
  opacity: 1; animation: hv-blob-breathe 4s ease-in-out infinite;
}
@keyframes hv-blob-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}

/* --- 2 Live-Benachrichtigungen (Push-up, konstante Höhe) --- */
/* Fenster (beschnitten): zeigt genau 2 Karten. Der Track scrollt als
   starre Einheit durch → die alte Karte verschwindet oben restlos aus dem
   Fenster (Marie 2026-07-07). ~2×54px + 1×10px Gap. */
.hv-orders__feed {
  position: relative;
  width: 100%;
  height: 118px;
  overflow: hidden;
  /* Sanftes Schweben des ganzen Fensters — gibt der Karten-Ebene Dimension.
     Transform am Fenster, der Track-Scroll läuft am Kind → kein Konflikt. */
  animation: hv-feed-float 8s ease-in-out infinite;
}
@keyframes hv-feed-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
/* Fließband-Track: hält alle Karten, JS scrollt ihn per translateY. */
.hv-orders__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  will-change: transform;
}
.hv-order {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 12px; padding: 11px 13px; border-radius: 14px;
  /* Eigenständige, schwebende Glas-Karte (Dunkel-Insel, opak genug für
     helle wie dunkle Hero-Bänder — kein backdrop-filter wegen des
     Transform-Flickers bei den Ein-/Ausblend-/FLIP-Animationen, §5a). */
  background: linear-gradient(178deg, rgba(28, 42, 56, 0.92), rgba(13, 22, 32, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    0 16px 34px -20px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.hv-order__icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; color: var(--hv-txt);
  background: rgba(var(--hv-glow), 0.14); border: 1px solid rgba(var(--hv-glow), 0.28);
}
.hv-order__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hv-order__line {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--hv-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-order__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
}
.hv-order__tag .icon { width: 13px; height: 13px; }
.hv-order__tag--ok { color: var(--hv-ok); }
.hv-order__tag--idle,
.hv-order__tag--pending { color: var(--hv-txt-3); }
.hv-order__spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: rgba(var(--hv-glow), 1);
  animation: hv-spin 0.75s linear infinite;
}
@keyframes hv-spin { to { transform: rotate(360deg); } }
.hv-order__val {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  color: var(--hv-ok); white-space: nowrap;
}

/* --- Trustpilot-Strip (schwebt frei, kein Panel-Trenner mehr) --- */
.hv-orders__trust {
  margin-top: clamp(2px, 0.6vw, 6px);
  display: flex; justify-content: center;
}
.hv-orders__trust .trustpilot-widget { width: 100%; max-width: 300px; }

/* --- IO-Gating: CSS-Chrome-Loops pausiert bis .is-revealed
       (Orb-rAF + Feed werden per JS gestartet/gestoppt) --- */
.hv-cockpit .hv-cockpit__live-dot,
.hv-cockpit .hv-cockpit__signal i,
.hv-cockpit .hv-blob,
.hv-cockpit .hv-orders__feed,
.hv-cockpit .hv-blob__fallback {
  animation-play-state: paused;
}
.hv-cockpit.is-revealed .hv-cockpit__live-dot,
.hv-cockpit.is-revealed .hv-cockpit__signal i,
.hv-cockpit.is-revealed .hv-blob,
.hv-cockpit.is-revealed .hv-orders__feed,
.hv-cockpit.is-revealed .hv-blob.is-fallback .hv-blob__fallback {
  animation-play-state: running;
}

/* Light-Theme: Glow dezenter über dem hellen Band */
html[data-theme="light"] .hv-orders__glow { opacity: 0.55; }

/* Reduced-Motion: kein Tilt, keine CSS-Loops (Orb bleibt statischer
   Fallback, Feed wird per JS statisch gefüllt) */
@media (prefers-reduced-motion: reduce) {
  .hv-orders { transform: none !important; }
  .hv-cockpit__live-dot,
  .hv-cockpit__signal i,
  .hv-blob,
  .hv-orders__feed,
  .hv-blob__fallback,
  .hv-order__spin { animation: none !important; }
}

/* ---------- Hero-Visual „Die Auswahl" (Mitarbeitergewinnung) ----------
   3D-Bühne (Marie 2026-08-03 — ersetzt die Canvas-2D-Fassung „Talent-
   Auswahl" von 2026-07-24, die laut Marie „wie eine animierte SVG-Datei"
   wirkte): ein breiter Bewerber-Strom verjüngt sich zum gläsernen
   Auswahl-Portal mit der Bese-Bildmarke im Kern; die Ausgewählten reihen
   sich rechts zu einer geordneten Kette von Lichtern im Betrieb. Rendering + ALLE Farben
   leben im JS (scripts.html, [data-hv-pick] — Theme-Uniforms, Palette
   auf Dark gepinnt, weil der MA-Hero in beiden Themes dunkel ist) →
   hier nur Layout, Halo und der statische SVG-Fallback.
   Das Canvas blutet moderat nach links aus der Spalte (vom .hero
   overflow:hidden sauber beschnitten → kein H-Scroll), damit der
   Zustrom „hinter" der Textspalte beginnt.
   ⚠ SEIT 24.09.2026 NIRGENDS EINGEBUNDEN: auf der MA-Seite trägt das
   Hintergrundvideo „Die Garderobe" den Hero (Block ma-hero-video-r24).
   Block + Engine [data-hv-pick] bleiben als Rückbau-Vorlage; Reaktivierung
   = Include-Zeile im MA-Page-File (Kommentar dort). */
.hv-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 46vw, 600px);
}
/* Wrapper trägt die Offsets; das Canvas füllt ihn 100 %/100 % — ein absolut
   positioniertes Canvas mit width:auto nähme seine ATTRIBUT-Breite als
   Eigenbreite (Replaced Element) → ResizeObserver-Feedback-Loop. */
.hv-pick__stage {
  position: absolute;
  inset: 0 0 0 clamp(-150px, -12vw, -40px);
  pointer-events: none;
}
/* Desktop (2-spaltiger Hero): Bühne VOLLFLÄCHIG über den ganzen Hero
   (Marie 2026-07-27 — „integriert sich in den Hintergrund, nicht links
   abgeschnitten"; beim Neubau 2026-08-03 bewusst beibehalten). .hv-pick
   wird static → die Stage ankert am .hero (position:relative +
   overflow:hidden), die Spalte reserviert über ihre min-height weiter
   die Grid-Höhe. Der Text bekommt z-index darüber; das JS erkennt den
   Vollflächen-Modus an der Stage-Breite und schiebt Portal (~60 %) und
   Monolith (~86 %) nach rechts. Über der Text-Zone dimmt der Shader die
   Partikel auf ~22 % (Lesbarkeits-Regel Marie 2026-07-27). */
@media (min-width: 1024px) {
  .page-mitarbeitergewinnung .hv-pick { position: static; }
  .page-mitarbeitergewinnung .hv-pick__stage { inset: 0; z-index: 0; }
  .page-mitarbeitergewinnung .hero__text { position: relative; z-index: 2; }
}
.hv-pick__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hv-pick.is-ready .hv-pick__canvas { opacity: 1; }
.hv-pick.is-fallback .hv-pick__canvas { display: none; }
/* Weicher Schein hinter dem Portal — gibt der Bühne Tiefe, ohne dass der
   Text daneben an Kontrast verliert. */
.hv-pick__halo {
  position: absolute;
  left: 70%;
  top: 50%;
  width: min(58%, 420px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), 0.20) 0%,
    rgba(var(--glow-rgb), 0.07) 45%,
    transparent 72%);
  /* Weichzeichner PFLICHT (Marie 2026-08-03: „rechts so eine Kante"):
     ein Radial-Verlauf mit so niedriger Deckkraft zeichnet auf der
     dunklen Bühne durch 8-Bit-Banding eine sichtbare Kreiskante —
     erst der Blur löst den Rand vollständig auf. */
  filter: blur(46px);
  pointer-events: none;
}
/* Zweiter, kleinerer Schein am Ziel: gibt der Reihe der angekommenen
   Lichter Grund, ohne sie in einen Behälter zu sperren (jede Glas-
   Fassung dort las sich als Fremdkörper — Rahmen/Smartphone/Tablett). */
.hv-pick__halo--team {
  left: 88.5%;
  width: min(30%, 260px);
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), 0.24) 0%,
    rgba(var(--glow-rgb), 0.08) 45%,
    transparent 72%);
  filter: blur(38px);
}
/* Statischer Fallback (reduced-motion / kein WebGL) */
.hv-pick__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 520px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.hv-pick.is-fallback .hv-pick__fallback { opacity: 1; }
/* Vollflächen-Modus: die Bühne ist der ganze Hero — ohne diese Regel
   säße das Standbild mit 520px-Deckel winzig in der Hero-Mitte, also
   hinter der Textspalte. Mit voller Breite landen Portal (~65 % der
   viewBox) und Lichter-Reihe (~90 %) genau dort, wo sie im bewegten
   Bild stehen. */
@media (min-width: 1024px) {
  .page-mitarbeitergewinnung .hv-pick__fallback {
    width: min(96%, 1240px);
    /* Über der Textspalte ausblenden — dieselbe Lesbarkeits-Regel, die
       im bewegten Bild der Shader übernimmt (max ~22–30 % Deckkraft). */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 38%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 38%, #000 60%);
  }
}
.hv-pick__stop-a { stop-color: var(--em-grad-a); }
.hv-pick__stop-b { stop-color: var(--em-grad-b); }
.hv-pick__flow { opacity: 0.42; }
.hv-pick__portal { opacity: 0.85; }
.hv-pick__cells { fill: var(--accent-hover); opacity: 0.9; }
.hv-pick__fallback-mark { fill: var(--heading-color); }
/* Trustpilot Micro TrustScore unter dem Hero-CTA (linke Textspalte,
   Marie 2026-07-24 — ersetzt den früheren Badge in der Viz-Spalte;
   inzwischen auch von Startseite + Videoproduktion genutzt).
   Negativ-Margin kompensiert den INTERNEN Zentrier-Versatz des
   Trustpilot-iframes (Widget-Inhalt ist schmaler als die 300px-Box und
   wird darin zentriert) → sichtbarer Text bündig mit CTA/Headline. */
.hero__trust-cta {
  margin-top: clamp(16px, 2.2vw, 24px);
  max-width: 300px;
  margin-left: -24px;
}
.hero__trust-cta .trustpilot-widget { width: 100%; }
@media (max-width: 1023px) {
  /* Einspaltiger Hero: Viz kompakter, kein Links-Ausbluten nötig */
  .hv-pick { min-height: clamp(340px, 58vw, 440px); }
  .hv-pick__stage { left: clamp(-32px, -3vw, -10px); }
  .hv-pick__halo { left: 64%; width: min(70%, 340px); }
  .hv-pick__halo--team { left: 87%; width: min(38%, 200px); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-pick__canvas { transition: none; }
}

/* ---------- Hero-Visual „Der Zulauf" (Plattform) ----------
   krepling.com-Inspiration (Marie 2026-09-02): die Kanal-Icons — Anruf,
   Termin, Bewerbung, E-Mail, Google-Bewertung, Facebook, Instagram —
   schweben von oben heran, laufen durch den gläsernen Bese-AI-Ring und
   münden in der leuchtenden Bese-Bildmarke (= die Plattform). Seit
   Runde 2 (Marie: „statt dieser Kacheln direkt die Icons nur … mit
   einem 3D-Effekt") sind es extrudierte 3D-Glyphen statt Badge-Karten.
   Palette, Glyphen-Geometrie und Bewegung leben im JS (scripts.html,
   [data-hv-hub] — Palette auf Dark gepinnt, der Hero ist in beiden
   Themes dunkel) → hier nur Layout, Halos + der statische SVG-Fallback. */
.hv-hub {
  position: relative;
  min-height: clamp(460px, 46vw, 620px);
}
/* Wrapper trägt die Offsets; das Canvas füllt ihn 100 %/100 % — ein absolut
   positioniertes Canvas mit width:auto nähme seine ATTRIBUT-Breite als
   Eigenbreite (Replaced Element) → ResizeObserver-Feedback-Loop.
   Oben ein Überhang: die Icons fallen sichtbar „aus dem Hero-Kopf"
   herein (krepling-Zug); der .hero (overflow:hidden) beschneidet sauber,
   kein H-/V-Scroll. Der top-Wert hier ist nur der No-JS-/Fallback-Stand —
   die Engine zieht ihn per hbAnchorTop (scripts.html) BÜNDIG an die
   Hero-Oberkante (Marie Runde 3: „oben null Abstand zum Rand"; der
   CSS-Clamp ließ je nach Breite 18–174px Rest-Kante). */
.hv-hub__stage {
  position: absolute;
  inset: clamp(-110px, -8vw, -40px) clamp(-90px, -6vw, -24px) 0 clamp(-40px, -3vw, -12px);
  pointer-events: none;
}
.hv-hub__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hv-hub.is-ready .hv-hub__canvas { opacity: 1; }
.hv-hub.is-fallback .hv-hub__canvas { display: none; }
/* Weiche Scheine hinter Ring und Marke — Weichzeichner PFLICHT: ein
   Radial-Verlauf mit so niedriger Deckkraft zeichnet auf der dunklen
   Bühne durch 8-Bit-Banding eine sichtbare Kreiskante (Lehre MA-Hero
   2026-08-03), erst der Blur löst den Rand vollständig auf. */
.hv-hub__halo {
  position: absolute;
  left: 50%;
  /* 54 % / 83 % gelten für die CSS-Clamp-Bühne (Fallback/No-JS) — mit
     aktivem Kanten-Anker variiert die Bühnenhöhe je Breite, die Engine
     setzt die Halos dann inline exakt auf Ring- und Marken-Anker
     (hbLayout in scripts.html). */
  top: 54%;
  width: min(64%, 380px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), 0.16) 0%,
    rgba(var(--glow-rgb), 0.06) 45%,
    transparent 72%);
  filter: blur(46px);
  pointer-events: none;
}
.hv-hub__halo--mark {
  top: 83%;
  width: min(42%, 250px);
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), 0.22) 0%,
    rgba(var(--glow-rgb), 0.08) 45%,
    transparent 72%);
  filter: blur(38px);
}
/* Statischer Fallback (reduced-motion / kein WebGL) */
.hv-hub__fallback {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(86%, 470px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.hv-hub.is-fallback .hv-hub__fallback { opacity: 1; }
.hv-hub__stop-a { stop-color: var(--em-grad-a); }
.hv-hub__stop-b { stop-color: var(--em-grad-b); }
.hv-hub__icons {
  fill: rgba(var(--glow-rgb), 0.14);
  stroke: var(--silver-blue);
  stroke-width: 1;
  opacity: 0.9;
}
.hv-hub__flow { opacity: 0.4; }
.hv-hub__ring { opacity: 0.85; }
.hv-hub__ring--outer { opacity: 0.4; }
.hv-hub__fallback-mark { fill: var(--heading-color); }
@media (max-width: 1023px) {
  /* Einspaltiger Hero: Bühne kompakter, Überhänge kleiner */
  .hv-hub { min-height: clamp(360px, 62vw, 470px); }
  .hv-hub__stage { inset: clamp(-60px, -7vw, -24px) clamp(-24px, -3vw, -10px) 0 clamp(-24px, -3vw, -10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-hub__canvas { transition: none; }
}

/* Plattform-Hero: Start-Choreografie (krepling.com, Marie 2026-09-02) —
   die Text-Ebenen staffeln sich nach dem ersten Paint weich ein
   (Headline → Lead → CTA-Reihe → Sub-CTA), das Visual blendet über
   .is-ready nach dem Three.js-Init dazu. CSS-only: läuft auch ohne JS
   und endet immer sichtbar (fill-mode both, 100 % = Endzustand);
   translate-Property statt transform, damit nichts mit Reveal-/Tilt-
   Transforms kollidiert (§0a-Lehre). */
/* Headline bewusst OHNE Delay + kürzer: sie ist der LCP-Kandidat der
   Seite — der krepling-Effekt lebt von der Staffelung der FOLGE-Ebenen,
   nicht davon, dass die Kernüberschrift spät kommt (Guardian). */
.page-plattform .hero__headline  { animation: hub-hero-in 0.55s var(--ease) both; }
.page-plattform .hero__lead      { animation: hub-hero-in 0.85s var(--ease) 0.26s both; }
.page-plattform .hero__actions   { animation: hub-hero-in 0.85s var(--ease) 0.44s both; }
.page-plattform .mf-hero__subcta { animation: hub-hero-in 0.85s var(--ease) 0.58s both; }
@keyframes hub-hero-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-plattform .hero__headline,
  .page-plattform .hero__lead,
  .page-plattform .hero__actions,
  .page-plattform .mf-hero__subcta { animation: none; }
}

/* ---------- Hero-Visual „Das Netz" (Startseite) ----------
   Woven-Light-Referenz (Marie 2026-07-29): zwei Fäden-Stränge — Aufträge
   und Mitarbeiter — winden sich zu einem Gewebe, in dessen Mitte die
   Bese-Bildmarke als Knotenpunkt leuchtet; der Zeiger verdrängt das Netz
   und es formt sich elastisch zurück. Das Rendering lebt in scripts.html
   ([data-hv-weave], Three.js lazy via data-three-src) — hier nur Layout,
   Halo und der statische SVG-Fallback. ALLE Partikel-Farben sind
   Theme-Uniforms im JS (Dark: Silber/Cyan additiv — Light: Navy-Tinte
   deckend, weil der Startseiten-Hero im Light-Theme ein weißes Band ist). */
.hv-weave {
  position: relative;
  min-height: clamp(430px, 45vw, 580px);
}
/* Wrapper trägt die Offsets; das Canvas füllt ihn 100 %/100 % (siehe
   Replaced-Element-Falle im hv-pick-Block darüber). Das Geflecht darf
   moderat nach oben/rechts aus der Spalte laufen — der .hero beschneidet
   sauber (overflow:hidden) → kein Horizontal-Scroll.
   SYMMETRISCHER ÜBERHANG (Marie 2026-08-03, zwei Runden): erst meldete
   sie eine Schnittkante LINKS — dort stand der Offset auf 0, die Bühne
   endete exakt an der Spaltenkante und vom Zeiger verdrängte Partikel
   liefen in den Canvas-Rand. Ein Überhang nur links verlagerte das
   Problem prompt nach RECHTS (das Motiv rückte in Richtung der rechten
   Canvas-Kante, die ab ~1600px Viewport-Breite sichtbar im Bild liegt).
   Lehre: bei einem Partikel-Visual mit Zeiger-Verdrängung muss der
   Spielraum auf BEIDEN Seiten gleich groß sein — der Rand ist sonst
   immer irgendwo im Bild. Links greift die Bühne dadurch unter die
   Textspalte (Text liegt per z-index darüber), rechts läuft sie aus dem
   Viewport; der .hero beschneidet sauber (overflow:hidden) → kein
   Horizontal-Scroll. Das JS zentriert die Komposition über der SPALTE
   statt über der verbreiterten Bühne (wvCenterOffset, Muster
   cvCenterOffset der Videoproduktion-Kamera). */
.hv-weave__stage {
  position: absolute;
  inset: clamp(-56px, -5vw, -20px) clamp(-260px, -17vw, -90px) clamp(-24px, -2vw, -8px) clamp(-260px, -17vw, -90px);
  pointer-events: none;
}
.hv-weave__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hv-weave.is-ready .hv-weave__canvas { opacity: 1; }
.hv-weave.is-fallback .hv-weave__canvas { display: none; }
/* Weicher Schein hinter dem Knotenpunkt — gibt dem Gewebe Tiefe, ohne
   dass der Text daneben an Kontrast verliert. */
.hv-weave__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78%, 460px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), 0.16) 0%,
    rgba(var(--glow-rgb), 0.06) 45%,
    transparent 70%);
  pointer-events: none;
}
html[data-theme="light"] .hv-weave__halo { opacity: 0.55; }
/* Statischer Fallback (reduced-motion / kein WebGL) */
.hv-weave__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84%, 420px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.hv-weave.is-fallback .hv-weave__fallback { opacity: 1; }
.hv-weave__stop-a { stop-color: var(--em-grad-a); }
.hv-weave__stop-b { stop-color: var(--em-grad-b); }
.hv-weave__rings { opacity: 0.55; }
.hv-weave__fallback-mark { fill: var(--heading-color); }
@media (max-width: 1023px) {
  /* Einspaltiger Hero: kompakter, kein seitliches Ausbluten nötig */
  .hv-weave { min-height: clamp(320px, 56vw, 420px); }
  .hv-weave__stage { inset: clamp(-24px, -3vw, -10px) 0 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-weave__canvas { transition: none; }
}

/* ---------- Hero-Flow-Layer „Der Strom" (hero-viz-flow) ----------
   Stufe 2 des Hero-Animations-Programms (Maries Liquid-Metal-Referenz,
   2026-07-30 — nur Motion-Idee, Farben = CI-Tokens): EIN wiederverwend-
   barer Fragment-Shader-Hintergrund für zentrierte Heroes ohne eigenes
   Visual. Liegt im DOM direkt hinter .hero__aurora auf demselben
   z-index:-1 — spätere Quell-Reihenfolge malt ihn ÜBER die Aurora,
   der Hero-Content bleibt darüber (isolation: isolate am .hero).
   Engine [data-hv-flow] in scripts.html (rohes WebGL, kein Three.js);
   Text-Zonen-Dimmung + Theme-Paletten leben im Shader. reduced-motion/
   kein WebGL: Layer bleibt leer → die CSS-Aurora ist der Fallback. */
.hv-flow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
.hv-flow__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hv-flow.is-ready .hv-flow__canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* Kein Shader bei reduced-motion — Layer komplett aus (die Engine
     initialisiert dann ohnehin nicht, das display:none spart den
     leeren Canvas im Layer-Tree). */
  .hv-flow { display: none; }
}

/* ---------- Hero-Visual „Die gläserne 1" (Marktführerschaft) ----------
   Talenthafen-Referenz (Marie 2026-07-27): EIN monumentales Glas-Objekt
   rechts neben dem Hero-Text — eine Ziffer 1 aus Glas, in deren Stamm
   die Bese-Bildmarke leuchtet. Das Rendering lebt in scripts.html
   ([data-hv-one], Three.js lazy via data-three-src) — hier nur Layout,
   Halo/Boden-Schatten und der statische SVG-Fallback. Glas-Farben =
   Theme-Uniforms im JS (Dark: Silber-Glas / Light: Navy-Tinte),
   Halo/Schatten über die Kanal-Tripel-Tokens. */
.hv-one {
  position: relative;
  min-height: clamp(440px, 44vw, 600px);
}
.hv-one__stage {
  position: absolute;
  inset: clamp(-24px, -2vw, -8px) 0;
  pointer-events: none;
}
.hv-one__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hv-one.is-ready .hv-one__canvas { opacity: 1; }
.hv-one.is-fallback .hv-one__canvas { display: none; }

/* Ruhiger Cyan-Halo hinter dem Objekt (statisch — das Leben kommt aus
   dem WebGL-Licht-Sweep) + weicher Boden-Schatten: das Objekt schwebt. */
.hv-one__halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: clamp(280px, 30vw, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--glow-rgb), 0.16) 0%,
    rgba(var(--glow-rgb), 0.05) 45%,
    transparent 70%
  );
  filter: blur(6px);
}
.hv-one__shadow {
  position: absolute;
  left: 50%;
  bottom: clamp(6px, 1.5vw, 20px);
  width: clamp(180px, 17vw, 260px);
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--shadow-rgb), 0.35) 0%, transparent 70%);
  filter: blur(10px);
}

/* Statischer SVG-Fallback (reduced-motion / kein WebGL / Script-Fehler):
   dieselbe „1"-Silhouette, Gradient-Stops auf den Headline-Italic-Tokens
   (theme-sicher), Bildmarke in Weiß auf dem getönten Glas. */
.hv-one__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  height: min(86%, 480px);
  transform: translate(-50%, -50%) rotate(-3deg);
  opacity: 0;
  visibility: hidden;
}
.hv-one.is-fallback .hv-one__fallback {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.hv-one__stop-a { stop-color: var(--em-grad-a); }
.hv-one__stop-b { stop-color: var(--em-grad-b); }
.hv-one__poly { opacity: 0.85; }
.hv-one__fallback-mark { fill: var(--white); }

@media (max-width: 1023px) {
  /* Einspaltiger Hero: Objekt kompakter unter dem Text */
  .hv-one { min-height: clamp(320px, 64vw, 430px); }
}

/* ---------- Hero-Visual „Die Kamera" (Videoproduktion) ----------
   Talenthafen-Referenz (Marie 2026-07-30): EIN monumentales Objekt
   rechts neben dem Hero-Text — hier eine schwebende Kinokamera, in
   deren Objektiv die Bese-Bildmarke leuchtet. „Nur noch hochwertiger
   und mit einer Kamera" → echtes 3D statt Standbild; die Vorgänger
   (gezeichnete Set-Szene, dann Set-Foto) sind im Partial-Kommentar
   dokumentiert.

   Das Rendering lebt in scripts.html ([data-hv-cam], Three.js lazy
   via data-three-src) — hier nur Layout, Halo/Boden-Schatten und der
   statische SVG-Fallback. Die Metall-/Objektiv-Farben sind
   Theme-Uniforms im JS (Dark: Charcoal mit Silber-Rim / Light:
   Navy-Korpus mit weißen Lichtern), Halo und Schatten laufen über die
   Kanal-Tripel-Tokens. */
.page-videoproduktion .hero__text { position: relative; z-index: 1; }

.hv-cam {
  position: relative;
  min-height: clamp(420px, 42vw, 560px);
}
.hv-cam__stage {
  position: absolute;
  inset: clamp(-24px, -2vw, -8px) 0;
  pointer-events: none;
}
.hv-cam__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hv-cam.is-ready .hv-cam__canvas { opacity: 1; }
.hv-cam.is-fallback .hv-cam__canvas { display: none; }

/* Ruhiger Lichtschein hinter der Kamera (statisch — das Leben kommt
   aus dem WebGL-Licht-Sweep) + weicher Boden-Schatten: sie schwebt. */
.hv-cam__halo {
  position: absolute;
  left: 52%;
  top: 47%;
  width: clamp(300px, 32vw, 500px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--glow-rgb), 0.16) 0%,
    rgba(var(--glow-rgb), 0.05) 45%,
    transparent 70%
  );
  filter: blur(6px);
}
.hv-cam__shadow {
  position: absolute;
  left: 50%;
  bottom: clamp(6px, 1.5vw, 20px);
  width: clamp(200px, 19vw, 300px);
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--shadow-rgb), 0.35) 0%, transparent 70%);
  filter: blur(10px);
}

/* Statischer SVG-Fallback (reduced-motion / kein WebGL / Script-Fehler):
   dieselbe Kamera-Silhouette, Gradient-Stops auf den Headline-Italic-
   Tokens (theme-sicher), Objektiv dunkel mit leuchtender Bildmarke. */
.hv-cam__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 520px);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
}
.hv-cam.is-fallback .hv-cam__fallback {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.hv-cam__stop-a { stop-color: var(--em-grad-a); }
.hv-cam__stop-b { stop-color: var(--em-grad-b); }
/* Objektiv im Fallback in BEIDEN Themes dunkel: --deep-navy ist der
   einzige Surface-Ton, den das Light-Theme unverändert lässt (die
   --surface-*-Rampe kippt dort auf Off-White) — die Bildmarke darin
   bleibt weiß und lesbar. */
.hv-cam__lens { fill: var(--deep-navy); }
.hv-cam__fallback-mark { fill: var(--white); }

@media (min-width: 1024px) {
  /* Die Kamera schwenkt mit dem Zeiger — ihr Objektiv ragt dabei weit nach
     links. Die Bühne bekommt darum links Überhang über die Textspalte
     hinaus, sonst schneidet die Canvas-Kante das Objektiv ab (Marie
     2026-07-30). Der Hero hat overflow:hidden → kein Horizontal-Scroll.
     Das JS zentriert die Kamera weiterhin über der SPALTE, nicht über der
     verbreiterten Bühne (cvCenterOffset) — sonst wanderte sie mit. */
  .hv-cam__stage { left: clamp(-260px, -18vw, -110px); }
}

@media (max-width: 1023px) {
  /* Einspaltiger Hero: Objekt kompakter unter dem Text */
  .hv-cam { min-height: clamp(300px, 60vw, 420px); }
}

/* ---------- Hero-Logo-Marquee — Trust-Band ALLER Heroes ----------
   Marie 2026-09-10: „Du hast bei der Seite Videoproduktion in der
   Hero-Section diesen Slider mit den Logos. Ich möchte, dass du das
   bitte in jeder Hero-Section aufnimmst."

   Bis dahin lief der Streifen NUR auf der Videoproduktion-Seite (dort
   seit 2026-09-04 in der Full-Bleed-Fassung, die Marie abgenommen hat:
   größere Logos, Band über die volle Viewport-Breite). Genau diese
   Fassung ist jetzt die BASIS für alle 20 Heroes — der frühere
   `.page-videoproduktion`-Override-Block ist darin aufgegangen.

   Teilt @keyframes logo-scroll + das Compositing-Pattern (filter einmal
   auf Track-Ebene, translate3d) mit Section 02. Bewusst ohne Label-Zeile
   darüber (Marie 2026-06-10).

   Full-Bleed nach dem etablierten §0a-Muster (z. B. .crew-wall):
   width:100vw + negativer Left-Margin, geclippt vom .hero
   { overflow:hidden } — deshalb liegt das Markup im `.container`
   (der Hero ist ab 1024px `display:flex`, ein zweites direktes Kind
   würde neben den Inhalt rutschen). */
:root {
  /* Streifenhöhe = Logo-Höhe. Als Token, weil der Skyline-Hintergrund
     der Selbstständig-machen-Seite denselben Wert braucht, um über dem
     Band zu enden (Block „SELBSTSTÄNDIG MACHEN — Heller Hero"). */
  --hero-logos-h: clamp(52px, 6.4vw, 92px);
  /* MINDEST-Luft zwischen Hero-Inhalt und Band. Wo der Hero freien Raum
     hat, wird der Abstand größer — das Band sitzt dann am Fuß (s. u.). */
  --hero-logos-gap: clamp(40px, 5.6vw, 84px);
  /* Abstand des Bandes zur Hero-Unterkante. Marie 2026-09-10: „Der darf
     ruhig relativ weit unten am Rand sein, also so, dass man die Logos
     noch erkennt … die Logos dürfen jetzt aber nicht abgeschnitten
     sein, unten." Der Wert ersetzt auf Band-Heroes den Innenabstand nach
     unten — vorher schwankte der Abstand je nach Inhaltshöhe zwischen 32
     und 171px, jetzt ist er auf allen Seiten und in jeder Breite gleich.
     Abgeschnitten werden kann nichts: das Band liegt im Fluss INNERHALB
     der Hero-Box, nicht darüber hinaus. */
  --hero-logos-rand: clamp(24px, 3vw, 40px);
}

/* Band an den Fuß des Heros ----------------------------------------
   Zwei Bausteine, beide an `:has(.hero-logos)` gehängt — damit fasst die
   Regel ausschließlich die Heroes an, die das Band wirklich führen (14
   von 20), und die übrigen bleiben unberührt. Erster `:has()`-Einsatz im
   Projekt; der Fallback ohne Unterstützung ist gutartig: das Band sitzt
   dann wie zuvor am Ende des zentrierten Inhalts, nur weiter oben.

   (1) Der Innenabstand nach unten schrumpft auf `--hero-logos-rand`.
   (2) Ab 1024px füllt der `.container` die Hero-Höhe (`stretch` statt
       `center`), der Inhalt zentriert sich per `margin-block: auto` im
       verbleibenden Raum und das Band bleibt als letztes Kind unten
       stehen. Ohne (2) würde der zentrierte Block das Band mit nach oben
       ziehen, sobald der Hero freien Raum hat. */
.hero:has(.hero-logos) {
  padding-bottom: var(--hero-logos-rand);
}

@media (min-width: 1024px) {
  .hero:has(.hero-logos) {
    align-items: stretch;
  }

  .hero > .container:has(.hero-logos) {
    display: flex;
    flex-direction: column;
  }

  /* alles außer dem Band zentriert sich im Restraum */
  .hero > .container:has(.hero-logos) > :not(.hero-logos) {
    margin-block: auto;
  }
}

.hero-logos {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--hero-logos-gap);
}

.hero-logos__tracks {
  /* über dem Scrim der Foto-/Video-Bühnen (siehe unten) */
  position: relative;
  z-index: 1;
  overflow: hidden;
  contain: layout paint;
  /* Explizite Höhe = CLS-Garantie, falls Logos langsam laden
     (identisch zur img-Höhe im Track). */
  height: var(--hero-logos-h);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.hero-logos__track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: var(--logo-mono-filter);
  opacity: 0.72;
  animation: logo-scroll 44s linear infinite;
}

.hero-logos:hover .hero-logos__track {
  animation-play-state: paused;
}

.hero-logos__track li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-logos__track img {
  height: var(--hero-logos-h);
  width: auto;
  max-width: 340px;
  object-fit: contain;
}

/* ---------- Heller Hero: Logos in Tinte statt Weiß ----------
   Marie 2026-09-10 zur Selbstständig-machen-Seite: „sodass die Logos
   dann alle schwarz sind." Alle übrigen Heroes sind Dunkel-Inseln und
   ziehen ihr Weiß aus --logo-mono-filter; auf einem HELLEN Hero läge
   dort weiß auf weiß. Der Light-Token (brightness(0) opacity(0.6))
   allein reicht nicht: mit der Track-Deckkraft 0,72 landeten die Logos
   effektiv bei 0,43 und wirkten ausgewaschen — deshalb volle Tinte plus
   eine kräftigere Track-Deckkraft.
   Gekoppelt an [data-hero-light] (nicht an die Seiten-Klasse), damit
   jeder weitere helle Hero die Regel automatisch erbt — UND an
   html[data-theme="light"]: der helle Hero ist eine Light-Theme-Regel
   (§5a), im Dark-Theme ist auch diese Seite dunkel. Ohne die Theme-
   Bindung standen die Logos dort schwarz auf dunkel (gemessen: gar
   nicht mehr vom Untergrund zu unterscheiden). */
html[data-theme="light"] .hero[data-hero-light] .hero-logos__track {
  filter: brightness(0) opacity(1);
  opacity: 0.78;
}

/* ---------- Foto-/Video-Bühnen: Scrim unter dem Band ----------
   GEMESSEN (Logo-Pixel gegen den Untergrund dahinter, 1440x900): auf den
   Dunkel-Insel-Heroes liegt der Median bei 5,1–6,5:1 — auf den beiden
   Heroes mit vollflächigem Foto/Video aber bei 1,38:1 (Team, Foto
   HG-Team.webp) bzw. 1,32:1 (Karriere, Office-Loop): dort trifft der
   Streifen Pflaster und Grün, die Logos verschwinden schlicht.
   Beide Bühnen bringen ohnehin einen eigenen Scrim mit (§5a) — er wird
   hier nur bis unter das Band verlängert. Weich auslaufendes Radial statt
   Rechteck, damit über dem Foto kein sichtbarer Kasten entsteht; Ton ist
   der projektweit theme-feste Near-Black --surface-0 als RGB-Tripel.
   NUR NOCH TEAM (2026-09-10): die Karriere-Seite hat ihr Logo-Band auf
   Marie-Zuruf abgegeben („für die Karriereseite nicht relevant") — und ihre
   Video-Überlagerung soll gleichmäßig über der ganzen Bühne liegen, was
   dieser lokale Fleck (bis 0,80) gerade verhinderte. Kommt das Band dort je
   zurück, gehört `.page-karriere` wieder in den Selektor. */
.page-team .hero-logos::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 118%;
  height: calc(var(--hero-logos-h) * 3.1);
  background: radial-gradient(
    62% 52% at 50% 50%,
    rgba(6, 10, 14, 0.80) 0%,
    rgba(6, 10, 14, 0.68) 46%,
    rgba(6, 10, 14, 0.34) 72%,
    rgba(6, 10, 14, 0) 100%
  );
  pointer-events: none;
}

/* ---------- Reduced Motion: Hero-Marquee steht ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-logos__track {
    animation-play-state: paused;
  }
}
/* ============================================================
   Section 19 — Probleme vor der Gründung (Selbstständig machen)
   Redesign-Iteration 3 (Marie 2026-06-11): EIN gemeinsamer
   Animations-Hintergrund („Gründer-Kosmos": Hub + 3 gegenläufig
   rotierende Chip-Ringe + Dots + Glow) hinter BEIDEN Kacheln;
   die Kacheln liegen als echte Glasboxen (backdrop-filter) versetzt
   darüber. Reveal: IO one-shot auf Stage + Kacheln (.is-revealed
   via scripts.html), Loops bis dahin paused (§0a-Pattern).
   ============================================================ */
.probleme {
  padding-block: var(--section-py);
}

/* Lange Live-Frage als H2 — braucht mehr Zeilenbreite als die
   22ch-Default des section-header__title */
.probleme__title {
  max-width: 34ch; /* 26→34ch (Marie 2026-09-02): vollere Zeilen der Kern-Frage */
  /* §5a-Pattern (wie .capacity__title): Auto-Hyphenation trennte
     „Rohrrei-nigung" mitten in der Kern-Frage — manual lässt nur
     Wortgrenzen umbrechen, overflow-wrap bleibt als 320px-Safety. */
  hyphens: manual;
}

.probleme__sub {
  margin: 0;
  font-size: var(--text-lead);
  color: var(--text-200);
}

/* Kompakter Rhythmus (Marie 2026-06-11): Header näher an die
   Stage als der globale section-header-Abstand */
.probleme__header {
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* ---------- Stage: Kosmos hinten, Kacheln versetzt davor ----------
   Flex-Column mit großem Gap — der Kosmos-Hub wird in der
   diagonalen Lücke zwischen den Kacheln sichtbar. overflow:hidden
   kappt den Kosmos an den Stage-Rändern (vertikale Soft-Edges
   kommen aus der mask auf .pb-cosmos). */
.probleme__stage {
  /* Kosmos-Größe lebt auf der Stage (vererbt an .pb-cosmos):
     min-height garantiert, dass das komplette Orbital-System in
     die Bühne passt — daher KEIN overflow:hidden und keine Maske
     mehr nötig (Marie 2026-06-11: nichts darf anschneiden). */
  --cosmos-size: clamp(620px, 74vw, 820px);
  position: relative;
  /* 3×3-Grid: beide Kacheln auf EINER Höhe in der mittleren Zeile
     (Marie 2026-06-11, versetzte Diagonal-Anordnung zurückgenommen),
     dazwischen die freie Kosmos-Spur mit dem Hub. Zeile 2 = auto
     (Höhe der höheren Kachel, beide strecken sich gleich), die
     Zeilen 1 und 3 teilen den restlichen Platz — Kacheln stehen
     vertikal zentriert. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 16vw, 250px) minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  padding-block: clamp(16px, 2.4vw, 32px);
  min-height: var(--cosmos-size);
}

/* ---------- Glaskacheln (echtes Milchglas über dem Kosmos) ----------
   backdrop-filter lebt hier bewusst auf: der BG ist visuell reich
   (rotierende Chips/Ringe), genau der Fall, für den CI §07 den Blur
   vorsieht (vgl. §5a-Eintrag zur Blur-Auslassung auf uniformem BG).
   KEINE Hover-Transforms auf den Kacheln — transform + backdrop-
   filter triggert Chrome-Repaint-Flicker (§5a, 2026-05-18). */
.probleme__tile {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.5vw, 48px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid var(--glass-border-hover);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 48px rgba(var(--shadow-rgb), 0.32);
  /* Reveal-Initial-State */
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s ease,
    transform 0.8s var(--ease-morph);
}

.probleme__tile.is-revealed {
  opacity: 1;
  transform: none;
}

/* Kachel 02 rechts, gleiche Zeile = gleiche Höhe wie Kachel 01 */
.probleme__tile--right {
  grid-column: 3;
  grid-row: 2;
}

.probleme__index {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: var(--text-400);
  user-select: none;
}

/* Card-Headline in Display-Font — §5a-Pattern „H3 als Card-Headline"
   (wie .capacity__sub / .reviews-card__label) */
.probleme__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: var(--weight-regular);
  margin: 0 0 var(--space-4);
  color: var(--text-100);
}

.probleme__card-text {
  margin: 0;
  max-width: 54ch;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
}

/* ---------- Gründer-Kosmos (gemeinsamer BG-Layer) ----------
   Hub + 3 Ringe. Radien als Anteile der Kosmos-Größe, pro
   Spin-Group als --r an die Chips/Dots vererbt. */
.pb-cosmos {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--cosmos-size, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Szene blendet nach dem Stage-Reveal weich auf */
  opacity: 0;
  transition: opacity 1.2s ease 0.3s;
}

.probleme__stage.is-revealed .pb-cosmos {
  opacity: 1;
}

/* Atmender Radial-Glow hinterm Hub — weiß statt Cyan
   (Marie 2026-06-11: Kosmos soll weniger blau wirken) */
.pb-cosmos__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 70%);
  animation: pb-glow-breathe 6.5s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes pb-glow-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.8; }
  50%      { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
}

/* Statische gestrichelte Orbit-Linien (drehen langsam mit) —
   weiß mit niedriger Deckkraft statt Cyan (Marie 2026-06-11) */
.pb-cosmos__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
}

.pb-cosmos__orbit--1 {
  width: calc(var(--cosmos-size) * 0.40);
  height: calc(var(--cosmos-size) * 0.40);
}

.pb-cosmos__orbit--2 {
  width: calc(var(--cosmos-size) * 0.62);
  height: calc(var(--cosmos-size) * 0.62);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Ring 3 bei 0.77 statt 0.90: so bleiben auch die Chip-Pillen
   (halbe Breite ~90px) komplett in der Kosmos-Box — nichts ragt
   heraus, nichts wird angeschnitten */
.pb-cosmos__orbit--3 {
  width: calc(var(--cosmos-size) * 0.77);
  height: calc(var(--cosmos-size) * 0.77);
  border-color: rgba(255, 255, 255, 0.11);
}

/* Hub: deckender Glas-Kreis über den Spin-Ebenen — Chips laufen
   HINTER dem Hub durch (Orbit-hinter-Planet-Lesart) */
.pb-cosmos__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: clamp(118px, 12.5vw, 156px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  /* Deckender schwarzer Grund wie die Chips — var(--surface-1) statt
     Glass-Verlauf, der bläulich wirkte (Marie 2026-06-11). Deckend
     bleibt Pflicht: Chips laufen hinter dem Hub durch. */
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  /* Schlagschatten/Glow hinterm Hub weiß statt Cyan (Marie 2026-06-11) */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 44px rgba(255, 255, 255, 0.14);
  animation: pb-center-breathe 4.8s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes pb-center-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 36px rgba(255, 255, 255, 0.10); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 56px rgba(255, 255, 255, 0.20); }
}

.pb-cosmos__hub-icon {
  width: 26px;
  height: 26px;
  color: var(--accent-hover);
}

.pb-cosmos__hub-label {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-100);
}

/* ---------- Spin-Ebenen (3 Ringe, unterschiedliche Speeds) ----------
   Ring 2 läuft gegenläufig: animation-direction: reverse auf Spin
   UND Chip-Innen — die Summe beider Rotationen bleibt -angle,
   Labels stehen damit weiterhin aufrecht. */
.pb-cosmos__spin {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Eigene Compositing-Layer für die Dauer-Rotation — wichtig,
     weil davor zwei backdrop-filter-Kacheln resampeln (Guardian) */
  will-change: transform;
  animation: pb-spin linear infinite;
  animation-play-state: paused;
}

.pb-cosmos__spin--1 { --r: calc(var(--cosmos-size) * 0.20);  animation-duration: 28s; }
.pb-cosmos__spin--2 { --r: calc(var(--cosmos-size) * 0.31);  animation-duration: 44s; animation-direction: reverse; }
.pb-cosmos__spin--3 { --r: calc(var(--cosmos-size) * 0.385); animation-duration: 64s; }

@keyframes pb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Chips (0×0-Anker auf dem Ring + aufrechte Pille) ---------- */
.pb-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--r, 200px)));
}

.pb-chip__inner {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9999px;
  /* bewusst deckender Chip-Grund (Pills laufen hinter dem Hub durch,
     stehen über den Orbit-Linien). var(--surface-1) = dunkelster
     CI-Ton („schwarz" wie die Footer-Social-Icons, §5a) — Marie
     2026-06-11: Chips sollen schwarz statt blau wirken */
  background: var(--surface-1);
  border: 1px solid var(--glass-border-hover);
  box-shadow: 0 12px 28px rgba(var(--shadow-rgb), 0.35);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-100);
  white-space: nowrap;
  will-change: transform;
  animation: pb-counter-spin linear infinite;
  animation-play-state: paused;
}

/* Counter-Dauer/-Richtung muss exakt zum jeweiligen Ring passen */
.pb-chip__inner--1 { animation-duration: 28s; }
.pb-chip__inner--2 { animation-duration: 44s; animation-direction: reverse; }
.pb-chip__inner--3 { animation-duration: 64s; }

/* Counter-Rotation: kompensiert Spin (−360°) UND den statischen
   Chip-Winkel (−angle) — translate(-50%,-50%) zentriert die Pille
   auf ihrem 0×0-Anker und muss in der Transform-Kette bleiben. */
@keyframes pb-counter-spin {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg))); }
  to   { transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg) - 360deg)); }
}

.pb-chip__glyph {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  color: var(--accent-hover);
}

.pb-chip__glyph--icon {
  display: inline-flex;
}

.pb-chip__glyph--icon .icon {
  width: 15px;
  height: 15px;
  color: var(--accent-hover);
}

/* Licht-Dots auf Ring 3 (symmetrisch — keine Counter-Rotation nötig)
   — weiß statt Cyan (Marie 2026-06-11) */
.pb-cosmos__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0.6;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
  transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--r, 200px)));
}

/* Äußerer Dot-Kranz: kleinere, zartere Punkte auf eigenem Radius
   jenseits von Ring 3 (eigenes --r schlägt das geerbte der
   Spin-Group) — bleibt mit 0.455 < 0.5 in der Kosmos-Box */
.pb-cosmos__dot--outer {
  --r: calc(var(--cosmos-size) * 0.455);
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  opacity: 0.4;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* ---------- Loop-Animationen erst ab Stage-Reveal ---------- */
.probleme__stage.is-revealed .pb-cosmos__glow,
.probleme__stage.is-revealed .pb-cosmos__hub,
.probleme__stage.is-revealed .pb-cosmos__spin,
.probleme__stage.is-revealed .pb-chip__inner {
  animation-play-state: running;
}

/* ---------- Kachel-01-Boden: Social-Proof-Zeile ----------
   margin-top:auto wie der CTA in Kachel 02 — beide Kachelböden
   tragen damit ein ruhiges Abschluss-Element (Marie 2026-06-11).
   Avatar-Stack aus echten Testimonial-Fotos (Section-02-Pool). */
.probleme__proof {
  margin-top: auto;
  padding-top: clamp(24px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: 14px;
}

.probleme__proof-avatars {
  display: flex;
  flex-shrink: 0;
}

.probleme__proof-avatars img {
  width: clamp(34px, 3vw, 40px);
  height: clamp(34px, 3vw, 40px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface-2);
  margin-left: -10px;
}

.probleme__proof-avatars img:first-child {
  margin-left: 0;
}

.probleme__proof-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-200);
}

.probleme__proof-text strong {
  color: var(--text-100);
  font-weight: var(--weight-semibold);
}

/* ---------- Section-CTA: IN Kachel 02 ----------
   margin-top:auto drückt den Button an den Kachel-Boden — die
   Kacheln sind durch die Grid-Streckung höher als ihr Text
   (Marie 2026-06-11). */
.probleme__cta {
  margin-top: auto;
  padding-top: clamp(24px, 3vw, 36px);
}

/* ---------- Mobile/Tablet (<900px) ----------
   Kacheln volle Breite; Kosmos bleibt als gedimmte Ebene dahinter.
   backdrop-filter entfällt (GPU-Last + kaum sichtbarer Gewinn bei
   vollflächigen Kacheln) — stattdessen deckender Surface-Grund. */
@media (max-width: 899px) {
  .probleme__stage {
    --cosmos-size: 640px;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 8vw, 64px);
    min-height: 0;
  }
  .probleme__tile {
    width: 100%;
    padding: clamp(24px, 6vw, 40px);
    background: rgba(12, 20, 28, 0.82);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .pb-cosmos {
    --cosmos-size: 680px;
    opacity: 0;
  }
  .probleme__stage.is-revealed .pb-cosmos {
    opacity: 0.55;
  }
  .pb-chip__inner {
    gap: 6px;
    padding: 7px 12px;
    font-size: 11px;
  }
  .pb-cosmos__hub {
    width: 108px;
    gap: 6px;
  }
  .pb-cosmos__hub-label {
    font-size: 10.5px;
  }
  .pb-cosmos__hub-icon {
    width: 22px;
    height: 22px;
  }
}

/* ---------- Reduced Motion: alles ruhig + sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
  .probleme__tile,
  .pb-cosmos {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Kosmos bleibt zentriert (transform:none würde ihn verschieben) */
  .pb-cosmos {
    transform: translate(-50%, -50%);
  }
  /* !important: macht die Absicht explizit und hält die Loops auch
     dann aus, wenn .is-revealed-Selektoren später angepasst werden
     (Pattern wie Section 10 / .ki-venn) */
  .pb-cosmos__glow,
  .pb-cosmos__hub,
  .pb-cosmos__spin,
  .pb-chip__inner {
    animation: none !important;
  }
  /* Counter-Keyframes entfallen → statischer Upright-Stand */
  .pb-chip__inner {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg)));
  }
}

/* Reduced Motion + Mobile: Kosmos-Dimmung gilt auch ohne
   Reveal-Klasse. Flache Kombi-Query statt Nesting — verschachtelte
   @media parsen iOS-Safari ≤16.3 / Firefox ≤116 nicht (Guardian). */
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .pb-cosmos { opacity: 0.55; }
}

/* ---------- Section 20 — Gründungsbegleitung „Bento" (Selbstständig machen) ----------
   Zentrierter Section-Header (CI-Standard-H2) + 3×3-Bento:
   6 Glas-Cards (Icon-Badge + H3 + Text) und 3 Foto-Kacheln diagonal
   verteilt. Kein backdrop-filter (uniformer Section-BG, §5a) —
   Hover-Lift dadurch flicker-frei. Reveal via .is-revealed (IO
   one-shot in partials/scripts.html), Tiles staffeln über --i. */
.gweg {
  padding-block: var(--section-py);
}

/* §5a-Pattern (wie .capacity__title): Auto-Hyphenation trennte
   „Rohrrei-nigung" in der H2 — manual lässt nur Wortgrenzen
   umbrechen, overflow-wrap bleibt als 320px-Hard-Wrap-Safety */
.gweg__title {
  hyphens: manual;
}

/* Lead im zentrierten Header: bewusst Body-Größe (CI-Fließtext-Regel) */
.gweg__lead {
  margin: 0;
  max-width: 64ch;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
}

.gweg__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

/* Tablet: zweispaltig, Fotos reihen sich ein. Foto 3 ist das einzige
   Element der letzten Reihe → volle Breite statt leerer Nachbar-Zelle */
@media (min-width: 640px) and (max-width: 1023px) {
  .gweg__photo--3 {
    grid-column: 1 / -1;
  }
}

@media (min-width: 640px) {
  .gweg__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: 3×3-Bento mit diagonal verteilten Foto-Kacheln */
@media (min-width: 1024px) {
  .gweg__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "k1 k2 f1"
      "f2 k3 k4"
      "k5 k6 f3";
  }
  .gweg__card--1 { grid-area: k1; }
  .gweg__card--2 { grid-area: k2; }
  .gweg__card--3 { grid-area: k3; }
  .gweg__card--4 { grid-area: k4; }
  .gweg__card--5 { grid-area: k5; }
  .gweg__card--6 { grid-area: k6; }
  .gweg__photo--1 { grid-area: f1; }
  .gweg__photo--2 { grid-area: f2; }
  .gweg__photo--3 { grid-area: f3; }
}

.gweg__card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(var(--shadow-rgb), 0.25);
}

/* 3D-Maus-Tilt (Pattern §0a Variante B, Marie 2026-06-12 — wie die
   Startseiten-Bento-Kacheln): --mx/--my kommen vom generischen
   [data-tilt]-JS, --lift trägt den Hover-Z-Lift in dieselbe
   Transform-Kette. Der Tilt-Transform lebt wegen der Reveal-
   Kollision (§0a) in der .is-revealed-Regel weiter unten. */
.gweg__card,
.gweg__photo {
  --mx: 0;
  --my: 0;
  --tilt-max: 6deg;
  --lift: 0px;
  transform-style: flat;
}

@media (hover: hover) and (pointer: fine) {
  .gweg__card:hover {
    --lift: -4px;
    border-color: var(--glass-border-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 26px 52px rgba(var(--shadow-rgb), 0.32);
  }
}

/* Icon-Badge: Accent-getöntes Glas-Quadrat (Pendant zum Original-Icon) */
.gweg__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 16px;
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.28);
}

.gweg__icon .icon {
  width: 24px;
  height: 24px;
  color: var(--accent-hover);
}

/* §5a-Pattern „H3 als Card-Headline" (wie .capacity__sub) */
.gweg__card-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: var(--weight-regular);
  color: var(--text-100);
}

.gweg__card-text {
  margin: 0;
  max-width: 48ch;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
}

/* ---------- Foto-Kacheln ---------- */
.gweg__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  /* Höhe kommt im Bento aus der Grid-Streckung; unterhalb 1024px
     sorgt aspect-ratio für ein ruhiges Quer-Format */
}

.gweg__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dezenter Surface-Veil unten — bindet die Fotos an die dunkle Seite */
.gweg__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(12, 20, 28, 0.42) 100%);
  pointer-events: none;
}

@media (max-width: 1023px) {
  .gweg__photo {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Reveal (gestaffelt über --i) ---------- */
[data-gweg-tile] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease calc(var(--i, 0) * 80ms),
    transform 0.7s var(--ease-morph) calc(var(--i, 0) * 80ms);
}

/* Nach dem Reveal übernimmt die Tilt-Transform-Kette (Ruhezustand =
   Identität: alle Vars 0) — Reveal-Kollisions-Pattern §0a */
.gweg.is-revealed [data-gweg-tile] {
  opacity: 1;
  transform: perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
}

/* Reveal-Kollisions-Pattern (§0a): nach dem Reveal übernimmt die
   delay-freie Hover-/Tilt-Transition — sonst würde der --i-Reveal-
   Delay jeden Hover-Lift mitverzögern */
.gweg.is-revealed .gweg__card,
.gweg.is-revealed .gweg__photo {
  transition:
    transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Aktive Maus-Tilt-Phase: kurzer Cursor-Follow. opacity bleibt im
   Shorthand aufgeführt (§0a-Caveat: sonst würde eine noch laufende
   Reveal-Opacity-Transition hart abgeschnitten) */
.gweg.is-revealed [data-gweg-tile].is-tilting {
  transition:
    transform 140ms ease-out,
    opacity 0.7s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  /* Auch den .is-revealed-Tilt-Transform überschreiben (§0a-Caveat:
     sonst bliebe der perspective()-Transform aktiv) */
  [data-gweg-tile],
  .gweg.is-revealed [data-gweg-tile] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Leistungen-Hub — Karten-Raster der Übersichtsseite
   (NUR Seite /leistungen/, Partial section-leistungen-hub).
   Asymmetrisches Bento: Auftragsgewinnung = Featured-Karte
   (Cyan-Top-Akzent, doppelt breit). Ganze Karte = Link.
   Reveal + Maus-Tilt wie .gweg (§0a). Kein backdrop-filter
   (uniformer dunkler BG, §5a) → Hover-Lift flicker-frei.
   ============================================================ */
.svc-hub {
  position: relative;
  padding-block: var(--section-py);
  isolation: isolate;
  overflow: hidden; /* hält die Aurora-Beams im Section-Rahmen (kein H-Scroll) */
}

/* Inhalt über der Aurora */
.svc-hub > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Aurora-Hintergrund (driftend, §0a Reuse-Pattern) ----------
   Gleiche Mechanik wie Hero/Footer: 3 conic-Beams, mix-blend + Blur,
   langsam driftend über die globalen @keyframes hero-aurora-drift-*.
   Deckkraft theme-aware (--aurora-opacity: im Light-Theme „Aquarell").  */
.svc-hub__aurora {
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px) saturate(130%);
  opacity: calc(0.45 * var(--aurora-opacity));
  contain: layout paint;
}

@media (min-width: 1024px) {
  .svc-hub__aurora { filter: blur(80px) saturate(132%); }
}

.svc-hub__beam {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: var(--aurora-blend);
}

.svc-hub__beam--1 {
  top: -20%;
  left: -8%;
  width: 56%;
  height: 78%;
  background: conic-gradient(
    from 210deg at 50% 50%,
    transparent 0deg,
    rgba(44, 110, 169, 0.50) 50deg,
    rgba(var(--glow-rgb), 0.48) 100deg,
    rgba(107, 196, 240, 0.22) 150deg,
    transparent 210deg
  );
  animation: hero-aurora-drift-a 16s linear infinite;
}

.svc-hub__beam--2 {
  top: 2%;
  right: -12%;
  width: 54%;
  height: 74%;
  background: conic-gradient(
    from 40deg at 50% 50%,
    transparent 0deg,
    rgba(179, 204, 223, 0.20) 70deg,
    rgba(44, 110, 169, 0.40) 130deg,
    rgba(var(--glow-rgb), 0.20) 190deg,
    transparent 250deg
  );
  animation: hero-aurora-drift-b 22s linear infinite reverse;
}

.svc-hub__beam--3 {
  bottom: -28%;
  left: 32%;
  width: 52%;
  height: 66%;
  background: conic-gradient(
    from 290deg at 50% 50%,
    transparent 0deg,
    rgba(var(--glow-rgb), 0.30) 80deg,
    rgba(107, 196, 240, 0.18) 140deg,
    transparent 210deg
  );
  animation: hero-aurora-drift-c 28s linear infinite;
}

@media (max-width: 480px) {
  .svc-hub__beam--3 { display: none; }
  .svc-hub__aurora { filter: blur(50px) saturate(128%); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hub__beam { animation: none; }
}

.svc-hub__title {
  hyphens: manual;
}

.svc-hub__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
}

.svc-hub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

/* Tablet: zweispaltig, Featured spannt beide Spalten,
   fünfte Karte (Marktführerschaft) + sechste (Website, „Demnächst")
   füllen je eine ganze Reihe */
@media (min-width: 640px) and (max-width: 1023px) {
  .svc-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-card--featured { grid-column: 1 / -1; }
  .svc-card--5 { grid-column: 1 / -1; }
  .svc-card--6 { grid-column: 1 / -1; }
}

/* Desktop: 2+1 / 1+1+1-Bento + breite Website-Querkarte in Reihe 3
   (Paket S3 nennt Website als Leistung; Detailseite folgt →
   „Demnächst"-Karte als ruhige, niedrige Vollbreiten-Zeile). */
@media (min-width: 1024px) {
  .svc-hub__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "s1 s1 s2"
      "s3 s4 s5"
      "s6 s6 s6";
  }
  .svc-card--1 { grid-area: s1; }
  .svc-card--2 { grid-area: s2; }
  .svc-card--3 { grid-area: s3; }
  .svc-card--4 { grid-area: s4; }
  .svc-card--5 { grid-area: s5; }
  /* Doppel-Klasse: die Basis-Regel .svc-card (flex-direction: column)
     steht SPÄTER im Stylesheet — ohne höhere Spezifität würde sie das
     Quer-Layout per Quellreihenfolge zurückdrehen. */
  .svc-card.svc-card--6 {
    grid-area: s6;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 2vw, 28px);
    padding-block: clamp(20px, 2vw, 28px);
  }
  .svc-card.svc-card--6 .svc-card__icon {
    margin-bottom: 0;
    flex: none;
  }
  .svc-card.svc-card--6 .svc-card__title {
    margin-bottom: var(--space-2);
  }
  .svc-card.svc-card--6 .svc-card__soon-badge {
    margin-top: 0;
    align-self: center;
    margin-left: var(--space-4);
    flex: none;
    white-space: nowrap;
  }
}

/* Branchen-Hub (NUR /branchen/): zwei gleichwertige Karten statt
   6er-Bento — ab Tablet nebeneinander, kein Area-Raster (die Karten
   tragen keine --N-Klassen). Steht NACH den Basis-Media-Queries →
   gewinnt per Quellreihenfolge. */
@media (min-width: 640px) {
  .svc-hub__grid--branchen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
  }
  /* Altbestand-Fix 2026-09-10: die Basis-Tablet-Regel (640–1023) lässt die
     Featured-Karte beide Spalten spannen — im 2er-Raster stand Karte 02
     dadurch halbbreit allein neben einer leeren Zelle. Beide Karten sind
     gleichwertig → nebeneinander ab 640 (= Start des Basis-2er-Rasters). */
  .svc-hub__grid--branchen .svc-card--featured { grid-column: auto; }
}

/* Website-Karten-Body: Titel + Text als eigene Spalte, damit die
   Karte auf Desktop quer laufen kann und mobil normal stapelt. */
.svc-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.svc-card {
  position: relative;
  isolation: isolate; /* eigener Stacking-Context für Spotlight-Layer */
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(var(--shadow-rgb), 0.25);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  /* Cursor-Spotlight-Position (vom JS gesetzt), Default = Mitte */
  --spot-x: 50%;
  --spot-y: 50%;
}

/* Karten-Inhalt über dem Spotlight-Layer (z-index 0) halten */
.svc-card > * {
  position: relative;
  z-index: 1;
}

/* Cursor-Spotlight: weicher Cyan-Schein, folgt dem Zeiger, fadet auf
   Hover ein. Liegt unter dem Inhalt, über dem Karten-BG. overflow:hidden
   der Karte beschneidet den Radius sauber. */
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--spot-x) var(--spot-y),
    rgba(var(--glow-rgb), 0.18),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .svc-card:not(.svc-card--soon):hover::after {
    opacity: 1;
  }
}

/* Editoriale Nummer (01–05): große, dezente Display-Italic-Ziffer
   oben rechts — kuratierter Magazin-Look. opacity hält sie in beiden
   Themes faint (Farbe flippt über --text-200). */
.svc-card__index {
  position: absolute;
  top: clamp(16px, 2vw, 26px);
  right: clamp(20px, 2.4vw, 32px);
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1;
  color: var(--text-200);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

/* Featured (Auftragsgewinnung): mehr Luft + Cyan-Ambient-Glow,
   damit das „Herzstück" sich klar abhebt. */
.svc-card--featured {
  padding: clamp(30px, 3.4vw, 48px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(var(--glow-rgb), 0.10),
    0 22px 50px rgba(var(--shadow-rgb), 0.28),
    0 28px 80px -28px rgba(var(--glow-rgb), 0.30);
}

/* Featured Top-Linie: faint Basis-Linie + darüber ein wandernder
   Licht-Sweep (IO-gepaused bis .is-revealed). z-index über Spotlight
   + Inhalt, damit die Linie immer oben am Rand liegt. */
.svc-card--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--accent-hover), transparent),
    linear-gradient(90deg, transparent, rgba(var(--glow-rgb), 0.40), transparent);
  background-size: 55% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -55% 0, 0 0;
  animation: svc-sheen 4.8s linear infinite;
  animation-play-state: paused;
}

.svc-hub.is-revealed .svc-card--featured::before {
  animation-play-state: running;
}

@keyframes svc-sheen {
  from { background-position: -55% 0, 0 0; }
  to   { background-position: 155% 0, 0 0; }
}

/* „Teils-teils": ausgewählte Kacheln (01 Featured + 04) sind dunkle
   Inseln — in BEIDEN Themes dunkel, Inhalt hell. Tokens lokal auf Dark
   gesetzt (Text/Heading/Glas/Glow), damit Titel/Text/Icon/Nummer/„Mehr"
   ohne Extra-Regeln korrekt hell + cyan rendern. Im Light-Theme braucht
   nur der Hintergrund einen Override (das White-Override der Karten ist
   spezifischer) — siehe Light-Block. */
.svc-card--dark {
  --text-100: rgba(255, 255, 255, 0.90);
  --text-200: rgba(255, 255, 255, 0.66);
  --text-300: rgba(255, 255, 255, 0.42);
  --heading-color: #FFFFFF;
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-hover: rgba(255, 255, 255, 0.20);
  --glow-rgb: 77, 168, 218;
  --accent-hover: #4DA8DA;
  background: linear-gradient(160deg, #16242F 0%, #0A121A 100%);
  border-color: var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(0, 0, 0, 0.40);
}

/* Featured + dunkel: Cyan-Ambient-Glow auf der dunklen Insel */
.svc-card--featured.svc-card--dark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(var(--glow-rgb), 0.14),
    0 22px 50px rgba(0, 0, 0, 0.42),
    0 28px 80px -28px rgba(var(--glow-rgb), 0.34);
}

/* Maus-Tilt-Kette (§0a Variante B) — --mx/--my vom generischen
   [data-tilt]-JS, --lift trägt den Hover-Z-Lift mit. Der Tilt-
   Transform lebt wegen der Reveal-Kollision in .is-revealed unten. */
.svc-card {
  --mx: 0;
  --my: 0;
  --tilt-max: 6deg;
  --lift: 0px;
  transform-style: flat;
}

@media (hover: hover) and (pointer: fine) {
  .svc-card:not(.svc-card--soon):hover {
    --lift: -4px;
    /* nur während des Hovers auf eine eigene Compositing-Layer pinnen
       (Tilt-Transform + Spotlight-Fade), danach wieder frei (Speicher) */
    will-change: transform;
    border-color: var(--glass-border-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 26px 52px rgba(var(--shadow-rgb), 0.32);
  }
  .svc-card:not(.svc-card--soon):hover .svc-card__icon {
    background: rgba(var(--glow-rgb), 0.18);
    border-color: rgba(var(--glow-rgb), 0.42);
  }
  .svc-card:not(.svc-card--soon):hover .svc-card__more .icon {
    transform: translate(2px, -2px);
  }
}

/* Tastatur-Fokus sichtbar (Karte ist ein Link) */
.svc-card:focus-visible {
  outline: none;
  border-color: var(--glass-border-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px var(--focus-ring),
    0 26px 52px rgba(var(--shadow-rgb), 0.32);
}

/* Icon-Badge — Accent-getöntes Glas-Quadrat (wie .gweg__icon) */
.svc-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 16px;
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.28);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.svc-card__icon .icon {
  width: 24px;
  height: 24px;
  color: var(--accent-hover);
}

.svc-card--featured .svc-card__icon {
  width: 60px;
  height: 60px;
}

.svc-card--featured .svc-card__icon .icon {
  width: 28px;
  height: 28px;
}

/* §5a-Pattern „H3 als Card-Headline" (wie .gweg__card-title) */
.svc-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: var(--weight-regular);
  color: var(--text-100);
}

.svc-card--featured .svc-card__title {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.svc-card__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
}

/* „Mehr →"-Affordance: schiebt sich ans Karten-Ende (mt:auto),
   der Pfeil reagiert auf den Karten-Hover (Regel oben) */
.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: var(--weight-medium);
  color: var(--accent-hover);
}

.svc-card__more .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.32s var(--ease-morph);
}

/* Karten unterschiedlicher Textlänge: „Mehr"-Zeile bündig unten */
.svc-card__text { flex: 1 1 auto; }

/* ============================================================
   Branchen-Hub — Foto-Karten (.svc-card--photo, 2026-09-10)
   Marie: „bei unseren Branchen die jeweiligen Bilder, die du auch in
   den Headern verwendet hattest, hier einmal als Hintergrund setzen,
   sodass man natürlich aber Text und so noch gut lesen kann."
   Beide Karten tragen das Hero-Foto ihrer Zielseite — die Karte ist
   der Hero der Zielseite im Kleinformat und folgt dessen Komposition:
   Motiv rechts, Text links, das Foto läuft per MASKE nach links in den
   Kartengrund aus (Rezept .kanal-hero__photo / .pest-hero__photo —
   kein Overlay, das den Grund unter dem Text mit einfärbt). Der Grund
   ist die Karten-Dunkel-Insel .svc-card--dark (beide Themes: Charcoal
   im hellen, Navy im dunklen Theme) und zugleich der Fallback, bevor
   das Bild geladen ist. ZWEI Kompositionen, weil ein 16:9-Motiv neben
   einem 40ch-Text erst ab ~600px Kartenbreite Platz hat:
   ≥1440px  Foto über die volle Karte, Maske nach LINKS, Text auf 38ch
            gedeckelt (sonst überdeckt er das Motiv; 52ch = 74 % der
            Karte). Überhang nach rechts je Motiv (--photo-right), damit
            das Motiv im sichtbaren rechten Drittel steht. Erst ab 1440
            (Karte ≥ 676px): bei 1280 (596px) bliebe neben 38ch Text
            nur ein 180px-Streifen, dort trägt das Band mehr Motiv.
   <1440px  Foto-BAND oben (--photo-h, object-fit: cover, Anker je
            Motiv), Maske nach UNTEN, der Inhalt beginnt unter dem Band,
            die Nummer wandert neben das Icon (auf den Kartengrund).
   Die Maske liegt auf dem WRAPPER, nicht auf dem <img>: der Hover-Zoom
   skaliert nur das Bild, die Auslaufkante bleibt stehen.
   Kontraste GEMESSEN (Runden-Chronik 2026-09-10).
   ============================================================ */
.svc-card--photo {
  --photo-h: clamp(176px, 18vw + 80px, 300px); /* Band-Höhe der schmalen Fassung (390: 176 · 768: 218 · 1024: 264 · ≥1222: 300) */
  --text-200: rgba(255, 255, 255, 0.74); /* Kleintext auf Foto eine Stufe kräftiger (Glaskachel-Regel) */
  --photo-pos: 50% 50%;                  /* object-position im Band (<1440; in der breiten Fassung ohne Wirkung — dort width:auto, kein cover-Spielraum) */
  --photo-right: 0%;                     /* Überhang nach rechts (breite Fassung) */
  --photo-filter: none;                  /* Grading wie im jeweiligen Hero */
  --photo-origin: 50% 50%;               /* transform-origin des Hover-Zooms = Motiv (beide Fassungen) */
  padding-top: calc(var(--photo-h) + clamp(18px, 2.4vw, 28px));
}
/* Kanal: 16:9, Roboter rechts-mittig (x 45–85 %, Linse bei x 59 %),
   Grading wie .kanal-hero__photo img (Runde 10: dunkler, kühler).
   Überhang −28 % (Marie 2026-09-10, Runde 2: „man sieht kaum was von der
   Kamera … mehr mittig im Bild"): mit −18 % stand die Linse bei 1440 px auf
   Karten-x 63 % = exakt am Nullpunkt der Maske; jetzt bei ≈73 % (1864: 71 %)
   mitten in der sichtbaren Zone, das rechte Rad läuft über die Kartenkante
   aus. Zoom-Zentrum = Linse. */
.svc-card--kanal {
  --photo-pos: 78% 50%;
  --photo-right: -28%;
  --photo-filter: brightness(0.62) saturate(0.5);
  --photo-origin: 60% 56%;
}
/* Schädlinge: 1,6:1, Figur rechts, Kapuze an der Oberkante (Asset so
   komponiert, 2026-09-07) → Anker oben, kein Filter (wie .pest-hero). */
.svc-card--pest {
  --photo-pos: 52% 0%;
  --photo-right: -8%;
  --photo-origin: 70% 30%;
}

/* schlägt `.svc-card > *` (position: relative; z-index: 1) — der Wrapper
   liegt UNTER dem Inhalt und, weil früher im DOM, unter dem Spotlight
   (::after, ebenfalls z 0). pointer-events: none → Tilt/Spotlight
   messen weiter die Karte. */
.svc-card > .svc-card__photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--photo-h);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.14) 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.14) 90%, transparent 100%);
}
.svc-card__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none; /* globaler Reset (img { max-width: 100% }) würde die breite Fassung kappen */
  object-fit: cover;
  object-position: var(--photo-pos);
  filter: var(--photo-filter);
  transform-origin: var(--photo-origin);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Nummer neben das Icon, unter das Band (statt auf dem Foto) */
.svc-card--photo .svc-card__index {
  top: calc(var(--photo-h) + clamp(18px, 2.4vw, 28px) - 6px);
}

@media (hover: hover) and (pointer: fine) {
  .svc-card--photo:hover .svc-card__photo img { transform: scale(1.035); }
}

/* Breite Fassung: Foto = Karten-Hintergrund, Motiv rechts, Text links.
   Maske (Positionen ab der RECHTEN Kante): voll bis 22 %, 0,55 bei 32 %,
   0,16 bei 38 %, Null ab 42 % → das Foto ist an der rechten Textkante
   (38ch + Padding ≈ 61 % der Karte) bereits ausgeblendet; die ragged
   Zeilenenden liegen auf dem Kartengrund (Kontrast gemessen). Der
   Nullpunkt (Karten-x 58 %) ist die Kontrast-Grenze und bleibt; Runde 2
   macht den Übergang dahinter steiler, damit das Motiv-Zentrum (Linse
   bzw. Kapuze bei ≈ 70–78 %) fast voll sichtbar steht. */
@media (min-width: 1440px) {
  .svc-card--photo {
    padding-top: clamp(26px, 3vw, 40px);
    min-height: clamp(460px, 36vw, 580px);
  }
  .svc-card--featured.svc-card--photo {
    padding-top: clamp(30px, 3.4vw, 48px);
  }
  .svc-card > .svc-card__photo {
    height: auto;
    bottom: 0;
    -webkit-mask-image: linear-gradient(to left, #000 22%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0.16) 38%, transparent 42%);
            mask-image: linear-gradient(to left, #000 22%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0.16) 38%, transparent 42%);
  }
  /* Foto im ECHTEN Seitenverhältnis über die volle Kartenhöhe (wie
     .kanal-hero__photo img: height 100 %, width auto) — kein cover-Zoom
     auf die Kartenfläche, sonst bliebe vom 16:9-Motiv nur ein Ausschnitt.
     Der Überhang (--photo-right) schiebt das Motiv ins sichtbare Drittel. */
  .svc-card__photo img {
    left: auto;
    right: var(--photo-right);
    width: auto;
  }
  .svc-card--photo .svc-card__index {
    top: clamp(16px, 2vw, 26px);
    color: var(--white);
    opacity: 0.30; /* auf dem Foto statt auf dem Grund — eine Stufe kräftiger */
  }
  .svc-card--photo .svc-card__text {
    max-width: 38ch;
  }
}

/* Marktführerschaft (noch nicht gebaut) — ruhige, inerte Karte */
.svc-card--soon {
  cursor: default;
}

.svc-card--soon .svc-card__icon .icon {
  color: var(--text-300);
}

.svc-card--soon .svc-card__icon {
  background: rgba(var(--shadow-rgb), 0.16);
  border-color: var(--glass-border);
}

.svc-card__soon-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-5);
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-200);
  background: rgba(var(--shadow-rgb), 0.18);
  border: 1px solid var(--glass-border);
}

/* ---------- Reveal (gestaffelt über --i, §0a) ---------- */
[data-hub-tile] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease calc(var(--i, 0) * 80ms),
    transform 0.7s var(--ease-morph) calc(var(--i, 0) * 80ms);
}

.svc-hub.is-revealed [data-hub-tile] {
  opacity: 1;
  transform: perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
}

/* Reveal-Kollisions-Pattern (§0a): nach dem Reveal delay-freie
   Hover-/Tilt-Transition statt des --i-Reveal-Delays */
.svc-hub.is-revealed .svc-card {
  transition:
    transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.svc-hub.is-revealed [data-hub-tile].is-tilting {
  transition:
    transform 140ms ease-out,
    opacity 0.7s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-hub-tile],
  .svc-hub.is-revealed [data-hub-tile] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Sweep auf der Featured-Karte anhalten — statische Cyan-Linie */
  .svc-card--featured::before,
  .svc-hub.is-revealed .svc-card--featured::before {
    animation: none;
    background:
      linear-gradient(90deg, transparent, var(--accent-hover), transparent);
    background-size: 100% 100%;
    background-position: 0 0;
  }
  /* Spotlight nicht einblenden (kein bewegter Effekt) */
  .svc-card::after { transition: none; }
  .svc-card__photo img { transition: none; }
}

/* ============================================================
   Section 21 — Gründer-Stories (Selbstständig machen,
   Live-Sections 05+06)
   Zentrierter Section-Header, darunter zwei alternierende
   Story-Blöcke: Story-Headline (Montserrat-Bold + Display-
   Italic-em, Pattern wie .capacity__sub) + Wistia-Video mit
   lokalem HD-Poster + Meta-Zeile, daneben die Vorher/Nachher-
   Karten „Ausgangssituation" (gedimmt, Material-Asymmetrie wie
   .vs-card--others §5a — hier token-basiert über --shadow-rgb,
   damit beide Themes funktionieren) und „Ergebnis" (Glas +
   Cyan-Top-Akzent), verbunden durch einen Wandel-Pfeil auf der
   Naht. Reveal via .is-revealed (IO one-shot pro Story), Mouse-
   Tilt Variante B auf beiden Karten. Kein backdrop-filter
   (uniformer Section-BG, §5a).
   ============================================================ */
.gstory {
  padding-block: var(--section-py);
}

/* Lead im zentrierten Header: Body-Größe (CI-Fließtext-Regel) */
.gstory__lead {
  margin: 0;
  max-width: 56ch;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
}

/* ---------- Story-Block (alternierendes Split-Layout) ---------- */
.gstory__story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

.gstory__story + .gstory__story {
  margin-top: clamp(56px, 7vw, 112px);
}

@media (min-width: 1024px) {
  .gstory__story {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(40px, 4.4vw, 72px);
  }
  /* Story 02 gespiegelt: Video rechts, Karten links */
  .gstory__story--flip {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
  .gstory__story--flip .gstory__media-col {
    order: 2;
  }
}

/* ---------- Story-Headline (§5a-Pattern wie .capacity__sub:
   Montserrat-Bold mit Display-Italic-Gradient-em) ---------- */
.gstory__title {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: clamp(1.375rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text-100);
  /* Komposita wie „Selbstständigkeit" nicht mid-word trennen (§5a) */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

/* Lokale em-Regel, weil die globale `h1 em, h2 em` H3 nicht abdeckt
   (§5a-Pattern wie .control-feature__title em). §1.6-Padding gegen
   Glyph-Clipping. */
.gstory__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 1.16em;
  letter-spacing: 0;
  background: linear-gradient(135deg, var(--em-grad-a) 0%, var(--em-grad-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  padding-block-end: 0.12em;
  margin-inline: -0.04em;
  margin-block-end: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Video (Wistia-Lazy-Mount wie Section 06) ---------- */
.gstory__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
  isolation: isolate;
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 64px -28px rgba(var(--shadow-rgb), 0.55);
}

.gstory__media[data-mounted="true"] .gstory__play {
  display: none;
}

.gstory__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nach dem Mount füllt der Wistia-Wrapper die Box */
.gstory__media .wistia_responsive_padding {
  position: relative;
  z-index: 1;
}

/* Play-Button: neutral-weißer Video-Look (Marie 2026-05-28,
   wie .case-card__play — Werte bewusst gespiegelt, Section hat
   eigene Klasse statt Carousel-Klassen-Reuse) */
.gstory__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(56px, 7vw, 80px);
  height: clamp(56px, 7vw, 80px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(25, 41, 57, 0.92);
  color: var(--white);
  cursor: pointer;
  z-index: 1;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms ease,
    box-shadow 280ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 32px -6px rgba(var(--shadow-rgb), 0.55);
}

.gstory__play:hover,
.gstory__play:focus-visible {
  transform: scale(1.06);
  background: rgba(31, 52, 71, 0.98);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 14px 40px -6px rgba(var(--shadow-rgb), 0.6);
}

.gstory__play-icon {
  width: 36%;
  height: 36%;
}

/* ---------- Meta-Zeile: Firma + Standort | Sterne + Verifiziert ---------- */
.gstory__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: clamp(14px, 1.6vw, 20px);
}

.gstory__company {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--text-100);
}

.gstory__location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-300);
}

.gstory__proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Sterne weiß + gefüllt (Marie 2026-05-28: kein Cyan auf Video-Kacheln) */
.gstory__rating {
  display: inline-flex;
  gap: 3px;
  color: var(--white);
}

.gstory__rating .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

/* Verifiziert-Pille (Pendant zum Live-Badge „Bese Media verifiziert") */
.gstory__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(var(--glow-rgb), 0.1);
  border: 1px solid rgba(var(--glow-rgb), 0.26);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-100);
}

.gstory__verified .icon {
  color: var(--accent-hover);
}

/* ---------- Vorher/Nachher-Karten ---------- */
.gstory__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 16px);
  align-self: center;
}

.gstory__card {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--radius-lg);
  /* Tilt-Vars (Pattern §0a Variante B) — Transform lebt wegen der
     Reveal-Kollision in der .is-revealed-Regel weiter unten */
  --mx: 0;
  --my: 0;
  --tilt-max: 6deg;
  --lift: 0px;
  transform-style: flat;
}

/* „Ausgangssituation": gedimmtes Material (Asymmetrie-Idee aus
   .vs-card--others §5a), token-basiert: --shadow-rgb tönt im Dark-
   Theme schwarz ab, im Light-Theme navy-grau — funktioniert ohne
   eigene Light-Overrides */
.gstory__card--before {
  background: rgba(var(--shadow-rgb), 0.16);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* „Ergebnis": Glas + Cyan-Top-Akzentlinie (Belohnungsmoment) */
.gstory__card--after {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(var(--shadow-rgb), 0.25),
    0 0 44px -18px rgba(var(--glow-rgb), 0.35);
}

.gstory__card--after::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--glow-rgb), 0.7) 50%,
    transparent 100%
  );
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .gstory__card:hover {
    --lift: -4px;
  }
}

.gstory__card-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  color: var(--text-100);
}

.gstory__card--before .gstory__card-title {
  color: var(--text-200);
}

.gstory__list {
  display: grid;
  gap: clamp(12px, 1.4vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gstory__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-200);
}

.gstory__item .icon {
  flex-shrink: 0;
  margin-top: 3px;
}

/* X-Icons der Ausgangssituation: bewusst stumpf-neutral */
.gstory__card--before .gstory__item .icon {
  color: var(--text-300);
}

/* ---------- Wandel-Pfeil auf der Naht ---------- */
.gstory__turn {
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-block: -8px;
  border-radius: 50%;
  /* Deckend über beiden Karten-Kanten: Glass-Tint auf Surface
     (Hub-Pattern Section 19) */
  background: linear-gradient(var(--glass-bg), var(--glass-bg)) var(--surface-1);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 22px -8px rgba(var(--shadow-rgb), 0.5);
  color: var(--accent-hover);
}

/* ---------- CTA-Reihe ---------- */
.gstory__cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 80px);
}

@media (max-width: 359px) {
  .gstory__cta {
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Reveal (IO one-shot pro Story, gestaffelt) ---------- */
.gstory__title,
.gstory__media,
.gstory__meta {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease,
    transform 0.7s var(--ease-morph);
}

.gstory__media { transition-delay: 120ms; }
.gstory__meta  { transition-delay: 260ms; }

[data-gstory-story].is-revealed .gstory__title,
[data-gstory-story].is-revealed .gstory__media,
[data-gstory-story].is-revealed .gstory__meta {
  opacity: 1;
  transform: translateY(0);
}

.gstory__card {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease 200ms,
    transform 0.7s var(--ease-morph) 200ms;
}

.gstory__card--after {
  transition-delay: 360ms;
}

/* Nach dem Reveal übernimmt die Tilt-Transform-Kette
   (Reveal-Kollisions-Pattern §0a) */
[data-gstory-story].is-revealed .gstory__card {
  opacity: 1;
  transform: perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition:
    transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease,
    box-shadow 0.35s ease;
}

[data-gstory-story].is-revealed .gstory__card.is-tilting {
  transition:
    transform 140ms ease-out,
    opacity 0.7s ease,
    box-shadow 0.35s ease;
}

.gstory__turn {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.5s ease 520ms,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 520ms;
}

[data-gstory-story].is-revealed .gstory__turn {
  opacity: 1;
  transform: scale(1);
}

.gstory__item {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s ease calc(400ms + var(--i, 0) * 90ms),
    transform 0.55s var(--ease-morph) calc(400ms + var(--i, 0) * 90ms);
}

[data-gstory-story].is-revealed .gstory__item {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gstory__title,
  .gstory__media,
  .gstory__meta,
  .gstory__card,
  .gstory__turn,
  .gstory__item,
  [data-gstory-story].is-revealed .gstory__card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Sections 22–24 — Video-Showroom (Unterseite Videoproduktion)
   Kino-Bühne (großes aktives Video + Meta-Zeile) LINKS + scrollbare
   Playlist RECHTS (YouTube-Schema, Marie 2026-06-15). Playlist-Klick
   tauscht die Bühne (JS in partials/scripts.html). Section 24 =
   Duo-Variante ohne Playlist (nur 2 Animationsvideos, gestapelte
   Meta). Play/Meta-Werte bewusst gespiegelt von Section 21 (.gstory)
   — eigene Klassen statt Cross-Section-Reuse (Edit-Falle §0a).
   ============================================================ */
.showroom {
  padding-block: var(--section-py);
}

/* hyphens: manual (§5a) — Browser-Trennung produzierte
   „Ar-beitgeber" in der Recruiting-H2; Umbruch an Wortgrenzen,
   overflow-wrap: break-word bleibt als globale 320px-Safety. */
.showroom__header .section-header__title {
  hyphens: manual;
}

/* (.hero__kicker lebt im Hero-Block bei .hero--centered) */

/* ---------- Layout: Kino-Bühne links, Playlist rechts ----------
   (Marie 2026-06-15, Iteration 3 — ersetzt den Coverflow-Streifen
   unter der Bühne). Mobil einspaltig: Bühne oben, Playlist darunter. */
.showroom__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 360px);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.showroom__main {
  min-width: 0;
}

/* ---------- Bühne ---------- */
.showroom__stage-zone {
  position: relative;
}

/* Projektor-Lichtkegel hinter der Bühne — reiner Radial-Gradient
   (kein blur()-Filter, GPU-schonend) */
.showroom__glow {
  position: absolute;
  inset: -14% -18%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    52% 64% at 50% 28%,
    rgba(var(--glow-rgb), 0.16) 0%,
    rgba(var(--glow-rgb), 0.05) 45%,
    transparent 72%
  );
}

.showroom__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
  isolation: isolate;
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 32px 80px -32px rgba(var(--shadow-rgb), 0.6);
}

.showroom__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 240ms ease;
}

/* Stummer 6s-Loop = „bewegtes Thumbnail" (Marie 2026-06-12):
   liegt über dem Poster und fadet ein, sobald er wirklich spielt
   (data-looping setzt das JS im 'playing'-Event) */
.showroom__loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}

.showroom__stage[data-looping="true"] .showroom__loop {
  opacity: 1;
}

.showroom__stage[data-mounted="true"] .showroom__loop {
  display: none;
}

/* Bühnen-Wechsel: Poster blendet kurz aus, neues Bild fadet ein */
.showroom__stage.is-switching .showroom__poster {
  opacity: 0;
}

.showroom__stage[data-mounted="true"] .showroom__play,
.showroom__stage[data-mounted="true"] .showroom__counter {
  display: none;
}

/* Nach dem Mount füllt der Wistia-Wrapper die Box */
.showroom__stage .wistia_responsive_padding {
  position: relative;
  z-index: 1;
}

/* Play-Button: neutral-weißer Video-Look (Marie 2026-05-28,
   Werte wie .gstory__play). Roh-rgba = CI-Töne Deep Navy #192939 /
   Navy #1F3447 mit Alpha — es gibt bewusst kein --surface-rgb-Token,
   gleiches Muster wie .gstory__play (§5a). */
.showroom__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(56px, 7vw, 80px);
  height: clamp(56px, 7vw, 80px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(25, 41, 57, 0.92);
  color: var(--white);
  cursor: pointer;
  z-index: 1;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms ease,
    box-shadow 280ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 32px -6px rgba(var(--shadow-rgb), 0.55);
}

.showroom__play:hover,
.showroom__play:focus-visible {
  transform: scale(1.06);
  background: rgba(31, 52, 71, 0.98);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 14px 40px -6px rgba(var(--shadow-rgb), 0.6);
}

.showroom__play-icon {
  width: 36%;
  height: 36%;
}

/* Produktions-Zähler („01 / 18") oben rechts in der Bühne.
   Roh-Werte statt Tokens: die Pille liegt ÜBER dem Foto und muss
   in BEIDEN Themes dunkel-auf-Bild bleiben (Token-Werte kippten
   im Light-Theme auf Tinte-auf-Navy → unleserlich). */
.showroom__counter {
  position: absolute;
  top: clamp(10px, 1.4vw, 16px);
  right: clamp(10px, 1.4vw, 16px);
  z-index: 1;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(12, 20, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- Meta-Zeile: Firma + Standort | Sterne + Verifiziert ---------- */
.showroom__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: clamp(14px, 1.6vw, 20px);
}

/* Firma als „Filmtitel-Card" im Display-Font — analog zur
   H3-Display-Ausnahme in §5a (Card-Headline-Ton) */
.showroom__company {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.15;
  color: var(--text-100);
}

.showroom__location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-300);
}

.showroom__proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Sterne weiß + gefüllt (Marie 2026-05-28: kein Cyan auf Video-Kacheln) */
.showroom__rating {
  display: inline-flex;
  gap: 3px;
  color: var(--white);
}

.showroom__rating .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.showroom__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(var(--glow-rgb), 0.1);
  border: 1px solid rgba(var(--glow-rgb), 0.26);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-100);
}

.showroom__verified .icon {
  color: var(--accent-hover);
}

/* ---------- Playlist (rechte Spalte, YouTube-Schema) ----------
   Scrollbare Liste; Höhe = Bühnenhöhe (per JS, Fallback unten).
   Klick holt das Video auf die Bühne (scripts.html). */
.showroom__playlist-wrap {
  min-width: 0;
}

.showroom__playlist {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fallback, wenn JS die Bühnenhöhe noch nicht gesetzt hat */
  max-height: 460px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.showroom__playlist::-webkit-scrollbar {
  width: 8px;
}

.showroom__playlist::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
}

.showroom__pl-row {
  display: flex;
}

.showroom__pl-item {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.showroom__pl-item:hover,
.showroom__pl-item:focus-visible {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--glass-border);
}

/* Aktiver Eintrag = „läuft auf der Bühne" */
.showroom__pl-item[aria-current="true"] {
  background: rgba(var(--glow-rgb), 0.1);
  border-color: rgba(var(--glow-rgb), 0.5);
}

.showroom__pl-thumb {
  position: relative;
  flex: none;
  width: clamp(104px, 9vw, 124px);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}

.showroom__pl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.82) saturate(0.95);
  transition: filter 180ms ease;
}

.showroom__pl-item:hover .showroom__pl-thumb img,
.showroom__pl-item:focus-visible .showroom__pl-thumb img,
.showroom__pl-item[aria-current="true"] .showroom__pl-thumb img {
  filter: none;
}

.showroom__pl-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(12, 20, 28, 0.6);
  color: #fff;
  opacity: 0;
  transition: opacity 180ms ease;
}

.showroom__pl-play svg {
  width: 12px;
  height: 12px;
  margin-left: 1px;
}

.showroom__pl-item:hover .showroom__pl-play,
.showroom__pl-item:focus-visible .showroom__pl-play,
.showroom__pl-item[aria-current="true"] .showroom__pl-play {
  opacity: 1;
}

.showroom__pl-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.showroom__pl-company {
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--text-100);
  /* max. 2 Zeilen, dann Ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.showroom__pl-item[aria-current="true"] .showroom__pl-company {
  color: var(--accent-hover);
}

.showroom__pl-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-300);
}

.showroom__pl-location .icon {
  flex: none;
}

/* Einspaltig: Bühne oben, Playlist darunter (Höhe per CSS gedeckelt,
   JS löscht dann die inline-maxHeight der Desktop-Spalte) */
@media (max-width: 900px) {
  .showroom__layout {
    grid-template-columns: 1fr;
  }

  .showroom__playlist {
    max-height: 360px;
  }
}

/* ---------- CTA-Banner (über volle Layout-Breite, unter Bühne+Playlist) ----------
   (Live-Kachel „Hier könnte sich dein Betrieb präsentieren"
   als Querformat-Banner mit Signature-CTA, §1.8) */
.showroom__cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin: clamp(20px, 2.8vw, 32px) 0 0;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.8vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(var(--glow-rgb), 0.45);
  background: rgba(var(--glow-rgb), 0.06);
}

.showroom__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.3);
  color: var(--accent-hover);
}

.showroom__cta-icon .icon {
  width: 20px;
  height: 20px;
}

.showroom__cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}

.showroom__cta-eyebrow {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-300);
}

.showroom__cta-title {
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--text-100);
}

.showroom__cta-btn {
  flex: none;
}

@media (max-width: 560px) {
  .showroom__cta-banner {
    flex-direction: column;
    text-align: center;
  }

  .showroom__cta-text {
    align-items: center;
    flex-basis: auto;
  }
}

/* ---------- Duo-Variante (Section 24, 2 Animationsvideos) ---------- */
.showroom__duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(20px, 3vw, 40px);
  /* kein 1080px-Deckel mehr (2026-09-09): Container-Breite wie die Bühnen */
  margin-inline: auto;
}

/* Meta einheitlich gestapelt (Marie 2026-06-15): Firma + Standort,
   darunter eine Zeile Sterne + Verifiziert — beide Karten identisch,
   unabhängig von der Namenslänge (vorher wrappte der Proof bei langen
   Namen mal neben, mal unter den Namen). */
.showroom__duo-meta {
  margin-top: clamp(14px, 1.6vw, 20px);
}

.showroom__duo-meta .showroom__company {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.showroom__duo-meta .showroom__proof {
  margin-top: var(--space-3);
}

/* ---------- Reveal (IO one-shot pro Section) ---------- */
.showroom__layout,
.showroom__cta-banner,
.showroom__duo-card {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.showroom__cta-banner,
.showroom__duo-card:nth-child(2) {
  transition-delay: 140ms;
}

.showroom.is-revealed .showroom__layout,
.showroom.is-revealed .showroom__cta-banner,
.showroom.is-revealed .showroom__duo-card {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Section 25 — Drehtermin-CTA (Unterseite Videoproduktion)
   Zentriertes Abschluss-Band: Eyebrow + H2 + Signature-CTA +
   Trustpilot, dezenter Licht-Glow von unten.
   ============================================================ */
.drehtermin {
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;
}

.drehtermin__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    60% 85% at 50% 112%,
    rgba(var(--glow-rgb), 0.14) 0%,
    transparent 70%
  );
}

.drehtermin__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  max-width: 760px;
  margin-inline: auto;
}

/* hyphens: manual (§5a) — Browser-Trennung produzierte
   „Dreh-termin"; Umbruch soll an den Wortgrenzen passieren */
.drehtermin__title {
  max-width: 26ch; /* 18→26ch (Marie 2026-09-02): „Frage jetzt einen Drehtermin an" einzeilig */
  hyphens: manual;
}

/* Live-Satz der entfallenen Eyebrow-Pille als schlichte Subline
   (2026-09-10) — Fließtext-Größe, keine Versalien, keine Fläche. */
.drehtermin__sub {
  margin: 0;
  max-width: 46ch;
  color: var(--text-200);
  font-size: var(--text-body);
  line-height: 1.6;
}

.drehtermin__trustpilot {
  width: 100%;
  max-width: 360px;
}

/* Reveal: gestaffelte Kaskade nach IO-Trigger */
.drehtermin__inner > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms ease,
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drehtermin__inner > :nth-child(2) { transition-delay: 90ms; }
.drehtermin__inner > :nth-child(3) { transition-delay: 180ms; }
.drehtermin__inner > :nth-child(4) { transition-delay: 270ms; }

.drehtermin.is-revealed .drehtermin__inner > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .showroom__layout,
  .showroom__cta-banner,
  .showroom__duo-card,
  .showroom__poster,
  .drehtermin__inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Kein bewegtes Thumbnail — das JS startet den Loop bei
     reduced-motion gar nicht erst; das hier ist die CSS-
     Absicherung gegen Restzustände. */
  .showroom__loop {
    display: none;
  }
}

/* ============================================================
   Team (Unterseite /unternehmen/team/)
   Zentrierter section-header + responsives Karten-Raster. Karten =
   Glas (CI §07-Material) mit 2:3-Portrait + Name/Rolle. Reveal: IO
   one-shot auf [data-team] → .is-revealed, Karten staffeln über ihr
   --i-Transition-Delay (§0a Reveal-Pattern). Foto-lose Mitglieder
   (Alina, Adnan) als Monogramm-Karte.
   ============================================================ */
.team {
  padding-block: var(--section-py);
}

.team__lead {
  max-width: 52ch;
  margin-inline: auto;
}

.team__grid {
  /* Flex statt Grid → unvollständige Reihen sitzen MITTIG (Marie
     2026-06-15). Auf Desktop erzwingen drei Umbruch-Elemente die
     symmetrische 4/5/4/5-Verteilung (18 Karten seit dem Live-
     Roster-Sync 2026-08-28); darunter wrappt es natürlich
     (2 Phone / 3 Tablet), zentriert. Karten haben feste Breite →
     einheitlich große Porträts. */
  --team-gap: clamp(14px, 2vw, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--team-gap);
  row-gap: var(--team-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Erzwungener Reihen-Umbruch (4/5/4/5) — nur Desktop. Ein flex-basis:
   100%-Element schiebt die Folgekarten in die nächste Reihe; die
   0-Höhen-Umbruchzeilen verdoppeln den vertikalen Abstand,
   deshalb im Desktop-Block row-gap halbieren (2× = voller Abstand). */
.team__break {
  display: none;
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

.team-card {
  /* Feste, fluide Kartenbreite: ~2 pro Reihe auf Phones, 3 auf
     Tablet. Kein Shrink/Grow → einheitliche Größe, zentrierte
     Cluster. Auf Desktop überschrieben (5 müssen in die Mittelreihe). */
  flex: 0 0 clamp(150px, 22vw, 210px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -28px rgba(var(--shadow-rgb), 0.9);
  /* Reveal-Startzustand (vor .is-revealed) */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Reveal: Section sichtbar → Karten staffeln über --i */
.team.is-revealed .team-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* Hover (nach Reveal): leichtes Anheben + Akzent + Foto-Zoom.
   Gleiche transform-Property wie der Reveal → nach Abschluss
   ist die Karte auf translateY(0), Hover komponiert sauber. */
@media (hover: hover) {
  .team.is-revealed .team-card:hover {
    transform: translateY(-6px);
    border-color: var(--glass-border-hover);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 28px 56px -26px rgba(var(--shadow-rgb), 1),
      0 0 0 1px rgba(var(--glow-rgb), 0.18);
  }
}

.team-card__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--surface-2);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .team-card:hover .team-card__photo img {
    transform: scale(1.05);
  }
}

/* Sanfter Scrim am unteren Foto-Rand → ruhiger Übergang zur Info */
.team-card__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--shadow-rgb), 0.55) 100%);
  pointer-events: none;
}

.team-card__info {
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
}

.team-card__name {
  font-family: var(--font-ui);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--heading-color);
  margin: 0 0 6px;
}

.team-card__role {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--accent-hover);
  margin: 0;
}

/* Geschäftsführer-Karte: dezente Cyan-Top-Linie als Hierarchie-Akzent */
.team-card--lead {
  border-color: rgba(var(--glow-rgb), 0.30);
}

.team-card--lead .team-card__photo {
  border-top: 2px solid var(--accent-hover);
}

/* Desktop: erzwungene 4/5/4-Verteilung. Umbruch-Elemente sichtbar,
   row-gap halbiert (2 Umbruchzeilen → voller Abstand), Kartenbreite
   so, dass die fünf Karten der Mittelreihe sicher nebeneinander
   passen (ab Nav-Breakpoint 1180px). */
@media (min-width: 1180px) {
  .team__grid {
    row-gap: calc(var(--team-gap) / 2);
  }
  .team__break {
    display: block;
  }
  .team-card {
    flex-basis: clamp(180px, 15.5vw, 230px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-card {
    opacity: 1;
    transform: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .team.is-revealed .team-card {
    transition-delay: 0s;
  }
  .team-card__photo img,
  .team.is-revealed .team-card:hover {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   Offene Stellen — Karriere-Band (/unternehmen/team/)
   Vollbreiten-Gradient-Band als Seiten-Abschluss (km-cta-Pattern,
   §5a), zentriert. CTA = Navigations-Link auf /karriere/.
   ============================================================ */
.team-cta {
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(var(--glow-rgb), 0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border-top: 1px solid var(--glass-border);
}

.team-cta__glow {
  position: absolute;
  left: 50%;
  top: -30%;
  width: min(720px, 90%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.16) 0%, transparent 65%);
  pointer-events: none;
}

.team-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 1.8vw, 20px);
  max-width: 720px;
  margin-inline: auto;
}

.team-cta__title { /* 18→26ch (Marie 2026-09-02): „Werde ein Teil unseres Teams" einzeilig */
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.05;
  color: var(--heading-color);
  margin: 0;
  max-width: 26ch;
}

.team-cta__body {
  font-size: var(--text-lead);
  color: var(--text-100);
  max-width: 52ch;
  margin: 0;
}

.team-cta__btn {
  margin-top: clamp(8px, 1vw, 14px);
  gap: 10px;
}

.team-cta__btn .icon {
  width: 18px;
  height: 18px;
}

/* ============================================================
   Startseite v6 · S3 — „Kennst du das?"
   Zentrierter Header oben, darunter Foto + O-Töne auf EINER Höhe
   (zwei gleich hohe Spalten via Grid-Stretch), Abschluss zentriert
   mit Payoff + Signature-CTA. O-Töne in Montserrat (Marie 2026-06-17).
   Theme-fähig über Tokens. Reveal: .is-revealed pro [data-voice];
   [data-payoff] blendet den Abschluss ein (IO in scripts.html).
   ============================================================ */
.painvoices {
  position: relative;
  padding-block: var(--section-py);
  isolation: isolate;
}

/* — Aurora „Vormittagslicht" (gedämpfter als Hero/Footer); inset:0 +
   contain:paint clippt die Beams auf die Section. — */
.painvoices__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px) saturate(130%);
  opacity: calc(0.28 * var(--aurora-opacity));
  contain: layout paint;
}
.painvoices__beam {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: var(--aurora-blend);
}
.painvoices__beam--1 {
  top: -20%; left: -6%; width: 55%; height: 70%;
  background: conic-gradient(from 210deg at 50% 50%,
    transparent 0deg, rgba(44, 110, 169, 0.45) 60deg,
    rgba(var(--glow-rgb), 0.40) 120deg, transparent 200deg);
  animation: hero-aurora-drift-a 16s linear infinite;
}
.painvoices__beam--2 {
  bottom: -25%; right: -8%; width: 52%; height: 66%;
  background: conic-gradient(from 30deg at 50% 50%,
    transparent 0deg, rgba(179, 204, 223, 0.18) 70deg,
    rgba(44, 110, 169, 0.36) 140deg, transparent 220deg);
  animation: hero-aurora-drift-b 22s linear infinite reverse;
}

/* — Zentrierter Header — */
.painvoices__head { margin-bottom: clamp(32px, 4.5vw, 60px); }
.painvoices__intro {
  color: var(--text-200);
  font-size: var(--text-lead);
  max-width: 52ch;
  margin-inline: auto;
}

/* — Grid: Foto + Stimmen auf EINER Höhe (Stretch) — */
.painvoices__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 1024px) {
  .painvoices__grid {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
    align-items: stretch;
    gap: clamp(40px, 4vw, 72px);
  }
}

/* ---------- LINKS: Einzel-Foto ----------
   Ein einzelnes Foto (Inhaber, stilles Telefon) füllt die gestreckte
   Spaltenhöhe (Marie 2026-06-22: zurück auf nur ein Bild). */
.painvoices__stage {
  position: relative;
  display: flex;
  isolation: isolate;
}
.painvoices__photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

/* Basis-Foto: füllt die Spaltenhöhe (auf Mobile via min-height) */
.painvoices__photo--main {
  position: relative;
  z-index: 1;
  flex: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -24px rgba(var(--shadow-rgb), 0.7);
}
.painvoices__photo--main img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(340px, 42vw, 500px);
  object-fit: cover;
}
/* dezente Bottom-Vignette für Tiefe */
.painvoices__photo--main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--shadow-rgb), 0) 55%, rgba(var(--shadow-rgb), 0.40));
  pointer-events: none;
}

/* ---------- RECHTS: Stimmen-Stream (Montserrat) ---------- */
.painvoices__stream { display: flex; align-items: center; }
.painvoices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}

.painvoices__voice {
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.painvoices__voice.is-revealed { opacity: 1; transform: none; }

.painvoices__quote {
  margin: 0;
  position: relative;
  padding-left: clamp(20px, 1.8vw, 30px);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.5;
  color: var(--text-100);
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Kein dekoratives Anführungszeichen (Marie 2026-06-17) — die O-Töne
   stehen ohne Quotes; die Einrückung + Tonspur-Linie tragen den Block. */
/* Hervorhebung in Montserrat (kein verschnörkeltes Italic), Cyan-Akzent */
.painvoices__quote em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-hover);
}

/* „Tonspur"-Linie, wächst beim Reveal von links */
.painvoices__line {
  display: block;
  margin-top: clamp(12px, 1.4vw, 18px);
  margin-left: clamp(20px, 1.8vw, 30px);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.5), rgba(179, 204, 223, 0.08));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.painvoices__voice.is-revealed .painvoices__line { transform: scaleX(1); }

/* ---------- Abschluss: Payoff + CTA, zentriert ---------- */
.painvoices__payoff {
  position: relative;
  margin: clamp(40px, 5vw, 72px) auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.6vw, 30px);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* zarte zentrierte Cyan-Linie als Trenner zum Abschluss */
.painvoices__payoff::before {
  content: '';
  width: clamp(40px, 6vw, 72px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-hover), transparent);
}
.painvoices__payoff.is-revealed { opacity: 1; transform: none; }
.painvoices__payoff-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--text-100);
}
.painvoices__payoff-text em {
  font-style: italic;
  background: linear-gradient(100deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: 0.08em; margin-inline: -0.04em;
  padding-block-end: 0.12em; margin-block-end: -0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.painvoices__cta { align-self: center; }

/* ---------- reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .painvoices__beam { animation: none; }
  .painvoices__voice,
  .painvoices__payoff { opacity: 1; transform: none; transition: none; }
  .painvoices__line { transform: scaleX(1); transition: none; }
}

/* ============================================================
   S4 — Das Bese-System (.bsys) — Fassung 4 (2026-09-07)
   Marie (zur Foto-Bühne der Fassung 3): „da änderst du nur 01 bis 04
   … ich finde es gut, wenn das wie Kacheln rechts und links auf der
   Seite aufklappt — wie bei Saleshax Leistungsmodule". Gemessen an
   saleshax.de (Section „Die Systeme, die dein Unternehmen …"): Modul-
   Karten 1116 px breit, Text links / Foto rechts, jede Karte
   `position: sticky` unter dem Kopf, die nächste schiebt sich darüber,
   die vorherige schrumpft (Endstapel 0,82–1,0, Stufen 0,03) und bleibt
   als Kante sichtbar. Hier: VIER Modul-Karten (Foto abwechselnd
   rechts/links — Maries „rechts auf der Seite, links auf der Seite"),
   jedes Foto trägt EINE Datenkarte (01 App-Live-Feed mit Engine · 02
   Bese-AI-Prüfung · 03 Werbe-Budget · 04 Kosten-Kurve). Der Stapel-
   Fortschritt kommt aus scripts.html ([data-bsys-stack] setzt --stk
   0…1 je Karte = wie weit die nächste sie überdeckt); reduced-motion
   und < 1024 px: kein Stapel, Karten stehen untereinander.
   Datenkarten = feste dunkle Geräte-Flächen (§5a), Rest über Tokens
   (weiß/grau/dunkel-tauglich, die Section läuft auf 6 Seiten).
   ============================================================ */
.bsys {
  position: relative;
  padding-block: var(--section-py);
  overflow: clip;
  isolation: isolate;
  --bsys-nav: 73px;                                   /* Sticky-Navbar (72 + 1 px Border) */
  --bsys-stack-top: calc(var(--bsys-nav) + clamp(16px, 2.4vw, 32px));
  --bsys-stack-step: 14px;                            /* je Karte tiefer → die Kanten der vorherigen bleiben sichtbar */
}
.bsys::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 58% 52% at 50% 24%, rgba(var(--glow-rgb), 0.07), transparent 66%);
}
.bsys__container { position: relative; z-index: 1; }

/* Kopf: H2 einzeilig (kein Bindestrich-Umbruch in „Bese-System"), ein Lead */
.bsys__head .section-header__title { max-width: none; hyphens: manual; -webkit-hyphens: manual; }
.bsys__lead { max-width: 64ch; margin: 0; font-size: var(--text-body); line-height: 1.6; color: var(--text-200); }
.bsys__lead strong { color: var(--text-100); font-weight: var(--weight-semibold); }

/* ---------- Modul-Stapel ---------- */
.bsys-stack {
  list-style: none;
  margin: clamp(36px, 4.4vw, 64px) auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
}
.bsys-mod {
  --stk: 0;                                           /* 0 = frei, 1 = von der nächsten Karte voll überdeckt (JS) */
  --i: 0;
  position: sticky;
  top: calc(var(--bsys-stack-top) + var(--i) * var(--bsys-stack-step));
  /* Alle Karten gleich hoch (JS misst die höchste und setzt --bsys-mod-h):
     mit ungleichen Höhen schob das Container-Ende die vorletzte Karte
     hoch, bevor die letzte sie ganz überdeckte — ein Textstreifen blieb
     unter der Navbar stehen (Guardian 2026-09-08). */
  min-height: var(--bsys-mod-h, auto);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: stretch;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -28px rgba(var(--shadow-rgb), 0.55);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--stk) * 0.06));
  will-change: transform;
}
/* Abdunklung der überdeckten Karte als OVERLAY statt filter:brightness()
   — ein Filter auf dem Vorfahren würde den backdrop-filter der Daten-
   karte bei jedem Scroll-Frame neu sampeln (§5a-Flicker-Falle, Guardian
   2026-09-07). Farbe = Surface-0 als Roh-Tripel (theme-fest). */
.bsys-mod::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: rgba(6, 10, 14, calc(var(--stk) * 0.28));
  pointer-events: none;
}
.bsys-mod:nth-child(2) { --i: 1; }
.bsys-mod:nth-child(3) { --i: 2; }
.bsys-mod:nth-child(4) { --i: 3; }
.bsys-mod--flip .bsys-mod__text { order: 2; }
.bsys-mod--flip .bsys-mod__visual { order: 1; }

/* Textspalte: Tag · Titel · Schritt-Text · verteilter Paket-Absatz · unten
   die Datenkarte (Marie: „Animationen unter die Schrift, platzfüllend") */
.bsys-mod__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(6px, 1vw, 14px) clamp(4px, 1.2vw, 18px);
}
.bsys-mod__tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--weight-semibold);
  color: var(--text-300);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.bsys-mod__tag b {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem); line-height: 1;
  color: var(--accent-hover);
}
.bsys-mod__text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  margin: 0 0 14px;
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.bsys-mod__text p { margin: 0; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; color: var(--text-200); max-width: 46ch; }
.bsys-mod__step { color: var(--text-100); }
.bsys-mod__text p + p { margin-top: 12px; }
.bsys-mod__text p strong { color: var(--text-100); font-weight: var(--weight-semibold); }
.bsys-mod__text .bsys-card { margin-top: auto; }
.bsys-mod__text > p:last-of-type { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* Foto: volle Kartenhöhe, Höhe kommt aus der Textspalte */
.bsys-mod__visual {
  position: relative;
  min-width: 0;
  min-height: 360px;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.bsys-mod__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* Datenkarte — feste dunkle Geräte-Fläche (§5a), eine je Modul, in der
   Textspalte unter dem Text (nicht mehr auf dem Foto) */
.bsys-card {
  --bsys-app-cyan:  #4DA8DA;
  --bsys-app-txt-1: rgba(226, 238, 248, 0.94);
  --bsys-app-txt-2: rgba(214, 230, 245, 0.72);
  --bsys-app-txt-3: rgba(214, 230, 245, 0.62);   /* 0.48 maß 4,0:1 für 11-px-Versalien (Guardian 2026-09-08) → 0.62 */
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 208px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(158deg, #1C2D3B 0%, #131F2B 56%, #0C141C 100%);
  border: 1px solid rgba(214, 230, 245, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 44px -22px rgba(0, 0, 0, 0.55);
}
/* Werbung-Karte braucht unter 480 px mehr Höhe: die Kanal-Labels
   („Notdienst-Anzeigen", „Kanal-TV & Sanierung", „Rückruf-Anfragen")
   brechen dort auf zwei bis drei Zeilen und liefen aus der festen
   208-px-Karte heraus — die dritte Zeile war abgeschnitten (gemessen
   2026-09-10: 239 px nötig bei 320 px, 218 px bei 360–414 px). Nur
   diese eine Karte, damit die übrigen drei ihre Höhe behalten; fest
   statt `auto`, damit der Feed in Karte 01 beim Zeilenwechsel nicht
   springt. */
@media (max-width: 479px) {
  .bsys-card--ads { height: 244px; }
}

.bsys-app__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 12px; color: var(--bsys-app-txt-3);
}
.bsys-app__live { display: inline-flex; align-items: center; gap: 7px; color: var(--bsys-app-cyan); font-weight: var(--weight-semibold); white-space: nowrap; }
.bsys-app__live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bsys-app-cyan); box-shadow: 0 0 8px var(--bsys-app-cyan);
  animation: bsys-livedot 2s ease-in-out infinite; animation-play-state: paused;
}
.bsys-app__title { color: var(--bsys-app-txt-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsys-app__brand { margin-left: auto; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bsys-app-txt-3); white-space: nowrap; }
@keyframes bsys-livedot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* 01 · Feed (Push-up-Engine, MAX 3 Zeilen) */
.bsys-feed { position: relative; padding: 8px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; overflow: hidden; }
.bsys-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.bsys-row.is-entering { opacity: 0; transform: translateY(16px); }
.bsys-row.is-leaving { position: absolute; left: 8px; right: 8px; top: 8px; opacity: 0; filter: blur(9px); transform: scale(0.985); pointer-events: none; }
.bsys-row.is-fresh { border-color: rgba(70,211,154,0.4); box-shadow: 0 0 0 1px rgba(70,211,154,0.18), 0 0 22px rgba(70,211,154,0.10); }
/* Status-Farben (KI-Bewertung): Grün #46d39a = echter Auftrag, Grau
   #5a6b7d = Rückruf — Geräte-Kodierung, §5a, gekapselt in .bsys-*. */
.bsys-dot { width: 10px; height: 10px; border-radius: 50%; }
.bsys-dot--ok { background: #46d39a; box-shadow: 0 0 9px rgba(70,211,154,0.7); }
.bsys-dot--no { background: #5a6b7d; }
.bsys-row__t { font-size: 13.5px; color: var(--bsys-app-txt-1); font-weight: var(--weight-medium); min-width: 0; }
.bsys-row__r { display: flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.bsys-tag { font-size: 11px; font-weight: var(--weight-semibold); padding: 3px 9px; border-radius: 9999px; }
.bsys-tag--ok { color: #46d39a; background: rgba(70,211,154,0.12); border: 1px solid rgba(70,211,154,0.38); }
.bsys-tag--no { color: var(--bsys-app-txt-3); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); }
.bsys-eur { font-family: var(--font-display); font-size: 17px; color: var(--bsys-app-cyan); }
.bsys-eur--muted { color: var(--bsys-app-txt-3); }

/* 02 · Prüf-Liste */
.bsys-check { list-style: none; margin: 0; padding: 10px 14px 12px; display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1 1 auto; }
.bsys-check li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--bsys-app-txt-1); }
.bsys-check li svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--bsys-app-cyan); }
.bsys-check__result { justify-content: flex-end; gap: 14px !important; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.07); }

/* 03 · Budget-Balken (wachsen, wenn das Modul im Bild ist) */
.bsys-bars { list-style: none; margin: 0; padding: 12px 14px 14px; display: flex; flex-direction: column; justify-content: center; gap: 12px; flex: 1 1 auto; }
.bsys-bars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 12px; font-size: 13px; color: var(--bsys-app-txt-2); }
.bsys-bars li i { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; }
.bsys-bars li i::before { content: ''; position: absolute; inset: 0; width: var(--w, 50%); border-radius: 3px; background: linear-gradient(90deg, rgba(77,168,218,0.55), #4DA8DA); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.15s; }
.bsys-mod.is-in .bsys-bars li i::before { transform: scaleX(1); }
.bsys-bars li b { font-family: var(--font-display); font-size: 17px; color: var(--bsys-app-cyan); font-weight: 400; white-space: nowrap; }
.bsys-bars li.is-cut i::before { background: #5a6b7d; }
.bsys-bars li.is-cut b { color: var(--bsys-app-txt-3); }

/* 04 · Kosten-Kurve (zeichnet sich, wenn das Modul im Bild ist) */
.bsys-curve { position: relative; padding: 14px 14px 12px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.bsys-curve svg { display: block; width: 100%; height: 88px; overflow: visible; }
.bsys-curve__area { fill: rgba(77,168,218,0.14); opacity: 0; transition: opacity 0.6s var(--ease) 0.5s; }
.bsys-curve__line { fill: none; stroke: #4DA8DA; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.3s var(--ease) 0.15s; filter: drop-shadow(0 0 6px rgba(77,168,218,0.6)); }
.bsys-mod.is-in .bsys-curve__line { stroke-dashoffset: 0; }
.bsys-mod.is-in .bsys-curve__area { opacity: 1; }
.bsys-curve__val { position: absolute; right: 20px; top: 10px; text-align: right; }
.bsys-curve__val b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--white); }
.bsys-curve__val span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bsys-app-txt-3); }

.bsys__hi { color: var(--text-100); font-weight: var(--weight-semibold); }
.bsys__cta { margin: clamp(28px, 3.4vw, 44px) auto 0; text-align: center; }

/* Reveal: Live-Dot erst ab Sichtbarkeit (IO-paused-Pattern) */
.bsys.is-revealed .bsys-app__live::before { animation-play-state: running; }

/* Light-Theme: die Modul-Karte ist eine weiße Karte auf hellen Bändern
   (Glas-Token wäre auf Weiß unsichtbar) — auf Dunkel-Inseln greift der
   lokale Token-Satz und die Regel ist über var() automatisch neutral. */
html[data-theme="light"] .bsys-mod {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%);
  border-color: rgba(16, 24, 32, 0.08);
  box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), 0.28), 0 2px 6px rgba(var(--shadow-rgb), 0.05);
}

/* ---------- Responsiv ---------- */
@media (max-width: 1023px) {
  .bsys-mod { position: relative; top: auto; grid-template-columns: 1fr; gap: 18px; transform: none; padding: 16px; }
  .bsys-mod::before { display: none; }
  .bsys-mod--flip .bsys-mod__text { order: 2; }
  .bsys-mod--flip .bsys-mod__visual { order: 1; }
  .bsys-mod__visual { order: 1; min-height: 0; aspect-ratio: 16 / 10; }
  .bsys-mod__text { order: 2; padding: 4px 6px 8px; }
  .bsys-mod__text .bsys-card { max-width: none; }
  .bsys-stack { gap: clamp(18px, 3vw, 28px); }
}
@media (max-width: 720px) {
  .bsys-mod__visual { aspect-ratio: 4 / 3; }
  .bsys-app__title { display: none; }
  .bsys-row { gap: 8px; padding-inline: 10px; }
  .bsys-row__r { gap: 8px; }
  .bsys-row__t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bsys-eur { font-size: 15px; }
  .bsys-feed .bsys-tag { display: none; }   /* auf schmalen Karten trägt der Status-Punkt die Bewertung, das Pill-Label überlappte den Text */
}
@media (prefers-reduced-motion: reduce) {
  .bsys-mod { transform: none !important; }
  .bsys-mod::before { display: none; }
  .bsys-app__live::before { animation: none !important; }
  .bsys-row { transition: none !important; }
  .bsys-curve__line { stroke-dashoffset: 0; transition: none; }
  .bsys-curve__area { opacity: 1; transition: none; }
  .bsys-bars li i::before { transform: scaleX(1); transition: none; }
}

/* ============================================================
   Section S6 — Bese-AI (section-bese-ai.html) — Fassung 2 (2026-09-07)
   Marie: „noch nicht hochwertig und schön … gerne mit Bildern". Vier
   Bausteine, neu gewichtet nach dem Referenzen-Audit (max. zwei Bühnen
   je Reihe, Bild trägt, EIN Akzent): 1) BÜHNE — die Bese-AI-Konsole
   groß (Engine [data-ba-console] unverändert), die allgemeine KI klein
   daneben · 2) Fähigkeiten als Ablauf mit Serif-Nummern neben dem
   echten Produkt (Plattform-Mockup) · 3) Moat als FOTO-Bühne (Team
   vor Betriebsdaten) mit den drei Belegen · 4) Potenzial-Check =
   Auftragsrechner-iframe (unverändert). Die Section ist auf allen
   Seiten Dunkel-Insel → Farben über die Insel-Tokens.
   ============================================================ */
.beseai {
  position: relative;
  padding-block: var(--section-py);
  overflow: clip;
  isolation: isolate;
}
.beseai__frame {
  position: relative;
  z-index: 1;                  /* Inhalt über dem Signal-Feld */
  /* = Container-Breite + -Padding (2026-09-09, alle Seiten — vorher 1240px
     + eigenes Padding, nur die Startseite hatte den Deckel per Override
     weg). Die Section hat keinen .container: der Frame IST der Container. */
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.beseai p { margin: 0; }

/* ---------- Signal-Feld (Hintergrund hinter Kopf + Bühne) ----------
   Runde 4 (2026-09-08). Mittelpunkt = Konsole, gemessen von scripts.html
   (--ba-cx/--ba-cy in px auf der Section; Defaults für den Erst-Paint).
   Drei Tiefen: Datenraster (radial ausmaskiert, fern) → Lichtfleck +
   Welle (mittel) → Lichtbahnen mit wandernden Lichtpunkten (vorn), alles
   nur mit CI-Tokens (Silver Blue als Hairline, Cyan als Licht). Das Feld
   endet weich über dem Fähigkeiten-Block (Bottom-Fade), damit Foto- und
   Rechner-Blöcke darunter ruhig bleiben. ---- */
.beseai { --ba-cx: 34%; --ba-cy: 640px; }
.ba-bg {
  position: absolute; inset: 0 0 auto; height: clamp(760px, calc(var(--ba-cy) + 620px), 1500px);
  pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.ba-bg > * { position: absolute; }
.ba-bg__grid {
  inset: 0;
  background-image: radial-gradient(circle, rgba(179, 204, 223, 0.34) 1px, transparent 1.4px);
  background-size: 26px 26px; background-position: calc(var(--ba-cx) - 13px) calc(var(--ba-cy) - 13px);
  -webkit-mask-image: radial-gradient(ellipse 820px 600px at var(--ba-cx) var(--ba-cy), #000, rgba(0, 0, 0, 0.45) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 820px 600px at var(--ba-cx) var(--ba-cy), #000, rgba(0, 0, 0, 0.45) 45%, transparent 100%);
}
.ba-bg__spot {
  left: var(--ba-cx); top: var(--ba-cy); width: 1400px; height: 1000px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(var(--glow-rgb), 0.24), rgba(var(--glow-rgb), 0.08) 30%, transparent 62%);
}
.ba-bg__ripple { left: var(--ba-cx); top: var(--ba-cy); width: 0; height: 0; }
.ba-bg__ripple i {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  border: 1.5px solid rgba(var(--glow-rgb), 0.7); opacity: 0; transform: scale(0.35);
}
.beseai.is-ba-done .ba-bg__ripple i { animation: ba-ripple 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.beseai.is-ba-done .ba-bg__ripple i:nth-child(2) { animation-delay: 0.35s; }
@keyframes ba-ripple { 0% { opacity: 0.7; transform: scale(0.35); } 100% { opacity: 0; transform: scale(1.9); } }
.ba-bg__beams { inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Hairlines: bewusst sehr leise — sie geben nur die Bahn vor (Marie: „subtiler") */
.ba-bg__line { fill: none; stroke: var(--silver-blue); stroke-opacity: 0.09; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Leuchtstrahl: ein registrierter Fortschritt --ba-p (0 = Bahn-Anfang,
   1000 = Ziel; pathLength=1000) läuft auf der Gruppe; jede Schicht ist ein
   Dash der Länge --len, per Offset auf denselben Mittelpunkt zentriert —
   kürzere Schichten sind dicker → der Strahl läuft zu BEIDEN Enden spitz
   aus. Halo-Schichten breit + schwach, kein Filter (Performance). */
@property --ba-p { syntax: '<number>'; inherits: true; initial-value: -120; } /* ohne Registrierung (Safari < 16.4, Firefox < 128) baut die Engine keine Strahlen — CSS.registerProperty-Gate — es bleiben die stillen Hairlines */
.ba-bg__streak { animation: ba-comet 4.8s cubic-bezier(0.4, 0.05, 0.6, 0.95) infinite; animation-delay: var(--d, 0s); animation-play-state: paused; will-change: opacity; }
.ba-bg__streak path {
  fill: none; stroke: var(--cyan-hi); stroke-linecap: round;  /* Schicht 5–7 */
  stroke-width: calc(var(--w) * 1px); stroke-opacity: var(--o);
  stroke-dasharray: calc(var(--len) * 1px) 3000px;
  stroke-dashoffset: calc(var(--len) * 0.5px - var(--ba-p) * 1px);
}
.ba-bg__streak path:nth-child(-n + 4) { stroke: var(--accent-hover); } /* Halo */
.ba-bg__streak path:nth-child(n + 8) { stroke: var(--white); }         /* Zentrum */
.beseai.is-revealed .ba-bg__streak { animation-play-state: running; }
.beseai.is-revealed.is-paused .ba-bg__streak { animation-play-state: paused; } /* (0,4,0) schlägt die Unpause-Regel unabhängig von der Reihenfolge */
@keyframes ba-comet { 0% { --ba-p: -120; opacity: 0; } 6% { opacity: 1; } 80% { opacity: 1; } 88%, 100% { --ba-p: 1120; opacity: 0; } }
@media (max-width: 880px) {
  .ba-bg__grid { -webkit-mask-image: radial-gradient(ellipse 420px 420px at var(--ba-cx) var(--ba-cy), #000, rgba(0, 0, 0, 0.35) 45%, transparent 100%); mask-image: radial-gradient(ellipse 420px 420px at var(--ba-cx) var(--ba-cy), #000, rgba(0, 0, 0, 0.35) 45%, transparent 100%); }
  .ba-bg__spot { width: 900px; height: 700px; }
}

/* ---------- Header ---------- */
.ba-head { text-align: center; max-width: 1020px; margin: 0 auto clamp(30px, 3.6vw, 52px); }
.ba-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h2);   /* CI-Größe wie die Geschwister-H2 (Guardian 2026-09-07: eigener Clamp = Token-Drift) */
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ba-head p { color: var(--text-200); max-width: 62ch; margin: 14px auto 0; font-size: var(--text-body); }
.ba-head p strong { color: var(--text-100); font-weight: 600; }

/* ---------- 1 · Bühne: Bese-AI groß, allgemeine KI klein daneben ---------- */
.ba-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 36px);
  align-items: center;
  /* kein 1160px-Deckel mehr (2026-09-09): Bühne auf Frame-Breite */
  margin: 0 auto;
}
.ba-stage__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ba-stage__vs {
  align-self: flex-start;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  color: var(--text-300);
  padding-left: 4px;
}
.ba-stage__side .askcard--generic { flex: 1 1 auto; }

.askcard { border-radius: var(--radius-xl); padding: clamp(18px, 2.2vw, 30px); display: flex; flex-direction: column; min-width: 0; }
.askcard__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.askcard__avatar { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.askcard__avatar svg { width: 18px; height: 18px; }
.askcard__name { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.askcard__name small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.askcard__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--accent-hover); }
.askcard__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hover); box-shadow: 0 0 8px var(--accent-hover); animation: ba-dot 1.8s ease-in-out infinite; animation-play-state: paused; }
.askcard__live.is-done { color: var(--accent-hover); }
.askcard__live.is-done::before { animation: none; }
@keyframes ba-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

.askcard__q {
  align-self: flex-start; max-width: 90%;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 10px 14px; border-radius: 14px 14px 14px 4px; font-size: 13.5px; color: var(--text-100); margin-bottom: 14px;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
/* Anfrage tippt sich ein (Runde 3, 2026-09-08): der Geist-Span hält Breite und
   Umbruch der fertigen Zeile, der Tipp-Span liegt deckungsgleich darüber und
   wird von der Engine gefüllt — die Blase wächst dadurch NICHT beim Tippen. */
.askcard__q--typed { position: relative; }
.askcard__q-ghost { color: transparent; user-select: none; } /* bleibt im A11y-Tree (Guardian), nur unsichtbar */
.askcard__q-type { position: absolute; inset: 10px 14px; }
.askcard__q-type.is-typing::after {
  content: ""; display: inline-block; width: 1.5px; height: 0.95em; margin-left: 2px; vertical-align: -0.12em;
  background: var(--accent-hover); animation: ba-caret 0.8s steps(2, jump-none) infinite;
}
@keyframes ba-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Leerlauf zwischen zwei Durchläufen: die Anfrage ist noch nicht da */
[data-ba-console].is-idle .askcard__q { opacity: 0; transform: translateX(-10px); }
/* Ausblenden zwischen zwei Durchläufen: nur Fade, kein Slide — die Regel ist
   bewusst SPEZIFISCHER als .is-idle (beide Klassen), nicht nur später */
[data-ba-console].is-idle.is-resetting :is(.askcard__q, .cline, .answer) { transition-duration: 0.4s; transform: none; }
[data-ba-console].is-resetting .cline__mark .spin { opacity: 0; transition: none; } /* kein Spinner-Aufblitzen beim Zurücksetzen */
:is([data-ba-console], [data-ba-generic]).is-instant * { transition: none !important; } /* erstes Leeren ohne Übergang */
.askcard__live.is-idle { color: var(--text-200); }
.askcard__live.is-idle::before { background: var(--text-300); box-shadow: none; animation: none; }
/* Außerhalb des Viewports/Tabs: Spinner + Live-Dot anhalten (IO-paused-Pattern) */
[data-ba-console].is-paused.askcard .cline__mark .spin { animation-play-state: paused; }
[data-ba-console].is-paused.askcard .askcard__live::before { animation-play-state: paused; } /* eigene Regel — ::before ist in :is() ungültig; (0,4,1) > .beseai.is-revealed-Unpause (0,3,1) */

/* Allgemeine KI: flach, grau, ohne Daten — bewusst kleiner gesetzt */
.askcard--generic { background: linear-gradient(165deg, rgba(25, 33, 42, 0.5), rgba(12, 18, 24, 0.7)); border: 1px solid rgba(255, 255, 255, 0.06); }
.askcard--generic .askcard__avatar { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--text-200); }
.askcard--generic .askcard__name { color: var(--text-200); }
.askcard--generic .askcard__name small { color: var(--text-300); }
.gen-answer { color: var(--text-200); font-size: 14px; line-height: 1.6; transition: opacity 0.35s ease; }
.gen-answer p + p { margin-top: 9px; }
/* Die allgemeine KI antwortet im selben Moment wie die Anfrage landet —
   sofort, ohne Denk-Schritt (Kontrast zur Konsole); im Leerlauf leer */
[data-ba-generic].is-idle :is(.askcard__q, .gen-answer, .askcard__foot) { opacity: 0; }
[data-ba-generic] .askcard__foot { transition: opacity 0.35s ease; }
.askcard__foot { margin: auto 0 0; padding-top: 16px; font-size: 12px; display: flex; align-items: center; gap: 7px; }
.askcard--generic .askcard__foot { color: var(--text-300); }
.askcard__foot svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Bese-AI: die Bühne — Glas, ein Akzent-Saum oben, denkt sichtbar */
.askcard--bese {
  background: linear-gradient(160deg, rgba(var(--glow-rgb), 0.12), rgba(19, 31, 43, 0.55) 60%, rgba(12, 20, 28, 0.78));
  border: 1px solid rgba(var(--glow-rgb), 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 40px rgba(var(--glow-rgb), 0.05), 0 30px 60px -24px rgba(var(--shadow-rgb), 0.6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  position: relative; overflow: hidden;
}
.askcard--bese::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-hover), transparent); }
.askcard--bese .askcard__name { color: var(--white); }

/* ---- Bese-AI-Kern (Runde 4, 2026-09-08): die denkende KI hinter der Kachel.
   Schichten von unten nach oben: Lichthof (atmet beim Denken) → Welle (je
   Häkchen einmal nach außen) → Ring (kreist beim Denken, schließt sich am
   Ende) → zwei Satelliten (nur beim Denken) → dunkle Scheibe mit dem
   Facetten-Icon fx-bese-ai (CI Sektion 13: 44–48 px, nie umgefärbt).
   Zustände kommen von der Konsolen-Engine: .is-thinking / .is-done auf der
   Karte, .is-pulsing kurz auf dem Kern. Alle Farben = CI-Tokens. ---- */
.ai-core { position: relative; width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; }
.ai-core > * { position: absolute; inset: 0; border-radius: 50%; }
.ai-core__halo {
  inset: -10px; background: radial-gradient(circle, rgba(var(--glow-rgb), 0.55), rgba(var(--glow-rgb), 0) 68%);
  filter: blur(6px); opacity: 0.45; transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ai-core__pulse { border: 1.5px solid rgba(var(--glow-rgb), 0.9); opacity: 0; transform: scale(0.7); pointer-events: none; }
.ai-core__ring {
  inset: 2px;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--glow-rgb), 0.25) 74%, var(--accent-hover) 88%, var(--cyan-hi) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2.2px), #000 calc(50% - 1.2px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 2.2px), #000 calc(50% - 1.2px));
  opacity: 0.45; transition: opacity 0.5s ease, background 0.5s ease;
}
.ai-core__orbit { inset: -5px; opacity: 0; transition: opacity 0.5s ease; }
.ai-core__orbit i { position: absolute; top: -1.5px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--cyan-hi); box-shadow: 0 0 6px 1px rgba(var(--glow-rgb), 0.9); }
.ai-core__orbit--b { inset: -9px; }
.ai-core__orbit--b i { width: 2px; height: 2px; margin-left: -1px; top: -1px; background: var(--silver-blue); box-shadow: 0 0 5px 1px rgba(179, 204, 223, 0.7); }
.ai-core__disc {
  inset: 6px; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1B2A38, var(--surface-1) 70%); /* #1B2A38 = Glas-Kern-Scheiben-Familie (Präzedenz Orb/Objektiv), Guardian */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -6px 12px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(var(--shadow-rgb), 0.5);
}
.ai-core__disc svg { width: 24px; height: 24px; transform: translateY(0.5px); } /* über der 20-px-Untergrenze der CI (Sektion 13 R9); kein Kachel-Tier, Präzedenz Schaltzentrale */
/* Denken: Ring kreist, Lichthof atmet, Satelliten laufen gegenläufig */
[data-ba-console].is-thinking .ai-core__halo { opacity: 1; transform: scale(1); animation: ai-breathe 2.2s ease-in-out infinite; }
[data-ba-console].is-thinking .ai-core__ring { opacity: 1; animation: ai-ring 1.5s linear infinite; }
[data-ba-console].is-thinking .ai-core__orbit { opacity: 1; }
[data-ba-console].is-thinking .ai-core__orbit--a { animation: ai-orbit 2.6s linear infinite; }
[data-ba-console].is-thinking .ai-core__orbit--b { animation: ai-orbit 4.1s linear infinite reverse; }
/* Fertig: der Ring schließt sich zu einem stillen Vollkreis, Lichthof bleibt warm */
[data-ba-console].is-done .ai-core__ring { opacity: 1; background: conic-gradient(var(--accent-hover) 0 100%); }
[data-ba-console].is-done .ai-core__halo { opacity: 0.85; transform: scale(1); }
/* Welle je Häkchen (Engine setzt is-pulsing neu, damit sie jedes Mal läuft) */
.ai-core.is-pulsing .ai-core__pulse { animation: ai-pulse 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes ai-ring { to { transform: rotate(360deg); } }
@keyframes ai-orbit { to { transform: rotate(360deg); } }
@keyframes ai-breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ai-pulse { 0% { opacity: 0.9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.9); } }

/* Status-Label als kleine Glas-Pille */
.askcard--bese .askcard__live { padding: 4px 10px 4px 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); transition: color 0.4s ease; }
.askcard--bese .askcard__name small { color: var(--accent-hover); }
.askcard--bese .askcard__foot { color: var(--accent-hover); }
.askcard--bese .askcard__q { font-size: 15px; }

/* Konsole — Reasoning-Zeilen laufen durch */
.console { display: flex; flex-direction: column; gap: 11px; margin-bottom: 4px; }
.cline {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--text-200);
  opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease;
}
.cline.is-in { opacity: 1; transform: none; }
.cline.is-done { color: var(--text-100); }
/* Die Zeile, die gerade geprüft wird: ein weicher Licht-Sweep läuft einmal
   von links nach rechts über die Zeile (Runde 4) */
.cline { position: relative; }
.cline::after {
  content: ""; position: absolute; inset: -4px -8px; border-radius: 8px; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--glow-rgb), 0.16) 50%, transparent 80%);
  background-size: 220% 100%; background-position: 120% 0;
}
.cline.is-active::after { opacity: 1; animation: cline-sweep 1s ease-in-out forwards; }
@keyframes cline-sweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
/* Häkchen landet mit kurzem Glühen */
.cline.is-done .cline__mark .tick svg { animation: tick-glow 0.7s ease-out; }
@keyframes tick-glow { 0% { filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), 1)); } 100% { filter: drop-shadow(0 0 0 rgba(var(--glow-rgb), 0)); } }
.cline b { color: var(--white); font-weight: 600; }
.cline__mark { position: relative; width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.cline__mark .spin {
  position: absolute; inset: 0; border-radius: 50%; border: 1.6px solid rgba(var(--glow-rgb), 0.28);
  border-top-color: var(--accent-hover); animation: ba-spin 0.7s linear infinite; opacity: 1; transition: opacity 0.25s; will-change: transform;
}
.cline__mark .tick { position: absolute; inset: 0; opacity: 0; transform: scale(0.5); transition: opacity 0.25s, transform 0.35s cubic-bezier(0.22, 1.4, 0.4, 1); }
.cline__mark .tick svg { width: 18px; height: 18px; color: var(--accent-hover); }
.cline.is-done .cline__mark .spin { opacity: 0; will-change: auto; }
.cline.is-done .cline__mark .tick { opacity: 1; transform: scale(1); }
@keyframes ba-spin { to { transform: rotate(360deg); } }

/* Antwort-Block (löst sich nach dem Denken auf) */
.answer { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(var(--glow-rgb), 0.22); opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.answer.is-in { opacity: 1; transform: none; }
.answer__lead { font-size: 15px; color: var(--text-100); line-height: 1.55; }
.answer__lead b { color: var(--cyan-hi); font-weight: 600; }
.answer__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.beseai .chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--white);
  background: rgba(var(--glow-rgb), 0.10); border: 1px solid rgba(var(--glow-rgb), 0.3); padding: 7px 12px; border-radius: var(--radius-full);
}
/* Chips kommen nach dem Antwort-Text einzeln nach (Stagger per nth-child) */
.answer .chip { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.answer.is-in .chip { opacity: 1; transform: none; }
.answer.is-in .chip:nth-child(1) { transition-delay: 0.30s; }
.answer.is-in .chip:nth-child(2) { transition-delay: 0.44s; }
.answer.is-in .chip:nth-child(3) { transition-delay: 0.58s; }
.beseai .chip svg { width: 14px; height: 14px; color: var(--accent-hover); }

/* ---------- 2 · Was Bese-AI für dich macht — vier Fähigkeits-Karten mit
   Geräte-Szenen (Runde 5, 2026-09-08). Je Karte oben eine feste dunkle
   Geräte-Fläche (§5a-Geräte-Ausnahme wie .bsys-app: gleiche Optik in beiden
   Themes, lokale --sk-*-Tokens), darunter Nummer + Titel + Paket-Satz. Die
   Szenen laufen als CSS-Schleifen, freigegeben über .ba-skill.is-live (IO in
   scripts.html), reduced-motion = Endzustand. Status-Grün/-Grau = die
   dokumentierte Bese-System-Kodierung. ---------- */
.ba-skills { margin: clamp(44px, 5vw, 72px) auto 0; } /* kein 1160px-Deckel mehr (2026-09-09) */
.ba-skills__head { margin-bottom: clamp(18px, 2.2vw, 28px); }
.ba-skills__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--white); }
.ba-skills__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.ba-skill {
  /* Runde 5b/5c (Marie: „zu gleich wie die Konsole, fast dieselbe Farbe wie der
     Hintergrund" → Markenblau-Fläche → „viel zu viel Blau, lieber weiß oder grau"):
     Szenen-Fläche = die helle CI-Rampe (Weiß → Off-White, 04a), dunkle Tinte,
     Markenblau NUR als Licht/Hervorhebung, Status-Grün als volle Pille — liest
     sich als App-Screen und hebt sich vom Charcoal-Grund UND der Glas-Konsole ab */
  --sk-bg-a: #FFFFFF; --sk-bg-m: #F4F7F9; --sk-bg-b: #EEF1F3; --sk-line: rgba(16, 24, 32, 0.10); --sk-fill: rgba(16, 24, 32, 0.045);
  --sk-txt-1: #101820; --sk-txt-2: rgba(16, 24, 32, 0.78); --sk-txt-3: rgba(16, 24, 32, 0.64);   /* .58 maß 4,4:1 für die 11–12-px-Kopfzeile → .64 ≈ 5,4:1 */
  /* 5d (Marie: „das, was blau ist, eher dunkelblau — und minimieren"): Akzent = Navy,
     Verläufe Markenblau → Navy, kein Cyan mehr auf der Fläche */
  /* 5f (Marie: „zu viele Farben — zwei Blautöne, Dunkelblau, Grün; nimm, was am
     edelsten passt"): EIN Akzent = Logo-Blau. Pillen/Gewinner/Antwort in Markenblau,
     das Licht (Meter, Budget, Scan) als Verlauf zur helleren Variante derselben
     Farbe. Navy und Status-Grün kommen in den Szenen nicht mehr vor. */
  --sk-hi: #2C6EA9; --sk-hi-ink: #FFFFFF; --sk-hi-rgb: 44, 110, 169; --sk-cyan: #4DA8DA;
  display: flex; flex-direction: column; min-width: 0;
  /* 5c: KEIN Glas-Rahmen mehr (Guardian: die Kartenfläche war dieselbe Glas-Formel
     wie die Konsole darüber) — der weiße Screen steht frei mit Schatten auf der
     Insel, der Text darunter ohne Kasten */
}
.ba-skill__scene { border-radius: var(--radius-lg); box-shadow: 0 34px 60px -26px rgba(var(--shadow-rgb), 0.75), 0 12px 24px -16px rgba(var(--shadow-rgb), 0.5); }
.ba-skill__text { padding: clamp(18px, 2vw, 26px) clamp(6px, 1vw, 14px) clamp(8px, 1vw, 12px); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
.ba-skill__no { grid-row: 1 / span 2; font-family: var(--font-display); font-style: italic; font-size: clamp(1.9rem, 2.4vw, 2.4rem); line-height: 1; color: var(--silver-blue); letter-spacing: -0.02em; padding-top: 0; } /* 5d: war text-300 (Marie: „01 bis 04 schlecht zu lesen") */
.ba-skill__text h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.15; color: var(--heading-color); margin: 0 0 6px; }
.ba-skill__text p { font-size: 15.5px; color: var(--text-200); line-height: 1.55; max-width: 46ch; }

/* Geräte-Fläche */
.ba-skill__scene {
  position: relative; height: 296px; overflow: hidden; isolation: isolate; contain: layout paint;   /* fest: beide Karten einer Reihe bleiben bündig; contain: Reflow der width/left-Animationen bleibt in der Szene (Guardian 5g) */
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--sk-hi-rgb), 0.05), transparent 55%), linear-gradient(160deg, var(--sk-bg-a), var(--sk-bg-m) 48%, var(--sk-bg-b));
  font-size: 14.5px; color: var(--sk-txt-2); line-height: 1.35;
}
.sk-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sk-txt-3); padding-bottom: 11px; border-bottom: 1px solid var(--sk-line); }
.sk-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sk-hi); }
.sk-bar__right { margin-left: auto; color: var(--sk-txt-1); font-weight: 700; letter-spacing: 0.06em; }
/* Status-Wechsel in der Kopfzeile: zwei Texte übereinander, Kreuzblende (5g) */
.sk-swap { position: relative; display: inline-grid; }
.sk-swap > * { grid-area: 1 / 1; white-space: nowrap; justify-self: end; }
.sk-swap__b { opacity: 0; transform: translateY(4px); color: var(--sk-hi); }
.sk-ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--sk-txt-2); }
.sk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.sk-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sk-tag--ok { color: var(--sk-hi-ink); background: var(--sk-hi); border: 1px solid var(--sk-hi); box-shadow: 0 6px 14px -6px rgba(var(--sk-hi-rgb), 0.5); }
.sk-tag--no { color: var(--sk-txt-2); background: var(--sk-fill); border: 1px solid var(--sk-line); }

/* ===== Szenen-Choreografie (Runde 5d, /impeccable animate + Finish-Review) =====
   Alle vier Szenen laufen im GLEICHEN 8-s-Takt: Ruhe (0–0,5 s) → Handlung →
   ENTSCHEIDUNG (der eine Moment je Szene: Stempel · Wert-Sprung · Termin ·
   Gewinner-Weg) → Halten (bis ~7,2 s) → gestuftes Abblenden (Details 90–96 %,
   Träger 94–99 %). Ein Ereignis je Takt, nie zwei Dinge gleichzeitig. Ankünfte
   mit exponentiellem Ease-out (--sk-ease), Abgänge schneller. Die vier Karten
   laufen PHASENVERSETZT (--sk-phase 0/2/4/6 s als negative Verzögerung), damit
   die Reihe nicht als Block blinkt. Ein Akzent: Markenblau (--sk-hi) für alles Feste,
   die helle Variante nur als Verlaufs-Anfang von Meter/Budget/Scan (Runde 5f).
   Prozentwerte = Anteile der 8 s (1 % = 80 ms). ===== */
.ba-skill { --sk-ease: cubic-bezier(0.16, 1, 0.3, 1); --sk-cycle: 8s; --sk-phase: 0s; --sk-delay: calc(-1 * var(--sk-phase)); }
.ba-skill:nth-child(2) { --sk-phase: 2s; }
.ba-skill:nth-child(3) { --sk-phase: 4s; }
.ba-skill:nth-child(4) { --sk-phase: 6s; }

/* 01 · sortiert Anfragen: die Scan-Linie LIEST jede Zeile (fährt weich hin,
   steht 0,56 s), der Stempel landet, WÄHREND sie noch steht */
.sk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sk-req { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--sk-fill); border: 1px solid var(--sk-line); color: var(--sk-txt-2); min-width: 0; }
.sk-req__txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-req b { color: var(--sk-txt-1); font-weight: 600; background-image: linear-gradient(rgba(var(--sk-hi-rgb), 0.16), rgba(var(--sk-hi-rgb), 0.16)); background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0; border-radius: 3px; padding-inline: 2px; margin-inline: -2px; } /* Textmarker: Bese-AI markiert, was sie liest */
.sk-req .sk-tag { opacity: 0; transform: scale(1.25); }
.sk-tag--ok svg { stroke-dasharray: 22; stroke-dashoffset: 22; } /* Häkchen zeichnet sich nach dem Stempel; 22 = Puffer über der ~12,7-Pfadlänge von #i-check (14×14) */
.ba-skill.is-live .sk-req b { animation: var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-req:nth-child(1) b { animation-name: sk-mark-1; }
.ba-skill.is-live .sk-req:nth-child(2) b { animation-name: sk-mark-2; }
.ba-skill.is-live .sk-req:nth-child(3) b { animation-name: sk-mark-3; }
.ba-skill.is-live .sk-tag--ok svg { animation: var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-req:nth-child(1) .sk-tag--ok svg { animation-name: sk-check-1; }
.ba-skill.is-live .sk-req:nth-child(3) .sk-tag--ok svg { animation-name: sk-check-3; }
.ba-skill.is-live .sk-sort .sk-swap__a { animation: sk-swap-a var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-sort .sk-swap__b { animation: sk-swap-b var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-scan { position: absolute; left: 18px; right: 18px; top: 58px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sk-cyan) 35%, var(--sk-hi) 65%, transparent); opacity: 0; }
.ba-skill.is-live .sk-scan { animation: sk-scan var(--sk-cycle) linear var(--sk-delay) infinite; }
.ba-skill.is-live .sk-req { animation: var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-req:nth-child(1) { animation-name: sk-read-1; }
.ba-skill.is-live .sk-req:nth-child(2) { animation-name: sk-read-2; }
.ba-skill.is-live .sk-req:nth-child(3) { animation-name: sk-read-3; }
.ba-skill.is-live .sk-req--no :is(.sk-req__txt, .sk-ic) { animation: sk-dim-2 var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; } /* nur Text + Icon treten zurück, der Tag bleibt lesbar */
.ba-skill.is-live .sk-req .sk-tag { animation: var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-req:nth-child(1) .sk-tag { animation-name: sk-stamp-1; }
.ba-skill.is-live .sk-req:nth-child(2) .sk-tag { animation-name: sk-stamp-2; }
.ba-skill.is-live .sk-req:nth-child(3) .sk-tag { animation-name: sk-stamp-3; }
/* Scan: Fahrten weich (Ease-out im Keyframe), Lesepausen linear */
@keyframes sk-scan {
  0%, 2% { opacity: 0; transform: translateY(0); }
  6% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  12% { transform: translateY(24px); } 19% { transform: translateY(24px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  27% { transform: translateY(77px); } 34% { transform: translateY(77px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  42% { transform: translateY(130px); } 49% { transform: translateY(130px); opacity: 1; }
  54%, 100% { transform: translateY(130px); opacity: 0; }
}
@keyframes sk-read-1 { 0%, 1% { opacity: 0; transform: translateX(-10px); } 5% { opacity: 1; transform: none; } 12% { background: var(--sk-fill); transform: none; box-shadow: none; } 14%, 20% { background: rgba(16, 24, 32, 0.075); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(16, 24, 32, 0.35); } 24%, 100% { background: var(--sk-fill); transform: none; box-shadow: none; } }
@keyframes sk-read-2 { 0%, 3% { opacity: 0; transform: translateX(-10px); } 7% { opacity: 1; transform: none; } 27% { background: var(--sk-fill); transform: none; box-shadow: none; } 29%, 35% { background: rgba(16, 24, 32, 0.075); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(16, 24, 32, 0.35); } 39%, 100% { background: var(--sk-fill); transform: none; box-shadow: none; } }
@keyframes sk-read-3 { 0%, 5% { opacity: 0; transform: translateX(-10px); } 9% { opacity: 1; transform: none; } 42% { background: var(--sk-fill); transform: none; box-shadow: none; } 44%, 50% { background: rgba(16, 24, 32, 0.075); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(16, 24, 32, 0.35); } 54%, 100% { background: var(--sk-fill); transform: none; box-shadow: none; } }
@keyframes sk-dim-2 { 0%, 36% { opacity: 1; } 40% { opacity: 0.62; } 92% { opacity: 0.62; } 97%, 100% { opacity: 1; } }
/* Textmarker läuft über das Schlüsselwort, solange die Linie liest */
@keyframes sk-mark-1 { 0%, 13% { background-size: 0% 100%; } 18% { background-size: 100% 100%; } 90% { background-size: 100% 100%; } 96%, 100% { background-size: 0% 100%; } }
@keyframes sk-mark-2 { 0%, 28% { background-size: 0% 100%; } 33% { background-size: 100% 100%; } 90% { background-size: 100% 100%; } 96%, 100% { background-size: 0% 100%; } }
@keyframes sk-mark-3 { 0%, 43% { background-size: 0% 100%; } 48% { background-size: 100% 100%; } 90% { background-size: 100% 100%; } 96%, 100% { background-size: 0% 100%; } }
@keyframes sk-check-1 { 0%, 19% { stroke-dashoffset: 22; } 24% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes sk-check-3 { 0%, 49% { stroke-dashoffset: 22; } 54% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes sk-swap-a { 0%, 56% { opacity: 1; transform: none; } 60% { opacity: 0; transform: translateY(-4px); } 94% { opacity: 0; } 99%, 100% { opacity: 1; transform: none; } }
@keyframes sk-swap-b { 0%, 58% { opacity: 0; transform: translateY(4px); } 62% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(4px); } }
/* Stempel: kommt groß herein und setzt sich, solange die Linie auf der Zeile steht */
@keyframes sk-stamp-1 { 0%, 16% { opacity: 0; transform: scale(1.25); } 19% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.96); } }
@keyframes sk-stamp-2 { 0%, 31% { opacity: 0; transform: scale(1.25); } 34% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.96); } }
@keyframes sk-stamp-3 { 0%, 46% { opacity: 0; transform: scale(1.25); } 49% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.96); } }

/* 02 · erkennt den großen Auftrag: Anfrage kommt an, vier Signale im Takt,
   das Meter wächst, die Bewertung SPRINGT — die Karte hebt sich dabei */
.sk-case { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--sk-fill); border: 1px solid var(--sk-line); }
.sk-case__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-case__txt b { color: var(--sk-txt-1); font-weight: 600; }
.sk-case__txt small { font-size: 13px; color: var(--sk-txt-3); }
.ba-skill.is-live .sk-case { animation: sk-case var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.sk-signal { font-size: 12.5px; font-weight: 600; color: var(--sk-txt-1); padding: 4px 10px; border-radius: var(--radius-full); background: var(--sk-fill); border: 1px solid var(--sk-line); opacity: 0; transform: translateY(6px); }
.sk-signal--hit { color: var(--sk-hi-ink); background: var(--sk-hi); border-color: var(--sk-hi); }
.ba-skill.is-live .sk-signal { animation: var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-signal:nth-child(1) { animation-name: sk-signal-1; }
.ba-skill.is-live .sk-signal:nth-child(2) { animation-name: sk-signal-2; }
.ba-skill.is-live .sk-signal:nth-child(3) { animation-name: sk-signal-3; }
.ba-skill.is-live .sk-signal:nth-child(4) { animation-name: sk-signal-4; }
.sk-meter { position: relative; height: 8px; border-radius: 4px; background: rgba(16, 24, 32, 0.08); margin-top: auto; }
/* Knopf reitet auf dem Meter-Kopf und trägt den Wert mit */
.sk-meter__knob { position: absolute; top: 50%; left: 14%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid var(--sk-hi); box-shadow: 0 2px 8px rgba(16, 24, 32, 0.25); }
.sk-meter__eur { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); font-size: 12px; font-weight: 700; color: var(--sk-hi); white-space: nowrap; letter-spacing: 0.01em; }
.sk-meter__eur--b { opacity: 0; }
.ba-skill.is-live .sk-meter__knob { animation: sk-knob var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-meter__eur--a { animation: sk-eur-a var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-meter__eur--b { animation: sk-eur-b var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-note { font-size: 12.5px; color: var(--sk-txt-3); margin: 0; opacity: 0; transform: translateY(4px); }
.ba-skill.is-live .sk-note { animation: sk-note var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-meter__fill { display: block; height: 100%; width: 14%; border-radius: 4px; background: linear-gradient(90deg, var(--sk-cyan), var(--sk-hi)); }
.sk-vals { margin-top: 2px; }
.ba-skill.is-live .sk-meter__fill { animation: sk-meter var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-vals { position: relative; height: 24px; }
.sk-val { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--sk-txt-2); white-space: nowrap; }
.sk-val b { color: var(--sk-txt-1); font-weight: 700; font-size: 15px; }
.sk-val svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk-val--b { color: var(--sk-hi); font-weight: 700; opacity: 0; transform: translateY(8px); }
.ba-skill.is-live .sk-val--a { animation: sk-val-a var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-val--b { animation: sk-val-b var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
@keyframes sk-case { 0%, 2% { opacity: 0; transform: translateY(8px); border-color: var(--sk-line); box-shadow: none; } 6% { opacity: 1; transform: none; } 54% { border-color: var(--sk-line); box-shadow: none; transform: none; } 58% { border-color: rgba(var(--sk-hi-rgb), 0.75); box-shadow: 0 10px 24px -12px rgba(var(--sk-hi-rgb), 0.45); transform: translateY(-2px); } 94% { border-color: rgba(var(--sk-hi-rgb), 0.75); box-shadow: 0 10px 24px -12px rgba(var(--sk-hi-rgb), 0.45); transform: translateY(-2px); opacity: 1; } 99%, 100% { border-color: var(--sk-line); box-shadow: none; transform: none; opacity: 0; } }
@keyframes sk-signal-1 { 0%, 12% { opacity: 0; transform: translateY(6px); } 16% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes sk-signal-2 { 0%, 18% { opacity: 0; transform: translateY(6px); } 22% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes sk-signal-3 { 0%, 24% { opacity: 0; transform: translateY(6px); } 28% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes sk-signal-4 { 0%, 30% { opacity: 0; transform: translateY(6px); } 34% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes sk-meter { 0%, 36% { width: 14%; } 54% { width: 88%; } 94% { width: 88%; } 99%, 100% { width: 14%; } }
@keyframes sk-knob { 0%, 36% { left: 14%; } 54% { left: 88%; } 94% { left: 88%; } 99%, 100% { left: 14%; } }
@keyframes sk-eur-a { 0%, 5% { opacity: 0; } 9%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes sk-eur-b { 0%, 53% { opacity: 0; transform: translate(-50%, -2px); } 58% { opacity: 1; transform: translate(-50%, -6px); } 94% { opacity: 1; transform: translate(-50%, -6px); } 99%, 100% { opacity: 0; } }
@keyframes sk-note { 0%, 60% { opacity: 0; transform: translateY(4px); } 65% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sk-val-a { 0%, 5% { opacity: 0; transform: translateY(4px); } 9% { opacity: 1; transform: none; } 50% { opacity: 1; transform: none; animation-timing-function: ease-in; } 54% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; } }
@keyframes sk-val-b { 0%, 54% { opacity: 0; transform: translateY(8px); } 58% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(4px); } }

/* 03 · nimmt den Anruf an: es klingelt (Punkt, Hörer), Bese-AI übernimmt, der
   Anrufer spricht, die Welle verstummt, Bese-AI tippt, antwortet, Termin */
.sk-bar__dot--ring { background: var(--sk-hi); }
.ba-skill.is-live .sk-bar__dot--ring { animation: sk-ring var(--sk-cycle) ease-in-out var(--sk-delay) infinite; }
/* ⚠ SCHLAFEND seit Go-Live Phase 3 (2026-09-15): die Szene sk-call (Bese-AI nimmt den Anruf an
   und trägt den Termin ein) ist aus beiden Fähigkeiten-Partials raus — die KI-Rufannahme ist
   Pilot, nicht live. CSS bleibt stehen, damit der Rückbau eine Kommentarklammer ist. */
.sk-call__who { display: flex; align-items: center; gap: 10px; }
.sk-call__who .sk-ic { transform-origin: 50% 60%; }
.ba-skill.is-live .sk-call__who .sk-ic { animation: sk-shake var(--sk-cycle) ease-in-out var(--sk-delay) infinite; }
.sk-call__num { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-call__num b { color: var(--sk-txt-1); font-weight: 600; }
.sk-call__num small { font-size: 13px; color: var(--sk-txt-3); }
.sk-call__ai { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sk-hi-ink); padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--sk-hi); background: var(--sk-hi); box-shadow: 0 6px 14px -6px rgba(var(--sk-hi-rgb), 0.5); white-space: nowrap; opacity: 0; transform: translateX(8px); }
.sk-call__ai svg { width: 12px; height: 12px; fill: currentColor; }
/* Gesprächs-Timer: registrierte Ganzzahl zählt Sekunden, Anzeige über counter() */
@property --sk-sec { syntax: '<integer>'; inherits: false; initial-value: 0; } /* ohne Registrierung springt der Timer bei 50 % der Keyframe hart 0→23 (akzeptable Degradation) */
.sk-timer { --sk-sec: 0; counter-reset: sksec var(--sk-sec); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* counter-reset auf dem Element — die Variable ist inherits:false, das ::before sähe sie sonst nicht (zeigte 0:00) */
.sk-timer::before { content: "0:" counter(sksec, decimal-leading-zero); }
.ba-skill.is-live .sk-call .sk-swap__a { animation: sk-swap-a-call var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-call .sk-swap__b { animation: sk-swap-b-call var(--sk-cycle) linear var(--sk-delay) infinite; }
.sk-chat__row { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.sk-chat__date { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--sk-txt-1); padding: 5px 10px; border-radius: var(--radius-full); background: var(--sk-fill); border: 1px solid var(--sk-line); opacity: 0; transform: translateY(8px); }
.sk-chat__date svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--sk-hi); }
.ba-skill.is-live .sk-chat__date { animation: sk-date var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-call__ai { animation: sk-ai-in var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-wave { display: flex; align-items: center; gap: 5px; height: 30px; padding-inline: 2px; }
.sk-wave i { display: block; width: 3px; height: 5px; border-radius: 2px; background: var(--sk-txt-3); opacity: 0.35; transform-origin: center; will-change: transform; } /* im Ruhezustand grau — Markenblau nur, wenn gesprochen wird */
.ba-skill.is-live .sk-wave i { animation: sk-wave var(--sk-cycle) ease-in-out calc(var(--k, 0) * 0.07s - var(--sk-phase)) infinite; }
.sk-wave i:nth-child(2) { --k: 1; } .sk-wave i:nth-child(3) { --k: 2; } .sk-wave i:nth-child(4) { --k: 3; } .sk-wave i:nth-child(5) { --k: 4; } .sk-wave i:nth-child(6) { --k: 5; } .sk-wave i:nth-child(7) { --k: 6; } .sk-wave i:nth-child(8) { --k: 7; } .sk-wave i:nth-child(9) { --k: 8; } .sk-wave i:nth-child(10) { --k: 9; } .sk-wave i:nth-child(11) { --k: 10; }
.sk-chat { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sk-chat__line { position: relative; font-size: 14px; padding: 8px 12px; border-radius: 12px; max-width: 80%; opacity: 0; transform: translateY(8px); }
.sk-chat__line--in { align-self: flex-start; background: var(--sk-fill); border: 1px solid var(--sk-line); color: var(--sk-txt-1); border-bottom-left-radius: 4px; }
.sk-chat__line--ai { align-self: flex-end; background: var(--sk-hi); border: 1px solid var(--sk-hi); color: var(--sk-hi-ink); font-weight: 600; border-bottom-right-radius: 4px; }
/* Tipp-Punkte liegen in der Antwort-Blase; der Text darunter kommt erst nach ihnen */
.sk-typing { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; opacity: 0; }
.sk-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.sk-chat__txt { opacity: 0; }
.ba-skill.is-live .sk-typing { animation: sk-typing var(--sk-cycle) ease-in-out var(--sk-delay) infinite; }
.ba-skill.is-live .sk-typing i { animation: sk-typing-dot var(--sk-cycle) ease-in-out calc(var(--k, 0) * 0.15s - var(--sk-phase)) infinite; } /* hüpft nur im Tipp-Fenster (51–60 %), sonst steht es */
.sk-typing i:nth-child(2) { --k: 1; } .sk-typing i:nth-child(3) { --k: 2; }
.ba-skill.is-live .sk-chat__txt { animation: sk-txt-in var(--sk-cycle) ease-out var(--sk-delay) infinite; }
.sk-chat__line--ok { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; color: var(--sk-hi-ink); background: var(--sk-hi); font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: var(--radius-full); box-shadow: 0 6px 14px -6px rgba(var(--sk-hi-rgb), 0.5); }
.sk-chat__line--ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba-skill.is-live .sk-chat__line--in { animation: sk-line-1 var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-chat__line--ai { animation: sk-line-2 var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-chat__line--ok { animation: sk-line-3 var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
@keyframes sk-ring { 0%, 3% { transform: scale(1); } 5% { transform: scale(1.6); } 7% { transform: scale(1); } 9% { transform: scale(1.6); } 11% { transform: scale(1); } 13% { transform: scale(1.6); } 15%, 100% { transform: scale(1); } }
@keyframes sk-shake { 0%, 3% { transform: rotate(0); } 4.5% { transform: rotate(-12deg); } 6% { transform: rotate(12deg); } 7.5% { transform: rotate(-12deg); } 9% { transform: rotate(12deg); } 10.5% { transform: rotate(-10deg); } 12% { transform: rotate(10deg); } 13.5% { transform: rotate(-6deg); } 15%, 100% { transform: rotate(0); } }
@keyframes sk-ai-in { 0%, 16% { opacity: 0; transform: translateX(8px); } 20% { opacity: 1; transform: none; } 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateX(4px); } }
@keyframes sk-wave { 0%, 22% { transform: scaleY(1); opacity: 0.35; background: var(--sk-txt-3); } 25% { transform: scaleY(4.5); opacity: 1; background: var(--sk-hi); } 28% { transform: scaleY(2); } 31% { transform: scaleY(5.5); } 34% { transform: scaleY(1.6); } 37% { transform: scaleY(4); } 40% { transform: scaleY(2.4); } 43% { transform: scaleY(5); opacity: 1; background: var(--sk-hi); } 44% { transform: scaleY(1.2); } 47%, 100% { transform: scaleY(1); opacity: 0.35; background: var(--sk-txt-3); } }
@keyframes sk-line-1 { 0%, 28% { opacity: 0; transform: translateY(8px); } 32% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sk-line-2 { 0%, 46% { opacity: 0; transform: translateY(8px); } 50% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sk-typing { 0%, 50% { opacity: 0; } 51%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes sk-typing-dot { 0%, 50% { transform: translateY(0); } 52.5% { transform: translateY(-3px); } 55% { transform: translateY(0); } 57.5% { transform: translateY(-3px); } 60%, 100% { transform: translateY(0); } }
@keyframes sk-txt-in { 0%, 61% { opacity: 0; } 64% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sk-line-3 { 0%, 68% { opacity: 0; transform: translateY(8px); } 72% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sk-date { 0%, 74% { opacity: 0; transform: translateY(8px); } 78% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(4px); } }
/* Kopfzeile: „Du: beim Kunden" → laufender Timer ab „nimmt an" (16 %) bis Termin, 0:00 → 0:23 */
@keyframes sk-swap-a-call { 0%, 16% { opacity: 1; transform: none; } 20% { opacity: 0; transform: translateY(-4px); } 94% { opacity: 0; } 99%, 100% { opacity: 1; transform: none; } }
@keyframes sk-swap-b-call { 0%, 18% { opacity: 0; transform: translateY(4px); --sk-sec: 0; } 22% { opacity: 1; transform: none; --sk-sec: 0; } 72% { --sk-sec: 23; opacity: 1; } 92% { --sk-sec: 23; opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(4px); --sk-sec: 23; } }

/* 04 · stellt die Werbung ein: der Betrieb pulst, der Lichtpunkt läuft den
   besten Weg zweimal, ERST DANN leuchtet der Gewinner, die anderen treten
   zurück, der Budget-Regler folgt, zuletzt das Label */
.sk-route__map { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: minmax(0, 1fr); gap: 8px; align-items: center; flex: 1 1 auto; min-height: 0; } /* Zeile = Restfläche, sonst diktiert das 200×120-SVG bei breiten Karten die Höhe */
/* Karte: Hairline-Straßen hinter Pin + Wegen, radial ab dem Pin ausmaskiert („halb eingezeichnet") */
.sk-route__terrain { position: absolute; top: -8px; left: -10px; width: 56%; height: calc(100% + 16px); z-index: 0; overflow: hidden; pointer-events: none; border-radius: 10px; /* Höhe explizit: ein SVG mit width nimmt sonst seine viewBox-Ratio und ignoriert bottom */
  -webkit-mask-image: radial-gradient(ellipse 82% 125% at 18% 52%, #000 22%, rgba(0, 0, 0, 0.5) 60%, transparent 100%); mask-image: radial-gradient(ellipse 82% 125% at 18% 52%, #000 22%, rgba(0, 0, 0, 0.5) 60%, transparent 100%); }
/* Minimal-Karte (5h, Marie: „sieht nicht aus wie eine richtige Karte"): graue Landfläche,
   weiße Straßen (Haupt 3 px, Neben 2 px, klein 1,2 px), Blöcke als dunklere Felder, Fluss
   als sehr helles Blau — die Lesart der Standardkarten von Apple/Google */
.sk-map__land { fill: rgba(16, 24, 32, 0.065); opacity: 0; }
.sk-map__river { fill: none; stroke: rgba(var(--sk-hi-rgb), 0.16); stroke-width: 7; stroke-linecap: round; opacity: 0; }
.sk-map__blocks path { fill: rgba(16, 24, 32, 0.075); opacity: 0; }
.sk-route__street { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.sk-map__road--main { stroke-width: 3.2; }
.sk-map__road--small { stroke-width: 1.3; }
.ba-skill.is-live .sk-map__land { animation: sk-land var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-map__river { animation: sk-block var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-map__blocks path { animation: sk-block var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-route__street { animation: var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-route__street:nth-child(1) { animation-name: sk-street-1; }
.ba-skill.is-live .sk-route__street:nth-child(2) { animation-name: sk-street-2; }
.ba-skill.is-live .sk-route__street:nth-child(3) { animation-name: sk-street-3; }
.ba-skill.is-live .sk-route__street:nth-child(4) { animation-name: sk-street-4; }
.ba-skill.is-live .sk-route__street:nth-child(5) { animation-name: sk-street-5; }
.ba-skill.is-live .sk-route__street:nth-child(6) { animation-name: sk-street-6; }
.sk-route__home { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--sk-txt-2); font-size: 12px; text-align: center; }
.sk-route__home small { background: rgba(255, 255, 255, 0.85); padding: 1px 5px; border-radius: 4px; }
/* Puls-Ring um den Pin beim Start (Standort meldet sich) */
.sk-route__ping { position: absolute; left: 50%; top: 15px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1.5px solid var(--sk-hi); opacity: 0; transform: scale(0.5); pointer-events: none; }
.ba-skill.is-live .sk-route__ping { animation: sk-ping var(--sk-cycle) ease-out var(--sk-delay) infinite; }
.sk-route__lines { position: relative; z-index: 1; }
.sk-nodes { position: relative; z-index: 1; }
.sk-route__home svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--sk-hi); }
.ba-skill.is-live .sk-route__home svg { animation: sk-home var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-route__home small { color: var(--sk-txt-3); }
.sk-route__lines { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.sk-route__line { fill: none; stroke: rgba(16, 24, 32, 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Anfragen-Fluss: kleine Punkte laufen die Wege entlang — dicht auf dem besten, spärlich auf den anderen (das ist, was Bese-AI sieht) */
.sk-route__flow { fill: none; stroke: rgba(16, 24, 32, 0.35); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0.01 24; opacity: 0; }
.sk-route__flow--win { stroke: var(--sk-hi); stroke-dasharray: 0.01 7; }
.ba-skill.is-live .sk-route__flow { animation: sk-flow var(--sk-cycle) linear var(--sk-delay) infinite; }
.ba-skill.is-live .sk-route__flow--win { animation-name: sk-flow-win; }
.sk-route__comet { fill: none; stroke: var(--sk-hi); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 22 100; stroke-dashoffset: 22; opacity: 0; }
.ba-skill.is-live .sk-route__comet { animation: sk-comet var(--sk-cycle) ease-in-out var(--sk-delay) infinite; }
.sk-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 6px; }
.sk-node { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--sk-line); background: var(--sk-fill); font-size: 13.5px; color: var(--sk-txt-1); min-width: 0; }
.sk-node svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--sk-txt-2); }
.sk-node span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sk-node em { font-style: normal; font-size: 11.5px; color: var(--sk-txt-3); }
.sk-node--win em { color: var(--sk-hi); font-weight: 700; }
.ba-skill.is-live .sk-node--win { animation: sk-node-win var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-node--win em { animation: sk-node-win-em var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-node:not(.sk-node--win) { animation: sk-node-dim var(--sk-cycle) ease-in-out var(--sk-delay) infinite; }
.sk-budget { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sk-txt-3); }
.sk-budget__track { position: relative; flex: 1 1 auto; height: 8px; border-radius: 4px; background: rgba(16, 24, 32, 0.08); }
.sk-budget__knob { position: absolute; top: 50%; left: 34%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid var(--sk-hi); box-shadow: 0 2px 8px rgba(16, 24, 32, 0.25); }
.ba-skill.is-live .sk-budget__knob { animation: sk-budget-knob var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.sk-budget__track i { display: block; height: 100%; width: 34%; border-radius: 4px; background: linear-gradient(90deg, var(--sk-cyan), var(--sk-hi)); }
.sk-budget b { color: var(--sk-hi); font-weight: 700; letter-spacing: 0.02em; text-transform: none; font-size: 13.5px; opacity: 0; transform: translateX(-6px); }
.ba-skill.is-live .sk-budget__track i { animation: sk-budget var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-budget b { animation: sk-budget-lbl var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
@keyframes sk-home { 0%, 4% { transform: scale(1); } 8% { transform: scale(1.18); } 13%, 100% { transform: scale(1); } }
@keyframes sk-ping { 0%, 4% { opacity: 0; transform: scale(0.5); } 6% { opacity: 0.7; } 14%, 100% { opacity: 0; transform: scale(2.2); } }
/* Straßen zeichnen sich nacheinander ein (0,2–1,4 s) und bleiben bis zum Abblenden */
@keyframes sk-street-1 { 0%, 2% { stroke-dashoffset: 100; } 9% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; } 99%, 100% { stroke-dashoffset: 100; } }
@keyframes sk-street-2 { 0%, 4% { stroke-dashoffset: 100; } 11% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; } 99%, 100% { stroke-dashoffset: 100; } }
@keyframes sk-street-3 { 0%, 6% { stroke-dashoffset: 100; } 13% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; } 99%, 100% { stroke-dashoffset: 100; } }
@keyframes sk-street-4 { 0%, 8% { stroke-dashoffset: 100; } 15% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; } 99%, 100% { stroke-dashoffset: 100; } }
@keyframes sk-street-5 { 0%, 10% { stroke-dashoffset: 100; } 17% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; } 99%, 100% { stroke-dashoffset: 100; } }
@keyframes sk-street-6 { 0%, 11% { stroke-dashoffset: 100; } 18% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; } 99%, 100% { stroke-dashoffset: 100; } }
@keyframes sk-block { 0%, 6% { opacity: 0; } 12% { opacity: 1; } 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes sk-land { 0%, 1% { opacity: 0; } 5% { opacity: 1; } 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
/* Komet: Lauf 1 (12–27 %) und Lauf 2 (30–45 %), dazwischen nichts anderes */
@keyframes sk-comet { 0%, 12% { opacity: 0; stroke-dashoffset: 22; } 14% { opacity: 1; } 27% { opacity: 1; stroke-dashoffset: -100; } 28.5% { opacity: 0; stroke-dashoffset: -100; } 30% { opacity: 0; stroke-dashoffset: 22; } 32% { opacity: 1; } 45% { opacity: 1; stroke-dashoffset: -100; } 47%, 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes sk-node-win { 0%, 45% { border-color: var(--sk-line); background: var(--sk-fill); color: var(--sk-txt-1); transform: none; box-shadow: none; } 49% { border-color: var(--sk-hi); background: var(--sk-hi); color: var(--sk-hi-ink); transform: translateX(-3px); box-shadow: 0 10px 22px -10px rgba(var(--sk-hi-rgb), 0.55); } 94% { border-color: var(--sk-hi); background: var(--sk-hi); color: var(--sk-hi-ink); transform: translateX(-3px); box-shadow: 0 10px 22px -10px rgba(var(--sk-hi-rgb), 0.55); } 99%, 100% { border-color: var(--sk-line); background: var(--sk-fill); color: var(--sk-txt-1); transform: none; box-shadow: none; } }
@keyframes sk-node-win-em { 0%, 45% { color: var(--sk-hi); } 49% { color: rgba(255, 255, 255, 0.88); } 94% { color: rgba(255, 255, 255, 0.88); } 99%, 100% { color: var(--sk-hi); } }
@keyframes sk-node-dim { 0%, 45% { opacity: 1; } 51% { opacity: 0.62; } 94% { opacity: 0.62; } 99%, 100% { opacity: 1; } }
@keyframes sk-budget { 0%, 50% { width: 34%; } 66% { width: 82%; } 94% { width: 82%; } 99%, 100% { width: 34%; } }
@keyframes sk-budget-knob { 0%, 50% { left: 34%; } 66% { left: 82%; } 94% { left: 82%; } 99%, 100% { left: 34%; } }
/* Fluss: sichtbar 4–45 % (vor und während der Komet-Läufe), Punkte wandern durch stroke-dashoffset; nach der Entscheidung bleibt nur der Gewinner-Fluss */
@keyframes sk-flow { 0%, 3% { opacity: 0; stroke-dashoffset: 0; } 6% { opacity: 0.7; } 45% { opacity: 0.7; stroke-dashoffset: -96; } 50% { opacity: 0.25; } 94% { opacity: 0.25; stroke-dashoffset: -220; } 99%, 100% { opacity: 0; stroke-dashoffset: -232; } }
@keyframes sk-flow-win { 0%, 3% { opacity: 0; stroke-dashoffset: 0; } 6% { opacity: 0.85; } 94% { opacity: 0.85; stroke-dashoffset: -280; } 99%, 100% { opacity: 0; stroke-dashoffset: -294; } }
@keyframes sk-budget-lbl { 0%, 60% { opacity: 0; transform: translateX(-6px); } 66% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(-4px); } }

/* Schmale Zweispalter (1041–1180 px, darunter ist das Raster einspaltig): Wege-Karte kompakter, sonst laufen die Knoten über */
@media (max-width: 1180px) and (min-width: 1041px) {
  .sk-route__map { grid-template-columns: 46px minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 6px; }
  .sk-node { font-size: 11.5px; padding: 5px 8px; gap: 6px; }
}
/* Schmale Karten (≤480 px): Kopfzeile einzeilig halten, Wege-Karte kompakter */
@media (max-width: 480px) {
  .sk-bar { font-size: 11px; letter-spacing: 0.05em; gap: 6px; }
  .sk-bar__right { white-space: nowrap; }
  .sk-route__map { grid-template-columns: 44px minmax(0, 0.55fr) minmax(0, 1.7fr); gap: 6px; }
  .sk-node { font-size: 12.5px; padding: 7px 9px; }
  .sk-route__home { font-size: 11px; }
}
/* Sehr schmale Karten (≤360 px): Szene höher, Chat-Blasen breiter */
@media (max-width: 360px) {
  .ba-skill__scene { height: 358px; }   /* 5g: Begründung (02) + Kalender-Pille (03) brauchen bei 320 px mehr Höhe */
  .sk-chat__line { max-width: 92%; }
  .sk-val { font-size: 12.5px; }   /* „Sanierung wahrscheinlich · 4.800 €" lief bei 320 px 7 px über */
  .sk-node { font-size: 11.5px; padding: 5px 8px; }
}

/* ---------- 3 · Moat — Foto-Bühne ---------- */
.ba-moat {
  position: relative;
  margin: clamp(40px, 4.6vw, 68px) auto 0;
  /* kein 1160px-Deckel mehr (2026-09-09): Foto-Bühne auf Frame-Breite */
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(320px, 34vw, 460px);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.ba-moat__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  z-index: -2;
  filter: saturate(0.82);
}
/* Scrim: unten fest dunkel (Text), oben nur ein Hauch — das Foto bleibt
   als Raum lesbar; Töne = Surface-0 als Roh-Tripel (theme-fest, §5a
   Foto-Scrim-Muster). */
.ba-moat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 10, 14, 0.18) 0%, rgba(6, 10, 14, 0.55) 45%, rgba(6, 10, 14, 0.92) 100%),
    linear-gradient(90deg, rgba(6, 10, 14, 0.55) 0%, rgba(6, 10, 14, 0.1) 60%);
}
.ba-moat__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: end;
  padding: clamp(24px, 3.4vw, 48px);
}
.ba-moat__kicker { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accent-hover); margin-bottom: 14px; }
.ba-moat__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 16px !important;
  max-width: 24ch;
}
.ba-moat__quote strong { font-weight: 400; font-style: italic; }
.ba-moat__text > p:last-child { color: rgba(226, 238, 248, 0.82); font-size: 14.5px; line-height: 1.6; max-width: 58ch; }
.ba-belege { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-start; gap: clamp(14px, 1.8vw, 26px); }
.belege { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.belege b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--white); }
.belege span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(214, 230, 245, 0.62); font-weight: 600; line-height: 1.25; max-width: 11ch; }
.ba-belege__rule { width: 1px; align-self: stretch; min-height: 2.6em; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent); }

/* ---------- 4 · Bese-AI Potenzial-Check (Lead-Magnet) ---------- */
.ba-check {
  /* Bewusst weiter 1000px (Boxbreiten-Runde 2026-09-09): der eingebettete
     Auftragsrechner zentriert sich selbst auf 960px (gemessen bei 1600px
     Fenster) — ein breiterer iframe wäre nur eine leere dunkle Platte. */
  margin: clamp(40px, 4.6vw, 68px) auto 0; max-width: 1000px;
  scroll-margin-top: clamp(84px, 9vh, 104px);
}
.ba-check__lead { text-align: center; }
.ba-check__lead h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.08; color: var(--white); margin-bottom: 14px; overflow-wrap: break-word; hyphens: auto; }
.ba-check__lead h3 em {
  font-style: italic; background: linear-gradient(100deg, var(--silver-blue), var(--accent-hover));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: 0.08em; margin-inline: -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ba-check__lead p { color: var(--text-200); font-size: 15px; line-height: 1.6; max-width: 66ch; margin-inline: auto; }
.ba-micro { margin-top: 16px; font-size: 12.5px; color: var(--text-300); display: inline-flex; align-items: center; gap: 8px; }
.ba-micro svg { width: 14px; height: 14px; color: var(--accent-hover); }

/* IO-paused-Pattern (§0a): Live-Dot erst ab Sichtbarkeit laufen lassen */
.beseai.is-revealed .askcard__live::before { animation-play-state: running; }

.ba-embed { margin-top: clamp(20px, 2.6vw, 32px); }
.ba-embed__frame {
  display: block; width: 100%; border: 0;
  height: clamp(660px, 80vh, 880px);
  color-scheme: dark;
  background: var(--surface-1);
  border-radius: clamp(12px, 1.4vw, 18px);
}

/* ---------- Bese-AI · Responsiv ---------- */
@media (max-width: 1040px) {
  .ba-skills__grid { grid-template-columns: 1fr; }
  .ba-moat__inner { grid-template-columns: 1fr; }
  .ba-belege { justify-content: flex-start; }
}
@media (max-width: 880px) {
  .ba-stage { grid-template-columns: 1fr; max-width: 560px; }
  .ba-stage__side { gap: 8px; }
}
@media (max-width: 560px) {
  .ba-belege { flex-wrap: wrap; gap: 16px 22px; }
  .ba-belege__rule { display: none; }
  .ba-moat { min-height: 0; }
  .ba-moat__quote { max-width: none; }
  .ba-embed__frame { height: clamp(680px, 88vh, 860px); }
}
@media (prefers-reduced-motion: reduce) {
  .askcard__live::before, .cline__mark .spin { animation: none !important; }
  .cline, .answer, .answer .chip, .askcard__q, [data-ba-generic] :is(.askcard__q, .gen-answer, .askcard__foot) { opacity: 1; transform: none; transition: none; }
  .cline__mark .spin { opacity: 0; }
  .cline__mark .tick { opacity: 1; transform: none; }
  .askcard__q-type::after { display: none; }
  .ai-core__halo, .ai-core__ring, .ai-core__orbit, .ai-core__pulse, .cline::after, .cline__mark .tick svg { animation: none !important; }
  .ai-core__ring { opacity: 1; background: conic-gradient(var(--accent-hover) 0 100%); }
  .ai-core__halo { opacity: 0.85; transform: scale(1); }
  .ai-core__orbit { display: none; }
  .ba-bg__streak, .ba-bg__ripple i { animation: none !important; opacity: 0; }
  .ba-skill *, .ba-skill *::before { animation: none !important; }
  .sk-req .sk-tag, .sk-val--b, .sk-call__ai, .sk-chat__line, .sk-chat__txt, .sk-budget b, .sk-signal, .sk-case { opacity: 1; transform: none; }
  .sk-typing { display: none; }
  .sk-val--a, .sk-scan, .sk-route__comet { opacity: 0; }
  .sk-meter__fill { width: 88%; } .sk-budget__track i { width: 82%; }
  .sk-node--win { border-color: var(--sk-hi); background: var(--sk-hi); color: var(--sk-hi-ink); }
  .sk-node--win em { color: rgba(255, 255, 255, 0.88); }
  .sk-node:not(.sk-node--win) { opacity: 0.62; }
  .sk-case { border-color: rgba(var(--sk-hi-rgb), 0.75); }
  .sk-req--no :is(.sk-req__txt, .sk-ic) { opacity: 0.62; }
  .sk-req b { background-size: 100% 100%; } .sk-tag--ok svg { stroke-dashoffset: 0; }
  .sk-swap__a { opacity: 0; } .sk-swap__b { opacity: 1; transform: none; } .sk-timer { --sk-sec: 23; }
  .sk-meter__knob { left: 88%; } .sk-meter__eur--a { opacity: 0; } .sk-meter__eur--b { opacity: 1; } .sk-note { opacity: 1; transform: none; }
  .sk-chat__date { opacity: 1; transform: none; } .sk-budget__knob { left: 82%; } .sk-route__flow { opacity: 0.25; } .sk-route__flow--win { opacity: 0.85; }
  .sk-route__street { stroke-dashoffset: 0; } .sk-map__land, .sk-map__river, .sk-map__blocks path { opacity: 1; } .sk-route__ping { display: none; } /* Signal-Feld still; .ba-bg__streak nur Gürtel-und-Hosenträger — die Engine baut sie bei reduced-motion gar nicht */
}

/* ---------- Schlussblock der STARTSEITE — Fassung 3 „Bühne + Werkzeug" (2026-09-10)

     Marie zu Fassung 1 (Foto als kleine Kachel in einer Beweis-Säule): „nicht so,
     wie du das gemacht hattest — Bilder in den Hintergrund"; zu Fassung 2 (Bühne
     und Check als zwei Zonen): „Gefällt mir leider immer noch nicht … der eine
     lange Satz in der Serifenschrift ist zu lang … das, was neben dem Rechner
     eingebaut ist, wirkt wahllos platziert … kürzen, sodass man es doch
     zusammen in eine Section packt."

     Jetzt EIN verzahnter Block (Referenzen: talenthafen Kundenstimme/CTA-Band =
     Foto an einer Seite, läuft weich aus; estateanfrage = Karte auf dem Foto):
     · Foto links, groß, ungeschnitten (Figur trägt das Bildverhältnis, kein
       object-fit-Beschnitt), bis zur Fensterkante, per Alpha-MASKE nach rechts
       und unten auslaufend (Farbverlauf ginge nicht: im Dark-Theme ist die
       Section transparent über dem Seiten-Verlauf).
     · Rechts oben nur Kicker + EIN Serifensatz + die drei Zahlen.
     · Der Rechner schiebt sich von unten in die Bühne (Grid mit drei Zeilen:
       Text | Overlap | Rest — die Figur spannt 1–2, der Rechner 2–3) und trägt
       nur eine Kopfzeile. Er deckelt sich intern auf 960 px und stapelt unter
       800 (Live-URL gemessen) → 1000 px mittig.
     Copy auf Maries Zuruf gekürzt (Sätze weggelassen, nichts umformuliert);
     Volltext im Partial-Kommentar. Nur Startseite (bese-ai-schluss-home.html);
     die sechs anderen Seiten behalten .ba-moat + .ba-check bis zum Rollout-Go.
     ---------- */
.ba-close {
  margin-top: clamp(40px, 4.6vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(28px, 3.4vw, 44px);
}
.ba-close__figure {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 996 / 752;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.ba-close__photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: left center;   /* Sicherheitsnetz: wird die Figur je höher als das Bild, fällt der Beschnitt rechts in den Auslauf */
  filter: saturate(0.86);
}
.ba-close__figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 14, 0) 45%, rgba(6, 10, 14, 0.42) 100%);
}
.ba-close__text { position: relative; }
.ba-close__kicker {
  display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-hover); margin-bottom: 14px;
}
.ba-close__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  line-height: 1.12;
  color: var(--white);
  text-wrap: balance;
  margin-bottom: 0 !important;
}
.ba-close__quote strong { font-weight: 400; font-style: italic; }
.ba-close .ba-belege { margin-top: clamp(22px, 2.4vw, 32px); justify-content: flex-start; }
.ba-close .belege b { font-size: clamp(1.7rem, 2.2vw, 2.3rem); }

/* Die Aufforderung am Fuß der Textsäule; der Rechner darunter ist nur Werkzeug.
   Der Anker #potenzial-check sitzt an der Kopfzeile (Guardian F3: am Rechner
   lag sie beim Sprung vom Hero-CTA je nach Breite unter der Navbar). */
.ba-close .ba-check { margin: 0 auto; max-width: 1000px; width: 100%; }
.ba-check__head { margin-top: clamp(28px, 3vw, 44px); scroll-margin-top: clamp(88px, 10vh, 110px); }
.ba-check__head h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.9rem); line-height: 1.1; color: var(--white); margin: 0 0 10px; overflow-wrap: break-word; hyphens: auto; }
.ba-check__head h3 em {
  /* --em-grad-a/b statt silver-blue/accent-hover: auf der Startseite wird
     --accent-hover in der Insel (Light) auf Silver Blue umgebogen — beide
     Stops wären gleich, der CI-Verlauf fiele zur Flachfarbe zusammen
     (Guardian F3); die em-Grad-Tokens sind genau dafür geschützt. */
  font-style: italic; background: linear-gradient(100deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: 0.08em; margin-inline: -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* --text-200 statt der Basis (--text-300, 3,7:1): Fließtext-Schwelle 4,5:1 */
.ba-close .ba-micro { margin: 0; align-items: flex-start; text-align: left; color: var(--text-200); }
.ba-close .ba-micro svg { flex: none; margin-top: 3px; }
.ba-close .ba-embed { margin-top: 0; }
.ba-close .ba-embed__frame { box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.7); }

/* Ab 1024 px: Bühne zweispaltig — Foto links, Text rechts */
@media (min-width: 1024px) {
  .ba-close {
    grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
    column-gap: clamp(36px, 4.2vw, 72px);
  }
  .ba-close__figure {
    grid-column: 1; grid-row: 1;
    /* bis zur Fensterkante (saleshax-Bühne): --bleed = Fensterrand → Frame-
       Innenkante; bis 1540 px Fenster ist das nur das Container-Padding.
       Zwei Masken (rechts + unten), per intersect verschnitten. */
    --bleed: calc(max(0px, (100vw - var(--max-width)) / 2) + var(--container-pad));
    margin-left: calc(-1 * var(--bleed));
    width: calc(100% + var(--bleed));
    -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 100%), linear-gradient(180deg, #000 68%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 58%, transparent 100%), linear-gradient(180deg, #000 68%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .ba-close__figure::after {
    background:
      linear-gradient(90deg, rgba(6, 10, 14, 0) 55%, rgba(6, 10, 14, 0.35) 100%),
      linear-gradient(180deg, rgba(6, 10, 14, 0) 58%, rgba(6, 10, 14, 0.45) 100%);
  }
  .ba-close__text { grid-column: 2; grid-row: 1; align-self: center; }
  .ba-close .ba-check { grid-column: 1 / -1; grid-row: 2; }
}

/* Ab 1280 px: der Rechner schiebt sich in die Bühne — drei Zeilen:
   [Text | Overlap | Rest]; die Figur spannt 1–2, der Rechner 2–3. Der
   Text steht in Zeile 1 oben, damit er nicht in den Overlap läuft; die
   Zahlen bleiben über der Rechner-Oberkante (gemessen 1280/1440/1864). */
@media (min-width: 1280px) {
  .ba-close {
    --ov: clamp(120px, 11vw, 220px);
    grid-template-rows: auto var(--ov) auto;
    row-gap: 0;
  }
  .ba-close__figure { grid-row: 1 / 3; }
  /* Textsäule sitzt UNTEN in Zeile 1: die Aufforderung steht damit direkt
     über der Rechner-Oberkante, die Luft liegt oben neben dem Foto. */
  .ba-close__text { grid-row: 1; align-self: end; padding-top: clamp(16px, 2vw, 32px); padding-bottom: clamp(22px, 2.2vw, 30px); }
  /* Rechner rechtsbündig = dieselbe rechte Achse wie die Textsäule; links
     läuft das Foto unter ihm aus. */
  .ba-close .ba-check { grid-row: 2 / 4; justify-self: end; position: relative; z-index: 1; }
}
@media (min-width: 2000px) {
  .ba-close__figure { --bleed: var(--container-pad); }   /* Ultrawide-Vollbild: sonst 500 px Lücke zum Text */
}

/* ============================================================
   MARKTFÜHRERSCHAFT (NUR /leistungen/marktfuehrerschaft/)
   Neue Sections + Hero-Ergänzungen. Token-basiert (Dark-Default
   + Light-Theme automatisch über die Tokens). Klassen-Prefix
   .mf-… damit nichts mit Bestand kollidiert.
   ============================================================ */

/* ---------- Hero-Ergänzungen (CTA-Reihe, Telefon-Pille,
     Sub-CTA, Vertrauens-Belege) ---------- */
.mf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 18px);
  margin-top: clamp(22px, 3vw, 30px);
}

.mf-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 9999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--heading-color);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.mf-hero__phone .icon { color: var(--accent-hover); }
.mf-hero__phone:hover {
  border-color: rgba(var(--glow-rgb), 0.5);
  background: var(--glass-bg-hover);
  transform: translateY(-2px);
}

.mf-hero__subcta {
  margin: clamp(14px, 1.8vw, 18px) auto 0;
  font-size: 14px;
  color: var(--text-300);
}
.mf-hero__subcta a {
  color: var(--accent-hover);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--glow-rgb), 0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.mf-hero__subcta a:hover { border-bottom-color: var(--accent-hover); }

.mf-creds {
  list-style: none;
  margin: clamp(28px, 3.6vw, 42px) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
  max-width: 760px;
}
.mf-cred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.mf-cred__value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.1;
  color: var(--heading-color);
}
.mf-cred__label {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-300);
}

/* MF-Hero seit 2026-07-27 ZWEISPALTIG (Text links, „gläserne 1" rechts —
   Talenthafen-Referenz): die geteilten zentrierten Bausteine laufen auf
   der MF-Seite linksbündig (analog .kanal-hero__*-Overrides).
   Seit 2026-09-02 ebenso auf der Plattform-Seite (Hero zweispaltig mit
   „Der Zulauf" rechts — :is() hält die Spezifität bei 0,2,0). */
:is(.page-marktfuehrerschaft, .page-plattform, .page-kanalservice, .page-kanal-start, .page-schaedlingsbekaempfung) .mf-hero__actions { justify-content: flex-start; }
:is(.page-marktfuehrerschaft, .page-plattform, .page-kanalservice, .page-kanal-start, .page-schaedlingsbekaempfung) .mf-hero__subcta { margin-inline: 0; }
.page-marktfuehrerschaft .mf-creds {
  justify-content: flex-start;
  margin-inline: 0;
  max-width: none;
}
.page-marktfuehrerschaft .mf-cred { align-items: flex-start; }

/* ---------- Geteilte Titel/Body der zweispaltigen MF-Sections ---------- */
/* Textspalten als Flex-Column mit kanonischem Eyebrow→H2→Body-Abstand
   (gap wie ki/recruit: clamp(20,2.5vw,32)). Eyebrow/Titel/Body tragen
   margin:0 — der Abstand kommt aus dem gap, damit der Eyebrow→H2-Abstand
   EINHEITLICH mit dem Rest der Seite ist (Marie 2026-06-30; vorher saß
   die Eyebrow zu nah an der H2). */
.mf-fokus__copy,
.mf-vorsprung__copy,
.mf-vogel__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}
.mf-fokus__title,
.mf-vorsprung__title,
.mf-vogel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  margin: 0;
  hyphens: manual;
}
.mf-fokus__body,
.mf-vorsprung__body,
.mf-vogel__body {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
  margin: 0;
  max-width: 56ch;
}
.mf-fokus__body--accent,
.mf-vorsprung__body--accent,
.mf-vogel__body--accent {
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: 0;
}

/* ============================================================
   MF · S1 — Spezialisierung (.mf-fokus)
   ============================================================ */
.mf-fokus {
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;
}
.mf-fokus__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .mf-fokus__grid { grid-template-columns: 1fr 1fr; }
  /* Text etwas nach rechts einrücken (Marie 2026-06-30), weg vom
     linken Container-Rand, näher zum Visual. */
  .mf-fokus__copy { padding-left: clamp(16px, 3.5vw, 56px); }
}

.mf-fokus__field {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  /* Kein Kasten (Marie 2026-06-30): rahmenlos, das Konvergenz-Visual
     schwebt frei in der Spalte — nur ein dezenter radialer Schein
     bleibt als Atmosphäre (kein Border/Glas/Shadow, kein overflow-clip;
     die Strahlen laufen ohnehin per mask weich aus). */
  background: radial-gradient(circle at 50% 48%, rgba(var(--glow-rgb), 0.08), transparent 60%);
}
/* ---------- Konvergenz-Visual: viele Strahlen bündeln sich in EINEM
     Brennpunkt — „wo die meisten anfangen (breit), hören wir auf (im
     Punkt)". Rein CSS/SVG-frei, IO-gegated, reduced-motion-safe.
     Inspiration §1.12 (Konvergenz-/Fokus-Pattern), Marie 2026-06-30. */
.mf-converge {
  position: absolute;
  inset: 0;
}
/* Strahlen-Bündel — radiale Speichen, am Brennpunkt am hellsten, nach
   außen auslaufend (Rand-Fade per mask, damit kein harter Abschluss). */
.mf-rays {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: transform; /* Maske einmal rastern, Kinder-Transforms darüber (Safari-Repaint) */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 76%);
}
/* Ganzes Strahlenbündel dreht extrem langsam → dauerhaft lebendig (IO-gegated) */
.mf-fokus.is-revealed .mf-rays {
  animation: mf-rays-spin 80s linear infinite;
}
@keyframes mf-rays-spin {
  to { transform: rotate(360deg); }
}
.mf-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--a));
}
.mf-ray > i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  will-change: transform;
  /* WEISS-dominant (Marie 2026-06-30): Strahlen weiß, hell am Brennpunkt */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.30) 26%,
    rgba(255, 255, 255, 0) 70%
  );
}
/* Jeder zweite Strahl dezent gedimmt → reicherer, weniger flacher Burst */
.mf-ray:nth-child(even) > i { opacity: 0.5; }
/* Strahlen zeichnen sich vom Rand zum Brennpunkt (gestaffelt rundum) */
.mf-fokus.is-revealed .mf-ray > i {
  animation: mf-ray-draw 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 18ms);
}
@keyframes mf-ray-draw {
  to { transform: scaleX(1); }
}
/* Energie-Ringe ziehen kontinuierlich in den Brennpunkt (weiß) */
.mf-converge__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.mf-fokus.is-revealed .mf-converge__ring {
  animation: mf-ring-in 4.8s ease-in infinite;
}
.mf-converge__ring--2 { animation-delay: 1.6s; }
.mf-converge__ring--3 { animation-delay: 3.2s; }
@keyframes mf-ring-in {
  0%   { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
  18%  { opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(0.10); opacity: 0; }
}
/* Brennpunkt */
.mf-converge__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: clamp(60px, 12vw, 84px);
  height: clamp(60px, 12vw, 84px);
}
/* Glow: vorwiegend WEISS, außen nur ein Hauch Cyan (Marie: mehr Weiß) */
.mf-core__glow {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 58%),
    radial-gradient(circle, rgba(var(--glow-rgb), 0.28) 0%, transparent 70%);
}
/* Stern-/Lens-Flare: helles weißes Kreuz durch den Brennpunkt */
.mf-core__flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320%;
  height: 320%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.mf-core__flare::before,
.mf-core__flare::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
}
.mf-core__flare::before {
  width: 100%;
  height: 1.5px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 50%, transparent);
}
.mf-core__flare::after {
  width: 1.5px;
  height: 100%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85) 50%, transparent);
}
.mf-fokus.is-revealed .mf-core__flare {
  animation: mf-flare-pulse 3.6s ease-in-out infinite;
}
@keyframes mf-flare-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
.mf-core__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* heller weißer Kern, nur ganz außen ein Hauch Cyan */
  background: radial-gradient(circle, #fff 0%, #fff 42%, rgba(var(--glow-rgb), 0.65) 100%);
  box-shadow: 0 0 26px 2px rgba(255, 255, 255, 0.65), 0 0 46px 6px rgba(var(--glow-rgb), 0.45);
}
.mf-fokus.is-revealed .mf-core__dot {
  animation: mf-core-breathe 3.6s ease-in-out infinite;
}
@keyframes mf-core-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.16); box-shadow: 0 0 34px 4px rgba(255, 255, 255, 0.8), 0 0 60px 10px rgba(var(--glow-rgb), 0.5); }
}
/* Beleg-Caption am unteren Rand (allgemein, keine Branche) */
.mf-converge__label {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vw, 26px);
  transform: translateX(-50%);
  z-index: 5;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-300);
  white-space: nowrap;
}

/* ============================================================
   MF · S2 — Der Fokus seit 2020 (.mf-vorsprung)
   Zweispaltig: links vertikaler Foto-Zeitstrahl (Knoten + Foto +
   Jahr/Text pro Zeile), rechts die Story (Marie 2026-07-01).
   Token-basiert (Dark+Light), IO-revealed über
   .mf-vorsprung.is-revealed. Mobile <960px = einspaltig.
   ============================================================ */
.mf-vorsprung {
  /* Linie + Knoten laufen im dunklen Markenblau (var(--accent) = #2C6EA9),
     nicht im Cyan (Marie 2026-07-01). Kanal-Tripel für dezente Halos: */
  --mfv-accent-rgb: 44, 110, 169;
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;
}
.mf-vorsprung__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 960px) {
  .mf-vorsprung__grid { grid-template-columns: 0.95fr 1.05fr; }
}

/* ---- Vertikaler Foto-Zeitstrahl (links) ---- */
.mf-vorsprung__timeline {
  position: relative;
  display: flex;
  flex-direction: column-reverse; /* aufsteigend: 2020 unten, Heute oben */
  gap: clamp(16px, 2vw, 26px);
}
/* Senkrechte Linie + Fill: wächst von UNTEN nach OBEN, läuft an beiden
   Enden spitz aus (Masken-Verlauf), im dunklen Markenblau. */
.mf-vorsprung__rail {
  position: absolute;
  left: 13px; /* Mitte der 26px-Node-Spalte (Node 14px → Center 13px) */
  top: clamp(38px, 4.6vw, 56px);
  bottom: clamp(38px, 4.6vw, 56px);
  width: 2px;
  border-radius: 2px;
  background: var(--glass-border);
  overflow: hidden;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.mf-vorsprung__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom center;
}
.mf-vorsprung.is-revealed .mf-vorsprung__fill {
  animation: mfv-fill 1.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
@keyframes mfv-fill { to { transform: scaleY(1); } }

/* Meilenstein-Zeile: Knoten + Foto + Label */
.mf-vorsprung__frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 26px clamp(108px, 13vw, 152px) 1fr;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(0.3s + var(--i) * 0.22s);
}
.mf-vorsprung.is-revealed .mf-vorsprung__frame { opacity: 1; transform: none; }

/* Knoten auf der Linie */
.mf-vorsprung__node {
  justify-self: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--glass-border);
  position: relative;
  z-index: 2;
}
.mf-vorsprung.is-revealed .mf-vorsprung__node {
  animation: mfv-node-pop 0.5s ease forwards;
  animation-delay: calc(0.4s + var(--i) * 0.22s);
}
@keyframes mfv-node-pop {
  to {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--mfv-accent-rgb), 0.14);
  }
}
/* „Heute"-Knoten (oben) etwas größer als Zielpunkt des Aufstiegs */
.mf-vorsprung__frame--now .mf-vorsprung__node { width: 18px; height: 18px; }

/* Foto-Kachel (Film-Cell) */
.mf-vorsprung__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 4px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 14px 30px -24px rgba(var(--shadow-rgb), 0.7);
}
.mf-vorsprung__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Label (Jahr + Text) */
.mf-vorsprung__label { min-width: 0; }
.mf-vorsprung__year {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.75vw, 1.6rem);
  line-height: 1.12;
  color: var(--heading-color);
}
.mf-vorsprung__text {
  display: block;
  margin-top: 5px;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  color: var(--text-200);
}
.mf-vorsprung__text strong {
  color: var(--heading-color);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4em;
}
.mf-vorsprung__frame--now .mf-vorsprung__photo { border-color: rgba(var(--mfv-accent-rgb), 0.55); }

/* ============================================================
   MF · S5 — Der Beweis (.mf-beweis) + echte Partner-Belege
   ============================================================ */
.mf-beweis {
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;
}
.mf-beweis__header { margin-bottom: clamp(30px, 4vw, 48px); }

/* Geteilter Reveal aller [data-mf-card] (Aufhänger + Belege) */
[data-mf-card] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.mf-beweis.is-revealed [data-mf-card] {
  opacity: 1;
  transform: none;
}

/* Karten = eigenständige DUNKEL-INSELN (Marie 2026-07-02): bleiben in
   BEIDEN Themes dunkel, damit die weißen Kunden-Logos + das Kundenfoto
   konsistent wirken (auf dem grauen Light-Band wie auf dem Dark-Band).
   Lokales Dark-Tokenpaket → alle token-getriebenen Kinder rendern dunkel;
   Hintergründe sind opak-dunkel (kein durchscheinendes Glas). */
.mf-foto,
.mf-statement {
  --text-100: rgba(255, 255, 255, 0.86);
  --text-200: rgba(255, 255, 255, 0.66);
  --text-300: rgba(255, 255, 255, 0.48);
  --text-400: rgba(255, 255, 255, 0.26);
  --heading-color: #ffffff;
  /* Akzente bewusst als Literal-Hex (kein var()) — die Kacheln sind in BEIDEN
     Themes dunkel, daher auf die Dark-Werte eingefroren statt theme-abhängig */
  --accent-hover: #4DA8DA;
  --silver-blue: #B3CCDF;
  --cyan-hi: #6BC4F0;
  /* em-Gradient auf Dunkel-Insel = helles Silber-Blau→Cyan (im Light-Theme
     wäre der Band-em navy/unlesbar auf Dunkel — Marie 2026-07-03) */
  --em-grad-a: #B3CCDF;
  --em-grad-b: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  --logo-mono-filter: brightness(0) invert(1);
}

/* Aufhänger: der erste Kunde (anonym, §6) — PLAIN Intro-Text (keine Box) */
.mf-beweis__intro {
  max-width: 62ch;
  margin: 0 auto clamp(24px, 3vw, 38px);
  text-align: center;
}
.mf-beweis__intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.25;
  color: var(--heading-color);
  margin: 0 0 12px;
}
.mf-beweis__intro-lead em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.mf-beweis__intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.28);
  vertical-align: middle;
}
.mf-beweis__intro-badge .icon { color: var(--accent-hover); }
.mf-beweis__intro-text {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
  margin: 0;
}

/* ------------------------------------------------------------
   Beweis-Wand: Raster aus FOTO-KACHELN — das echte Kundenfoto füllt
   die Karte, die Belege liegen unten auf einem dunklen Verlauf.
   Marie 2026-09-17: „alle Informationen auf dem Bild, damit man diesen
   Effekt von dem Drehen nicht mehr hat — die Bilder sollen immer zu
   sehen sein." Ersetzt die Flip-Karten vom 03.07. (Vorderseite Claim /
   Rückseite Foto + Peek-Animation + Klick-Flip in scripts.html — alles
   entfernt). Rezept = Foto-Panel mit Claim auf dunklem Verlauf von
   unten (Memory feedback_photo_placement_intentional).
   ------------------------------------------------------------ */
.mf-beweis__wall {
  list-style: none;
  margin: clamp(16px, 2.2vw, 26px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}
@media (min-width: 640px)  { .mf-beweis__wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mf-beweis__wall { grid-template-columns: repeat(3, 1fr); } }

/* Die Karte: Foto als Fläche, Text unten. Höher als die Flip-Karten
   (360–420), damit über dem Textblock ein Stück Foto FREI bleibt — der
   Block (Logo · Name · Kennzahl · zwei Zeilen · Tag) braucht bei 1440 px
   rund 300 px (GEMESSEN: Textkante bei 432 px Karte 126 px unter der
   Oberkante). Mit 430–500 px bleiben 130–170 px Foto frei. Grid-Stretch
   gleicht die Karten einer Reihe an. #0E1822 = Backplate, bis das Foto
   geladen ist (Light-Theme: Charcoal, s. u.). */
.mf-foto {
  position: relative;
  min-height: clamp(430px, 33vw, 500px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  background: #0E1822;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px -26px rgba(var(--shadow-rgb), 0.7);
}
/* Drei schmale Spalten (1000–1439 px): der Notiz-Text bricht dreizeilig,
   der Block wächst auf ~320 px — GEMESSEN blieben bei 1180/1280 px nur
   108–110 px Foto frei. Eine Stufe mehr Höhe hält ≥ 135 px. */
@media (min-width: 1000px) and (max-width: 1439px) {
  .mf-foto { min-height: 460px; }
}
.mf-foto__bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) {
  .mf-foto:hover .mf-foto__bild { transform: scale(1.04); }
}
/* Scrim auf surface-0-Ton (rgb 6,10,14) — projektweit etabliertes
   Scrim-Muster (§5a). Oben fast frei (das Foto soll zu sehen sein),
   unten dicht genug für 14-px-Text: Kontrast GEMESSEN, nicht geschätzt. */
.mf-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(6, 10, 14, 0.04) 0%,
    rgba(6, 10, 14, 0.18) 30%,
    rgba(6, 10, 14, 0.78) 58%,
    rgba(6, 10, 14, 0.94) 100%);
  pointer-events: none;
}
.mf-foto__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 12px);
  padding: clamp(20px, 2.4vw, 28px);
}
/* Kunden-Logo — auf Inhalt beschnitten (Bilder/beweis/logos/), einheitliche
   Höhe → alle Logos wirken gleich groß (Marie 2026-07-03). Weiß geflacht. */
.mf-foto__logo {
  height: clamp(32px, 4vw, 42px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  filter: var(--logo-mono-filter);
}
/* Nahezu quadratisches Emblem (Feucht) braucht mehr Höhe, um bei gleicher
   Zeilen-Höhe optisch so groß zu wirken wie die breiten Wortmarken */
.mf-foto__logo--emblem { height: clamp(46px, 5.4vw, 60px); }
.mf-foto__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.2;
  color: var(--heading-color);
}
/* Kern-Kennzahl — GRÖSSTES Element jeder Karte (wichtigste Info am größten,
   einheitlich wie Scheithauers Zähler; Marie 2026-07-03) */
.mf-foto__big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.05;
  color: var(--heading-color);
  overflow-wrap: break-word;
}
.mf-foto__count { white-space: nowrap; }
.mf-foto__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-100);   /* eine Stufe kräftiger als in der Flip-Karte (--text-200): der Grund ist ein Foto, kein flacher Charcoal */
  margin: 0;
}
.mf-foto__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}
.mf-foto__tag .icon { color: var(--accent-hover); }
@media (prefers-reduced-motion: reduce) {
  .mf-foto__bild { transition: none; }
  .mf-foto:hover .mf-foto__bild { transform: none; }
}
/* Statement-Kachel — schließt das Bento (6. Zelle, kein Foto/Flip).
   Akzent-Insel: dezenter Cyan-Tint, großes Display-Zitat mit em-Gradient. */
.mf-statement {
  position: relative;
  min-height: clamp(360px, 27vw, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2vw, 22px);
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 20% 100%, rgba(var(--glow-rgb), 0.20), transparent 62%),
    linear-gradient(158deg, #1B2A38, #0E1822);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px -26px rgba(var(--shadow-rgb), 0.7);
}
.mf-statement__mark {
  width: clamp(30px, 3.4vw, 40px);
  height: clamp(30px, 3.4vw, 40px);
  color: var(--accent-hover);
  opacity: 0.9;
}
.mf-statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.28;
  color: var(--heading-color);
  margin: 0;
}
.mf-statement__text em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em; /* §1.6 Glyph-Overshoot-Buffer (Italic-Gradient) */
  -webkit-box-decoration-break: clone; /* §1.6 — Gradient bei Zeilenumbruch nicht abschneiden */
          box-decoration-break: clone;
}

/* ============================================================
   MF · S6 — Die Vogelperspektive (.mf-vogel) + Netzwerk-Himmel
   ============================================================ */
.mf-vogel {
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;
}
.mf-vogel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .mf-vogel__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.mf-vogel__roles {
  list-style: none;
  margin: 0; /* Abstand kommt aus dem Spalten-gap (.mf-vogel__copy) */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mf-vogel__role {
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 13px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-200);
}
/* Vogelperspektive-Viz — Betriebs-Netzwerk mit wenigen feinen Daten-Kometen.
   Eigenständige DUNKEL-Insel (Marie 2026-07-02): der Himmel bleibt in BEIDEN
   Themes dunkel — auch wenn das Section-Band hell/grau ist. Feste dunkle
   Palette lokal (Weiß/Navy/Schwarz), theme-unabhängig; keine Cyan-/Glow-Tokens.
   JS baut Punkte/Bögen/Kometen (data-mf-sky), IO-getriggert, reduced-motion-safe. */
.mf-sky {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 105% at 50% 42%, #0B131B 0%, #060A0E 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  isolation: isolate;
  /* feste Dunkel-Palette (theme-unabhängig) */
  --v-stream: #ffffff;            --v-stream-glow: rgba(255, 255, 255, 0.28);
  --v-node: #e9f0f6;              --v-node-glow: rgba(255, 255, 255, 0.24);
  --v-struct: rgba(255, 255, 255, 0.045); --v-wave: rgba(255, 255, 255, 0.40);
  --v-ring: rgba(255, 255, 255, 0.24);    --v-core-glow: rgba(255, 255, 255, 0.26);
}
.mf-sky__field { position: absolute; inset: 0; z-index: 1; }
.mf-sky__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.mf-sky__net .arc-base { fill: none; stroke: var(--v-struct); stroke-width: 0.12; stroke-linecap: round; }
.mf-sky__net .mote { fill: var(--v-stream); }
.mf-sky__net .mote--glow { filter: drop-shadow(0 0 0.35px var(--v-stream-glow)); }

.mf-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--v-node);
  box-shadow: 0 0 5px 1px var(--v-node-glow);
  opacity: var(--o, 0.6);
}
.mf-node--far { filter: blur(0.3px); }
.mf-vogel.is-revealed .mf-node { animation: mf-node-breathe 4.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes mf-node-breathe {
  0%, 100% { opacity: calc(var(--o) * 0.6); transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: var(--o); transform: translate(-50%, -50%) scale(1); }
}
/* Spezifität (0,3,0) muss die .is-revealed-breathe-Regel (ebenfalls 0,3,0)
   per Quell-Reihenfolge schlagen — sonst überpulst breathe Ping/Roll. */
.mf-vogel.is-revealed .mf-node.is-discover {
  animation: none;
  opacity: 1;
  box-shadow: 0 0 9px 3px var(--v-stream-glow);
  transform: translate(-50%, -50%) scale(1.6);
  z-index: 6;
}
.mf-vogel.is-revealed .mf-node.is-roll { animation: mf-node-roll 1.1s ease-out; }
@keyframes mf-node-roll {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 8px 3px var(--v-stream-glow); }
  100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
}

.mf-sky__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: clamp(50px, 9vw, 70px);
  height: clamp(50px, 9vw, 70px);
  display: grid;
  place-items: center;
}
.mf-sky__core-ring { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--v-ring); }
.mf-sky__core-dot {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #23384D, #0B121A);
  box-shadow: 0 0 32px -8px var(--v-core-glow), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.mf-sky__logo { width: 50%; height: 50%; color: var(--white); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.mf-sky__core.is-pulse .mf-sky__core-dot { box-shadow: 0 0 42px -4px var(--v-core-glow), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.mf-sky__core.is-ignite .mf-sky__core-dot { box-shadow: 0 0 50px 2px var(--v-core-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18); transform: scale(1.05); }
.mf-sky__wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--v-wave);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

/* ---------- MF · Reduced-Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mf-core__dot,
  .mf-rays,
  .mf-core__flare,
  .mf-sky__wave { animation: none !important; }
  .mf-ray > i { animation: none !important; transform: scaleX(1) !important; }
  .mf-converge__ring { animation: none !important; display: none; }
  /* Meilenstein-Zeitstrahl (S2): Endzustand direkt. */
  .mf-vorsprung__fill { animation: none !important; transform: scaleY(1); }
  .mf-vorsprung__frame { transition: none !important; opacity: 1; transform: none; }
  .mf-vorsprung__node { animation: none !important; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--mfv-accent-rgb), 0.12); }
  .mf-vogel .mf-node { animation: none !important; }
  [data-mf-card] { transition: none; }
}

/* ============================================================
   ERFOLGSGESCHICHTEN — Galerie (/erfolgsgeschichten/) + Case-Study-
   Einzelseiten (/erfolgsgeschichten/[slug]/). Neu 2026-07-23,
   Copy-Paket ERFOLGSGESCHICHTEN.md + seiten/erfolgsgeschichten/*.
   Inspiration §1.12: estateanfrage.de (kennzahlengetriebene
   Case-Karten — Name + konkrete Zahl). Token-basiert, funktioniert
   in beiden Themes; Band-Zuordnungen im Light-Block am Datei-Ende.
   ============================================================ */

/* ---------- Galerie: Größen-Gruppen ---------- */
.eg {
  position: relative;
  padding-block: var(--section-py);
}

.eg__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.eg__title {
  font-size: var(--text-h2);
  line-height: 1.12;
  color: var(--heading-color);
  /* Lange Komposita („Betriebe") brechen sauber, keine
     Auto-Trennung mitten im Markenbegriff (§5a-Pattern). */
  hyphens: manual;
}

/* Gruppen-Einordnung („Wenn du noch alleine fährst …") — die
   Zitat-Zeile aus dem Paket als ruhige Editorial-Note. */
.eg__note {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid rgba(var(--glow-rgb), 0.45);
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
  max-width: 62ch;
}

.eg__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}

@media (min-width: 720px) {
  .eg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .eg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 2×2-Variante (z. B. Karriere „Warum hier": 4 gleichwertige Karten) */
  .eg__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Story-Karte (ganze Karte = Link) ---------- */
.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-decoration: none;
  color: inherit;
  /* Maus-Tilt Variante B (§0a) + Hover-Lift in EINER Transform-Kette */
  --mx: 0; --my: 0; --tilt-max: 6deg; --lift: 0px;
  transform-style: flat;
  transform:
    perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.story-card:hover {
  --lift: -3px;
  border-color: var(--glass-border-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 48px -28px rgba(var(--shadow-rgb), 0.5);
}

.story-card.is-tilting {
  transition: transform 140ms ease-out, border-color 200ms ease, box-shadow 200ms ease;
}

/* Die fette Zahl — das Herzstück der Karte (estateanfrage-Muster) */
.story-card__stat {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.18;
  color: var(--heading-color);
  letter-spacing: 0.01em;
}

.story-card__stat em {
  font-style: italic;
  background: linear-gradient(100deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* §1.6: Italic-Überstände nicht clippen */
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.story-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-100);
  letter-spacing: 0.01em;
}

.story-card__owner {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-300);
  letter-spacing: 0.04em;
}

.story-card__text {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-200);
  flex: 1;
}

.story-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-hover);
}

.story-card__more .icon {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.story-card:hover .story-card__more .icon {
  transform: translate(2px, -2px);
}

/* Reveal-Stagger (generischer [data-reveal]-Hook, Kinder via --i) */
.eg[data-reveal] .story-card {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), translate 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.eg[data-reveal].is-revealed .story-card {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .eg[data-reveal] .story-card {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .story-card {
    transform: none;
    transition: none;
  }
}

/* ---------- Case-Study-Einzelseite ---------- */
.cs-hero {
  position: relative;
  padding-block: clamp(48px, 6vw, 88px) var(--section-py-tight);
}

.cs-hero__inner {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.cs-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-300);
  text-decoration: none;
  transition: color 180ms ease;
}

.cs-back:hover { color: var(--accent-hover); }

.cs-back .icon {
  width: 14px;
  height: 14px;
}

.cs-hero__title {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  color: var(--heading-color);
  hyphens: manual;
}

.cs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-300);
}

.cs-hero__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(var(--glow-rgb), 0.7);
}

/* Die eine fette Zahl, die alles sagt */
.cs-claim {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--heading-color);
  max-width: 24ch;
}

.cs-claim em {
  font-style: italic;
  background: linear-gradient(100deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.cs-hero__sub {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--text-200);
  max-width: 62ch;
}

.cs-hero__photo {
  width: 100%;
  margin: var(--space-5) 0 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 60px -35px rgba(var(--shadow-rgb), 0.55);
}

.cs-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.cs-hero__photo figcaption {
  padding: 10px 14px 12px;
  font-size: 13px;
  color: var(--text-300);
}

/* Editorial-Bildreihe im Artikel: 2-3 Fotos nebeneinander, einheitlich
   auf 4:3 beschnitten (object-fit) — Unternehmens-Seiten waren zu
   textlastig (Marie 2026-07-23). Nutzt die .cs-hero__photo-Rahmen. */
.cs-photostrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  margin-top: var(--space-5);
}

.cs-photostrip--duo {
  grid-template-columns: repeat(2, 1fr);
}

.cs-photostrip .cs-hero__photo {
  margin: 0;
  border-radius: var(--radius-md);
}

.cs-photostrip .cs-hero__photo img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* Hochformat-Fotos im Strip: Kopf nicht abschneiden */
.cs-photostrip .cs-hero__photo--top img {
  object-position: 50% 18%;
}

@media (max-width: 640px) {
  .cs-photostrip,
  .cs-photostrip--duo {
    grid-template-columns: 1fr;
  }
}

/* Artikel-Körper: ruhige Lesespalte */
.cs-article {
  padding-block: var(--section-py-tight) var(--section-py);
}

.cs-article__inner {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 56px);
}

.cs-block h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--heading-color);
  margin-bottom: var(--space-4);
  hyphens: manual;
}

.cs-block p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--text-200);
  max-width: 68ch;
}

.cs-block p:last-child { margin-bottom: 0; }

/* Inline-Links im Artikel-Fließtext (Ratgeber-Artikel, Case-Studies,
   Legal-Seiten): UA-Default-Blau passt in keinem Theme — Akzent-Token
   analog .faq-item__answer a. */
.cs-block a {
  color: var(--accent-hover);
  text-decoration-color: rgba(var(--glow-rgb), 0.5);
  text-underline-offset: 3px;
}
.cs-block a:hover {
  text-decoration-color: var(--accent-hover);
}

/* Folge-Absatz direkt nach .cs-chips/.cs-quote im selben Block
   (ersetzt frühere Inline-margin-Ausnahme, §1.3). Selektor mit
   .cs-block davor, sonst gewinnt der margin-Shorthand aus
   `.cs-block p` (0,1,1) gegen die reine Klasse (0,1,0). */
.cs-block p.cs-block__note {
  margin-top: var(--space-4);
}

/* Timeline „Wie es lief — Schritt für Schritt" */
.cs-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cs-timeline li {
  position: relative;
  padding-left: clamp(22px, 2.4vw, 30px);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-200);
}

.cs-timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: rgba(var(--glow-rgb), 0.8);
  box-shadow: 0 0 0 4px rgba(var(--glow-rgb), 0.14);
}

.cs-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.62em + 13px);
  bottom: calc(-1 * var(--space-4) + 2px);
  width: 1px;
  background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.35), rgba(var(--glow-rgb), 0.08));
}

.cs-timeline strong {
  color: var(--text-100);
  font-weight: 700;
}

/* Ergebnis-Tabelle „Was am Ende rauskam" */
.cs-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}

.cs-table th,
.cs-table td {
  padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 24px);
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-200);
  line-height: 1.5;
}

.cs-table tr:last-child th,
.cs-table tr:last-child td { border-bottom: none; }

.cs-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-300);
}

.cs-table tbody th {
  font-weight: 600;
  color: var(--text-100);
  white-space: nowrap;
}

.cs-table td strong { color: var(--text-100); }

/* O-Ton des Inhabers */
.cs-quote {
  margin: 0;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid rgba(var(--glow-rgb), 0.65);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.cs-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--heading-color);
}

.cs-quote figcaption {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-300);
}

/* Chips „Was er bei uns macht" */
.cs-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.cs-chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-200);
  white-space: nowrap;
}

.cs-chips .icon {
  width: 13px;
  height: 13px;
  color: var(--accent-hover);
}

@media (max-width: 480px) {
  .cs-chips li { white-space: normal; }
}

/* Fließtext-Liste in Artikel-Blöcken (Ratgeber: „Die häufigsten
   Falschanrufe" etc.) */
.cs-list {
  list-style: disc;
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--text-200);
  max-width: 68ch;
}

.cs-list li::marker { color: var(--accent-hover); }

.cs-list strong { color: var(--text-100); }

/* „Kurz gesagt"-Zusammenfassung am Artikel-Ende (Ratgeber) —
   gleiche Karten-Optik wie das Inhaber-Zitat */
.cs-box {
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid rgba(var(--glow-rgb), 0.65);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.cs-box .cs-list { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════
   ZERTIFIZIERUNGEN — Nachweis-Seite (Neubau 2026-09-15, Design-Runde 2)

   Runde 1 ersetzte die cs-Lesebausteine (114 Woerter auf 1577 px, Siegel
   300 px in einer Box, PDF als drittes Kapitel). Runde 2 (Marie: „noch
   nicht schoen") behebt vier Struktur-Schwaechen der Runde 1:
     · drei Sektionen ohne eigenen Grund nach der Buehne (flach; gegen die
       Regel „nie drei helle Baender in Folge") -> Band-Folge D·W·G·D
     · keine Einblend-Bewegung ausser dem CTA -> Reveal-Stagger ueberall
     · Urkunde als flaches Rechteck -> Papier unter Lichtkegel, leicht
       aus der Ebene gedreht, richtet sich beim Zeigen auf
     · Pruefung als Text-links/Spur-rechts mit totem Raum -> Editorial-
       Split, drei Karten in einer Reihe, horizontale Audit-Spur

   VERBINDLICH (ci-design-system v2.7.1 Sektion 23; lokale Kopie v2.6.0
   kennt die Sektion NICHT): Nachweis-Seite = Groesse L = Kombimarke auf
   ihrer weissen Flaeche, auf dunklem Grund GEWOLLT (:1303-04); KEIN
   CSS-Filter auf dem Siegel (:1310); 600:299 halten. Die Buehne ist eine
   Karten-Dunkel-Insel (§0a): lokales Dark-Tokenpaket + opaker Grund,
   unabhaengig vom Light-Band-Scope. KEIN overflow:hidden auf der Buehne —
   sie traegt das H1 (§1.6); Lichtkegel und Korn sind absolut positioniert
   und laufen innerhalb der Sektion aus, es gibt nichts einzufassen.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Buehne ---------- */

.zert-stage {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-py);
  /* Dunkles Theme: NAVY-Insel aus den globalen Surface-Tokens — das
     Dark-Theme bleibt vollstaendig Navy (CI, §5a Charcoal-Zeile). */
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 55%, var(--surface-0) 100%);
  color: var(--text-200);
}

/* Helles Theme: Charcoal-Familie + lokales Dark-Tokenpaket (Karten-
   Dunkel-Insel-Rezept, §0a) — dieselben Werte wie die konsolidierte
   Insel-Regel, nur lokal, damit die Seite den geteilten Scope nicht anfasst. */
html[data-theme="light"] .zert-stage {
  --surface-0: #0E0F11;
  --surface-1: #17191D;
  --surface-2: #1F2226;
  --text-100: #FFFFFF;
  --text-200: rgba(255, 255, 255, 0.78);
  --text-300: rgba(255, 255, 255, 0.58);
  --heading-color: #FFFFFF;
  --em-grad-a: #B3CCDF;
  --em-grad-b: #4DA8DA;
  --accent-hover: #B3CCDF;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glow-rgb: 179, 204, 223;
  --shadow-rgb: 0, 0, 0;
  background: linear-gradient(168deg, #1F2226 0%, #17191D 55%, #131518 100%);
}

/* Lichtkegel hinter der Urkunde: das Papier liegt unter Licht, nicht auf
   einer Flaeche. Silver Blue in sehr geringer Deckkraft, breit weich —
   im Raum verortet, nicht an der Kante (kein Aurora-Beam, keine Bewegung). */
.zert-stage__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 52% at 74% 46%,
      rgba(var(--glow-rgb), 0.22) 0%,
      rgba(var(--glow-rgb), 0.08) 38%,
      transparent 70%),
    radial-gradient(ellipse 60% 40% at 12% 100%,
      rgba(var(--glow-rgb), 0.05) 0%,
      transparent 60%);
}

/* Feinkorn wie Hero/Footer — nimmt der Flaeche das „schwarze Plastik". */
.zert-stage__noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 220px 220px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.zert-stage > .container { position: relative; z-index: 1; }

.zert-stage__grid {
  display: grid;
  gap: clamp(36px, 5.5vw, 84px);
  align-items: center;
}

@media (min-width: 900px) {
  .zert-stage__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  }
}

.zert-stage__kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hover);
}

.zert-stage__title {
  margin: 0 0 var(--space-4);
  hyphens: manual;
}

.zert-stage__lead {
  margin: 0 0 clamp(30px, 3.8vw, 44px);
  max-width: 46ch;
  font-size: var(--text-lead);
  line-height: 1.8;
  color: var(--text-200);
}

/* ---------- Datenzeile: Label klein, Wert gross (Kennzahlen-Typografie) ---------- */

.zert-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin: 0 0 clamp(30px, 3.8vw, 44px);
  padding-top: clamp(22px, 2.8vw, 30px);
  position: relative;
  border-top: 1px solid var(--glass-border);
}

/* Kurzer Akzent-Strich auf der Hairline — die einzige Farbe im Textblock. */
.zert-daten::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--accent-hover);
}

.zert-daten__item { min-width: 0; }

.zert-daten dt {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-300);
}

.zert-daten dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.15;
  color: var(--heading-color);
  overflow-wrap: break-word;
}

/* ---------- Kombimarke (Groesse L) + vollstaendige Aussage ---------- */

.zert-marke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.2vw, 26px);
  margin: 0 0 clamp(28px, 3.4vw, 38px);
}

.zert-marke__bild {
  flex: none;
  width: clamp(168px, 17vw, 208px);   /* 600:299 halten, KEIN Filter (CI :1310) */
  height: auto;
}

.zert-marke__aussage {
  flex: 1 1 260px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-300);
}

/* ---------- Aktionen ---------- */

.zert-stage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.zert-stage__meta {
  font-size: 0.9rem;
  color: var(--text-300);
}

/* ---------- Die Urkunde als Papier ---------- */

.zert-urkunde {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  perspective: 1600px;
}

.zert-urkunde__link {
  display: block;
  outline-offset: 6px;
}

/* Eigener Fokus-Ring: der Browser-Default (Blau) misst auf der dunklen
   Buehne nur 2,88:1 — unter WCAG 1.4.11 (3:1). Silver Blue liegt bei >9:1. */
.zert-urkunde__link:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 6px;
  border-radius: 6px;
}

/* Leicht aus der Ebene gedreht (Blatt auf dem Tisch, nicht Scan im Archiv);
   beim Zeigen richtet es sich auf. Schatten in zwei Lagen: Kontakt + Raum. */
.zert-urkunde__papier {
  display: block;
  border-radius: 3px;
  transform: rotateY(-8deg) rotateX(2.5deg);
  transform-origin: 60% 50%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 1px 1px rgba(var(--shadow-rgb), 0.5),
    0 10px 24px rgba(var(--shadow-rgb), 0.45),
    0 40px 90px -20px rgba(var(--shadow-rgb), 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  will-change: transform;
}

.zert-urkunde__link:hover .zert-urkunde__papier,
.zert-urkunde__link:focus-visible .zert-urkunde__papier {
  transform: rotateY(0deg) rotateX(0deg) translateY(-6px);
  box-shadow:
    0 1px 1px rgba(var(--shadow-rgb), 0.5),
    0 16px 32px rgba(var(--shadow-rgb), 0.5),
    0 56px 110px -24px rgba(var(--shadow-rgb), 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(var(--glow-rgb), 0.35);
}

.zert-urkunde__bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.zert-urkunde__bu {
  margin: var(--space-4) 0 0;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-300);
}

/* ---------- Was geprueft wurde ---------- */

.zert-pruefung {
  padding-block: var(--section-py);
}

/* Editorial-Split: H2 links, der Kundensatz rechts als Display-Zeile */
.zert-pruefung__kopf {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
  margin-bottom: clamp(30px, 3.8vw, 48px);
}

@media (min-width: 900px) {
  .zert-pruefung__kopf { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.zert-pruefung__kopf h2 { margin: 0; max-width: 14ch; hyphens: manual; }

.zert-pruefung__satz {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  color: var(--heading-color);
}

.zert-pruefung__vorsatz {
  margin: 0 0 clamp(26px, 3.2vw, 36px);
  max-width: 64ch;
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--text-200);
}

/* Die drei vorgelegten Faelle: eine Reihe, Nummer als Display-Ziffer */
.zert-faelle {
  list-style: none;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
}

@media (min-width: 760px) {
  .zert-faelle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.zert-faelle__punkt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.zert-faelle__punkt:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--glow-rgb), 0.35);
}

.zert-faelle__nr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  color: var(--accent-hover);
  margin-bottom: 6px;
}

.zert-faelle__titel {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  line-height: 1.4;
  color: var(--heading-color);
}

.zert-faelle__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-200);
}

/* Horizontale Audit-Spur: Linie von Disc-Mitte zu Disc-Mitte (Muster
   .bsys-cycle), erledigt gefuellt, kuenftig hohl, Laufzeitende als Ring. */
.zert-spur {
  --disc: 12px;
  list-style: none;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
  display: grid;
  gap: 0;
}

@media (min-width: 760px) {
  .zert-spur { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zert-spur__punkt {
  position: relative;
  padding: calc(var(--disc) + 16px) clamp(8px, 1.5vw, 20px) 0 0;
  min-width: 0;
}

/* Verbindungslinie: von der eigenen Disc-Mitte bis zur naechsten */
.zert-spur__punkt::before {
  content: "";
  position: absolute;
  top: calc(var(--disc) / 2);
  left: calc(var(--disc) / 2);
  width: 100%;
  height: 1px;
  background: var(--glass-border);
}

.zert-spur__punkt:last-child::before { display: none; }

.zert-spur__punkt--done + .zert-spur__punkt--done::before,
.zert-spur__punkt--done::before {
  background: linear-gradient(90deg, var(--accent-hover), var(--glass-border));
}

.zert-spur__punkt--done + .zert-spur__punkt--done ~ .zert-spur__punkt::before { }

.zert-spur__punkt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  box-sizing: border-box;
}

.zert-spur__punkt--done::after {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.zert-spur__punkt--ziel::after {
  border-color: rgba(var(--glow-rgb), 0.6);
  box-shadow: 0 0 0 4px rgba(var(--glow-rgb), 0.12);
}

.zert-spur__jahr {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  color: var(--heading-color);
}

.zert-spur__was {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-200);
}

/* Mobil: senkrechte Spur mit Linie links */
@media (max-width: 759px) {
  .zert-spur { gap: 0; padding-left: 0; }
  .zert-spur__punkt {
    padding: 0 0 clamp(20px, 3vw, 28px) calc(var(--disc) + 16px);
  }
  .zert-spur__punkt::before {
    top: calc(var(--disc) / 2);
    left: calc(var(--disc) / 2);
    width: 1px;
    height: 100%;
  }
  .zert-spur__punkt:last-child { padding-bottom: 0; }
  .zert-spur__punkt::after { top: 4px; }
}

.zert-pruefung__schluss {
  display: grid;
  gap: clamp(16px, 3vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--glass-border);
}

@media (min-width: 760px) {
  .zert-pruefung__schluss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.zert-pruefung__haltung {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--heading-color);
}

.zert-pruefung__hinweis {
  margin: 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-200);
}

/* ---------- Nachweis-Reihe ---------- */

.zert-belege { padding-block: var(--section-py); }

.zert-belege__kopf {
  min-width: 0;
  margin-bottom: clamp(30px, 3.8vw, 44px);
}

.zert-belege__titel { margin: 0 0 var(--space-3); max-width: 18ch; hyphens: manual; }

.zert-belege__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--text-200);
}

.zert-belege__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: clamp(28px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zert-belege__reihe li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

/* Drei Formatstufen — gleiche OPTISCHE Groesse, nicht gleiche Pixelhoehe. */
.zert-belege__reihe img { display: block; width: auto; height: 86px; object-fit: contain; }
.zert-belege__quer img   { height: 56px; }
.zert-belege__wimpel img { height: 102px; }

.zert-belege__reihe span {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--text-200);
}

/* ---------- Reveal-Stagger (generischer [data-reveal]-Hook) ---------- */

.zert-stage[data-reveal] :is(.zert-stage__kicker, .zert-stage__title, .zert-stage__lead, .zert-daten, .zert-marke, .zert-stage__actions),
.zert-pruefung[data-reveal] :is(.zert-pruefung__kopf > *, .zert-pruefung__vorsatz, .zert-faelle__punkt, .zert-spur, .zert-pruefung__schluss),
.zert-belege[data-reveal] :is(.zert-belege__kopf > *, .zert-belege__reihe > li) {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.09s),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.09s);
}

/* Die Urkunde kommt von rechts und dreht sich in ihre Ruhelage */
.zert-stage[data-reveal] .zert-urkunde {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.zert-stage[data-reveal].is-revealed :is(.zert-stage__kicker, .zert-stage__title, .zert-stage__lead, .zert-daten, .zert-marke, .zert-stage__actions, .zert-urkunde),
.zert-pruefung[data-reveal].is-revealed :is(.zert-pruefung__kopf > *, .zert-pruefung__vorsatz, .zert-faelle__punkt, .zert-spur, .zert-pruefung__schluss),
.zert-belege[data-reveal].is-revealed :is(.zert-belege__kopf > *, .zert-belege__reihe > li) {
  opacity: 1;
  transform: none;
}

/* Die Faelle-Karten tragen einen Hover-Transform — der lebt in der
   is-revealed-Regel (Reveal-Kollision, §0a), sonst schlaegt transform:none. */
.zert-pruefung[data-reveal].is-revealed .zert-faelle__punkt:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .zert-stage[data-reveal] :is(.zert-stage__kicker, .zert-stage__title, .zert-stage__lead, .zert-daten, .zert-marke, .zert-stage__actions, .zert-urkunde),
  .zert-pruefung[data-reveal] :is(.zert-pruefung__kopf > *, .zert-pruefung__vorsatz, .zert-faelle__punkt, .zert-spur, .zert-pruefung__schluss),
  .zert-belege[data-reveal] :is(.zert-belege__kopf > *, .zert-belege__reihe > li) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .zert-urkunde__papier { transform: none; transition: none; }
  .zert-faelle__punkt { transition: none; }
}

/* ---------- Band-Folge D · W · G · D (nur helles Theme) ----------
   Die Seite ist bewusst NICHT im geteilten Light-Band-Scope (ruhige
   Nachweis-Seite, keine Parallel-Session-Kollision im grossen Block) —
   die Baender stehen hier lokal, mit den kanonischen Werten des Scopes. */

html[data-theme="light"] .page-zertifizierungen .zert-pruefung {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}

html[data-theme="light"] .page-zertifizierungen .zert-belege {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}

/* Weisse Karten auf dem weissen Band (Rezept .maweg__card) */
html[data-theme="light"] .page-zertifizierungen .zert-faelle__punkt {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}

html[data-theme="light"] .page-zertifizierungen .zert-faelle__punkt:hover {
  border-color: rgba(var(--shadow-rgb), 0.18);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 22px 48px -22px rgba(var(--shadow-rgb), 0.24);
}

/* Hohle Discs der Spur brauchen auf Weiss einen sichtbaren Grund */
html[data-theme="light"] .page-zertifizierungen .zert-spur__punkt::after {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.22);
}
html[data-theme="light"] .page-zertifizierungen .zert-spur__punkt--done::after {
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] .page-zertifizierungen .zert-spur__punkt::before {
  background: rgba(var(--shadow-rgb), 0.14);
}
html[data-theme="light"] .page-zertifizierungen .zert-spur__punkt--done::before {
  background: linear-gradient(90deg, var(--accent), rgba(var(--shadow-rgb), 0.14));
}
html[data-theme="light"] .page-zertifizierungen .zert-faelle__nr { color: var(--accent); }
html[data-theme="light"] .page-zertifizierungen .zert-pruefung__schluss { border-top-color: rgba(var(--shadow-rgb), 0.12); }

/* Das CTA-Band als Dunkel-Insel — Rezept der konsolidierten Insel-Regel,
   lokal kopiert, damit die Seite den geteilten Scope nicht anfasst. */
html[data-theme="light"] .page-zertifizierungen .mapc {
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --accent-hover: #4DA8DA;
  --cyan-hi: #6BC4F0;
  --silver-blue: #B3CCDF;
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --logo-mono-filter: brightness(0) invert(1);
  --focus-ring: #FFFFFF;
  background: linear-gradient(180deg, #1F2226 0%, #131518 100%);
}

/* Dunkles Theme: die Nachweis-Reihe eine Stufe abgesetzt, sonst laeuft die
   Seite ab der Buehne in einem Ton bis zum Footer. */
html[data-theme="dark"] .page-zertifizierungen .zert-belege,
html:not([data-theme="light"]) .page-zertifizierungen .zert-belege {
  background: var(--surface-1);
}

/* Artikel-Meta-Zeile (Lesezeit) */
.cs-hero__note {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-300);
}

/* Abbinder unter einem eg__grid (z. B. Karriere-Rollen: „Du findest
   dich in keiner Rolle genau wieder?") */
.eg__foot {
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid rgba(var(--glow-rgb), 0.45);
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
  max-width: 62ch;
}

/* ============================================================
   WEBSITE-SEITE (/leistungen/website/) — Sektions-Visuals.
   Überarbeitung 2026-07-24 (Marie: „zu viel Text, keine Grafiken;
   grau-weisse Bänder hintereinander"). Baut die reinen Lese-/Text-
   sektionen zu bebilderten Sektionen um — mit CSS-Geräte-Grafiken
   (kein Foto-Material nötig), im etablierten dunklen Panel-Idiom des
   Sofort-Hilfe-Widgets (.kspez__panel). Reveal via generischem
   [data-reveal]-Hook (Kinder staffeln über --i).
   Geräte-Panels sind bewusst in BEIDEN Themes dunkel (§5a-Ausnahme
   wie .kspez__panel/.bsys-app): --wsd-* + Gradient/Border sind KEINE
   Theme-Tokens. Dieselbe feste Dunkel-Konvention nutzen auch
   .ws-system__hub (dunkle „Deine Seite"-Kachel) und .ws-callframe
   außerhalb der .ws-panel-Basisklasse.
   ============================================================ */

/* ---- S1 · Hero Device-Duo (Laptop + schwebendes Phone) ----
   Talenthafen-inspiriert (§1.12, Marie 2026-07-27): die rechte
   Hero-Spalte zeigt die eigene Arbeit auf Geräten. Seit 2026-09-04
   (Marie: „reales Mockup, MacBook + iPhone, Deckel geht seitwärts auf
   und dreht nach vorn, dann wird das Handy eingeblendet") sind die
   Geräte CSS-3D-Mockups (.mbk* / .iph*, s. u.) mit Aufklapp-
   Choreografie; Gehäuse = feste Hardware-Farben in BEIDEN Themes
   (§5a-Geräte-Ausnahme wie .ws-panel); Screens = seit 18.09.2026 drei
   echte Kundenseiten im Wechsel (Bilder/website/screen-kunde-*.webp,
   Block „Hero-Screens im Wechsel"; davor die fiktive Musterseite). Der Reveal
   kommt vom generischen [data-reveal]-Hook auf .ws-hero__viz — die
   Choreografie hängt an .is-revealed, nicht an data-wsr. */

/* Linksbündige Varianten der geteilten mf-hero-Bausteine
   (Muster .kanal-hero__*, §0a) */
.ws-hero .mf-hero__actions { justify-content: flex-start; }
/* Sub-CTA + Belege sind im Website-Page-File seit 2026-09-04 auskommentiert
   (Marie: „links zu viele Informationen") — die zwei Regeln bleiben als
   Linksbündig-Paar für die Reaktivierung stehen (Guardian-Hinweis). */
.ws-hero .mf-hero__subcta { margin-inline: 0; }
.ws-hero .mf-creds { justify-content: flex-start; margin-inline: 0; }

.ws-hero__viz {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  /* Raum, in den das Phone unter die Laptop-Kante „hängt" */
  padding-bottom: clamp(26px, 3.4vw, 46px);
}
.ws-hero__glow {
  position: absolute;
  inset: -6% -10% 0;
  background: radial-gradient(closest-side at 55% 45%, rgba(var(--glow-rgb), 0.18), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

/* ---- MacBook + iPhone als 3D-Mockups mit Aufklapp-Choreografie
   (Marie 2026-09-04: „ein reales Mockup, MacBook und iPhone — das
   MacBook geht seitwärts auf und dreht sich nach vorne, bis es ganz
   auf ist, dann wird das Handy eingeblendet"; 2026-09-07: „noch nicht
   real genug, und ich will ein DUNKLES MacBook — orientier dich an der
   Apple-Seite"). Reines CSS-3D, keine Fremd-Bilder (Lizenz), keine
   fremde Marke — Gehäuse aus Verläufen, Screens = die Muster-Kundenseite.
   Vorbild Apple-Produktseite (§1.12): Space Black, Rim-Light auf den
   Alu-Kanten, leuchtendes Display mit Lichtschein auf dem Deck, Einzel-
   tasten, Lautsprecher-Mesh, sichtbare Materialstärke mit Ports.
   Alle Gehäuse-Farben sind feste Hardware-Töne in BEIDEN Themes
   (§5a-Geräte-Ausnahme wie .ws-panel); das Rim-Light ist Silver Blue
   (CI) mit niedriger Deckkraft — es trennt den schwarzen Körper vom
   Charcoal-Hero.
   Geometrie: die Bühne .mbk-scene liefert perspective; .mbk ist der
   Körper (preserve-3d) und trägt Kamera-Neigung + die Seitdrehung
   (--mbk-yaw); der Deckel .mbk__lid dreht um seine UNTERKANTE (Scharnier,
   --mbk-open: −90deg = zugeklappt, flach auf dem Deck; 8deg = offen mit
   leichter Rücklehne — Vorzeichen empirisch bestimmt, s. .mbk-Kommentar).
   Der Deckel hat seit 2026-09-07 MATERIALSTÄRKE: Vorderseite bei z=0,
   Rückseite bei z=−(--mbk-lid-t), dazwischen vier Kantenflächen; die
   Basis liegt per rotateX(90deg) in der Tischebene, ragt zum Betrachter
   und hängt ihre Gehäusehöhe (--mbk-base-t) als Vorderkante + zwei
   Seitenflächen nach unten. Vorzeichen der Kantenflächen (Lehre R3:
   nie herleiten, immer rendern): im Deckel-Frame liegt „hinten" bei
   −z → obere Kante rotateX(+90), untere rotateX(−90), linke rotateY(−90),
   rechte rotateY(+90); im Basis-Frame liegt „unten" bei −z → Vorderkante
   rotateX(−90), linke Seite rotateY(−90), rechte rotateY(+90) — jeweils
   um die GEHÄUSEKANTE gedreht (Streifen erst per translate nach außen,
   Origin auf der inneren Streifenkante), sonst schwebt die Fläche um
   ihre eigene Stärke neben dem Körper und zeigt mit der Rückseite
   zum Betrachter (backface-hidden → unsichtbar; die Ports standen
   als Klötze neben dem Deck).
   Die Choreografie läuft über die Custom Properties in @keyframes
   (registrierte @property-Werte interpolieren; ohne @property-Support
   liefert die gewinnende .is-revealed-Regel die Endwerte als Plain-
   Deklaration, s. u.). */
.ws-hero__laptop {
  position: relative;
  /* mittig in der Spalte (Marie 2026-09-04 R3: „dann, dass es mittig ist") —
     das Phone überlappt unten links, ohne dass der Laptop ausweicht */
  margin-inline: auto;
}
.mbk-scene {
  position: relative;
  width: 100%;
  /* Deckel (≈0,6 W) + die von oben gesehene Tischfläche → Layout-Höhe */
  aspect-ratio: 16 / 13.4;
  perspective: 2400px;
  perspective-origin: 50% 22%;
}
.mbk {
  /* Kamera 20° von oben (R3, Marie: „die Tastatur ist unter dem MacBook"
     — VORZEICHEN EMPIRISCH per Vier-Varianten-Render bestimmt: negatives
     rotateX = Blick von oben, die Basis mit rotateX(+90deg) ragt in
     derselben Drehrichtung wie der zugeklappte Deckel zum Betrachter;
     mit +24°/−90° lag das Deck hinter dem Scharnier und verdeckte den
     unteren Screen-Rand); der offene Deckel lehnt 8° nach hinten */
  --mbk-tilt: -20deg;
  --mbk-yaw: 0deg;
  --mbk-open: 8deg;
  --mbk-x: 0%;
  /* 86 % + zentriert: die perspektivisch nähere Basis projiziert breiter
     als der Deckel und ragte sonst seitlich aus der Bühne */
  --mbk-w: 86%;
  /* Materialstärken (Space-Black-Body ≈ 4,4 % der Breite = Deckel + Basis) */
  --mbk-lid-t: clamp(4px, 0.55vw, 7px);
  --mbk-base-t: clamp(10px, 1.25vw, 16px);
  --mbk-r: clamp(10px, 1.3vw, 16px);        /* Deckel-Ecken */
  --mbk-r-base: clamp(7px, 0.9vw, 11px);   /* Deck-Ecken — klein, weil die
                                              senkrechten Seitenflächen eben
                                              sind und an der Front um den
                                              Radius enden (kein Keil) */
  /* Space-Black-Palette (feste Hardware-Töne, §5a) */
  --mbk-alu-hi: #3A3E45;
  --mbk-alu: #24272C;
  --mbk-alu-lo: #15171A;
  --mbk-rim: rgba(179, 204, 223, 0.26);
  /* helle Fase auf den zum Licht stehenden Kanten (Deckel-Oberkante,
     Deck-Vorderkante) — ein Wert, zwei Deckkräfte via color-mix */
  --mbk-hi: rgba(200, 214, 226, 0.55);
  /* Deck-Lichtstufen, GEMESSEN am Foto-Mockup (Marie 2026-09-07,
     Bilder/Mockups/230254436…psd): hinten links fällt das Deck fast ins
     Schwarz, vorn rechts steht helles Aluminium — dieses Gefälle ist der
     Hauptgrund, warum das Foto plastisch wirkt und eine flache Fläche nicht.
     Referenzwerte: Scharnier #020202 · Handballen links #343A41 ·
     Trackpad #555A64 · vorn mitte #727B85 · rechts #7F858C */
  --mbk-deck-a: #16191D;
  --mbk-deck-b: #2A2F35;
  --mbk-deck-c: #4C525A;
  --mbk-deck-d: #767D86;
  --mbk-deck-e: #7D848D;
  position: absolute;
  top: 0; left: 7%;
  width: var(--mbk-w);
  aspect-ratio: 16 / 11.05;   /* Deckel-Höhe inkl. Rahmen */
  transform-style: preserve-3d;
  transform: translateX(var(--mbk-x)) rotateX(var(--mbk-tilt)) rotateY(var(--mbk-yaw));
  transform-origin: 50% 100%;
}
/* Deckel */
.mbk__lid {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateX(var(--mbk-open));
}
.mbk__lid-front,
.mbk__lid-back {
  position: absolute;
  inset: 0;
  border-radius: var(--mbk-r);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Vorderseite = schwarze Display-Einfassung mit schmaler Alu-Fase und
   Rim-Light; unten etwas breiter (Bezel-Verhältnis MacBook Pro) */
.mbk__lid-front {
  --bz-x: 2.6%;
  --bz-t: 2.6%;
  --bz-b: 4.2%;
  padding: var(--bz-t) var(--bz-x) var(--bz-b);
  /* die obere Rahmenkante steht zum Licht und liegt im Foto bei #2A2A2A,
     nicht auf Schwarz — ohne diesen Ansatz wirkt der Deckel wie ausgestanzt */
  background: linear-gradient(180deg, #292C31 0%, #14171B 2.4%, #080A0D 7%, #050608 22%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 0 2px #0B0D10,
    inset 0 0 0 3px var(--mbk-alu-hi),
    inset 0 0 0 4px var(--mbk-alu-lo),
    0 0 0 1px var(--mbk-rim);
  transform: translateZ(0);
}
/* Glas-Reflex über dem Display: schräges Studio-Streiflicht + leiser
   Rand-Abfall (Apple-Render-Idiom) */
.mbk__lid-front::after {
  content: "";
  position: absolute;
  inset: var(--bz-t) var(--bz-x) var(--bz-b);
  border-radius: clamp(3px, 0.4vw, 6px);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 22%, transparent 42%),
    linear-gradient(180deg, transparent 88%, rgba(0, 0, 0, 0.10));
  pointer-events: none;
}
.mbk__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(3px, 0.4vw, 6px);
  background: #050608;
  /* Display ist im Start-Frame AUS (schwarz) und wacht beim Aufklappen
     auf — s. Choreografie (mbk-wake) */
  opacity: 0;
}
.mbk__notch {
  position: absolute;
  top: var(--bz-t);
  left: 50%;
  transform: translateX(-50%);
  width: 11%;
  height: 2.6%;
  border-radius: 0 0 6px 6px;
  background: #050608;
  z-index: 1;
}
/* Rückseite = Space-Black-Aluminium mit Studio-Reflex */
.mbk__lid-back {
  transform: rotateY(180deg) translateZ(var(--mbk-lid-t));
  background:
    radial-gradient(70% 55% at 30% 20%, rgba(255, 255, 255, 0.10), transparent 70%),
    linear-gradient(155deg, var(--mbk-alu-hi) 0%, var(--mbk-alu) 38%, var(--mbk-alu-lo) 64%, #2B2F35 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--mbk-rim);
}
.mbk__lid-back::after {
  /* dezente Marken-Fläche mittig (keine fremde Marke), im Body-Ton */
  content: "";
  position: absolute;
  top: 44%; left: 50%;
  width: 9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.22) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Deckel-Kanten (Materialstärke) — vier schmale Alu-Flächen zwischen
   z=0 (Front) und z=−t (Rückseite), um den Eckradius eingerückt */
.mbk__lid-edge {
  position: absolute;
  background: linear-gradient(180deg, var(--mbk-alu-hi), var(--mbk-alu-lo));
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.mbk__lid-edge--t,
.mbk__lid-edge--b {
  left: var(--mbk-r); right: var(--mbk-r);
  height: var(--mbk-lid-t);
}
.mbk__lid-edge--t {
  top: 0;
  transform-origin: 50% 100%;
  transform: translateY(-100%) rotateX(90deg);
  /* Oberkante = beim zugeklappten Gerät die Vorderkante des Deckels:
     helle Fase oben (Rim), dunkel nach hinten */
  background: linear-gradient(180deg, var(--mbk-hi), var(--mbk-alu) 30%, var(--mbk-alu-lo));
}
.mbk__lid-edge--b {
  top: 100%;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, var(--mbk-alu-lo), #0F1113);
}
.mbk__lid-edge--l,
.mbk__lid-edge--r {
  top: var(--mbk-r); bottom: var(--mbk-r);
  width: var(--mbk-lid-t);
  background: linear-gradient(90deg, var(--mbk-alu-hi), var(--mbk-alu-lo));
}
.mbk__lid-edge--l {
  left: 0;
  /* Drehachse = die Deckelkante (rechte Kante des nach außen
     verschobenen Streifens), Normale zeigt nach außen */
  transform-origin: 100% 50%;
  transform: translateX(-100%) rotateY(-90deg);
}
.mbk__lid-edge--r {
  right: 0;
  transform-origin: 0 50%;
  transform: translateX(100%) rotateY(90deg);
}
/* Basis: Tischebene, ragt zum Betrachter. Tiefe = Deckelhöhe —
   Begründung und Vorgeschichte stehen an `height` weiter unten. */
.mbk__base {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  /* Tiefe = Deckel-Höhe. Ein echtes Notebook hat für Deckel und Unterteil
     DIESELBE Grundfläche — mit den früheren 64 % ragte der zugeklappte
     Deckel sichtbar über das Unterteil hinaus (Marie 2026-09-07:
     „die Tastatur ist kürzer als die Oberseite"). Die Tiefenwirkung
     regelt allein die Kamera-Neigung, nicht eine gestauchte Grundfläche. */
  height: 100%;
  transform-origin: 50% 0;
  /* 5 px unter dem Scharnier: der zugeklappte Deckel liegt so sauber ÜBER
     dem Deck (bei 1 px flimmerte das Tastenfeld durch den Deckel) */
  transform: translateY(5px) rotateX(90deg);
  transform-style: preserve-3d;
  border-radius: 0 0 var(--mbk-r-base) var(--mbk-r-base);
  background:
    /* Scharnier-Schatten — im Foto läuft das Deck direkt unter dem Deckel
       fast auf Schwarz zu */
    linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.42) 2.2%, rgba(0, 0, 0, 0.10) 5.8%, transparent 10.5%),
    /* Glanzfeld vorn rechts (Licht von vorn oben rechts, wie im Mockup) */
    radial-gradient(118% 92% at 84% 114%, rgba(220, 232, 245, 0.30) 0%, rgba(220, 232, 245, 0.11) 40%, transparent 70%),
    /* Grundgefälle diagonal: hinten links dunkel → vorn rechts hell.
       Die helle Stufe muss früh kommen — am 100-%-Stop läge sie in der
       Ecke außerhalb des sichtbaren Decks (gemessener Fehler der 1. Runde:
       rechts nur lum 66 statt 131). */
    linear-gradient(124deg, var(--mbk-deck-a) 0%, var(--mbk-deck-b) 25%, var(--mbk-deck-c) 54%, var(--mbk-deck-d) 80%, var(--mbk-deck-e) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px var(--mbk-rim);
}
/* Scharnier-Schlitz */
.mbk__base::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 0;
  height: 3.2%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #050608, #1A1D21);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Lichtschein des Displays auf dem Deck — wird mit dem Display-Wake
   eingeblendet (mbk-spill) */
.mbk__base::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(75% 55% at 50% 0%, rgba(214, 230, 245, 0.16), rgba(214, 230, 245, 0.05) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
/* Kein Lautsprecher-Gitter: im Referenz-Mockup (MacBook Air, Marie
   2026-09-07) ist neben der Tastatur keine abgesetzte Gitterzone zu sehen —
   eine gezeichnete Perforation las sich auf dem aufgehellten Deck sofort
   als heller Fremdkörper. */
/* Tastatur — Einzeltasten als gekachelte SVG-Keycaps über schwarzem
   Tastenfeld (Keycap: #16181C, Oberkante 8 % Weiß = Bevel) */
.mbk__fn,
.mbk__keys,
.mbk__arrows {
  position: absolute;
  /* Foto-Referenz: Tastenkappe UND Zwischenraum liegen bei #020202 — die
     Tasten treten nicht über hellere Fugen hervor, sondern allein über die
     schmale Lichtkante an ihrer Oberkante und den Schatten darunter. Ein
     helles Fugenraster (der Vorgänger) liest sich sofort als Zeichnung. */
  background-color: #050608;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='2' y='2' width='36' height='36' rx='5' fill='%23191C21'/%3E%3Crect x='3' y='2.2' width='34' height='1.7' rx='.85' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='2.6' y='2.6' width='1.3' height='34' rx='.65' fill='%23ffffff' fill-opacity='.05'/%3E%3Crect x='3' y='36.2' width='34' height='1.6' rx='.8' fill='%23000000' fill-opacity='.7'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* Licht-Overlay über dem Tastenfeld: links/hinten schluckt es Licht,
   rechts fängt die Reihe einen Hauch davon (Foto) */
.mbk__keys::before,
.mbk__fn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.06) 45%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
}
.mbk__fn {
  left: 10%; right: 10%;
  top: 4%;
  height: 5%;
  border-radius: 3px 3px 0 0;
  background-size: 6.9% 100%;
}
.mbk__keys {
  left: 10%; right: 10%;
  /* Anteile am Deck gemessen am Referenzfoto: Tastenfeld 4–45 % */
  top: 9%;
  height: 36%;
  border-radius: 0 0 3px 3px;
  background-size: calc(100% / 14.5) 20%;
}
/* Leertaste: eine breite Keycap über der letzten Reihe */
.mbk__space {
  position: absolute;
  left: 30.5%; right: 34.5%;
  top: calc(9% + 36% * 0.8);
  height: calc(36% * 0.2);
  padding: 0.35% 0.4%;
  background: #08090B;
}
.mbk__space::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 8%, transparent 8%), #16181C;
}
/* Pfeiltasten: umgekehrtes T aus halbhohen Tasten unten rechts */
.mbk__arrows {
  right: 10%;
  top: calc(9% + 36% * 0.8);
  width: calc(80% / 14.5 * 3);
  height: calc(36% * 0.2);
  background-size: 33.34% 50%;
  background-position: 0 100%;
  border-radius: 0 0 3px 0;
}
.mbk__arrows::before {
  /* die obere Pfeil-Taste in der Mitte */
  content: "";
  position: absolute;
  left: 33.34%; top: 0;
  width: 33.34%; height: 50%;
  background: inherit;
  background-size: 100% 100%;
  background-position: 0 0;
}
.mbk__pad {
  position: absolute;
  left: 31%; right: 31%;
  /* Trackpad 50–82 % der Deck-Tiefe (Referenzfoto) */
  top: 50%;
  height: 32%;
  border-radius: 5px;
  /* im Foto ist das Trackpad eine eigene, glattere Fläche: dunkler als der
     belichtete Handballen rechts, heller als der Handballen links */
  background: linear-gradient(150deg, #3C424A 0%, #4E545D 52%, #5E656E 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Vorderkante der Basis (senkrechte Fläche zum Betrachter) */
.mbk__edge {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: calc(var(--mbk-base-t) * 0.72);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  border-radius: 0 0 var(--mbk-r-base) var(--mbk-r-base);
  /* die Vorderkante trägt im Foto oben eine schmale helle Fase und fällt
     dann schnell ab — als hohe, kontrastreiche Fläche liest sie sich wie
     eine zweite Platte unter dem Gerät */
  background: linear-gradient(180deg, #6E757E 0%, #3D434A 22%, #23272C 62%, #14171A 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mbk-hi) 70%, transparent);
}
.mbk__edge::after {
  /* Daumen-Mulde */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 13%;
  height: 38%;
  border-radius: 0 0 999px 999px;
  background: rgba(3, 4, 6, 0.42);
}
/* Seitenflächen der Basis — mit Ports (links MagSafe + 2× Thunderbolt,
   rechts HDMI + SD + Klinke) als dunkle Schlitze */
.mbk__side {
  position: absolute;
  top: 0;
  bottom: var(--mbk-r-base);   /* endet an der runden Front-Ecke */
  width: var(--mbk-base-t);
  /* Seitenlicht: heller als die Vorderkante, sonst versinkt die Fläche
     im Bodenschatten und die Ports lesen sich als angesetzte Klötze */
  background: linear-gradient(90deg, #3C4047, #2B2E34 55%, #1E2126);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.mbk__side--l {
  left: 0;
  /* Drehachse = die Gehäusekante (s. Deckelkanten): erst nach außen
     schieben, dann um die innere Streifenkante nach unten klappen */
  transform-origin: 100% 50%;
  transform: translateX(-100%) rotateY(-90deg);
  /* Ports als Schlitze quer zur Fläche (Fläche steht hochkant im Frame:
     „oben" = hinten am Gerät) */
  background-image:
    linear-gradient(90deg, transparent 32%, #0A0B0D 32% 68%, transparent 68%),
    linear-gradient(90deg, transparent 32%, #0A0B0D 32% 68%, transparent 68%),
    linear-gradient(90deg, transparent 32%, #0A0B0D 32% 68%, transparent 68%);
  background-size: 100% 5%, 100% 4%, 100% 4%;
  background-position: 0 14%, 0 26%, 0 34%;
  background-repeat: no-repeat;
}
.mbk__side--r {
  right: 0;
  transform-origin: 0 50%;
  transform: translateX(100%) rotateY(90deg);
  background-image:
    linear-gradient(90deg, transparent 30%, #0A0B0D 30% 70%, transparent 70%),
    linear-gradient(90deg, transparent 40%, #0A0B0D 40% 60%, transparent 60%),
    linear-gradient(90deg, transparent 36%, #0A0B0D 36% 64%, transparent 64%);
  background-size: 100% 7%, 100% 3%, 100% 4%;
  background-position: 0 16%, 0 30%, 0 40%;
  background-repeat: no-repeat;
}
/* Bodenschatten in der Tischebene */
.mbk__shadow {
  position: absolute;
  left: -6%; right: -6%;
  top: 100%;
  height: 100%;
  transform-origin: 50% 0;
  transform: translateY(2px) rotateX(90deg) translateZ(-4px);
  border-radius: 50%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(var(--shadow-rgb), 0.62), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

/* Choreografie — Start: von LINKS gesehen (Yaw +70°, die linke Geräte-
   seite zeigt zum Betrachter — im Frame-Kontaktbogen verifiziert) und
   aus der linken Bühnenhälfte, Deckel zu (−90°); Deckel öffnet, der Körper schwingt nach rechts in die Mitte und
   dreht nach vorn; Ende: mittig, frontal, offen (Marie R3: „von links,
   von der Seite, aufklappt, nach rechts, und dann mittig"). Läuft
   einmalig nach dem Reveal, Deckel und Körper in zwei versetzten Läufen.
   Ohne @property (Safari <16.4, Firefox <128) springt der Zustand auf das
   Ende — die Plain-Endwerte stehen in den .is-revealed-Regeln. Das Display wacht auf, sobald der Deckel etwa
   halb offen ist (mbk-wake ab 1,05 s), sein Lichtschein auf dem Deck
   kommt mit (mbk-spill). */
@property --mbk-yaw  { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --mbk-open { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --mbk-x    { syntax: "<length-percentage>"; inherits: true; initial-value: 0%; }
[data-reveal] .mbk {
  --mbk-yaw: 70deg;
  --mbk-open: -90deg;
  --mbk-x: -16%;
}
/* Zwei GETRENNTE Läufe statt einer (2026-09-07): der Deckel öffnet
   zuerst, der Körper dreht versetzt dazu nach vorn — eine gemeinsame
   Kurve für beides erzwang im Kontaktbogen einen Stillstand um 0,3–0,45 s
   (das alte 16-%-Zwischen-Keyframe) und danach einen Ruck. `--mbk-open`
   läuft auf `.mbk__lid` (dort wird es verbraucht), Yaw/Versatz auf `.mbk`.
   fill-mode BOTH, nicht forwards: während der Verzögerung gilt sonst
   die Plain-Deklaration dieser Regel = aufgeklappt und frontal — das
   Gerät blitzte 150 ms lang offen auf und sprang dann zu (gemessen per
   Scrub auf currentTime 0). */
[data-reveal].is-revealed .mbk {
  /* Plain-Endwerte = Fallback ohne @property-Support (Guardian): dort
     bleibt ein @keyframes-Lauf auf Custom Properties wirkungslos, der
     Laptop steht dann sofort im Endzustand statt seitlich zugeklappt.
     Mit Support überschreibt die Animation die Werte (fill both).
     `--mbk-open` steht hier NICHT mehr — es wird allein von .mbk__lid
     gelesen, und dessen eigene Regel bringt denselben Fallback mit. */
  --mbk-yaw: 0deg;
  --mbk-x: 0%;
  animation: mbk-turn 2.05s cubic-bezier(0.36, 0.03, 0.16, 1) 0.35s both;
}
[data-reveal].is-revealed .mbk__lid {
  /* Plain-Endwert = derselbe Fallback wie auf .mbk (s. o.) */
  --mbk-open: 8deg;
  animation: mbk-open 1.55s cubic-bezier(0.34, 0.02, 0.2, 1) 0.15s both;
}
@keyframes mbk-turn {
  from { --mbk-yaw: 70deg; --mbk-x: -16%; }
  to   { --mbk-yaw: 0deg;  --mbk-x: 0%; }
}
@keyframes mbk-open {
  from { --mbk-open: -90deg; }
  /* der Deckel schwingt einmal leicht über den Ruhewinkel und legt sich
     zurück — ohne diese Nachgabe wirkt das Öffnen mechanisch */
  78%  { --mbk-open: 12deg; }
  to   { --mbk-open: 8deg; }
}
[data-reveal].is-revealed .mbk__screen {
  animation: mbk-wake 0.9s ease-out 1.05s forwards;
}
[data-reveal].is-revealed .mbk__base::after {
  animation: mbk-spill 1.1s ease-out 1.15s forwards;
}
@keyframes mbk-wake  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbk-spill { from { opacity: 0; } to { opacity: 1; } }

/* iPhone — überlappt die Basis unten links, blendet NACH dem Aufklappen
   ein und schwebt danach sanft */
.ws-hero__phone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(112px, 23%, 160px);
  z-index: 2;
  opacity: 0;
  transform: translateY(26px) scale(0.94);
}
[data-reveal].is-revealed .ws-hero__phone {
  animation: iph-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 2.45s forwards;
}
@keyframes iph-in {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ws-phone {
  position: relative;
  animation: ws-phone-float 7s ease-in-out 3.2s infinite;
  animation-play-state: paused;
  filter: drop-shadow(0 30px 34px rgba(var(--shadow-rgb), 0.46));
  will-change: transform;
}
[data-reveal].is-revealed .ws-phone { animation-play-state: running; }
@keyframes ws-phone-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(-2deg); }
}
/* Black-Titanium-Rahmen (passend zum Space-Black-MacBook) + schwarzes
   Glas mit Dynamic Island; Rim-Light Silver Blue wie am Laptop */
.iph__frame {
  display: block;
  position: relative;
  border-radius: clamp(22px, 2.8vw, 30px);
  padding: clamp(3px, 0.45vw, 5px);
  background:
    linear-gradient(165deg, #4A4E54 0%, #2A2D32 30%, #17191C 55%, #2E3136 82%, #52565C 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(179, 204, 223, 0.18);
}
.iph__glass {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: clamp(19px, 2.4vw, 26px);
  padding: clamp(4px, 0.55vw, 6px);
  background: #050608;
}
.iph__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(15px, 1.9vw, 21px);
}

/* Hero-Screens im Wechsel (18.09.2026, Marie: „bei der Leistungsseite die
   Seiten nicht angepasst"): MacBook und iPhone zeigen drei echte
   Kundenseiten — Scheithauer · O. Feucht · Platzhirsch —, beide synchron.
   Die erste Seite ist das Bild im Fluss (.mbk__screen / .iph__screen, mit
   dem Aufwach-Effekt des Displays) und bleibt IMMER stehen; die beiden
   anderen liegen darüber und blenden ein. Seite 3 blendet am Rundenende
   wieder AUS und gibt Seite 1 frei, Seite 2 verschwindet erst, wenn Seite 3
   sie ganz verdeckt — so gibt es beim Wechsel kein Helligkeits-Loch.
   Takt: 4 s je Seite, 12 s die Runde; der erste Wechsel erst bei 5 s nach
   dem Reveal, damit das Aufklappen (bis ≈ 2,4 s) auf Seite 1 stattfindet. */
.ws-screens { position: relative; display: block; }
.ws-screens__alt {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0; pointer-events: none;
  animation: ws-wechsel-2 12s linear 5s infinite; animation-play-state: paused;
}
.ws-screens__alt--3 { animation-name: ws-wechsel-3; animation-delay: 9s; }
.ws-screens--laptop .ws-screens__alt { border-radius: clamp(3px, 0.4vw, 6px); }
.ws-screens--phone .ws-screens__alt { border-radius: clamp(15px, 1.9vw, 21px); }
[data-reveal].is-revealed .ws-screens__alt { animation-play-state: running; }
/* 12 s, 1 % = 0,12 s: einblenden in 0,6 s, 4 s stehen */
@keyframes ws-wechsel-2 {
  0%            { opacity: 0; }
  5%, 38.3%     { opacity: 1; }
  38.4%, 100%   { opacity: 0; }
}
@keyframes ws-wechsel-3 {
  0%            { opacity: 0; }
  5%, 33.33%    { opacity: 1; }
  38.33%, 100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .ws-screens__alt { animation: none; opacity: 0; }   /* Standbild = Seite 1 */
}
.iph__island {
  position: absolute;
  top: clamp(11px, 1.3vw, 15px);
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: clamp(8px, 0.95vw, 11px);
  border-radius: 999px;
  background: #050608;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* Seitentasten am Rahmen */
.iph__btn {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6A6E75, #24272B);
}
.iph__btn--mute { left: -2px; top: 16%; height: 5%; }
.iph__btn--vol1 { left: -2px; top: 24%; height: 9%; }
.iph__btn--vol2 { left: -2px; top: 35%; height: 9%; }
.iph__btn--pwr  { right: -2px; top: 26%; height: 13%; }

/* Anruf-Benachrichtigung — poppt nach dem Reveal auf dem Phone auf.
   Status-Grün = Geräte-Kodierung „echter Anruf" (§5a wie .bsys) */
.ws-phone__call {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 1.6vw, 20px);
  transform: translateX(-50%) translateY(10px) scale(0.9);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 210px;
  padding: 8px 14px 8px 9px;
  border-radius: 999px;
  background: rgba(9, 15, 23, 0.94);
  border: 1px solid rgba(214, 230, 245, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 34px -14px rgba(var(--shadow-rgb), 0.6);
  z-index: 2;
}
[data-reveal].is-revealed .ws-phone__call {
  animation: ws-call-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.15s forwards;
}
@keyframes ws-call-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.ws-phone__call-icon {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #46D39A;
  color: #06231A;
}
.ws-phone__call-icon .icon {
  width: 15px;
  height: 15px;
}
.ws-phone__call-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(70, 211, 154, 0.75);
  opacity: 0;
}
[data-reveal].is-revealed .ws-phone__call-icon::after {
  animation: ws-call-pulse 2.2s ease-out 3.9s infinite;
}
@keyframes ws-call-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.75); opacity: 0; }
}
.ws-phone__call-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ws-phone__call-body b {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #F2F7FC;
}
.ws-phone__call-body i {
  font-style: normal;
  font-size: 10px;
  color: rgba(214, 230, 245, 0.66);
}

/* Schmale Bühnen (<640px): der Anruf-Chip (bis 210px) würde zentriert
   über dem 112px-Phone links aus dem Hero laufen → linksbündig am Phone */
@media (max-width: 639px) {
  .ws-phone__call {
    left: 0;
    transform: translateY(10px) scale(0.9);
  }
  [data-reveal].is-revealed .ws-phone__call {
    animation-name: ws-call-in-narrow;
  }
  @keyframes ws-call-in-narrow {
    from { opacity: 0; transform: translateY(10px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ---- Geteiltes Geräte-Panel (dunkle „Screen"-Fläche) ---- */
.ws-panel {
  --wsd-cyan: #4DA8DA;
  --wsd-txt-1: rgba(226, 238, 248, 0.94);
  --wsd-txt-2: rgba(214, 230, 245, 0.72);
  --wsd-txt-3: rgba(214, 230, 245, 0.48);
  --wsd-green: #46d39a;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(158deg, #1C2D3B 0%, #131F2B 56%, #0C141C 100%);
  border: 1px solid rgba(214, 230, 245, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 38px rgba(77, 168, 218, 0.05),
    0 26px 50px -22px rgba(var(--shadow-rgb), 0.6);
}
.ws-panel__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: var(--wsd-txt-2);
}
.ws-panel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wsd-cyan);
  box-shadow: 0 0 8px var(--wsd-cyan);
  animation: bsys-livedot 2s ease-in-out infinite;
  animation-play-state: paused;
}
[data-reveal].is-revealed .ws-panel__dot { animation-play-state: running; }
.ws-panel__brand {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wsd-txt-3);
}

/* Maus-Tilt (§0a Variante B) auf den Geräte-Panels — Kachel folgt
   dem Cursor dezent in 3D (JS-gated: nur hover/fine + nicht RM) */
.ws-panel[data-tilt] {
  --mx: 0; --my: 0; --tilt-max: 4deg; --lift: 0px;
  transform-style: flat;
  transform:
    perspective(1100px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
}
.ws-panel.is-tilting { transition: transform 140ms ease-out; }

/* Reveal-Stagger für Panel-Kinder mit --i (nutzt den generischen
   [data-reveal]-Hook der Section) */
[data-reveal] [data-wsr] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.1s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.1s);
}
[data-reveal].is-revealed [data-wsr] {
  opacity: 1;
  transform: none;
}

/* ---- S3 · „Kein Schaufenster" — zweispaltig: Copy + Anruf-Chrome ---- */
.ws-why { position: relative; padding-block: var(--section-py); }
.ws-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 1024px) {
  .ws-why__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.ws-why__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
/* H2 erbt die volle CI-Größe (--text-h2) wie .ki__title/.kspez__title;
   Maß nur über max-width gezähmt (Guardian 2026-07-24). */
.ws-why__copy h2 {
  margin: 0;
  max-width: 24ch; /* 16→24ch (Marie 2026-09-02) */
  line-height: 1.08;
  color: var(--heading-color);
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Satz 2 der Paket-H2 als knackige Subline (§1.13: Wortlaut bleibt,
   nur auf H2 + Subline verteilt) */
.ws-why__sub {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: var(--weight-semibold);
  color: var(--text-100);
}
.ws-why__copy p {
  margin: 0;
  max-width: 56ch;
  color: var(--text-200);
  line-height: 1.75;
}
/* Anruf-Chrome: Telefon-Screen mit dauerhaft sichtbarem Anruf-Balken */
.ws-callframe {
  position: relative;
  max-width: 340px;
  margin-inline: auto;
  padding: 16px 16px 18px;
}
.ws-callframe__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  padding: 16px 16px 76px;
}
.ws-callframe__row {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}
.ws-callframe__row--brand {
  display: flex;
  align-items: center;
  gap: 9px;
  height: auto;
  background: none;
  color: var(--wsd-txt-1);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
}
.ws-callframe__logo {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2C6EA9, #4DA8DA);
  flex: none;
}
.ws-callframe__row--w70 { width: 70%; }
.ws-callframe__row--w90 { width: 90%; }
.ws-callframe__row--w50 { width: 50%; }
.ws-callframe__row--hero {
  height: 96px; border-radius: 12px;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(77,168,218,0.16), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
/* Schwebende Stat-Pille */
.ws-callframe__stat {
  position: absolute;
  top: 60px; right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 9px 13px;
  border-radius: 13px;
  background: linear-gradient(158deg, #22384A, #16242F);
  border: 1px solid rgba(77,168,218,0.4);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.7);
}
.ws-callframe__stat b {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--wsd-cyan);
}
.ws-callframe__stat span { font-size: 10.5px; color: var(--wsd-txt-2); }
/* Dauerhaft sichtbarer Anruf-Balken */
.ws-callframe__call {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(120deg, #2C6EA9, #4DA8DA);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: 15px;
  box-shadow: 0 0 0 rgba(77,168,218,0.5);
  animation: ws-call-glow 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
.ws-why[data-reveal].is-revealed .ws-callframe__call { animation-play-state: running; }
.ws-callframe__call .icon { width: 17px; height: 17px; }
@keyframes ws-call-glow {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(77,168,218,0.5); }
  50%      { box-shadow: 0 8px 34px -6px rgba(77,168,218,0.85); }
}

/* ---- S5/S6 · Ablauf — abwechselnde Reihen Copy + Geräte-Grafik ---- */
.ws-flow { position: relative; padding-block: var(--section-py); }
/* Zentrierter Standard-Header (kanonische H2-Größe wie painvoices) */
.ws-flow__head { margin-bottom: 0; }
.ws-flow__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 96px);
  margin-top: clamp(40px, 5.5vw, 68px);
}
.ws-flow__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .ws-flow__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Zweite Reihe: Gerät links, Copy rechts (editorialer Wechsel) */
  .ws-flow__row--flip .ws-flow__copy { order: 2; }
}
.ws-flow__copy { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.ws-flow__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-300);
}
.ws-flow__eyebrow .icon { width: 15px; height: 15px; color: var(--accent-hover); }
.ws-flow__title {
  margin: 0;
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  line-height: 1.18;
  color: var(--heading-color);
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Lokale em-Regel, weil die globale h1/h2 em H3 nicht abdeckt
   (§5a-Pattern wie .control-feature__title em / .capacity__sub em). */
.ws-flow__title em {
  font-family: var(--font-display);
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ws-flow__copy p { margin: 0; max-width: 50ch; color: var(--text-200); line-height: 1.72; }

/* Buchungs-Panel */
.ws-book__body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ws-book__step { display: flex; flex-direction: column; gap: 7px; }
.ws-book__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wsd-txt-3);
}
.ws-book__label b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(77,168,218,0.14); color: var(--wsd-cyan);
  font-size: 10px; font-weight: 700;
}
.ws-book__pick {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(77,168,218,0.35);
  color: var(--wsd-txt-1); font-size: 14px; font-weight: var(--weight-medium);
}
.ws-book__pick .icon { width: 16px; height: 16px; color: var(--wsd-cyan); }
.ws-book__pick .icon--check { margin-left: auto; }
.ws-book__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ws-book__slot {
  padding: 10px 6px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  color: var(--wsd-txt-2); font-size: 12.5px; font-weight: var(--weight-medium);
}
.ws-book__slot--on {
  background: rgba(77,168,218,0.14); border-color: rgba(77,168,218,0.5);
  color: var(--wsd-txt-1);
}
.ws-book__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 2px; padding: 13px; border-radius: 12px;
  background: linear-gradient(120deg, #2C6EA9, #4DA8DA);
  color: #fff; font-weight: var(--weight-semibold); font-size: 14.5px;
}
.ws-book__cta .icon { width: 16px; height: 16px; }
.ws-book__note {
  margin: 0; padding: 12px 16px 14px; border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 12.5px; color: var(--wsd-txt-2); text-align: center;
}

/* Live-Status-Tracker */
.ws-track__body { padding: 16px 18px; }
.ws-track__steps { list-style: none; margin: 0; padding: 0; }
.ws-track__step {
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0,1fr) auto;
  gap: 12px; align-items: center;
  padding: 11px 0;
}
.ws-track__node {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #16242F; border: 1.5px solid rgba(255,255,255,0.14);
  color: var(--wsd-txt-3);
}
.ws-track__node .icon { width: 13px; height: 13px; }
/* Verbindungslinie zwischen den Knoten */
.ws-track__step:not(:last-child) .ws-track__node::after {
  content: ""; position: absolute; top: 26px; left: 50%;
  width: 2px; height: 30px; transform: translateX(-50%);
  background: rgba(255,255,255,0.1);
}
.ws-track__step--done .ws-track__node {
  background: rgba(70,211,154,0.16); border-color: var(--wsd-green); color: var(--wsd-green);
}
.ws-track__step--done .ws-track__node::after { background: var(--wsd-green); opacity: 0.5; }
.ws-track__step--active .ws-track__node {
  background: rgba(77,168,218,0.18); border-color: var(--wsd-cyan); color: var(--wsd-cyan);
  box-shadow: 0 0 0 rgba(77,168,218,0.5);
  animation: ws-call-glow 2.4s ease-in-out infinite;
  animation-play-state: paused;
}
[data-reveal].is-revealed .ws-track__step--active .ws-track__node { animation-play-state: running; }
.ws-track__label { color: var(--wsd-txt-2); font-size: 14px; }
.ws-track__step--done .ws-track__label,
.ws-track__step--active .ws-track__label { color: var(--wsd-txt-1); font-weight: var(--weight-medium); }
.ws-track__time { font-size: 11.5px; color: var(--wsd-txt-3); white-space: nowrap; }
.ws-track__eta {
  font-size: 11px; font-weight: var(--weight-semibold);
  padding: 3px 9px; border-radius: 9999px; white-space: nowrap;
  color: var(--wsd-cyan); background: rgba(77,168,218,0.12); border: 1px solid rgba(77,168,218,0.4);
}
.ws-track__foot {
  margin: 4px 0 0; padding: 13px 18px 15px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 12.5px; color: var(--wsd-txt-2);
}

/* ---- S7 · „Hochwertig, schnell, aufs Handy" — Copy + Merkmal-Strip ---- */
.ws-craft { position: relative; padding-block: var(--section-py); }
.ws-craft__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 1024px) {
  .ws-craft__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.ws-craft__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.ws-craft__copy h2 {
  margin: 0; max-width: 28ch; line-height: 1.12; /* 20→28ch (Marie 2026-09-02) */
  color: var(--heading-color); hyphens: manual; -webkit-hyphens: manual;
}
.ws-craft__copy p { margin: 0; max-width: 56ch; color: var(--text-200); line-height: 1.75; }
.ws-craft__metrics { display: flex; flex-direction: column; gap: 14px; }
.ws-craft__metric {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.ws-craft__ic {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.28);
  color: var(--accent-hover);
}
.ws-craft__ic .icon { width: 22px; height: 22px; }
.ws-craft__mtext b {
  display: block; font-family: var(--font-display);
  font-size: 1.15rem; line-height: 1.2; color: var(--heading-color);
}
.ws-craft__mtext span { font-size: 0.9rem; color: var(--text-200); line-height: 1.5; }

/* ---- S8 · Bese-System — Copy-Lead + horizontaler Node-Flow ---- */
.ws-system { position: relative; padding-block: var(--section-py); }
.ws-system__head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 52px); display: flex; flex-direction: column; gap: var(--space-4); }
.ws-system__head h2 {
  margin: 0; max-width: 30ch; line-height: 1.12; /* 22→30ch (Marie 2026-09-02) */
  color: var(--heading-color); hyphens: manual; -webkit-hyphens: manual;
}
.ws-system__head p { margin: 0; color: var(--text-200); line-height: 1.72; max-width: 64ch; }
.ws-system__flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .ws-system__flow { grid-template-columns: minmax(0,1.1fr) auto minmax(0,0.8fr) auto minmax(0,0.7fr); align-items: center; }
}
/* Quell-Kanäle (linkes Feld) */
.ws-system__sources {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  padding: clamp(16px,2vw,22px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--glass-border);
}
.ws-system__src {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: var(--weight-medium); color: var(--text-100);
}
.ws-system__src .icon { width: 16px; height: 16px; color: var(--accent-hover); flex: none; }
/* Zentraler Hub „Deine Seite" */
.ws-system__hub {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: clamp(20px,2.4vw,28px) clamp(16px,2vw,22px);
  border-radius: var(--radius-lg);
  background: linear-gradient(158deg, #22384A, #131F2B);
  border: 1px solid rgba(77,168,218,0.4);
  box-shadow: 0 22px 46px -24px rgba(0,0,0,0.6), inset 0 0 34px rgba(77,168,218,0.08);
  color: #fff;
}
.ws-system__hub-ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(77,168,218,0.2); border: 1px solid rgba(77,168,218,0.5); color: var(--cyan-hi);
}
.ws-system__hub-ic .icon { width: 22px; height: 22px; }
.ws-system__hub b { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; }
.ws-system__hub span { font-size: 12px; color: rgba(214,230,245,0.7); }
/* Ergebnis „App · €" */
.ws-system__out {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: clamp(18px,2.2vw,24px) clamp(14px,2vw,20px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--glass-border);
  color: var(--heading-color);
}
.ws-system__out-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(70,211,154,0.14); border: 1px solid rgba(70,211,154,0.4); color: #46d39a;
}
.ws-system__out-ic .icon { width: 20px; height: 20px; }
.ws-system__out b { font-family: var(--font-display); font-size: 1.05rem; }
.ws-system__out span { font-size: 12px; color: var(--text-200); }
/* Pfeil-Konnektoren */
.ws-system__arrow {
  display: flex; align-items: center; justify-content: center;
  color: rgba(var(--glow-rgb), 0.6);
}
.ws-system__arrow .icon { width: 26px; height: 26px; }
@media (max-width: 899px) {
  /* Rotation aufs ICON, nicht auf den Container — der [data-wsr]-
     Reveal setzt transform auf dem Container und würde die Drehung
     überschreiben (Bug-Fix 2026-07-24). */
  .ws-system__arrow { height: 20px; }
  .ws-system__arrow .icon { transform: rotate(90deg); }
  .ws-system__sources { grid-template-columns: repeat(2, 1fr); }
}
/* ⚠ Markup-los seit dem 17.09. — Marie hat den Absatz gestrichen. Das CSS
   bleibt trotzdem stehen, anders als beim gleichzeitig abgeloesten
   `.bsys-netz*`: das Netz wurde durch ein BESSERES Konzept ersetzt und kommt
   nicht zurueck, dieser Absatz dagegen ist reine Copy, die Marie jederzeit
   wieder einsetzen kann (Wortlaut steht im Page-File an seiner Stelle).
   Wird der Rueckbau verworfen, kann dieser Block ersatzlos weg. */
.ws-system__note {
  margin: clamp(24px,3.4vw,36px) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid rgba(var(--glow-rgb), 0.45);
  font-size: var(--text-lead); line-height: 1.65; color: var(--text-200); max-width: 64ch;
}

/* ---- S9 · Stufen — visuelle Leiter (Ebenen-Balken + Nummern) ---- */
/* Zentrierter Standard-Header (kanonische H2-Größe) + Lead */
.ws-stufen .section-header { margin-bottom: clamp(28px, 4vw, 48px); }
/* §5a-Pattern: Auto-Hyphenation trennte „Beteili-gung" mid-word */
.ws-stufen .section-header__title {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.ws-stufen__lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
}
.ws-stufen .eg__foot {
  border-left: 0;
  padding-left: 0;
  margin-inline: auto;
  text-align: center;
}
.ws-tier { align-items: stretch; }
.ws-tier .story-card { gap: var(--space-4); }
/* Fassung „Das Siegel" (Marie 17.09.2026, Entwurf B ohne Medaillen): oben NUR
   die Stufen-Balken, darunter der Stufenname als POLIERTES Metall mit
   Schimmer. Bronze/Silber/Gold sind bewusste CI-Fremdfarben (§5a) — Marie:
   „soll wirklich aussehen wie Bronze, Silber und Gold … kein gebürstetes
   Metall, sondern glänzende Metalle mit ebenmäßiger Oberfläche". Poliert
   heißt hier: KEIN repeating-gradient, keine Textur — der Text-Verlauf
   trägt den Doppelhorizont eines Spiegels (hell · dunkler · hell), die
   Lichtbahn darüber ist der Schimmer. Beide Ebenen sind auf die Glyphen
   geclippt; der Verlauf läuft senkrecht (CI Sektion 05). Bronze bewusst
   rosegold-hell — eine „braune" Rampe fiele auf der Insel unter 3:1.
   Entwurf: https://claude.ai/code/artifact/67169352-711d-43db-88d8-bb7389a52ca1 */
.ws-tier--bronze { --ws-mt: linear-gradient(180deg, #FFE5CC 0%, #F7CEA6 18%, #D3915E 48%, #B87C4A 56%, #EBBA8D 78%, #D89765 100%); --ws-bar: linear-gradient(180deg, #F7CEA6, #C8834F); --ws-rand: 214, 148, 98;  --ws-d: 0s; }
.ws-tier--silber { --ws-mt: linear-gradient(180deg, #FFFFFF 0%, #EDF1F4 18%, #AEB8C1 48%, #939DA6 56%, #DDE3E8 78%, #BCC5CD 100%); --ws-bar: linear-gradient(180deg, #F4F7F9, #A6B0BA); --ws-rand: 200, 210, 218; --ws-d: .45s; }
.ws-tier--gold   { --ws-mt: linear-gradient(180deg, #FDF0C0 0%, #F7DE8E 18%, #D2A23A 48%, #B98B31 56%, #EFD182 78%, #D7A93E 100%); --ws-bar: linear-gradient(180deg, #F7DE8E, #C6942F); --ws-rand: 217, 174, 74;  --ws-d: .9s; }
/* Kartenrand im Ton des Metalls. Die BASIS-Regel (0,2,0) steht gleichauf mit der
   geteilten .story-card:hover (0,2,0) und gewinnt nur als spätere Quelle — sonst
   würde der Rand beim Hover grau; die :hover-Regel darunter liegt mit (0,3,0)
   ohnehin darüber. */
.ws-tier :is(.ws-tier--bronze, .ws-tier--silber, .ws-tier--gold) { border-color: rgba(var(--ws-rand), 0.30); }
.ws-tier :is(.ws-tier--bronze, .ws-tier--silber, .ws-tier--gold):hover { border-color: rgba(var(--ws-rand), 0.50); }
/* Stufen-Balken: das einzige Element über dem Namen; steigende Füllung je
   Stufe, wachsen beim Reveal von links ein (Stagger: Karten---i + Position) */
.ws-tier__bars { display: flex; gap: 6px; }
.ws-tier__bars i {
  width: 26px; height: 7px; border-radius: 4px;
  background: var(--text-500);
}
.ws-tier__bars i.on {
  background: var(--ws-bar);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(var(--shadow-rgb), 0.35);
}
.eg[data-reveal] .ws-tier__bars i.on {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.eg[data-reveal] .ws-tier__bars i.on:nth-child(1) { transition-delay: calc(var(--i, 0) * 70ms + 350ms); }
.eg[data-reveal] .ws-tier__bars i.on:nth-child(2) { transition-delay: calc(var(--i, 0) * 70ms + 470ms); }
.eg[data-reveal] .ws-tier__bars i.on:nth-child(3) { transition-delay: calc(var(--i, 0) * 70ms + 590ms); }
.eg[data-reveal].is-revealed .ws-tier__bars i.on { transform: scaleX(1); }
/* Ohne JavaScript setzt niemand .is-revealed — die Balken stünden auf 0. */
@media (scripting: none) { .eg[data-reveal] .ws-tier__bars i.on { transform: none; } }
/* Der Stufenname: Metall im Wort. clamp hält „Beteiligung" bei 320 px
   (40 px) in der Karte und wächst bis 60 px (ab ~1430 px). §1.6-Puffer gegen
   Kursiv-Überhang, hyphens manual gegen „Beteili-gung". */
.ws-tier__name {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular);
  font-size: clamp(2.5rem, 4.2vw, 3.75rem); line-height: 1.05; letter-spacing: 0.005em;
  hyphens: manual; -webkit-hyphens: manual;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: 0.08em; margin-inline: -0.04em;
  padding-block-end: 0.12em; margin-block-end: -0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image:
    linear-gradient(112deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 58%),
    var(--ws-mt);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0, 0 0;   /* Lichtbahn steht links außerhalb des Worts */
}
/* Schimmer: alle 5,5 s läuft die Bahn einmal von links durchs Wort (30 % des
   Zyklus), Bronze → Silber → Gold um 0,45 s versetzt, erst nachdem die Balken
   eingewachsen sind. Startet mit dem Reveal, läuft dann durch (Projekt-Standard
   .ki / [data-vs]). Ohne JS: Metall steht, keine Bahn. */
.eg[data-reveal].is-revealed .ws-tier__name {
  animation: ws-schimmer 5.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--ws-d, 0s) + 1200ms);
}
@keyframes ws-schimmer {
  0%   { background-position: 100% 0, 0 0; }
  30%  { background-position: 0% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eg[data-reveal].is-revealed .ws-tier__name { animation: none; background-position: 0% 0, 0 0; }
}

/* ---- S10/S11 · Eigentum + Ablauf — Header + 2 Spalten ---- */
.ws-own { position: relative; padding-block: var(--section-py); }
.ws-own__head { margin-bottom: clamp(32px, 4.5vw, 52px); }
.ws-own__sub {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: var(--weight-semibold);
  color: var(--text-100);
}
.ws-own__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  /* kein 1120px-Deckel mehr (2026-09-09): Container-Breite wie die Geräte-Panels */
  margin-inline: auto;
}
@media (min-width: 960px) {
  .ws-own__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.ws-own__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.ws-own__copy p { margin: 0; max-width: 52ch; color: var(--text-200); line-height: 1.75; }
/* Ablauf-Karte: die 4 Schritte als eigenständige Karte */
.ws-own__steps {
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ws-own__steps-title {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.2;
  color: var(--heading-color);
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Lokale em-Regel (H3 — globale h1/h2 em greift nicht, §5a-Pattern) */
.ws-own__steps-title em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ws-own__note {
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--glass-border);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-200);
}

/* Reduced-Motion: Reveal-Stagger + Live-Pulse aus (analog zu
   .kspez/.bsys/.eg-Vorbildern). JS setzt .is-revealed bei RM ohnehin
   sofort — hier zusätzlich die CSS-Transition/Animation stilllegen. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] [data-wsr] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ws-panel__dot,
  .ws-callframe__call,
  .ws-track__step--active .ws-track__node {
    animation: none;
  }
  /* Hero Device-Duo: MacBook offen + frontal, iPhone sichtbar, Float/
     Puls aus, Anruf-Chip statisch sichtbar */
  [data-reveal] .mbk,
  [data-reveal].is-revealed .mbk {
    --mbk-yaw: 0deg;
    --mbk-open: 8deg;
    --mbk-x: 0%;
    animation: none;
  }
  [data-reveal] .mbk__lid,
  [data-reveal].is-revealed .mbk__lid {
    --mbk-open: 8deg;
    animation: none;
  }
  [data-reveal] .mbk__screen,
  [data-reveal].is-revealed .mbk__screen,
  [data-reveal] .mbk__base::after,
  [data-reveal].is-revealed .mbk__base::after {
    opacity: 1;
    animation: none;
  }
  [data-reveal] .ws-hero__phone,
  [data-reveal].is-revealed .ws-hero__phone {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .ws-phone,
  [data-reveal].is-revealed .ws-phone__call-icon::after {
    animation: none;
  }
  [data-reveal] .ws-phone__call,
  [data-reveal].is-revealed .ws-phone__call {
    opacity: 1;
    transform: translateX(-50%);
    animation: none;
  }
  @media (max-width: 639px) {
    [data-reveal] .ws-phone__call,
    [data-reveal].is-revealed .ws-phone__call { transform: none; }
  }
  .eg[data-reveal] .ws-tier__bars i.on {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   KONTAKT (/kontakt/) — Rückruf-Formular + Standort. Neu 2026-07-23,
   Copy-Paket KONTAKT.md. Formular nutzt die globalen .form-field/
   .form-input-Bausteine des Modals; hier nur die Karten-Hülle,
   Textarea/Select-Feinheiten und die Karte.
   NOCH KEIN Backend (wie Modal) — Felder inkl. hidden seite/anliegen
   vorbereitet, Versandweg folgt mit der Modal-Anbindung.
   ============================================================ */
.kt-anfrage {
  padding-block: var(--section-py);
  /* Anker-Ziel (#rueckruf) — Platz für die Sticky-Navbar */
  scroll-margin-top: 90px;
}

.kt-anfrage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 960px) {
  .kt-anfrage__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.kt-anfrage__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.kt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kt-form textarea.form-input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.kt-form select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

.kt-form__micro {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-300);
}

/* „Lieber selbst anrufen?" — große Telefon-Zeile */
.kt-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

.kt-call__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 26px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  color: var(--heading-color);
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}

.kt-call__phone:hover {
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
}

.kt-call__phone .icon {
  width: 20px;
  height: 20px;
  color: var(--accent-hover);
}

.kt-call__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-300);
}

/* Standort: Karte + Adresse */
.kt-standort {
  padding-block: var(--section-py);
}

.kt-standort__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

@media (min-width: 900px) {
  .kt-standort__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.kt-standort__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.kt-standort__address {
  margin: 0;
  font-style: normal;
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--text-100);
}

.kt-standort__address strong {
  display: block;
  font-weight: 700;
  color: var(--heading-color);
}

.kt-map {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 60px -35px rgba(var(--shadow-rgb), 0.5);
}

.kt-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   KARRIERE-SEITE (neu 2026-07-30, Vorbild Live-Seite bese-media.de/karriere/)
   Alle Bausteine token-basiert; Reveal über den generischen
   [data-reveal]-Hook (Kinder staffeln via --i). Light-Theme-
   Overrides + Band-Zuordnung leben im Light-Block am Datei-Ende.
   ============================================================ */

/* ---------- Gemeinsamer Reveal-Stagger der Karriere-Bausteine ----------
   .ka-prinzip ist seit dem Kachel-Raster vom 18.09.2026 wieder in den
   Listen (das Saeulen-Karussell vom 02.09. hatte es herausgenommen,
   weil opacity auf dem Wrapper seine 3D-Kinder platt gerendert
   haette — die gibt es nicht mehr). */
[data-reveal] :is(.ka-tile, .ka-benefit, .ka-extra, .ka-voice,
                  .ka-prinzip, .ka-tech__item) {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 620ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 65ms);
}

[data-reveal].is-revealed :is(.ka-tile, .ka-benefit, .ka-extra,
                              .ka-voice, .ka-prinzip, .ka-tech__item) {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] :is(.ka-tile, .ka-benefit, .ka-extra, .ka-voice,
                    .ka-prinzip, .ka-tech__item) {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ============================================================
   01 — Hero: Video-Bühne + Glas-Karte
   Seit 2026-09-04 trägt die Bühne das Office-Loop-Video statt des
   Team-Kollage-Fotos; sie ist in BEIDEN Themes dunkel — das
   Light-Tokenpaket dafür steht im Light-Block (Team-Hero-Muster).
   ============================================================ */
.ka-hero {
  /* Poster, Video und Scrim liegen im .hero__bgvideo-Layer (Markup im
     Page-File, Aussehen im geteilten Block „Hero — Office-Hintergrundvideo"). Hier bleibt nur eine dunkle Backplate für den Moment vor
     dem Poster-Paint; der Ton ist theme-fest (#060A0E = Surface-0, der
     projektweite Scrim-Ton) — die Variable ist der Single Point, die
     Light-Theme-Regel `body.page-karriere .hero` zieht sie mit. */
  --ka-hero-bg: #060A0E;
  background: var(--ka-hero-bg);
  /* Bühnen-Höhe = EIN Bildschirm (Marie 2026-09-10: „dass die Hero-Section
     100%ige Viewport-Höhe hat"). Dieselbe Rechnung wie auf Startseite und
     Kanalservice (Blöcke „Startseite: Hero füllt den ersten Bildschirm" /
     Kanalservice-Runde 10): 73px Navbar abgezogen (`.site-header` ist
     `sticky` und steht IM FLUSS — volle 100svh ergäben Header + Hero = ein
     Bildschirm PLUS 73px; die 73px sind `.navbar__inner { min-height: 72px }`
     + 1px Border, ändert sich dort etwas, muss dieser Wert mit), `svh` statt
     `vh` (auf Mobile meint `vh` die GROSSE Viewport-Höhe, der Hero ragte beim
     Laden mit sichtbarer Adressleiste unter die Bildkante; die `vh`-Zeile
     bleibt als Fallback-Kette für Browser ohne svh), und `min-height` statt
     `height` — wo der Inhalt höher ist als der Platz, GEWINNT der Inhalt,
     nichts wird abgeschnitten.
     ABGELÖST: `clamp(620px, 56.25vw, 860px)` (16:9-Ratio des Office-Videos,
     damit `cover` den vollen Frame zeigte). Der Ausschnitt folgt jetzt der
     Fensterhöhe und ist bei schmalen/niedrigen Fenstern seitlich bzw.
     vertikal enger — unkritisch, im Video sind keine Gesichter. */
  /* HISTORIE: die -73px galten der Leiste im Fluss. Seit [Block: kopfleiste-r24] (24.09.) ist die Kopfleiste fixed, dieser Hero misst 100svh — Regel dort. */
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  display: flex;
  align-items: center;
  padding-block: clamp(88px, 9vw, 112px) clamp(48px, 6vw, 80px);
}

/* Ab Desktop hängt der Innenabstand an der FENSTERHÖHE statt an festen
   112/80px — sonst wächst der Hero auf verbreiteten Laptop-Auflösungen weit
   über den Bildschirm hinaus (Muster Kanalservice/Startseite). GEMESSEN vor
   dem Eingriff: 1440×900 → 1043px Hero bei 827px Platz, 1366×768 → 1034 bei
   695, 1280×720 → 1019 bei 647. Der Karriere-Hero trägt viel: Glas-Karte
   (H1, Lead, Rotator, CTA, drei kununu-Badges) + seit 2026-09-10 das
   Logo-Band mit seinem Abstand. */
@media (min-width: 1024px) {
  .ka-hero { padding-block: clamp(24px, 5vh, 96px); }
}

/* Die früheren --ka-hero-pos-Ausschnittstufen (Personen-Positionen im
   Team-Kollage-Foto) sind mit dem Video-Umbau 2026-09-04 entfallen — das
   Office-Motiv braucht keine Gesichts-Anker, sein Ausschnitt steht als
   `center 38%` in der geteilten .hero__bgvideo-Regel. */

/* --- Karriere-Hero — Office-Hintergrundvideo (Marie 2026-09-04) ---
   Der Layer braucht hier KEINE eigenen Regeln mehr: seit die Startseite ihr
   Video abgegeben hat (Marie 2026-09-04: „das passt hier nicht"), ist die
   Karriere-Seite sein Erstnutzer (seit 17.09.2026 läuft er zusätzlich auf
   Über uns, dort mit eigenem Scrim, Block „ÜBER UNS — Phase M7") — die frühere `.ka-hero`-Sonderfassung
   (absolut statt fixed, eigener leiserer Scrim) IST jetzt die geteilte
   Basisregel im Block „Hero — Office-Hintergrundvideo" weiter oben, dort
   stehen auch die gemessenen Kontrastwerte. Markup und Poster-Preload
   liegen inline in templates/pages/karriere/index.html. */

.ka-hero__card {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
  border-radius: var(--radius-lg); /* = 16px, Marie-Rezept */
  /* Glas lebt hier auf: der BG ist ein visuell reiches Bewegtbild (§5a;
     bis 2026-09-04 ein Foto, seitdem das Office-Loop-Video).
     Rezept 1:1 von Marie vorgegeben (2026-07-31, Live-Vorbild):
     helles Weiss-Alpha-Glas statt der frueheren dunklen Buehne. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ka-hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 3.75rem);
  font-weight: var(--weight-regular);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  hyphens: manual;
}

.ka-hero__lead {
  margin: 0;
  max-width: 56ch;
  color: var(--text-200);
}

.ka-hero__cta {
  margin-top: var(--space-2);
}

/* Benefits-Rotator */
.ka-rotator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  max-width: 100%;
}

.ka-rotator__label {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--white);
  white-space: nowrap;
}

.ka-rotator__stage {
  position: relative;
  display: block;
  min-width: 250px;
  min-height: 22px;
  flex: 1 1 auto;
}

.ka-rotator__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--white);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 480ms ease;
}

.ka-rotator__item.is-active {
  opacity: 1;
  visibility: visible;
}

.ka-rotator__item .icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent-hover);
}

/* kununu-Badges */
.ka-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.ka-badges img {
  display: block;
  width: auto;
  height: clamp(112px, 12vw, 148px);
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .ka-rotator {
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
  }
  .ka-rotator__stage { min-width: 0; width: 100%; min-height: 26px; }
  .ka-rotator__item { justify-content: center; white-space: normal; text-align: center; }
  .ka-badges img { height: 84px; }
}

/* ============================================================
   02 — Wir sind Bese Media: Bento-Kennzahlen
   ============================================================ */
.ka-bento { padding-block: var(--section-py); }

.ka-bento__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: clamp(12px, 1.4vw, 20px);
}

/* ---------- Karten-Dunkel-Insel-Rezept der Karriere-Kacheln ----------
   Bento-Kacheln, Benefit-Karten, Extra-Pillen und die Bewerbungs-
   prozess-Karten (.ka-step__card, seit 2026-07-31) sind in BEIDEN
   Themes feste dunkle Karten (§0a-Rezept, Marie 2026-07-30:
   „helle Kacheln ohne Dimension/Muster" — wie im Live-Vorbild bleiben
   die Kacheln dunkel, nur das Sektions-Band dahinter ist hell).
   Dimension kommt aus drei Schichten: feines Grid-Muster + Glas-
   Schimmer oben links + opaker Navy-Verlauf (angenaeherte Surface-
   Toene — kein CI-Token deckt solide 3-Stop-Gradients ab, analog
   FAQ-/Cases-Insel-Gradients, §5a-Muster).
   Die Prinzipien-Karten (.ka-prinzip) sind seit dem Kachel-Raster
   vom 18.09.2026 wieder Teil des Rezepts (zwischen 28.08. und 18.09.
   waren sie als Galerie-Rahmen bzw. Karussell-Kacheln draussen). */
:is(.ka-tile, .ka-benefit, .ka-extra, .ka-prinzip, .ka-step__card) {
  /* Lokales Dark-Tokenpaket — nur die von Kindern verbrauchten Tokens */
  --heading-color: var(--white);
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --accent-hover: #4DA8DA;
  --logo-mono-filter: brightness(0) invert(1);
  color: var(--text-100);
  background:
    radial-gradient(ellipse 74% 72% at 12% -8%, rgba(var(--glow-rgb), 0.11) 0%, transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(160deg, #1B2836 0%, #121D29 52%, #0D1622 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 26px 54px -38px rgba(0, 0, 0, 0.6);
}

.ka-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}

/* Desktop-Platzierung (Live-Vorbild) */
.ka-tile--lead   { grid-column: 1 / 8;  grid-row: 1; min-height: 340px; }
.ka-tile--figure { grid-column: 8 / 13; grid-row: 1; }
.ka-tile--logos  { grid-column: 1 / 7;  grid-row: 2; }
.ka-tile--tall   { grid-column: 7 / 13; grid-row: 2 / 4; }
.ka-tile--photo:not(.ka-tile--lead):not(.ka-tile--tall) { grid-column: 1 / 4; grid-row: 3; min-height: 230px; }
.ka-tile--ai     { grid-column: 4 / 7;  grid-row: 3; }

/* Foto-Kacheln */
.ka-tile--photo { padding: 0; justify-content: flex-end; }

.ka-tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ka-tile--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 14, 0) 38%, rgba(6, 10, 14, 0.82) 100%);
  pointer-events: none;
}

.ka-tile--photo:hover img { transform: scale(1.035); }

/* Lead-Kachel (Strategie-Meeting, 3:2-Foto in ~2.3:1-Kachel): der
   Beschnitt liegt oben/unten — Ausschnitt nach OBEN ankern, damit der
   Kopf der stehenden Kollegin nie angeschnitten wird; unten faellt nur
   Tisch weg (Marie 2026-07-30: „keine Koepfe abschneiden"). */
.ka-tile--lead img { object-position: 50% 12%; }

/* Kachel „Durchschnittsalter 27" — Bild-Slideshow (Marie 2026-07-31,
   Live-Vorbild: 4 Motive im weichen Crossfade, 3 s Takt / 1,5 s Blende;
   das JS [data-ka-slides] in scripts.html toggelt .is-active und ist
   IO-gepaused; reduced-motion/ohne JS bleibt das erste Bild stehen). */
.ka-tile--tall .ka-tile__slide {
  opacity: 0;
  transition:
    opacity 1500ms ease-in-out,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ka-tile--tall .ka-tile__slide.is-active { opacity: 1; }

/* Hochformat-Slide „Flur-Gespraech": Ausschnitt nach OBEN ankern —
   center-Crop schnitt die Koepfe der beiden Laufenden an (Marie
   2026-07-31); Beschnitt faellt jetzt nach unten auf den Boden. */
.ka-tile--tall .ka-tile__slide--top { object-position: 50% 12%; }

.ka-tile__body--overlay { padding: clamp(18px, 2vw, 28px); }

.ka-tile__chip {
  position: absolute;
  left: clamp(14px, 1.6vw, 22px);
  bottom: clamp(14px, 1.6vw, 22px);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(12, 20, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--white);
}

.ka-tile__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--heading-color);
}

.ka-tile__text {
  margin: 4px 0 0;
  font-size: var(--text-small);
  color: var(--text-200);
}

.ka-tile__body { position: relative; }

/* Kachel „80+ Mio." — Geister-Zahl im Hintergrund */
.ka-tile--figure { justify-content: flex-end; }

.ka-tile__ghost {
  position: absolute;
  top: 50%;
  right: 0.04em;
  transform: translateY(-58%);
  font-family: var(--font-display);
  font-size: clamp(150px, 19vw, 260px);
  line-height: 0.78;
  color: var(--white);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

/* Kachel „260+ Partnerbetriebe" — durchlaufender Logo-Slider (Marie
   2026-07-31, Live-Vorbild): Track mit den 14 Partner-Logos, dupliziert,
   laeuft endlos nach links (Marquee-Technik wie .logo-marquee, eigener
   kompakter Keyframe). IO-gepaused bis die Bento-Sektion revealed ist. */
.ka-tile--logos { justify-content: space-between; }

.ka-tile__logoslide {
  overflow: hidden;
  /* weiche Kanten links/rechts, wie beim grossen Logo-Marquee */
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  padding-block: var(--space-2);
}

.ka-tile__logoslide-track {
  display: flex;
  align-items: center;
  /* KEIN gap: der Abstand haengt als margin-right an jedem Logo, damit
     beide Track-Haelften exakt gleich breit sind (nahtloser -50%-Loop) */
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: ka-logos-scroll 38s linear infinite;
  animation-play-state: paused;
}

[data-reveal].is-revealed .ka-tile__logoslide-track { animation-play-state: running; }

.ka-tile--logos:hover .ka-tile__logoslide-track { animation-play-state: paused; }

@keyframes ka-logos-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ka-tile__logoslide-track img {
  flex: none;
  width: auto;
  height: clamp(34px, 3.6vw, 46px);
  max-width: 130px;
  object-fit: contain;
  margin-right: clamp(28px, 3vw, 44px);
  opacity: 0.9;
  /* Kachel ist Dunkel-Insel → lokaler Token flacht immer auf Weiss */
  filter: var(--logo-mono-filter);
}

@media (prefers-reduced-motion: reduce) {
  .ka-tile__logoslide-track { animation: none !important; }
}

/* Kachel „AI-First Agentur" — Aufbau 1:1 wie die Live-Kachel (Marie
   2026-07-31): AI-POWERED-Pille oben links, schwebende Logos mittig
   mit Glow darunter, Text unten, sanfter Hover-Lift der ganzen Kachel.
   Grid-Muster + Glas-Schimmer kommen aus dem geteilten Dunkel-Karten-
   Rezept der Karriere-Kacheln. */
.ka-tile--ai {
  justify-content: space-between;
  gap: var(--space-4);
  transition:
    transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ka-tile--ai:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 40px rgba(var(--shadow-rgb), 0.4);
}

.ka-tile__ai-label {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-hover);
}

/* Schwebende AI-Logo-Karten (ChatGPT / Claude / Gemini) — Original-SVGs
   + Float-Animation 1:1 vom Live-Vorbild. Marken-Farben (Claude-Terracotta,
   Gemini-Multicolor, ChatGPT-Weiss) = Marken-Authentizitaets-Ausnahme
   analog Google-Gold/Trustpilot/WhatsApp (§5a). IO-gepaused bis die
   Bento-Sektion revealed ist (§0a-Pattern). */
.ka-ai {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
  flex: 1 1 auto;
  padding-block: var(--space-3);
  perspective: 800px;
}

/* Glow-Ellipse unter den schwebenden Logos (Live-Vorbild) */
.ka-ai::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: min(260px, 90%);
  height: 80px;
  background: radial-gradient(ellipse, rgba(var(--glow-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.ka-ai__card {
  display: block;
  flex: none;
  width: clamp(54px, 5.8vw, 68px);
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: ka-ai-float-a 4s ease-in-out infinite;
  animation-play-state: paused;
}

.ka-ai__card svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ka-ai__card--claude {
  width: clamp(64px, 6.8vw, 80px);
  border-radius: 20px;
  animation-name: ka-ai-float-b;
  animation-duration: 4.5s;
  box-shadow: 0 14px 40px rgba(196, 132, 92, 0.35), 0 4px 8px rgba(0, 0, 0, 0.4);
}

.ka-ai__card--gemini {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  animation-name: ka-ai-float-c;
  animation-duration: 3.8s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ka-ai__card--gemini svg { width: 70%; height: 70%; }

[data-reveal].is-revealed .ka-ai__card { animation-play-state: running; }

@keyframes ka-ai-float-a {
  0%, 100% { transform: rotateY(-15deg) rotateX(5deg) translateY(0); }
  50% { transform: rotateY(-10deg) rotateX(10deg) translateY(-8px); }
}

@keyframes ka-ai-float-b {
  0%, 100% { transform: rotateY(0deg) rotateX(6deg) translateY(-4px); }
  50% { transform: rotateY(3deg) rotateX(3deg) translateY(-12px); }
}

@keyframes ka-ai-float-c {
  0%, 100% { transform: rotateY(15deg) rotateX(5deg) translateY(0); }
  50% { transform: rotateY(10deg) rotateX(10deg) translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .ka-ai__card { animation: none !important; }
  .ka-tile--ai { transition: none; }
  .ka-tile--ai:hover { transform: none; }
}

@media (max-width: 1024px) {
  .ka-bento__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto); }
  .ka-tile--lead,
  .ka-tile--figure,
  .ka-tile--logos,
  .ka-tile--tall,
  .ka-tile--ai,
  .ka-tile--photo:not(.ka-tile--lead):not(.ka-tile--tall) {
    grid-column: auto;
    grid-row: auto;
    min-height: 210px;
  }
  .ka-tile--lead { grid-column: 1 / -1; min-height: 280px; }
}

@media (max-width: 640px) {
  .ka-bento__grid { grid-template-columns: 1fr; }
  .ka-tile--lead { min-height: 240px; }
  .ka-tile__ghost { font-size: 170px; }
}

/* ============================================================
   03 — Unser Team: Kopf + Porträt-Fries aller 18 (seit 2026-09-18)
   Marie: „die ganzen Bilder von den ganzen Teamleuten mit rein
   nehmen" — der frühere Einzel-Slider (Markup/CSS/JS in git, Stand
   ee36811) zeigte immer nur EINE Person. Der Fries ist die
   Zwei-Reihen-Wand aus partials/about-crew.html (Basis-CSS .crew*
   in Section 12, §0a-Pattern „Porträt-Fries"); hier nur, was die
   Karriere-Fassung zusätzlich braucht — Präzedenz .uu-team auf
   /unternehmen/ueber-uns/.
   ============================================================ */
.ka-team {
  /* Endet mit dem randlosen Fries → unten kein Polster (§0a Section-Rhythmus). */
  padding-top: var(--section-py);
  padding-bottom: 0;
}

.ka-team__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(40px, 5vw, 72px);
}

@media (min-width: 1024px) {
  .ka-team__head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(40px, 5vw, 96px);
  }
}

.ka-team__title {
  margin: 0;
  padding-right: 0.08em;
  font-size: var(--text-h2);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  color: var(--heading-color);
}

.ka-team__text {
  margin: 0;
  max-width: 62ch;
  line-height: 1.7;
  color: var(--text-200);
}

.ka-team__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--accent-hover);
  text-decoration: none;
}

.ka-team__link:hover { text-decoration: underline; }
.ka-team__link .icon { transition: transform 220ms ease; }
.ka-team__link:hover .icon { transform: translate(2px, -2px); }

/* Der Fries-Reveal hängt in der Basis an .about.is-revealed — hier trägt
   der Fries selbst den [data-reveal]-Hook (wie auf Über uns). */
.page-karriere .crew-wall.is-revealed .crew__member {
  opacity: 1;
  translate: 0 0;
}

/* Namen mittig wie auf Startseite und Über uns (Marie 2026-09-10:
   „klebt so ganz am Rand"). */
.page-karriere .crew__id {
  align-items: center;
  text-align: center;
  padding-inline: clamp(12px, 1vw, 18px);
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .page-karriere .crew__name { font-size: clamp(12px, 1vw, 16px); }
}

@media (scripting: none) {
  .page-karriere .crew__member {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ka-tile--photo img { transition: none; }
}

/* ============================================================
   04 — Unsere Technologie
   Das Geraete-Mockup ist seit 2026-07-30 ECHT freigestellt
   (Alphakanal per Flood-Fill, der eingebackene #000-Grund ist
   raus — Marie: „immer noch schwarzer Hintergrund") und steht
   damit randlos auf jedem Sektions-Hintergrund. Die Sektion
   selbst laeuft ueber die normale Dark-Insel-Regel im Light-
   Block bzw. den Seiten-BG im Dark-Theme. */
.ka-tech {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-py);
  overflow: hidden;
}

/* Inhalt liegt ueber dem Sektions-Hintergrund (siehe .ka-tech__bg) */
.ka-tech > .container { position: relative; z-index: 1; }

.ka-tech__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.ka-tech__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }

.ka-tech__title {
  margin: 0;
  font-size: var(--text-h2);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  color: var(--heading-color);
  hyphens: manual;
}

.ka-tech__lead { margin: 0; max-width: 56ch; color: var(--text-200); }

.ka-tech__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.ka-tech__item { display: flex; gap: var(--space-4); align-items: flex-start; }

.ka-tech__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--glow-rgb), 0.22), rgba(var(--glow-rgb), 0.06));
  border: 1px solid rgba(var(--glow-rgb), 0.28);
  color: var(--accent-hover);
}

.ka-tech__badge .icon { width: 21px; height: 21px; }

.ka-tech__name {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--heading-color);
}

.ka-tech__desc { margin: 0; font-size: var(--text-small); color: var(--text-200); }

.ka-tech__viz {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.ka-tech__viz img {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 640px;
  /* Freigestelltes RGBA-WebP — keine Maske/Blend-Tricks mehr noetig. */
}

.ka-tech__glow {
  position: absolute;
  inset: 8% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--glow-rgb), 0.26) 0%, rgba(var(--glow-rgb), 0.06) 46%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

/* ---------- Bewegter Sektions-Hintergrund ----------
   Marie 2026-08-03: „da wird noch irgendwas an Animationen fehlen, das
   sieht uneindrucksvoll aus" → vier ruhige Ebenen statt eines Effekts.
   Marie 2026-08-05: „noch so abgehackt im Viereck — soll sich komplett
   in den Hintergrund der Section integrieren" → die Ebenen lagen in der
   rechten Spalte (.ka-tech__viz) und endeten an deren Box; die harten
   Kanten kamen von overflow:hidden auf Aurora/Flow. Jetzt haengen sie
   an .ka-tech__bg ueber die VOLLE Sektionsbreite und laufen ausschliess-
   lich ueber Masken, Blur und Opacity-Keyframes aus — kein Layer wird
   mehr an einer Box beschnitten.
   Gewichtung: das Licht sammelt sich rechts beim Geraet, links bleibt
   nur Atmosphaere (Maske daempft dort), damit die Copy ruhig lesbar
   bleibt. Alles CSS, alles IO-gepaused bis die Sektion sichtbar ist,
   alles bei reduced-motion aus. Die Sektion ist in BEIDEN Themes eine
   Dunkel-Insel — helle Linien/Punkte funktionieren dort immer. */
.ka-tech__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 1 — Datenraster: feines Gitter, das langsam diagonal wandert.
   Die Maske traegt es vom Geraet aus nach allen Seiten weich aus
   (links nur noch als Andeutung). */
.ka-tech__grid {
  position: absolute;
  inset: -6% -4%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 92% 56% at 70% 48%, #000 4%, rgba(0, 0, 0, 0.55) 46%, transparent 88%);
  mask-image: radial-gradient(ellipse 92% 56% at 70% 48%, #000 4%, rgba(0, 0, 0, 0.55) 46%, transparent 88%);
  animation: ka-tech-grid 26s linear infinite;
  animation-play-state: paused;
  will-change: background-position;
}

@keyframes ka-tech-grid {
  to { background-position: 46px 46px, 46px 46px; }
}

/* 2 — Aurora: drei langsam driftende Lichtkeile ueber die ganze Breite
   (geteilte hero-aurora-drift-Keyframes, §0a Aurora-Reuse). Kein
   overflow-Container mehr — die Keile sind durch Blur + border-radius
   selbst randlos. */
.ka-tech__aurora {
  position: absolute;
  inset: -14% -8%;
  mix-blend-mode: screen;
  opacity: 0.8;
}

.ka-tech__beam {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
  animation-play-state: paused;
}

.ka-tech__beam--1 {
  top: -6%;
  left: 44%;
  width: 46%;
  height: 88%;
  background: conic-gradient(from 210deg at 50% 50%, transparent, rgba(var(--glow-rgb), 0.34), transparent 62%);
  animation: hero-aurora-drift-a 17s linear infinite;
}

.ka-tech__beam--2 {
  bottom: -12%;
  right: -6%;
  width: 44%;
  height: 82%;
  background: conic-gradient(from 40deg at 50% 50%, transparent, rgba(179, 204, 223, 0.20), transparent 58%);
  animation: hero-aurora-drift-b 23s linear infinite;
}

/* Sehr leiser Keil hinter der Textspalte — gibt der linken Haelfte
   Atmosphaere, ohne die Lesbarkeit anzutasten. */
.ka-tech__beam--3 {
  top: 8%;
  left: -10%;
  width: 44%;
  height: 84%;
  background: conic-gradient(from 130deg at 50% 50%, transparent, rgba(var(--glow-rgb), 0.11), transparent 56%);
  animation: hero-aurora-drift-c 29s linear infinite;
}

/* 3 — Datenstroeme: Licht-Striche laufen ueber die GANZE Sektion von
   links ins Geraet (gleiche Comet-Sprache wie die Bese-System-Streaks).
   Die Maske haelt sie hinter der Copy fast unsichtbar und laesst sie
   Richtung Geraet aufleuchten — dort enden sie im Nichts statt an einer
   Container-Kante. */
.ka-tech__flow {
  position: absolute;
  inset: 10% 0 10% 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.07) 18%, rgba(0, 0, 0, 0.18) 46%, #000 72%, #000 86%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.07) 18%, rgba(0, 0, 0, 0.18) 46%, #000 72%, #000 86%, transparent 99%);
}

.ka-tech__flow i {
  position: absolute;
  top: var(--y, 50%);
  left: -16%;
  width: 18%;
  height: 2px;
  border-radius: 2px;
  /* Kopf laeuft spitz aus statt hart zu enden — sonst liest sich der
     Strich beim Zug hinter der Copy als kurzer Unterstrich. */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--glow-rgb), 0.5) 58%,
    rgba(255, 255, 255, 0.78) 90%,
    transparent 100%);
  box-shadow: 0 0 12px 1px rgba(var(--glow-rgb), 0.38);
  opacity: 0;
  animation: ka-tech-flow var(--dur, 9s) linear var(--d, 0s) infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

@keyframes ka-tech-flow {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  76%  { opacity: 0.55; }
  100% { transform: translateX(640%); opacity: 0; }
}

/* 4 — Datenpunkte, die ueber die ganze Breite nach oben steigen
   (links gedaempft wie die uebrigen Ebenen) */
.ka-tech__motes {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.5) 38%, #000 64%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.5) 38%, #000 64%);
}

.ka-tech__motes i {
  position: absolute;
  bottom: 4%;
  left: var(--x, 50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 8px 1px rgba(var(--glow-rgb), 0.55);
  opacity: 0;
  animation: ka-tech-mote var(--dur, 9s) ease-in-out var(--d, 0s) infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

@keyframes ka-tech-mote {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  14%  { opacity: 0.9; }
  70%  { opacity: 0.45; }
  100% { transform: translateY(calc(-1 * var(--rise, 220px))) scale(1); opacity: 0; }
}

/* 5 — Mockup schwebt sanft */
.ka-tech__viz img {
  animation: ka-tech-float 9.5s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
}

@keyframes ka-tech-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Erst laufen lassen, wenn die Sektion im Blick ist (IO-Hook setzt
   .is-revealed auf die Sektion — gleicher Hook wie der Text-Reveal) */
[data-reveal].is-revealed :is(.ka-tech__grid, .ka-tech__beam,
                              .ka-tech__flow i, .ka-tech__motes i,
                              .ka-tech__viz img) {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .ka-tech__grid,
  .ka-tech__beam,
  .ka-tech__flow i,
  .ka-tech__motes i,
  .ka-tech__viz img,
  [data-reveal].is-revealed :is(.ka-tech__grid, .ka-tech__beam,
                                .ka-tech__flow i, .ka-tech__motes i,
                                .ka-tech__viz img) {
    animation: none;
  }
  .ka-tech__flow,
  .ka-tech__motes { display: none; }
}

@media (max-width: 900px) {
  .ka-tech__layout { grid-template-columns: 1fr; }

  /* Einspaltig steht das Geraet UNTER der Copy — das Licht sammelt sich
     entsprechend unten statt rechts, und die Datenstroeme laufen deutlich
     leiser, weil sie hier zwangslaeufig hinter dem Text durchziehen. */
  .ka-tech__grid {
    -webkit-mask-image: radial-gradient(ellipse 96% 46% at 52% 74%, #000 4%, rgba(0, 0, 0, 0.5) 48%, transparent 88%);
    mask-image: radial-gradient(ellipse 96% 46% at 52% 74%, #000 4%, rgba(0, 0, 0, 0.5) 48%, transparent 88%);
  }

  .ka-tech__flow {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 30%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 30%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
  }

  .ka-tech__motes {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ka-tech__beam--1 { left: 26%; width: 62%; }
  .ka-tech__beam--3 { opacity: 0.7; }
}

/* ============================================================
   05 — Was dich bei uns erwartet
   ============================================================ */
.ka-benefits { padding-block: var(--section-py); }

/* Elf Karten, ALLE gleich groß (Marie 2026-09-18: „die Benefits alle
   gleich groß darstellen") — die fünf früheren Extras-Pillen laufen
   seitdem als Karten im selben Raster. Drei Spalten wie im Live-Vorbild
   (auto-fit würde auf breiten Schirmen auf 4 Spalten springen);
   `grid-auto-rows: 1fr` zieht jede Zeile auf die Höhe der höchsten
   Karte, damit auch Zeile 1 und Zeile 4 gleich hoch sind. Das Raster
   hat sechs Spuren und jede Karte spannt zwei — so lässt sich die
   letzte Zeile (11 Karten = 3 · 3 + 2) per nth-Regel mittig setzen
   statt links hängend. */
.ka-benefits__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}

.ka-benefit { grid-column: span 2; }

/* Letzte Zeile mit zwei Karten: die vorletzte Karte rückt in Spur 2,
   die letzte folgt in Spur 4 → beide mittig unter den drei Spalten. */
.ka-benefit:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }

@media (max-width: 940px) {
  .ka-benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ka-benefit:nth-child(3n + 1):nth-last-child(2) { grid-column: span 2; }
  /* Zwei Spalten, 11 Karten = 5 · 2 + 1: die letzte allein mittig. */
  .ka-benefit:nth-child(2n + 1):last-child { grid-column: 2 / span 2; }
}

@media (max-width: 600px) {
  /* Einspaltig: natürliche Höhe je Karte — gleich hoch wären hier nur
     Leerräume unter den kurzen Texten (Guardian 2026-09-18). */
  .ka-benefits__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ka-benefit,
  .ka-benefit:nth-child(3n + 1):nth-last-child(2),
  .ka-benefit:nth-child(2n + 1):last-child { grid-column: auto; }
}

.ka-benefit {
  --mx: 0; --my: 0; --tilt-max: 6deg; --lift: 0px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--radius-lg);
  /* BG/Border/Schatten kommen aus dem Karten-Dunkel-Insel-Rezept oben */
  transform-style: flat;
}

.ka-benefit:hover { --lift: -3px; border-color: var(--glass-border-hover); }

/* ---------- Interaktive Ebene der Benefit-Karten (Marie 2026-08-03,
   „interessanter und schoener darstellen") ----------
   Drei Bausteine, alle aus dem etablierten Leistungs-Hub-Rezept
   (§0a „Leistungen-Hub-Karten-Raster"): Cursor-Spotlight je Karte,
   eine hervorgehobene Featured-Karte mit wanderndem Licht-Sweep und
   ein mitreagierendes Icon-Badge. Der gestaffelte Reveal lief schon
   ueber den gemeinsamen [data-reveal]-Hook. */

/* Spotlight-Layer: liegt UNTER dem Inhalt, ueber dem Karten-BG.
   --spot-x/--spot-y setzt der [data-spotlight]-Handler in scripts.html. */
:is(.ka-benefit, .ka-extra) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 50%;
}

:is(.ka-benefit, .ka-extra) > * { position: relative; z-index: 1; }

:is(.ka-benefit, .ka-extra)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--spot-x) var(--spot-y),
    rgba(var(--glow-rgb), 0.20),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  :is(.ka-benefit, .ka-extra):hover::after { opacity: 1; }
}

/* Badge reagiert mit: hebt leicht an, Ring wird kraeftiger */
.ka-benefit__badge,
.ka-extra__badge {
  transition:
    transform 260ms cubic-bezier(0.34, 1.3, 0.44, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

:is(.ka-benefit, .ka-extra):hover :is(.ka-benefit__badge, .ka-extra__badge) {
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(var(--glow-rgb), 0.44);
  box-shadow: 0 0 0 5px rgba(var(--glow-rgb), 0.07);
}

/* Featured-Karte („Ueberdurchschnittliches Gehalt") — gleiche Groesse,
   aber Cyan-Ambient-Glow, damit sie als Einstieg gelesen wird. */
.ka-benefit--featured {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(var(--glow-rgb), 0.12),
    0 26px 54px -38px rgba(0, 0, 0, 0.6),
    0 26px 70px -30px rgba(var(--glow-rgb), 0.32);
}

/* Wandernder Licht-Sweep auf der Oberkante — geteilte svc-sheen-
   Keyframes, IO-gepaused bis die Sektion sichtbar ist. */
.ka-benefit--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--accent-hover), transparent),
    linear-gradient(90deg, transparent, rgba(var(--glow-rgb), 0.40), transparent);
  background-size: 55% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -55% 0, 0 0;
  animation: svc-sheen 4.8s linear infinite;
  animation-play-state: paused;
}

[data-reveal].is-revealed .ka-benefit--featured::before { animation-play-state: running; }

/* Tilt + Reveal teilen sich die Transform-Kette (§0a Reveal-Kollision) */
[data-reveal].is-revealed .ka-benefit {
  transform:
    perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms ease,
    border-color 220ms ease;
}

[data-reveal].is-revealed .ka-benefit.is-tilting { transition: transform 140ms ease, border-color 220ms ease; }

.ka-benefit__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--glow-rgb), 0.20), rgba(var(--glow-rgb), 0.05));
  border: 1px solid rgba(var(--glow-rgb), 0.26);
  color: var(--accent-hover);
}

.ka-benefit__badge .icon { width: 22px; height: 22px; }

.ka-benefit__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--heading-color);
}

.ka-benefit__text { margin: 0; font-size: var(--text-small); color: var(--text-200); }

/* Extra-Benefits als schmale Pillen-Karten — seit 2026-09-18 auf
   /karriere/ NICHT mehr eingebunden (die fünf Extras sind Benefit-
   Karten im Raster, Marie: „alle gleich groß"). Regeln bleiben
   reaktivierbar; Markup in git bis ee36811. */
.ka-extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 18px);
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.ka-extra {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  /* BG/Border/Schatten kommen aus dem Karten-Dunkel-Insel-Rezept oben */
  flex: 0 1 340px;
}

.ka-extra__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  color: var(--accent-hover);
}

.ka-extra__title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--heading-color);
}

.ka-extra__text {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-200);
}

/* ============================================================
   06 — Aktuell offene Positionen
   ============================================================ */
.ka-stellen { padding-block: var(--section-py); }

/* Recruitee-Jobs-Widget (Marie 2026-07-31): die Stellen kommen live
   aus Recruitee — das Widget rendert eigenes Markup in den Container.
   Farben/Font setzt das Init-JS per themeVars (CI-Werte, theme-aware
   re-init in scripts.html); hier nur Rahmen-Layout. */
.ka-recruitee {
  /* kein 940px-Deckel mehr (Boxbreiten-Runde 2026-09-09) */
  margin-inline: auto;
  min-height: 220px; /* reserviert Hoehe gegen Lade-Shift */
}

/* Fallback-Zeile, wenn widget.js nicht laedt (Adblocker/noscript) */
.ka-recruitee__fallback {
  margin: 0;
  text-align: center;
  color: var(--text-200);
}

.ka-recruitee__fallback a {
  color: var(--accent-hover);
  font-weight: var(--weight-semibold);
}

.ka-jobs__foot {
  max-width: 720px;
  margin: clamp(26px, 3vw, 38px) auto 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--text-200);
}

.ka-jobs__link {
  display: inline;
  padding: 0;
  margin-left: 4px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--weight-semibold);
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ============================================================
   07 — Das sagt unser Team (Wistia-Statements)
   ============================================================ */
.ka-stimmen { padding-block: var(--section-py); }

.ka-stimmen__grid {
  display: grid;
  /* Kein 1080px-Deckel mehr (2026-09-09). auto-fit mit 380px-Minimum ergäbe
     auf Container-Breite bei 1376–1600px DREI Spalten + eine Waise — deshalb
     feste Stufen: 1 / 2 (ab 760px) / 4 (ab 1500px, dann alle vier
     Statements in einer Reihe, je ≥323px). */
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-inline: auto;
}
@media (min-width: 760px)  { .ka-stimmen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .ka-stimmen__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ka-voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 26px 54px -38px rgba(var(--shadow-rgb), 0.6);
}

.ka-voice__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-0);
  overflow: hidden;
}

.ka-voice__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ka-voice:hover .ka-voice__poster { transform: scale(1.03); }

.ka-voice__media[data-mounted="true"] .ka-voice__poster,
.ka-voice__media[data-mounted="true"] .ka-voice__play { display: none; }

.ka-voice__media .wistia_responsive_padding { position: absolute; inset: 0; }

.ka-voice__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(58px, 6vw, 72px);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: rgba(12, 20, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  cursor: pointer;
  transition: transform 260ms ease, background 260ms ease;
}

.ka-voice__play svg { width: 26px; height: 26px; margin-left: 2px; }

.ka-voice__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(12, 20, 28, 0.75);
}

.ka-voice__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(16px, 1.8vw, 22px);
}

.ka-voice__name {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--heading-color);
}

.ka-voice__role { font-family: var(--font-ui); font-size: var(--text-small); color: var(--text-200); }

@media (prefers-reduced-motion: reduce) {
  .ka-voice__poster { transition: none; }
}

/* ============================================================
   08 — Unsere Prinzipien: Kachel-Raster (3 + 2)
   Seit 18.09.2026 wieder das Kachel-Raster (Marie: „dieses
   Karussell in dem Raum wieder wegmachen und das dann als Kacheln
   wieder darstellen"). Der Galerie-Raum der Runden 1–6 (Wand in
   Lichtschichten, Boden mit Fugen, Korn, Vignette, Säule, Trommel
   mit Doppelring, Vorhang-Pin + .ka-flow-Schürze — 28.08. bis
   02.09.) ist RESTLOS raus, samt Engine [data-ka-saeule] in
   scripts.html; Rückbau = git (ee36811). CSS = die Fassung vor dem
   28.08. (b30dfad): Karten im geteilten Karriere-Dunkel-Karten-
   Rezept (.ka-prinzip steht wieder in der :is()-Liste oben und in
   den Reveal-Listen), Maus-Tilt über [data-tilt], zwei breite
   Karten in Reihe 2. Die Section bleibt die Dunkel-Insel des
   Band-Tauschs vom 02.09. (Einblicke hell, Prinzipien dunkel) und
   bezieht ihren Grund jetzt aus der geteilten Insel-Liste am
   Datei-Ende — Charcoal-Karten auf Charcoal-Band, dieselbe
   Schichtung wie die FAQ-Karten auf der dunklen Startseiten-FAQ.
   ============================================================ */
.ka-prinzipien { padding-block: var(--section-py); }

.ka-prinzipien__intro {
  margin: 0;
  max-width: 68ch;
  color: var(--text-200);
}

.ka-prinzipien__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.ka-prinzip {
  --mx: 0; --my: 0; --tilt-max: 5deg; --lift: 0px;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: var(--radius-lg);
  /* BG/Border/Schatten kommen aus dem Karten-Dunkel-Insel-Rezept oben */
  transform-style: flat;
}

/* Die beiden breiten Karten der zweiten Reihe sind 1,6× so breit wie
   die schmalen — flacherer Zuschnitt als 16:10, damit das Raster nicht
   kippt. Marie 2026-07-31: hoeher als die urspruenglichen 2.55:1,
   damit mehr vom Foto sichtbar ist (beide Karten wachsen gleich →
   die Reihe bleibt in sich ausbalanciert). Die Quellmotive 04/05
   sind 2.33:1 und werden im 1.9:1-Rahmen nur seitlich beschnitten,
   die drei 3:2-Motive im 16:10-Rahmen kaum — Standard-Mitte passt. */
.ka-prinzip--wide { grid-column: span 3; }
.ka-prinzip--wide .ka-prinzip__photo { aspect-ratio: 1.9 / 1; }

.ka-prinzip:hover { --lift: -3px; border-color: var(--glass-border-hover); }

/* Tilt-Transform in der .is-revealed-Regel (§0a-Tilt-Regel: sonst
   kollidiert er mit dem Reveal-translate) */
[data-reveal].is-revealed .ka-prinzip {
  transform:
    perspective(900px)
    translateY(var(--lift))
    rotateY(calc(var(--mx) * var(--tilt-max)))
    rotateX(calc(var(--my) * var(--tilt-max) * -1));
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms ease,
    border-color 220ms ease;
}

[data-reveal].is-revealed .ka-prinzip.is-tilting { transition: transform 140ms ease, border-color 220ms ease; }

.ka-prinzip__photo {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}

.ka-prinzip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ka-prinzip__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--heading-color);
}

.ka-prinzip__text { margin: 0; font-size: var(--text-small); color: var(--text-200); }

@media (max-width: 1024px) {
  .ka-prinzipien__grid { grid-template-columns: repeat(2, 1fr); }
  .ka-prinzip,
  .ka-prinzip--wide { grid-column: span 1; }
}

@media (max-width: 640px) {
  .ka-prinzipien__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-revealed :is(.ka-benefit, .ka-prinzip) { transform: none; transition: none; }
  .ka-benefit--featured::before { animation: none; background-position: 50% 0, 0 0; }
  :is(.ka-benefit, .ka-extra)::after { transition: none; }
  .ka-benefit__badge,
  .ka-extra__badge { transition: none; }
  :is(.ka-benefit, .ka-extra):hover :is(.ka-benefit__badge, .ka-extra__badge) { transform: none; }
}

/* ============================================================
   09 — Dein Bewerbungsprozess (Redesign 2026-07-31, Marie
   „hochwertiger und schöner"): vertikale Zickzack-Timeline.
   Mittellinie mit wachsendem Akzent-Fill (scale-Property, damit
   Desktop-Zentrierung und Mobile-Links-Anker dieselbe Animation
   teilen), feste dunkle Charcoal-Nummern-Discs (Geraete-Farben in
   BEIDEN Themes, analog .maweg__disc/.bsys-Discs §5a), Schritt-
   Karten im geteilten Dunkel-Karten-Rezept (siehe :is-Liste am
   KARRIERE-Block-Anfang), abwechselnd links/rechts. Eigener
   Reveal (Linie → Discs → Karten gestaffelt) statt des
   generischen .ka-*-Staggers.
   ============================================================ */
.ka-prozess {
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;
}

/* Dezenter Akzent-Schein hinter der Timeline (Marie 2026-07-31:
   „sonst zu einfach") — zwei weiche radiale Tints, theme-aware
   ueber --glow-rgb, unter dem Content. */
.ka-prozess::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 34% at 16% 22%, rgba(var(--glow-rgb), 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 42% 36% at 86% 74%, rgba(var(--glow-rgb), 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ka-prozess > .container { position: relative; }

.ka-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  /* kein 1060/1300px-Deckel mehr (Boxbreiten-Runde 2026-09-09): die
     Zickzack-Karten laufen bis an die Container-Kante */
  margin: 0 auto;
  padding: clamp(6px, 1vw, 12px) 0;
  list-style: none;
}

/* Verschraenkung (Marie 2026-07-31, „Abstaende verringern — Kacheln
   koennen hoeher gehen"): weil die Karten abwechselnd links/rechts
   liegen, zieht jeder Folgeschritt per negativem Abstand in die Hoehe
   des vorherigen hinein — die Timeline wird deutlich kompakter, ohne
   dass sich Karten beruehren (getrennte Spalten). Mobile (einspaltig)
   setzt das zurueck. */
.ka-step + .ka-step { margin-top: clamp(-88px, -6.5vw, -48px); }

/* Mittellinie: Basis + wachsender Akzent-Fill */
.ka-steps::before,
.ka-steps::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
}

.ka-steps::before { background: var(--glass-border); }

.ka-steps::after {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 14px rgba(var(--glow-rgb), 0.35);
  scale: 1 0;
  transform-origin: 50% 0;
  transition: scale 1800ms cubic-bezier(0.16, 1, 0.3, 1) 260ms;
}

[data-reveal].is-revealed .ka-steps::after { scale: 1 1; }

.ka-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(76px, 9vw, 116px) minmax(0, 1fr);
  align-items: center;
}

/* Verbindungs-Haarlinie Disc → Karte */
.ka-step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: clamp(38px, 4.5vw, 58px);
  height: 1px;
  background: var(--glass-border);
}

.ka-step:nth-child(even)::after { right: auto; left: 50%; }

/* Nummern-Disc auf der Linie — feste dunkle Geraete-Flaeche in
   BEIDEN Themes (weisse Display-Ziffer bleibt lesbar) */
.ka-step__node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: clamp(52px, 5vw, 64px);
  height: clamp(52px, 5vw, 64px);
  border-radius: var(--radius-full);
  background: linear-gradient(160deg, #21323F 0%, #16242F 55%, #0E1822 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 5px rgba(var(--glow-rgb), 0.07),
    0 14px 30px -18px rgba(var(--shadow-rgb), 0.65);
  z-index: 1;
  opacity: 0;
  scale: 0.55;
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    scale 520ms cubic-bezier(0.34, 1.4, 0.44, 1);
  transition-delay: calc(var(--i, 0) * 240ms + 320ms);
}

[data-reveal].is-revealed .ka-step__node { opacity: 1; scale: 1; }

.ka-step__num {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1;
  color: var(--white);
}

/* Schritt-Karte — Dunkel-Karten-Rezept + Slide-in von der eigenen Seite */
.ka-step__card {
  --ka-card-py: clamp(20px, 2.2vw, 30px);
  --ka-card-px: clamp(20px, 2.4vw, 32px);
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 470px);
  padding: var(--ka-card-py) var(--ka-card-px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  translate: -26px 0;
  transition:
    opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 640ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay:
    calc(var(--i, 0) * 240ms + 440ms),
    calc(var(--i, 0) * 240ms + 440ms),
    0ms,
    0ms;
}

.ka-step:nth-child(even) .ka-step__card {
  grid-column: 3;
  justify-self: start;
  translate: 26px 0;
}

[data-reveal].is-revealed .ka-step__card { opacity: 1; translate: 0 0; }

.ka-step__card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 40px rgba(var(--shadow-rgb), 0.4);
}

/* Kopfbild der Karte (Marie 2026-07-31: „ein paar Bilder") — vollflaechig
   bis an die Kartenkanten (negative Margins gegen das Karten-Padding),
   Bottom-Scrim fuer den Uebergang in die dunkle Karte, sanfter Zoom
   beim Karten-Hover. Ausschnitt leicht nach oben geankert (Koepfe,
   §0a-Kopf-Anker-Lehre). */
.ka-step__media {
  margin: calc(-1 * var(--ka-card-py)) calc(-1 * var(--ka-card-px)) var(--space-4);
  height: clamp(140px, 15vw, 185px);
  overflow: hidden;
  position: relative;
}

.ka-step__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 22, 34, 0) 55%, rgba(13, 22, 34, 0.55) 100%);
  pointer-events: none;
}

.ka-step__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ka-step__card:hover .ka-step__media img { transform: scale(1.04); }

/* Schritt 01 zeigt ein Hochformat-Motiv — Ausschnitt ganz oben ankern,
   sonst wird der Kopf angeschnitten (Marie 2026-08-03). Unten faellt
   nur Schreibtisch weg. */
.ka-step:first-child .ka-step__media img { object-position: 50% 3%; }

/* Kopfzeile der Karte: Icon-Badge UND Titel in EINER Zeile (Marie
   2026-08-03: „Section ist in der Hoehe sehr hoch") — spart gegenueber
   dem gestapelten Badge rund 50px Bauhoehe pro Karte. */
.ka-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ka-step__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(var(--glow-rgb), 0.12);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  color: var(--accent-hover);
}

.ka-step__badge .icon { width: 22px; height: 22px; }

.ka-step__title {
  margin: 0;
  /* keine Auto-Trennung in der schmalen Textspalte (§5a-Muster) —
     sonst bricht „Bewerbungsge-spraech" mit Bindestrich um */
  hyphens: manual;
  font-family: var(--font-ui);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: var(--weight-bold);
  color: var(--heading-color);
}

.ka-step__text {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.65;
  color: var(--text-200);
}

.ka-prozess__cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 48px);
}

/* Ab 1180px: Bild und Text NEBENEINANDER in der Karte (Marie 2026-08-03,
   „Bild und Text nebeneinander statt oben drueber — Section ist in der
   Hoehe sehr hoch"). Das Foto sitzt jeweils auf der AUSSENseite, der
   Text zur Mittellinie hin — so laeuft der Blick an der Timeline
   entlang durch die Texte. Unter 1180px bleibt die gestapelte Karte
   (Foto oben): schmaler wird die Textspalte so eng, dass die Karte
   wieder hoch laeuft — und das Foto damit zum Hochkant-Streifen
   (Marie 2026-08-03: „Bilder breiter, sind zu hochkant"). */
@media (min-width: 1180px) {

  .ka-step { grid-template-columns: minmax(0, 1fr) clamp(68px, 6.5vw, 96px) minmax(0, 1fr); }

  /* Karten sind jetzt flach — entsprechend weniger Verschraenkung */
  .ka-step + .ka-step { margin-top: clamp(-62px, -4.2vw, -32px); }

  .ka-step__card {
    display: grid;
    grid-template-columns: minmax(180px, 0.82fr) minmax(0, 1fr);
    /* 100 % statt min(100%, 604px) (Boxbreiten-Runde 2026-09-09, Guardian):
       mit dem entdeckelten Container blieb die Karte sonst 604px in einer
       ~690px-Spalte stehen = 86px Luft zur Container-Kante. Jetzt füllt sie
       ihre Spalte (510px bei 1180, 640 bei 1440, 690 bei 1476 Innenbreite). */
    width: 100%;
    padding: 0;
  }

  .ka-step__media {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    height: auto;
    min-height: 190px;
  }

  /* Bild absolut, damit seine EIGENhoehe die Karte nicht aufblaeht:
     ein Hochformat-Motiv wuerde sonst ueber `height:100%` seine
     intrinsische Hoehe in die Grid-Zeile schreiben (Karte 1). */
  .ka-step__media img {
    position: absolute;
    inset: 0;
  }

  /* Scrim laeuft jetzt seitlich in die Textflaeche statt nach unten */
  .ka-step__media::after {
    background: linear-gradient(90deg, rgba(13, 22, 34, 0) 52%, rgba(13, 22, 34, 0.62) 100%);
  }

  .ka-step__body {
    grid-column: 2;
    grid-row: 1;
    padding: var(--ka-card-py) var(--ka-card-px);
  }

  /* Rechte Karten gespiegelt: Foto aussen (rechts), Text zur Linie —
     die Spaltenbreiten drehen mit, sonst landet der Text in der
     schmalen Foto-Spalte und die Karte wird wieder hoch. */
  .ka-step:nth-child(even) .ka-step__card {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.82fr);
  }

  .ka-step:nth-child(even) .ka-step__media { grid-column: 2; }
  .ka-step:nth-child(even) .ka-step__body { grid-column: 1; }
  .ka-step:nth-child(even) .ka-step__media::after {
    background: linear-gradient(270deg, rgba(13, 22, 34, 0) 52%, rgba(13, 22, 34, 0.62) 100%);
  }
}

/* Gestapelte Karte (< 1180px, inkl. Mobil): Foto in echtem Bildformat
   statt 140-185px-Streifen — der Streifen schnitt Koepfe ab (Marie
   2026-09-18). Ausschnitt oben geankert, unten faellt nur Tisch weg. */
@media (max-width: 1179px) {
  .ka-step__media { height: auto; aspect-ratio: 4 / 3; }
  .ka-step__media img { object-position: 50% 12%; }
  .ka-step:first-child .ka-step__media { aspect-ratio: 1 / 1; }
  .ka-step:first-child .ka-step__media img { object-position: 50% 3%; }
}

/* Mobile: Linie ankert links, Karten rechts daneben */
@media (max-width: 820px) {
  .ka-steps { gap: var(--space-6); }
  .ka-step + .ka-step { margin-top: 0; }
  .ka-steps::before,
  .ka-steps::after { left: 24px; translate: 0 0; }
  .ka-step {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: start;
  }
  .ka-step::after { display: none; }
  .ka-step__node {
    grid-column: 1;
    width: 48px;
    height: 48px;
  }
  .ka-step__card,
  .ka-step:nth-child(even) .ka-step__card {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
    translate: 18px 0;
  }
  [data-reveal].is-revealed .ka-step__card { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ka-steps::after { transition: none; scale: 1 1; }
  .ka-step__node { transition: none; opacity: 1; scale: 1; }
  .ka-step__card { transition: none; opacity: 1; translate: 0 0; }
  .ka-step__card:hover { transform: none; }
  .ka-step__media img { transition: none; }
  .ka-step__card:hover .ka-step__media img { transform: none; }
}

/* ============================================================
   10 — Personen-Sektionen (Erich / Fabio)
   ============================================================ */
.ka-person-sec { padding-block: var(--section-py); }

/* Portrait gedeckelt (wie früher der Team-Slider): sonst wird das 3:4-Bild
   ueber 700px hoch und die Copy-Spalte daneben wirkt leer. */
.ka-person-sec__layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.ka-person-sec__layout--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }

.ka-person-sec__photo {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 80px -50px rgba(var(--shadow-rgb), 0.8);
}

/* 2:3-Portraits im 3:4-Rahmen: Ausschnitt oben buendig ankern, damit
   die Koepfe nicht angeschnitten werden — beschnitten wird unten
   (Marie 2026-08-03). */
.ka-person-sec__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
}

.ka-person-sec__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }

.ka-person-sec__title {
  margin: 0;
  font-size: var(--text-h2);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  color: var(--heading-color);
  hyphens: manual;
}

.ka-person-sec__text { margin: 0; max-width: 64ch; color: var(--text-200); }

/* Kontakt-Karten */
.ka-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.ka-contact__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: background 220ms ease, border-color 220ms ease;
}

.ka-contact__card:hover { background: var(--glass-bg-hover); border-color: rgba(var(--glow-rgb), 0.34); }

.ka-contact__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--glow-rgb), 0.14);
  border: 1px solid rgba(var(--glow-rgb), 0.24);
  color: var(--accent-hover);
}

.ka-contact__body { display: flex; flex-direction: column; gap: 2px; }

.ka-contact__label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-300);
}

.ka-contact__value {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--heading-color);
}

/* WhatsApp-Button: Marken-Gruen (§5a — Marken-Authentizitaet wie
   Trustpilot/Google, gilt nur fuer diesen Button) */
.ka-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 26px;
  border-radius: var(--radius-full);
  background: #25D366;
  color: #052E16;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background 220ms ease, transform 220ms ease;
}

.ka-whatsapp:hover { background: #1FBE5B; transform: translateY(-2px); }
.ka-whatsapp .icon { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .ka-person-sec__layout,
  .ka-person-sec__layout--reverse { grid-template-columns: 1fr; }
  .ka-person-sec__photo { max-width: 420px; }
  .ka-person-sec__layout--reverse .ka-person-sec__photo { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ka-whatsapp:hover { transform: none; }
}

/* ============================================================
   11 — Unser Standort
   ============================================================ */
.ka-standort { padding-block: var(--section-py); }

.ka-standort__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}

.ka-standort__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.ka-standort__text { margin: 0; color: var(--text-200); }

.ka-standort__claim {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  color: var(--heading-color);
}

.ka-standort__adresse {
  margin: 0;
  font-style: normal;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--text-200);
}

.ka-standort__adresse strong { display: block; color: var(--heading-color); font-weight: var(--weight-bold); }

.ka-standort__map {
  position: relative;
  margin-top: auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.ka-standort__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ka-standort__photo {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 320px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  box-shadow: 0 34px 70px -46px rgba(var(--shadow-rgb), 0.7);
}

.ka-standort__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   LIGHT MODE — Komponenten-Overrides (§5a-Abweichung, Marie 2026-06-11)
   Globale Token-Überschreibung: html[data-theme="light"] direkt
   nach :root. Hier leben NUR Stellen, deren Dark-Werte hartkodiert
   sind (Glas-Header, Dropdown-Panel, Overlays …) — gesammelt am
   Datei-Ende, Reihenfolge spiegelt die Section-Reihenfolge.
   Neue Sections: zuerst Tokens nutzen, nur Ausnahmen hier ergänzen.
   ============================================================ */

/* — Navbar / Header — */
html[data-theme="light"] .navbar {
  background: rgba(249, 250, 251, 0.82); /* Surface-2-Ton + Transparenz für Glas */
  border-bottom: 1px solid rgba(16, 24, 32, 0.10);
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link:focus-visible {
  background: var(--glass-bg);
}

html[data-theme="light"] .navbar__phone {
  background: var(--glass-bg);
}

html[data-theme="light"] .navbar__phone-number {
  text-decoration-color: rgba(16, 24, 32, 0.40);
}

html[data-theme="light"] .navbar__phone:hover {
  background: var(--glass-bg-hover);
  color: var(--text-100);
}

/* Mobil (< 1180 px): KEINE Pille um die Nummer — nur Icon + unterstrichene
   Nummer (Marie 2026-09-18). Die Basis-Mobilregel oben setzt die Fläche schon
   auf transparent, verliert aber gegen diesen Light-Override (0,2,0 gegen
   0,1,0 — eine Media-Query hebt die Spezifität nicht). Deshalb hier die
   gleichspezifische Gegenregel; Unterstrich eine Stufe kräftiger, weil er
   ohne Fläche allein die Klickbarkeit anzeigt. */
@media (max-width: 1179px) {
  html[data-theme="light"] .navbar__phone,
  html[data-theme="light"] .navbar__phone:hover {
    background: transparent;
    border-color: transparent;
  }
  html[data-theme="light"] .navbar__phone-number {
    text-decoration-color: rgba(16, 24, 32, 0.55);
  }
}

html[data-theme="light"] .navbar__hamburger:hover {
  background: var(--glass-bg);
}

/* Dropdown: dunkles Glas-Panel → weißes Panel mit Light-Schatten-Rezept */
html[data-theme="light"] .dropdown {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(249, 250, 251, 0.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(var(--shadow-rgb), 0.06),
    0 12px 36px rgba(var(--shadow-rgb), 0.14);
}

html[data-theme="light"] .dropdown__item:hover,
html[data-theme="light"] .dropdown__item:focus-visible {
  background: var(--glass-bg);
  color: var(--text-100);
}

/* Mobile-Overlay-Nav: dunkler Schleier → heller Schleier */
html[data-theme="light"] .mobile-nav {
  background: rgba(238, 241, 243, 0.92);
}

html[data-theme="light"] .mobile-nav__link:hover,
html[data-theme="light"] .mobile-nav__summary:hover {
  background: var(--glass-bg);
  color: var(--text-100);
}

html[data-theme="light"] .mobile-nav__phone {
  background: var(--glass-bg);
  color: var(--text-100);
}

html[data-theme="light"] .mobile-nav__phone:hover {
  background: var(--glass-bg-hover);
}

/* — Footer: hartkodierte Weiß-Texte + Silver-Blue-Tint-Borders → Tinte/Glas — */
html[data-theme="light"] .site-footer {
  color: var(--text-200);
  border-top-color: var(--glass-border);
}

html[data-theme="light"] .site-footer__claim,
html[data-theme="light"] .site-footer__links a,
html[data-theme="light"] .site-footer__legal a {
  color: var(--text-200);
}

html[data-theme="light"] .site-footer__contact-item {
  color: var(--text-100);
}

html[data-theme="light"] .site-footer__disclaimer {
  color: var(--text-300);
  border-top-color: var(--glass-border);
}

html[data-theme="light"] .site-footer__seals {
  border-top-color: var(--glass-border);
}

html[data-theme="light"] .site-footer__copyright {
  color: var(--text-300);
}

/* (Section 16: der frühere .ns-station__title/.ns-finale__title-Override
   entfiel 2026-06-19 — die Titel beziehen ihre Farbe jetzt direkt aus
   var(--heading-color) in der Basis-Regel, die Home-Dark-Inseln drehen
   das Token lokal auf Weiß. Kein separater Override mehr nötig.) */

/* — Sections 21–24 (Gründer-Stories + Video-Showroom): die 5 weißen
     Meta-Sterne (Marie 2026-05-28, Dark-Deko auf Video-Kacheln)
     wären auf hellem Grund unsichtbar → Deep Navy.
     AUSNAHME .showroom--duo (Animationsvideos): die Sektion bleibt
     im Light-Theme eine Dunkel-Insel → dort blieben die Navy-Sterne
     unsichtbar auf Dunkel, sie behalten ihr Weiß aus der Basis-Regel
     (Band-Zuordnung Videoproduktion, Marie 2026-07-31) — */
html[data-theme="light"] .gstory__rating,
html[data-theme="light"] .showroom:not(.showroom--duo) .showroom__rating {
  color: var(--deep-navy);
}

/* — Playlist (Section 22/23): Hover-Tint + Scrollbar invertieren
     (Dark-Werte sind weiße Alphas → auf Hell unsichtbar) — */
html[data-theme="light"] .showroom__pl-item:hover,
html[data-theme="light"] .showroom__pl-item:focus-visible {
  background: rgba(var(--shadow-rgb), 0.05);
}

html[data-theme="light"] .showroom__playlist {
  scrollbar-color: rgba(var(--shadow-rgb), 0.28) transparent;
}

html[data-theme="light"] .showroom__playlist::-webkit-scrollbar-thumb {
  background: rgba(var(--shadow-rgb), 0.22);
}


/* — S3 „Kennst du das?" (.painvoices): keine Light-Mode-Overrides
     mehr nötig — alle Farben laufen über theme-fähige Tokens
     (Payoff ohne Glas, Quote-Deko = --accent-hover, Foto ohne Filter). — */


/* ============================================================
   LIGHT-MODE Section-Rhythmus — Startseite + Leistungsseiten
   (Marie 2026-06-18 / AG+MA 2026-06-22 / Video+Selbstständig
   2026-06-22, §5a)
   Marie: das Light-Theme war flächig weiß + überall Blau. Ziel
   (Orientierung saleshax.de): ein abwechselndes Band-Layout —
   Hell ↔ kühles Grau ↔ dunkle Insel — mit deutlich reduziertem
   Blau auf den hellen Bändern. Blau/Cyan lebt bewusst wieder voll
   auf den dunklen Inseln (Original-Dark-Look).
   Gilt für body.page-home + .page-auftragsgewinnung +
   .page-mitarbeitergewinnung + .page-videoproduktion +
   .page-selbststaendig-machen (gemeinsamer :is()-Scope für die
   geteilten Section-Klassen). NUR Light-Theme. Dark-Theme + alle
   übrigen Unterseiten bleiben unverändert.
   Seiten-spezifische Abweichungen (andere Reihenfolge / eigene
   Sections) als Override-Blöcke am Block-Ende:
     · AG  — Bese-System grau, App-Steuerung weiß
     · MA  — .recruit als dunkle Insel (Lupe-Visual)
     · Video — Hero + .showroom--duo (Animation) dunkle Inseln,
                Imagevideos + Recruiting + .drehtermin hell
                (Marie 2026-07-31)
     · Selbst — .probleme/.gstory/.capacity dunkle Inseln
                (.gweg-Bento bewusst hell, Marie 2026-06-29)
     · Home  — DREI lange Bögen statt verstreuter Inseln (Rhythmus-
                Runde Marie 2026-09-02, Saleshax-Schema): Trust +
                Reviews + App-Steuerung dunkel, FAQ grau — eigener
                Abweichungs- + Insel-Block weiter unten
   ============================================================ */

/* ---- 1) Weniger Blau auf den hellen Bändern --------------------
   Eyebrow-Punkt + FAQ-Chevron + Schritt-Zahlen entsättigt; die
   CTAs (btn-accent) behalten ihr Akzent-Blau.
   Der Headline-Italic-Gradient läuft seit 2026-09-02 (Marie: „nicht
   der richtige blaue Verlauf aus der CI") wieder auf den
   CI-04a-Light-Werten Navy #1F3447 → Markenblau #2C6EA9 — die erben
   die Band-Seiten aus dem html[data-theme="light"]-Token-Override am
   Dateianfang; der frühere Slate-Override (#1B2A38 → #34536E,
   „Weniger Blau"-Runde 2026-06-18) ist damit aufgehoben. Dunkel-Inseln
   re-deklarieren weiterhin Silver-Blue → Cyan lokal. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .eyebrow__dot,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .eyebrow__dot::after {
  background: rgba(var(--shadow-rgb), 0.60);   /* Slate-Punkt statt Blau */
}
/* FAQ-Fragen als solide dunkle Karten im Light-Theme (Marie 2026-06-19):
   die dark-first Glas-Basis (rgba …,0.42) ließ den weißen Band-BG
   durchscheinen → ausgewaschene Slate-Karten mit schlecht lesbarem
   weißem Text. Jetzt eine kompakte Dark-Token-Insel JE Karte (analog
   zu den großen Inseln Cases/Bese-AI, aber nur auf .faq-item statt
   der ganzen Section — die Intro-Spalte bleibt auf dem hellen Band;
   das gilt seit der Rhythmus-Runde 2026-09-02 AUCH auf der Startseite,
   dort ist das Band seit der Nachrunde Weiß wie überall): solider
   dunkler Grund, Frage (weiß), Antwort (hell) und Chevron (Cyan, erbt
   die Insel-Tokens → kein eigener Icon-Override mehr nötig). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .faq-item {
  --text-200: rgba(255, 255, 255, 0.65);
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  background: linear-gradient(180deg, #26282C 0%, #1B1D20 100%);
  border-color: rgba(255, 255, 255, 0.09);
}
/* Geöffneter Zustand: etwas hellerer dunkler Grund; Cyan-Border-Glow +
   Schatten kommen aus der Basis-Regel .faq-item[open] und greifen über
   die Insel-Tokens (--glow-rgb/--shadow-rgb) automatisch korrekt. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .faq-item[open] {
  background: linear-gradient(180deg, #2C2F34 0%, #202327 100%);
}
/* Schritt-Großzahlen (01/02/03): blauer Verlauf → weiche Tinte-Geister */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-station__numeral {
  background: linear-gradient(180deg,
    rgba(var(--shadow-rgb), 0.16) 0%,
    rgba(var(--shadow-rgb), 0.40) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Nächste-Schritte-Karten als dunkle Inseln im Light-Theme (Marie 2026-06-19):
   Die drei Schritt-Karten waren halbtransparent (→ ausgewaschenes Slate auf
   dem weißen Band), die große Finale-Karte ist zwar schon opak dunkel, aber
   der globale Titel-Override (#ECEFF8 → --heading-color) zog die Überschriften
   auf dunkle Tinte → auf dunklem Grund unlesbar. Lösung: pro Karte eine
   Dark-Token-Insel (analog FAQ/Cases/Bese-AI). --heading-color: weiß dreht den
   Titel-Override wieder auf hell, --em-grad-* bringt die Finale-„möglich"-
   Italic als helles Cyan, --text-100 hält die Telefonnummer (Schritt 1)
   lesbar; Chips/Dots/Schatten über --accent-hover/--glow-rgb/--shadow-rgb.
   Die großen Geister-Ziffern (.ns-station__numeral) liegen außerhalb der
   Karten und bleiben als weiche dunkle Tinte auf dem Band (Override oben). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-station__card,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-finale__card {
  --heading-color: var(--white);
  --text-100: rgba(255, 255, 255, 0.92);
  --accent-hover: #4DA8DA;
  --silver-blue: #B3CCDF;
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
}
/* Schritt-Karten solide dunkel machen (Finale-Karte ist bereits opak).
   §5a: feste Dark-Insel-Hex (#26282C/#1B1D20, Charcoal-Kachel-Familie)
   analog FAQ-/Cases-/Bese-AI-Insel — kein CI-Token deckt solide
   Gradient-Stops ab. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-station__card {
  background: linear-gradient(160deg, #26282C 0%, #1B1D20 100%);
  border-color: rgba(255, 255, 255, 0.09);
}

/* Spine + Knoten sichtbar machen (Marie 2026-06-19): Schiene, Fortschritts-
   Fill und Finale-Knoten waren in Weiß gehalten → auf dem weißen Band
   unsichtbar bzw. (Finale-Punkt) ein weißer Fleck. Im Light-Theme:
   - Track = feine dunkle Linie (--shadow-rgb)
   - Fill (Scroll-Fortschritt) = Brand-Blau→Cyan-Akzent statt Weiß
   - Stations-Knoten bleiben dunkel (sichtbar), bekommen aber einen
     Brand-Blau-Ring/-Glow statt des unsichtbaren weißen
   - Finale-Knoten von Weiß auf dunkle Füllung + Akzent-Ring gedreht
   - Puls-Ringe von Weiß auf Akzent. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-spine__rail-track {
  background: linear-gradient(180deg,
    rgba(var(--shadow-rgb), 0.10) 0%,
    rgba(var(--shadow-rgb), 0.26) 20%,
    rgba(var(--shadow-rgb), 0.26) 80%,
    rgba(var(--shadow-rgb), 0.10) 100%);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-spine__rail-fill {
  background: linear-gradient(180deg, #2C6EA9 0%, #4DA8DA 100%);
  box-shadow:
    0 0 10px rgba(var(--glow-rgb), 0.35),
    0 0 24px rgba(var(--glow-rgb), 0.18);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-station__node {
  border-color: rgba(var(--glow-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 6px 18px -8px rgba(var(--shadow-rgb), 0.5);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-station.is-revealed .ns-station__node {
  border-color: rgba(var(--glow-rgb), 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 4px rgba(var(--glow-rgb), 0.12),
    0 0 18px -2px rgba(var(--glow-rgb), 0.5);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-finale__node {
  /* #33373D = Node-Basisfarbe (Charcoal, opak), #1C1F22 = --surface-2 */
  background: radial-gradient(circle at 35% 30%, #33373D 0%, #1C1F22 100%);
  border-color: rgba(var(--glow-rgb), 0.6);
  box-shadow:
    0 0 0 6px rgba(var(--glow-rgb), 0.10),
    0 0 26px rgba(var(--glow-rgb), 0.4);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-station__node-pulse,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-finale__node-pulse {
  border-color: rgba(var(--glow-rgb), 0.5);
}

/* ---- 2) Band-Rhythmus: Hell ↔ kühles Grau --------------------- */
/* BRIGHT — frisches Weiß (Kennst-du-das, Bese-System, Schritte,
   Passt-das-zu-dir [nur Startseite], Magazin [nur Branchen]).
   .hero steht seit 2026-08-03 NICHT mehr hier: Marie wollte ALLE
   Hero-Sections auch in der hellen Version dunkel hinterlegt — sie
   laufen jetzt über die konsolidierte Dunkel-Hero-Regel weiter unten
   in diesem Block („Alle Heroes = Dunkel-Insel").
   .faq steht NICHT hier: ALLE Seiten bekommen ihr FAQ-Weiß aus der
   eigenen Regel direkt darunter — seit der Rhythmus-Nachrunde
   2026-09-02 auch die Startseite (vorher dort Dunkel-Sektion, dann
   für eine Runde MIST-grau).
   .reviews gehört ebenfalls NICHT hierher: Unterseiten MIST-Grau aus
   dem Block darunter; die Startseite bekommt ihr Reviews-Grau aus dem
   Block „Flächen flach" am Dateiende (Marie 2026-09-08 — der die
   Startseiten-Bänder final setzt und diese Zeilen überschattet). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .painvoices,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .bsys,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .magazin,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .fitcheck,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .next-steps {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
/* FAQ = BRIGHT (Weiß) — seit der Rhythmus-Nachrunde 2026-09-02 auch
   auf der Startseite (Marie: „die Aufteilung von schwarz, weiß und
   grau" gefiel noch nicht → Grau raus aus den Licht-Strecken; davor
   war die Startseiten-FAQ Dunkel-Sektion [Marie 2026-07-08], dann
   für eine Runde MIST-grau). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .faq {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
/* MIST — neutrales Grau-Band (Trust, App-Steuerung, Über uns, Reviews).
   Auf der STARTSEITE setzt der Block „Flächen flach" am Dateiende die
   Bänder final (er überschattet diese Zeilen) — seit Marie 2026-09-08
   („ab und zu graue Hintergründe wie bei den anderen Seiten, sonst zu
   viele weiße am Anfang") tragen dort Reviews, Bese-System + Passt-das
   flaches MIST-Grau. Diese MIST-Zeilen gelten also nur für die
   Unterseiten. App-Steuerung ist auf der Startseite Teil des dunklen
   System-Bogens (Insel-Block „Startseite: seiten-eigene Dunkel-
   Sektionen"); Trust + Über-uns bleiben dort weiß.
   Marie 2026-06-18: vorher kühl-bläulich (Hue ~210°) → jetzt nahezu
   neutrales Grau, damit die hellen Bänder nicht blaustichig wirken. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .trust,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .app-control,
/* .page-mitarbeitergewinnung fehlt bewusst: .about bekommt dort sein Grau
   seit 24.09.2026 aus dem Block „ma-rhythmus-r24“ am Dateiende (vorher
   Dark-Island).
   .page-home fehlt seit der Rhythmus-Nachrunde 2026-09-02 ebenfalls:
   Über-uns ist auf der Startseite WEISS (Abweichungs-Block). */
html[data-theme="light"] :is(.page-auftragsgewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .about,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .press {
/* .reviews raus 24.09.2026: auf allen Seiten läuft jetzt die Bewertungs-Wand .rv3 (section-stimmen-home.html) auf Weiß wie auf der Startseite — Marie: „überall einheitlich“. */
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
/* Gründungsbegleitung-Bento (Selbstständig machen) — Marie 2026-06-29:
   der Gründer-Kosmos darüber bleibt dunkle Insel, das Bento direkt danach
   soll hell sein. Gleiches graues MIST-Band statt Weiß, damit die weißen
   Karten (Override „4c") sich abheben (wie Trust/Über uns). */
html[data-theme="light"] .page-selbststaendig-machen .gweg {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
/* (Der frühere Light-Override für .bsys-app entfiel 2026-06-19: der
   App-Feed bezieht seine Innenfarben jetzt aus festen lokalen
   --bsys-app-*-Tokens statt aus --text-*, ist also theme-unabhängig
   lesbar — eine Hell-Rückstellung im Light-Theme ist nicht mehr nötig.) */

/* ---- 3) Dunkle Inseln (Light-Theme) — EINE Token-Quelle ----------
   Visual-lastige, für Dunkel gebaute Sections bleiben im Light-Theme
   dunkel: das komplette Dark-:root-Tokenpaket wird lokal re-deklariert,
   alle token-getriebenen Kinder rendern im Original-Dark-Look (inkl.
   Cyan/Blau-Akzent), der Rest des Light-Themes bleibt hell.
   Refactor 2026-06-26: das Tokenpaket lag vorher ~5× über die Seiten
   verteilt dupliziert — jetzt EINE Selektor-Liste für alle Inseln
   (Spezifität bleibt 0,3,1, da jeder Listen-Eintrag = Scope-Klasse +
   Section-Klasse). Inseln je Seite:
     Startseite/AG  Cases · Bese-AI · KM-Band (Startseite zusätzlich:
                    Trust + Reviews + App-Steuerung als Dunkel-
                    Sektionen — seit der Rhythmus-Runde 2026-09-02
                    drei lange Bögen nach Saleshax-Schema statt
                    verstreuter Einzel-Inseln, FAQ dort wieder helles
                    Band; Herleitung im Startseiten-Abweichungs-Block
                    weiter unten)
     MA             Wachstum (mawx) · Beweis (mf-beweis) · Eine-Hand
                    (mahand) · Über-uns (about) · Reviews (seit
                    2026-08-05 — vorher lief FAQ(W) · Reviews(G) ·
                    Schritte(W) = drei helle Bänder in Folge, gegen
                    die Marie-Regel; Präzedenz Startseite/Kanal, wo
                    Reviews ebenfalls dunkel ist) — Marie 2026-07-09:
                    „auch ein paar dunkle zwischendurch" + Nachschlag
                    (Wachstum/Über-uns explizit gewünscht); Recruit
                    (Lupe) flog mit dem Paket-Umbau von der Seite.
                    .about wird auf MA von der geteilten MIST-Regel
                    (Block 2) erfasst — die Insel gewinnt per
                    Quell-Reihenfolge (gleiche Spezifität 0,3,1)
     Video          Showroom ×3
     Selbst         Probleme · Gstory · Capacity  (Gweg-Bento hell)
     Kanalservice   Cases · Bese-AI · KM-Band (geteilt) + Reviews ·
                    RA (richtige Aufträge) · Über-uns · FAQ (eigene
                    Arme, Paket-Umbau 2026-07-15 — Marie-Regel „nie
                    3 helle Bänder in Folge"; die früheren Inseln
                    Capacity/VS/KI/Recruit flogen mit dem Umbau von
                    der Seite)
     Schädlinge     VS (Gegen die Großen) · Reviews · RA · Über-uns ·
                    FAQ (+ geteilte Bese-AI/Beweis-Arme, Paket-Umbau
                    2026-07-23 — die früheren Inseln Capacity/KI/
                    Recruit flogen mit dem Umbau von der Seite)
                    ⚠ SEIT DEM ROLLOUT 2026-09-11 kommt die
                    App-Steuerung dazu (geteilter Arm) — und sie
                    schließt genau die Lücke zwischen der Bese-AI-
                    und der VS-Insel: Bese-AI(D) · App-Steuerung(D) ·
                    Gegen die Großen(D) stehen jetzt als DREI dunkle
                    Sections in Folge, und nach einem einzigen weißen
                    Riegel (Beweis-Wand) folgt mit Über-uns(D) ·
                    FAQ(D) sofort die nächste Dunkelzone. Damit sind
                    5 von 6 Sections zwischen Bese-System und Footer
                    dunkel. Präzedenz für drei in Folge ist der
                    Startseiten-Bogen (Bese-AI · App · Cases), aber
                    dort gibt es die zweite Zone nicht — die Stelle
                    liegt Marie zur Freigabe vor (Fragen-Tabelle in
                    CLAUDE.md). Auflösung wäre EINE Zeile: `.vs` auf
                    ein helles Band legen. NICHT eigenmächtig
                    gemacht — die VS-Insel ist eine eigene
                    Marie-Entscheidung vom Paket-Umbau.
     Branchen-Hub   Beweis-Wand (mf-beweis)
     Team           Karriere-Band (Offene Stellen) — Roster bleibt hell (Marie 2026-06-29)
   Hintergrund: solides Dunkel (180deg) für alle außer KM-Band
   (135deg Brand-Blau-Hauch, Marie 2026-06-19). */
html[data-theme="light"] :is(
  :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) :is(.cases, .beseai, .app-control, .km-cta, .bueroraeume),
  .page-mitarbeitergewinnung :is(.mahand, .faq),   /* MA-Rhythmus 24.09.2026: Wachstum, Beweis, Über uns hell; FAQ dunkel — Block „ma-rhythmus-r24" am Dateiende */
  .page-selbststaendig-machen .capacity,
  .page-schaedlingsbekaempfung :is(.vs, .ra, .about, .faq),
  .page-kanalservice :is(.reviews, .ra, .about, .faq),
  .page-home :is(.proof, .faq, .next-steps, .site-footer),   /* .reviews raus seit Block M1 (17.09.2026): die Stimmen-Section ist mit dem Umzug ein weißes Band — Herleitung im Block „M1 — Bilanz-Zeile + Stimmen-Umzug" am Dateiende. */   /* Marie 2026-09-04: FAQ dunkel wie auf Kanalservice („passt besser"); Schritte + Footer seit der Premium-Runde desselben Tags = EIN dunkler Schlussblock (Block „Premium-Überarbeitung" am Dateiende) */
  .page-branchen .mf-beweis,
  .page-erfolgsgeschichten :is(.eg--gross, .egv),
  .page-ueber-uns :is(.mapc, .uu-blick),   /* .uu-blick seit Phase M7 (17.09.2026): Vogelperspektive als Insel zwischen Geschichte (W) und Verantwortung (G) */
  .page-presse :is(.pr-awards, .mapc),
  .page-karriere :is(.ka-tech, .ka-prinzipien, .ka-erich, .mapc),
  .page-kontakt .kt-check,
  .page-ratgeber .mapc,
  .page-so-funktioniert-es .mapc,
  .page-plattform .mapc,
  .page-website :is(.bkarte, .ws-system, .ws-stufen, .mapc),   /* .ws-system seit 2026-09-17: Marie „das ist alles ein bisschen zu hell". Grau schied aus — der Vorgaenger .ws-craft ist grau, das waere eine Naht mit gleichem Ton; es blieb also Weiss (Ist-Zustand) oder Dunkel. Dazu passt das Motiv: der Ablauf lebt von Lichtspuren, Funke und Rueckkopplungs-Punkt, und additives Licht braucht dunklen Grund (Lehre Startseiten-Hero/Blickkarte). ALLE DREI Listen brauchen den Eintrag — Tokens, Hintergrund UND Eyebrow-Pille (die Pille setzt ihre Farbe hart, nicht ueber ein Token). */
  .page-videoproduktion .showroom--duo,
  .page-selbststaendig-machen :is(.probleme, .gstory),
  .page-team .team-cta,
  .beweis,   /* Beweis-Section „Echte Betriebe, echte Ergebnisse“: seit 24.09.2026 auch auf sechs Unterseiten — dort erbte sie sonst die helle Seiten-Tinte (Intro rgba(16,24,32,.7) auf #17191D). Den Grund bringt .beweis selbst mit. */
  .next-steps.aufs   /* „So läuft's ab" (Fassung A4): seit 24.09.2026 auf allen acht Seiten mit Schritte-Section statt der alten 3-Schritte-Fassung — auf den Unterseiten lag sie sonst auf dem hellen Band und erbte die Tinte (Kartentext dunkel auf dunkel). Grund: Block aufs-a4. */
) {
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --accent-hover: #4DA8DA;
  --cyan-hi: #6BC4F0;
  --silver-blue: #B3CCDF;
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --logo-mono-filter: brightness(0) invert(1);
  --focus-ring: #FFFFFF;
  color: var(--text-100);
}
/* Solider Dunkel-Hintergrund — alle Inseln AUSSER KM-Band */
html[data-theme="light"] :is(
  :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) :is(.cases, .beseai, .app-control, .bueroraeume),
  .page-mitarbeitergewinnung :is(.mahand, .faq),   /* MA-Rhythmus 24.09.2026: Wachstum, Beweis, Über uns hell; FAQ dunkel — Block „ma-rhythmus-r24" am Dateiende */
  .page-selbststaendig-machen .capacity,
  .page-schaedlingsbekaempfung :is(.vs, .ra, .about, .faq),
  .page-kanalservice :is(.reviews, .ra, .about, .faq),
  .page-home :is(.proof, .faq, .next-steps, .site-footer),   /* .reviews raus seit Block M1 (17.09.2026): die Stimmen-Section ist mit dem Umzug ein weißes Band — Herleitung im Block „M1 — Bilanz-Zeile + Stimmen-Umzug" am Dateiende. */   /* Marie 2026-09-04: FAQ dunkel wie auf Kanalservice („passt besser"); Schritte + Footer seit der Premium-Runde desselben Tags = EIN dunkler Schlussblock (Block „Premium-Überarbeitung" am Dateiende) */
  .page-branchen .mf-beweis,
  .page-erfolgsgeschichten :is(.eg--gross, .egv),
  .page-ueber-uns :is(.mapc, .uu-blick),   /* .uu-blick seit Phase M7 (17.09.2026): Vogelperspektive als Insel zwischen Geschichte (W) und Verantwortung (G) */
  .page-presse :is(.pr-awards, .mapc),
  .page-karriere :is(.ka-tech, .ka-prinzipien, .ka-erich, .mapc),   /* .ka-prinzipien seit 18.09.2026 wieder mit dem geteilten Grund (der Galerie-Raum malte seine Wand selbst) */
  .page-kontakt .kt-check,
  .page-ratgeber .mapc,
  .page-so-funktioniert-es .mapc,
  .page-plattform .mapc,
  .page-website :is(.bkarte, .ws-system, .ws-stufen, .mapc),   /* .ws-system seit 2026-09-17: Marie „das ist alles ein bisschen zu hell". Grau schied aus — der Vorgaenger .ws-craft ist grau, das waere eine Naht mit gleichem Ton; es blieb also Weiss (Ist-Zustand) oder Dunkel. Dazu passt das Motiv: der Ablauf lebt von Lichtspuren, Funke und Rueckkopplungs-Punkt, und additives Licht braucht dunklen Grund (Lehre Startseiten-Hero/Blickkarte). ALLE DREI Listen brauchen den Eintrag — Tokens, Hintergrund UND Eyebrow-Pille (die Pille setzt ihre Farbe hart, nicht ueber ein Token). */
  .page-videoproduktion .showroom--duo,
  .page-selbststaendig-machen :is(.probleme, .gstory)
) {
  background: linear-gradient(180deg, #1F2226 0%, #17191D 55%, #131518 100%);
}
/* KM-Closing-Band: solides Dunkel mit Brand-Blau-Hauch oben-links. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .km-cta {
  background: linear-gradient(135deg, #25282D 0%, #1A1D21 45%, #121417 100%);
}
/* Eyebrow-PILLE auf allen Inseln: dunkle Glas-Variante statt des
   weißen Chips der hellen Bänder (globale Chip-Regel im Feedback-
   Block am Dateiende, Marie 2026-08-25 P6 → 2026-08-26 global;
   die Inseln gewinnen per Spezifität). */
html[data-theme="light"] :is(
  :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) :is(.cases, .beseai, .app-control, .km-cta, .bueroraeume),
  .page-mitarbeitergewinnung :is(.mahand, .faq),   /* MA-Rhythmus 24.09.2026: Wachstum, Beweis, Über uns hell; FAQ dunkel — Block „ma-rhythmus-r24" am Dateiende */
  .page-selbststaendig-machen .capacity,
  .page-schaedlingsbekaempfung :is(.vs, .ra, .about, .faq),
  .page-kanalservice :is(.reviews, .ra, .about, .faq),
  .page-home :is(.faq, .next-steps, .site-footer, .app-control),   /* .reviews ist am 17.09.2026 wieder RAUS (Block M1): mit dem Umzug vor „Passt das zu dir?" liegt die Stimmen-Section auf einem weißen Band, ihre Pille braucht dort wieder die Tinte-Fassung der hellen Bänder. Die Begründung von 2026-09-16 bleibt als Warnung stehen — sie gilt für jeden Rückbau auf ein dunkles Band: */   /* (16.09.2026): die herausgelöste Stimmen-Section ist eine Dunkel-Insel und trägt eine Pille — GEMESSEN stand sie ohne diese Zeile als Tinte-auf-Charcoal da (rgba(16,24,32,.72) auf #17191D, rund 1,05:1, praktisch unsichtbar). Dieselbe Falle wie bei .app-control, nur andersherum. */   /* .app-control seit 2026-09-11: die Section ist auf der Startseite Teil des dunklen Bese-AI-Bogens und hat seit Maries Zuruf wieder eine Pille. Ihr früherer Einzel-Override war beim Pillen-Ausbau als verwaist entfernt worden — ohne ihn lief die Pille als WEISSER Chip auf der dunklen Fläche (Marie: „warum hast du das eine weiß gemacht auf dem dunklen Hintergrund?"). */   /* Marie 2026-09-04: FAQ dunkel wie auf Kanalservice („passt besser"); Schritte + Footer seit der Premium-Runde desselben Tags = EIN dunkler Schlussblock (Block „Premium-Überarbeitung" am Dateiende) */
  .page-branchen .mf-beweis,
  .page-erfolgsgeschichten :is(.eg--gross, .egv),
  .page-ueber-uns :is(.mapc, .uu-blick),   /* .uu-blick seit Phase M7 (17.09.2026): Vogelperspektive als Insel zwischen Geschichte (W) und Verantwortung (G) */
  .page-presse :is(.pr-awards, .mapc),
  .page-karriere :is(.ka-tech, .ka-prinzipien, .ka-erich, .mapc),
  .page-kontakt .kt-check,
  .page-ratgeber .mapc,
  .page-so-funktioniert-es .mapc,
  .page-plattform .mapc,
  .page-website :is(.bkarte, .ws-system, .ws-stufen, .mapc),   /* .ws-system seit 2026-09-17: Marie „das ist alles ein bisschen zu hell". Grau schied aus — der Vorgaenger .ws-craft ist grau, das waere eine Naht mit gleichem Ton; es blieb also Weiss (Ist-Zustand) oder Dunkel. Dazu passt das Motiv: der Ablauf lebt von Lichtspuren, Funke und Rueckkopplungs-Punkt, und additives Licht braucht dunklen Grund (Lehre Startseiten-Hero/Blickkarte). ALLE DREI Listen brauchen den Eintrag — Tokens, Hintergrund UND Eyebrow-Pille (die Pille setzt ihre Farbe hart, nicht ueber ein Token). */
  .page-videoproduktion .showroom--duo,
  .page-selbststaendig-machen :is(.probleme, .gstory),
  .page-team .team-cta,
  .next-steps.aufs
) .eyebrow {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--glass-border);
  color: var(--text-200);
  box-shadow: none;
}


/* Marktführerschaft — Band-Rhythmus im Light-Theme (Marie 2026-07-02).
   Die Seite ist oben in den gemeinsamen :is()-Scope aufgenommen → damit
   greifen automatisch: Bese-System/FAQ/Nächste-Schritte = WEISS und
   Bese-AI + Cases (Erfolgsgeschichten) = dunkle Inseln (über die geteilte
   .beseai/.cases-Liste). Hier nur die MF-EIGENEN Sections ergänzen:
   · GRAU (MIST): mf-vorsprung (Fokus-Zeitstrahl), mf-beweis (Der Beweis),
     mf-vogel (Vogelperspektive) — sonst blieben sie flächig weiß und die
     dark-first Karten/Viz wirkten ausgewaschen; auf Grau heben sie sich ab.
   · DUNKLE INSELN: Hero (seit 2026-07-27, Marie — dunkle Bühne für „Die
     gläserne 1"; body.-Präfix schlägt die geteilte BRIGHT-.hero-Regel) +
     mf-fokus (Spezialisierung, dark-built). Beide teilen sich EIN Dark-
     Tokenpaket; der Hero re-aktiviert zusätzlich die Dark-Aurora
     (--aurora-blend/-opacity).
   Rhythmus (Sektions-Tausch Marie 2026-07-27: mf-vorsprung VOR mf-fokus):
   Hero(D) · mf-vorsprung(G) · mf-fokus(D) · Bese-AI(D) · Bese-System(W) ·
   mf-beweis(G) · Cases(D) · mf-vogel(G) · FAQ(W) · Nächste-Schritte(W) —
   mf-fokus + Bese-AI bilden jetzt die zusammenhängende dunkle Zone. */
html[data-theme="light"] .page-marktfuehrerschaft :is(.mf-vorsprung, .mf-beweis, .mf-vogel) {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
/* Der MF-Hero selbst kommt seit 2026-08-03 aus der konsolidierten
   Dunkel-Hero-Regel („Alle Heroes = Dunkel-Insel", weiter unten in
   diesem Block) — hier bleibt nur die MF-eigene mf-fokus-Insel. */
html[data-theme="light"] .page-marktfuehrerschaft .mf-fokus {
  background: linear-gradient(180deg, #1F2226 0%, #17191D 55%, #131518 100%);
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --accent-hover: #4DA8DA;
  --cyan-hi: #6BC4F0;
  --silver-blue: #B3CCDF;
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --logo-mono-filter: brightness(0) invert(1);
  --focus-ring: #FFFFFF;
  color: var(--text-100);
}


/* ---- 4) Komponenten-Feinschliff auf den hellen Bändern --------
   Viele Komponenten sind dark-first gebaut (weiße Texte, weiß-Alpha-
   Glas, harte Navy-Schatten) — auf Hell brauchen sie eigene Werte. */

/* Team-Roster ist seit 2026-06-29 ein helles Band (Marie) — die Karten-
   Schatten sind dark-first (opaker Navy-Drop bei 0.9) und wirken auf Hell
   zu schwer. Weicher + heller Inset-Glanz, analog zu den anderen Light-
   Band-Karten (Testimonials). */
html[data-theme="light"] .page-team .team-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 38px -28px rgba(var(--shadow-rgb), 0.38);
}
@media (hover: hover) {
  html[data-theme="light"] .page-team .team.is-revealed .team-card:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 26px 52px -26px rgba(var(--shadow-rgb), 0.5),
      0 0 0 1px rgba(var(--glow-rgb), 0.18);
  }
}

/* Hero-Kennzahlen: weißer Zahl-Verlauf → dunkles Navy-Blau (Marie). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero-stat__num {
  background: linear-gradient(180deg, #1F3447 0%, #2C6EA9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Hero-Live-Ticker bleibt im Light-Theme eine DUNKLE Karte (Marie 2026-06-19):
   die helle Glas-Variante war auf dem weißen Hero-Band ausgewaschen; gewünscht
   ist der Dark-Look wie im Dark-Theme. Solide dunkle Fläche + Dark-Token-Insel
   (Text hell, Icons Cyan, Eyebrow-Punkt Cyan), analog FAQ/App-Feed-Insel. Das
   Trustpilot-Widget im Header-Slot bleibt via JS (applyTpTheme) ebenfalls dunkel;
   im Mobile-Slot (außerhalb des Tickers, heller Hero) folgt es dem Seiten-Theme. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero-ticker {
  --text-100: rgba(255, 255, 255, 0.92);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.55);
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  --glass-border: rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, #26282C 0%, #1B1D20 100%);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero-ticker .eyebrow__dot,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero-ticker .eyebrow__dot::after {
  background: var(--accent-hover);
}

/* Logo-Marquee-Box (Trust) im Light-Theme als DUNKLE Insel (Marie 2026-06-30):
   die Partnerbetrieb-Logos sollen auf einer dunklen Kachel stehen — Kontrast-
   Akzent im hellen Band. Lokales Dark-Tokenpaket → die Logos werden via
   --logo-mono-filter wieder WEISS, Label/Live-Punkt/Cyan-Top-Kante/Strip-
   Border laufen im Dark-Look; opaker dunkler Hintergrund, da das Band
   ringsum hell ist. (Vorher war die Box echtes Weiß.) */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .logo-marquee--framed {
  --text-100: rgba(255, 255, 255, 0.92);
  --text-200: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.10);
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  --logo-mono-filter: brightness(0) invert(1);
  background: linear-gradient(180deg, #26282C 0%, #1B1D20 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 28px 70px -28px rgba(0, 0, 0, 0.55);
}
/* Natürliche Logos (weiße PNGs mit schwarzen Detail-Linien — Schädlings-
   bekämpfer) auf der dunklen Box wieder UNGEFILTERT zeigen; der Light-
   Default würde sie zu Schwarz invertieren → auf Dunkel unsichtbar. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .logo-marquee--framed.logo-marquee--natural .logo-marquee__track img,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .logo-marquee--framed .logo-marquee__track img.is-natural {
  filter: none;
}

/* Testimonial-Kacheln = Charcoal-Dunkel-Insel auf ALLEN Band-Seiten mit
   Trust-Section — Startseite seit 2026-09-08 (Marie: „die Kacheln in
   Vertrauen aus dem Handwerk sind einfach weiß, das passt nicht — mach
   sie grau oder dunkel"), seit 2026-09-09 auf Maries Zuruf („auf allen
   Seiten … dass diese Kacheln mit den Zitaten auch dunkel werden") auch
   auf AG, MA, Selbstständig machen und Kanalservice, deren Trust-Band
   MIST-grau ist. Dunkel statt grau, weil die Logo-Box derselben Section
   überall schon Charcoal ist und die Reviews-Zitatkarten darunter
   ebenfalls — EINE Charcoal-Familie bindet die Vertrauens-Zone, auf Weiß
   wie auf Grau; und weil die geteilte Section damit auf allen Seiten
   gleich aussieht. Lokales Dark-Tokenpaket (nur die Tokens, die die
   Karten-Kinder verbrauchen) → Quote/Firma/Sterne/em/Avatar-Ring/Deko-
   Zitat/Cyan-Kante rendern im Dark-Look, der Name ist in der Basis
   ohnehin weiß; opake Charcoal-Fläche (#26282C→#1B1D20, identisch zur
   Logo-Box). Die frühere Weiß-Fassung (weiße Karte, Name in Tinte, P7-
   Tinte-Overlays für em/Sterne) ist restlos entfallen — es gibt keine
   weißen Testimonial-Karten mehr. Der Schatten braucht den Bleed-Raum
   des Viewports (Basis-Regel .testimonials__viewport), sonst harte Kante. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .testimonial-card {
  --text-100: rgba(255, 255, 255, 0.85);
  --text-300: rgba(255, 255, 255, 0.52);
  --accent-hover: #4DA8DA;
  --silver-blue: #B3CCDF;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  /* Avatar-Platzhalter (img-background) auf den Kartenton — der Light-
     Wert von --surface-3 ist nahezu Weiß und blitzte beim Bildladen als
     heller Fleck hinter dem runden Avatar auf (Guardian 2026-09-09). */
  --surface-3: #1B1D20;
  background: linear-gradient(180deg, #26282C 0%, #1B1D20 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 28px 70px -28px rgba(var(--shadow-rgb), 0.55);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .testimonial-card:hover {
  background: linear-gradient(180deg, #2C2E33 0%, #202226 100%);
  border-color: color-mix(in srgb, #4DA8DA 32%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 34px 78px -28px rgba(var(--shadow-rgb), 0.62);
}
/* Sichtbarer Abstand Karten → Progress-Bar auf den hellen Bändern (war
   bis 2026-09-09 ein padding-bottom als Schatten-Reserve; den Schatten-
   Raum liefert seitdem das Bleed-Rezept der Basis-Regel, hier steht nur
   noch der Rhythmus-Wert). */
/* „Vertrauen aus dem Handwerk" ohne Blau (Marie 19.09.2026: „Hast du hier die Zitate
   und die Sternchen in blau gemacht?"). Sterne, Hervorhebungen im Zitat und das
   Deko-„ liefen über das Insel-Cyan (--accent-hover/--glow-rgb) — auf den Charcoal-
   Karten jetzt Weiß: Sterne voll, Hervorhebung voll weiß + 600 gegen den Zitat-Text
   (85 %), Deko-Zitat als leises Weiß. Präzedenz §5a „Akzent-Elemente auf den Video-
   Cards": Sterne/Häkchen weiß. Gilt auf allen Seiten mit dieser Section (EIN Look).
   Der Avatar-Ring bleibt der CI-Verlauf (dünner Akzent). Dark-Theme unverändert. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .testimonial-card__rating {
  color: #FFFFFF;
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .testimonial-card__quote em {
  color: #FFFFFF;
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .testimonial-card::after {
  color: rgba(255, 255, 255, 0.07);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .testimonials__viewport {
  --tm-gap: clamp(40px, 4vw, 56px);
}

/* ---- 4b) Leistungen-Hub-Karten auf Hell -------------------------
   Das Karten-Raster liegt auf einem hellen Band (keine Dark-Insel) →
   die Weiß-Alpha-Glas-Karten wären unsichtbar. Sie werden hier zu
   echten weißen Karten mit weichem Schatten (das frühere Weiß-Rezept der
   Testimonial-Karten, die seit 2026-09-09 selbst Dunkel-Inseln sind).
   Featured-Akzent + Icon-Tönung + „Mehr"-Link laufen über die
   Light-Akzent-Tokens und brauchen keinen Extra-Override. */
html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.08);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.04),
    0 22px 50px -28px rgba(var(--shadow-rgb), 0.20);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card:not(.svc-card--soon):hover {
    box-shadow:
      0 2px 4px rgba(var(--shadow-rgb), 0.05),
      0 30px 62px -28px rgba(var(--shadow-rgb), 0.28);
  }
}
html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card__title {
  color: var(--heading-color);
}
html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card--soon {
  background: var(--surface-1);
}
/* Featured-Top-Linie im Light-Theme: nur die wandernde Akzent-Schicht,
   ohne die statische Tint-Grundlinie — die wirkt auf weißen Karten zu
   dick/blau (--glow-rgb = Brand-Blau im Light-Theme). Sweep bleibt. */
html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card--featured::before {
  background: linear-gradient(90deg, transparent, var(--accent-hover), transparent);
  background-size: 55% 100%;
  background-repeat: no-repeat;
  background-position: -55% 0;
}

/* „Teils-teils" im Light-Theme: die dunklen Inseln (01 + 04) müssen den
   weißen Karten-Default überschreiben (gleiche Spezifität → Source-Order).
   Tokens kommen aus dem .svc-card--dark-Block (gelten themeneutral). */
html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card--dark {
  background: linear-gradient(160deg, #26282C 0%, #16181B 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 50px -22px rgba(var(--shadow-rgb), 0.28);
}
html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card--featured.svc-card--dark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(var(--glow-rgb), 0.16),
    0 22px 50px -22px rgba(var(--shadow-rgb), 0.28),
    0 28px 80px -28px rgba(var(--glow-rgb), 0.30);
}
@media (hover: hover) and (pointer: fine) {
  /* :not(.svc-card--soon) → Spezifität gleich der Basis-Hover-Regel,
     damit die dunkle Insel ihren Eigen-Schatten (inkl. inset-Highlight)
     beim Hover behält (Source-Order entscheidet, Dark steht danach). */
  html[data-theme="light"] :is(.page-leistungen, .page-branchen) .svc-card--dark:not(.svc-card--soon):hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 30px 62px -24px rgba(0, 0, 0, 0.34);
  }
}

/* ---- 4c) Gründungsbegleitung-Bento auf Hell (Selbstständig machen) -
   Marie 2026-06-29: Der Gründer-Kosmos (.probleme) bleibt dunkle Insel,
   das Bento direkt danach (.gweg) ist jetzt ein helles graues Band. Die
   dark-first Glas-Karten (rgba(255,255,255,…)) wären darauf unsichtbar →
   echte weiße Karten mit weichem Light-Schatten (analog dem früheren Weiß-
   Rezept der Testimonial-Karten, die seit 2026-09-09 Dunkel-Inseln sind,
   und .svc-card). Titel-/Text-/Icon-Tönung laufen über die Light-Tokens
   (--text-100 = Tinte, --glow-rgb = Brand-Blau) und brauchen keinen
   Extra-Override. Die Foto-Kacheln sind themen-neutral (eigene Bilder). */
html[data-theme="light"] .page-selbststaendig-machen .gweg__card {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.08);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.04),
    0 22px 50px -28px rgba(var(--shadow-rgb), 0.20);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .page-selbststaendig-machen .gweg__card:hover {
    border-color: rgba(var(--shadow-rgb), 0.12);
    box-shadow:
      0 2px 4px rgba(var(--shadow-rgb), 0.05),
      0 30px 62px -28px rgba(var(--shadow-rgb), 0.28);
  }
}
/* Foto-Kacheln: dezenter Rahmen statt der weiß-transparenten Glas-Border,
   die auf Hell als harte helle Kante lesen würde. */
html[data-theme="light"] .page-selbststaendig-machen .gweg__photo {
  border-color: rgba(var(--shadow-rgb), 0.10);
}
/* Manche Bento-Kacheln als Dunkel-Inseln (Marie 2026-06-29): Karte 1/3/5
   werden dunkel — jede Bento-Reihe hat dann eine dunkle Karte, eine helle
   Karte und ein Foto (Kontrast-Rhythmus, wie .svc-card--dark / Team-Seite).
   Lokales Dark-Tokenpaket → Kinder (Titel/Text/Icon-Badge) rendern im
   Dark-Look; opaker dunkler Hintergrund, da das Band ringsum hell ist.
   Steht NACH der weißen .gweg__card-Regel → gewinnt bei gleicher
   Spezifität per Quell-Reihenfolge. Im Dark-Theme sind ohnehin alle
   Karten dunkel → der Modifier ist dort wirkungslos. */
html[data-theme="light"] .page-selbststaendig-machen .gweg__card--dark {
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: #FFFFFF;
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  background: linear-gradient(160deg, #26282C 0%, #16181B 100%);
  border-color: var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 50px -26px rgba(0, 0, 0, 0.45);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .page-selbststaendig-machen .gweg__card--dark:hover {
    border-color: var(--glass-border-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 30px 62px -26px rgba(0, 0, 0, 0.55);
  }
}

/* ---- 5) Section „Steuerung per App" — Animation auf Hell --------
   Das Phone-Mockup ist als dunkles Gerät gebaut (Surface-Tokens) und
   verschwand im Light-Theme weiß-auf-grau. Es bleibt jetzt ein echtes
   dunkles Gerät (lokale Token-Insel) auf dem hellen Band — wie ein
   Handy auf dem Tisch — mit weichem Schatten; die umgebenden Badges
   werden weiße Karten, die Connector-Linien bleiben sichtbar in Blau.
   ⚠ .page-home steht seit 2026-09-02 und .page-kanalservice seit
   2026-09-10 NICHT mehr in diesen Listen
   (Rhythmus-Runde, Marie: „angleichen an Talenthafen/Saleshax"):
   die App-Steuerung ist auf der STARTSEITE Teil des dunklen
   System-Bogens (Insel-Block „Startseite: seiten-eigene Dunkel-
   Sektionen" weiter unten) und rendert dort im Original-Dark-Look —
   die Entblau-Overrides hier gelten nur noch den Seiten, auf denen
   die Section ein HELLES Band ist (AG usw.).
   Dasselbe gilt seit 2026-09-10 für die KANALSERVICE-Seite (Marie:
   „die Section Steuerung per App gerne auch auf dem dunklen
   Hintergrund, so wie bei der Startseite") — Insel-Paket + Fläche
   stehen im Block „Kanalservice: Band-Zuordnungen".
   ⚠ SEIT DEM ROLLOUT 2026-09-11 HAT DIESER BLOCK KEINE AKTIVE SEITE MEHR:
   die App-Steuerung läuft seitdem als EIN Template auf allen fünf Seiten,
   die sie einbinden (Startseite · AG · Kanalservice · Schädlinge ·
   Plattform), und ist dort überall Dunkel-Insel über die konsolidierte
   Liste (Marie: „Sie sollen überall jetzt genau dieses Design bekommen,
   wie sie auf der Startseite sind"). AG, Schädlinge und Plattform sind
   deshalb aus den Listen unten ENTFERNT. Der Block bleibt als fertiges
   Rezept stehen, falls die Section je wieder auf ein helles Band soll —
   dann die betreffende Seitenklasse hier eintragen UND aus der
   konsolidierten Insel-Liste nehmen. Beim nächsten Aufräumen ist er der
   erste Kandidat. */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .phone-mockup {
  /* Neutraler Charcoal statt Navy + helle Grau-/Weiß-Akzente statt Cyan
     (Marie 2026-06-18: in der hellen Version „eher Weiß und Grau"). Das
     Gerät bleibt dunkel, aber entblaut → ruhiges Graphit-Handy. */
  --surface-0: #24262A;
  --surface-1: #2A2D31;
  --surface-2: #31353A;
  --surface-3: #3A3F45;
  --surface-4: #43484F;
  --text-100: rgba(255, 255, 255, 0.88);
  --text-200: rgba(255, 255, 255, 0.66);
  --text-300: rgba(255, 255, 255, 0.42);
  --text-400: rgba(255, 255, 255, 0.20);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-hover: rgba(255, 255, 255, 0.16);
  --heading-color: var(--white);
  /* Akzente entblaut → helles Cool-Grey / Off-White */
  --accent-hover: #C4CBD1;
  --cyan-hi: #E4E8EC;
  --silver-blue: #A8B0B7;
  --glow-rgb: 188, 196, 203;
}
/* Weicher Geräte-Schatten auf dem hellen Band statt des harten Dark-Rezepts
   (shadow-rgb erbt hier den Light-Navy-Wert → weich, nicht schwarz). */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .phone-mockup__frame {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.16),
    0 26px 54px -28px rgba(var(--shadow-rgb), 0.32),
    0 52px 96px -44px rgba(var(--shadow-rgb), 0.20);
}
/* Floating-Badges → dunkle Karten mit heller Schrift (Marie), passend zum
   dunklen Gerät + Bento. Token-Insel dreht Texte/Akzente auf Hell. */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .control-badge {
  --text-100: rgba(255, 255, 255, 0.88);
  --text-200: rgba(255, 255, 255, 0.66);
  --text-300: rgba(255, 255, 255, 0.42);
  --heading-color: var(--white);
  --accent-hover: #C4CBD1;
  --cyan-hi: #E4E8EC;
  --glow-rgb: 188, 196, 203;
  background: linear-gradient(180deg, #2C2F33 0%, #232629 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.06),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.22);
}
/* Icon-Chips (Bento + Badges): hartkodierter Brand-Blau-Stop raus →
   rein grau über das (jetzt graue) glow-Tripel. */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .control-feature__icon,
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .control-badge__icon {
  background: linear-gradient(135deg, rgba(var(--glow-rgb), 0.24) 0%, rgba(var(--glow-rgb), 0.08) 100%);
  border-color: rgba(var(--glow-rgb), 0.32);
}
/* --accent (Brand-Blau) treibt die Balken-/Slider-Füllungen im Handy — in
   der entblauten Animation auf Mittelgrau setzen, damit auch die
   Fortschritts-Füllungen Weiß/Grau statt Blau sind. (Nur Handy: Chart-
   Balken nutzen --accent-hover und sind schon grau; der Navy-CTA-Button
   nutzt --navy, bleibt also unberührt.) */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .phone-mockup {
  --accent: #828A91;
}
/* Daten-Linien, Lauf-Punkte, Sonar-Ringe + Schwebe-Partikel: weg vom Blau,
   hin zu dezentem Slate — auf dem hellen Band wirkte das Blau unpassend
   (Marie). Die Bewegung bleibt, nur die Farbe wird ruhig/neutral. */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-control__connector {
  stroke: rgba(var(--shadow-rgb), 0.26);
}
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-control__connector-pulse,
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-control__connector-pulse--trail {
  fill: rgba(var(--shadow-rgb), 0.50);
  filter: none;
}
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-ring {
  stroke: rgba(var(--shadow-rgb), 0.16);
}
/* Die rotierenden, gepunkteten Orbit-Ringe hinter dem Handy ebenfalls
   entsättigt — sie waren der „blaue Punkte"-Eindruck hinter dem Gerät. */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-orbit__ring,
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-orbit__ring--tilt-a,
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-orbit__ring--tilt-b {
  stroke: rgba(var(--shadow-rgb), 0.20);
}
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .app-control__particle {
  background: rgba(var(--shadow-rgb), 0.40);
  box-shadow: none;
}

/* Bento-Kacheln einheitlich DUNKEL mit heller Schrift (Marie). Zwei der
   fünf Kacheln sind ohnehin dunkle Foto-Karten — „alle dunkel" ist daher
   der stimmige Weg statt eines Hell/Dunkel-Mix. Die Token-Insel dreht
   Texte/Akzente auf Hell; Foto- und CTA-Karte behalten ihren eigenen
   Hintergrund, Stat- + Chart-Karte bekommen eine solide dunkle Fläche. */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .control-feature {
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  /* Akzente entblaut → helles Cool-Grey / Off-White (Marie 2026-06-18) */
  --accent-hover: #C4CBD1;
  --cyan-hi: #E4E8EC;
  --silver-blue: #A8B0B7;
  --glow-rgb: 188, 196, 203;
}
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .control-feature:not(.control-feature--photo):not(.control-feature--cta) {
  background: linear-gradient(180deg, #26282C 0%, #1B1D20 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.06),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.24);
}
/* CTA-Karte („Übernimm das Steuer") = letzte Kachel: ebenfalls dunkles
   Graphit wie die Geschwister, Spotlight neutral hell statt Cyan. */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .control-feature--cta {
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(var(--glow-rgb), 0.16) 0%, rgba(var(--glow-rgb), 0) 70%),
    linear-gradient(180deg, #2A2D31 0%, #1B1D20 100%);
  border-color: rgba(var(--glow-rgb), 0.30);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.06),
    0 18px 42px -22px rgba(var(--shadow-rgb), 0.26);
}
/* Der Signature-CTA in der CTA-Kachel bleibt der kanonische Marken-Button:
   --glow-rgb auf Brand-Blau zurücksetzen, damit sein Rand-/Akzent wie bei
   allen anderen „Beratung anfragen"-Buttons aussieht (die Kachel selbst
   bleibt grau). */
html[data-theme="light"] :is(.page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es) .control-feature--cta .btn-accent {
  --glow-rgb: 44, 110, 169;
}

/* ---- AG-Seite: Band-Abweichungen ggü. der Startseite (Marie 2026-06-22) ----
   Die Auftragsgewinnung-Seite trägt dieselben Section-Klassen wie die
   Startseite, aber eine andere REIHENFOLGE:
     Hero · Trust · Kennst-du-das · Bese-System · Bese-AI · App-Steuerung ·
     Erfolgsgeschichten · Über uns · FAQ · Reviews · Nächste Schritte · KM-Band
   Mit der geerbten Startseiten-Zuteilung (Bese-System weiß, App-Steuerung grau)
   stünden hier zwei weiße Bänder direkt nebeneinander (Kennst-du-das + Bese-
   System) und die grau-App-Steuerung läge zwischen den zwei Dunkel-Inseln
   Bese-AI + Erfolgsgeschichten. Deshalb genau zwei Bänder gespiegelt:
     · Bese-System (.bsys) → GRAU (statt weiß)  → Weiß↔Grau bleibt erhalten
     · App-Steuerung (.app-control) → WEISS (statt grau) → trennt die beiden
       Dunkel-Inseln sauber (Dunkel · Weiß · Dunkel)
   Gleiche Spezifität wie die geerbten Band-Regeln, steht später → gewinnt. */
/* HISTORIE 2026-09-17: die Regel „Bese-System → GRAU" ist RAUS. Sie hatte
   genau einen Grund — das weiße „Kennst du das?"-Band davor —, und die
   Section ist seit dem 17.09. auf allen Seiten entfernt (Marie; Erichs
   Go-Live-Briefing 2.2). Mit der Regel stünden Trust(G) und Bese-System(G)
   als Doppel-Ton an einer Naht; ohne sie greift die geerbte Weiß-Zuweisung:
   Trust(G) · Bese-System(W) · Bese-AI(D). Am Pixel gemessen. Wiedereinbau
   der Section = diese drei Zeilen zurück:
     html[data-theme="light"] .page-auftragsgewinnung .bsys {
       background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
     } */
/* App-Steuerung: seit dem Rollout 2026-09-11 Dunkel-Insel über die
   konsolidierte Liste (Marie: „Sie sollen überall jetzt genau dieses Design
   bekommen, wie sie auf der Startseite sind") — die frühere Weiß-Zuweisung
   steht hier nicht mehr. Rhythmus danach: Bese-AI(D) · RA(G) ·
   App-Steuerung(D) · Cases(D) — zwei dunkle Sections in Folge wie im
   Startseiten-System-Bogen. Zurück auf Weiß = diese Regel wieder einsetzen
   UND .page-auftragsgewinnung im Block „5) Steuerung per App — Animation
   auf Hell" eintragen (beide Hälften, sonst rendert die Animation
   grau-in-grau). */

/* ---- Startseite: Band-Abweichungen (Rhythmus-Runde Marie 2026-09-02) ----
   Marie (mit dem Referenzen-Audit-Punkt 6 als Beleg): der Startseiten-
   Rhythmus war „sehr, sehr unruhig" — angleichen an Talenthafen/
   Saleshax. GEMESSEN (Luminanz-Profil, Fullpage 1440px):
     Saleshax     4 Dunkel-Zonen à 2400–3400px, 55 % dunkel,  9 Wechsel
     Talenthafen  3 Dunkel-Zonen, 20 % dunkel,                7 Wechsel
     Startseite   9 Dunkel-Zonen, 45 % dunkel,               19 Wechsel
   → Schema-Entscheidung SALESHAX: unser Dunkel-Anteil war schon auf
   deren Niveau, das Problem war die ZERSTÜCKELUNG. Statt 6 verstreuter
   Dunkel-Bänder jetzt DREI lange Bögen.
   NACHRUNDE am selben Tag (Marie: „mir gefällt noch nicht, wie die
   Aufteilung von schwarz, weiß und grau ist"): die Licht-Strecken
   liefen zunächst als W/G-Schachbrett (Bsys G, Über-uns G, FAQ G).
   NACHGEMESSEN kennen die Referenzen aber fast kein Grau — Saleshax
   ist W·D·W·D·W·D·W·G·D·W mit EINEM Grau-Splitter (2 % der Seite),
   Talenthafen 10 % Grau: beides Zwei-Ton-Seiten. Darum ist Grau von
   der Startseite KOMPLETT raus; die Gliederung INNERHALB der weißen
   Strecken tragen die Komponenten (dunkle FAQ-/Fitcheck-Karten,
   Porträt-Fries, Fotos — Talenthafen-Prinzip „Dunkel-Wirkung aus
   Karten auf hellem Grund"):
     Bogen 1 „Vertrauen":  Hero(D) · Trust(D) · Reviews(D)
     Licht-Strecke 1:      Kennst-du-das(W) · Bese-System(W)
     Bogen 2 „System":     Bese-AI(D) · App-Steuerung(D) · Cases(D)
     Licht-Strecke 2:      Über-uns(W) · Passt-das(W) · FAQ(W) · Schritte(W)
     Schluss-Anker:        KM(D) · Footer
   RUNDE 3 (Marie 2026-09-04: „nach der Hero-Section die Sections
   erst mal mit hellem Hintergrund"): der dunkle Vertrauens-Bogen ist
   aufgelöst — Trust + Reviews sind helle Bänder, die erste Licht-
   Strecke beginnt direkt nach dem Hero und läuft bis Bese-System.
   Weiß statt MIST-Grau, weil die Startseite seit der Nachrunde keine
   Grau-Bänder kennt; die Gliederung tragen die Komponenten (dunkle
   Logo-Kachel, weiße Testimonial-Karten mit Schatten, Reviews-Kachel):
     Hero-Anker:           Hero(D)
     Licht-Strecke 1:      Trust(W) · Reviews(W) · Kennst-du-das(W) · Bese-System(W)
     Bogen „System":       Bese-AI(D) · App-Steuerung(D) · Cases(D)
     Licht-Strecke 2:      Über-uns(W) · Passt-das(W) · FAQ(W) · Schritte(W)
     Schluss-Anker:        KM(D) · Footer
   Die frühere Regel „nie 3 helle Bänder in Folge" (Marie 2026-07-15)
   bleibt FÜR DIE STARTSEITE abgelöst; ebenso das Idiom „zwei helle
   Bänder nie im selben Ton" — beides gilt auf den Unterseiten weiter.
   Bese-System + FAQ beziehen ihr Weiß aus den geteilten BRIGHT-/FAQ-
   Regeln (die Grau-Overrides der Runde 1 sind entfernt); Über-uns,
   Trust + Reviews brauchen die Weiß-Zeile HIER, weil sie auf den
   Unterseiten MIST-grau bleiben. Gleiche Spezifität wie die geerbten
   Band-Regeln, steht später → gewinnt.
   HINWEIS: Auf der Startseite gewinnt am Dateiende der Block „Flächen
   flach" (Marie 2026-09-04) gegen diese Gradient-Bänder — der aktuelle
   Startseiten-Rhythmus (inkl. der 2026-09-08 zurückgeholten Grau-Bänder
   Reviews/Bese-System/Passt-das) wird DORT gesetzt, nicht hier. */
html[data-theme="light"] .page-home :is(.about, .trust, .reviews) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}

/* ---- Startseite: seiten-eigene Dunkel-Sektionen ----------------
   Historie: Die Schwarz-Grau-Familie (Marie 2026-07-08, „zu viele
   Farben / teilweise wirr") war zunächst NUR hier — alle anderen
   Seiten hatten Navy-Inseln. **Seit 2026-08-03 ist Charcoal der
   projektweite Standard** (Marie: „ich möchte überall diese dunkle
   schwarz-graue Fläche haben, nicht diese Navy-Fläche"): die Werte
   stehen jetzt in der konsolidierten Insel-Quelle (Block 3) und in
   den geteilten Kachel-Regeln (Block 4). Die früheren page-home-
   Duplikate sind damit entfallen.
   Hier bleibt nur, was die Startseite EXKLUSIV hat: die App-Steuerung
   ist eine seiten-eigene Dunkel-Sektion (auf allen anderen Seiten ein
   helles Band) und braucht deshalb ein eigenes Insel-Tokenpaket plus
   Fläche.
   Rhythmus hell seit der Rhythmus-Runde 2026-09-02 (Saleshax-Schema;
   Nachrunde: Grau komplett raus, Licht-Strecken rein weiß) — und seit
   Marie 2026-09-04 („nach der Hero-Section die Sections erst mal mit
   hellem Hintergrund") beginnt die erste Licht-Strecke DIREKT nach dem
   Hero (Herleitung im Abweichungs-Block direkt darüber):
   Hero(D) ‖ Trust(W) · Reviews(W) · Kennst-du-das(W) · Bese-System(W) ‖
   Bese-AI(D) · App-Steuerung(D) · Erfolgsgeschichten(D) ‖ Über-uns(W) ·
   Passt-das(W) · FAQ(W) · So-läuft's-ab(W) ‖ KM(D). */

/* App-Steuerung = Dunkel-Sektion NUR auf der Startseite → braucht das
   volle Insel-Tokenpaket (sie steht nicht in der konsolidierten
   Insel-Liste, weil sie auf allen anderen Seiten ein helles Band
   bleibt). Seit 2026-09-02 (Bogen-Bildung). Trust + Reviews standen
   bis 2026-09-04 ebenfalls hier (dunkler Vertrauens-Bogen) — seitdem
   helle Bänder wie auf den Unterseiten, nur in Weiß statt MIST-Grau
   (Abweichungs-Block). Die Entblau-Overrides für die App-Animation
   (Block 5) führen .page-home nicht — die Kinder rendern hier über
   die Insel-Tokens im Original-Dark-Look. */
/* Fläche der seiten-eigenen Dunkel-Sektionen — dieselbe
   Charcoal-Familie wie die konsolidierten Inseln (Block 3).
   (.beseai/.cases/.km-cta/.faq-item/.ns-station__card/
   .logo-marquee--framed brauchen hier NICHTS mehr: seit dem
   projektweiten Charcoal-Rollout 2026-08-03 stehen ihre Werte in den
   geteilten Regeln weiter oben.) */
/* ---- Zwei Kacheln mit THEMENEUTRAL navy-fester Basis ------------
   .ns-finale__card und .fitcheck__panel tragen ihren dunklen Grund in
   der Basis-Regel (gilt in BEIDEN Themes) — der Charcoal-Rollout im
   Light-Block erreicht sie deshalb nicht. Hier auf allen Band-Seiten
   auf die Charcoal-Kachel-Familie ziehen. Im Dark-Theme bleibt die
   Navy-Basis unangetastet (CI). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .ns-finale__card {
  background: linear-gradient(160deg, #26282C 0%, #191B1F 100%);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .fitcheck__panel {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(var(--glow-rgb), 0.08) 0%, rgba(var(--glow-rgb), 0) 55%),
    linear-gradient(160deg, #26282C 0%, #1D1F23 55%, #16181B 100%);
}

/* ---- Beweis-Wand: Foto-Karten + Statement auf Charcoal (2026-08-05,
   Foto-Fassung 2026-09-17) Dieselbe Lücke wie bei .ns-finale__card/
   .fitcheck__panel darüber: .mf-foto (Backplate hinter dem Foto) und
   .mf-statement tragen ihren dunklen Grund in der Basis-Regel (beide
   Themes) und wurden vom Charcoal-Rollout 2026-08-03 deshalb nicht
   erfasst — auf dem charcoal-farbenen Insel-Band lasen sich die Karten
   sichtbar blau. Hier auf allen Band-Seiten auf die Charcoal-Kachel-
   Familie ziehen (#26282C/#191B1F wie .ns-finale__card). Der Cyan-Radial
   bleibt als Akzent, nur die Fläche wird neutral. Im Dark-Theme bleibt
   die Navy-Basis unangetastet (CI). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .mf-foto {
  background: #191B1F;
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .mf-statement {
  background:
    radial-gradient(120% 90% at 20% 100%, rgba(var(--glow-rgb), 0.20), transparent 62%),
    linear-gradient(158deg, #26282C, #191B1F);
}

/* ---- ALLE Heroes = Dunkel-Insel (Marie 2026-08-03) --------------
   Marie: „Mach bitte bei der hellen Version trotzdem alle Hero
   Sections dunkel im Hintergrund. Auf allen Seiten, bei denen es noch
   nicht so ist." Damit ist der dunkle Hero der Projekt-Standard —
   die zuvor seitenweise gepflegten Einzel-Blöcke (Startseite, MF,
   Videoproduktion, Mitarbeitergewinnung, Website) sind hier zu EINER
   konsolidierten Quelle zusammengelegt (der Guardian hatte das beim
   3. Dark-Hero bereits als Nice-to-have notiert; die Blöcke waren
   Gradient- und Token-identisch).
   Weil `.hero` seit dieser Runde nicht mehr in der BRIGHT-Liste steht,
   braucht der Hintergrund KEINEN `body.`-Präfix mehr — es gibt keine
   konkurrierende helle .hero-Regel mehr.
   NICHT in der Liste: .page-team + .page-karriere — deren Heroes sind
   Foto-Bühnen mit eigenem, getunten Scrim-Paket (weiter oben bzw. im
   Karriere-Block) und waren ohnehin schon dunkel.
   Seit 2026-09-04 ebenfalls NICHT in der Liste:
   .page-selbststaendig-machen — Marie wollte den Hero dieser Seite
   ausdrücklich HELL („die Hero-Section hell", Aurora + Flow-Layer
   raus). Die Fläche und der Hero-Hintergrund „Das Imperium" stehen
   im Block „SELBSTSTÄNDIG MACHEN — Heller Hero" am Dateiende; der
   Hero trägt dort `data-hero-light` für den Trustpilot-Sync.
   Die Fläche läuft in der Charcoal-Familie — seit dem projektweiten
   Rollout 2026-08-03 (Marie) der Standard für ALLE Dunkel-Flächen im
   Light-Theme, nicht mehr Navy. Cyan bleibt Akzent (Aurora,
   Hero-Visuale), nur die Fläche ist neutral. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-kanalservice, .page-schaedlingsbekaempfung, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero {
  --aurora-blend: screen;
  --aurora-opacity: 1;
  background: linear-gradient(180deg, #1F2226 0%, #17191D 55%, #131518 100%);
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --accent-hover: #4DA8DA;
  --cyan-hi: #6BC4F0;
  --silver-blue: #B3CCDF;
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --logo-mono-filter: brightness(0) invert(1);
  --focus-ring: #FFFFFF;
  color: var(--text-100);
}
/* Eyebrow-Punkt auf der Insel wieder lebendig (überschreibt die
   entsättigte Slate-Variante aus Block 1 — Spezifität 0,3,2). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-kanalservice, .page-schaedlingsbekaempfung, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero .eyebrow__dot,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-kanalservice, .page-schaedlingsbekaempfung, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero .eyebrow__dot::after {
  background: var(--accent-hover);
}
/* Hero-Eyebrow-Pille: dunkle Glas-Variante auf allen Dunkel-Heroes
   (analog Insel-Pillen-Regel oben). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-kanalservice, .page-schaedlingsbekaempfung, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero .eyebrow {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--glass-border);
  color: var(--text-200);
  box-shadow: none;
}
/* Karriere-Hero ist eigener Foto-Insel-Block (nicht in der Liste). */
html[data-theme="light"] .page-karriere .ka-hero .eyebrow {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--glass-border);
  color: var(--text-200);
  box-shadow: none;
}

/* Hero-Kennzahlen: der Navy-Zahl-Verlauf aus Block 4 (für das frühere
   weiße Hero-Band gedacht) wäre auf der dunklen Bühne fast unsichtbar
   → zurück auf den Dark-Verlauf Weiß → Silver-Blue. */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-kanalservice, .page-schaedlingsbekaempfung, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .hero .hero-stat__num {
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #FFFFFF 55%,
    rgba(179, 204, 223, 0.85) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}
/* Hero-Visual-Glows wieder voll: die globalen Light-Regeln dämpfen sie
   auf 0.55, weil die Heroes dort weiße Bänder waren.
   Seit 2026-08-27 (Marie): der Orb (.hv-orders__glow) läuft wieder auf
   der AUFTRAGSGEWINNUNG, die Startseite ist visual-frei (zentrierter
   Hero überm Office-Video); „Das Netz" (.hv-weave__halo) ist nirgends
   mehr eingebunden — Partial bleibt reaktivierbar, der Selektor bleibt
   deshalb als Reserve stehen (greift ohne Markup nicht). */
html[data-theme="light"] .page-auftragsgewinnung .hv-orders__glow,
html[data-theme="light"] .page-auftragsgewinnung .hv-weave__halo { opacity: 1; }

/* (MA-Recruit · Video-Showroom · Selbst-Probleme/Gweg/Gstory/Capacity:
   Token-Paket + Dunkel-Hintergrund + Eyebrow-Akzent kommen seit dem
   Refactor 2026-06-26 aus der EINEN konsolidierten Insel-Quelle oben in
   Block 3. Hier bleiben nur seiten-spezifische Band-Abweichungen.) */

/* ---- Videoproduktion: Band-Rhythmus (Marie 2026-07-31) ----------
   Marie: Hero in BEIDEN Themes dunkel (Bühne für das Hero-Visual
   „Die Kamera"), die beiden großen Video-Showrooms (Imagevideos +
   Recruiting) dagegen hell. Rhythmus danach:
     Hero(D, Insel) · Imagevideos(W) · Recruiting(G) ·
     Animation(D, Insel — Duo-Variante bleibt dunkel) · Drehtermin(W).
   Die zwei hellen Showroom-Bänder werden per Weiß/Grau unterschieden
   (Projekt-Idiom, kein Doppel-Ton); die Duo-Variante zieht Tokens +
   Hintergrund weiter aus der konsolidierten Insel-Liste (Block 3). */

/* Der Hero kommt seit 2026-08-03 aus der konsolidierten Dunkel-Hero-
   Regel („Alle Heroes = Dunkel-Insel", weiter unten in diesem Block);
   sein Verlauf läuft unten auf Dunkel aus → harter, gewollter Schnitt
   zum weißen Imagevideo-Band. Das Hero-Visual pinnt seine Palette am
   Partial-Root (data-hv-cam-theme="dark"). */

/* Showroom-Bänder: Imagevideos weiß, Recruiting grau. */
html[data-theme="light"] .page-videoproduktion .showroom--image {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
html[data-theme="light"] .page-videoproduktion .showroom--recruiting {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}

/* (Sterne, Playlist-Hover und Scrollbar brauchen hier KEINE eigenen
   Regeln: die Light-Overrides dafür stehen bereits im Komponenten-
   Block oben — sie greifen jetzt auf den beiden hellen Showroom-
   Bändern genau richtig. Werte, die ÜBER dem Video liegen
   (Play-Button, Zähler, Playlist-Play), bleiben bewusst dunkel: sie
   sitzen in beiden Themes auf dem Poster.) */

/* Bühne als echte helle Karte mit weichem Licht-Schatten (Muster
   story-card / maweg-Karten) statt der dunklen Glas-Kante. */
html[data-theme="light"] .page-videoproduktion :is(.showroom--image, .showroom--recruiting) .showroom__stage {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 32px 80px -32px rgba(var(--shadow-rgb), 0.28);
}
/* Projektor-Lichtkegel auf Hell stark zurücknehmen — auf Weiß wirkte
   der Brand-Blau-Radial wie ein Farbschleier. */
html[data-theme="light"] .page-videoproduktion :is(.showroom--image, .showroom--recruiting) .showroom__glow {
  opacity: 0.5;
}

/* Video: Drehtermin-CTA = helles Abschluss-Band (Text + Signature-CTA,
   kein dunkles Visual) → frisches Weiß nach der dunklen Animations-Insel. */
html[data-theme="light"] .page-videoproduktion .drehtermin {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}

/* Leistungen-Hub: FAQ (neu 2026-07-08) sitzt zwischen den dunklen
   Erfolgsgeschichten und den weißen Nächsten Schritten → graues Band,
   damit nicht zwei weiße Bänder aneinanderstoßen (Dunkel · Grau · Weiß).
   Die FAQ-Karten sind eigene Dunkel-Kacheln und tragen auf Grau. */
html[data-theme="light"] .page-leistungen .faq {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}

/* ---- AG/MA-Paket-Sektionen: Band-Zuordnungen (2026-07-09) ----
   AG-Rhythmus: … Bese-AI(D) · RA(G, dunkle Anruf-Tickets) ·
   App-Steuerung(W) · Cases(D) · Beweis-Wand(W, Karten selbst dunkel) ·
   Über-uns(G) · FAQ(W) · Reviews(G) · Schritte(W) · KM(D).
   MA-Rhythmus (Marie 2026-07-09: „auch ein paar dunkle zwischendurch",
   Nachschlag: Wachstum + Über-uns explizit dunkel):
   Hero(D, Insel seit 2026-08-03 — siehe eigener Block unten) ·
   Trust(G) · Kennst-du-das(W, geteilte BRIGHT-Regel) ·
   Wachstum(D, Dunkel-Insel — Glas-Pans/Joint leben auf Dunkel auf) ·
   Weg(G, MIST-Band — die weißen Stufen-Kacheln heben sich ab) ·
   Beweis(D, Dunkel-Insel — Karten sind ohnehin dark-built, wie die
   Cases-Insel der anderen Seiten) · Potenzial-CTA(W) ·
   Eine-Hand(D, Dunkel-Insel — dunkles Geräte-Panel) · Nachfolge(W) ·
   Über-uns(D, Dunkel-Insel) · FAQ(W) · Reviews(D, Insel seit
   2026-08-05 — vorher grau, was mit FAQ und Schritten drei helle
   Bänder in Folge ergab) · Schritte(W) · KM(D).
   Alle Dunkel-Inseln beziehen Tokens + Hintergrund aus der
   konsolidierten Insel-Liste (Block 3 oben).
   NACHTRAG 2026-09-24: der MA-Rhythmus steht jetzt im Block „ma-rhythmus-r24“
   am Dateiende — die folgende Zeile ist HISTORIE.
   NACHTRAG 2026-09-19: Kennst-du-das (17.09.) und Weg (19.09.) sind von der
   MA-Seite; gemessen galt Hero(D) · Trust(G) · Wachstum(D) · Kosmos(D) ·
   Beweis(D) · Potenzial-CTA(W) · Eine-Hand(D) · Nachfolge(W) · Über-uns(D,
   Startseiten-Fassung) · FAQ(W) · Reviews(D) · Schritte(W) · KM(D) — drei
   Dunkel-Sections in Folge, nicht umgelegt (Rhythmus Schlussrunde). */
html[data-theme="light"] .page-auftragsgewinnung .ra {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
html[data-theme="light"] .page-auftragsgewinnung .mf-beweis {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
/* HISTORIE (2026-09-19): das weiße MA-Band des 5-Stufen-Wegs — die Section
   ist auf Marie-Zuruf von der MA-Seite (Include = ENTFERNT-Kommentar im
   Page-File); die Zeile bleibt als Rückbau-Vorlage, damit ein Wiedereinbau
   seinen Ton bewusst entscheidet statt ihn zu erben (§0b).
html[data-theme="light"] .page-mitarbeitergewinnung .maweg {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
*/
/* .mapc seit 24.09.2026 grau — steht im Block „ma-rhythmus-r24“ */
html[data-theme="light"] .page-mitarbeitergewinnung .manf {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}

/* MA-Hero = Dunkel-Insel (Marie 2026-08-03: „Hero-Section dunkel, im
   Hintergrund auch in der hellen Version"). Exakt das MF-/Website-/
   Videoproduktion-Hero-Muster: der body.-Präfix (0,3,2) schlägt die
   geteilte BRIGHT-.hero-Regel, die Dark-Aurora wird re-aktiviert, der
   Verlauf läuft unten dunkel aus → sauberer Schnitt zum grauen
   Trust-Band. Das Hero-Visual „Die Auswahl" pinnte seine Palette am
   Partial-Root (data-hv-pick-theme="dark" — seit 24.09.2026 ausgebaut,
   der Hero trägt das Video „Die Garderobe"), der Trustpilot-Score
   unter dem CTA über data-tp-fixed-theme="dark". */
/* Fläche, Tokens und Eyebrow-Akzent kommen seit 2026-08-03 aus der
   konsolidierten Dunkel-Hero-Regel („Alle Heroes = Dunkel-Insel",
   weiter unten in diesem Block). MA-eigen bleibt nur die Kennzahl-
   Farbe: Marie wollte hier ausdrücklich REIN weiß („bitte hell, weiß
   einfach") statt des Weiß→Silver-Blue-Verlaufs der anderen Heroes. */
html[data-theme="light"] .page-mitarbeitergewinnung .hero .hero-stat__num {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Weg-Stufen-Kacheln: die dark-first Glas-Basis wäre auf dem grauen
   MIST-Band ausgewaschen → echte weiße Karten mit weichem
   Licht-Schatten (Muster wie Testimonial-/Gweg-Karten). Die Discs
   darüber bleiben feste dunkle Geräte-Flächen.
   (Wachstum ist seit 24.09.2026 wieder hell — Karten-Overrides im
   Block „ma-rhythmus-r24“ am Dateiende.) */
html[data-theme="light"] .page-mitarbeitergewinnung .maweg__card {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}
html[data-theme="light"] .page-mitarbeitergewinnung .maweg__card:hover {
  border-color: rgba(var(--shadow-rgb), 0.18);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 24px 52px -26px rgba(var(--shadow-rgb), 0.26);
}
html[data-theme="light"] :is(.page-mitarbeitergewinnung) .manf__photo {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow: 0 22px 50px -28px rgba(var(--shadow-rgb), 0.22);
}
/* Telefon-Pille im Potenzial-CTA: Glas-Basis → helle Karte */
html[data-theme="light"] :is(.page-mitarbeitergewinnung) .mapc__phone {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.14);
}

/* ---- Kanalservice-Paket-Sektionen: Band-Zuordnungen (2026-07-15) ----
   Rhythmus (Marie-Regel 2026-07-15 „nie 3 helle Bänder in Folge" —
   Dunkel-Inseln aus der konsolidierten Liste in Block 3):
   Hero(W) · Trust(G) · Reviews(D, Insel wie Startseite) ·
   Kennst-du-das(W) · Spezialisierung/kspez(G, dunkles Such-Panel) ·
   RA richtige Aufträge(D, Insel — Tickets ohnehin dark-built) ·
   Bese-System(W) · Bese-AI(D) · App-Steuerung(D — seit 2026-09-10
   dunkel wie auf der Startseite, bildet mit Bese-AI EINEN Bogen) ·
   Magazin(G, weißes Feed-Panel hebt sich ab) · Cases(D) ·
   Beweis-Wand(W, Karten selbst dunkel — wie AG) · Über-uns(D, Insel
   wie MA) · Passt-das(W) · FAQ(D, Insel wie Startseite) ·
   Schritte(W) · KM(D).
   Gleiche Spezifität wie die geerbten Band-Regeln, steht später →
   gewinnt. */
html[data-theme="light"] :is(.page-kanalservice, .page-kanal-start) .kspez {   /* .page-schaedlingsbekaempfung raus: dort seit 19.09. .sfok (eigene Band-Regel im S4-Block) */
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
html[data-theme="light"] :is(.page-kanalservice, .page-kanal-start) .magazin {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
/* Bese-AI + App-Steuerung bilden auf KANALSERVICE seit 2026-09-10 EINEN
   dunklen Bogen (wie auf der Startseite). Beide Flächen deshalb FLACH
   statt im 180°-Insel-Verlauf: der Verlauf endet unten auf #131518 und
   begann in der nächsten Sektion wieder bei #1F2226 — an der Naht stand
   eine sichtbare Kante (Luminanz 19 → 34, gemessen 2026-09-10). Das ist
   dasselbe Rezept wie im Startseiten-Block „Flächen flach". Die Kanten
   zu den NACHBARN bleiben gewollt sichtbar (Bese-System weiß davor,
   Magazin grau danach). */
/* … zur App-Steuerung auf KANALSERVICE: sie ist seit 2026-09-10 eine
   Dunkel-Sektion (Marie: „die Section Steuerung per App gerne auch auf
   dem dunklen Hintergrund, so wie bei der Startseite"). ÜBERHOLT seit
   dem Rollout 2026-09-11: es gibt hier KEIN seiten-eigenes Rezept mehr —
   die Section läuft wie Bese-AI über die konsolidierte 20-Seiten-Liste
   (Insel-Tokens), die generische Flach-Regel (#17191D) und den
   generischen Silver-Blue-Akzent; die früheren Kanalservice-Blöcke
   (Tokenpaket + Flächen-Regel) sind als redundant entfernt, gemessen mit
   0 Abweichungen. Damit gilt auch der Akzent-Satz von 2026-09-10 nicht
   mehr: Kanalservice führt jetzt Silver Blue wie alle anderen Seiten,
   nicht Cyan. Die zweite Hälfte des Rezepts steht weiterhin: die Seite
   ist aus den Entblau-Overrides des Blocks „5) Steuerung per App —
   Animation auf Hell" entfernt (sonst rendert die Animation
   grau-in-grau) — dort steht seit dem Rollout ohnehin keine Seite mehr. */
/* Eyebrow-Pille + Punkt wieder im Insel-Look (schlägt die späte
   P6-Tinte-Punkt-Regel (0,3,1) per Spezifität 0,4,1 — Muster der
   Startseiten-Insel). */
html[data-theme="light"] :is(.page-kanalservice, .page-schaedlingsbekaempfung, .page-website) .mf-beweis {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}

/* ---- Branchen-Hub /branchen/ : Band-Zuordnungen (2026-07-23) ----
   Rhythmus: Hero(W) · Branchen-Karten/svc-hub(G — seit 2026-09-10 sind
   BEIDE Karten Foto-Dunkel-Inseln [.svc-card--photo + .svc-card--dark,
   Block „Branchen-Hub — Foto-Karten"], sie heben sich auf MIST ab) ·
   Beweis-Wand(D, Insel — Arm in der
   konsolidierten Liste, Karten ohnehin dark-built wie auf MA) ·
   CTA-Band/mapc(W). */
html[data-theme="light"] .page-branchen .svc-hub {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
html[data-theme="light"] .page-branchen .mapc {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
html[data-theme="light"] .page-branchen .mapc__phone {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.14);
}

/* ---- Erfolgsgeschichten: Band-Zuordnungen (2026-07-23) ----
   Galerie: Hero(W) · Klein(G) · Mittel(W) · Groß(D, Insel-Arm in der
   konsolidierten Liste — Glas-Karten leben auf Dunkel auf) ·
   CTA-Band(W). Detail-Seiten: Hero-Band weiß, Artikel auf Seiten-BG,
   Karten-Elemente (Tabelle/Zitat/Chips) als weiße Karten. */
html[data-theme="light"] .page-erfolgsgeschichten .eg--klein {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
html[data-theme="light"] :is(.page-erfolgsgeschichten .eg--mittel, .page-erfolgsgeschichten .mapc, :is(.page-erfolgsgeschichten, .page-ueber-uns) .cs-hero) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
html[data-theme="light"] .page-erfolgsgeschichten .mapc__phone {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.14);
}
/* Story-Karten auf den hellen Bändern: echte weiße Karten mit
   weichem Licht-Schatten (Muster wie Testimonial-/Maweg-Karten).
   Die Groß-Gruppe ist Dunkel-Insel → Karten bleiben Glas. */
html[data-theme="light"] .page-erfolgsgeschichten :is(.eg--klein, .eg--mittel) .story-card {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}
html[data-theme="light"] .page-erfolgsgeschichten :is(.eg--klein, .eg--mittel) .story-card:hover {
  border-color: rgba(var(--shadow-rgb), 0.18);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 24px 48px -26px rgba(var(--shadow-rgb), 0.24);
}
/* Case-Study-Detail: Karten-Elemente hell */
html[data-theme="light"] :is(.page-erfolgsgeschichten, .page-ueber-uns) :is(.cs-table-wrap, .cs-quote, .cs-chips li) {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.12);
}

/* ---- Karriere + Kontakt: Band-Zuordnungen ----
   Karriere (Neuaufbau 2026-07-30 nach Live-Vorbild): durchgaengiger
   D·W·G-Rhythmus, nie zwei gleiche Toene nebeneinander —
   Hero(D, Foto-Insel) · Bento(W-Band, Kacheln = Dunkel-Karten) ·
   Team(G) · Technologie(D, Insel) · Benefits(W-Band,
   Karten dunkel) · Offene-Stellen(G) · Einblicke/Team-Statements(W —
   Band-Tausch Marie 2026-09-02: „Einblicke auf hellem Hintergrund,
   dafuer Antrieb/Prinzipien dunkel") · Prinzipien(D, Insel; seit
   18.09.2026 wieder Kachel-Raster statt Galerie-Raum) ·
   Bewerbungsprozess(G) ·
   Erich(D, Insel) · Fabio(D, Insel — Marie 2026-07-31, bildet mit
   Erich EINE zusammenhaengende dunkle Personen-Zone) · Standort(G) ·
   CTA-Band(D, Insel).
   Kontakt: Hero(W) · Rueckruf-Formular(G, weisse Form-Karte) ·
   Schritte(Seiten-BG) · Standort(W) · Bese-AI-Check(D, Insel) ·
   FAQ(W, geteilte BRIGHT-Regel) · CTA-Band(W). */
html[data-theme="light"] :is(.page-karriere :is(.ka-team, .ka-stellen, .ka-prozess, .ka-standort), .page-kontakt .kt-anfrage) {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
html[data-theme="light"] :is(.page-karriere :is(.ka-bento, .ka-benefits, .ka-stimmen), .page-kontakt :is(.kt-standort, .mapc:not(.kt-check))) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
/* Einblicke auf dem WEISSEN Band: die Glas-Video-Karten werden echte
   weisse Karten mit Licht-Schatten (Projekt-Idiom „flaches Glas auf
   hellen Baendern"); Poster/Play-Button bleiben unveraendert — sie
   liegen auf dem Videobild selbst. */
html[data-theme="light"] .page-karriere .ka-voice {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}
/* NUR Kontakt: dort ist das mapc-CTA-Band ein HELLES Band → weisse
   Telefon-Pille. Auf Karriere ist das Band eine DUNKEL-Insel — die
   weisse Pille war dort weiss-auf-weiss unlesbar (Marie 2026-07-30);
   sie behaelt jetzt ihren Dark-Glass-Default. */
html[data-theme="light"] .page-kontakt .mapc__phone {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.14);
}
/* Formular-Karte + Telefon-Pille auf hellen Baendern: weisse Karten */
html[data-theme="light"] .page-kontakt :is(.kt-form, .kt-call__phone) {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.12);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.16);
}

/* --- Karriere-Karten auf die Charcoal-Familie ziehen (2026-08-03) ---
   Das geteilte Dunkel-Karten-Rezept (:is(.ka-tile, .ka-benefit,
   .ka-extra, .ka-step__card)) ist THEMENEUTRAL und trug
   noch die Navy-Stops — nach dem Charcoal-Rollout hätten navy Karten
   neben charcoal Sektionen gestanden. Hier nur der letzte Gradient der
   Stapelung getauscht (Glow-Ellipse + 56px-Raster bleiben identisch);
   im Dark-Theme bleibt die Navy-Basis unangetastet (CI).
   Der Bottom-Scrim der Schritt-Kopfbilder muss exakt auf dem neuen
   letzten Stop sitzen (#16181B statt #0D1622), sonst zeichnet sich die
   Bildunterkante als Kante ab.
   (.ka-prinzip seit dem Kachel-Raster 18.09.2026 wieder dabei.) */
html[data-theme="light"] .page-karriere :is(.ka-tile, .ka-benefit, .ka-extra, .ka-prinzip, .ka-step__card) {
  background:
    radial-gradient(ellipse 74% 72% at 12% -8%, rgba(var(--glow-rgb), 0.11) 0%, transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(160deg, #26282C 0%, #1D1F23 52%, #16181B 100%);
}
html[data-theme="light"] .page-karriere .ka-step__media::after {
  background: linear-gradient(180deg, rgba(22, 24, 27, 0) 55%, rgba(22, 24, 27, 0.55) 100%);
}

/* --- Karriere-Hero: Foto-Buehne, in BEIDEN Themes dunkel ---
   Gleiche Technik wie Team-/MF-/Website-Hero: eigenes Dark-Tokenpaket
   + `body.`-Praefix, damit die geteilte helle .hero-Bandregel
   (Spezifitaet 0,3,1) geschlagen wird. */
html[data-theme="light"] body.page-karriere .hero {
  background: var(--ka-hero-bg);
}
html[data-theme="light"] .page-karriere .hero {
  --heading-color: var(--white);
  --text-100: rgba(255, 255, 255, 0.92);
  --text-200: rgba(255, 255, 255, 0.74);
  --text-300: rgba(255, 255, 255, 0.46);
  --text-400: rgba(255, 255, 255, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --accent-hover: #4DA8DA;
  --silver-blue: #B3CCDF;
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  /* `--logo-mono-filter: brightness(0) invert(1)` stand hier für das
     Hero-Logo-Band (ohne den Wert zog der Marquee im Light-Theme den
     HELLEN Filter und stand als dunkles Logo auf dunklem Video, gemessen
     1,3:1) — das Band ist auf dieser Seite seit dem 2026-09-10 wieder
     raus (Marie: „für die Karriereseite nicht relevant"), kein Kind von
     `.hero` verbraucht das Token hier noch, also entfernt. Kommt das Band
     zurück, gehört die Zeile mit: das Token-Paket dieser Video-Bühne ist
     NICHT Teil der konsolidierten Insel-Regel (§5a-Ausnahme „eigenes,
     getuntes Scrim-Paket") und erbt den Wert deshalb nicht. */
  color: rgba(255, 255, 255, 0.92);
}

/* --- Karten auf den hellen Karriere-Baendern ---
   Bento-Kacheln, Benefit-Karten + Extras sind seit 2026-07-30
   Karten-Dunkel-Inseln in BEIDEN Themes (Marie: „zu hell,
   keine Dimension" — Basis-Rezept im KARRIERE-Block) und brauchen
   hier KEINEN Weiss-Override mehr (die Prinzipien-Karten stehen seit
   dem Band-Tausch 2026-09-02 in der eigenen Dunkel-Sektion). Weiss
   bleibt nur die Standort-Karte; die Kontakt-Karten sitzen seit
   2026-07-31 auf der dunklen Fabio-Insel und behalten ihren
   Glass-Default. */
html[data-theme="light"] .page-karriere .ka-standort__card {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}

/* (Der fruehere Nahe-Schwarz-Override der Technologie-Buehne entfiel
   2026-07-30: das Geraete-Mockup ist jetzt echt freigestellt und
   braucht keinen schwarzen Grund mehr — es gilt wieder die geteilte
   Dark-Insel-Hintergrund-Regel.) */

/* (Die weissen Team-Pfeile auf dem grauen Band entfielen 2026-09-18 mit
   dem Slider — „Unser Team" zeigt jetzt den Porträt-Fries aller 18.) */

/* Bewerbungsprozess-Knoten auf hellem Band: weisse Discs */
/* (Die Bewerbungsprozess-Discs brauchen seit dem Timeline-Redesign
   2026-07-31 KEINEN Weiss-Override mehr — feste dunkle Geraete-Discs
   in beiden Themes, die Karten kommen aus dem Dunkel-Karten-Rezept.) */

/* (Geister-Zahl, Foto-Kachel-Beschriftung und Logo-Reihe brauchen seit
   dem Dunkel-Karten-Umbau 2026-07-30 keine Light-Overrides mehr — die
   Kacheln bringen ihr Dark-Tokenpaket selbst mit.) */

/* ---- Website/Plattform/So-funktioniert-es: Band-Zuordnungen ----
   Website (Rhythmus 2026-07-24 gelegt, am 2026-09-16 neu gelegt,
   nachdem Marie DREI Sections gestrichen hat — Widget/kspez,
   Buchung+Live-Status/ws-flow und Eigentum/ws-own; Markup in
   partials/_ARCHIV-website-entfernte-sektionen.html. Hero seit
   2026-07-27 DUNKLE Insel — Marie: dunkle Bühne für das Device-Duo):
   STAND 17.09.2026 (am Pixel gemessen, 1440 px hell):
   Hero(D, Insel) · BLICKKARTE(D, Insel — trägt seit 16.09. auch die H2
   „Eine Website ist kein Schaufenster", ws-why ist in ihr aufgegangen) ·
   App-Look/ws-craft(G) · Bese-System/ws-system(W, seit 17.09. Ablauf) ·
   Stufen(D, Insel) · Beweis-Wand(W, geteilt) · FAQ(G, Seiten-Override,
   sonst weiss-weiss mit Beweis) · CTA(D, Insel) = D·D·G·W·D·W·G·D.
   „Kennst du das?" — vorher das graue Band zwischen Hero und Blickkarte —
   ist seit 17.09. auf ALLEN Seiten raus (Marie; Erichs Briefing 2.2); der
   `.painvoices`-Eintrag in der Regel darunter ist seitdem ohne Träger,
   bleibt aber für den Rückbau stehen. Hero→Blickkarte sind damit zwei
   dunkle Sections in Folge (Naht Luminanz 22 → 34) — Marie-Entscheidung
   offen (OFFENE-FRAGEN.md).
   HISTORIE (16.09. bis 17.09.): Hero(D) · Kennst-du-das(G) · Kein-
   Schaufenster/ws-why(W) · Blickkarte(D) · ws-craft(G) · ws-system(W) ·
   Stufen(D) · Beweis(W) · FAQ(G) · CTA(D) = D·G·W·D·G·W·D·W·G·D.
   DIE INSEL IST GEWANDERT (16.09., zweite Runde): vormittags war
   ws-craft die vierte Dunkel-Insel, weil zwischen Hero und Stufen sonst
   VIER helle Bänder am Stück lägen (Marie: „fixen"). Diese Aufgabe
   übernimmt jetzt die BLICKKARTE — sie MUSS dunkel sein, ihr Leuchten
   ist additives Licht und braucht dunklen Grund. ws-craft steht dafür
   auf Grau, ws-system zurück auf Weiß wie vor dem Vormittag, und
   `.ws-craft__metric` ist wieder in der Weiß-Karten-Regel. Ergebnis
   unverändert gut: längste helle Strecke zwei Bänder, keine Naht mit
   gleichem Ton, VIER Dunkel-Abschnitte — die Zahl ist also nicht
   gestiegen, nur der Träger hat gewechselt. ws-system bleibt bewusst
   hell: sein Node-Flow hat eine DUNKLE Mittelkachel („Deine Seite"),
   die auf einer Insel ihren Kontrast verlöre.
   Plattform: Hero(W) · App-Steuerung(G, geteilte MIST-Regel) ·
   Bese-AI(D, geteilt) · Eigentum-Karten(G) · FAQ(W) · CTA(D, Insel).
   So-funktioniert-es: ruhige Editorial-Seite, CTA(D, Insel). */
html[data-theme="light"] :is(.page-website :is(.painvoices, .ws-craft, .faq), .page-plattform .pf-eigentum) {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
/* Der Website-Hero (Dunkel-Insel seit 2026-07-27) kommt seit
   2026-08-03 aus der konsolidierten Dunkel-Hero-Regel („Alle Heroes =
   Dunkel-Insel" weiter oben in diesem Block); sein Verlauf läuft unten
   auf Dunkel aus → harter, gewollter Schnitt zum grauen
   painvoices-Band (D·G wie auf Kanalservice).
   .ws-why ist am 16.09.2026 aus dieser Liste geflogen: der Copy-Block
   ist in der Blickkarte aufgegangen (Marie: beide „wollen letzten Endes
   das Gleiche aussagen"), die Section gibt es nicht mehr. Sein CSS steht
   unveraendert weiter unten — nur die Band-Zuordnung war hier. */
/* .ws-system war bis zum 17.09.2026 ein WEISSES Band
   (linear-gradient(180deg, #FFFFFF, #F4F7F9)) — die Zeile ist ersatzlos weg,
   die Section steht jetzt in der konsolidierten Dunkel-Insel-Liste weiter
   oben. Die frühere Begründung an dieser Stelle („bleibt hell, sein
   Node-Flow hat eine DUNKLE Mittelkachel, die auf einer Insel ihren Kontrast
   verlöre") ist hinfällig: das Node-Flow-Schaubild ist seit dem 17.09. durch
   den Ablauf in drei Etappen ersetzt (Markup im Archiv-Partial, Block 5).
   Rhythmus danach am Pixel GEMESSEN: Hero(D) · Blickkarte(D) ·
   ws-craft(G) · ws-system(D) · ws-stufen(D) · mf-beweis(W) · faq(G) ·
   mapc(D), also D·D·G·D·D·W·G·D = DREI zusammenhängende Dunkel-Zonen bei
   61,2 % Dunkel-Anteil. ws-system und ws-stufen lesen sich als EINE Zone
   (Präzedenz MF: mf-fokus + Bese-AI). Das erste D·D stammt NICHT von dieser
   Änderung, sondern daraus, dass am selben Tag „Kennst du das?“ von der
   Seite genommen wurde. Der Anteil liegt Marie in OFFENE-FRAGEN.md vor. */
/* Merkmal-Karten auf hellen Bändern: echte weiße Karten mit weichem
   Licht-Schatten statt unsichtbarem Glas (Muster story-card/maweg-Karten —
   Marie 2026-07-24 „nicht hochwertig").
   `.ws-system__sources`/`__out` sind hier am 17.09. herausgefallen: sie
   gehören zum archivierten Node-Flow, und auf der jetzt dunklen Insel wären
   weiße Karten falsch, falls er je zurückkäme. */
html[data-theme="light"] .page-website .ws-craft__metric {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}
/* Story-Karten der Plattform-Eigentum-Karten auf Grau: weiß */
html[data-theme="light"] .page-plattform .pf-eigentum .story-card {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}
html[data-theme="light"] .page-plattform .pf-eigentum .story-card:hover {
  border-color: rgba(var(--shadow-rgb), 0.18);
}

/* ---- Ratgeber-Hub: Band-Zuordnungen (2026-07-23) ----
   Hero(W) · Artikel-Raster(G, weiße Karten) · FAQ(W, geteilte
   BRIGHT-Regel) · CTA-Band(D, Insel-Arm in der konsolidierten
   Liste). Artikel-Einzelseiten (body .page-ratgeber-artikel) sind
   bewusst NICHT im Band-Scope — ruhige Lese-Seiten auf Seiten-BG. */
html[data-theme="light"] .page-ratgeber .rg-liste {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
html[data-theme="light"] .page-ratgeber .rg-liste .story-card {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.05),
    0 18px 42px -24px rgba(var(--shadow-rgb), 0.18);
}
html[data-theme="light"] .page-ratgeber .rg-liste .story-card:hover {
  border-color: rgba(var(--shadow-rgb), 0.18);
}
/* Artikel-Seiten: Karten-Elemente (Zitat/Box) hell */
html[data-theme="light"] .page-ratgeber-artikel :is(.cs-quote, .cs-box, .cs-table-wrap, .cs-chips li) {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.12);
}

/* ---- Schädlingsbekämpfung-Paket-Sektionen (2026-07-23) ----
   Gleiches Baustein-Schema wie Kanalservice (Regeln oben per :is()
   mitgenutzt), ohne Magazin/Cases/KM. Rhythmus: Hero(W) · Trust(G) ·
   Reviews(W, seit 24.09. Bewertungs-Wand .rv3) · [Kennst-du-das raus 17.09.] · S4/.sfok(G, seit 19.09.) · RA(D) · Bese-System(W) ·
   Bese-AI(D) · App-Steuerung(W) · Gegen-die-Großen/.vs(D, Insel wie
   vorher) · [Beweis-Wand raus 19.09.] · Über-uns(D) · Passt-das(W) · FAQ(D) ·
   Schritte(W). Die Insel-Arme stehen in der konsolidierten Liste
   (Block 3: .page-schaedlingsbekaempfung :is(.vs, .ra, .about, .faq);
   .reviews seit 24.09. raus). */

/* ============================================================
   DESIGN-FEEDBACK (Marie 2026-08-25, Startseiten-Runde) —
   seit 2026-08-26 GLOBAL auf alle Seiten übertragen (Marie:
   „was du bei der Startseite geändert hast, auf allen anderen
   Seiten auch"). Nur die Orb-/Hero-spezifischen Punkte P1–P3
   bleiben Startseite. P5 (Sans-Zähler) lebt jetzt direkt in den
   Basis-Regeln (hero-stat__value ~Z. 1679, stats__value ~Z. 5980,
   control-feature__stat-value ~Z. 5060, .belege b ~Z. 15840) —
   ebenso Hero-Suffix/-Diamant (P7).
   ============================================================ */
/* (P5-Regeln in die Basis-Regeln gehoben — siehe Header oben.) */

/* --- P6: Eyebrow-Badges auf hellen Bändern — ALLE Band-Seiten ---
   Die dark-first Pille (Weiß-2,5 % + Glas-Border) war auf hellem
   Grund quasi unsichtbar/ausgewaschen. Helle Variante = präziser
   weißer Chip: solider Grund, Tinte-Hairline, feiner Licht-Schatten,
   Text + Puls-Punkt in Tinte (Schwarz/Weiß/Grau, kein Blau — Marie).
   Gilt für den ganzen 20-Seiten-Band-Scope; die Dunkel-Inseln,
   Heroes, mf-fokus und der Karriere-Hero stellen die dunkle Pille
   per höher-spezifischer Restaurierungs-Regel wieder her (je direkt
   bei ihren Insel-Eyebrow-Dot-Regeln, ~Z. 21080/21760). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .eyebrow {
  background: #FFFFFF;
  border-color: rgba(16, 24, 32, 0.12);
  color: rgba(16, 24, 32, 0.72);
  box-shadow:
    0 1px 2px rgba(16, 24, 32, 0.05),
    0 4px 14px -8px rgba(16, 24, 32, 0.10);
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .eyebrow__dot,
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .eyebrow__dot::after {
  background: rgba(16, 24, 32, 0.78);
}

/* --- P7: Hellblau reduzieren — GLOBAL --------------------------
   Blau bleibt gezielt: CTAs, Headline-em (1–2 Schlagwörter) und der
   kleine Orb-Halo der Startseite. Gestreute Cyan-Kleinakzente werden
   neutralisiert (Schwarz/Weiß/Grau). */
/* (Testimonial-em + Sterne in Tinte entfielen 2026-09-09: es gibt keine
   weißen Testimonial-Karten mehr — alle laufen als Charcoal-Dunkel-Insel
   mit Cyan-Akzent, Block „Testimonial-Kacheln" weiter oben.) */
/* Bese-AI-Belege: Weiß-Verlauf — in die P5-Regel oben konsolidiert
   (Guardian: kein Duplikat-Selektor). */
/* (Hero-Suffix/-Diamant neutral: in die Basis-Regeln gehoben.) */
/* „So läuft's ab"-Abbinder: Beleg-Anker in Tinte statt Cyan (helles
   Band; Dark-Theme unverändert). */
html[data-theme="light"] .ns-note em {
  color: rgba(16, 24, 32, 0.9);
  font-weight: 600;
}

/* --- P8: Google-Bewertungen direkt in die Section integriert ----
   Marie: keine große Glaskachel, keine bräunliche Färbung, keine
   dominanten Navy-/Blau-Bewertungskacheln. Der äußere Glas-Frame
   wird aufgelöst, die Elfsight-Karten (stabile es-*-Klassen, vom
   Widget als Custom-CSS-Hook vorgesehen) werden zu leichten, hellen
   Flächen auf dem dunklen Band. Gilt auf den 3 Seiten mit Reviews
   als DUNKLER Insel (MA/Kanal/Pest) und auf der STARTSEITE, dort aber seit
   Block M1 (17.09.2026) nur noch im DARK-Theme — im hellen Theme steht die
   Stimmen-Section auf Weiß und fährt die Charcoal-Kacheln. ⚠ Die volle
   Chronologie dieser Seite (Phase 4 → 5 → 16.09. → 17.09.) steht an EINER
   Stelle, beim Charcoal-Block weiter unten in dieser Datei — hier bewusst
   nicht wiederholt, damit nicht zwei Wahrheiten nebeneinander stehen
   (Guardian 17.09.). AG + Selbstständig machen behalten ihre Kachel-Optik
   (MIST-Grau) über dieselbe Charcoal-Regel. */
:is(.page-mitarbeitergewinnung, .page-kanalservice, .page-schaedlingsbekaempfung, .page-home) .reviews-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* Kopfzeile „Ausgezeichnet auf Google": Navy-Streifen auflösen —
   Logo, Score und Gold-Sterne stehen direkt auf der Section. */
:is(.page-mitarbeitergewinnung, .page-kanalservice, .page-schaedlingsbekaempfung, .page-home) .reviews-card .es-header-container {
  background: transparent;
}
/* Bewertungskarten: statt opaker Navy-Kacheln eine leichte helle
   Fläche mit Hairline — liest sich als Teil der Section, Text bleibt
   hell, Gold-Sterne + G-Logo bleiben (Google-Erkennbarkeit, §5a). */
:is(.page-mitarbeitergewinnung, .page-kanalservice, .page-schaedlingsbekaempfung, .page-home) .reviews-card .es-review-background-container {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

/* --- P9: „Kennst du das?" hochwertiger — ALLE Varianten ---------
   Die O-Töne waren dünne Textzeilen mit Trennstrichen — jetzt
   editoriale Karten mit 01–NN-Index (CSS-Counter, kein Markup-
   Umbau), das Foto bekommt eine versetzte Backplate (Tiefe), der
   Payoff-Trenner wird neutral. Keine neuen Animationen. Gilt seit
   2026-08-26 für alle painvoices-Instanzen (Startseite, MA, Kanal,
   Pest, Website — kompletter Klassen-Reuse). */
.painvoices__list {
  counter-reset: pv;
  gap: clamp(12px, 1.4vw, 16px);
}
.painvoices__voice {
  counter-increment: pv;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(14px, 1.7vw, 20px) clamp(16px, 2vw, 24px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.painvoices__voice::before {
  content: counter(pv, decimal-leading-zero);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--text-300);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.painvoices__quote {
  padding-left: 0;
  /* Auto-Trennung zerriss Schlüsselwörter („we-niger", „Löh-ne") —
     §5a-Pattern: manual + overflow-wrap bleibt als Hard-Wrap-Safety. */
  hyphens: manual;
}
.painvoices__line { display: none; }
/* Helles Band: echte weiße Karten mit Licht-Schatten, Hervorhebung
   in Tinte statt Blau (P7). */
html[data-theme="light"] .painvoices__voice {
  background: #FFFFFF;
  border-color: rgba(16, 24, 32, 0.10);
  box-shadow:
    0 1px 2px rgba(16, 24, 32, 0.04),
    0 16px 36px -26px rgba(16, 24, 32, 0.22);
}
html[data-theme="light"] .painvoices__quote em {
  color: rgba(16, 24, 32, 0.92);
}
/* Foto: versetzte, weiche Backplate hinter dem Motiv = räumliche
   Schichtung statt flacher Kachel. */
.painvoices__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(clamp(-16px, -1.4vw, -10px), clamp(12px, 1.3vw, 18px));
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(var(--shadow-rgb), 0.12), rgba(var(--shadow-rgb), 0.04));
  z-index: 0;
  pointer-events: none;
}
/* Payoff-Trenner neutral statt Cyan. */
.painvoices__payoff::before {
  background: linear-gradient(90deg, transparent, rgba(var(--shadow-rgb), 0.45), transparent);
}

/* ============================================================
   MA: O-Ton-Kachel-Wand (.painvoices--tiles, Marie 2026-08-26)
   NUR /leistungen/mitarbeitergewinnung/ (Modifier steht allein im
   MA-Partial) — Foto raus, die 7 O-Töne als asymmetrische Kachel-
   Wand über die volle Breite. Baut auf den globalen P9-Karten oben
   auf (Counter, weiße Karten im Light-Band kommen von dort).
   Bento: Kachel 01 + 07 doppelt breit → exakt 3 Reihen à 3 Zellen
   (≥1180px); 720–1179px: 01 vollbreit + 3 Zweier-Reihen; darunter
   1 Spalte. Geister-Nummer = derselbe CSS-Counter (::before), nur
   groß als Editorial-Ziffer hinter dem Text (Idiom .svc-card__index).
   Spotlight = generischer [data-spotlight]-Handler auf der Liste
   (::after-Radial, Rezept .ka-benefit). Hover-Lift über die
   translate-Property — kollidiert nicht mit dem Reveal-Transform
   (translateY → none) der Basis-Regel.
   ============================================================ */
.painvoices--tiles .painvoices__list {
  /* position+z-index: die Garantie „Inhalt über der Aurora" kam vorher
     vom entfernten .painvoices__grid-Wrapper — hier explizit statt
     über DOM-Reihenfolge (Guardian 2026-08-26). */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
@media (min-width: 720px) {
  .painvoices--tiles .painvoices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painvoices--tiles .painvoices__voice:first-child { grid-column: span 2; }
}
@media (min-width: 1180px) {
  .painvoices--tiles .painvoices__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .painvoices--tiles .painvoices__voice:first-child,
  .painvoices--tiles .painvoices__voice:last-child { grid-column: span 2; }
}

.painvoices--tiles .painvoices__voice {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 50%;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px) clamp(24px, 2.8vw, 36px);
  /* Reveal (opacity/transform) mit Intra-Reihen-Stagger (--pv-d),
     Hover-Lift läuft SEPARAT über die translate-Property (eigene,
     kurze Transition ohne Delay) — kein Konflikt mit dem Reveal. */
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--pv-d, 0s),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--pv-d, 0s),
    translate 0.28s ease,
    border-color 0.28s ease;
}
.painvoices--tiles .painvoices__voice:nth-child(2) { --pv-d: 70ms; }
.painvoices--tiles .painvoices__voice:nth-child(4) { --pv-d: 70ms; }
.painvoices--tiles .painvoices__voice:nth-child(5) { --pv-d: 140ms; }
.painvoices--tiles .painvoices__voice:nth-child(7) { --pv-d: 70ms; }

@media (hover: hover) and (pointer: fine) {
  .painvoices--tiles .painvoices__voice:hover {
    translate: 0 -4px;
    border-color: var(--glass-border-hover);
  }
}

/* Geister-Nummer: der P9-Counter, als große Editorial-Ziffer hinter
   dem Text (Display-Italic, Idiom .svc-card__index) statt Chip. */
.painvoices--tiles .painvoices__voice::before {
  position: absolute;
  bottom: clamp(6px, 0.9vw, 12px);
  right: clamp(14px, 1.6vw, 22px);
  z-index: 0;
  padding-top: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 3.8vw, 3.6rem);
  letter-spacing: 0;
  color: var(--text-200);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

/* Icon-Badge je Kachel (Marie 2026-08-27: „visuelle Inhalte /
   Grafiken") — Rezept .ka-benefit__badge; jede Kachel trägt ihr
   Painpoint-Motiv (Lucide-Sprite-Icons). Dark: Glow-Tint + Cyan.
   Light-Band: entsättigt auf Tinte (Hellblau-Sweep P7 — Blau bleibt
   dem Hover/Spotlight vorbehalten). Badge reagiert auf Kachel-Hover
   mit (Muster .ka-benefit:hover .ka-benefit__badge). */
.painvoices--tiles .painvoices__badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(42px, 3.4vw, 48px);
  height: clamp(42px, 3.4vw, 48px);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--glow-rgb), 0.20), rgba(var(--glow-rgb), 0.05));
  border: 1px solid rgba(var(--glow-rgb), 0.26);
  color: var(--accent-hover);
  transition:
    transform 260ms cubic-bezier(0.34, 1.3, 0.44, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}
.painvoices--tiles .painvoices__badge .icon {
  width: clamp(20px, 1.6vw, 23px);
  height: clamp(20px, 1.6vw, 23px);
}
@media (hover: hover) and (pointer: fine) {
  .painvoices--tiles .painvoices__voice:hover .painvoices__badge {
    transform: translateY(-1px) scale(1.06);
    border-color: rgba(var(--glow-rgb), 0.44);
    box-shadow: 0 0 0 5px rgba(var(--glow-rgb), 0.07);
  }
}
/* Light-Band: neutrales Tinte-Badge (weiße Karten tragen die Farbe
   nicht — Icon in Slate, Fläche als zarter Ton). */
html[data-theme="light"] .painvoices--tiles .painvoices__badge {
  background: linear-gradient(160deg, rgba(var(--shadow-rgb), 0.08), rgba(var(--shadow-rgb), 0.03));
  border-color: rgba(var(--shadow-rgb), 0.16);
  color: var(--text-200);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .painvoices--tiles .painvoices__voice:hover .painvoices__badge {
    border-color: rgba(var(--shadow-rgb), 0.30);
    box-shadow: 0 0 0 5px rgba(var(--shadow-rgb), 0.05);
  }
}

.painvoices--tiles .painvoices__quote {
  position: relative;
  z-index: 1;
  max-width: 56ch;
}
/* Einstiegs-Kachel (Kern-Painpoint) eine Spur größer — Editorial-
   Hierarchie in der Wand. */
.painvoices--tiles .painvoices__voice:first-child .painvoices__quote {
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  line-height: 1.45;
}

/* Cursor-Spotlight (::after — der Counter belegt ::before). Farbe
   über --glow-rgb: Light-Band = Brand-Blau-Tint, Dark = Cyan. */
.painvoices--tiles .painvoices__voice::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--spot-x) var(--spot-y),
    rgba(var(--glow-rgb), 0.16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .painvoices--tiles .painvoices__voice:hover::after { opacity: 1; }
}

/* Light-Band: Hover hebt die weiße Karte spürbar (tieferer Licht-
   Schatten), Basis-Look kommt aus der P9-Light-Regel oben. */
html[data-theme="light"] .painvoices--tiles .painvoices__voice:hover {
  border-color: rgba(16, 24, 32, 0.16);
  box-shadow:
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 24px 48px -28px rgba(16, 24, 32, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  .painvoices--tiles .painvoices__voice {
    transition: none;
    translate: none;
  }
  .painvoices--tiles .painvoices__voice:hover { translate: none; }
  .painvoices--tiles .painvoices__voice::after { display: none; }
  .painvoices--tiles .painvoices__badge { transition: none; }
  .painvoices--tiles .painvoices__voice:hover .painvoices__badge { transform: none; }
}

/* ============================================================
   „Kennst du das?" mit Pain-Points-VIDEO
   (.painvoices--video, Marie 2026-09-02)
   Läuft seit 2026-09-02 auf Startseite/AG/Kanalservice/
   Schädlingsbekämpfung (geteiltes Partial section-kennst-du-das)
   und seit 2026-09-11 zusätzlich auf der Website-Seite (inline im
   Page-File, gleiches Layout + gleicher Film, aber eigene H2/
   O-Töne/Payoff — Marie: „Die Section soll jetzt immer so
   aussehen, mit dem Video."). NUR die Mitarbeitergewinnung behält
   bewusst die Kachel-Wand (.painvoices--tiles): das Video spricht
   von fehlenden Aufträgen, die Seite von fehlendem Personal.
   Video 16:9 MIT TON ersetzt das Foto (Kino-Bühne im case-card-
   Idiom: dunkler Grund, Poster, weißer Play-Button, P9-Backplate
   bleibt); die 7 O-Töne werden daneben zu KOMPAKTEN Zeilen
   (Hairlines statt Karten) → Sektionshöhe deutlich runter.
   Klick-to-Play-JS: [data-pv-video] in scripts.html.
   ============================================================ */

/* Grid: Video ist der Held (breitere linke Spalte), Liste daneben —
   `end` statt stretch/center (Marie-Runde 4, 2026-09-02: „die Punkte
   weiter unten platzieren, bündig unten mit dem Video"): beide Spalten
   schließen an der Unterkante ab, die Punkte enden also exakt auf der
   Video-Unterkante. */
@media (min-width: 1024px) {
  .painvoices--video .painvoices__grid {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
    align-items: end;
  }
}

/* Kino-Bühne: feste dunkle Fläche hinter Poster/Video (CI-Surface-1,
   Geräte-/Kino-Logik wie .showroom-Bühne — in beiden Themes dunkel). */
.painvoices--video .painvoices__player {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: #0C141C;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -24px rgba(var(--shadow-rgb), 0.7);
}
.painvoices--video .painvoices__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play-Button = case-card-Idiom (weißes Play, neutraler Ring). */
.painvoices--video .painvoices__play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: clamp(56px, 7vw, 80px);
  height: clamp(56px, 7vw, 80px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(25, 41, 57, 0.92);
  color: var(--white);
  cursor: pointer;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms ease,
    opacity 240ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 32px -6px rgba(var(--shadow-rgb), 0.55);
}
.painvoices--video .painvoices__play-icon {
  width: 38%;
  height: 38%;
}
@media (hover: hover) and (pointer: fine) {
  .painvoices--video .painvoices__play:hover {
    transform: scale(1.06);
    background: rgba(25, 41, 57, 1);
  }
}
/* Tastatur-Fokus wie beim case-card-Play (Guardian): sichtbarer Ring. */
.painvoices--video .painvoices__play:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
  transform: scale(1.06);
  background: rgba(25, 41, 57, 1);
}
/* Läuft das Video, verschwindet der Button (kommt bei „ended" zurück —
   Endframe = Payoff + Logo, wirkt dann als Replay-Bühne). */
.painvoices--video .painvoices__player[data-playing="true"] .painvoices__play {
  opacity: 0;
  pointer-events: none;
}

/* Sichtbare KI-Kennzeichnung unter dem Video (Go-Live-Plan Phase 1 —
   stand vorher nur im aria-label, für Sehende unsichtbar). Klein,
   aber ein Transparenzhinweis ist kein dekoratives figcaption —
   --text-200 statt --text-300 (Kontrast-Regel wie .ra__body--proof:
   Guardian maß mit --text-300 nur 2,9–3,8:1, mit --text-200 ≥4,5:1). */
.painvoices--video .painvoices__ai-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-200);
}

/* O-Töne kompakt: schlanke Zeilen mit Hairline statt hoher Karten —
   die 01–07-Nummern (P9-Counter) bleiben. Überschreibt die P9-Karten-
   Regeln (gleiche Datei weiter oben) per Spezifität + Quell-Reihenfolge. */
.painvoices--video .painvoices__list { gap: 0; }
.painvoices--video .painvoices__voice {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--glass-border);
  padding: clamp(10px, 1.2vw, 14px) clamp(2px, 0.4vw, 6px);
}
/* Letzte Zeile ohne Hairline und ab 1024px ohne Unterpolster — ihre
   TEXT-Unterkante liegt damit optisch bündig auf der Video-Unterkante
   (Marie-Runde 4: „bündig unten mit dem Video"). */
.painvoices--video .painvoices__voice:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .painvoices--video .painvoices__voice:last-child { padding-bottom: 0; }
}
.painvoices--video .painvoices__quote {
  font-size: clamp(0.95rem, 1.02vw, 1.02rem);
}
/* Helles Band: Hairline in Tinte, keine Karten-Schatten (schlägt die
   P9-Light-Weiß-Karten-Regel per Spezifität). */
html[data-theme="light"] .painvoices--video .painvoices__voice {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(16, 24, 32, 0.10);
  box-shadow: none;
}
html[data-theme="light"] .painvoices--video .painvoices__voice:last-child { border-bottom: 0; }

/* — Runde 2+3 (Marie 2026-09-02: „Überschrift links über dem Video" —
   der ebenfalls probierte CTA im Spalten-Fluss war ihr „schlechter",
   der Payoff steht seit Runde 3 wieder ZENTRIERT unter dem Grid):
   der zentrierte Sektions-Kopf ist aufgelöst, H2 + Intro leben in der
   linken Spalte (.painvoices__lead) über der Video-Bühne. — */

/* Header kompakt über dem Video statt als zentrierter Sektions-Kopf;
   ab 1024px linksbündig (Marie: „Überschrift links über dem Video"). */
.painvoices--video .painvoices__head {
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
@media (min-width: 1024px) {
  .painvoices--video .painvoices__head {
    align-items: flex-start;
    text-align: left;
  }
  .painvoices--video .painvoices__intro { margin-inline: 0; }
}

/* Abschluss rückt näher an die kompakte Bühne (Höhe runter). */
.painvoices--video .painvoices__payoff {
  margin-top: clamp(32px, 4vw, 56px);
}

@media (prefers-reduced-motion: reduce) {
  .painvoices--video .painvoices__play { transition: none; }
}

/* ============================================================
   ORBIT-BÖGEN — Deko-Element hinter Kapitel-Köpfen
   (Marie 2026-09-02, saleshax-Design-Runde — freigegebene finale
   Fassung aus der Vorschau: O1-Ringaufteilung mit gleichmäßigen
   62px-Abständen, alle Ringe durchgezogene Hairlines, nur Ring 1
   trägt den leisen Cyan-Hauch als Taper-Pfad. Seit dem Sektions-
   Vollflächen-Ausbau derselben Runde führen die SVGs 23 Ringe:
   die 5 Kopf-Ringe unverändert + 18 Fortsetzungs-Ringe im selben
   Takt bis r=1488, viewBox 860×1440 — das Feld deckt die ganze
   Sektion (height 100%) und läuft über den internen Fade aus,
   bevor irgendwo eine Kante entsteht.
   Grafiken liegen als statische SVGs in Bilder/deko/ — CSS-url()
   ist relativ zur Wurzel-styles.css und damit auf jeder
   Seitentiefe korrekt, HG-Team-Präzedenz.)
   PLATZIERUNGS-REGEL (Marie 2026-09-02, Runde 2: „nur bei Sections,
   wo die Hintergrundfarbe von hell zu dunkel wechselt oder
   andersrum — dann erst bei der dunklen"): die Bögen markieren
   BAND-ÜBERGÄNGE und sitzen auf der Section, mit der der neue Ton
   BEGINNT. Der Beispiel-Einbau der Runde 1 (Bese-System + Cases —
   beide MITTEN in ihrem Band) ist damit abgelöst. Auf der
   Startseite (Rhythmus seit Go-Live-Plan Phase 5:
   D · G ‖ D D D ‖ W W · G ‖ D D D D) gibt es fünf Übergänge; nach der
   Premium-Regel „höchstens zwei Gastgeber je Seite" tragen die beiden
   mit der größten Kapitel-Wirkung den Bogen — je einer pro Seitenhälfte
   (Hälfte bei ~10.460 px GEMESSEN, sie liegt in der Bese-AI-Section):
     Bese-System(G) → Die Betriebe(D) → Orbit auf .proof (Auftakt Beweis-Bogen;
                                     .proof ist die Nachfolgerin der .trust,
                                     die bis 2026-09-15 Gastgeber war)
     Passt-das(G)  → FAQ(D)          → Orbit auf .faq   (Auftakt Schlussblock)
   Ohne Bogen bleiben: Hero→Bese-System, App→Über-uns, Zahlen→Passt-das.
   Beide Gastgeber sind seit Phase 5 DUNKEL → beide fahren die dunkle
   SVG-Fassung, die Light-Swap-Regel wird nicht mehr gebraucht.
   PREMIUM-RUNDE (Marie 2026-09-04 abends: „zu oft dieser Bogen im
   Hintergrund"): von sechs Gastgebern auf ZWEI reduziert — je einer
   pro Seitenhälfte, an den beiden Übergängen mit der größten
   Kapitel-Wirkung. Die übrigen Übergänge (Bese-System→Bese-AI,
   Cases→Über-uns) bleiben ohne Bögen; Regel fortan: höchstens zwei
   Orbit-Gastgeber je Seite.
   Helle Gastgeber (trust/about/next-steps) = Tinte-Fassung im Light-
   Theme; dunkle Gastgeber (beseai/km-cta) = Silver-Blue-Fassung in
   BEIDEN Themes (im Dark-Theme gibt es keine Band-Wechsel — die
   dunklen Gastgeber behalten die Bögen dort als reine Deko, Muster
   des freigegebenen Cases-Einbaus der Runde 1). Bewusst als
   CSS-::after statt Partial-Markup, damit die geteilten Partials
   (trust/beseai/about/km-cta laufen auch auf AG/MF/Kanal
   u. a.) nichts mitreißen — Lehre aus dem painvoices-Video-Blocker
   (§0a). ::before/::after sind auf allen vier Sektionen frei
   (BG-Glows dort sind echte Elemente wie .km-cta__glow).
   Voraussetzungen am Einsatzort: Section hat position:relative +
   overflow clip/hidden (die 860px-Bühne ragt auf Mobile bewusst
   seitlich raus und wird geclippt, damit die Bogen-Radien nicht
   mitschrumpfen) und der Content-Container liegt auf z-index:1.
   beseai (overflow:clip) + km-cta (overflow:hidden, __grid z1)
   bringen beides aus ihren Basis-Regeln mit; trust/about bekommen
   Clip + Container-Lift über die Voraussetzungs-Regeln direkt unter
   dem @property (trust zusätzlich position:relative — die Basis hat
   nur contain:paint + isolation).
   Neuer Einsatzort = Section in den Selektor aufnehmen, bei
   hellen Bändern zusätzlich in die Light-Swap-Regel darunter.
   ============================================================ */
/* Scroll-Reveal (Marie 2026-09-02: „beim Scrollen dann erst nach und
   nach — erst der kleinere bis hin zum größeren"): eine Kreis-Maske
   wächst konzentrisch zum Ring-Zentrum (50% / -80px = cx/cy der SVGs)
   von 0 auf 470px → die Ringe erscheinen nacheinander von innen nach
   außen, der Cyan-Hauch mit Ring 1 zuerst. Die weiche Front (56px)
   blendet jeden Ring einzeln ein (Ringabstand 62px ≈ einer nach dem
   anderen). Das SEITLICHE Auslaufen steckt dafür jetzt IN den SVGs
   (interner radialGradient-Mask-Fade, gleiche Geometrie wie die
   frühere CSS-Ellipsen-Maske) — die CSS-Maske gehört allein der
   Reveal-Front. --orbit-reveal-r ist als @property registriert, damit
   die Transition interpoliert; ohne @property-Support (Safari <16.4)
   springt der Reveal in einem Schritt = akzeptabler Fallback.
   Getriggert wird .is-orbit-on vom Block „Orbit-Bögen: Scroll-Reveal"
   in scripts.html (IO one-shot, Guard body.page-home; reduced-motion
   oder kein IO = Klasse sofort, die Media-Query unten nimmt dann
   zusätzlich die Transition raus → statisch voller Radius). */
@property --orbit-reveal-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
/* Voraussetzungen der hellen Gastgeber (nur Startseite): Clip gegen
   den seitlichen 860px-Überstand + Content-Container über die Bögen
   heben (ein positioniertes ::after mit z-index:0 malt sonst ÜBER
   statische Kinder). .faq bekommt beides (position:relative
   + overflow:clip) — dort sitzt kein fokussierbares Element auf der
   Sektionskante. Die bis 2026-09-15 als Gastgeber genutzte
   .trust bekam bewusst KEIN overflow:clip — ihre Basis
   (`contain: layout paint`, Z. ~2257) clippt den 860px-Überstand schon an
   der Padding-Box, und ein zusätzliches overflow:clip schnitt bei
   1280/1440px den focus-visible-Ring der Testimonial-Pfeile ab, die dort
   exakt auf der Sektionskante sitzen (Guardian-Blocker 2026-09-04).
   Dieselbe Falle gilt für ihre Nachfolgerin .proof, die seit Phase 5
   selbst Gastgeber ist: sie trägt den Slider und bekommt deshalb
   ebenfalls nur `contain: layout paint` (das zugleich den Containing
   Block für das absolute ::after stellt), nie overflow:clip.
   Bei .proof werden BEIDE Kind-Ebenen gehoben — der Kopf-`.container`
   und die drei `.proof__block`; ein positioniertes ::after mit
   z-index:0 malt sonst über statische Kinder.
   beseai braucht nur den Frame-Lift (position:relative hat er). */
.page-home .faq { position: relative; overflow: clip; }
.page-home .faq > .container,
.page-home .proof > .container,
.page-home .proof > .proof__block {
  position: relative;
  z-index: 1;
}
.page-home .beseai .beseai__frame { z-index: 1; }

.page-home .faq::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 860px;
  /* Sektions-Vollfläche (Marie 2026-09-02, 4. Runde: „man scrollt
     immer automatisch ein bisschen zu viel, dann ist die Hälfte
     abgeschnitten" — die vorige 100svh-Kopplung endete beim
     Weiterscrollen mitten im Viewport): das Feld deckt jetzt die
     GANZE Sektion (height 100%), die SVGs führen 23 Ringe (die
     freigegebenen 5 Kopf-Ringe + 18 im selben 62px-Takt bis r=1488,
     Deckkraft leise auslaufend) und der interne Fade lässt die Bögen
     VOR jeder Kante weich verschwinden — es gibt keine Scroll-
     Position mehr, an der das Feld sichtbar abbricht; am Sektions-
     Ende wechselt ohnehin das Band. KEIN contain: der Hintergrund
     bleibt in natürlicher 1:1-Größe verankert, damit Ring-Radien +
     1px-Hairlines nie mitskalieren. */
  height: 100%;
  background: url(Bilder/deko/orbit-boegen-dunkel.svg) center top / 860px 1440px no-repeat;
  pointer-events: none;
  z-index: 0;
  --orbit-reveal-r: 0px;
  -webkit-mask-image: radial-gradient(circle var(--orbit-reveal-r) at 50% -80px, #000 calc(100% - 56px), transparent 100%);
  mask-image: radial-gradient(circle var(--orbit-reveal-r) at 50% -80px, #000 calc(100% - 56px), transparent 100%);
  /* Bewusst NICHT das Projekt-Standard-ease-out-quart: dessen steiler
     Start ließ die ersten drei Ringe in ~0,5s durchrauschen (gemessen).
     Die flachere Kurve verteilt die Ring-Erscheinungen gleichmäßig
     mit weicher Landung an den äußeren Ringen. */
  transition: --orbit-reveal-r 3.6s cubic-bezier(0.45, 0.05, 0.35, 1);
}
.page-home .faq.is-orbit-on::after {
  --orbit-reveal-r: 1560px;
}
@media (prefers-reduced-motion: reduce) {
  .page-home .faq::after {
    transition: none;
    --orbit-reveal-r: 1560px;
  }
}

/* Helle Gastgeber im Light-Theme: Ringe in Tinte (#101820-Rampe), der
   Cyan-Hauch mit 0.5 statt 0.34 Deckkraft — auf hellem Grund wirkt
   Cyan zurückhaltender, so ist er auf beiden Untergründen gleich
   leise (Marie-Abnahme der Hell-Fassung 2026-09-02). Die dunklen
   Gastgeber (beseai/km-cta) bleiben bei der dunklen Fassung.
   Seit Go-Live-Plan Phase 5 (2026-09-15) sind BEIDE Startseiten-
   Gastgeber dunkel (.proof, .faq) — die helle Fassung wird dort nicht
   mehr gebraucht. `Bilder/deko/orbit-boegen-hell.svg` bleibt im Repo;
   ein Gastgeber auf hellem Band braucht sie wieder, dann diese Regel
   reaktivieren:
   html[data-theme="light"] .page-home <helle-section>::after {
     background-image: url(Bilder/deko/orbit-boegen-hell.svg);
   } */

/* ============================================================
   STARTSEITE — Flächen flach + einheitliche Content-Breite
   (Marie 2026-09-04, Runde 3 der Rhythmus-Arbeit: „Passt das zu
   dir" und die FAQ „haben beide so einen grauen Verlauf im
   Hintergrund — so nacheinander passt das nicht" + „die FAQ-Section
   ist schmaler geschnitten als die darüber").
   GEMESSEN an den Referenzen (Saleshax/Talenthafen, Fullpage-
   Luminanz-Profil 1440px): beide fahren FLACHE Flächen — reines Weiß
   bzw. reines Schwarz über 1000–3400px lange Strecken, kein Verlauf
   je Section. Bei uns endete jede helle Section auf #F4F7F9 und die
   nächste begann wieder auf #FFFFFF (dunkel analog #1F2226→#131518):
   auf einer Licht-Strecke aus vier Sections entstanden so vier graue
   Schatten-Kanten = genau Maries „grauer Verlauf". Deshalb auf der
   Startseite JEDES Band flach — die Sections einer Strecke
   verschmelzen zu EINER Fläche, die Gliederung tragen die Komponenten
   (Referenz-Prinzip). NUR Startseite; die Unterseiten behalten die
   geteilten Verlaufs-Bänder (W/G-Wechsel trägt dort die Gliederung).
   Dark-Theme unberührt (dort haben die Sections keinen eigenen
   Hintergrund, es gibt keine Nähte).
   Steht am Dateiende und gewinnt per Quell-Reihenfolge gegen die
   BRIGHT-/Weiß-Zeilen (0,3,1) und gegen die Insel-Flächen (0,3,1).
   RUNDE 2 (Marie 2026-09-08: „nur schwarz-weiß gefällt mir doch nicht,
   ab und zu graue Hintergründe wie bei den anderen Seiten — sonst zu
   viele weiße am Anfang"): Grau kehrt in die Licht-Strecken zurück,
   als FLACHES MIST-Grau (kein Verlauf, damit keine grauen Naht-Kanten
   entstehen — genau der Grund, aus dem die Bänder hier flach sind). Die
   Töne wechseln, also entstehen an den Übergängen bewusste, saubere
   Farbkanten (Unterseiten-Idiom „nie zweimal derselbe Ton"):
     Hero(D) · Trust(W) · Reviews(G) · Kennst-du-das(W) · Bese-System(G) ‖
     Bese-AI(D) · App(D) · Cases(D) ‖ Über-uns(W) · Passt-das(G) ‖
     FAQ(D) · Schritte(D) · KM(D) · Footer(D).
   Grau für Reviews/Bese-System/Passt-das ist auch komponentenseitig
   besser: die weißen Bsys-Modulkarten und die dunkle Fitcheck-Kachel
   heben sich auf Grau ab statt auf Weiß zu verschwimmen.

   RUNDE 3 = Go-Live-Plan PHASE 5 (2026-09-15) — die Zuordnung unten ist
   die FINALE und die einzige Quelle für die Startseiten-Bänder. Die
   Reihenfolge der Phase 4 hatte die drei Bögen zerrissen; die volle
   Herleitung gegen DIGITAL_CI 04a steht im Block „PHASE 5 — Band-
   Rhythmus" am Dateiende. Ergebnis:

     Hero(D) ‖ Bese-System(G) ‖ Die Betriebe(D) · Bese-AI(D) · App(D) ‖
     Über-uns(W) · Zahlen(W) ‖ Passt-das(G) ‖ FAQ(D) · Schritte(D) ·
     KM(D) · Footer(D)

   NACHTRAG 17.09.2026 (gemessen am Computed Style, Chronik „Die Bese-AI-
   Section geht von der Startseite"): die Kette lautet seitdem
     Hero(D) ‖ Leistungen(W) ‖ Kosmos(D) ‖ Bese-System(G) ‖
     Die Betriebe(D) · App(D) ‖ Über-uns(W) · Stimmen(W) ‖ Passt-das(G) ‖
     FAQ(D) · Schritte(D) · KM(D) · Footer(D)
   — Bese-AI und Zahlen sind von der Startseite, Leistungen, Kosmos und
   Stimmen dazugekommen; die .page-home-Einträge für .beseai in den
   Insel-Listen sind dort tot (Rückbau-Vorlage), Zonen und Wechsel
   unverändert. Rhythmus erst in Maries Schlussrunde.

   Drei Änderungen gegenüber Runde 2 / Phase 4:
     .proof  W → D   (die Beweis-Section trägt den Video-Fächer, dessen
                      Bühne auf allen fünf Seiten dunkel ist — als weiße
                      Section war sie ein dunkler Fleck in hellem Fluss,
                      CI 04a „Ganze Abschnitte, keine Flecken")
     .zahlen G → W   (verschmilzt mit Über-uns zu EINEM weißen Feld →
                      die Licht-Strecke führt zwei Bänder statt drei)
     .fitcheck W → G (zurück auf Maries Zuordnung vom 2026-09-08; Phase 4
                      hatte sie nur verschoben, weil .zahlen davor grau war)
   .trust und .painvoices sind hier ENTFALLEN: die beiden Sections laufen
   seit Phase 4 nicht mehr auf der Startseite (auf den Unterseiten sind sie
   unberührt). Bei einem Wiedereinbau gehört ihr Ton neu entschieden statt
   aus einer toten Zeile geerbt.

   NACHTRAG 2026-09-16: `.reviews` ist zurück — als eigene Section
   („Was unsere Kunden sagen", section-stimmen-home.html), weil Marie die
   Beweis-Section auf die Videos reduziert haben wollte. Ihr Ton ist
   NEU entschieden, nicht geerbt: DUNKEL. Sie liegt zwischen .proof und
   .beseai, beide flach #17191D — ein helles Band an dieser Stelle risse
   den System-Bogen in zwei Teile und stünde als Fleck zwischen zwei
   dunklen Nachbarn (CI 04a „Ganze Abschnitte, keine Flecken").
   Die Zonen-Zählung ändert sich dadurch NICHT: der Bogen heißt jetzt
   Die Betriebe · Stimmen · Bese-AI · App und ist dieselbe eine Fläche.
   Hell wäre die Alternative gewesen, hätte aber aus drei Band-Wechseln
   fünf gemacht. */
/* NACHTRAG 2026-09-17: `.lsys` („Vier Leistungen, ein System", Block M3
   Runde 2) ist das erste Band nach dem dunklen Hero-Logo-Band — WEISS auf
   Maries Zuruf („auf dem weißen Hintergrund, aber die Kacheln dunkel");
   danach .bsys grau, keine Naht mit gleichem Ton. Das Karten-Material der
   Section steht bei ihrem CSS-Block am Dateiende. */
/* NACHTRAG 2026-09-17 (Block M1): `.zahlen` ist hier RAUS und `.reviews` steht
   an ihrer Stelle. Die Zahlen-Section laeuft nicht mehr auf der Startseite (ihre
   Kennzahlen sind die Bilanz-Zeile am Fuß der Leistungs-Section); die
   Stimmen-Section ist auf Maries Zuruf an ihren Platz gerückt und nimmt den Ton
   des Platzes an — Über uns + Stimmen bleiben EIN weißes Feld, genau wie vorher
   Über uns + Zahlen. Das ist KEINE Rhythmus-Runde (Marie 17.09.: „Rhythmus erst
   in der Schlussrunde"), sondern derselbe Rhythmus mit einem anderen Bewohner.
   Bei einem Wiedereinbau von `.zahlen` gehört ihr Ton neu entschieden statt aus
   einer toten Zeile geerbt (§0b) — deshalb ist die Klasse hier entfernt. */
html[data-theme="light"] .page-home :is(.lsys, .about, .reviews) {
  background: #FFFFFF;
}
/* Auftragsgewinnung (19.09.2026): der Leistungs-Stapel der Startseite steht dort an
   der Stelle des Bese-System-Stapels — derselbe weiße Grund unter den dunklen Karten
   (§5a „dunkle Karten auf weißem Band"). Band Trust(G) · Leistungen(W) · Kosmos(D). */
html[data-theme="light"] .page-auftragsgewinnung .lsys {
  background: #FFFFFF;
}
html[data-theme="light"] .page-home :is(.bsys, .fitcheck) {
  background: #EAEAEC;
}
/* Dunkle Blöcke flach im Mittelton der Charcoal-Familie (#17191D =
   55%-Stop des bisherigen Verlaufs): der System-Bogen (Bese-AI · App-
   Steuerung · Cases) und seit der Premium-Runde 2026-09-04 der
   Schlussblock FAQ · Schritte · KM · Footer — je EINE Fläche, keine
   Nahtkanten. Das KM-Band verliert damit auf der Startseite bewusst
   seinen 135°-Verlauf (es steht nicht mehr allein, sondern mitten im
   Schlussblock; auf den Unterseiten bleibt der Verlauf). Der Hero hat
   keine eigene Zeile hier — er bekommt seine Fläche aus der
   konsolidierten Dunkel-Hero-Regel (seit dem Video-Ausbau 2026-09-04
   einer Parallel-Session wieder normale Charcoal-Fläche + volle
   Aurora, davor Video-Bühne). FAQ ist seit Marie 2026-09-04 („auf der Kanalservice-
   Seite ist die FAQ dunkel, das passt besser") wieder Dunkel-Insel. */
html[data-theme="light"] .page-home :is(.proof, .cases, .faq, .next-steps, .km-cta, .site-footer) {
  background: #17191D;
}
/* Der Fächer-Block liegt INNERHALB der jetzt dunklen .proof — bekäme er
   weiter seine eigene Fläche, stünde ein opakes Rechteck auf dem
   Section-Grund und würde die Orbit-Bögen an seiner Oberkante hart
   abschneiden. Transparent heißt: eine durchgehende Fläche von der
   Section-Oberkante bis zur Logo-Wand, genau wie auf den vier anderen
   Seiten, wo .cases selbst die Section ist. Die Dark-Tokens behält der
   Block aus der konsolidierten Insel-Regel. */
html[data-theme="light"] .page-home .proof .cases {
  background: none;
}

/* Bese-AI + App-Steuerung: dieselbe FLACHE Fläche auf ALLEN Seiten
   (Rollout 2026-09-11, Marie: „genau dieses Design … wie auf der
   Startseite"). Beide stehen auf fast jeder Seite direkt nebeneinander
   oder neben einer anderen Dunkel-Insel; flach ist dort GEMESSEN die
   ruhigere Naht (Kante zur Verlaufs-Insel Δ 8,9 statt 13,2 Luminanz-
   stufen, weil der 180°-Verlauf unten auf #131518 endet und die nächste
   Insel wieder bei #1F2226 beginnt). Steht nach der konsolidierten
   Insel-Regel und schlägt deren Verlauf per Quellreihenfolge (gleiche
   Spezifität 0,3,1). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) :is(.beseai, .app-control) {
  background: #17191D;
}

/* Einheitliche Content-Breite = Container: die Startseiten-Overrides vom
   2026-09-04 (FAQ-Grid, Reviews-Kachel, Bese-AI-Frame entdeckelt) sind mit
   der Boxbreiten-Runde 2026-09-09 in die BASIS-Regeln gewandert — ALLE
   Seiten laufen jetzt auf einer Box-Breite (Marie: „die einzelnen Sections
   sind unterschiedlich breit"), und der Container liegt bei 1540 px = 1476 px
   Innenbreite (--max-width am :root). Hier steht deshalb keine Regel mehr;
   Bese-System läuft seit Fassung 3/4 ohnehin auf Container-Breite. */

/* ============================================================
   STARTSEITE — PREMIUM-ÜBERARBEITUNG (Marie 2026-09-04 abends)
   Marie: „Die Seite sieht für mich nicht hochwertig und schön aus —
   Weiß- und Freiräume komisch, Hintergrundfarben variieren extrem,
   teilweise zu viel Blau, Elemente nicht einheitlich, zu oft dieser
   Bogen." GEMESSEN vor der Runde (1440px, Light): 7 Band-Wechsel mit
   der FAQ als dunklem Solitär zwischen zwei weißen Bändern, 6 Orbit-
   Gastgeber, Cyan-Akzente in jeder Dunkel-Insel (Verbinder, Chips,
   Ringe, Tags), Navy-Karten des Elfsight-Widgets auf Weiß, sieben
   Eckenradien (12/14/16/20/20.16/22/24px), Kopf→Inhalt-Abstände
   zwischen 34 und 96px, Stationen-Spur „So läuft's ab" 2123px hoch.
   Maßnahmen (alle NUR .page-home, Light-Theme wo Farbe im Spiel):
   1) BÄNDER: Schritte + Footer in den dunklen Schlussblock → die
      Seite hat noch DREI Wechsel: Hero(D) ‖ Trust·Reviews·KdD·
      Bese-System(W) ‖ Bese-AI·App·Cases(D) ‖ Über-uns·Passt-das(W) ‖
      FAQ·Schritte·KM·Footer(D). Das ist die CI-04a-Faustregel („ein
      bis zwei dunkle Abschnitte plus Footer") und das Saleshax-Profil.
      → Seit Go-Live-Plan Phase 5 (2026-09-15) gilt die dort hergeleitete
        Fassung; die drei Zonen sind dieselben, nur ihre Mitglieder haben
        sich mit der neuen Reihenfolge verschoben.
   2) BÖGEN: 6 → 2 Gastgeber — seit Phase 5 .proof und .faq (vorher
      Trust/FAQ; .trust gibt es auf der Startseite nicht mehr).
   3) BLAU: in den Dunkel-Inseln laufen UI-Akzente (Verbinder, Chips,
      Ringe, Tags, Chevrons, Links) auf Silver Blue statt Cyan; der
      CI-Headline-Verlauf Silver Blue→Cyan bleibt explizit erhalten,
      der Signature-CTA bleibt Markenblau. Auf den hellen Bändern:
      Bese-System-Lichtstriche in Tinte statt Markenblau, Fitcheck-
      Häkchen Silver Blue, Elfsight-Karten Charcoal statt Navy.
   4) ELEMENTE: zwei Radien-Stufen — Container/Kacheln 24px
      (--radius-xl), Karten 16px (--radius-lg).
   5) FREIRÄUME: ein Abstand Kopf→Inhalt (clamp 40–64px) für alle
      Sections, Stationen-Spur enger.
   Dark-Theme: alle FARB-/FLÄCHEN-Regeln sind light-gescoped; die
   Radien- und Abstands-Regeln (4/5) gelten BEWUSST in beiden Themes —
   Geometrie ist keine Theme-Frage, die Startseite soll in Dark und
   Light dieselben Proportionen haben.
   CI-Hinweis (Guardian 2026-09-04): DIGITAL_CI v2.6.0 §04a sagt „nie
   mehr als zwei helle Bänder in Folge" — die erste Licht-Strecke
   führte damals VIER. Das war Maries ausdrückliche Vorgabe („nach dem
   Hero erst mal hell", „Hintergrundfarben variieren extrem").
   → Mit Phase 5 ist diese Abweichung AUFGELÖST: keine Licht-Strecke
     führt noch mehr als zwei Bänder, und „erst mal hell" trägt jetzt
     die 3.571 px hohe Bese-System-Section allein (GEMESSEN bei 1440px —
     rund vier Bildschirmhöhen). Herleitung am Dateiende.
   ============================================================ */

/* 3) Blau — Dunkel-Inseln: Akzent-Tokens auf Silver Blue.
   .proof seit Phase 5 (2026-09-15): sie ist die neue Dunkel-Section der
   oberen Seitenhälfte und führt denselben Akzent wie der Fächer darin —
   sonst liefe in EINER Section Silver Blue (Fächer) neben Cyan
   (Bewertungen, Logo-Wand). */
html[data-theme="light"] .page-home :is(.proof, .cases, .faq, .next-steps, .km-cta, .site-footer) {
  --accent-hover: #B3CCDF;
  --cyan-hi: #D6E6F5;
  --glow-rgb: 179, 204, 223;
  --em-grad-a: #B3CCDF;   /* CI-Verlauf Silver Blue → Cyan bleibt */
  --em-grad-b: #4DA8DA;
}
/* Bese-AI + App-Steuerung führen den Silver-Blue-Akzent seit dem Rollout
   2026-09-11 auf ALLEN Seiten. Gleiche Entscheidung und gleiches Rezept wie
   bei den Erfolgsgeschichten am selben Tag (Marie: „Und so wie es auf der
   Startseite ist, ist es richtig") — der Ton hängt an der FASSUNG, nicht an
   der Seite. Silver Blue ist laut DIGITAL_CI Akzentfarbe (nur als FLÄCHE
   gesperrt). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) :is(.beseai, .app-control) {
  --accent-hover: #B3CCDF;
  --cyan-hi: #D6E6F5;
  --glow-rgb: 179, 204, 223;
  --em-grad-a: #B3CCDF;   /* CI-Verlauf Silver Blue → Cyan bleibt */
  --em-grad-b: #4DA8DA;
}
/* Kapitelkarten auf hellem Band (Fitcheck-Panel) ebenso */
html[data-theme="light"] .page-home .fitcheck__panel {
  --accent-hover: #B3CCDF;
  --cyan-hi: #D6E6F5;
  --glow-rgb: 179, 204, 223;
}
/* (Bese-System: die Lichtstrich-Variablen der Fassung 2 entfielen mit
   der Foto-Bühne vom 2026-09-07 — die Datenkarten sind feste dunkle
   Geräte-Flächen, der Ablauf läuft über Tokens.) */
/* Elfsight-Reviews: Navy-Widget-Karten → Charcoal-Familie (es-*-Hooks,
   dasselbe Update-Risiko wie P8, s. §5a-Zeile Elfsight) */
/* .page-home war hier mit Phase 5 (2026-09-15) RAUS und ist seit dem
   17.09.2026 (Block M1) ZURÜCK — die Bewertungen haben in den 48 Stunden
   dazwischen zweimal die Section gewechselt:
     Phase 4  → in den Beweis-Block .proof
     Phase 5  → .proof wird dunkel, also P8-Optik (helle Hairline-Karten)
     16.09.   → aus .proof herausgelöst in die eigene Section .reviews,
                die den dunklen Ton ihrer Nachbarn erbte
     17.09.   → Marie legt die Section vor „Passt das zu dir?"; dort ist
                das Band WEISS, helle Hairline-Karten wären darauf
                unsichtbar → zurück auf die Charcoal-Kachel.
   NUR im hellen Theme: im Dark-Theme ist die Section weiterhin dunkel und
   fährt die P8-Optik aus der Regel weiter oben (die ist theme-neutral).
   Diese Regel hier trägt `html[data-theme="light"]` und gewinnt deshalb
   per Spezifität (0,4,1 gegen 0,3,0). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-selbststaendig-machen) .reviews-card .es-header-container {
  background: #1F2226;
}
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-selbststaendig-machen) .reviews-card .es-review-background-container {
  background: #26282C;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Schlussblock-Details auf Dunkel: Beleg-Anker + Nummern der Spur
   laufen über die Insel-Tokens; die globale Tinte-Regel für .ns-note em
   (0,1,2) braucht hier den hellen Gegenpart. */
html[data-theme="light"] .page-home .next-steps .ns-note em {
  color: var(--text-100);
}
/* Stationskarten „So läuft's ab" tragen eine themeneutrale Navy-Basis
   (rgba(35,56,78)…) — auf dem Charcoal-Schlussblock läse sie sich blau
   und hob sich kaum ab (Guardian ~1,2:1). Hier wie .ns-finale__card auf
   die Charcoal-Kachel-Familie. */
html[data-theme="light"] .page-home .ns-station__card {
  background: linear-gradient(160deg, #26282C 0%, #191B1F 100%);
}
/* FAQ-Karten re-deklarieren Cyan lokal (Block 3) → auch hier Silver Blue,
   damit die Chevrons zur Insel passen. */
html[data-theme="light"] .page-home .faq-item {
  --accent-hover: #B3CCDF;
  --glow-rgb: 179, 204, 223;
}
/* App-Steuerung-Kennzahl: ihr Verlauf hängt an --accent-hover und würde
   mit Silver Blue zweimal denselben Stopp führen → eigener Weiß-Verlauf
   (P5-Muster der Belege). Seit dem Rollout 2026-09-11 auf ALLEN Seiten:
   die Section führt den Silver-Blue-Akzent jetzt überall, also läuft
   die Kennzahl sonst auf den Unterseiten mit zwei gleichen Stops an
   (gemessen: #B3CCDF → #B3CCDF → #D6E6F5 statt Weiß → Silber). */
html[data-theme="light"] :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung, .page-videoproduktion, .page-selbststaendig-machen, .page-kanalservice, .page-schaedlingsbekaempfung, .page-team, .page-leistungen, .page-marktfuehrerschaft, .page-branchen, .page-erfolgsgeschichten, .page-ueber-uns, .page-presse, .page-karriere, .page-kontakt, .page-ratgeber, .page-website, .page-so-funktioniert-es, .page-plattform) .control-feature__stat-value {
  background: linear-gradient(135deg, #FFFFFF 0%, #D6E6F5 55%, #B3CCDF 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 4) Elemente — zwei Radien-Stufen */
.page-home .km-cta__lockup { border-radius: var(--radius-xl); }   /* .bsys-app ist seit Fassung 3 eine von vier gleichen Datenkarten (--radius-lg) — Guardian 2026-09-07 */
.page-home :is(.askcard, .ns-station__card) { border-radius: var(--radius-lg); }

/* 5) Freiräume — ein Kopf→Inhalt-Abstand, enger als die 86px des
   Standard-Headers; Stationen-Spur mit kleinerem Zeilentakt */
.page-home .section-header { margin-bottom: clamp(40px, 4.4vw, 64px); }
/* Bese-AI + App-Steuerung: seit dem Rollout 2026-09-11 NICHT mehr auf
   .page-home gescopt — Marie: „Sie sollen überall jetzt genau dieses Design
   bekommen, wie sie auf der Startseite sind". Die beiden Sections laufen
   seitdem als EIN Template auf allen Seiten, also gehört auch ihr
   Kopf→Inhalt-Abstand zur Fassung und nicht zur Seite.
   App-Steuerung stapelt Intro/Showcase/Bento über einen Flex-Gap (96px)
   — der Gap IST hier der Kopf→Inhalt-Abstand, kein zusätzlicher Margin. */
.ba-head { margin-bottom: clamp(40px, 4.4vw, 64px); }
.app-control__container { gap: clamp(40px, 4.4vw, 64px); }
.app-control__intro { margin-bottom: 0; }
.control-bento { margin-top: 0; }
.page-home .testimonials { margin-top: clamp(40px, 4.4vw, 64px); }
/* Footer-Fußleiste: die navy-getönte Basis (#0e1822→#0a121a) auf der
   Startseite in die Charcoal-Familie (Surface 0) — der Schlussblock
   soll bis zur letzten Zeile in EINER Farbfamilie stehen. */
html[data-theme="light"] .page-home .site-footer__bottombar { background: #0E0F11; }
/* Footer-Logo (Marie 2026-09-07: „Logo muss beim dunklen Footer weiß"): der
   Theme-Logo-Swap (Z. ~1134) folgt dem SEITEN-Theme und zeigte auf dem
   dunklen Startseiten-Footer das farbige Light-Logo → hier die weiße
   Fassung erzwingen. Spezifität 0,3,1 schlägt die geteilte 0,1,1-Regel. */
html[data-theme="light"] .page-home .site-footer .brand-logo--dark  { display: block; }
html[data-theme="light"] .page-home .site-footer .brand-logo--light { display: none; }
.page-home .ns-spine { --gap-y: clamp(40px, 4.5vw, 64px); }

/* ---- Premium-Runde, Nachschlag (Marie 2026-09-04 spät): „jede Section
   noch mal ansehen" — drei konkrete Befunde + Abstände auf gleicher Fläche.
   1) Stationen-Nummern 01–04 in „So läuft's ab" waren unlesbar: die
      Light-Regel (Z. ~21992) setzt sie auf --shadow-rgb, das in der
      Dunkel-Insel 0,0,0 ist → Schwarz auf Charcoal. Hier zurück auf den
      Dark-Look (Weiß → Silver Blue), gleiche Spezifität (0,3,0), steht später → gewinnt.
   2) Abstand zwischen Sections auf DERSELBEN Fläche: zwei volle
      Section-Abstände (104 + 104 = 208px) lesen sich auf einer
      durchgehenden Fläche als Loch (Marie: „Vertrauen aus dem Handwerk"
      → „Bewertet auf Google" zu groß). Innerhalb einer Strecke bekommt
      jede Naht das Tight-Token auf BEIDEN Seiten (52 + 52 = 104px = ein
      Standard-Abstand); an den Band-Kanten (Ton-Wechsel) bleibt 104/104.
      ⚠ UEBERHOLT seit 2026-09-11 — diese Naht-Sonderregel gibt es nicht
      mehr, siehe Block „Naht-Abstand … ABGESCHAFFT" weiter unten.
      Über-uns endet randlos mit dem Fries (padding-bottom 0), Fitcheck
      folgt daher mit dem vollen Abstand.
   3) Google-Bewertungen ohne äußere Kachel (Marie: „nicht noch mal
      separat in der Kachel gefasst, die bestehen ja schon auf einzelnen
      Kacheln"): der Glas-Frame wird aufgelöst wie in P8; die Elfsight-
      Karten + die Kopfzeile bleiben als Charcoal-Kacheln direkt auf dem
      weißen Band (die Kopfzeile trägt helle Widget-Schrift und braucht
      ihren dunklen Grund). */
html[data-theme="light"] .page-home .ns-station__numeral {
  background: linear-gradient(180deg, rgba(220, 230, 240, 0.95) 0%, rgba(179, 204, 223, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* ---- Naht-Abstand („--seam") ABGESCHAFFT (Marie 2026-09-11: „teilweise
   mehr, teilweise weniger Abstaende, sieht ein bisschen unruhig aus").
   Historie: am 2026-09-04 eingefuehrt, weil zwei volle Section-Abstaende
   auf einer DURCHGEHENDEN Flaeche als Loch gelesen wurden; am 2026-09-08
   schon einmal eingeschraenkt („die Abstaende wirken ungleichmaessig").
   Beim dritten Mal ist die Ausnahme selbst das Problem: sie stellte 144px
   (Naht) neben 208px (Band-Kante) auf EINER Seite — gemessen fielen die
   Nahtstellen Bese-AI→App, App→Cases, FAQ→Schritte, KM→Footer auf 127–168
   statt 216–285. Die Startseite laeuft jetzt wie alle anderen 54 Seiten in
   EINEM Rhythmus (var(--section-py) auf beiden Seiten jeder Naht).
   Zurueckholen = diese drei Regeln wieder aktivieren:
     .page-home { --seam: clamp(44px, 5vw, 72px); }
     @media (max-width: 767px) { .page-home { --seam: clamp(26px, 6.5vw, 44px); } }
     .page-home :is(.app-control, .cases, .next-steps, .km-cta) { padding-block-start: var(--seam); }
     .page-home :is(.beseai, .app-control, .faq, .next-steps, .km-cta) { padding-block-end: var(--seam); }
   ---- */

/* Trust-Unterkante: 56px Schatten-Reserve + 44px Balken-Abstand + 52px
   Section-Abstand = 155px unter den Karten — auf 32 + 20 + 52 gestrafft.
   Seit 2026-09-09 ist die 32 nur noch der SICHTBARE Abstand (--tm-gap);
   den Raum für den Schatten-Auslauf liefert das Bleed-Rezept der Basis-
   Regel (die alte Annahme „läuft nach 30px aus" galt für den leichten
   Weiß-Karten-Schatten, nicht für den der dunklen Karten). Reviews: die
   CLS-Reserve der Kachel (420px) lag 76px über der realen Widget-Höhe
   (344px bei 1440) → auf die Widget-Höhe gesetzt. */
html[data-theme="light"] .page-home .testimonials__viewport { --tm-gap: 32px; } /* schlägt die Light-Regel (0,3,1) per Quellreihenfolge */
.page-home .testimonials__progress { margin-top: 20px; }
/* CLS-Reserve = reale Widget-Höhe je Breite (auf Production gemessen,
   Guardian 2026-09-04): 429px bis 400px, 400px bis ~700px, darüber 344px. */
.page-home .reviews-card { min-height: 344px; }
@media (max-width: 699px) { .page-home .reviews-card { min-height: 400px; } }
@media (max-width: 400px) { .page-home .reviews-card { min-height: 429px; } }
/* Ghost-Button (.btn-outline) hatte im Light-Theme KEINE Regel: Weiß auf
   dem weißen Über-uns-Band („Das ganze Team kennenlernen" unlesbar,
   Section-Durchgang 2026-09-04). Token-basiert: Text --text-100 (Tinte auf
   hellen Bändern, Weiß in den Dunkel-Inseln), Rahmen als Anteil der
   Textfarbe — funktioniert in beiden Grundtönen ohne Sonderfälle.
   Gilt bewusst site-weit im Light-Theme (dieselbe Lücke auf den
   Unterseiten mit grauem Über-uns-Band). */
html[data-theme="light"] .btn-outline {
  color: var(--text-100);
  border-color: var(--glass-border);
  border-color: color-mix(in srgb, var(--text-100) 26%, transparent);
}
html[data-theme="light"] .btn-outline:hover {
  color: var(--text-100);
  border-color: color-mix(in srgb, var(--text-100) 45%, transparent);
  background: color-mix(in srgb, var(--text-100) 7%, transparent);
}

/* ============================================================
   BRANCHEN-HERO — „Branchen-Dock" (NUR /branchen/, 2026-09-04)
   Marie: „Wir sind nicht mehr auf eine Branche begrenzt … jede
   Branche ist extrem optimiert bei uns — das will ich in der Hero-
   Section zeigen; die H1 darf nicht direkt Kanalservice ansprechen."
   Zentrierter Hero (.hero--centered) + das Dock unter dem Text: die
   Bese-Bildmarke als Kern, die Branchen als angedockte Glas-Module
   auf einer Schiene, Licht-Striche laufen vom Kern nach außen und
   „docken" die Branchen nacheinander an (bsys-Streak-Idiom — hier
   in BEIDE Richtungen: links die bewiesenen, rechts die nächsten).
   Der Hero ist in beiden Themes Dunkel-Insel (konsolidierte Liste)
   → alle Werte laufen über die Dark-Tokens, kein Light-Override.
   Loops sind IO-gepaused ([data-reveal] → .is-revealed), reduced-
   motion = statisch mit allen Modulen voll sichtbar.
   ============================================================ */
.br-hero .hero__text { max-width: 1000px; }
.br-hero .hero__lead { max-width: 66ch; }
/* Akzent-Phrase einzeilig — erst ab 480px wie die globale h1-em-Regel (§1.5-Schutz, Guardian) */
@media (min-width: 480px) { .br-hero .hero__headline em { white-space: nowrap; } }

/* Start-Choreografie (krepling-Muster wie Plattform-Hero): Headline
   ohne Delay (LCP), Folge-Ebenen gestaffelt; das Dock kommt zuletzt. */
.page-branchen .hero__headline        { animation: hub-hero-in 0.55s var(--ease) both; }
.page-branchen .hero__lead            { animation: hub-hero-in 0.85s var(--ease) 0.26s both; }
.page-branchen .hero__actions         { animation: hub-hero-in 0.85s var(--ease) 0.44s both; }
.page-branchen .hero-trustpilot-center{ animation: hub-hero-in 0.85s var(--ease) 0.58s both; }
/* Stagger liegt auf den Schienen-Kindern (Kern --i:0, Module 1–4, Verbinder
   Default 0) + der Caption (--i:5) — Guardian: `.brdock > *` traf nur die Rail als Block. */
.brdock__rail > *, .brdock__caption { animation: hub-hero-in 0.85s var(--ease) calc(0.62s + var(--i, 0) * 0.08s) both; }

/* ---------- Dock: Schiene ---------- */
.brdock {
  --brd-core: 92px;
  --brd-line: rgba(255, 255, 255, 0.10);
  --brd-streak: #FFFFFF;
  --brd-streak-glow: rgba(255, 255, 255, 0.55);
  width: 100%;
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: center;
}
.brdock__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

/* Verbinder: Hairline-Schiene mit laufendem Licht-Strich. Die linken
   Verbinder sind gespiegelt (scaleX(-1)) — derselbe Strich läuft dort
   vom Kern nach links, ohne eigene Keyframes. */
.brdock__conn {
  position: relative;
  flex: 0 0 clamp(22px, 3.2vw, 52px);
  height: 3px;
  border-radius: 2px;
  background: var(--brd-line);
  overflow: hidden;
}
.brdock__conn--l { transform: scaleX(-1); }
.brdock__streak {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 70%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brd-streak) 100%);
  filter: drop-shadow(0 0 6px var(--brd-streak-glow));
  transform: translateX(-130%);
  opacity: 0;
  animation: brdock-streak1 8s linear infinite;
  animation-play-state: paused;
}
.brdock__conn--2 .brdock__streak { animation-name: brdock-streak2; }
.brdock__conn--3 .brdock__streak { animation-name: brdock-streak3; }
.brdock__conn--4 .brdock__streak { animation-name: brdock-streak4; }

/* 8-s-Zyklus: Kern zündet (0 s) → Kanalservice dockt an (1,4 s) →
   Schädlingsbekämpfung (2,8 s) → Kern zündet erneut (4 s) →
   Dachdecker (5,4 s) → Bautrocknung (6,8 s). Prozent-Fenster wie bsys. */
@keyframes brdock-streak1 { 0%,2%  { transform: translateX(-130%); opacity: 0; } 5%  { opacity: 1; } 15% { opacity: 1; } 18% { transform: translateX(200%); opacity: 0; } 100% { transform: translateX(200%); opacity: 0; } }
@keyframes brdock-streak2 { 0%,19% { transform: translateX(-130%); opacity: 0; } 22% { opacity: 1; } 32% { opacity: 1; } 35% { transform: translateX(200%); opacity: 0; } 100% { transform: translateX(200%); opacity: 0; } }
@keyframes brdock-streak3 { 0%,52% { transform: translateX(-130%); opacity: 0; } 55% { opacity: 1; } 65% { opacity: 1; } 68% { transform: translateX(200%); opacity: 0; } 100% { transform: translateX(200%); opacity: 0; } }
@keyframes brdock-streak4 { 0%,69% { transform: translateX(-130%); opacity: 0; } 72% { opacity: 1; } 82% { opacity: 1; } 85% { transform: translateX(200%); opacity: 0; } 100% { transform: translateX(200%); opacity: 0; } }

/* ---------- Kern: Bese-Bildmarke ---------- */
.brdock__core {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brdock__core-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--brd-core);
  height: var(--brd-core);
  border-radius: 50%;
  /* Nur CI-Töne: Navy → Deep Navy → Surface-1, Lichtkante per Inset-Weiß */
  background: radial-gradient(circle at 50% 30%, var(--navy) 0%, var(--deep-navy) 55%, var(--surface-1) 100%);
  border: 1px solid rgba(179, 204, 223, 0.45); /* Silver Blue */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 22px rgba(var(--shadow-rgb), 0.45),
    0 0 0 8px rgba(var(--glow-rgb), 0.06),
    0 18px 36px -16px rgba(var(--shadow-rgb), 0.7);
  animation: brdock-core 8s ease-out infinite;
  animation-play-state: paused;
}
.brdock__core-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: -1;
  animation: brdock-ripple 8s ease-out infinite;
  animation-play-state: paused;
}
.brdock__mark {
  width: 40px;
  height: 44px;
  fill: #FFFFFF;
  filter: drop-shadow(0 0 8px rgba(var(--glow-rgb), 0.55));
}
.brdock__core-label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-300);
}
@keyframes brdock-core {
  0%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -10px 22px rgba(var(--shadow-rgb), 0.45), 0 0 0 8px rgba(var(--glow-rgb),0.06), 0 18px 36px -16px rgba(var(--shadow-rgb), 0.7); }
  2%, 52% { transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -10px 22px rgba(var(--shadow-rgb), 0.35), 0 0 0 12px rgba(var(--glow-rgb),0.12), 0 0 34px rgba(255,255,255,0.35); }
  14%, 64% { transform: scale(1); }
}
@keyframes brdock-ripple {
  0%, 50% { transform: scale(1); opacity: 0; }
  2%, 52% { opacity: 0.7; }
  20%, 70% { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Module: angedockte Branchen ---------- */
.brdock__mod {
  /* Gleich breite Module → gleich lange Verbinder, symmetrisch um den Kern */
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -18px rgba(var(--shadow-rgb), 0.6);
  text-align: left;
  text-decoration: none;
  color: var(--heading-color);
  animation: brdock-dock 8s ease-out infinite;
  animation-play-state: paused;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
a.brdock__mod:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}
a.brdock__mod:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.brdock__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--silver-blue);
}
.brdock__icon .icon { width: 18px; height: 18px; }
.brdock__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brdock__name {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--text-100);
}
.brdock__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-300);
}
/* Ab 1440px hat die Schiene Luft für einzeilige Namen/Status; darunter
   (1180–1439) dürfen sie umbrechen, sonst läuft die Schiene aus dem
   Container (gemessen bei 1180: Außenmodule angeschnitten). */
@media (min-width: 1440px) {
  .brdock__name, .brdock__status { white-space: nowrap; }
}
.brdock__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-300);
  flex: 0 0 auto;
}

/* Varianten: Nr. 1 (Kanalservice, Cyan-Hairline = einziger Blau-Akzent
   des Docks), live (bewiesen, weißer Punkt), next (gestrichelt, gedimmt,
   inert — Nav-data-soon-Optik). */
.brdock__mod--nr1 { border-color: rgba(var(--glow-rgb), 0.45); }
.brdock__mod--nr1 .brdock__icon { color: var(--accent-hover); border-color: rgba(var(--glow-rgb), 0.35); }
.brdock__mod--nr1 .brdock__dot { background: var(--accent-hover); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.7); }
.brdock__mod--nr1 .brdock__status { color: var(--text-200); }
.brdock__mod--live .brdock__dot { background: #FFFFFF; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); }
.brdock__mod--next {
  border-style: dashed;
  opacity: 0.62;
  cursor: default;
}
.brdock__mod--next .brdock__icon { color: var(--text-300); }

/* Dock-Pop: das Modul „zündet", wenn sein Strich ankommt (Reihenfolge
   1 Kanal → 2 Schädlinge → 3 Dachdecker → 4 Bautrocknung). */
.brdock__mod--nr1 { animation-delay: 1.35s; }
.brdock__mod--live { animation-delay: 2.7s; }
.brdock__mod--a { animation-delay: 5.35s; }
.brdock__mod--b { animation-delay: 6.7s; }
/* Nur die Zünd-Frames sind definiert — außerhalb davon gilt der eigene
   (Varianten-)Wert des Moduls, nichts wird überschrieben. */
@keyframes brdock-dock {
  1% { transform: scale(1.04); border-color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 22px rgba(255, 255, 255, 0.28); }
  9% { transform: scale(1); }
}

/* Reveal → Loops starten (IO one-shot über den generischen Hook). */
.brdock.is-revealed .brdock__streak,
.brdock.is-revealed .brdock__core-disc,
.brdock.is-revealed .brdock__core-disc::after,
.brdock.is-revealed .brdock__mod { animation-play-state: running; }

/* Caption: der Paket-Schlusssatz + Absprung ins Abschluss-Band. */
.brdock__caption {
  margin: clamp(34px, 3.4vw, 44px) auto 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-300);
}
.brdock__caption a {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent-hover);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--glow-rgb), 0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.brdock__caption a:hover { border-bottom-color: var(--accent-hover); }

/* Unter 1180px passen fünf Stationen nicht mehr in eine Schiene:
   Kern oben, Module als 2×2-Raster, Verbinder aus (bsys-Mobil-Muster). */
@media (max-width: 1179px) {
  .brdock__rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 640px;
    margin-inline: auto;
  }
  .brdock__conn { display: none; }
  .brdock__core { grid-column: 1 / -1; order: -2; margin-bottom: 30px; }
  .brdock__mod--nr1 { order: -1; }
  .brdock__mod { padding: 12px 14px; max-width: none; }
}
@media (max-width: 480px) {
  .brdock__rail { grid-template-columns: 1fr; max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-branchen .hero__headline,
  .page-branchen .hero__lead,
  .page-branchen .hero__actions,
  .page-branchen .hero-trustpilot-center,
  .brdock__rail > *, .brdock__caption { animation: none; }
  .brdock__streak { display: none; }
  .brdock__core-disc,
  .brdock__core-disc::after,
  .brdock__mod { animation: none !important; }
}

/* ============================================================
   KANALSERVICE-HERO — Visual „Das Netz unter deiner Ecke"
   + branchenspezifische Kennzahlen (NUR /branchen/kanalservice/,
   Marie 2026-09-04: „guck, was für eine Animation hier Sinn macht"
   + „bearbeite ein paar Werte")
   ------------------------------------------------------------
   Der Hero trug bis dahin das Brand-Platzhalterbild Office.webp
   (Gruppe B des Hero-Animations-Programms, §6) — ein Firmensitz
   sagt auf einer Branchenseite nichts. An seiner Stelle liegt
   jetzt ein eigenes Visual; der Live-Ticker bleibt als echter
   Beleg darunter und schiebt sich in die Bühne (Lead-Karten-
   Idiom estateanfrage, §1.12).

   Rendering, Netz-Geometrie und Palette leben im JS
   (scripts.html, [data-hv-kanal] — Palette auf Dark gepinnt, der
   Hero ist über die konsolidierte Liste „Alle Heroes = Dunkel-
   Insel" in beiden Themes dunkel). Hier nur Layout, Halo, der
   statische SVG-Fallback und die Start-Choreografie.
   ============================================================ */
.hv-kanal {
  position: relative;
  min-height: clamp(430px, 45vw, 570px);
}
/* Wrapper trägt die Offsets; das Canvas füllt ihn 100 %/100 % — ein
   absolut positioniertes Canvas mit width:auto nähme seine ATTRIBUT-
   Breite als Eigenbreite (Replaced Element) → ResizeObserver-Feedback-
   Loop (Lehre 2026-07-24). Überhang auf BEIDEN Seiten gleich groß: das
   Netz ist bewusst ein Ausschnitt, seine Stränge laufen aus dem Bild —
   eine sichtbare Canvas-Kante gäbe es sonst irgendwo immer (Lehre
   „Das Netz" 2026-08-03). Der .hero beschneidet sauber (overflow:hidden),
   kein Horizontal-Scroll. */
.hv-kanal__stage {
  position: absolute;
  inset: clamp(-70px, -6vw, -28px) clamp(-60px, -4.5vw, -18px) clamp(-40px, -3vw, -14px) clamp(-60px, -4.5vw, -18px);
  pointer-events: none;
}
.hv-kanal__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hv-kanal.is-ready .hv-kanal__canvas { opacity: 1; }
.hv-kanal.is-fallback .hv-kanal__canvas { display: none; }
/* Weicher Schein unter dem Knotenpunkt — Weichzeichner PFLICHT: ein
   Radial-Verlauf mit so niedriger Deckkraft zeichnet auf der dunklen
   Bühne durch 8-Bit-Banding eine sichtbare Kreiskante (Lehre MA-Hero
   2026-08-03), erst der Blur löst den Rand vollständig auf. Die
   Engine setzt top inline exakt auf den Knotenpunkt (knLayout); der
   Wert hier gilt für Fallback/No-JS. */
.hv-kanal__halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(58%, 340px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), 0.30) 0%,
    rgba(var(--glow-rgb), 0.11) 45%,
    transparent 72%);
  filter: blur(46px);
  pointer-events: none;
}
/* Statischer Fallback (reduced-motion / kein WebGL) */
.hv-kanal__fallback {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(92%, 470px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.hv-kanal.is-fallback .hv-kanal__fallback { opacity: 1; }
.hv-kanal__strands {
  stroke: var(--silver-blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.34;
}
.hv-kanal__shafts {
  fill: var(--silver-blue);
  opacity: 0.5;
}
.hv-kanal__hub {
  fill: rgba(var(--glow-rgb), 0.16);
  stroke: var(--silver-blue);
  stroke-width: 1.4;
  opacity: 0.75;
}
.hv-kanal__fallback-mark { fill: var(--heading-color); }

/* DORMANT (gehört zum reaktivierbaren .hv-kanal-Visual, Runde 1/2): ließ
   den Ticker in die 3D-Bühne ragen. Seit Runde 3 (Foto-Bühne) setzt der
   Runde-4-Block am Dateiende margin-top wieder auf 0 — gleiche
   Spezifität, spätere Quellposition → diese Regel ist auf JEDER Breite
   wirkungslos (Guardian 2026-09-04). Wer das Visual reaktiviert, muss
   sie HINTER den Runde-4-Block verschieben, sonst bleibt sie stumm. */
:is(.page-kanalservice, .page-kanal-start) .hero__media .hero-ticker {
  position: relative;
  z-index: 1;
  margin-top: clamp(-40px, -3vw, -12px);
}

@media (max-width: 1023px) {
  /* Einspaltiger Hero: Bühne kompakter, Überhänge kleiner */
  .hv-kanal { min-height: clamp(320px, 58vw, 430px); }
  .hv-kanal__stage { inset: clamp(-40px, -6vw, -16px) clamp(-20px, -3vw, -8px) clamp(-20px, -2vw, -8px) clamp(-20px, -3vw, -8px); }
  :is(.page-kanalservice, .page-kanal-start) .hero__media .hero-ticker { margin-top: clamp(-24px, -2vw, -8px); }
}

/* Kennzahlen: branchenspezifisch (Marie 2026-09-04) — die Reihe zeigt
   nicht mehr die vier seitenweiten Zahlen, sondern die Werte, die auf
   DIESER Seite zählen (Anteil der Aufträge, Jahre nur Kanalservice).
   „70–90 %" ist ein Bereich und zählt bewusst nicht hoch; damit die
   Reihe trotzdem als ein Block liest, erbt der statische Wert exakt
   die Typografie von .hero-stat__num (Klasse liegt am selben Element). */
.kanal-hero__stats .hero-stat__num--static { display: inline-block; }

/* Start-Choreografie (krepling-Muster wie Plattform/Branchen): die
   Text-Ebenen staffeln sich nach dem ersten Paint weich ein. Die
   Headline OHNE Verzögerung — sie ist der LCP-Kandidat der Seite. */
:is(.page-kanalservice, .page-kanal-start) .hero__headline    { animation: hub-hero-in 0.55s var(--ease) both; }
:is(.page-kanalservice, .page-kanal-start) .hero__lead        { animation: hub-hero-in 0.85s var(--ease) 0.24s both; }
:is(.page-kanalservice, .page-kanal-start) .kanal-hero__stats { animation: hub-hero-in 0.85s var(--ease) 0.40s both; }
:is(.page-kanalservice, .page-kanal-start) .kanal-hero__actions { animation: hub-hero-in 0.85s var(--ease) 0.54s both; }
:is(.page-kanalservice, .page-kanal-start) .kanal-hero__subcta  { animation: hub-hero-in 0.85s var(--ease) 0.66s both; }

@media (prefers-reduced-motion: reduce) {
  .hv-kanal__canvas { transition: none; }
  :is(.page-kanalservice, .page-kanal-start) .hero__headline,
  :is(.page-kanalservice, .page-kanal-start) .hero__lead,
  :is(.page-kanalservice, .page-kanal-start) .kanal-hero__stats,
  :is(.page-kanalservice, .page-kanal-start) .kanal-hero__actions,
  :is(.page-kanalservice, .page-kanal-start) .kanal-hero__subcta { animation: none; }
}


/* ============================================================
   HERO-HINTERGRUND „Das System" (.hv-sys) — vollflächiger Layer
   ============================================================
   Marie 2026-09-04: „Die Animation gefällt mir leider gar nicht.
   Ich möchte so eine große Hintergrundanimation haben." Gemeint
   war das Branchen-Dock (kleine Modul-Reihe unter dem Hero-Text);
   die mitgeschickten Referenzen (vividand.co, dnacapital.com)
   arbeiten beide mit einem Vollbild-Canvas HINTER dem Text.

   Dieser Layer ist deshalb kein Spalten-Objekt wie die sechs
   `hero-viz-*`-Visuale, sondern die Bühne: er füllt den ganzen
   Hero und liegt unter dem Inhalt. Alles Weitere (Motiv, Phasen,
   Freihalten der Textzone) steht im Partial `hero-viz-system.html`
   und in der Engine ([data-hv-sys] in scripts.html).

   Stapelung: der Hero ist `isolation: isolate`, die Aurora liegt
   auf z-index -1. Dieser Layer bekommt ebenfalls -1 und steht im
   Markup NACH der Aurora → malt über sie, bleibt aber unter dem
   Inhalt. `.container` wird zusätzlich explizit angehoben, damit
   die Reihenfolge nicht von der Quell-Reihenfolge abhängt.
   ============================================================ */
.hv-sys {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Repaint-Bereich kapseln (Muster .hero__aurora) */
  contain: layout paint;
}

.hv-sys__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hv-sys.is-ready .hv-sys__canvas { opacity: 1; }
.hv-sys.is-fallback .hv-sys__canvas { display: none; }

/* Statisches Standbild — nur bei reduced-motion / ohne WebGL */
.hv-sys__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.hv-sys.is-fallback .hv-sys__fallback { display: block; }
.hv-sys__stop-a { stop-color: var(--silver-blue); }
.hv-sys__stop-b { stop-color: var(--accent-hover); }
/* Im Standbild tragen — wie in der Animation — die KANTEN das Bild,
   nicht die Flächen: kräftiger Strich, sehr leise Füllung. Mit voll
   gefüllten Platten wirkte der Fallback massiver als der bewegte
   Layer (gemessen im reduced-motion-Rendering). */
.hv-sys__mods { opacity: 0.42; fill-opacity: 0.10; stroke-opacity: 0.5; }
/* Standbild je Fassung: die Startseite (Variante `home`) zeigt ihre Platten
   nur an Flanken und Ecken — der zentrierte Startseiten-Text reicht bis fast
   an die Kanten, die Standard-Anordnung lag hinter H1/Lead/Trust-Zeile. */
.hv-sys[data-hv-sys-variant="home"] .hv-sys__mods--default,
.hv-sys:not([data-hv-sys-variant="home"]) .hv-sys__mods--home { display: none; }

/* Inhalt immer über dem Layer. Defensive Absicherung: ein nicht
   positionierter Container läge ohnehin über den z-index:-1-Geschwistern,
   die Regel macht es nur unabhängig von der Quell-Reihenfolge.
   KONSOLIDIERTE LISTE (Guardian-Hinweis 2026-09-04) — eine weitere Seite
   mit einem Hintergrund-Layer bekommt hier einen Arm dazu, statt eine
   eigene Zeile anzulegen. `.br-hero` ist die Branchen-Klasse,
   `.page-leistungen` trägt keine solche Hero-Klasse und wird deshalb über
   die Body-Klasse geführt. `.page-home` läuft seit 2026-09-11 mit dem
   Landschafts-Layer `.hv-land` (Block weiter unten) statt `.hv-sys` —
   die Regel gilt für beide, deshalb bleibt der Arm hier stehen. */
.br-hero > .container,
.page-leistungen .hero > .container,
.page-home .hero:where(:not(.kanal-hero)) > .container { position: relative; z-index: 1; }

/* Die Aurora tritt auf Seiten mit diesem Layer zurück: zwei
   großflächige Licht-Ebenen übereinander ergeben Matsch statt
   Tiefe. Gleiche Dämpfung, wie sie der Startseiten-Video-Hero
   bis zum 2026-09-04 trug (dort `calc(0.30 * var(--aurora-opacity))`) — die Aurora bleibt
   als Grundstimmung, die Zeichnung kommt vom Canvas.
   Neue Seite mit Hintergrund-Layer (.hv-sys oder .hv-land) = Body-Klasse
   hier ergänzen; `.page-home` trägt seit 2026-09-11 die Landschaft. */
.page-branchen .hero__aurora,
.page-leistungen .hero__aurora,
.page-home .hero__aurora:where(:not(.kanal-hero *)) { opacity: calc(0.34 * var(--aurora-opacity)); }

/* Startseite (seit 2026-09-09 mit Hintergrund-Layer — erst „Die
   Bausteine", seit 2026-09-11 die Landschaft „Aus deiner Ecke", `.hv-land`):
   Start-Choreografie der Text-Ebenen nach dem krepling-Muster (§1.12,
   Marie: „die Start-Animation der Hero-Section finde ich sehr, sehr
   cool") — Headline → Lead → Kennzahlen → CTA → Trustpilot blenden
   gestaffelt ein, während sich hinter ihnen das Gelände vom Betrieb her
   ausbreitet und die Straßen zeichnen (0,2–2,5 s in der Engine); Bühne
   und Text kommen so als EIN Aufbau an. Gleiche Keyframes wie
   Plattform/Branchen/Kanal (`hub-hero-in`, translate-Property statt
   transform — §0a-Kollisions-Lehre); die Headline bewusst ohne Delay und
   kürzer, sie ist der LCP-Kandidat. Die Zähler der Kennzahlen laufen
   währenddessen ganz normal hoch. Die Engine misst die Text-Rechtecke
   nach 1,8 s noch einmal (die Ebenen kommen mit Versatz an). */
/* Reihenfolge seit dem Fokus-Umbau (Phase 7): Headline → Satz → CTA →
   Vertrauenszeile. Die Zeile für `.hero-stats` ist mit den vier Zählern
   entfallen (Phase 4, sie stehen jetzt in der Zahlen-Section), die für
   `.hero__trust-cta` mit der Vertrauenszeile — der Trustpilot-Badge liegt
   jetzt IN ihr und wird mit ihr eingeblendet, eine eigene Staffelung würde
   die Zeile in zwei Teile zerlegen. */
.page-home .hero__headline:where(:not(.kanal-hero *)) { animation: hub-hero-in 0.55s var(--ease) both; }
.page-home .hero__lead:where(:not(.kanal-hero *))     { animation: hub-hero-in 0.85s var(--ease) 0.26s both; }
.page-home .hero__cta:where(:not(.kanal-hero *))      { animation: hub-hero-in 0.85s var(--ease) 0.40s both; }
.page-home .hero__trust:where(:not(.kanal-hero *))    { animation: hub-hero-in 0.85s var(--ease) 0.52s both; }
@media (prefers-reduced-motion: reduce) {
  .page-home .hero__headline:where(:not(.kanal-hero *)),
  .page-home .hero__lead:where(:not(.kanal-hero *)),
  .page-home .hero__cta:where(:not(.kanal-hero *)),
  .page-home .hero__trust:where(:not(.kanal-hero *)) { animation: none; }
}


/* ============================================================
   HERO-HINTERGRUND „Aus deiner Ecke" (.hv-land) — Startseite
   ============================================================
   Marie 2026-09-11 zur Startseiten-Ideenrunde: „Ich möchte bitte,
   dass du einmal auf der Startseite diese neue Idee 3 als Animation
   hinzufügst. Allerdings sind auf den Bildern diese Linien und so
   noch zu hell, sodass es beim Lesen von dem Text stören könnte."

   Zweiter vollflächiger Hintergrund-Layer des Projekts (nach „Das
   System"): die Region als Landschaft — Höhenlinien, Straßen vom
   Betrieb in die Tiefe, Höfe am Wegrand, ein Anruf läuft als Licht
   die Straße entlang zur Bildmarke. Löst auf der Startseite „Das
   System · Die Bausteine" ab (Partial + Engine reaktivierbar; der
   System-Layer läuft weiter auf Branchen + Leistungen-Hub). Motiv,
   Lesbarkeits-Rezept (globale Dämpfung + Textzonen-Dimmung im
   Shader) und Marken-Platzierung stehen im Partial
   `hero-viz-landschaft.html` und in der Engine ([data-hv-land] in
   scripts.html); Doku HERO-VISUALE.md, Kapitel „Aus deiner Ecke".

   Stapelung wie beim System-Layer: Aurora auf z-index -1, dieser
   Layer ebenfalls -1 und im Markup NACH der Aurora → malt darüber,
   bleibt unter dem Inhalt. Die zwei seiten-gebundenen Regeln
   (`.page-home .hero > .container` auf z-index 1, Aurora auf 0,34)
   stehen im `.hv-sys`-Block oben und gelten für beide Layer.
   ============================================================ */
.hv-land {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Repaint-Bereich kapseln (Muster .hero__aurora) */
  contain: layout paint;
}

.hv-land__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hv-land.is-ready .hv-land__canvas { opacity: 1; }
.hv-land.is-fallback .hv-land__canvas { display: none; }

/* Statisches Standbild — nur bei reduced-motion / ohne WebGL: dieselbe
   Karte als ruhige Zeichnung. Deckkräfte bewusst leise, weil es hier
   keine Textzonen-Dimmung gibt (kein Shader) — unter dem Text darf
   nichts stören. Farben ausschließlich CI-Tokens. */
.hv-land__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.hv-land.is-fallback .hv-land__fallback { display: block; }
.hv-land__river   { fill: none; stroke: var(--surface-1); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.hv-land__contour { fill: none; stroke: var(--silver-blue); stroke-width: 1; opacity: 0.14; }
.hv-land__street  { fill: none; stroke: var(--silver-blue); stroke-width: 1; stroke-linecap: round; opacity: 0.16; }
.hv-land__road    { fill: none; stroke: var(--silver-blue); stroke-width: 1.6; stroke-linecap: round; opacity: 0.26; }
.hv-land__hwy     { fill: none; stroke: var(--silver-blue); stroke-width: 2.6; stroke-linecap: round; opacity: 0.32; }
.hv-land__dot     { fill: var(--silver-blue); opacity: 0.5; }
.hv-land__ring    { fill: none; stroke: var(--silver-blue); stroke-width: 2; opacity: 0.5; }
.hv-land__mark    { fill: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .hv-land__canvas { transition: none; }
}


/* ============================================================
   HERO-VISUAL — Startseite: „Das Cockpit" (.hv-dash) — das Bese-
   Dashboard mit schwebenden Glas-Kacheln in der rechten Spalte
   ============================================================
   Marie 2026-09-11 (mit Referenzbild): „Links … alles wieder links
   bündig machen und links in die Spalte packen. Rechts dann … ein
   Dashboard, das im Hintergrund so die verschiedenen Bereiche zeigt,
   die Bese Media bedient … Kacheln … im Glaseffekt noch drüber
   gesetzt." Motiv, Inhalte und Zusammenspiel mit der Karte stehen im
   Partial hero-viz-dashboard.html; Doku HERO-VISUALE.md.

   Material: Kacheln = HELLES Milchglas mit Tinte (§5a-Präzedenz
   Bese-AI-Szenen, Maries Referenz zeigt weiße Karten auf dunklem
   Grund), Dashboard/Pille/Etiketten/Chips = dunkles Glas. Lokale
   Geräte-Tokens (--dash-*) wie bei .ws-panel/.bsys-app — die Werte
   sind CI-Töne (Tinte #101820, Surface-1, Silver Blue, Markenblau,
   Cyan), Status-Grün = §5a-Kodierung „echter Auftrag", Google-Gold
   für die Sterne (§5a Sektion 15). backdrop-filter liegt hier
   bewusst auf bewegten Kacheln — die Bewegung ist eine reine
   Transform-Animation ohne Hover, mit will-change auf eigener
   Ebene (Gründer-Kosmos-Muster), kein Repaint-Flicker.

   Bewegung: Einblendung (Property translate/scale auf dem ÄUSSEREN
   Element — der Karten-Anker wird dort gemessen), Float (transform
   auf dem INNEREN Wrapper), zwei leise Schleifen; [data-loop-pause]
   hält alles außerhalb des Viewports an, reduced-motion zeigt den
   Endzustand.
   ============================================================ */
.hv-dash {
  --dash-ink: #101820;
  /* auf dem durchscheinenden Glas eine Stufe kräftiger als auf dem
     früheren fast-opaken Weiß (Glaskachel-Regel: „Kleintext auf Glas
     eine Stufe kräftiger als die normale Text-Rampe") */
  --dash-ink-2: rgba(16, 24, 32, 0.80);
  --dash-ink-3: rgba(16, 24, 32, 0.64);
  /* Das Glas-Material der Kacheln (Marie 2026-09-11: „Dann sehe ich zu
     wenig noch von diesem Glas-Effekt, bzw. der Glas-Effekt ist mir zu
     gering. Der soll wirklich sein, wie bei Apps bei Apple.").
     VORHER: rgba(255,255,255,0.92) — 92 % deckendes Weiß. Dahinter konnte
     der `backdrop-filter` nichts mehr brechen, die Kacheln lasen sich als
     PAPIER statt als Glas. Genau die Falle, die die Glaskachel-Regel des
     Overlay-Projekts beschreibt: „gleichmäßig milchig liest sich als
     Papier, nicht als Glas" — ein Glaskörper braucht UNGLEICHE Deckkraft
     (dichter oben, wo das Licht auftrifft, offener unten).
     Werte nach Apple-Materialidiom: viel Durchlass, starker Blur, kräftige
     Sättigung (das Blau der Karte hinter dem Glas soll durchschimmern). */
  /* GEMESSEN statt geschätzt: vier Deckkraft-Stufen gerendert und die
     Kachel-Texte pixelweise gegen ihren tatsächlichen Untergrund
     ausgewertet. Bei 0,66→0,36 (erster Versuch) lagen 14 von 16 Texten
     unter 4,5:1 — halbtransparentes Weiß über dem DUNKLEN Hero wird
     mittelgrau, und die Sekundärtexte sind selbst nur 80 % Tinte.
     Diese Stufe trägt: Titel 7,2–8,7:1, Sekundärtext 4,98–5,62:1,
     Tags 4,4–5,2:1. Der Glas-Eindruck kommt hier NICHT aus maximaler
     Durchsicht, sondern aus Blur + Sättigung + Lichtkanten + Glanz —
     genau wie bei Apples Materialien, die ebenfalls dichter sind, als
     sie wirken. */
  --dash-card: linear-gradient(158deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.63) 52%, rgba(255, 255, 255, 0.61));
  --dash-glass: rgba(12, 20, 28, 0.66);
  --dash-line: rgba(179, 204, 223, 0.16);
  position: relative;
  /* Mindestens 600 px auch in schmalen Desktop-Spalten: der Bildschirm-
     Inhalt (Kopfzeile, Kennzahlen, Verlauf, Feed) ist ~345 px hoch und
     wächst nicht mit — unter 600 px Bühne bliebe unter dem Feed kein
     Band mehr für Pille und Chips (gemessen 1280: 563 px → Pille lag
     auf dem Feed). Die Textspalte ist auf jeder Desktop-Breite höher. */
  min-height: clamp(600px, 44vw, 620px);
  font-family: var(--font-ui);
}
.hv-dash__stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- Dashboard im Hintergrund ---- */
.hv-dash__screen {
  position: absolute;
  left: 5%;
  right: 3%;
  top: 9%;
  bottom: 9%;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(25, 41, 57, 0.66), rgba(12, 20, 28, 0.74));
  border: 1px solid var(--dash-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(var(--shadow-rgb), 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: perspective(1600px) rotateY(-7deg) rotateX(3deg);
  transform-origin: 60% 50%;
  opacity: 0.92;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--white);
  animation: hv-dash-in 0.9s var(--ease) 0.5s both;
}
.hv-dash__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dash-line);
  font: 600 11px/1 var(--font-ui);
  color: var(--silver-blue);
}
.hv-dash__dots { display: inline-flex; gap: 5px; }
.hv-dash__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(179, 204, 223, 0.28); }
.hv-dash__title { letter-spacing: 0.04em; }
.hv-dash__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hv-dash__live i { width: 6px; height: 6px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 8px #46d39a; animation: hv-dash-blink 1.6s ease-in-out infinite; }
.hv-dash__body { display: grid; grid-template-columns: 44px 1fr; flex: 1; min-height: 0; }
.hv-dash__side {
  border-right: 1px solid var(--dash-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
}
.hv-dash__nav { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; opacity: 0.45; }
.hv-dash__nav.is-on { opacity: 1; background: rgba(179, 204, 223, 0.12); }
.hv-dash__fx { width: 16px; height: 16px; display: block; }
.hv-dash__main { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hv-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hv-dash__kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.hv-dash__kpi b { font: 700 20px/1 var(--font-ui); color: var(--white); }
.hv-dash__kpi i { font: 500 10px/1.2 var(--font-ui); font-style: normal; color: var(--silver-blue); }
.hv-dash__row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }
.hv-dash__chart {
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hv-dash__chart-label { font: 600 10px/1 var(--font-ui); color: var(--silver-blue); letter-spacing: 0.04em; }
.hv-dash__bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 52px; }
.hv-dash__bars i { display: block; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: rgba(179, 204, 223, 0.32); }
.hv-dash__bars i.is-now { background: linear-gradient(180deg, var(--accent-hover), rgba(77, 168, 218, 0.35)); transform-origin: bottom; animation: hv-dash-bar 2.4s var(--ease) 1.4s both; }
.hv-dash__donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hv-dash__ring {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-hover) 0 72%, rgba(179, 204, 223, 0.18) 72% 100%);
  display: grid;
  place-items: center;
}
.hv-dash__ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(12, 20, 28, 0.92); }
.hv-dash__ring b { position: relative; font: 700 11px/1 var(--font-ui); color: var(--white); }
.hv-dash__donut i { font: 500 9.5px/1.2 var(--font-ui); font-style: normal; color: var(--silver-blue); text-align: center; }
.hv-dash__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-dash__feed li {
  display: grid;
  grid-template-columns: 8px auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font: 500 10.5px/1.2 var(--font-ui);
  color: var(--silver-blue);
  min-width: 0;
}
.hv-dash__feed b { color: var(--white); font-weight: 700; }
.hv-dash__feed i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-dash__feed-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(179, 204, 223, 0.5); }
.hv-dash__feed-dot.is-ok { background: #46d39a; box-shadow: 0 0 8px rgba(70, 211, 154, 0.6); }

/* ---- Schwebende Kacheln ---- */
.hv-dash__tile {
  position: absolute;
  width: var(--tw, 250px);
  animation: hv-dash-in 0.9s var(--ease) var(--d, 0.9s) both;
}
.hv-dash__tile-in {
  will-change: transform;
  animation: hv-dash-float var(--fd, 7s) ease-in-out var(--fo, 0s) infinite;
}
.hv-dash__card {
  position: relative;
  background: var(--dash-card);
  color: var(--dash-ink);
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  /* Tiefe (die Kachel SCHWEBT über dem Dashboard) + Lichtkante oben und
     eine zarte Gegenkante unten — ohne die beiden Insets wirkt halb-
     transparentes Weiß flach statt wie eine Scheibe mit Dicke. */
  box-shadow:
    0 34px 70px -26px rgba(var(--shadow-rgb), 0.85),
    0 4px 14px -6px rgba(var(--shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
  /* Apple-Werte: starker Blur + kräftige Sättigung. Der Blur ist der
     eigentliche Glas-Eindruck — bei 20px und 92 % Weiß war davon nichts
     zu sehen, weil kaum Untergrund durchkam. */
  backdrop-filter: blur(34px) saturate(1.9);
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Diagonaler Glanz — das Detail, das eine Scheibe von einer Fläche
   unterscheidet. Sehr flach (max. 22 % Weiß), damit er keinen Text
   überstrahlt; liegt über dem Grund, aber UNTER dem Inhalt. */
.hv-dash__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(134deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.10));
  pointer-events: none;
}
.hv-dash__card > * { position: relative; }
.hv-dash__card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hv-dash__avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font: 700 13px/30px var(--font-ui);
  text-align: center;
}
.hv-dash__ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: rgba(44, 110, 169, 0.1); display: grid; place-items: center; }
.hv-dash__ico .hv-dash__fx { width: 20px; height: 20px; }
.hv-dash__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-dash__who b { font: 700 12.5px/1.2 var(--font-ui); color: var(--dash-ink); }
.hv-dash__who i { font: 500 10.5px/1.25 var(--font-ui); font-style: normal; color: var(--dash-ink-2); }
/* Sterne in Google-Gold (§5a Sektion 15 — Marken-Authentizität der Google-Bewertung) */
.hv-dash__stars { margin-left: auto; display: inline-flex; gap: 2px; color: #FFC043; }
.hv-dash__stars .icon { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.hv-dash__quote { margin: 0; font: 500 12px/1.4 var(--font-ui); color: var(--dash-ink); }
.hv-dash__reply {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(44, 110, 169, 0.08);
  font: 500 11px/1.35 var(--font-ui);
  color: var(--dash-ink);
}
.hv-dash__reply-mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; }
.hv-dash__reply-mark svg { width: 11px; height: 12px; fill: var(--white); }
/* Etiketten „… von Bese-AI" (Entsprechung der „Created by …"-Pillen der Referenz) */
.hv-dash__label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: var(--dash-glass);
  border: 1px solid var(--dash-line);
  color: var(--white);
  font: 600 10.5px/1 var(--font-ui);
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -16px rgba(var(--shadow-rgb), 0.8);
}
.hv-dash__label .hv-dash__fx { width: 14px; height: 14px; }
.hv-dash__label--review { left: -14px; bottom: -14px; }
.hv-dash__label--lead { right: -12px; top: -14px; }
.hv-dash__label--apply { left: 14px; bottom: -14px; }
/* Bese-AI-Urteil als Schleife: „prüft …" → „Echter Auftrag" */
.hv-dash__verdict { position: relative; height: 26px; }
.hv-dash__chip {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 26px;
  border-radius: 9999px;
  font: 700 11px/1 var(--font-ui);
}
.hv-dash__chip--wait { background: rgba(16, 24, 32, 0.08); color: var(--dash-ink-2); animation: hv-dash-wait 8s ease-in-out infinite; }
.hv-dash__chip--wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: hv-dash-blink 1s ease-in-out infinite; }
.hv-dash__chip--ok { background: #46d39a; color: var(--dash-ink); animation: hv-dash-ok 8s ease-in-out infinite; }
.hv-dash__chip--ok .icon { width: 12px; height: 12px; stroke: currentColor; }
.hv-dash__meta { display: flex; flex-wrap: wrap; gap: 6px; }
/* Helle statt dunkler Tönung: auf dem durchscheinenden Glas dunkelte die
   frühere 6-%-Tinte den Tag-Grund ab und kostete Kontrast (gemessen 4,37
   im Textkern). Eine helle Pille ist zugleich das Glas-Idiom. */
.hv-dash__tag { padding: 4px 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.34); font: 600 10px/1 var(--font-ui); color: var(--dash-ink-2); }
.hv-dash__delta { font: 700 22px/1 var(--font-ui); color: var(--dash-ink); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hv-dash__delta i { font: 500 10.5px/1.2 var(--font-ui); font-style: normal; color: var(--dash-ink-2); }
/* Kanäle als Chips + Kanal-Icons (Marken-Optik, §5a) */
.hv-dash__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hv-dash__pillchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: var(--dash-glass);
  border: 1px solid var(--dash-line);
  color: var(--white);
  font: 600 11px/1 var(--font-ui);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}
.hv-dash__pillchip .icon { width: 12px; height: 12px; stroke: #46d39a; }
/* ---- Vertrauens-Kachel: Google-Bewertungen + Zertifikate ----
   Ersetzt seit 2026-09-11 die Kanal-Icon-Reihe (Marie: „Google-Bewertungen
   in den Batch mit rein nehmen … das mit den Social-Media-Kanälen weg tun …
   Zertifikate oder so mit einbinden"). Die Siegel sind dieselben Original-
   Zeichen wie in der Footer-Leiste (§5a: nie umfärben) — auf dem hellen
   Glas stehen sie wie dort auf hellem Grund. */
.hv-dash__card--trust { gap: 9px; }
.hv-dash__rating { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hv-dash__g {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px -8px rgba(var(--shadow-rgb), 0.7);
}
.hv-dash__g .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.hv-dash__card--trust .hv-dash__stars { gap: 1px; }
.hv-dash__card--trust .hv-dash__who i { font-size: 11px; }
/* Siegel-Reihe: an der HÖHE normiert, nicht an der Breite — der Award-
   Wimpel ist extrem hochkant (1:1,94) und liefe sonst als schmaler
   Streifen mit. Dieselbe Staffelung wie die Footer-Leiste. */
.hv-dash__seals {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 8px;
  border-top: 1px solid rgba(16, 24, 32, 0.14);
}
.hv-dash__seals img { width: auto; display: block; }
/* Höhen wie in der Footer-Leiste gestaffelt: das Querformat-Zeichen
   niedriger, der extrem hochkante Wimpel (1:1,94) höher — sonst wäre er
   nur ein schmaler Streifen. Groß genug, dass beide Zeichen bei 1×
   erkennbar bleiben (vorher 26/34 px: unlesbar). */
.hv-dash__seals img { height: 30px; }
.hv-dash__seals img[src*="german-web-award"] { height: 44px; }
/* Die Bese-Pille — Anker für den Betriebspunkt der Karte */
.hv-dash__pill { position: absolute; animation: hv-dash-in 0.9s var(--ease) 0.6s both; }
.hv-dash__pill-in {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 9999px;
  background: rgba(12, 20, 28, 0.8);
  border: 1px solid rgba(179, 204, 223, 0.3);
  color: var(--white);
  font: 700 15px/1 var(--font-ui);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px -20px rgba(var(--shadow-rgb), 0.9), 0 0 0 6px rgba(var(--glow-rgb), 0.08);
  will-change: transform;
  animation: hv-dash-float 8s ease-in-out -2s infinite;
}
.hv-dash__pill-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.hv-dash__pill-mark svg { width: 18px; height: 20px; fill: var(--white); }

/* Plätze (Desktop ≥ 1280) — Verzögerungen und Float-Phasen je Kachel.
   Komposition wie in Maries Referenz: die Kacheln sitzen an den vier
   ECKEN des Dashboards und überlappen dessen Ränder, NIE seine Daten
   (Kennzahlen-Reihe, Verlauf, Feed) — gemessen an der 1440er Bühne
   (Bühne 640 × 620, Bildschirm y 56–564, Inhalt endet ≈ y 375, darunter
   ist der Bildschirm bewusst leer = Platz für Pille + Kanal-Chips):
   Bewertung oben links über Kopfzeile + Seitenleiste (Unterkante 13 px
   über der Kennzahlen-Reihe), Anzeige oben rechts über der Oberkante
   (das LIVE-Etikett bleibt frei), Bese-Pille + Kanal-Chips im leeren
   Band unter dem Feed, Anruf unten rechts, Bewerbung unten links,
   Kanal-Icons unten mittig — alle drei über der Unterkante. Kollisionen
   werden per Skript gemessen (shots-dash.cjs), nicht geschätzt. */
/* Die Kacheln liegen bewusst WEIT im Dashboard (Marie 2026-09-11: „Ich
   fänd's schon gut, wenn diese ganzen Elemente so über dem Dashboard auch
   schweben … Was darf ruhig auch schon so übereinander lappen. Man muss
   jetzt von diesem Dashboard nichts erkennen können."). Vorher hingen sie
   an den Rändern und ragten nach außen — dort war hinter dem Glas nur die
   leere Hero-Fläche, also nichts zu brechen. Jetzt ist das Dashboard die
   TEXTUR hinter dem Glas und muss nicht mehr lesbar sein. */
.hv-dash__tile--review { --tw: 240px; --d: 0.95s; --fd: 7.5s; left: -5%;  top: -8%; }
.hv-dash__tile--ads    { --tw: 210px; --d: 1.35s; --fd: 8s;   --fo: -1.5s; right: -1%; top: -4%; }
/* FOKUS-UMBAU 2026-09-15 (Phase 7): von den sechs Kacheln ist EINE
   geblieben. Die Positionszeilen der fünf anderen stehen bewusst
   unverändert hier (wie ihr ganzes CSS) — sie treffen gerade kein
   Element und sind damit wirkungslos, aber der Rückbau bleibt ein
   reines Markup-Einsetzen (Markup in _ARCHIV-hero-cockpit-kacheln.html).
   Die Anruf-Kachel ist vom unteren Rand in die obere Bildhälfte
   gewandert: mit der Pille unten links standen beide Glas-Elemente
   sonst auf derselben Höhe und lasen sich als Sockel statt als
   Komposition. Jetzt liegt die Diagonale Kachel (oben rechts) →
   Pille (unten links) über dem Dashboard, und die Kopfzeile des
   Dashboards bleibt frei — sie weist das Objekt als Bese-System aus
   und war vorher von der Bewertungs-Kachel verdeckt.
   Die PILLE bleibt exakt auf ihrem Platz: die Karten-Engine legt ihren
   Betriebspunkt darunter (data-hv-land-anchor) und das SVG-Standbild
   der Karte trägt diese Position als festen Wert. */
/* GEMESSEN bei 1440 px (Bühne 640 × 620): Kennzahlen-Reihe endet bei
   y 165, die Verlaufs-Zeile läuft 171–274 (Balken 201–255), der Feed
   285–379. `top: 46 %` (= y 285) legt die Kachel also auf den FEED und
   lässt Kennzahlen und Verlauf frei — bewusst so: eine Textliste liest
   sich hinter Glas als „geht weiter", angeschnittene Balken lesen sich
   als Fehler. Exakte Kantenbündigkeit ist ohnehin nicht zu haben, die
   Kachel schwebt ±7 px (hv-dash-float).
   Der Überhang nach rechts ist bewusst ein PIXEL-Wert und kein Prozent:
   das Etikett „Geprüft von Bese-AI" sitzt noch 12 px weiter außen, und
   bei -4 % wuchs der Überhang mit der Bühne — bei 1440 px lief das
   Etikett damit in die Bildkante (gemessen 1445 px bei 1440 px Fenster,
   der Hero clippt). Mit -10 px bleiben an jeder Breite ≥ 12 px Luft. */
.hv-dash__tile--lead   { --tw: 264px; --d: 1.0s;  --fd: 8.5s; --fo: -3s;   right: -10px; top: 46%; }
.hv-dash__tile--apply  { --tw: 236px; --d: 1.25s; --fd: 9s;   --fo: -5s;   left: 3%;   bottom: 2%; }
/* Die Vertrauens-Kachel liegt bewusst UNTER der Anruf-Kachel: sie
   überlappt sie (gewollt), darf ihr aber nicht die Kernaussage
   „Echter Auftrag" verdecken. Überlappen ja — die wichtigste Pille
   der Komposition zuhängen nein. */
.hv-dash__tile--trust  { --tw: 240px; --d: 1.45s; --fd: 9.5s; --fo: -2s;   left: 38%;  bottom: -11%; z-index: 1; }
.hv-dash__tile--lead   { z-index: 3; }
/* Pille + Chips auf EINER Zeile im leeren Band unter dem Feed — von der
   UNTERKANTE aus gemessen, weil das Band unten liegt und der Bildschirm-
   Inhalt (oben, feste Pixelhöhe) bei kleineren Bühnen weiter nach unten
   reicht; die 13 px zentrieren die 30-px-Chips auf die 56-px-Pille. */
.hv-dash__tile--chips  { --tw: auto;  --d: 1.2s;  --fd: 10s;  --fo: -4s;   right: 8%;  bottom: calc(24% + 13px); }
.hv-dash__pill { left: 9%; bottom: 24%; }

/* Unter 1440 px (Bühne < 640 px breit) passen Pille (178 px) und Chips
   (316 px) nicht mehr nebeneinander in das Band → Chips weg. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hv-dash__tile--chips { display: none; }
}
/* Schmale Desktop-Spalte (1024–1279 px, Bühne 437–560 px breit): neben
   Bewertung, Anzeige und Anruf bleibt kein kollisionsfreier Platz für
   Bewerbung + Icon-Reihe → beide weg, die Pille rückt an die untere
   linke Ecke des Bildschirms; die Karten eine Stufe schmaler (Texte
   brechen um, die Kacheln werden höher statt breiter). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hv-dash__tile--apply,
  .hv-dash__tile--trust { display: none; }
  .hv-dash__tile--review { --tw: 224px; top: -15%; } /* schmaler = höher (185 px): 1 % mehr Überhang, Unterkante bleibt über der Kennzahlen-Reihe */
  .hv-dash__tile--ads    { --tw: 196px; }
  .hv-dash__tile--lead   { --tw: 220px; }
  .hv-dash__pill { left: 2%; bottom: -1%; }
}

@keyframes hv-dash-in { from { opacity: 0; translate: 0 22px; scale: 0.96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes hv-dash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hv-dash-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes hv-dash-bar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@keyframes hv-dash-wait { 0%, 34% { opacity: 1; } 42%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hv-dash-ok { 0%, 34% { opacity: 0; transform: scale(0.85); } 42%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* Außerhalb des Viewports / Tab im Hintergrund (geteilter Hook) */
.hv-dash.is-paused,
.hv-dash.is-paused * { animation-play-state: paused; }

/* Unter 1024 px: unter dem Text, mittig, kompakter.
   Der Abstand nach oben (40 px zusätzlich zum Grid-Gap) war ursprünglich
   der Überhang der Bewertungs-Kachel. Nach dem Fokus-Umbau 2026-09-15
   überhängt oben keine Kachel mehr — der Abstand bleibt trotzdem, und
   zwar aus einem anderen, GEMESSENEN Grund: unter 640 px sitzt die
   Bese-Pille am Bühnen-Kopf, die Karten-Engine legt ihren Betriebspunkt
   darunter, und dessen Umkreis-Ring ist das hellste Element der Karte.
   Ohne die 40 px lag dieser Ring hinter der zweiten Siegel-Zeile der
   Vertrauenszeile und drückte deren Kontrast auf 3,03 : 1 (Schwelle
   4,5 : 1) — mit ihnen liegt er darunter. */
@media (max-width: 1023px) {
  .hv-dash { min-height: clamp(560px, 98vw, 620px); max-width: 620px; margin-inline: auto; margin-top: 40px; width: 100%; }
  .hv-dash__screen { transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); }
  .hv-dash__tile--review { --tw: clamp(210px, 58vw, 240px); left: -3%; top: -14%; }
  .hv-dash__tile--ads    { --tw: clamp(180px, 46vw, 210px); right: -2%; top: -9%; }
  /* `top: auto` ist Pflicht: die Desktop-Regel setzt seit dem Fokus-Umbau
     `top` statt `bottom` — ohne das Zurücksetzen wären beide Kanten
     gesetzt und die Kachel würde auf die Bühnenhöhe gestreckt. */
  /* `right: 0` statt -2 %: einspaltig reicht die Bühne bis an den
     Container-Rand, und das Etikett „Geprüft von Bese-AI" sitzt noch 12 px
     weiter außen — mit Überhang lief es bei 320/375/414/480/640 px exakt
     2 px über die Bildkante und wurde vom Hero abgeschnitten (gemessen).
     `top: auto` ist Pflicht, weil die Desktop-Regel `top` setzt. */
  .hv-dash__tile--lead   { --tw: clamp(210px, 60vw, 256px); right: 0; top: auto; bottom: 6%; }
  .hv-dash__tile--apply  { --tw: clamp(200px, 56vw, 236px); left: 0; bottom: -2%; }
  .hv-dash__tile--chips  { right: 6%; bottom: calc(24% + 13px); }
  /* Die Vertrauens-Kachel ist unter 1024 px AUS — genau wie im Bereich
     1024–1279 px. Gemessen ist die einspaltige Bühne dort zu eng für drei
     untere Kacheln: bei -13 % ragte sie auf 640 px 49 px unter den Hero
     (overflow:hidden schnitt die Siegel ab), bei -5 % überdeckte sie
     „Servicetechniker" zu 12 % und die Anruf-Kachel ihr „Google-
     Bewertungen" zu 18 %. Sie erscheint deshalb erst ab 1280 px, wo die
     Komposition drei Kacheln nebeneinander trägt; die Zertifikate stehen
     auf jeder Seite ohnehin in der Footer-Leiste. */
  .hv-dash__tile--trust { display: none; }
  .hv-dash__pill { left: 8%; bottom: 24%; }
}
/* Unter 640 px (Bühne 358 px bei 390): Dashboard, Bese-Pille (über der
   Kopfzeile) und die Anruf-Kachel (rechts im leeren Band).
   VOR dem Fokus-Umbau standen hier ZWEI 230-px-Karten, die nur
   ÜBEREINANDER passten — dafür war die Bühne 640–660 px hoch und der Feed
   des Dashboards ausgeblendet. Mit nur einer Kachel ist beides nicht mehr
   nötig: der Feed bleibt sichtbar (das Dashboard trägt auf dem Handy
   dadurch wieder seine ganze Aussage) und die Bühne fällt auf das Maß des
   1024-px-Bereichs zurück — gemessen bei 320/375/390/480/639 px, ohne
   Berührung von Kachel und Pille. */
@media (max-width: 639px) {
  .hv-dash__tile--apply,
  .hv-dash__tile--ads,
  .hv-dash__tile--chips,
  .hv-dash__tile--trust { display: none; }
  .hv-dash__pill { left: 2%; top: 0; bottom: auto; }
  .hv-dash__tile--lead   { --tw: clamp(200px, 60vw, 234px); right: 0; top: auto; bottom: 14%; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-dash,
  .hv-dash * { animation: none !important; }
  .hv-dash__chip--wait { display: none; }
}


/* Leistungen-Hub: Textspalte auf Branchen-Maß. Der geteilte
   `.hero--centered`-Deckel liegt bei 920px, die H1 „Was wir für deinen
   Betrieb machen." braucht GEMESSEN 923px — drei Pixel zu wenig, weshalb
   „machen." allein auf die zweite Zeile fiel. Nur `.page-leistungen`
   gescoped; die neun anderen zentrierten Heroes bleiben bei 920px. */
.page-leistungen .hero--centered .hero__text { max-width: 1000px; }
.page-leistungen .hero--centered .hero__lead { max-width: 66ch; }

/* ============================================================
   SELBSTSTÄNDIG MACHEN — Heller Hero + Hero-Hintergrund
   „Das Imperium"                              (Marie 2026-09-04)
   ------------------------------------------------------------
   Marie zur Seite /leistungen/selbststaendig-machen/: „Die
   Hintergrundanimation passt hier nicht … die Standardanimation
   mit diesen Kreisen nimmst du auf jeden Fall raus und machst die
   Hero-Section hell, und vielleicht kann man da eine andere
   Hintergrundanimation machen."

   Damit ist diese Seite die ERSTE bewusste Ausnahme von der
   projektweiten Regel „Alle Heroes = Dunkel-Insel" (Marie
   2026-08-03, konsolidierte Liste weiter oben) — die Seitenklasse
   ist dort in allen fünf Hero-Selektoren entfernt, nicht hier
   überschrieben. Das Page-File markiert den Hero zusätzlich mit
   `data-hero-light`; darüber erkennt der Trustpilot-Sync in
   scripts.html, dass der Score hier dem Seiten-Theme folgen muss.
   Aurora-Markup und der Flow-Layer „Der Strom" sind im Page-File
   entfernt (Partial bleibt reaktivierbar im Repo).

   Fläche: das etablierte Weiß-Band der Unterseiten. Die Naht nach
   unten ist hart und gewollt — es folgt die Dunkel-Insel
   „Probleme vor der Gründung".
   ============================================================ */
html[data-theme="light"] .page-selbststaendig-machen .hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}

/* Komposition (Marie, Runde 3): der Text steht MITTIG wie auf allen
   zentrierten Heroes — die Plakat-Fassung der Runde 2 (Text ins obere
   Drittel) war ihr „zu weit oben". Den Platzkonflikt mit der Skyline
   löst nicht das Layout, sondern die Messung je Turm in scripts.html
   ([data-hv-build], --hvb-cap). */

/* ---- Hero-Hintergrund „Das Imperium" (.hv-build) ------------
   Marie 2026-09-04, zweite Runde: „Es macht noch nicht wirklich was
   her, und es hat irgendwie nichts mit Selbständigkeit zu tun.
   Vielleicht irgendwas, was aussagt, dass man so ein Imperium baut
   oder etwas aufbaut." Die erste Fassung (einrastende Bauplan-
   Module an den Flanken) ist damit abgelöst — geblieben ist das
   Konstruktionsraster als GRUND, auf dem jetzt eine Skyline
   hochwächst.

   Dramaturgie: beim Laden steigen die Türme gestaffelt aus der
   Grundlinie (kleine zuerst, der Hauptturm zuletzt) und BLEIBEN
   stehen — der Aufbau ist einmalig (`animation-fill-mode: both`,
   eine Iteration), kein Dauer-Loop, der nach dem dritten Durchgang
   nervt. Danach lebt das Bild nur noch leise: einzelne Fenster
   gehen an, ein Lichthauch wandert.

   HELL-NATIV: deckende Tinte statt additivem Licht (Projekt-Lehre).
   Default = Dark-Fassung, der Light-Block dreht auf Tinte. */
.hv-build {
  --hvb-grid: rgba(179, 204, 223, 0.04);
  --hvb-grid-major: rgba(179, 204, 223, 0.07);
  /* Kontur mit Licht: links heller, rechts dunkler = Volumen ohne
     Schatten-Layer (Design-Review Runde 4). */
  --hvb-line: rgba(179, 204, 223, 0.34);
  --hvb-line-l: rgba(179, 204, 223, 0.22);
  --hvb-line-r: rgba(179, 204, 223, 0.50);
  /* Türme sind DECKEND (opake Fläche, kein Alpha): sie stehen vor dem
     Bauplan-Raster. Mit halbtransparenter Füllung lief das Raster durch
     sie hindurch, dann lasen sie sich als Drahtgitter statt als
     gebaute Häuser (Runde 2, im Screenshot gesehen).
     Die Töne sind EXAKT die etablierte Charcoal-Kachel-Familie
     (#26282C → #1B1D20, projektweit u. a. .faq-item, .ns-station__card,
     .mf-foto) — keine neu erfundenen Grauwerte: die fallen damit unter
     die bereits dokumentierte §5a-Abweichung „Charcoal statt Navy"
     statt eine zweite Grau-Baustelle aufzumachen (Guardian Runde 2,
     Präzedenz MF-Hero: schon eine abweichende Hex-Ziffer ist Drift). */
  --hvb-fill: #1B1D20;
  --hvb-fill-top: #26282C;
  --hvb-win: rgba(179, 204, 223, 0.26);
  /* Fensterlichter der Nebentürme: KEIN Marken-Akzent — der gehört
     allein dem Hauptturm (Ein-Akzent-Disziplin, Design-Review R4). */
  --hvb-glow: rgba(179, 204, 223, 0.55);
  --hvb-mass: rgba(0, 0, 0, 0.18);
  --hvb-akzent: #4DA8DA;
  --hvb-sheen: rgba(107, 196, 240, 0.09);
  --hvb-tower-shadow: none;
  /* Maßstab der Skyline (Marie, Runde 4: „die Animation ist mir noch
     ein bisschen zu klein im Hintergrund"): Turmbreiten, Fensterraster
     und Dächer skalieren gemeinsam über diesen Faktor; die Zonenhöhe
     steht separat an .hv-build__city. */
  --hvb-s: 1.35;

  /* Höhe des Logo-Bands am Fuß des Heros. Marie 2026-09-10: „Auch das
     mit dieser Skyline — vielleicht kann man die irgendwie höher setzen
     und darunter den Slider machen." Der Layer endet also ÜBER dem
     Streifen, statt hinter ihm durchzulaufen: der Boden der Skyline ist
     zugleich die Oberkante des Bandes. Der CSS-Wert ist der No-JS-Fall:
     seit das Band am Hero-FUSS sitzt (Nachrunde 2026-09-10), ist die
     Strecke Hero-Unterkante → Band-Oberkante schlicht
     `--hero-logos-rand + --hero-logos-h`, plus die 18px Luft, die auch
     die Engine lässt — und damit rechnerisch identisch zum JS-Wert
     (1440px: 40+92+18 = 150px; 390px: 24+52+18 = 94px, beides
     gemessen). Die frühere Formel stammte aus der Fassung, in der das
     Band noch im zentrierten Inhalt hing, und lag ohne JS 78px daneben
     (Guardian-Befund). Die genaue Kante misst
     [data-hv-build] in
     scripts.html und schreibt sie als --hvb-floor fort — der Streifen
     sitzt im zentrierten Inhalt, sein Abstand zur Hero-Unterkante hängt
     also von der Fensterhöhe ab und lässt sich nicht in CSS ausdrücken. */
  --hvb-floor: calc(var(--hero-logos-h) + var(--hero-logos-rand) + 18px);

  position: absolute;
  inset: 0;
  bottom: var(--hvb-floor);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Repaint-Bereich kapseln (Muster .hero__aurora) */
  contain: layout paint;
}

html[data-theme="light"] .hv-build {
  --hvb-grid: rgba(16, 24, 32, 0.035);
  --hvb-grid-major: rgba(16, 24, 32, 0.06);
  --hvb-line: rgba(16, 24, 32, 0.28);
  --hvb-line-l: rgba(16, 24, 32, 0.16);
  --hvb-line-r: rgba(16, 24, 32, 0.45);
  /* Hell: Verlauf aus zwei Bestandstönen — oben --surface-2 (#F9FAFB),
     unten der obere MIST-Grau-Ton (#EAEAEC), der projektweit die grauen
     Bänder trägt. --surface-1 (#F4F6F8) als Fußfarbe schied aus: er ist
     vom unteren Hero-Ton (#F4F7F9) praktisch nicht zu unterscheiden,
     die Türme wären auf dem Band verschwunden. */
  /* MASSE statt Drahtgitter (Design-Review Runde 4: die Körper waren
     fast so hell wie der Grund): der vordere Körper läuft im vollen
     MIST-Band-Verlauf #EAEAEC → #E2E2E4 (Bestandstöne), die Fenster
     sind HELLE Zellen darauf (Weiß) — damit heben sie sich von den
     Tinte-Linien des Bauplans ab, statt mit ihnen zu verschmelzen. */
  --hvb-fill: #E2E2E4;
  --hvb-fill-top: #EAEAEC;
  --hvb-win: rgba(255, 255, 255, 0.70);
  --hvb-glow: rgba(16, 24, 32, 0.16);
  /* Masse-Schicht: Tinte-Alpha über dem MIST-Körper — der Fuß der Türme
     wird spürbar satter als das Band (Guardian R4: Körper↔Band nur
     1,1–1,25:1), ohne einen neuen Grauton zu erfinden. */
  --hvb-mass: rgba(16, 24, 32, 0.07);
  --hvb-akzent: #2C6EA9;
  --hvb-sheen: rgba(44, 110, 169, 0.05);
  --hvb-tower-shadow: -8px 0 18px -14px rgba(var(--shadow-rgb), 0.35);
}

/* Konstruktionsraster — seit Runde 3 (Marie: „noch nicht zu viel
   Karomuster") ein leiser Bauplan-BODEN statt eines Vollflächen-Karos:
   das 24px-Feinraster ist raus, es bleiben ein 60px-Raster und
   120px-Hauptlinien, beide deutlich blasser, und die Maske blendet
   das Raster von oben her ein — der obere Hero bleibt praktisch weiß,
   das Raster liegt unter der Skyline, wo es als Bauplan Sinn ergibt.
   Das Element ist größer als der Hero und wandert um genau eine
   Hauptraster-Periode → nahtloser Loop ohne background-position-
   Animation (die wäre Paint-teuer). */
.hv-build__grid {
  position: absolute;
  inset: -160px;
  background-image:
    linear-gradient(to right,  var(--hvb-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hvb-grid) 1px, transparent 1px),
    linear-gradient(to right,  var(--hvb-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hvb-grid-major) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 120px 120px, 120px 120px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 22%,
    rgba(0, 0, 0, 0.35) 48%,
    rgba(0, 0, 0, 0.8) 72%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 22%,
    rgba(0, 0, 0, 0.35) 48%,
    rgba(0, 0, 0, 0.8) 72%,
    #000 100%
  );
  animation: hvb-grid-drift 120s linear infinite;
}

@keyframes hvb-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-120px, -120px, 0); }
}

/* Skyline-Zone am unteren Rand des Heros. Ohne JS eine bewusst
   niedrige Silhouette (Runde 3: der Text steht mittig, darunter ist
   wenig Platz); erst nach der Messung in scripts.html (.is-measured,
   je Turm gedeckelt) bekommt die Zone ihre volle Höhe — die
   ungedeckelten Flanken-Türme dürfen dann bis dorthin wachsen. */
.hv-build__city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(48px, 7vh, 90px);
}

.hv-build.is-measured .hv-build__city {
  height: clamp(220px, 42vh, 540px);
}

/* Grundlinie, auf der gebaut wird */
/* Boden: Sockelband + Horizontlinie 10px über der Bandkante — die
   Skyline STEHT auf etwas, statt an der Naht zur dunklen Folgesection
   abgeschnitten zu wirken (Design-Review Runde 4). */
.hv-build__city::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--hvb-fill);
}

.hv-build__city::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--hvb-line) 12%,
    var(--hvb-line) 88%,
    transparent 100%
  );
}

.hv-build__row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  /* über die volle Breite verteilt: die Türme unter der Textspalte
     werden per Messung gedeckelt, die an den Flanken dürfen hoch —
     zentriert gestapelt stünden alle unter dem Text. */
  justify-content: space-between;
  padding-inline: clamp(12px, 3vw, 56px);
}

/* Hintere Reihe: schmaler, blasser, leicht angehoben = Tiefe. */
.hv-build__row--back {
  z-index: 0;
  opacity: 0.7;
  filter: blur(0.3px);
  bottom: calc(10px + clamp(10px, 1.4vh, 22px));
  padding-inline: clamp(56px, 8vw, 150px);
}

.hv-build__row--front { z-index: 1; bottom: 10px; }

/* Hintere Reihe: eine Stufe näher am Grund (Tiefe) — Dark aus den
   Charcoal-Surfaces #15171A/#1C1F22, Light aus surface-1/-0. Zellen
   deutlich kleiner als vorn: großer Zellen-Sprung = nah/fern. */
.hv-build__row--back .hv-tower {
  --hvb-fill: #15171A;
  --hvb-fill-top: #1C1F22;
  --fh: 9px;
}
html[data-theme="light"] .hv-build__row--back .hv-tower {
  --hvb-fill: #EEF1F3;
  --hvb-fill-top: #F4F6F8;
}

.hv-tower {
  position: relative;
  width: calc(var(--w) * var(--hvb-s));
  /* --hvb-cap kommt je Turm aus der Messung (scripts.html); ohne
     Deckel gilt die Wunschhöhe. */
  height: min(var(--h), var(--hvb-cap, 100%));
  /* Nachmessungen (fonts.ready, load, resize) ändern den Deckel —
     ohne Übergang spränge die Höhe hart, ggf. mitten im Aufbau. Die
     erste Messung läuft VOR dem ersten Paint und löst nichts aus. */
  transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex: 0 0 auto;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: var(--hvb-line) var(--hvb-line-r) transparent var(--hvb-line-l);
  /* Fensterraster über dem opaken Körper (der Verlauf gibt Höhe:
     oben heller, unten satter). Zellenhöhe --fh je Turm (Hauptturm
     größer, hintere Reihe kleiner = Maßstab). */
  background-image:
    repeating-linear-gradient(to bottom, var(--hvb-win) 0 1px, transparent 1px calc(var(--fh, 15px) * var(--hvb-s))),
    repeating-linear-gradient(to right,  var(--hvb-win) 0 1px, transparent 1px calc(var(--fw, 13px) * var(--hvb-s))),
    linear-gradient(180deg, transparent 0%, var(--hvb-mass) 100%),
    linear-gradient(180deg, var(--hvb-fill-top) 0%, var(--hvb-fill) 100%);
  background-position: 0 6px, 6px 0, 0 0, 0 0;
  box-shadow: var(--hvb-tower-shadow);
  /* Aufbau: einmalig, von unten enthüllt. clip-path statt height
     (Layout) oder scaleY (würde das Fensterraster mitstrecken). */
  animation: hvb-rise 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.3s + var(--i) * 0.14s);
}

/* Endwert mit NEGATIVEM Top-Inset: `inset(0)` bliebe nach der
   Animation stehen und schnitte alles ab, was per bottom:100% ÜBER
   dem Turm liegt (Dach, Krone, Kran) — die Pseudo-Elemente waren
   gerendert, aber unsichtbar (Runde 4, per computed clip-path
   gefunden). −100 % oben reicht: der Überhang ist nie höher als der
   Turm. SEITLICH ebenfalls öffnen: der Kran-Ausleger des Bau-Turms
   ragt 190 % nach rechts über die Box — mit rechtem Inset 0 endete er
   exakt an der Turmkante als Stummel, der Haken war nie sichtbar
   (Guardian-Blocker Runde 4, per Pixel-Scan belegt). */
@keyframes hvb-rise {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(-100% -150% 0 -100%); }
}

/* Der Hauptturm — „dein Betrieb": trägt als einziger den Marken-
   Akzent (Ein-Akzent-Disziplin) und wächst zuletzt. */
.hv-tower--haupt {
  border-color: color-mix(in srgb, var(--hvb-akzent) 62%, var(--hvb-line));
}


/* Sehr niedrig gedeckelte Türme (Senke unter dem Score): kein Dach,
   kein Fensterlicht — beides ragte sonst über den Stumpf hinaus.
   Doppelklasse (0,2,1) mit Absicht: mit einfacher Klasse (0,1,1) stand
   die Regel spezifitätsgleich VOR .hv-tower::before/::after und verlor
   per Quellreihenfolge — die Stubs zeigten trotzdem Dach + Licht
   (Guardian-Blocker Runde 3). */
.hv-tower.hv-tower--stub::before,
.hv-tower.hv-tower--stub::after { display: none; }

/* Dachaufbau + Positionslicht an der Spitze */
.hv-tower::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 34%;
  height: clamp(8px, 1.2vh, 16px);
  transform: translateX(-50%);
  border: 1px solid var(--hvb-line);
  border-bottom: none;
  background: var(--hvb-fill-top);
}

.hv-tower--haupt::before {
  /* durchgehende Attika + 1px Markenblau-Krone (Design-Review R4: der
     schmale Mast las sich als „zwei Zähne") */
  width: calc(100% + 2px);
  height: clamp(6px, 0.9vh, 10px);
  border-color: color-mix(in srgb, var(--hvb-akzent) 62%, var(--hvb-line));
  background:
    linear-gradient(var(--hvb-akzent), var(--hvb-akzent)) top / 100% 1px no-repeat,
    var(--hvb-fill-top);
}

/* Fensterlicht: geht nach dem Aufbau in langem Rhythmus an — das ist
   das einzige, was dauerhaft läuft. Position variiert über --i. */
.hv-tower::after {
  content: "";
  position: absolute;
  /* --lx/--ly kommen als fertige Werte aus dem Partial. WICHTIG:
     calc() kennt KEIN Modulo — ein `var(--i) % 3` ist ungültig, die
     ganze Deklaration fällt still aus und das Licht rutscht an die
     statische Position in die Turmecke (Runde 2, nur durch Messen
     der computed values gefunden, im Screenshot sah es nach einem
     Positions-Fehler aus). Und vom BODEN aus rechnen: von oben
     gerechnet ragt das Licht bei niedrigen Türmen über die Kante. */
  left: calc(6px + var(--lx, 1) * var(--fw, 13px) * var(--hvb-s));
  bottom: calc(24px + var(--ly, 0) * 38px);
  width: calc(var(--fw, 13px) * var(--hvb-s) - 2px);
  height: calc(14px * var(--hvb-s));
  background: var(--hvb-glow);
  opacity: 0;
  animation: hvb-window 11s ease-in-out infinite;
  animation-delay: calc(2.6s + var(--i) * 0.9s);
}

.hv-tower--haupt::after {
  height: calc(29px * var(--hvb-s));
  background: var(--hvb-akzent);
}

/* Turm IM BAU (links neben dem Hauptturm): unten massiv, oben nur
   Kontur + Geschossdecken, darüber ein Kran als Hairline-Geometrie —
   erst das macht „aufbauen" nach dem Aufwachsen weiter lesbar
   (Design-Review Runde 4). Der Kran ist das ::before dieses Turms:
   so rechnet der Mess-Hook seine Höhe automatisch als „Dach" in den
   Deckel ein und er kann nie in den Text ragen. Der Ausleger zeigt
   nach rechts über den ungedeckelten Hauptturm. 
   Geometrisch reicht der Ausleger ~80px IN die Box des Hauptturms;
   sichtbar ist das nicht, weil der Hauptturm (spätere DOM-Reihenfolge)
   opak darüber malt — wer Turmbreiten oder den Kran-Versatz ändert,
   sollte das wissen (Guardian-Hinweis Runde 4). */
.hv-tower--bau {
  background-image:
    repeating-linear-gradient(to bottom, var(--hvb-line) 0 1px, transparent 1px calc(var(--fh, 15px) * var(--hvb-s))),
    repeating-linear-gradient(to bottom, var(--hvb-win) 0 1px, transparent 1px calc(var(--fh, 15px) * var(--hvb-s))),
    repeating-linear-gradient(to right,  var(--hvb-win) 0 1px, transparent 1px calc(var(--fw, 13px) * var(--hvb-s))),
    linear-gradient(180deg, transparent 0%, var(--hvb-mass) 100%),
    linear-gradient(180deg, var(--hvb-fill-top) 0%, var(--hvb-fill) 100%);
  background-size: 100% 42%, 100% 58%, 100% 58%, 100% 58%, 100% 58%;
  background-position: 0 0, 0 100%, 0 100%, 0 100%, 0 100%;
  background-repeat: no-repeat;
}
.hv-tower--bau::before {
  left: 28%;
  width: 190%;
  height: clamp(70px, 11vh, 110px);
  transform: none;
  border: 0;
  background:
    linear-gradient(var(--hvb-line-r), var(--hvb-line-r)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--hvb-line-r), var(--hvb-line-r)) 5px 0 / 1px 100% no-repeat,
    linear-gradient(var(--hvb-line-r), var(--hvb-line-r)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--hvb-line-r), var(--hvb-line-r)) 0 5px / 100% 1px no-repeat,
    linear-gradient(var(--hvb-line-r), var(--hvb-line-r)) 64% 0 / 1px 46% no-repeat,
    linear-gradient(var(--hvb-line-r), var(--hvb-line-r)) 64% 46% / 7px 5px no-repeat;
}
.hv-tower--bau::after { display: none; }

@keyframes hvb-window {
  0%, 8%    { opacity: 0; }
  16%, 46%  { opacity: 0.5; }
  60%, 100% { opacity: 0; }
}

/* Licht-Hauch über der Skyline — nimmt der Fläche die Flachheit. Auf
   Weiß ein sehr leiser Brand-Blau-Tint statt additivem Weiß. */
.hv-build__sheen {
  position: absolute;
  inset: -30% -50%;
  background: linear-gradient(
    112deg,
    transparent 34%,
    var(--hvb-sheen) 50%,
    transparent 66%
  );
  filter: blur(40px);
  animation: hvb-sheen 26s ease-in-out infinite;
}

@keyframes hvb-sheen {
  0%, 100% { transform: translate3d(-18%, 0, 0); }
  50%      { transform: translate3d(18%, 0, 0); }
}

/* Unter 1024px hat der Hero keine Viewport-Höhe mehr (geteilte
   Basisregel) — unter dem Inhalt bliebe nur das Sektions-Padding, die
   Skyline wäre ein Streifen. Der Hero bekommt hier unten Raum
   dazu (er ist auf Mobile ohnehin nicht an die Fensterhöhe gebunden),
   die Zone bleibt trotzdem kompakter als auf dem Desktop.

   Seit dem Hero-Logo-Band (Marie 2026-09-10) liegt dieser Raum NICHT
   mehr unter dem Hero-Inhalt, sondern zwischen Inhalt und Band: die
   Skyline endet über dem Streifen. Mit dem alten Extra-Padding stand
   sie mobil als 40px-Strich direkt über dem Band (alle Türme auf Stub
   gedeckelt, weil der Text bis an sie heranreicht) und darunter blieben
   ~236px leere Fläche. Deshalb: Padding zurück auf den Normalwert der
   Basisregel, der Raum wandert in --hero-logos-gap.
   Auf dem Desktop braucht es das nicht — dort ist der Hero
   min-height-getrieben und die Flanken-Türme stehen ungedeckelt neben
   der Textspalte. */
@media (max-width: 1023px) {
  .page-selbststaendig-machen .hero {
    --hero-logos-gap: clamp(168px, 25vh, 240px);
  }
  .hv-build.is-measured .hv-build__city {
    height: clamp(150px, 24vh, 260px);
  }
}

/* Schmale Viewports: die hintere Reihe entfällt (sie würde sich mit
   der vorderen zu einem unruhigen Klumpen schieben), von der vorderen
   bleiben vier Türme in schmalerer Fassung — 13 Türme mit Desktop-
   Breiten übereinander waren auf 390px ein Klumpen (gemessen). */
@media (max-width: 900px) {
  .hv-build__row--back,
  .hv-tower--opt { display: none; }
  .hv-build { --hvb-s: 0.95; }
  .hv-build__grid { background-size: 48px 48px, 48px 48px, 96px 96px, 96px 96px; }
  @keyframes hvb-grid-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-96px, -96px, 0); }
  }
}

@media (max-width: 560px) {
  .hv-build__sheen { display: none; }
}

/* reduced-motion: die Skyline steht sofort fertig da. */
@media (prefers-reduced-motion: reduce) {
  .hv-build__grid,
  .hv-build__sheen { animation: none; }

  .hv-tower {
    animation: none;
    clip-path: none;
    transition: none;
  }
  .hv-tower::after {
    animation: none;
    opacity: 0.5;
  }
}

/* Kennzahlen im ZWEISPALTIGEN Hero: 2×2 statt 1×4, solange die
   Textspalte schmal ist (1024–1439px). GEMESSENER Altbestands-Fehler,
   beim Kanalservice-Hero-Umbau 2026-09-04 gefunden und site-weit
   behoben: die Zahl 442.500 braucht bei 32px Montserrat-Bold ~157px,
   die Zelle ist bei 1024px aber nur ~99px und bei 1440px 146px breit —
   die Zahl lief über ihre Zelle in die Nachbarzahl. Nachgemessen auf
   Auftragsgewinnung, Kanalservice und Schädlingsbekämpfung
   gleichermaßen, also NICHT durch den Umbau verursacht.
   Der zentrierte Hero (Startseite u. a.) ist ausgenommen — dort läuft
   die Reihe über die volle Container-Breite und passt in 1×4. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero:not(.hero--centered) .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 36px);
    max-width: 620px;
  }
}

/* Kanalservice-H1: „Rohrreinigungsbetrieb" passt in der schmalen
   Textspalte (1024–1279px) nicht in eine Zeile. Die Typografie-Runde
   vom 2026-09-02 setzt ab 1024px `hyphens: none` auf Hero-Headlines
   (Komposita sollen an Wortgrenzen brechen) — das schaltet aber AUCH
   die weichen Trennstellen (&shy;) im Markup ab, worauf
   `overflow-wrap: break-word` mitten im Wort und OHNE Trennstrich
   umbrach („Rohrreinigungsbet | rieb", gemessen bei 1024px).
   `manual` hält die Auto-Trennung weiter aus und lässt genau die im
   Markup gesetzten Trennstellen zu. Nur auf dieser Seite und nur im
   gemessenen Fenster: ab 1280px passt das Wort wieder in eine Zeile,
   dort würde `manual` unnötig trennen (bei 1440px gemessen:
   „… und Rohr-" / „reinigungsbetrieb"). */
/* 2026-09-07 auch Schädlingsbekämpfung: dieselbe Falle, gemessen bei
   1024px („Schädlingsbekämpfun | g" — Umbruch ohne Trennstrich, obwohl
   das Markup ein &shy; trägt). Gleiches Fenster, gleiche Spezifität. */
@media (min-width: 1024px) and (max-width: 1279px) {
  :is(.page-kanalservice, .page-kanal-start, .page-schaedlingsbekaempfung) section.hero .hero__headline {
    -webkit-hyphens: manual;
            hyphens: manual;
  }
}

/* Kanalservice-Hero: Rhythmus zwischen Lead, Kennzahlen und CTA leicht
   gestrafft (Marie 2026-09-04). Gemessen bei 1440×900 stand der
   Signature-CTA exakt auf der Faltkante (y = 900) — mit dieser
   Straffung liegt er darüber. Bewusst nur auf dieser Seite: ihre H1
   läuft über vier Zeilen und der Paket-Lead ist lang, andere
   Sub-Heroes brauchen den Eingriff nicht. */
:is(.page-kanalservice, .page-kanal-start) .hero__lead { margin-bottom: clamp(18px, 2vw, 26px); }
:is(.page-kanalservice, .page-kanal-start) .kanal-hero__stats { margin-bottom: clamp(22px, 2.4vw, 30px); }

/* Fallback-Stränge gestaffelt wie die Röhren der Glas-Fassung (Guardian
   2026-09-04): der äußere Kranz läuft fein aus, innen bleibt es kräftig. */
.hv-kanal__strand--fine { stroke-width: 2.2; }

/* ============================================================
   KANALSERVICE-HERO — Runde 3 (Marie 2026-09-04): FOTO-BÜHNE +
   GLASKACHELN statt 3D-Visual
   ------------------------------------------------------------
   Marie zum Glas-Netz: „immer noch sehr abgehackt … ein Bild im
   Hintergrund, das sich hinzufügt, und Glaskacheln darüber"
   (Vorbild-Screenshot talenthafen: Foto rechts, läuft nach links
   ins Dunkel aus). Umsetzung: das Foto liegt als Ebene über der
   GANZEN Sektion (z-index -2 = unterste Ebene; die Aurora, die bis
   Runde 8 additiv darüber lag, ist seit Runde 9 nicht mehr im Hero), sitzt rechts und läuft über zwei verschnittene Masken
   nach links UND oben/unten aus — kein Kasten, keine Kante. Der
   Live-Ticker verliert seinen Kartenrahmen; seine Einträge werden
   einzelne Glaskacheln (Maries Glas-Rezept vom Karriere-Hero, §5a)
   und stapeln sich versetzt über dem Foto. Das Visual
   `.hv-kanal` bleibt reaktivierbar (Block darüber), ist auf der
   Seite aber nicht mehr eingebunden.
   ============================================================ */
.kanal-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
/* Runde 6 (Marie: „das Bild hat oben und unten noch Platz — es soll
   komplett über die ganze Höhe der Hero-Section gehen"): das Foto füllt
   die volle Sektionshöhe im ECHTEN Seitenverhältnis (height 100 %,
   width auto) — kein cover-Zoom (der zeigte in Runde 3 nur noch den
   Lampenkopf). Dadurch wird es breiter als die rechte Spalte und läuft
   unter die Textspalte; dort nimmt die Maske es nach links weich ins
   Dunkel zurück (Textkontraste gemessen, s. Stand-Block). Nur noch EINE
   Maske — oben/unten bleibt das Bild bewusst bis zur Kante.
   max-width: none ist PFLICHT: der globale Reset (img { max-width:100% })
   würde die Bild-Box sonst auf Hero-Breite kappen; Chromium malt den
   Inhalt dann zwar trotzdem seitenverhältnis-treu und beschneidet ihn
   (Guardian 2026-09-04, empirisch belegt), andere Engines dürften bei
   object-fit:fill stauchen — deshalb zusätzlich cover + right center als
   Sicherheitsnetz für den geklemmten Fall. */
.kanal-hero__photo img {
  position: absolute;
  top: 0;
  right: -6%;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  /* Runde 10 (Marie 2026-09-07: „überlagere das Hintergrundbild ein
     bisschen schwarz — zu auffallend und zu warm in den Farben"): die
     Abdunklung liegt als FILTER auf dem Bild statt als Overlay-Ebene
     über der Sektion — ein rgba-Overlay würde auch den Charcoal-Grund
     links unter dem Text mit einfärben. brightness zieht das Motiv
     Richtung Schwarz (= die gewünschte Überlagerung), saturate nimmt
     das Türkis des Roboters und die warme Lampe zurück; das Asset selbst
     bleibt unverändert (Rückweg = diese eine Zeile). */
  filter: brightness(0.62) saturate(0.5);
  animation: kanal-photo-in 1.6s var(--ease) 0.1s forwards;
  -webkit-mask-image: linear-gradient(to left, #000 24%, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0.18) 66%, transparent 82%);
          mask-image: linear-gradient(to left, #000 24%, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0.18) 66%, transparent 82%);
}
@keyframes kanal-photo-in { to { opacity: 0.94; } }
/* Runde 3–8 lief die Aurora hier auf 0,55; seit Runde 9 (Marie 2026-09-07:
   „die Punkte, die gleiten, kannst du hier rausnehmen") ist sie aus dem
   Page-File entfernt — die Stimmung trägt allein Foto + Charcoal-Grund.
   Regel: die Aurora ist im Hero keine Pflicht (§5a). */

/* Runde 4 (Marie: „die Information in der linken Spalte ist sehr
   gequetscht … linke Spalte größer, die Live-Animation rechts insgesamt
   in EINER Glaskachel über dem Bild, mittig und etwas kleiner"):
   Spalten 1,5 : 1 statt 1,05 : 1, der Lead darf breiter laufen, die
   rechte Spalte trägt EINE kompakte Glaskachel — mittig in der Spalte,
   der Roboter bleibt rechts daneben/dahinter sichtbar. */
@media (min-width: 1024px) {
  .kanal-hero .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .kanal-hero .hero__lead { max-width: 62ch; }
}
.kanal-hero .kanal-hero__media {
  align-self: center;
  justify-self: center;
  width: min(100%, 440px);
}
/* Die ganze Live-Aktivität als EINE Glaskachel über dem Foto.
   RUNDE 8 (Marie 2026-09-07, krepling-Screenshot der runden Milchglas-
   Scheibe: „soll wirklich so eine Glasoptik haben … diesen
   Durchsichtigkeits-Effekt … muss keinen Rahmen haben"): die
   Fassung bis Runde 7 lag auf einem zu 74 % DECKENDEN Dunkelgrund —
   dadurch war sie eine dunkle Karte mit etwas Blur, kein Glas. Jetzt
   echtes MILCHGLAS: (1) kein Dunkelgrund mehr, nur ein hauchdünner
   Rauch-Tint (.40 — GEMESSEN: bei .16 lag der Ticker-Text an den
   Roboterlampen bei 1,8–2,7:1, bei .40 plus geätzten Zeilen bei ≥4,8:1;
   die Kachel bleibt dabei sichtbar durchsichtig, der Roboter scheint als
   weiche Form durch), (2) kräftige Unschärfe + Sättigung,
   (3) ungleiche Milch-Deckkraft — dichter oben links, offener unten
   rechts (gleichmäßig milchig liest sich als Papier, Glaskachel-Regel
   aus dem Overlay-Projekt), (4) statt eines Rahmens nur ein
   Licht-SAUM: 1px innen liegende Weiß-Kante, oben heller (Streiflicht),
   plus ein weicher Glanzfleck (::after) — exakt die Kante der
   krepling-Scheibe. Selektor-Liste trägt beide Spezifitäten (die
   geteilte Light-Regel „Alle Heroes = Dunkel-Insel", 0,3,1, würde die
   nackte Regel sonst im Standard-Theme schlagen — dokumentierte
   Kanal-Falle). Den Light-Zweig brauchen NUR diese Regel und die
   Eyebrow-Pille (dort schlägt die geteilte Light-Eyebrow-Regel mit
   body.-Präfix zurück — GEMESSEN: ohne den Zweig fiel die Pille im
   Light-Theme auf .65/.024); Typ/Ago/Icon haben keine konkurrierende
   Light-Regel (per getComputedStyle in beiden Themes bestätigt). */
.kanal-hero .hero__media .hero-ticker,
.pest-hero .hero__media .hero-ticker,
html[data-theme="light"] :is(.page-kanalservice, .page-kanal-start) .hero-ticker,
html[data-theme="light"] .page-schaedlingsbekaempfung .hero-ticker {
  margin-top: 0;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: var(--radius-xl);
  border: 0;
  background:
    linear-gradient(
      142deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.10) 38%,
      rgba(255, 255, 255, 0.04) 70%,
      rgba(255, 255, 255, 0.07) 100%
    ),
    rgba(12, 20, 28, 0.40);
  -webkit-backdrop-filter: blur(38px) saturate(1.5);
          backdrop-filter: blur(38px) saturate(1.5);
  box-shadow:
    /* Licht-Saum statt Rahmen: innen liegende Kante, oben Streiflicht */
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    /* Tiefe: die Scheibe steht VOR dem Foto */
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
/* Feinkorn über dem Glas (Runde 7: die „leichten Pünktchen" der
   krepling-Scheibe; Runde 9, Marie: „die Punkte sind noch zu sehr als
   Punkte zu erkennen" → statt eines 4px-Punktrasters jetzt dasselbe
   Fraktal-Korn wie .hero__noise, eng gekachelt und leise — liest sich
   als Mattierung im Glas, nicht als Raster). z-index −1 in der
   isolierten Kachel: über dem Grund, unter Kopfzeile und Zeilen; oben
   links am dichtesten, wo die Milch am stärksten ist. */
.kanal-hero .hero__media .hero-ticker::before,
.pest-hero .hero__media .hero-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(150deg, #000 0, rgba(0, 0, 0, 0.35) 100%);
          mask-image: linear-gradient(150deg, #000 0, rgba(0, 0, 0, 0.35) 100%);
}
/* Glanzfleck: der helle Lichtfleck oben links der krepling-Scheibe —
   eine weiche Ellipse, weit ausgeblurrt, damit sie als Licht IM Glas
   liest und nicht als Fläche */
.kanal-hero .hero__media .hero-ticker::after,
.pest-hero .hero__media .hero-ticker::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -22%;
  left: -12%;
  width: 62%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08) 55%, transparent 100%);
  filter: blur(14px);
}
/* Text auf Milchglas: die Kachel hellt den Grund auf, deshalb voll
   deckendes Weiß und ein hauchdünner Schatten als Kontrast-Reserve
   (nachgemessen gegen die hellsten Lampen des Fotos, s. Chronik) */
.kanal-hero .hero__media .hero-ticker__type,
.pest-hero .hero__media .hero-ticker__type {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.kanal-hero .hero__media .hero-ticker__eyebrow,
.pest-hero .hero__media .hero-ticker__eyebrow,
html[data-theme="light"] body:is(.page-kanalservice, .page-kanal-start) .hero__media .hero-ticker__eyebrow,
html[data-theme="light"] body.page-schaedlingsbekaempfung .hero__media .hero-ticker__eyebrow {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  /* Pille sitzt unter dem Glanzfleck → dieselbe geätzte Reserve wie die Zeilen */
  background: rgba(12, 20, 28, 0.24);
  border-color: rgba(255, 255, 255, 0.22);
}
.kanal-hero .hero__media .hero-ticker__ago,
.pest-hero .hero__media .hero-ticker__ago {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.kanal-hero .hero-ticker__head,
.pest-hero .hero-ticker__head {
  margin-bottom: clamp(12px, 1.4vw, 16px);
  padding-bottom: clamp(10px, 1.2vw, 14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
/* In der Kachel: die Einträge als ruhige Zeilen (kein Glas-in-Glas) */
.kanal-hero .hero-ticker__list,
.pest-hero .hero-ticker__list { gap: clamp(8px, 1vw, 10px); }
/* Runde 8: die Zeilen als leicht geätzte Felder IM Glas — kein Kasten,
   nur ein Licht-Saum wie an der Kachel selbst */
.kanal-hero .hero-ticker__item,
.pest-hero .hero-ticker__item {
  padding: clamp(10px, 1.2vw, 12px) clamp(12px, 1.4vw, 14px);
  border-radius: var(--radius-md);
  /* dunkler geätzt statt heller: die Zeilen tragen den Text und liegen
     mittig über den hellsten Lampen — Rauch-Tint als Kontrast-Reserve
     (t40rows-Messung, s. Chronik), Licht-Saum hält sie im Glas-Idiom */
  background: rgba(12, 20, 28, 0.22);
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.kanal-hero .hero-ticker__type,
.pest-hero .hero-ticker__type { font-size: clamp(14px, 1.1vw, 15px); }
/* Runde 8: Icon-Badges auf dem Milchglas — Cyan säuft auf dem aufgehellten
   Grund ab (gemessen ~2:1), deshalb Weiß auf einer eine Stufe dichteren
   Milch-Scheibe mit Licht-Saum; Cyan bleibt dem Live-Punkt vorbehalten */
.kanal-hero .hero__media .hero-ticker__icon,
.pest-hero .hero__media .hero-ticker__icon {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Icon-Strich wie der Text mit hauchdünnem Schatten (Guardian R8: Weiß auf
   der weiß-milchigen Badge-Fläche braucht dieselbe Reserve wie der Text) */
.kanal-hero .hero__media .hero-ticker__icon .icon,
.pest-hero .hero__media .hero-ticker__icon .icon {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.40));
}

/* Start-Choreografie: Kacheln nach dem Text */
:is(.page-kanalservice, .page-kanal-start) .kanal-hero__media { animation: hub-hero-in 0.9s var(--ease) 0.72s both; }

@media (max-width: 1023px) {
  /* Einspaltig: das Foto wird ein Band hinter den Kacheln unten, oben
     weich ausgeblendet — kein Text liegt auf dem Motiv */
  /* Das Motiv sitzt so, dass die Roboter-Lampen zwischen Sub-CTA und
     Kacheln aufscheinen — unter den Kacheln allein wäre es unsichtbar
     (bei 390px gemessen) */
  .kanal-hero__photo img {
    top: auto;
    bottom: 12%;
    right: -18%;
    width: 132%;
    height: auto;
    -webkit-mask-image:
      linear-gradient(to left, #000 45%, rgba(0, 0, 0, 0.35) 100%),
      linear-gradient(to bottom, transparent 0, #000 28%, #000 78%, transparent 100%);
            mask-image:
      linear-gradient(to left, #000 45%, rgba(0, 0, 0, 0.35) 100%),
      linear-gradient(to bottom, transparent 0, #000 28%, #000 78%, transparent 100%);
  }
}
/* Runde 5 (Marie: „das Trustpilot-Badge ist noch ungünstig platziert —
   auf die linke Seite"): das Widget wandert per Relocation-Script in den
   "cta"-Slot unter der CTA-Reihe (Muster AG/MA). Die dann leeren Slots im
   Ticker-Kopf und im Mobile-Bereich verschwinden, damit weder eine leere
   Pille noch ein leerer Abstand bleibt. */
.kanal-hero .hero-ticker__trustpilot.is-tp-empty,
.kanal-hero .hero-trustpilot-mobile.is-tp-empty { display: none; }
.kanal-hero .kanal-hero__trust { margin-top: clamp(14px, 1.6vw, 20px); }
:is(.page-kanalservice, .page-kanal-start) .kanal-hero__trust { animation: hub-hero-in 0.85s var(--ease) 0.78s both; }
@media (prefers-reduced-motion: reduce) { :is(.page-kanalservice, .page-kanal-start) .kanal-hero__trust { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .kanal-hero__photo img { animation: none; opacity: 0.94; }
  :is(.page-kanalservice, .page-kanal-start) .kanal-hero__media { animation: none; }
}

/* Runde 10 (Marie 2026-09-07: „die Hero-Section auf der Kanalservice-
   Seite immer auf 100 % Viewport-Höhe"): dieselbe Rechnung wie beim
   Startseiten-Hero (Block „Startseite: Hero füllt den ersten Bildschirm"
   — 73px Navbar abgezogen, svh statt vh, min-height statt height, ohne
   Media-Query). GEMESSEN vor dem Eingriff: der Hero war mit dem festen
   128px-Innenabstand der Basis-.hero überall HÖHER als der Bildschirm
   (1440×900: 945px statt 827; 1366×768: 1069 statt 695) — der Inhalt
   (vierzeilige H1, Paket-Lead, Kennzahlen, CTA-Reihe, Sub-CTA, Score)
   ist hoch. Der Innenabstand hängt deshalb ab 1024px bei JEDER Fenster-
   höhe an der Fensterhöhe (5vh, Sockel 24px, Deckel 96px), nicht nur
   bei ≤860px wie auf der Startseite: bei 1440×900 geht die Rechnung
   damit exakt auf (827px, Inhalt mittig); wo der Inhalt höher ist als
   der Platz (1366×768, 1280×720, 1024×768), GEWINNT der Inhalt — nichts
   wird abgeschnitten. Die Foto-Ebene ist `inset: 0` und wächst mit. */
:is(.page-kanalservice, .page-kanal-start) .hero {
  /* HISTORIE: die -73px galten der Leiste im Fluss. Seit [Block: kopfleiste-r24] (24.09.) ist die Kopfleiste fixed, dieser Hero misst 100svh — Regel dort. */
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  :is(.page-kanalservice, .page-kanal-start) .hero { padding-block: clamp(24px, 5vh, 96px); }
}

/* ============================================================
   WEBSITE-SEITE — Hero-Entschlackung (Marie 2026-09-04)
   „links ein wenig zu viele Informationen" + H1 auf Handwerksbetrieb
   mit Akzent auf „Website" + fiktive Muster-Kundenseite im Device-Duo.
   Markup-Änderungen im Page-File (Lead gekürzt, Sub-CTA + Belege
   deaktiviert, Screens getauscht). Hier nur die Spalten: die neue H1
   „Eine Website für deinen Handwerksbetrieb, über die Leute wirklich
   anrufen." braucht für drei Zeilen bei 1440 eine 689px breite Spalte
   (gemessen: „die Leute wirklich anrufen." = 689px, Basis-Spalte
   1,05fr = 672px) → 1,15fr : 1fr NUR auf .ws-hero (= 702px bei 1440).
   Bei 1024–1280 läuft sie vier- bis fünfzeilig, das nbsp im Markup
   („wirklich&nbsp;anrufen.") hält die Schlusszeile zweiwortig (kein
   Hurenkind). Preis: das Device-Duo wird bei 1440 von 640 auf ~610px
   schmaler (−5 %) — bewusst das kleinste Verhältnis, das die drei
   Zeilen noch trägt.
   ============================================================ */
@media (min-width: 1024px) {
  .ws-hero .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ============================================================
   SCHÄDLINGSBEKÄMPFUNGS-HERO — Foto-Bühne + Glaskachel
   (Marie 2026-09-04: „Heroes-Section von der Seite Schädlings-
   bekämpfung auch bearbeiten. Lehn dich an der Kanal-Service-Seite
   an. Nur such bitte ein passendes Bild dafür raus … irgendwas mit
   Bienenbekämpfung, dann sieht es nicht so eklig aus.")
   ------------------------------------------------------------
   1:1 das freigegebene Kanalservice-Rezept (Runden 3–5): Foto liegt
   über der GANZEN Sektion und läuft nach links/oben/unten ins Dunkel
   aus, Spalten 1,5 : 1, rechts EINE Glaskachel mit dem Live-Ticker,
   Trustpilot links unter der CTA-Reihe.

   BEWUSST EIGENER BLOCK statt einer :is()-Erweiterung der
   .kanal-hero-Regeln: geteilt sind nur Idiom und Werte, NICHT die
   Foto-Geometrie — das Kanal-Motiv ist 16:9 mit dem Roboter am
   rechten Rand, dieses hier 1,6:1 mit der Figur mittig-rechts.
   Eine gemeinsame Regel müsste an genau der Stelle wieder
   auseinanderlaufen, an der es drauf ankommt.
   ============================================================ */
.pest-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
/* VOLLE SEKTIONSHÖHE (Marie 2026-09-04, Nachrunde: „das Bild im
   Hintergrund ist komplett in der Viewpoint-Höhe — man sieht, dass oben
   und unten so ein Rand frei ist").
   Vorher stand das Bild im echten Seitenverhältnis mittig rechts
   (`width: 63%; height: auto`) — GEMESSEN blieben dadurch je nach Breite
   402/333px (1024), 243/183px (1440) und 164/103px (1920) Sektionsfläche
   ohne Bild, was sich als abgesetztes Band statt als Hintergrund liest.
   Jetzt deckt das Bild die Ebene per `object-fit: cover` immer voll ab;
   `object-position` hält die Figur rechts im Bild, unabhängig davon, ob
   der Hero hoch (schmal) oder breit ist — bei schmalen Fenstern
   beschneidet cover seitlich, bei sehr breiten oben/unten. Die Masken
   übernehmen wie zuvor die Kanten. */
/* RANDLOS (Marie 2026-09-07: „Das Bild hat irgendwie einen Rand … soll
   sich in der Höhe komplett über die Hero-Section ausstrecken und immer
   bis ganz rechts zum Rand gehen. Ich sehe eine leichte Kante oben und
   rechts").
   GEMESSENE URSACHE der Kante: das Foto lag mit Deckkraft 0,95 und einer
   oberen/unteren Maskenblende (7 % / 8 %) auf dem Charcoal des Heros
   (#1F2226, Helligkeit ~34) — die Ränder des Assets sind aber nahezu
   schwarz (~15). Oben schien deshalb ein hellerer Charcoal-Streifen
   durch, rechts las sich die dunkle Vignette des Assets als Rahmen.
   Drei Maßnahmen, alle hier: (1) Deckkraft 1 und KEINE vertikale Maske
   mehr — das Foto steht oben und unten bis an die Sektionskante; (2) das
   Bild ist 7 % breiter als die Ebene und läuft nach rechts über die Kante
   hinaus, sodass die eingebackene Rand-Vignette des Assets (rechte
   ~200 px) außerhalb des Viewports liegt; (3) der Sektionsgrund darunter
   ist auf --surface-0 gesetzt (Regeln unten) = der Randton des Fotos, so
   entsteht auch am linken Masken-Auslauf keine Naht. Nur die Maske nach
   LINKS bleibt (Textspalte). */
.pest-hero__photo img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: block;
  width: 107%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  /* Anker OBEN: das Asset ist seit 2026-09-07 so komponiert, dass die
     Kapuze an der Leinwand-Oberkante sitzt (keine Montage-Naht mehr
     darüber). Bei breiten, flachen Heroes (1920/2560) beschneidet cover
     deshalb unten im unscharfen Füllbereich, nie die Kapuze. */
  object-position: 52% 0%;
  opacity: 0;
  animation: pest-photo-in 1.6s var(--ease) 0.1s forwards;
  -webkit-mask-image: linear-gradient(to left, #000 34%, rgba(0, 0, 0, 0.38) 64%, transparent 94%);
          mask-image: linear-gradient(to left, #000 34%, rgba(0, 0, 0, 0.38) 64%, transparent 94%);
}
@keyframes pest-photo-in { to { opacity: 1; } }
/* Sektionsgrund = Randton des Fotos (beide Themes). --surface-0 ist im
   Light-Hero #0E0F11 (Charcoal-Familie) und im Dark-Theme #060A0E — beides
   trifft die nahezu schwarzen Asset-Ränder (RGB ~16/15/14), die vorherige
   Charcoal-Fläche #1F2226 lag sichtbar darüber. Der Light-Zweig braucht
   den html[data-theme]-Präfix, sonst gewinnt die geteilte Regel „Alle
   Heroes = Dunkel-Insel" (0,3,1) per Spezifität — dokumentierte Falle;
   der body.-Präfix hebt beide Regeln auf (0,2,1)/(0,3,2), damit sie
   nicht nur über die Quellreihenfolge gewinnen (Guardian 2026-09-07).
   KEINE Aurora mehr auf diesem Hero (Markup im Page-File entfernt, Marie
   2026-09-07: „blaue Punkte weg"). */
body.page-schaedlingsbekaempfung .pest-hero { background: var(--surface-0); }
html[data-theme="light"] body.page-schaedlingsbekaempfung .pest-hero { background: var(--surface-0); }

/* „unter 20" ist eine Schwelle und zählt nicht hoch; damit die Reihe
   trotzdem als ein Block liest, erbt der statische Wert exakt die
   Typografie von .hero-stat__num (Klasse liegt am selben Element). */
.pest-hero__stats .hero-stat__num--static { display: inline-block; }
/* Kleintext-Vorsatz „unter" vor der Zahl — Typografie wie der Suffix
   (nur ohne Versalien: „unter" ist ein Wort, kein Einheiten-Kürzel). */
.pest-hero__stats .hero-stat__pre {
  display: inline-block;
  align-self: flex-end;
  margin-bottom: 0.32em;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

/* Spalten 1,5 : 1 (Kanal-Runde 4): die Textspalte trägt H1, Lead,
   vier Kennzahlen, CTA-Reihe, Sub-CTA und Score — mit 1,05fr wäre sie
   gequetscht. Der Lead darf dafür breiter laufen. */
@media (min-width: 1024px) {
  .pest-hero .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .pest-hero .hero__lead { max-width: 62ch; }
}

/* Rhythmus zwischen Lead, Kennzahlen und CTA gestrafft — sonst steht
   der Signature-CTA bei 1440×900 auf der Faltkante (Kanal-Präzedenz). */
.page-schaedlingsbekaempfung .hero__lead { margin-bottom: clamp(18px, 2vw, 26px); }
.page-schaedlingsbekaempfung .pest-hero__stats { margin-bottom: clamp(22px, 2.4vw, 30px); }

/* Rechte Spalte: EINE kompakte Glaskachel, mittig in der Spalte */
.pest-hero .pest-hero__media {
  align-self: center;
  justify-self: center;
  width: min(100%, 440px);
}
/* Der ganze Live-Ticker als Milchglas-Kachel: Material, Licht-Saum,
   Feinkorn, Glanzfleck, Kopfzeile, geätzte Zeilen und Icon-Badges sind
   EINE Quelle mit dem Kanalservice-Hero — die Selektor-Listen im Block
   „Die ganze Live-Aktivität als EINE Glaskachel" (weiter oben) tragen
   beide Seiten. Marie 2026-09-18: „visuell genauso wie auf der
   Kanal-Service-Seite … nur der Hintergrund, dieser Effekt von der
   Glaskachel". Zuvor lag hier die Karriere-Rezept-Fassung auf einem zu
   70 % deckenden Dunkelgrund (eine dunkle Karte mit etwas Blur, kein
   Glas). Der Inhalt bleibt pest-spezifisch (Slot ticker-segment). */
.pest-hero .hero-ticker__type {
  /* §1.5-Safety-Net, hier zwingend: „Schädlingsbekämpfung gebucht" ist
     der laengste Ticker-Eintrag im Projekt. Die Basis-Regel setzt auf
     .hero-ticker__type `white-space: nowrap` + Ellipsis (für die schmale
     Ticker-Spalte gedacht) — der Eintrag konnte also nicht brechen und
     setzte die MIN-CONTENT-Breite der Glaskachel. Die einspaltige
     Hero-Grid-Spalte übernimmt diese Breite: bei 320px wurde sie 340px
     breit, die H1-Zeilen liefen über die Sektionskante und wurden vom
     overflow:hidden des .hero LAUTLOS beschnitten (9,6px gemessen —
     KEIN H-Scroll als Warnsignal, nur die §1.6-Glyphenmessung sieht es).
     In der breiten Glaskachel ist Umbruch statt Ellipsis ohnehin das
     bessere Verhalten: der Eintrag wird gelesen, nicht abgeschnitten.
     `anywhere` statt `break-word`, weil nur `anywhere` in die
     min-content-Rechnung eingeht. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Trustpilot wandert per Relocation-Script in den "cta"-Slot links
   unter der CTA-Reihe; die dann leeren Slots verschwinden, damit weder
   eine leere Pille noch ein leerer Abstand bleibt. */
.pest-hero .hero-ticker__trustpilot.is-tp-empty,
.pest-hero .hero-trustpilot-mobile.is-tp-empty { display: none; }
.pest-hero .pest-hero__trust { margin-top: clamp(14px, 1.6vw, 20px); }

/* Start-Choreografie (krepling-Muster wie Kanalservice/Plattform):
   Headline OHNE Verzögerung — sie ist der LCP-Textkandidat. */
.page-schaedlingsbekaempfung .hero__headline      { animation: hub-hero-in 0.55s var(--ease) both; }
.page-schaedlingsbekaempfung .hero__lead          { animation: hub-hero-in 0.85s var(--ease) 0.24s both; }
.page-schaedlingsbekaempfung .pest-hero__stats    { animation: hub-hero-in 0.85s var(--ease) 0.40s both; }
.page-schaedlingsbekaempfung .pest-hero__actions  { animation: hub-hero-in 0.85s var(--ease) 0.54s both; }
.page-schaedlingsbekaempfung .pest-hero__subcta   { animation: hub-hero-in 0.85s var(--ease) 0.66s both; }
.page-schaedlingsbekaempfung .pest-hero__trust    { animation: hub-hero-in 0.85s var(--ease) 0.78s both; }
.page-schaedlingsbekaempfung .pest-hero__media    { animation: hub-hero-in 0.9s var(--ease) 0.72s both; }

@media (max-width: 479px) {
  /* Sehr schmal: Kachel- und Zeilen-Polster zurück, damit die Kachel die
     Grid-Spalte nicht über die Viewport-Breite hinaus aufzieht */
  .pest-hero .hero__media .hero-ticker { padding: 14px; }
  .pest-hero .hero-ticker__item { padding: 10px 11px; }
}

@media (max-width: 1023px) {
  /* Einspaltig: das Foto wird ein BAND im unteren Sektionsteil, hinter
     der Glaskachel.
     GEMESSENER FEHLER, den das behebt: als sektionsweite Ebene (wie im
     zweispaltigen Fall) lief der helle Schutzanzug bei 768px genau
     hinter dem Sub-CTA durch — der Cyan-Link „Mach den Bese-AI
     Potenzial-Check." stand dort mit 1,5:1 auf dem Anzug (Foto y
     450–930, Sub-CTA y 600–622). Deshalb bekommt die EBENE selbst eine
     Höhe und sitzt unten; zusätzlich ist die obere Hälfte des Bandes
     wegmaskiert, sodass die hellen Partien erst deutlich unterhalb des
     Textes anfangen. Eine feste Prozent-Höhe allein reicht nicht — die
     Sektionshöhe schwankt einspaltig um über 100px. */
  .pest-hero__photo {
    inset: auto 0 0 0;
    height: min(46%, 420px);
  }
  /* Das Bild füllt die Bandhöhe und wird seitlich beschnitten, damit die
     Figur (Kapuze + Schleier) erkennbar bleibt statt nur die Handschuhe */
  .pest-hero__photo img {
    /* 2026-09-07 (Guardian-Delta): seit das Asset die Kapuze OBEN trägt,
       blendete die alte Maske (transparent 0–42 % des Bandes) genau die
       Kapuze aus — sichtbar blieb nur der Handschuh. Jetzt beginnt das
       Bild erst bei 26 % der Bandhöhe (unter Sub-CTA + Trustpilot, die
       im oberen Bandviertel liegen) und blendet über seine eigene obere
       Kante weich ein; die Kapuze steht damit im mittleren Band,
       hinter/über der Glaskachel. Kontrast Sub-CTA/Trustpilot bei
       375–900px nachgemessen (s. Chronik). */
    inset: auto 0 0 0;
    top: 26%;
    width: 100%;
    max-width: none;
    height: 74%;
    object-fit: cover;
    object-position: 72% 0%;
    /* Band-Fassung: beide Masken (links + vertikal) verschnitten */
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    -webkit-mask-image:
      linear-gradient(to left, #000 45%, rgba(0, 0, 0, 0.35) 100%),
      linear-gradient(to bottom, transparent 0, #000 34%, #000 100%);
            mask-image:
      linear-gradient(to left, #000 45%, rgba(0, 0, 0, 0.35) 100%),
      linear-gradient(to bottom, transparent 0, #000 34%, #000 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pest-hero__photo img { animation: none; opacity: 1; }
  .page-schaedlingsbekaempfung .hero__headline,
  .page-schaedlingsbekaempfung .hero__lead,
  .page-schaedlingsbekaempfung .pest-hero__stats,
  .page-schaedlingsbekaempfung .pest-hero__actions,
  .page-schaedlingsbekaempfung .pest-hero__subcta,
  .page-schaedlingsbekaempfung .pest-hero__trust,
  .page-schaedlingsbekaempfung .pest-hero__media { animation: none; }
}

/* ============================================================
   HERO-VISUAL — Auftragsgewinnung: „Die Schaltzentrale" (.hv-cent)
   Marie 2026-09-07: rechts eine andere, komplexere Animation — der
   Orb darf Teil davon sein (shx-solutions.com als Idee: Orb in der
   Blende, Satelliten mit Speichen, Lichtbahn ins Gerät). Motiv = das
   Bese-System des Copy-Pakets: Bese-AI-Orb in der Glas-Blende, fünf
   Kanal-Satelliten (Anzeige/Karte/Suche/Website/Magazin) kreisen als
   Glaslinsen mit den Facetten-Icons des CI als Textur, Anfragen laufen als Lichtpakete über
   Speichen hinein, echte Aufträge in Status-Grün in die App-Glyphe,
   ein Cyan-Impuls auf dem Außenring trägt den Wert zurück zu den
   Kanälen. Rendering lebt in scripts.html ([data-hv-cent]) — hier
   nur Layout, Halos + der statische SVG-Fallback. Der Hero ist in
   beiden Themes dunkel (§5a) → keine Light-Fassung; der frühere
   Orb-Block (.hv-orders/.hv-blob) bleibt reaktivierbar stehen.
   ============================================================ */
.hv-cent {
  position: relative;
  min-height: clamp(470px, 47vw, 640px);
}
/* Wrapper trägt die Offsets; das Canvas füllt ihn 100 %/100 % (ein absolut
   positioniertes Canvas mit width:auto nähme seine ATTRIBUT-Breite → Resize-
   Observer-Loop). Symmetrischer Überhang links/rechts + oben: die Satelliten
   dürfen aus der Spalte laufen, der .hero (overflow:hidden) beschneidet
   sauber → kein H-Scroll; links greift die Bühne unter die Textspalte
   (der Text liegt per z-index darüber). */
.hv-cent__stage {
  position: absolute;
  inset: clamp(-90px, -7vw, -30px) clamp(-120px, -9vw, -40px) clamp(-60px, -5vw, -20px) clamp(-120px, -9vw, -40px);
  pointer-events: none;
}
.hv-cent__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hv-cent.is-ready .hv-cent__canvas { opacity: 1; }
.hv-cent.is-fallback .hv-cent__canvas { display: none; }
/* Weiche Scheine hinter Orb und App — Weichzeichner PFLICHT (Halo-
   Banding-Lehre MA-Hero); die top/left-Werte sind der Fallback-Stand,
   die Engine setzt sie inline auf Orb- und App-Anker (ctLayout). */
.hv-cent__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62%, 400px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(var(--glow-rgb), 0.07) 40%,
    transparent 72%);
  filter: blur(44px);
  pointer-events: none;
}
.hv-cent__halo--app {
  left: 74%;
  top: 78%;
  width: min(30%, 190px);
  background: radial-gradient(circle,
    rgba(70, 211, 154, 0.16) 0%,
    rgba(70, 211, 154, 0.05) 45%,
    transparent 72%);
  filter: blur(34px);
}
/* Statischer Fallback (reduced-motion / kein WebGL) */
.hv-cent__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 520px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.hv-cent.is-fallback .hv-cent__fallback { opacity: 1; }
.hv-cent__stop-a { stop-color: var(--em-grad-a); }
.hv-cent__stop-b { stop-color: var(--em-grad-b); }
.hv-cent__ring { opacity: 0.8; }
.hv-cent__ring--outer { opacity: 0.3; }
.hv-cent__spokes { opacity: 0.35; }
/* Orb in der Charcoal-Familie (§5a), Rim über den em-Verlauf */
.hv-cent__orb { fill: #1F2226; }
.hv-cent__orb-rim { opacity: 0.7; }
.hv-cent__fallback-mark { fill: var(--heading-color); }
.hv-cent__sats {
  fill: rgba(var(--glow-rgb), 0.10);
  stroke: var(--silver-blue);
  stroke-width: 1;
  opacity: 0.85;
}
@media (max-width: 1023px) {
  /* Einspaltiger Hero: Bühne kompakter, Überhänge kleiner */
  .hv-cent { min-height: clamp(380px, 64vw, 500px); }
  .hv-cent__stage { inset: clamp(-40px, -5vw, -16px) clamp(-40px, -4vw, -12px) clamp(-30px, -3vw, -10px) clamp(-40px, -4vw, -12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-cent__canvas { transition: none; }
}

/* ============================================================
   HERO-VISUAL — Auftragsgewinnung: „Das Handy" (.hv-handy)
   Marie 2026-09-09: die Startseiten-Skizze „Das Handy" „würde eher
   zur Auftragsgewinnung passen — bau das mal fertig". Rechte Spalte:
   die Bese-App auf dem Black-Titanium-Phone (Mockup .iph__* der
   Website-Seite), dahinter ein Lichthof; der Chip-Canvas liegt HINTER
   dem Gerät — die Ereignisse fliegen von außen heran und verschwinden
   im Phone, der Feed quittiert (DOM). Rendering der Chips in
   scripts.html ([data-hv-handy]); hier Layout, Gerät, Screen-UI.
   Der Hero ist in beiden Themes dunkel (§5a) → feste Geräte-Farben
   (Geräte-Ausnahme wie .iph__* und .bsys-app — Achtung: die Zeichenfolge
   Stern-Schrägstrich in einem Kommentar schließt ihn; ein ".iph*" direkt
   vor einem "/" hatte hier die ganze Basisregel gefressen),
   Screen-Flächen = Surface-
   Tokens, Status-Grün #46d39a = §5a-Kodierung „echter Auftrag".
   Löst .hv-cent ab (bleibt reaktivierbar). Silver-Blue-Alphas stehen
   als rgba(179,204,223,…) = exakter CI-Wert (kein Tripel-Token).
   ============================================================ */
.hv-handy {
  position: relative;
  min-height: clamp(470px, 47vw, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Der Text liegt über dem Bühnen-Überhang (MA-Muster) */
.page-auftragsgewinnung .hero__text { position: relative; z-index: 2; }
/* Bühne hinter dem Gerät. Die Chips kommen von außerhalb der Spalte, der
   .hero (overflow:hidden) beschneidet → kein H-Scroll.
   ⚠ DIE WERTE HIER SIND NUR DER DEFAULT vor der ersten Messung (und der
   No-JS-Zustand — ohne JS gibt es gar keine Chips, dann ist die Bühne
   unsichtbar). Maßgeblich sind die INLINE-Werte, die `hdStretchStage()` in
   scripts.html bei Init und Resize setzt: rechte Kante exakt auf die
   FENSTERKANTE, oben/unten exakt auf die HERO-Kanten.
   Warum gemessen statt gerechnet (Marie 2026-09-11: „die Animationen sollen
   komplett bis zum Rand gehen und nicht so abgeschnitten sein"): der feste
   Überhang von max. 120px reichte nur bis ~1700px Fensterbreite. Auf Maries
   1864er-Fenster endete die Bühne 74px VOR der Fensterkante — dort wurden
   die einfliegenden Chips an einer unsichtbaren Kante mitten im Bild
   abgeschnitten (gemessen; nach unten fehlten 36px, nach oben 6px). Der
   nötige Überhang ist genau der Seitenrand des Containers und wächst mit
   dem Fenster; eine CSS-Formel müsste `--max-width` und `--container-pad`
   nachbauen und bei jeder Container-Änderung mitgezogen werden. Die
   Messung gegen die HERO-Kante (an der ohnehin geclippt wird) gilt dagegen
   immer. Links bleibt der kleine Überhang — dort steht der Text. */
.hv-handy__stage {
  position: absolute;
  inset: clamp(-90px, -7vw, -30px) clamp(-120px, -9vw, -40px) clamp(-60px, -5vw, -20px) clamp(-40px, -4vw, -16px);
  z-index: 0;
  pointer-events: none;
}
.hv-handy__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hv-handy.is-ready .hv-handy__canvas { opacity: 1; }
.hv-handy.is-fallback .hv-handy__stage { display: none; }
/* Lichthof hinter dem Gerät — Weichzeichner PFLICHT (Halo-Banding-Lehre);
   die Engine pulst die Deckkraft bei jeder Ankunft */
.hv-handy__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78%, 420px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -48%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--glow-rgb), 0.42) 0%,
    rgba(179, 204, 223, 0.16) 38%,
    rgba(var(--glow-rgb), 0) 70%);
  filter: blur(42px);
  opacity: 0.55;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
/* Gerät: Einblendung beim Laden (CSS-only, endet immer sichtbar), danach
   sanftes Schweben — beide auf dem Wrapper; die Zeiger-Kippung sitzt auf
   dem Gerät selbst (getrennte Transform-Ketten, §0a-Kollisions-Lehre) */
.hv-handy__float {
  position: relative;
  z-index: 1;
  animation:
    hv-handy-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both,
    hv-handy-float 7s ease-in-out 1.6s infinite;
}
@keyframes hv-handy-in {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hv-handy-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1); }
}
.hv-handy__device {
  position: relative;
  width: clamp(200px, 19vw, 262px);
  --px: 0;
  --py: 0;
  transform: perspective(1400px) rotateY(calc(-11deg + var(--px) * 7deg)) rotateX(calc(var(--py) * -4deg));
  transform-style: preserve-3d;
  filter: drop-shadow(0 34px 38px rgba(var(--shadow-rgb), 0.5));
  transition: transform 0.25s ease-out;
}
/* Screen-UI (Demo-Inhalt) — Flächen aus den Surface-Tokens, Text Weiß /
   Silver Blue, Akzent Cyan; alles feste Geräte-Farben (Dunkel-Insel) */
.hv-handy__screen {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 1384;
  border-radius: clamp(15px, 1.9vw, 21px);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 55%, var(--surface-0) 100%);
  position: relative;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--white);
  padding: 0 10px;
  box-sizing: border-box;
}
.hv-handy__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 6px 6px 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
}
.hv-handy__sig { display: inline-flex; gap: 2px; align-items: flex-end; }
.hv-handy__sig i { display: block; width: 3px; background: var(--white); border-radius: 1px; }
.hv-handy__sig i:nth-child(1) { height: 4px; }
.hv-handy__sig i:nth-child(2) { height: 6px; }
.hv-handy__sig i:nth-child(3) { height: 8px; }
.hv-handy__sig i:nth-child(4) { height: 10px; }
.hv-handy__head { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.hv-handy__mark { width: 18px; height: 20px; fill: var(--white); color: var(--white); }
.hv-handy__title { font-size: 12px; font-weight: 700; line-height: 1; }
.hv-handy__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver-blue);
}
.hv-handy__live i { width: 6px; height: 6px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 8px #46d39a; animation: hv-handy-blink 1.6s ease-in-out infinite; }
@keyframes hv-handy-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hv-handy__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.hv-handy__kpis span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 7px;
  border-radius: 10px;
  background: rgba(179, 204, 223, 0.07);
  border: 1px solid rgba(179, 204, 223, 0.12);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  color: var(--silver-blue);
}
.hv-handy__kpis b { font-size: 15px; font-weight: 700; line-height: 1; color: var(--white); }
.hv-handy__label { margin-top: 14px; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver-blue); }
.hv-handy__label span { font-weight: 500; opacity: 0.6; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.hv-handy__feed { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-handy__item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(179, 204, 223, 0.1);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hv-handy__item.is-in { opacity: 1; transform: none; }
.hv-handy__ico { width: 26px; height: 26px; border-radius: 8px; background: rgba(var(--glow-rgb), 0.12); display: grid; place-items: center; }
.hv-handy__ico svg { width: 15px; height: 15px; display: block; }
.hv-handy__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-handy__txt b { font-size: 10px; font-weight: 700; line-height: 1.2; }
.hv-handy__txt i { font-size: 8.5px; font-weight: 500; line-height: 1.25; font-style: normal; color: var(--silver-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-handy__ai { font-size: 8px; font-weight: 600; line-height: 1; font-style: normal; color: rgba(179, 204, 223, 0.65); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-handy__ai::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
.hv-handy__ai.is-ok { color: #46d39a; }
.hv-handy__ai.is-cb { color: var(--silver-blue); }
.hv-handy__time { font-size: 8px; font-weight: 500; line-height: 1; color: rgba(179, 204, 223, 0.6); padding-top: 2px; white-space: nowrap; }
.hv-handy__tabs { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 14px; }
.hv-handy__tabs i { width: 22px; height: 4px; border-radius: 2px; background: rgba(179, 204, 223, 0.18); }
.hv-handy__tabs i.is-on { background: var(--accent-hover); }
/* Screen-Blitz bei jeder Ankunft (Klasse setzt die Engine neu) */
.hv-handy__flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%); opacity: 0; pointer-events: none; }
.hv-handy__flash.is-on { animation: hv-handy-flash 0.6s ease-out; }
@keyframes hv-handy-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 1023px) {
  /* Einspaltig: Gerät unter dem Text, Bühne kompakter */
  .hv-handy { min-height: clamp(430px, 96vw, 560px); }
  .hv-handy__device { width: clamp(200px, 50vw, 250px); }
  /* Wie die Basisregel nur DEFAULT/No-JS: `hdStretchStage()` überschreibt
     top/right/bottom zur Laufzeit inline (links bleibt von hier). */
  .hv-handy__stage { inset: clamp(-40px, -5vw, -16px) clamp(-40px, -4vw, -12px) clamp(-30px, -3vw, -10px) clamp(-40px, -4vw, -12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-handy__float, .hv-handy__live i, .hv-handy__flash.is-on { animation: none; }
  .hv-handy__canvas, .hv-handy__device, .hv-handy__item { transition: none; }
}

/* ============================================================
   FAQ — „Frag die KI" (Partial faq-ai.html, seit 2026-09-10 in der
   Intro-Spalte ALLER elf FAQ-Sektionen; Marie: „so einen AI-Trigger
   mit Claude und ChatGPT einbauen", Vorbild talenthafen-FAQ).
   Runde 2 (Marie: „Zu viel Text drum herum. Es soll einfach nur eine
   Ergänzung sein zu dem Button"): nur noch die zwei Deep-Link-Pillen
   „Frag ChatGPT" / „Frag Claude" — keine Überschrift, keine Erklär-
   zeile, keine Hairline. Runde 3 (Marie: „den Button ‚Kontaktiere uns'
   wegmachen und nur die beiden Buttons"): die Pillen stehen jetzt AN
   DER STELLE des Signature-CTA, der aus allen elf FAQ-Intros raus ist. Alles
   token-basiert → auf Weiß, MIST-Grau und Dunkel-Insel derselbe Bau;
   einzige feste Farbe ist der Claude-Funke im Marken-Terracotta (§5a,
   Präzedenz Karriere-AI-Kachel). Bewusst KEIN backdrop-filter auf den
   Pillen: Hover-Transform + Blur = Chrome-Flicker (§5a).
   ============================================================ */
.faq-ai {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Die Pillen stehen an der Stelle des früheren Signature-CTA (seit
     Runde 3 raus) und übernehmen dessen Abstand zum Body-Text. */
  margin-top: clamp(8px, 1.2vw, 14px);
}

.faq-ai__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;                   /* = Höhe des Signature-CTA daneben */
  padding: 0 16px 0 14px;
  border-radius: 9999px;              /* Pill wie alle Buttons (§1.3) */
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--heading-color);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.10);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease-out,
    box-shadow 0.3s ease-out;
}

.faq-ai__link:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--glow-rgb), 0.45);
  box-shadow: 0 10px 22px -12px rgba(var(--shadow-rgb), 0.45);
}

.faq-ai__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.faq-ai__logo {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ChatGPT-Blüte als offizielle Monochrom-Variante in der Textfarbe
   (Tinte hell / Weiß dunkel — OpenAI führt das Zeichen in Schwarz UND
   Weiß; das Rondell der Karriere-Kachel entfällt in der Pille), der
   Claude-Funke theme-fest im Marken-Terracotta — Pfade 1:1 aus der
   Karriere-AI-Kachel (§5a). Der Strich-Pfeil (.faq-ai__ext) neben dem
   Marken-Logo ist ein Externlink-Chip, keine CI-Icon-Gruppe → bewusste
   Ausnahme von CI-Regel 13 „Stroke/Filled nicht mischen". */
.faq-ai__link--claude .faq-ai__logo { color: #D77655; }

/* Die Zeichen „wachen auf": Blüte dreht eine Blattstufe, Funke dreht
   einen Zacken weiter — der eine Merk-Moment des Blocks. */
.faq-ai__link--gpt:hover .faq-ai__logo    { transform: rotate(60deg); }
.faq-ai__link--claude:hover .faq-ai__logo { transform: rotate(45deg) scale(1.08); }

.faq-ai__ext {
  width: 14px;
  height: 14px;
  margin-left: -2px;
  opacity: 0.55;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.faq-ai__link:hover .faq-ai__ext {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Schmale Phones: beide Pillen nebeneinander (bei 375px ist die Spalte
   343px breit — mit 14px/16px-Padding brachen sie untereinander um). */
@media (max-width: 420px) {
  .faq-ai { gap: 8px; }
  .faq-ai__link { padding: 0 12px 0 11px; font-size: 13.5px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-ai__link, .faq-ai__logo, .faq-ai__ext { transition: none; }
  .faq-ai__link:hover,
  .faq-ai__link:hover .faq-ai__logo,
  .faq-ai__link:hover .faq-ai__ext { transform: none; }
}

/* ============================================================
   ÜBER UNS (Startseite) — Editorial-Raster (2026-09-10)
   Marie: „zum Rand links bei dem Namen 0 Pixel Abstand … vielleicht
   macht es Sinn, die Namen einfach mittig ins Bild zu setzen" +
   „Da gefällt mir der Text so noch nicht ganz. Das sieht nicht
   harmonisch aus … die Texte dann doch wieder näher zusammenrücken.
   Boxgröße: in der Breite verringern." — NUR Startseite (.page-home);
   Rollout auf die fünf anderen Über-uns-Seiten auf Zuruf (= .page-home-
   Präfix entfernen + Markup von section-12-ueber-uns.html nachziehen).
   Seit 2026-09-19 zusätzlich /leistungen/mitarbeitergewinnung/ (Marie:
   „Über uns auf den neuen Stand, wie auf der Startseite") — die Seite bindet
   section-12-ueber-uns-home.html ein, alle Selektoren dieses Blocks laufen
   deshalb über :is(.page-home, .page-mitarbeitergewinnung). Dort ist .about
   eine Dunkel-Insel (Rhythmus Schlussrunde): die Glas-Tokens des CTA lösen
   sich über das Insel-Paket auf, das Raster ist tonunabhängig.
   Seit demselben Tag laufen auch /leistungen/auftragsgewinnung/ und
   /branchen/schaedlingsbekaempfung/ über diese Regeln — :is() trägt heute
   .page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung,
   .page-schaedlingsbekaempfung (Schädlingsbekämpfung: ebenfalls Dunkel-Insel).

   Befund vorher (gemessen 1864px): Porträt 400×533 links, die drei
   kurzen Absätze als zwei Zeitungsspalten über 920px, Textblock 383px
   hoch → 150px Leerraum unter dem Text, CTA weit links unter Spalte 1;
   Fries-Namen 6px vom Streifenrand (liest sich als 0).

   Rezept: EINE zentrierte Box (--about-box) mit EINEM Spaltenraster
   für beide Blöcke — Ankerspalte 400px (Block A Porträt, Block B Titel
   + CTA), rechts die Texte EINSPALTIG auf einer gemeinsamen Text-Achse
   (Block A: Kicker „Geschäftsführer" + Name, drei Absätze, Signature-
   CTA; Block B: die zwei Absätze). Damit liegen die Text-Linken beider
   Blöcke auf einer Linie, Porträt und Textblock werden annähernd
   gleich hoch. Der Fries bleibt Full-Bleed (calc(50% - 50vw) rechnet
   von der zentrierten Box aus), die Namen stehen mittig mit
   Innenabstand.
      NACHTRAG 19.09.2026 (Parallel-Session AG): dieselben Regeln gelten auch für
   /leistungen/auftragsgewinnung/ (Marie: „die ‚Über uns‘-Section mit den Mitarbeitern …
   noch alt … aktualisieren") — Markup dort ebenfalls section-12-ueber-uns-home.html,
   das Band bleibt das MIST-Grau der Seite (Rhythmus erst in der Schlussrunde).
   ============================================================ */
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about { --about-box: 1000px; }
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about__stack {
  max-width: var(--about-box);
  gap: clamp(48px, 5.6vw, 80px);
}

/* ---- Block A: Porträt | Story ---- */
@media (min-width: 1024px) {
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-lead {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: clamp(40px, 4.2vw, 60px);
  }
}
/* Story EINSPALTIG — überschreibt die Zeitungsspalten der geteilten
   Fassung (≥1280px column-count: 2); die Spalte ist hier ~540px = 54ch. */
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-lead__text {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
  max-width: none;
  column-count: auto;
}
@media (min-width: 1280px) {
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-lead__text .about-lead__body { margin: 0; }
}
/* Der erste Absatz ist die These — eine Stufe kräftiger (Tinte statt
   80 % Tinte), gleiche Größe (Marie: Fließtext einheitlich 16px). */
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-lead__text .about-lead__body:first-child { color: var(--text-100); }

/* Kicker + Name: die Rolle als Versal-Label, der Name als Überschrift
   der Textspalte — gleiche Größe wie der Block-B-Titel (Rhythmus). */
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-lead__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.9vw, 12px);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1.02;
}
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-lead__kicker {
  font-family: var(--font-ui);
  /* 12px statt der 11px der Eyebrow-Pille: ohne Pille braucht das nackte
     Label eine Stufe mehr — die Referenzen setzen Rollen-Labels in 14–16px
     (Recherche 2026-09-10), 12px bleibt im Versal-Idiom des Projekts. */
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-200);
}
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-lead__cta { margin-top: clamp(14px, 1.6vw, 22px); }

/* ---- Block B: Titel + CTA | Copy ---- */
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__title {
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1.02;
}
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
}
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__body { max-width: none; }
/* 62ch ist eine bewusste ÜBERGANGSSTUFE für 900–1023px (gestapelter Kopf,
   Copy in voller Box-Breite = bis 960px): ab 1024px hebt die Grid-Regel
   unten den Deckel wieder auf, dort begrenzt die Spalte (Guardian). */
@media (min-width: 900px) {
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__copy { max-width: 62ch; }
}
@media (min-width: 1024px) {
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__head {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "title copy" "cta copy";
    column-gap: clamp(40px, 4.2vw, 60px);
    row-gap: clamp(22px, 2.4vw, 32px);
    align-items: start;
  }
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__title { grid-area: title; }
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__copy { grid-area: copy; max-width: none; }
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__cta { grid-area: cta; margin-top: 0; }
}

/* Team-Link = CI-OUTLINE (Sektion 08, sekundäre Aktion) in den 04a-
   Light-Glas-Tokens. Marie 2026-09-10 zur Zwischenfassung (transparente
   Umriss-Pille mit Tinte-Rand + Chevron): „Button-Design doch nicht
   CI-konform" — richtig, das war keine der fünf CI-Varianten. Die
   Basis-Regel .btn-outline trägt die Dark-Werte der CI (weißer Reflex +
   Navy-Layer), die geteilte Light-Regel (~Z. 27170) lässt diesen Navy-
   Layer stehen → auf dem weißen Band ein grauer, deaktiviert wirkender
   Knopf. 04a sagt für Glas im Light Mode: --glass-bg/--glass-border-
   Tokens, Blur identisch zum Dark Mode, Farben nur über Tokens — genau
   das hier; Reflex/Insets/Schatten/Hover-Lift kommen unverändert aus
   der Basis (Button-Regeln: Tiefe nur über neutrale Drop-Shadows). */
html[data-theme="light"] :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__cta {
  background: var(--glass-bg);
  color: var(--text-100);
  border-color: var(--glass-border);
}
html[data-theme="light"] :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__cta:hover {
  background: var(--glass-bg-hover);
  color: var(--text-100);
  border-color: var(--glass-border-hover);
}
html[data-theme="light"] :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .about-team__cta:active {
  background: var(--glass-bg-hover);
}

/* ---- Fries: Namen mittig ----
   Vorher 6px vom Streifenrand (Fries-Modus) — Marie: „klebt so ganz am
   Rand". Mittig + Innenabstand; gerechnet gegen den längsten Namen
   („Naemi Julia Nölle" ≈ 89px bei 10px/1180px, 109px bei 12,2px/1440px,
   125px bei 14px/1864px) auf 131/160/207px breiten Streifen. Die
   Funktion erscheint im Fries-Modus weiter erst auf dem geöffneten
   Streifen — dann ebenfalls mittig. */
:is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .crew__id {
  align-items: center;
  text-align: center;
  padding-inline: clamp(12px, 1vw, 18px);
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  /* Eine Stufe größer als die geteilte Fassung (0,85vw/13px): die Referenzen
     beschriften Foto-Streifen mit 14–20px (Recherche 2026-09-10). Gerechnet
     gegen „Naemi Julia Nölle": 100px bei 1180 (Streifen 131, frei 107),
     122px bei 1440 (160/131), 134px ab 1580 (≥187/151) — kein Wortbruch. */
  :is(.page-home, .page-mitarbeitergewinnung, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .crew__name { font-size: clamp(11px, 0.95vw, 15px); }
}


/* ============================================================
   BESE-AI · „Was Bese-AI für dich macht" als RAD — NUR Startseite (2026-09-10)

   Marie (mit dem 21st.dev-Baustein „Radial Orbital Timeline" als Vorlage):
   „bei dem, was die Bese-AI für dich macht, so vier Kacheln — vielleicht
   könnte man das in so einem Rad darstellen, dass es komprimierter ist und
   nicht zu viele Animationen auf einmal laufen … eine kurze Beschreibung,
   sodass es aufploppt … cool, dass die Kacheln weiß sind." Vanilla-Port
   (§1.7: Motion-Idee übernommen, Farben/Tokens CI). Markup:
   bese-ai-faehigkeiten-home.html, Engine [data-ba-orbit] in scripts.html.

   · Rad links (Ring + gestrichelter Tick-Ring + ein wandernder Lichtstrich,
     Bese-AI-Kern in der Mitte, vier Glas-Knoten mit Facetten-Icons), rechts
     die WEISSE Kachel = die unveränderte Geräte-Szene + Nummer/Titel/Satz.
     Mobil (<960px): Rad oben, aktiver Knoten unten, Kachel darunter.
   · Drehung: Knoten i sitzt bei (--bao-base + i·--bao-arcstep + --bao-rot) auf dem
     Radius; --bao-rot ist per @property registriert und wird auf der Bühne
     transitioniert — alle Kinder lesen den interpolierten Wert, die Knoten
     laufen auf dem KREIS (das React-Original transitioniert x/y je Knoten
     → Sehnen). Knoten-Inhalt gegenrotiert (Gründer-Kosmos-Rezept) = bleibt
     aufrecht. --i je Knoten als Daten-Träger im style-Attribut (§5a).
   · Es läuft nur die AKTIVE Szene (.is-live nur auf dem aktiven Panel — die
     Szenen-Regeln von .ba-skill.is-live greifen unverändert); die vier
     Panels liegen übereinander (grid-area 1/1) → Kachelhöhe konstant, kein
     Layout-Shift beim Wechsel (Marie-Regel für Demo-Schleifen).
   · Kein backdrop-filter auf den Knoten (sie transformieren dauernd —
     §5a-Flicker-Regel), Glas über Verlauf + Insets (CI 07/09). Blau nur als
     Licht (Lichtstrich, Halo, Hairline, Nummer), keine blaue Fläche.
   · Reveal über den generischen [data-reveal]-Hook: Knoten wachsen aus dem
     Kern heraus (scale auf dem 0×0-Anker = Ursprung ist die Bühnenmitte),
     Ring/Kachel blenden nach.
   ============================================================ */
@property --bao-rot { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --bao-arc { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --bao-step { syntax: '<length>'; inherits: true; initial-value: 400px; }   /* registriert, damit die Engine den vh-Wert als Pixel lesen kann */

/* Runde 3 (2026-09-11, Marie mit uberall.com/de als Vorlage — „wie sich per Scroll-Effekt
   diese verschiedenen Kacheln öffnen, aber auch per Klick"): der Block liegt in einem TRACK.
   Auf breiten Fenstern pinnt die Engine den Block (sticky, Klasse is-scroll am Track) und gibt
   dem Track unten drei Schritte Scroll-Weg (padding, kollabiert nicht) — der Scroll dreht das
   Rad Segment für Segment weiter, die Kacheln öffnen nacheinander, der Ring zeichnet sich Segment für
   Segment (uberall: drawSVG je Kachel), noch nicht erreichte Knoten stehen gedimmt (uberall:
   Icons blenden erst mit ihrer Kachel ein), am Ende schließt sich der Ring. uberall pinnt
   6300 px für vier Kacheln; hier sind es --bao-steps Schritte à --bao-step (~45vh) = Knotenzahl − 1. Ohne Pin (schmal,
   zu hoch, reduced-motion) läuft der Dial mit Auto-Takt aus Runde 1. */
.ba-orbit-track { --bao-steps: 2; --bao-step: clamp(320px, 45vh, 520px); margin-top: clamp(64px, 8vw, 124px); padding-bottom: clamp(24px, 4vw, 60px); }   /* --bao-step hier, damit Block UND Track denselben Wert lesen (der Block erbt) */
/* Der Scroll-Weg muss INHALT des Tracks sein, kein Padding: ein sticky-Element bleibt nur innerhalb der
   Content-Box seines Containers — mit Padding als Weg hatte der Block gemessen null Spielraum und scrollte
   einfach mit (Runde 3, Lehre). Deshalb ein leerer Nachlauf als ::after. */
.ba-orbit-track.is-scroll::after { content: ""; display: block; height: calc(var(--bao-steps, 2) * var(--bao-step)); }
.ba-orbit-track.is-scroll .ba-skills--orbit { position: sticky; top: var(--bao-pin-top, 97px); }
.ba-orbit-track.is-scroll .ba-orbit__stage { transition: none; }   /* Scrub: die Engine glättet selbst (Lerp), keine CSS-Transition hinterher */

.ba-skills--orbit {
  /* Runde 2 (Marie 2026-09-11: „mehr Abstand nach oben und unten, damit das alles nicht so
     gequetscht aussieht"): gemessen standen Konsole→Titel 72 px, Titel→Rad 28 px, Karte→Schlussblock
     66 px — jetzt ~124 / 56 / 128 px bei 1440 (der Schlussblock bringt 68 px eigenes margin-top mit) */
  margin: 0; padding-bottom: 0;             /* Runde 3: die Abstände (oben margin, unten padding statt kollabierendem margin) trägt der Track, ebenso --bao-step (Scroll-Weg je Segment) */
  --bao-accent: #2C6EA9;                  /* Markenblau = der EINE Akzent der Szenen (Ring des aktiven Knotens, Punkt der Hairline) */
  --bao-r: clamp(150px, 13.5vw, 210px);   /* Ring-Radius */
  --bao-n: 56px;                          /* Knoten-Durchmesser */
  --bao-hub: 96px;                        /* Kern-Durchmesser */
  --bao-pad: 44px;                        /* Raum für die Labels neben dem Ring */
  --bao-gap: clamp(40px, 4.5vw, 72px);    /* Rad → Kachel = Länge der Hairline */
  --bao-base: 0deg;                       /* Anschlag des aktiven Knotens: 0deg = rechts, mobil 90deg = unten */
  --bao-arcstep: 120deg;                  /* Winkel je Knoten = 360° / Knotenzahl. 3 Knoten seit Go-Live Phase 3 (die Fähigkeit „Nimmt Anrufe selbst an“ ist raus, bis der Anrufretter live ist) — bei 4 Knoten wieder 90deg, und --bao-steps unten auf 3. Die JS-Engine zählt die Knoten selbst, nur das CSS braucht die Zahl. */
  --bao-turn: 0.8s;
}
.ba-skills--orbit .ba-skills__head { text-align: center; margin-bottom: clamp(32px, 4.2vw, 60px); }   /* Runde 2: „die Überschrift … vielleicht mittig" */
.ba-skills--orbit .ba-skills__title { font-size: clamp(1.7rem, 2.7vw, 2.4rem); margin: 0 auto; max-width: 22ch; }
.ba-orbit {
  display: grid; grid-template-columns: auto minmax(0, 680px); column-gap: var(--bao-gap);
  align-items: center; justify-content: center;
}
.ba-orbit__wheel { padding: 12px var(--bao-pad) 36px; }
.ba-orbit__stage {
  --bao-rot: 0deg;                        /* No-@property-Fallback: ohne Wert wäre rotate(calc(…)) ungültig */
  position: relative; margin: 0 auto;
  width: calc(2 * var(--bao-r) + var(--bao-n)); height: calc(2 * var(--bao-r) + var(--bao-n));
  transition: --bao-rot var(--bao-turn) var(--ease-morph);
}

/* Ring, Ticks, Lichtstrich */
.ba-orbit__ring, .ba-orbit__ticks, .ba-orbit__sweep, .ba-orbit__arc { position: absolute; border-radius: 50%; pointer-events: none; }
.ba-orbit__ring { inset: calc(var(--bao-n) / 2); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 70px rgba(var(--glow-rgb), 0.05); }
.ba-orbit__ticks { inset: calc(var(--bao-n) / 2 - 18px); border: 1px dashed rgba(255, 255, 255, 0.10); animation: bao-ticks 140s linear infinite; }
/* Bogen: zeichnet sich vom ersten Knoten bis zum Anschlag (Scroll-Modus = Scroll-Fortschritt, Dial = aktiver Knoten);
   Start = Position von Knoten 0 im Rad (conic misst ab 12 Uhr, unser 0° liegt bei 3 Uhr → +90deg) */
.ba-orbit__arc {
  inset: calc(var(--bao-n) / 2 - 1px); --bao-arc: 0deg;
  background: conic-gradient(from calc(var(--bao-base) + var(--bao-rot) + 90deg), rgba(var(--glow-rgb), 0.9) 0deg, rgba(var(--glow-rgb), 0.9) var(--bao-arc), transparent var(--bao-arc), transparent 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3.5px), #000 calc(100% - 2.5px), #000 calc(100% - 0.5px), transparent 100%);
          mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3.5px), #000 calc(100% - 2.5px), #000 calc(100% - 0.5px), transparent 100%);
  transition: --bao-arc var(--bao-turn) var(--ease-morph);
}
.ba-orbit-track.is-scroll .ba-orbit__arc { transition: none; }
.ba-skills--orbit.is-complete .ba-orbit__ring { border-color: rgba(var(--glow-rgb), 0.55); }   /* Finale: der Ring ist geschlossen */
/* Noch nicht erreichte Knoten (Scroll-Modus) stehen gedimmt — uberall blendet die Icons erst mit ihrer Kachel ein */
.ba-orbit__node.is-pending .ba-orbit__btn { opacity: 0.72; }   /* Guardian R3: die Knoten bleiben klickbar → Label mind. 4,5:1 in BEIDEN Themes (0.42 maß 2,4:1; 0.7 im Dark-Theme 4,49:1 → 0.72) */
.ba-orbit__sweep {
  inset: calc(var(--bao-n) / 2 - 1px);
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(var(--glow-rgb), 0) 72%, rgba(var(--glow-rgb), 0.95) 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3.5px), #000 calc(100% - 2.5px), #000 calc(100% - 0.5px), transparent 100%);
          mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3.5px), #000 calc(100% - 2.5px), #000 calc(100% - 0.5px), transparent 100%);
  animation: bao-sweep 7s linear infinite;
}

/* Kern */
.ba-orbit__hub { position: absolute; left: 50%; top: 50%; width: var(--bao-hub); height: var(--bao-hub); transform: translate(-50%, -50%); pointer-events: none; }
.ba-orbit__hub > * { position: absolute; inset: 0; border-radius: 50%; }
.ba-orbit__halo { inset: -26px; background: radial-gradient(circle, rgba(var(--glow-rgb), 0.5), rgba(var(--glow-rgb), 0) 68%); filter: blur(10px); opacity: 0.6; animation: bao-breathe 6s ease-in-out infinite; }
.ba-orbit__pulse { border: 1.5px solid rgba(var(--glow-rgb), 0.9); opacity: 0; transform: scale(0.8); }
.ba-orbit__stage.is-pulsing .ba-orbit__pulse { animation: bao-pulse 1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.ba-orbit__core {
  inset: 8px; display: grid; place-items: center;
  /* Runde 2: auch der Kern deckend weiß (ein Kreis mit Icon wie die vier Knoten) — die dunkle
     Glas-Scheibe der Runde 1 (#1B2A38 → surface-1, Rezept .ai-core__disc) ist eine Zeile zurück */
  background: linear-gradient(180deg, #FFFFFF, #EEF1F3);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 3px rgba(16, 24, 32, 0.08), 0 18px 40px -12px rgba(var(--shadow-rgb), 0.7), 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.ba-orbit__core svg { width: 44px; height: 44px; }   /* CI Sektion 13 R9: 44–48 px = Kachel-Größe, nie umgefärbt */

/* Knoten (Tabs) */
.ba-orbit__nodes { position: absolute; inset: 0; }
.ba-orbit__node {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  --a: calc(var(--bao-base) + var(--i, 0) * var(--bao-arcstep) + var(--bao-rot));
  transform: rotate(var(--a)) translateX(var(--bao-r));
}
.ba-orbit__btn {
  position: absolute; left: 0; top: 0; width: var(--bao-n); height: var(--bao-n); margin: 0; padding: 0;
  border-radius: 50%; cursor: pointer; font: inherit; color: var(--white); -webkit-tap-highlight-color: transparent;
  /* Ursprung = der Anker (0 0): translate zieht die Box mittig auf den Anker, rotate dreht sie um ihn
     (= um ihre Mitte), und die scale-Property des aktiven Zustands skaliert ebenfalls um den Anker —
     mit dem Standard-Ursprung (Boxmitte) wanderte der aktive Knoten gemessen 4 px nach oben links */
  transform-origin: 0 0;
  transform: rotate(calc(-1 * var(--a))) translate(-50%, -50%);
  /* Runde 2: deckende WEISSE Scheiben (dieselbe 04a-Rampe wie die Kachel, Weiß → Off-White) statt Glas —
     die Facetten-Icons sind für Weiß gezeichnet (CI Sektion 13 R10), Blau bleibt Akzent (Ring des aktiven) */
  background: linear-gradient(180deg, #FFFFFF, #EEF1F3);
  border: 1px solid #FFFFFF;
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 1px rgba(16, 24, 32, 0.10), 0 12px 26px -10px rgba(var(--shadow-rgb), 0.7);
  display: grid; place-items: center; isolation: isolate;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), scale 0.45s var(--ease-morph), opacity 0.4s var(--ease);
}
.ba-orbit__btn::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.45), rgba(var(--glow-rgb), 0) 68%);
  filter: blur(6px); opacity: 0; transition: opacity 0.5s var(--ease);
}
.ba-orbit__fx { width: 30px; height: 30px; }   /* Runde 2/Guardian: obere Kante der Kapitel-Zeichen-Stufe (R9: 24–30 px) — die helle Facette (Silver Blue → Cyan) misst auf Weiß 1,7–2,7:1, Größe hilft der Lesbarkeit, Umfärben verbietet R10 */
.ba-orbit__label {
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-200);
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.ba-orbit__btn:hover { background: #FFFFFF; box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 1px rgba(16, 24, 32, 0.10), 0 0 0 4px rgba(var(--glow-rgb), 0.16), 0 14px 30px -10px rgba(var(--shadow-rgb), 0.7); }
.ba-orbit__btn:focus-visible { outline: 2px solid var(--focus-ring, var(--accent-hover)); outline-offset: 4px; }
.ba-orbit__btn[aria-selected="true"] {
  background: #FFFFFF;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 2.5px var(--bao-accent), 0 0 0 8px rgba(var(--glow-rgb), 0.14), 0 16px 34px -10px rgba(var(--shadow-rgb), 0.75);
  scale: 1.14;
}
.ba-orbit__btn[aria-selected="true"]::before { opacity: 1; }
.ba-orbit__btn[aria-selected="true"] .ba-orbit__label { color: var(--white); }

/* Hairline vom aktiven Knoten zur Kachel (sitzt am Bühnenrand = Außenkante des 3-Uhr-Knotens) */
.ba-orbit__link {
  position: absolute; left: 100%; top: 50%; width: calc(var(--bao-pad) + var(--bao-gap)); height: 1px; margin-top: -0.5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.9), rgba(var(--glow-rgb), 0.35)); transform-origin: 0 50%;
}
.ba-orbit__link::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--bao-accent); box-shadow: 0 0 0 2px #FFFFFF, 0 0 10px rgba(var(--glow-rgb), 0.9);
}

/* Kachel: vier Panels übereinander, nur das aktive sichtbar */
.ba-orbit__card { position: relative; display: grid; border-radius: var(--radius-lg); box-shadow: 0 34px 60px -26px rgba(var(--shadow-rgb), 0.75), 0 12px 24px -16px rgba(var(--shadow-rgb), 0.5); }
.ba-orbit__card .ba-skill { --sk-phase: 0s; }   /* jede Aktivierung startet die Szene bei 0 — die nth-child-Phasen der Vier-Karten-Fassung gelten hier nicht */
.ba-orbit__panel {
  grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.ba-orbit__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ba-orbit__panel:focus-visible { outline: 2px solid var(--focus-ring, var(--accent-hover)); outline-offset: 6px; border-radius: var(--radius-lg); }   /* Tabpanel ist fokussierbar (Guardian 2026-09-10) */
.ba-orbit__panel .ba-skill__scene { border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: none; flex: 0 0 auto; }
.ba-orbit__text {
  flex: 1 1 auto; padding: 20px 22px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  background: var(--sk-bg-b); border-top: 1px solid var(--sk-line); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.ba-orbit__no { grid-row: 1 / span 2; font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 2.2vw, 2.2rem); line-height: 1; color: var(--sk-hi); letter-spacing: -0.02em; }
.ba-orbit__text h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.15; color: var(--sk-txt-1); margin: 0 0 6px; hyphens: manual; }
.ba-orbit__text p { font-size: 15.5px; line-height: 1.55; color: var(--sk-txt-2); margin: 0; max-width: 52ch; }

/* Reveal (generischer [data-reveal]-Hook): Knoten wachsen aus dem Kern, Ring + Kachel blenden nach */
.ba-orbit[data-reveal] .ba-orbit__ring, .ba-orbit[data-reveal] .ba-orbit__ticks { opacity: 0; scale: 0.9; transition: opacity 0.9s var(--ease), scale 0.9s var(--ease-morph); }
.ba-orbit[data-reveal] .ba-orbit__sweep { opacity: 0; transition: opacity 0.6s var(--ease) 0.9s; }
.ba-orbit[data-reveal] .ba-orbit__hub { opacity: 0; scale: 0.7; transition: opacity 0.7s var(--ease) 0.2s, scale 0.7s var(--ease-morph) 0.2s; }
.ba-orbit[data-reveal] .ba-orbit__node { opacity: 0; scale: 0.3; transition: opacity 0.6s var(--ease), scale 0.8s var(--ease-morph); transition-delay: calc(0.35s + var(--i, 0) * 0.1s); }
.ba-orbit[data-reveal] .ba-orbit__link { scale: 0 1; transition: scale 0.6s var(--ease) 0.75s; }
.ba-orbit[data-reveal] .ba-orbit__card { opacity: 0; translate: 0 14px; transition: opacity 0.7s var(--ease) 0.55s, translate 0.7s var(--ease-morph) 0.55s; }
.ba-orbit.is-revealed .ba-orbit__ring, .ba-orbit.is-revealed .ba-orbit__ticks { opacity: 1; scale: 1; }
.ba-orbit.is-revealed .ba-orbit__sweep { opacity: 1; }
.ba-orbit.is-revealed .ba-orbit__hub { opacity: 1; scale: 1; }
.ba-orbit.is-revealed .ba-orbit__node { opacity: 1; scale: 1; }
.ba-orbit.is-revealed .ba-orbit__link { scale: 1; }
.ba-orbit.is-revealed .ba-orbit__card { opacity: 1; translate: none; }

/* Außerhalb des Viewports / Hintergrund-Tab: Deko-Läufe stehen (Engine setzt is-paused auf dem Block) */
.ba-skills--orbit.is-paused :is(.ba-orbit__sweep, .ba-orbit__ticks, .ba-orbit__halo) { animation-play-state: paused; }

@keyframes bao-ticks { to { transform: rotate(360deg); } }
@keyframes bao-sweep { to { transform: rotate(360deg); } }
@keyframes bao-breathe { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.1); opacity: 0.8; } }
@keyframes bao-pulse { 0% { opacity: 0.9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(2.2); } }

/* Laptops 1024–1279: Rad enger an die Kachel */
@media (max-width: 1279px) {
  .ba-skills--orbit { --bao-gap: clamp(32px, 3.5vw, 48px); --bao-pad: 36px; }
}
/* Gestapelt (<960px): Rad oben, aktiver Knoten am unteren Anschlag, Hairline senkrecht zur Kachel darunter */
@media (max-width: 959px) {
  .ba-skills--orbit { --bao-base: 90deg; --bao-r: clamp(96px, 26vw, 150px); --bao-n: 52px; --bao-hub: 72px; --bao-pad: 20px; --bao-gap: 28px; }
  .ba-orbit { grid-template-columns: minmax(0, 640px); row-gap: var(--bao-gap); justify-items: stretch; }
  .ba-orbit__wheel { padding: 6px var(--bao-pad) 30px; }
  .ba-orbit__core svg { width: 34px; height: 34px; }
  .ba-orbit__fx { width: 28px; height: 28px; }
  .ba-orbit__label { font-size: 10.5px; }
  .ba-orbit__btn[aria-selected="true"] .ba-orbit__label { opacity: 0; }   /* die Kachel direkt darunter trägt den Titel; die Hairline läuft frei */
  .ba-orbit__link { left: 50%; top: 100%; width: 1px; height: calc(30px + var(--bao-gap)); margin: 0 0 0 -0.5px; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.9), rgba(var(--glow-rgb), 0.35)); }
  .ba-orbit__link::after { right: auto; left: 50%; top: auto; bottom: -3px; margin: 0 0 0 -3.5px; }
  .ba-orbit[data-reveal] .ba-orbit__link { scale: 1 0; }
  .ba-orbit.is-revealed .ba-orbit__link { scale: 1; }
  .ba-orbit__card { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-orbit__stage, .ba-orbit__arc, .ba-orbit__panel, .ba-orbit__btn, .ba-orbit__btn::before, .ba-orbit__label,
  .ba-orbit[data-reveal] :is(.ba-orbit__ring, .ba-orbit__ticks, .ba-orbit__sweep, .ba-orbit__hub, .ba-orbit__node, .ba-orbit__link, .ba-orbit__card) { transition: none; }
  .ba-orbit__ticks, .ba-orbit__sweep, .ba-orbit__halo, .ba-orbit__pulse { animation: none !important; }
  .ba-orbit__sweep { opacity: 0.35; }   /* steht als stiller Lichtbogen */
}
/* ===================================================================
   ERFOLGSGESCHICHTEN — „Der Fächer": alle neun Videos gleichzeitig
   -------------------------------------------------------------------
   Marie 2026-09-11, zwei Runden an derselben Section — erst nur auf der
   Startseite, nach der Freigabe („Ja, das gefällt mir so gut. Kannst du
   es bitte auf den anderen Seiten auch ändern") auf ALLE fünf Seiten
   mit dieser Section ausgerollt (Startseite, Leistungen-Hub,
   Auftragsgewinnung, Marktführerschaft, Kanalservice; die
   Mitarbeitergewinnung hat den Include deaktiviert):

   Runde 1 („Da sieht es aktuell so aus, als wären nur drei Testimonial-
   Videos da"): Coverflow von drei auf fünf Slots erweitert + ein
   Filmstreifen mit allen neun Postern unter der Bühne.

   Runde 2 („Und einfach noch mehr in dem Slider sehen würde, anstelle
   davon, dass man darunter noch mal die ganzen Videos packt. Das ist
   quasi von drei Ansichten im Slider zu fünf gewechselt, finde ich
   schon besser. Wie wäre es, wenn man da alle anzeigen würde? Halt,
   nur so geläppert."): **alle neun Karten stehen im Slider**, nach
   außen gestaffelt kleiner und leiser; der Filmstreifen ist wieder
   RAUS, die Position zeigen wieder die schlichten Dots.

   Die Staffelung ist gerechnet, nicht geraten. Jeder Rang bekommt einen
   eigenen sichtbaren STREIFEN zwischen der rechten Kante seines
   Vordermanns und seiner eigenen — sonst verschwindet er vollständig
   hinter der Karte davor. Dafür zwei Größen:

     --cw   Kartenbreite (dieselbe Variable, die die Karte selbst nutzt)
     --fan  Fächer-Radius = Platz von der Bühnenmitte bis zum Fensterrand
            (48vw lässt 2vw Luft) abzüglich der halben aktiven Karte

   Die Mitte jedes Rangs ist dann `cw * A + fan * B`. A und B sind so
   gewählt, dass die Streifen nach außen SCHMALER werden (Anteile 38 /
   26 / 20 / 16 % des Radius) — der direkte Nachbar bleibt als Video
   lesbar, die äußeren sind der „geläpperte" Stapel. Gemessen bei 1440:
   Streifen 156 / 107 / 82 / 66 px, bei 1864: 202 / 138 / 106 / 85 px.

   Alles unter dem Modifier .cases--faecher — die Drei-Slot-Fassung
   bleibt damit als Basis erhalten und ist eine Klasse weit entfernt,
   falls eine Seite sie je wieder braucht.

   VORAUSSETZUNG am Einsatzort: die Section muss eine Dunkel-Insel sein
   (der deckende Kartengrund zieht var(--surface-1) — auf einem hellen
   Band wären die Karten fast weiß). Auf allen fünf Seiten gemessen:
   --surface-1 löst dort auf #15171A (hell) bzw. #0C141C (dunkel) auf. Die
   Engine in scripts.html ist dieselbe; sie setzt [data-offset] ohnehin
   für alle neun Karten. Was anfassbar ist, entscheidet allein dieses CSS
   (pointer-events); im Tab-Fluss liegt nur die aktive Karte.
   =================================================================== */

/* ---------- CTA im Kopf (statt am Section-Ende) ---------- */
.cases--faecher .cases__cta-wrap--top {
  margin-top: clamp(20px, 2.2vw, 32px);
}

.cases--faecher .cases__header {
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* ---------- Bühne: alle neun Ränge ---------- */
.cases--faecher {
  /* Schmaler als die generische Fassung (660 px): der Fächer braucht
     den Platz neben der aktiven Karte. Gemessen bei 1440 — mit 600 px
     überlappten schon die direkten Nachbarn um ~200 px. */
  --cw: clamp(280px, 42vw, 560px);
  --fan: calc(48vw - var(--cw) / 2);
}

/* Malreihenfolge: die generische Buehne laesst den Track als
   `transform-style: preserve-3d` laufen — dort sortiert der Browser nach
   der tatsaechlichen RAEUMLICHEN Tiefe, nicht nach z-index. Bei drei weit
   auseinander liegenden Slots faellt das nicht auf; im engen Faecher
   ragen die um Y gedrehten Nachbarn mit ihrer Innenkante nach VORNE und
   legen sich sichtbar ueber die aktive Karte (gemessen 2026-09-11 bei
   1440: der Text des linken Nachbarn stand mitten im Video der Mitte).
   Deshalb hier flach sortieren und die Perspektive an den Track haengen —
   die Karten bleiben perspektivisch verzerrt, die Reihenfolge macht
   wieder z-index. */
.cases--faecher .cases__track {
  transform-style: flat;
  perspective: 1800px;
}

/* min-height ist NUR der No-JS-Fallback (die Engine misst die Karte und
   setzt style.height). Der geerbte Wert 580 px stammt von der 660-px-
   Karte der generischen Fassung und gewann hier gegen die gemessenen
   497 px — 83 px tote Bühnenhöhe bei 1440/1864. */
.cases--faecher .cases__stage {
  min-height: clamp(360px, 38vw, 500px);
}

.cases--faecher .case-card {
  width: var(--cw);
}

/* Im Faecher liegen die Raenge dicht hintereinander — teils direkt HINTER
   der aktiven Karte. Deren Glas-Grund ist halbtransparent (Alpha 0,55 bis
   0,85), die Hintermaenner schienen dadurch mitten durch die aktive Karte
   und machten ihren Text unleserlich (gemessen 2026-09-11 bei 1440). Ein
   opaker Grund UNTER dem Verlauf loest das, ohne den Glas-Charakter zu
   verlieren: `background-color` liegt unter `background-image`, der
   Verlauf der Basisregel bleibt also unveraendert darueber liegen. */
.cases--faecher .case-card__inner {
  background-color: var(--surface-1);
}

/* Rang 1 — der direkte Nachbar bleibt ein lesbares Video (die
   generische Fassung dimmt ihn auf 0.42 mit 1,5 px Blur; das las sich
   als Schatten der aktiven Karte, nicht als weiteres Video). */
.cases--faecher .case-card[data-offset="-1"],
.cases--faecher .case-card[data-offset="1"] {
  opacity: 0.62;
  filter: blur(0.7px) saturate(0.88);
  z-index: 4;
}
.cases--faecher .case-card[data-offset="-1"] {
  transform: translate(calc(-50% - (var(--cw) * 0.10 + var(--fan) * 0.38)), -50%) scale(0.8) rotateY(13deg);
}
.cases--faecher .case-card[data-offset="1"] {
  transform: translate(calc(-50% + (var(--cw) * 0.10 + var(--fan) * 0.38)), -50%) scale(0.8) rotateY(-13deg);
}

/* Rang 2 — noch anfassbar (der Streifen ist breit genug für ein
   sicheres Klickziel) — die Auswahl läuft dort über Pfeile und Dots. */
.cases--faecher .case-card[data-offset="-2"] ,
.cases--faecher .case-card[data-offset="2"] {
  opacity: 0.44;
  filter: blur(1.4px) saturate(0.74);
  /* Die Basisregel gibt nur -1/0/+1 `pointer-events: auto` — ohne diese
     Zeile blieb Rang 2 fuer die Maus tot (gemessen: Klick auf den
     sichtbaren Streifen wechselte die Karte nicht). */
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}
.cases--faecher .case-card[data-offset="-2"] {
  transform: translate(calc(-50% - (var(--cw) * 0.18 + var(--fan) * 0.64)), -50%) scale(0.64) rotateY(18deg);
}
.cases--faecher .case-card[data-offset="2"] {
  transform: translate(calc(-50% + (var(--cw) * 0.18 + var(--fan) * 0.64)), -50%) scale(0.64) rotateY(-18deg);
}

/* Rang 3 + 4 — der „geläpperte" Rest des Stapels. Nicht anfassbar: die
   Streifen sind 66–106 px schmal und liegen zum großen Teil hinter dem
   Vordermann; die Auswahl läuft dort über Pfeile und Dots. */
.cases--faecher .case-card[data-offset="-3"],
.cases--faecher .case-card[data-offset="3"] {
  opacity: 0.3;
  filter: blur(2.2px) saturate(0.62);
  pointer-events: none;
  z-index: 2;
}
.cases--faecher .case-card[data-offset="-3"] {
  transform: translate(calc(-50% - (var(--cw) * 0.24 + var(--fan) * 0.84)), -50%) scale(0.52) rotateY(22deg);
}
.cases--faecher .case-card[data-offset="3"] {
  transform: translate(calc(-50% + (var(--cw) * 0.24 + var(--fan) * 0.84)), -50%) scale(0.52) rotateY(-22deg);
}

.cases--faecher .case-card[data-offset="-4"],
.cases--faecher .case-card[data-offset="4"] {
  opacity: 0.2;
  filter: blur(3px) saturate(0.55);
  pointer-events: none;
  z-index: 1;
}
.cases--faecher .case-card[data-offset="-4"] {
  transform: translate(calc(-50% - (var(--cw) * 0.28 + var(--fan))), -50%) scale(0.44) rotateY(25deg);
}
.cases--faecher .case-card[data-offset="4"] {
  transform: translate(calc(-50% + (var(--cw) * 0.28 + var(--fan))), -50%) scale(0.44) rotateY(-25deg);
}

/* Hover hebt die beiden anfassbaren Ränge an. */
.cases--faecher .case-card[data-offset="-1"]:hover,
.cases--faecher .case-card[data-offset="1"]:hover {
  opacity: 0.9;
  filter: blur(0) saturate(1);
}
.cases--faecher .case-card[data-offset="-2"]:hover,
.cases--faecher .case-card[data-offset="2"]:hover {
  opacity: 0.7;
  filter: blur(0) saturate(0.9);
}

/* Auf Tablet-Breiten sind die Karten relativ zum Fenster größer, die
   Ränge rücken optisch dichter zusammen — eine Stufe leiser, damit die
   Mitte die Hauptsache bleibt. */
@media (max-width: 1179px) and (min-width: 768px) {
  .cases--faecher .case-card[data-offset="-1"],
  .cases--faecher .case-card[data-offset="1"] { opacity: 0.5; }
  .cases--faecher .case-card[data-offset="-2"],
  .cases--faecher .case-card[data-offset="2"] { opacity: 0.34; }
  .cases--faecher .case-card[data-offset="-3"],
  .cases--faecher .case-card[data-offset="3"] { opacity: 0.24; }
  .cases--faecher .case-card[data-offset="-4"],
  .cases--faecher .case-card[data-offset="4"] { opacity: 0.16; }
}

/* ---------- Akzentton: überall wie auf der Startseite ---------- */
/* Marie 2026-09-11 nach dem Rollout, auf den gemessenen Befund „Startseite
   Silver Blue, die vier anderen Cyan": „Und so wie es auf der Startseite
   ist, ist es richtig."

   Der ruhigere Silver-Blue-Akzent kam aus der Premium-Runde vom
   2026-09-04 und war dort bewusst auf `.page-home` gescopt (Block
   „Premium-Überarbeitung", Abschnitt 3). Mit dem Rollout sah dieselbe
   Section dadurch auf fünf Seiten unterschiedlich aus. Diese Regel
   hängt den Ton an die FASSUNG statt an die Seite — jede Seite, die den
   Fächer einbindet, bekommt ihn automatisch, auch künftige.

   Spezifität mit Absicht: `.cases.cases--faecher` ergibt (0,3,1) —
   gleichauf mit der konsolidierten Dunkel-Insel-Token-Regel, die den
   Inseln sonst Cyan gibt. Weil diese Regel später in der Datei steht,
   gewinnt sie. Mit nur `.cases--faecher` (0,2,1) würde sie verlieren.
   Auf der Startseite selbst ändert sich nichts: die `.page-home`-Regel
   ist spezifischer (0,3,1 + Seitenklasse) und führt dieselben Werte.
   Nur im hellen Theme — im dunklen ist der Akzent überall Cyan, auch
   auf der Startseite. */
html[data-theme="light"] .cases.cases--faecher {
  --accent-hover: #B3CCDF;
  --cyan-hi: #D6E6F5;
  --glow-rgb: 179, 204, 223;
  --em-grad-a: #B3CCDF;   /* CI-Verlauf Silver Blue → Cyan bleibt */
  --em-grad-b: #4DA8DA;
}

/* ---------- Positions-Dots ---------- */
/* Seit der Filmstreifen wieder raus ist, sind die Dots die EINZIGE
   Positionsanzeige der Section. Die geteilte Basisregel setzt sie auf
   rgba(255,255,255,0.18) — auf der flachen Charcoal-Flaeche sind das
   gemessene 1,75:1 und damit unter der 3:1-Schwelle fuer UI-Elemente
   (Guardian 2026-09-11). Angehoben auf gemessene
   3,8:1 (hell) bzw. 3,7:1 (dunkel). */
/* :not([aria-current]) ist PFLICHT, nicht Kosmetik: die Regel fuer den
   aktiven Dot (.cases__dot[aria-current="true"] { background: var(--accent-hover) })
   hat dieselbe Spezifitaet (0,2,0) und steht FRUEHER in der Datei — ohne
   den Ausschluss gewinnt diese hier und der aktive Dot verliert seine
   Akzentfarbe; die Positionsanzeige haette sich dann nur noch ueber die
   Breite unterschieden (Guardian-Blocker 2026-09-11, auf allen fuenf
   Seiten und in beiden Themes gemessen). */
.cases--faecher .cases__dot:not([aria-current="true"]) {
  background: rgba(255, 255, 255, 0.46);
}

.cases--faecher .cases__dot:not([aria-current="true"]):hover {
  background: rgba(255, 255, 255, 0.62);
}

/* ---------- Mobil: eine Karte plus ein Hinweis ---------- */
@media (max-width: 767px) {
  /* Der Fächer geht hier nicht auf: bei 390 px bleiben neben einer
     Karte in voller Breite nur 16 px Rand (gemessen). Die Karte gibt
     deshalb etwas Breite ab, dafür lugt der nächste Fall als ~40-px-
     Streifen herein — der Hinweis „da kommt noch was" bleibt, ohne
     dass neun Ränge zu Brei werden. Rang 3 und 4 sind aus. */
  .cases--faecher .case-card {
    width: min(84%, 420px);
  }

  .cases--faecher .cases__stage {
    min-height: clamp(340px, 84vw, 470px);
  }

  .cases--faecher .case-card[data-offset="-1"],
  .cases--faecher .case-card[data-offset="1"] {
    opacity: 0.4;
    filter: none;
  }
  .cases--faecher .case-card[data-offset="-1"] {
    transform: translate(calc(-50% - 62%), -50%) scale(0.86);
  }
  .cases--faecher .case-card[data-offset="1"] {
    transform: translate(calc(-50% + 62%), -50%) scale(0.86);
  }

  .cases--faecher .case-card[data-offset="-2"],
  .cases--faecher .case-card[data-offset="2"],
  .cases--faecher .case-card[data-offset="-3"],
  .cases--faecher .case-card[data-offset="3"],
  .cases--faecher .case-card[data-offset="-4"],
  .cases--faecher .case-card[data-offset="4"] {
    display: none;
  }
}

/* ---------- Reduced Motion: Tiefe ohne Unschärfe ---------- */
@media (prefers-reduced-motion: reduce) {
  .cases--faecher .case-card[data-offset="-1"],
  .cases--faecher .case-card[data-offset="1"],
  .cases--faecher .case-card[data-offset="-2"],
  .cases--faecher .case-card[data-offset="2"],
  .cases--faecher .case-card[data-offset="-3"],
  .cases--faecher .case-card[data-offset="3"],
  .cases--faecher .case-card[data-offset="-4"],
  .cases--faecher .case-card[data-offset="4"] {
    filter: none;
  }
  .cases--faecher .case-card[data-offset="-1"] {
    transform: translate(calc(-50% - (var(--cw) * 0.10 + var(--fan) * 0.38)), -50%) scale(0.8);
  }
  .cases--faecher .case-card[data-offset="1"] {
    transform: translate(calc(-50% + (var(--cw) * 0.10 + var(--fan) * 0.38)), -50%) scale(0.8);
  }
  .cases--faecher .case-card[data-offset="-2"] {
    transform: translate(calc(-50% - (var(--cw) * 0.18 + var(--fan) * 0.64)), -50%) scale(0.64);
  }
  .cases--faecher .case-card[data-offset="2"] {
    transform: translate(calc(-50% + (var(--cw) * 0.18 + var(--fan) * 0.64)), -50%) scale(0.64);
  }
  .cases--faecher .case-card[data-offset="-3"] {
    transform: translate(calc(-50% - (var(--cw) * 0.24 + var(--fan) * 0.84)), -50%) scale(0.52);
  }
  .cases--faecher .case-card[data-offset="3"] {
    transform: translate(calc(-50% + (var(--cw) * 0.24 + var(--fan) * 0.84)), -50%) scale(0.52);
  }
  .cases--faecher .case-card[data-offset="-4"] {
    transform: translate(calc(-50% - (var(--cw) * 0.28 + var(--fan))), -50%) scale(0.44);
  }
  .cases--faecher .case-card[data-offset="4"] {
    transform: translate(calc(-50% + (var(--cw) * 0.28 + var(--fan))), -50%) scale(0.44);
  }
}


/* ============================================================
   AUFTAKT-PILLE — Abstand zur Überschrift (2026-09-11)
   Marie: „teilweise hast du sie jetzt zu nah an der Überschrift
   platziert." GEMESSEN bei 1440 px: der kanonische `.section-header`
   setzt `gap: var(--space-5)` = 24 px, aber zwei Gruppen von
   Kopf-Containern weichen ab —
     · `.ba-head` (Bese-AI) ist ein BLOCK-Layout ohne Gap → 0 px;
       die frühere `.ba-head .eyebrow`-Margin-Regel war beim
       Pillen-Ausbau als tot entfernt worden und fehlte nach dem
       Zurückholen.
     · `.eg__header`, `.ws-system__head`, `.kspez__head-main`,
       `.kt-anfrage__copy` und `.mawx__header` fahren bewusst den
       kompakten `var(--space-4)`-Gap (16 px) für H2 + Lead.
   Die Pille bringt den fehlenden Rest deshalb selbst mit, statt den
   Container-Gap zu ändern — so bleibt der Abstand H2 → Lead in diesen
   Köpfen unangetastet. Ergebnis überall 24 px.
   ============================================================ */
.ba-head .eyebrow {
  margin-bottom: var(--space-5);
}

:is(.eg__header, .ws-system__head, .kspez__head-main, .kt-anfrage__copy, .mawx__header) > .eyebrow {
  margin-bottom: calc(var(--space-5) - var(--space-4));
}

/* ============================================================
   DIE BETRIEBE (nur Startseite) + ZAHLEN & ZERTIFIZIERUNG
   Go-Live-Plan Phase 4 (2026-09-15), Briefing Abschnitt 2.2.

   .proof  = „Echte Betriebe, echte Ergebnisse" auf der Startseite.
             Angelegt in Phase 4 als Klammer um DREI Blöcke (Video-Cases ·
             Bewertungen + Stimmen · Logo-Wand). Seit dem 2026-09-16 trägt
             sie NUR NOCH die Video-Cases — Marie: „Ich möchte die Section
             losgelöst von den Sachen, den Google-Bewertungen und diesen
             anderen Zitaten von Kunden … Da sollen nur diese
             Video-Sectionen kommen."
             Die anderen beiden sind nicht weg, sondern herausgelöst:
             Bewertungen + Stimmen in die eigene Section `.reviews--home`
             direkt darunter, die Logo-Wand ins Band unter dem Hero.
             Der verbliebene Block bringt über die geerbte
             .cases-Regel im Light-Theme seinen dunklen Grund selbst mit
             (siehe Band-Zuordnung weiter unten) — er läuft als Bühne von
             Kante zu Kante, weil .proof__block ein direktes, volles
             Section-Kind ist und die Breitenbegrenzung erst im
             .container darin sitzt. Ein 100vw-Ausbruch ist hier also
             NICHT nötig.

   .zahlen = „Bese Media in Zahlen" (neu). Trägt die vier Zähler, die
             bis zu dieser Runde doppelt auf der Seite standen (Hero +
             Bilanz-Strip der Cases-Section), dazu das TÜV-Siegel mit
             Link auf /zertifizierungen/.

   Bänder: Phase 5 leitet den Seiten-Rhythmus vollständig neu her —
   hier steht nur die Zuordnung, die die neue Reihenfolge braucht,
   damit an keiner Naht zweimal derselbe Ton steht. Der Orbit-Bogen-
   Gastgeber ist mit derselben Runde von `.trust` (gibt es auf der
   Startseite nicht mehr) auf `.zahlen` gewandert — die Regeln stehen
   weiter im Block „ORBIT-BÖGEN" weiter oben, es gibt bewusst KEIN
   zweites Regel-Set hier unten (Guardian 2026-09-15).
   ============================================================ */

.proof {
  position: relative;
  padding-block: var(--section-py);
  /* Repaint-Scope, geerbt von der abgeloesten .trust-Section. Seine
     beiden urspruenglichen Gruende — die Dauer-Animation des
     Logo-Marquees und der Schatten-Bleed des Stimmen-Sliders — sind am
     2026-09-16 aus dieser Section gewandert (Hero-Band bzw.
     .reviews--home, die den Clip deshalb mitbekommen hat). Er bleibt,
     weil der Faecher selbst dauerhaft animiert und absolut positionierte
     Karten weit ueber seine Kante hinaus staffelt. Bewusst KEIN
     overflow: clip — das schnitt bei 1280/1440px den focus-visible-Ring
     der Slider-Pfeile ab (Guardian-Blocker 2026-09-04). */
  contain: layout paint;
  isolation: isolate;
}

/* Der Kopf trägt H2 + Lead + Signature-CTA. Er liegt AUSSERHALB des
   Fächer-Blocks (der ist ein Geschwister-Div) — die beiden Feinschliff-
   Regeln der Fächer-Fassung, `.cases--faecher .cases__cta-wrap--top`
   und `.cases--faecher .cases__header`, greifen hier also nicht. Ohne
   Ersatz fiel der CTA auf seine Basis-Regel zurück und stand GEMESSEN
   110 px unter dem Lead statt der 44 px, die er auf den vier anderen
   Seiten mit derselben Bühne hat (Guardian-Befund 2026-09-15). */
.proof__header .cases__cta-wrap--top {
  margin-top: clamp(20px, 2.2vw, 32px);
}
/* Abstand Kopf → dunkle Bühne: bewusst knapper als der Standard-
   Section-Header-Abstand (48–88 px), weil die Bühne oben noch ihr
   eigenes Polster von 48–80 px mitbringt und ihre Kante ohnehin
   scharf trennt. */
.proof__header {
  /* gap wie im Fächer-Kopf (.cases__header): 12 px statt der 24 px des
     Standard-Section-Headers — sonst steht der Lead sichtbar weiter
     unter der H2 als auf den fünf Seiten mit derselben Bühne. */
  gap: var(--space-3);
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.proof__intro {
  max-width: 72ch;
  margin: 0;
  font-size: var(--text-lead);
  color: var(--text-200);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Abstand zwischen zwei Beweis-Blöcken. Seit dem 2026-09-16 steht nur
   noch EINER in der Section — die Regel bleibt für den Fall, dass die
   Logo-Wand zurückkommt (reaktivierbarer Kommentar im Partial). */
.proof__block + .proof__block {
  margin-top: clamp(40px, 5vw, 80px);
}

/* Block 1: der Fächer bringt als Section-Klasse `padding-block:
   var(--section-py)` mit. Innerhalb von .proof wäre das ein zweites
   Section-Polster — hier auf Bühnen-Maß zurückgenommen. Oben etwas
   mehr als unten, weil die Dot-Reihe unter der Bühne schon eigenen
   Abstand mitbringt: GEMESSEN bei 1440px liegen so 80px über und
   86px unter dem Fächer, mit gleichen Werten waren es 66/94. */
.proof .cases {
  padding-block: clamp(48px, 5.5vw, 80px) clamp(32px, 3.6vw, 56px);
}

/* ---------- Was unsere Kunden sagen (nur Startseite) ----------
   Herausgelöst am 2026-09-16 aus `.proof` (Block 2). Sie braucht fast
   nichts Eigenes: Kopf und Bewertungskarte sind dieselben Bausteine wie
   in den Sections auf den anderen Seiten und bringen ihre Abstände selbst
   mit — die H3-Regeln `.proof__sub` und der Null-Abstand
   `.proof__block--stimmen .reviews-card` sind mit der Auslagerung
   ersatzlos ENTFALLEN, weil die Karte jetzt unter einer echten
   Section-H2 sitzt und deren Standard-Abstand passt.

   SEIT 2026-09-17 zeigt die Section NUR NOCH die Google-Bewertungen
   (Marie: „nur die Google-Bewertungen zeigen") — der Stimmen-Slider
   darunter ist im Partial als Include-Kommentar deaktiviert, das
   Fragment läuft unverändert in `section-02-trust.html` weiter.

   Die zwei Zeilen unten sind der Repaint-/Clip-Scope, den der Block
   vorher von `.proof` geerbt hat. **Ihre ursprüngliche Begründung ist
   mit dem Slider entfallen** (sein Schatten-Bleed `--tm-room` war gegen
   genau diesen Clip an der Padding-Box gerechnet) — sie bleiben trotzdem,
   und zwar aus einem GEMESSENEN Grund: das Elfsight-Widget malt seinen
   Karussell-Streifen über die Section-Kante hinaus, und der Clip fängt
   ihn ab. Vergleich mit und ohne `contain` (Animationen angehalten):
   768 px 0 abweichende Pixel, 1440 px 246, **375 px 12.994 von 337.500**
   — auf dem Handy also sichtbar. Wer sie entfernt, misst vorher nach. */
.reviews--home {
  contain: layout paint;
  isolation: isolate;
}

/* ---------- Zahlen & Zertifizierung ---------- */

.zahlen {
  position: relative;
  padding-block: var(--section-py);
  isolation: isolate;
}

/* Der Bilanz-Strip trägt einen eigenen margin-top aus seiner Zeit als
   Abschluss der Cases-Section — als erstes Element nach dem Kopf ist
   der hier überflüssig. */
.zahlen .stats__grid {
  margin-top: 0;
}

/* Stichtag-Zeile: leer, solange {{zahlen-stichtag}} in daten.json
   leer ist (Zahlen-Kanon im Briefing als OFFEN markiert). :empty
   greift nur, weil der Platzhalter im Partial ohne Zeilenumbruch
   direkt zwischen den Tags steht. */
.zahlen__stand {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  text-align: center;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.04em;
  color: var(--text-300);
}
.zahlen__stand:empty {
  display: none;
}

.zahlen__zert {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4.4vw, 64px);
}

/* Eine Zeile aus Siegel + Text + Pfeil, als Link auf die
   Nachweis-Seite. Das Prüfzeichen bleibt 1:1 in seiner
   Original-Fassung (§5a — nie umfärben, nie freistellen). */
.zahlen__zert-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(12px, 1.4vw, 18px) clamp(18px, 2vw, 28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}
.zahlen__zert-link:hover {
  border-color: rgba(var(--glow-rgb), 0.38);
  background: rgba(var(--glow-rgb), 0.06);
}
.zahlen__zert-siegel {
  flex: none;
  width: clamp(72px, 8vw, 104px);
  height: auto;
}
.zahlen__zert-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.zahlen__zert-kopf {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--heading-color);
}
.zahlen__zert-sub {
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--text-300);
}
.zahlen__zert-pfeil {
  flex: none;
  color: var(--accent-hover);
}

@media (max-width: 479px) {
  .zahlen__zert-link {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .zahlen__zert-pfeil {
    display: none;
  }
}

/* ============================================================
   PHASE 5 — Band-Rhythmus der Startseite, hergeleitet
   (Go-Live-Plan Phase 5, 2026-09-15)

   AUSGANGSLAGE. Phase 4 hat die Reihenfolge geändert und die Bänder
   nur provisorisch gesetzt. GEMESSEN (1440px, Light, Sektionshöhen):
   Hero 827 · Bese-System 3.571 · Betriebe 2.687 (darin eine dunkle
   659-px-Bühne) · Bese-AI 3.883 · App 1.975 · Über-uns 1.837 ·
   Zahlen 725 · Passt-das 689 · FAQ 940 · Schritte 2.474 · KM 612 ·
   Footer 708 = 20.928 px. Zwei echte Defekte:
     1. Die Video-Bühne lag als dunkles Rechteck mitten in einer
        weißen Section — CI 04a: „Ganze Abschnitte, keine Flecken.
        Einzelne dunkle Kästen mitten im hellen Fließtext sind kein
        Rhythmus, sondern Unruhe." Sie erzeugte zwei zusätzliche
        Ton-Wechsel innerhalb einer Section.
     2. Über-uns(W) · Zahlen(G) · Passt-das(W) waren DREI helle
        Bänder in Folge — CI 04a: „nie mehr als zwei".

   WAS FESTSTEHT (keine Herleitung, sondern Marie-Entscheidungen):
     · jeder .hero ist dunkel (projektweit seit 2026-08-03)
     · .beseai + .app-control sind auf ALLEN Seiten dunkel und sehen
       überall gleich aus (Rollout 2026-09-11)
     · der Schlussblock FAQ · Schritte · KM · Footer ist dunkel
       (Premium-Runde 2026-09-04)
     · der Video-Fächer steht auf dunkler Bühne, auf allen fünf
       Seiten mit dieser Fassung („der Ton hängt an der FASSUNG,
       nicht an der Seite", Marie 2026-09-11)
   Damit sind Hero, [Bese-AI + App] und der Schlussblock gesetzt —
   und das ist bereits das volle CI-Budget („ein bis zwei dunkle
   Abschnitte plus Footer"). Die Herleitung hat also genau eine
   Freiheit: wohin die Beweis-Section und die beiden Bänder in der
   Seitenmitte fallen.

   DIE ENTSCHEIDUNG. .proof wird ganz dunkel. Sie steht direkt vor
   Bese-AI, verschmilzt also mit dem bestehenden System-Bogen zu EINER
   Zone — es kommt keine vierte Zone dazu, der Fleck verschwindet, und
   der Fächer behält den dunklen Grund, den seine Karten brauchen
   (deckende Fläche auf --surface-1). Inhaltlich ist das die Zone
   „Beweis → KI → App": was wir können und womit wir es belegen.
   Nebenbei ist es die alte Ordnung: vor Phase 4 war .cases Mitglied
   genau dieses Bogens (Bese-AI · App · Cases).
   Dazu verschmelzen Über-uns und Zahlen zu EINEM weißen Feld und
   Passt-das trägt das Grau — damit führt die Licht-Strecke zwei
   Bänder statt drei, und der Weg in den dunklen Schluss läuft über
   die von der CI empfohlene Kadenz Weiß → Grau → Dunkel.

   ERGEBNIS (Ton je Section, Light-Theme):
     Hero          D  ┐ Zone 1
     Bese-System   G      ← die eine Licht-Strecke der oberen Hälfte,
                            3.571 px = rund vier Bildschirmhöhen
     Die Betriebe  D  ┐
     Bese-AI       D  ├ Zone 2 (8.545 px)
     App           D  ┘
     Über uns      W  ┐ ein weißes Feld (2.562 px)
     Zahlen        W  ┘
     Passt-das     G
     FAQ           D  ┐
     Schritte      D  ├ Zone 3 mit Footer (4.734 px)
     KM            D  │
     Footer        D  ┘
   Prüfung: drei dunkle Zonen inkl. Footer-Zone = CI-Faustregel ✓ ·
   längste Licht-Strecke zwei Bänder ✓ · alle Übergänge harte Kanten
   über die volle Breite ✓ · kein dunkler Fleck mehr in einem hellen
   Abschnitt ✓ · an keiner Naht zweimal derselbe Ton ✓.

   DER PREIS, offen benannt: die Seite ist im hellen Theme zu rund
   zwei Dritteln dunkel (13.906 von 20.928 px; vor Phase 4 waren es
   knapp 58 %). Das ist die Folge daraus, dass vier der zwölf
   Sections per Marie-Entscheidung dunkel sind und die beiden
   längsten davon (Bese-AI 3.883, Schritte 2.474) dazugehören.
   Phase 6 kürzt Bese-AI auf „H2 + ein Satz + eine Szene" — danach
   sinkt der Anteil von selbst. Wer ihn sofort senken will, hat EINEN
   Hebel: .next-steps aus dem Schlussblock auf ein helles Band legen
   (−2.474 px Dunkel). Dann stünde die FAQ allerdings wieder als
   dunkler Solitär zwischen zwei hellen Bändern — genau der Zustand,
   den die Premium-Runde beseitigt hat. Deshalb NICHT eigenmächtig.

   Die Flächen selbst stehen im Block „STARTSEITE — Flächen flach"
   weiter oben (eine Quelle, nicht zwei). Hier unten steht nur, was
   die neue Zuordnung an den Komponenten nach sich zieht.
   ============================================================ */

/* Die Zähler tragen `color: var(--white)` und weiße Hairlines — sie
   waren bisher nur auf dunklem Grund zu sehen (Bilanz-Strip in der
   Cases-Section). Auf dem hellen Band der Zahlen-Section brauchen
   sie die Tinte des hellen Themes. */
html[data-theme="light"] .page-home .zahlen .stats__value {
  color: var(--heading-color);
}
html[data-theme="light"] .page-home .zahlen .stats__item + .stats__item::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(16, 24, 32, 0.16) 35%,
    rgba(16, 24, 32, 0.16) 65%,
    transparent 100%
  );
}

/* ============================================================
   PHASE 6 — Bese-AI Kurzfassung + kurzes App-Bento
   (Go-Live-Plan 15.09.2026, Briefing Erich 14.09. Abschnitt 2.4 +
   Reihenfolge-Tabelle 2.2: „Wieder viel zu komplex … Es muss auf
   einen Punkt begrenzt sein" bzw. „eine Aussage + Phone;
   Bento-Kacheln kürzen".)

   Reines LAYOUT — keine neuen Farben, keine neuen Tokens. Beide
   Sections sind auf allen Seiten Dunkel-Inseln und beziehen ihre
   Farben unverändert aus den Insel-Tokens. Das CSS der
   ausführlichen Fassungen (Konsole, Signal-Feld, Rad, Moat) steht
   weiter oben unangetastet: es wird gebraucht, sobald jemand in
   section-bese-ai.html die drei Include-Zeilen zurückholt.
   ============================================================ */

/* ---------- Bese-AI: die eine Szene als Bühne ----------
   Die Szene ist 1:1 die Geräte-Szene sk-sort der ausführlichen
   Fassung. HISTORIE (bis 17.09.2026): ihre vertikale Geometrie war
   kalibriert, weil die Scan-Linie (@keyframes sk-scan) in festen
   px-Schritten 24/77/130 fuhr. Seit dem Prüf-Rahmen (Block am Ende
   von styles.css, „PRÜF-RAHMEN statt Scan-Linie") sitzt der Effekt
   auf den Zeilen selbst — die Kalibrier-Pflicht ist entfallen. */
/* Höhe: die 296 px der ausführlichen Fassung waren die gemeinsame Höhe
   ALLER VIER Szenen (die höchste, 02, gab sie vor). Allein stehend ließ
   sk-sort dadurch 62 px Leerraum unter der letzten Zeile stehen — oben
   16 px Polster, unten 80. 248 px legt das Polster wieder gleich (14 px
   unter der letzten Zeile). Die Zeilen selbst bleiben unangetastet: sie
   stapeln vom oberen Rand, und die Scan-Linie rechnet ebenfalls von oben. */
.beseai--kurz .ba-skill__scene { height: 248px; }

.ba-kurz__stage {
  /* Nur ein Deckel, kein clamp: die Zeilen kürzen ihren Text per
     text-overflow, mehr Breite heißt also schlicht weniger Auslassung —
     unter 760 px soll die Szene deshalb die volle Containerbreite
     nehmen. (Ein clamp mit Untergrenze hätte sie auf schmalen Geräten
     auf die Untergrenze GEDECKELT statt sie füllen zu lassen: bei
     390 px Viewport 320 statt der verfügbaren 358 px.) Bei 1440 px
     sind 760 px gut die Hälfte der Fensterbreite — deutlich über der
     30-%-Marke der Marie-Regel „System-Animationen groß zeigen"
     (§1.12, shx-solutions-Befund). */
  max-width: 760px;
  margin-inline: auto;
}

/* Potenzial-Check: in der ausführlichen Fassung stand der Kopf in der
   Textsäule des Moat-Blocks (linksbündig, .ba-close .ba-micro). Ohne
   diesen Block steht er allein unter der Bühne und ist wie Kopf und
   Szene zentriert. */
.beseai--kurz .ba-check__head {
  margin-top: clamp(40px, 4.6vw, 68px);
  text-align: center;
}
/* Die Micro-Zeile erbt aus der Basis --text-300 und maß damit 3,66–3,82:1 —
   unter der Fließtext-Schwelle 4,5:1. In der ausführlichen Fassung hing die
   Korrektur an „.ba-close .ba-micro"; ohne den Moat-Block greift sie nicht
   mehr, also hier erneut. Gemessen nach dem Fix: 8,0:1 (hell) / 8,6:1 (dunkel). */
.beseai--kurz .ba-micro { color: var(--text-200); }

/* Ohne JavaScript setzt nichts .is-live — die Szene stünde dann mit drei
   Anfragen, aber OHNE die Urteile da, und genau die sind ihr Inhalt. Sie ist
   zwar aria-hidden und die Aussage steht vollständig im Satz darüber, aber
   ein halb gefüllter Screen liest sich als Fehler statt als Standbild.
   Deshalb hier der Endzustand als statisches Bild — dieselben Werte, die
   die Schleife am Ende erreicht (Textmarker gesetzt, Urteile gestempelt,
   Häkchen gezeichnet, Kopfzeile auf „2 echte Aufträge" umgesprungen). */
@media (scripting: none) {
  .beseai--kurz .sk-req b { background-size: 100% 100%; }
  .beseai--kurz .sk-req .sk-tag { opacity: 1; transform: none; }
  .beseai--kurz .sk-tag--ok svg { stroke-dashoffset: 0; }
  .beseai--kurz .sk-swap__a { opacity: 0; }
  .beseai--kurz .sk-swap__b { opacity: 1; transform: none; }
}

/* ---------- App-Steuerung: Bento mit drei Kacheln ----------
   ⚠ SEIT 17.09.2026 OHNE NUTZER — REAKTIVIERBAR. Das Bento steht auf
   Maries Zuruf wieder auf FÜNF Kacheln (Block M1), die Modifier-Klasse
   ist aus dem <ol> in section-05-app-steuerung.html raus. Die Regel
   bleibt stehen, weil der Rückbau auf drei sie wieder braucht — genau
   wie das CSS des Index (.lsnav) und der ausführlichen Bese-AI-Fassung.
   Sie tut nichts, solange die Klasse fehlt.
   Was sie tat: Das Grid verteilt über :nth-child (Reihe 1: Karte 1+2 je
   zur Hälfte, Reihe 2: drei Drittel). Mit drei Kacheln ist die dritte
   der Abschluss-CTA — sie bekommt die volle Reihe statt eines
   einsamen Drittels. Spezifität 0,3,0 (zwei Klassen + eine
   Pseudoklasse, kein Typselektor) schlägt die 0,2,0 der
   span-2-Regel im 1080-px-Block, und dieser Block steht später:
   die Regel gilt an JEDER Breite (unter 720 px ist das Grid
   einspaltig, dort ändert 1 / -1 nichts). */
.control-bento--kurz .control-feature:nth-child(3) {
  grid-column: 1 / -1;
}

/* Der Lead ist seit Phase 6 EIN Satz. Bei 58ch Deckel bleibt davon auf
   manchen Breiten ein Schusterjunge stehen („… was der Kunde / will."):
   text-wrap: balance verteilt die Zeilen gleichmäßig. Greift nur bei
   wenigen Zeilen und fällt ohne Unterstützung auf den normalen Umbruch
   zurück — also kein Layout-Risiko. */
.app-control__lead { text-wrap: balance; }

/* ≤360 px: die Kopfzeile der Szene brach zweizeilig um („ANFRAGEN · HEUTE"
   und „2 ECHTE AUFTRÄGE" passten bei 288 px Innenbreite nicht nebeneinander),
   und damit rutschten die drei Zeilen um 15 px nach unten — die damalige
   Scan-Linie fuhr in FESTEN px-Schritten (@keyframes sk-scan) und hätte neben
   den Zeilen gelegen (seit 17.09. hinfällig: der Prüf-Rahmen sitzt auf den
   Zeilen). Die eine Stufe kleinere Kopfzeile bleibt trotzdem: einzeilig liest
   sie sich besser, und die Zeilenlage ist an jeder Breite gleich (56/113/171 px).
   (Die eigene Höhe oben gilt an JEDER Breite und deckelt damit auch den
   358-px-Bump, den der 5g-Block ≤360 px setzt — der gehört den Szenen 02 und
   03 mit Begründung bzw. Kalender-Pille. Media Queries erhöhen die
   Spezifität nicht; .beseai--kurz .ba-skill__scene (0,2,0) schlägt das
   blanke .ba-skill__scene (0,1,0) unabhängig davon. Bei 320 px gemessen:
   248 px.) */
@media (max-width: 360px) {
  .beseai--kurz .sk-bar { font-size: 10px; letter-spacing: 0.03em; }
}

/* ============================================================
   DER FÄCHER — kompaktere Karten (2026-09-16)
   ------------------------------------------------------------
   Marie: „Ich möchte, dass du das doch wieder rückgängig machst …
   Allerdings würde ich hier vielleicht die Kacheln etwas kleiner
   machen, aber so, dass der Text nicht kleiner wird. Den kannst du
   auf jeden Fall so in der Schriftgröße lassen. Sonst ist er zu
   klein."

   Die Referenz-Wand ist zurückgebaut, der Video-Fächer läuft wieder.
   Hier wird NUR seine Größe zurückgenommen — und zwar ausschließlich
   über Maße, die keine Schrift anfassen:

     1) die Kartenbreite `--cw` (das Poster ist 16:9 und schrumpft
        proportional mit — es ist mit Abstand der größte Einzelblock
        der Karte, GEMESSEN 287 von 497 px Kartenhöhe)
     2) das Innenpolster der Karte
     3) die Abstände zwischen Poster, Sternen, Häkchen-Zeilen und
        Fußzeile

   **Keine einzige `font-size` steht in diesem Block** — das ist die
   Bedingung, unter der die Runde beauftragt ist. Wer hier später
   weiter verkleinert: die Karte hat ab hier keine Luft mehr, die
   nächste Stufe ginge an die Schrift und wäre damit gegen die Vorgabe.

   SCOPE: `.cases.cases--faecher` — also ÜBERALL, wo der Fächer läuft.
   Das sind fünf Stellen: die Beweis-Section der Startseite (`.proof`)
   und die Section „Erfolgsgeschichten" auf Leistungen-Hub,
   Auftragsgewinnung, Marktführerschaft und Kanalservice.
   Die Runde lief am 16.09. zuerst nur auf der Startseite; Marie hat sie
   dort abgenommen und den Rollout beauftragt: „Kannst du das bitte auf
   allen Seiten, wo die Section vorkommt, so machen, dass es genau gleich
   aussieht."

   Die doppelte Klasse `.cases.cases--faecher` ist Absicht und kein
   Schreibfehler: sie hält die Spezifität bei (0,2,0) bzw. (0,3,0) für
   die Nachfahren — exakt dort, wo sie mit dem abgelösten `.proof`-Scope
   lag. Mit einfachem `.cases--faecher` fiele sie auf die Höhe der
   Basis-Regeln im Block „ERFOLGSGESCHICHTEN — Der Fächer" und hinge
   allein an der Quellreihenfolge. Dasselbe Mittel nutzt weiter oben
   schon die Silver-Blue-Regel der Fassung.
   ============================================================ */

.cases.cases--faecher {
  /* 560 → 460 px: das Poster fällt damit von 510×287 auf 424×239,
     die Karte von 560×497 auf 460×~420. Die 34vw halten das Verhältnis
     zur Bühne über die mittleren Breiten (bei 1280 greift der vw-Wert,
     nicht der Deckel). Die Untergrenze 268 px bleibt für 320 px. */
  --cw: clamp(268px, 34vw, 460px);
}

.cases.cases--faecher .case-card__inner {
  /* 24 → 18 px ringsum, und der Abstand Poster → Textblock von 16 auf
     12 px. Beides nimmt Fläche weg, ohne eine Zeile zu verändern. */
  padding: clamp(14px, 1.7vw, 18px);
  gap: var(--space-3);
}

.cases.cases--faecher .case-card__body {
  gap: 10px;
}

.cases.cases--faecher .case-card__bullets {
  gap: 8px;
}

/* Ohne diese Zeile bringt die schmalere Karte NICHTS an Sektionshöhe:
   die Engine setzt zwar `style.height` der Bühne auf die gemessene
   Kartenhöhe, aber `min-height` ist der Fußboden und gewinnt, sobald
   die Karte darunter fällt. GEMESSEN standen so bei 1440 px 500 px
   Bühne unter einer 425-px-Karte — 75 px tote Fläche. Dieselbe Falle
   hat schon die Fächer-Fassung selbst getroffen (Kommentar an der
   geerbten 580-px-Zeile), sie wiederholt sich bei jeder Verkleinerung
   der Karte.

   ⚠ Die Media-Query ist PFLICHT, nicht Kosmetik: unter 768 px gilt eine
   eigens gemessene Bühnenhöhe (`@media (max-width: 767px)`, 340–470 px,
   Spezifität 0,2,0). Eine Media-Query schlägt in der Kaskade KEINE
   höhere Spezifität — ohne diese Klammer hätte die Regel hier (0,3,0)
   den Mobil-Wert stillschweigend mit überstimmt und den No-JS-Fußboden
   bei 375 px von 340 auf 330 px gedrückt (Guardian-Befund 2026-09-16).
   Unter 768 px ist die Karte ohnehin schon kompakt, dort gibt es nichts
   zu gewinnen — und die Verkleinerung greift über `34vw` erst darüber. */
@media (min-width: 768px) {
  .cases.cases--faecher .cases__stage {
    min-height: clamp(330px, 31vw, 430px);
  }
}

/* Unter 768 px lag dieselbe tote Fläche — sie war dort schon VOR dieser
   Runde da und ist mir erst beim Nachmessen des Guardian-Befunds
   aufgefallen. GEMESSEN über 320–767 px in 31-px-Schritten: bis 413 px
   sitzt die geteilte Regel passgenau (0 px tot), ab 444 px läuft sie
   auseinander und steht ab 568 px konstant 71 px über der Karte.

   Deshalb greift die Korrektur erst ab 480 px und folgt dort der
   gemessenen Kartenhöhe (373 px bei 480 → 399 px ab 537, danach flach).
   **Ein einzelner fester Wert taugt hier nicht:** 400 px flach über den
   ganzen Mobil-Bereich hätte bei 320 px 59 px Leerlauf erzeugt, wo vorher
   0 px waren — die Kartenhöhe läuft durch die Textumbrüche nicht
   monoton, ein `clamp` muss ihr folgen statt sie zu deckeln. Unter
   480 px bleibt die geteilte Regel deshalb unangetastet.

   Die Korrektur gilt seit dem Rollout auf allen fünf Fächer-Seiten.
   Das ist zulässig, weil unter 768 px ALLE dieselbe Karte zeigen: dort
   greift `--cw` gar nicht, die Breite kommt aus `min(84%, 420px)` der
   geteilten Mobil-Regel. Die tote Fläche war dort also auf allen fünf
   Seiten identisch — und identisch falsch. */
@media (min-width: 480px) and (max-width: 767px) {
  .cases.cases--faecher .cases__stage {
    min-height: clamp(373px, calc(45.6vw + 154px), 400px);
  }
}

/* ===================================================================
   STARTSEITEN-HERO — Vertrauenszeile über den CTA + Logo-Band darunter
   ===================================================================
   Marie 2026-09-16: „Da möchte ich bitte, dass du einmal die Trust-Sachen
   wie 250 Partnerbetriebe, Trustpilot und TÜV über den Call-to-Action-
   Button hast. Der Call-to-Action-Button ist quasi das Letzte in der
   Spalte." Plus: „die Slider von den Kunden-Logos unter die Hero-Section
   direkt packen, wie auf den Beispielseiten" (talenthafen.com, §1.12).

   NEUER Block am Dateiende — keine bestehende Regel gelöscht. Die zwei
   Reveal-Zeilen weiter oben werden hier mit GLEICHER Spezifität (0,2,0)
   überschrieben; der spätere Block gewinnt.
   =================================================================== */

/* 1 · Abstände drehen. Vorher trug die Vertrauenszeile den Abstand nach
   oben (`margin-top`) und der CTA gar keinen — der Lead brachte über
   seinen `margin-bottom` den Abstand zum Knopf mit. Jetzt steht die Zeile
   an der Stelle des Knopfes: sie erbt den Lead-Abstand, und der Knopf
   bekommt den Abstand, den vorher sie hatte. Gleicher Rhythmus, nur
   gedreht — kein neuer Wert erfunden. */
:is(.page-home, .page-auftragsgewinnung) .hero__trust:where(:not(.kanal-hero *)) { margin-top: 0; }
:is(.page-home, .page-auftragsgewinnung) .hero__cta:where(:not(.kanal-hero *))   { margin-top: clamp(20px, 2.6vw, 30px); }

/* 2 · Reveal-Staffelung mitdrehen. Ohne das blendet der CTA VOR der Zeile
   ein, die über ihm steht — die Bewegung liefe gegen die Leserichtung. */
.page-home .hero__trust:where(:not(.kanal-hero *)) { animation: hub-hero-in 0.85s var(--ease) 0.40s both; }
.page-home .hero__cta:where(:not(.kanal-hero *))   { animation: hub-hero-in 0.85s var(--ease) 0.52s both; }

/* 3 · Das Band AUF dem Hero-Fuß.
   Marie 2026-09-17: „die Logos … sind abgekapselt auf so einem schwarzen
   Hintergrund. Die sollen sich quasi in den Hintergrund von der
   Hero-Section mit einfügen, also da nicht mehr so eine Kante entsteht."
   Bis dahin trug das Band eine eigene flache Fläche #131518 (= Endton des
   Hero-Verlaufs) — nahtlos zum VERLAUF, aber seit dem Film „Der Block"
   endet der Hero nicht auf dem Verlauf, sondern auf dem grauen Boden des
   Films; gemessen lag an der Naht eine Stufe von ~14 Helligkeitswerten.
   Jetzt: der Hero bleibt voll bildschirmhoch (der Film läuft bis zur
   Unterkante durch), das Band schiebt sich per `margin-top` um seine
   eigene Höhe ÜBER den Hero-Fuß und ist TRANSPARENT — die Logos liegen
   auf dem Boden des Films, wie beim Vorbild talenthafen.com auf demselben
   Grund. Netto-Höhe im Fluss: 0 px, Hero + Band bleiben ein Bildschirm.
   Der Hero reserviert die Bandhöhe als Innenabstand nach unten (Block
   „Startseite: Hero füllt den ersten Bildschirm"), damit der Text nicht
   unter die Logos rutscht.
   Stapel-Reihenfolge, gemessen statt angenommen: `.hero` ist ein eigener
   Stapelkontext (`isolation: isolate`) mit z-index auto, das Band steht
   positioniert und SPÄTER im DOM — es wird über dem Hero gemalt, ohne
   z-index. Der Rhythmus der Seite ändert sich nicht: der erste
   Ton-Wechsel bleibt Hero(D) → Leistungen(W). */
/* Marie 2026-09-16 (Runde 5): „die Logos vom Kunden … auch mit auf
   Viewport-Höhe, also gerne noch was höher schieben." Hero + Band sind
   seitdem zusammen EIN Bildschirm: das Band hat eine FESTE Höhe (Token),
   und der Hero zieht genau diesen Wert von seiner Vollbild-Höhe ab. Nur
   so ist die Summe exakt — die Höhe des Bands aus dem Inhalt zu lesen
   kann CSS nicht. Der Token entspricht der vorher gemessenen Inhaltshöhe
   (Logo + Polster: 111 px bei 1024, 127 bei 1180, 147 bei 1366, 152 ab
   1440) — die Logos bleiben also gleich groß, sie rücken nur hoch. */
.page-home { --hero-band-h: clamp(110px, 10.8vw, 152px); }
/* Unter 768 px ist der Logo-Track nur noch 52 px hoch — der Desktop-Boden
   von 110 px kostete dort ~45 px Hero-Höhe ohne Messgrundlage (Guardian).
   Wert = Track 52 px + 2 × 22 px Polster, wie das Band vorher hoch war. */
@media (max-width: 767px) {
  .page-home { --hero-band-h: 96px; }
}

.hero-band {
  position: relative;
  height: var(--hero-band-h);
  /* über den Hero-Fuß legen — der Film darunter läuft weiter */
  margin-top: calc(-1 * var(--hero-band-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  /* kein eigener Grund: die Fläche IST der Hero (Film bzw. Poster) */
  background: transparent;
}

html[data-theme="light"] .page-home .hero-band {
  /* Logos auf dunklem Grund = weiß. Ohne diese Zeile greift der
     Light-Wert des Tokens (dunkle Tinte) und die Logos stünden
     dunkel auf dunkel — dieselbe Falle wie bei Team/Karriere am
     2026-09-10, dort gemessen 1,3:1. Der Grund ist der Hero-Film,
     in beiden Themes dunkel. */
  --logo-mono-filter: brightness(0) invert(1);
}

/* Der Abstand nach oben steckt im geteilten Partial (`--hero-logos-gap`)
   und ist dort für ein Band IM Hero gedacht. Hier trägt das Band sein
   eigenes Polster, der Gap muss weg. */
.hero-band .hero-logos { margin-top: 0; }

/* Der Full-Bleed des Partials rechnet mit `calc(50% - 50vw)`. Innerhalb
   eines `.container` ergibt das den Ausbruch auf volle Breite; hier IST
   die Section schon voll breit, die Rechnung ergibt 0 — beides korrekt,
   die Zeile bleibt also unangetastet. Der Scrim `.hero-logos::before`
   gilt nur für `.page-team` und greift hier nicht. */

/* ---------- Pfeile UNTER die Bühne (Marie 2026-09-16) ----------
   „Ich würde die Pfeile zum Weiter- oder Zurückklicken weiter nach
   unten packen, also unter die Videos."

   Sie standen seit dem ersten Bau senkrecht mittig links und rechts
   AN der aktiven Karte. Jetzt sitzen sie in EINER Reihe mit den
   Positions-Punkten unter der Bühne — links Zurück, rechts Weiter,
   die Punkte mittig dazwischen. Das ist zugleich das geläufigere
   Muster: Steuerung unter dem Inhalt statt auf ihm.

   Technik seit dem Rollout: die Pfeile sind DOM-Kinder der Punkte-Reihe
   `.cases__nav` und stehen dort als normale Flex-Geschwister —
   Zurück · Punkte · Weiter. Die absolute Positionierung der Basis-Regel
   wird komplett zurückgenommen (`position: static`, kein `top`, kein
   `left/right`, kein `transform`); Zentrierung und Abstände macht der
   Flex-Container.

   ⚠ Der Transform muss an DREI Stellen zurückgenommen werden: die
   Basis-Regel zentriert per `translateY(-50%)`, Hover und :active
   wiederholen ihn mit Skalierung. Wer nur die Basis überschreibt,
   bekommt beim ersten Hover einen Sprung um die halbe Pfeilhöhe.

   HISTORIE der ersten Fassung (16.09. vormittags, eine Runde lang):
   die Pfeile blieben Kinder von `.cases__stage` und wurden per
   `top: calc(100% + Abstand)` unter deren Kante geschoben. Der
   naheliegende Weg — Bezugsrahmen auf den `.cases__container` verlegen,
   der Bühne UND Punkte-Reihe umschließt — funktionierte NICHT:
   `.cases__stage` trägt `perspective: 1800px` für den Fächer, und eine
   Perspektive bildet (wie `transform` und `filter`) selbst einen
   Containing Block für absolut positionierte Nachfahren. GEMESSEN blieb
   `offsetParent` die Bühne, obwohl ihre `position` nachweislich auf
   `static` stand; die Pfeile landeten 46 px ZU HOCH. **Die Regel bleibt
   lehrreich, auch wenn dieser Code sie nicht mehr braucht:** bevor man
   einen Bezugsrahmen verlegt, prüfen, ob Ziel- oder Zwischenelement
   `transform`, `filter` oder `perspective` trägt — `position` allein
   entscheidet das nicht. Aufgelöst hat sich das Problem, weil die
   Pfeile beim Rollout ins Markup der Punkte-Reihe gewandert sind
   (Tab-Reihenfolge, WCAG 2.4.3 — Guardian 2026-09-16). */

.cases.cases--faecher .cases__nav {
  /* Die Reihe trägt jetzt die Pfeile. Sie ist schon in der Basis-Regel
     ein zentrierter Flex-Container — hier kommen nur der Abstand zur
     Bühne und die Lücke zwischen Pfeil und Punkten dazu. Die Punkte
     bleiben dadurch AUTOMATISCH mittig, unabhängig von der Pfeilgröße
     (die frühere Fassung rechnete die halbe Punkt-Reihen-Breite von
     85 px von Hand aus — das hätte bei jeder Änderung der neun Punkte
     nachgezogen werden müssen). */
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(14px, 1.8vw, 24px);
}

.cases.cases--faecher .cases__arrow {
  /* Etwas kleiner als die Bühnen-Fassung (52–64 px): in einer Reihe
     mit 10-px-Punkten wirken die großen Kreise als zweites Motiv. */
  --size: var(--cases-arrow, 48px);
  /* Raus aus der absoluten Positionierung der Basis-Regel: in der
     Punkte-Reihe sind die Pfeile normale Flex-Kinder. `flex: none`
     hält sie rund, wenn der Platz eng wird (sonst staucht Flexbox sie
     zu Ellipsen). */
  position: static;
  flex: none;
  transform: none;
}

.cases.cases--faecher {
  --cases-arrow: clamp(42px, 3.4vw, 48px);
}

/* Die `left`/`right`-Rechnungen der Basis- und Mobil-Regeln sind in der
   Reihe gegenstandslos — sie würden ein statisch positioniertes Element
   ohnehin nicht bewegen, werden aber sicherheitshalber neutralisiert,
   damit ein späterer Wechsel zurück auf `position: absolute` nicht
   stillschweigend die alten Werte erbt. */
.cases.cases--faecher .cases__arrow--prev,
.cases.cases--faecher .cases__arrow--next {
  left: auto;
  right: auto;
}

.cases.cases--faecher .cases__arrow:hover,
.cases.cases--faecher .cases__arrow:focus-visible {
  transform: scale(1.08);
}

.cases.cases--faecher .cases__arrow:active {
  transform: scale(0.96);
}

.cases.cases--faecher .cases__arrow .icon {
  width: 22px;
  height: 22px;
}

/* ⚠ HISTORIE — Rand-Maske: sie steht wieder dort, wo sie hingehört.
   `.cases__stage` trägt unter 1180 px eine `mask-image`, die die
   Nachbarkarten am Rand ausfaden lässt statt sie hart abzuschneiden.
   Solange die Pfeile als absolut positionierte Kinder IN der Bühne
   standen (erste Fassung vom 16.09. vormittags), lagen sie an schmalen
   Breiten mitten in deren Auslauf-Zone — und eine Maske wirkt auf ALLE
   Nachfahren: GEMESSEN Pfeil-Helligkeit 25 statt 255 auf acht der
   vierzehn Pflichtbreiten. Die Maske musste damals auf `.cases__track`
   umziehen (gleiche Aufgabe, aber kein Vorfahre der Pfeile).

   Mit dem Rollout sind die Pfeile ins Markup der Punkte-Reihe gewandert
   (Tab-Reihenfolge) und liegen damit GAR NICHT MEHR in der Bühne — der
   Umzug der Maske hatte keinen Grund mehr und ist zurückgenommen. Die
   Basis-Regel gilt wieder unverändert.

   **Die Lehre bleibt, sie ist der eigentliche Wert dieses Absatzes:**
   Sichtbarkeit prüft man am Pixel, nicht am Computed Style. `opacity`,
   `visibility` und `display` sagten die ganze Zeit „sichtbar" — Masken,
   `clip-path`, `filter`, Überdeckung und Farbe-auf-Farbe sehen sie
   nicht. Die Gegenprobe braucht außerdem erzwungenes
   `scroll-behavior: auto`: der erste Messversuch verglich zwei Bilder,
   die an verschiedenen Scroll-Positionen entstanden waren, weil das
   globale weiche Scrollen noch lief. */

/* ===================================================================
   STARTSEITEN-HERO — „Der Block" als vorgerenderter Film
   ===================================================================
   Marie 2026-09-16: das rechte Hero-Objekt wird ein gerenderter Film
   („Du kannst ja über Higgsfield Video erstellen"), und zwar VOLLFLÄCHIG
   über den ganzen Hero — „Hauptfokus nur rechts, damit man links
   ungestört Texte platzieren kann". Vorbild talenthafen.com (§1.12).

   NEUER Block am Dateiende, keine bestehende Regel geändert.
   =================================================================== */

.hv-block {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Deckt den Moment vor dem ersten Bild: derselbe Ton, auf den der
     Hero-Verlauf ohnehin endet — kein Aufblitzen beim Laden. */
  background: #131518;
}

.hv-block__film {
  /* Positioniert wie `.hero__bgvideo-media` — ein `<video>` ist inline und
     laesst sonst eine Zeilenbox-Luecke unter sich (Guardian 16.09.). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Objekt sitzt im Film rechts. Beim Beschneiden auf schmalen
     Fenstern muss die RECHTE Kante stehen bleiben — sonst wandert der
     Block aus dem Bild und die leere Textzone füllt den Schirm. */
  object-position: 75% center;
  /* KEIN CSS-Filter mehr: die Farbkorrektur auf CI-Cyan ist seit Runde 5
     in den Film EINGEBACKEN (ffmpeg `hue=h=16:s=0.88`, gemessen 187° →
     201° = `#4DA8DA`). Ein `filter` auf einem Vollbild-Video kostet das
     Hardware-Compositing und ruckelt — Guardian-Rückstand seit Runde 1,
     Marie 16.09.: „noch ein bisschen abgehackt". */
}

/* Scrim — NUR dort, wo der Text über dem Objekt liegt.
   GEMESSEN am laufenden Film (echte Textfarbe gegen den hellsten
   Untergrund-Pixel unter jeder Textbox, drei Zeitpunkte): ab 1024 px
   steht der Text links, der Block rechts — Kontrast 9,4–18,2 : 1, dort
   braucht es nichts. Unter 1024 px stapelt der Hero, der Block rutscht
   hinter den Text, und die Werte fallen auf 1,4–1,9 : 1. Deshalb greift
   der Scrim genau dort und nirgends sonst: auf dem Desktop bliebe der
   Film sonst grundlos dunkler als nötig.
   Ton = `--surface-0` als Roh-Tripel, der projektweit theme-feste
   Near-Black der Foto-/Video-Scrims (Karriere-, Team-Hero). */
@media (max-width: 1023px) {
  .hv-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 10, 14, 0.74);
  }
}

/* Der Text liegt über dem Film — ZWEI Regeln, bewusst. (Dieselbe
   `.page-home .hero > .container`-Regel steht auch beim Landschafts-Layer
   „Aus deiner Ecke" weiter oben — beide Visuale brauchen sie, keine ist
   tot; wer eine löscht, muss die andere prüfen.)
   Die zweite reicht allein; die erste ist der Fallback für Browser ohne
   `:has()`. Ohne ihn wäre `.container` ein nicht positioniertes
   In-Flow-Element und würde HINTER dem absolut gesetzten Film gemalt —
   der ganze Hero-Text wäre verdeckt. Beim Hero-Logo-Band ist dieselbe
   `:has()`-Abhängigkeit unkritisch (dort fehlt nur ein Innenabstand),
   hier wäre sie ein kaputter Hero. Guardian-Befund 16.09. */
.page-home .hero:where(:not(.kanal-hero)) > .container { position: relative; z-index: 1; }
.hero:has(.hv-block) > .container { position: relative; z-index: 1; }

/* Reduced Motion: der Film wird gar nicht erst gezeigt — das Poster
   (= sein letztes Bild) steht als Standbild. Kein Abspielen, kein
   Zusammenfahren. */
@media (prefers-reduced-motion: reduce) {
  .hv-block__film { display: none; }
  .hv-block {
    /* 75% center — IDENTISCH zum `object-position` des Videos. `center right`
       wäre 100 % und zeigte einen anderen Ausschnitt als die bewegte
       Fassung (Guardian-Befund 16.09.). */
    background: #131518 url("Bilder/hero/der-block-endbild-v5.webp") 75% center / cover no-repeat;
  }
}

/* ===================================================================
   „Der Block" — die Marke liegt AUF dem Stein
   ===================================================================
   Marie 2026-09-16, Runde 4: „Nimm das mit den ganzen Dienstleistungen
   raus. Platziere oben auf dem Stein das Bild-Logo, natürlich, sodass es
   auch visuell gesehen wirklich drauf liegt. Das soll dann bitte auch so
   einen Leuchteffekt haben."
   Runde 6: die Lichtimpulse in den Fugen sind RESTLOS entfernt (Marie:
   „die mache ich auf jeden Fall wieder weg"); die Marke liegt seitdem
   KANTENPARALLEL auf der Oberseite und erscheint erst mit dem Ende des
   Films (Klasse `is-set`, gesetzt von der Engine).

   Die Lage ist aus dem ENDBILD des Films gemessen (Prozent der
   16:9-Bildfläche) und wird von der Engine (`[data-hv-block-film]` in
   scripts.html) über die `object-fit: cover`-Geometrie in Bildschirm-
   Koordinaten gesetzt: `--hx/--hy` = Mitte der Oberseite, `--hw` = Breite
   der Marke. Hier stehen Aussehen, Perspektive und Deckel.
   =================================================================== */

.hv-block__meaning {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Die Perspektive der Oberseite — GEMESSEN an der Raute des Endbilds.
   Die beiden DIAGONALEN der Raute: links → rechts fast waagerecht
   (0.9998, −0.0191), hinten → vorn auf 0,23 gestaucht und um 0,07 nach
   rechts geschert (0.0684, 0.2289). Bis Runde 5 lag die Marke entlang
   dieser Diagonalen — quer über die Ecken, wie ein Aufkleber (Marie:
   „sieht ein bisschen fehlerhaft aus, so wie das da liegt").
   Seit Runde 6 liegt sie KANTENPARALLEL wie ein aufgedrucktes Emblem: die
   Spalten der Matrix sind die zwei KANTEN der Raute, gerechnet aus den
   halben Diagonalen a = (0.4999, −0.0096), b = (0.0342, 0.1145) —
   x-Achse der Marke = a + b (Kante hinten → rechts), y-Achse = b − a
   (Kante hinten → links). Die Marke steht damit für den Betrachter
   „aufrecht", der vor der linken Front des Blocks steht — dort steht die
   Kamera des Films (die linke Front ist die breitere). */
:root { --hv-block-face: matrix(0.5341, 0.1049, -0.4657, 0.1240, 0, 0); }

.hv-block__mark,
.hv-block__mark-halo {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translate(var(--hx, 0px), var(--hy, 0px))
             translate(-50%, -50%)
             var(--hv-block-face);
  will-change: transform, opacity;
  /* Erscheint mit dem letzten Bild des Films (Engine setzt `is-set`) —
     kurz, damit sie nicht „nachschwimmt", aber nicht hart. */
  transition: opacity 0.55s var(--ease);
}
.hv-block.is-set .hv-block__mark,
.hv-block.is-set .hv-block__mark-halo { opacity: 1; }

/* Das Lichtfeld, das die Marke auf das Metall wirft — dieselbe Perspektive,
   nur größer und weich. Cyan = CI-Akzent; der Ton kommt über den
   Glow-Tripel-Token, nicht als Roh-rgba. */
.hv-block__mark-halo {
  width: calc(var(--hw, 160px) * 2.6);
  height: calc(var(--hw, 160px) * 2.6);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), 0.55), rgba(var(--glow-rgb), 0.14) 45%, transparent 72%);
}

.hv-block__mark {
  width: var(--hw, 160px);
  display: flex;
}
.hv-block__mark svg {
  width: 100%;
  height: auto;
  aspect-ratio: 130 / 145;
  /* Leuchten in zwei Stufen: ein enger heller Saum und ein weiter Schein.
     `filter` wird VOR `transform` angewandt — der Schein liegt also mit auf
     der Fläche, nicht davor. Gewollt: das Licht gehört zum Emblem. */
  filter:
    drop-shadow(0 0 6px rgba(var(--glow-rgb), 0.95))
    drop-shadow(0 0 22px rgba(var(--glow-rgb), 0.55));
}
.hv-block__mark .p1,
.hv-block__mark .p2,
.hv-block__mark .p3 { fill: var(--white); }

/* HISTORIE (bis 18.09. abends): unter 1024 px lag der Block hinter dem Text und
   die Marke blieb aus. Seit der Mobil-Runde 2 steht der Film als eigenes Bild
   UNTER dem Text und die Marke liegt in allen Breiten auf dem Block — Regel
   `.page-home .hv-block__meaning { display: block }` im Block „MOBIL-OPTIMIERUNG,
   RUNDE 2"; .hv-block läuft nur auf der Startseite, diese Regel greift nirgends mehr
   und bleibt als Rückbau-Vorlage. */
@media (max-width: 1023px) {
  .hv-block__meaning { display: none; }
}

/* Ohne JavaScript setzt niemand Deckel und Lage der Marke. Sie steht
   dann statisch — mit einer NÄHERUNG ihrer Lage: `left/top` in Prozent
   des Heros statt des Filmbilds (die `cover`-Verschiebung von ein paar
   Dutzend Pixeln kann CSS nicht rechnen). Auf dem Standbild trifft das
   die Oberseite bis auf diesen Versatz; ohne diese Zeilen säße die Marke
   am Hero-Ursprung über dem Text (Guardian 16.09.).
   Seit dem 17.09. ist die Bühne wieder voll hero-hoch (das Logo-Band liegt
   darüber statt darunter) und damit fast 16:9 — die Näherung ist dadurch
   BESSER geworden, nicht schlechter (Guardian-Frage 17.09., GERECHNET über
   die cover-Geometrie): bei 1440×827 liegt die echte Lage bei 69,6 / 33,3 %,
   bei 1728×1044 bei 69,4 / 33,3 %, bei 1920×1007 bei 69,75 / 32,1 % —
   vorher, an der 675 px flachen Bühne, bei 69,75 / 30,0 %. Wer den Film
   tauscht oder die Hero-Höhe ändert, rechnet die zwei Werte neu. */
@media (scripting: none) {
  .hv-block__mark,
  .hv-block__mark-halo { opacity: 1; left: 68.9%; top: 32.2%; } /* Film-Tausch 24.09.: vorher 69.75 / 33.3 */
}


/* ===========================================================================
   DIE BLICKKARTE — /leistungen/website/ (neu 2026-09-16)
   ---------------------------------------------------------------------------
   Marie: „eine Heatmap von einer Beispielwebseite … worauf der Kunde schaut,
   was er anklickt, was es zu Anrufen führt", danach „die Einblendungen sollen
   bitte animiert sein. Die Heatmap soll schon visuell animiert sein."

   NEUER Block, ändert keine bestehende Regel. Die Section ist eine
   Dunkel-Insel (steht in den drei konsolidierten Insel-Listen) — ihre Tokens
   kommen von dort, hier stehen nur die eigenen Werte.

   ANIMATION: EINE Zeitachse von 12 s, Schleife. Die Reihenfolge der vier
   Takte steckt in `animation-delay` (0 / 1,44 / 2,88 s), nicht in getrennten
   Dauern — so laufen die Teile nie auseinander. Alles startet PAUSIERT und
   läuft erst unter `.is-revealed`, das der generische [data-reveal]-Hook
   setzt (Muster `.ki`, `[data-vs]`). Kein Eintrag in scripts.html nötig.

   POSITIONEN kommen als Custom Properties vom Element (§5a-Ausnahme
   „Custom Properties als reine Daten-Träger"), Maße der Ringe in PROZENT
   statt px, damit sie mit dem Bild skalieren. Neues Bild = Werte neu ablesen.
   =========================================================================== */

.bkarte { padding-block: var(--section-py-tight); }
/* Mobil zurueck auf den vollen Abstand: mit der knappen Stufe auf BEIDEN
   Seiten faellt die Naht zu den Nachbarn (seit 16.09.2026 .painvoices
   und .ws-craft) bei 320-640 px auf 72 bzw. 92 px — die CI verlangt mindestens 96 (DIGITAL_CI.md:442).
   GEMESSEN an beiden Naehten; ab 768 px traegt die knappe Stufe (104 px).
   Maries Ein-Bildschirm-Vorgabe galt ihrem Desktop-Fenster, auf dem Handy
   stapelt die Section ohnehin weit ueber eine Bildschirmhoehe. */
@media (max-width: 767px) {
  .bkarte { padding-block: var(--section-py); }
}

/* Der geteilte Section-Kopf bringt 88 px Abstand nach unten mit; die
   Blickkarte ist eine EINE-Bildschirm-Section (Marie 16.09.), da ist
   das der groesste Einzelposten. GEMESSEN: 88 -> 32 spart 56 px. */
.bkarte__head {
  text-align: left; align-items: flex-start;
  max-width: 980px;   /* GEMESSEN: die H2 braucht einzeilig 725 px (bis zum
                         16.09.2026 „Wir wissen, wohin deine Kunden schauen."
                         mit 876 px) — der Deckel haelt beide einzeilig. */
  margin-inline: 0;
  margin-bottom: clamp(20px, 2.2vw, 32px);
}
/* Satz 2 der Paket-H2 als Subline — Rezept 1:1 von .ws-why__sub
   uebernommen, mit der die Zeile bis zum 16.09.2026 lief (§1.13: der
   Wortlaut bleibt, er ist nur auf H2 + Subline verteilt). Der geteilte
   .section-header setzt 24 px Abstand zwischen alle Kinder; die Subline
   gehoert aber zur Ueberschrift und nicht zum Lead, deshalb zieht sie die
   Haelfte davon zurueck (effektiv 12 px zur H2, volle 24 px zum Lead). */
.bkarte__sub {
  margin: calc(var(--space-5) * -0.5) 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: var(--weight-semibold);
  color: var(--text-100);
}
.bkarte__lead { max-width: 62ch; }

.bkarte__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.4vw, 32px);
  align-items: start;
  margin-top: clamp(22px, 2.4vw, 32px);
}

/* ---------- Bühne: die drei Kundenseiten unter der Karte ---------- */
.bkarte__stage {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 90px -40px rgba(var(--shadow-rgb), 0.75);
}
.bkarte__shot { display: block; width: 100%; height: auto; }

/* Dämpfung: additives Licht braucht dunklen Grund. 0,56 ist der Kompromiss —
   hoch genug fürs Leuchten, niedrig genug, dass die Seite hochwertig bleibt. */
.bkarte__scrim {
  position: absolute; inset: 0;
  background: rgba(9, 12, 16, 0.56);
  animation: bkarte-scrim 12s ease-in-out infinite;
  animation-play-state: paused;
}

.bkarte__heat { position: absolute; inset: 0; mix-blend-mode: screen; }

.bkarte__blob {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0;
  animation: bkarte-blob 12s ease-in-out infinite;
  animation-play-state: paused;
}
/* Die Helligkeits-Stufen der Karte. Cyan #4DA8DA als Kern, nach innen ins
   Weiße aufgehellt — der Verlauf braucht Zwischenwerte, die kein Token hat. */
.bkarte__blob--kopf   { background: radial-gradient(circle, rgba(222,244,255,0.80) 0%, rgba(77,168,218,0.44) 38%, rgba(77,168,218,0) 72%); }
.bkarte__blob--nummer { background: radial-gradient(circle, rgba(232,248,255,0.84) 0%, rgba(77,168,218,0.46) 36%, rgba(77,168,218,0) 70%); }
.bkarte__blob--sterne { background: radial-gradient(circle, rgba(228,247,255,0.76) 0%, rgba(77,168,218,0.40) 40%, rgba(77,168,218,0) 74%); }
.bkarte__blob--bild   { background: radial-gradient(circle, rgba(190,214,232,0.44) 0%, rgba(77,168,218,0.22) 42%, rgba(77,168,218,0) 74%); filter: blur(6px); }
.bkarte__blob--knopf  { background: radial-gradient(circle, rgba(246,253,255,0.95) 0%, rgba(107,196,240,0.56) 34%, rgba(77,168,218,0) 70%); }

.bkarte__ring {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 5px rgba(var(--glow-rgb), 0.22), 0 0 26px rgba(var(--glow-rgb), 0.5);
  opacity: 0;
  animation: bkarte-ring 12s ease-in-out infinite;
  animation-play-state: paused;
}
.bkarte__ring--stark {
  border-width: 2.5px;
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 6px rgba(var(--glow-rgb), 0.26), 0 0 34px rgba(var(--glow-rgb), 0.6);
}

/* Der Tipp: eine Welle, die zweimal vom Knopf ausläuft */
.bkarte__tap {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  border-radius: 9999px;
  border: 2px solid rgba(169, 220, 247, 0.85);
  opacity: 0;
  animation: bkarte-tap 12s ease-out infinite;
  animation-play-state: paused;
}

.bkarte__pin {
  position: absolute;
  left: var(--x); top: var(--y);
  width: clamp(22px, 1.9vw, 30px);
  height: clamp(22px, 1.9vw, 30px);
  margin-left: calc(clamp(22px, 1.9vw, 30px) / -2);
  margin-top: calc(clamp(22px, 1.9vw, 30px) / -2);
  border-radius: 50%;
  background: var(--white);
  color: #101820;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.5);
  opacity: 0;
  animation: bkarte-pin 12s ease-in-out infinite;
  animation-play-state: paused;
}

/* Versatz je Takt: seit 18.09.2026 KEINE animation-delay mehr, sondern eigene
   Keyframes je Takt — s. Block „Blickkarte — drei Seiten im Wechsel" weiter
   unten (dort stehen die Zuordnungen, weil sie HINTER den Grundregeln der
   Badges stehen müssen). */

/* ---------- Legende ---------- */
.bkarte__legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: 12px;
  font-size: var(--text-small);
  color: var(--text-200);
}
.bkarte__legend-item { display: inline-flex; align-items: center; gap: 10px; }
.bkarte__legend-blick {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,246,255,0.85) 0%, rgba(77,168,218,0.40) 45%, rgba(77,168,218,0) 75%);
}
.bkarte__legend-tipp {
  width: 22px; height: 22px; border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(var(--glow-rgb), 0.22);
}
/* GEMESSEN: inline passt der Hinweis erst ab 1600 px neben die beiden
   Legenden-Eintraege (743 px Platz, 740 gebraucht). Darunter bricht er um —
   dann gehoert er linksbuendig auf eine eigene Zeile, nicht rechtsbuendig
   als Waise. Auf Maries Fenstern (>=1728) steht er inline. */
.bkarte__legend-note { color: var(--text-300); flex-basis: 100%; }
@media (min-width: 1600px) {
  .bkarte__legend-note { flex-basis: auto; margin-left: auto; }
}

/* ---------- Erklärspalte ---------- */
.bkarte__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bkarte__item {
  display: flex; gap: 16px;
  padding: clamp(14px, 1.5vw, 17px) clamp(16px, 1.8vw, 20px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.bkarte__badge {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--glow-rgb), 0.14);
  border: 1px solid rgba(var(--glow-rgb), 0.40);
  color: var(--accent-hover);
  font-size: var(--text-small); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: bkarte-badge 12s ease-in-out infinite;
  animation-play-state: paused;
}
/* Karten-Titel in Montserrat statt im Display-Font (Marie 16.09.2026:
   „die Überschriften bei den einzelnen Kacheln … finde ich hier
   unpassend, nimm bitte die Schriftart, die keine Serifen hat").
   Das ist zugleich der CI-Standard — H3 läuft normalerweise in der
   UI-Schrift, Instrument Serif ist die §5a-Ausnahme für H3, die als
   dominanter Karten-Auftakt gedacht sind (.capacity__sub,
   .reviews-card__label). Diese vier sind kleine Erklärzeilen in einer
   Liste, kein Auftakt. Die H2 der Section bleibt Display-Font. */
.bkarte__item-title {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--heading-color);
}
.bkarte__item p { margin: 0; font-size: var(--text-small); line-height: 1.6; color: var(--text-200); }

.bkarte__item--call {
  margin-top: 6px;
  background: linear-gradient(135deg, rgba(44, 110, 169, 0.26) 0%, rgba(44, 110, 169, 0.10) 100%);
  border-color: rgba(var(--glow-rgb), 0.30);
  align-items: center;
  animation: bkarte-call 12s ease-in-out infinite;
  animation-play-state: paused;
}
.bkarte__call-icon {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(70, 211, 154, 0.16);
  border: 1px solid rgba(70, 211, 154, 0.45);
  color: #46D39A;
  display: flex; align-items: center; justify-content: center;
  animation: bkarte-callicon 12s ease-in-out infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}

/* ---------- Abschluss-Pillen ---------- */
.bkarte__facts {
  list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.bkarte__fact {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: var(--text-small);
  color: var(--text-100);
}
.bkarte__fact .icon { color: var(--accent-hover); }

/* ---------- Die Zeitachse ---------- */
@keyframes bkarte-scrim {
  0%, 3%   { opacity: 0; }
  9%, 88%  { opacity: 1; }
  97%,100% { opacity: 0; }
}
@keyframes bkarte-blob {
  0%        { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  17%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  40%       { opacity: 0.92; transform: translate(-50%, -50%) scale(1.07); }
  64%       { opacity: 1; transform: translate(-50%, -50%) scale(0.98); }
  88%       { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bkarte-ring {
  0%, 10%  { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  16%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  96%,100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes bkarte-tap {
  0%, 14%  { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18%      { opacity: 0.85; transform: translate(-50%, -50%) scale(0.8); }
  28%      { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
  40%      { opacity: 0.7; transform: translate(-50%, -50%) scale(0.8); }
  50%,100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}
@keyframes bkarte-pin {
  0%, 8%   { opacity: 0; transform: scale(0.4); }
  13%      { opacity: 1; transform: scale(1.22); }
  17%, 88% { opacity: 1; transform: scale(1); }
  96%,100% { opacity: 0; transform: scale(0.8); }
}
@keyframes bkarte-badge {
  0%, 9%   { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--text-300); box-shadow: none; }
  15%, 30% { background: rgba(var(--glow-rgb), 0.22); border-color: rgba(var(--glow-rgb), 0.72); color: #A9DCF7; box-shadow: 0 0 18px rgba(var(--glow-rgb), 0.38); }
  44%,100% { background: rgba(var(--glow-rgb), 0.14); border-color: rgba(var(--glow-rgb), 0.40); color: var(--accent-hover); box-shadow: none; }
}
@keyframes bkarte-call {
  0%, 44%  { opacity: 0.32; transform: translateY(6px); }
  50%, 90% { opacity: 1; transform: translateY(0); }
  98%,100% { opacity: 0.32; transform: translateY(6px); }
}
@keyframes bkarte-callicon {
  0%, 45%  { transform: rotate(0deg) scale(1); }
  48%      { transform: rotate(-14deg) scale(1.16); }
  51%      { transform: rotate(12deg) scale(1.16); }
  54%      { transform: rotate(-8deg) scale(1.1); }
  57%,100% { transform: rotate(0deg) scale(1); }
}

/* Start erst beim Reinscrollen */
.bkarte.is-revealed :is(.bkarte__scrim, .bkarte__blob, .bkarte__ring, .bkarte__tap, .bkarte__pin, .bkarte__badge, .bkarte__item--call, .bkarte__call-icon) {
  animation-play-state: running;
}

/* ---------- Blickkarte — drei Seiten im Wechsel (18.09.2026) ----------
   Marie: „bei der Leistungsseite die Seiten nicht angepasst" — die Bühne
   zeigt die drei echten Kundenseiten aus dem Hero (Scheithauer · O. Feucht ·
   Platzhirsch) statt der Musterseite. Seite 1 liegt im Fluss (gibt die Höhe)
   und bleibt IMMER stehen; Seite 2 und 3 liegen darüber und blenden ein —
   Seite 3 blendet am Rundenende wieder aus und gibt Seite 1 frei, Seite 2
   verschwindet erst, wenn Seite 3 sie ganz verdeckt (kein Helligkeits-Loch).
   8 s je Seite, 24 s die Runde. Der Wechsel liegt genau am Takt-Ende, wo
   Dämpfung, Wolken, Ringe und Pins bei 0 stehen: die neue Seite erscheint
   einen Moment klar, dann legt sich die Karte darüber.

   DIE TAKTE ALS EIGENE KEYFRAMES: vorher liefen Takt 2 und 3 über
   animation-delay (1,44 / 2,88 s) und ragten bis 2,5 s in die nächste Runde
   hinein — beim Seitenwechsel hätten Wolken der vorigen Runde auf der neuen
   Seite gestanden. Jetzt startet jeder Takt später IN seinem Keyframe, alle
   enden gemeinsam (88–97 %). Die Blob-Zuordnungen gelten auch für Etappe 02
   des Ablaufs (dort 11 s), die übrigen nur hier.
   Nebenbefund: die Grundregel `.bkarte__badge { animation: … }` stand HINTER
   den alten Verzögerungen und setzte sie per Kurzschreibweise auf 0 zurück —
   die drei Badges der Liste leuchteten bisher gleichzeitig auf. Die
   Zuordnungen stehen deshalb hier, hinter allen Grundregeln. */
.bkarte__blob--t0  { animation-name: bkarte-blob-0; }
.bkarte__blob--t2  { animation-name: bkarte-blob-2; }
.bkarte__blob--t3  { animation-name: bkarte-blob-3; }
.bkarte__pin--t2   { animation-name: bkarte-pin-2; }
.bkarte__pin--t3   { animation-name: bkarte-pin-3; }
.bkarte__badge--t2 { animation-name: bkarte-badge-2; }
.bkarte__badge--t3 { animation-name: bkarte-badge-3; }
.bkarte__ring--t3  { animation-name: bkarte-ring-3; }
.bkarte__tap--t3   { animation-name: bkarte-tap-3; }
.bkarte :is(.bkarte__scrim, .bkarte__blob, .bkarte__ring, .bkarte__tap, .bkarte__pin, .bkarte__badge, .bkarte__item--call, .bkarte__call-icon) { animation-duration: 8s; }

.bkarte__seite { position: relative; }
.bkarte__seite--alt {
  position: absolute; inset: 0;
  opacity: 0;
  animation: bkarte-wechsel-2 24s linear 8s infinite; animation-play-state: paused;
}
.bkarte__s3 { animation-name: bkarte-wechsel-3; animation-delay: 16s; }
.bkarte__seite--alt .bkarte__shot { height: 100%; object-fit: cover; object-position: top; }
/* Platzhirsch hat einen dunklen Foto-Hero — mit 0,56 bliebe kaum etwas übrig */
.bkarte__seite--dunkel .bkarte__scrim { background: rgba(9, 12, 16, 0.32); }
.bkarte.is-revealed .bkarte__seite--alt { animation-play-state: running; }

/* 24 s, 1 % = 0,24 s: einblenden in 0,6 s, 8 s stehen */
@keyframes bkarte-wechsel-2 {
  0%            { opacity: 0; }
  2.5%, 35.83%  { opacity: 1; }
  35.9%, 100%   { opacity: 0; }
}
@keyframes bkarte-wechsel-3 {
  0%            { opacity: 0; }
  2.5%, 33.33%  { opacity: 1; }
  35.83%, 100%  { opacity: 0; }
}
/* Die Takte — dieselben Kurven wie bkarte-blob/-pin/-badge/-ring/-tap, nur
   um den Takt-Versatz später gestartet (Takt 0: +5 %, Takt 2: +12 %,
   Takt 3: +24 % — bei 12 s waren das die alten 0,6 / 1,44 / 2,88 s) */
@keyframes bkarte-blob-0 {
  0%, 5%    { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  22%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  45%       { opacity: 0.92; transform: translate(-50%, -50%) scale(1.07); }
  67%       { opacity: 1; transform: translate(-50%, -50%) scale(0.98); }
  88%       { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bkarte-blob-2 {
  0%, 12%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  29%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.92; transform: translate(-50%, -50%) scale(1.07); }
  70%       { opacity: 1; transform: translate(-50%, -50%) scale(0.98); }
  88%       { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bkarte-blob-3 {
  0%, 24%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  41%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  60%       { opacity: 0.92; transform: translate(-50%, -50%) scale(1.07); }
  75%       { opacity: 1; transform: translate(-50%, -50%) scale(0.98); }
  88%       { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bkarte-pin-2 {
  0%, 20%   { opacity: 0; transform: scale(0.4); }
  25%       { opacity: 1; transform: scale(1.22); }
  29%, 88%  { opacity: 1; transform: scale(1); }
  96%,100%  { opacity: 0; transform: scale(0.8); }
}
@keyframes bkarte-pin-3 {
  0%, 32%   { opacity: 0; transform: scale(0.4); }
  37%       { opacity: 1; transform: scale(1.22); }
  41%, 88%  { opacity: 1; transform: scale(1); }
  96%,100%  { opacity: 0; transform: scale(0.8); }
}
@keyframes bkarte-badge-2 {
  0%, 21%  { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--text-300); box-shadow: none; }
  27%, 42% { background: rgba(var(--glow-rgb), 0.22); border-color: rgba(var(--glow-rgb), 0.72); color: #A9DCF7; box-shadow: 0 0 18px rgba(var(--glow-rgb), 0.38); }
  56%,100% { background: rgba(var(--glow-rgb), 0.14); border-color: rgba(var(--glow-rgb), 0.40); color: var(--accent-hover); box-shadow: none; }
}
@keyframes bkarte-badge-3 {
  0%, 33%  { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--text-300); box-shadow: none; }
  39%, 54% { background: rgba(var(--glow-rgb), 0.22); border-color: rgba(var(--glow-rgb), 0.72); color: #A9DCF7; box-shadow: 0 0 18px rgba(var(--glow-rgb), 0.38); }
  68%,100% { background: rgba(var(--glow-rgb), 0.14); border-color: rgba(var(--glow-rgb), 0.40); color: var(--accent-hover); box-shadow: none; }
}
@keyframes bkarte-ring-3 {
  0%, 34%  { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  40%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  96%,100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes bkarte-tap-3 {
  0%, 38%  { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  42%      { opacity: 0.85; transform: translate(-50%, -50%) scale(0.8); }
  52%      { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
  64%      { opacity: 0.7; transform: translate(-50%, -50%) scale(0.8); }
  74%,100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

/* ---------- Zwei Spalten ab 1180px ---------- */
@media (min-width: 1180px) {
  .bkarte__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
}

/* ---------- Ohne JavaScript und bei abgestellter Bewegung: Endzustand ---------- */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .bkarte :is(.bkarte__scrim, .bkarte__blob, .bkarte__ring, .bkarte__tap, .bkarte__pin, .bkarte__badge, .bkarte__item--call, .bkarte__call-icon) {
    animation: none;
  }
  .bkarte :is(.bkarte__blob, .bkarte__ring) { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .bkarte__pin { opacity: 1; transform: scale(1); }
  .bkarte__tap { opacity: 0; }
  .bkarte__item--call { opacity: 1; transform: none; }
  .bkarte__seite--alt { animation: none; opacity: 0; }   /* Standbild = Seite 1 */
}


/* ===========================================================================
   DAS BESE-SYSTEM — Der Ablauf (Fassung 6, 2026-09-17)

   Marie: „soll das auch wirklich so in drei Etappen sein … Du hast es
   jetzt in einem Kreis dargestellt. Ich möchte aber noch mal so einen
   genauen Ablauf haben."

   AUFBAU: drei Etappen nebeneinander (01 Kanäle · 02 Premium-Seite ·
   03 Anfrage und Bewertung), dazwischen zwei Pfeile, darunter die
   Rückkopplung, die den Kreis schließt. Danach zwei Abschluss-Absätze.

   ⚠ KEIN `.bsys-mod` — die Etappen heißen `.bsys-et`. Bis zum 17.09. stand
   hier das Gegenteil: die Startseiten-Fassung dieses Ablaufs trug `.bsys-mod`
   mit, weil dort Datenkarten an `.bsys-mod.is-in` hingen. Diese Fassung hat
   keine Datenkarten, und die Startseiten-Fassung ist zurückgebaut
   (`_ARCHIV-bese-system-fassung5.html`). Die vier Zeilen
   `top/min-height/transform/will-change` in `.bsys-et` stammen aus jener
   Neutralisierung und sind seitdem wirkungslos — sie stehen als Schutz,
   falls die Klasse je zurückkommt.

   DUNKLES BAND (seit 17.09.): die Section ist auf ihrer einzigen Seite eine
   Dunkel-Insel. Genau dafür ist das Motiv gebaut — Zuläufe, Funke und
   Rückkopplungs-Punkt sind additives Licht und brauchen dunklen Grund.
   Der frühere Light-Umfärbungs-Block (deckendes Markenblau statt Schein,
   weiße Kacheln) ist ersatzlos entfallen; an seiner Stelle steht ein
   Kommentar mit dem Rezept, falls die Section je wieder hell wird.
   =========================================================================== */

.bsys-flow { margin-top: clamp(32px, 4vw, 60px); }
.bsys-flow__reihe {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
/* Drei Spalten erst ab 1280 px: darunter faellt die 16:10-Buehne unter die
   Hoehe, die die fuenf Kanal-Kacheln brauchen — gemessen bei 1180 px 186 px
   Buehne gegen 250 px Inhalt, wodurch Etappe 01 aus der Flucht mit ihren
   Nachbarn lief. Ab 1280 px sind es 207 gegen 194 px, die Flucht haelt. */
/* Knapperer Section-Abstand (17.09.2026, Marie: „viel zu hoch").
   `--section-py-tight` ist exakt die Haelfte von `--section-py` und laut
   Token-Kommentar fuer thematisch zusammengehoerende Nachbarn gedacht — das
   trifft hier zu: ws-system und ws-stufen tragen seit dem 17.09. denselben
   Bandton und lesen sich als eine Zone.

   ⚠ ERST AB 768 px. Beidseitig gesetzt halbiert der Token auch den
   MINDESTABSTAND zwischen zwei Sektionen; mobil waeren das 2 x 24 px gegen
   die CI-Vorgabe von 96 px (DIGITAL_CI.md:442). Genau diese Falle hat die
   Blickkarte am 16.09. gerissen. Ab 768 px traegt die Naht 104 px. */
@media (min-width: 768px) {
  .page-website .ws-system { padding-block: var(--section-py-tight); }
}

@media (min-width: 1280px) {
  .bsys-flow__reihe {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 0;
    /* stretch, NICHT start (Stand bis 17.09.): mit `start` endete jede Karte
       dort, wo ihr Inhalt endet — gemessen 459 / 562 / 415 px, also drei
       verschiedene Unterkanten. Gestreckt sind alle gleich hoch, und weil die
       Buehne per `margin-top: auto` unten sitzt und bei allen dreien dasselbe
       Seitenverhaeltnis hat, fluchten auch ihre Oberkanten. */
    align-items: stretch;
  }
}

/* ---------- Eine Etappe ---------- */
.bsys-et {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 1.8vw, 24px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 56px -30px rgba(var(--shadow-rgb), 0.5);
  /* Stapel-Mechanik aus .bsys-mod herausnehmen */
  top: auto; min-height: 0; transform: none; will-change: auto;
}
.bsys-et::before { content: none; }

/* Die Buehne — der gemeinsame Nenner aller drei Etappen.
   `margin-top: auto` schiebt sie in jeder Karte nach unten, das gleiche
   Seitenverhaeltnis macht sie in allen dreien gleich hoch → Ober- UND
   Unterkante fluchten, ohne feste Pixelhoehe und ohne Subgrid.
   16:10 ist das Verhaeltnis der Musterseiten-Datei (1600 x 1000): so bleibt
   das Bild unbeschnitten und die gemessenen Ring-Werte (14,5 / 85,5 %)
   gelten unveraendert. */
/* min-height: 0 ist Pflicht: ohne sie schuetzt das voreingestellte
   `min-height: auto` den Inhalt, und eine Buehne mit mehr Inhalt als Platz
   waechst ueber die aspect-ratio hinaus — genau daran lief das Netz aus der
   Flucht. */
.bsys-et__viz { margin: auto 0 0; aspect-ratio: 16 / 10; min-height: 0; }

/* ⚠ HIER KEIN `margin` SETZEN. Das Element ist ein <figure> und braucht den
   Browser-Default (1em 40px) weg — das erledigt `.bsys-et__viz` mit
   `margin: auto 0 0`. Ein eigenes `margin: 0` an dieser Stelle steht SPAETER
   in der Datei, gewinnt bei gleicher Spezifitaet und nimmt der Buehne das
   `auto`: gemessen sass Etappe 02 dadurch bei 1280 px 23 px zu hoch, weil
   ihr Satz nur zwei Zeilen laeuft. */
.bsys-et__bild {
  position: relative; border-radius: var(--radius-md);
  overflow: hidden; background: var(--surface-2);
}
.bsys-et__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.bsys-et__bild--seite img { object-position: 50% 0; }
.bsys-et__num {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 11px; font-weight: var(--weight-semibold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-300);
}
.bsys-et__num b {
  font-family: var(--font-display); font-size: 21px; font-weight: 400;
  letter-spacing: 0; color: var(--accent-hover); line-height: 1;
}
.bsys-et__titel {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 1.8vw, 27px); line-height: 1.16; color: var(--heading-color);
}
/* Zwei Zeilen Mindesthoehe ab drei Spalten: „Jeder Anruf in Euro." laeuft
   einzeilig, die beiden Nachbarn zweizeilig — ohne diese Zeile begaenne der
   Satz der dritten Etappe 31 px hoeher als bei den anderen. */
@media (min-width: 1280px) {
  .bsys-et__titel { min-height: calc(2 * 1.16em); }
}

/* Zwischen 720 und 1279 px steht jede Etappe zweispaltig: Text links, Buehne
   rechts. Gestapelt in voller Breite waere die 16:10-Buehne bei 1180 px
   670 px hoch (gemessen) und die Section 3275 px — nebeneinander sind es
   rund 314 px je Buehne. Unter 720 px stapelt es wieder, dort ist die Spalte
   schmal genug. */
@media (min-width: 720px) and (max-width: 1279px) {
  .bsys-et {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(20px, 2.4vw, 32px);
  }
  .bsys-et__num   { grid-area: 1 / 1; }
  .bsys-et__titel { grid-area: 2 / 1; }
  .bsys-et__satz  { grid-area: 3 / 1; }
  .bsys-et__viz   { grid-area: 1 / 2 / 4 / 3; margin-top: 0; align-self: center; }
}
.bsys-et__satz { margin: 0 0 4px; font-size: 14.5px; line-height: 1.62; color: var(--text-200); }

/* Der Tipp auf dem Anruf-Knopf der Musterseite */
.bsys-et__ring, .bsys-et__tap {
  /* Lage je Seite als Custom Properties am Element (seit 18.09.2026: drei
     Kundenseiten, Ring + Welle auf der Telefonnummer); die Rückfallwerte
     sind die alte Lage auf dem Anruf-Knopf der Musterseite */
  position: absolute; left: var(--x, 14.5%); top: var(--y, 85.5%); transform: translate(-50%, -50%);
  width: var(--w, 17%); height: var(--h, 15%); border-radius: 9999px; pointer-events: none; opacity: 0;
}
/* ⚠ `paused` wie alle anderen Schleifen dieses Blocks. Ohne die Kopplung an
   `.is-live` liefen Ring und Welle ab dem ersten Paint durch und standen beim
   Erreichen der Section an einer zufälligen Stelle ihres 11-s-Zyklus,
   während Funke, Pfeile und Anruf-Zeilen frisch bei 0 s starten — die als
   EIN Ablauf gedachte Folge (Zulauf → Pfeil → Tipp → Pfeil → Anruf) war
   damit nicht synchron. */
.bsys-et__ring {
  border: 2px solid rgba(255, 255, 255, 0.95);
  animation: bsys-ring 11s ease-in-out infinite; animation-play-state: paused;
}
.bsys-et__tap {
  border: 2px solid rgba(var(--glow-rgb), 0.9);
  animation: bsys-tap 11s ease-in-out infinite; animation-play-state: paused;
}
@keyframes bsys-ring { 0%, 30%, 46%, 100% { opacity: 0; } 34%, 42% { opacity: 1; } }
@keyframes bsys-tap {
  0%, 32%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  36% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  46% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

/* ---------- Der Baukasten in Etappe 01 ----------
   Fuenf Bauteile fahren versetzt ein, ihr Zapfen rastet in die Schiene rechts,
   die sich danach auflädt und den Strom an Etappe 02 weitergibt. Loest am
   17.09. die fuenf losen Kacheln mit Zulauf-Linien ab (Marie: „das verstehe ich
   bei 01 nicht wirklich: wie es zusammenspielt … so einen Baukasten, wo die
   gesteckt werden"). Markup der Vorgänger-Fassung im Website-Archiv, Block 7.

   ⚠ ZEITPLAN: alles rechnet im 11-s-Zyklus des Ablaufs. Die Teile stecken bis
   1,65 s, die Schiene ist bei 2,0 s voll — der erste Pfeil startet bei 1,9 s.
   Wer eine Dauer aendert, zieht die Pfeil-Delays mit. */
.bsys-bau {
  display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: stretch;
}
.bsys-bau__block {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
/* Der schmale Spalt von 4 px ist Absicht: enger als eine Kachel-Liste, weit
   genug, dass die Teile als EINZELNE Bauteile lesbar bleiben. */
.bsys-bau__teil {
  position: relative; flex: 1 1 0; min-height: 0;
  display: flex; align-items: center;
  padding: 0 13px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.3; color: var(--text-100);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0; transform: translateX(-26px);
  animation: bsys-bau-teil 11s cubic-bezier(.22, .9, .3, 1) infinite;
  animation-play-state: paused;
}
/* Der Zapfen — er überbrueckt den Spalt zur Schiene und ist das, was „gesteckt"
   sichtbar macht. Breite = halbe Schienenspalte minus halbe Schienenbreite. */
.bsys-bau__teil::after {
  content: ''; position: absolute; right: -14px; top: 50%; translate: 0 -50%;
  width: 14px; height: 9px; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.55), rgba(var(--glow-rgb), 0.9));
}
.bsys-bau__teil--1 { animation-delay: 0.05s; }
.bsys-bau__teil--2 { animation-delay: 0.20s; }
.bsys-bau__teil--3 { animation-delay: 0.35s; }
.bsys-bau__teil--4 { animation-delay: 0.50s; }
.bsys-bau__teil--5 { animation-delay: 0.65s; }
@keyframes bsys-bau-teil {
  0%        { opacity: 0; transform: translateX(-26px); }
  9%        { opacity: 1; transform: translateX(0); }
  70%       { opacity: 1; transform: translateX(0); }
  78%, 100% { opacity: 0; transform: translateX(-26px); }
}

/* Die Schiene: leerer Kanal, der sich füllt, sobald alle Teile stecken. */
.bsys-bau__schiene { position: relative; }
.bsys-bau__schiene::before {
  content: ''; position: absolute; left: 50%; translate: -50% 0; top: 4%; bottom: 4%;
  width: 6px; border-radius: 3px;
  background: rgba(179, 204, 223, 0.16);
}
.bsys-bau__fuellung {
  position: absolute; left: 50%; translate: -50% 0; top: 4%; bottom: 4%;
  width: 6px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-hover), rgba(var(--glow-rgb), 0.55));
  box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.55);
  transform-origin: top; transform: scaleY(0);
  animation: bsys-bau-fuell 11s cubic-bezier(.3, .8, .3, 1) infinite;
  animation-play-state: paused; animation-delay: 1.45s;
}
@keyframes bsys-bau-fuell {
  0%        { transform: scaleY(0); }
  5%        { transform: scaleY(1); }
  68%       { transform: scaleY(1); }
  74%, 100% { transform: scaleY(0); }
}
/* Der Funke verlässt die Schiene nach unten — die Übergabe an den Pfeil. */
.bsys-bau__funke {
  position: absolute; left: 50%; translate: -50% 0; top: 4%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); opacity: 0;
  box-shadow: 0 0 14px 3px rgba(var(--glow-rgb), 0.8);
  animation: bsys-bau-funke 11s ease-in infinite;
  animation-play-state: paused; animation-delay: 1.55s;
}
/* `top` statt `translateY`: Prozente beziehen sich hier auf die HOEHE der
   Schiene und stimmen deshalb auf jeder Bühnengroesse — eine feste
   Pixel-Länge wäre bei 237 px (1440) und 258 px (1728) unterschiedlich falsch. */
@keyframes bsys-bau-funke {
  0%       { opacity: 0; top: 4%; }
  1.6%     { opacity: 1; top: 4%; }
  4.4%     { opacity: 1; top: calc(96% - 9px); }
  6%, 100% { opacity: 0; top: calc(96% - 9px); }
}

/* ---------- Die Wärmeflecken in Etappe 02 ----------
   Die Flecken selbst tragen die Klassen der Blickkarte (`.bkarte__blob…`) —
   dasselbe Rezept, dieselben auf dieses Bild vermessenen Koordinaten. Hier
   stehen nur die zwei Träger und der Schalter. */
/* Scrim und Anhebung sind GEMESSEN, nicht geschätzt: die Bühne hier ist mit
   379 px nur gut halb so breit wie die der Blickkarte, entsprechend kleiner
   sind die Flecken. Bei 0,42 ohne Anhebung waren sie im gerenderten Bild nur
   ein Schimmer (obwohl der Pixelvergleich +185 Helligkeitsstufen auf 19 % der
   Fläche meldete — die Messung sagt nichts darüber, ob man es SIEHT).
   0,55 entspricht der Blickkarte; die Musterseite bleibt darunter lesbar. */
.bsys-et__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(6, 10, 14, 0.55);
}
.bsys-et__heat {
  position: absolute; inset: 0; pointer-events: none;
  /* Der Filter ist der EINZIGE Unterschied zum Original `.bkarte__heat` — dort
     traegt die grosse Bühne die Flecken ohne Anhebung. Siehe Messung oben. */
  mix-blend-mode: screen; filter: brightness(1.35) saturate(1.1);
}
/* ⚠ 11 s STATT DER BLICKKARTEN-DAUER. Die Blickkarte läuft in 8-s-Takten
   (bis 18.09.2026: 12 s), der Ablauf in 11 — die Wolken-Keyframes sind
   geteilt, ohne diese Zeile liefen sie hier im Blickkarten-Takt und drifteten
   gegen den Ablauf (deckungsgleich erst nach 88 s, vorher 132 s). Das
   trifft ausgerechnet den Moment, auf den es hier ankommt: der Tipp-Ring auf
   dem Anruf-Knopf (11 s) soll leuchten, WAEHREND der Knopf-Wärmefleck an ist
   (12 s) — ab der zweiten Runde faellt der Fleck sonst in sein eigenes
   Dunkel-Fenster und der Ring pulst auf einem unbeleuchteten Knopf.
   Die Regel ist auf den Ablauf gescoped, die Blickkarte bleibt bei 8 s. Seit
   dem Seitenwechsel (18.09.) hängt daran zusätzlich, dass am Ende jedes
   11-s-Durchlaufs alle Wolken bei 0 stehen — dort wechselt die Seite. */
.bsys-et__heat .bkarte__blob { animation-duration: 11s; }

.bsys-flow.is-live .bsys-bau__teil,
.bsys-flow.is-live .bsys-bau__fuellung,
.bsys-flow.is-live .bsys-bau__funke,
.bsys-flow.is-live .bkarte__blob,
.bsys-flow.is-live .bsys-et__ring,
.bsys-flow.is-live .bsys-et__tap { animation-play-state: running; }

/* ---------- Etappe 02 — drei Seiten im Wechsel (18.09.2026) ----------
   Dieselben drei Kundenseiten wie Hero und Blickkarte, EINE je Durchlauf des
   Ablaufs (11 s, 33 s die Runde). Seite 1 liegt unten und bleibt stehen,
   Seite 2 und 3 blenden darüber (Muster wie Blickkarte/Hero: kein
   Helligkeits-Loch). Der Wechsel liegt am Durchlauf-Ende — die Wolken haben
   ihre eigenen Takt-Keyframes (s. Blickkarte) und stehen dort bei 0, Ring
   und Welle ebenso. Läuft unter .bsys-flow.is-live wie alles im Ablauf. */
.bsys-et__seite { position: absolute; inset: 0; }
.bsys-et__seite--alt {
  opacity: 0;
  animation: bsys-wechsel-2 33s linear 11s infinite; animation-play-state: paused;
}
.bsys-et__s3 { animation-name: bsys-wechsel-3; animation-delay: 22s; }
.bsys-et__seite--dunkel .bsys-et__scrim { background: rgba(6, 10, 14, 0.3); }   /* Platzhirsch: dunkler Foto-Hero */
.bsys-flow.is-live .bsys-et__seite--alt { animation-play-state: running; }
/* 33 s, 1 % = 0,33 s: einblenden in 0,6 s, 11 s stehen */
@keyframes bsys-wechsel-2 {
  0%            { opacity: 0; }
  1.82%, 35.15% { opacity: 1; }
  35.2%, 100%   { opacity: 0; }
}
@keyframes bsys-wechsel-3 {
  0%            { opacity: 0; }
  1.82%, 33.33% { opacity: 1; }
  35.15%, 100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .bsys-et__seite--alt { animation: none; opacity: 0; }   /* Standbild = Seite 1 */
}

/* ---------- Die Pfeile zwischen den Etappen ----------
   ⚠ Sie brauchen `align-items: stretch` auf der Reihe. Mit dem frueheren
   `start` war das Pfeil-Item genau 0 px hoch (gemessen) — Strich und Funke
   sind absolut positioniert und hatten damit keinen Raum: beide Pfeile waren
   unsichtbar. Gestreckt ist das Item so hoch wie die Karten, der Strich sitzt
   mittig zwischen ihnen. */
.bsys-pfeil { display: none; }
@media (min-width: 1280px) {
  .bsys-pfeil { position: relative; display: flex; align-items: center; justify-content: center; }
  .bsys-pfeil::before {
    content: ''; position: absolute; left: 6px; right: 6px; height: 1px;
    background: rgba(179, 204, 223, 0.20);
  }
  .bsys-pfeil i {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: var(--white); opacity: 0;
    box-shadow: 0 0 16px 3px rgba(var(--glow-rgb), 0.7);
    animation: bsys-durch 11s ease-in-out infinite; animation-play-state: paused;
  }
  .bsys-pfeil--1 i { animation-delay: 1.9s; }
  .bsys-pfeil--2 i { animation-delay: 4.3s; }
  .bsys-flow.is-live .bsys-pfeil i { animation-play-state: running; }
  @keyframes bsys-durch {
    0% { left: 2px; opacity: 0; } 2% { opacity: 1; }
    6% { left: calc(100% - 11px); opacity: 1; }
    8%, 100% { left: calc(100% - 11px); opacity: 0; }
  }
}

/* ---------- Die Rückkopplung ---------- */
.bsys-rueck { position: relative; margin-top: 0; padding-top: 56px; }
.bsys-rueck__bahn { position: absolute; left: 0; top: 0; width: 100%; height: 56px; overflow: visible; }
.bsys-rueck__bahn path { fill: none; stroke: rgba(179, 204, 223, 0.30); stroke-width: 2; stroke-dasharray: 7 9; vector-effect: non-scaling-stroke; }
.bsys-rueck__punkt { fill: #B3CCDF; filter: drop-shadow(0 0 8px rgba(179, 204, 223, 0.65)); }
@media (prefers-reduced-motion: reduce) {
  .bsys-bau__teil, .bsys-bau__fuellung, .bsys-bau__funke,
  .bsys-pfeil i, .bsys-et__ring, .bsys-et__tap, .bkarte__blob { animation: none; }
  .bsys-bau__teil { opacity: 1; transform: none; }
  .bsys-bau__fuellung { transform: scaleY(1); }
  .bkarte__blob { opacity: 1; transform: translate(-50%, -50%); }   /* Zentrierung fehlte bis 18.09. — die Wolken standen um eine halbe Größe versetzt */
  .bsys-bau__funke, .bsys-pfeil i, .bsys-et__ring, .bsys-et__tap { opacity: 0; }
}
/* Ohne JavaScript setzt nichts `.is-live` — dann staenden die Zulaeufe auf
   25 % und die Schiene ungefuellt da, der Ablauf saehe halbfertig aus statt
   ruhig. Hier der Endzustand, denselben Weg gehen die M3-Sections. */
@media (scripting: none) {
  .bsys-bau__teil { opacity: 1; transform: none; }
  .bsys-bau__fuellung { transform: scaleY(1); }
  .bkarte__blob { opacity: 1; transform: translate(-50%, -50%); }
  .bsys-bau__funke { opacity: 0; }
  .bsys-anrufe__row { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   KEIN Light-Block mehr (Stand 17.09.2026)

   Bis zum 17.09. lag hier eine ganze Umfaerbung fuer das helle Band: weisse
   Kanal-Kacheln, weisse Etappen-Karten, deckende Markenblau-Striche statt
   Schein. Sie ist ersatzlos entfallen, weil die Section jetzt in BEIDEN
   Themes eine Dunkel-Insel ist (Marie 17.09.: „zu hell") — damit gelten die
   Basis-Regeln oben, und Zulaeufe, Funke und Rueckkopplungs-Punkt duerfen
   endlich das sein, wofuer sie gebaut sind: Licht auf dunklem Grund.

   Kaeme die Section je auf ein helles Band zurueck, muss dieser Block mit —
   sonst stehen Cyan-Schein und Glow auf Weiss und verschwinden (Lehre vom
   Startseiten-Hero, vom Rad und von der Blickkarte).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Der Kopf der Section zweispaltig (17.09.2026, Marie: „viel zu hoch")

   Gemessen war der Kopf 353 px von 1538 px Section — der zweitgroesste
   Einzelposten nach dem Ablauf selbst: die H2 lief zweizeilig, darunter der
   Intro-Absatz auf 760 px ueber sechs Zeilen. Nebeneinander gestellt teilen
   sich beide dieselbe Hoehe. Die Copy bleibt dabei Wort fuer Wort stehen —
   gekuerzt wird nichts, nur anders gesetzt.

   Der Zwei-Teile-Test (§0a) bleibt erfuellt: im Kopf stehen Pille, H2 und
   EIN Text-Element. Genau hier ist die Blickkarte am 16.09. gerissen (dort
   waren es Subline UND Lead).
   --------------------------------------------------------------------------- */
@media (min-width: 1180px) {
  .page-website .ws-system__head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    column-gap: clamp(48px, 5vw, 92px);
    row-gap: var(--space-4);
    align-items: start;
  }
  /* justify-self: start ist Pflicht — als Grid-Item wuerde die Pille sonst
     auf die volle Spaltenbreite gestreckt. */
  .page-website .ws-system__head > .eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .page-website .ws-system__head > h2      { grid-column: 1; grid-row: 2; }
  .page-website .ws-system__head > p       { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 58ch; }
}


/* ===========================================================================
   M3 — „VIER LEISTUNGEN, EIN SYSTEM" (.lsys) — Startseite
   ---------------------------------------------------------------------------
   Runde 1 (16./17.09.2026): Übersicht + vier eigene Leistungs-Sections.
   Runde 2 (17.09., Marie: „vom CI her komplett überarbeiten … es kommt nicht
   rüber, dass die Sections zusammengehören … übereinander lappen, so ein
   Scroll-Effekt wie bei ‚Wie wir arbeiten' … auf dem weißen Hintergrund, aber
   die Kacheln dunkel"): EINE Section auf weißem Band — Kopf (Pille + H2), der
   Index aus vier Dunkel-Kacheln (.lsnav) und darunter der MODUL-STAPEL aus vier
   Dunkel-Karten (.lsys-stack > .lcard), die sich beim Scrollen übereinander
   schieben wie die Module des Bese-Systems (dieselbe Engine in scripts.html:
   [data-bsys-stack] setzt --stk 0…1 je Karte; < 1024 px / reduced-motion kein
   Stapel). Kachel und Karte teilen EIN Material (Abschnitt 2).

   CI-Bereinigung gegenüber Runde 1 (DIGITAL_CI.md):
     · Karten-Material = Solid Card (Sektion 09): Dark-Theme Surface 3→2→1
       (#192939 → #131F2B → #0C141C), Verlauf senkrecht, CI-Schatten; im
       Light-Theme die Charcoal-Familie (§5a, Marie 03.08.). Vorher standen
       erfundene Navy-Töne (#1B2836…) hart in der Basis — und die Karte lief
       in BEIDEN Themes charcoal, das Dark-Theme war damit gebrochen.
     · Headline-Verlauf senkrecht (180deg, Sektion 05) statt 100deg; die
       Verlaufs-Tokens --em-grad-a/-b gehören ins Token-Paket der Dunkel-Karte,
       sonst läuft der Light-Verlauf Navy→Markenblau auf Charcoal.
     · Facetten- und Strich-Icon nicht in derselben Kachel (Sektion 13,
       Regel 11): der Sprungpfeil ist raus. Facetten-Icon 48 px (Feature-Kachel).
     · Eyebrow-Pille nur auf dem schlanken Section-Kopf; im Karten-Kopf die
       Kapitel-Marke (Caption-Pattern 12 px/700/Versalien + Display-Nummer,
       wie .bsys-mod__tag). H3 statt H2 in den Karten (eine Section, eine H2);
       H3 im Display-Font = dokumentierte §5a-Ausnahme (Card-Headline).
     · Übergänge ≤ 0,7 s (Sektion 19), Farben nur über Tokens, Text-Rampe der
       Dunkel-Karte = Dark-Tokens (Sektion 04a „innerhalb des dunklen Abschnitts
       gelten die Dark-Tokens").

   Runde 3 (17.09., Marie: „doch zu viel, dass man diese 4 Kacheln am Anfang
   zeigt … für die Startseite raus … nur diese vier Kacheln, die sich
   überlappen, drin lassen" + „das Icon … statt der 01 … auf allen vier
   Kacheln" + „vom Corporate Design her überarbeiten … Abstände"):
     · Der INDEX (.lsnav) ist NICHT mehr eingebunden (Markup in
       _ARCHIV-leistungen-index-kacheln.html); sein CSS in Abschnitt 3 bleibt
       REAKTIVIERBAR — Marie: „im Hinterkopf behalten für andere Seiten".
     · Kapitel-Zeichen der Karten = Facetten-Icon (.lcard__facet, 44 px) statt
       Display-Nummer; Caption bleibt (12 px/700/Versalien, Tracking 0,2 em =
       CI-Caption 2,5 px).
     · Die Bühne liegt in einem RAHMEN .lstage__box (760:640), mittig in der
       Bühnenhöhe; die Bühne selbst füllt die Karte (align-self: stretch).
       Vorher gab die Bühne ihr Seitenverhältnis selbst vor und blieb 76 px
       unter der Textspalte — leerer Streifen unter jeder Bühne (gemessen).
       Der Hinweis „Beispielhafte Darstellung" steht im Fluss UNTER dem
       Rahmen (auf Karte 02 lag er über dem Suchergebnis).
     · Raster: Stapel-Stufe 16 px, Kapitel-Marke → H3 24 px, Textspalte
       32–56 px Polster; Weiterlink mit Strich-Pfeil rechts (16 px), Bühnen-
       Innenradius um die 1-px-Kante kleiner als der Kartenradius.

     1 · Section + Kopf (.lsys)
     2 · Material Kachel + Karte (geteilt)
     3 · Index (.lsnav) — seit Runde 3 ohne aktiven Nutzer, reaktivierbar
     4 · Stapel (.lsys-stack, .lcard) + Textspalte + Bühnen-Basis
     5 · Bühne 01 .kal      Kalender-Gegenüberstellung
     6 · Bühne 02 .gse      Google-Ergebnisseite · Unternehmensprofil · ChatGPT
     7 · Bühne 03 .bkm      Die Heatmap auf drei Kundenseiten im Wechsel (eigene Zeitachse)
     8 · Bühne 04 .mafo     Der Monteur am Fahrzeug (echtes Foto aus einem Partnerbetrieb, Erich 18.09.)
     9 · Light-Theme        weißes Band + Charcoal-Material
    10 · Responsivität
    11 · Reveal / reduced-motion
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 · SECTION + KOPF
   --------------------------------------------------------------------------- */

.lsys {
  position: relative;
  padding-block: var(--section-py);
  --lsys-nav: 73px;                                                    /* Sticky-Navbar (72 + 1 px Border), wie --bsys-nav */
  --lsys-stack-top: calc(var(--lsys-nav) + clamp(16px, 2.4vw, 32px));
  --lsys-stack-step: 16px;                                             /* je Karte tiefer → die Kanten der vorigen bleiben sichtbar (8-px-Raster, Runde 3) */
  /* Karten-Material, Dark-Theme = CI Solid Card (Surface 3 → 2 → 1); Light in Abschnitt 9 */
  --lk-a: #192939;
  --lk-b: #131F2B;
  --lk-c: #0C141C;
  --lb-a: #131F2B;                                                     /* Bühnenfläche: eine Stufe tiefer als die Karte */
  --lb-b: #0C141C;
}
.lsys__header { margin-bottom: var(--space-7); }
.lsys__title { hyphens: manual; }

/* ---------------------------------------------------------------------------
   2 · MATERIAL — Kachel (.lsnav__card) und Karte (.lcard) sind DIESELBE
   Karten-Dunkel-Insel (CI Solid Card + Grid-Muster/Glas-Schimmer nach dem
   Karriere-Rezept, §5a). Lokales Dark-Token-Paket (04a), EIN Akzent (--akz).
   --------------------------------------------------------------------------- */

.lsnav__card,
.lcard {
  --heading-color: var(--white);
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-500: rgba(255, 255, 255, 0.08);   /* die Ghost-Nummer .lsnav__num — ohne die Zeile gewinnt das Light-Token (Tinte) und die Zahl verschwindet auf Charcoal (Guardian 17.09.) */
  /* HART, nicht var(--silver-blue): das Light-Theme biegt --silver-blue auf
     #44627C um — der Verlauf lief auf der Dunkel-Karte dann von Schiefer nach
     Cyan statt Silver Blue → Cyan (Marie 17.09.: „der Verlauf von den kursiven
     Überschriften ist da noch nicht richtig", gemessen). Die konsolidierte
     Insel-Regel setzt dieselben Werte ebenfalls hart. */
  --em-grad-a: #B3CCDF;
  --em-grad-b: #4DA8DA;
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --focus-ring: #FFFFFF;                   /* Dark-Wert — das Light-Token wäre Tinte auf Charcoal (Weiterlink-Fokusring, 17.09.) */
  --akz: #4DA8DA;
  --akz-rgb: 77, 168, 218;   /* ohne das Tripel wären alle rgba(var(--akz-rgb))-Verläufe der Bühnen ungültig (gemessen: background none) */
  color: var(--text-100);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(ellipse 74% 72% at 12% -8%, rgba(var(--glow-rgb), 0.11) 0%, transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--lk-a) 0%, var(--lk-b) 52%, var(--lk-c) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25),
    0 4px 24px rgba(0, 0, 0, 0.30);
}

/* ---------------------------------------------------------------------------
   3 · INDEX — vier Kacheln (Links, keine Überschriften), je ein Satz
   ⚠ Seit Runde 3 (17.09.) OHNE aktiven Nutzer: das Markup liegt in
   _ARCHIV-leistungen-index-kacheln.html (Marie: für andere Seiten im
   Hinterkopf behalten). Regeln bewusst stehen gelassen — Wiedereinbau ist
   damit reines Markup. Präzedenz: die Website-Archiv-Sections.
   --------------------------------------------------------------------------- */

.lsnav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 clamp(36px, 4.4vw, 64px);
  padding: 0;
  list-style: none;
}

.lsnav__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-lg);                     /* Standard-Karte (CI Sektion 06) */
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.lsnav__card:hover,
.lsnav__card:focus-visible {
  transform: translateY(-4px);                          /* Card-Regel: Hover hebt um −4 px */
  border-color: var(--glass-border-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25),
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(var(--glow-rgb), 0.08);
}

/* Editoriale Nummer: groß, leise, oben rechts — dieselbe Nummer trägt unten die Karte (.lcard__tag) */
.lsnav__num {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-500, rgba(255, 255, 255, 0.08));
  pointer-events: none;
}

.lsnav__facet {
  display: block;
  width: 48px;                                          /* Facetten-Icon in der Feature-Kachel: 44–48 px (CI Sektion 13) */
  margin-bottom: var(--space-6);
  filter: drop-shadow(0 8px 18px rgba(var(--glow-rgb), 0.28));
}
.lsnav__facet svg { width: 100%; height: auto; display: block; }

.lsnav__name {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: clamp(1.125rem, 1.3vw, 1.375rem);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--heading-color);
  hyphens: auto;
}

/* Farbe am <p> selbst gesetzt: die globale Absatz-Regel färbt <p> direkt (nicht
   über Vererbung) — über das lokale Token bleibt die Dark-Rampe erhalten. */
.lsnav__line { margin: 0 0 var(--space-5); font-size: var(--text-small); line-height: 1.6; color: var(--text-200); }

.lsnav__jump {
  position: relative;
  margin-top: auto;
  align-self: flex-start;
  padding-bottom: 2px;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--accent-hover);
}
.lsnav__jump::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform var(--duration) var(--ease);
}
.lsnav__card:hover .lsnav__jump::after,
.lsnav__card:focus-visible .lsnav__jump::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   4 · STAPEL — vier sticky Karten (Mechanik 1:1 .bsys-mod) + Textspalte +
   Bühnen-Basis. Die Bühne ist ein Container (cqw), festes Seitenverhältnis
   760:640; Leistung 02–04 setzen ihre Grundschrift auf die KINDER (1em =
   1,3158cqw = 10 px bei 760 px), Leistung 01 rechnet direkt in cqw.
   --------------------------------------------------------------------------- */

.lsys-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 56px);                          /* Endpunkte auf dem 8-px-Raster (CI-Prüfer 17.09.) */
}

/* Bewusst OHNE Hover-Lift (CI 09 „Hover hebt um −4 px"): die Karte ist sticky
   und wird von der Engine per `transform: scale()` gestapelt — ein zweiter
   Transform auf :hover liefe gegen den Stapel und ließe die Karte springen.
   Interaktiv ist nur der Weiterlink, und der hat seinen Hover. */
.lcard {
  --stk: 0;                                             /* 0 = frei, 1 = von der nächsten Karte voll überdeckt (JS) */
  --i: 0;
  position: sticky;
  top: calc(var(--lsys-stack-top) + var(--i) * var(--lsys-stack-step));
  scroll-margin-top: calc(var(--lsys-stack-top) + var(--i) * var(--lsys-stack-step));   /* Sprung aus dem Index landet exakt auf der Stapel-Kante */
  min-height: var(--bsys-mod-h, auto);                  /* alle Karten gleich hoch — die Engine misst die höchste (Guardian 08.09.) */
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  border-radius: var(--radius-xl);                      /* große Karte (CI Sektion 06) */
  /* KEIN overflow: hidden — die Karte trägt die H3 (§1.6). Die Bühne clippt sich selbst. */
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--stk) * 0.06));
  will-change: transform;
}
/* Abdunklung der überdeckten Karte als OVERLAY statt filter (§5a-Flicker-Falle) —
   Farbe = Surface-0 als Roh-Tripel, theme-fest; pointer-events aus, damit der
   „Mehr"-Link darunter klickbar bleibt. */
.lcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  background: rgba(6, 10, 14, calc(var(--stk) * 0.28));
  pointer-events: none;
}
.lcard:nth-child(2) { --i: 1; }
.lcard:nth-child(3) { --i: 2; }
.lcard:nth-child(4) { --i: 3; }
.lcard--rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }

/* --- Textspalte ----------------------------------------------------------- */
.lcard__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(32px, 3.6vw, 64px);                    /* Endpunkte = space-6 / space-8 (Runde 3; 64 erst ab 1778 px) */
}

/* Kapitel-Marke: Facetten-Icon + Caption (CI Sektion 13: Facetten-Icons „stehen
   als Kapitel-Zeichen vor Überschriften"; Caption = Sektion 05, 12 px/700/
   Versalien, Tracking 2,5 px ≈ 0,2 em). Bis Runde 3 stand hier die
   Display-Nummer (wie .bsys-mod__tag) — Marie 17.09.: „das Icon, das du bei
   diesen vier Kacheln benutzt hast, statt der 01 … auf allen vier Kacheln". */
.lcard__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;                                /* CI-Caption exakt (Sektion 05) */
  text-transform: uppercase;
  /* Text-Rampe statt CI-Caption-Markenblau: auf der Dunkel-Karte trüge Markenblau
     ~2,3:1 — dieselbe Wahl wie .bsys-mod__tag (Präzedenz) und Maries Regel
     „Blau nur als Akzent". */
  color: var(--text-200);
}
/* 30 px = Kapitel-Zeichen vor Überschriften (CI 13, Regel 9: 24–30 px) — das
   Zeichen der früheren Index-Kachel (dort 48 px als Feature-Kachel), hier in
   seiner CI-Rolle vor der H3; derselbe Schein. Nicht umfärben (Regel 10).
   Guardian + CI-Prüfer 17.09.: 44 px wäre die Feature-Kachel-Stufe. */
.lcard__facet {
  flex: none;
  display: block;
  width: 30px;
  filter: drop-shadow(0 8px 18px rgba(var(--glow-rgb), 0.28));
}
.lcard__facet svg { display: block; width: 100%; height: auto; }

/* H3 im Display-Font = §5a-Ausnahme „H3 als Card-Headline" (Präzedenz .bsys-mod__text h3).
   `hyphens: manual` gegen „Auftrags-lage". */
.lcard__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  hyphens: manual;
  overflow-wrap: break-word;
  padding-right: 0.08em;                                /* CI 05: negatives Tracking am Zeilenende ausgleichen */
}
.lcard__title em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));   /* senkrecht, oben → unten (CI Sektion 05) */
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  white-space: normal;
  padding-inline: 0.08em; padding-block-end: 0.12em;
  margin-inline: -0.04em; margin-block-end: -0.12em;
}

.lcard__lead {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--text-200);
}
.lcard__lead b { color: var(--white); font-weight: var(--weight-semibold); }

.lcard__zusagen {
  display: flex; flex-direction: column; gap: var(--space-4);
  width: 100%; max-width: 46ch;
  margin: var(--space-6) 0 0; padding: var(--space-5) 0 0;
  border-top: 1px solid var(--glass-border);
  list-style: none;
}
.lcard__zusagen li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-body); line-height: 1.5; color: var(--text-200); }
.lcard__zusagen b  { color: var(--white); font-weight: var(--weight-semibold); }
.lcard__check {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; margin-top: 1px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--white);
}
.lcard__check .icon { width: 16px; height: 16px; }   /* CI 13: Inline-Icon 16 px (vorher 13, keine CI-Stufe) */

.lcard__mehr {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--heading-color);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.lcard__mehr:hover { color: var(--accent-hover); }
.lcard__mehr:focus-visible { outline: 2px solid var(--focus-ring, var(--accent-hover)); outline-offset: 2px; border-radius: var(--radius-sm); }   /* CI 14 */
.lcard__mehr .icon { width: 16px; height: 16px; transition: transform var(--duration) var(--ease); }   /* CI 13: Inline-Icon 16 px; Strich-Pfeil rechts = interner Link (Runde 3, vorher ↗) */
/* Pfeil rückt per transform statt über den gap — kein Layout-Sprung (CI 19) */
.lcard__mehr:hover .icon { transform: translateX(4px); }

/* --- Bühnen-Basis ----------------------------------------------------------- */
.lcard__stage {
  position: relative;
  container-type: inline-size;
  /* Die Bühne FÜLLT die Karte (Runde 3) — das Seitenverhältnis 760:640 trägt
     der Rahmen .lstage__box darin, der sich mittig in die Bühnenhöhe legt.
     Ohne das explizite `stretch` behandelt das Grid ein Kind mit aspect-ratio
     wie `start` und ließ 76 px Leerfläche unter der Bühne (gemessen 17.09.). */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 30% 10%, rgba(255, 255, 255, 0.07) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--lb-a) 0%, var(--lb-b) 100%);
}
/* Innenradius = Kartenradius minus die 1-px-Kante der Karte, sonst ragt die
   Bühnenrundung an den Ecken in den Kartenrand (Runde 3). */
.lcard__stage--links  { border-radius: calc(var(--radius-xl) - 1px) 0 0 calc(var(--radius-xl) - 1px); border-right: 1px solid rgba(255, 255, 255, 0.07); }
.lcard__stage--rechts { border-radius: 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0; border-left: 1px solid rgba(255, 255, 255, 0.07); }

/* Der Rahmen: 760:640, volle Breite, mittig im Restraum (margin-block: auto
   im Flex-Column der Bühne). Alle Bühnen-Kinder positionieren sich absolut
   in IHM — cqw rechnet weiter gegen die Bühne (gleiche Breite). Er clippt
   selbst (kein Text mit H1/H2 darin, §1.6 unberührt), damit ein Panel, das
   über den Rahmen läuft (SERP-Panel 58em in 64em), nie den Hinweis darunter
   berührt. */
.lstage__box {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 640;
  margin-block: auto;
  overflow: hidden;
}
/* cqw auf dem Container SELBST würde gegen den nächsten äußeren Container
   (= Viewport) rechnen — deshalb sitzt die Grundschrift auf den KINDERN
   (des Rahmens, seit Runde 3). */
.lstage__box > * { font-size: 1.3158cqw; }
/* Hinweis im FLUSS unter dem Rahmen (vorher absolut am Bühnen-Fuß — auf
   Karte 02 lag er über dem letzten Suchergebnis, gemessen 17.09.). Eigene
   cqw-Grundschrift, weil er kein Rahmen-Kind mehr ist. */
.lstage__hinweis { flex: none; margin: 0 3em; padding-bottom: 1.4em; font-size: max(1.3158cqw, 11px); color: rgba(255, 255, 255, 0.46); white-space: nowrap; }   /* px-Boden: bei 1440 px wäre die Zeile 8,4 px (CI-Prüfer 18.09.) */

/* ---------------------------------------------------------------------------
   5 · BÜHNE 01 — die Kalender-Gegenüberstellung (.kal)
   ---------------------------------------------------------------------------
   Cyan nur auf Heute-Kreis, Pfeil und den zwei Marken — Termine sind dunkle
   Chips wie in jeder Kalender-App (Marie: „Blau ist mir zu präsent"). Die
   weißen Kalender-Blätter sind Geräte-Screens auf der Dunkel-Karte (§5a,
   Präzedenz Bese-AI-Szenen). Alles in cqw = Bühnenbreite.
   --------------------------------------------------------------------------- */

/* Runde 4 (Erichs Übergabe 18.09.): ZIELBILD — zwei volle Kalender, Kundendienst (Woche)
   und Sanierungskolonne (Okt.–März). Kein Vorher, kein Pfeil, kein Kennzahl-Kasten mehr.
   Termine/Blöcke positionieren sich über --c/--r/--s. Runde 5 (19.09.): untereinander statt
   nebeneinander, Vormittag statt Tag (siehe Block unten). */
/* Runde 5 (Marie 19.09.: „die Kalender sind mir zu hoch … nur die Hälfte davon"):
   die zwei Blätter stehen UNTEREINANDER, breit und flach — die Bühne ist fast
   quadratisch (760:640), zwei niedrige Blätter nebeneinander hätten sie halb leer
   gelassen. Der Rahmen ist dafür eine Flex-Spalte, die Blätter liegen im Fluss.
   Unter 560 px gilt weiter die schmale Geometrie mit `zoom` (Mobilblock am
   Dateiende, „3 · Leistungs-Karte 01"). */
.kal-stage .lstage__box {
  display: flex; flex-direction: column; justify-content: center;
  gap: 4.2cqw; padding: 0 4.2cqw;   /* Runde 6: keine Tag-Pillen mehr über den Blättern → weniger Luft nötig */
}
/* Runde 6 (Marie 24.09.: „noch nicht hochwertig … das Blau beim Vorlauf sieht kitschig aus“ —
   aus drei Leinwand-Entwürfen B „Nachtansicht“ gewählt): die Blätter sind selbst DUNKEL wie der
   Dunkelmodus einer Kalender-App — Charcoal mit Lichtkante oben (Präzedenz Glas-Chips der
   Geräte-Flächen, §5a), Termine als Glas-Chips (Weiß-Alpha), EIN Akzent: die dünne Vorlauf-Spur
   in Silver Blue. Keine gefüllte Cyan-Pille, keine Tag-Pillen über den Blättern, keine App-Punkte.
   Kontrast (gerechnet auf #1E2125): Kleintext Weiß .55 ≈ 6,0 : 1, Stunden .5 ≈ 5,2 : 1,
   Chip-Text .92 auf Weiß .10 ≈ 12 : 1. */
.kal {
  position: relative;
  padding: 2.4cqw 2.6cqw 1.8cqw;
  border-radius: 2.1cqw;
  background: linear-gradient(180deg, #22252A 0%, #17191D 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 4cqw 7.9cqw -4cqw rgba(0, 0, 0, 0.95);
}

.kal__head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 0 1.6cqw; }
.kal__titel { display: flex; flex-direction: column; gap: 0.4cqw; min-width: 0; }
.kal__cap { font-size: 1.25cqw; font-weight: var(--weight-bold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.kal__monat { font-size: 2cqw; font-weight: var(--weight-semibold); color: #FFFFFF; white-space: nowrap; }
.kal__vl { display: flex; flex-direction: column; align-items: flex-end; gap: 0.8cqw; }
.kal__vl-zeile { display: flex; align-items: baseline; gap: 1cqw; }
/* Zähler: drei Zustände übereinander, der letzte steht ohne Animation; rechtsbündig an der Spur */
.kal__zahl { display: inline-grid; justify-items: end; font-size: 1.85cqw; font-weight: var(--weight-bold); color: #FFFFFF; white-space: nowrap; }
.kal__zahl > * { grid-area: 1 / 1; }
.kal__zahl > :not(:last-child) { opacity: 0; }
.kal__spur { display: block; width: 17.4cqw; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.kal__spur i { display: block; height: 100%; transform-origin: left center; background: linear-gradient(90deg, rgba(179, 204, 223, 0.15), #B3CCDF 70%, #FFFFFF); }

/* Linien der beiden Blätter */
.kd__grid, .ks__grid {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.kd__grid {
  grid-template-columns: 3cqw repeat(5, minmax(0, 1fr));
  grid-template-rows: 3.8cqw repeat(10, 2.05cqw);   /* Kopfzeile trägt Kürzel + Tageszahl; Vormittag 7–12 Uhr = 10 Halbstunden-Zeilen */
}
/* Sanierungskolonne = ZEITLEISTE: sechs Monatszeilen (Okt.–März), 30 Tagesspalten,
   Baustellen als Balken über Tage — der Maßstab (Monate) ist die Form, nicht die Zahl. */
.ks__grid {
  grid-template-columns: 6cqw repeat(30, minmax(0, 1fr));
  grid-template-rows: 1.4cqw repeat(6, 3.5cqw);
  background: linear-gradient(90deg, transparent 6cqw, rgba(255, 255, 255, 0.025) 6cqw) 0 0 / 100% 100% no-repeat;
}
.ks__grid::before {   /* Tagesraster, ab der Monatsspalte */
  content: ""; grid-column: 2 / -1; grid-row: 1 / -1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px calc(100% / 30));
  pointer-events: none;
}
.kd__wd {
  grid-row: 1; grid-column: var(--c);
  align-self: center; display: flex; align-items: baseline; gap: 0.65cqw; padding-left: 0.8cqw;
  font-size: 1.18cqw; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.kd__wd b { font-size: 2cqw; font-weight: 500; letter-spacing: 0; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.ks__mon {
  grid-column: 1; grid-row: var(--r);
  display: flex; align-items: center; align-self: stretch; padding-right: 0.6cqw;
  font-size: 1.18cqw; font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.kd__h {
  grid-column: 1; grid-row: var(--r);
  margin-top: -0.7cqw;
  font-size: 1.18cqw; font-weight: 500; color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

/* Termine: Glas-Chips (Weiß-Alpha mit Lichtkante), zwei Stufen im Wechsel */
.kd__ev, .ks__blk {
  grid-column: var(--c);
  grid-row: var(--r) / span var(--s);
  display: block;
  margin: 0.2cqw 0.26cqw;
  padding: 0.5cqw 0.9cqw;
  border-radius: 0.8cqw;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.38cqw; font-weight: var(--weight-semibold); font-style: normal;
  line-height: 1.15;
  hyphens: manual;
  overflow: hidden;
}
.kd__ev--b { background: rgba(255, 255, 255, 0.06); }
.ks__blk {
  grid-row: var(--r);
  grid-column: var(--c) / span var(--s);   /* waagerecht: Tage über die Monatszeile */
  margin: 0.26cqw 0.2cqw;
  padding: 0 1cqw;
  display: flex; align-items: center;
  white-space: nowrap; text-overflow: ellipsis;
}
.ks__blk--b { background: rgba(255, 255, 255, 0.06); }

.kal__marke {
  display: flex; align-items: center; gap: 0.9cqw;
  margin: 1.3cqw 0 0; padding-top: 1.2cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 1.3cqw; font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.62);
}
.kal__marke svg { flex: none; width: 1.7cqw; height: 1.9cqw; fill: rgba(255, 255, 255, 0.85); }

.kal-stage__hinweis { flex: none; margin: 0 5.8cqw; padding-bottom: 2.1cqw; font-size: max(1.3cqw, 11px); color: rgba(255, 255, 255, 0.52); }   /* im Fluss unter dem Rahmen (Runde 3) */



/* ---------------------------------------------------------------------------
   6 · BÜHNE 02 — Google-Ergebnisseite · Unternehmensprofil · ChatGPT (.gse)
   ---------------------------------------------------------------------------
   Genre-Nachbau. Fremde Zeichen NUR auf Maries ausdrücklichen Wunsch (24.09., Runde 5):
   ChatGPT-Blüte + Googles Material-Symbole (Website · Route · Anrufen); die Karte ist ein
   SVG-Ausschnitt in Google-Maps-Tönen (Werte am .gse__map-Block). Genre-Farben hart und lokal
   (§5a, Präzedenz Sektion 15 Google-Gold): Link-Blau #1a73e8, Sterne-Gold
   #FBBC04, Öffnungs-Grün #188038, Karten-Nadel #EA4335, Google-Text
   #202124/#4d5156. Die drei Marken „Platz 1“ / „Unternehmensprofil“ /
   „Empfohlen“ tragen den EINEN Akzent (var(--akz)).
   --------------------------------------------------------------------------- */

.gse__panel {
  position: absolute;
  border-radius: 1.2em;
  background: #FFFFFF;
  color: #202124;
  box-shadow: 0 3em 5em -2.6em rgba(var(--shadow-rgb), 0.85), 0 0 0 1px rgba(var(--shadow-rgb), 0.35);   /* §5a: Schatten über das Tripel */
}
.gse__serp { left: 3em; top: 3em; width: 39.2em; height: 58em; padding: 1.4em 1.4em 0; overflow: hidden;
  /* Das Panel läuft bewusst über den Rahmen hinaus (die Ergebnisseite geht weiter) — seit der Rahmen
     selbst clippt (Runde 3), läuft es unten WEICH aus statt hart an der Kante abzureißen. */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.gse__gbp  { right: 3em; top: 3.6em; width: 30em; overflow: hidden; }
.gse__gpt  { right: 3em; bottom: 3em; width: 30em; padding: 1.2em 1.4em 1.4em; }

/* Suchfeld + Reiter */
.gse__such { display: flex; align-items: center; gap: 1em; height: 3.6em; padding: 0 1.4em; border-radius: var(--radius-full); box-shadow: 0 0.1em 0.6em rgba(32, 33, 36, 0.28); color: #202124; }
.gse__such span { flex: 1; font-size: 1.3em; }
.gse__lupe { width: 1.5em; height: 1.5em; color: #9aa0a6; }
.gse__mic { width: 1.4em; height: 1.4em; border-radius: var(--radius-full); border: 0.2em solid #4285F4; box-sizing: border-box; }
.gse__tabs { display: flex; gap: 1.6em; margin: 1em 0 0 1em; padding-bottom: 0.6em; border-bottom: 1px solid #ebebeb; }
.gse__tabs span { font-size: 1.1em; color: #4d5156; padding-bottom: 0.5em; }
.gse__tabs span.is-aktiv { color: #1a73e8; box-shadow: 0 0.25em 0 0 #1a73e8; }

/* Ergebnis-Zeilen */
.gse__res { position: relative; display: flex; flex-direction: column; gap: 0.5em; margin-top: 0.8em; padding: 1em 0.9em; }
.gse__res--hit { border-radius: 0.8em; box-shadow: inset 0 0 0 0.2em var(--akz); background: rgba(var(--akz-rgb), 0.06); }
.gse__res--blur, .gse__loc--blur { filter: blur(0.3em); opacity: 0.55; }
.gse__marke {
  position: absolute; right: 0.9em; top: 0.9em;
  padding: 0.35em 0.9em; border-radius: var(--radius-full);
  background: var(--akz); color: #0C141C;
  font-size: 0.85em; font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.gse__gesp { font-size: 1em; font-weight: var(--weight-bold); color: #202124; }
.gse__quelle { display: flex; align-items: center; gap: 0.8em; }
.gse__quelle span { display: flex; flex-direction: column; line-height: 1.2; }
.gse__quelle b { font-size: 1em; font-weight: var(--weight-semibold); color: #202124; }
.gse__quelle small { font-size: 0.9em; color: #4d5156; }
.gse__fav { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: var(--radius-full); background: var(--navy); color: #FFFFFF; font-size: 0.9em; font-weight: var(--weight-bold); font-style: normal; }
.gse__fav--grau { background: #5f6368; }
.gse__titel { font-size: 1.4em; line-height: 1.25; color: #1a73e8; }
.gse__snip { margin: 0; font-size: 1.05em; line-height: 1.4; color: #4d5156; }   /* p-Farbe explizit (globale p-Regel) */

/* Unternehmen-Block */
.gse__unt { margin-top: 0.8em; padding: 0 0.9em; }
.gse__unt-h { font-size: 1.3em; color: #202124; margin-bottom: 0.5em; }
/* Runde 5 (Marie 24.09.: „eine Map sehen und nicht einfach nur die beiden Punkte“): echter
   Kartenausschnitt als Inline-SVG im Google-Maps-Stil. Genre-Farben der Karte (§5a, wie die
   übrigen Google-Töne dieser Bühne): Land #F5F3EF, Blöcke #EAE6DF, Park #CDEBC6, Wasser #AADAFF,
   Bundesstraße #F6CF65, Straßenrand #DCD7CE. Nadeln als Tropfen, Spitze auf --x/--y. */
.gse__map { position: relative; height: 8em; border-radius: 0.8em; overflow: hidden; box-shadow: inset 0 0 0 1px #ebebeb; }
.gse__map-svg { display: block; width: 100%; height: 100%; max-width: none; }
.gse__map-strasse { font: 700 6px/1 var(--font-ui); fill: #8a6d1c; letter-spacing: 0.02em; }
.gse__nadel {
  position: absolute; left: var(--x); top: var(--y);
  width: 1.3em; height: 1.3em; margin: -1.84em 0 0 -0.65em;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #8a8f95; box-shadow: 0 0.15em 0.3em rgba(32, 33, 36, 0.35);
}
.gse__nadel::after { content: ""; position: absolute; inset: 0.4em; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.9); }
.gse__nadel--akz { width: 1.9em; height: 1.9em; margin: -2.69em 0 0 -0.95em; background: #EA4335; z-index: 1; }
.gse__nadel--akz::after { inset: 0.6em; background: #B31412; }
.gse__nadel b {
  position: absolute; left: 2.1em; top: -0.2em; transform: rotate(45deg); transform-origin: 0 50%;
  font-size: 0.95em; font-weight: var(--weight-bold); font-style: normal; color: #C5221F; white-space: nowrap;
  text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
}
.gse__loc { display: flex; justify-content: space-between; align-items: flex-start; padding: 1em 0 0.6em; border-bottom: 1px solid #ebebeb; }
.gse__loc-t { display: flex; flex-direction: column; gap: 0.15em; }
.gse__loc-t b { font-size: 1.25em; font-weight: var(--weight-semibold); color: #202124; }
.gse__loc-t span { font-size: 1em; color: #4d5156; }
.gse__sterne { font-style: normal; color: #FBBC04; letter-spacing: 0.05em; }   /* Googles echte Palette (Genre-Nachbau); das Reviews-Widget führt bewusst die Annäherung #FFC043 */
.gse__offen { font-style: normal; color: #188038; }
.gse__link  { font-style: normal; color: #1a73e8; }
/* „Beispiel“ direkt an der Zahl (Erich 18.09.: „Zahlen als Beispiel kenntlich klein“) — Rand #dadce0 und
   Text #5f6368 sind die Genre-Grautöne der Buttons/Metatexte, kein neuer Wert */
.gse__bsp { display: inline-block; margin-left: 0.3em; padding: 0.15em 0.6em; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px #dadce0; font-size: 0.8em; font-style: normal; font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: #5f6368; vertical-align: 0.15em; white-space: nowrap; }
.gse__btns { display: flex; gap: 0.6em; }
.gse__btns span { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.6em 1em; border-radius: var(--radius-full); border: 1px solid #dadce0; font-size: 0.9em; color: #1a73e8; white-space: nowrap; }

/* Unternehmensprofil */
.gse__fotos { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.2em; height: 9em; }
.gse__fotos i { display: block; background: linear-gradient(160deg, #2E3339, #1A1D22); }
.gse__fotos i:first-child { grid-row: 1 / 3; background: linear-gradient(150deg, #313640, #14171B); }
.gse__marke--gbp { top: 8.1em; right: 1.2em; }
.gse__gbp-body { padding: 1.4em 1.4em 1.4em; }
.gse__gbp-name { font-size: 1.7em; font-weight: var(--weight-semibold); color: #202124; }
.gse__gbp-rate { margin-top: 0.3em; font-size: 1.1em; color: #202124; }
.gse__gbp-sub  { margin-top: 0.2em; font-size: 1.1em; color: #4d5156; }
.gse__gbp-btns { display: flex; gap: 0.6em; margin: 1em 0 1.2em; }
.gse__gbp-btns span { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.1em; border-radius: var(--radius-full); border: 1px solid #dadce0; font-size: 1em; color: #1a73e8; white-space: nowrap; }
/* Runde 5: Material-Symbole statt Kreis-Platzhalter (Website · Route · Anrufen) */
.gse__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gse__ico { flex: none; width: 1.25em; height: 1.25em; max-width: none; color: #1a73e8; }
.gse__gbp-zeile { font-size: 1.05em; line-height: 1.5; color: #202124; }
.gse__gbp-zeile span { color: #4d5156; }

/* ChatGPT */
.gse__gpt-kopf { display: flex; align-items: center; gap: 0.5em; color: #0d0d0d; }
.gse__gpt-kopf b { font-size: 1.3em; font-weight: var(--weight-bold); }
.gse__gpt-logo { flex: none; width: 1.7em; height: 1.7em; max-width: none; color: #0d0d0d; }
.gse__gpt-kopf span { font-size: 1.2em; color: #8e8e8e; }
.gse__gpt-avatar { margin-left: auto; width: 2em; height: 2em; border-radius: var(--radius-full); background: #e5e5e5; }
.gse__gpt-frage { margin: 1em 0 1em auto; width: 82%; padding: 0.8em 1.2em; border-radius: 1.6em; background: #f4f4f4; font-size: 1.1em; line-height: 1.4; color: #0d0d0d; }
.gse__gpt-antwort { position: relative; padding-left: 2.8em; }
.gse__gpt-bot { position: absolute; left: 0; top: 0; width: 2em; height: 2em; padding: 0.35em; box-sizing: border-box; max-width: none; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px #e5e5e5; color: #0d0d0d; }
.gse__gpt-antwort p { margin: 0 0 0.9em; font-size: 1.1em; line-height: 1.45; color: #0d0d0d; }
.gse__gpt-antwort b { font-weight: var(--weight-bold); }
.gse__gpt-box { position: relative; padding: 0.8em 1em; border-radius: 0.8em; box-shadow: 0 0 0 0.2em var(--akz); background: rgba(var(--akz-rgb), 0.05); font-size: 1.1em; line-height: 1.45; color: #0d0d0d; }
.gse__marke--gpt { top: -1.1em; right: 0.8em; font-size: 0.75em; }
.gse__gpt-eingabe { display: flex; align-items: center; justify-content: space-between; height: 3.6em; margin-top: 1.2em; padding: 0 0.5em 0 1.4em; border-radius: var(--radius-full); border: 1px solid #dcdcdc; font-size: 1.1em; color: #8e8e8e; }
.gse__gpt-eingabe i { width: 2.4em; height: 2.4em; border-radius: var(--radius-full); background: #0d0d0d; }


/* ---------------------------------------------------------------------------
   7 · BÜHNE 03 — Die Heatmap auf drei Kundenseiten (.bkm)
   ---------------------------------------------------------------------------
   Runde 4 (Marie 18.09.: „einfach nur die Heatmap … anstatt 1, 2, 3 noch …
   folgende Seiten im Wechsel"): drei echte Seiten von Bese Media als
   Browser-Tabs, gedämpft, darüber die Karte aus Licht — KEINE Pins, keine
   Schritt-Kästen, keine Legende mehr (Vorbild Etappe 02 des Ablaufs).
   Wolken WEISS (Marie 16.09.: „Blau ist mir zu präsent“), der eine Akzent ist
   der Anruf.

   Zeitachse, reines CSS: 4 s je Seite, 12 s die Runde (Runde 5, Marie 18.09.:
   „die Seiten müssen schneller wechseln, sodass die Aufmerksamkeit noch da
   ist" — vorher 8 s / 24 s).
     · Seiten-Ebene, Tab und Domain: 12 s, Start versetzt über --bkm-d
       (−0,5 / 3,5 / 7,5 s — die −0,5 s lassen die erste Seite schon im
       pausierten Zustand stehen, sonst wäre das Fenster vor dem Reveal
       schwarz). Die neue Ebene liegt beim Wechsel OBEN (z-index springt mit)
       und blendet über die alte, die erst danach verschwindet — kein
       Helligkeits-Loch in der Überblendung.
     · Alles IN einer Seite (Wolken, Ring, Welle, Anruf-Karte) läuft im
       4-s-Takt mit −0,5 s: 0,5 s erster Blick · 1,0 s Kontrollblick ·
       1,4 s Tipp + Ring · 2,0 s Anruf · 3,4 s verlöschen, 4,0 s nächster Tab.
   Alles startet PAUSIERT und läuft unter .lcard.is-revealed.
   --------------------------------------------------------------------------- */

.bkm__s1 { --bkm-d: -0.5s; }
.bkm__s2 { --bkm-d: 3.5s; }
.bkm__s3 { --bkm-d: 7.5s; }

.bkm__browser { position: absolute; left: 3em; top: 6.4em; width: 70em; border-radius: 1.2em; overflow: hidden; background: #0E1013; box-shadow: 0 3em 5em -2.6em rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* Tab-Leiste: Ampel-Punkte + drei Tabs; der aktive verschmilzt mit der Adresszeile */
.bkm__tabs { display: flex; align-items: flex-end; gap: 0.4em; height: 3.2em; padding: 0 1em 0 1.2em; background: #0E1013; }
.bkm__tabs > i { flex: none; width: 0.9em; height: 0.9em; margin: 0 0 1.15em; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.16); }
.bkm__tabs > i + i { margin-left: 0.4em; }
.bkm__tab {
  flex: 0 1 19em; min-width: 0; height: 2.4em; padding: 0 1em;
  border-radius: 0.7em 0.7em 0 0;
  font-size: 1em; line-height: 2.4em; color: rgba(255, 255, 255, 0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(27, 30, 35, 0);
  animation: bkm-tab 12s linear var(--bkm-d) infinite; animation-play-state: paused;
}
.bkm__tabs > i + .bkm__tab { margin-left: 1em; }
.bkm__tab.bkm__s1 { color: rgba(255, 255, 255, 0.86); background: #1B1E23; }   /* Standbild = Seite 1 */

.bkm__chrome { display: flex; align-items: center; height: 2.8em; padding: 0 1.2em; background: #1B1E23; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bkm__url { flex: 1; display: flex; align-items: center; gap: 0.6em; height: 1.8em; padding: 0 1em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.07); font-size: 1em; color: rgba(255, 255, 255, 0.55); }
.bkm__url svg { flex: none; width: 1.1em; height: 1.1em; }
.bkm__domains { display: grid; }
.bkm__domain { grid-area: 1 / 1; white-space: nowrap; opacity: 0; animation: bkm-domain 12s linear var(--bkm-d) infinite; animation-play-state: paused; }
.bkm__domain.bkm__s1 { opacity: 1; }

.bkm__shot { position: relative; aspect-ratio: 1600 / 1000; overflow: hidden; background: #000; }
.bkm__seite { position: absolute; inset: 0; z-index: 1; opacity: 0; animation: bkm-seite 12s linear var(--bkm-d) infinite; animation-play-state: paused; }
.bkm__seite.bkm__s1 { opacity: 1; }
.bkm__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: brightness(0.44) saturate(0.85); }
/* Platzhirsch hat einen dunklen Foto-Hero — mit 0,44 bliebe von der Seite kaum etwas übrig */
.bkm__seite--dunkel img { filter: brightness(0.68) saturate(0.85); }

.bkm__blob, .bkm__ring, .bkm__tap { position: absolute; left: var(--x); top: var(--y); pointer-events: none; }
.bkm__blob {
  width: var(--w); height: var(--h);
  border-radius: 50%;
  /* Kern 0,8 statt 0,66 der Musterseiten-Fassung: auf den HELLEN Kundenseiten
     liegt die gedämpfte Seite bei Mittelgrau, dort las 0,66 nur als Schleier */
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.34) 38%, rgba(255, 255, 255, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0; transform: translate(-50%, -50%) scale(0.55);
  animation: bkm-heat-1 4s ease-in-out -0.5s infinite; animation-play-state: paused;
}
.bkm__blob--t2 { animation-name: bkm-heat-2; }
.bkm__blob--t3 { animation-name: bkm-heat-3; }
.bkm__blob--leise { filter: opacity(0.6); }
.bkm__ring {
  width: var(--w); height: var(--h);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 0.2em #FFFFFF, 0 0 0 0.7em rgba(255, 255, 255, 0.25), 0 0 2.4em rgba(255, 255, 255, 0.55);
  opacity: 0; transform: translate(-50%, -50%) scale(0.86);
  animation: bkm-ring-an 4s ease-in-out -0.5s infinite; animation-play-state: paused;
}
.bkm__tap {
  width: 4em; height: 4em;
  border-radius: var(--radius-full);
  border: 0.2em solid #FFFFFF;
  opacity: 0; transform: translate(-50%, -50%) scale(0.5);
  animation: bkm-tap 4s ease-out -0.5s infinite; animation-play-state: paused;
}

.bkm__anruf {
  /* hängt UNTER dem Browserfenster und lappt nur 0,5 em über die Kante (Screen endet bei
     56,15 em) — bei 52,4 em lag er in seiner hellen Phase auf der Siegel-Reihe der
     Feucht-Seite (Kessel, VDRK), 18.09.; Unterkante ≈ 60,4 em, Rahmen 64 em */
  position: absolute; right: 1.5em; top: 55.6em; z-index: 3;
  display: inline-flex; align-items: center; gap: 1em;
  padding: 0.9em 1.4em 0.9em 0.9em;
  border-radius: var(--radius-full);
  background: #FFFFFF; color: #101820;
  box-shadow: 0 1.8em 3.4em -1.6em rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.25);
  opacity: 0.32; transform: translateY(6px);
  animation: bkm-call 4s ease-in-out -0.5s infinite; animation-play-state: paused;
}
.bkm__anruf-ring { position: relative; display: grid; place-items: center; width: 3em; height: 3em; border-radius: var(--radius-full); background: #46D39A; color: #0C141C; }   /* Status-Grün, §5a Bese-System */
.bkm__anruf-ring .icon { width: 1.4em; height: 1.4em; animation: bkm-callicon 4s ease-in-out -0.5s infinite; animation-play-state: paused; }
.bkm__anruf-ring::after { content: ""; position: absolute; inset: -0.5em; border-radius: inherit; border: 0.2em solid rgba(70, 211, 154, 0.55); animation: bkm-ring 1.6s ease-out infinite; animation-play-state: paused; }
.bkm__anruf-txt { display: flex; flex-direction: column; line-height: 1.15; font-size: 1.05em; color: rgba(16, 24, 32, 0.62); white-space: nowrap; }
.bkm__anruf-txt b { font-size: 1.15em; font-weight: var(--weight-bold); color: #101820; }

/* 12 s — eine Seite ist 33,33 % davon (1 % = 0,12 s) */
@keyframes bkm-seite {
  0%            { opacity: 0; z-index: 2; }
  4.17%         { opacity: 1; z-index: 2; }
  33.3%         { opacity: 1; z-index: 2; }
  33.34%, 37.6% { opacity: 1; z-index: 1; }
  37.61%, 100%  { opacity: 0; z-index: 1; }
}
@keyframes bkm-tab {
  0%           { color: rgba(255, 255, 255, 0.4);  background: rgba(27, 30, 35, 0); }
  2.5%, 31%    { color: rgba(255, 255, 255, 0.86); background: rgba(27, 30, 35, 1); }
  33.33%, 100% { color: rgba(255, 255, 255, 0.4);  background: rgba(27, 30, 35, 0); }
}
@keyframes bkm-domain {
  0%           { opacity: 0; }
  2.5%, 30.8%  { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}
/* 4 s — der Takt innerhalb einer Seite (1 % = 0,04 s) */
@keyframes bkm-heat-1 {
  0%, 12.5% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  25%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55%       { opacity: 0.92; transform: translate(-50%, -50%) scale(1.05); }
  85%       { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bkm-heat-2 {
  0%, 25%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  37.5%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  62%       { opacity: 0.92; transform: translate(-50%, -50%) scale(1.05); }
  85%       { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bkm-heat-3 {
  0%, 35%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  47.5%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%       { opacity: 0.92; transform: translate(-50%, -50%) scale(1.05); }
  85%       { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bkm-ring-an {
  0%, 37.5%  { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  46%, 85%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  93%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes bkm-tap {
  0%, 46%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  49%       { opacity: 0.85; transform: translate(-50%, -50%) scale(0.8); }
  58%       { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
  61%       { opacity: 0.7; transform: translate(-50%, -50%) scale(0.8); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}
@keyframes bkm-call {
  0%, 50%    { opacity: 0.32; transform: translateY(6px); }
  57.5%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100%  { opacity: 0.32; transform: translateY(6px); }
}
@keyframes bkm-callicon {
  0%, 57.5%    { transform: rotate(0deg) scale(1); }
  60%          { transform: rotate(-14deg) scale(1.16); }
  62.5%        { transform: rotate(12deg) scale(1.16); }
  65%          { transform: rotate(-8deg) scale(1.1); }
  67.5%, 100%  { transform: rotate(0deg) scale(1); }
}
@keyframes bkm-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }

.lcard.is-revealed .bkm :is(.bkm__seite, .bkm__tab, .bkm__domain, .bkm__blob, .bkm__ring, .bkm__tap, .bkm__anruf, .bkm__anruf-ring .icon),
.lcard.is-revealed .bkm .bkm__anruf-ring::after { animation-play-state: running; }


/* ---------------------------------------------------------------------------
   8 · BÜHNE 04 — Die Bildergalerie (.mafo): 20 Partnerbetriebe in einem
       stehenden Raster 4 × 5
   ---------------------------------------------------------------------------
   Erichs Übergabe 18.09. (GO-LIVE-ANLEITUNG §4c): „Keine Anzeige, kein
   Bewerbungsformular, keine Vorauswahl-Karte. Sonst denkt jeder: kann ich
   selbst.“ Marie 18.09.: „eine Bildergalerie mit noch mehr Fotos von
   verschiedenen Kunden, wo die Mitarbeiter gut und motiviert aussehen“ und
   „kein Slider, einfach eine Bildergalerie von irgendwie 20 Bildern“ — das
   Einzelfoto (4), das Vier-Kachel-Mosaik (4b) und das Endlosband (4c) sind
   verworfen. Das Raster füllt den Rahmen (der liegt hier absolut auf der
   Bühne): 4 Spalten × 5 Zeilen, Kacheln 3 : 2, Fugen 0,6em, kein Text im
   Bild — der Text steht links. Ab 560 px abwärts steht die Bühne im Fluss mit
   drei Spalten (Kacheln über aspect-ratio), die letzten zwei Kacheln entfallen
   dort (18 = 3 × 6). Bewegung nur beim Reveal (Kacheln gestaffelt über --i),
   sonst keine — Marie: kein Slider. Der Hinweis liegt als dunkler Streifen
   über dem Fuß (eigener Scrim).
   --------------------------------------------------------------------------- */

.mafo .lstage__box { position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0; }
.mafo .lstage__hinweis { position: relative; z-index: 1; margin: auto 0 0; padding: 1.4em 3em 1.2em; color: rgba(255, 255, 255, 0.72); background: linear-gradient(180deg, rgba(6, 10, 14, 0) 0%, rgba(6, 10, 14, 0.78) 55%, rgba(6, 10, 14, 0.92) 100%); }   /* schmaler Streifen — die unterste Kachelreihe soll frei bleiben */
.mafo__galerie { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 0.6em; margin: 0; padding: 0; list-style: none; }
.mafo__karte { position: relative; min-height: 0; overflow: hidden; border-radius: 0.6em; background: var(--lb-b); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.mafo__bild { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
@media (hover: hover) { .mafo__karte:hover .mafo__bild { transform: scale(1.06); } }


/* ---------------------------------------------------------------------------
   9 · LIGHT-THEME — weißes Band (Marie 17.09.) + Charcoal-Material (§5a, 03.08.)
   --------------------------------------------------------------------------- */

/* Das weiße BAND der Section steht NICHT hier, sondern in der konsolidierten
   Startseiten-Rhythmus-Stelle (`.page-home :is(.lsys, .about, .zahlen)`,
   Block „STARTSEITE — Band-Rhythmus", Guardian 17.09.: Light-Ausnahmen
   gesammelt an EINER Stelle). Hier nur das Karten-Material. */
html[data-theme="light"] .lsys {
  --lk-a: #26282C;
  --lk-b: #1F2226;                                                     /* nur Töne der dokumentierten Charcoal-Familie (§5a) — CI-Prüfer 17.09. */
  --lk-c: #1B1D20;
  --lb-a: #1B1D20;
  --lb-b: #131518;
}

/* ---------------------------------------------------------------------------
  10 · RESPONSIVITÄT  (320–2560, §1.5)
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) { .lsnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Unter 1024 px kein Stapel (wie .bsys-mod): Karten stehen untereinander,
   Bühne oben, Text darunter — auch bei den gespiegelten Karten. */
@media (max-width: 1023px) {
  .lcard, .lcard--rechts { position: relative; top: auto; grid-template-columns: 1fr; transform: none; }
  .lcard::before { display: none; }
  .lcard__stage { order: -1; }
  .lcard__stage--links,
  .lcard__stage--rechts { border-right: 0; border-left: 0; border-top: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .lcard__title { max-width: 22ch; }
  .lcard__lead { max-width: 60ch; }
  .lsys-stack { gap: clamp(16px, 3vw, 24px); }   /* Raster */
  .mafo { aspect-ratio: 760 / 640; }   /* das Foto füllt die Bühne absolut — gestapelt braucht sie ihre Höhe selbst */
}

@media (max-width: 560px)  {
  .lsnav { grid-template-columns: 1fr; }
  /* Termin-Beschriftungen wären hier ~3 px groß — die Chips tragen die Aussage allein */
  .kd__ev, .ks__blk, .kd__wd, .kd__wd b, .kd__h, .ks__mon, .kal__marke { color: transparent; }
  /* Der Hinweis („Beispielhafte Darstellung …") bleibt auch hier stehen — Erich 18.09.: Beispielwerte kenntlich machen;
     mit 11-px-Boden und Umbruch statt der früheren display:none (dort war er ~4 px groß) */
  .lstage__hinweis, .kal-stage__hinweis { white-space: normal; margin-inline: 12px; padding-bottom: 12px; line-height: 1.35; }
  /* Galerie der Karte 04 auf dem Handy: Bühne im Fluss, drei Spalten, Kacheln 3 : 2 (im 760:640-Rahmen wären es 69 × 46 px) */
  .mafo { aspect-ratio: auto; }
  .mafo .lstage__box { position: relative; inset: auto; }
  .mafo__galerie { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 6px; padding: 12px 12px 0; }
  .mafo__karte { aspect-ratio: 3 / 2; }
  .mafo__karte:nth-child(n + 19) { display: none; }   /* 18 = 3 × 6 */
  .mafo .lstage__hinweis { background: none; padding: 10px 12px 12px; }
  /* Tab-Titel: die Tab-Animation setzt `color` und überstimmt damit ein `color: transparent` —
     die Füllfarbe gewinnt gegen beides, die Tabs bleiben als Form stehen */
  .bkm__tab { -webkit-text-fill-color: transparent; }
  /* Feintext der Bühnen 02–03 wäre hier 3–5 px: die Bühne wirkt als Bild, nicht als Text (Muster .kal) */
  .gse__snip, .gse__gpt-antwort p, .gse__gpt-box, .gse__gbp-zeile, .gse__loc-t span, .gse__quelle small, .gse__tabs span, .gse__gpt-frage, .gse__gpt-eingabe, .gse__bsp,
  .bkm__url { color: transparent; }
  /* Bühne 04 (.mafo) bewusst NICHT: Kicker und Satz tragen einen px-Boden und bleiben lesbar */
}

/* ---------------------------------------------------------------------------
  11 · REVEAL + REDUCED MOTION
   ---------------------------------------------------------------------------
   Startzustand SICHTBAR, ohne JS steht alles (Lehre Phase 6). Bewegung nur auf
   den Akzent-Elementen der Bühnen — sie sind die Aussage. Dauern ≤ 0,7 s
   (AUSNAHME Bühne 03: die 12-s-Zeitachse der Blickkarte, geerbt von
   /leistungen/website/ — eine Schleife, kein Übergang; Präzedenz .bkarte)
   (CI Sektion 19), die Staffelung steckt in den Verzögerungen. Die Karte
   trägt [data-reveal] selbst (generischer Hook → .is-revealed).
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .lsys[data-lsys] .lsnav__item {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.5s var(--ease) calc(var(--i, 0) * 90ms), transform 0.5s var(--ease-morph) calc(var(--i, 0) * 90ms);
  }
  .lsys[data-lsys]:not(.is-revealed) .lsnav__item { animation: lsnav-fallback 0.01s linear 1.2s forwards; }
  .lsys.is-revealed .lsnav__item { opacity: 1; transform: none; animation: none; }
  @keyframes lsnav-fallback { to { opacity: 1; transform: none; } }

  .lcard[data-lsec] .kal,
  .lcard[data-lsec] .kd__ev,
  .lcard[data-lsec] .ks__blk,
  .lcard[data-lsec] .gse__panel,
  .lcard[data-lsec] .gse__marke,
  .lcard[data-lsec] .mafo__karte {
    transition: transform 0.7s var(--ease-morph), translate 0.7s var(--ease-morph), opacity 0.6s var(--ease), box-shadow 0.6s var(--ease);
  }
  .lcard[data-lsec]:not(.is-revealed) .kal { opacity: 0; translate: 0 22px; }
  .lcard[data-lsec]:not(.is-revealed) .kd__ev { opacity: 0; translate: 0 -0.8cqw; }
  .lcard[data-lsec]:not(.is-revealed) .ks__blk { opacity: 0; transform: scaleX(0.1); transform-origin: left center; }
  .lcard.is-revealed :is(.kd__ev, .ks__blk) { transition-delay: var(--d, 0s); }
  .lcard.is-revealed .kal--ks { transition-delay: 0.15s; }
  /* Vorlauf zählt hoch (1 → 3 Wochen / 1 Monat → 6 Monate), dann leuchten beide Kopfzeilen gleichzeitig */
  .lcard.is-revealed .kal__zahl > :nth-child(1) { animation: kal-zahl-kurz 0.7s linear 0.6s both; }   /* 0,7 s = CI-Deckel (Sektion 19); vorher 1 s — CI-Prüfer 18.09. */
  .lcard.is-revealed .kal__zahl > :nth-child(2) { animation: kal-zahl-kurz 0.7s linear 1.3s both; }
  .lcard.is-revealed .kal__zahl > :nth-child(3) { animation: kal-zahl-an 0.25s linear 2s both; }
  .lcard[data-lsec]:not(.is-revealed) .kal__spur i { transform: scaleX(0.12); }
  .lcard.is-revealed .kal__spur i { animation: kal-spur 1.65s var(--ease) 0.6s both; }   /* füllt sich im Takt des Zählers, drei kurze Schritte */
  .lcard.is-revealed .kal__spur { animation: kal-glanz 0.7s ease-out 3.5s both; }
  @keyframes kal-zahl-kurz { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }
  @keyframes kal-zahl-an { from { opacity: 0; } to { opacity: 1; } }
  @keyframes kal-glanz { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 204, 223, 0); } 40% { box-shadow: 0 0 0.9cqw 0.1cqw rgba(179, 204, 223, 0.55); } }
  @keyframes kal-spur { 0% { transform: scaleX(0.12); } 25%, 42% { transform: scaleX(0.4); } 67%, 80% { transform: scaleX(0.7); } 100% { transform: scaleX(1); } }
  .lcard[data-lsec]:not(.is-revealed) .gse__panel { opacity: 0; translate: 0 22px; }
  .lcard[data-lsec]:not(.is-revealed) .gse__marke { opacity: 0; transform: scale(0.85); }
  .lcard.is-revealed .gse__gbp { transition-delay: 0.25s; } .lcard.is-revealed .gse__gpt { transition-delay: 0.5s; }
  .lcard.is-revealed .gse__marke { transition-delay: 1.2s; }
  /* Bühne 04: die 20 Kacheln blenden gestaffelt ein (--i aus dem Markup), danach keine Bewegung */
  .lcard[data-lsec]:not(.is-revealed) .mafo__karte { opacity: 0; translate: 0 10px; }
  .lcard.is-revealed .mafo__karte { transition-delay: calc(var(--i, 0) * 40ms); }

  /* Ohne JavaScript: Endzustand sofort (Guardian 16.09.: ein 1,4-s-Timer feuerte bei
     echten Besuchern VOR dem Scroll in die Section und fraß den Reveal). Der 10-s-Timer
     bleibt nur als Sicherheitsnetz, falls JS zwar da ist, aber der Hook nie greift. */
  @media (scripting: none) {
    .lcard[data-lsec]:not(.is-revealed) :is(.kal, .kd__ev, .ks__blk, .kal__spur i, .gse__panel, .gse__marke, .mafo__karte) { transform: none; translate: 0 0; opacity: 1; }
  }
  .lcard[data-lsec]:not(.is-revealed) :is(.kal, .kd__ev, .ks__blk, .kal__spur i, .gse__panel, .gse__marke, .mafo__karte) {
    animation: lsec-fallback 0.01s linear 10s forwards;
  }
  @keyframes lsec-fallback { to { transform: none; translate: 0 0; opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  .lcard { transform: none !important; }
  .mafo__bild { transition: none; }
  .lcard::before { display: none; }
  .bkm__anruf-ring::after { animation: none; }
  .lsnav__card, .lsnav__jump::after, .lcard__mehr { transition: none; }
}

/* Blickkarte ohne JavaScript und bei abgestellter Bewegung: Endzustand (wie .bkarte in styles.css) */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .bkm :is(.bkm__seite, .bkm__tab, .bkm__domain, .bkm__blob, .bkm__ring, .bkm__tap, .bkm__anruf, .bkm__anruf-ring .icon), .bkm .bkm__anruf-ring::after { animation: none; }
  /* Standbild: Seite 1 (Basis-Regeln) mit fertiger Heatmap */
  .bkm :is(.bkm__blob, .bkm__ring) { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .bkm__tap { opacity: 0; }
  .bkm__anruf { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Der Ablauf auf /leistungen/website/ — die beiden Teile, die dort anders
   sind als auf der Startseite: die Anruf-Liste in Etappe 03 (statisch, kein
   Live-Feed — dessen Engine haengt an [data-bese-system]) und die schlanke
   Rueckkopplung (eine Zeile statt Text plus zwei Datenkarten).
   --------------------------------------------------------------------------- */
/* KEIN eigenes margin-top: die Buehne bezieht es aus `.bsys-et__viz`
   (margin-top: auto). Ein Wert hier gewinnt per Quellreihenfolge und haette
   die Liste aus der Flucht mit Bild und Netz genommen. */
.bsys-anrufe {
  display: flex; flex-direction: column;
  border-radius: 12px; padding: 12px;
  background: linear-gradient(180deg, #1C2D3B, #0C141C);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.bsys-anrufe__kopf {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; color: rgba(255, 255, 255, 0.50); padding: 0 3px 8px;
}
.bsys-anrufe__live { color: #46D39A; font-weight: var(--weight-bold); }
.bsys-anrufe__brand { margin-left: auto; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.34); }
.bsys-anrufe__row {
  display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-height: 0;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.86);
  padding: 9px 11px; border-radius: 9px; margin-bottom: 7px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0.3; transform: translateY(4px);
  animation: bsys-anruf-rein 11s ease-in-out infinite; animation-play-state: paused;
}
.bsys-anrufe__row:last-child { margin-bottom: 0; }
.bsys-anrufe__row--a { animation-delay: 5.2s; }
.bsys-anrufe__row--b { animation-delay: 5.7s; }
.bsys-anrufe__row--c { animation-delay: 6.2s; }
.bsys-flow.is-live .bsys-anrufe__row { animation-play-state: running; }
@keyframes bsys-anruf-rein {
  0%, 100% { opacity: 0.3; transform: translateY(4px); }
  5%, 55% { opacity: 1; transform: none; }
}
.bsys-anrufe__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bsys-anrufe__dot--ok { background: #46D39A; }
.bsys-anrufe__dot--no { background: #5A6B7D; }
.bsys-anrufe__ok, .bsys-anrufe__no {
  margin-left: auto; font-size: 9.5px; font-weight: var(--weight-bold);
  padding: 3px 7px; border-radius: 9999px; white-space: nowrap; flex: none;
}
.bsys-anrufe__ok { color: #46D39A; background: rgba(70, 211, 154, 0.13); }
.bsys-anrufe__no { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.bsys-anrufe__eur {
  font-family: var(--font-display); font-size: 13px; color: var(--white);
  min-width: 48px; text-align: right;
}
.bsys-anrufe__eur--grau { color: rgba(255, 255, 255, 0.32); }
/* Schmale Geraete: die Zeile traegt Punkt + Text + Urteil-Pille + Betrag.
   Bei 320 px ragte der Betrag gemessen 3 px aus der Section (259 px Inhalt in
   228 px Platz). Erst wird alles eine Stufe kleiner, unter 400 px faellt die
   Pille weg — ihre Aussage traegt der farbige Punkt weiter, und der BETRAG
   bleibt: er ist die Ueberschrift der Etappe („Jeder Anruf in Euro"). */
@media (max-width: 560px) {
  .bsys-anrufe__row { font-size: 11.5px; gap: 6px; padding: 8px 9px; }
  .bsys-anrufe__eur { font-size: 12px; min-width: 40px; }
  .bsys-anrufe__ok, .bsys-anrufe__no { font-size: 8.5px; padding: 3px 6px; }
}
@media (max-width: 400px) {
  .bsys-anrufe__ok, .bsys-anrufe__no { display: none; }
}

/* Die Zeile ist seit dem 17.09. EIN Satz: ihr zweiter („Bese-AI sieht, ueber
   welchen Weg …") stand fast wortgleich im `.ws-system__note`-Absatz direkt
   darunter. */
.bsys-rueck__zeile {
  margin: 0; text-align: center; max-width: 74ch; margin-inline: auto;
  font-size: 14.5px; line-height: 1.65;
  color: var(--heading-color); font-weight: var(--weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .bsys-anrufe__row { animation: none; opacity: 1; transform: none; }
}

/* ===========================================================================
   M1 — BILANZ-ZEILE (.lbilanz) + STIMMEN-UMZUG · Startseite
   ---------------------------------------------------------------------------
   Block M1, 17.09.2026. Drei Entscheidungen von Marie, zwei davon hier:

   1 · „Schmale Zahlen-Zeile ans Ende der Leistungen."
       Die Section „Bese Media in Zahlen" (.zahlen, 725 px mit eigenem Kopf,
       Stichtag-Zeile und TÜV-Siegel) ist von der Startseite; ihre drei
       Kennzahlen laufen als Abschluss-Band am Fuß von „Vier Leistungen, ein
       System" (Markup in section-leistungen-schluss.html). Das Partial
       section-zahlen-home.html und sein CSS bleiben unverändert im Repo.
       DREI statt vier Zahlen: „250+ Partnerbetriebe" steht seit Phase 7 in der
       Hero-Vertrauenszeile — ein zweites Mal wäre genau die Dublette, die
       Phase 4 aufgelöst hat.

   2 · „Stimmen nach unten, vor ‚Passt das zu dir?'."
       Die Stimmen-Section (.reviews auf der Startseite) stand seit dem 16.09.
       direkt unter den Videos und war dort DUNKEL — sie lag zwischen .proof
       und .beseai, also mitten im System-Bogen. An ihrem neuen Platz liegt
       sie zwischen Über uns (weiß) und Passt-das (grau), und dort wäre ein
       dunkles Band ein Solitär: die Folge hieße App(D) · Über uns(W) ·
       Stimmen(D) · Passt-das(G) · FAQ(D) — fünf Ton-Wechsel in fünf Bändern,
       genau die Unruhe, die Maries Premium-Runde vom 04.09. beseitigt hat.
       Sie ist deshalb WEISS und verschmilzt mit Über uns zu EINEM weißen
       Feld — exakt die Rolle, die bis heute die Zahlen-Section hatte.
       Das ist keine Rhythmus-Optimierung (Marie 17.09.: „Rhythmus erst in der
       Schlussrunde"), sondern der unveränderte Rhythmus mit einem anderen
       Bewohner; die Zonen-Zählung und die Zahl der Band-Wechsel bleiben gleich.
       Betroffen sind vier Listen (§0a-Regel „eine Insel sind vier Listen"):
       Insel-Tokens, Insel-Hintergrund, Eyebrow-Pille und Startseiten-Fläche —
       alle vier oben im Light-Block geändert, dazu die Elfsight-Kachel-Optik
       (helle Hairline-Karten → Charcoal, weil der Grund jetzt weiß ist).

   Gestaltung der Zeile: sie schließt eine Section ab, die aus vier schweren
   Dunkel-Karten besteht — also bewusst leise. Kein eigener Kopf (Marie), kein
   Cyan-Spotlight (der gehört auf dunklen Grund), nur eine Haarlinie als
   Bilanz-Strich, Tinte-Zahlen in Montserrat Bold und die Versal-Labels im
   Caption-Raster der Kapitel-Marken darüber (12 px / 700 / 0,2 em) — so
   reimt sich die Zeile auf die Karten, statt ein Fremdkörper zu sein.
   =========================================================================== */

.lbilanz {
  margin-top: clamp(40px, 4.4vw, 64px);
  padding-top: clamp(28px, 3vw, 44px);
  /* Bilanz-Strich über das Glas-Hairline-Token: es ist theme-aware (hell
     rgba(16,24,32,.10), dunkel rgba(255,255,255,.08)) und macht eine eigene
     Dark-Regel überflüssig. Guardian 17.09. — mein erster Wert war der
     hellen Fassung byte-identisch, nur eben hart getippt. Die Zeile erbt
     vom :root bzw. dem Theme: `.lbilanz` ist Kind des `.container`, NICHT
     der Dunkel-Karten (die redeklarieren das Token für sich selbst). */
  border-top: 1px solid var(--glass-border);
}

/* Der Bilanz-Strip bringt aus seiner Zeit als Abschluss der Cases-Section
   einen eigenen margin-top mit — hier trägt ihn `.lbilanz`. */
.lbilanz .stats__grid {
  margin-top: 0;
}

/* Drei Spalten statt vier. Die Basis-Regel (.stats__grid) steht früher in der
   Datei und hat dieselbe Spezifität wie eine Klasse — der Modifier gewinnt
   hier per Quellreihenfolge. */
.stats__grid--drei {
  grid-template-columns: repeat(3, 1fr);
}

/* Kein Cyan-Spotlight: der Verlauf hinter dem Strip ist additives Licht und
   braucht dunklen Grund (dieselbe Lehre wie beim Hero-Film und der
   Blickkarte). Auf Weiß ist er ein blasser Blauschleier ohne Wirkung. */
.lbilanz .stats__grid::before {
  display: none;
}

/* Eine Stufe kleiner als in der eigenen Section: dort trugen die Zahlen eine
   H2 über sich und waren der Inhalt, hier sind sie der Abschluss und stehen
   unter vier Karten mit eigenen H3. 2,4 rem statt 3 rem hält sie unter der
   Section-H2 und über allem anderen auf dem Band. */
.lbilanz .stats__value {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--heading-color);
}

/* Labels im Caption-Raster der Kapitel-Marken (.lcard__cap): 12 px, 700,
   0,2 em = die 2,5 px Sperrung der CI-Caption bei 12 px. */
.lbilanz .stats__label {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  color: var(--text-200);
}

/* Hairlines zwischen den Zahlen in Tinte statt Weiß (der Basis-Wert ist für
   dunkle Bänder gedacht). Spezifität 0,3,1 schlägt die 0,2,1 der Basis. */
.lbilanz .stats__item + .stats__item::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(16, 24, 32, 0.14) 35%,
    rgba(16, 24, 32, 0.14) 65%,
    transparent 100%
  );
}

/* Stichtag: leer, solange {{zahlen-stichtag}} in daten.json leer ist
   (Zahlen-Kanon im Briefing = OFFEN). `:empty` greift nur, weil der
   Platzhalter im Partial ohne Zeilenumbruch zwischen den Tags steht. */
.lbilanz__stand {
  margin: clamp(18px, 2vw, 26px) 0 0;
  text-align: center;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.04em;
  color: var(--text-300);
}
.lbilanz__stand:empty {
  display: none;
}

/* Dark-Theme: die Section ist dort kein weißes Band, sondern läuft auf der
   Seitenfläche — die Trenner zwischen den Zahlen brauchen die helle Fassung
   zurück. Der Bilanz-Strich selbst braucht hier NICHTS: er läuft über
   var(--glass-border) und dreht mit dem Theme von allein. Die Zahlen stehen
   ohnehin auf --heading-color (= Weiß). */
html:not([data-theme="light"]) .lbilanz .stats__item + .stats__item::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 35%,
    rgba(255, 255, 255, 0.14) 65%,
    transparent 100%
  );
}

/* Unter 768 px bricht die geteilte Basis-Regel in ZWEI Spalten — bei drei
   Zahlen stünde die dritte allein in Reihe 2, und die 2×2-Hairline-Logik der
   Basis (nth-child(2n) senkrecht, nth-child(n+3) waagerecht) zeichnet dann
   einen Strich über eine Zeile mit nur einem Eintrag. Deshalb hier: EINE
   Spalte, Trennung waagerecht zwischen allen dreien. */
@media (max-width: 767px) {
  .lbilanz .stats__grid--drei {
    grid-template-columns: 1fr;
  }
  .lbilanz .stats__item:nth-child(2n)::before,
  .lbilanz .stats__item:nth-child(n + 3)::after {
    display: none;
  }
  .lbilanz .stats__item + .stats__item::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 12%;
    width: 76%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(16, 24, 32, 0.14) 35%,
      rgba(16, 24, 32, 0.14) 65%,
      transparent 100%
    );
  }
  html:not([data-theme="light"]) .lbilanz .stats__item + .stats__item::before {
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.14) 35%,
      rgba(255, 255, 255, 0.14) 65%,
      transparent 100%
    );
  }
}

/* =====================================================================
   DER KOSMOS (.kkos) — Startseite · Auftragsgewinnung ·
   Mitarbeitergewinnung, neu 2026-09-17
   ---------------------------------------------------------------------
   Marie: „Das ist auf der Startseite nach der Section ‚Vier Leistungen,
   ein System' hinzugefügt." — und am selben Tag: „Das kannst du auch so
   auf der Auftragsgewinnungsseite verwenden. Bei der Mitarbeiter-
   gewinnungsseite: Mach bitte eins, was für die Mitarbeitergewinnung
   zugeschnitten ist."

   DREI Sections teilen sich diesen Block: section-kanal-kosmos.html
   (Startseite + AG, identisch) und section-ma-kosmos.html (eigener
   Inhalt, gleiche Optik). Eine Änderung hier trifft alle drei — so
   gewollt, es ist EINE Fassung. Nur der Gründer-Kosmos auf
   „Selbstständig machen" (.pb-*) bleibt davon unberührt, dafür gibt es
   den eigenen Prefix.

   Optik = das Rezept des Gründer-Kosmos (.probleme/.pb-* der Seite
   „Selbstständig machen", Marie 2026-06-11), hier mit EIGENEM Prefix
   .kkos/.kk-, damit eine Änderung hier die dortige Section nicht
   trifft. Radien, Tempi und die Gegenrotation sind 1:1 übernommen.

   DUNKEL-INSEL MIT LOKALEM TOKEN-PAKET: Die Section MUSS auf dunklem
   Grund stehen — Orbits, Glow und Dots sind additives weißes Licht und
   verschwinden auf einem hellen Band (Lehre Blickkarte/Bese-System-Rad,
   16./17.09.). Sie steht dafür bewusst NICHT in den geteilten
   Insel-Listen, sondern trägt ihr Paket lokal — Präzedenz
   /zertifizierungen/ (§5a, 15.09.): die Listen sind die
   meistbeschriebene Stelle der Datei (Parallel-Sessions), und Maries
   Regel „Rhythmus erst in der Schlussrunde" (17.09.) verbietet
   ohnehin, jetzt am Band-Rhythmus zu drehen. Wird die Section später
   in den Rhythmus aufgenommen, ersetzt der Listen-Eintrag diesen
   lokalen Block ersatzlos.

   ⚠ Das Paket ist eine KOPIE der konsolidierten Insel-Tokens und muss
   vollständig bleiben. Insbesondere gehört --silver-blue dazu: das
   Light-Theme biegt es auf #44627C um, und --em-grad-a zieht daraus
   seinen Wert — ohne die Zeile liefe der Kursiv-Verlauf der H2 von
   Schiefer statt von Silver Blue los (gemessener Fehler vom 17.09.).

   Band-Folge dadurch: Startseite Leistungen(W) · KOSMOS(D) ·
   Bese-System(G); MA seit 19.09. mawx(D) · KOSMOS(D) · ma-beweis(D) — drei
   Dunkel-Sections in Folge, seit der 5-Stufen-Weg raus ist (vorher maweg(W)
   · KOSMOS(D) · ma-beweis(G) — beide ohne
   Naht mit gleichem Ton. AG: Bese-System(W) · KOSMOS(D) · Bese-AI(D),
   die beiden dunklen bilden dort EINE Zone (Präzedenz MF: mf-fokus +
   Bese-AI). Maries Regel „Rhythmus erst in der Schlussrunde" (17.09.)
   gilt — hier wurde gemessen und dokumentiert, nicht umsortiert.

   KEIN eigenes JS: der generische [data-reveal]-Hook setzt
   .is-revealed auf die Section, alle Loops stehen bis dahin auf
   paused. scripts.html bleibt unangetastet.
   ===================================================================== */

.kkos {
  /* Knappe Stufe (Token-Kommentar: „nur für thematisch zusammen-
     gehörige Sections") — der Kosmos ist das Bild zu den vier
     Leistungen direkt darüber. Hält die Section auf Fensterhöhe. */
  padding-block: var(--section-py-tight);
}

.kkos__header {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Lange Kern-Aussage braucht mehr Zeilenbreite als die 22ch-Default
   des section-header__title; manual gegen „Rohr-reinigung"-Trennungen
   (§5a-Pattern wie .capacity__title). */
.kkos__title {
  max-width: 30ch;
  hyphens: manual;
}

.kkos__sub {
  margin: var(--space-4) 0 0;
  max-width: 54ch;
  font-size: var(--text-lead);
  color: var(--text-200);
}

/* ---------- Bühne: Kosmos hinten, zwei Kacheln davor ----------
   3×3-Grid, beide Kacheln in der mittleren Zeile (= gleiche Höhe),
   dazwischen die freie Spur mit dem Hub. min-height garantiert, dass
   das Orbital-System komplett hineinpasst — daher KEIN overflow. */
.kkos__stage {
  /* 672 statt 700 (gemessen 17.09.): bei 700 stand die Section auf
     Maries MacBook-Fenster mit 1068 px gegen 1044 px Platz — die
     Section-Hoehe haengt direkt an der Kosmos-Groesse. */
  --cosmos-size: clamp(500px, 54vw, 672px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(100px, 14vw, 210px) minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  padding-block: clamp(12px, 2vw, 26px);
  min-height: var(--cosmos-size);
}

/* ---------- Glaskacheln (echtes Milchglas über dem Kosmos) ----------
   backdrop-filter lebt hier auf: der Hintergrund ist visuell reich
   (rotierende Chips), genau der Fall, für den CI §07 den Blur vorsieht.
   KEINE Hover-Transforms — transform + backdrop-filter triggert
   Chrome-Repaint-Flicker (§5a, 2026-05-18). */
.kkos__tile {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.2vw, 44px);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid var(--glass-border-hover);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 48px rgba(var(--shadow-rgb), 0.32);
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease calc(var(--i, 0) * 0.12s),
    transform 0.7s var(--ease-morph) calc(var(--i, 0) * 0.12s);
}

.kkos.is-revealed .kkos__tile {
  opacity: 1;
  transform: none;
}

.kkos__tile--right {
  grid-column: 3;
  grid-row: 2;
}

.kkos__index {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1;
  color: var(--text-400);
  user-select: none;
}

/* §5a-Pattern „H3 als Card-Headline" (wie .capacity__sub) */
.kkos__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: var(--weight-regular);
  margin: 0 0 var(--space-4);
  color: var(--text-100);
}

.kkos__card-text {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-body);
  line-height: 1.72;
  color: var(--text-200);
}

/* Kachelboden 01: Social-Proof-Zeile — Pendant zum CTA in Kachel 02 */
.kkos__proof {
  margin-top: auto;
  padding-top: clamp(20px, 2.6vw, 32px);
  display: flex;
  align-items: center;
  gap: 14px;
}

.kkos__proof-avatars {
  display: flex;
  flex-shrink: 0;
}

.kkos__proof-avatars img {
  width: clamp(34px, 3vw, 40px);
  height: clamp(34px, 3vw, 40px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface-2);
  margin-left: -10px;
}

.kkos__proof-avatars img:first-child {
  margin-left: 0;
}

.kkos__proof-text {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-200);
}

.kkos__proof-text strong {
  color: var(--text-100);
  font-weight: var(--weight-semibold);
}

.kkos__cta {
  margin-top: auto;
  padding-top: clamp(20px, 2.6vw, 32px);
}

/* ---------- Der Kosmos ---------- */
.kk-cosmos {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--cosmos-size, 700px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease 0.25s;
}

.kkos.is-revealed .kk-cosmos {
  opacity: 1;
}

/* Atmender Radial-Glow hinterm Hub — weiß, nicht Cyan (Kosmos-Regel
   Marie 2026-06-11: der Kosmos soll nicht blau wirken) */
.kk-cosmos__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 70%);
  animation: kk-glow-breathe 6.5s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes kk-glow-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.8; }
  50%      { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
}

.kk-cosmos__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
}

.kk-cosmos__orbit--1 {
  width: calc(var(--cosmos-size) * 0.40);
  height: calc(var(--cosmos-size) * 0.40);
}

.kk-cosmos__orbit--2 {
  width: calc(var(--cosmos-size) * 0.62);
  height: calc(var(--cosmos-size) * 0.62);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Ring 3 bei 0.77 statt 0.90 (aus dem Original-Rezept): haelt die
   Chip-Pillen weitgehend in der Kosmos-Box.
   GEMESSEN 17.09.: bei genau 900 px (kleinste Desktop-Breite, Kosmos
   500 px) ragt der laengste Chip „Kanalservice-Magazin" rund 30 px
   ueber den gedachten Kreis hinaus. Folgenlos und bewusst so
   gelassen — die Kosmos-Box hat keine sichtbare Grenze, und die
   BUEHNE darunter ist container-breit: ueber die Section ragt bei
   keiner der 14 Pflichtbreiten etwas hinaus (gemessen, beide Themes).
   Ring 3 weiter nach innen zu ziehen wuerde die Ringabstaende
   sichtbar stauchen. */
.kk-cosmos__orbit--3 {
  width: calc(var(--cosmos-size) * 0.77);
  height: calc(var(--cosmos-size) * 0.77);
  border-color: rgba(255, 255, 255, 0.11);
}

/* Hub: DECKENDER Kreis über den Spin-Ebenen — die Chips laufen
   dahinter durch (Orbit-hinter-Planet-Lesart). Deckend ist Pflicht. */
.kk-cosmos__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: clamp(112px, 11.5vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 44px rgba(255, 255, 255, 0.14);
  animation: kk-center-breathe 4.8s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes kk-center-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 36px rgba(255, 255, 255, 0.10); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 56px rgba(255, 255, 255, 0.20); }
}

.kk-cosmos__hub-icon {
  width: 26px;
  height: 26px;
  color: var(--accent-hover);
}

.kk-cosmos__hub-label {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-100);
}

/* ---------- Spin-Ebenen (3 Ringe, verschiedene Tempi) ----------
   Ring 2 läuft gegenläufig: animation-direction: reverse auf Spin UND
   Chip-Innen — die Summe beider Rotationen bleibt -angle, die Labels
   stehen damit weiterhin aufrecht. */
.kk-cosmos__spin {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Eigene Compositing-Layer für die Dauer-Rotation — wichtig, weil
     davor zwei backdrop-filter-Kacheln resampeln */
  will-change: transform;
  animation: kk-spin linear infinite;
  animation-play-state: paused;
}

.kk-cosmos__spin--1 { --r: calc(var(--cosmos-size) * 0.20);  animation-duration: 28s; }
.kk-cosmos__spin--2 { --r: calc(var(--cosmos-size) * 0.31);  animation-duration: 44s; animation-direction: reverse; }
.kk-cosmos__spin--3 { --r: calc(var(--cosmos-size) * 0.385); animation-duration: 64s; }

@keyframes kk-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Chips (0×0-Anker auf dem Ring + aufrechte Pille) ---------- */
.kk-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--r, 200px)));
}

.kk-chip__inner {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  /* Deckender Chip-Grund: die Pillen laufen hinter dem Hub durch und
     stehen über den Orbit-Linien */
  background: var(--surface-1);
  border: 1px solid var(--glass-border-hover);
  box-shadow: 0 12px 28px rgba(var(--shadow-rgb), 0.35);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-100);
  white-space: nowrap;
  will-change: transform;
  animation: kk-counter-spin linear infinite;
  animation-play-state: paused;
}

/* Counter-Dauer/-Richtung muss EXAKT zum jeweiligen Ring passen */
.kk-chip__inner--1 { animation-duration: 28s; }
.kk-chip__inner--2 { animation-duration: 44s; animation-direction: reverse; }
.kk-chip__inner--3 { animation-duration: 64s; }

/* Counter-Rotation: kompensiert Spin (−360°) UND den statischen
   Chip-Winkel (−angle); translate(-50%,-50%) zentriert die Pille auf
   ihrem 0×0-Anker und muss in der Transform-Kette bleiben. */
@keyframes kk-counter-spin {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg))); }
  to   { transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg) - 360deg)); }
}

.kk-chip__glyph {
  display: inline-flex;
}

.kk-chip__glyph .icon {
  width: 15px;
  height: 15px;
  color: var(--accent-hover);
}

/* Licht-Dots auf Ring 3 (symmetrisch — keine Gegenrotation nötig) */
.kk-cosmos__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0.6;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
  transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--r, 200px)));
}

/* Äußerer Dot-Kranz: eigener Radius jenseits von Ring 3 (eigenes --r
   schlägt das geerbte der Spin-Group) — bleibt mit 0.455 < 0.5 in der
   Kosmos-Box */
.kk-cosmos__dot--outer {
  --r: calc(var(--cosmos-size) * 0.455);
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  opacity: 0.4;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* ---------- Loops erst ab Reveal ---------- */
.kkos.is-revealed .kk-cosmos__glow,
.kkos.is-revealed .kk-cosmos__hub,
.kkos.is-revealed .kk-cosmos__spin,
.kkos.is-revealed .kk-chip__inner {
  animation-play-state: running;
}

/* ---------- Mobil/Tablet (<900px) ----------
   Kacheln volle Breite, Kosmos bleibt als gedimmte Ebene dahinter.
   backdrop-filter entfällt (GPU-Last + kaum sichtbarer Gewinn bei
   vollflächigen Kacheln) — stattdessen deckender Grund. */
@media (max-width: 899px) {
  .kkos__stage {
    /* An die Viewport-Breite gekoppelt: mit festen 540 px ragte der
       Kosmos bei 375 px je 83 px ueber die Section hinaus und die
       Chips wurden an BEIDEN Raendern mitten im Wort abgeschnitten
       („eoproduktion", „oogle") — das liest sich als Fehler, nicht
       als Deko (gemessen + angesehen 17.09.). */
    --cosmos-size: min(540px, 96vw);
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 6vw, 48px);
    min-height: 0;
  }
  /* Die Chips tragen auf dem Handy keine Information mehr: sie liegen
     hinter den vollflaechigen Kacheln und waeren im geschrumpften
     Kosmos breiter als ihr eigener Ring. Der Hintergrund bleibt als
     abstrakte Deko — Ringe, Glow, Dots und der Hub mit der Nummer,
     also genau die Kernaussage. Die Kanaele selbst stehen im Text. */
  .kk-chip {
    display: none;
  }
  .kkos__tile {
    width: 100%;
    background: rgba(12, 20, 28, 0.82);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .kk-cosmos {
    opacity: 0;
  }
  .kkos.is-revealed .kk-cosmos {
    opacity: 0.5;
  }
}

/* ---------- Reduced Motion: Szene steht, bleibt aber sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
  .kk-cosmos__glow,
  .kk-cosmos__hub,
  .kk-cosmos__spin,
  .kk-chip__inner {
    animation: none !important;
  }
}

/* ---------- Ohne JavaScript: Endzustand zeigen ----------
   Der [data-reveal]-Hook setzt .is-revealed; ohne JS bliebe die
   Section sonst unsichtbar (Lehre Website-Ablauf, 17.09.). */
@media (scripting: none) {
  .kkos__tile { opacity: 1; transform: none; }
  .kk-cosmos { opacity: 1; }
}

/* =====================================================================
   .kkos im hellen Theme: Dunkel-Insel mit LOKALEM Token-Paket
   (Kopie der konsolidierten Insel-Tokens — siehe Blockkopf)
   ===================================================================== */
html[data-theme="light"]
  :is(.page-home, .page-auftragsgewinnung, .page-mitarbeitergewinnung)
  .kkos {
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  /* ⚠ --silver-blue MUSS mit: das Light-Theme biegt es auf #44627C um,
     und --em-grad-a zieht daraus seinen Wert (gemessener Fehler 17.09.) */
  --silver-blue: #B3CCDF;
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --accent-hover: #4DA8DA;
  --cyan-hi: #6BC4F0;
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --logo-mono-filter: brightness(0) invert(1);
  --focus-ring: #FFFFFF;
  color: var(--text-100);
  background: linear-gradient(180deg, #1F2226 0%, #17191D 55%, #131518 100%);
}

/* ============================================================
   M5 · FÜHRUNGSEBENE in der Startseiten-Über-uns-Section
   (2026-09-17, Go-Live-Plan M5 — Erich-Briefing 2.2: „Über uns:
   Erich + Führungsebene, Fries bleibt")

   Vier Namen mit ihrem Verantwortungsbereich, rein typografisch —
   OHNE Porträts: dieselben vier stehen im Spezialisten-Fries
   darunter, eine zweite Porträt-Reihe wäre die Bild-Dublette
   (§0a). Herleitung im Markup-Kommentar des Partials.

   Sitzt in Block A zwischen Erichs Story und dem Signature-CTA
   und liegt damit in der Textspalte des Editorial-Rasters
   (Ankerspalte 400px | Text) — deshalb kein eigenes Raster,
   nur zwei Spalten ab 560px Elementbreite.
   ============================================================ */
.page-home .about-lead__fuehrung {
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--glass-border);
}

/* Versal-Label im Raster des Kickers „GESCHÄFTSFÜHRER" darüber —
   gleiche Größe, gleiche Sperrung, damit beide als EINE Ebene lesen. */
.page-home .about-lead__fuehrung-label {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-200);
}

.page-home .about-lead__fuehrung-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.2vw, 14px) clamp(20px, 2.4vw, 32px);
  margin: 0;
}
/* Container-Query-Ersatz: die Textspalte ist ab 1024px rund 540px breit,
   darunter läuft der Block über die volle Box — zwei Spalten lohnen erst
   ab einer Viewport-Breite, bei der beide Fälle ≥ 260px je Spalte geben. */
@media (min-width: 560px) {
  .page-home .about-lead__fuehrung-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-home .about-lead__fuehrung-item { min-width: 0; }

.page-home .about-lead__fuehrung-item dt {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--heading-color);
}
.page-home .about-lead__fuehrung-item dd {
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-200);
}


/* ============================================================
   ÜBER UNS — Phase M7 (17.09.2026): die ausführliche Über-uns-Seite
   NUR /unternehmen/ueber-uns/ (Klassen-Prefix .uu-*).

   Marie (Briefing §10): „eine ausführlichere Über-uns-Seite … Bilder von
   uns … nicht einfach nur Team-Bilder und Namen und Positionen. Dafür
   kannst du die Team-Seite streichen." Die Team-Seite ist damit hierin
   aufgegangen (Rollen, Verantwortliche, Fries).

   Richtung: Firmenporträt wie eine Reportage — ruhige Lesespalten,
   Fotos als tragende Flächen, EIN Akzent (Markenblau/Cyan nur als
   Linie, Punkt, Nummer, Balken). Keine Zähler (Marie 17.09.), keine
   Eyebrow-Pillen (die Köpfe tragen Titel + Text, Zwei-Teile-Test).

   Bänder im hellen Theme: Geschichte W · Vogelperspektive D (Insel,
   konsolidierte Liste) · Verantwortung G · Rollen W · Team G mit dunklem
   Fries · Büroräume D · Abschluss D. Im dunklen Theme laufen alle
   Sections auf der Seitenfläche.

   ⚠ Reveal-Hooks sitzen auf KLEINEN Elementen (Balken, Netz, Karten-Liste,
   Fries), nicht auf den Sections: der generische [data-reveal]-Observer
   braucht 22 % Sichtbarkeit, die Geschichte ist auf dem Handy mehrere
   Bildschirme hoch und würde diese Schwelle nie erreichen.
   ============================================================ */

/* ---------- Hero: Office-Hintergrundvideo (Marie 17.09.2026) ----------
   „das Video von Bese Media im Hintergrund, wie bei der Karriere-Seite".
   Layer, Poster und Engine sind die geteilten Bausteine (Block „Hero —
   Office-Hintergrundvideo"); hier stehen nur die zwei Unterschiede:

   (1) Höhe = EIN Bildschirm, auf ALLEN Breiten (Marie-Regel, Rechnung wie
       .ka-hero: 73px Navbar abgezogen, svh mit vh-Fallback, min-height —
       der Inhalt gewinnt). Das Logo-Band sitzt am Fuß, der Rest zentriert
       sich im Restraum; ab 1024px macht das bereits die geteilte
       :has(.hero-logos)-Regel, darunter übernimmt diese.

   (2) Überlagerung: EINE gleichmäßige 70-%-Abdunklung über das ganze
       Video (Marie 17.09.2026, vierte Stufe: Oval 0,50/0,36 über 25 % →
       20 % gleichmäßig → 50 % → „noch dunkler … 70 %").
       Mit 50 % GEMESSEN: H1 p95 4,8–5,3, „Kunde" p95 2,4–3,3 : 1; mit
       20 %: H1 p95 2,1–2,4. Mit 70 % GEMESSEN (1440/1024/390): H1 p95 9,2–9,7 (Median 11,3–11,8)
       · „Kunde" p95 4,5–5,6 (Median 5,6–6,5) : 1.
       Nach Änderungen NEU MESSEN. */
.uu-hero {
  /* HISTORIE: die -73px galten der Leiste im Fluss. Seit [Block: kopfleiste-r24] (24.09.) ist die Kopfleiste fixed, dieser Hero misst 100svh — Regel dort. */
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  display: flex;
  align-items: stretch;
}

.uu-hero > .container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.uu-hero > .container > :not(.hero-logos) {
  margin-block: auto;
}

@media (min-width: 1024px) {
  .uu-hero { padding-block: clamp(24px, 5vh, 96px) var(--hero-logos-rand); }
}

/* (Die 70-%-Überlagerung steht seit 18.09.2026 in der geteilten .hero__bgvideo-scrim-Regel.) */

/* ---------- Bänder (nur hell) ---------- */
html[data-theme="light"] .page-ueber-uns :is(.uu-story, .uu-rollen) {
  background: #FFFFFF;
}
html[data-theme="light"] .page-ueber-uns .uu-verantwortung {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}

.uu-story,
.uu-blick,
.uu-verantwortung,
.uu-rollen {
  padding-block: var(--section-py);
}
.uu-team {
  /* Endet mit dem randlosen Fries → unten kein Polster (§0a Section-Rhythmus). */
  padding-top: var(--section-py);
  padding-bottom: 0;
}

.uu-story__title,
.uu-blick__title,
.uu-verantwortung__title,
.uu-rollen__title,
.uu-team__title {
  margin: 0;
  padding-right: 0.08em;
}

/* ============================================================
   1 · Die Geschichte — Runde 2 (17.09.2026)
   Marie: „noch nicht premium genug gestaltet, webdesign-technisch … ein
   anderes Bild von Erich … die Bilder wechseln mit dem Zeitstrahl, sodass
   man auch Team-Bilder dazu nimmt."

   Aufbau: links die BÜHNE (ein 4:5-Rahmen mit vier gestapelten Fotos, eins
   je Kapitel; ab 1024px klebt sie samt Titel), rechts die vier Kapitel an
   der Zeitschiene. Die Engine in scripts.html ([data-uu-story]) bestimmt
   an einer Leselinie (32 % unter der Navbar bzw. unter der klebenden
   Bühne) das aktive Kapitel und setzt:
     · .is-active auf Foto, Bildunterschrift, Kapitel (Nachbarn dimmen)
     · --uu-prog (0…1) = gefüllter Anteil der Zeitschiene
     · --uu-seg  (0…1) = Fortschritt IM aktiven Kapitel → das aktive der
       vier Segmente oben auf dem Foto füllt sich, vergangene sind voll
   Ohne JavaScript (kein .is-js): Foto 1 steht, kein Dimmen, keine Füllung.
   Reduced-motion: harte Wechsel, keine Kamerafahrt.

   Farben auf dem Foto sind THEME-FEST (die Bühne ist in beiden Themes ein
   Foto mit Near-Black-Scrim, Rezept .uu-blick__panel): Weiß als Text,
   das Segment-Cyan hart #4DA8DA — Präzedenz §5a „Orbit-Bögen theme-fest".
   ============================================================ */
.uu-story__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}
/* < 1024px: Titel und Bühne werden direkte Flex-Kinder (display: contents),
   damit die Bühne durch den ganzen Zeitstrahl kleben kann — ihre Sticky-
   Reichweite ist der Flex-Container, nicht ein kurzer Wrapper. */
.uu-story__aside {
  display: contents;
}
.uu-story__title {
  order: -2;
}

/* ---------- Bühne ---------- */
.uu-story__stage {
  position: sticky;
  top: 73px;
  z-index: 2;
  order: -1;
  margin: 0;
  aspect-ratio: 16 / 9;
  /* Unter 1024px klebt die Bühne oben — auf Tablets (768–1023px) würde 16:9
     bis zu 470px des Fensters belegen; der Deckel hält das Lesefenster frei
     (gemessen 900×900: 470 → 360px). object-fit: cover trägt den Rest. */
  max-height: min(40svh, 420px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: #060A0E;
  box-shadow: 0 18px 44px rgba(var(--shadow-rgb), 0.26);
}
.uu-story__frames {
  position: absolute;
  inset: 0;
}
.uu-story__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 700ms var(--ease-morph), transform 1800ms var(--ease-morph);
  will-change: opacity, transform;
}
.uu-story__frame.is-active {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0ms, 0ms;
}
/* Bildlage im 16:9-Ausschnitt (Handy): der Blick sitzt bei jedem Foto woanders. */
.uu-story__frame--lichthof   { object-position: 50% 26%; }
.uu-story__frame--konzept    { object-position: 50% 30%; }
.uu-story__frame--meeting       { object-position: 50% 28%; }
.uu-story__frame--tablet     { object-position: 70% 30%; } /* 18.09.: Foto der Kanal-Spezialisierungs-Kachel (Marie), vorher Erich vor dem Firmensitz */

/* Scrims: oben leicht (Segmente), unten dicht (Bildunterschrift). */
.uu-story__stage::before,
.uu-story__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.uu-story__stage::before {
  top: 0;
  height: 28%;
  background: linear-gradient(180deg, rgba(6, 10, 14, 0.42) 0%, rgba(6, 10, 14, 0) 100%);
}
.uu-story__stage::after {
  bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(6, 10, 14, 0) 0%, rgba(6, 10, 14, 0.58) 45%, rgba(6, 10, 14, 0.92) 100%);
}

/* Vier Segmente = die vier Kapitel; das aktive füllt sich mit --uu-seg. */
.uu-story__segs {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  left: clamp(14px, 1.6vw, 20px);
  right: clamp(14px, 1.6vw, 20px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.uu-story__seg {
  position: relative;
  height: 2px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.uu-story__seg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  transform-origin: left center;
  transform: scaleX(0);
}
.uu-story__seg.is-past::before { transform: scaleX(1); }
.uu-story__seg.is-active { background: rgba(255, 255, 255, 0.34); }
.uu-story__seg.is-active::before {
  background: #4DA8DA; /* theme-fest, Präzedenz §5a Orbit-Bögen */
  transform: scaleX(var(--uu-seg, 0));
}

/* Bildunterschrift auf dem Scrim — ein Eintrag je Kapitel, gestapelt. */
.uu-story__caps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  padding: clamp(16px, 2.2vw, 28px);
}
.uu-story__cap {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-morph), transform 600ms var(--ease-morph);
}
.uu-story__cap.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}
.uu-story__cap-kicker {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.uu-story__cap-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-wrap: balance;
  padding-right: 0.08em;
}

@media (min-width: 1024px) {
  .uu-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(56px, 6vw, 112px);
    align-items: start;
  }
  /* Ab hier klebt die ganze Spalte: Titel + Bühne. */
  .uu-story__aside {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.6vw, 36px);
    position: sticky;
    top: calc(73px + 32px);
  }
  .uu-story__title,
  .uu-story__stage {
    order: 0;
  }
  .uu-story__stage {
    position: relative;
    top: auto;
    z-index: auto;
    aspect-ratio: 4 / 5;
    max-height: none;
    /* Breite aus der Fensterhöhe: Titel (~120) + Abstand + Rahmen müssen in
       (100svh − 105px) passen, sonst hängt der Rahmenfuß unter der Falz.
       Gemessen: 1440×900 → 480, 1728×1117 → 480, 1024×768 → 374 px. */
    width: 100%;
    max-width: clamp(280px, calc((100svh - 300px) * 0.8), 480px);
    box-shadow: 0 28px 64px rgba(var(--shadow-rgb), 0.3);
  }
  .uu-story__frame--lichthof   { object-position: 50% 50%; }
  .uu-story__frame--konzept    { object-position: 50% 50%; }
  .uu-story__frame--meeting  { object-position: 50% 50%; }
  .uu-story__frame--tablet     { object-position: 65% 32%; }
}

/* ---------- Chronik, Runde 4 „Das Editorial" (18.09.2026) ----------
   Marie: „nicht einladend, sich das durchzulesen … die Animation sieht sehr
   trostlos aus" → Entwurf A von drei auf der Leinwand
   https://claude.ai/artifact/BN6hAy1T7cRXvcRjyTErqK.
   Jedes Kapitel: Kopfzeile (Nummer · Kicker · Hairline · Zähler) → H3 →
   Lead-Satz (der Hook) → Rest zweispaltig (.uu-chronik__cols) oder Text
   neben Grafik (.uu-chronik__duo) → Belegzeile (.uu-beleg, offen mit
   Hairlines, die Zahl trägt) bzw. Kernsatz-Zeile (.uu-chronik__zitat).
   Die Schiene ist ein Lichtstrahl (Verlaufs-Tokens + Schein) mit einem
   Glanz an der Spitze, der --uu-prog folgt. Die Kapitel-TEXTE werden NICHT
   mehr gedimmt (Runde 2/3: 0,42 — das war das Trostlose); vergangen /
   aktiv / künftig zeigt allein der Marker.
   ⚠ Lead-Satz 20 px = CI-Lead — bewusste Abweichung von der 16-px-
   Fließtext-Regel (§5a, Marie 2026-05-27), Rückbau = --uu-lead-size auf
   var(--text-lead).
   Runde 5 (18.09.2026, Marie: „Kapitel passt nicht hier … zu unruhig … es
   soll einfach klar die Sachen aussagen"): Kopfzeile = Nummer + Kicker
   (Hairline + Zähler raus), KEIN Glanz mehr (der atmende Punkt war die
   Unruhe), der Strahl läuft von Marker 1 bis Marker 4 — die Engine setzt
   --uu-rail-len (px) aus den Marker-Positionen; die Grundlinie hängt je
   Kapitel am Marker und braucht kein JS —,
   die Absätze laufen einspaltig (.uu-chronik__cols ist nur noch ein
   Stapel), die Netz-Linien enden an den Kreisrändern. */
.uu-chronik {
  --uu-rail: clamp(32px, 3.4vw, 64px);
  --uu-lead-size: 20px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--uu-rail);
}
/* Grundlinie: je Kapitel ein Stück von der eigenen Marker-Mitte (top 9 + 6 =
   15px) bis zur Marker-Mitte des nächsten Kapitels (dessen Oberkante liegt
   am Fuß des eigenen Polsters) — das letzte Kapitel zeichnet keins. So endet
   die Linie auch OHNE JavaScript am letzten Marker (Guardian 18.09.). */
.uu-chronik__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--uu-rail) + 5px);
  top: 15px;
  bottom: -15px;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--text-500);
}
/* … und der Strahl, der mit dem Lesen wächst (--uu-prog = Lage der Leselinie
   zwischen Marker 1 und Marker 4, --uu-rail-len = ihr Abstand in px, beides
   aus der Engine; ohne JS bleibt er auf scaleY(0)). Verlauf = die Headline-
   Tokens, ohne Schein und ohne Glanz (Runde 5). Liegt ÜBER den Kapiteln
   (z-index), weil die Grundlinie seit Runde 5 an den Kapiteln selbst hängt. */
.uu-chronik::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 15px;
  bottom: 15px;
  height: var(--uu-rail-len, auto);
  width: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--em-grad-a) 0%, var(--em-grad-b) 100%);
  transform-origin: top center;
  transform: scaleY(var(--uu-prog, 0));
  transition: transform 180ms linear;
}

.uu-chronik__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: clamp(48px, 6vw, 72px);
}
.uu-chronik__step:last-child {
  padding-bottom: 0;
}
/* Kapitel-Punkt: künftig hohl, vergangen + aktiv gefüllt, aktiv mit Hof.
   Der Text darunter bleibt in JEDEM Zustand voll lesbar. */
.uu-chronik__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--uu-rail) + 1px);
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--glow-rgb), 0.16);
  transition: background 400ms var(--ease-morph), box-shadow 400ms var(--ease-morph);
}
.uu-story.is-js .uu-chronik__step:not(.is-active):not(.is-past)::before {
  background: var(--surface-1, #FFFFFF);
  box-shadow: inset 0 0 0 1.5px var(--text-300);
}
html[data-theme="light"] .uu-story.is-js .uu-chronik__step:not(.is-active):not(.is-past)::before {
  background: var(--white);
}
.uu-story.is-js .uu-chronik__step.is-active::before {
  box-shadow: 0 0 0 5px rgba(var(--glow-rgb), 0.22);
}

/* Kopfzeile: Nummer · Kicker (Runde 5: ohne Hairline und Zähler) */
.uu-chronik__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0;
}
.uu-chronik__num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--heading-color);
}
.uu-chronik__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;
  line-height: 1.4;
  text-transform: uppercase;
}
.uu-chronik__kicker { color: var(--accent-hover); }
.uu-chronik__title {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  padding-right: 0.08em;
}
/* Der Hook: erster Absatz als Lead-Satz. */
.uu-chronik__lead {
  margin: 0;
  max-width: 34em;
  font-size: var(--uu-lead-size);
  line-height: 1.45;
  color: var(--text-100);
}
.uu-chronik__step p:not(.uu-chronik__lead):not(.uu-chronik__zitat) {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-200);
}
.uu-chronik__step p { overflow-wrap: break-word; }
/* Runde 5: EIN Lesestapel statt zwei Spalten — der Zweispalter mit ungleich
   langen Spalten las sich „unnatürlich" (Marie). Breite wie der Lead. */
.uu-chronik__cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 42em;
}
.uu-chronik__duo {
  display: grid;
  gap: var(--space-5) 40px;
  align-items: center;
}
.uu-chronik__duo-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Kernsatz als Serif-Zeile (eigener Slogan, deshalb <p>, kein <blockquote> — Guardian 18.09.), Akzent wie h2 em (Tokens, Puffer, clone). */
.uu-chronik__zitat {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  padding-right: 0.08em;
}
.uu-chronik__zitat em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-inline: 0.08em;
  padding-block-end: 0.12em;
  margin-inline: -0.04em;
  margin-block-end: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Text neben Grafik nur, wo die Spalte breit genug ist: unter 1024px läuft
   die Chronik über die volle Breite, ab 1024px teilt sie sich das Fenster
   mit der Bühne (5fr/7fr) — dort erst ab 1280px (gemessen 1024: rechte
   Spalte 490px, Textspalte im Duo 150px → unlesbar). */
@media (min-width: 900px) and (max-width: 1023px), (min-width: 1280px) {
  .uu-chronik__duo { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------- Belegzeile: offen, keine Kachel — Hairlines, die Zahl trägt ---------- */
.uu-beleg {
  margin: 8px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) 28px;
  align-items: center;
}
.uu-beleg__kopf {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uu-beleg__caption {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-200);
}
.uu-beleg__sub {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: 1.35;
  color: var(--text-200);
}
.uu-beleg__bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uu-beleg__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.uu-beleg__bar {
  display: block;
  height: 10px;
  border-radius: var(--radius-full);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-morph);
}
.uu-beleg__bar--vorher {
  width: calc(100% / 7);
  background: var(--text-400);
}
.uu-beleg__bar--nachher {
  width: 100%;
  background: var(--accent);
  transition-delay: 250ms;
}
.uu-beleg.is-revealed .uu-beleg__bar { transform: scaleX(1); }
.uu-beleg__mini {
  flex: none;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--text-200);
}
.uu-beleg__zahl {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: var(--weight-regular);
  line-height: 0.9;
  color: var(--accent-hover);
  padding-right: 0.08em;
}
.uu-beleg__zahl--klein { font-size: 40px; }
@media (min-width: 640px) {
  .uu-beleg { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .uu-beleg__kopf { grid-column: auto; }
}
/* Variante „aus einem wurden über 20": 1 → Punkte → Zahl */
.uu-beleg--team {
  grid-template-columns: auto auto minmax(0, 1fr);
}
.uu-beleg__eins {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--text-200);
}
.uu-beleg__pfeil {
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uu-beleg__punkte {
  display: grid;
  grid-template-columns: repeat(11, 14px);
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-morph) 200ms, transform 600ms var(--ease-morph) 200ms;
}
.uu-beleg__punkte i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
}
.uu-beleg__punkte i.is-offen {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent-hover);
}
.uu-beleg.is-revealed .uu-beleg__punkte { opacity: 1; transform: none; }
.uu-beleg__team {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  margin-left: auto;
}
@media (min-width: 640px) {
  .uu-beleg--team { grid-template-columns: auto auto auto minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .uu-beleg__team { grid-column: 1 / -1; margin-left: 0; text-align: left; }
}
/* < 480px: die Punkte-Reihe (11 × 14 + Lücken = 214px) passt nicht mehr
   neben „1 →" — sie rückt in eine eigene Zeile, kleiner gesetzt (gemessen
   320px: Chronik-Breite 256px). */
@media (max-width: 479px) {
  .uu-beleg--team { grid-template-columns: auto auto minmax(0, 1fr); gap: var(--space-3) 16px; }
  .uu-beleg__punkte { grid-column: 1 / -1; grid-template-columns: repeat(11, 12px); gap: 5px; }
  .uu-beleg__punkte i { width: 12px; height: 12px; }
  .uu-beleg__team { grid-column: 3; margin-left: auto; text-align: right; }
}

/* ---------- Grafik Kapitel 2: einer bringt drei mit (offen, keine Kachel) ---------- */
.uu-netz {
  margin: 0;
  width: 100%;
  max-width: 320px;
  justify-self: center;
}
.uu-netz__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.uu-netz__line {
  stroke: var(--accent-hover);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.55;
}
.uu-netz__node--eins { fill: var(--accent); }
.uu-netz__eins {
  font-family: var(--font-display);
  font-size: 24px;
  fill: var(--white);
}
.uu-netz__plus .uu-netz__node {
  fill: transparent;
  stroke: var(--accent-hover);
  stroke-width: 1.5;
}
.uu-netz__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  fill: var(--accent-hover);
}
.uu-netz__plus {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 500ms var(--ease-morph), transform 600ms var(--ease-morph);
}
.uu-netz.is-revealed .uu-netz__plus { opacity: 1; transform: scale(1); }
.uu-netz.is-revealed .uu-netz__plus:nth-of-type(1) { transition-delay: 200ms; }
.uu-netz.is-revealed .uu-netz__plus:nth-of-type(2) { transition-delay: 320ms; }
.uu-netz.is-revealed .uu-netz__plus:nth-of-type(3) { transition-delay: 440ms; }
.uu-netz__caption {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--text-200);
}
.uu-netz__caption span:first-child {
  font-weight: var(--weight-semibold);
  color: var(--text-100);
}

/* ---------- Kapitel 4: die Jahre als Belegzeile (Runde 5, vorher Aside neben dem Text) ---------- */
.uu-beleg--jahre,
.uu-beleg--jahre.uu-beleg { grid-template-columns: minmax(0, 1fr) auto; }
.uu-beleg--jahre .uu-beleg__kopf { grid-column: auto; }

@media (prefers-reduced-motion: reduce) {
  .uu-story__frame,
  .uu-story__cap,
  .uu-chronik::after,
  .uu-beleg__bar,
  .uu-beleg__punkte,
  .uu-netz__plus {
    transition: none;
  }
  .uu-story__frame { transform: none; }
}

/* ============================================================
   2 · Die Vogelperspektive (Dunkel-Insel im hellen Theme)
   ============================================================ */
.uu-blick__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.uu-blick__title {
  margin-bottom: var(--space-5);
}
.uu-blick__copy p {
  max-width: 58ch;
  margin: 0 0 var(--space-4);
  line-height: 1.7;
}
.uu-blick__copy p:last-child { margin-bottom: 0; }

.uu-blick__panel {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  background: #060A0E;
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.28);
}
.uu-blick__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
  transform: scale(1.04);
  transition: transform 1400ms var(--ease-morph);
}
.uu-blick.is-revealed .uu-blick__panel img { transform: scale(1); }
.uu-blick__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Theme-fester Near-Black-Scrim (surface-0-Tripel) — der Claim steht auf Foto. */
  background: linear-gradient(180deg,
    rgba(6, 10, 14, 0) 34%,
    rgba(6, 10, 14, 0.55) 62%,
    rgba(6, 10, 14, 0.92) 100%);
}
.uu-blick__claim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(20px, 3vw, 40px);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: balance;
}
.uu-blick__claim strong {
  display: block;
  font-weight: var(--weight-regular);
  font-style: italic;
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .uu-blick__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 5vw, 96px);
  }
}
@media (max-width: 559px) {
  .uu-blick__panel { aspect-ratio: 4 / 5; }
  .uu-blick__panel img { object-position: 62% 40%; }
}

/* ============================================================
   3 · Das Team als Wand (18.09.2026, ersetzt „Wer was verantwortet"
   und den Fries der früheren Section 5)
   Marie: „Text nicht rechts neben der Überschrift, da drunter … alle
   Mitarbeiter … am Rand ausgeblurrt und ausgeblendet wie bei den
   Video-Testimonials … spiegelverkehrt wiederholen, als würde es ganz
   viele Mitarbeiter geben."
   Maße hängen an der Section-Breite (Container-Query-Einheiten):
     --tw-w     Breite des echten Rasters (mittig, nie im Ausblend-Rand)
     --tw-card  Kartenbreite, Kartenhöhe = 1,5 × (2:3)
   Die zwei Geister-Raster stehen absolut links/rechts daneben, haben
   dieselben Spalten- und Zeilenmaße und laufen über die Maske aus.
   ============================================================ */
.uu-tw-section {
  container-type: inline-size;
}
.uu-verantwortung__head {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 980px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.uu-verantwortung__lead {
  max-width: 60ch;
  margin: 0;
  line-height: 1.7;
  color: var(--text-200);
}

.uu-tw {
  --tw-cols: 3;
  --tw-gap: 0px;
  --tw-fade: 20px;
  --tw-max: 9999px;
  --tw-ratio: 1.5;
  --tw-w: min(var(--tw-max), 100cqw - 2 * var(--tw-fade));
  --tw-card: calc((var(--tw-w) - (var(--tw-cols) - 1) * var(--tw-gap)) / var(--tw-cols));
  --tw-edge: calc((100% - var(--tw-w)) / 2);
  position: relative;
  overflow: clip;
  /* Luft für Hover-Lift und Kartenschatten, sonst schneidet der Clip sie ab. */
  padding-block: 24px;
  margin-block: -24px;
  /* Der Rand verschwimmt nach außen — dieselbe Idee wie der Fächer der
     Video-Testimonials: bis an die Kante des echten Rasters voll, dann aus. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0, 0, 0, 0.35) calc(var(--tw-edge) * 0.45),
    #000 calc(var(--tw-edge) - var(--tw-gap)),
    #000 calc(100% - var(--tw-edge) + var(--tw-gap)),
    rgba(0, 0, 0, 0.35) calc(100% - var(--tw-edge) * 0.45),
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0, 0, 0, 0.35) calc(var(--tw-edge) * 0.45),
    #000 calc(var(--tw-edge) - var(--tw-gap)),
    #000 calc(100% - var(--tw-edge) + var(--tw-gap)),
    rgba(0, 0, 0, 0.35) calc(100% - var(--tw-edge) * 0.45),
    transparent 100%);
}
/* Runde 3 (18.09.2026, Marie zum Fries-Screenshot: „die Anordnung so
   nebeneinander, ohne Abstand, besser … klassischer, auch ohne abgerundete
   Ecken"): Porträts nahtlos aneinander wie der Fries (.crew-wall), unten
   nur der Name, der Rand läuft weiter unscharf aus. 3 Spalten auf dem
   Handy, 6 ab 560 px, 9 × 2 ab 1180 px (hohe Streifen wie im Fries). */
@media (min-width: 560px) {
  .uu-tw {
    --tw-cols: 6;
    --tw-fade: 32px;
  }
}
@media (min-width: 1180px) {
  .uu-tw {
    --tw-cols: 9;
    --tw-fade: clamp(56px, 6cqw, 160px);
    --tw-ratio: 1.7;
  }
}
/* HISTORIE: vom 18.09. bis 24.09.2026 blendete die Wand auf dem Handy
   (< 560 px) zusätzlich nach oben und unten aus (zweite, senkrechte Maske,
   Namen dafür per padding-bottom 0,46 × Karte höher gesetzt). Marie
   24.09.2026: „Oben und unten soll das nicht ausgeblendet sein … überall
   auf den Seiten“ — die senkrechte Maske und das Namens-Polster sind raus,
   auf allen Breiten gilt die waagerechte Maske oben. Gilt überall, wo
   team-wand.html läuft (Über uns + Branchenpartner-Section). */

.uu-tw__stage {
  position: relative;
  width: var(--tw-w);
  margin-inline: auto;
}

.uu-leads,
.uu-tw__ghost {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tw-gap);
}
.uu-leads {
  grid-template-columns: repeat(var(--tw-cols), var(--tw-card));
}
.uu-tw__ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  grid-template-columns: repeat(3, var(--tw-card));
  grid-auto-rows: calc(var(--tw-card) * var(--tw-ratio));
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.uu-tw__ghost--l { right: calc(100% + var(--tw-gap)); }
.uu-tw__ghost--r { left: calc(100% + var(--tw-gap)); }

.uu-lead {
  position: relative;
  aspect-ratio: 1 / var(--tw-ratio);
  overflow: hidden;
  isolation: isolate;
  background: #060A0E;
  /* Reveal über die translate-Property, der Hover nutzt transform (§0a). */
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity 700ms var(--ease-morph) calc(var(--i, 0) * 50ms),
    translate 700ms var(--ease-morph) calc(var(--i, 0) * 50ms),
    transform 500ms var(--ease-morph),
    box-shadow 500ms var(--ease-morph);
}
/* Der Reveal hängt am KOPF, nicht an der Wand: die Wand ist auf Handy und
   Tablet 1.600–2.900 px hoch und erreicht die 22-%-Schwelle des generischen
   Hooks dort nie (gemessen bei 640 px: nie revealed). */
.uu-tw-section:has(.uu-verantwortung__head.is-revealed) .uu-lead {
  opacity: 1;
  translate: 0 0;
}
.uu-lead__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  transition: transform 700ms var(--ease-morph);
}
.uu-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 10, 14, 0) 46%,
    rgba(6, 10, 14, 0.55) 68%,
    rgba(6, 10, 14, 0.92) 90%,
    rgba(6, 10, 14, 0.96) 100%);
}
.uu-lead__id {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 10px 8px clamp(12px, calc(var(--tw-card) * 0.1), 24px);
  text-align: center;
}
.uu-lead__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(12px, calc(var(--tw-card) * 0.085), 16px);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: #FFFFFF;
}
.uu-lead__rolle {
  margin: 3px 0 0;
  font-family: var(--font-ui);
  font-size: clamp(12px, calc(var(--tw-card) * 0.062), 14px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}
.uu-lead__name,
.uu-lead__rolle {
  /* Trennen nur dort, wo ein Wort sonst über die Karte liefe (Handy, ~100 px). */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Wie im Fries: sichtbar nur der Name, die Funktion erscheint beim
   Überfahren (im alt-Text steht sie immer). */
.uu-lead__rolle { display: none; }
@media (hover: hover) and (pointer: fine) {
  .uu-leads .uu-lead:hover .uu-lead__shot { transform: scale(1.04); }
  .uu-leads .uu-lead:hover .uu-lead__rolle { display: block; }
}

/* Die Geister: Foto gespiegelt, je weiter außen desto unschärfer und
   leiser; sie blenden nach den echten Karten ein. */
.uu-tw__ghost .uu-lead {
  transition-delay: 650ms, 650ms, 0s, 0s;
}
/* Blur auf dem BILD (leicht vergrößert) statt auf der Karte — sonst zieht
   der Weichzeichner an der nahtlosen Kante einen hellen Saum. */
.uu-tw__ghost .uu-lead__shot { transform: scaleX(-1) scale(1.1); }
.uu-tw__ghost--l .uu-lead:nth-child(3n) .uu-lead__shot,
.uu-tw__ghost--r .uu-lead:nth-child(3n + 1) .uu-lead__shot { filter: blur(1.5px); }
.uu-tw__ghost .uu-lead:nth-child(3n + 2) .uu-lead__shot { filter: blur(3px); }
.uu-tw__ghost--l .uu-lead:nth-child(3n + 1) .uu-lead__shot,
.uu-tw__ghost--r .uu-lead:nth-child(3n) .uu-lead__shot { filter: blur(5px); }
.uu-tw__ghost .uu-lead__id { filter: blur(2px); }


/* Die 18. Kachel: Karriere statt Lücke im 6 × 3-Raster. */
.uu-lead--cta {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(77, 168, 218, 0.22), transparent 60%),
    linear-gradient(180deg, #1F2226 0%, #131518 100%);
}
.uu-lead--cta::after { content: none; }
.uu-lead__cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, calc(var(--tw-card) * 0.05), 10px);
  padding: clamp(6px, calc(var(--tw-card) * 0.1), 20px);
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: inherit;
}
.uu-lead__cta:focus-visible {
  outline: 2px solid #4DA8DA;
  outline-offset: -4px;
}
.uu-lead__cta-kicker {
  font-family: var(--font-ui);
  font-size: clamp(10px, calc(var(--tw-card) * 0.065), 12px);
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #B3CCDF;
}
.uu-lead__cta-title {
  font-family: var(--font-display);
  font-size: clamp(14px, calc(var(--tw-card) * 0.15), 28px);
  line-height: 1.1;
}
.uu-lead__cta-title em {
  font-style: italic;
  background: linear-gradient(180deg, #B3CCDF, #4DA8DA);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-inline: 0.08em;
  margin-inline: -0.04em;
}
.uu-lead__cta-link {
  font-family: var(--font-ui);
  font-size: clamp(11px, calc(var(--tw-card) * 0.075), 14px);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.uu-lead__cta-link::after { content: " →"; }

/* ============================================================
   4 · Wer woran arbeitet
   ============================================================ */
.uu-rollen__grid {
  display: grid;
  gap: clamp(48px, 6vw, 72px);
}
@media (min-width: 1080px) {
  .uu-rollen__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(56px, 6vw, 112px);
    align-items: start;
  }
}
.uu-rollen__title {
  margin-bottom: var(--space-5);
}
.uu-rollen__intro > p {
  max-width: 60ch;
  margin: 0 0 var(--space-4);
  line-height: 1.7;
}
/* Foto-Mosaik (18.09.2026, Marie: „mehr Bilder einfügen … optimieren"):
   fünf Arbeitsbilder in EINEM quadratischen Raster, 12 Spalten × 10 Zeilen.
   Die Kacheln haben KEIN eigenes Seitenverhältnis — das Quadrat des Rasters
   gibt die Höhe vor, die Bilder füllen ihre Kachel per object-fit. So bleibt
   die Komposition an jeder Breite dieselbe (A groß links oben, B/C zwei
   Quadrate rechts, D/E unten), und die Spalte ist bei 1440 px etwa so hoch
   wie die Rollen-Liste daneben (gemessen, nicht geschätzt — s. Chronik).
   Vorher: zwei Bilder nebeneinander (4:3 + 4:5) mit ~560 px Leerraum unter
   der Spalte. Kacheln staffeln über den generischen [data-reveal]-Hook. */
.uu-rollen__mosaik {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  aspect-ratio: 1 / 1;
  margin: var(--space-6) 0 0;
}
.uu-mosaik__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Hairline wie die Karten der Seite — hält die hellen Bildränder auf Weiß. */
  box-shadow: inset 0 0 0 1px var(--glass-border);
  isolation: isolate;
}
.uu-mosaik__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.uu-mosaik__tile--a { grid-column: 1 / 9;  grid-row: 1 / 7; }
.uu-mosaik__tile--b { grid-column: 9 / 13; grid-row: 1 / 4; }
.uu-mosaik__tile--c { grid-column: 9 / 13; grid-row: 4 / 7; }
.uu-mosaik__tile--d { grid-column: 1 / 6;  grid-row: 7 / 11; }
.uu-mosaik__tile--e { grid-column: 6 / 13; grid-row: 7 / 11; }
/* Ausschnitte: Gesichter halten, nicht die Bildmitte. */
.uu-mosaik__tile--a img { object-position: 50% 40%; }
.uu-mosaik__tile--b img { object-position: 50% 28%; }  /* Hochformat: die zwei Köpfe sitzen im oberen Drittel */
.uu-mosaik__tile--c img { object-position: 50% 42%; }
.uu-mosaik__tile--d img { object-position: 50% 45%; }
.uu-mosaik__tile--e img { object-position: 50% 55%; }

/* Der Chip auf Kachel A: Kopfzahl aus daten.json, weiß auf einem Scrim, der
   nur die untere linke Ecke dunkelt (surface-0-Tripel, theme-fest wie alle
   Foto-Scrims). Kontrast am Pixel gemessen, s. Chronik 18.09.2026. */
.uu-mosaik__tile--a::after {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  /* Gemessen 18.09.: mit 0,62 lag der Chip über dem hellen Hemd bei 3,75–4,08 : 1 —
     unter 1440 px ist er 20 px groß, braucht also 4,5. Mit dem zweizeiligen Chip
     (Kicker + Zahl, Runde 2) reicht er höher ins Bild: Beginn 30 %, Fuß 0,88. */
  background: linear-gradient(180deg, rgba(6, 10, 14, 0) 0%, rgba(6, 10, 14, 0.5) 55%, rgba(6, 10, 14, 0.88) 100%);
  pointer-events: none;
}
.uu-mosaik__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  left: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.1;
  color: var(--white);
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(6, 10, 14, 0.35);
  padding-right: 0.08em;
}
/* Kicker über der Zahl: Caption-Raster (12 px / 700 / Versalien / 2,5 px Tracking), Weiß 85 %. */
.uu-mosaik__chip-kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold, 700);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
}

/* Reveal: Kacheln kommen gestaffelt aus 12 px Tiefe, Hover zieht das Bild leicht heran. */
[data-reveal].uu-rollen__mosaik .uu-mosaik__tile {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].uu-rollen__mosaik.is-revealed .uu-mosaik__tile {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .uu-mosaik__tile:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].uu-rollen__mosaik .uu-mosaik__tile { opacity: 1; transform: none; transition: none; }
  .uu-mosaik__tile img { transition: none; }
  .uu-mosaik__tile:hover img { transform: none; }
}
@media (scripting: none) {
  [data-reveal].uu-rollen__mosaik .uu-mosaik__tile { opacity: 1; transform: none; }
}
@media (min-width: 720px) and (max-width: 1079px) {
  /* Einspaltig (Tablet): das Quadrat wäre bei 1024 px 960 px hoch — als
     16:10 bleibt das Mosaik unter einer Bildschirmhöhe (gemessen 600 px). */
  .uu-rollen__mosaik { aspect-ratio: 16 / 10; }
}
@media (max-width: 479px) {
  /* Bei 320–479 px wären die zwei kleinen Quadrate unter 100 px — das Raster
     wird höher (4:5), damit B/C lesbar bleiben. */
  .uu-rollen__mosaik { aspect-ratio: 4 / 5; gap: 6px; }
  .uu-mosaik__tile { border-radius: var(--radius-md); }
}

.uu-rollen__sub {
  margin: 0 0 var(--space-2);
}
.uu-rollen__sub-lead {
  margin: 0 0 var(--space-6);
  line-height: 1.7;
  color: var(--text-200);
}
.uu-rollen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--glass-border);
}
.uu-rolle {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--glass-border);
}
@media (hover: hover) {
  /* Leiser Lesehinweis: die Zeile, auf der der Zeiger liegt, hebt ihre Nummer —
     --cyan-hi ist in BEIDEN Themes heller als --accent-hover (Guardian 18.09.:
     --accent wäre im Dark-Theme dunkler geworden, also das Gegenteil). */
  .uu-rolle__nr { transition: color 0.3s ease; }
  .uu-rolle:hover .uu-rolle__nr { color: var(--cyan-hi); }
}
.uu-rolle__nr {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--accent-hover);
}
.uu-rolle__name {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: 0;
}
.uu-rolle p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-200);
}

/* ============================================================
   5 · Das ganze Team (Fries-Technik aus about-crew.html)
   Seit 18.09.2026 auf KEINER Seite mehr im Einsatz — Section 5 ist in
   der Team-Wand (.uu-tw, Section 3) aufgegangen, Markup in
   partials/_ARCHIV-ueber-uns-team.html. Bleibt als Rückbau-Vorlage.
   ============================================================ */
.uu-team {
  scroll-margin-top: 73px;
}
.uu-team__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.uu-team__copy p {
  max-width: 56ch;
  margin: 0 0 var(--space-3);
  line-height: 1.7;
}
.uu-team__cta {
  margin-top: var(--space-3);
}
@media (min-width: 1024px) {
  .uu-team__head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
    gap: clamp(40px, 5vw, 96px);
  }
}
/* CI-Outline in den 04a-Glas-Tokens (Rezept der Startseite, .page-home .about-team__cta). */
html[data-theme="light"] .page-ueber-uns .uu-team__cta {
  background: var(--glass-bg);
  color: var(--text-100);
  border-color: var(--glass-border);
}
html[data-theme="light"] .page-ueber-uns .uu-team__cta:hover {
  background: var(--glass-bg-hover);
  color: var(--text-100);
  border-color: var(--glass-border-hover);
}
/* Der Fries-Reveal hängt in der Basis an .about.is-revealed — hier trägt
   der Fries selbst den [data-reveal]-Hook. */
.page-ueber-uns .crew-wall.is-revealed .crew__member {
  opacity: 1;
  translate: 0 0;
}
/* Namen mittig wie auf der Startseite (Marie 2026-09-10: „klebt so ganz am Rand"). */
.page-ueber-uns .crew__id {
  align-items: center;
  text-align: center;
  padding-inline: clamp(12px, 1vw, 18px);
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .page-ueber-uns .crew__name { font-size: clamp(12px, 1vw, 16px); }
}

/* ---------- Ohne JavaScript / reduzierte Bewegung ---------- */
@media (scripting: none) {
  .uu-beleg__bar { transform: none; }
  .uu-beleg__punkte,
  .uu-netz__plus,
  .uu-lead,
  .page-ueber-uns .crew__member {
    opacity: 1;
    transform: none;
    translate: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .uu-lead,
  .uu-lead__shot,
  .uu-blick__panel img {
    transition: none !important;
  }
  .uu-blick__panel img { transform: none; }
}
/* Über uns (M7), Kontrast GEMESSEN 17.09.2026 (Zwei-Render-Methode):
   · Kleintext auf hellen Bändern lag mit --text-200 bei 3,8–4,8 : 1 → eine Stufe kräftiger.
   · Auf dem Handy sind die Karten flach, der Namensblock beginnt höher im Foto —
     dort lag die Bereichs-Zeile bei 2,7 : 1 → Scrim früher und dichter.
     (Seit der Team-Wand 18.09. sind die Karten auch auf dem Handy 2 : 3, aber
     nur ~100 px breit — Name + Rolle belegen dort die halbe Karte, der dichtere
     Scrim bleibt deshalb.) */
html[data-theme="light"] .page-ueber-uns :is(.uu-beleg__sub, .uu-rolle p, .uu-verantwortung__lead, .uu-rollen__sub-lead) {
  color: var(--text-100);
}
@media (max-width: 719px) {
  .uu-lead::after {
    background: linear-gradient(180deg,
      rgba(6, 10, 14, 0) 38%,
      rgba(6, 10, 14, 0.62) 60%,
      rgba(6, 10, 14, 0.93) 74%,
      rgba(6, 10, 14, 0.97) 100%);
  }
}

/* ============================================================
   S4 — Das Bese-System, Fassung 6 „Die Bühnen" (2026-09-17)
   Marie: „Statt 01 und 04 möchte ich bitte passende Icons haben und
   auch größer, sodass man direkt sieht, worum es geht. … anstelle der
   Bilder von der Bese Media GmbH die passenden Animationen."
   Additiv auf die Fassung 4b (Block „S4 — Das Bese-System (.bsys)"
   weiter oben): der Stapel, die Textspalte und die Datenkarten-Regeln
   bleiben unverändert stehen. Die Datenkarten sind nur aus dem MARKUP;
   von ihrem CSS laufen .bsys-app__bar/__live/__title/__brand (Kopfzeilen
   der Bühnen 03/04) und .bsys-feed/.bsys-row/.bsys-dot/.bsys-tag/.bsys-eur
   (Feed im Handy) WEITER — .bsys-card, .bsys-check, .bsys-bars,
   .bsys-curve und .bsys-mod__tag b sind seitdem auf keiner Seite mehr
   im Einsatz (Guardian 17.09.; der Website-Ablauf hat eigene Klassen
   .bsys-et/.bsys-bau/.bsys-anrufe/.bsys-rueck). Sie bleiben als
   Rückbau-Vorlage der Fassung 4b (git) stehen. Neu hier:
   · .bsys-mod__fx — das Facetten-Icon im Tag (48 px = Feature-Kachel,
     CI Sektion 13 Regel 9; Marie: „größer").
   · .bsys-stage — die Bühne rechts: feste dunkle Geräte-Fläche wie
     .bsys-card (§5a, Navy-Familie, in BEIDEN Themes), eine Animation
     je Modul, freigegeben über .is-live ([data-bsys-stage] in
     scripts.html: nur im Viewport + sichtbaren Tab). Einmalige
     Aufbauten (Kurve, Balken, Netz) hängen an .bsys-mod.is-in aus der
     Stapel-Engine; Schleifen an .bsys-stage.is-live.
   · 01 .bsys-phone — Kurzfassung des Handy-Mockups der App-Section
     (eigener Prefix, feste Hardware-Töne wie .iph*), darin die
     Feed-Engine [data-bsys-feed] (Zeilen kompakter). Links .bsys-inflow:
     Klick · Anruf · Auftrag fliegen ins Handy (7,2-s-Schleife, 2,4 s
     versetzt).
   · 02 .bsys-ai — die weißen Fähigkeits-Szenen (.ba-skill / .sk-*, CSS
     im Block „Bese-AI Fähigkeiten") als Takt: drei Schritt-Pillen
     (role=tab), Panels übereinander (Höhe = höchste Szene), es läuft
     nur das aktive (.ba-skill.is-live setzt die Engine, nicht die
     [data-ba-skill]-IO); Fortschrittslinie am Pillen-Boden = 8 s.
   · 03 .bsys-ads — die Rückkopplung: Chip „Echter Auftrag 2.400 €"
     fährt an einer L-Leitung (.bsys-ads__wire) aus der App in die
     Werbung; dieselben Prozent für Linie und Bahn, deshalb ein L
     statt einer Kurve. Beim Aufprall gewichten die drei Wege um.
   · 04 .bsys-res — die Lernkurve: Linie zeichnet sich (pathLength
     100), Endpunkt atmet, 36 Netz-Punkte leuchten nacheinander.
   Kontraste auf der Fläche: Text-Töne = die von .bsys-card (gemessen
   2026-09-08, --bsys-app-txt-3 ≥ 5:1 für Versal-Kleintext).
   ============================================================ */
/* 48 px = CI-Bucket „Feature-Kacheln“ (Sektion 13, Regel 9), nicht der 24–30-px-Bucket für Kapitel-Zeichen:
   Marie 17.09. „auch größer, sodass man direkt sieht, worum es geht“ — die Modul-Karte TRÄGT die Leistung;
   §5a-Zeile „Bese-System: Facetten-Icon 48 px im Modul-Tag“ */
.bsys-mod__fx {
  width: 48px; height: 48px; flex: 0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(var(--glow-rgb), 0.22));
}
.bsys-mod__tag { gap: 14px; font-size: 13px; letter-spacing: 0.14em; color: var(--text-200); }
/* ohne Datenkarte sitzt der Text mittig zur Bühne */
.bsys-mod__text { justify-content: center; }
.bsys-mod__text > p:last-of-type { margin-bottom: 0; }

/* ---------- Bühne (Geräte-Fläche, theme-fest) ---------- */
.bsys-mod__visual.bsys-stage {
  --st-cyan: #4DA8DA;
  --st-txt-1: rgba(226, 238, 248, 0.94);
  --st-txt-2: rgba(214, 230, 245, 0.72);
  --st-txt-3: rgba(214, 230, 245, 0.62);
  /* die Kopfzeilen-Regeln .bsys-app__* lesen die .bsys-card-Tokens — hier neu deklariert,
     sonst fielen sie auf die Erbfarbe zurück */
  --bsys-app-cyan: var(--st-cyan); --bsys-app-txt-1: var(--st-txt-1); --bsys-app-txt-2: var(--st-txt-2); --bsys-app-txt-3: var(--st-txt-3);
  position: relative;
  min-height: clamp(440px, 34vw, 500px);
  aspect-ratio: auto;
  display: flex; flex-direction: column;
  padding: clamp(16px, 1.8vw, 24px);
  overflow: hidden; isolation: isolate; contain: layout paint;
  background: linear-gradient(158deg, #1C2D3B 0%, #131F2B 56%, #0C141C 100%);
  border: 1px solid rgba(214, 230, 245, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--st-txt-2);
}
.bsys-stage__glow {
  position: absolute; left: -20%; right: -20%; bottom: -34%; height: 74%;
  background: radial-gradient(ellipse at 50% 100%, rgba(77, 168, 218, 0.22), transparent 62%);
  pointer-events: none; z-index: 0;
}
.bsys-stage > :not(.bsys-stage__glow) { position: relative; z-index: 1; }

/* ---------- 01 · Handy + Zuläufe ---------- */
/* Variante immer als .bsys-mod__visual.bsys-stage--x schreiben: die Basisregel oben hat (0,2,0),
   eine einfache Klasse verlöre (gemessen: das Handy stand ohne Raster, die Chips am Bühnenkopf) */
.bsys-mod__visual.bsys-stage--app { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.bsys-inflow { list-style: none; margin: 0; padding: 0; position: relative; align-self: stretch; min-width: 0; }
.bsys-inflow__chip {
  position: absolute; left: -6%; top: calc(24% + var(--k, 0) * 20%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 9999px;
  font-size: 12px; font-weight: var(--weight-semibold); color: var(--st-txt-1); white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(214, 230, 245, 0.16);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: bsys-inflow 7.2s var(--ease) calc(var(--k, 0) * 2.4s) infinite;
  animation-play-state: paused;
}
.bsys-inflow__chip .icon { width: 14px; height: 14px; color: var(--st-cyan); }
.bsys-stage.is-live .bsys-inflow__chip { animation-play-state: running; }
@keyframes bsys-inflow {
  0%   { left: -6%; opacity: 0; transform: scale(0.94); }
  8%   { opacity: 1; transform: none; }
  30%  { opacity: 1; }
  38%  { left: 94%; opacity: 0; transform: scale(0.9); }
  100% { left: 94%; opacity: 0; }
}
.bsys-phone { position: relative; width: clamp(212px, 15vw, 226px); aspect-ratio: 9 / 17.4; margin-right: clamp(4px, 2vw, 28px); }   /* Untergrenze 212: darunter (196 gemessen) schnitt der Screen die dritte Feed-Zeile ab */
.bsys-phone__frame {
  position: relative; width: 100%; height: 100%;
  border-radius: 34px; padding: 8px;
  background: linear-gradient(135deg, #1F3447 0%, #131F2B 50%, #0C141C 100%);   /* Navy → Surface-2 → Surface-1: nur CI-Töne (Guardian 17.09.: #2A3E52 war erfunden) */
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.07), inset 0 1.5px 0 rgba(255, 255, 255, 0.16),
    0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 40px 90px -30px rgba(77, 168, 218, 0.25);
}
.bsys-phone__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 34%; height: 18px; background: #060A0E; border-radius: 0 0 11px 11px; z-index: 3; }
.bsys-phone__screen {
  height: 100%; border-radius: 27px; overflow: hidden;
  background: linear-gradient(180deg, #060A0E 0%, #131F2B 70%, #192939 100%);
  padding: 30px 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.bsys-phone__head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
/* schlägt .bsys-mod__visual img (Foto-Vollfläche der Fassung 4b) — sonst füllt das Logo den ganzen Screen */
.bsys-mod__visual .bsys-phone__logo { position: static; height: 12px; width: auto; display: block; object-fit: contain; }
.bsys-phone__live { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-cyan); }
.bsys-phone__live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--st-cyan); box-shadow: 0 0 6px var(--st-cyan); animation: bsys-livedot 2.2s ease-in-out infinite; animation-play-state: paused; }
.bsys-stage.is-live .bsys-phone__live::before { animation-play-state: running; }
.bsys-phone__card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.bsys-phone__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bsys-phone__lbl { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 8.5px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsys-phone__lbl .icon { width: 11px; height: 11px; color: var(--st-cyan); stroke-width: 2.2; }
.bsys-phone__trend, .bsys-phone__pill { font-size: 8.5px; font-weight: var(--weight-semibold); color: var(--st-cyan); background: rgba(77, 168, 218, 0.14); border-radius: 9999px; padding: 2px 7px; letter-spacing: 0.04em; white-space: nowrap; }
.bsys-phone__pill { text-transform: uppercase; border: 1px solid rgba(77, 168, 218, 0.22); }
.bsys-phone__num { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; margin-top: 2px; }
.bsys-phone__spark { width: 100%; height: 22px; overflow: visible; }
.bsys-phone__spark path { fill: none; stroke: var(--st-cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(77, 168, 218, 0.6)); transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; }
.bsys-mod.is-in .bsys-phone__spark path { stroke-dashoffset: 0; }
.bsys-phone__pct { font-family: var(--font-display); font-size: 14px; line-height: 1; color: var(--white); }
.bsys-phone__bar { display: block; height: 5px; border-radius: 9999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: 4px; }
.bsys-phone__bar i { display: block; height: 100%; width: 78%; border-radius: inherit; background: linear-gradient(90deg, rgba(77, 168, 218, 0.55), #4DA8DA); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s; }
.bsys-mod.is-in .bsys-phone__bar i { transform: scaleX(1); }
.bsys-phone__feedhead { padding: 4px 4px 0; }
/* der Feed der Fassung 4b, im Handy kompakter (Status-Punkt + Wert tragen die Zeile, die Pille fällt) */
.bsys-phone .bsys-feed { padding: 0 2px; gap: 6px; flex: 1 1 auto; min-height: 0; }
.bsys-phone .bsys-row { padding: 6px 8px; gap: 8px; border-radius: 10px; }
.bsys-phone .bsys-row.is-leaving { left: 2px; right: 2px; top: 0; }
.bsys-phone .bsys-dot { width: 7px; height: 7px; }
.bsys-phone .bsys-row__t { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsys-phone .bsys-row__r { gap: 6px; }
.bsys-phone .bsys-tag { display: none; }
.bsys-phone .bsys-eur { font-size: 13px; }

/* ---------- 02 · Bese-AI im Takt ---------- */
.bsys-mod__visual.bsys-stage--ai { padding: clamp(14px, 1.6vw, 20px); }
.bsys-ai { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.bsys-ai__steps { display: flex; flex-wrap: wrap; gap: 6px; }
.bsys-ai__step {
  appearance: none; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px; border-radius: 9999px;
  border: 1px solid rgba(214, 230, 245, 0.14); background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 238, 248, 0.84); font: inherit; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.02em; line-height: 1.2; text-align: left;   /* --st-txt-2 maß 4,56:1 auf der hellsten Pillen-Fläche → eine Stufe kräftiger */
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.bsys-ai__step b { font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1; color: var(--st-cyan); letter-spacing: -0.01em; }
.bsys-ai__step:hover { color: var(--st-txt-1); border-color: rgba(214, 230, 245, 0.3); }
.bsys-ai__step:focus-visible { outline: 2px solid var(--st-cyan); outline-offset: 2px; }
.bsys-ai__step.is-active { color: var(--white); background: rgba(77, 168, 218, 0.14); border-color: rgba(77, 168, 218, 0.5); }
/* Fortschritt bis zum nächsten Schritt: Linie am Pillen-Boden, 8 s = ein Szenen-Takt */
.bsys-ai__step::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--st-cyan); transform: scaleX(0); transform-origin: left; }
.bsys-stage.is-live .bsys-ai__step.is-active::after { animation: bsys-ai-progress 8s linear infinite; }
.bsys-ai.is-paused .bsys-ai__step.is-active::after { animation-play-state: paused; }
@keyframes bsys-ai-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bsys-ai__panels { position: relative; flex: 1 1 auto; min-height: 0; display: grid; }
.bsys-ai__panel.ba-skill {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  --sk-phase: 0s;                       /* jede Szene startet bei 0, wenn sie dran ist (die nth-child-Phasen des Vier-Karten-Grids gelten hier nicht) */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.bsys-ai__panel.ba-skill.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bsys-ai__panel:focus-visible { outline: 2px solid var(--st-cyan); outline-offset: 4px; border-radius: var(--radius-lg); }
.bsys-ai__panel .ba-skill__scene { flex: 0 0 auto; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7); }
.bsys-ai__caption { margin: 12px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--st-txt-2); }
/* schmale Bühne (1024–1279 px: Spalte ≈ 400 px): Wege-Karte kompakter wie im Vier-Karten-Grid */
@media (min-width: 1024px) and (max-width: 1279px) {
  .bsys-ai .ba-skill__scene { font-size: 13.5px; }
  .bsys-ai .sk-route__map { grid-template-columns: 46px minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 6px; }
  .bsys-ai .sk-node { font-size: 11.5px; padding: 5px 8px; gap: 6px; }
}

/* ---------- 03 · Rückkopplung ---------- */
.bsys-ads { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bsys-ads__src { position: relative; flex: 1 1 auto; min-height: 170px; }
/* die Quelle: eine kleine App-Kachel (Kopfzeile + die Zeile, aus der der Wert kommt) — der Chip taucht unter ihr auf */
.bsys-ads__apptile { position: relative; z-index: 1; display: inline-flex; flex-direction: column; gap: 8px; max-width: 100%; padding: 10px 12px 11px; border-radius: 12px; background: rgba(6, 10, 14, 0.5); border: 1px solid rgba(214, 230, 245, 0.12); }
.bsys-ads__srclbl { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--st-txt-3); }
.bsys-ads__srclbl .icon { width: 14px; height: 14px; color: var(--st-cyan); }
.bsys-ads__call { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--st-txt-1); white-space: nowrap; }
.bsys-ads__call small { font-size: 11px; color: var(--st-txt-3); }
/* Leitung als L: senkrecht runter, waagerecht in die Werbung — Chip-Bahn und Linie teilen dieselben Prozent */
.bsys-ads__wire {
  position: absolute; left: 84px; top: 78px; right: 42%; bottom: -14px;   /* left ≥ halbe Chip-Breite, sonst ragt der Chip am Start aus der Bühne (gemessen bei 390 px) */
  border-left: 1.5px dashed rgba(214, 230, 245, 0.24); border-bottom: 1.5px dashed rgba(214, 230, 245, 0.24);
  border-bottom-left-radius: 18px;
}
.bsys-ads__chip {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 9999px;
  background: rgba(12, 20, 28, 0.92); border: 1px solid rgba(70, 211, 154, 0.45);
  box-shadow: 0 0 0 1px rgba(70, 211, 154, 0.15), 0 12px 26px -14px rgba(0, 0, 0, 0.8), 0 0 22px rgba(70, 211, 154, 0.12);
  font-size: 12px; font-weight: var(--weight-semibold); color: var(--st-txt-1); white-space: nowrap;
  opacity: 0;
}
.bsys-ads__chip .bsys-dot { width: 8px; height: 8px; }
.bsys-ads__chip b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--st-cyan); }
.bsys-stage.is-live .bsys-ads__chip { animation: bsys-ads-chip 8s var(--ease) infinite; }
@keyframes bsys-ads-chip {
  0%   { left: 0; top: 0; opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  6%   { opacity: 1; transform: translate(-50%, -50%); }
  26%  { left: 0; top: 100%; opacity: 1; }
  44%  { left: 100%; top: 100%; opacity: 1; }
  50%  { left: 100%; top: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  100% { left: 100%; top: 100%; opacity: 0; }
}
.bsys-ads__panel { position: relative; border-radius: var(--radius-lg); background: rgba(6, 10, 14, 0.55); border: 1px solid rgba(214, 230, 245, 0.12); }
.bsys-ads__hit { position: absolute; left: 58%; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #46d39a; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.bsys-stage.is-live .bsys-ads__hit { animation: bsys-ads-hit 8s ease-out infinite; }
@keyframes bsys-ads-hit { 0%, 43% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 46% { opacity: 0.9; } 62% { transform: translate(-50%, -50%) scale(6); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(6); opacity: 0; } }
.bsys-ads__rows { list-style: none; margin: 0; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 13px; }
.bsys-ads__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; align-items: center; gap: 12px; font-size: 13px; color: var(--st-txt-2); }
.bsys-ads__track { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bsys-ads__track i { position: absolute; top: 0; bottom: 0; left: 0; width: 56%; border-radius: 3px; background: linear-gradient(90deg, rgba(77, 168, 218, 0.55), #4DA8DA); }
.bsys-ads__row--cut .bsys-ads__track i { background: #5a6b7d; }
.bsys-ads__row b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--st-cyan); white-space: nowrap; opacity: 0.35; }
.bsys-ads__row--cut b { color: var(--st-txt-3); }
.bsys-stage.is-live .bsys-ads__row--win .bsys-ads__track i { animation: bsys-ads-win 8s var(--ease) infinite; }
.bsys-stage.is-live .bsys-ads__row:nth-child(2) .bsys-ads__track i { animation: bsys-ads-mid 8s var(--ease) infinite; }
.bsys-stage.is-live .bsys-ads__row--cut .bsys-ads__track i { animation: bsys-ads-cut 8s var(--ease) infinite; }
.bsys-stage.is-live .bsys-ads__row b { animation: bsys-ads-num 8s var(--ease) infinite; }
@keyframes bsys-ads-win { 0%, 46% { width: 56%; } 60% { width: 92%; } 92% { width: 92%; } 100% { width: 56%; } }
@keyframes bsys-ads-mid { 0%, 46% { width: 56%; } 60% { width: 74%; } 92% { width: 74%; } 100% { width: 56%; } }
@keyframes bsys-ads-cut { 0%, 46% { width: 56%; } 60% { width: 22%; } 92% { width: 22%; } 100% { width: 56%; } }
@keyframes bsys-ads-num { 0%, 48% { opacity: 0.35; } 58% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0.35; } }

/* ---------- 04 · Lernkurve ---------- */
.bsys-res { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border-radius: var(--radius-lg); background: rgba(6, 10, 14, 0.45); border: 1px solid rgba(214, 230, 245, 0.12); overflow: hidden; }
.bsys-res__chart { position: relative; flex: 1 1 auto; min-height: 190px; padding: 18px 18px 36px; display: flex; }
.bsys-res__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bsys-res__grid line { stroke: rgba(214, 230, 245, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bsys-res__area { fill: rgba(77, 168, 218, 0.13); opacity: 0; transition: opacity 0.7s var(--ease) 0.9s; }
.bsys-res__line { fill: none; stroke: #4DA8DA; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(77, 168, 218, 0.6)); transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.bsys-mod.is-in .bsys-res__line { stroke-dashoffset: 0; }
.bsys-mod.is-in .bsys-res__area { opacity: 1; }
.bsys-res__dot { fill: var(--white); stroke: #4DA8DA; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.4s var(--ease) 1.7s; }
.bsys-mod.is-in .bsys-res__dot { opacity: 1; }
.bsys-res__ring { fill: none; stroke: #4DA8DA; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.bsys-stage.is-live .bsys-res__ring { animation: bsys-res-ring 2.6s ease-out 1.9s infinite; }
@keyframes bsys-res-ring { 0% { r: 4; opacity: 0.8; } 100% { r: 20; opacity: 0; } }
.bsys-res__val { position: absolute; right: 20px; top: 16px; text-align: right; }
.bsys-res__val b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.4vw, 36px); line-height: 1; color: var(--white); }
.bsys-res__val span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-txt-3); }
.bsys-res__axis { list-style: none; margin: 0; padding: 0; position: absolute; left: 18px; right: 18px; bottom: 12px; display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-txt-3); }
.bsys-res__net { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.bsys-res__netlbl { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--st-txt-1); }
.bsys-res__dots { display: grid; grid-template-columns: repeat(18, 7px); gap: 4px; }
.bsys-res__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(214, 230, 245, 0.14); }
.bsys-mod.is-in .bsys-res__dots i { animation: bsys-res-dot 0.6s var(--ease) calc(0.9s + var(--k, 0) * 45ms) both; }
@keyframes bsys-res-dot { to { background: #4DA8DA; box-shadow: 0 0 6px rgba(77, 168, 218, 0.6); } }

/* ---------- Responsiv ---------- */
@media (max-width: 1023px) {
  .bsys-mod__visual.bsys-stage { min-height: 0; aspect-ratio: auto; }
  .bsys-mod__visual.bsys-stage--app { min-height: 460px; }
  .bsys-mod__visual:is(.bsys-stage--ads, .bsys-stage--res) { min-height: 400px; }
}
@media (max-width: 559px) {
  .bsys-inflow { display: none; }                          /* die Zuläufe hätten keinen Weg: das Handy steht mittig */
  .bsys-mod__visual.bsys-stage--app { grid-template-columns: 1fr; justify-items: center; }
  .bsys-phone { margin-right: 0; }
  .bsys-ads__wire { right: 34%; }
  .bsys-res__dots { grid-template-columns: repeat(12, 7px); }
}
@media (max-width: 379px) {
  .bsys-ads__call { flex-wrap: wrap; white-space: normal; }   /* „14:02 · Notdienst" ragte bei 320 px 11 px aus der Bühne (gemessen) */
}

/* ---------- reduced-motion / ohne JS: Endzustand ---------- */
@media (prefers-reduced-motion: reduce) {
  .bsys-inflow__chip, .bsys-ads__chip, .bsys-ads__track i, .bsys-ads__row b, .bsys-ads__hit, .bsys-ai__step::after,
  .bsys-res__ring, .bsys-res__dots i, .bsys-phone__live::before { animation: none !important; }
  .bsys-inflow__chip { opacity: 1; left: 4%; }
  .bsys-ads__chip { opacity: 1; }
  .bsys-ads__row b { opacity: 1; }
  .bsys-ads__row--win .bsys-ads__track i { width: 92%; }
  .bsys-ads__row:nth-child(2) .bsys-ads__track i { width: 74%; }
  .bsys-ads__row--cut .bsys-ads__track i { width: 22%; }
  .bsys-res__line { stroke-dashoffset: 0; transition: none; }
  .bsys-res__area, .bsys-res__dot { opacity: 1; transition: none; }
  .bsys-res__dots i { background: #4DA8DA; }
  .bsys-phone__spark path { stroke-dashoffset: 0; transition: none; }
  .bsys-phone__bar i { transform: none; transition: none; }
  .bsys-ai__panel.ba-skill { transition: none; }
}
@media (scripting: none) {
  .bsys-inflow__chip { opacity: 1; left: 4%; }
  .bsys-ads__chip, .bsys-ads__row b { opacity: 1; }
  .bsys-ads__row--win .bsys-ads__track i { width: 92%; }
  .bsys-ads__row:nth-child(2) .bsys-ads__track i { width: 74%; }
  .bsys-ads__row--cut .bsys-ads__track i { width: 22%; }
  .bsys-res__line { stroke-dashoffset: 0; }
  .bsys-res__area, .bsys-res__dot { opacity: 1; }
  .bsys-res__dots i { background: #4DA8DA; }
  .bsys-phone__spark path { stroke-dashoffset: 0; }
  .bsys-phone__bar i { transform: none; }
}
/* Dunkles Theme: die Modul-Karte war seit Fassung 4 Glas (--glass-bg, 4 % Weiß) — im Sticky-Stapel
   schien die darunterliegende Karte samt Foto durch die darüberliegende (gemessen an HEAD, 17.09.,
   vor dieser Runde: Altbestand). Jetzt CI Solid Card (Surface 3 → 2, Sektion 09) wie der
   Leistungs-Stapel der Startseite; das helle Theme war schon deckend weiß. */
html[data-theme="dark"] .bsys-mod {
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
}

/* ============================================================
   Bese-AI-Szene „Bewertet jede Anfrage" (sk-sort): PRÜF-RAHMEN statt Scan-Linie
   (2026-09-17, Marie: „dieser Scan mit dieser Linie — das sieht so aus, als
   würde er die durchstreichen"). Die 2-px-Linie fuhr in FESTEN px-Schritten
   (@keyframes sk-scan, 24/77/130) über die Zeilenmitte und las sich als
   Durchstreichen; in der Bese-System-Bühne lag sie bei 390 px zudem 12 px
   neben den Zeilen (Kopfzeile bricht dort um, gemessen). Jetzt trägt JEDE
   Zeile ihren eigenen Rahmen (::before, Markenblau, weicher Hof), der im
   Lese-Fenster der Zeile ein- und wieder ausblendet — das Auge der Bese-AI
   wandert von Zeile zu Zeile, ohne Geometrie: kein px-Kalibrieren mehr, an
   jeder Breite und in jeder Fassung (Kurzfassung, Vier-Karten-Grid, Rad,
   Bese-System-Bühne) deckungsgleich. Die .sk-scan-Spans bleiben im Markup
   der vier Partials und sind hier nur ausgeblendet. Zeitfenster = die
   Lese-Fenster der sk-read-1/2/3-Keyframes (Rahmen kommt an, dann hebt
   sich die Zeile, dann Marker + Stempel), Ausblenden nach dem Urteil.
   ============================================================ */
.sk-scan { display: none; }
.sk-req { position: relative; }
.sk-req::before {
  content: '';
  position: absolute; inset: -2px; border-radius: 12px; pointer-events: none;
  border: 1.5px solid rgba(var(--sk-hi-rgb), 0.62);
  background: linear-gradient(90deg, rgba(var(--sk-hi-rgb), 0.07), rgba(var(--sk-hi-rgb), 0.02) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(var(--sk-hi-rgb), 0.09), 0 10px 24px -12px rgba(var(--sk-hi-rgb), 0.45);
  opacity: 0; transform: scale(1.03);
}
.ba-skill.is-live .sk-sort .sk-req::before { animation: var(--sk-cycle) var(--sk-ease) var(--sk-delay) infinite; }
.ba-skill.is-live .sk-sort .sk-req:nth-child(1)::before { animation-name: sk-frame-1; }
.ba-skill.is-live .sk-sort .sk-req:nth-child(2)::before { animation-name: sk-frame-2; }
.ba-skill.is-live .sk-sort .sk-req:nth-child(3)::before { animation-name: sk-frame-3; }
@keyframes sk-frame-1 { 0%, 5%  { opacity: 0; transform: scale(1.03); } 8%  { opacity: 1; transform: none; } 19% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: scale(0.99); } }
@keyframes sk-frame-2 { 0%, 21% { opacity: 0; transform: scale(1.03); } 25% { opacity: 1; transform: none; } 34% { opacity: 1; transform: none; } 37%, 100% { opacity: 0; transform: scale(0.99); } }
@keyframes sk-frame-3 { 0%, 36% { opacity: 0; transform: scale(1.03); } 40% { opacity: 1; transform: none; } 49% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: scale(0.99); } }
@media (prefers-reduced-motion: reduce) { .sk-req::before { animation: none !important; opacity: 0; } }
/* Schmale Bühne 02 (≤ 479 px, Innenbreite ≈ 300 px): Polster von Bühne und Szene enger, damit die
   Anfrage-Zeilen mehr Text zeigen (gemessen 390 px: „Rohr ver…" → „Rohr verstopft · K…") */
@media (max-width: 479px) {
  .bsys-mod__visual.bsys-stage--ai { padding: 12px 10px; }
  .bsys-ai .ba-skill__scene { padding: 14px 12px 16px; }
  .bsys-ai .sk-req { padding: 10px 10px; gap: 8px; }
}

/* ============================================================
   S4 — DAS BESE-SYSTEM, FASSUNG C „DAS RASTER" · RUNDE 3 „DIE BÜHNE" (2026-09-18, NUR Startseite)
   Marie 18.09., Runde 1: „Variante C finde ich am besten" (kein Sticky-Stapel — läuft darüber schon).
   Runde 2 „Die Reihe" (vier Spalten in einem Panel): „zu hoch … auf eine Viewport-Höhe … zu bunt".
   Runde 3 zu Runde 2: „nicht schön, wenn die Texte rechts neben der Überschrift platziert werden …
   zu gequetscht … zu viel Bewegung auf einem kleinen Element, man kann sich nicht auseinanderhalten
   … Benutzerfreundlichkeit ist nicht da." Partial section-bese-system-raster.html.
   · Kopf wieder ZENTRIERT (Standard-Section-Header, Lead darunter). EIN dunkles Panel .bsr
     (Material der Leistungs-Karten .lcard darüber, ohne den Cyan-Radial-Glow), darin links die vier
     Schritte als Liste .bsr__steps, rechts EINE große Bühne .bsr__stage mit genau EINEM aktiven
     Schritt — nur eine Animation läuft, in der Größe der Fassung-6-Bühnen (Handy ganz sichtbar,
     KI-Szene 296 px wie überall). Inaktive Bühnen sind display:none, ihre Bühnen-Engines pausieren
     über die Sichtbarkeit von selbst (IntersectionObserver), die Takt-Engine der KI-Bühne inklusive;
     nur der Handy-Feed hängt an der Sichtbarkeit der ganzen SECTION und tickt unsichtbar weiter
     (Fassung-6-Engine, billig auf display:none — Guardian 18.09.).
   · Der aktive Schritt trägt seinen Satz und eine Fortschrittslinie (Dauer aus data-dur, Engine
     [data-bsr-stepper] in scripts.html); inaktive Schritte zeigen Caption + Titel, gedimmt.
   · Farbdisziplin (Refero: Ein-Akzent): Cyan ist der einzige Akzent, Status-Grün der geteilten
     Bühnen → Cyan (Präzedenz Bese-AI 5f), keine Glows, keine Icon-Schatten, Datenfarben in
     Silver-Blue-Alpha, Facetten-Icons 30 px (Kapitel-Zeichen wie .lcard; die Stapel-Fassung
     führt per §5a-Zeile 48).
   · Section-Polster --section-py-tight ab 1180 px (oberer Nachbar ist der Kanal-Kosmos, der
     selbst „tight" trägt — die Naht muss zusammen ≥ 96 px bleiben, darunter oben der volle Wert;
     Mobil-Boden beidseitig voll — Lehre Blickkarte 16.09.).
   · Einmalige Aufbauten hängen an .bsr-tile.is-in (Hook [data-bsr-tile], scripts.html).
   ============================================================ */

/* ---------- Section + Kopf ---------- */
.bsys--raster { padding-block: var(--section-py-tight); }
@media (max-width: 1179px) { .bsys--raster { padding-top: var(--section-py); } }   /* der obere Nachbar .kkos trägt selbst nur „tight": unter 1180 px maß die Naht 69–92 px (CI-Minimum 96, Guardian 18.09.) */
@media (max-width: 767px) { .bsys--raster { padding-block: var(--section-py); } }
.bsys--raster::before { display: none; }                                             /* der Cyan-Schleier des Bandes — hier Ruhe */
.bsys--raster .bsys__head { margin-bottom: clamp(28px, 2.8vw, 40px); }
.bsys--raster .bsys__lead { max-width: 84ch; color: var(--text-100); }              /* vier Zeilen bei 1728 statt fünf; Text-100: Text-200 maß 4,35 : 1 auf dem grauen Band */

/* ---------- Das Panel ---------- */
.bsr {
  --bt-a: #192939; --bt-b: #131F2B; --bt-c: #0C141C;            /* CI Solid Card: Surface 3 → 2 → 1 */
  --bt-stage: #0C141C;                                            /* Bühne: Surface 1, deckend */
  --bt-line: rgba(255, 255, 255, 0.09);
  --bsr-pad: clamp(20px, 2vw, 30px);
  --heading-color: var(--white);
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --glass-border: rgba(255, 255, 255, 0.08);
  --focus-ring: #FFFFFF;
  position: relative; min-width: 0;
  padding: var(--bsr-pad) var(--bsr-pad) clamp(16px, 1.6vw, 22px);
  border-radius: var(--radius-xl);
  color: var(--text-100);
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--bt-a) 0%, var(--bt-b) 52%, var(--bt-c) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 4px 24px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .bsr { --bt-a: #26282C; --bt-b: #1F2226; --bt-c: #1B1D20; --bt-stage: #131518; }   /* Charcoal-Familie (§5a) */

.bsr__body {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  column-gap: clamp(28px, 3vw, 48px); align-items: stretch;
}

/* ---------- Die Schritte (links) ---------- */
.bsr__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.bsr-step {
  position: relative; display: flex; flex-direction: column; gap: 0;
  padding: 10px 18px 10px; border-radius: var(--radius-lg);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.bsr-step:hover { background: rgba(255, 255, 255, 0.03); }
.bsr-step.is-active { background: rgba(255, 255, 255, 0.05); border-color: var(--glass-border); cursor: default; padding-bottom: 12px; }
.bsr-step__tag {
  display: flex; align-items: center; gap: 12px; height: 30px;
  font-size: 12px; font-weight: var(--weight-bold); letter-spacing: 2.5px; text-transform: uppercase;   /* Caption-Raster wie .lcard__tag */
  color: var(--text-300); transition: color 0.3s var(--ease);
}
.bsr-step.is-active .bsr-step__tag { color: var(--text-200); }
.bsr-step__fx { width: 30px; height: 30px; flex: 0 0 auto; opacity: 0.55; transition: opacity 0.3s var(--ease); }
.bsr-step.is-active .bsr-step__fx { opacity: 1; }
.bsr-step__title { margin: 6px 0 0; font-family: var(--font-ui); letter-spacing: 0; hyphens: manual; -webkit-hyphens: manual; font-size: clamp(17px, 1.3vw, 21px); font-weight: var(--weight-semibold); line-height: 1.3; }
.bsr-step__title button {
  appearance: none; background: none; border: 0; padding: 0 0.08em 0 0; margin: 0; text-align: left; cursor: inherit;
  font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--text-200);
  transition: color 0.3s var(--ease);
}
.bsr-step__title button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* die ganze Karte ist der Klickbereich */
.bsr-step.is-active .bsr-step__title button { color: var(--heading-color); }
.bsr-step__title button:focus-visible { outline: none; }
.bsr-step:has(.bsr-step__title button:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@supports not selector(:has(a)) { .bsr-step__title button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } }   /* ohne :has() sonst KEIN Fokusring (WCAG 2.4.7) */
/* der Satz klappt nur beim aktiven Schritt auf (Grid-Zeile 0fr → 1fr, kein overflow auf einer Überschrift) */
.bsr-step__more { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr;   /* über dem Klick-Overlay des Buttons — sonst ist der Satz nicht markierbar (gemessen: elementFromPoint = BUTTON) */ transition: grid-template-rows 0.45s var(--ease); }
.bsr-step.is-active .bsr-step__more { grid-template-rows: 1fr; }
.bsr-step__text { margin: 8px 0 0; min-height: 0; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--text-200); max-width: 44ch; }
/* Fortschrittslinie des aktiven Schritts (Dauer = --dur aus data-dur, gesetzt von der Engine) */
.bsr-step__bar { display: none; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 12px; }
.bsr-step__bar i { display: block; height: 100%; width: 100%; background: var(--accent-hover); transform: scaleX(0); transform-origin: left; }
.bsr-step.is-active .bsr-step__bar { display: block; }
.bsr.is-running .bsr-step.is-active .bsr-step__bar i { animation: bsr-progress var(--dur, 10s) linear forwards; }
.bsr.is-paused .bsr-step.is-active .bsr-step__bar i { animation-play-state: paused; }
@keyframes bsr-progress { to { transform: scaleX(1); } }

/* ---------- Die Bühne (rechts): genau EIN Schritt sichtbar ---------- */
.bsr__stage { position: relative; display: grid; min-height: clamp(440px, 45svh, 500px); min-width: 0; }   /* 500 px bei 1117 (Handy 410 + Polster); min-height, nicht height: ist die Schritt-Liste höher (gemessen 466 bei 1440×900), wächst die Bühne mit statt eine Lücke zu lassen */
.bsr-tile { grid-area: 1 / 1; display: none; min-width: 0; }
.bsr-tile.is-active { display: grid; animation: bsr-fade 0.45s var(--ease) both; }
.bsr-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-lg); }
@keyframes bsr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bsr .bsys-mod__visual.bsys-stage {
  height: 100%; min-height: 0;
  padding: clamp(16px, 1.6vw, 24px);
  border-radius: var(--radius-lg);
  background: var(--bt-stage);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  justify-content: center;
}
.bsr .bsys-stage__glow { display: none; }
.bsr .bsys-ai { flex: 0 0 auto; }                                  /* KI-Bühne mittig statt gestreckt */
.bsr .bsys-mod__visual.bsys-stage--app { grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.55fr); }   /* Handy näher zur Mitte (Fassung 6 setzt es an den rechten Rand), die Zuläufe fliegen weiter von links */
.bsr .bsys-ads__wire { bottom: 20px; }                             /* Fassung 6: −14 px = der Chip landete AUF der Kopfzeile des Panels (Guardian + CI-Prüfer 18.09.) */

/* ---------- Farbdisziplin: ein Akzent, kein Grün, kein Glow (Datenfarben = Silver Blue) ---------- */
.bsr .bsys-dot--ok { background: var(--st-cyan); box-shadow: none; }
.bsr .bsys-tag--ok { color: var(--st-cyan); background: rgba(var(--glow-rgb), 0.12); border-color: rgba(var(--glow-rgb), 0.35); }
.bsr .bsys-row.is-fresh { border-color: rgba(var(--glow-rgb), 0.4); box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.16); }
.bsr .bsys-eur { color: var(--st-txt-1); }
.bsr .bsys-phone__bar i { background: rgba(179, 204, 223, 0.5); }
.bsr .bsys-phone__spark path { stroke: rgba(179, 204, 223, 0.8); filter: none; }
.bsr .bsys-phone__lbl .icon, .bsr .bsys-ads__srclbl .icon { color: var(--st-txt-3); }
.bsr .bsys-inflow__chip .icon { color: var(--st-txt-2); }
.bsr .bsys-ads__chip { border-color: rgba(var(--glow-rgb), 0.45); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8); }
.bsr .bsys-ads__hit { border-color: var(--st-cyan); }
.bsr .bsys-ads__track i { background: rgba(179, 204, 223, 0.45); }
.bsr .bsys-ads__row--win .bsys-ads__track i { background: var(--st-cyan); }
.bsr .bsys-ads__row b { color: var(--st-txt-1); }
.bsr .bsys-ads__row--win b { color: var(--st-cyan); }
.bsr .bsys-ads__row--cut b { color: var(--st-txt-3); }
.bsr .bsys-res__line { stroke: rgba(179, 204, 223, 0.9); filter: none; }
.bsr .bsys-res__area { fill: rgba(179, 204, 223, 0.07); }
.bsr .bsys-app__bar, .bsr .bsys-app__brand, .bsr .bsys-res__axis { color: var(--st-txt-2); }
.bsr .bsys-ai__caption { color: var(--st-txt-1); }
.bsr .bsys-ai__step:not(.is-active) b { color: var(--st-txt-2); }    /* nur die aktive Ziffer trägt Cyan */

/* Einmalige Aufbauten — dieselben Regeln wie an .bsys-mod.is-in (Fassung 6) */
.bsr-tile.is-in .bsys-phone__spark path { stroke-dashoffset: 0; }
.bsr-tile.is-in .bsys-phone__bar i { transform: scaleX(1); }
.bsr-tile.is-in .bsys-res__line { stroke-dashoffset: 0; }
.bsr-tile.is-in .bsys-res__area,
.bsr-tile.is-in .bsys-res__dot { opacity: 1; }
.bsr-tile.is-in .bsys-res__dots i { animation: bsr-res-dot 0.6s var(--ease) calc(0.9s + var(--k, 0) * 45ms) both; }   /* Endfarbe Silver Blue statt 36 Cyan-Punkte */
@keyframes bsr-res-dot { 0% { background: rgba(179, 204, 223, 0.14); transform: scale(0.6); } 55% { background: rgba(179, 204, 223, 0.95); transform: scale(1.25); } 100% { background: rgba(179, 204, 223, 0.6); transform: scale(1); } }

/* ---------- Fußzeile des Panels: Satz links, kanonischer CTA rechts ---------- */
.bsr-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(18px, 1.8vw, 26px); padding-top: clamp(14px, 1.5vw, 20px);
  border-top: 1px solid var(--bt-line);
}
.bsr-foot__txt { margin: 0; max-width: 66ch; font-size: 15px; line-height: 1.5; color: var(--text-200); }
.bsr-foot__txt strong { color: var(--text-100); font-weight: var(--weight-semibold); }
.bsr-foot .btn { flex: 0 0 auto; }

/* ---------- unter 1024 px: Schritte über der Bühne ---------- */
@media (max-width: 1023px) {
  .bsr__body { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .bsr__steps { gap: 4px; }
  .bsr-step { padding: 12px 14px 14px; }
  .bsr__stage { min-height: clamp(440px, 60vw, 512px); }
}
@media (max-width: 767px) {
  .bsr { padding: 16px 16px 16px; }
  .bsr-step { padding: 10px 12px 12px; }
  .bsr-step__title { font-size: 16px; }
  .bsr-step__text { font-size: 14px; }
  .bsr__stage { min-height: 440px; }
  .bsr .bsys-mod__visual.bsys-stage { padding: 14px; }
  .bsr-foot { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bsr-tile.is-active { animation: none; }
  .bsr-step__more { transition: none; }
  .bsr-step.is-active .bsr-step__bar { display: none; }   /* (0,2,0) — die Basis-Regel blendet nur inaktive aus */
  .bsr-tile .bsys-res__dots i { background: rgba(179, 204, 223, 0.6); }   /* sonst gewinnt die Fassung-6-Regel mit 36 Cyan-Punkten */
}
@media (scripting: none) {
  .bsr-tile .bsys-res__dots i { background: rgba(179, 204, 223, 0.6); }
  .bsr-step.is-active .bsr-step__bar { display: none; }
}

/* ============================================================
   SYSTEM + APP — Startseite: „Wie wir arbeiten" + „Steuerung per App"
   in EINER Section (.app-control.sysapp, 2026-09-18)
   Marie 18.09.: „zusammenfügen … Überschrift anpassen … die App-
   Animation soll so bleiben … Calltracking und Geotargeting als Punkt
   dazu" — und zur ersten Fassung: „ich will nicht zusätzliche Kacheln
   … den Text in den Kacheln, die es schon gab, bearbeiten." Deshalb:
   die Section IST die App-Section (Klassen .app-control + data-app-
   control, Fragment app-showcase.html, das Fünf-Kachel-Bento mit
   Bese-System-Copy), nur der Kopf trägt den Bese-System-Lead. Die
   neuen Punkte (Calltracking, Bese-AI) sind Badges im geteilten
   Showcase (Block „Control-Badges" weiter oben, alle fünf Seiten).
   Hier stehen NUR die Kopf-Ergänzungen. Die erste Fassung mit acht
   Kacheln (Bühnen-Kacheln, Bühne „Rufnummer & Gebiet") ist am selben
   Abend restlos zurückgebaut (Chronik 18.09.).
   ============================================================ */
.sysapp .app-control__intro { max-width: 1000px; }
.sysapp .app-control__title { max-width: 44ch; }
.sysapp .app-control__title .app-control__br { display: none; }
@media (min-width: 1180px) { .sysapp .app-control__title .app-control__br { display: inline; } }   /* Runde 2b: fester Umbruch nach dem Komma — eine Zwischenfassung mit text-wrap: balance (nicht ausgeliefert) ließ „App.“ allein in Zeile 3 (gemessen 1440/1728) */   /* Runde 2: Zeile 1 „Das Bese-System.", der Satz darunter ausgewogen auf zwei Zeilen (mit 34ch stand „deiner App." allein) */
.sysapp .app-control__lead { max-width: 84ch; text-wrap: pretty; }   /* der Bese-System-Lead ist vier Sätze (58ch = fünf Zeilen) */

/* Abstände zu den Nachbarn (Marie 18.09.: „nach oben und unten mehr Abstand als bei anderen
   Sections"). Ursache GEMESSEN: Kosmos (oben), diese Section und „Die Betriebe" (unten) stehen auf
   demselben flachen Dunkelgrund — es gibt keine Bandkante, also addieren sich die Polster beider
   Nachbarn zu EINER Leere: oben 65 + 130 = 195 px, unten 130 + 130 = 260 px bei 1440 (bei einem
   Bandwechsel sieht man nur je eine Seite, ~130). Muster wie .bsys--raster/.kkos/.skreis: gleicher
   Ton = knappe Stufe auf beiden Seiten der Naht → Naht 130 px bei 1440, 144 bei 1728 (≥ 96 ✓).
   Unter 1180 px ergäben zwei „tight"-Nachbarn < 96 px (Token-Kommentar): dort trägt oben der volle
   Wert, unten die knappe Stufe; unter 768 px bleibt alles voll (48 + 48 = 96). */
@media (min-width: 1180px) {
  .sysapp { padding-block: var(--section-py-tight); }
  .sysapp + .proof,
  .sysapp + .cases,
  .sysapp + .vs { padding-top: var(--section-py-tight); }   /* .vs: Schädlingsbekämpfung (seit 19.09.2026) — „Gegen die Großen" ist dort ebenfalls dunkel */   /* die Nahtseite des dunklen Nachbarn: auf der Startseite folgt .proof, auf /leistungen/ (seit 19.09.2026) .cases direkt auf diese Section — beide gleicher Ton, also dieselbe knappe Stufe */
  /* /leistungen/auftragsgewinnung/ (seit 19.09.2026): oben liegt .ra auf dem MIST-Grau — ein
     BANDWECHSEL, keine Naht im gleichen Ton. Dort trägt die Section oben den vollen Abstand
     (sonst säße die H2 65 statt 130 px unter der Bandkante); unten bleibt die knappe Stufe zur
     dunklen .cases wie auf Startseite und Hub. */
  :is(.page-auftragsgewinnung, .page-schaedlingsbekaempfung) .sysapp { padding-block-start: var(--section-py); }   /* Schädlingsbekämpfung (19.09.2026): oben liegt das weiße Bese-System-Band — ebenfalls ein Bandwechsel */
}
/* /leistungen/ (19.09.2026): dort steht die Vogelperspektive (.skreis, knappe Stufe) ZWISCHEN
   Hub (oben) und dieser Section (unten). Unter 768 px ergäbe die knappe Stufe an beiden Nähten
   24 + 48 = 72 px (GEMESSEN bei 320–480) — unter dem CI-Minimum von 96 px. Dort trägt .skreis
   auf dieser Seite den vollen Wert (48 + 48 = 96 bei 320, 60 + 60 = 120 bei 640). Auf der
   Startseite hat .skreis andere Nachbarn (Hero-Band oben, .lsys mit vollem Wert unten). */
@media (max-width: 767px) {
  .page-leistungen .skreis { padding-block: var(--section-py); }
}
@media (min-width: 768px) and (max-width: 1179px) {
  .sysapp { padding-bottom: max(var(--section-py-tight), 48px); }   /* 48 px = Boden für den Schatten der CTA-Kachel (Ausdehnung 46 px, gemessen) — die Section clippt per overflow: hidden, bei 768 px (tight = 35) wären 11 px des Auslaufs hart abgeschnitten (Marie-Regel Schatten-Auslauf) */
}

/* Ohne JavaScript blieben die Badges des Showcases unsichtbar (opacity 0 bis .is-revealed —
   gemessen 18.09., Altbestand der App-Section auf allen fünf Seiten): Endzustand setzen */
@media (scripting: none) {
  .control-badge { opacity: 1; transform: none; }
  .app-control__connector, .app-control__connector-pulse { opacity: 1; }
}

/* ---- Runde 2b (18.09. spätabends): Kachel 04 „Bese-AI" trägt den KI-Kern ----
   Marie zur Runde-2-Fassung mit der Anfrage-Szene: „Ne, so meine ich das gar
   nicht: einfach nur irgendwas, was zeigt, dass eine KI dahinter läuft. Gar
   nicht, was die KI macht, sondern einfach nur eine Animation für KI."
   Also kein Screen, sondern ein Zeichen: der KI-Kern der Bese-AI-Konsole
   (.ai-core, 46 px, JS-gesteuert „denkt/fertig") als großer, immer laufender
   Loop. Aufbau von außen nach innen: atmender Lichthof (Cyan-Tripel) · drei
   Wellen, die versetzt nach außen laufen · zwei Hairline-Bahnen mit je einem
   Satelliten, gegenläufig (Cyan-hell, Silver Blue) · der kreisende Conic-Ring ·
   die dunkle Glasscheibe mit dem Facetten-Icon fx-bese-ai (CI Sektion 13, das
   hochwertige KI-Zeichen des Projekts — keine selbst gezeichnete Glyphe).
   Ein Akzent (Cyan/Silver Blue als Licht), keine Fläche in Blau (§5a). Alle
   Bewegung steht auf paused bis .app-control.is-revealed (Reveal-Engine der
   Section), reduced-motion zeigt den Kern still mit warmem Lichthof.
   Kachel 03 ist seit Runde 2 die Foto-Kachel (Fatih am Laptop) — das Chart-CSS
   (.control-feature--chart) läuft auf der Startseite nicht mehr. */
/* Runde 2c (Marie: „Es ist aber zu viel Platz. Du kannst das doch einfach rechts oben in die
   Ecke dahin machen") — der Kern ist ein STEMPEL in der rechten oberen Ecke der Kachel
   (Muster Siegel-Stempel der Magazin-Karte, 11.09.), die Kachel läuft wie die Text-Kacheln.
   Die H3 hielt in Runde 2c rechts Platz frei (durch Runde 2d abgelöst: der Text sitzt seitdem
   UNTER dem Kern); Ecken-Abstand ≥ der Wellen-Überstand (Welle bis scale 1,36 = 18 % je Seite), sonst schneidet die Kachel
   (overflow: hidden) die Wellen ab. */
/* Runde 2d (Marie: „unten ganz viel Platz … doch ein bisschen größer, aber ohne die Kachel größer
   zu machen. Du kannst den Text ja weiter nach unten schieben") — der Kern wächst auf 88–108 px
   und bleibt oben rechts, der Text sitzt am Kachelboden (justify-content: flex-end); der
   Mindestabstand Kern → Text ist ein margin-top am Textblock, damit auf dem Handy (Kachel =
   Inhaltshöhe) nichts überlappt. Die Reihe bestimmt weiter die CTA-Kachel — gemessen 1440: 362 px. */
.control-feature--ai { --cai-size: clamp(88px, 7.6vw, 108px); --cai-top: clamp(22px, 2vw, 28px); justify-content: flex-end; }
/* Mindestabstand Kern → Text = Ecken-Versatz + Kern + Puffer (Guardian 2d: der Versatz stand vorher
   nur implizit im Puffer — bei 768 px blieben 8 px); der margin-top rechnet ab der Padding-Kante der
   Kachel, deshalb wird das Kachel-Padding wieder abgezogen. Zwei Regime: wo die CTA-Kachel die Reihe streckt
   (ab 1080 px), setzt justify-content: flex-end den Text an den Boden und der margin-top ist nur die
   Untergrenze; wo die Kachel ihre Inhaltshöhe hat (Handy, Tablet-Paar), bestimmt allein der margin-top.
   Kern + Text müssen zusammen unter der CTA-Höhe bleiben (gemessen 1440: CTA 362, Reihe 363 px, Absatz
   vier Zeilen), sonst wächst die Reihe. */
.control-feature--ai .control-feature__content { margin-top: calc(var(--cai-top) + var(--cai-size) + 12px - clamp(20px, 2.4vw, 30px)); }   /* Kern-Boden ab Kachelkante minus das Kachel-Padding (Basis .control-feature, gleicher clamp) = Content-Start; +12 px Luft. Ohne den Padding-Abzug wuchs die Reihe auf 397 px (gemessen) */
.cai {
  position: absolute; top: var(--cai-top); right: var(--cai-top);
  width: var(--cai-size); height: var(--cai-size); z-index: 1;
  display: grid; place-items: center; pointer-events: none;
}
.cai > * { position: absolute; inset: 0; border-radius: 50%; }
.cai__halo {
  inset: -16%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.5), rgba(var(--glow-rgb), 0) 66%);
  filter: blur(10px); opacity: 0.8;
  animation: cai-breathe 3.4s ease-in-out infinite;
}
.cai__wave {
  border: 1px solid rgba(var(--glow-rgb), 0.6); opacity: 0; transform: scale(0.55);
  animation: cai-wave 4.2s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.cai__wave--2 { animation-delay: 1.4s; }
.cai__wave--3 { animation-delay: 2.8s; }
.cai__track { border: 1px solid rgba(255, 255, 255, 0.08); }
.cai__track--a { inset: -9%; }
.cai__track--b { inset: -17%; }
.cai__ring {
  inset: 8%;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(var(--glow-rgb), 0.22) 72%, var(--accent-hover) 88%, var(--cyan-hi) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1.1px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1.1px));
  opacity: 0.9;
  animation: cai-ring 2.6s linear infinite;
}
.cai__orbit { animation: cai-orbit 5.2s linear infinite; }
.cai__orbit--a { inset: -9%; }
.cai__orbit--b { inset: -17%; animation-duration: 8.6s; animation-direction: reverse; }
.cai__orbit i {
  position: absolute; top: -2.5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--cyan-hi); box-shadow: 0 0 8px 2px rgba(var(--glow-rgb), 0.85);
}
.cai__orbit--b i { width: 3px; height: 3px; margin-left: -1.5px; top: -1.5px; background: var(--silver-blue); box-shadow: 0 0 6px 1px rgba(179, 204, 223, 0.7); }
.cai__disc {
  inset: 20%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1B2A38, var(--surface-1) 70%);   /* Glas-Kern-Scheibe wie .ai-core__disc (Präzedenz Orb/Objektiv) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -5px 10px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(var(--shadow-rgb), 0.55);
}
.cai__disc svg { width: 54%; height: 54%; transform: translateY(0.5px); }
/* läuft erst, wenn die Section aufgedeckt ist (Reveal-Engine setzt .is-revealed auf .app-control) */
.app-control:not(.is-revealed) .cai :is(.cai__halo, .cai__wave, .cai__ring, .cai__orbit) { animation-play-state: paused; }
@keyframes cai-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes cai-wave { 0% { opacity: 0.75; transform: scale(0.55); } 70%, 100% { opacity: 0; transform: scale(1.36); } }   /* 1,36 auf 108 px = 19,4 px Überstand ≤ Ecken-Abstand 22–28 px, sonst schneidet die Kachel die Welle ab */
@keyframes cai-ring { to { transform: rotate(360deg); } }
@keyframes cai-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cai :is(.cai__halo, .cai__wave, .cai__ring, .cai__orbit) { animation: none !important; }
  .cai__halo { opacity: 0.85; transform: scale(1); }
  .cai__wave { display: none; }
  .cai__ring { background: conic-gradient(var(--accent-hover) 0 100%); opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════════
   POTENZIAL-CHECK — eigene Seite /potenzial-check/ (neu 2026-09-18)

   Marie: „Potenzialcheck nicht raus … Auf einer extra Seite kann man diesen
   Check dann machen." Der Rechner ist derselbe Live-Embed wie in der
   Bese-AI-Kurzfassung (.ba-embed / .ba-embed__frame, Basis bei ~19042),
   hier auf einer eigenen Werkzeug-Seite: Bühne (Dunkel-Insel, Kopf + Rechner
   in EINER Fläche) · Ablauf (weiß, drei Schritte) · .mapc (dunkel).

   Band-Folge D · W · D LOKAL (Muster /zertifizierungen/): die Seite hat keinen
   .hero und steht bewusst NICHT im geteilten Light-Band-Scope — lokales
   Dark-Tokenpaket auf Bühne und .mapc, dieselben Werte wie die konsolidierte
   Insel-Regel (§5a Charcoal-Zeile). Dark-Theme bleibt Navy (CI).
   KEIN overflow:hidden auf der Bühne — sie trägt das H1 (§1.6).
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Bühne ---------- */

.pc-stage {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-py);
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 55%, var(--surface-0) 100%);
  color: var(--text-200);
}

html[data-theme="light"] .pc-stage {
  --surface-0: #0E0F11;
  --surface-1: #17191D;
  --surface-2: #1F2226;
  --text-100: #FFFFFF;
  --text-200: rgba(255, 255, 255, 0.78);
  --text-300: rgba(255, 255, 255, 0.58);
  --heading-color: #FFFFFF;
  --em-grad-a: #B3CCDF;
  --em-grad-b: #4DA8DA;
  --accent-hover: #B3CCDF;
  --silver-blue: #B3CCDF;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glow-rgb: 179, 204, 223;
  --shadow-rgb: 0, 0, 0;
  --focus-ring: #FFFFFF;
  background: linear-gradient(168deg, #1F2226 0%, #17191D 55%, #131518 100%);
}

/* Lichtfeld hinter dem Rechner: das Werkzeug liegt unter Licht, nicht auf
   einer Platte (Rezept .zert-stage__light — Silver Blue, breit, ohne Bewegung). */
.pc-stage__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 38% at 50% 62%,
      rgba(var(--glow-rgb), 0.16) 0%,
      rgba(var(--glow-rgb), 0.06) 40%,
      transparent 72%),
    radial-gradient(ellipse 50% 36% at 8% 0%,
      rgba(var(--glow-rgb), 0.05) 0%,
      transparent 60%);
}

/* Feinkorn wie Hero/Footer/Zertifizierungs-Bühne. */
.pc-stage__noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 220px 220px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.pc-stage > .container { position: relative; z-index: 1; }

/* Kopf zentriert über dem Rechner — die Seite hat EIN Werkzeug, der Kopf
   sagt in drei Zeilen, was es tut, und tritt dann zurück. */
.pc-stage__kopf {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  scroll-margin-top: clamp(84px, 9vh, 104px); /* Ziel des Deep-Links #potenzial-check */
}

.pc-stage__kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hover);
}

.pc-stage__title {
  margin: 0 auto var(--space-4);
  max-width: 18ch;
  padding-right: 0.08em; /* negatives Tracking + Kursiv-Überhang am Zeilenende (§1.6) */
}

.pc-stage__lead {
  margin: 0 auto;
  max-width: 54ch;
  font-size: var(--text-lead);
  line-height: 1.8;
  color: var(--text-200);
}

/* Drei Fakten in einer Reihe, nur durch Abstand getrennt (kein Trennstrich —
   dieselbe Regel wie in der Hero-Vertrauenszeile). Kleintext auf dunkler
   Fläche eine Stufe kräftiger: --text-100 statt --text-200. */
.pc-fakten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(18px, 2.4vw, 32px);
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.pc-fakten__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--text-100);
}

.pc-fakten__icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Rechner: Basis .ba-embed / .ba-embed__frame (Bese-AI-Section). Hier
   bekommt er die Bühne allein, deshalb mehr Höhe als in der Section — er
   deckelt sich intern auf 960 px Breite, deshalb 1000 px Deckel wie .ba-check
   (Boxbreiten-Runde 2026-09-09: breiter wäre eine leere dunkle Platte). */
.pc-embed {
  max-width: 1000px;
  margin: clamp(32px, 3.8vw, 52px) auto 0;
}

.pc-embed__frame {
  height: clamp(720px, calc(100svh - 160px), 960px);
  box-shadow: 0 40px 90px -40px rgba(var(--shadow-rgb), 0.7);
}

@media (max-width: 560px) {
  .pc-embed__frame { height: clamp(720px, 92svh, 900px); }
}

/* ---------- Ablauf (weiß) ---------- */

.pc-ablauf {
  padding-block: var(--section-py);
}

html[data-theme="light"] .page-potenzial-check .pc-ablauf {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}

.pc-ablauf__kopf { margin-bottom: clamp(36px, 4.4vw, 60px); }

.pc-schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 860px) {
  .pc-schritte { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* Schritt: Nummer als Display-Ziffer über einer Hairline mit kurzem
   Akzent-Strich (Kennzahlen-Typografie der Zertifizierungs-Datenzeile) —
   die einzige Farbe im Schritt. */
.pc-schritt {
  position: relative;
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--glass-border);
  min-width: 0;
}

.pc-schritt::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--accent);
}

.pc-schritt__nr {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

.pc-schritt__titel {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--heading-color);
}

.pc-schritt__text {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.7; /* Farbe: globaler p-Default --text-100 */
  overflow-wrap: break-word;
}

/* ---------- Abschluss .mapc als Dunkel-Insel (lokal, Muster Zertifizierungen) ---------- */

html[data-theme="light"] .page-potenzial-check .mapc {
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --accent-hover: #4DA8DA;
  --cyan-hi: #6BC4F0;
  --silver-blue: #B3CCDF;
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --logo-mono-filter: brightness(0) invert(1);
  --focus-ring: #FFFFFF;
  background: linear-gradient(180deg, #1F2226 0%, #131518 100%);
}

/* ---------- Reveal (generischer [data-reveal]-Hook, Stagger über --i) ---------- */

.pc-stage[data-reveal] :is(.pc-stage__kicker, .pc-stage__title, .pc-stage__lead, .pc-fakten, .pc-embed),
.pc-ablauf[data-reveal] :is(.pc-ablauf__kopf > *, .pc-schritt) {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.09s),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.09s);
}

.pc-stage[data-reveal].is-revealed :is(.pc-stage__kicker, .pc-stage__title, .pc-stage__lead, .pc-fakten, .pc-embed),
.pc-ablauf[data-reveal].is-revealed :is(.pc-ablauf__kopf > *, .pc-schritt) {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript setzt nichts .is-revealed — der Rechner muss trotzdem da sein. */
@media (scripting: none) {
  .pc-stage[data-reveal] :is(.pc-stage__kicker, .pc-stage__title, .pc-stage__lead, .pc-fakten, .pc-embed),
  .pc-ablauf[data-reveal] :is(.pc-ablauf__kopf > *, .pc-schritt) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-stage[data-reveal] :is(.pc-stage__kicker, .pc-stage__title, .pc-stage__lead, .pc-fakten, .pc-embed),
  .pc-ablauf[data-reveal] :is(.pc-ablauf__kopf > *, .pc-schritt) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   SYSTEM-KREIS „Vogelperspektive" — .skreis (NUR Startseite, 2026-09-18)
   Partial: templates/partials/section-system-kreis-home.html — direkt
   unter Hero + Logo-Band, VOR „Vier Leistungen, ein System" (Marie).
   Aus vier Leinwand-Entwürfen gewählt: D „Der Block" = Dunkel-Insel mit
   Punktraster-Bühne (B), waagerechter Ablauf Wege → Anruf → Auftrag →
   Folgeauftrag mit Rücklauf (A), die vier Wege als Platten wie im
   Hero-Film, „250+ Betriebe stellen jeden Weg scharf" als Grund.

   DUNKEL-INSEL in beiden Themes (im hellen mit lokalem Token-Paket, Block
   am Ende). Runde 3 (18.09.) war sie kurz hell, Marie: „gefällt mir leider
   gar nicht" → zurück auf dunkel. Alle Bühnenfarben laufen über lokale
   --sk-*-Tokens (Navy an .skreis, Charcoal im Light-Block).
   Band-Folge: Hero(D, Film) · Logo-Band · SKREIS(D) · Leistungen(W);
   Rhythmus erst in der Schlussrunde.

   Farben: ein Akzent — Cyan als Licht (Anruf-Knoten, Rücklauf, Lichter),
   Silver Blue als Kante der Platten/Boxen, kein Grün. Alle SVG-Farben
   als Klassen hier, nichts hart im Markup. Kontraste (Guardian nachgerechnet):
   Runde 4 (monochrom): Captions ≈ 7 : 1, Wege/Kanten ≈ 3,1 : 1
   (Schwelle 3), Pillen nur noch Hairline mit Caption-Text.
   Ohne JS laufen Kanten-Leuchten und Knoten-Puls (SMIL) frei — bewusst,
   beide sind leise; Lichter/Ringe/Glanz sind dort ausgeblendet.

   Bewegung: Platten fahren beim Reveal ein (CSS, --i-Staffel), der
   Rücklauf fließt (CSS, Dashoffset), die Bese-Linie zeichnet sich (CSS);
   Kometen mit Ease (keySplines), Ringe + Knoten-Puls je Ankunft, Kanten-
   Leuchten und Glanz über die Platten, Aufblitz-Flächen — SMIL auf einer
   10-s-Zeitachse (Runde 3) —
   Start/Pause über [data-skreis] in scripts.html, weil SMIL keine CSS-
   Regel erreicht. 8-s-Loop = Takt-Bühnen-Präzedenz (§5a-Zeile).
   Unter 1024 px steht die zweite, HOCHKANTE Bühne .skreis__stage--mobil (seit 18.09. abends).
   ===================================================================== */
.skreis {
  position: relative;
  /* Knappe Stufe (Token-Kommentar: „nur für thematisch zusammengehörige
     Sections") — die Ziele des Kreises SIND die Leistungen darunter.
     Der Nachbar .lsys trägt oben den vollen Wert → Naht ≥ 96 px. */
  padding-block: var(--section-py-tight);
  color: var(--text-100);

  /* Farben der Bühne als lokale Tokens — Dark-Theme-Werte (Navy-Insel);
     das helle Theme überschreibt NUR diese Tokens (Block am Ende). */
  --sk-line: rgba(255, 255, 255, 0.34);    /* Wege, Kanten, Pfeile — ≈ 3,1 : 1 */
  --sk-line-soft: rgba(255, 255, 255, 0.26); /* Schiene, Rücklauf (gepunktet, nachrangig) */
  --sk-line-hi: rgba(255, 255, 255, 0.55);  /* Knoten, Aufhellen */
  --sk-accent: #4DA8DA;                    /* NUR das bewegte Licht */
  --sk-ink: var(--white);                  /* Labels, Zahl */
  --sk-cap: rgba(255, 255, 255, 0.62);     /* Captions */
  --sk-body: var(--surface-1);             /* Platten, Boxen, Knoten */
  --sk-node: var(--surface-1);
  --sk-ico: var(--white);
  --sk-head: var(--white);                 /* Kopf der Kometen */
  --sk-dot: rgba(255, 255, 255, 0.07);
  --sk-andere: rgba(255, 255, 255, 0.28);
  --sk-stage: var(--surface-1);
  --sk-stage-border: var(--glass-border);
  --sk-stage-shadow: none;
  /* Runde 6 (19.09., Marie: „die Bausteine wie im Hero-Video … Frontansicht, das
     Leuchtende zwischen den Kacheln"): der Block. Platten-Verlauf und Fugen-Farben
     (CI-Cyan #4DA8DA, Kern Weiß) stehen als ATTRIBUTE in den <defs> beider SVGs —
     über CSS-Klassen an <stop> kamen sie bei Marie als Schwarz an (Screenshot
     19.09.). Theme-fest wie der Hero-Film darüber. */
  --sk-rim: rgba(255, 255, 255, 0.14);     /* Blockrand */

  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
}

.skreis__header { margin-bottom: clamp(24px, 3vw, 32px); }

.skreis__title {
  max-width: 32ch;   /* zwei Zeilen bei 1440 (gemessen: 24ch brach dreizeilig) */
  hyphens: manual;
}

.skreis__sub {
  margin: 0;
  max-width: 58ch;
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--text-200);
}

/* ---------- Bühne ---------- */
.skreis__stage {
  position: relative;
  display: none;                 /* unter 1024 px: Liste statt Bühne */
  aspect-ratio: 1312 / 480;      /* viewBox 0 0 1312 480 (Runde 6e: der Vergleich ist raus, Bühne endet am Rücklauf) */
  border-radius: var(--radius-xl);
  background: var(--sk-stage);
  border: 1px solid var(--sk-stage-border);
  box-shadow: var(--sk-stage-shadow);
  overflow: hidden;              /* trägt keine H2 — nur die Bühne */
}
@media (min-width: 1024px) { .skreis__stage { display: block; } }

/* Punktraster = „Betriebe von oben", weich nach außen ausgeblendet */
.skreis__field {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--sk-dot) 1.2px, transparent 1.9px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 64% 78% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 64% 78% at 50% 50%, #000 20%, transparent 78%);
}

.skreis__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG-Farben — alle über die lokalen Tokens.
   Runde 4 (Marie: „zu bunt, zu kitschig"): MONOCHROM. Alles Stehende in
   Weiß-Stufen, Cyan trägt NUR das bewegte Licht (Komet, Ring). Kein Hof,
   kein Glanz, keine gefüllten Blau-Flächen. */
.skreis__lane { stroke: var(--sk-line); fill: none; stroke-width: 1; }
.skreis__arr  { fill: none; stroke: var(--sk-line); stroke-width: 1.5; }
.skreis__tick { stroke: var(--sk-line-soft); fill: none; stroke-width: 1; }
.skreis__ret  {                 /* Rücklauf (die Schiene 250+ → Block ist seit Runde 6b raus) */
  stroke: var(--sk-line-soft);
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.skreis__plt  { stroke: none; }          /* Fläche = Verlauf aus den <defs> (fill-Attribut im Markup) */
.skreis__edge { fill: var(--sk-ink); }    /* Platte hellt beim Abflug auf (SMIL-Opacity 0 → .16) */
.skreis__blockrim { fill: none; stroke: var(--sk-rim); stroke-width: 1; }
/* Die Calltracking-Zeile sitzt mittig AUF dem Lanes-Bündel — Knockout in der
   Bühnenfarbe, damit die Linien hinter den Buchstaben aussetzen (Marie: „der Satz
   ist komisch, weil er links platziert ist") */
.skreis__cap--tag { paint-order: stroke; stroke: var(--sk-stage); stroke-width: 7px; stroke-linejoin: round; }
/* Runde 6d (mobil): Kopf „250+ Partnerbetriebe" mittig — das Wort in Label-Größe neben der Zahl;
   der Rücklauf-Impuls geht in JEDE Kachel: leuchtender Pfeil + Lichtpunkt je Platte */
.skreis__bigw    { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.skreis__tickhot { fill: none; stroke: var(--sk-accent); stroke-width: 1.5; }
/* Die Fugen zünden, wenn die Platten zusammengefahren sind — der Blockrand mit
   ihnen (sonst stünde ein leerer Umriss da, bevor die Platten landen; gemessen
   am ersten Reveal-Frame). */
.skreis__seam, .skreis__blockrim { opacity: 0; transition: opacity 0.7s var(--ease) 1.25s; }   /* letzte Platte landet bei 0,3 + 0,9 = 1,2 s */
.skreis.is-revealed .skreis__seam, .skreis.is-revealed .skreis__blockrim { opacity: 1; }
.skreis__box  { fill: var(--sk-body); stroke: var(--sk-line); stroke-width: 1; }
.skreis__node { fill: var(--sk-node); stroke: var(--sk-line-hi); stroke-width: 1; }
.skreis__ring  { fill: none; stroke: var(--sk-accent); stroke-width: 1; stroke-opacity: 0.55; }
.skreis__flash { fill: none; stroke: var(--sk-line-hi); stroke-width: 1; }
.skreis__ico  { fill: none; stroke: var(--sk-ico); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skreis__pill { fill: none; stroke: var(--sk-line); stroke-width: 1; }
/* Der Vergleich „Andere Agenturen · nur die Wege / Bese: der ganze Kreis“ ist seit Runde 6e (19.09.) auf
   BEIDEN Bühnen raus (Marie: „einfach rausnehmen, auch Desktop“) — die drei Regeln bleiben als Rückbau-Vorlage. */
.skreis__bar--andere { stroke: var(--sk-andere); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 6; }
.skreis__bar--wir {
  stroke: var(--sk-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;          /* pathLength="1" im Markup */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease) 0.5s;
}
.skreis.is-revealed .skreis__bar--wir { stroke-dashoffset: 0; }

/* Das Licht: der einzige Farbakzent der Bühne */
.skreis__comet { fill: none; stroke: var(--sk-accent); stroke-width: 1.5; stroke-linecap: round; stroke-opacity: 0.8; }
.skreis__head  { fill: var(--sk-head); r: 2.5px; }

/* SVG-Text: Montserrat, Skala 12 / 14 / 16, Caption 12/700/2,5 px */
.skreis__big   { font: 600 40px var(--font-ui); fill: var(--sk-ink); letter-spacing: -0.02em; }
.skreis__cap   { font: 700 12px var(--font-ui); letter-spacing: 2.5px; fill: var(--sk-cap); }
.skreis__capc  { font: 700 12px var(--font-ui); letter-spacing: 2.5px; fill: var(--sk-ink); }
.skreis__lbl   { font: 600 16px var(--font-ui); fill: var(--sk-ink); }
.skreis__pltl  { font: 600 14px var(--font-ui); fill: var(--sk-ink); }
.skreis__pilll { font: 600 11px var(--font-ui); fill: var(--sk-cap); letter-spacing: 0.3px; }

/* Platten fahren beim Reveal ZUSAMMEN — Hero-Film „Der Block": sie starten
   auseinandergezogen (obere nach oben, untere nach unten) und schließen sich
   zu einem Körper; danach zünden die Fugen (.skreis__seam). */
.skreis__plate {
  opacity: 0;
  transform: translateY(calc((var(--i, 0) - 2.5) * 22px));   /* i=0 → −55 px (oben), i=5 → +55 px (unten) */
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(0.1s + var(--i, 0) * 0.04s);
}
.skreis.is-revealed .skreis__plate { opacity: 1; transform: none; }


/* Die Stationen-Liste unter 1024 px (.skreis__mobil, 18.09.) ist seit dem Abend
   durch die HOCHKANT-Bühne ersetzt (Block „MOBIL-OPTIMIERUNG, RUNDE 2" am Dateiende). */

/* ---------- Ohne JavaScript / reduced motion ---------- */
@media (scripting: none) {
  .skreis__plate, .skreis__seam, .skreis__blockrim { opacity: 1; transform: none; }
  .skreis__bar--wir { stroke-dashoffset: 0; }
  .skreis__licht, .skreis__ring, .skreis__flash, .skreis__ai { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .skreis__plate, .skreis__seam, .skreis__blockrim { opacity: 1; transform: none; transition: none; }
  .skreis__bar--wir { stroke-dashoffset: 0; transition: none; }
  .skreis__licht, .skreis__ring, .skreis__flash, .skreis__ai { display: none; }
}

/* ---------- Helles Theme: Dunkel-Insel mit LOKALEM Token-Paket ----------
   Runde 3 (18.09.) war die Section hier kurz hell — Marie: „auf weißem
   Hintergrund gefällt mir das leider gar nicht. Mach die Animation wieder
   auf dunklem Hintergrund." Zurück auf die Insel (wie .kkos); die neue
   Animation und die --sk-*-Tokens bleiben, nur in Charcoal statt Navy.
   ⚠ Token-Paket vollständig halten — inkl. --silver-blue (Light biegt es
   auf #44627C um, --em-grad-a zieht daraus). Eyebrow-Pille lokal, weil
   die geteilte Light-Pillen-Regel ihre Farbe hart setzt (0,4,1 > 0,3,1). */
html[data-theme="light"] :is(.page-home, .page-leistungen) .skreis {   /* .page-leistungen seit 19.09.2026: die Section läuft auch auf /leistungen/ (ersetzt dort den Modul-Stapel) */
  --surface-0: #0E0F11;
  --surface-1: #15171A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --surface-4: #2C3034;
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --text-400: rgba(255, 255, 255, 0.20);
  --text-500: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --heading-color: var(--white);
  --silver-blue: #B3CCDF;
  --em-grad-a: var(--silver-blue);
  --em-grad-b: var(--accent-hover);
  --accent-hover: #4DA8DA;
  --cyan-hi: #6BC4F0;
  --shadow-rgb: 0, 0, 0;
  --glow-rgb: 77, 168, 218;
  --logo-mono-filter: brightness(0) invert(1);
  --focus-ring: #FFFFFF;
  /* Bühne + Körper in Charcoal-Surface 1 hell (Präzedenz „Die Bühne", 18.09.) */
  /* Runde 5 (Marie: „Section im Hintergrund wirklich schwarz, die Kachel
     ein bisschen abgestumpfter, schwächer schwarz"): Grund flach schwarz,
     Kachel ein stumpfes Anthrazit darüber. Ein Übergangs-Verlauf aus dem
     Hero-Film wurde verworfen („ohne so einen komischen Verlauf"). */
  --sk-body: #141518;
  --sk-node: #141518;
  --sk-stage: #141518;
  --sk-stage-border: rgba(255, 255, 255, 0.07);
  --sk-dot: rgba(255, 255, 255, 0.05);
  --sk-rim: rgba(255, 255, 255, 0.12);   /* Block (Runde 6): Platten-/Fugen-Farben als SVG-Attribute, theme-fest */
  color: var(--text-100);
  background: #08090A;   /* flach schwarz, kein Verlauf (Marie 18.09.) */
}
html[data-theme="light"] :is(.page-home, .page-leistungen) .skreis .eyebrow {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--glass-border);
  color: var(--text-200);
  box-shadow: none;
}

/* =====================================================================
   ERFOLGSGESCHICHTEN — reine Testimonial-Seite (2026-09-18, Marie:
   „nur Testimonials … so wie candidate-flow.de/fallstudien").
   Partial: section-eg-videos.html (.egv) — Videos UND Kundenstimmen in EINEM Raster
   + Hero-Zusatz .eg-hero im Page-File.
   Band (hell): Hero(D) · Videos + Stimmen(D, EINE Insel — Eintrag .egv
   in den drei konsolidierten Insel-Listen neben .eg--gross) · CTA(W).
   Rhythmus erst in der Schlussrunde (Marie 17.09.).
   Vorbild-Maße gemessen (candidate-flow, 1440 px): Zweier-Raster
   622 + 22 + 622 px, Karten-Radius 15 px, Play-Knopf 90 px Milchglas
   (Weiß 5 %, blur 25 px, 1 px Weiß 10 %, Hover-Scale 0,25 s).
   ===================================================================== */

/* ---------- Hero: Vertrauenszeile über der H1, CTA darunter ---------- */
.eg-hero .eg-hero__trust {
  justify-content: center;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.eg-hero__actions {
  display: flex;
  justify-content: center;
  margin-top: 0;   /* der Lead bringt seinen Abstand nach unten schon mit */
}

/* ---------- Gemeinsames Raster: immer zwei nebeneinander ---------- */
.egv__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.6vw, 24px);
}
@media (min-width: 768px) {
  .egv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Statisch — kein Einblenden beim Scrollen (Marie 18.09.: „ohne dass
   das eingeblendet ist, die sollen einfach statisch da stehen"). */

/* ---------- Video-Testimonials (.egv) ---------- */
.egv {
  position: relative;
  padding-block: var(--section-py);
  /* Karten-Material: CI Solid Card im Dark-Theme; Light s. Block unten */
  --egv-card: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
}
.egv__header { margin-bottom: clamp(32px, 4vw, 48px); }

.egv__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--egv-card);
  border: 1px solid var(--glass-border);
  overflow: hidden;              /* rundet das Standbild; trägt keine H1/H2 */
}

.egv__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-1);
}
.egv__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.egv__card:hover .egv__poster { transform: scale(1.025); }

/* Milchglas-Play-Knopf (Vorbild candidate-flow, Marie: „das Button-Design
   von dem Play-Button finde ich super"). Weiß-Anteil etwas höher als das
   Vorbild (12 statt 5 %), weil unsere Standbilder helle Flächen tragen —
   bei 5 % verschwand der Kreis dort. */
.egv__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(64px, 6.25vw, 90px);
  height: clamp(64px, 6.25vw, 90px);
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(25px) saturate(1.4);
  backdrop-filter: blur(25px) saturate(1.4);
  color: var(--white);
  cursor: pointer;
  translate: -50% -50%;
  transition: scale 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background-color 0.25s var(--ease);
}
.egv__play svg { width: 19%; height: auto; margin-left: 5%; }
.egv__play:hover,
.egv__play:focus-visible { scale: 1.08; background: rgba(255, 255, 255, 0.2); }
.egv__play:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.egv__media[data-mounted="true"] .egv__play,
.egv__media[data-mounted="true"] .egv__poster { opacity: 0; pointer-events: none; }
.egv__media .wistia_responsive_padding { position: absolute !important; inset: 0; padding: 0 !important; }

.egv__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: clamp(20px, 2.2vw, 30px);
}
.egv__head {
  display: flex;
  flex-wrap: wrap;               /* 320 px: Pille rutscht unter lange Firmennamen */
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.egv__firma {
  margin: 0;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  hyphens: manual;               /* „Oster-mann" — Firmennamen nicht trennen */
  overflow-wrap: break-word;
}
.egv__verified {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 9999px;
  border: 1px solid var(--glass-border);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-100);
  white-space: nowrap;
}
.egv__rating {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
  color: var(--text-200);
}
.egv__stars { display: inline-flex; gap: 3px; color: var(--white); }
.egv__stars .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.egv__ort {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-200);
}
.egv__bullets {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.egv__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-100);
}
.egv__bullets .icon { flex: none; margin-top: 2px; color: var(--accent-hover); }
/* ---------- Kundenstimmen im selben Raster (Runde 3, 18.09.) ----------
   Dieselbe .egv__card ohne Play-Knopf; statt der Häkchen-Zeilen steht
   das Zitat. Nur die Zitat-Typografie ist eigen. */
.egv__zitat { margin: 4px 0 0; display: grid; gap: 8px; }
.egv__quote { margin: 0; }
.egv__quote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-100);
}
/* §5a: Hervorhebungen in Testimonial-Zitaten = Montserrat, kein Italic-Verlauf. */
.egv__quote em { font-style: normal; font-weight: 600; color: var(--heading-color); }
.egv__person { font-size: 14px; font-weight: 600; color: var(--text-200); }

/* ---------- Alle Google-Bewertungen (.egg, 19.09.2026) ----------
   Marie: „Das kommt mir ein bisschen wenig vor an Testimonials … knall alle
   drauf". Gleiche Section, gleicher Grund, gleiches Karten-Material wie das
   Raster darüber — nur ohne Bild (die Betriebe haben keins). Mauerwerk über
   CSS-Spalten, weil die Texte 30–900 Zeichen lang sind: in einem Raster
   stünden kurze Karten mit halber Höhe Leerraum. Keine Hervorhebung —
   Google-Wortlaut 1:1. Das Google-G in Originalfarben ist die
   Quellenangabe (§5a, Präzedenz Section 15). */
.egg { margin-top: clamp(48px, 6vw, 88px); }
.egg__quelle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: 15px;
  color: var(--text-100);
}
.egg__quelle b { font-weight: 700; color: var(--heading-color); }
.egg__quelle .egg__g { width: 22px; height: 22px; margin-top: 0; }
.egg__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 300px;
  column-gap: clamp(16px, 1.6vw, 24px);
}
.egg__card {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  padding: clamp(20px, 2vw, 26px);
  border-radius: var(--radius-lg);
  background: var(--egv-card);
  border: 1px solid var(--glass-border);
}
.egg__head { display: flex; align-items: flex-start; gap: 12px; }
.egg__g { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.egg__wer { margin: 0; display: grid; gap: 2px; min-width: 0; }
.egg__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color);
  overflow-wrap: break-word;
}
.egg__firma { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text-200); }
.egg__rating { margin: 0; }
.egg__rating .egv__stars .icon { width: 14px; height: 14px; }
.egg__text { margin: 0; display: grid; gap: 10px; }
.egg__text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-100); overflow-wrap: break-word; }
.egg__datum {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-200);
  text-decoration: none;
  text-underline-offset: 3px;
}
.egg__datum:hover,
.egg__datum:focus-visible { color: var(--heading-color); text-decoration: underline; }

/* ---------- Light-Theme ---------- */
/* Videos: Insel (Tokens + Hintergrund kommen aus den konsolidierten
   Listen); Karten in der Charcoal-Kachel-Familie (§5a, 03.08.). */
html[data-theme="light"] .page-erfolgsgeschichten .egv {
  --egv-card: linear-gradient(180deg, #26282C 0%, #1B1D20 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   GERÄTE-DUO — MacBook + Handy im App-Showcase (18.09.2026, alle fünf Seiten)

   Marie: „Ich möchte, dass du da bitte auch ein MacBook nimmst. Da kannst du
   zum Beispiel einfach das Mockup nehmen, was auf der Leistungsseite Webseiten
   in der Hero-Section ist. Es soll natürlich aber das Bese-System zeigen.
   Diese App soll es vereinfacht zeigen, wie die jetzt hier auf dem Handy auch
   schon ist … sodass wir beides zeigen: Handy und Laptop."

   Runde 4 (18.09., Marie: „Du kannst das MacBook einfach so zeigen, ohne dass es
   aufklappt. Diese Animation kannst du dir sparen. … Das Handy ist zu sehr im
   Vordergrund, und es darf ruhig ein bisschen darüber liegen in das Mockup vom
   MacBook."): der Laptop-Wrapper trägt KEIN data-reveal mehr — kein Aufklappen,
   keine Drehung; Screen und Deck-Lichtschein stehen per Regel unten im End-
   zustand (die Basis-Regeln des Website-Mockups setzen beide auf opacity 0 und
   warten auf die Choreografie). Das Handy ist kleiner (176 statt 220 px) und
   liegt in der rechten unteren Ecke der Basis — sein oberes Drittel über der
   Deck-Kante, der Rest vor dem Deck, das Dashboard bleibt komplett frei.
   Aufbau: .app-duo umschließt Laptop (.app-duo__laptop → .mbk-scene aus dem
   Website-Hero) und das bestehende Handy (.phone-mockup). Ab 1180 px liegt das
   Duo absolut in der 1120 × 700-Bühne (Laptop mittig, Handy rechts unten davor),
   darunter ist das Duo ein eigener Block über dem Badge-Raster: Laptop volle
   Breite, Handy überlappt die Basis rechts unten.
   Der Laptop-Screen ist ein DIV (.mbk__screen--app) im Seitenverhältnis der
   Screen-Bilder (16:10) und trägt das Dashboard .dash: Seitenleiste, drei
   Kennzahlen, Anrufe mit Bese-AI-Urteil, Werbung mit Nummer je Weg. Schrift
   über Container-Query-Einheiten (cqw AUF DEN KINDERN, nicht am Container —
   Lehre 18.09.), Farben über die Insel-Tokens wie das Handy (die Section ist
   auf allen fünf Seiten Dunkel-Insel); der Screen selbst ist Geräte-Fläche
   (#050608 aus .mbk__screen). Ein Akzent (Cyan) für Live, Urteil, Füllungen.
   Geteilte Zähler: data-counter/data-fill laufen über querySelectorAll der
   App-Engine, deshalb zählt der Laptop mit dem Handy hoch.
   ═══════════════════════════════════════════════════════════════════ */
.app-duo {
  position: relative;
  width: 100%;
  max-width: 720px;
  /* Layout-Höhe 560–1179 px = Oberkante des Handys + Handy-Höhe. Das Handy beginnt bei 42 % der
     Duo-Breite (GEMESSEN: die letzte Werbung-Zeile des Dashboards endet bei 41 % — so bleibt sie
     frei, das Handy lappt nur über die Panel-Unterkante und die Deck-Kante) und ist
     max(196 px, 27 %) breit im Verhältnis 9 : 19 — 196 px ist das Desktop-Maß, unter dem der
     px-feste Handy-Inhalt nicht mehr passt (gemessen 180 px: ein Label abgeschnitten, 28 px Feed-
     Überlauf; bei 196 px 0 / 2 px). Die Duo-Breite ist min(100 %, 720 px) der Bühne,
     deshalb rechnet beides in cqw der Bühne (.app-control__stage ist unter 1180 px ein Container). */
  --duo-w: min(100cqw, 720px);
  --duo-phone-w: max(196px, 0.27 * var(--duo-w));
  /* 0,44 seit 24.09.2026: mit der Kamera −24° liegt die letzte Werbung-Zeile tiefer (gemessen 640 px: bei 0,42 −1 px Überlappung) */
  --duo-phone-top: calc(0.44 * var(--duo-w));
  height: calc(var(--duo-phone-top) + var(--duo-phone-w) * 19 / 9);
  z-index: 2;
}
.app-duo__laptop {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 1;
}
/* Laptop statisch: offen (8°), frontal, Display an, Lichtschein auf dem Deck — die Werte, auf denen
   die Website-Choreografie endet. Kamera: siehe den Absatz darunter (seit 24.09.2026 −24°; die
   frühere Fassung „flacher als im Website-Hero, −16°" ließ die Basis zu klein wirken). */
/* 24.09.2026 (Marie: „bei dem MacBook ist das Verhältnis von Tastatur und Bildschirm nicht korrekt …
   der untere Teil zu klein … besonders mobil"): Kamera −24° statt −16°, und die Perspektive wächst mit
   der Laptop-Breite (383cqw = die 2400 px der Website-Szene bei 627 px Breite). Mit festen 2400 px war
   die Kamera auf dem Handy relativ zum Gerät viel weiter weg — die Basis schrumpfte dort stärker.
   GEMESSEN Basis : Deckel (projizierte Höhen) vorher 0,45 (1440) / 0,37 (390) / 0,36 (320), jetzt 0,61
   an allen Breiten von 320 bis 1440. Das Handy bleibt über der letzten Werbung-Zeile (≥ 4 px frei). */
.app-duo__laptop { container-type: inline-size; }
.app-duo .mbk-scene { perspective: 383cqw; }
.app-duo .mbk { --mbk-tilt: -24deg; --mbk-yaw: 0deg; --mbk-open: 8deg; --mbk-x: 0%; }
.app-duo .mbk__lid { --mbk-open: 8deg; }
.app-duo .mbk__screen, .app-duo .mbk__base::after { opacity: 1; }
/* Handy im Duo: absolut, rechts unten vor dem Laptop. Unter 1180 px in Prozent des Duos
   (cqw ginge auch, aber das Duo ist hier selbst der Bezugsrahmen) — bei 320 px Fenster
   288 × 0,42 ≈ 121 px, deshalb der Boden 150 px (Kartentexte des Handys sind px-fest). */
.app-duo .phone-mockup {
  position: absolute;
  right: 2%;
  top: var(--duo-phone-top);
  width: var(--duo-phone-w);
  z-index: 3;
}
/* Unter 560 px stapeln statt überlappen: das Duo ist dort ≤ 528 px breit, ein überlappendes Handy
   müsste unter 196 px (gemessen 390 px: 150 px → „78 %" und „75 km" brechen um, die Karten-Texte
   des Handys sind px-fest). Laptop oben als Bild, Handy darunter in 196–220 px. */
@media (max-width: 559px) {
  .app-duo { height: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 4vw, 24px); }
  .app-duo__laptop { position: relative; }
  .app-duo .phone-mockup { position: relative; right: auto; top: auto; width: clamp(196px, 60%, 220px); }
}
/* Das Handy schwebt leise, sobald die Section aufgedeckt ist (Muster .ws-phone, 7 s) */
@media (prefers-reduced-motion: no-preference) {
  .app-control.is-revealed .app-duo .phone-mockup {
    animation: app-duo-float 7s ease-in-out 2.6s infinite;
  }
  .app-control.is-revealed .app-duo .phone-mockup:hover { animation-play-state: paused; }
}
@keyframes app-duo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (min-width: 1180px) {
  /* Bühne 1120 × 700 (Runde 4, 18.09.): Laptop-Szene 56 % = 627 px bei left 22 % / top 2 % (Deckel
     gemessen x 284–835 / y 15–386, Basis x 243–877 bis y 557); Handy 196 px bei right 19 % / bottom 1 %
     → x 711–907 / y 279–693 in der rechten unteren Ecke der Basis, Oberkante 8 px UNTER der letzten
     Werbung-Zeile des Dashboards (y 271) — es deckt nur die leere Panel-Unterkante und die Deck-Kante.
     Herleitung: 62 % lief hinter die rechten Kacheln, right 17 % stieß 8 px an Bese-AI, bottom 4 % lag
     auf der Website-Zeile. Leitungs-Endpunkte und Entry-Flashes in app-showcase.html sind an dieser
     Geometrie GEMESSEN — nach jeder Größenänderung neu messen, nicht schätzen. */
  .app-duo {
    position: absolute;
    inset: 0;
    max-width: none;
    height: auto;
    z-index: 2;
  }
  .app-duo__laptop {
    left: 22%;
    top: 2%;
    width: 56%;
  }
  .app-duo .phone-mockup {
    right: 19%;
    top: auto;
    bottom: 1%;
    width: 196px;
  }
}
/* Das Handy ist im Duo 180–200 px breit (in der Solo-Fassung bis 260): die vw-Klammern von Kennzahl
   und Innenabständen laufen bei 1440 px sonst auf ihr Maximum, „78 %" bricht um und der Feed läuft
   aus dem Screen (gemessen bei 196 px: 74 px Überlauf). Innenmaße deshalb eine Stufe kompakter —
   alle Werte px, weil die Handy-Karten px-fest sind. */
.app-duo .phone-mockup__screen { padding: 26px 8px 12px; gap: 6px; }
.app-duo .phone-card { padding: 8px; gap: 3px; }
.app-duo .phone-card__label { font-size: 7.5px; letter-spacing: 0.06em; }
.app-duo .phone-card__trend, .app-duo .phone-card__live-pill { font-size: 7.5px; padding: 1px 6px; }
.app-duo .phone-card__pct { font-size: 14px; }
.app-duo .phone-card--hero .phone-card__value { font-size: 30px; }
.app-duo .phone-feed { margin-top: 4px; gap: 5px; }
/* Kennzahl auf dem Handy nie umbrechen: ohne JavaScript und bei reduzierter Bewegung setzt die Engine
   keine Anti-Jitter-Breite, „78 %" brach dann in der Zeile um und schob die dritte Feed-Zeile aus dem
   Screen (gemessen 1440, reduced-motion) */
.app-duo .phone-card__pct { white-space: nowrap; flex: none; }

/* ---- Laptop-Screen = Dashboard statt Bild ---- */
.mbk__screen--app {
  /* positioniert, damit .dash (inset: 0) den SCREEN füllt und nicht den Deckel samt Rahmen
     (gemessen in Runde 1: Seitenleiste auf dem Bezel, Inhalt lief unten aus dem Bild) */
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;
  overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
}
.dash {
  --dash-line: rgba(255, 255, 255, 0.07);
  --dash-card: rgba(255, 255, 255, 0.035);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 9cqw 1fr;
  font-family: var(--font-ui);
  /* Grundschrift am gemessenen Screen (≈ 475 px bei 1440 → 10,5 px; Handy-Labels liegen bei 8,5) */
  /* Boden 5 px, nicht 6,5: unter 560 px ist der Laptop ein Bild (Screen ≈ 250 px), und ein höherer
     px-Boden bricht die Proportion — gemessen 320 px: Panels aus dem Screen, Namen abgeschnitten */
  font-size: clamp(5px, 2.2cqw, 12px);
  line-height: 1.25;
  color: var(--text-100);
}
.dash svg {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* Seitenleiste: Bildmarke + sechs Bereiche */
.dash__nav {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.6cqw; padding: 2.2cqw 0;
  border-right: 1px solid var(--dash-line);
}
.dash__mark { width: 4.2cqw; aspect-ratio: 130 / 145; margin-bottom: 1.4cqw; color: var(--white); }
.dash__mark svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.dash__navitem {
  width: 5.2cqw; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 22%; color: var(--text-200);
}
.dash__navitem.is-active { background: rgba(var(--glow-rgb), 0.16); color: var(--accent-hover); }
/* feste em-Größe, KEINE Prozent: die Prozent-Höhe im Grid-Feld ist zyklisch, das <svg> fällt dann
   auf seine Standardgröße 300 × 150 zurück — gemessen 18.09.: sechs Icons à 150 px, die Seitenleiste
   995 px hoch, und über die Grid-Zeile wuchsen alle Panels mit (627 px unter dem Screen-Boden) */
.dash__navitem svg { width: 1.3em; height: 1.3em; }
/* Hauptfläche */
.dash__main { display: flex; flex-direction: column; gap: 2.1cqw; padding: 1.9cqw 2.3cqw; min-width: 0; min-height: 0; }
.dash__top { display: flex; align-items: center; justify-content: space-between; }
.dash__title { font-size: 1.25em; font-weight: var(--weight-semibold); letter-spacing: 0.01em; }
.dash__live, .dash__pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78em; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-hover); background: rgba(var(--glow-rgb), 0.14);
  border: 1px solid rgba(var(--glow-rgb), 0.22); border-radius: 999px; padding: 0.25em 0.8em;
}
.dash__live-dot {
  width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent-hover);
  box-shadow: 0 0 6px var(--accent-hover); animation: phone-status-pulse 2.2s ease-out infinite;
}
.dash__pill { margin-left: auto; font-size: 0.72em; padding: 0.2em 0.7em; }
.dash__pill--live { color: var(--accent-hover); }
/* Kennzahlen */
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.dash__kpi, .dash__panel {
  position: relative; display: flex; flex-direction: column; gap: 1cqw;
  padding: 1.7cqw 1.9cqw; border-radius: 1.6cqw; min-height: 0;
  background: linear-gradient(180deg, var(--dash-card), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--dash-line);
}
.dash__label {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 0.8em; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-200); white-space: nowrap;
}
.dash__label svg { color: var(--accent-hover); }
.dash__value { font-family: var(--font-display); font-size: 2.1em; line-height: 1; color: var(--white); }
.dash__kpi .dash__label { overflow: hidden; text-overflow: ellipsis; }
.dash__trend {
  flex: none; margin-left: auto;
  font-size: 0.78em; font-weight: var(--weight-semibold); color: var(--accent-hover);
  background: rgba(var(--glow-rgb), 0.14); border-radius: 999px; padding: 0.2em 0.7em;
}
.dash__bar {
  position: relative; display: block; height: 0.6em; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.dash__fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.dash__limit { position: absolute; top: -20%; bottom: -20%; left: 90%; width: 1px; background: rgba(255, 255, 255, 0.45); }
.dash__bar--slider { overflow: visible; }
.dash__bar--slider .dash__fill::after {
  content: ""; position: absolute; top: 50%; right: 0; width: 1.4em; height: 1.4em;
  transform: translate(50%, -50%); border-radius: 50%; background: var(--white);
  box-shadow: 0 0 0 0.25em rgba(var(--glow-rgb), 0.35);
}
/* Anrufe + Werbung */
/* Anrufe-Panel breiter (1,3 : 1), damit Name + Urteil-Pille nebeneinander passen (gemessen 1440:
   bei 1,15 : 1 wurde „Kontaktanfrage" zu „Kontaktan…"); KEIN flex: 1 — gedehnte Panels ließen unter den
   drei Zeilen die halbe Fläche leer */
.dash__panels { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.8cqw; min-height: 0; }
.dash__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9cqw; min-height: 0; }
.dash__row, .dash__way-row {
  display: grid; align-items: center; gap: 0.6em;
  padding: 0.6em 0.75em; border-radius: 0.9cqw; background: rgba(255, 255, 255, 0.025);
}
.dash__row { grid-template-columns: auto minmax(0, 1fr) auto; }
.dash__way-row { grid-template-columns: auto 7.5em minmax(0, 1fr); }
.dash__av {
  width: 2em; height: 2em; display: grid; place-items: center; border-radius: 50%;
  font-size: 0.72em; font-weight: var(--weight-semibold); letter-spacing: 0.04em;
  background: rgba(var(--glow-rgb), 0.18); color: var(--accent-hover);
}
.dash__name, .dash__name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* der Name selbst darf umbrechen: die vier anderen Seiten tragen die Kanal-Feed-Namen aus daten.json
   („Rohr- & Kanalreinigung", „Kanal-TV-Untersuchung") — gemessen 18.09. auf Plattform/Kanal/Schädlinge
   als „Rohr- & Kanalre…" abgeschnitten; zwei Zeilen passen in die Screen-Reserve (Panel-Boden −31 px) */
.dash__name { font-weight: var(--weight-semibold); white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.dash__name small { font-size: 0.78em; font-weight: 400; color: var(--text-200); margin-top: 0.1em; }   /* eine Stufe kräftiger als Text-300: gerechnet 3,8 : 1 auf der Karte, mit Text-200 8,1 : 1 (8 px) */
.dash__urteil {
  font-size: 0.68em; font-weight: var(--weight-semibold); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--surface-0); background: var(--accent-hover); border-radius: 999px; padding: 0.25em 0.6em; white-space: nowrap;
}
.dash__urteil--rueckruf { color: var(--text-200); background: rgba(255, 255, 255, 0.09); }
.dash__toggle {
  position: relative; width: 2.4em; height: 1.3em; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.dash__toggle::after {
  content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 1em; height: 1em;
  border-radius: 50%; background: var(--white);
}
.dash__toggle.is-on { background: var(--accent-hover); }
.dash__toggle.is-on::after { left: auto; right: 0.15em; }
.dash__way-row .dash__bar { align-self: center; }
/* Zeilen und Kacheln blenden gestaffelt ein, sobald die Section aufgedeckt ist */
.app-control:not(.is-revealed) .dash :is(.dash__kpi, .dash__panel, .dash__row, .dash__way-row) { opacity: 0; transform: translateY(6px); }
.dash :is(.dash__kpi, .dash__panel, .dash__row, .dash__way-row) { transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.app-control.is-revealed .dash__kpi:nth-child(2) { transition-delay: 0.1s; }
.app-control.is-revealed .dash__kpi:nth-child(3) { transition-delay: 0.2s; }
.app-control.is-revealed .dash__panel { transition-delay: 0.3s; }
.app-control.is-revealed .dash__row:nth-child(2), .app-control.is-revealed .dash__way-row:nth-child(2) { transition-delay: 0.45s; }
.app-control.is-revealed .dash__row:nth-child(3), .app-control.is-revealed .dash__way-row:nth-child(3) { transition-delay: 0.6s; }
/* Ohne JavaScript: Dashboard voll, Füllungen im Endzustand (der Laptop ist seit Runde 4 ohnehin
   statisch — keine Choreografie, die ohne Hook ausbliebe) */
@media (scripting: none) {
  /* gleiche Spezifität wie die :not(.is-revealed)-Regel (0,4,0), sonst verliert der Endzustand — gemessen */
  .app-control:not(.is-revealed) .dash :is(.dash__kpi, .dash__panel, .dash__row, .dash__way-row) { opacity: 1; transform: none; }
  .dash__fill[data-fill-to="78"] { width: 78%; }
  .dash__fill[data-fill-to="62"] { width: 62%; }
  .dash__fill[data-fill-to="72"] { width: 72%; }
  .dash__fill[data-fill-to="48"] { width: 48%; }
  .dash__fill[data-fill-to="34"] { width: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  .dash :is(.dash__kpi, .dash__panel, .dash__row, .dash__way-row) { opacity: 1; transform: none; transition: none; }
  .dash__live-dot { animation: none; }
}

/* =====================================================================
   STARTSEITE — MOBIL-OPTIMIERUNG (18.09.2026, Marie: „Die Startseite ist
   nicht mobiloptimiert … Desktop gefällt mir so, aber mobil musst du noch
   einiges verbessern … Section für Section").
   Alles unter 768 px (Ausnahmen genannt), alles .page-home-gescoped —
   Desktop und die anderen Seiten bleiben unverändert. Befund und
   Messwerte je Punkt in der Runden-Chronik (CLAUDE.md, 18.09.).
   ===================================================================== */
@media (max-width: 767px) {

  /* --- Leistungen: Karten-Text etwas weniger eingerückt ---------------
     32 px Polster in einer 356 px breiten Karte ließen nur 290 px Zeile. */
  :is(.page-home, .page-auftragsgewinnung) .lcard__text { padding: 28px 22px 30px; }


  /* --- Kanal-Kosmos: der Hub steht als Bild ZWISCHEN den Kacheln ------
     Vorher lag der gedimmte Kosmos hinter den Kacheln, und nur ein Stück
     des Rings mit „Deine Nummer" lugte durch die Lücke — das las sich als
     Darstellungsfehler. Jetzt: Kachel 01 · Hub · Kachel 02 = die Aussage
     „alles läuft auf einer Nummer zusammen" als Reihenfolge. */
  .page-home .kkos__tile { padding: 26px 22px; }   /* 24–44 px Polster ließen bei 320 px nur 230 px Zeile */
  /* Reihenfolge, Größe und Skalierung des Kosmos stehen seit Runde 2 (18.09. abends)
     im Block „MOBIL-OPTIMIERUNG, RUNDE 2" (bis 899 px, Chips wieder an) — die
     260-px-Fassung ohne Chips ist damit Historie (Guardian: gleiche Spezifität,
     Ergebnis hing nur an der Dateireihenfolge). */

  /* --- System + App: sechs Punkte als Zweier-Raster -------------------
     Einspaltig standen sie 468 px hoch untereinander. Icon über dem Text,
     damit „Auftragsanzahl" auch in 171 px Breite einzeilig bleibt. */
  /* überstimmt bewusst die ≤420-px-Einspalten-Regel: gemessen passen alle sechs Titel
     bis 320 px einzeilig („Auftragsanzahl“ 109 px Text in 111 px Platz) */
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .app-control__stage { grid-template-columns: 1fr 1fr; }   /* .page-leistungen seit 19.09.2026 (System + App läuft dort als „Unsere Methode"), .page-auftragsgewinnung seit demselben Tag (Marie: App-Section „noch alt … aktualisieren") */
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .control-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 16px;
  }
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .control-badge__icon { width: 34px; height: 34px; border-radius: 10px; }
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .control-badge__icon .icon { width: 18px; height: 18px; }
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .control-badge__title { font-size: 14px; }
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .control-badge__hint { font-size: 12px; }

  /* --- „So läuft's ab": flachere Bildfelder, kleinere Ziffern ---------
     Vier Stationen à 257 px Foto + 61 px Ziffer machten die Section
     3.450 px hoch. */
  .page-home .ns-station__card,
  .page-home .ns-station:nth-child(even) .ns-station__card,
  .page-home .ns-station:nth-child(odd) .ns-station__card {
    grid-template-rows: clamp(150px, 44vw, 200px) auto;
  }
  .page-home .ns-station__numeral,
  .page-home .ns-station:nth-child(even) .ns-station__numeral,
  .page-home .ns-station:nth-child(odd) .ns-station__numeral {
    font-size: clamp(52px, 14vw, 72px);
  }
  .page-home .ns-finale__card { grid-template-rows: clamp(180px, 50vw, 240px) auto; }
  /* Die Karte nimmt die volle Breite: Knoten und Ziffer stehen als Kopfzeile
     darüber, die Schiene läuft links zwischen den Stationen weiter. Vorher
     verloren die Karten 58 px Breite an die Knoten-Spalte (292 von 358 px). */
  .page-home .ns-station {
    margin-left: 0;
    row-gap: 10px;
  }
  .page-home .ns-station__node {
    grid-row: 1 !important;
    align-self: center;
    margin-top: 0;
  }
  .page-home .ns-station__card,
  .page-home .ns-station:nth-child(even) .ns-station__card,
  .page-home .ns-station:nth-child(odd) .ns-station__card {
    grid-column: 1 / -1 !important;
    width: 100%;
    position: relative;
    z-index: 1;
  }
}

/* Footer: zwischen 360 und 480 px zwei Link-Spalten statt einer
   (gilt site-weit — derselbe Footer; Desktop unverändert). */
@media (max-width: 480px) and (min-width: 360px) {
  .site-footer__nav-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .site-footer__col:last-child { grid-column: 1 / -1; }
}
/* System + App, Foto-Kacheln: 3 : 2 statt 4 : 3 auf dem Handy (je ~30 px flacher) */
@media (max-width: 719px) {
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .control-feature--photo .control-feature__photo { aspect-ratio: 3 / 2; }
}
/* Hero-CTA auf schmalen Handys einzeilig: bei 320 px brach „Auftragspotenzial
   berechnen" auf zwei Zeilen um (Knopf 64 statt 50 px hoch). Nur kompaktere
   Polster/Schrift — Klassen und Signature-Aufbau bleiben (§1.8). */
@media (max-width: 380px) {
  :is(.page-home, .page-auftragsgewinnung) .hero__cta:where(:not(.kanal-hero *)) {
    font-size: 14px;
    padding-left: 18px;
    padding-right: 26px;
    gap: 10px;
  }
}
@media (max-width: 339px) {
  :is(.page-home, .page-auftragsgewinnung) .hero__cta:where(:not(.kanal-hero *)) { padding-left: 14px; padding-right: 20px; }
}

/* Galerie der Karte 04 auf dem Handy: 9 statt 18 Bilder (3 × 3). Gleicher
   Breakpoint wie der 3-Spalten-Umbau der Galerie (≤ 560 px) — darüber
   läuft sie im 4 × 5-Raster mit allen 20 (Guardian 18.09.: mit 767 px
   blieben 561–767 px zwei leere Rasterzeilen stehen). */
@media (max-width: 560px) {
  .page-home .mafo__karte:nth-child(n + 10) { display: none; }
}

/* „Passt das zu dir?": das Kriterien-Panel steht seit 18.09. im DOM direkt
   nach dem Lead (endet mit „Melde dich, wenn das auf dich passt:") — Vorlese-
   und Sichtreihenfolge decken sich (WCAG 1.3.2). Die Copy-Hülle löst sich auf,
   gestapelt ergibt das Titel · Lead · Kriterien · Schlusstext · Knopf. Ab
   1024 px setzen die Areas das Panel wie vorher rechts daneben; die 1fr-Zeilen
   oben und unten zentrieren den Textstapel wie das frühere align-items. */
.fitcheck__copy { display: contents; }
.fitcheck__grid { row-gap: var(--space-5); }
.fitcheck__cta { justify-self: start; }
@media (min-width: 1024px) {
  .fitcheck__grid {
    row-gap: 0;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas:
      ".     panel"
      "title panel"
      "lead  panel"
      "note  panel"
      "cta   panel"
      ".     panel";
  }
  .fitcheck__title { grid-area: title; }
  .fitcheck__lead  { grid-area: lead;  margin-top: var(--space-5); }
  .fitcheck__note  { grid-area: note;  margin-top: var(--space-5); }
  .fitcheck__cta   { grid-area: cta;   margin-top: calc(var(--space-5) + var(--space-2)); }
  .fitcheck__panel { grid-area: panel; align-self: center; }
}
/* Das Panel ist seit dem DOM-Umzug ein Kind von .fitcheck__copy und fiele sonst unter
   deren Reveal (war vorher nie eingeblendet — seine Zeilen staffeln sich selbst).
   Note/CTA behalten ihre alten Verzögerungen (vorher Kind 3/4, jetzt 4/5). */
.fitcheck__copy > .fitcheck__panel { opacity: 1; transform: none; transition: none; }
.fitcheck__copy > .fitcheck__note { transition-delay: 0.16s; }
.fitcheck__copy > .fitcheck__cta  { transition-delay: 0.24s; }

/* =====================================================================
   STARTSEITE — MOBIL-OPTIMIERUNG, RUNDE 2 (18.09.2026 abends). Marie geht
   die Seite am Handy durch und diktiert Section für Section. Alles
   .page-home-gescoped, alles in max-width-Queries — Desktop und die
   übrigen Seiten bleiben unverändert. Befund und Messwerte je Punkt in
   der Runden-Chronik (CLAUDE.md).
   ===================================================================== */

/* --- 1 · Hero: Film wieder VOLLFLÄCHIG hinter dem Text, Text oben mit etwas Luft ---
   Runde 2a (Marie: „das Video, wo dieser Block zusammengebaut wird, unter dem Text
   und unter dem Button … viel zu großer Innenabstand, vor allem nach oben") war der
   Hero unter 1024 px kurz eine Spalte: Text oben, der Film als eigenes Bild darunter,
   Logos am Fuß. Marie zur Vorlage: „finde ich jetzt irgendwie nicht so schön … Das Video
   soll schon komplett im Hintergrund von der Hero-Section liegen. Sonst lass halt den
   Text darüber laufen … aber du kannst auch gerne wieder ein bisschen mehr Abstand
   nach oben schaffen, aber nur ein bisschen." Also: der Film liegt wieder als Vollfläche
   HINTER dem Text (Basisregeln des Blocks „Der Block", Scrim 0,74 unter 1024 px, Marke
   dort aus), der Text steht OBEN statt vertikal zentriert (das war der „viel zu große
   Innenabstand": bei 390 × 844 begann die H1 ~200 px unter der Navbar) — mit einem
   moderaten Innenabstand statt der 14 px der Spalten-Fassung. Bandhöhe bleibt als
   Innenabstand nach unten reserviert (767er-Regel oben in der Datei). */
@media (max-width: 1023px) {
  .page-home .hero:where(:not(.kanal-hero)) {
    align-items: flex-start;
    padding-top: clamp(40px, 9vw, 64px);
  }
  /* Textspalte kompakter: Lead → Vertrauenszeile → Knopf ohne die Desktop-Luft */
  :is(.page-home, .page-auftragsgewinnung) .hero__lead:where(:not(.kanal-hero *)) { margin-bottom: clamp(16px, 4vw, 24px); }
  :is(.page-home, .page-auftragsgewinnung) .hero__trust:where(:not(.kanal-hero *)) { gap: 12px 24px; }
  :is(.page-home, .page-auftragsgewinnung) .hero__cta:where(:not(.kanal-hero *)) { margin-top: clamp(16px, 4vw, 24px); }
}
/* Logos im Band enger, damit mehr Betriebe ins Bild passen (Marie: „die Abstände
   zwischen den Logos reduzieren, sodass man mehr Logos sieht") */
@media (max-width: 767px) {
  .page-home .hero-band .hero-logos__track { gap: 26px; }
  .page-home .hero-band .hero-logos__track img { max-width: 120px; }
}

/* --- 1c · Hero am Handy NICHT mehr bildschirmhoch, sondern am Inhalt abgeschnitten ---
   Marie 19.09. (Screenshot mit fünf roten Kreisen unter dem Knopf): „Mobil darfst du
   die Hero-Section bei der Startseite gerne so abschneiden, bis dahin, und das, wo ich
   die roten Kreise gezeichnet habe, da dürfen dann die Logos noch her sliden."
   Bis hierher galt „Hero + Logo-Band = ein Bildschirm" (`min-height: 100svh − 73px`):
   bei 390 × 844 lagen 171 px leerer Film zwischen Knopf und Band, auf höheren Handys
   entsprechend mehr. Jetzt hat der Hero unter 768 px keine Mindesthöhe mehr — er ist
   Textspalte + ein Stück Film (der Block bleibt unter dem Knopf sichtbar) + Logo-Band
   am Fuß. Der Film liegt weiter als Vollfläche dahinter; `cover` beschneidet ihn auf
   die kürzere Bühne, der Block bleibt im Bild (`object-position: 75%`, Block bei
   56–83 % der Filmbreite). Das Band legt sich wie bisher per negativem Abstand über
   den Hero-Fuß (`--hero-band-h` = 96 px), der Hero reserviert diese Höhe zuzüglich
   der Film-Luft darüber als Innenabstand nach unten. Film-Luft `clamp(64px, 25vw,
   112px)` = Maries Zeichnung, gemessen an ihrem Screenshot (Kreismitte ≈ 160 px unter
   dem Knopf → Band-Oberkante ≈ 112 px unter dem Knopf bei ~440 px Fensterbreite).
   Tablets (768–1023 px) bleiben bildschirmhoch — Marie sagte „mobil". */
@media (max-width: 767px) {
  .page-home .hero:where(:not(.kanal-hero)) {
    min-height: 0;
    padding-bottom: calc(var(--hero-band-h, 96px) + clamp(64px, 25vw, 112px));
  }
}

/* --- 1b · Überschriften mobil größer (SITE-WEIT, Marie: „generell … die sind irgendwie
   sehr klein. Speziell jetzt H1 und H2") ---
   Bis 767 px lag die H2 auf dem Token-Boden 1,65 rem = 26,4 px (5,6 vw greifen erst ab
   472 px), die Hero-H1 per 767er-Regel auf 8,5 vw = 33 px bei 390. Jetzt H2 ≥ 1,9 rem
   (390 px: 32 px), H1 ≥ 2,1 rem und 10 vw (390 px: 39 px, 320 px: 33,6 px). Der H3-Token
   bleibt (24 px Boden). Gilt für alle Seiten — dieselben Tokens, dieselbe Hero-Regel. */
@media (max-width: 767px) {
  /* Deckel 2,6 rem = 41,6 px: die Basisformel steht bei 768 px auf 43 px — mit 4 rem als
     Deckel lief die Mobil-Formel bei 767 px auf 62,9 px und sprang an der Kante um 20 px
     zurück (Guardian-Blocker, §1.5 „nicht starr per Breakpoint springen"). Ab 507 px greift
     der Deckel, die Kante ist damit +1,4 px in die richtige Richtung. */
  :root { --text-h2: clamp(1.9rem, 8.2vw, 2.6rem); }
  .hero__headline { font-size: clamp(2.1rem, 10vw, 2.9rem); }   /* 767: 46,4 → 768 (Token): 55,3 — wächst */
}

/* --- 2 · System-Kreis: dieselbe Animation HOCHKANT statt der Stationen-Liste ---
   Marie: „Die Vogelperspektive sagt mir viel zu wenig aus. Kannst du nicht die
   Animation, die du auf Desktop gebaut hast, hochkant aufbauen für Mobil?"
   Zweite Bühne .skreis__stage--mobil (seit Runde 6c, 19.09.: viewBox 360 × 768,
   EINSPALTIG — der Block oben in voller Breite, die Wege laufen rechts hinunter
   in den Anruf, Auftrag → Folgeauftrag darunter, Rücklauf links hoch in die
   Schiene; davor: Platten links, Anruf rechts daneben). Gleiche Klassen,
   gleiche Tokens, gleiche 10-s-Zeitachse. Die Liste .skreis__mobil ist raus. */
.skreis__stage.skreis__stage--mobil {
  display: block;
  aspect-ratio: 360 / 768;   /* Runde 6e: einspaltig, ohne Vergleichszeilen (950 → 768) */
  border-radius: var(--radius-lg);
  /* Auf Tablets nicht mitwachsen: bei 768–1023 px würde die Hochkant-Bühne sonst
     1.800–2.100 px hoch (gemessen). Deckel 520 px, mittig — die Schrift bleibt
     im 1:1-Maßstab von 390 px bis 520 px lesbar. */
  max-width: 520px;
  margin-inline: auto;
}
@media (min-width: 1024px) { .skreis__stage.skreis__stage--mobil { display: none; } }
/* Schriftskala der Hochkant-Bühne (viewBox 360 = 1:1 bei 390 px Fenster) */
.skreis__svg--mobil .skreis__big   { font-size: 36px; }
.skreis__svg--mobil .skreis__cap,
.skreis__svg--mobil .skreis__capc  { font-size: 11px; letter-spacing: 2px; }
.skreis__svg--mobil .skreis__lbl   { font-size: 15px; }
.skreis__svg--mobil .skreis__pltl  { font-size: 13px; }
.skreis__svg--mobil .skreis__pilll { font-size: 11px; }
.skreis__svg--mobil .skreis__head  { r: 2.5px; }
@media (max-width: 1023px) {
  :is(.page-home, .page-leistungen) .skreis__field {
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 50%, #000 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 78% 62% at 50% 50%, #000 20%, transparent 80%);
  }
  /* Runde 6: die Platten fahren auch hier senkrecht zusammen (Basisregel), nur enger */
  :is(.page-home, .page-leistungen) .skreis__plate { transform: translateY(calc((var(--i, 0) - 2.5) * 16px)); }
  :is(.page-home, .page-leistungen) .skreis.is-revealed .skreis__plate { transform: none; }
}

/* --- 4 · Überschriften: kein Breitendeckel auf den gestapelten Karten ---
   Marie: „überprüfe, ob du Überschriften nicht unnötig umgebrochen hast."
   Gemessen (390 px, 35 Überschriften): einzige unnötige Zeile war „Ganz oben,
   wenn jemand sucht: bei Google und in der KI." — drei Zeilen wegen der
   22ch-Deckelung der Karten-Titel, zwei ohne. Unter 1024 px steht die Karte
   einspaltig, der Deckel hat dort keine Aufgabe. Am Tablet (768–1023) brach
   die H1 im Bindestrich („Kanalservice-" / „Betriebe") — das Kompositum
   bleibt per .hero__nb zusammen. */
@media (max-width: 1023px) {
  :is(.page-home, .page-auftragsgewinnung) .lcard__title { max-width: none; }
  .page-home .hero__nb:where(:not(.kanal-hero *)) { white-space: nowrap; }
}

/* --- 3 · Leistungs-Karte 01: die zwei Kalender ÜBEREINANDER, lesbar ---
   Marie: „man soll die Aufträge im Kalender sehen … jetzt nur schwarze Kacheln …
   die Kacheln übereinander anzeigen lassen, sodass man alles gut lesen kann."
   Unter 560 px standen beide Blätter nebeneinander in 45 % Bühnenbreite, ihre
   Schrift war 3–5 px und deshalb ausgeblendet. Jetzt: der Rahmen wird ein
   Stapel im Fluss, jedes Blatt bekommt die volle Breite und wird per `zoom`
   proportional vergrößert (alle cqw-Maße skalieren mit, Schrift wird lesbar). */
@media (max-width: 559px) {
  :is(.page-home, .page-auftragsgewinnung) .kal-stage .lstage__box {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 14px 6px;
    overflow: visible;
  }
  :is(.page-home, .page-auftragsgewinnung) .kal {
    zoom: 2.05;       /* Prozentbreiten rechnen im gezoomten Raum gegen den Elternkasten → 100 % = volle Blattbreite (gemessen) */
    width: 100%;
  }
  /* Schmale Geometrie: die Blätter sind in ihrem eigenen (ungezoomten) Raum nur ~45 cqw breit,
     dort gelten die Spalten und Zeilen der Runde 4 (Basis ist seit Runde 5 die breite, flache Fassung).
     Vormittag 7–12 Uhr = 10 Zeilen, Sanierungs-Monatszeilen 4,3 cqw mit vollen Balken. */
  :is(.page-home, .page-auftragsgewinnung) .kal__monat, :is(.page-home, .page-auftragsgewinnung) .kal__zahl { font-size: 1.5cqw; }
  :is(.page-home, .page-auftragsgewinnung) .kal__cap { font-size: 1.05cqw; }
  :is(.page-home, .page-auftragsgewinnung) .kal__spur { width: 12cqw; }
  :is(.page-home, .page-auftragsgewinnung) .kd__grid { grid-template-columns: 2.4cqw repeat(5, minmax(0, 1fr)); grid-template-rows: 3.4cqw repeat(10, 2.58cqw); }
  :is(.page-home, .page-auftragsgewinnung) .kd__wd { gap: 0.4cqw; padding-left: 0.4cqw; }
  :is(.page-home, .page-auftragsgewinnung) .kd__wd b { font-size: 1.6cqw; }
  :is(.page-home, .page-auftragsgewinnung) .ks__grid {
    grid-template-columns: 5.2cqw repeat(30, minmax(0, 1fr));
    grid-template-rows: 2.7cqw repeat(6, 4.3cqw);
    background: linear-gradient(90deg, transparent 5.2cqw, rgba(255, 255, 255, 0.025) 5.2cqw) 0 0 / 100% 100% no-repeat;
  }
  /* Schrift der Blätter eine Stufe größer: die Spalten sind jetzt doppelt so breit wie nebeneinander */
  :is(.page-home, .page-auftragsgewinnung) .kd__ev, :is(.page-home, .page-auftragsgewinnung) .ks__blk { font-size: 1.1cqw; padding-inline: 0.3cqw; }   /* 1,32 schnitt „TV-Inspektion“ am Chiprand (gemessen 390); 1,22 schnitt „Hausanschluss“ (Balken) und „Dichtheits-“ (320/375) ab — seit 19.09. 1,1 (Messung 320–480) */
  :is(.page-home, .page-auftragsgewinnung) .kd__wd, :is(.page-home, .page-auftragsgewinnung) .ks__mon { font-size: 1.1cqw; }
  :is(.page-home, .page-auftragsgewinnung) .kd__h { font-size: 1.15cqw; margin-top: -0.55cqw; }
  :is(.page-home, .page-auftragsgewinnung) .kal__marke { font-size: 1.25cqw; }
  /* Schrift nur dort wieder sichtbar, wo `zoom` sie auch vergrößert (Firefox erst ab 126) —
     ohne zoom bliebe sie ~4 px und stünde als illegibler Text da; dann gilt der alte
     Zustand „Chips tragen die Aussage allein" (color: transparent) weiter. */
  @supports (zoom: 1) {
    :is(.page-home, .page-auftragsgewinnung) .kd__ev, :is(.page-home, .page-auftragsgewinnung) .ks__blk { color: #FFFFFF; }
    :is(.page-home, .page-auftragsgewinnung) :is(.kd__wd, .kd__h, .ks__mon, .kal__marke) { color: rgba(255, 255, 255, 0.62); }   /* Runde 6: dunkle Blätter */
    :is(.page-home, .page-auftragsgewinnung) .kd__wd b { color: #FFFFFF; }
  }
  :is(.page-home, .page-auftragsgewinnung) .kal-stage { overflow: hidden; }   /* die zoom-Blätter mit ihrem Schatten bleiben in der Bühne */
  :is(.page-home, .page-auftragsgewinnung) .kal-stage__hinweis { margin-top: 8px; }
}

/* --- 5 · Kanal-Kosmos: Abstände enger, die Chips kreisen wieder um „Deine Nummer" ---
   Marie: „die Abstände sind irgendwie komisch … zu groß" + „die ganzen kleinen
   Begriffe, die um ‚Deine Nummer' kreisen, hier mobil auch wieder hinzufügen."
   Der Kosmos wird in seiner Desktop-Geometrie (520 px, drei Ringe, 13 Chips)
   gerendert und per transform auf die Fensterbreite skaliert — so bleiben die
   Ringabstände und damit die Chip-Abstände die abgenommenen; der Layout-Kasten
   wird über negative Ränder auf die sichtbare Größe gebracht. Skalierung als
   Stufenleiter (GERECHNET: äußerster Chip r 200 + halbe Chipbreite 110 = 310 logisch,
   × Faktor ≤ halbe Fensterbreite). */
@media (max-width: 899px) {
  .page-home .kkos__header { margin-bottom: 18px; row-gap: 0; }   /* der geteilte .section-header trägt 24 px row-gap — mit Titel-Rand und Sub-Rand waren es 40 px (gemessen) */
  .page-home .kkos__title { margin-bottom: 10px; }
  .page-home .kkos__sub { margin-top: 6px; }
  .page-home .kkos__stage { padding-block: 0; gap: 18px; overflow-x: clip; }
  .page-home .kk-chip { display: block; }
  /* Reihenfolge Kachel 01 · Kosmos · Kachel 02 gilt jetzt bis 899 px (bis dahin nur
     unter 768; zwischen 768 und 899 stand der Kosmos absolut hinter den Kacheln und
     ragte — mit scale statt translate — rechts aus dem Fenster, gemessen 768: 3 Chips) */
  .page-home .kkos__tile { order: 1; }
  .page-home .kkos__tile--right { order: 3; }
  .page-home .kk-cosmos {
    position: relative;
    left: auto;
    top: auto;
    order: 2;
    align-self: center;
    --cosmos-size: 520px;
    --kk-ms: 0.72;
    width: 520px;
    height: 520px;
    flex: none;
    transform: scale(var(--kk-ms));
    transform-origin: 50% 50%;
    margin-block: calc(-520px * (1 - var(--kk-ms)) / 2);
  }
  .page-home .kkos.is-revealed .kk-cosmos { opacity: 1; }
  .page-home .kk-chip__inner { font-size: 13px; padding: 7px 12px; gap: 6px; }
  .page-home .kk-chip__glyph .icon { width: 15px; height: 15px; }
  .page-home .kk-cosmos__hub { width: 158px; }
}
@media (max-width: 420px) { .page-home .kk-cosmos { --kk-ms: 0.66; } }
@media (max-width: 399px) { .page-home .kk-cosmos { --kk-ms: 0.62; } }
@media (max-width: 369px) { .page-home .kk-cosmos { --kk-ms: 0.56; } }
@media (max-width: 339px) { .page-home .kk-cosmos { --kk-ms: 0.50; } }

/* --- 6 · Unsere Methode: Handy klein und ÜBER dem MacBook, proportional wie am Desktop ---
   Marie: „das Handy über das MacBook wieder machen … sodass sich das ein bisschen
   überlappt, aber alles proportional zueinander ist … so ist das Handy viel zu groß."
   Unter 560 px stand das Handy in 196–220 px UNTER dem Laptop (Runde 3: dort passt
   der px-feste Handy-Inhalt nicht unter 196 px). Jetzt bleibt es 196 px breit und
   wird per `scale` verkleinert (Inhalt proportional, wie ein Bild) — an der Ecke der
   Laptop-Basis wie in der Tablet-Fassung. Faktor so, dass Handy : Laptop ≈ 0,31 wie
   ab 1180 px (196 : 627). Das Schweben (translateY) läuft auf `transform`, `scale`
   ist eine eigene Eigenschaft — kein Konflikt. */
@media (max-width: 559px) {
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .app-duo {   /* .page-leistungen + .page-auftragsgewinnung seit 19.09.2026 */
    --duo-ms: 0.66;
    --duo-phone-w: calc(196px * var(--duo-ms));
    /* GEMESSEN bei 390 px: die letzte Werbung-Zeile des Dashboards endet bei 46 % der
       Duo-Breite (Laptop hier 100 % statt 92 % breit) — 42 % lag AUF der Website-Zeile */
    --duo-phone-top: calc(0.485 * var(--duo-w));
    display: block;
    height: calc(var(--duo-phone-top) + var(--duo-phone-w) * 19 / 9);
  }
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .app-duo__laptop { position: absolute; }
  :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .app-duo .phone-mockup {
    position: absolute;
    right: 2%;
    top: var(--duo-phone-top);
    width: 196px;
    scale: var(--duo-ms);
    transform-origin: top right;
  }
}
@media (max-width: 479px) { :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .app-duo { --duo-ms: 0.60; } }
@media (max-width: 419px) { :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .app-duo { --duo-ms: 0.56; } }
@media (max-width: 359px) { :is(.page-home, .page-leistungen, .page-auftragsgewinnung, .page-schaedlingsbekaempfung) .app-duo { --duo-ms: 0.50; } }

/* --- 7 · „So läuft's ab": keine Bilder auf dem Handy (Marie: „die Bilder bitte mobil rausnehmen") --- */
@media (max-width: 767px) {
  .page-home .ns-station__media,
  .page-home .ns-finale__media { display: none; }
  .page-home .ns-station__card,
  .page-home .ns-station:nth-child(even) .ns-station__card,
  .page-home .ns-station:nth-child(odd) .ns-station__card { grid-template-rows: auto; }
  .page-home .ns-station__body,
  .page-home .ns-station:nth-child(even) .ns-station__body { grid-row: 1 !important; }
  .page-home .ns-finale__card { grid-template-columns: 1fr; grid-template-rows: auto; }
}


/* =============================================================================
   SCHÄDLINGSBEKÄMPFUNG — S4 „Wir wissen, wonach deine Kunden wirklich suchen."
   Fassung 2 „Die Suche" (.sfok / .sfs) · 2026-09-19
   -----------------------------------------------------------------------------
   Marie: „Die sieht doch nicht gut aus. Irgendwie ist auch zu viel Text. Du
   kannst dich auch gerne bei Sections von der Startseite orientieren."
   → EINE dunkle Karte im Material der Startseiten-Leistungs-Karten (.lcard:
   CI Solid Card dunkel / Charcoal-Familie hell, Raster + Schimmer, §5a
   „dunkle Karten auf hellem Band", 17.09.), eigene Klassen, weil .lcard die
   Stapel-Mechanik (sticky, --stk, nth-child) mitbringt. Links Copy, rechts
   die Bühne „Die Suche": Google-Suchfeld, in dem die vier Branchen-Suchen
   nacheinander getippt werden, Vorschlags-Zeilen, darüber die Lese-Karte
   „Bese-AI liest mit". Zeitachse 16 s = 4 × 4 s (Marie-Regel „Wechsel-Bühnen
   schnell takten"); die Phase steckt in NEGATIVEN animation-delays auf
   IDENTISCHEN, loopenden Keyframes (kein Delay läuft über eine Rundengrenze,
   Lehre 18.09.). ⚠ Ein negativer Delay schiebt die Phase VOR, nicht zurück:
   Element i soll bei i·4 s dran sein, also delay = (i − 4)·4 s (gemessen —
   mit −i·4 s lief die Reihe 0 · 3 · 2 · 1). Vor .is-revealed, ohne JS und bei reduced-motion: Standbild
   (Suche 1 getippt, Zeile 1 markiert, Lesung 1 sichtbar) — die Basisregeln
   SIND das Standbild, die Animation kommt nur mit .is-revealed dazu.
   Genre-Farben der Google-Bühne wie .gse (§5a, Präzedenz Sektion 15).
   Nur diese Seite (.page-schaedlingsbekaempfung), Band = MIST-Grau wie die
   abgelöste .kspez-Fassung (Rhythmus unverändert: Reviews(D) · S4(G) · RA(D)).
   ============================================================================= */

.sfok {
  position: relative;
  padding-block: var(--section-py);
  /* Karten-Material, Dark-Theme = CI Solid Card (Surface 3 → 2 → 1) wie .lsys */
  --sf-a: #192939;
  --sf-b: #131F2B;
  --sf-c: #0C141C;
  --sb-a: #131F2B;                                      /* Bühnenfläche: eine Stufe tiefer als die Karte */
  --sb-b: #0C141C;
}
/* Light: Charcoal-Familie (§5a, 03.08.) + graues Band nur auf dieser Seite */
html[data-theme="light"] .sfok {
  --sf-a: #26282C;
  --sf-b: #1F2226;
  --sf-c: #1B1D20;
  --sb-a: #1B1D20;
  --sb-b: #131518;
}
html[data-theme="light"] .page-schaedlingsbekaempfung .sfok {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}

/* --- Karte = Karten-Dunkel-Insel (lokales Dark-Token-Paket, 04a) ----------- */
.sfok__card {
  --heading-color: var(--white);
  --text-100: rgba(255, 255, 255, 0.85);
  --text-200: rgba(255, 255, 255, 0.65);
  --text-300: rgba(255, 255, 255, 0.40);
  --em-grad-a: #B3CCDF;                                 /* HART (Light biegt --silver-blue auf #44627C um, Lehre 17.09.) */
  --em-grad-b: #4DA8DA;
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --shadow-rgb: 0, 0, 0;
  --glass-border: rgba(255, 255, 255, 0.08);
  --akz: #4DA8DA;
  --akz-rgb: 77, 168, 218;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  color: var(--text-100);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);                      /* große Karte (CI Sektion 06) */
  /* KEIN overflow: hidden — die Karte trägt die H2 (§1.6). Die Bühne clippt sich selbst. */
  background:
    radial-gradient(ellipse 74% 72% at 12% -8%, rgba(var(--glow-rgb), 0.11) 0%, transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--sf-a) 0%, var(--sf-b) 52%, var(--sf-c) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25),
    0 4px 24px rgba(0, 0, 0, 0.30);
}

/* --- Textspalte (Anatomie der .lcard__text) -------------------------------- */
.sfok__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(32px, 3.6vw, 64px);
}
.sfok__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;                                /* CI-Caption (Sektion 05) */
  text-transform: uppercase;
  color: var(--text-200);                               /* Text-Rampe statt Markenblau: auf Dunkel ~2,3:1 (Präzedenz .lcard__tag) */
}
.sfok__facet {
  flex: none;
  display: block;
  width: 30px;                                          /* Kapitel-Zeichen vor Überschriften (CI 13, Regel 9: 24–30 px) */
  filter: drop-shadow(0 8px 18px rgba(var(--glow-rgb), 0.28));
}
.sfok__facet svg { display: block; width: 100%; height: auto; }
.sfok__title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  hyphens: manual;
  overflow-wrap: break-word;
  padding-right: 0.08em;                                /* CI 05: negatives Tracking am Zeilenende */
}
.sfok__title em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));   /* senkrecht (CI 05) */
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  white-space: normal;
  padding-inline: 0.08em; padding-block-end: 0.12em;
  margin-inline: -0.04em; margin-block-end: -0.12em;
}
.sfok__lead {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--text-200);
}
.sfok__lead b { color: var(--white); font-weight: var(--weight-semibold); }
.sfok__zusagen {
  display: flex; flex-direction: column; gap: var(--space-4);
  width: 100%; max-width: 46ch;
  margin: var(--space-6) 0 0; padding: var(--space-5) 0 0;
  border-top: 1px solid var(--glass-border);
  list-style: none;
}
.sfok__zusagen li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-body); line-height: 1.5; color: var(--text-200); }
.sfok__zusagen b  { color: var(--white); font-weight: var(--weight-semibold); }
.sfok__check {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; margin-top: 1px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--white);
}
.sfok__check .icon { width: 16px; height: 16px; }

/* --- Bühne (Anatomie der .lcard__stage / .lstage__box) --------------------- */
.sfok__stage {
  position: relative;
  container-type: inline-size;
  align-self: stretch;                                  /* füllt die Karte; ohne stretch behandelt das Grid das Kind wie start (Lehre 17.09.) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(ellipse 70% 60% at 30% 10%, rgba(255, 255, 255, 0.07) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--sb-a) 0%, var(--sb-b) 100%);
}
/* Der Rahmen: die zwei Panels stehen IM FLUSS und zentrieren sich vertikal —
   so hängt nichts an geschätzten Höhen. Ab 1024 px füllt der Rahmen die ganze
   Bühne (die Textspalte gibt die Kartenhöhe vor, gemessen 711 px bei 1440 zu
   591 px Rahmen mit 760:620 — der Rest war Leerfläche); darunter, gestapelt,
   gibt das Seitenverhältnis 760:620 die Höhe vor, und wächst der Inhalt
   darüber hinaus, wächst der Rahmen mit (aspect-ratio ist nur die
   Vorzugshöhe). 1em der Kinder = 1,45cqw ≈ 10,5 px bei 726 px Bühne (1440). */
.sfs__box {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3em 3em;
  overflow: hidden;
}
.sfs__box > * { font-size: 1.45cqw; }
@media (max-width: 1023px) {
  .sfs__box { flex: none; aspect-ratio: 760 / 620; margin-block: auto; }
}
.sfs__hinweis { flex: none; margin: 0 3em; padding-bottom: 1.4em; font-size: max(1.45cqw, 11px); line-height: 1.35; color: rgba(255, 255, 255, 0.46); }   /* darf umbrechen: mit dem Beispiel-Zusatz lief die Zeile bei 561 und 1024 px aus der Bühne (gemessen) */

/* Google-Panel (Genre-Farben wie .gse: Text #202124, Metatext #5f6368, Lupe
   #9aa0a6, Mikro-Ring #4285F4 — §5a, Präzedenz Sektion 15) */
.sfs__serp {
  position: relative;
  z-index: 1;
  margin-right: 7em;
  padding: 1.8em 1.6em 1.2em;
  border-radius: 1.4em;
  background: #FFFFFF;
  color: #202124;
  box-shadow: 0 3em 5em -2.6em rgba(var(--shadow-rgb), 0.85), 0 0 0 1px rgba(var(--shadow-rgb), 0.35);
}
.sfs__such {
  display: flex; align-items: center; gap: 1.1em;
  height: 4.4em; padding: 0 1.6em;
  border-radius: var(--radius-full);
  box-shadow: 0 0.1em 0.6em rgba(32, 33, 36, 0.28);
}
.sfs__lupe { flex: none; width: 1.7em; height: 1.7em; color: #9aa0a6; }
.sfs__mic  { flex: none; width: 1.5em; height: 1.5em; border-radius: var(--radius-full); border: 0.22em solid #4285F4; box-sizing: border-box; }
.sfs__feld { position: relative; flex: 1; height: 1.4em; font-size: 1.55em; line-height: 1.4; }
/* Die vier Suchen liegen übereinander; getippt wird über max-width in
   Schritten (steps(26) ≈ typische Zeichenzahl, nicht exakt je Wort), der Cursor ist der rechte Rand der geclippten
   Box und wandert deshalb mit dem Textende (Kunstgriff statt Pseudo-Element,
   das mitgeclippt würde). --w je Suche ≈ natürliche Breite, damit die Schritte
   den Zeichen entsprechen; breiter als der Text wird die Box nie. */
.sfs__q {
  position: absolute; left: 0; top: 0;
  display: inline-block;
  max-width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #202124;
  border-right: 0.12em solid #202124;
  padding-right: 0.08em;
  opacity: 0;
}
.sfs__q:first-child { opacity: 1; }                     /* Standbild: Suche 1 fertig getippt */

.sfs__list { list-style: none; margin: 1em 0 0; padding: 0; }
.sfs__row {
  display: flex; align-items: center; gap: 1.2em;
  margin-top: 0.3em; padding: 0.85em 1.3em;
  border-radius: 0.9em;
  font-size: 1.4em; line-height: 1.3; color: #202124;
  background: transparent;
  box-shadow: inset 0 0 0 0 transparent;
}
.sfs__row .sfs__lupe { width: 1.2em; height: 1.2em; }
.sfs__row b { font-weight: var(--weight-semibold); }
.sfs__row small { margin-left: auto; font-size: 0.78em; color: #5f6368; white-space: nowrap; }   /* derselbe Grauton wie .gse__fav--grau/.gse__bsp */
.sfs__row:first-child { background: rgba(var(--akz-rgb), 0.08); box-shadow: inset 0 0 0 0.14em var(--akz); }   /* Standbild: Zeile 1 markiert */

/* Lese-Karte „Bese-AI liest mit" — dunkles, DECKENDES Glas auf der Bühne
   (Weiß-Schleier über der Bühnenfläche; kein Navy, Marie: „Blau nur Akzent"),
   überlappt den Fuß des Google-Panels. */
.sfs__lese {
  position: relative;
  z-index: 2;
  margin: -2.2em 0 0 8em;
  border-radius: 1.4em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    var(--sb-b);
  box-shadow: 0 2.6em 4.6em -2.2em rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}
.sfs__lese-bar {
  display: flex; align-items: center; gap: 0.9em;
  padding: 1.3em 1.7em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sfs__dot {
  flex: none; width: 0.8em; height: 0.8em; border-radius: var(--radius-full);
  background: var(--akz); box-shadow: 0 0 0.9em var(--akz);
}
.sfs__lese-title { font-size: 1.3em; font-weight: var(--weight-semibold); color: var(--white); }
.sfs__lese-tag { margin-left: auto; font-size: 1em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.sfs__lese-body { position: relative; height: 17em; }   /* Platz für zweizeilige Lesungen + Urteil (gemessen: 15,6 em ließ „anruft.“ auf die Pille laufen) */
.sfs__lesung {
  position: absolute; inset: 1.5em 1.7em 1.6em;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(0.6em);
}
.sfs__lesung:first-child { opacity: 1; transform: none; }   /* Standbild: Lesung 1 */
.sfs__lesung dl { display: flex; flex-direction: column; gap: 1.1em; margin: 0; }
.sfs__lesung dt { margin: 0 0 0.25em; font-size: 0.95em; font-weight: var(--weight-bold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sfs__lesung dd { margin: 0; font-size: 1.45em; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }
.sfs__urteil {
  display: inline-flex; align-self: flex-start;
  margin-top: auto;
  padding: 0.5em 1.1em;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-size: 0.95em; font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); white-space: nowrap;
}
.sfs__urteil--hot { background: var(--akz); box-shadow: none; color: #0C141C; }   /* der EINE Akzent: hinter dieser Suche steckt der Vertrag */

/* --- Zeitachse: 16 s Schleife, 4 s je Suche, Phase = negativer Delay ------ */
.sfok.is-revealed .sfs__q {
  animation: sfs-type 16s steps(26, end) infinite, sfs-caret 1.05s steps(1, end) infinite;
  animation-delay: calc((var(--i) - 4) * 4s), 0s;
}
.sfok.is-revealed .sfs__row    { animation: sfs-row  16s var(--ease) infinite; animation-delay: calc((var(--i) - 4) * 4s); }
.sfok.is-revealed .sfs__lesung { animation: sfs-lese 16s var(--ease) infinite; animation-delay: calc((var(--i) - 4) * 4s); }
.sfok.is-revealed .sfs__dot    { animation: sfs-dot 2.4s ease-in-out infinite; }
/* Tippen: 0–7 % (≈ 1,1 s) in Zeichen-Schritten, dann steht die Suche bis 24,5 %, dann weg */
@keyframes sfs-type {
  0%     { opacity: 1; max-width: 0; }
  7%     { opacity: 1; max-width: var(--w); }
  24.4%  { opacity: 1; max-width: var(--w); }
  24.5%  { opacity: 0; max-width: var(--w); }
  99.9%  { opacity: 0; max-width: 0; }
  100%   { opacity: 1; max-width: 0; }
}
@keyframes sfs-caret { 0%, 100% { border-color: #202124; } 50% { border-color: transparent; } }
/* Zeile leuchtet, sobald die Suche fertig getippt ist (7 %), bis zum Wechsel */
@keyframes sfs-row {
  0%, 6.5% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
  8.5%     { background: rgba(var(--akz-rgb), 0.08); box-shadow: inset 0 0 0 0.14em var(--akz); }
  24%      { background: rgba(var(--akz-rgb), 0.08); box-shadow: inset 0 0 0 0.14em var(--akz); }
  26%, 100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}
/* Lesung kommt kurz nach dem Tippen (9 %) und BLEIBT, bis die nächste da ist (35 %) —
   so steht die Karte nie leer; das Fenster überlappt bewusst die Rundengrenze
   der nächsten Suche (identische Keyframes, verschobene Phase). */
@keyframes sfs-lese {
  0%, 8%  { opacity: 0; transform: translateY(0.6em); }
  10%     { opacity: 1; transform: translateY(0); }
  33%     { opacity: 1; transform: translateY(0); }
  35%, 100% { opacity: 0; transform: translateY(-0.4em); }
}
@keyframes sfs-dot { 0%, 100% { box-shadow: 0 0 0.6em var(--akz); } 50% { box-shadow: 0 0 1.4em var(--akz); } }

/* Reduced Motion: das Standbild (Basisregeln) — keine Animation, kein Cursor-Blinken */
@media (prefers-reduced-motion: reduce) {
  .sfok.is-revealed .sfs__q,
  .sfok.is-revealed .sfs__row,
  .sfok.is-revealed .sfs__lesung,
  .sfok.is-revealed .sfs__dot { animation: none; }
  .sfs__q { border-right-color: transparent; }
}

/* --- Responsivität (320–2560, §1.5) --------------------------------------- */
@media (max-width: 1023px) {
  .sfok__card { grid-template-columns: 1fr; }
  .sfok__stage { order: -1; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; }
  .sfok__title { max-width: 22ch; }
  .sfok__lead, .sfok__zusagen { max-width: 60ch; }
}
@media (max-width: 560px) {
  .sfs__hinweis { white-space: normal; margin-inline: 12px; padding-bottom: 12px; line-height: 1.35; }
  /* Auf dem Handy nutzen die Panels die Bühne voller: größere Grundschrift
     (1,75cqw ≈ 6,2 px bei 356 px Bühne statt 5,2), engere Ränder — der Rahmen
     wächst mit dem Inhalt über sein Seitenverhältnis hinaus (gemessen 320–560). */
  .sfs__box { padding: 2.2em 1.6em; }
  .sfs__box > * { font-size: 1.75cqw; }
  .sfs__serp { margin-right: 2.4em; }
  .sfs__lese { margin-left: 2.4em; }
  .sfs__lese-tag { display: none; }                    /* ~5 px klein — die Zeile trägt sonst nichts */
}

/* =====================================================================
   KANALSERVICE im Startseiten-Aufbau (19.09.2026)
   /branchen/kanalservice/ trägt `page-home page-kanal-start` (Startseiten-
   Aufbau), behält aber ihren EIGENEN Hero `.kanal-hero` (Marie: „die
   Hero-Section … sollte schon so bleiben, wie sie vorher war"). Damit die
   Startseiten-Hero-Regeln dort nicht durchgreifen (Hero-Höhe/Abstände mobil,
   Lead-Breite 60ch, CTA-Abstand, Stapelebene), tragen alle
   `.page-home .hero…`-Selektoren ein `:where(:not(.kanal-hero))` bzw.
   `:where(:not(.kanal-hero *))` — `:where()` zählt NICHT zur Spezifität,
   die Startseite rechnet also exakt wie vorher. Die Kanal-Hero-Regeln hängen
   an `:is(.page-kanalservice, .page-kanal-start)`. Wer eine neue
   `.page-home .hero…`-Regel schreibt, hängt denselben Ausschluss an —
   sonst greift sie auf den Kanal-Hero durch.
   ===================================================================== */

/* ===========================================================================
   LEISTUNGEN-HUB, RUNDE 2 — sechs Foto-Karten + Abschlussleiste (19.09.2026)
   NUR /leistungen/ (section-leistungen-hub.html). Marie: „nicht hochwertig
   genug … alles ist in Kacheln und die 06 ist dann so voll groß … vielleicht
   fehlt da ja auch noch irgendwas." Statt Bento mit Querkarte: sechs GLEICHE
   Karten (3 × 2 / 2 × 3 / 1 × 6), EIN Material für alle — das der Startseiten-
   Leistungskarten (.lcard: CI Solid Card dunkel, Charcoal-Familie hell, §5a) —
   je ein Foto aus dem Alltag der Betriebe, Facetten-Icon als Kapitel-Zeichen
   (CI 13, 30 px), interner Pfeil. Darunter .lhub-cta: der Satz aus dem Lead
   („lass uns einmal über deinen Betrieb reden") als echter CTA (§1.8).
   Eigene Klassen, weil .svc-card mit dem Branchen-Hub geteilt ist; Reveal über
   den geteilten Hook [data-hub-tile] / .svc-hub.is-revealed.
   =========================================================================== */

.page-leistungen .svc-hub__header { margin-bottom: clamp(40px, 4.4vw, 64px); }

.lhub {
  --lk-a: #192939;          /* CI Solid Card: Surface 3 → 2 → 1 */
  --lk-b: #131F2B;
  --lk-c: #0C141C;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .lhub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lhub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lhub__item { display: flex; min-width: 0; }

.lhub-card {
  /* lokales Dark-Token-Paket (Karten-Dunkel-Insel, 04a) — die Section liegt hell */
  --heading-color: #FFFFFF;
  --text-100: rgba(255, 255, 255, 0.88);
  --text-200: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.16);
  --accent-hover: #4DA8DA;
  --glow-rgb: 77, 168, 218;
  --focus-ring: #FFFFFF;
  /* Reveal-Transform der geteilten [data-hub-tile]-Regel braucht diese Werte */
  --mx: 0;
  --my: 0;
  --tilt-max: 0deg;
  --lift: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--lk-a) 0%, var(--lk-b) 52%, var(--lk-c) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.18);
  color: var(--text-100);
  text-decoration: none;
}
.svc-hub.is-revealed .lhub-card {
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Foto oben, läuft in den Kartengrund aus (Scrim in der Kartenfarbe) */
.lhub-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lk-c);
}
.lhub-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform-origin: 50% 60%;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.lhub-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(12, 20, 28, 0.35) 78%, var(--lk-a) 100%);
}

.lhub-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-5) clamp(22px, 2.2vw, 32px) clamp(24px, 2.4vw, 32px);
}

/* Kapitel-Marke: Facetten-Icon + Nummer (Caption-Raster wie .lcard__tag) */
.lhub-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-6)) 0 var(--space-4);   /* ragt in den Foto-Auslauf */
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;
  color: var(--text-200);
  position: relative;
}
.lhub-card__fx {
  display: block;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 8px 18px rgba(var(--glow-rgb), 0.28));
}

.lhub-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.55rem, 2vw, 1.95rem);
  line-height: 1.15;
  color: var(--heading-color);
  hyphens: manual;
}
.lhub-card__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-200);
}
.lhub-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--heading-color);
}
.lhub-card__more .icon {
  width: 16px;
  height: 16px;
  color: var(--accent-hover);
  transition: transform 0.35s var(--ease-morph);
}

@media (hover: hover) and (pointer: fine) {
  .lhub-card:hover {
    --lift: -4px;
    border-color: var(--glass-border-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 24px 48px -18px rgba(0, 0, 0, 0.40);
  }
  .lhub-card:hover .lhub-card__media img { transform: scale(1.045); }
  .lhub-card:hover .lhub-card__more .icon { transform: translateX(4px); }
}
.lhub-card:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 3px var(--focus-ring),
    0 0 0 5px #0C141C;
}

/* ---------- Abschlussleiste: Beratung + Potenzial-Check ---------- */
.lhub-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-6);
  padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3.2vw, 44px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.lhub-cta__copy { flex: 1 1 360px; min-width: 0; }
.lhub-cta__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--heading-color);
}
.lhub-cta__text {
  margin: 0;
  max-width: 58ch;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-200);
}
.lhub-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}
.lhub-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--heading-color);
  text-decoration: underline;
  text-decoration-color: rgba(var(--shadow-rgb), 0.35);
  text-underline-offset: 5px;
}
.lhub-cta__link .icon { width: 16px; height: 16px; transition: transform 0.35s var(--ease-morph); }
.lhub-cta__link:hover .icon { transform: translateX(4px); }

/* Light-Theme: Karten im Charcoal-Material (§5a, wie .lsys), Leiste als weiße Karte */
html[data-theme="light"] .page-leistungen .lhub {
  --lk-a: #26282C;
  --lk-b: #1F2226;
  --lk-c: #1B1D20;
}
html[data-theme="light"] .page-leistungen .lhub-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 50px -26px rgba(16, 24, 32, 0.34);
}
html[data-theme="light"] .page-leistungen .lhub-card__media::after {
  background: linear-gradient(180deg, transparent 52%, rgba(27, 29, 32, 0.35) 78%, var(--lk-a) 100%);
}
html[data-theme="light"] .page-leistungen .lhub-cta {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.08);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.04),
    0 22px 50px -28px rgba(var(--shadow-rgb), 0.20);
}

@media (max-width: 639px) {
  .lhub-card__media { aspect-ratio: 16 / 9; }
  .lhub-cta__actions { width: 100%; }
  .lhub-cta__actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lhub-card__media img,
  .lhub-card__more .icon,
  .lhub-cta__link .icon { transition: none; }
}
@media (scripting: none) {
  .lhub [data-hub-tile], .lhub-cta[data-hub-tile] { opacity: 1; transform: none; }
}


/* ===============================================================
   STARTSEITEN-UMBAU 2026-09-23 (Erich/Claude)
   Navigation · Hero · Logo-Band · Team-Band · „So läuft's ab" · Footer
   ===============================================================
   Herkunft: die Runden dieses Tages liefen in der Vorschau-Datei
   `vorschau-final.html` als <style>-Blöcke im <head>. Sie stehen hier
   in derselben REIHENFOLGE — die Kommentare v1…v20 markieren die
   Runden, und spätere Regeln überschreiben frühere absichtlich. Wer
   eine Regel anfasst, muss deshalb bis ans Ende des Blocks schauen.

   ⚠ STARTSEITEN-SCHUTZ: `.page-home` trägt auch /branchen/kanalservice/
   (Body dort: `page-home page-kanal-start`). Alles, was NUR auf der
   Startseite gelten darf — Hero unter der Pille, Endlos-Team-Band,
   „So läuft's ab" als Raster —, steht deshalb hinter
   `:where(.page-home:not(.page-kanal-start))`. Das `:where()` hält die
   Spezifität auf dem Wert, den die Regel in der Vorschau hatte.
   Ohne Schutz laufen: Navigation, Footer-Siegel, Markenfarbe, <html> —
   das sind die Änderungen, die überall gelten sollen.
   =============================================================== */

/* ===== GEMEINSAM: Logo-Größe, Höhe, Mobile ===== */
.navbar__inner{min-height:64px}
.navbar__brand,.navbar__brand img{height:26px}
.nav-link{font-size:15px;padding:8px 12px;letter-spacing:.1px}
.navbar__cta.btn-accent-signature{padding:10px 2.2em 10px 16px;font-size:14px}
.navbar__phone{padding:9px 16px;font-size:14px}
@media (max-width:1179px){
  .navbar__inner{grid-template-columns:auto 1fr auto auto;gap:10px;min-height:60px}
  .navbar__brand,.navbar__brand img{height:22px}
  .navbar__phone{grid-column:3;justify-self:end;width:40px;height:40px;padding:0;justify-content:center;border-radius:999px;border:1px solid rgba(16,24,32,.14);background:rgba(16,24,32,.04)}
  .navbar__phone .icon{width:17px;height:17px;display:block}
  .navbar__phone-number{display:none}
  .navbar__hamburger{grid-column:4;margin-right:0;width:40px;height:40px;border:1px solid rgba(16,24,32,.14)!important;border-radius:999px;background:rgba(16,24,32,.04)!important}
  .hamburger__bar{width:16px}
  .hamburger__bar:nth-child(1){top:13px}.hamburger__bar:nth-child(2){top:19.5px}.hamburger__bar:nth-child(3){top:26px}
}

/* ===== B: Schwebende Pill ===== */
.site-header{background:transparent;padding:12px 0 0}
html[data-theme="light"] .navbar{background:transparent;border-bottom:0;backdrop-filter:none}
.navbar .container.navbar__inner{max-width:1180px;margin:0 auto;padding:0 10px 0 22px;min-height:60px;border-radius:999px;background:rgba(255,255,255,.90);border:1px solid rgba(16,24,32,.10);box-shadow:0 10px 30px rgba(6,10,14,.18);backdrop-filter:blur(18px) saturate(1.2)}
.nav-link{color:#1a2430;font-weight:600;border-radius:999px}
.nav-link:hover{background:rgba(38,107,166,.08);color:#266BA6}
.navbar__phone{background:transparent;border-color:transparent;color:#1a2430}
.navbar__phone-number{text-decoration:none;font-weight:600}
@media (max-width:1179px){.site-header{padding:10px 12px 0}.navbar .container.navbar__inner{padding:0 8px 0 16px;min-height:54px}}

html[data-theme="light"] .navbar__phone{background:transparent;border-color:transparent;color:#1a2430;padding:9px 8px}
html[data-theme="light"] .navbar__phone:hover{background:transparent;color:#266BA6}
html[data-theme="light"] .navbar__phone-number{text-decoration:none;font-weight:600}
@media (max-width:1179px){html[data-theme="light"] .navbar__phone{border:1px solid rgba(16,24,32,.14);background:rgba(16,24,32,.04);padding:0}}

.navbar .container.navbar__inner{max-width:1240px;padding:0 10px 0 24px;gap:clamp(10px,1.2vw,18px)}
.nav-link{padding:8px 11px}

/* ===== B2: Pille schwebt ÜBER dem Hero, keine weiße Fläche ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;padding:16px 16px 0;pointer-events:none}
.site-header .navbar,.site-header .mobile-nav{pointer-events:auto}
html[data-theme="light"] .navbar{background:transparent;border:0;backdrop-filter:none}
.navbar .container.navbar__inner{max-width:1240px;margin:0 auto;min-height:62px;padding:0 10px 0 24px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 40px rgba(6,10,14,.28), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  transition:min-height .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease, max-width .35s ease;
  animation:pill-in .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes pill-in{from{opacity:0;transform:translateY(-18px) scale(.985)}to{opacity:1;transform:none}}
.navbar__brand,.navbar__brand img{height:26px;transition:height .35s ease}
.navbar__cta.btn-accent-signature{transition:transform .35s ease}
/* gescrollt: kleiner + durchsichtiger */
.site-header.is-scrolled .navbar .container.navbar__inner{min-height:52px;background:rgba(255,255,255,.58);box-shadow:0 8px 28px rgba(6,10,14,.22)}
.site-header.is-scrolled .navbar__brand,.site-header.is-scrolled .navbar__brand img{height:22px}
.site-header.is-scrolled .nav-link{padding:6px 10px}
/* Hero läuft bis ganz oben, Inhalt beginnt unter der Pille */
.page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){min-height:100svh;padding-top:calc(16px + 62px + 40px)}
@media (max-width:1179px){
  .site-header{padding:10px 12px 0}
  .navbar .container.navbar__inner{min-height:54px;padding:0 8px 0 16px;gap:10px}
  .site-header.is-scrolled .navbar .container.navbar__inner{min-height:48px}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){padding-top:calc(10px + 54px + 24px)}
}
/* Trustpilot Mini in der Vertrauenszeile */
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-cta{align-self:center}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust{align-items:center}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-cta--zwei{display:flex;align-items:center;min-width:0;width:240px;height:40px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-cta--zwei .trustpilot-widget{display:flex;align-items:center}:where(.page-home:not(.page-kanal-start)) .tp-label{font-family:var(--font-ui);font-weight:700;font-size:15px;color:#fff;letter-spacing:.2px;line-height:1}
/* Logo-Band läuft beim Hovern weiter (Erich 21.09.) */
:where(.page-home:not(.page-kanal-start)) .hero-logos:hover .hero-logos__track{animation-play-state:running}
.page-home:where(:not(.page-kanal-start)) .hero-band{--hero-logos-h:clamp(30px,3.6vw,52px)} /* v19: zugeschnittene Logos wirken bei gleicher Höhe deutlich größer */
/* v15: Rundensprung beheben — Abstand als Rand je Logo, damit die halbe Trackbreite exakt zwei Sätzen entspricht */
:where(.page-home:not(.page-kanal-start)) .hero-logos__track{gap:0}:where(.page-home:not(.page-kanal-start)) .hero-logos__track li{margin-right:clamp(48px,6vw,96px)}


/* ===== HANDY-HERO: eigenes Hochkant-Hintergrundvideo ===== */
:where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{display:none}
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start)) .hv-block__film{display:none}
  :where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{display:block;object-position:50% 50%}
  :where(.page-home:not(.page-kanal-start)) .hv-block::after{background:linear-gradient(to bottom, rgba(6,10,14,.78) 0%, rgba(6,10,14,.62) 42%, rgba(6,10,14,0) 62%)}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){display:block;padding-top:calc(10px + 54px + 28px);min-height:100svh}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust{margin-top:16px}
  @media (prefers-reduced-motion: reduce){:where(.page-home:not(.page-kanal-start)) .hv-block{background:#131518 url("Bilder/hero/der-block-hochkant-endbild-v4.webp") 50% 100% / cover no-repeat}}
}
/* K1 Karte unter der Pille */
.mobile-nav{background:rgba(6,10,14,.55);backdrop-filter:blur(6px)}
.mobile-nav__inner{position:absolute;top:76px;left:12px;right:12px;min-height:auto;padding:10px;border-radius:22px;background:rgba(255,255,255,.96);color:#101820;box-shadow:0 24px 60px rgba(6,10,14,.35)}
.mobile-nav__link,.mobile-nav__summary{color:#101820;font-size:19px;padding:15px 14px;border-radius:14px}
.mobile-nav__sublink{color:#3a4654;border-left-color:rgba(16,24,32,.12)}
.mobile-nav__chevron{color:#266BA6}
.mobile-nav__cta{padding:14px 6px 6px;gap:12px}
.mobile-nav__phone{color:#101820;justify-content:center;font-weight:600}

.navbar__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1),.navbar__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3){top:19.5px}
.navbar__brand{padding:7px 12px;border-radius:999px;background:rgba(16,24,32,.05);height:auto}
.navbar__brand img{height:22px}
@media (max-width:1179px){.navbar__brand img{height:20px}.navbar__brand{padding:7px 10px}}
.mobile-nav__siegel{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 6px 4px;color:#3a4654;font-size:12.5px;letter-spacing:.2px}
.mobile-nav__siegel img{width:28px;height:28px}
.site-header.is-dark .navbar .container.navbar__inner{background:rgba(12,20,28,.86);border-color:rgba(255,255,255,.10);box-shadow:0 12px 40px rgba(6,10,14,.35)}
.site-header.is-dark .nav-link{color:rgba(255,255,255,.88)}
.site-header.is-dark .nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
html[data-theme="light"] .site-header.is-dark .navbar__phone{color:#fff}
.site-header.is-dark .brand-logo--light{display:none!important}.site-header.is-dark .brand-logo--dark{display:block!important}
.site-header.is-dark .navbar__brand{background:rgba(255,255,255,.06)}
.site-header.is-dark .hamburger__bar{background:#fff}
.site-header.is-dark .navbar__hamburger,.site-header.is-dark .navbar__phone{border-color:rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important}
:where(.page-home:not(.page-kanal-start)) .hero-band__label{margin:0 0 10px;text-align:center;font-family:var(--font-ui);font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.55)}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte li{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:16.5px;line-height:1.4}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(77,168,218,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.5l3 3 6-7' fill='none' stroke='%237CC0EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;border:1px solid rgba(77,168,218,.55)}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust{margin-top:0}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-num{display:none}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust--eyebrow{margin:0 0 18px;gap:16px}
@media (max-width:1023px){:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte li{font-size:15px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{gap:14px}}

/* Band-Label volle Breite; Mobile: Band unter dem Hero, Inhalt kompakter */
:where(.page-home:not(.page-kanal-start)) .hero-band{display:flex;flex-direction:column}
:where(.page-home:not(.page-kanal-start)) .hero-band__label{width:100%}
@media (max-width:1023px){
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){padding-bottom:0;--hero-band-h:0px}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) .hero-band{position:static;margin-top:0;padding:14px 0 18px;background:#0e1216}
  :where(.page-home:not(.page-kanal-start)) .hv-block{bottom:0}
  :where(.page-home:not(.page-kanal-start)) .hero__headline{font-size:clamp(1.9rem,8.6vw,2.5rem)}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__lead{font-size:15.5px;margin-bottom:16px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte{gap:7px;margin-bottom:18px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte li{font-size:14.5px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{gap:12px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust{gap:14px}
  :where(.page-home:not(.page-kanal-start)) .hv-block::after{background:linear-gradient(to bottom, rgba(6,10,14,.80) 0%, rgba(6,10,14,.66) 48%, rgba(6,10,14,0) 68%)}
}

/* Band: Label oben absolut, Logos unten; Mobile: Band als eigener Streifen */
:where(.page-home:not(.page-kanal-start)) .hero-band{display:flex;flex-direction:row;align-items:flex-end;padding-bottom:12px}
:where(.page-home:not(.page-kanal-start)) .hero-band__label{position:absolute;top:8px;left:0;right:0;margin:0}
@media (max-width:1023px){
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) .hero-band{height:auto;margin-top:0;padding:34px 0 18px;background:#0e1216}
}

@media (max-width:1023px){
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{min-height:calc(100svh - 6px)}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){min-height:0}
}

/* FINAL: Logo ohne Rahmen, Trust mittig unter dem Button, Marke mobil, Menü-Marke */
.navbar__brand,.site-header.is-dark .navbar__brand{padding:0;background:transparent;height:auto}
.navbar__brand img{height:24px}
@media (max-width:1179px){.navbar__brand img{height:21px}.navbar__brand{padding:0}}
.navbar .container.navbar__inner{animation:none}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{display:inline-flex;flex-direction:column;align-items:center;gap:16px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{justify-content:center;gap:22px;margin:0}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust-seal{transform:none}
@media (max-width:1023px){:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{display:flex;width:100%;align-items:center}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__cta{width:100%;justify-content:center}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{gap:14px}
  :where(.page-home:not(.page-kanal-start)) .hv-block__meaning{display:block}
  :where(.page-home:not(.page-kanal-start)) .hv-block::after{background:linear-gradient(to bottom, rgba(6,10,14,.82) 0%, rgba(6,10,14,.66) 44%, rgba(6,10,14,0) 62%)}
}
.mobile-nav__mark{position:absolute;top:14px;right:16px;width:34px;opacity:.9}
.mobile-nav__mark svg{width:100%;height:auto;aspect-ratio:130/145}
.mobile-nav__mark .p1,.mobile-nav__mark .p2,.mobile-nav__mark .p3{fill:#266BA6}
.mobile-nav__inner{position:absolute}
.mobile-nav__list{margin-top:40px}

/* Lead fett, Ebenen-Etiketten, Marke mobil erst nach Positionierung */
:where(.page-home:not(.page-kanal-start)) .hero__lead-strong{color:#fff;font-weight:600}
:where(.page-home:not(.page-kanal-start)) .hv-chips{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease .2s}
:where(.page-home:not(.page-kanal-start)) .hv-block.is-set .hv-chips,:where(.page-home:not(.page-kanal-start)) .hv-block.is-set-mobil .hv-chips{opacity:1}
:where(.page-home:not(.page-kanal-start)) .hv-chip{position:absolute;left:var(--cx,0px);top:var(--cy,0px);transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 0;font-family:var(--font-ui);font-size:12.5px;letter-spacing:.3px;color:rgba(255,255,255,.86);white-space:nowrap;animation:chip-flicker 5.5s ease-in-out infinite;animation-delay:calc(var(--i) * .9s)}
:where(.page-home:not(.page-kanal-start)) .hv-chip .t{display:flex;flex-direction:column;line-height:1.15;gap:2px}:where(.page-home:not(.page-kanal-start)) .hv-chip small{font-size:10.5px;color:rgba(124,192,234,.9);letter-spacing:.2px}
:where(.page-home:not(.page-kanal-start)) .hv-chip i{display:block;width:var(--cl,42px);height:1px;background:linear-gradient(90deg, rgba(124,192,234,.0), rgba(124,192,234,.9));position:relative}
:where(.page-home:not(.page-kanal-start)) .hv-chip i::after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#7CC0EA;box-shadow:0 0 8px rgba(124,192,234,.9)}
@keyframes chip-flicker{0%,100%{opacity:.62;text-shadow:none}18%{opacity:1;text-shadow:0 0 10px rgba(124,192,234,.55)}30%{opacity:.8}40%{opacity:1}}
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start)) .hv-chip{font-size:10.5px;gap:6px}
  :where(.page-home:not(.page-kanal-start)) .hv-chip small{display:none}
  :where(.page-home:not(.page-kanal-start)) .hv-chip i{width:var(--cl,22px)}
  :where(.page-home:not(.page-kanal-start)) .hv-block:not(.is-set-mobil) .hv-block__meaning{opacity:0;visibility:hidden}
  :where(.page-home:not(.page-kanal-start)) .hv-block:not(.is-set-mobil) .hv-chips{opacity:0}
}
@media (prefers-reduced-motion: reduce){:where(.page-home:not(.page-kanal-start)) .hv-chip{animation:none;opacity:.9}}

@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start)) .hv-chips{display:none}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{min-height:0;padding-bottom:0}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){min-height:100svh;display:flex;flex-direction:column}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) .hero-band{margin-top:auto;position:relative;z-index:1}
  :where(.page-home:not(.page-kanal-start)) .hv-block{top:0}
  :where(.page-home:not(.page-kanal-start)) .hv-block::after{background:linear-gradient(to bottom, rgba(6,10,14,.55) 0%, rgba(6,10,14,0) 30%)}
  :where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{object-position:50% 100%;transform:scale(1.28);transform-origin:50% 100%}
  /* Mindesthöhe der Bühne unter dem Inhalt */
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{margin-bottom:270px}
}

/* Logos auf den Seitenflächen der Ebenen */
:where(.page-home:not(.page-kanal-start)) .hv-chips{display:none!important}
:where(.page-home:not(.page-kanal-start)) .hv-faces{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s ease .15s}
:where(.page-home:not(.page-kanal-start)) .hv-block.is-set .hv-faces,:where(.page-home:not(.page-kanal-start)) .hv-block.is-set-mobil .hv-faces{opacity:1}
:where(.page-home:not(.page-kanal-start)) .hv-face{position:absolute;left:0;top:0;width:100px;height:100px;transform-origin:0 0;display:flex;align-items:center;justify-content:center;opacity:.44;animation:face-glow 9s ease-in-out infinite;animation-delay:calc(var(--i,0) * 1.7s);backface-visibility:hidden}
:where(.page-home:not(.page-kanal-start)) .hv-face svg{width:100%;height:100%;fill:#cfe0ee;color:#cfe0ee;filter:drop-shadow(0 0 2px rgba(124,192,234,.55)) drop-shadow(0 0 6px rgba(124,192,234,.22))}
:where(.page-home:not(.page-kanal-start)) .hv-face svg.hv-face__stroke{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes face-glow{0%,100%{opacity:.38}9%{opacity:.46}11%{opacity:.4}40%{opacity:.5}62%{opacity:.42}64%{opacity:.5}}
@media (prefers-reduced-motion: reduce){:where(.page-home:not(.page-kanal-start)) .hv-face{animation:none;opacity:.9}}

:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;gap:8px;margin:0}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.88);font-family:var(--font-ui);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt img{width:30px;height:30px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-cta--zwei{width:240px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-cta--zwei .trustpilot-widget{width:240px}
@media (max-width:1023px){:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{display:flex;width:100%}}

:where(.page-home:not(.page-kanal-start)) .hv-block__meaning--mobil{display:none}
@media (max-width:1023px){:where(.page-home:not(.page-kanal-start)) .hv-block__meaning{display:none!important}:where(.page-home:not(.page-kanal-start)) .hv-block__meaning--mobil{display:block!important}}

/* Embleme aus; mobil: Videokanten weich, Überscroll oben dunkel, Logo größer */
:where(.page-home:not(.page-kanal-start)) .hv-faces{display:none!important}
html{background:linear-gradient(to bottom,#0C141C 0,#0C141C 50%,#F9FAFB 50%,#F9FAFB 100%)}
@media (max-width:1023px){
  .navbar__brand img{height:24px}
  :where(.page-home:not(.page-kanal-start)) .hv-block::after{background:linear-gradient(to bottom, #131518 0%, rgba(19,21,24,.85) 18%, rgba(19,21,24,0) 48%)}
  :where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 42%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom, transparent 0, #000 42%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);mask-composite:intersect}
}

/* Mobil v3: Video als voller Hintergrund, Würfel unten, Trust nebeneinander */
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start)) .hv-block{top:0!important;inset:0}
  :where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{transform:none;-webkit-mask-image:none;mask-image:none;object-position:50% 50%}
  :where(.page-home:not(.page-kanal-start)) .hv-block::after{background:linear-gradient(to bottom, rgba(6,10,14,.62) 0%, rgba(6,10,14,.5) 45%, rgba(6,10,14,.12) 62%, rgba(6,10,14,0) 75%)}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{margin-bottom:300px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:10px;zoom:.84;max-width:100%}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion,:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__text,:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__grid{min-width:0;max-width:100%}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust-seal--kompakt span{white-space:nowrap}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-cta--zwei{width:236px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte li{font-size:14.5px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__lead{font-size:15px}
}
/* Desktop: mehr Luft über der Headline */
@media (min-width:1024px){.page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){padding-top:calc(16px + 62px + 76px)}}
/* Menü-Hintergrund dunkler */
html[data-theme="light"] .mobile-nav{background:rgba(6,10,14,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mobile-nav__list{margin-top:6px}

/* v4: Trust ohne zoom, TÜV größer, Punkte einzeilig, Würfel kleiner, Menü, Desktop-Band */
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt img{width:38px;height:38px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt{display:flex;flex-direction:column;line-height:1.15;gap:1px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt b{font-weight:700;font-size:12.5px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt small{font-size:10.5px;color:rgba(255,255,255,.7);font-weight:500}
@media (min-width:1024px){
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)){padding-top:calc(16px + 62px + 48px)}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{gap:12px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{flex-direction:row;gap:22px}
}
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{zoom:1;gap:8px;justify-content:center;transform:none}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-cta--zwei{width:236px;flex:none}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt{gap:6px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt{gap:5px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt img{width:32px;height:32px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt b{font-size:10.5px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt small{font-size:9.5px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{gap:6px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte li{font-size:14px;white-space:nowrap}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{margin-bottom:230px}
  :where(.page-home:not(.page-kanal-start)) .hv-block{background:#101312}
  :where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{transform:none}
  .mobile-nav__inner{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .mobile-nav__phone{justify-content:flex-start;padding-left:18px}
}

/* v6 */
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{gap:22px;align-items:center}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt{flex-direction:column;gap:3px;text-align:center}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt img{width:34px;height:34px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt{align-items:center}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt b{font-size:10px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt small{font-size:8.5px}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{margin-bottom:290px}
  :where(.page-home:not(.page-kanal-start)) .hero-band__label{font-size:10.5px;color:rgba(255,255,255,.82);text-shadow:0 1px 6px rgba(0,0,0,.9)}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) .hero-band{background:linear-gradient(to bottom, rgba(14,18,22,0) 0%, rgba(14,18,22,.85) 40%, #0e1216 100%);padding-top:40px}
  .navbar__brand img{height:27px}
}
:where(.page-home:not(.page-kanal-start)) .hero-band__label{color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.navbar__brand img{height:28px}
/* Desktop-Dropdown: Karte statt Sprechblase */
.dropdown{top:calc(100% + 12px);min-width:280px;padding:10px;border-radius:18px;background:rgba(255,255,255,.96);border:1px solid rgba(16,24,32,.08);box-shadow:0 18px 50px rgba(6,10,14,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.dropdown__arrow{display:none}
.dropdown__item{border-radius:12px;color:#101820;padding:12px 14px}
.dropdown__item:hover{background:rgba(38,107,166,.08);color:#266BA6}
.site-header.is-dark .dropdown{background:rgba(12,20,28,.96);border-color:rgba(255,255,255,.1)}
.site-header.is-dark .dropdown__item{color:rgba(255,255,255,.9)}
/* Überscroll oben dunkel (Safari malt die html-Farbe) */
html[data-theme="light"]{background:#0C141C}
html[data-theme="light"] body{background:var(--page-bg)}

@media (max-width:359px){
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{flex-wrap:wrap;gap:10px 18px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__punkte li{white-space:normal}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__lead{font-size:14.5px}
}

/* v7: Dropdown + Menü im Glas der Pille, keine Hover-Lücke, Würfel höher */
.nav-item--has-dropdown{position:relative}
.nav-item--has-dropdown::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:22px}
.dropdown{top:calc(100% + 14px);min-width:290px;padding:10px;border-radius:22px;background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 40px rgba(6,10,14,.28), inset 0 1px 0 rgba(255,255,255,.6);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);transform:translateX(-50%) translateY(-6px)}
.nav-item--has-dropdown:hover .dropdown,.nav-item--has-dropdown:focus-within .dropdown{transform:translateX(-50%) translateY(0)}
.dropdown__item{border-radius:14px;color:#1a2430;padding:12px 14px;font-size:15px;font-weight:600}
.dropdown__item:hover{background:rgba(38,107,166,.10);color:#266BA6}
.site-header.is-dark .dropdown{background:rgba(12,20,28,.86);border-color:rgba(255,255,255,.10)}
.site-header.is-dark .dropdown__item{color:rgba(255,255,255,.9)}
@media (max-width:1179px){
  .mobile-nav__inner{position:absolute;top:76px;left:12px;right:12px;min-height:auto;padding:10px;border-radius:22px;background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 40px rgba(6,10,14,.28), inset 0 1px 0 rgba(255,255,255,.6);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);color:#101820}
  html[data-theme="light"] .mobile-nav{background:rgba(6,10,14,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .mobile-nav__link,.mobile-nav__summary{border-radius:14px}
  .mobile-nav__phone{background:rgba(16,24,32,.05);border:1px solid rgba(16,24,32,.08);border-radius:999px}
}
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{top:-64px;height:calc(100% + 64px)}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{margin-bottom:250px}
}

/* v8: Marke im Handy-Video eingebrannt, keine Script-Marke mehr auf Mobil */
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start)) .hv-block__meaning--mobil{display:none!important}
  :where(.page-home:not(.page-kanal-start)) .hv-block__film--mobil{top:0;height:100%}
  .page-home:where(:not(.page-kanal-start)) .hero:where(:not(.kanal-hero)) > .container{margin-bottom:300px}
}

/* v9: TÜV-Oktagon 40 px (Erich 22.09., Variante A), 298-px-Original für 3fache Pixeldichte */
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt img{width:40px;height:40px}
:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt b{font-size:13px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt small{font-size:11px}
@media (max-width:1023px){
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{gap:14px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal--kompakt img{width:40px;height:40px}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt b{font-size:11px}:where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__trust-seal-txt small{font-size:9.5px}
}

/* v10: „So läuft's ab" ohne Fotos (Desktop wie Handy) und ohne Telefonnummer (Erich 22.09.) */
.page-home:where(:not(.page-kanal-start)) .ns-station__media{display:none}
.page-home:where(:not(.page-kanal-start)) .ns-station__card,.page-home:where(:not(.page-kanal-start)) .ns-station:nth-child(even) .ns-station__card,.page-home:where(:not(.page-kanal-start)) .ns-station:nth-child(odd) .ns-station__card{grid-template-columns:1fr;min-height:0}
.page-home:where(:not(.page-kanal-start)) .ns-station__body,.page-home:where(:not(.page-kanal-start)) .ns-station:nth-child(even) .ns-station__body{grid-column:1}
/* v11: „So läuft's ab" neu (Erich 22.09., Canvas-Variante A): Bausteine der Seite wiederverwendet, keine Chips, keine Achse */
:where(.page-home:not(.page-kanal-start)) .ns-spine__rail,:where(.page-home:not(.page-kanal-start)) .ns-station__node,:where(.page-home:not(.page-kanal-start)) .ns-finale__node{display:none!important}
:where(.page-home:not(.page-kanal-start)) .ns-spine{padding-block:0}
:where(.page-home:not(.page-kanal-start)) .next-steps .section-header{margin-bottom:clamp(32px,4vw,56px)}
:where(.page-home:not(.page-kanal-start)) .ablauf-grid,:where(.page-home:not(.page-kanal-start)) .ablauf-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
:where(.page-home:not(.page-kanal-start)) .ablauf-card{transform:none!important;opacity:1;justify-self:stretch;grid-column:auto!important;grid-row:auto!important;min-height:0}
:where(.page-home:not(.page-kanal-start)) .ablauf-card .control-feature__title{max-width:none}
:where(.page-home:not(.page-kanal-start)) .ablauf-card .control-feature__body{max-width:none}
:where(.page-home:not(.page-kanal-start)) .ablauf-card .lcard__tag{align-self:flex-start;margin-bottom:2px}
:where(.page-home:not(.page-kanal-start)) .ablauf-card .ns-station__title{margin:0;hyphens:manual;-webkit-hyphens:manual}
:where(.page-home:not(.page-kanal-start)) .ablauf-step{position:relative;display:flex;flex-direction:column;gap:14px;padding-top:34px}
:where(.page-home:not(.page-kanal-start)) .ablauf-step::before{content:"";position:absolute;left:12px;right:-24px;top:11px;height:1px;background:linear-gradient(90deg,rgba(77,168,218,.55),rgba(77,168,218,.12))}
:where(.page-home:not(.page-kanal-start)) .ablauf-step:last-child::before{display:none}
:where(.page-home:not(.page-kanal-start)) .ablauf-step__mark{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:rgba(77,168,218,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.5l3 3 6-7' fill='none' stroke='%237CC0EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/16px no-repeat;border:1px solid rgba(77,168,218,.55);box-shadow:0 0 0 6px #0F1317}
:where(.page-home:not(.page-kanal-start)) .ablauf-step .control-feature__title,:where(.page-home:not(.page-kanal-start)) .ablauf-step .control-feature__body{max-width:none}
:where(.page-home:not(.page-kanal-start)) .ns-note{margin-top:clamp(28px,3.4vw,44px)}
:where(.page-home:not(.page-kanal-start)) .ns-finale{margin-top:clamp(36px,4vw,56px);padding-top:0}
@media (max-width:1339px) and (min-width:861px){:where(.page-home:not(.page-kanal-start)) .ablauf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
:where(.page-home:not(.page-kanal-start)) .ablauf-card .control-feature__title{white-space:nowrap}
@media (max-width:860px){:where(.page-home:not(.page-kanal-start)) .ablauf-card .control-feature__title{white-space:normal}
  :where(.page-home:not(.page-kanal-start)) .ablauf-grid,:where(.page-home:not(.page-kanal-start)) .ablauf-line{grid-template-columns:1fr;gap:12px}
  :where(.page-home:not(.page-kanal-start)) .ablauf-step{padding-top:0;padding-left:40px;gap:8px}
  :where(.page-home:not(.page-kanal-start)) .ablauf-step::before{left:11px;right:auto;top:28px;bottom:-26px;width:1px;height:auto;background:linear-gradient(180deg,rgba(77,168,218,.5),rgba(77,168,218,.1))}
  :where(.page-home:not(.page-kanal-start)) .ablauf-step__mark{top:2px}
  :where(.page-home:not(.page-kanal-start)) .ablauf-line{gap:26px}
  :where(.page-home:not(.page-kanal-start)) .ns-finale{margin-top:36px}
}
/* v12: Team-Band (Erich 22.09.: zwei Reihen, EINE Richtung, untere 20 % schneller, nie eine Lücke): Endlosband statt starrem Fries, Ränder ausgeblendet, beim Hovern hält es an */
:where(.page-home:not(.page-kanal-start)) .crew-wall{display:flex!important;flex-direction:column;gap:var(--band-gap,0);overflow:hidden;padding-block:var(--band-pad,0)}
:where(.page-home:not(.page-kanal-start)) .crew{display:flex!important;flex-wrap:nowrap;width:max-content;animation:crew-links var(--band-s,70s) linear infinite;will-change:transform}
:where(.page-home:not(.page-kanal-start)) .crew--schnell{animation-duration:calc(var(--band-s,70s) * .8)}

:where(.page-home:not(.page-kanal-start)) .crew .crew__member,:where(.page-home:not(.page-kanal-start)) .crew:hover .crew__member,:where(.page-home:not(.page-kanal-start)) .crew:hover .crew__member:hover{flex:0 0 var(--stripe)!important;width:var(--stripe);height:var(--stripe-h);opacity:1!important;translate:0 0!important;margin-right:var(--band-gap,0);border-radius:var(--band-r,0)}




:where(.page-home:not(.page-kanal-start)) .crew__member{overflow:hidden}
:where(.page-home:not(.page-kanal-start)) .crew__member::after{display:none!important}
:where(.page-home:not(.page-kanal-start)) .crew__role{min-height:0;max-height:none;height:auto;opacity:1!important;visibility:visible!important;overflow:visible;hyphens:manual;-webkit-hyphens:manual}
:where(.page-home:not(.page-kanal-start)) .crew__edge{display:var(--band-edge,block)}
@keyframes crew-links{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){:where(.page-home:not(.page-kanal-start)) .crew{animation:none}}
@media (max-width:1023px){:where(.page-home:not(.page-kanal-start)) .crew-wall{--stripe:132px;--stripe-h:200px;--band-s:55s}}
:where(.page-home:not(.page-kanal-start)) .crew-wall{--stripe:clamp(140px,11.5vw,176px);--stripe-h:clamp(250px,23vw,400px)}

/* v13: Hero-Vertrauenszeile linksbündig zum Button */
@media (min-width:1024px){
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion{align-items:flex-start}
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust{justify-content:flex-start;width:auto}
  /* gemessen 22.09.: die Tinte des Micro-Star-Widgets beginnt 7 px hinter der Boxkante (Chromium und WebKit) */
  :where(.page-home:not(.page-kanal-start), .page-auftragsgewinnung) .hero__aktion .hero__trust-cta--zwei{margin-left:-7px}
}

/* v14: Footer-Siegelreihe 110 px hoch, Trustpilot Mini (110×230, kleinste Größe mit allen drei Zeilen) führt die Reihe an */
.site-footer__seals{--seal-h:clamp(88px,7.6vw,110px)}
.site-footer__seal--tp-mini{min-width:0;width:230px;height:110px;align-self:center}
.site-footer__seal--tp-mini .trustpilot-widget{width:230px;max-width:230px}
@media (max-width:720px){.site-footer__seal--tp-mini{width:100%;justify-content:center}}
@media (max-width:480px){.site-footer__seals{--seal-h:68px}.site-footer__seal--tp-mini{height:110px}}

/* HISTORIE (überholt durch [Block: kopfleiste-r24], 24.09.): die Kopfleiste ist auf ALLEN Seiten fixed. */
/* Die Pille schwebt nur auf der Startseite ÜBER dem Hero. Auf allen
   anderen Seiten bleibt die Kopfleiste im Fluss (`sticky`) — sonst
   rutschte dort der erste Abschnitt unter die Pille, weil nur der
   Startseiten-Hero den Ausgleich per `padding-top` trägt. */
body:not(.page-home) .site-header,
body.page-kanal-start .site-header{position:sticky}

/* v16 Navigation dunkel ab Start */
/* v16: Hero-Overlay auf dem Handy entfernt (23.09.): es hatte den Würfel-Container aus der Position geworfen */
/* v16 C: über dem Hero durchsichtiger, beim Scrollen dichter */
.site-header:not(.is-scrolled) .navbar .container.navbar__inner{background:rgba(12,20,28,.5)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 8px 28px rgba(6,10,14,.25)!important}

/* v18: Team-Band-Hover nur mit Maus; auf dem Handy kein Anhalten, kein Abdunkeln (Erich 23.09.: flackert) */
@media (hover:hover) and (pointer:fine){:where(.page-home:not(.page-kanal-start)) .crew-wall:hover .crew{animation-play-state:paused}:where(.page-home:not(.page-kanal-start)) .crew-wall:hover .crew__shot{filter:saturate(.55) brightness(.68)!important;transform:scale(1.02)!important}:where(.page-home:not(.page-kanal-start)) .crew-wall:hover .crew__member:hover .crew__shot{filter:none!important;transform:scale(1.1)!important}:where(.page-home:not(.page-kanal-start)) .crew-wall:hover .crew__id{opacity:.55!important;transition:opacity 450ms ease}:where(.page-home:not(.page-kanal-start)) .crew-wall:hover .crew__member:hover .crew__id{opacity:1!important}}
@media (max-width:1023px){:where(.page-home:not(.page-kanal-start)) .crew__shot{filter:none!important;transform:none!important}:where(.page-home:not(.page-kanal-start)) .crew__member{contain:layout paint}}

/* v20: Bese-Marke im App-Mockup (Laptop-Seitenleiste) in Markenblau statt Weiß (Erich 23.09.) */
.dash__mark{color:#2C6EA9}

/* ===============================================================
   Beweis-Sektion „Echte Betriebe, echte Ergebnisse"
   ===============================================================
   ERZEUGT VON build-beweis.py (Scratchpad) — NICHT VON HAND ÄNDERN.
   Datenquelle: testimonial-zahlen.json. Gehört zu
   partials/section-beweis-home.html und partials/scripts-beweis.html
   (Blöcke 7 + 8, seit 24.09.2026 aus scripts-home.html herausgelöst).
   Läuft seit 24.09.2026 auf Startseite, Leistungen-Hub, AG,
   Marktführerschaft, Website, Branchen-Hub und Kanalservice. Alle
   Klassen (.beweis, .bw__*, .fs__*, .pw__*, .gc*, .ch*) kommen sonst
   nirgends vor. Die Text-Tokens (--text-200 für .proof__intro) holt
   sich .beweis aus der konsolidierten Insel-Token-Liste (Eintrag
   `.beweis` dort) — ohne sie erbte die Section auf Unterseiten die
   helle Seiten-Tinte.
   =============================================================== */
/* ===== Beweis-Sektion „Echte Betriebe, echte Ergebnisse" (Stand 23.09.2026, erzeugt von build-beweis.py) ===== */
/* Beweis, Runde 5 */
.beweis{position:relative;padding-block:clamp(64px,8vw,112px) clamp(48px,6vw,80px);background:#17191D!important;--heading-color:#fff;--logo-mono-filter:brightness(0) invert(1);overflow:hidden}
.bw__head{display:flex;justify-content:center;text-align:center;margin-bottom:clamp(28px,3.4vw,44px)}
.bw__head-text{display:flex;flex-direction:column;align-items:center;gap:12px}
.bw__head .section-header__title{color:#fff;margin:0;max-width:none}.bw__head .proof__intro{margin:0;max-width:56ch}
.fs{position:relative;z-index:2;--edge:calc(50vw - min(50vw - 16px, 560px));--card-w:min(1040px, calc(100vw - 2 * var(--edge) - 80px));--q-w:clamp(280px,24vw,340px);--gap:22px}
.fs__viewport{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);padding-left:var(--edge);display:flex;align-items:flex-start;gap:var(--gap);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%)}
.fs__stage{flex:none;width:var(--card-w);display:grid}
.fs__case{grid-area:1/1;width:var(--card-w);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:start;gap:clamp(18px,2.4vw,32px);padding:clamp(14px,1.8vw,24px);border-radius:22px;background:linear-gradient(160deg,rgba(31,52,71,.55) 0%,rgba(19,31,43,.65) 50%,rgba(12,20,28,.85) 100%);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 28px 64px -30px rgba(0,0,0,.65);opacity:0;transform:translateX(28px);pointer-events:none;transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.fs__case.is-active{opacity:1;transform:none;pointer-events:auto;z-index:1}
.fs__case.is-leaving{opacity:0;transform:translateX(-28px)}
.fs__queue{flex:none;display:flex;gap:var(--gap);align-items:flex-start;transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
.fs__queue.no-anim{transition:none}
.fs__q{flex:none;width:var(--q-w);display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,rgba(31,52,71,.55) 0%,rgba(19,31,43,.65) 50%,rgba(12,20,28,.85) 100%);cursor:pointer;text-align:left;color:#fff;opacity:.55;filter:saturate(.6);transform-origin:left top;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease}
.fs__q:hover{opacity:.85;filter:none}
.fs__q[data-d="2"]{transform:scale(.92);opacity:.4}.fs__q[data-d="3"]{transform:scale(.84);opacity:.28}.fs__q[data-d="4"]{transform:scale(.76);opacity:.18}.fs__q[data-d="0"],.fs__q[data-d^="-"]{opacity:0;pointer-events:none}
.fs__q-media{display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#131F2B}
.fs__q-media img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.88) saturate(.96)}
.fs__q-name{font-family:var(--font-display);font-size:18px;line-height:1.15;padding:0 4px 4px}
.fs__media{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#131F2B;border:0;padding:0}
button.fs__media{cursor:pointer}
.fs__media img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.88) saturate(.96)}
.fs__play{position:absolute;inset:0;margin:auto;width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);border-radius:50%;background:rgba(25,41,57,.92);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 12px 28px rgba(0,0,0,.45)}
.fs__play svg{width:40%;height:40%;margin-left:3px}
.fs__body{display:flex;flex-direction:column;gap:12px;padding:4px 4px 4px;min-width:0}
.fs__kicker{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(179,204,223,.8)}
.fs__name{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.12;color:#fff}
.fs__claim{margin:-4px 0 2px;font-family:var(--font-display);font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.25;background:linear-gradient(135deg,#B3CCDF 0%,#4DA8DA 55%,#6BC4F0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* A: Kennzahl-Kacheln */
.kp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kp{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);position:relative;min-width:0}
.kp__l{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(179,204,223,.75)}
.kp__h{font-family:var(--font-display);font-size:clamp(22px,2vw,30px);line-height:1.05;color:#fff;overflow-wrap:anywhere}
.kp__v{font-family:var(--font-ui);font-size:12.5px;color:rgba(236,239,248,.6)}
.kp__f{position:absolute;top:12px;right:12px;font-family:var(--font-ui);font-size:12px;font-weight:700;color:#0C141C;background:#7CC0EA;border-radius:999px;padding:3px 9px}
.fs__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fs__facts li{display:grid;grid-template-columns:auto 1fr auto 1.2fr;gap:10px;align-items:baseline;font-family:var(--font-ui);font-size:13.5px;line-height:1.35;padding:6px 0;border-top:1px solid rgba(255,255,255,.07)}
.fs__facts li>span:first-child{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(179,204,223,.75)}
.fs__facts-v{color:rgba(236,239,248,.58)}.fs__facts-p{color:#7CC0EA}.fs__facts b{color:#fff;font-weight:600}
/* B: Tafel Vorher | Heute */
.tf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tf li{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:10px;align-items:start;padding:9px 0;border-top:1px solid rgba(255,255,255,.08);font-family:var(--font-ui);font-size:13.5px;line-height:1.35;position:relative}
.tf li.tf__head{border-top:0;padding:0 0 4px}
.tf__head span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(179,204,223,.75)}
.tf__head span:last-child{color:#7CC0EA}
.tf__l{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(179,204,223,.75);padding-top:2px}
.tf__v{color:rgba(236,239,248,.58)}.tf__h{color:#fff;font-weight:600}.tf__h b{font-weight:700;color:#0C141C;background:#7CC0EA;border-radius:999px;padding:1px 7px;font-size:11.5px;margin-left:4px}
.tf__bars{grid-column:2/4;display:flex;flex-direction:column;gap:3px;margin-top:2px}
.tf__bars i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.18);width:var(--w)}
.tf__bars i.is-h{background:linear-gradient(90deg,#4DA8DA,#7CC0EA);box-shadow:0 0 10px rgba(124,192,234,.5)}
/* C: Wachstumskurve */
.ch{margin:0;padding:10px 6px 4px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ch svg{width:100%;height:auto;display:block;font-family:var(--font-ui)}
.ch__x{font-size:10.5px;fill:rgba(179,204,223,.7);letter-spacing:.06em;text-transform:uppercase}
.ch__v{font-size:12px;fill:rgba(236,239,248,.6)}.ch__h{font-size:15px;font-weight:700;fill:#fff}
.ch__d{fill:#17191D;stroke:rgba(124,192,234,.8);stroke-width:2}.ch__d.is-h{fill:#7CC0EA;stroke:#7CC0EA;filter:drop-shadow(0 0 6px rgba(124,192,234,.9))}
.ch figcaption{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(179,204,223,.75);padding:6px 8px 4px}
.fs__details{border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.fs__details summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:14px;font-weight:600;color:#fff}
.fs__details summary::-webkit-details-marker{display:none}
.fs__details summary::before{content:"";width:22px;height:22px;border-radius:50%;border:1px solid rgba(124,192,234,.55);background:rgba(77,168,218,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 8l4 4 4-4' fill='none' stroke='%237CC0EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;flex:none;transition:transform .3s}
.fs__details[open] summary::before{transform:rotate(180deg)}
.fs__steps{list-style:none;margin:14px 0 0;padding:0 0 0 18px;border-left:2px solid rgba(124,192,234,.35);display:flex;flex-direction:column;gap:10px}
.fs__steps li{position:relative;display:flex;flex-direction:column;gap:2px;font-family:var(--font-ui);font-size:14px;line-height:1.5;color:rgba(236,239,248,.78)}
.fs__steps li::before{content:"";position:absolute;left:-24px;top:7px;width:10px;height:10px;border-radius:50%;background:#17191D;border:2px solid rgba(124,192,234,.7)}
.fs__steps li b{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(179,204,223,.8)}
.fs__steps li.is-heute{color:#fff}.fs__steps li.is-heute b{color:#7CC0EA}.fs__steps li.is-heute::before{background:#7CC0EA;box-shadow:0 0 12px rgba(124,192,234,.7)}
.fs__arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(23,25,29,.85);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fs__arrow svg{width:22px;height:22px}.fs__arrow:hover{background:rgba(255,255,255,.14)}
.fs__arrow--l{left:calc(var(--edge) - 26px)}.fs__arrow--r{left:calc(var(--edge) + var(--card-w) - 26px)}
.fs__arrow{top:calc(var(--card-w) * 0.5 * 9 / 16 * 0.9 + 24px)}
.bw__alle-wrap{display:flex;justify-content:flex-end;margin-top:18px;position:relative;z-index:2}
.bw__alle{font-family:var(--font-ui);font-size:14px;font-weight:600;color:rgba(236,239,248,.85);text-decoration:none;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.bw__alle:hover{background:rgba(255,255,255,.08);color:#fff}
.bw__logos{position:relative;display:flex;flex-direction:column;gap:clamp(22px,3vw,36px);width:100vw;margin-left:calc(50% - 50vw);margin-top:calc(-1 * clamp(40px,5vw,72px));padding-top:clamp(120px,13vw,190px);z-index:0}
.bw__logos::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(200px,22vw,320px);background:linear-gradient(180deg,#17191D 0%,#17191D 35%,rgba(23,25,29,0) 100%);z-index:1;pointer-events:none}
.pw__row{display:flex;align-items:center;width:max-content;list-style:none;margin:0;padding:0;filter:var(--logo-mono-filter);opacity:.94;animation:crew-links 120s linear infinite;animation-delay:0s;will-change:transform;backface-visibility:hidden}
.pw__row li{flex:none;display:flex;align-items:center;margin-right:clamp(56px,6vw,96px)}
.pw__row img{height:52px;width:auto;max-width:210px;object-fit:contain;display:block}
.bw__more{display:flex;justify-content:center;margin-top:clamp(28px,3.6vw,44px);text-align:center}
.bw__more-line{margin:0;max-width:52ch;font-family:var(--font-ui);font-size:15px;line-height:1.6;color:rgba(236,239,248,.78)}
@media (max-width:1023px){
  .fs{--edge:16px;--card-w:calc(100vw - 32px);--gap:14px}
  .fs__viewport{-webkit-mask-image:none;mask-image:none;padding-right:16px}
  .fs__queue{display:none}
  .fs__case{display:flex;flex-direction:column;gap:12px;padding:12px}
  .fs__arrow{width:44px;height:44px;top:calc((100vw - 32px - 24px) * 9 / 16 / 2 + 12px)!important}.fs__arrow--l{left:-4px}.fs__arrow--r{left:auto;right:-4px}
  .kp-grid{grid-template-columns:repeat(2,1fr)}.tf li{grid-template-columns:1fr;gap:2px}.tf__head{display:none!important}.tf__v::before{content:"Vorher: "}.tf__bars{grid-column:1}
  .fs__facts li{grid-template-columns:1fr;gap:2px}.fs__facts-p{display:none}.fs__facts-v::before{content:"Vorher: "}
  .bw__alle-wrap{justify-content:center}
  .pw__row li{margin-right:36px}.pw__row img{height:30px;max-width:120px}.bw__logos{gap:20px;padding-top:110px;margin-top:-30px}
}
@media (prefers-reduced-motion:reduce){.pw__row{animation:none}.fs__track,.fs__case{transition:none}}

/* Runde 6: Wachstumskurve animiert + Substanz-Fakten */

.gc{position:relative;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.025) 100%);border:1px solid rgba(255,255,255,.09);padding:14px 14px 8px;overflow:hidden}
.gc::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 20%,rgba(77,168,218,.14),transparent 70%);pointer-events:none}
.gc__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;position:relative}
.gc__m{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(179,204,223,.8)}
.gc__f{font-family:var(--font-ui);font-size:12px;font-weight:700;color:#0C141C;background:linear-gradient(135deg,#7CC0EA,#4DA8DA);border-radius:999px;padding:3px 10px;box-shadow:0 0 16px rgba(124,192,234,.45);opacity:0;transform:scale(.6);transition:opacity .4s ease 1.5s,transform .5s cubic-bezier(.34,1.56,.64,1) 1.5s}
.is-live .gc__f{opacity:1;transform:none}
.gc__svg{width:100%;height:auto;display:block;font-family:var(--font-ui);position:relative}
.gc__g{stroke:rgba(255,255,255,.07);stroke-width:1;stroke-dasharray:3 4}
.gc__a{opacity:0;transition:opacity .9s ease 1.1s}.is-live .gc__a{opacity:1}
.gc__l{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200}
.gc__l--glow{stroke:#7CC0EA;stroke-width:8;opacity:.45}
.is-live .gc__l{animation:gc-draw 1.6s cubic-bezier(.22,1,.36,1) .2s forwards}
@keyframes gc-draw{to{stroke-dashoffset:0}}
.gc__d{fill:#17191D;stroke:rgba(124,192,234,.9);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.35s + var(--i) * .38s)}
.gc__d.is-h{fill:#7CC0EA;stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 0 10px rgba(124,192,234,.95))}
.is-live .gc__d{opacity:1;transform:scale(1)}
.gc__x{font-size:10px;fill:rgba(179,204,223,.62);letter-spacing:.08em;text-transform:uppercase}
.gc__v{font-size:12px;fill:rgba(236,239,248,.6)}
.gc__h{font-size:22px;font-weight:700;fill:#fff;font-family:var(--font-display);opacity:0;transition:opacity .5s ease 1.3s}.is-live .gc__h{opacity:1}
.gc__big{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;position:relative}
.gc__big-l{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(179,204,223,.8)}
.gc__big-v{font-family:var(--font-display);font-size:clamp(34px,3.2vw,46px);line-height:1;color:#fff}
.gc__big-s{font-family:var(--font-ui);font-size:12.5px;color:rgba(236,239,248,.6)}
.gc--c .gc__svg{margin-top:4px}.gc--c .gc__h{display:none}
.gc__bars{display:flex;flex-direction:column;gap:6px;padding:6px 2px 6px}
.gc__bars span{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;font-family:var(--font-ui);font-size:12px;color:rgba(236,239,248,.6)}
.gc__bars i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.16);width:0;transition:width 1.2s cubic-bezier(.22,1,.36,1) .6s}
.gc__bars .is-h i{background:linear-gradient(90deg,#4DA8DA,#7CC0EA);box-shadow:0 0 12px rgba(124,192,234,.5)}.gc__bars .is-h{color:#fff;font-weight:600}
.is-live .gc__bars i{width:var(--w)}
.fs__subst{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.fs__subst li{display:flex;gap:11px;align-items:flex-start;font-family:var(--font-ui);font-size:15px;line-height:1.45;color:rgba(236,239,248,.9)}
.fs__subst-i{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(77,168,218,.16);border:1px solid rgba(77,168,218,.55);display:flex;align-items:center;justify-content:center}
.fs__subst-i svg{width:14px;height:14px}
.fs__claim{margin:-2px 0 4px}
@media (max-width:1023px){.gc__h{font-size:18px}.fs__subst li{font-size:14px}}
@media (prefers-reduced-motion:reduce){.gc__l,.is-live .gc__l{animation:none;stroke-dashoffset:0}.gc__d,.gc__a,.gc__h,.gc__f{opacity:1;transform:none;transition:none}}
/* Runde 8: Baukasten-Elemente (.ve-*), Partner-seit, Logo-Medien, Übergang */
.fs__kicker{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ve-seit{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:none;color:rgba(179,204,223,.72)}
.ve-seit i{flex:none;width:6px;height:6px;border-radius:50%;background:#7CC0EA}
.is-live .ve-seit i{animation:ve-puls 2.2s cubic-bezier(.22,1,.36,1) .9s 1 both}
@keyframes ve-puls{0%{box-shadow:0 0 0 0 rgba(124,192,234,.6)}70%{box-shadow:0 0 0 10px rgba(124,192,234,0)}100%{box-shadow:0 0 0 0 rgba(124,192,234,0)}}
.ve__fuss{margin:10px 2px 2px;font-family:var(--font-ui);font-size:12.5px;line-height:1.45;color:rgba(236,239,248,.58)}
.fs__media--logo,.fs__q-media--logo{display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 70% at 50% 40%,rgba(38,107,166,.28),rgba(12,20,28,0) 70%),linear-gradient(160deg,#1a2532 0%,#0f171f 100%)}
.fs__media--logo img,.fs__q-media--logo img{width:56%!important;height:auto!important;max-height:46%;object-fit:contain!important;filter:brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0,0,0,.4))!important;opacity:.95}
.fs__q-media--logo img{width:52%!important}
/* Übergang: das Vorschaubild fliegt an seinen Platz */
.fs__ghost{position:fixed;z-index:50;border-radius:14px;overflow:hidden;pointer-events:none;transform-origin:top left;will-change:transform;transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .3s ease .45s;box-shadow:0 28px 64px -30px rgba(0,0,0,.7)}
.fs__ghost img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.88) saturate(.96)}
.fs__case.is-entering{transition-delay:.28s}
/* Elemente */
.ve-rekord__feld{display:flex;align-items:flex-end;gap:4px;height:96px;padding:12px 2px 0;border-bottom:1px solid rgba(255,255,255,.1);margin-top:2px}
.ve-rekord__j{flex:1 1 0;min-width:3px;height:26%;border-radius:3px 3px 0 0;background:rgba(255,255,255,.15);transform-origin:bottom;transform:scaleY(0);transition:transform .45s cubic-bezier(.22,1,.36,1);transition-delay:calc(.15s + var(--i) * .045s)}
.is-live .ve-rekord__j{transform:scaleY(1)}
.ve-rekord__spitze{flex:1.7 1 0;height:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#7CC0EA 0%,#4DA8DA 100%);box-shadow:0 0 24px rgba(124,192,234,.55);transform-origin:bottom;transform:scaleY(0);transition:transform .75s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(.25s + var(--i) * .045s)}
.is-live .ve-rekord__spitze{transform:scaleY(1)}
.ve-besitz__reihe{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ve-besitz__z{display:flex;flex-direction:column;gap:3px;padding:13px 13px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(9px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),border-color .6s ease;transition-delay:calc(.25s + var(--i) * .22s)}
.is-live .ve-besitz__z{opacity:1;transform:none;border-color:rgba(124,192,234,.28)}
.ve-besitz__i{width:26px;height:26px;margin-bottom:5px;color:rgba(179,204,223,.3);transition:color .55s ease,filter .55s ease;transition-delay:calc(.45s + var(--i) * .22s)}
.ve-besitz__i svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.is-live .ve-besitz__i{color:#7CC0EA;filter:drop-shadow(0 0 10px rgba(124,192,234,.5))}
.ve-besitz__z b{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.05;color:#fff}
.ve-besitz__z>span:last-child{font-family:var(--font-ui);font-size:12px;line-height:1.35;color:rgba(236,239,248,.62)}
.ve-orte__feld{width:100%;height:auto;display:block;font-family:var(--font-ui);margin-top:4px}
.ve-orte__p{opacity:0;transition:opacity .45s ease;transition-delay:calc(.3s + var(--i) * .19s)}
.is-live .ve-orte__p{opacity:1}
.ve-orte__k{fill:#7CC0EA;stroke:#17191D;stroke-width:1.5}
.ve-orte__p--start .ve-orte__k{fill:#B3CCDF}
.ve-orte__p--letzt .ve-orte__k{filter:drop-shadow(0 0 12px rgba(124,192,234,.95))}
.ve-orte__ring{fill:none;stroke:#7CC0EA;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.is-live .ve-orte__p .ve-orte__ring{animation:ve-orte-ring .9s cubic-bezier(.22,1,.36,1) calc(.3s + var(--i) * .19s) 1 both}
@keyframes ve-orte-ring{0%{transform:scale(.25);opacity:.85}100%{transform:scale(1);opacity:0}}
.ve-orte__n{font-size:11px;fill:rgba(179,204,223,.7);letter-spacing:.08em}
.ve-leute__reihe{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end;padding:10px 2px 2px}
.ve-leute__f{flex:none;width:clamp(22px,2.4vw,28px);color:rgba(179,204,223,.26);transform:translateY(7px);transition:color .45s ease,filter .45s ease,transform .45s cubic-bezier(.34,1.4,.64,1);transition-delay:calc(.3s + var(--i) * .13s)}
.ve-leute__f svg{width:100%;height:auto;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.is-live .ve-leute__f{color:#7CC0EA;transform:none;filter:drop-shadow(0 0 8px rgba(124,192,234,.45))}
.is-live .ve-leute__f--chef{color:#B3CCDF;filter:none}
.ve-leute__plus{align-self:center;padding-left:2px;font-family:var(--font-display);font-size:24px;line-height:1;color:rgba(124,192,234,.8);opacity:0;transition:opacity .45s ease 1.9s}
.is-live .ve-leute__plus{opacity:1}
.ve-takt__tag{display:flex;gap:7px;align-items:stretch;height:60px;padding:12px 2px 4px}
.ve-takt__t{flex:1 1 0;border-radius:4px;background:linear-gradient(180deg,#7CC0EA 0%,#4DA8DA 100%);box-shadow:0 0 14px rgba(124,192,234,.4);opacity:0;transform:scaleY(.22);transform-origin:bottom;transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(.25s + var(--i) * .11s)}
.is-live .ve-takt__t{opacity:1;transform:scaleY(1)}
.ve-takt__t--k{background:rgba(124,192,234,.24);box-shadow:none}
.ve-dauer__leiste{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);align-items:start;padding:20px 0 2px;margin-top:6px}
.ve-dauer__spur{position:absolute;left:12.5%;right:12.5%;top:25px;height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.ve-dauer__fluss{position:absolute;left:12.5%;top:25px;height:2px;border-radius:2px;width:0;background:linear-gradient(90deg,#B3CCDF,#7CC0EA);box-shadow:0 0 12px rgba(124,192,234,.55);transition:width 1.5s cubic-bezier(.22,1,.36,1) .25s}
.is-live .ve-dauer__fluss{width:75%}
.ve-dauer__m{display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;z-index:1;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(179,204,223,.66)}
.ve-dauer__m b{width:12px;height:12px;border-radius:50%;background:#17191D;border:2px solid rgba(124,192,234,.5);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.5,.64,1);transition-delay:calc(.3s + var(--i) * .36s)}
.is-live .ve-dauer__m b{transform:scale(1)}
.ve-dauer__m--jetzt{color:#fff}.ve-dauer__m--jetzt b{background:#7CC0EA;border-color:#fff;box-shadow:0 0 14px rgba(124,192,234,.85)}
.ve-satz{padding-bottom:18px}
.ve-satz__t{margin:8px 0 0;display:flex;flex-direction:column;gap:3px;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.18;color:#fff;position:relative}
.ve-satz__t span{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(.3s + var(--i) * .5s)}
.is-live .ve-satz__t span{opacity:1;transform:none}
.ve-satz__t span:last-child{background:linear-gradient(135deg,#B3CCDF 0%,#4DA8DA 55%,#6BC4F0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ve-satz::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:linear-gradient(90deg,rgba(124,192,234,.7),rgba(124,192,234,0));transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.22,1,.36,1) .5s}
.is-live .ve-satz::after{transform:scaleX(1)}
.ve-preis__skala{position:relative;height:56px;margin:30px 4px 0}
.ve-preis__spur{position:absolute;left:0;right:0;top:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.07)}
.ve-preis__band{position:absolute;left:0;top:8px;height:8px;width:0;border-radius:4px;background:linear-gradient(90deg,#4DA8DA,#7CC0EA);box-shadow:0 0 18px rgba(124,192,234,.6);transition:width 1.3s cubic-bezier(.22,1,.36,1) .35s}
.is-live .ve-preis__band{width:var(--pct,20%)}
.ve-preis__m{position:absolute;top:24px;left:var(--p);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:rgba(179,204,223,.6);white-space:nowrap}
.ve-preis__m::before{content:"";width:1px;height:6px;background:rgba(255,255,255,.18);margin-top:-6px}
.ve-preis__m--erste{transform:translateX(0);align-items:flex-start}.ve-preis__m--letzte{transform:translateX(-100%);align-items:flex-end}
.ve-preis__m--h{color:#fff;opacity:0;transition:opacity .5s ease 1.4s;top:8px;padding-top:0;margin-top:-22px}.ve-preis__m--h::before{display:none}.ve-preis__m--h::after{content:"";width:1px;height:10px;background:#7CC0EA;box-shadow:0 0 10px rgba(124,192,234,.9);margin-top:2px}.is-live .ve-preis__m--h{opacity:1}
.ve-preis__m--h::before{background:#7CC0EA;box-shadow:0 0 10px rgba(124,192,234,.9)}
@media (max-width:1023px){.ve-seit{margin-left:0;width:100%}.ve__fuss{font-size:12px}.ve-rekord__feld{height:78px;gap:3px}.ve-besitz__reihe{gap:6px}.ve-besitz__z{padding:11px 10px 12px}.ve-besitz__i{width:22px;height:22px}.ve-besitz__z b{font-size:20px}.ve-leute__reihe{gap:6px}.ve-leute__f{width:24px}.ve-takt__tag{height:50px;gap:6px}.ve-dauer__m{font-size:10px;letter-spacing:.06em;gap:8px}.ve-satz__t{font-size:23px;line-height:1.2}.ve-preis__m{font-size:10px;letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){.ve-rekord__j,.ve-rekord__spitze,.ve-takt__t{transform:none;opacity:1;transition:none}.ve-besitz__z,.ve-orte__p,.ve-leute__f,.ve-satz__t span,.ve-preis__m--h,.ve-leute__plus{opacity:1;transform:none;transition:none}.ve-besitz__i,.ve-leute__f{color:#7CC0EA}.ve-dauer__fluss{width:75%;transition:none}.ve-dauer__m b{transform:scale(1);transition:none}.ve-preis__band{width:20%;transition:none}.ve-satz::after{transform:scaleX(1);transition:none}.is-live .ve-seit i,.is-live .ve-orte__p .ve-orte__ring{animation:none}.fs__ghost{display:none}}

/* Wortmarken-Panel (nur Zeichen im Cockpit) */
.fs__media--wort,.fs__q-media--wort{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(70% 70% at 50% 40%,rgba(38,107,166,.28),rgba(12,20,28,0) 70%),linear-gradient(160deg,#1a2532 0%,#0f171f 100%)}
.fs__media--wort img{width:auto!important;height:64px!important;object-fit:contain!important;filter:brightness(0) invert(1)!important;opacity:.92;image-rendering:auto}
.fs__media--wort span{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1;color:#fff;text-align:center;padding:0 24px;letter-spacing:.01em}
.fs__q-media--wort{gap:6px}.fs__q-media--wort img{width:auto!important;height:26px!important;object-fit:contain!important;filter:brightness(0) invert(1)!important;opacity:.9}
.fs__q-media--wort span{font-family:var(--font-display);font-size:13px;line-height:1.1;color:#fff;text-align:center;padding:0 10px}
.ve-orte__weg{fill:none;stroke:rgba(124,192,234,.55);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s cubic-bezier(.22,1,.36,1) .35s}
.is-live .ve-orte__weg{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.ve-orte__weg{stroke-dashoffset:0;transition:none}}
/* Bühne: Höhe folgt der aktiven Karte */
.fs__stage{display:block!important;position:relative;transition:height .6s cubic-bezier(.22,1,.36,1)}
.fs__case{position:absolute;left:0;top:0;width:100%}
.fs__ghost>*{width:100%;height:100%;display:flex}
/* Runde 9: Ziel-Kennzeichnung, Ortschips, gestaffelter Aufbau, stärkerer Abgang */
.fs__ziele{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 4px}
.fs__ziel{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(236,239,248,.78);background:rgba(255,255,255,.03)}
.fs__ziel::before{content:"";width:6px;height:6px;border-radius:50%;background:#7CC0EA}
.fs__ziel--m::before{background:#B3CCDF}
.ve-chips__l{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.ve-chips__c{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-family:var(--font-ui);font-size:13px;font-weight:500;color:#fff;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.4,.64,1),border-color .5s ease;transition-delay:calc(.3s + var(--i) * .16s)}
.ve-chips__c i{width:14px;height:14px;color:#7CC0EA;display:inline-flex}.ve-chips__c i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-live .ve-chips__c{opacity:1;transform:none;border-color:rgba(124,192,234,.3)}
.ve-chips__c:first-child{background:rgba(124,192,234,.1)}
/* Karteninhalt baut sich gestaffelt auf, sobald die Karte aktiv ist */
.fs__body>*{transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.fs__body>:nth-child(1){transition-delay:.05s}.fs__body>:nth-child(2){transition-delay:.1s}.fs__body>:nth-child(3){transition-delay:.15s}.fs__body>:nth-child(4){transition-delay:.2s}.fs__body>:nth-child(5){transition-delay:.28s}.fs__body>:nth-child(6){transition-delay:.36s}.fs__body>:nth-child(7){transition-delay:.42s}
.fs__case.is-entering .fs__body>*{opacity:0;transform:translateY(16px);transition:none}
.fs__case.is-leaving{transform:translateX(-36px) scale(.985);filter:blur(1.5px);transition:opacity .4s ease,transform .5s cubic-bezier(.4,0,.6,1),filter .4s ease}
.fs__case .fs__media{transition:opacity .25s ease}.fs__case.is-ghosted .fs__media{opacity:0}.fs__case.is-entering{transform:none!important;transition:none!important}
.fs__case.is-leaving{transition-delay:0s}
.fs__ghost{box-shadow:none;transition:transform .56s cubic-bezier(.25,.9,.3,1),border-radius .56s cubic-bezier(.25,.9,.3,1),opacity .22s ease .5s}.fs__ghost.is-flying{opacity:0}
@media (prefers-reduced-motion:reduce){.fs__case.is-ghosted .fs__media{opacity:1}.ve-chips__c{opacity:1;transform:none;transition:none}.fs__case.is-entering .fs__body>*{opacity:1;transform:none}.fs__case.is-leaving{transform:none;filter:none}}

/* Runde 11: linke Spalte = Bild + Belege, rechte Spalte = Kopf + Element */
.fs__left{display:flex;flex-direction:column;gap:16px;min-width:0}
.fs__aside{display:flex;flex-direction:column;gap:12px;padding:0 2px}
.fs__aside>*{transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.fs__aside>:nth-child(1){transition-delay:.3s}.fs__aside>:nth-child(2){transition-delay:.4s}
.fs__case.is-entering .fs__aside>*{opacity:0;transform:translateY(16px);transition:none}
.fs__aside .fs__subst{margin:0}
.fs__aside .fs__details{margin-top:2px}
@media (max-width:1023px){.fs__left{display:contents}.fs__media{order:0}.fs__body{order:1}.fs__aside{order:2;padding:0}}
@media (prefers-reduced-motion:reduce){.fs__case.is-entering .fs__aside>*{opacity:1;transform:none}}

/* Runde 12: Speicher auf dem Handy — unsichtbare Karten sind wirklich weg, kein Dauer-Layer je Karte, Glow-Filter nur am Desktop */
.fs__case{visibility:hidden;will-change:auto;contain:layout paint style}
.fs__case.is-active,.fs__case.is-leaving{visibility:visible}
.fs__q-media img,.fs__media img{will-change:auto}
@media (max-width:1023px){.gc__l--glow{display:none}.fs__case{contain:layout paint style}.fs__stage{will-change:auto}}

/* Runde 13: Wischen auf dem Handy, Logo-Wand ohne Nachlade-Ruckler */
@media (max-width:1023px){.fs__stage{touch-action:pan-y;overflow:visible}.fs__case{user-select:none;-webkit-user-select:none}.fs__media img{-webkit-touch-callout:none;pointer-events:none}}
.fs__case.is-peek{visibility:visible;opacity:1;transition:none;pointer-events:none}
.fs__case.is-dragging{transition:none!important}
.fs__case.is-swiping{visibility:visible;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s ease!important}
.pw__row li{contain:layout paint}

/* Runde 14: die nächste Karte ist rechts angedeutet, damit klar ist, dass man wischen kann */
@media (max-width:1023px){
.fs{--card-w:calc(100vw - 56px)}
.fs__viewport{padding-right:0}
.fs__case.is-next{visibility:visible;opacity:.62;transform:translateX(calc(100% + 14px));pointer-events:none;max-height:100%;overflow:hidden;transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.fs__case.is-next.is-peek{opacity:1}
.fs__arrow--r{right:22px}
}

/* Runde 15: zweite Nachbarkarte steht bereit, Player-Box, nächste Karte ohne Einblend-Animation */
@media (max-width:1023px){
.fs__case.is-next{transition:none}
.fs__case.is-next2{visibility:visible;opacity:.62;transform:translateX(calc(200% + 28px));pointer-events:none;max-height:100%;overflow:hidden;transition:none}
.fs__case.is-swiping{transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s ease!important}
}
.fs__media--player{display:block;position:relative;width:100%;border-radius:14px;overflow:hidden;background:#000}

/* ===================================================================
   BEWERTUNGEN (Startseite) — 23.09.2026, Erich/Claude. Markup: section-stimmen-home.html
   =================================================================== */

/* ===== Bewertungen, Runde 1 (23.09.2026): Google + Trustpilot in einem Band ===== */
.rv-sec{padding:clamp(56px,7vw,96px) 0}
.rv-scores{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:26px auto 0;align-items:stretch}
.rv-score--google{display:flex;flex-direction:column;justify-content:center;gap:5px;width:230px;min-height:110px;padding:14px 18px;box-sizing:border-box}
.rv-score__wort{font-family:var(--font-ui);font-weight:700;font-size:17px;line-height:1.1;color:inherit}
.rv-score--google .rv__stars i{width:22px;height:22px;gap:3px}.rv-score--google .rv__stars{gap:3px}
.rv-score--google .rv-score__n{font-family:var(--font-ui);font-size:12.5px;color:rgba(16,24,32,.62)}.rv-score--google .rv-score__n b{font-weight:700;color:inherit}
.rv-score__logo{display:flex;width:74px;height:24px;margin-top:2px}.rv-score__logo svg{width:100%;height:100%}
.rv-score--tp{width:230px;min-height:110px;display:flex;align-items:center;justify-content:center;padding:0 0 0 6px;box-sizing:border-box;overflow:hidden}
.rv-scores--dark .rv-score--google .rv-score__n{color:rgba(255,255,255,.62)}.rv-scores--dark .rv-score__wort{color:#fff}
.rv-score{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:2px;padding:12px 18px 12px 14px;border-radius:16px;background:#fff;border:1px solid rgba(16,24,32,.1);box-shadow:0 10px 30px -18px rgba(6,10,14,.25);text-decoration:none;color:#101820}
.rv-score__ic{grid-row:1/3;width:34px;height:34px;display:flex}.rv-score__ic svg{width:100%;height:100%}
.rv-score__num{font-family:var(--font-display);font-size:26px;line-height:1;color:#101820}
.rv-score .rv__stars{grid-column:2;grid-row:1;justify-self:end;margin-left:8px}
.rv-score__n{grid-column:2/4;grid-row:2;font-family:var(--font-ui);font-size:12.5px;color:rgba(16,24,32,.62)}
.rv-score:has(.rv__stars){grid-template-columns:auto auto auto}
.rv-scores--dark .rv-score{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.rv-scores--dark .rv-score__num{color:#fff}.rv-scores--dark .rv-score__n{color:rgba(255,255,255,.62)}
.rv__stars{display:inline-flex;gap:2px}.rv__stars i{width:15px;height:15px;display:inline-flex;color:rgba(16,24,32,.14)}.rv__stars i svg{width:100%;height:100%;fill:currentColor}.rv__stars i.is-on{color:#F5B301}
.rv__stars--tp i.is-on{color:#00B67A}.rv:has(.rv__ic--trustpilot) .rv__stars i.is-on{color:#00B67A}
.rv-grid[hidden]{display:none}.rv__stars--gold i.is-on{color:#F5B301}
.rv{flex:none;width:340px;padding:18px 20px 20px;border-radius:18px;background:#fff;border:1px solid rgba(16,24,32,.09);box-shadow:0 14px 34px -22px rgba(6,10,14,.28);display:flex;flex-direction:column;gap:10px;min-width:0}
.rv__head{display:flex;align-items:center;gap:11px}
.rv__ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#F3F5F8;flex:none}.rv__ic svg{width:18px;height:18px}
.rv__who{display:flex;flex-direction:column;min-width:0}.rv__who b{font-family:var(--font-ui);font-weight:600;font-size:14.5px;color:#101820;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rv__who small{font-family:var(--font-ui);font-size:12px;color:rgba(16,24,32,.55)}
.rv__text{margin:0;font-family:var(--font-ui);font-size:14.5px;line-height:1.5;color:rgba(16,24,32,.82)}
.rv-foot{margin-top:22px;text-align:center}.rv-foot p{font-family:var(--font-ui);font-size:13px;color:rgba(16,24,32,.6)}.rv-foot a{color:#266BA6}
/* A: zwei Reihen, gleiche Richtung, untere schneller, Ränder verblassen */
.rv-band{margin-top:32px;display:flex;flex-direction:column;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.rv-row{overflow:hidden;width:100%}
.rv-track{display:flex;gap:16px;width:max-content;animation:rv-links var(--rv-s,90s) linear infinite;padding:6px 0 10px;will-change:transform}
.rv-row:nth-child(2) .rv-track{--rv-s:70s}
@keyframes rv-links{to{transform:translateX(-50%)}}
@media (hover:hover){.rv-band:hover .rv-track{animation-play-state:paused}}
/* B: dunkle Tafel links, zwei aufsteigende Spalten rechts */
.rv-split{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.rv-panel{position:sticky;top:96px;padding:clamp(24px,3vw,40px);border-radius:24px;background:linear-gradient(160deg,#1F3447 0%,#0C141C 100%);color:#fff;border:1px solid rgba(255,255,255,.08)}
.rv-panel .section-header__title{color:#fff;text-align:left;margin-top:14px}.rv-panel .eyebrow{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12)}
.rv-panel__lead{font-family:var(--font-ui);font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72);margin:12px 0 22px}
.rv-panel .rv-scores{justify-content:flex-start;margin-top:0}
.rv-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:640px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.rv-col{height:640px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:4px}.rv-col::-webkit-scrollbar{display:none}
.rv-coltrack{display:flex;flex-direction:column;gap:16px}
.rv-panel .section-header__title em{color:#BFE3FA}
.rv__mehr{font-family:var(--font-ui);font-size:12.5px;color:#266BA6;margin-top:auto}
.rv{color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}.rv:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(6,10,14,.4)}
.rv-hint{font-family:var(--font-ui);font-size:12.5px;color:rgba(16,24,32,.5);text-align:center;margin:10px 0 0}
.rv-col .rv{width:auto}
@keyframes rv-hoch{to{transform:translateY(-50%)}}

/* C: Wand aus neun Karten, Trustpilot-Karussell darunter */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}.rv-grid .rv{width:auto}
.rv-grid--more{margin-top:16px}
.rv-more{display:flex;justify-content:center;margin-top:22px}
.rv-tp{margin-top:36px;padding-top:28px;border-top:1px solid rgba(16,24,32,.08)}
@media (max-width:1023px){.rv{width:300px;padding:16px}.rv-split{grid-template-columns:1fr}.rv-panel{position:static}.rv-panel .rv-scores{justify-content:center}
/* Handy: die Karten laufen waagerecht in einer Reihe (wischen), der Seiten-Scroll bleibt frei */
.rv-cols{display:block;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.rv-col{height:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:6px 16px 12px}
.rv-col:nth-child(2){display:none}
.rv-coltrack{flex-direction:row;gap:12px;width:max-content}.rv-col .rv{width:300px;scroll-snap-align:start}.rv-grid{grid-template-columns:1fr}.rv-grid .rv:nth-child(n+5){display:none}.rv-grid--more .rv{display:flex}.rv-score{padding:10px 14px}.rv-score__num{font-size:22px}}
@media (prefers-reduced-motion:reduce){.rv-track{animation:none}}


/* ===================================================================
   POTENZIAL-CHECK AUF DER STARTSEITE + HERO-FELD + FOKUS-MODUS — 23.09.2026, Erich/Claude
   =================================================================== */
.pcx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;max-width:560px;width:100%}
.pcx__promise{grid-column:1/-1;margin:0 0 2px 4px;font-family:var(--font-ui);font-size:15.5px;line-height:1.4;color:rgba(255,255,255,.86)}.pcx__promise b{color:#7CC0EA;font-weight:600}
.pcx__field{position:relative;display:flex;align-items:center;min-height:56px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);padding:0 18px 0 12px;transition:border-color .2s,box-shadow .2s,background .2s}
.pcx__field:focus-within{border-color:#4DA8DA;background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(77,168,218,.18)}
.pcx__pin{width:34px;height:34px;border-radius:50%;background:rgba(77,168,218,.14);color:#7CC0EA;display:flex;align-items:center;justify-content:center;flex:none;margin-right:10px}.pcx__pin svg{width:18px;height:18px}
.pcx__field input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:var(--font-ui);font-size:16px}.pcx__field input::placeholder{color:rgba(255,255,255,.5)}
.pcx__btn{min-height:56px;white-space:nowrap}
.pcx__micro{grid-column:1/-1;margin:2px 0 0 18px;font-family:var(--font-ui);font-size:12.5px;color:rgba(255,255,255,.55)}
.pcx__alt{background:none;border:0;padding:0;font:inherit;color:#7CC0EA;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:640px){.pcx{grid-template-columns:1fr}.pcx__btn{justify-content:center}.pcx__micro{margin-left:4px}}
/* Handy: der Würfel-Rahmen wird nicht mit dem Hero mitgezogen, sonst wächst der Würfel in die Vertrauenszeile */
@media (max-width:1023px){.page-home .hv-block{top:auto!important;inset:auto 0 0 0!important;height:min(100%,100svh)}}
/* Einbettung */
.pc-home{background:#0C141C;color:#fff;padding:clamp(56px,7vw,96px) 0}
.pc-home__head{text-align:center;max-width:760px;margin:0 auto clamp(22px,3vw,34px)}
.pc-home__head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.8vw,50px);line-height:1.06;margin:14px 0 12px;color:#fff}.pc-home__head h2 em{font-style:italic;color:#7CC0EA}
.pc-home__lead{font-family:var(--font-ui);font-size:16px;line-height:1.55;color:rgba(255,255,255,.72);margin:0}
.pc-home__wrap{position:relative;max-width:1040px;margin:0 auto;border-radius:22px;overflow:hidden;background:#0B1117;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);display:flex;flex-direction:column}
.pc-home__bar{display:none;align-items:center;justify-content:space-between;padding:12px clamp(14px,3vw,28px);color:#fff;background:#0C141C;border-bottom:1px solid rgba(255,255,255,.08)}
.pc-home__brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-weight:600;font-size:14px}.pc-home__brand svg{width:20px;height:22px;color:#4DA8DA;fill:currentColor}
.pc-home__close{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:8px 14px;font-family:var(--font-ui);font-size:13px;cursor:pointer}
.pc-home__frame{display:block;width:100%;height:clamp(680px,88vh,860px);border:0;background:#0C141C}
.pc-home__note{text-align:center;font-family:var(--font-ui);font-size:12.5px;color:rgba(255,255,255,.5);margin:14px 0 0}.pc-home__note a{color:#7CC0EA}
/* Fokus: Rahmen bildschirmfüllend, Seite dahinter ausgeblendet, kein Scrollen */
html.pc-lock,html.pc-lock body{overflow:hidden!important}
.pc-home__wrap.is-fokus{position:fixed;inset:0;z-index:1000;max-width:none;border-radius:0;border:0;box-shadow:none}
.pc-home__wrap.is-fokus .pc-home__bar{display:flex}
.pc-home__wrap.is-fokus .pc-home__frame{flex:1;height:auto}
body.pc-open > *:not(:has(.is-fokus)){opacity:.1;filter:blur(6px);transition:opacity .45s ease,filter .45s ease;pointer-events:none}
/* Schluss-Karte ohne Foto: fette CTA */
.page-home .ns-finale__card{grid-template-columns:1fr;text-align:center;padding:clamp(30px,4vw,52px);background:radial-gradient(70% 90% at 50% 0%,rgba(38,107,166,.38),rgba(12,20,28,0) 65%),linear-gradient(160deg,#1F3447 0%,#0C141C 75%);border:1px solid rgba(255,255,255,.1)}
.page-home .ns-finale__body{align-items:center;text-align:center;max-width:720px;margin:0 auto}
.page-home .ns-finale__title{font-size:clamp(32px,4.2vw,56px);line-height:1.05}
.page-home .ns-finale__text{max-width:600px;margin-left:auto;margin-right:auto}
.page-home .ns-finale__body .btn{margin:4px 6px 0}.ns-finale__cta2{border-color:rgba(255,255,255,.28);color:#fff}

/* Nachbesserung 23.09.2026: Badges sauber im Raster, Handy-Reihe ohne Überbreite, Schluss-Karte mittig */
.rv-scores .rv-score{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;width:250px;min-height:112px;padding:14px 16px;box-sizing:border-box;grid-template-columns:none}
.rv-scores .rv-score--google .rv__stars{margin:0}
.rv-scores .rv-score--tp{padding:6px 8px 4px 10px;justify-content:center;overflow:visible}
.rv-scores .rv-score--tp .trustpilot-widget{width:230px;min-height:110px}
.rv-scores .rv-score__n{grid-column:auto;grid-row:auto}
@media (max-width:1023px){.rv-split{grid-template-columns:minmax(0,1fr)}.rv-cols,.rv-col{min-width:0;max-width:100%}.rv-col{width:100%}.rv-scores .rv-score{width:100%;max-width:250px}}
.page-home .ns-finale__card{display:flex;flex-direction:column;align-items:center}
.page-home .ns-finale__body{display:flex;flex-direction:column;align-items:center;width:100%}
.ns-finale__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.page-home .ns-finale__body .ns-finale__actions .btn{margin:0}
/* Bewertungs-Tafel im hellen Grau der „Passt das zu dir"-Fläche (#EAEAEC), Zeilen als weiße Karten */
.rv-panel{background:#EAEAEC;border-color:rgba(16,24,32,.08);color:#101820}
.rv-panel .section-header__title{color:#101820}.rv-panel .section-header__title em{color:#266BA6}
.rv-panel .eyebrow{background:#fff;color:rgba(16,24,32,.72);border-color:rgba(16,24,32,.1)}
.rv-panel__lead{color:rgba(16,24,32,.7)}
.rv-scores--zeilen .rv-zeile{background:#fff;border-color:rgba(16,24,32,.08);color:#101820;box-shadow:0 8px 24px -18px rgba(6,10,14,.25)}
.rv-zeile__txt{color:rgba(16,24,32,.62)}.rv-zeile__txt b{color:#101820}
/* Bewertungen: Fläche im hellen Grau wie „Passt das zu dir", Tafel = dieselbe dunkle Karte wie „Der ehrliche Check", Zeilen weiß */
.rv-sec--b{background:#EAEAEC}
.rv-panel{background:linear-gradient(160deg,#26282C 0%,#15171A 100%);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:rgba(255,255,255,.08) 0 1px 0 0 inset,rgba(0,0,0,.35) 0 24px 60px -30px;color:#fff}
.rv-panel .section-header__title{color:#fff}.rv-panel .section-header__title em{color:#8FD3F7}
.rv-panel .eyebrow{background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.14)}
.rv-panel__lead{color:rgba(255,255,255,.72)}
.rv-scores--zeilen .rv-zeile{background:#fff;border-color:rgba(16,24,32,.06);color:#101820;box-shadow:none}
.rv-zeile__txt{color:rgba(16,24,32,.62)}.rv-zeile__txt b{color:#101820}
.rv-sec--b .rv{border-color:rgba(16,24,32,.06)}
.rv-hint{color:rgba(16,24,32,.55)}

/* Nachbesserung 23.09.2026 (Erich, Runde 20 der Startseite): Hero-Zeile einzeilig + pulsendes Feld, Bewertungs-Zeilen,
   Einbettung mit Glow, Schluss-Karte mit Würfel-Standbild  [Block: startseite-r20] */
.pcx{max-width:640px}
@media (min-width:641px){.pcx__promise{white-space:nowrap;font-size:clamp(13.5px,1.05vw,15.5px)}}
@keyframes pcx-puls{0%,100%{box-shadow:0 0 0 0 rgba(77,168,218,0),0 0 0 rgba(77,168,218,0)}50%{box-shadow:0 0 0 5px rgba(77,168,218,.22),0 0 26px rgba(77,168,218,.35)}}
.pcx__field{animation:pcx-puls 2.4s ease-in-out infinite;border-color:rgba(124,192,234,.45)}
.pcx:focus-within .pcx__field,.pcx.has-wert .pcx__field{animation:none}
@media (prefers-reduced-motion:reduce){.pcx__field{animation:none}}
.rv-scores--zeilen{flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}
.rv-scores--zeilen .rv-zeile{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid rgba(16,24,32,.06);color:#101820;text-decoration:none;font-family:var(--font-ui);font-size:13.5px;width:auto;min-width:0}
.rv-zeile__logo{width:20px;height:20px;display:flex;flex:none}.rv-zeile__logo svg{width:100%;height:100%}
.rv-zeile__marke{font-weight:700;font-size:15px;letter-spacing:.01em}
.rv-scores--zeilen .rv__stars i{width:16px;height:16px}
.rv-zeile__txt{margin-left:auto;color:rgba(16,24,32,.62);white-space:nowrap}.rv-zeile__txt b{color:#101820;font-weight:700}
.rv-zeile--tp{padding:12px 14px 10px}.rv-zeile--tp .trustpilot-widget{width:100%;min-height:20px}
.pc-home{position:relative;overflow:hidden}
.pc-home::before{content:"";position:absolute;left:50%;top:38%;width:1100px;height:700px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(38,107,166,.42),rgba(38,107,166,.12) 45%,rgba(12,20,28,0) 72%);filter:blur(10px);pointer-events:none}
.pc-home > .container{position:relative}
.pc-home__wrap{border:1px solid rgba(124,192,234,.22);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 50px 100px -40px rgba(0,0,0,.85),0 0 80px -20px rgba(77,168,218,.35)}
.page-home .ns-finale__card{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;text-align:left;gap:clamp(20px,3vw,44px);padding:0;overflow:hidden}
.page-home .ns-finale__body{align-items:flex-start;text-align:left;max-width:none;margin:0;padding:clamp(28px,4vw,56px) 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px)}
.page-home .ns-finale__text{margin-left:0}
.ns-finale__actions{justify-content:flex-start}
.ns-finale__media--block{margin:0;height:100%;min-height:360px;position:relative;background:#0e1216}
.ns-finale__media--block img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.ns-finale__trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font-family:var(--font-ui);font-size:12.5px;color:rgba(255,255,255,.6)}.ns-finale__trust b{color:#fff;font-weight:600}
@media (max-width:1023px){.page-home .ns-finale__card{grid-template-columns:1fr}.ns-finale__media--block{order:-1;min-height:220px;max-height:260px}.ns-finale__media--block img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}.page-home .ns-finale__body{padding:8px 20px 26px}}
/* [Block: startseite-r20b] Bewertungs-Fläche grau wie „Passt das zu dir", Zeilen auf dem Handy umbrechend */
.page-home .reviews--home.rv-sec--b,.rv-sec--b{background:#EAEAEC}
@media (max-width:1023px){.rv-scores--zeilen .rv-zeile{flex-wrap:wrap;gap:8px 10px}.rv-zeile__txt{margin-left:0;white-space:normal;width:100%}}

/* [Block: startseite-r21] 23.09.2026 — Bewertungen hell ohne Kasten, Schluss-Karte ohne Bild, Check-Seite ohne weißen Streifen */
.rv2{background:#fff;padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px)}
.rv2 .section-header{max-width:760px;margin-left:auto;margin-right:auto}
.rv2__lead{font-family:var(--font-ui);font-size:16px;line-height:1.55;color:rgba(16,24,32,.66);margin:14px auto 0;max-width:620px;text-align:center}
.rv2__badges{display:flex;justify-content:center;align-items:stretch;gap:12px;flex-wrap:wrap;margin:26px auto 0}
.rv2__badge{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:10px 18px 10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(16,24,32,.1);box-shadow:0 10px 30px -18px rgba(6,10,14,.28);color:#101820;text-decoration:none;font-family:var(--font-ui);font-size:14px}
.rv2__badge-txt b,.rv2__badge-n b{font-weight:700}.rv2__badge-n{color:rgba(16,24,32,.62)}
.rv2__badge--tp{padding:10px 22px}.rv2__badge--tp .trustpilot-widget{width:300px;min-height:20px}
.rv2__ic{width:34px;height:34px;border-radius:50%;background:#F3F5F8;display:inline-flex;align-items:center;justify-content:center;flex:none}.rv2__ic svg{width:18px;height:18px}.rv2__ic--lg{width:30px;height:30px;background:none}.rv2__ic--lg svg{width:22px;height:22px}
.rv2__stars{display:inline-flex;gap:2px}.rv2__stars i{width:15px;height:15px;display:inline-flex;color:#F5B301}.rv2__stars i svg{width:100%;height:100%;fill:currentColor}.rv2__stars--trustpilot i{color:#00B67A}
.rv2__rows{display:flex;flex-direction:column;gap:16px;margin-top:34px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.rv2__row{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding:8px 0 12px}.rv2__row::-webkit-scrollbar{display:none}
.rv2__track{display:flex;gap:16px;width:max-content;padding:0 24px}
.rv2__card{flex:none;width:340px;padding:18px 20px 20px;border-radius:18px;background:#fff;border:1px solid rgba(16,24,32,.08);box-shadow:0 14px 34px -22px rgba(6,10,14,.28);display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.rv2__card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(6,10,14,.4)}
.rv2__head{display:flex;align-items:center;gap:11px}.rv2__who{display:flex;flex-direction:column;min-width:0}.rv2__who b{font-family:var(--font-ui);font-weight:600;font-size:14.5px;color:#101820;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rv2__who small{font-family:var(--font-ui);font-size:12px;color:rgba(16,24,32,.55)}
.rv2__text{font-family:var(--font-ui);font-size:14.5px;line-height:1.5;color:rgba(16,24,32,.82)}
.rv2__hint{margin:14px 0 0;text-align:center;font-family:var(--font-ui);font-size:12.5px;color:rgba(16,24,32,.5)}
@media (max-width:1023px){.rv2__card{width:300px;padding:16px}.rv2__track{padding:0 16px}.rv2__badge{width:100%;max-width:360px;justify-content:center;flex-wrap:wrap}}
/* Schluss-Karte: mittig, ohne Bild, mit Siegeln */
.page-home .ns-finale__card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(34px,5vw,64px) clamp(20px,4vw,56px);background:radial-gradient(60% 70% at 50% 0%,rgba(38,107,166,.32),rgba(12,20,28,0) 65%),linear-gradient(160deg,#1F3447 0%,#0C141C 78%);border:1px solid rgba(255,255,255,.1);overflow:visible}
.page-home .ns-finale__body{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto;padding:0}
.page-home .ns-finale__title{font-size:clamp(34px,4.6vw,62px);line-height:1.04}
.page-home .ns-finale__text{max-width:600px;margin:0 auto}
.ns-finale__actions{justify-content:center}
.ns-finale__trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin:28px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);width:100%;font-family:var(--font-ui);font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.62)}
.ns-finale__seal{display:inline-flex;align-items:center;gap:10px;text-align:left}.ns-finale__seal b{color:#fff;font-weight:600}.ns-finale__seal img{width:40px;height:40px}
.ns-finale__num{font-family:var(--font-display);font-size:30px;line-height:1;color:#fff}
.ns-finale__seal--tp .trustpilot-widget{width:240px;min-height:24px}.ns-finale__seal--tp{flex-basis:100%;justify-content:center;margin-top:4px}@media (min-width:900px){.ns-finale__seal--tp{flex-basis:auto;margin-top:0}}
/* Check-Seite: Fläche hinter der Kopfleiste im Ton der Bühne, kein weißer Streifen */
html body.page-potenzial-check,html body.page-potenzial-check > .page{background:#1F2226!important} /* = Startfarbe des Bühnen-Verlaufs, damit Kopfleiste und Bühne EINE Fläche sind */
/* [Block: startseite-r22] Rahmen des Checks wächst mit dem Inhalt (Höhe per postMessage), nie innerer Scroll */
.pc-home__frame,.pc-embed__frame{height:var(--pc-h,860px)!important;min-height:640px;transition:height .35s ease;overflow:hidden}
.pc-home__wrap.is-fokus .pc-home__frame{height:auto!important;min-height:0}

/* [Block: startseite-r23] 23.09.2026 — Kopfleiste auf ALLEN Seiten wie auf der Startseite (schwebend über dem Hero, keine
   helle Fläche darüber); die erste Sektion jeder Unterseite bekommt oben Luft für die Pille. Hero: Knopf + Link statt Ort-Feld. */
body:not(.page-home) .site-header{position:fixed!important;top:0;left:0;right:0}
body:not(.page-home) main > :first-child{border-top:calc(16px + 62px + 16px) solid transparent;background-origin:border-box}
.hero__cta-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--font-ui);font-size:14.5px;font-weight:600;color:#7CC0EA;text-decoration:none;border-bottom:1px solid rgba(124,192,234,.35);padding-bottom:2px;transition:color .2s,border-color .2s}
.hero__cta-link:hover{color:#fff;border-color:#fff}
.hero__aktion{align-items:flex-start}
@media (max-width:1023px){body:not(.page-home) main > :first-child{border-top-width:calc(10px + 54px + 14px)}}

/* [Block: partner-login-r1] 23.09.2026 (Erich) — Menüpunkt „Partner-Login" mit der Live-App-Bühne der
   Anmeldeseite https://app.bese-media.de/. Oberer Teil: die Bühnen-Regeln der App 1:1 (Präfix pa-,
   Farb-Token fest dunkel auf .pa-dunkel, keine Hell-Regeln — die Website läuft mit data-theme="light").
   Unterer Teil: Menüpunkt, Desktop-Panel, Handy-Karte, Telefon als Rund-Knopf. */
.pa-dunkel{--bg: #0e0f11;--bg2: #17191d;--ink: #f4f5f6;--t2: #f4f5f6b8;--t3: #f4f5f680;--t4: #f4f5f652;--line: #ffffff14;--field: #ffffff0d;--field-line: #ffffff29;--app-bg: #131519;--app-side: #101215;--app-card: #1a1d22;--app-line: #ffffff12;--btn-bg: #fff;--btn-ink: #0e0f11;--shine: #0e0f1173;--blitz-a: #2c6ea9;--blitz-b: #1f3447;--em-a: #c4d7e6;--em-b: #6a9fcc;--ok: #5fd49a;--ok-bg: #5fd49a1f;--neu: #8fb8de;--neu-bg: #8fb8de21;--flash: #8fb8de1a;--ki: #9cc2e6;--ki-bg: #9cc2e61f;--ki-glow: #78aadc80;--warn: #e0b35c;--warn-bg: #e0b35c1a;--err: #f0a3ad;--err-bg: #e573821a;--shadow: 0 50px 120px #000000b3, 0 0 0 1px #ffffff0f;--halo: #2c6ea94d;--boden: #0000008c;--glanz-app: #ffffff0d;--kante: #ffffff14;--glanz-platte: #ffffff12;--a1: #2c6ea957;--a1b: #2c6ea91f;--a2: #b3ccdf1a;--a3: #1f34478c;--ease: cubic-bezier(.25, .1, .25, 1);--morph: cubic-bezier(.19, 1, .22, 1);color-scheme:dark;color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
.pa-licht { pointer-events: none; transform: translate3d(var(--licht-x,0), var(--licht-y,0), 0); transition: transform 1.2s var(--morph); position: fixed; inset: 0px; overflow: hidden; }
.pa-licht i { will-change: transform; border-radius: 50%; position: absolute; }
.pa-licht .pa-l1 { background: radial-gradient(closest-side, var(--a1), var(--a1b) 55%, transparent); width: 980px; height: 820px; animation: 24s ease-in-out 0s infinite alternate none running pa-driftA; top: -6%; left: 44%; }
.pa-licht .pa-l2 { background: radial-gradient(closest-side, var(--a2), transparent); width: 860px; height: 700px; animation: 30s ease-in-out 0s infinite alternate none running pa-driftB; top: 38%; left: -14%; }
.pa-licht .pa-l3 { background: radial-gradient(closest-side, var(--a3), transparent); width: 760px; height: 620px; animation: 27s ease-in-out 0s infinite alternate none running pa-driftC; top: 52%; left: 58%; }
@keyframes pa-driftA { 0% { transform: translate(-4%, -3%) scale(0.92); } 100% { transform: translate(6%, 5%) scale(1.08); }
}
@keyframes pa-driftB { 0% { transform: translateY(4%); } 100% { transform: translate(10%, -6%) scale(1.12); }
}
@keyframes pa-driftC { 0% { transform: translate(4%) scale(1.05); } 100% { transform: translate(-8%, -4%) scale(0.9); }
}
.pa-knopf { cursor: pointer; background: var(--btn-bg); width: 100%; height: 56px; color: var(--btn-ink); font: 600 15px var(--font-ui), ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.2px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); border: 0px; border-radius: 999px; justify-content: flex-start; align-items: center; gap: 12px; margin: 0px; padding: 0px 2.4em 0px calc(50% - 98px); display: flex; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px, rgba(0, 0, 0, 0.12) 0px 6px 18px; }
.pa-knopf::before { content: ""; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); background: linear-gradient(rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 100%); position: absolute; inset: 0px; }
.pa-knopf:active::before { opacity: 1; transition-duration: 40ms; }
.pa-knopf:disabled { cursor: progress; justify-content: center; padding: 0px 24px; }
.pa-knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pa-knopfMarke { z-index: 2; transform-origin: 50% center; width: 14px; height: 16px; transition: transform .8s var(--morph); flex: 0 0 auto; display: block; position: relative; }
.pa-knopfMarke svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pa-knopfMarke path { fill: var(--btn-ink); }
.pa-knopfText { background-image: linear-gradient(100deg, var(--btn-ink) 0%, var(--btn-ink) 42%, var(--shine) 50%, var(--btn-ink) 58%, var(--btn-ink) 100%); color: rgba(0, 0, 0, 0); transition: transform .8s var(--morph); background-position: 0px center; background-size: 300% 100%; background-clip: text; animation: 9s linear 0s infinite normal none running pa-textShine; display: inline-flex; }
@keyframes pa-textShine { 0% { background-position: 0px center; } 100% { background-position: -300% center; }
}
.pa-knopf:not(:disabled):active { transition-duration: 80ms; transform: translateY(0px); }
@keyframes pa-blitz { 0%, 17% { fill: var(--btn-ink); } 18%, 26% { fill: var(--blitz-a); } 27%, 40% { fill: var(--btn-ink); } 41%, 50% { fill: var(--blitz-b); } 51%, 100% { fill: var(--btn-ink); }
}
.pa-p1, .pa-p2, .pa-p3 { fill: var(--btn-ink); }
.pa-live { background: var(--neu-bg); height: 20px; color: var(--neu); letter-spacing: 0.06em; border-radius: 99px; align-items: center; gap: 6px; padding: 0px 8px; font-size: 10px; font-weight: 700; display: inline-flex; }
.pa-live i { background: currentcolor; border-radius: 9px; width: 6px; height: 6px; animation: 1.6s ease-in-out 0s infinite normal none running pa-puls; }
@keyframes pa-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; }
}
.pa-reiter { box-shadow: inset 0 0 0 1px var(--app-line); border-radius: 99px; flex: 0 0 auto; padding: 3px; display: inline-flex; position: relative; }
.pa-reiter button { z-index: 1; cursor: pointer; height: 26px; font: 600 11px var(--font-ui), sans-serif; color: var(--t3); background: 0px 0px; border: 0px; border-radius: 99px; padding: 0px 12px; transition: color 0.35s; position: relative; }
.pa-reiter button.pa-reiterAn { color: var(--app-bg); }
.pa-reiterDaumen { background: var(--ink); border-radius: 99px; width: calc(50% - 3px); height: 26px; transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1); position: absolute; top: 3px; left: 3px; }
.pa-reiterRechts { transform: translate(100%); }
.pa-reiter button { width: 76px; }
.pa-reiterKlein button { width: 70px; height: 24px; font-size: 10.5px; }
.pa-reiterKlein .pa-reiterDaumen { height: 24px; }
.pa-kiMarke { letter-spacing: 0.12em; text-transform: uppercase; color: var(--ki); white-space: nowrap; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; display: inline-flex; }
.pa-kiMarke svg { width: 13px; height: 13px; }
.pa-kiTag { color: var(--ki); margin-right: 6px; font-weight: 700; }
.pa-q { min-width: 0px; }
.pa-q b { white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; display: block; overflow: hidden; }
.pa-q small { color: var(--t3); white-space: nowrap; text-overflow: ellipsis; margin-top: 2px; font-size: 10.5px; display: block; overflow: hidden; }
.pa-chip { white-space: nowrap; border-radius: 99px; align-items: center; gap: 6px; height: 26px; padding: 0px 11px; font-size: 11px; font-weight: 700; display: inline-flex; }
.pa-chip svg { width: 12px; height: 12px; }
.pa-chipOk { background: var(--ok-bg); color: var(--ok); animation: 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0s 1 normal none running pa-auf; }
.pa-chipAngebot { box-shadow: inset 0 0 0 1px var(--app-line); color: var(--t2); animation: 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0s 1 normal none running pa-auf; }
.pa-chipKi { box-shadow: inset 0 0 0 1px var(--ki-bg); background-image: linear-gradient(100deg, var(--t3) 35%, var(--ki) 50%, var(--t3) 65%); color: rgba(0, 0, 0, 0); background-size: 250% 100%; background-clip: text; animation: 1.6s linear 0s infinite normal none running pa-schimmer; }
.pa-chipKi::before { content: "✦"; -webkit-text-fill-color: var(--ki); color: var(--ki); }
@keyframes pa-schimmer { 0% { background-position: 100% 0px; } 100% { background-position: -50% 0px; }
}
@keyframes pa-auf { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: none; }
}
.pa-frisch { animation: 2.4s ease-out 0s 1 normal none running pa-frisch; }
@keyframes pa-frisch { 0%, 30% { background: var(--flash); } 100% { background: 0px 0px; }
}
.pa-kOk { background: var(--ok-bg); width: 15px; height: 15px; color: var(--ok); border-radius: 99px; flex: 0 0 auto; place-items: center; font-style: normal; display: grid; }
.pa-kOk svg { width: 9px; height: 9px; }
.pa-ok { color: var(--ok); }
.pa-buehne { width: calc(var(--breite,826px) + 60px); height: 840px; transform: scale(var(--skala,1)); transform-origin: 0px 0px; animation: pa-buehneRein 1.3s var(--morph) .2s both; position: absolute; top: 0px; left: 0px; }
@keyframes pa-buehneRein { 0% { opacity: 0; translate: 80px 10px; } 100% { opacity: 1; translate: 0px; }
}
.pa-halo { width: calc(var(--breite,826px) + 54px); background: radial-gradient(closest-side, var(--halo), transparent); border-radius: 50%; height: 700px; position: absolute; top: 126px; left: 40px; }
.pa-boden { width: calc(var(--breite,826px) + 34px); background: radial-gradient(closest-side, var(--boden), transparent); border-radius: 50%; height: 80px; position: absolute; top: 788px; left: 40px; }
.pa-schwebe { perspective: 2200px; animation: 9s ease-in-out 0s infinite alternate none running pa-schweben; position: absolute; inset: 0px; }
@keyframes pa-schweben { 0% { transform: translateY(-5px); } 100% { transform: translateY(7px); }
}
.pa-fenster { width: var(--breite,826px); background: var(--app-bg); height: 664px; color: var(--ink); box-shadow: var(--shadow); transform: rotateY(var(--ry,-13deg)) rotateX(var(--rx,4deg)); transform-origin: 0px center; border-radius: 16px; grid-template-columns: 184px 1fr; font-size: 12.5px; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); display: grid; position: absolute; top: 124px; left: 12px; overflow: hidden; }
.pa-glanz { z-index: 4; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 var(--kante); background: radial-gradient(520px circle at var(--mx,72%) var(--my,18%), var(--glanz-app), transparent 62%); position: absolute; inset: 0px; }
.pa-seitenleiste { background: var(--app-side); border-right: 1px solid var(--app-line); flex-direction: column; padding: 18px 14px; display: flex; }
.pa-betrieb { border-bottom: 1px solid var(--app-line); align-items: center; gap: 10px; margin-bottom: 14px; padding: 4px 4px 16px; display: flex; }
.pa-betrieb b { letter-spacing: -0.01em; font-size: 13.5px; font-weight: 700; display: block; }
.pa-betrieb small { color: var(--t3); white-space: nowrap; align-items: center; gap: 5px; font-size: 10px; display: flex; }
.pa-betrieb small i { background: var(--ok); border-radius: 9px; width: 6px; height: 6px; }
.pa-emblem { background: var(--ink); width: 36px; height: 36px; color: var(--app-bg); border-radius: 10px; flex: 0 0 auto; place-items: center; display: grid; }
.pa-emblem svg { width: 20px; height: 20px; }
.pa-gruppe { letter-spacing: 0.1em; text-transform: uppercase; color: var(--t4); margin: 10px 8px 6px; font-size: 9px; font-weight: 700; }
.pa-nv { height: 32px; color: var(--t2); border-radius: 8px; align-items: center; gap: 9px; padding: 0px 8px; font-size: 12px; font-weight: 600; transition: background 0.4s, color 0.4s; display: flex; }
.pa-nv svg { width: 15px; height: 15px; color: var(--t3); flex: 0 0 auto; }
.pa-nv em { text-align: center; font-variant-numeric: tabular-nums; background: var(--app-line); min-width: 20px; color: var(--t2); border-radius: 99px; margin-left: auto; padding: 1px 6px; font-size: 10px; font-style: normal; font-weight: 700; }
.pa-nvAn { background: var(--app-card); color: var(--ink); box-shadow: 0 0 0 1px var(--app-line); }
.pa-nvAn svg { color: var(--ink); }
.pa-nvAn em { background: var(--ink); color: var(--app-bg); }
.pa-kiNv svg { color: var(--ki); }
.pa-nv .pa-kiEm { background: var(--ki-bg); color: var(--ki); letter-spacing: 0.04em; font-size: 9px; }
.pa-bese { background: var(--app-card); box-shadow: 0 0 0 1px var(--app-line), 0 6px 18px #00000014; border-radius: 12px; grid-template-columns: 1fr auto; grid-template-areas: "logo status" "sub sub"; align-items: center; gap: 7px 8px; margin-top: auto; padding: 12px 10px 11px; display: grid; position: relative; overflow: hidden; }
.pa-bese::before { content: ""; background: linear-gradient(100deg, transparent 30%, var(--glanz-platte) 50%, transparent 70%); width: 60%; height: 180%; animation: 9s ease-in-out 2s infinite normal none running pa-sheen; position: absolute; top: -40%; left: -30%; transform: translate(-120%); }
@keyframes pa-sheen { 0%, 70% { transform: translate(-120%); } 100% { transform: translate(320%); }
}
.pa-beseGlow { background: radial-gradient(circle, rgba(44, 110, 169, 0.18), rgba(0, 0, 0, 0) 62%); border-radius: 99px; width: 110px; height: 110px; position: absolute; top: -30px; left: -26px; }
.pa-beseMarke { grid-area: logo; width: auto; height: 11px; display: block; position: relative; }
.pa-wortteil, .pa-zeichenteil { fill: rgb(255, 255, 255); }
.pa-beseStatus { letter-spacing: 0.03em; text-transform: uppercase; color: var(--t3); white-space: nowrap; grid-area: status; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; display: inline-flex; position: relative; }
.pa-punktOk { background: var(--ok); width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--ok-bg); border-radius: 9px; }
.pa-beseSub { color: var(--t3); white-space: nowrap; font-variant-numeric: tabular-nums; grid-area: sub; font-size: 10px; position: relative; }
.pa-haupt { flex-direction: column; gap: 16px; padding: 20px 22px; display: flex; overflow: hidden; }
.pa-kopf { display: block; }
.pa-kopfZeile { align-items: center; gap: 16px; display: flex; }
.pa-kopf h3 { letter-spacing: -0.01em; margin: 0px; font-size: 19px; font-weight: 700; }
.pa-kopf p { color: var(--t3); align-items: center; gap: 7px; margin: 4px 0px 0px; font-size: 11.5px; display: flex; }
.pa-kiPill { color: var(--ki); align-items: center; gap: 5px; font-weight: 600; display: inline-flex; }
.pa-kiPill svg { width: 12px; height: 12px; }
.pa-kpis { grid-template-columns: 136px 136px 146px 170px 150px; gap: 10px; display: grid; }
.pa-kpi { background: var(--app-card); height: 104px; box-shadow: 0 0 0 1px var(--app-line); border-radius: 12px; padding: 13px 14px; position: relative; overflow: hidden; }
.pa-kl { letter-spacing: 0.09em; text-transform: uppercase; color: var(--t3); white-space: nowrap; font-size: 9px; font-weight: 700; }
.pa-klZeile { justify-content: space-between; align-items: center; gap: 8px; display: flex; }
.pa-kn { letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 8px; font-size: 26px; font-weight: 700; }
.pa-kn small { letter-spacing: 0px; margin-left: 4px; font-size: 13px; font-weight: 600; }
.pa-ku { color: var(--t3); white-space: nowrap; margin-top: 4px; font-size: 10.5px; }
.pa-ku b { color: var(--ink); font-weight: 700; }
.pa-ku b.pa-ok { color: var(--ok); }
.pa-mix { border-radius: 3px; gap: 2px; height: 5px; margin-top: 9px; display: flex; overflow: hidden; }
.pa-mix i { background: var(--ink); height: 100%; display: block; }
.pa-mix i:nth-child(2) { opacity: 0.45; }
.pa-mix i:nth-child(3) { opacity: 0.2; }
.pa-mixText { color: var(--t3); white-space: nowrap; margin-top: 5px; font-size: 10px; }
.pa-auslast .pa-kn { margin-top: 6px; font-size: 22px; }
.pa-auslast .pa-kn small { color: var(--t3); }
.pa-drossel { color: var(--t3); white-space: nowrap; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; display: inline-flex; }
.pa-drossel i { background: var(--ink); border-radius: 99px; width: 22px; height: 12px; position: relative; }
.pa-drossel i::after { content: ""; background: var(--app-bg); border-radius: 99px; width: 8px; height: 8px; position: absolute; top: 2px; right: 2px; }
.pa-balken { align-items: flex-end; gap: 5px; height: 22px; display: flex; position: absolute; bottom: 23px; left: 14px; right: 14px; }
.pa-balken i { background: var(--ink); opacity: 0.85; transform-origin: center bottom; border-radius: 3px 3px 1px 1px; flex: 1 1 0%; animation: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s 1 normal both running pa-wachsen; }
.pa-balken i:nth-child(2) { animation-delay: 0.88s; }
.pa-balken i:nth-child(3) { animation-delay: 0.96s; }
.pa-balken i:nth-child(4) { animation-delay: 1.04s; }
.pa-balken i:nth-child(5) { animation-delay: 1.12s; }
.pa-balken .pa-frei { opacity: 0.22; }
@keyframes pa-wachsen { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); }
}
.pa-monate { gap: 5px; display: flex; position: absolute; bottom: 9px; left: 14px; right: 14px; }
.pa-monate span { text-align: center; color: var(--t3); flex: 1 1 0%; font-size: 8px; font-weight: 700; }
.pa-kiBand { background: var(--app-card); height: 44px; box-shadow: 0 0 0 1px var(--ki-bg), inset 0 0 40px -30px var(--ki-glow); border-radius: 12px; flex: 0 0 auto; align-items: center; gap: 14px; padding: 0px 14px; display: flex; }
.pa-kiSchritte { flex: 1 1 0%; align-items: center; gap: 8px; min-width: 0px; display: flex; }
.pa-ks { color: var(--t3); white-space: nowrap; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; display: inline-flex; }
.pa-ks > i:not(.pa-kOk) { width: 8px; height: 8px; box-shadow: inset 0 0 0 1.5px var(--ki); border-radius: 9px; flex: 0 0 auto; }
.pa-kLinie { background: var(--app-line); border-radius: 2px; flex: 0 0 64px; min-width: 14px; height: 2px; overflow: hidden; }
.pa-kLinie b { background: var(--ki); transform-origin: 0px center; height: 100%; display: block; transform: scaleX(0); }
.pa-ta .pa-s1 { animation: 2.8s ease 0s 1 normal both running pa-anA; }
.pa-tb .pa-s1 { animation: 2.8s ease 0s 1 normal both running pa-anB; }
.pa-ta .pa-l1 b { animation: 2.8s ease 0s 1 normal both running pa-laufA; }
.pa-tb .pa-l1 b { animation: 2.8s ease 0s 1 normal both running pa-laufB; }
.pa-ta .pa-s2 { animation: 2.8s ease 0.7s 1 normal both running pa-anA; }
.pa-tb .pa-s2 { animation: 2.8s ease 0.7s 1 normal both running pa-anB; }
.pa-ta .pa-l2 b { animation: 2.8s ease 0.7s 1 normal both running pa-laufA; }
.pa-tb .pa-l2 b { animation: 2.8s ease 0.7s 1 normal both running pa-laufB; }
.pa-ta .pa-s3 { animation: 2.8s ease 1.4s 1 normal both running pa-anA; }
.pa-tb .pa-s3 { animation: 2.8s ease 1.4s 1 normal both running pa-anB; }
@keyframes pa-anA { 0% { color: var(--t3); } 10%, 100% { color: var(--ink); }
}
@keyframes pa-anB { 0% { color: var(--t3); } 10%, 100% { color: var(--ink); }
}
@keyframes pa-laufA { 0%, 8% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); }
}
@keyframes pa-laufB { 0%, 8% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); }
}
.pa-tabelle { background: var(--app-card); min-height: 0px; box-shadow: 0 0 0 1px var(--app-line); border-radius: 12px; flex-direction: column; flex: 1 1 0%; display: flex; overflow: hidden; }
.pa-th, .pa-zeile { grid-template-columns: 250px 180px 170px minmax(120px, 1fr); align-items: center; gap: 12px; padding: 0px 16px; display: grid; }
.pa-quelle { color: var(--t3); white-space: nowrap; padding-left: 18px; font-size: 11px; font-weight: 600; }
.pa-th { border-bottom: 1px solid var(--app-line); letter-spacing: 0.09em; text-transform: uppercase; height: 34px; color: var(--t3); flex: 0 0 auto; font-size: 9px; font-weight: 700; }
.pa-th span:nth-child(3) { text-align: right; }
.pa-th span:nth-child(4) { padding-left: 18px; }
.pa-liste { flex: 1 1 0%; animation: 0.6s ease 0s 1 normal none running pa-einblenden; position: relative; overflow: hidden; }
@keyframes pa-einblenden { 0% { opacity: 0; } 100% { opacity: 1; }
}
.pa-zeile { border-bottom: 1px solid var(--app-line); will-change: transform, opacity; height: 56px; transition: transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.95s; position: absolute; top: 0px; left: 0px; right: 0px; }
.pa-akt { justify-content: flex-end; min-width: 0px; display: flex; }
.pa-tu { white-space: nowrap; border-radius: 99px; align-items: center; gap: 6px; height: 28px; padding: 0px 12px; font-size: 11px; font-weight: 600; animation: 0.45s ease 0s 1 normal none running pa-auf; display: inline-flex; }
.pa-tuZu { box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink); }
.pa-tuZu::before { content: "+"; color: var(--t3); font-weight: 700; }
.pa-tuPlan { color: var(--t2); padding-right: 0px; }
.pa-tuPlan::before { content: ""; background: var(--ink); width: 14px; height: 14px; box-shadow: inset 0 0 0 4px var(--app-card); border-radius: 99px; }
.pa-mStapel { perspective: 760px; perspective-origin: 50% -20%; height: 200px; margin: 0px -4px; position: relative; }
.pa-mEbene { transform-origin: 50% 0px; transform-style: preserve-3d; animation: 0.6s ease 0s 1 normal none running pa-einblenden; position: absolute; inset: 0px; transform: rotateX(22deg); }
.pa-mKarte { background: var(--app-card); height: 54px; box-shadow: 0 0 0 1px var(--app-line), 0 14px 30px #0000002e; will-change: transform, opacity; border-radius: 14px; justify-content: space-between; align-items: center; gap: 10px; padding: 0px 14px; transition: transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.95s; display: flex; position: absolute; top: 0px; left: 0px; right: 0px; }
.pa-mKarte .pa-q b { font-size: 13.5px; }
.pa-mKarte .pa-q small { font-size: 11px; }
.pa-titel-em,.pa-panel__titel em{font-style:italic;background:linear-gradient(100deg,var(--em-a),var(--em-b));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 -.08em;padding:0 .08em}
.pa-knopf{text-decoration:none}
@media (hover:hover){
  .pa-knopf:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.22),0 8px 22px rgba(0,0,0,.14)}
  .pa-knopf:hover .pa-knopfMarke{transform:translate(.35em) scale(1.06)}
  .pa-knopf:hover .pa-knopfText{transform:translate(.8em)}
  .pa-knopf:hover .pa-p1{animation:pa-blitz 1.2s ease-out}
  .pa-knopf:hover .pa-p2{animation:pa-blitz 1.2s ease-out .12s}
  .pa-knopf:hover .pa-p3{animation:pa-blitz 1.2s ease-out .24s}
}
.pa-knopfMarke use{fill:var(--btn-ink)}

/* ── Kopfleiste: fünfte Spalte für den Partner-Login, Telefon als Rund-Knopf ── */
@media (min-width:1180px){
  .navbar .container.navbar__inner{grid-template-columns:auto 1fr auto auto auto;position:relative}
  .site-header .navbar__phone,html[data-theme="light"] .site-header.is-dark .navbar__phone{position:relative;width:42px;height:42px;padding:0!important;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important}
  .site-header .navbar__phone .icon{width:17px;height:17px}
  .site-header .navbar__phone .navbar__phone-number{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-4px);padding:8px 13px;border-radius:10px;background:#0f1419;color:#fff;font-size:13.5px;box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;text-decoration:none}
  .site-header .navbar__phone:hover .navbar__phone-number,.site-header .navbar__phone:focus-visible .navbar__phone-number{opacity:1;transform:translate(-50%,0)}
}
.nav-partner{display:none}
@media (min-width:1180px){.nav-partner{display:block;position:static}}
.nav-partner__link{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));color:#fff;font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.1px;text-decoration:none;white-space:nowrap;transition:border-color .25s ease,background .25s ease}
.nav-partner__link:hover,.nav-partner.is-offen .nav-partner__link{border-color:rgba(143,184,222,.5);background:linear-gradient(180deg,rgba(143,184,222,.16),rgba(143,184,222,.05))}
.nav-partner__link:focus-visible{outline:2px solid #8fb8de;outline-offset:3px}
@media (min-width:1180px) and (max-width:1319px){
  .nav-link,.site-header.is-scrolled .nav-link{padding:8px 7px}
  .navbar .container.navbar__inner{gap:10px}
  .nav-partner__link{padding:0 13px;gap:9px;font-size:13.5px}
  .navbar__cta.btn-accent-signature{padding-right:1.6em}
}

/* ── Desktop-Panel ── */
.pa-panel{position:absolute;top:calc(100% + 12px);right:0;width:min(880px,calc(100vw - 32px));height:400px;border-radius:24px;overflow:hidden;
  background:linear-gradient(168deg,#25282d 0%,#1a1c20 48%,#111214 100%);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:85% 0;transition:opacity .3s ease,transform .45s cubic-bezier(.19,1,.22,1),visibility 0s linear .3s;z-index:5}
.nav-partner.is-offen .pa-panel{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.19,1,.22,1)}
.pa-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.pa-panel .pa-licht,.pa-karte .pa-licht{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pa-panel .pa-licht .pa-l1{width:620px;height:520px;top:-30%;left:40%}
.pa-panel .pa-licht .pa-l2{width:520px;height:440px;top:30%;left:-20%}
.pa-panel .pa-licht .pa-l3{width:480px;height:400px;top:45%;left:55%}
.pa-panel:not(.is-laeuft) .pa-licht i,.pa-karte:not(.is-laeuft) .pa-licht i{animation-play-state:paused}
.pa-panel__text{position:relative;z-index:2;width:340px;height:100%;padding:32px 0 28px 36px;display:flex;flex-direction:column}
.pa-panel__text > *{flex-shrink:0}
.pa-panel__kopf{display:flex;align-items:center;gap:10px;margin:0;color:var(--t2);font-size:12px;font-weight:600;letter-spacing:.2px}
.pa-panel__titel{margin:16px 0 0;font-family:var(--font-display);font-size:42px;line-height:1.02;letter-spacing:-.02em;color:var(--ink);font-weight:400}
.pa-panel__lead{margin:12px 0 20px;color:var(--t2);font-size:13.5px;line-height:1.55;max-width:280px}
.pa-panel .pa-knopf{height:50px;width:284px;padding:0 2em 0 calc(50% - 88px);font-size:14.5px;white-space:nowrap}
.pa-panel__hilfe{margin:auto 0 0;padding-top:14px;color:var(--t3);font-size:12px;line-height:1.5;max-width:270px}
.pa-panel__hilfe b{color:var(--t2);font-weight:600}
.pa-panel__buehne{position:absolute;z-index:1;top:0;bottom:0;left:330px;right:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px);mask-image:linear-gradient(to right,transparent 0,#000 34px)}
.pa-panel__buehne .pa-buehne{--breite:960px;--skala:.56;top:-44px;left:14px;animation:none}
.nav-partner.is-offen .pa-panel__buehne .pa-buehne{animation:pa-buehneRein 1.1s var(--morph) .05s both}
.pa-panel:not(.is-laeuft) .pa-schwebe,.pa-panel:not(.is-laeuft) .pa-bese::before{animation-play-state:paused}

/* ── Handy: dunkle Karte im Menü ── */
.pa-karte{position:relative;display:block;overflow:hidden;margin:8px 4px 0;padding:14px 16px 0;border-radius:18px;text-decoration:none;
  background:linear-gradient(168deg,#25282d 0%,#1a1c20 55%,#111214 100%);box-shadow:0 14px 34px rgba(6,10,14,.28),0 0 0 1px rgba(255,255,255,.06);-webkit-tap-highlight-color:transparent}
.pa-karte .pa-licht .pa-l1{width:360px;height:300px;top:-40%;left:30%}
.pa-karte .pa-licht .pa-l2{width:320px;height:260px;top:30%;left:-30%}
.pa-karte__kopf{position:relative;display:flex;align-items:center;gap:9px;color:var(--t2);font-size:11.5px;font-weight:600}
.pa-karte__titel{position:relative;display:block;margin-top:8px;font-family:var(--font-display);font-size:31px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.pa-karte__lead{position:relative;display:block;margin-top:5px;color:var(--t2);font-size:12.5px}
.pa-karte__pfeil{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:99px;background:#fff;color:#0e0f11}
.pa-karte__pfeil svg{width:17px;height:17px}
.pa-karte__stapel{display:block;height:84px;margin:12px -4px 0;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.pa-karte .pa-mKarte{height:50px}
.pa-karte .pa-mKarte .pa-q b{font-size:13px}
.pa-karte .pa-mKarte .pa-q small{font-size:10.5px}
.pa-karte:active{transform:scale(.99)}
/* Menüzeilen etwas flacher, damit Karte, Telefon, Knopf und Siegel auf einen Handy-Bildschirm passen */
.mobile-nav__link,.mobile-nav__summary{padding-top:12px;padding-bottom:12px}

@media (prefers-reduced-motion:reduce){
  .pa-dunkel *,.pa-dunkel ::before,.pa-dunkel ::after{animation:none!important;transition:none!important}
  .pa-panel{transition:none}
}

/* [Block: partner-login-r2] 23.09.2026 — Knopf = Glas-Pille mit glimmendem LIVE-Punkt (Erich wählte B aus drei Varianten) */
.nav-partner__link{padding:0 18px 0 17px;gap:11px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.nav-partner__live{display:block;flex:none;width:7px;height:7px;border-radius:9px;background:#8fb8de;animation:pl-glimm 2.2s ease-in-out infinite}
@keyframes pl-glimm{0%,100%{box-shadow:0 0 0 0 rgba(143,184,222,0),0 0 6px rgba(143,184,222,.5);opacity:1}50%{box-shadow:0 0 0 4px rgba(143,184,222,.14),0 0 10px rgba(143,184,222,.7);opacity:.55}}
@media (prefers-reduced-motion:reduce){.nav-partner__live{animation:none}}
@media (min-width:1180px) and (max-width:1319px){.nav-partner__link{padding:0 13px;gap:9px}}

/* [Block: potenzial-check-hell] 24.09.2026 (Marie) — die eingebettete Potenzial-Check-Section
   läuft auf HELLEM Band, die Kachel mit dem Rechner bleibt dunkel. Gilt für die Startseite
   (.pc-home) und die Auftragsgewinnung (.pc-stage, dieselbe Bühne wie /potenzial-check/).
   Die eigene Seite /potenzial-check/ bleibt dunkel: dort ist die Bühne der Hero unter der
   Kopfleiste (body-Fläche #1F2226, Block startseite-r22). Nur Light-Theme — im Dark-Theme
   bleibt die Section eine Dunkel-Insel. Kein Cyan-Lichtfeld auf Weiß (additives Licht
   braucht dunklen Grund), die Kachel trägt stattdessen einen weichen Schatten. */
html[data-theme="light"] .pc-home{background:#FFFFFF;color:var(--text-100)}
html[data-theme="light"] .pc-home::before{display:none}
html[data-theme="light"] .pc-home__head h2{color:var(--heading-color)}
/* schlägt den Alt-Fallback .pc-home__head h2 em{color:#7CC0EA} — sonst griffe die globale h2-em-Regel nicht */
html[data-theme="light"] .pc-home__head h2 em{color:var(--em-grad-b);background:linear-gradient(180deg,var(--em-grad-a),var(--em-grad-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="light"] .pc-home__lead{color:var(--text-200)}
html[data-theme="light"] .pc-home__note{color:rgba(16,24,32,.64)}
html[data-theme="light"] .pc-home__note a{color:#2C6EA9}
html[data-theme="light"] .pc-home__wrap:not(.is-fokus){border:1px solid rgba(16,24,32,.1);box-shadow:0 40px 90px -40px rgba(6,10,14,.45),0 12px 30px -18px rgba(6,10,14,.25)}

/* Light-Tokens zurück (die Basis setzt auf .pc-stage ein Dark-Paket). --surface-* bewusst nicht: kein Kind im Scope verbraucht sie. */
html[data-theme="light"] .page-auftragsgewinnung .pc-stage{
  --text-100: rgba(16, 24, 32, 0.92);
  --text-200: rgba(16, 24, 32, 0.70);
  --text-300: rgba(16, 24, 32, 0.46);
  --heading-color: rgba(16, 24, 32, 0.92);
  --em-grad-a: #1F3447;
  --em-grad-b: #2C6EA9;
  --accent-hover: #25618F;
  --silver-blue: #44627C;
  --glass-bg: rgba(16, 24, 32, 0.04);
  --glass-border: rgba(16, 24, 32, 0.10);
  --glow-rgb: 44, 110, 169;
  --shadow-rgb: 6, 10, 14;
  --focus-ring: #101820;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
html[data-theme="light"] .page-auftragsgewinnung .pc-stage :is(.pc-stage__light, .pc-stage__noise){display:none}
html[data-theme="light"] .page-auftragsgewinnung .pc-stage .pc-embed__frame{background:#0C141C;box-shadow:0 40px 90px -40px rgba(6,10,14,.45),0 12px 30px -18px rgba(6,10,14,.25)}
/* Naht: „Unsere Methode" trägt unten die knappe Stufe (ab 1180 px tight, 768–1179 px max(tight, 48px)),
   weil dort früher ein dunkler Nachbar folgte (gleicher Ton). Vor dem jetzt hellen Check ist es ein
   Bandwechsel → an ALLEN Breiten voller Abstand (≥ 48 px, der Schatten der CTA-Kachel bleibt frei). */
html[data-theme="light"] .sysapp:has(+ .pc-home){padding-bottom:var(--section-py)}


/* =============================================================================
   APP-SHOWCASE — Handy im iPhone-Gehäuse des AG-Heros · 2026-09-24
   -----------------------------------------------------------------------------
   Marie: „Das Handy-Mockup … sieht nicht wirklich aus wie ein iPhone. Was zum
   Beispiel besser aussieht, ist … die Auftragsgewinnungsseite in der Hero-
   Section." → der flache Bezel mit Notch (.phone-mockup__frame/__notch, CSS
   bleibt als Rückbau-Vorlage stehen) ist durch das Gehäuse .iph__* ersetzt:
   Black-Titanium-Rahmen, vier Seitentasten, schwarzes Glas, Dynamic Island.
   Dazu die Statuszeile (9:41 · Signal) links/rechts neben der Island wie im
   AG-Hero — sie liegt im Polster über dem App-Header und kostet keine Höhe.
   Gilt überall, wo app-showcase.html läuft (EIN Fragment). Der Screen-Inhalt
   ist unverändert, das Gerät füllt weiter die 9 : 19-Box von .phone-mockup.
   ============================================================================= */
.phone-mockup--iph .iph__frame {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(179, 204, 223, 0.18),
    0 30px 60px -20px rgba(var(--shadow-rgb), 0.65);
}
.phone-mockup--iph .iph__glass {
  display: flex;
  flex: 1;
  min-height: 0;
}
.phone-mockup--iph .phone-mockup__screen {
  flex: 1;
  height: auto;
  min-height: 0;
  border-radius: clamp(15px, 1.9vw, 21px);
}
.phone-mockup--iph .phone-mockup__status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 23px;
  padding: 3px 11% 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  pointer-events: none;
}
.phone-mockup--iph .phone-mockup__sig { display: inline-flex; gap: 1.5px; align-items: flex-end; }
.phone-mockup--iph .phone-mockup__sig i { display: block; width: 2.5px; background: var(--white); border-radius: 1px; }
.phone-mockup--iph .phone-mockup__sig i:nth-child(1) { height: 3px; }
.phone-mockup--iph .phone-mockup__sig i:nth-child(2) { height: 5px; }
.phone-mockup--iph .phone-mockup__sig i:nth-child(3) { height: 6.5px; }
.phone-mockup--iph .phone-mockup__sig i:nth-child(4) { height: 8px; }

/* [Block: kopfleiste-r24] 24.09.2026 (Marie) — EINE Kopfleiste auf allen Seiten, die erste Section läuft
   bis ganz oben, die Pille ist so breit wie der Inhalt der Sections.
   1) Bis hierhin schob `startseite-r23` die erste Section der Unterseiten per TRANSPARENTEM RAND unter die
      Pille. Die Section-Farbe lief zwar hoch, aber alles, was die Fläche eigentlich trägt, nicht: die Heroes
      sind `overflow: hidden` (clippt an der Padding-Box, also UNTER dem Rand) und ihre Foto-/Video-/Aurora-
      Ebenen stehen mit `inset: 0` ebenfalls in der Padding-Box — gemessen hinter der Pille ein 94 px hoher
      dunkler bzw. heller Balken auf 46 Seiten. Jetzt: kein Rand, der Abstand sitzt als `margin-top` am
      einzigen Fluss-Kind `.container` (auf allen 46 Unterseiten genau eins, gemessen) — die Section beginnt
      bei 0, ihre Ebenen laufen bis an den oberen Rand.
   2) Kanalservice trägt `page-home` und blieb deshalb als einzige Unterseite `sticky` im Fluss (Regel
      „Die Pille schwebt nur auf der Startseite" + r23 greift nur `body:not(.page-home)`) → weißer Streifen.
   3) Heroes, die eine Bildschirmhöhe messen sollen, zogen noch die 73 px der alten Leiste ab — sie starten
      jetzt bei 0, also volle Höhe.
   4) Breite: Pille = Inhaltsbreite der Sections (Container 1540 minus Innenabstand), statt fester 1240 px. */
:root{--kopf-frei:calc(16px + 62px + 16px)}
@media (max-width:1179px){:root{--kopf-frei:calc(10px + 54px + 14px)}}

body.page-kanal-start .site-header{position:fixed!important;top:0;left:0;right:0}
body:not(.page-home) main > :first-child,
body.page-kanal-start main > :first-child{border-top:0!important}
body:not(.page-home) main > :first-child > .container,
body.page-kanal-start main > :first-child > .container{margin-top:var(--kopf-frei)}

body main > :is(.ka-hero, .uu-hero),
body.page-auftragsgewinnung main > .hero,
body:is(.page-kanalservice, .page-kanal-start) main > .hero{min-height:100vh;min-height:100svh}

.site-header{padding-left:0!important;padding-right:0!important}
.navbar .container.navbar__inner{width:calc(100% - 2 * var(--container-pad));max-width:calc(var(--max-width) - 2 * var(--container-pad))}
@media (max-width:1179px){.mobile-nav__inner{left:var(--container-pad);right:var(--container-pad)}}

/* ============================================================
   BRANCHENPARTNER-SECTION — Team-Wand statt Porträt-Fries (24.09.2026)
   Marie: „bei der Section ‚Branchenpartner für deinen Betrieb' die
   Mitarbeiterbilder so machen, wie auf der ‚Über uns'-Seite".
   Markup: partials/team-wand.html (dieselbe Wand wie auf
   /unternehmen/ueber-uns/), eingebunden in section-12-ueber-uns-home.html
   — also auf Startseite, Kanalservice, AG, MA und Schädlingsbekämpfung.
   Die Wand-Regeln (.uu-tw, .uu-lead …, Block „3 · Das Team als Wand")
   gelten unverändert; hier nur, was die andere Umgebung braucht:
   · .about-tw bricht aus der 1000-px-Box aus (Full-Bleed wie früher
     .crew-wall) und ist der Container für die cqw-Maße der Wand — auf
     der Über-uns-Seite übernimmt das .uu-tw-section.
   · Reveal: dort hängt er am Kopf der Section, hier am bestehenden
     [data-about]-Hook der Section (.about.is-revealed).
   Erichs Endlosband-Regeln (v12/v18, :where(.page-home …) .crew-wall)
   greifen seitdem ins Leere und bleiben als Rückbau-Vorlage stehen.
   ============================================================ */
.about-tw {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  container-type: inline-size;
}
.about.is-revealed .about-tw .uu-lead {
  opacity: 1;
  translate: 0 0;
}

/* [Block: kopfleiste-r24b] 24.09.2026 (Marie: „Hover-Effekt nicht da … beim Dropdown wird es dunkel") —
   Hover für die dunkle Pille (`.is-dark` steht dauerhaft). Gemessen vorher: Menüpunkt 0,88 → 1,0 Weiß
   auf Fläche 0,06 (unsichtbar); Dropdown-Punkt nahm die Hover-Regel des alten HELLEN Headers
   (Tinte rgba(16,24,32,.92) auf dem dunklen Panel). Spezifität (0,4,0) schlägt die Light-Regeln (0,3,1). */
.site-header.is-dark .nav-link:hover,
.site-header.is-dark .nav-link:focus-visible,
.site-header.is-dark .nav-item--has-dropdown:hover > .nav-link,
.site-header.is-dark .nav-item--has-dropdown:focus-within > .nav-link{color:#fff;background:rgba(255,255,255,.12)}
.site-header.is-dark .nav-link:focus-visible{outline:2px solid #4DA8DA;outline-offset:2px}
.site-header.is-dark .dropdown{color:#fff}
.site-header.is-dark .dropdown__item:hover,
.site-header.is-dark .dropdown__item:focus-visible{color:#fff;background:rgba(255,255,255,.10)}
.site-header.is-dark .dropdown__item:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.site-header.is-dark .dropdown__item .icon{color:#4DA8DA}
/* Panel deckend: bei 0,86 schien auf hellen Seiten die Überschrift dahinter durch (Impressum gemessen); backdrop-filter greift hier nicht, weil die Pille selbst schon einen trägt (Backdrop-Root). */
.site-header.is-dark .dropdown{background:#0C141C}

/* [Block: hero-link-reveal-r24] 24.09.2026 (Marie: „alles wird eingeblendet, bis auf ‚Erst dein Potenzial
   berechnen‘") — der Link unter dem Hero-Knopf hatte als einziges Element im Aktions-Block keine
   Einblendung. Seit Erichs Umbau (23.09.) steht die Reihenfolge Knopf → Link → Vertrauenszeile; die
   Staffelung der Phase 7 (Zeile VOR dem Knopf) ist damit mitgedreht: Knopf 0,40 s → Link 0,52 s →
   Zeile 0,64 s, gleiche Keyframes `hub-hero-in`. Kanal-Hero unberührt. */
.page-home .hero__cta:where(:not(.kanal-hero *))      { animation: hub-hero-in 0.85s var(--ease) 0.40s both; }
.page-home .hero__cta-link:where(:not(.kanal-hero *)) { animation: hub-hero-in 0.85s var(--ease) 0.52s both; }
.page-home .hero__trust:where(:not(.kanal-hero *))    { animation: hub-hero-in 0.85s var(--ease) 0.64s both; }
@media (prefers-reduced-motion: reduce) {
  .page-home .hero__cta-link:where(:not(.kanal-hero *)) { animation: none; }
}

/* ============================================================
   AUFTRAGSGEWINNUNG — Hero-Spalte wie Startseite (Marie 24.09.2026)
   „Orientier dich an der Startseite … 600+ Fachkräfte ist unnötig …
   TÜV-Siegel rein … Auftragspotenzial berechnen."
   Knopf, Zweit-Link, darunter die Reihe Trustpilot Micro Star + TÜV-Oktagon
   40 px. Kein Partnerbetriebe-Zähler (auf der Startseite ebenfalls aus).
   HISTORIE: Runde 1 hatte die Startseiten-Werte hier von Hand nachgebaut —
   das lief auseinander (siehe „Stand 24.09., Runde 2" direkt darunter).
   ============================================================ */
/* Stand 24.09. (Runde 2, Marie: „Links sind die Abstände von Texten, Buttons und so was
   nicht ganz einheitlich … so wie es bei der Startseite ist"): die hier zuerst NACHGEBAUTEN
   Werte sind raus. Stattdessen hängt die Seite direkt in den Startseiten-Regeln der linken
   Spalte — Erichs Block (Selektoren `:where(.page-home:not(.page-kanal-start),
   .page-auftragsgewinnung) .hero__…`) und die `:is(.page-home, .page-auftragsgewinnung)
   .hero__…`-Regeln (Lead 60ch, Knopf-Abstand, Handy-Stufen). Beide Spalten laufen damit
   über DIESELBEN Regeln und können nicht mehr auseinanderlaufen. GEMESSEN vorher bei
   1440 px: Punkte→Knopf 26 statt 56 px, Knopf→Link 12 statt 24, Link→Zeile 22 statt 12,
   Trustpilot→Siegel 22 statt 4, Knopf 67 statt 60 px hoch; auf dem Handy eine andere
   Vertrauenszeile. Die H1 bleibt bewusst außen vor (andere Überschrift, Startseite hat
   eine eigene Handy-Größe für ihren längeren Satz).
   Hier bleiben nur die zwei Unterschiede im MARKUP: */
/* 1 · Der Knopf ist hier ein <a>, auf der Startseite ein <button>. Ein <a> erbt die
   Zeilenhöhe 1,6 (28,8 px statt „normal") und wäre 7 px höher. */
.page-auftragsgewinnung .hero__cta{line-height:normal;text-align:center}
/* 2 · Der Zweit-Link ist hier ein <button> (öffnet das Modal): Button-Chrome weg, Optik
   und Abstand kommen aus der geteilten .hero__cta-link-Regel (margin-top 12 px bleibt). */
.page-auftragsgewinnung button.hero__cta-link{-webkit-appearance:none;appearance:none;background:none;border:0;border-bottom:1px solid rgba(124,192,234,.35);border-radius:0;padding:0 0 2px;cursor:pointer;font:inherit;font-family:var(--font-ui);font-size:14.5px;font-weight:600;color:#7CC0EA;text-align:left}
.page-auftragsgewinnung button.hero__cta-link:hover{color:#fff;border-color:#fff}
.page-auftragsgewinnung button.hero__cta-link:focus-visible{outline:var(--focus-ring);outline-offset:4px;border-radius:var(--radius-sm)}

/* [Block: bewertungen-wand-r24] 24.09.2026 — Bewertungen als driftende Wand (Marie wählte Variante A der Leinwand
   https://claude.ai/artifact/Q7DuAuue6PFHzhi35cgKNF). Ersetzt die zwei waagerechten Reihen .rv2 (Erich 23.09.; CSS
   und JS dort bleiben ohne Markup stehen, die JS-Engine steigt ohne [data-rv2-row] aus). Kopf zentriert, zwei leise
   Pillen mit der Note, darunter vier Spalten, die gegenläufig driften — reines CSS, jede Spalte steht doppelt im
   Markup (Kopie aria-hidden), Versatz −50 % − halber Gap = nahtlos. Google-Gold/Trustpilot-Grün = §5a-Marken-Ausnahme. */
.rv3 { background: #FFFFFF; }
.rv3 .rv3__head { max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 0; }
.rv3__lead { margin: 0 auto; max-width: 560px; font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: rgba(16,24,32,.66); text-align: center; }
.rv3__pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.rv3__pill { display: inline-flex; align-items: center; gap: 0; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid rgba(16,24,32,.12); border-radius: 9999px; background: #FFFFFF; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: rgba(16,24,32,.78); text-decoration: none; transition: border-color .25s ease, color .25s ease; }
.rv3__pill b { font-weight: 700; color: #101820; margin-right: .3em; }
.rv3__pill:hover { border-color: rgba(16,24,32,.28); color: #101820; }
.rv3__pill:focus-visible { outline: 2px solid var(--focus-ring, var(--accent-hover)); outline-offset: 3px; }
.rv3__pill-ic { width: 18px; height: 18px; display: inline-flex; flex: none; margin-right: 10px; }
.rv3__pill-ic svg, .rv3__ic svg { width: 100%; height: 100%; display: block; }

.rv3__wall { --rv3-gap: 20px; position: relative; height: 640px; margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rv3-gap);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%); }
.rv3__col { overflow: hidden; min-width: 0; }
.rv3__drift, .rv3__dup { display: flex; flex-direction: column; gap: var(--rv3-gap); }
.rv3__drift { animation: rv3-up 90s linear infinite; will-change: transform; }
.rv3__col--2 .rv3__drift { animation-name: rv3-down; animation-duration: 104s; }
.rv3__col--3 .rv3__drift { animation-duration: 96s; }
.rv3__col--4 .rv3__drift { animation-name: rv3-down; animation-duration: 112s; }
@keyframes rv3-up   { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--rv3-gap) / 2)); } }
@keyframes rv3-down { from { transform: translateY(calc(-50% - var(--rv3-gap) / 2)); } to { transform: translateY(0); } }
.rv3__wall:hover .rv3__drift { animation-play-state: paused; }

.rv3__card { margin: 0; background: #FFFFFF; border: 1px solid rgba(16,24,32,.08); border-radius: 20px; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 0 rgba(16,24,32,.03), 0 18px 40px -30px rgba(6,10,14,.35); }
.rv3__stars { display: inline-flex; gap: 3px; }
.rv3__stars svg { width: 14px; height: 14px; fill: #F5B301; }
.rv3__quote { margin: 0; }
.rv3__quote p { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.62; color: rgba(16,24,32,.72); }
.rv3__quote strong { font-weight: 600; color: #101820; }
.rv3__who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(16,24,32,.07); }
.rv3__ic { width: 18px; height: 18px; flex: none; display: inline-flex; }
.rv3__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--font-ui); }
.rv3__name b { font-size: 14px; font-weight: 600; color: #101820; overflow-wrap: anywhere; }
.rv3__name small { font-size: 12px; color: rgba(16,24,32,.6); }

@media (max-width: 1023px) {
  .rv3__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 600px; margin-top: 40px; }
  .rv3__col--3, .rv3__col--4 { display: none; }
}
@media (max-width: 599px) {
  .rv3__wall { --rv3-gap: 14px; grid-template-columns: minmax(0, 1fr); height: 540px; }
  .rv3__col--2 { display: none; }
  .rv3__card { padding: 20px 18px 18px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv3__drift { animation: none; }
}

/* [Block: bewertungen-wand-r24b] 24.09.2026 — die Wand lässt sich selbst bedienen (Marie: „wenn man sich die
   Bewertung oben drüber angucken will … auch selber bedienen"; gewählt: Ziehen + Pfeile, das Mausrad scrollt weiter
   die Seite). Mit JavaScript übernimmt die Engine [data-rv3-wall] in scripts.html die Bewegung (.is-js schaltet die
   CSS-Schleife ab, die bleibt No-JS-Fallback): Spalten driften per transform, Hover hält an, Maus/Stift ziehen eine
   Spalte, die Pfeile blättern alle sichtbaren Spalten um eine Karte, danach läuft es nach 3 s weiter. Touch-Wischen
   bleibt bewusst beim Seiten-Scroll (sonst wären ~540 px des Handys ohne Scroll); dort hält Antippen an. */
.rv3__wall.is-js .rv3__drift { animation: none; }
.rv3__wall.is-js .rv3__col { cursor: grab; touch-action: pan-y; }
.rv3__wall.is-js .rv3__col.is-dragging { cursor: grabbing; }
.rv3__wall.is-js .rv3__col.is-dragging .rv3__card { user-select: none; }
.rv3__ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.rv3__ctrl[hidden] { display: none; }
.rv3__btn { width: 44px; height: 44px; border-radius: 9999px; border: 1px solid rgba(16,24,32,.14); background: #FFFFFF; color: #101820; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .25s ease, transform .25s ease; }
.rv3__btn:hover { border-color: rgba(16,24,32,.32); transform: translateY(-1px); }
.rv3__btn:focus-visible { outline: 2px solid var(--focus-ring, var(--accent-hover)); outline-offset: 3px; }
.rv3__btn .icon { width: 18px; height: 18px; }
.rv3__btn-up { transform: rotate(180deg); }
.rv3__ctrl-hint { font-family: var(--font-ui); font-size: 12.5px; color: rgba(16,24,32,.6); }
@media (hover: none) { .rv3__ctrl-hint { display: none; } }

/* =====================================================================
   HERO-VISUAL — Auftragsgewinnung: „Der Anruf" (.hv-duo) · 24.09.2026
   [Block: hv-duo-ag]
   Marie: „auch das MacBook mit reinnehmen … auf dem Handy auch diese App
   anzeigen, aber zeigen, dass Anrufe reinkommen … sehr real, damit man
   einen Wiedererkennungseffekt hat." Partial hero-viz-duo-ag.html, Engine
   scripts.html ([data-hv-duo]). Löst .hv-handy im AG-Hero ab (Partial
   und CSS bleiben reaktivierbar; die .hv-handy__*-Screen-Klassen des
   Handys werden hier WEITERVERWENDET, nicht kopiert).
   Die Bühne .hv-duo__rig ist in festen px gebaut — das Handy trägt px-
   feste Innenmaße, das Dashboard rechnet in cqw seines Screens — und wird
   als Ganzes per --duo-s auf die Spaltenbreite skaliert (die Engine misst;
   ohne JS die gestuften Werte unten). Alle vw-Klammern von MacBook und
   iPhone sind im Scope auf px festgesetzt, sonst hinge die Gehäuse-Stärke
   an der Fensterbreite statt an der Bühne.
   Geometrie ab 640 px (Runde 2, Marie: „MacBook größer, Telefon kleiner"):
   Rig 640 × 540, Laptop 490 px bei (0 | 64), Handy intern 236 px, per
   scale 0,78 sichtbar 184 px bei (456 | 150) — es steht rechts neben dem
   Deckel und überlappt nur Rahmen und Basis-Ecke, das Dashboard bleibt frei
   (Marie-Regel 18.09.: Gehäuse überlappen, nie Bildschirm-Inhalt).
   Unter 640 px und bei 1024–1279 px Rig 420 × 460, Laptop 380 bei (0 | 92),
   Handy scale 0,66 bei (268 | 50) — dort deckt es das rechte Viertel des
   Dashboards ab.
   Anruf-Oberfläche = iOS-Vorbild (Dynamic Island aufgezogen): System-
   schrift, iOS-Rot #FF3B30 / -Grün #34C759, Kontakt-Grau — §5a-Zeile
   „Genre-Nachbau", nur in .hv-call. Alles andere bleibt CI.
   ===================================================================== */
/* ⚠ --duo-w/--duo-h (liest die Engine) und aspect-ratio beschreiben dieselbe Bühne —
   bei Maßänderungen IMMER beide zusammen ändern (auch im Media-Block unten) */
.hv-duo {
  --duo-w: 640;
  --duo-h: 540;
  --duo-s: 1;
  position: relative;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  aspect-ratio: 640 / 540;
}
.hv-duo__rig {
  position: absolute;
  left: 0; top: 0;
  width: 640px;
  height: 540px;
  transform: scale(var(--duo-s));
  transform-origin: 0 0;
}
/* doppelte Klasse (0,2,0): schlägt .hv-handy__glow per Spezifität, nicht per Dateiposition */
.hv-duo .hv-duo__glow {
  left: 86%;
  top: 62%;
  width: min(72%, 420px);
}
/* ---- MacBook: statisch offen, Werte wie im Geräte-Duo von „Unsere Methode" ---- */
.hv-duo__laptop {
  position: absolute;
  left: 0; top: 64px;
  width: 490px;
  z-index: 1;
  container-type: inline-size;
  animation: hv-duo-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
@keyframes hv-duo-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hv-duo .mbk-scene { perspective: 383cqw; }
.hv-duo .mbk {
  --mbk-tilt: -24deg; --mbk-yaw: 0deg; --mbk-open: 8deg; --mbk-x: 0%;
  --mbk-lid-t: 5px; --mbk-base-t: 12px; --mbk-r: 12px; --mbk-r-base: 8px;
}
.hv-duo .mbk__lid { --mbk-open: 8deg; }
.hv-duo .mbk__screen, .hv-duo .mbk__base::after { opacity: 1; }
/* Balken im Endzustand (ohne die Zähler-Engine der App-Section) */
.hv-duo .hv-duo__fill--78 { width: 78%; }
.hv-duo .hv-duo__fill--62 { width: 62%; }
.hv-duo .hv-duo__fill--72 { width: 72%; }
.hv-duo .hv-duo__fill--48 { width: 48%; }
.hv-duo .hv-duo__fill--34 { width: 34%; }
.hv-duo .dash__fill { transition: none; }
/* neue Anrufer-Zeile: kommt von oben und leuchtet kurz nach */
.hv-duo .dash__row.is-neu { animation: hv-duo-row 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes hv-duo-row {
  0%   { opacity: 0; transform: translateY(-0.8em); background: rgba(255, 255, 255, 0.12); }
  30%  { opacity: 1; transform: none; background: rgba(255, 255, 255, 0.12); }
  100% { opacity: 1; transform: none; background: rgba(255, 255, 255, 0.025); }
}
.hv-duo .dash__urteil.is-pruef { color: var(--text-200); background: rgba(255, 255, 255, 0.09); }
/* Weniger Blau (Marie 24.09., Runde 2: „bei der MacBook-Variante ziemlich viel Blau …
   bitte ein bisschen mehr Blau als Farbe raus"): im Dashboard dieses Heros laufen
   Pillen, Balken, Schalter, Icons und Kontakt-Kreise in Weiß-Stufen; „Echter Auftrag"
   im Status-Grün wie im Handy-Feed daneben (§5a Status-Grün). Gilt NUR hier — die
   Dashboard-Fassung in „Unsere Methode" bleibt unverändert. */
.hv-duo .dash__navitem.is-active { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.hv-duo .dash__label svg { color: var(--text-200); }
.hv-duo .dash__live, .hv-duo .dash__pill, .hv-duo .dash__pill--live {
  color: var(--text-100); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1);
}
.hv-duo .dash__live-dot { background: #46D39A; box-shadow: 0 0 6px rgba(70, 211, 154, 0.7); }
.hv-duo .dash__trend { color: #46D39A; background: rgba(70, 211, 154, 0.12); }
.hv-duo .dash__fill { background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.78)); }
.hv-duo .dash__bar--slider .dash__fill::after { box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.14); }
.hv-duo .dash__av { background: rgba(255, 255, 255, 0.08); color: var(--text-100); }
.hv-duo .dash__urteil { color: #46D39A; background: rgba(70, 211, 154, 0.12); }
.hv-duo .dash__urteil--rueckruf, .hv-duo .dash__urteil.is-pruef { color: var(--text-200); background: rgba(255, 255, 255, 0.09); }
.hv-duo .dash__toggle.is-on { background: rgba(255, 255, 255, 0.5); }

/* ---- iPhone ---- */
.hv-duo__phone {
  position: absolute;
  left: 456px; top: 150px;
  width: 236px;
  z-index: 2;
  /* Marie 24.09. (Runde 2): „MacBook größer, Telefon kleiner" — das Handy bleibt
     intern 236 px breit (px-fester App-Inhalt) und wird als Ganzes verkleinert.
     Sichtbar 184 × 378 px; Verhältnis Handy : Deckel 0,41 statt 0,64. */
  scale: 0.78;
  transform-origin: 0 0;
}
.hv-duo .hv-handy__device {
  width: 100%;
  transform: perspective(1400px) rotateY(calc(-6deg + var(--px) * 6deg)) rotateX(calc(var(--py) * -4deg));
}
.hv-duo .iph__frame { border-radius: 30px; padding: 5px; }
.hv-duo .iph__glass { border-radius: 26px; padding: 6px; }
.hv-duo .hv-handy__screen { border-radius: 21px; }
.hv-duo .iph__island { top: 14px; height: 11px; }
/* App-Kopf eine Stufe tiefer: die aufgezogene Island (bis 60 px) liegt sonst
   über „Bese App" — so deckt sie nur die Statuszeile ab wie auf dem echten Gerät */
.hv-duo .hv-handy__head { margin-top: 30px; }
/* Anrufer-Namen im Feed einzeilig (zweizeilig schob der Eintrag den Feed aus dem Screen) */
.hv-duo .hv-handy__txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Vibration beim Klingeln (zwei kurze Stöße, auf eigenem Wrapper — die
   Zeiger-Kippung sitzt auf dem Gerät, das Schweben auf .hv-handy__float) */
.hv-duo__buzz.is-buzz { animation: hv-duo-buzz 0.9s linear; }
@keyframes hv-duo-buzz {
  0%, 44%, 100% { transform: none; }
  4%, 12%, 20%, 28%, 36% { transform: translateX(-1.6px) rotate(-0.5deg); }
  8%, 16%, 24%, 32%, 40% { transform: translateX(1.6px) rotate(0.5deg); }
  56%, 64%, 72%, 80%, 88% { transform: translateX(-1.4px) rotate(-0.4deg); }
  60%, 68%, 76%, 84%, 92% { transform: translateX(1.4px) rotate(0.4deg); }
}

/* ---- Eingehender Anruf in der Dynamic Island (iOS-Vorbild) ----
   Zu = exakt die Island (unsichtbar darüber), auf = fast volle Screen-Breite,
   50 px hoch, Feder-Kurve wie das iOS-Aufziehen. */
.hv-call {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 30%;
  height: 11px;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px 28px;
  align-items: center;
  column-gap: 6px;
  padding: 0 9px 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  opacity: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition:
    width 0.55s cubic-bezier(0.34, 1.36, 0.5, 1),
    height 0.55s cubic-bezier(0.34, 1.36, 0.5, 1),
    top 0.55s cubic-bezier(0.34, 1.36, 0.5, 1),
    opacity 0.12s linear 0.42s;
}
.hv-call > * { opacity: 0; transition: opacity 0.18s ease; }
.hv-call.is-on {
  opacity: 1;
  top: 10px;
  width: calc(100% - 16px);
  height: 50px;
  transition:
    width 0.55s cubic-bezier(0.34, 1.36, 0.5, 1),
    height 0.55s cubic-bezier(0.34, 1.36, 0.5, 1),
    top 0.55s cubic-bezier(0.34, 1.36, 0.5, 1),
    opacity 0.08s linear;
}
.hv-call.is-on > * { opacity: 1; transition: opacity 0.25s ease 0.22s; }
.hv-call__av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #A9ADB4 0%, #6C7179 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}
.hv-call__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hv-call__txt small { font-size: 8.5px; font-weight: 400; line-height: 1.15; color: #98989F; }
.hv-call__txt b {
  font-size: 11.5px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-call__btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.2s ease;
}
.hv-call__btn svg { width: 14px; height: 14px; fill: #fff; stroke: none; display: block; }
.hv-call__btn--nein { background: #FF3B30; }
.hv-call__btn--nein svg { transform: rotate(135deg); }
.hv-call__btn--ja { background: #34C759; }
.hv-call.is-on .hv-call__btn--ja { animation: hv-call-ring 1.1s ease-out 0.5s infinite; }
@keyframes hv-call-ring {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); }
  100% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
}
/* Annehmen: grüner Knopf gedrückt, Rot tritt zurück */
.hv-call.is-answer .hv-call__btn--ja { animation: none; transform: scale(0.84); filter: brightness(1.18); }
.hv-call.is-answer .hv-call__btn--nein { opacity: 0.3; }

/* ---- Unter 640 px UND bei 1024–1279 px (schmale rechte Spalte, gemessen 437–520 px:
   mit dem breiten Rig wäre das Handy dort nur 161–189 px): kompakteres Rig, Handy vor
   dem rechten Laptop-Drittel ---- */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) {
  .hv-duo { --duo-w: 420; --duo-h: 460; aspect-ratio: 420 / 460; }
  .hv-duo__rig { width: 420px; height: 460px; }
  .hv-duo__laptop { top: 92px; width: 380px; }
  .hv-duo__phone { left: 268px; top: 50px; scale: 0.66; }
  .hv-duo .hv-duo__glow { left: 82%; top: 46%; }
}
/* Ohne JS: gestufte Skalierung (die Engine misst sonst die echte Spaltenbreite) */
@media (scripting: none) {
  .hv-duo { --duo-s: 0.56; }
  @media (min-width: 380px) { .hv-duo { --duo-s: 0.82; } }
  @media (min-width: 480px) { .hv-duo { --duo-s: 1; } }
  @media (min-width: 640px) { .hv-duo { --duo-s: 0.9; } }
  @media (min-width: 768px) { .hv-duo { --duo-s: 1.09; } }
  @media (min-width: 1024px) { .hv-duo { --duo-s: 1.04; } }
  @media (min-width: 1180px) { .hv-duo { --duo-s: 1.2; } }
  @media (min-width: 1280px) { .hv-duo { --duo-s: 0.88; } }
  @media (min-width: 1440px) { .hv-duo { --duo-s: 1; } }
  /* und der erste Anruf steht aufgezogen */
  .hv-duo .hv-call { opacity: 1; top: 10px; width: calc(100% - 16px); height: 50px; }
  .hv-duo .hv-call > * { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-duo__laptop, .hv-duo__buzz.is-buzz, .hv-duo .dash__row.is-neu,
  .hv-call.is-on .hv-call__btn--ja { animation: none; }
  .hv-call, .hv-call > *, .hv-call.is-on, .hv-call.is-on > * { transition: none; }
}

/* ============================================================
   [Block: hero-tuev-r24] TÜV-SIEGEL IN JEDEM HERO, VOR TRUSTPILOT
   Marie 24.09.2026: „überall bei der Hero-Section das TÜV-Zertifikat
   mit aufnehmen … immer vor dem Trustpilot-Element". Die Heroes, in
   denen Trustpilot bisher ALLEIN unter dem CTA stand (MA, Video-
   produktion, Kanalservice, Schädlingsbekämpfung, Leistungen-Hub,
   Branchen-Hub, Selbstständig machen), tragen jetzt die Reihe
   `.hero__trust.hero__trust--siegel` = [Siegel · Trustpilot]. Das
   Siegel ist die Größe M aus CI Sektion 23 (Oktagon 36 px + zwei
   Zeilen, Basisregel `.hero__trust-seal` oben), getrennt nur durch
   Abstand. Startseite, AG und Erfolgsgeschichten hatten das Siegel
   schon — dort ist nur die Reihenfolge im Markup gedreht.
   Den Trustpilot-Versatz (Box 300 px, Tinte 24 px links / 18 px
   rechts eingerückt) rechnet die geteilte Regel
   `.hero__trust .hero__trust-cta` heraus — deshalb laufen auch der
   leere Kanal-/Pest-Slot und `.hero-trustpilot-center` in der Reihe
   als 300-px-Box mit denselben Margins.
   ============================================================ */
.hero__trust--siegel { margin-top: clamp(16px, 2.2vw, 24px); }
.hero__trust--mitte { justify-content: center; }
.hero__trust--siegel .hero-trustpilot-center {
  width: 300px;
  max-width: 300px;
  margin: 0 -18px 0 -24px;
  flex: 0 0 auto;
}
/* Kanal/Pest: der Slot trug Abstand + Einblendung selbst — beides
   wandert an die Reihe, sonst stünde der Score 14–20 px tiefer als das
   Siegel und blendete ohne es ein. */
.hero__trust--siegel :is(.kanal-hero__trust, .pest-hero__trust) { margin-top: 0; animation: none; }
.kanal-hero .hero__trust--siegel,
.pest-hero .hero__trust--siegel { margin-top: clamp(14px, 1.6vw, 20px); }
:is(.page-kanalservice, .page-kanal-start) .kanal-hero .hero__trust--siegel,
.page-schaedlingsbekaempfung .pest-hero .hero__trust--siegel { animation: hub-hero-in 0.85s var(--ease) 0.78s both; }
.page-branchen .hero__trust--siegel .hero-trustpilot-center { animation: none; }
.page-branchen .hero__trust--siegel { animation: hub-hero-in 0.85s var(--ease) 0.58s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__trust--siegel { animation: none !important; }
}
/* Heller Hero (Selbstständig machen, [data-hero-light]): im Light-Theme
   Tinte statt Weiß — das Oktagon selbst bleibt unverändert. */
html[data-theme="light"] .hero[data-hero-light] .hero__trust-seal b { color: var(--heading-color); }
html[data-theme="light"] .hero[data-hero-light] .hero__trust-seal i { color: var(--text-200); }

/* [Block: beweis-video-r24] Beweis-Sektion: eigenes Testimonial-Video (24.09.2026, Hermann Schäfer).
   Der Knopf mit data-video wird beim Klick durch ein <video> ersetzt (scripts-home.html, Block 7);
   die Box erbt Seitenverhältnis und Rundung von .fs__media, das Video füllt sie. */
.fs__media--video video{display:block;width:100%;height:100%;object-fit:contain;background:#000}

/* =====================================================================
   [Block: aufs-a4] SO LÄUFT'S AB — Fassung A4 „Die Karten" (Startseite, 24.09.2026)
   Marie: „gefällt mir immer noch nicht … hochwertiger". Ersetzt A3
   „Aufsteigend" (Kurve unter den Fotos, Markup + CSS im Archiv
   _ARCHIV-naechste-schritte-home-a3-aufsteigend.html). Befund an A3: ein
   ~160 px hohes, fast leeres Band mit einer kaum steigenden Linie trennte
   Fotos und Text; die Schritte lasen sich als lose Bildreihe.
   Jetzt: vier Karten im Charcoal-Material der Section, Foto oben, Text im
   Kartenkörper. Die Schrittnummer sitzt auf der Naht Foto/Text, eine
   Linie verbindet die Nummern über die Lücken und füllt sich beim
   Reinscrollen von 01 nach 04 (Weiß). Schritt 04 = Höhepunkt (weiße
   Nummer, hellerer Rand, eingehender Anruf). Runde 2 (Marie 24.09.:
   „buggy … zu viel Blau"): kein Anheben beim Überfahren, Linie startet
   erst nach dem Einfahren, Blau nur noch am Anruf-Icon.
   Linien-Geometrie: jede Linie beginnt in der Mitte der eigenen Nummer
   und ist Kartenbreite + Lücke lang — alle Karten sind gleich breit, die
   Linie endet damit exakt in der Mitte der nächsten Nummer.
   Stufen: ≥1180 vier Spalten · 768–1179 zwei Spalten (Linie 02→03 aus,
   Reihenumbruch) · <768 Wischreihe. Ohne JS / reduced-motion: fertig.
   CI-Cyan #4DA8DA hart am Anruf-Icon (einziger Blau-Akzent): die Section
   ist in beiden Themes dunkel (Präzedenz Orbit-Bögen, §5a).
   ===================================================================== */
.aufs {
  --aufs-gap: clamp(18px, 1.8vw, 26px);
  --aufs-d: 50px;
  --aufs-pad: clamp(22px, 1.9vw, 28px);
  --aufs-card: #1F2226; /* Charcoal-Familie (§5a) */
}
.aufs .aufs__head { margin-bottom: clamp(40px, 4vw, 56px); gap: 20px; }
.aufs__lead {
  margin: 0; max-width: 72ch;
  font-family: var(--font-ui); font-size: 16px; line-height: 1.7;
  color: var(--text-200);
}
.aufs__lead strong { color: var(--heading-color); font-weight: 600; }

/* Karten */
.aufs__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--aufs-gap); align-items: stretch;
}
.aufs__step {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #26282C 0%, var(--aufs-card) 42%, #191B1F 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 34px 60px -42px rgba(0, 0, 0, 0.85);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.aufs__pic {
  position: relative; margin: 0; aspect-ratio: 4 / 3;
  border-radius: 21px 21px 0 0; overflow: hidden; isolation: isolate;
  background: #0E0F11;
}
.aufs__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.8s var(--ease);
}
/* Vom Alltag zum Moment, in dem das Telefon klingelt: die Fotos werden
   von 01 nach 04 farbiger und heller. */
.aufs__img--1 { object-position: 50% 50%; filter: saturate(0.62) contrast(1.03) brightness(0.86); }
.aufs__img--2 { object-position: 55% 38%; filter: saturate(0.74) contrast(1.03) brightness(0.9); }
.aufs__img--3 { object-position: 45% 32%; filter: saturate(0.86) contrast(1.04) brightness(0.95); }
.aufs__img--4 { object-position: 55% 30%; filter: saturate(1.02) contrast(1.05) brightness(1.02); }
.aufs__pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 34, 38, 0) 58%, rgba(31, 34, 38, 0.55) 100%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* kein Anheben: ein transform macht die Karte zur eigenen Ebene, die
     Linie der Vorgängerkarte lief dann durch die Nummer und saß 4 px
     neben ihr (Marie 24.09.: „noch ein bisschen buggy") */
  .aufs__step:hover { border-color: rgba(255, 255, 255, 0.16); }
  .aufs__step:hover .aufs__img { transform: scale(1.04); }
}

/* Kartenkörper + Station auf der Naht */
.aufs__body {
  position: relative; flex: 1 1 auto;
  padding: calc(var(--aufs-d) / 2 + 18px) var(--aufs-pad) var(--aufs-pad);
}
.aufs__node {
  position: absolute; z-index: 2;
  top: calc(var(--aufs-d) / -2); left: var(--aufs-pad);
  width: var(--aufs-d); height: var(--aufs-d);
}
.aufs__dot {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1;
  color: #fff; background: #17191D;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 5px rgba(23, 25, 29, 0.55), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Verbindung zur nächsten Nummer: Spur (::before) + Füllung (::after) */
.aufs__body::before,
.aufs__body::after {
  content: ""; position: absolute; z-index: 1; top: -1px;
  left: calc(var(--aufs-pad) + var(--aufs-d) / 2);
  width: calc(100% + 2px + var(--aufs-gap)); height: 2px; border-radius: 2px;
  pointer-events: none;
}
.aufs__body::before { background: rgba(255, 255, 255, 0.1); }
.aufs__body::after {
  /* neutral: Weiß statt Silver Blue → Cyan (Marie 24.09.: „zu viel Blau") */
  background: rgba(255, 255, 255, 0.62);
  transform-origin: left center;
}
.aufs__step:last-child .aufs__body::before,
.aufs__step:last-child .aufs__body::after { display: none; }

/* Höhepunkt: Schritt 04 */
.aufs__step:last-child {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 40px 70px -40px rgba(0, 0, 0, 0.95);
}
.aufs__step:last-child .aufs__dot {
  background: #fff; color: #0C141C; border-color: #fff;
  box-shadow: 0 0 0 5px rgba(23, 25, 29, 0.55), 0 0 26px 2px rgba(255, 255, 255, 0.18);
}
.aufs__step:last-child .aufs__dot::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7); opacity: 0;
}
.aufs__step:last-child .aufs__cap { color: var(--heading-color); }

/* Der Moment: ein eingehender Anruf auf Foto 04 (Illustration) */
.aufs__call {
  /* unten rechts auf dem Foto: frei vom Gesicht oben und von der Nummer links */
  position: absolute; right: 12px; bottom: 16px; z-index: 1;
  max-width: calc(100% - var(--aufs-pad) - var(--aufs-d) - 10px);
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 10px 14px 10px 10px; border-radius: 16px;
  background: rgba(12, 14, 17, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
.aufs__call-ic {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: #4DA8DA; color: #0C141C;
}
.aufs__call-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aufs__call-ic::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(77, 168, 218, 0.8); opacity: 0;
}
.aufs__call-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.aufs__call-txt b { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: #fff; }
.aufs__call-txt small { font-family: var(--font-ui); font-size: 12px; color: rgba(255, 255, 255, 0.72); }
/* schmale Karten (4 Spalten bis ~1700 px, Handy): nur „Eingehender Anruf",
   kleineres Icon — sonst bricht der Chip um und legt sich übers Gesicht */
.aufs__pic { container-type: inline-size; }
@container (max-width: 350px) {
  .aufs__call { gap: 9px; padding: 7px 12px 7px 7px; bottom: 14px; }
  .aufs__call-ic { width: 30px; height: 30px; }
  .aufs__call-ic svg { width: 15px; height: 15px; }
  .aufs__call-txt b { font-size: 13px; }
  .aufs__call-txt small { display: none; }
}
@container (max-width: 280px) {
  .aufs__call { gap: 8px; padding: 6px 10px 6px 6px; }
  .aufs__call-ic { width: 28px; height: 28px; }
  .aufs__call-txt b { font-size: 12px; }
}

.aufs__cap {
  display: block; margin-bottom: 10px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-200);
}
.aufs__title {
  margin: 0 0 10px; font-family: var(--font-ui); font-size: 21px; font-weight: 600;
  line-height: 1.25; color: var(--heading-color);
}
.aufs__text {
  margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.65;
  color: var(--text-200);
}

/* Abschluss-Leiste */
.aufs__bar {
  margin-top: clamp(32px, 3vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center;
  padding: 26px 36px; border-radius: 22px;
  background: linear-gradient(180deg, #1F2226, #17191D);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.aufs__bar-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aufs__cap--bar { margin: 0; color: var(--text-200); }
.aufs__bar-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 2.7vw, 40px); line-height: 1.05; color: var(--heading-color);
  hyphens: manual; overflow-wrap: break-word;
}
.aufs__bar-title em {
  font-style: italic;
  background: linear-gradient(180deg, var(--em-grad-a), var(--em-grad-b));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-inline: 0.08em; padding-block-end: 0.12em;
  margin-inline: -0.04em; margin-block-end: -0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.aufs__bar-text {
  margin: 0; max-width: 560px; font-family: var(--font-ui); font-size: 15px; line-height: 1.65;
  color: var(--text-200);
}
.aufs__bar-side { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; max-width: 520px; }
.aufs__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
/* Slot schritte-potenzial-knopf (daten.json): „aus“ nimmt den zweiten Knopf
   raus — auf Mitarbeitergewinnung rechnet der Check keine Bewerbungen. */
.aufs__actions[data-pc-knopf="aus"] .ns-finale__cta2 { display: none; }
.aufs__trust {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 14px 28px;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.3; color: var(--text-200);
}
.aufs__seal { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.aufs__seal b { color: var(--heading-color); font-weight: 600; }
.aufs__seal img { width: 36px; height: 36px; }
.aufs__num { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--heading-color); }
.aufs__seal--tp .trustpilot-widget { width: 240px; min-height: 24px; }

/* Einblenden: nur mit JS und ohne reduced-motion (sonst steht alles fertig) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .aufs__steps[data-reveal]:not(.is-revealed) .aufs__step { opacity: 0; transform: translateY(18px); }
  .aufs__steps[data-reveal] .aufs__step {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
    transition-delay: calc(var(--k) * 0.1s);
  }
  .aufs__steps[data-reveal].is-revealed .aufs__step { transition-delay: calc(var(--k) * 0.1s), calc(var(--k) * 0.1s), 0s, 0s; }
  /* die Linie läuft Station für Station, jede Nummer wird hell, sobald
     die Linie sie erreicht — erst ab 1 s, wenn alle Karten eingefahren
     sind (vorher liefen Linie und einfahrende Karten gegeneinander) */
  .aufs__steps[data-reveal] .aufs__body::after {
    transform: scaleX(0);
    transition: transform 0.45s linear;
    transition-delay: calc(1s + var(--k) * 0.45s);
  }
  .aufs__steps.is-revealed .aufs__body::after { transform: scaleX(1); }
  .aufs__steps[data-reveal]:not(.is-revealed) .aufs__dot { color: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.18); }
  .aufs__steps[data-reveal]:not(.is-revealed) .aufs__step:last-child .aufs__dot { background: #17191D; box-shadow: 0 0 0 5px rgba(23, 25, 29, 0.55); }
  .aufs__steps[data-reveal] .aufs__dot { transition-delay: calc(1s + var(--k) * 0.45s); }
  /* der Moment: der Anruf geht ein, wenn die Linie bei 04 ankommt */
  .aufs__steps[data-reveal]:not(.is-revealed) .aufs__call { opacity: 0; transform: translateY(10px) scale(0.96); }
  .aufs__steps[data-reveal] .aufs__call { transition: opacity 0.5s var(--ease) 2.4s, transform 0.6s var(--ease) 2.4s; }
  .aufs__steps.is-revealed .aufs__call-ic::before { animation: aufs-puls 1.8s var(--ease) 2.8s infinite; }
  .aufs__steps.is-revealed .aufs__step:last-child .aufs__dot::before { animation: aufs-puls 2.6s var(--ease) 2.4s infinite; }
}
@keyframes aufs-puls {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

/* 1024–1279: Leiste untereinander, damit der Text Platz hat */
@media (max-width: 1279px) {
  .aufs__bar { grid-template-columns: 1fr; gap: 24px; }
  .aufs__bar-side { align-items: flex-start; max-width: none; }
  .aufs__actions, .aufs__trust { justify-content: flex-start; }
}
/* 768–1179: zwei Spalten; die Linie 02→03 liefe über den Reihenumbruch */
@media (max-width: 1179px) {
  .aufs__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--aufs-gap) + 8px); }
  .aufs__step:nth-child(2) .aufs__body::before,
  .aufs__step:nth-child(2) .aufs__body::after { display: none; }
}
/* unter 768: Wischreihe, die Linie läuft durch alle vier Karten */
@media (max-width: 767px) {
  .aufs { --aufs-gap: 14px; --aufs-d: 44px; --aufs-pad: 20px; }
  .aufs__step:nth-child(2) .aufs__body::before,
  .aufs__step:nth-child(2) .aufs__body::after { display: block; }
  .aufs__dot { font-size: 19px; }
  .aufs__steps {
    display: flex; gap: var(--aufs-gap);
    margin-inline: calc(-1 * var(--container-pad)); padding: 4px var(--container-pad) 28px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--container-pad);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .aufs__steps::-webkit-scrollbar { display: none; }
  .aufs__step { flex: 0 0 min(80vw, 310px); scroll-snap-align: start; }
  .aufs__title { font-size: 19px; }
  .aufs__bar { margin-top: 12px; padding: 24px 20px; border-radius: 20px; }
  .aufs__bar-title { font-size: 32px; }
  .aufs__actions { width: 100%; }
  .aufs__actions .btn { flex: 1 1 100%; justify-content: center; }
  .aufs__trust { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* Abschluss-Leiste als WEISSE Karte (24.09., Marie: „noch auffälliger,
   prägnanter, fetter … größer und mit weißem Hintergrund, nur diese Kachel").
   Die Section bleibt dunkel; die Karte trägt ein lokales Light-Token-Paket
   (Werte 1:1 aus html[data-theme="light"], CI 04a), damit Titel, em-Verlauf,
   Text und Outline-Knopf ohne Einzelfarben richtig stehen. Kein Cyan-Glow
   (§1.3), Tiefe nur über neutrale Schatten. Trustpilot hell (data-tp-fixed-theme). */
.aufs__bar {
  --heading-color: rgba(16, 24, 32, 0.92);
  --text-100: rgba(16, 24, 32, 0.92);
  --text-200: rgba(16, 24, 32, 0.70);
  --text-300: rgba(16, 24, 32, 0.46);
  --em-grad-a: #1F3447;
  --em-grad-b: #2C6EA9;
  --glass-bg: rgba(16, 24, 32, 0.04);
  --glass-bg-hover: rgba(16, 24, 32, 0.07);
  --glass-border: rgba(16, 24, 32, 0.12);
  --glass-border-hover: rgba(16, 24, 32, 0.22);
  --focus-ring: #101820;
  --shadow-rgb: 31, 45, 58;
  margin-top: clamp(40px, 4vw, 64px);
  padding: clamp(36px, 3.6vw, 56px) clamp(32px, 4vw, 64px);
  border-radius: 28px;
  gap: clamp(40px, 4.4vw, 72px);
  background: #FFFFFF;
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.aufs__bar .aufs__cap--bar { color: #2C6EA9; }
.aufs__bar .aufs__bar-title {
  font-size: clamp(38px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -0.01em;
  padding-right: 0.08em;
}
.aufs__bar .aufs__bar-text { font-size: 16px; max-width: 600px; }
.aufs__bar .btn-accent-signature { font-size: 16px; padding-block: 16px; }
.aufs__bar .ns-finale__cta2 {
  background: var(--glass-bg); color: var(--text-100); border-color: var(--glass-border);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; font-size: 16px; padding-block: 16px;
}
.aufs__bar .ns-finale__cta2:hover { background: var(--glass-bg-hover); color: var(--text-100); border-color: var(--glass-border-hover); }
.aufs__bar .aufs__seal b { color: var(--heading-color); }
@media (max-width: 767px) {
  .aufs__bar { padding: 30px 22px; border-radius: 22px; }
  .aufs__bar .aufs__bar-title { font-size: 36px; }
}
/* Überall dieselbe dunkle Section wie auf der Startseite (Marie 24.09.2026:
   „bei den ganzen Unterseiten … anstelle des Bisherigen"). Die Bandregeln
   der Unterseiten (weiß, auf MA grau) stehen mit 0,3,1 teils weiter unten —
   deshalb hier body + section in den Selektor (0,3,3). Tokens kommen aus
   der konsolidierten Insel-Liste (Eintrag .next-steps.aufs). */
html[data-theme="light"] body section.next-steps.aufs { background: #17191D; }
/* [/Block: aufs-a4] */

/* [Block: ra-wert-r24] =========================================================
   AG · „Die richtigen Aufträge" — Fassung 2 „Der Wert hinter dem Anruf" (24.09.2026)
   Marie: „Die sieht mir noch nicht hochwertig genug aus. Auch die Animation rechts
   passt irgendwie nicht beziehungsweise sieht auch nicht gut aus."
   Die Karte ist das Material der Schädlingsbekämpfungs-Section (.sfok__card, 19.09.,
   = Material der Leistungs-Karten): die Section trägt deshalb `ra sfok`. Band bleibt
   das MIST-Grau der AG-Seite (Regel „AG/MA-Paket-Sektionen: Band-Zuordnungen").
   Bühne .rab: vier Anrufe, die alle gleich klingen. Bese-AI prüft sie nacheinander
   (Prüf-Rahmen je Zeile — keine Scan-Linie, Marie 17.09. „sieht aus wie durch-
   streichen"), der Wert erscheint, und nur hinter einem steckt die Sanierung.
   Takt 12 s, je Zeile EIGENE Keyframes (keine Delays über die Rundengrenze, Lehre
   18.09.). Gesteuert über drei registrierte Zahlen je Zeile (@property):
   --rab-scan (Prüf-Rahmen), --rab-val (Wert steht), --rab-hot (Urteil der großen Zeile).
   Standbild = fertiges Urteil (ohne JS, reduced-motion); mit JS startet die Bühne
   vor dem Reveal im Ausgangszustand (Werte offen), damit beim Start nichts springt.
   Alte Fassung: _ARCHIV-ag-richtige-auftraege-tickets.html, CSS .ra-ticket unverändert.
   ============================================================================ */
@property --rab-scan { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --rab-val  { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --rab-hot  { syntax: '<number>'; inherits: true; initial-value: 0; }

/* --- Textspalte: Wortlaut der Fassung 1, Hierarchie Lead → Argument → Beleg --- */
.ra .ra__title { max-width: 20ch; }
.ra .ra__lead { max-width: 54ch; color: var(--text-100); }
.ra__p {
  margin: var(--space-4) 0 0;
  max-width: 54ch;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-200);
}
.ra__p b { color: var(--white); font-weight: var(--weight-semibold); }
.ra__p--beleg {
  width: 100%;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--glass-border);
}

/* --- Bühne ------------------------------------------------------------------ */
.rab__box {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3em;
}
.rab__box > * { font-size: min(1.75cqw, 13px); }       /* 1em ≈ 12,7 px bei 725 px Bühne (1440), Deckel 13 px für breite Stapel-Bühnen (768–1023) */
@media (max-width: 1023px) {
  .rab__box { flex: none; margin-block: auto; padding: 3em 3em 1.8em; }
}
.rab__panel {
  border-radius: 1.6em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    var(--sb-b);
  box-shadow: 0 2.6em 4.6em -2.2em rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}
.rab__bar {
  display: flex; align-items: center; gap: 1em;
  padding: 1.4em 1.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rab__bar-title { font-size: 1.3em; font-weight: var(--weight-semibold); color: var(--white); }
.rab__bar-ai {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: 1.05em; color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.rab__dot { flex: none; width: 0.75em; height: 0.75em; border-radius: var(--radius-full); background: var(--akz); box-shadow: 0 0 0.8em var(--akz); }

.rab__list { list-style: none; margin: 0; padding: 0.9em; display: flex; flex-direction: column; gap: 0.35em; }
.rab__row {
  --rab-scan: 0;
  --rab-val: 1;
  --rab-hot: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon text val" ". track track";
  column-gap: 1.2em;
  row-gap: 0.75em;
  align-items: center;
  padding: 1.1em 1.2em 1.25em;
  border-radius: 1.1em;
  background-color: rgba(255, 255, 255, calc(0.055 * var(--rab-hot)));
  background-image: linear-gradient(rgba(var(--akz-rgb), calc(0.08 * var(--rab-scan))), rgba(var(--akz-rgb), calc(0.08 * var(--rab-scan))));
  box-shadow:
    inset 0 0 0 0.14em rgba(var(--akz-rgb), calc(0.9 * var(--rab-scan))),
    inset 0 0 0 1px rgba(255, 255, 255, calc(0.10 * var(--rab-hot)));
}
.rab__row--gross { --rab-hot: 1; }
.rab__icon {
  grid-area: icon;
  display: grid; place-items: center;
  width: 3.2em; height: 3.2em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
}
.rab__row--gross .rab__icon {
  box-shadow: inset 0 0 0 1px rgba(var(--akz-rgb), calc(0.12 + 0.45 * var(--rab-hot)));
  color: color-mix(in srgb, var(--akz) calc(var(--rab-hot) * 100%), rgba(255, 255, 255, 0.72));
}
.rab__icon .icon { width: 1.5em; height: 1.5em; }
.rab__text {
  grid-area: text;
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em;
  font-size: 1.5em; line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
}
.rab__text small {
  font-size: 0.62em; font-weight: var(--weight-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.rab__tag {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: 0.35em;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-full);
  background: var(--akz);                              /* der EINE Akzent der Bühne */
  color: #0C141C;                                      /* ~7,5 : 1 auf CI-Cyan */
  font-size: 0.6em; font-weight: var(--weight-bold); letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: var(--rab-hot);
  transform: translateY(calc((1 - var(--rab-hot)) * 0.5em));
}
.rab__tag .icon { width: 1.15em; height: 1.15em; }
.rab__val { grid-area: val; display: grid; justify-items: end; text-align: right; }
.rab__offen,
.rab__wert { grid-area: 1 / 1; white-space: nowrap; font-size: 1.35em; font-weight: var(--weight-semibold); }
.rab__offen { color: rgba(255, 255, 255, 0.38); opacity: calc(1 - var(--rab-val)); }
.rab__wert  { color: rgba(255, 255, 255, 0.78); opacity: var(--rab-val); }
.rab__wert--gross {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.1;
  background: linear-gradient(180deg, #B3CCDF, #4DA8DA);   /* senkrecht (CI 05), hart wie .sfok__card (Lehre 17.09.) */
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-inline: 0.08em; padding-block-end: 0.12em;   /* §1.6: Kursiv-Überhang */
  margin-inline: -0.04em; margin-block-end: -0.12em;
}
.rab__track {
  grid-area: track;
  display: block;
  height: 0.55em;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.rab__fill {
  display: block;
  height: 100%;
  width: calc(var(--rab-val) * var(--w) * 100%);
  min-width: calc(var(--rab-val) * 0.55em);
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.34);
}
.rab__row--gross .rab__fill { background: linear-gradient(90deg, #B3CCDF, #4DA8DA); }
.rab__fuss {
  display: flex; align-items: center; gap: 0.6em;
  margin: 0;
  padding: 1.1em 1.8em 1.3em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.05em;
  color: rgba(255, 255, 255, 0.6);
}
.rab__fuss .icon { width: 1.25em; height: 1.25em; color: var(--akz); }

/* --- Zeitachse: 12 s, vier Takte (Zeile a = 6 / 17 / 28 / 44 %), halten, zurück --- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ra:not(.is-revealed) .rab__row { --rab-val: 0; --rab-hot: 0; }
  .ra.is-revealed .rab__row { animation: 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .ra.is-revealed .rab__row--1 { animation-name: rab-r1; }
  .ra.is-revealed .rab__row--2 { animation-name: rab-r2; }
  .ra.is-revealed .rab__row--3 { animation-name: rab-r3; }
  .ra.is-revealed .rab__row--4 { animation-name: rab-r4; }
  .ra.is-revealed .rab__dot { animation: rab-dot 2.4s ease-in-out infinite; }
}
@keyframes rab-r1 {
  0%, 6%    { --rab-scan: 0; --rab-val: 0; }
  8%        { --rab-scan: 1; }
  12%       { --rab-val: 0; }
  14%       { --rab-val: 1; }
  15%       { --rab-scan: 1; }
  17%       { --rab-scan: 0; }
  89%       { --rab-val: 1; }
  95%, 100% { --rab-scan: 0; --rab-val: 0; }
}
@keyframes rab-r2 {
  0%, 17%   { --rab-scan: 0; --rab-val: 0; }
  19%       { --rab-scan: 1; }
  23%       { --rab-val: 0; }
  25%       { --rab-val: 1; }
  26%       { --rab-scan: 1; }
  28%       { --rab-scan: 0; }
  89%       { --rab-val: 1; }
  95%, 100% { --rab-scan: 0; --rab-val: 0; }
}
@keyframes rab-r3 {                                    /* die große Zeile: längerer Blick, dann das Urteil */
  0%, 28%   { --rab-scan: 0; --rab-val: 0; --rab-hot: 0; }
  30%       { --rab-scan: 1; }
  35%       { --rab-val: 0; }
  38%       { --rab-val: 1; --rab-hot: 0; }
  39%       { --rab-scan: 1; }
  41%       { --rab-scan: 0; --rab-hot: 1; }
  89%       { --rab-val: 1; --rab-hot: 1; }
  95%, 100% { --rab-scan: 0; --rab-val: 0; --rab-hot: 0; }
}
@keyframes rab-r4 {
  0%, 44%   { --rab-scan: 0; --rab-val: 0; }
  46%       { --rab-scan: 1; }
  50%       { --rab-val: 0; }
  52%       { --rab-val: 1; }
  53%       { --rab-scan: 1; }
  55%       { --rab-scan: 0; }
  89%       { --rab-val: 1; }
  95%, 100% { --rab-scan: 0; --rab-val: 0; }
}
@keyframes rab-dot { 0%, 100% { box-shadow: 0 0 0.5em var(--akz); } 50% { box-shadow: 0 0 1.3em var(--akz); } }

/* --- Schmale Bühnen: Wert unter den Anruf, größere Grundschrift ----------- */
@container (max-width: 619px) {                         /* 1024–1179 (Bühne 506–589) und Handys ab 440 */
  .rab__box { padding: 2em 1.4em 1.4em; }
  .rab__box > * { font-size: 2.1cqw; }
  .rab__bar { padding: 1.2em 1.3em; }
  .rab__list { padding: 0.6em; }
  .rab__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon text" ". val" ". track";
    row-gap: 0.55em;
    padding: 1em;
  }
  .rab__val { justify-items: start; text-align: left; }
  .rab__fuss { padding: 1em 1.3em 1.1em; }
}
@container (max-width: 420px) {                         /* Handys: größere Grundschrift, ≈ 8,7 px bei 341 px Bühne (375) */
  .rab__box > * { font-size: 2.55cqw; }
  .rab__text small { font-size: max(0.7em, 9px); }
}
/* [/Block: ra-wert-r24] */


/* [Block: ma-rhythmus-r24] ======================================
   MITARBEITERGEWINNUNG — Band-Rhythmus neu (24.09.2026, Marie: „zu viele
   dunkle Sections hintereinander … bei ‚Häufig gestellte Fragen' fast nur
   noch hell"). Gemessen vorher: Hero(D) · Trust(G) · Wachstum(D) ·
   Kosmos(D) · Beweis(D) · Potenzial(W) · Eine-Hand(D) · Nachfolge(W) ·
   Über uns(D) · FAQ(W) · Bewertungen(W) · Schritte(W) · KM(D) — 7 von 13
   dunkel, drei am Stück, hinten drei helle am Stück.
   Jetzt jede dritte Section dunkel, dazwischen Weiß/Grau im Wechsel:
   Hero(D) · Trust(G) · Wachstum(W) · Kosmos(D) · Beweis(W) · Potenzial(G) ·
   Eine-Hand(D) · Nachfolge(W) · Über uns(G) · FAQ(D) · Bewertungen(W) ·
   Schritte(G) · KM(D). Dunkel bleiben nur die Sections, die dunkel GEBAUT
   sind (Kosmos: Licht-Animation, Eine-Hand: Geräte-Bühne) plus die FAQ als
   Anker im Schlussteil (Präzedenz Kanalservice/Schädlingsbekämpfung).
   Die Insel-Arme stehen in den drei konsolidierten Listen oben
   (.page-mitarbeitergewinnung :is(.mahand, .faq)). */
html[data-theme="light"] .page-mitarbeitergewinnung :is(.mawx, .mf-beweis, .manf) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 100%);
}
html[data-theme="light"] .page-mitarbeitergewinnung :is(.mapc, .about, .next-steps) {
  background: linear-gradient(180deg, #EAEAEC 0%, #E2E2E4 100%);
}
/* Wachstum auf Weiß: die Beleg-Karte und das Summen-Panel waren für die
   Insel als Glas gebaut (4 % Weiß) — auf Weiß lösen sie sich auf. Helle
   Karten mit Hairline + weichem Schatten (Muster .manf__photo). */
html[data-theme="light"] .page-mitarbeitergewinnung :is(.mawx__note, .mawx__sum) {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow: 0 18px 42px -26px rgba(var(--shadow-rgb), 0.20);
}
html[data-theme="light"] .page-mitarbeitergewinnung .mawx__row-icon {
  background: var(--white);
  border-color: rgba(var(--shadow-rgb), 0.12);
}
html[data-theme="light"] .page-mitarbeitergewinnung .mawx__photo {
  border-color: rgba(var(--shadow-rgb), 0.10);
  box-shadow: 0 24px 56px -30px rgba(var(--shadow-rgb), 0.30);
}

/* [Block: ma-hero-video-r24] 24.09.2026 (Marie: „das Video … bei der Mitarbeitergewinnung als
   Hintergrundvideo in der Hero-Section") — Film „Die Garderobe": an den Haken füllen sich die
   Arbeitsjacken, das Team wächst. Layer/Engine = die geteilten .hero__bgvideo-Bausteine
   (Karriere, Über uns); hier nur, was dieser Film anders braucht.
   · Kein loop (Markup): er bleibt auf dem letzten Bild stehen. Poster = ERSTES Bild, damit das
     Video ohne Sprung darüber einblendet; ohne JS und bei reduced-motion lädt das Video nie →
     dort das ENDBILD, das die ganze Aussage trägt.
   · Eine Bildschirmhöhe (Memory: Hero immer 100 %), Text mittig in der linken Spalte — rechts
     tragen Jacken und Transporter die Bühne, das 3D-Visual „Die Auswahl" ist dafür ausgebaut.
   · Scrim: statt der geteilten 70 % (dort steht der Text auf der ganzen Fläche) ein Verlauf —
     dicht hinter dem Text, offen über den Jacken. Unter 1024 px liegt der Text über dem ganzen
     Bild → senkrechter Verlauf, oben dichter. Kontrast gemessen, siehe Chronik 24.09. */
body.page-mitarbeitergewinnung main > .ma-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ma-hero > .container { width: 100%; }
.ma-hero .hero__bgvideo {
  background-image: url("Bilder/mitarbeitergewinnung/hero-garderobe-poster.webp");
  background-position: 72% center;
}
.ma-hero .hero__bgvideo-media { object-position: 72% center; }
.ma-hero .hero__bgvideo-scrim {
  background:
    linear-gradient(180deg, rgba(6, 10, 14, 0.30) 0%, rgba(6, 10, 14, 0) 26%, rgba(6, 10, 14, 0) 76%, rgba(6, 10, 14, 0.40) 100%),
    linear-gradient(90deg, rgba(6, 10, 14, 0.72) 0%, rgba(6, 10, 14, 0.60) 34%, rgba(6, 10, 14, 0.22) 56%, rgba(6, 10, 14, 0.06) 78%, rgba(6, 10, 14, 0.06) 100%);
}
@media (max-width: 1023px) {
  .ma-hero .hero__bgvideo { background-position: 76% center; }
  .ma-hero .hero__bgvideo-media { object-position: 76% center; }
  .ma-hero .hero__bgvideo-scrim {
    background: linear-gradient(180deg, rgba(6, 10, 14, 0.74) 0%, rgba(6, 10, 14, 0.66) 55%, rgba(6, 10, 14, 0.52) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ma-hero .hero__bgvideo { background-image: url("Bilder/mitarbeitergewinnung/hero-garderobe-endbild.webp"); }
}
@media (scripting: none) {
  .ma-hero .hero__bgvideo { background-image: url("Bilder/mitarbeitergewinnung/hero-garderobe-endbild.webp"); }
}

/* ============================================================
   [Block: legal-h2-r24] Rechtsseiten (Impressum, Datenschutz, AGB):
   Zwischenüberschriften deutlich kleiner — Marie 24.09.2026:
   „deutlich kleiner machen, sodass es nicht so auffällt".
   .cs-block h2 läuft sonst in voller --text-h2 (bis 64 px); die
   Bausteine teilen sich Fallstudien und Ratgeber, deshalb nur
   .page-legal. Schrift bleibt Instrument Serif (CI: H2 = Display).
   ============================================================ */
.page-legal .cs-block h2 {
  font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
/* Datenschutz trägt darunter H3/H4 — die globale H3 (bis 32 px) wäre
   sonst größer als die verkleinerte H2. Hierarchie: H2 28 · H3 20 · H4 16. */
.page-legal .cs-block h3 {
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-3);
}

/* [Block: beweis-r9] 24.09.2026 (Erich) — Fallbeispiele Runde 9: EIN klarer Punkt als Headline je Karte,
   größer als der Betriebsname und gut lesbar (Montserrat statt Serif-Kursiv); Kopfzeile = Standorte ·
   Partner seit; darunter Ziel-Pillen + was Bese Media konkret macht; „Schritt für Schritt" entfällt.
   Schnelles Blättern: .is-quick verkürzt alle Übergänge (Skript: scripts-beweis.html).
   Liste „Alle Erfolgsgeschichten" (.fs--liste): dieselben Karten untereinander, alle sichtbar. */
.fs__body{gap:10px}
.fs__kicker{font-size:11px;letter-spacing:.12em;line-height:1.5}
.fs__name{order:0;margin:2px 0 0;font-family:var(--font-ui);font-weight:600;font-size:14px;line-height:1.35;letter-spacing:.01em;color:rgba(236,239,248,.72)}
.fs__claim{margin:0 0 4px;font-family:var(--font-ui);font-style:normal;font-weight:600;font-size:clamp(22px,2.05vw,30px);line-height:1.2;letter-spacing:-.012em;color:#fff;background:none;-webkit-background-clip:border-box;background-clip:border-box;text-wrap:balance}
.fs__claim em{font-style:normal;color:#7CC0EA}
.fs__claim--zitat{font-weight:500}
.fs__quelle{display:block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(179,204,223,.66)}
.fs__was{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 4px}
.fs__was .fs__ziele{margin:0}
.fs__leist{font-family:var(--font-ui);font-size:13px;line-height:1.45;color:rgba(236,239,248,.66)}
.fs__leist b{font-weight:600;color:rgba(236,239,248,.86)}
.fs__details{display:none!important}
/* Schnelles Blättern: keine Wartezeit, kein gestaffelter Aufbau */
.fs__case.is-quick{transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1)}
.fs__case.is-quick .fs__body>*,.fs__case.is-quick .fs__aside>*{transition-delay:0s!important;transition-duration:.18s!important}
.fs__case.is-leaving{transition:opacity .26s ease,transform .32s cubic-bezier(.4,0,.6,1),filter .26s ease}
.fs__body>:nth-child(1){transition-delay:0s}.fs__body>:nth-child(2){transition-delay:.03s}.fs__body>:nth-child(3){transition-delay:.06s}.fs__body>:nth-child(4){transition-delay:.09s}.fs__body>:nth-child(5){transition-delay:.12s}.fs__body>:nth-child(6){transition-delay:.15s}
.fs__aside>:nth-child(1){transition-delay:.12s}.fs__aside>:nth-child(2){transition-delay:.16s}
.fs__body>*,.fs__aside>*{transition-duration:.35s,.45s}
@media (max-width:1023px){
  .fs__claim{font-size:clamp(21px,5.6vw,25px);line-height:1.22}
  .fs__was .fs__ziel{font-size:10px;letter-spacing:.035em;padding:4px 9px 4px 7px}
  .fs__was .fs__ziele{flex-wrap:wrap}
  .fs__kicker .ve-seit{width:auto;margin-left:0}
  .fs__kicker{gap:4px 12px}
  .fs__name{font-size:13.5px}
  .fs__leist{font-size:12.5px}
}
/* Liste „Alle Erfolgsgeschichten" */
.fs--liste{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);width:min(1040px,calc(100vw - 32px));margin:0 auto}
.fs--liste .fs__case{position:relative;grid-area:auto;width:auto;opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:none;will-change:auto}
.fs--liste .fs__case .fs__body>*,.fs--liste .fs__case .fs__aside>*{opacity:1;transform:none}
@media (max-width:1023px){.fs--liste .fs__case{grid-template-columns:1fr}}
.fs-liste-wrap{padding-block:clamp(56px,7vw,96px);background:#17191D}
.fs-liste-wrap .bw__head{margin-bottom:clamp(24px,3vw,40px)}

/* [Block: logo-wand-r1] 24.09.2026 (Georg/Erich) — oberste Reihe = Top-Betriebe (langsamste Reihe): der Übergang
   aus der Bühne endet jetzt ÜBER Reihe 1, statt sie abzudunkeln (vorher 200–320 px Verlauf über 120–190 px Abstand). */
.bw__logos::before{height:clamp(100px,11.5vw,176px);background:linear-gradient(180deg,#17191D 0%,#17191D 30%,rgba(23,25,29,0) 100%)}
.bw__logos > .pw__row:first-child{opacity:1}
@media (max-width:1023px){.bw__logos::before{height:96px}}

/* [Block: beweis-r9b] 24.09.2026 (Erich: „manchmal klein, fett, manchmal dünn") — EINE Schrift in den Karten:
   Montserrat überall (kein Serif mehr in Zahlen, Grafiken, Vorschau), feste Gewichte: Headline + große Zahlen 600,
   Kleinlabels 700 in Versalien, Fließtext 400. Zitat-Headlines nicht mehr dünner als die übrigen. */
.fs .fs__claim,.fs .fs__claim--zitat{font-weight:600}
.fs .gc__big-v,.fs .ve-besitz__z b,.fs .ve-satz__t,.fs .ve-leute__plus{font-family:var(--font-ui);font-weight:600;letter-spacing:-.015em}
.fs .gc__big-v{font-size:clamp(28px,2.6vw,38px)}
.fs .ve-besitz__z b{font-size:clamp(18px,1.6vw,22px)}
.fs .ve-satz__t{font-size:clamp(20px,2vw,26px)}
.fs .gc__h{font-family:var(--font-ui);font-weight:600;font-size:18px}
.fs .fs__q-name{font-family:var(--font-ui);font-weight:600;font-size:14px;line-height:1.3;color:rgba(236,239,248,.85)}
.fs .fs__subst li{font-weight:400}
.fs .fs__leist,.fs .fs__leist b{font-weight:400}.fs .fs__leist b{font-weight:600}
.fs .ve-besitz__reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
.fs .ve-besitz__z{min-width:0}
.fs .ve-besitz__z b{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:1023px){.fs .ve-besitz__z b{font-size:clamp(13px,3.7vw,17px)}.fs .ve-besitz__z{padding:10px 8px 11px}}

/* [Block: logo-wand-r2] 24.09.2026 (Erich) — Wand als Band aus festen Plätzen (Engine in scripts-beweis.html):
   gleiche Platzbreite je Logo, damit ein Logowechsel nichts verschiebt; Transform setzt das JS. */
.beweis .pw__row.is-band{animation:none!important;will-change:transform}
.beweis .pw__row.is-band li{flex:none;width:210px;margin-right:44px;justify-content:center;height:60px}
.beweis .pw__row.is-band img{max-width:210px;height:52px;width:auto;object-fit:contain}
@media (max-width:1023px){
  .beweis .pw__row.is-band li{width:106px;margin-right:18px;height:36px}
  .beweis .pw__row.is-band img{max-width:106px;height:30px}
}

/* [Block: hero-logos-r1] 24.09.2026 (Erich) — Hero-Leiste zeigt nur die stärksten Partner (werkzeuge/beweis/hero_logos.py).
   Die Logos sind jetzt eng zugeschnitten wie auf der Startseite (v19) → gleiche Bildhöhe auf allen Unterseiten,
   sonst wirken sie doppelt so groß. Nur die Bildhöhe, die Abstands-Rechnung der Heroes bleibt unberührt. */
.hero-logos__track{--hero-logos-h:clamp(30px,3.6vw,52px)}


/* ============================================================
   Einwilligungs-Banner (24.09.2026, Übergang bis zum Anbieter-Tool)
   Logik: partials/scripts-einwilligung.html. Nicht modal — die Seite
   bleibt bedienbar; „Alle akzeptieren" und „Nur notwendige" gleich groß.
   ============================================================ */
.einw {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  width: min(440px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-morph, var(--ease)), visibility 0s linear 0.45s;
}
.einw.is-offen {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-morph, var(--ease)), visibility 0s;
}
.einw__karte {
  padding: 24px 24px 20px;
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  color: rgba(16, 24, 32, 0.92);
  border: 1px solid rgba(var(--shadow-rgb), 0.12);
  box-shadow:
    0 1px 2px rgba(var(--shadow-rgb), 0.06),
    0 24px 60px -18px rgba(var(--shadow-rgb), 0.35);
  font-family: var(--font-ui);
}
.einw__titel {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: rgba(16, 24, 32, 0.92);
}
.einw__titel em {
  font-style: italic;
  color: var(--accent);
  padding-inline: 0.06em;
}
.einw__text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(16, 24, 32, 0.70);
}
.einw__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.einw__wahl {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
  border-top: 1px solid rgba(16, 24, 32, 0.08);
}
.einw__wahl[hidden] { display: none; }
.einw__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(16, 24, 32, 0.08);
  cursor: pointer;
}
.einw__zeile b { display: block; font-size: 14px; font-weight: 600; color: rgba(16, 24, 32, 0.92); }
.einw__zeile small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: rgba(16, 24, 32, 0.56); }
.einw__zeile input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: rgba(16, 24, 32, 0.16);
  position: relative;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.einw__zeile input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.3);
  transition: transform 0.2s var(--ease);
}
.einw__zeile input:checked { background: var(--accent); }
.einw__zeile input:checked::after { transform: translateX(16px); }
.einw__zeile input:disabled { opacity: 0.55; cursor: default; }
.einw__zeile input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.einw__knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.einw__knoepfe .btn { width: 100%; padding-inline: 12px; }
.einw__knoepfe .btn[hidden], .einw__link[hidden] { display: none; }
.einw__knoepfe [data-einw-auswahl] { grid-column: 1 / -1; }
.einw__sek {
  background: #FFFFFF;
  color: rgba(16, 24, 32, 0.92);
  border: 1px solid rgba(16, 24, 32, 0.18);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.06);
}
.einw__sek:hover { border-color: rgba(16, 24, 32, 0.34); transform: translateY(-1px); }
.einw__link {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 2px;
  padding: 6px 8px;
  border: 0;
  background: none;
  font: 600 12px/1.4 var(--font-ui);
  letter-spacing: 0.2px;
  color: rgba(16, 24, 32, 0.56);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.einw__link:hover { color: var(--accent); }
@media (max-width: 480px) {
  .einw { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
  .einw__karte { padding: 20px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .einw, .einw.is-offen { transition: none; transform: none; }
}
/* Footer: „Cookie-Einstellungen" sieht aus wie die übrigen Rechtslinks (ist ein <a>). */

/* Rechtsseiten: lange Adressen (Datenschutz-Links) brechen auf dem Handy um statt abgeschnitten zu werden (24.09.2026) */
.page-legal .cs-article a { overflow-wrap: anywhere; }

/* ============================================================
   Beratungsraum (24.09.2026) — /<name>-beratung, partials/beratung-raum.html.
   Vollbild-Bühne: Firmensitz-Foto abgedunkelt, Whereby-Raum im Glasrahmen.
   ============================================================ */
html:has(body.page-beratung),
html[data-theme] body.page-beratung {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 70% 55% at 85% -10%, rgba(38, 107, 166, 0.34), transparent 70%),
    radial-gradient(ellipse 55% 45% at 5% 110%, rgba(77, 168, 218, 0.16), transparent 70%),
    linear-gradient(180deg, #0A1119 0%, #070B10 100%);
  background-attachment: fixed;
  color: rgba(235, 242, 248, 0.86);
  font-family: var(--font-ui);
}
/* Feines Raster, zur Mitte hin sichtbar, zu den Rändern weg — Tiefe ohne Bild, keine Ablenkung */
body.page-beratung::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 80%);
}
.br {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.br__raum {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}
.br__fuss {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  font-size: 11px;
  line-height: 1.4;
}
.br__fuss a { color: rgba(235, 242, 248, 0.38); text-decoration: none; }
.br__fuss a:hover { color: rgba(235, 242, 248, 0.75); }
@media (max-width: 720px) {
  html[data-theme] body.page-beratung { background-attachment: scroll; }
  body.page-beratung::before { background-size: 40px 40px; }
}