/* =========================================================================
   Freiheit mit Konzept – globales Design-System · Redesign Oktober 2026
   Datei-Owner: Foundation. Seiten-Agents ändern diese Datei NICHT, sondern
   erweitern in assets/css/pages/<seite>.css mit Seitenpräfix.
   Verbindlich: brand.md §22 (geht allen früheren Farb-, Typo- und Motion-Regeln vor).

   Look: modern, schlicht, leicht verspielt (Basis Variante C „Petrol-Pop“, Wort-Reveal
   und Header-Pillen aus Variante A). Farben AUSSCHLIESSLICH aus der Blau-Familie der
   Bildmarke (Farbton 193–195°) plus Weiß – einzige Ausnahme: --c-error, nur für
   Formularfehler. Schrift: Termina (Headlines, UI, Zahlen) + Roc Grotesk (Fließtext),
   Adobe-Fonts-Kit chf8adf.

   Inhalt
   01  Design-Tokens (neu) + Aliase der alten Token-Namen + Fallback-Schriften
   02  Reset & Base
   03  Typografie
   04  Layout & Utilities
   05  Icons, Sticker (.stk) & 3D-Bildmarke (.mark3d)
   06  Skip-Link & Header (Pillen)
   07  Menü (Dialog)
   08  Footer
   09  Sticky-CTA (Altbestand, derzeit ohne Markup)
   10  Buttons & Links
   11  Section-Head & Eyebrow
   12  Page-Hero & Breadcrumb
   13  Faktenleiste
   14  Cards
   15  Bento-Grid
   16  Quadranten-Modul
   17  Prozess-Schritte
   18  Accordion
   19  Tabs
   20  Testimonial & Avatar
   21  Formularfelder
   22  Rechner-UI
   23  Badges
   24  Unternavigation
   25  CTA-Band
   26  Hinweis-Boxen
   27  Logo-Ornamente
   28  Figure, People, Scroller, Lageskizze, Foto-Grading
   29  Glossar
   30  Kompass & Mini-Quadrant
   31  Wizard
   32  Motion (main.js-Reveal + motion.js-Bausteine) & prefers-reduced-motion
   33  Bühnen-Bausteine: Sticky-Split (.split, .quad-mark) & Laufband (.tape-stage, .tape)
   34  Print
   ========================================================================= */


/* =========================================================================
   01  DESIGN-TOKENS
   ========================================================================= */
:root {
  /* ---------- Farbe: Blau-Familie (Farbton 193–195°) + Weiß ----------
     Kontraste (WCAG, gerechnet – Tabelle in brand.md §22.2):
     ink auf ice-50 14,2:1 · ink-2 auf ice-50 6,3:1 / auf ice-100 5,8:1 · accent auf ice-50 5,5:1 ·
     blue-700 auf Weiß 8,7:1 · Weiß auf blue-700 8,7:1 · on-dark auf blue-900 11,8:1 ·
     on-dark-2 auf blue-900 7,2:1 / auf blue-950 8,6:1 · blue-300 auf blue-900 5,0:1 (Fokus/Deko). */
  --c-white: #ffffff;
  --c-ice-25: #f7fafb;
  --c-ice-50: #eef5f7;    /* Seitenhintergrund */
  --c-ice-75: #e8f1f4;    /* kühle Zwischenfläche */
  --c-ice-100: #e2edf0;   /* alternierende Sektionen, Ergebnis-Panels */
  --c-ice-200: #cde0e5;   /* Linien, Nummern-Pillen, Spuren */
  --c-ice-300: #aecbd3;   /* Deko, Ringe */
  --c-blue-200: #b6d0d7;
  --c-blue-300: #7ea8b5;  /* hellster Logo-Ton („mist“) */
  --c-blue-350: #7ba4b1;
  --c-blue-375: #719ba7;
  --c-blue-400: #628a96;
  --c-blue-500: #4c737f;
  --c-blue-600: #315560;
  --c-blue-700: #2c505b;  /* HAUPTFARBE – dunkles Logo-Ende */
  --c-blue-800: #23444e;
  --c-blue-900: #1a363f;
  --c-blue-950: #112830;
  --c-ink: #0f262e;       /* Fließtext */
  --c-ink-2: #3a5f6a;     /* Sekundärtext */
  --c-accent: #3e6874;    /* Labels, Nummern, kleine Akzente (ersetzt Porphyr) */
  --c-on-dark: #f1f7f9;
  --c-on-dark-2: #a9c7cf;
  /* Funktional: einzige Nicht-Blau-Farbe der Website, NUR für Formularfehler */
  --c-error: #b42318;

  /* Logoverlauf (Original-Stops aus logo-mark.svg) */
  --gradient-brand: linear-gradient(90deg, #7ea8b5 0%, #7ba4b1 25%, #719ba7 45%, #628a96 63%, #4c737f 81%, #315560 97%, #2c505b 100%);
  --gradient-brand-diagonal: linear-gradient(45deg, #7ea8b5 0%, #7ba4b1 25%, #719ba7 45%, #628a96 63%, #4c737f 81%, #315560 97%, #2c505b 100%);
  --gradient-brand-vertical: linear-gradient(180deg, #7ea8b5 0%, #7ba4b1 25%, #719ba7 45%, #628a96 63%, #4c737f 81%, #315560 97%, #2c505b 100%);
  /* Hervorgehobenes Schlüsselwort in Headlines (ersetzt die Kursive) – Start ≥ 5:1 auf hell */
  --gradient-em: linear-gradient(100deg, #3e6874 0%, #2c505b 80%);
  --gradient-em-on-dark: linear-gradient(100deg, #cfe3e9 0%, #9cc0ca 90%);   /* ≥ 4,1:1 auch auf der hellsten Petrol-Fläche */
  /* Petrol-Karten (#335b67 → #2c505b) mit kleinen Headlines (< 24px): Endton blue-200 (≥ 4,59:1) */
  --gradient-em-on-card: linear-gradient(100deg, #e2edf0 0%, #b6d0d7 90%);
  /* Flächen */
  --gradient-hero: radial-gradient(52% 46% at 50% 42%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 100%),
                   radial-gradient(60% 50% at 0% 100%, rgba(205, 224, 229, .7) 0%, rgba(205, 224, 229, 0) 100%),
                   radial-gradient(50% 45% at 100% 0%, rgba(205, 224, 229, .6) 0%, rgba(205, 224, 229, 0) 100%);
  --gradient-deep: radial-gradient(90% 70% at 85% 0%, #1f3f49 0%, #112830 70%);
  --gradient-deep-2: radial-gradient(80% 90% at 100% 100%, #2c505b 0%, #112830 66%);
  --gradient-brand-card: radial-gradient(90% 80% at 0% 0%, #335b67 0%, #2c505b 60%);
  /* Glanz für Sticker und 3D-Formen (nur Blautöne + Weiß) */
  --gloss-sticker: radial-gradient(130% 95% at 26% 14%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 46%),
                   linear-gradient(152deg, #8fb4c0 0%, #628a96 34%, #3f6874 66%, #2c505b 100%);
  --gloss-sticker-light: radial-gradient(130% 95% at 26% 14%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 50%),
                         linear-gradient(150deg, #ffffff 0%, #e2edf0 55%, #b6d0d7 100%);
  --gloss-sticker-deep: radial-gradient(130% 95% at 26% 14%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 46%),
                        linear-gradient(150deg, #3d6772 0%, #1a363f 62%, #112830 100%);

  /* ---------- Semantische Rollen ---------- */
  --bg: var(--c-ice-50);
  --bg-alt: var(--c-ice-100);
  --bg-cool: var(--c-ice-75);
  --bg-dark: var(--c-blue-900);
  --bg-darker: var(--c-blue-950);
  --surface: var(--c-white);
  --surface-tint: var(--c-ice-100);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --heading: var(--c-blue-900);
  --link: var(--c-blue-700);
  --link-hover: var(--c-blue-900);
  --accent: var(--c-accent);
  --border: var(--c-ice-200);
  --field-border: var(--c-blue-400);   /* 3,75:1 auf Weiß (WCAG 1.4.11) */
  --focus: var(--c-blue-700);          /* 7,9:1 auf ice-50 */
  --focus-on-dark: var(--c-on-dark-2); /* 7,2:1 auf blue-900 */
  /* Fokusrahmen, der AUSSERHALB eines Elements auf der umgebenden Fläche liegt (Karten mit
     Stretched Link): Wert kommt von der Fläche drumherum, nicht von der Karte selbst (§14). */
  --focus-out: var(--c-blue-700);
  --on-dark: var(--c-on-dark);
  --on-dark-muted: var(--c-on-dark-2);
  --on-dark-accent: var(--c-on-dark-2);
  --em-fill: var(--gradient-em);       /* Headline-Schlüsselwort, auf dunkel umgebogen */
  --card-bg: var(--c-white);           /* Fläche von Karten/Accordions in der aktuellen Sektion */

  /* Diagramme (nur Blau, Unterscheidung auch über Helligkeit/Muster + Legende + Tabelle) */
  --chart-1: var(--c-blue-400);   /* Einzahlungen / Eigenkapital – 3,75:1 auf Weiß */
  --chart-2: var(--c-blue-900);   /* Wertzuwachs / Darlehen */
  --chart-3: var(--c-blue-700);   /* Kosten / Hervorhebung – in .calc__seg--3 schraffiert */
  --chart-track: var(--c-ice-100);
  --chart-3-pattern: repeating-linear-gradient(-45deg, var(--c-blue-700) 0 3px, var(--c-ice-300) 3px 6px);

  /* ---------- ALIASE: alte Token-Namen → neue Blau-/Neutral-Werte (Seiten-CSS bricht nicht) ---------- */
  --petrol-950: var(--c-blue-950);
  --petrol-900: var(--c-blue-900);
  --petrol-800: var(--c-blue-800);
  --petrol-700: var(--c-blue-700);
  --petrol-600: var(--c-blue-600);
  --petrol-500: var(--c-blue-500);
  --petrol-400: var(--c-blue-400);
  --petrol-300: var(--c-blue-300);
  --petrol-200: var(--c-blue-200);
  --petrol-100: var(--c-ice-100);
  --petrol-50:  var(--c-ice-50);
  --brand: var(--c-blue-700);
  --brand-light: var(--c-blue-300);
  --paper: var(--c-ice-50);        /* war Beige #f7f4ef */
  --stone: var(--c-ice-100);       /* war Stein #ece7df */
  --white: var(--c-white);
  --ink: var(--c-ink);
  --muted: var(--c-ink-2);
  --line: var(--c-ice-200);        /* war #d8d2c8 */
  --porphyr-700: var(--c-blue-800);    /* Text auf Badge-Fläche */
  --porphyr-600: var(--c-accent);      /* Akzent auf hell */
  --porphyr-300: var(--c-on-dark-2);   /* Akzent auf dunkel */
  --porphyr-50:  var(--c-ice-100);     /* Badge-Fläche */
  --error: var(--c-error);
  --error-bg: var(--c-white);          /* keine rosa Flächen mehr – nur Text, Icon, Rand */
  --success: var(--c-blue-700);        /* Erfolg in Petrol mit Häkchen statt Grün */
  --success-bg: var(--c-ice-100);

  /* ---------- Schrift ---------- */
  --font-display: "termina", "Termina Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Verdana, sans-serif;
  --font-text: "roc-grotesk", "Roc Grotesk Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: var(--font-display);   /* Buttons, Labels, Navigation, Zahlen */

  /* Termina ist sehr breit (≈ 1,37 × Arial): Skala bewusst kleiner als in Variante C */
  --fs-display: clamp(2rem, 0.85rem + 4.4vw, 4.5rem);          /* 32 → 72px, H1 Startseite */
  --fs-h1:      clamp(1.875rem, 1.15rem + 2.9vw, 3.5rem);      /* 30 → 56px */
  --fs-h2:      clamp(1.5rem, 1.05rem + 1.9vw, 2.625rem);      /* 24 → 42px */
  --fs-h3:      clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem); /* 19 → 23px */
  --fs-h4:      1.0625rem;                                     /* 17px, Termina */
  --fs-statement: clamp(1.5rem, 0.85rem + 2.75vw, 3.25rem);    /* 24 → 52px, Wort-Reveal */
  --fs-quote:   clamp(1.25rem, 0.95rem + 1.2vw, 2rem);         /* 20 → 32px */
  --fs-stat:    clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);      /* 28 → 44px */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);  /* 18 → 21px */
  --fs-body:    clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);  /* 17 → 18px, Roc Grotesk */
  --fs-small:   0.9375rem;                                     /* 15px */
  --fs-xs:      0.75rem;                                       /* 12px, Labels in Termina */

  --lh-display: 1.06;
  --lh-heading: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.62;

  --tracking-display: -0.028em;
  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.08em;

  --fw-display: 500;   /* Termina */
  --fw-heading: 500;
  --fw-h3: 500;
  --fw-body: 400;      /* Roc Grotesk hat nur 400 */
  --fw-medium: 500;
  --fw-ui: 500;        /* nur zusammen mit --font-ui sinnvoll (Roc kennt kein 500/600) */

  --measure: 64ch;
  --measure-lead: 52ch;

  /* ---------- Abstände (8px-Raster) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;
  --section-y: clamp(4.5rem, 2.2rem + 7vw, 9.5rem);   /* 72 → 152px */
  --section-y-sm: clamp(3rem, 2rem + 3vw, 5rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);          /* 16 → 48px */
  --grid-gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  --fuge: 8px;
  --flow: 1.1em;
  --inset: clamp(8px, 1.2vw, 18px);                   /* Rand um große, runde Flächen */

  /* ---------- Container ---------- */
  --container: 1280px;
  --container-wide: 1440px;
  --container-text: 720px;
  --header-h: 68px;     /* Platz, den der schwebende Pillen-Header oben belegt */

  /* ---------- Radien (runde Formen) ---------- */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: clamp(28px, 3.4vw, 48px);
  --r-pill: 999px;
  --r-sticker: 28%;
  --r-arc: var(--r-xl);
  --r-arc-sm: var(--r-lg);
  --r-quad: 46%;
  --konzept-ecke: var(--r-xl);        /* früher asymmetrische Bogenecke – jetzt rundum */
  --konzept-ecke-sm: var(--r-lg);

  /* ---------- Schatten (petrol-getönt) ---------- */
  --shadow-c: 17, 40, 48;
  --hairline: 1px solid var(--border);
  --shadow-sm: 0 1px 0 rgba(44, 80, 91, .06), 0 0 0 1px rgba(44, 80, 91, .05);
  --shadow-md: 0 18px 38px -22px rgba(17, 40, 48, .42);
  --shadow-lg: 0 34px 64px -32px rgba(17, 40, 48, .5);
  --shadow-pill: inset 0 0 0 1px rgba(44, 80, 91, .1), 0 10px 28px -16px rgba(17, 40, 48, .4);

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 560ms;
  --dur-4: 800ms;
  --dur-signature: 1000ms;
  --blur-reveal: 9px;

  /* ---------- Foto-Grading der Teamfotos (abschaltbar: --ph-tint: 0; --ph-sat: 1) ---------- */
  --ph-sat: 0.66;    /* Sättigung der Fotos (1 = Original) */
  --ph-tint: 0.72;   /* Deckkraft der Petrol-Tönung an den Rändern (0 = aus); Gesichter bleiben fast frei */
  /* Tönungsebene: Mitte (Gesichter) frei, Ränder und Studiolicht in Petrol (mix-blend-mode: color) */
  --ph-grade: radial-gradient(72% 58% at 50% 32%, rgba(62, 104, 116, 0.22) 0%, rgba(62, 104, 116, 0.22) 22%, rgba(62, 104, 116, 0.92) 70%, #3e6874 100%);

  /* ---------- Ebenen ---------- */
  --z-subnav: 80;
  --z-sticky-cta: 90;
  --z-header: 100;
  --z-cursor: 150;
  --z-menu: 200;
  --z-skip: 1000;

  /* ---------- Komponentenmaße ---------- */
  --btn-h: 48px;
  --btn-h-sm: 40px;
  --btn-h-lg: 58px;
  --field-h: 52px;
  --tap: 44px;
  --hub: 96px;
  --avatar: 72px;
  --icon: 24px;
  --pill-h: 48px;

  /* Abgeleitet */
  --section-bg: var(--bg);
  --line-on-dark: rgba(169, 199, 207, 0.2);
  --grid-cols: repeat(12, minmax(0, 1fr));
  --subnav-h: 56px;
  --sticky-cta-h: 0px;   /* keine Sticky-CTA mehr (Header-CTA übernimmt), Token bleibt für Altbestand */
}
@media (min-width: 700px) {
  :root { --header-h: 80px; --pill-h: 52px; }
}

/* ---------- Metrisch angepasste Fallback-Schriften (gegen Layout-Sprünge) ----------
   Gemessen am 13.10.2026 (Canvas, 6 Textproben, macOS): Termina ist 21 % breiter als
   Verdana (400) bzw. 10 % breiter als Verdana Bold (500/600); Roc Grotesk 8,6 % breiter als
   Arial. Höhen: Termina Ascent 1,09 / Descent 0,30–0,38 · Roc Grotesk 0,93 / 0,28.
   *-override = Webfont-Metrik ÷ size-adjust. DejaVu Sans bzw. Liberation Sans für Linux. */
@font-face {
  font-family: "Termina Fallback";
  src: local("Verdana"), local("DejaVu Sans");
  font-weight: 100 449;
  size-adjust: 121%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Termina Fallback";
  src: local("Verdana Bold"), local("Verdana-Bold"), local("DejaVu Sans Bold");
  font-weight: 450 900;
  size-adjust: 110%;
  ascent-override: 99%;
  descent-override: 32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Roc Grotesk Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  font-weight: 100 900;
  size-adjust: 108.6%;
  ascent-override: 85.6%;
  descent-override: 25.8%;
  line-gap-override: 0%;
}


/* =========================================================================
   02  RESET & BASE
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords;
  font-synthesis: none;            /* nie Faux-Bold / Faux-Italic (Termina/Roc ohne Kursive) */
  background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  overflow-x: clip;
}
/* body { overflow-x: clip } wirkt auf den Viewport – gekippte Startzustände (data-stagger="tilt"),
   Laufbänder und Deko verbreiterten mobil trotzdem das Layout-Viewport beim Laden (+8–16 px,
   Review 13.10.2026). clip am <main> erzeugt keinen Scroll-Container: sticky bleibt unberührt. */
main { overflow-x: clip; }

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, fieldset, legend { margin: 0; }

:where(ul[class], ol[class]) { list-style: none; padding: 0; }

fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

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

input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
textarea { resize: vertical; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
hr { border: 0; border-top: var(--hairline); margin: var(--space-7) 0; }

/* hidden gewinnt immer (Reset-Ausnahme von der !important-Regel) */
[hidden] { display: none !important; }

/* Schwebender Header (fixed) und Subnav verdecken nichts (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--header-offset, var(--header-h)) + 16px); }
html:has(.subnav) { scroll-padding-top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h) + 16px); }
[id] { scroll-margin-top: 8px; }

::selection { background: var(--c-ice-200); color: var(--c-ink); }

/* Fokus: immer sichtbar, Blau, ≥ 3:1 gegen jede Fläche (3px + Abstand) */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}


/* =========================================================================
   03  TYPOGRAFIE – Termina (Headlines/UI) + Roc Grotesk (Fließtext)
   ========================================================================= */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  color: var(--heading);
  text-wrap: balance;
  hyphens: manual;
}
/* Schlüsselwort in Headlines (früher kursiv): Logo-Verlauf als Textfarbe, nie kursiv.
   Verlauf startet bei #3e6874 (≥ 5,1:1 auf ice-50/ice-100) – AA auch für kleine Headlines. */
:is(h1, h2, h3, .h1, .h2, .h3, .display, .quote, .cta-band__title, legend) em {
  font-style: normal;
  color: var(--c-blue-700);
  background: var(--em-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: 0.04em;
  margin-right: -0.04em;
}
@media (forced-colors: active) {
  :is(h1, h2, h3, .h1, .h2, .h3, .display, .quote, .cta-band__title, legend) em {
    background: none; -webkit-text-fill-color: currentColor; color: inherit;
  }
}
/* em/i im Fließtext: keine Kursive (gibt es nicht) – Termina 400, etwas kleiner */
em, i, cite { font-style: normal; }
:where(p, li, dd, dt, td, th, figcaption, blockquote, label, .lead) :where(em, i) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.88em;
  letter-spacing: -0.005em;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: 1.22;
  letter-spacing: -0.012em;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--text);
}
/* Termina ist breit: lange Komposita (Versorgungslücke, Verbraucherstreitbeilegung …) dürfen
   in kleinen Headlines (h3/h4, Kartentitel – oft in schmalen Spalten) und auf schmalen Screens
   auch in h1/h2 notfalls getrennt werden – nur Wörter ab 14 Zeichen, mind. 6 Zeichen je Seite.
   Besser: &shy; an der Wortfuge setzen (Berufs&shy;unfähigkeit). */
h3, h4, .h3, .h4, .card__title, .quadrant__title, legend, summary, dt, th,
.card__title :is(a, span) {
  hyphens: auto;
  hyphenate-limit-chars: 14 6 6;
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 6;
}
@media (max-width: 599.98px) {
  h1, h2, .h1, .h2, .display {
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 6;
  }
}

p { max-width: var(--measure); }
p, li, dd { hyphens: auto; text-wrap: pretty; }
body {
  hyphenate-limit-chars: 10 4 5;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}
.quote p, .lead, .section-head__lead, .page-hero__lead, .testimonial__quote p,
.cta-band__note, .facts__value, strong, .eyebrow, .section-head__label,
.quadrant__text, .btn { hyphens: manual; }
a, .term { hyphens: manual; }
a[href^="mailto:"],
.u-email { hyphens: manual; }
.u-email { overflow-wrap: normal; word-break: normal; }

/* Hervorhebungen im Fließtext: Termina 500, eine Spur kleiner (x-Höhe wie Roc Grotesk) */
strong, b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9em;
  letter-spacing: -0.005em;
}
:is(h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display, .btn, .eyebrow, .section-head__label, .facts__value, .stat) :is(strong, b) {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure-lead);
}
.small, small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}
/* Eyebrow = Label in Termina-Versalien (nur per CSS, nie im HTML-Text) */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--accent { color: var(--accent); }
/* Eyebrow mit Viertel-Punkt (Bildmarke im Kleinen) davor – im Page-Hero automatisch */
.eyebrow--line,
.page-hero__text > .eyebrow:first-child {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
}
.eyebrow--line::before,
.page-hero__text > .eyebrow:first-child::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.on-dark .eyebrow--line::before,
.section--dark .eyebrow--line::before { background: var(--c-blue-300); }

.quote {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
  text-wrap: balance;
  hyphens: manual;
}
/* Statement (für den Wort-Reveal [data-reveal-words]): Termina 400, groß, mit Stickern */
.statement {
  max-width: 21em;
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: -0.03em;
  color: var(--heading);
  text-wrap: pretty;
  hyphens: manual;
}
.statement .stk { --s: 0.86em; margin-inline: 0.05em; vertical-align: -0.1em; }
.stat {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--heading);
  font-variant-numeric: lining-nums tabular-nums;
}
.caption {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-muted);
}
.tabular,
table, output { font-variant-numeric: tabular-nums lining-nums; }

/* Links im Fließtext: immer unterstrichen */
a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-1) var(--ease-out), text-decoration-thickness var(--dur-1) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* Fließtext-Container (Rechtstexte) */
.prose > * + * { margin-top: var(--flow); }
.prose > :where(h2) { margin-top: var(--space-8); font-size: var(--fs-h3); font-weight: var(--fw-h3); }
.prose > :where(h3) { margin-top: var(--space-6); font-size: var(--fs-h4); font-weight: 500; color: var(--text); }
.prose > :where(h2, h3) + * { margin-top: var(--space-3); }
.prose :where(ul:not([class]), ol:not([class])) { padding-left: 1.25em; }
.prose :where(ul:not([class]), ol:not([class])) > :where(li + li) { margin-top: var(--space-2); }
.prose :where(ul:not([class])) > li::marker { color: var(--c-blue-400); }


/* =========================================================================
   04  LAYOUT & UTILITIES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }

/* Sektionen – Wechsel heller und tiefer Petrol-Flächen */
.section {
  --section-bg: var(--c-ice-50);
  position: relative;
  padding-block: var(--section-y);
  background: var(--section-bg);
}
.section--paper { --section-bg: var(--c-ice-50); }
.section--stone { --section-bg: var(--c-ice-100); }
.section--cool  { --section-bg: var(--c-ice-75); }
.section--white { --section-bg: var(--c-white); --card-bg: var(--c-ice-50); }
.section--tight { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--rule { border-top: var(--hairline); }

/* Dunkle Flächen: semantische Rollen lokal umgebogen; als große runde Karte mit Rand (Variante C) */
.section--dark,
.on-dark {
  --section-bg: var(--bg-dark);
  --text: var(--on-dark);
  --text-muted: var(--on-dark-muted);
  --heading: var(--on-dark);
  --link: var(--c-on-dark);
  --link-hover: var(--c-white);
  --accent: var(--on-dark-accent);
  --border: var(--line-on-dark);
  --focus: var(--focus-on-dark);
  --em-fill: var(--gradient-em-on-dark);
  color: var(--text);
}
.section--dark {
  margin: var(--inset);
  border-radius: var(--r-xl);
  background: var(--gradient-deep);
  overflow: clip;
}
.section--darker { --section-bg: var(--bg-darker); background: var(--gradient-deep-2); }

/* Fokusrahmen außerhalb von Karten (--focus-out): Helle Flächen geben ihren Kindern Blau mit,
   dunkle Flächen (Sektion, Petrol-Karte, CTA) Hellblau – ≥ 3:1 auf der jeweiligen Fläche.
   Bewusst an die KINDER vererbt: die Karte selbst liest den Wert ihrer Umgebung. */
:is(.card, .note, .calc__inputs, .calc__result) > * { --focus-out: var(--c-blue-700); }
:is(.section--dark, .on-dark, .cta-band, .card--deep, .note--deep) > * { --focus-out: var(--c-on-dark-2); }

/* 12er-Raster */
.l-grid-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 1024px) {
  .l-grid-12 { grid-template-columns: var(--grid-cols); }
}

/* Früher: Inhalt bündig zur Marginalien-Spalte. Der Section-Head hat keine Randspalte mehr
   (Label über der Headline) – Inhalt läuft jetzt bündig links mit. */
.l-offset { display: block; }
.l-offset--text > * { max-width: var(--measure); }

.l-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--grid-gap);
}
@media (min-width: 1024px) {
  .l-split { grid-template-columns: var(--grid-cols); gap: var(--grid-gap); }
  .l-split > :first-child { grid-column: span 6; }
  .l-split > :last-child  { grid-column: span 6; }
  .l-split--7-5 > :first-child { grid-column: span 7; }
  .l-split--7-5 > :last-child  { grid-column: span 5; }
  .l-split--5-7 > :first-child { grid-column: span 5; }
  .l-split--5-7 > :last-child  { grid-column: span 7; }
  .l-split--6-6 > :first-child,
  .l-split--6-6 > :last-child  { grid-column: span 6; }
  .l-split--center { align-items: center; }
  .l-split--end { align-items: end; }
  .l-split--gap > :first-child { grid-column: span 5; }
  .l-split--gap > :last-child { grid-column: 7 / -1; }
}

.l-stack > * + * { margin-top: var(--flow); }
.l-stack--sm > * + * { margin-top: var(--space-3); }
.l-stack--lg > * + * { margin-top: var(--space-6); }

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.l-cluster--tight { gap: var(--space-2) var(--space-3); }

.l-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--grid-gap);
}
@media (min-width: 768px) {
  .l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-grid--3, .l-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Utilities */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.u-measure { max-width: var(--measure) !important; }
.u-measure-lead { max-width: var(--measure-lead) !important; }
.u-center { text-align: center !important; margin-inline: auto !important; }
.u-nowrap { white-space: nowrap !important; }
.u-line { display: block; text-wrap: balance; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mt-7 { margin-top: var(--space-7) !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-muted { color: var(--text-muted) !important; }
.u-accent { color: var(--accent) !important; }
/* Fotos ohne Petrol-Grading (z. B. Kundenfotos in großer Darstellung) */
.u-photo-natural { --ph-sat: 1; --ph-tint: 0; }
/* Unsichtbarer SVG-Sprite (Symbole, Verläufe) – nicht display:none, sonst gehen Verläufe verloren */
.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (min-width: 1024px) { .u-hide-lg { display: none !important; } }
html:not(.js) .u-js-only { display: none !important; }
html:not(.js) :is([data-handover], [data-print], [data-prefill-sparplan], [data-vcard]) { display: none; }
@media (max-width: 1023.98px) { .u-show-lg { display: none !important; } }


/* =========================================================================
   05  ICONS, STICKER (.stk) & 3D-BILDMARKE
   ========================================================================= */
.icon {
  width: var(--icon);
  height: var(--icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}
.icon--sm { width: 20px; height: 20px; }
.icon--lg { width: 32px; height: 32px; }
.icon--prev { transform: rotate(90deg); }
.icon--next { transform: rotate(-90deg); }
.icon--winkel {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  transition: transform var(--dur-2) var(--ease-spring);
}

/* Sticker: glänzende App-Icon-Kachel (Variante A/C). Größe über --s, Drehung über --r.
   <span class="stk stk--md" style="--r:-7deg" aria-hidden="true"><svg class="icon" viewBox="0 0 24 24">…</svg></span>
   Im Fließtext/Headlines ohne Größen-Modifier: 0,9em. */
.stk {
  --s: 0.9em;
  --r: -6deg;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  margin-inline: 0.06em;
  border-radius: var(--r-sticker);
  vertical-align: -0.1em;
  color: var(--c-white);
  background: var(--gloss-sticker);
  box-shadow:
    inset 0 calc(var(--s) * 0.03) 0 rgba(255, 255, 255, 0.55),
    inset 0 calc(var(--s) * -0.07) calc(var(--s) * 0.14) rgba(16, 42, 50, 0.38),
    0 calc(var(--s) * 0.14) calc(var(--s) * 0.3) calc(var(--s) * -0.08) rgba(var(--shadow-c), 0.5),
    0 calc(var(--s) * 0.03) calc(var(--s) * 0.06) rgba(var(--shadow-c), 0.28);
  transform: rotate(var(--r));
  flex: none;
}
.stk::after {
  content: "";
  position: absolute;
  inset: 5% 12% 54% 12%;
  border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.stk > svg {
  position: relative;
  z-index: 1;
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(16, 42, 50, 0.3));
}
/* Gefüllte Teile (class="fill") inline gezeichneter Symbole. Über <use> erreichen Selektoren mit Kontext
   die Kopie im Schattenbaum NICHT – die Sprite-Symbole tragen deshalb fill="currentColor" stroke="none"
   direkt als Attribut (assets/img/sprite-source.svg, Konsolidierung 13.10.2026). */
.stk > svg .fill { fill: currentColor; stroke: none; }
.stk--light { color: var(--c-blue-700); background: var(--gloss-sticker-light); }
.stk--light > svg { filter: none; }
.stk--deep { color: #cfe3e9; background: var(--gloss-sticker-deep); }
.stk--logo > svg { fill: var(--c-white); stroke: none; width: 62%; height: 62%; }
.stk--logo.stk--light > svg { fill: var(--c-blue-700); }
.stk--xs { --s: 34px; }
.stk--sm { --s: 40px; }
.stk--md { --s: 56px; }
.stk--lg { --s: 72px; }
.stk--xl { --s: clamp(64px, 6.4vw, 92px); }
.stk:is(.stk--xs, .stk--sm, .stk--md, .stk--lg, .stk--xl) { margin: 0; vertical-align: middle; }
.stk--xs > svg, .stk--sm > svg { stroke-width: 1.9; }
/* Gefüllte Sticker-Teile (class="fill") auch in Linien-Icons und Schritt-Nummern füllen
   (sonst wird z. B. der Mittelpunkt der Zielscheibe in .steps__num zum Ring) */
.icon .fill,
.steps__num .fill { fill: currentColor; stroke: none; }

/* 3D-Bildmarke aus vier Vierteln (Baustein [data-logo-assemble], motion.js) */
.mark3d { position: relative; transform-style: preserve-3d; }
.mark3d__pop { position: absolute; inset: 0; transform-style: preserve-3d; }
.mark3d__pop.is-pop { animation: fmk-pop 0.7s var(--ease-spring); }
@keyframes fmk-pop { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
.piece { position: absolute; width: 51.613%; height: 51.613%; transform-style: preserve-3d; }
.piece--tl { left: -0.806%; top: -0.806%; --o: 64% 64%; }
.piece--tr { left: 49.194%; top: -0.806%; --o: 36% 64%; }
.piece--br { left: 49.194%; top: 49.194%; --o: 36% 36%; }
.piece--bl { left: -0.806%; top: 49.194%; --o: 56% 44%; }
.piece, .piece__tilt { transform-origin: var(--o); }
.piece__tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.piece__face, .piece__side, .piece__shadow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.piece__shadow { fill: rgba(17, 40, 48, 0.34); filter: blur(10px); transform: translate3d(5%, 13%, -80px); opacity: 0.9; }
.piece__face { filter: drop-shadow(5px 8px 0 #23444e); }
.has-layers .piece__face { filter: none; }
.piece__sheen { opacity: 0.5; }
.mark3d__whole { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transform: translateZ(1px); transition: opacity 0.25s; }


/* =========================================================================
   06  SKIP-LINK & HEADER – schwebende Pillen (Variante A)
   Oben: Logo-Pille + Wortmarke · Menü-Pille mittig · Telefon + Erstgespräch rechts.
   Beim Scrollen (main.js: .is-compact ab 72px) wird der Header kompakt: Logo + „Menü“,
   die Pille „Kostenloses Erstgespräch“ gleitet oben mittig herein. Über dunklen Flächen
   (.is-over-dark) werden die Pillen deckend.
   ========================================================================= */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  background: var(--c-blue-900);
  color: var(--c-white);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-pill);
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  color: var(--c-white);
  outline-color: var(--c-blue-300);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding: 10px var(--gutter) 0;
  pointer-events: none;
}
@media (min-width: 700px) {
  .site-header { padding-top: 14px; }
}
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--pill-h);
  max-width: calc(var(--container-wide) - 2 * var(--gutter));
  margin-inline: auto;
}
.site-header a,
.site-header button { pointer-events: auto; }

/* Gemeinsame Pillen-Optik */
.brand__pill,
.site-nav,
.site-header__phone,
.menu-toggle,
.site-header__nojs {
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-pill);
  border-radius: var(--r-pill);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.35s, transform 0.6s var(--ease-out), visibility 0s;
}

/* Lockup: Logo-Pille + Wortmarke in Termina */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  flex: none;
  color: var(--heading);
  text-decoration: none;
  border-radius: var(--r-pill);
}
.brand:hover { color: var(--heading); }
.brand__pill {
  display: grid;
  place-items: center;
  width: var(--pill-h);
  height: var(--pill-h);
  flex: none;
}
.brand__mark { width: 28px; height: 28px; flex: none; transition: transform 0.7s var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.06); }
.brand__word {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--heading);
  transition: opacity 0.35s, transform 0.6s var(--ease-out), visibility 0s;
}
.brand__mit { font-weight: 300; color: var(--text-muted); }
.brand__word em { font-style: normal; font-weight: 300; }
.brand--on-dark,
.brand--on-dark:hover,
.brand--on-dark .brand__word { color: var(--on-dark); }
.brand--on-dark .brand__mit { color: var(--on-dark-muted); }
@media (min-width: 400px) {
  .brand__word { font-size: 0.9375rem; }
}

/* Hauptnavigation: Pille mittig */
.site-nav {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: center;
  height: var(--pill-h);
  padding: 0 6px;
  min-width: 0;
  transform: translateX(-50%);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.site-nav__link:hover { background: var(--c-ice-100); color: var(--c-ink); }
.site-nav__link[aria-current="page"] { background: var(--c-blue-700); color: var(--c-white); }
.site-nav__link:focus-visible { outline-offset: 1px; border-radius: var(--r-pill); }

/* Rechts: Telefon + Erstgespräch */
.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.35s, transform 0.6s var(--ease-out), visibility 0s;
}
.site-header__phone {
  display: grid;
  place-items: center;
  width: var(--pill-h);
  height: var(--pill-h);
  color: var(--c-blue-700);
  text-decoration: none;
}
.site-header__phone:hover { color: var(--c-blue-900); background: var(--c-white); }
.site-header__phone .icon { width: 20px; height: 20px; }
.site-header__phone-text { display: none; }
.site-header__cta.btn { min-height: var(--pill-h); padding-inline: 1.15rem; }

/* Menü-Pille: kompakt neben dem Logo (Desktop) bzw. rechts (mobil) */
.menu-toggle {
  position: absolute;
  left: calc(var(--pill-h) + 10px);
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--pill-h);
  padding: 0 18px 0 14px;
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.55s var(--ease-spring), visibility 0s linear 0.55s, background-color 0.35s, box-shadow 0.35s;
}
.menu-toggle:hover { background: var(--c-white); }
.menu-toggle .icon { width: 20px; height: 20px; }
.menu-toggle__label { white-space: nowrap; }
.site-header__nojs { display: none; }

/* „Kostenloses Erstgespräch“ gleitet beim Scrollen oben mittig herein */
.site-header__float {
  position: absolute;
  left: 50%;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--pill-h);
  padding: 0 8px 0 20px;
  border-radius: var(--r-pill);
  background: var(--c-blue-950);
  color: var(--c-white);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 16px 34px -16px rgba(17, 40, 48, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -160%);
  transition: transform 0.7s var(--ease-spring), opacity 0.3s, visibility 0s linear 0.7s, background-color 0.35s, color 0.35s;
}
.site-header__float:hover { color: var(--c-white); background: var(--c-blue-900); }
.site-header__float-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue-300);
  box-shadow: 0 0 0 4px rgba(126, 168, 181, 0.25);
  transition: background-color 0.35s;
}
.site-header__float .icon {
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 50%;
  background: var(--c-blue-300);
  color: var(--c-blue-950);
  transition: transform 0.5s var(--ease-spring), background-color 0.35s, color 0.35s;
}
.site-header__float:hover .icon { transform: rotate(-8deg) scale(1.06); }
.site-header__float-short { display: none; }

/* Kompakt-Zustand */
.site-header.is-compact .brand__word { opacity: 0; transform: translateX(-12px); visibility: hidden; transition: opacity 0.25s, transform 0.5s var(--ease-out), visibility 0s linear 0.5s; }
.site-header.is-compact .site-nav { opacity: 0; transform: translate(-50%, -18px) scale(0.94); visibility: hidden; transition: opacity 0.25s, transform 0.5s var(--ease-out), visibility 0s linear 0.5s; }
.site-header.is-compact .site-header__actions { opacity: 0; transform: translateY(-14px); visibility: hidden; transition: opacity 0.25s, transform 0.5s var(--ease-out), visibility 0s linear 0.5s; }
.site-header.is-compact .menu-toggle { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s 0.08s, transform 0.6s var(--ease-spring) 0.08s, visibility 0s, background-color 0.35s, box-shadow 0.35s; }
.site-header.is-compact .site-header__float { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: transform 0.75s var(--ease-spring) 0.05s, opacity 0.3s 0.05s, visibility 0s, background-color 0.35s, color 0.35s; }

/* Über dunklen Flächen: Pillen deckend, CTA-Pille kippt auf Weiß */
.site-header.is-over-dark :is(.brand__pill, .site-nav, .site-header__phone, .menu-toggle) {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 14px 30px -16px rgba(5, 16, 20, 0.7);
}
.site-header.is-over-dark .site-header__float { background: var(--c-white); color: var(--c-blue-950); }
.site-header.is-over-dark .site-header__float .icon { background: var(--c-blue-700); color: var(--c-white); }
.site-header.is-over-dark .site-header__float-dot { background: var(--c-blue-700); box-shadow: 0 0 0 4px rgba(44, 80, 91, 0.16); }
.site-header.is-over-dark:not(.is-compact) .brand__word { color: var(--on-dark); }
.site-header.is-over-dark:not(.is-compact) .brand__mit { color: var(--on-dark-muted); }

/* Schmaler als die volle Navigation (oder JS meldet: passt nicht → .is-nav-hidden):
   nur Logo + Menü-Pille rechts */
@media (max-width: 1199.98px) {
  .site-nav,
  .site-header__actions { display: none; }
  .menu-toggle { left: auto; right: 0; opacity: 1; visibility: visible; transform: none; }
}
/* Wird es eng, verschwindet zuerst die Wortmarke (Logo-Pille bleibt), dann die Navigation */
.site-header.is-word-hidden .brand__word { display: none; }
.site-header.is-nav-hidden .site-nav,
.site-header.is-nav-hidden .site-header__actions { display: none; }
.site-header.is-nav-hidden .menu-toggle { left: auto; right: 0; opacity: 1; visibility: visible; transform: none; }
@media (max-width: 699.98px) {
  /* weicher Schleier hinter den kompakten Pillen, damit durchlaufender Text nicht kollidiert */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 84px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(238, 245, 247, 0.95) 0%, rgba(238, 245, 247, 0.72) 45%, rgba(238, 245, 247, 0) 100%);
    opacity: 0;
    transition: opacity 0.4s;
  }
  .site-header.is-compact:not(.is-over-dark)::before { opacity: 1; }
}
@media (max-width: 559.98px) {
  .menu-toggle { width: var(--pill-h); padding: 0; }
  .menu-toggle__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .site-header__float { padding-left: 16px; gap: 8px; }
  .site-header__float-long { display: none; }
  .site-header__float-short { display: inline; }
}
@media (max-width: 359.98px) {
  .brand { gap: 8px; }
  .brand__word { font-size: 0.8125rem; }
  .site-header__float-dot { display: none; }
}
/* Ohne JavaScript: kein Dialog-Menü – Link auf die Fußnavigation */
html:not(.js) .menu-toggle { display: none !important; }
@media (max-width: 1199.98px) {
  html:not(.js) .site-header__nojs {
    display: inline-flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    height: var(--pill-h);
    padding: 0 18px;
    color: var(--c-ink);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
  }
}


/* =========================================================================
   07  MENÜ – Panel mit Schleier (modaler Dialog, main.js: Fokusfalle, Esc, inert)
   Gilt auf allen Breiten: mobil immer, auf dem Desktop im kompakten Header.
   ========================================================================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --link: var(--c-blue-700);
  --focus: var(--c-blue-700);
}
.mobile-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 38, 46, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.mobile-menu__panel,
.mobile-menu__inner {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  max-width: 560px;
  max-height: calc(100dvh - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px clamp(20px, 4vw, 30px) 28px;
  border-radius: 30px;
  background: var(--c-white);
  box-shadow: 0 40px 90px -30px rgba(17, 40, 48, 0.55), inset 0 0 0 1px rgba(44, 80, 91, 0.08);
  transform-origin: 30px 30px;
  transform: translateY(-10px) scale(0.96);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.3s;
}
@media (min-width: 700px) {
  .mobile-menu__panel,
  .mobile-menu__inner {
    top: 14px;
    left: max(14px, calc((100vw - var(--container)) / 2 + var(--gutter) - 6px));
    right: auto;
    width: min(560px, calc(100vw - 28px));
  }
}
/* Während des Ausblendens (bis main.js hidden setzt) fängt das Menü keine Klicks mehr ab –
   sonst verschluckte der Schleier ein schnelles Wieder-Öffnen über „Menü“ (Review 13.10.2026) */
.mobile-menu:not(.is-open) { pointer-events: none; }
.mobile-menu.is-open .mobile-menu__scrim { opacity: 1; }
.mobile-menu.is-open :is(.mobile-menu__panel, .mobile-menu__inner) { transform: none; opacity: 1; }
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 52px;
  margin-bottom: var(--space-2);
}
.menu-close {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  border-radius: 50%;
  background: var(--c-ice-100);
  color: var(--c-ink);
  transition: background-color var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring);
}
.menu-close:hover { background: var(--c-ice-200); transform: rotate(90deg); }

.mobile-menu__list { display: grid; gap: 0; }
.mobile-menu__list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease-out), transform 0.7s var(--ease-out);
}
.mobile-menu__list li:nth-child(2) { transition-delay: 35ms; }
.mobile-menu__list li:nth-child(3) { transition-delay: 70ms; }
.mobile-menu__list li:nth-child(4) { transition-delay: 105ms; }
.mobile-menu__list li:nth-child(5) { transition-delay: 140ms; }
.mobile-menu__list li:nth-child(6) { transition-delay: 175ms; }
.mobile-menu__list li:nth-child(7) { transition-delay: 210ms; }
.mobile-menu__list li:nth-child(8) { transition-delay: 245ms; }
.mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: none; }
.mobile-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 50px;
  padding-block: 2px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.6vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring);
}
.mobile-menu__link:hover { color: var(--c-blue-700); transform: translateX(6px); }
.mobile-menu__link[aria-current="page"] { color: var(--c-accent); }
.mobile-menu__link[aria-current="page"]::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-300);
  transform: rotate(180deg);
}
.mobile-menu__foot {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-ice-200);
}
.mobile-menu__contact {
  display: grid;
  gap: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}
.mobile-menu__contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-ink);
  text-decoration: none;
}
.mobile-menu__contact a:hover { text-decoration: underline; }

body.has-menu-open { overflow: hidden; padding-right: var(--sbw, 0px); }
body.has-menu-open .site-header { padding-right: calc(var(--gutter) + var(--sbw, 0px)); }


/* =========================================================================
   08  FOOTER – tiefe Petrol-Fläche, runde Oberkante, große Wortmarke
   ========================================================================= */
.site-footer {
  --text: var(--on-dark);
  --text-muted: var(--on-dark-muted);
  --heading: var(--on-dark);
  --link: var(--on-dark);
  --link-hover: var(--c-white);
  --focus: var(--focus-on-dark);
  --border: var(--line-on-dark);
  position: relative;
  overflow: clip;
  margin-top: var(--inset);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: radial-gradient(70% 60% at 100% 0%, #1d3d47 0%, rgba(29, 61, 71, 0) 70%), var(--c-blue-950);
  color: var(--on-dark);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.site-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-9) var(--space-8);
}
.site-footer__brand .brand__mark { width: 28px; height: 28px; }
.site-footer__claim {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--on-dark);
  max-width: 14em;
  text-wrap: balance;
}
.site-footer__address {
  margin-top: var(--space-5);
  color: var(--on-dark-muted);
  line-height: 1.75;
}
.site-footer a {
  color: var(--on-dark);
  text-decoration-color: transparent;
}
.site-footer a:hover {
  color: var(--c-white);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}
.site-footer__address a { color: var(--on-dark); }
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--space-7) var(--space-6);
}
.site-footer__title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-blue-300);   /* 5,9:1 auf blue-950 */
  margin-bottom: var(--space-4);
}
.site-footer__col ul { display: grid; gap: var(--space-1); list-style: none; padding: 0; }
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition: color var(--dur-1) var(--ease-out), transform 0.35s var(--ease-spring);
}
.site-footer__col a:hover { transform: translateX(4px); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  position: relative;
  padding-block: var(--space-5) var(--space-5);
  color: var(--on-dark-muted);
  font-size: var(--fs-xs);
}
.site-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--line-on-dark);
}
.site-footer__legal { max-width: none; hyphens: manual; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer__links a[aria-current="page"] { color: var(--c-white); text-decoration-color: var(--c-blue-300); }
.site-footer__privacy { flex-basis: 100%; max-width: none; color: var(--on-dark-muted); }
.site-footer__privacy a { text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* Große Wortmarke als Abschluss (dekorativ, aria-hidden) */
.site-footer__giant {
  margin: var(--space-4) 0 0;
  max-width: none;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: min(calc((100vw - 2 * var(--gutter)) / 13.4), 8.5rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: #1d3d47;
  white-space: nowrap;
  text-align: center;
  transform: translateY(0.14em);
  user-select: none;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: var(--grid-cols); column-gap: var(--grid-gap); }
  .site-footer__brand { grid-column: span 5; }
  .site-footer__nav { grid-column: 7 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__links { margin-left: auto; }
}
/* Review 13.10.: zwischen 1024 und 1279 px waren die Spalten zu schmal für Termina-Versalien
   („UNTERNEHME|N“) – Navigation bekommt dort 8 statt 6 Spalten. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-footer__brand { grid-column: span 4; }
  .site-footer__nav { grid-column: 5 / -1; }
}
.site-footer__title { overflow-wrap: normal; hyphens: manual; }


/* =========================================================================
   09  STICKY-CTA (Altbestand) – seit dem Redesign ohne Markup: Die Pille
   „Kostenloses Erstgespräch“ im Header übernimmt. Stil bleibt für den Notfall.
   ========================================================================= */
.sticky-cta {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky-cta);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--fuge);
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pill);
  transform: translateY(140%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-spring), visibility 0s linear var(--dur-3);
}
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-spring), visibility 0s; }
.sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  color: var(--c-blue-700);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.sticky-cta__btn .icon:not(.icon--winkel) { width: 20px; height: 20px; }
.sticky-cta__btn--primary { background: var(--c-blue-700); color: var(--c-white); }
.sticky-cta__btn:hover { background: var(--c-ice-100); color: var(--c-blue-800); }
.sticky-cta__btn--primary:hover { background: var(--c-blue-800); color: var(--c-white); }
@media (min-width: 1120px) { .sticky-cta { display: none; } }

/* Kleine Viewport-Höhe (Zoom, Handy quer): Header scrollt nicht mit, nichts klebt */
@media (max-height: 500px) {
  .site-header { position: absolute; }
  .sticky-cta { display: none; }
  html,
  html:has(.subnav) { scroll-padding-top: var(--space-4); scroll-padding-bottom: 0; }
}


/* =========================================================================
   10  BUTTONS & LINKS – Pillen in Termina, federnde Bewegung
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0.625rem 1.375rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  transition: transform 0.45s var(--ease-spring), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn__icon { flex: none; transition: transform 0.45s var(--ease-spring); }
.btn:hover .btn__icon,
.btn:focus-visible .btn__icon { transform: translate(2px, -2px); }

.btn--primary {
  background: var(--c-blue-700);
  color: var(--c-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 26px -14px rgba(17, 40, 48, 0.6);
}
.btn--primary:hover { background: var(--c-blue-800); color: var(--c-white); }
.btn--primary:active { background: var(--c-blue-900); }

.btn--secondary { background: rgba(255, 255, 255, 0.55); border-color: var(--c-blue-700); color: var(--c-blue-700); }
.btn--secondary:hover { background: var(--c-white); color: var(--c-blue-800); box-shadow: var(--shadow-md); }

.btn--ghost {
  min-height: var(--tap);
  padding: 0.5rem 0.5rem;
  background: transparent;
  color: var(--link);
}
.btn--ghost:hover {
  transform: none;
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}

.btn--inverse { background: var(--c-white); color: var(--c-blue-900); box-shadow: 0 14px 30px -16px rgba(5, 16, 20, 0.6); }
.btn--inverse:hover { background: var(--c-ice-100); color: var(--c-blue-950); }

.btn--outline-inverse { background: transparent; border-color: rgba(241, 247, 249, 0.5); color: var(--c-on-dark); }
.btn--outline-inverse:hover { border-color: var(--c-white); background: rgba(255, 255, 255, 0.06); color: var(--c-white); }

.btn--sm { min-height: var(--btn-h-sm); font-size: 0.875rem; padding: 0.5rem 1.05rem; }
.btn--ghost.btn--sm { padding: 0.5rem 0.5rem; }
.btn--lg { min-height: var(--btn-h-lg); font-size: 0.9375rem; padding: 0.75rem 1.25rem; }
@media (min-width: 480px) {
  .btn--lg { font-size: 1rem; padding-inline: 1.6rem; }
}
/* Große Buttons: Pfeil im Kreis (Variante C) */
.btn--lg:not(.btn--ghost) .btn__icon {
  width: 36px;
  height: 36px;
  padding: 10px;
  margin-block: -6px;
  margin-right: -0.85rem;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-blue-700);
}
.btn--lg:not(.btn--ghost):hover .btn__icon { transform: rotate(-10deg) scale(1.08); }
.btn--inverse.btn--lg .btn__icon,
.btn--secondary.btn--lg .btn__icon { background: var(--c-blue-700); color: var(--c-white); }
.btn--outline-inverse.btn--lg .btn__icon { background: rgba(255, 255, 255, 0.14); color: var(--c-white); }
.btn--block { display: flex; width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn:is([disabled], [aria-disabled="true"]):hover { transform: none; }
.btn--primary:is([disabled], [aria-disabled="true"]):hover { background: var(--c-blue-700); }
.btn--secondary:is([disabled], [aria-disabled="true"]):hover { background: transparent; color: var(--c-blue-700); box-shadow: none; }
.btn--ghost:is([disabled], [aria-disabled="true"]):hover { color: var(--link); text-decoration: none; }
.btn:is([disabled], [aria-disabled="true"]):hover .btn__icon { transform: none; }

.btn--sm { position: relative; }
.btn--sm::before { content: ""; position: absolute; inset: -2px 0; }

.link-arrow {
  display: inline-block;
  padding-block: var(--space-2);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
  hyphens: manual;
}
.link-arrow .icon--winkel {
  display: inline-block;
  margin-left: 0.4em;
  vertical-align: -0.1em;
}
/* Der Winkel rutscht nie allein in eine neue Zeile (Review 13.10.2026, z. B. „Kaufnebenkosten grob
   berechnen“ bei 390 px): Er nimmt in der Zeile keinen Platz ein (negativer Rand = Abstand + 16 px)
   und steht im Innenabstand rechts, den der Link dafür freihält. Optik einzeilig unverändert. */
.link-arrow:has(> .icon--winkel:last-child) { padding-right: calc(0.4em + 16px); }
.link-arrow:has(> .icon--winkel:last-child) > .icon--winkel:last-child { margin-right: calc(-0.4em - 16px); }
.link-arrow:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.link-arrow__icon,
.link-arrow .icon--winkel { flex: none; transition: transform 0.45s var(--ease-spring); }
.link-arrow:hover .icon--winkel,
.link-arrow:focus-visible .icon--winkel { transform: translate(3px, -3px); }
.link-arrow--light { font-weight: 400; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-ice-200), 0 8px 18px -12px rgba(17, 40, 48, 0.4);
  color: var(--c-blue-700);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring), color var(--dur-1);
}
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--c-blue-700); color: var(--c-white); transform: translateY(-2px); }
.icon-btn[disabled] { opacity: 0.4; cursor: default; background: var(--c-white); color: var(--c-blue-700); transform: none; }


/* =========================================================================
   11  SECTION-HEAD & EYEBROW
   Nummer als Pille + Label über der Headline (keine Randspalte mehr). Ab 1024px
   steht ein Lead neben der Headline (Headline 7, Lead 4 Spalten, unten bündig).
   ========================================================================= */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-7), 4vw, 4.5rem);
}
.section-head__marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
}
.section-head__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 2.7em;
  height: 1.9em;
  padding: 0 0.6em;
  border-radius: var(--r-pill);
  background: var(--c-ice-200);
  color: var(--c-blue-900);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.section-head__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.section-head__body { display: grid; gap: var(--space-5); }
.section-head__body > * { margin: 0; }
.section-head__title { max-width: 21em; }
.section-head__title--quote { font-style: normal; }
.section-head__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure-lead);
}
@media (min-width: 1024px) {
  .section-head:not(.section-head--stacked):not(.section-head--center) .section-head__body:has(> .section-head__title + .section-head__lead:last-child) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: calc(var(--grid-gap) * 2);
    align-items: end;
  }
}
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .section-head__marker { justify-content: center; }
.section-head--center .section-head__body { justify-items: center; }
.section-head--center .section-head__title,
.section-head--center .section-head__lead { margin-inline: auto; }
.section-head--on-dark,
.section--dark .section-head,
.on-dark .section-head {
  --text: var(--on-dark);
  --text-muted: var(--on-dark-muted);
  --heading: var(--on-dark);
  --accent: var(--on-dark-accent);
  --em-fill: var(--gradient-em-on-dark);
}
:is(.section-head--on-dark, .section--dark, .on-dark, .cta-band) .section-head__num {
  background: rgba(126, 168, 181, 0.22);
  color: var(--c-on-dark);
}
.section-head--flush { margin-bottom: 0; }
/* .section-head--sticky gibt es seit der Konsolidierung (13.10.2026) nicht mehr – ein klebender
   Kopf neben Inhalten ist ein Sticky-Split (§33, Muster konzept.html #weg). */


/* =========================================================================
   12  PAGE-HERO FÜR UNTERSEITEN & BREADCRUMB
   Heller Verlauf unter dem schwebenden Header, runde Unterkante, ein Logo-Viertel
   schaut unten rechts herein (dekorativ, nur CSS).
   ========================================================================= */
.page-hero {
  --section-bg: var(--c-white);
  --card-bg: var(--c-white);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--header-h) + var(--space-6)) var(--space-8);
  background:
    radial-gradient(60% 70% at 0% 100%, rgba(205, 224, 229, 0.55) 0%, rgba(205, 224, 229, 0) 100%),
    radial-gradient(50% 60% at 100% 0%, rgba(205, 224, 229, 0.5) 0%, rgba(205, 224, 229, 0) 100%),
    linear-gradient(180deg, var(--c-white) 0%, var(--c-ice-25) 100%);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: max(-90px, -6vw);
  bottom: -70px;
  width: clamp(150px, 20vw, 300px);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='190 500 300 310'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23cde0e5'/%3E%3Cstop offset='.6' stop-color='%23aecbd3'/%3E%3Cstop offset='1' stop-color='%237ea8b5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M441.93,530.26h-223c-14.64,0-25.65,13.33-23.01,27.74,22.86,124.83,121.26,223.31,246.09,246.17,14.41,2.63,27.82-8.37,27.82-23.09v-222.92c0-15.42-12.47-27.89-27.89-27.89h0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.7;
  transform: rotate(-14deg);
  pointer-events: none;
}
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--grid-gap);
}
.page-hero__text > * + * { margin-top: var(--space-5); }
.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  max-width: 17em;
}
.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure-lead);
}
.page-hero__actions { padding-top: var(--space-3); }
.page-hero__aside { min-width: 0; }
@media (min-width: 1024px) {
  .page-hero { padding-block: calc(var(--header-h) + var(--space-7)) var(--space-9); }
  .page-hero__inner { grid-template-columns: var(--grid-cols); align-items: center; }
  .page-hero__inner > .breadcrumb { grid-column: 1 / -1; }
  .page-hero__text { grid-column: 1 / span 9; }
  .page-hero__inner:has(.page-hero__aside) .page-hero__text { grid-column: 1 / span 7; }
  .page-hero__aside { grid-column: 8 / -1; }
}
.page-hero--compact { padding-bottom: var(--space-7); }
@media (min-width: 1024px) {
  .page-hero--compact { padding-block: calc(var(--header-h) + var(--space-6)) var(--space-8); }
}

.breadcrumb { font-size: var(--fs-small); color: var(--text-muted); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  list-style: none;
  padding: 0;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before {
  content: "/";
  content: "/" / "";
  color: var(--c-blue-400);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-muted);
  text-decoration-color: transparent;
}
.breadcrumb a:hover { color: var(--c-blue-700); text-decoration-color: currentColor; }
.breadcrumb [aria-current="page"] { color: var(--text); }


/* =========================================================================
   13  FAKTENLEISTE – Kacheln mit Fuge, nur belegbare Fakten
   ========================================================================= */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fuge);
}
.facts__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.facts__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts__value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--heading);
  text-wrap: balance;
}
.section--dark .facts__item,
.on-dark .facts__item { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-on-dark); }
/* Review 13.10.: bei 320–400 px brach „WERKZEUG|E“ mitten im Wort (Termina-Versalien in halber Breite) */
@media (max-width: 419.98px) {
  .facts__item { padding-inline: var(--space-3); }
  .facts__label { font-size: 0.6875rem; letter-spacing: 0.05em; overflow-wrap: normal; }
}
@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts__item { padding: var(--space-5); }
}


/* =========================================================================
   14  CARDS – runde, weiße Flächen, federnder Hover
   ========================================================================= */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--c-ink);
  --heading: var(--c-blue-900);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --link: var(--c-blue-700);
  --link-hover: var(--c-blue-900);
  --focus: var(--c-blue-700);
  --em-fill: var(--gradient-em);
  transition: transform 0.6s var(--ease-spring), box-shadow 0.35s var(--ease-out);
}
@media (min-width: 768px) {
  .card { padding: var(--space-6); }
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--heading);
}
.card__text { color: var(--text); font-size: 1rem; line-height: 1.6; }
.card__text > * + * { margin-top: var(--space-3); }
.card__meta { font-size: var(--fs-small); color: var(--text-muted); }
/* Karten-Icon wird zum Sticker (Kachel mit Glanz) – ohne Markup-Änderung */
.card__icon {
  width: 56px;
  height: 56px;
  padding: 15px;
  border-radius: var(--r-sticker);
  color: var(--c-white);
  background: var(--gloss-sticker);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(16, 42, 50, 0.35), 0 10px 18px -8px rgba(var(--shadow-c), 0.5);
  stroke-width: 2;
  transform: rotate(-6deg);
  transition: transform 0.7s var(--ease-spring);
}
.card__footer { margin-top: auto; padding-top: var(--space-2); }

.card__link { color: inherit; text-decoration: none; }
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
.card__link:focus-visible { outline: none; }
.card:has(.card__link) { cursor: pointer; }
.card:has(.card__link):hover,
.card:has(.card__link:focus-visible) {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card:has(.card__link):hover .card__icon { transform: rotate(6deg) scale(1.08); }
/* Der Rahmen liegt außerhalb der Karte, also auf der Fläche drumherum: --focus-out
   (Blau auf hell, Hellblau auf Petrol – vorher ~1,1:1 auf .section--dark / Petrol-Karten) */
.card:has(.card__link:focus-visible) {
  outline: 3px solid var(--focus-out);
  outline-offset: 3px;
}
.card:has(.card__link):hover .icon--winkel,
.card:has(.card__link:focus-visible) .icon--winkel { transform: translate(3px, -3px); }
.card .link-arrow { padding-block: var(--space-1); }

.card--service .card__icon { margin-bottom: var(--space-3); }

.card--feature { gap: var(--space-3); }
.card--feature .card__preview {
  margin-block: var(--space-3);
  color: var(--c-blue-700);
}
.card--feature .card__preview svg { width: 100%; max-width: 220px; height: auto; }

.card--team {
  padding: 0 0 var(--space-5);
  gap: var(--space-2);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.card--team .card__media {
  position: relative;
  margin: 0 0 var(--space-3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-blue-900);
  isolation: isolate;
}
.card--team .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(var(--ph-sat)) contrast(1.03);
  transition: transform 0.9s var(--ease-out), filter 0.8s var(--ease-out);
}
.card--team .card__title { font-size: 1.125rem; font-weight: 500; }
.card--team .card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.card--quiet {
  background: var(--c-ice-100);
  box-shadow: none;
}
.section--stone .card--quiet { background: var(--c-white); }

/* Petrol-Karte (Konsolidierung 13.10.2026): .card--deep bzw. .card.on-dark – biegt die Rollen-Tokens
   wie .on-dark um (.card setzt sie sonst hell zurück). Fläche = hellste Petrol-Fläche (#335b67 → #2c505b),
   Sekundärtext, Akzent (Eyebrows) und das Ende des em-Verlaufs deshalb blue-200 (≥ 4,59:1 auch oben
   links; Review 13.10.2026: on-dark-2 lag dort bei 4,41:1, der em-Verlauf in h3 bei 4,49:1).
   Funktioniert auf hellen und dunklen Sektionen. */
.card--deep,
.card.on-dark {
  --heading: var(--on-dark);
  --text: var(--on-dark);
  --text-muted: var(--c-blue-200);
  --on-dark-muted: var(--c-blue-200);
  --link: var(--c-on-dark);
  --link-hover: var(--c-white);
  --accent: var(--c-blue-200);
  --focus: var(--focus-on-dark);
  --border: var(--line-on-dark);
  --em-fill: var(--gradient-em-on-card);
  --card-bg: rgba(255, 255, 255, 0.06);
  background: var(--gradient-brand-card);
  color: var(--text);
}
.card--deep .card__icon,
.card.on-dark .card__icon { background: var(--gloss-sticker-light); color: var(--c-blue-700); }


/* =========================================================================
   15  BENTO-GRID – Werkzeug-Übersichten
   ========================================================================= */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.bento__item { min-width: 0; }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento__item { grid-column: span 3; }
  .bento__item--wide, .bento__item--half, .bento__item--full { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: var(--grid-cols); }
  .bento__item { grid-column: span 4; }
  .bento__item--wide { grid-column: span 8; grid-row: span 2; }
  .bento__item--half { grid-column: span 6; }
  .bento__item--full { grid-column: span 12; }
}


/* =========================================================================
   16  QUADRANTEN-MODUL – Kacheln in der Form der Bildmarken-Viertel
   DOM: absichern (tl), vorsorgen (tr), vermoegen (br), immobilien (bl)
   ========================================================================= */
.quadrant {
  position: relative;
  display: grid;
  gap: var(--fuge);
}
.quadrant__tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
  padding: var(--space-5);
  background: var(--card-bg);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), 0 14px 30px -24px rgba(17, 40, 48, 0.4);
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform 0.6s var(--ease-spring), box-shadow var(--dur-2);
}
.quadrant__tile .icon-quad { grid-row: 1 / span 3; color: var(--c-blue-700); margin-top: 4px; }
.quadrant__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-blue-900);
}
.quadrant__text {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-ink-2);
}
.quadrant__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-blue-700);
}
.quadrant__tile:hover,
.quadrant__tile:focus-visible {
  background: var(--c-blue-700);
  color: var(--c-white);
  box-shadow: var(--shadow-lg);
  --focus: var(--c-blue-700);
}
.quadrant__tile:hover :is(.quadrant__title, .quadrant__text, .quadrant__more, .icon-quad),
.quadrant__tile:focus-visible :is(.quadrant__title, .quadrant__text, .quadrant__more, .icon-quad) { color: var(--c-white); }
.quadrant__tile:hover .icon--winkel,
.quadrant__tile:focus-visible .icon--winkel { transform: translate(2px, -2px); }
.quadrant__hub { display: none; }
.quadrant__center-link { margin-top: var(--space-5); }

@media (min-width: 768px) {
  .quadrant {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "tl tr" "bl br";
    max-width: 640px;
  }
  .quadrant__tile {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
  }
  .quadrant__tile .icon-quad { margin: 0 0 var(--space-2); }
  .quadrant__title { font-size: 1.375rem; }
  .quadrant__text { max-width: 22ch; min-height: calc(2em * 1.45); }
  .quadrant__more { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
  .quadrant__tile:hover .quadrant__more,
  .quadrant__tile:focus-visible .quadrant__more { opacity: 1; }
  .quadrant__tile--tl {
    grid-area: tl;
    justify-content: flex-end;
    border-radius: var(--r-quad) var(--r-sm) var(--r-sm) var(--r-sm);
    padding-right: calc(var(--hub) / 2 + var(--space-4));
    padding-bottom: calc(var(--hub) / 2 + var(--space-4));
  }
  .quadrant__tile--tr {
    grid-area: tr;
    justify-content: flex-end;
    border-radius: var(--r-sm) var(--r-quad) var(--r-sm) var(--r-sm);
    padding-left: calc(var(--hub) / 2 + var(--space-4));
    padding-bottom: calc(var(--hub) / 2 + var(--space-4));
  }
  .quadrant__tile--br {
    grid-area: br;
    justify-content: flex-start;
    border-radius: var(--r-sm) var(--r-sm) var(--r-quad) var(--r-sm);
    padding-left: calc(var(--hub) / 2 + var(--space-4));
    padding-top: calc(var(--hub) / 2 + var(--space-4));
  }
  .quadrant__tile--bl {
    grid-area: bl;
    justify-content: flex-start;
    border-radius: var(--r-sm) var(--r-sm) var(--r-sm) var(--r-quad);
    padding-right: calc(var(--hub) / 2 + var(--space-4));
    padding-top: calc(var(--hub) / 2 + var(--space-4));
  }
  .quadrant__tile--tl:hover, .quadrant__tile--tl:focus-visible { transform: translate(-6px, -6px); }
  .quadrant__tile--tr:hover, .quadrant__tile--tr:focus-visible { transform: translate(6px, -6px); }
  .quadrant__tile--br:hover, .quadrant__tile--br:focus-visible { transform: translate(6px, 6px); }
  .quadrant__tile--bl:hover, .quadrant__tile--bl:focus-visible { transform: translate(-6px, 6px); }

  .quadrant__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--hub);
    height: var(--hub);
    margin: calc(var(--hub) / -2) 0 0 calc(var(--hub) / -2);
    border-radius: 50%;
    background: var(--gloss-sticker);
    box-shadow: 0 0 0 8px var(--section-bg), inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 18px 30px -12px rgba(var(--shadow-c), 0.5);
    color: var(--c-white);
    pointer-events: none;
  }
  .quadrant__hub .icon--winkel { width: 28px; height: 28px; stroke-width: 2.25; }
}
@media (min-width: 768px) and (hover: none) {
  .quadrant__more { opacity: 1; }
}


/* =========================================================================
   17  PROZESS-SCHRITTE – Nummern als Sticker, Linie im Logoverlauf
   ========================================================================= */
.steps {
  --node: 56px;
  position: relative;
  display: grid;
  gap: var(--space-7);
  padding-left: 0;
  counter-reset: steps;
}
/* Linie (main.js: .is-pending → .is-visible, wächst einmalig) */
.steps::before {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) / 2);
  bottom: calc(var(--node) / 2);
  width: 2px;
  border-radius: 1px;
  background: var(--gradient-brand-vertical);
  transform-origin: top center;
  transition: transform 1.2s var(--ease-out);
}
.steps.is-pending::before { transform: scaleY(0); }
.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
}
.steps__item > * { grid-column: 2; }
.steps__item > * + * { margin-top: var(--space-2); }
.steps__num {
  grid-column: 1;
  grid-row: 1 / span 4;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: var(--r-sticker);
  background: var(--gloss-sticker);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(16, 42, 50, 0.32), 0 10px 18px -8px rgba(var(--shadow-c), 0.55);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  transform: rotate(-4deg);
  transition: transform 0.7s var(--ease-spring);
}
.steps__item:nth-child(even) .steps__num { transform: rotate(5deg); }
.steps__item > .steps__num + * { margin-top: 0; }
.steps__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  padding-top: 0.6em;
}
.steps__text { color: var(--text-muted); font-size: 1rem; line-height: 1.6; }

@media (min-width: 1024px) {
  .steps:not(.steps--detail) {
    grid-template-columns: repeat(var(--steps-cols, 5), minmax(0, 1fr));
    gap: var(--grid-gap);
  }
  .steps:not(.steps--detail)::before {
    left: calc(var(--node) / 2);
    right: calc(var(--node) / 2);
    top: calc(var(--node) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
    background: var(--gradient-brand);
    transform-origin: left center;
  }
  .steps.is-pending:not(.steps--detail)::before { transform: scaleX(0); }
  .steps:not(.steps--detail) .steps__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .steps:not(.steps--detail) .steps__num { margin-bottom: var(--space-4); }
  /* Review 13.10.: fünf Termina-Titel nebeneinander – bei 1024 px lief „Kennenlernen“ 25 px in die
     nächste Spalte. Titel skalieren mit, Kinder bleiben in ihrer Spalte. */
  .steps:not(.steps--detail) .steps__title { padding-top: 0; font-size: clamp(1.0625rem, 0.3rem + 1.3vw, var(--fs-h3)); }
  .steps:not(.steps--detail) .steps__item > * { max-width: 100%; }
}
.steps--3 { --steps-cols: 3; }
.steps--4 { --steps-cols: 4; }

/* Variante mit Detail-Tripel (konzept.html) */
.steps--detail { gap: var(--space-8); }
.steps__detail {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.steps__detail > div {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.steps__detail dt {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.steps__detail dd { margin-top: var(--space-1); color: var(--text); }
@media (min-width: 768px) {
  .steps__detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .steps--detail { --node: 72px; }
  .steps--detail .steps__num {
    position: sticky;
    top: calc(var(--header-offset, var(--header-h)) + 24px);
    font-size: 1.375rem;
  }
  /* Mit gezeichneter Linie ([data-path]) bleiben die Knoten auf der Linie – nicht kleben */
  .steps--detail[data-path] .steps__num { position: static; }
}


/* =========================================================================
   18  ACCORDION – native <details> als runde Karten
   ========================================================================= */
.accordion { display: grid; gap: var(--fuge); }
.accordion__item {
  border-radius: var(--r-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.accordion__item[open] { box-shadow: var(--shadow-md); }
.section--dark .accordion__item,
.on-dark .accordion__item { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
  transition: color var(--dur-1) var(--ease-out);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ""; }
.accordion__summary:hover { color: var(--link); }
.accordion__summary:focus-visible { outline-offset: -3px; }
.accordion__icon {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--c-ice-100);
  color: var(--c-blue-700);
  transition: transform 0.5s var(--ease-spring), background-color var(--dur-2), color var(--dur-2);
}
.accordion__item[open] > .accordion__summary .accordion__icon { transform: rotate(180deg); background: var(--c-blue-700); color: var(--c-white); }
.accordion__panel {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text);
}
.accordion__panel > * + * { margin-top: var(--space-3); }
@supports selector(::details-content) {
  .accordion__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  .accordion__item[open]::details-content { block-size: auto; }
}


/* =========================================================================
   19  TABS – Segment-Pillen, ohne JS sind alle Panels sichtbar
   ========================================================================= */
.tabs__list { display: none; }
.js .tabs__list {
  display: inline-flex;
  max-width: 100%;
  gap: 4px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--r-pill);
  background: var(--c-ice-100);
  box-shadow: inset 0 0 0 1px rgba(44, 80, 91, 0.06);
  margin-bottom: var(--space-7);
}
.js .tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: left;
  color: var(--c-ink-2);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.tabs__tab:hover { color: var(--c-ink); }
.tabs__tab[aria-selected="true"] {
  background: var(--c-white);
  color: var(--c-blue-900);
  box-shadow: 0 6px 16px -10px rgba(17, 40, 48, 0.5), 0 0 0 1px rgba(44, 80, 91, 0.06);
}
.tabs__tab:focus-visible { outline-offset: -3px; border-radius: var(--r-pill); }
.tabs__sub {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-ink-2);
}
@media (max-width: 767.98px) {
  .js .tabs--fit .tabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: var(--r-lg); }
  .tabs--fit .tabs__tab { padding-inline: var(--space-3); white-space: normal; justify-content: flex-start; border-radius: var(--r-md); }
}
.tabs__panel + .tabs__panel { margin-top: var(--space-8); }
.js .tabs__panel + .tabs__panel { margin-top: 0; }
.tabs__panel:focus-visible { outline-offset: 8px; border-radius: var(--r-sm); }
.js .tabs__panel:not([hidden]) { animation: fmk-panel-in var(--dur-3) var(--ease-out); }


/* =========================================================================
   20  TESTIMONIAL & AVATAR
   ========================================================================= */
.testimonial { display: grid; gap: var(--space-5); }
/* Review 13.10.: Grid-Kinder dürfen schrumpfen – sonst schob ein langes Termina-Wort im Zitat
   („Einkommenssicherung“, immobilien.html bei 320 px) die ganze Seite 25 px in die Breite. */
.testimonial > * { min-width: 0; }
@media (max-width: 599.98px) {
  .testimonial__quote p, .quote p {
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 6;
  }
}
.testimonial__quote {
  position: relative;
  padding-top: 3rem;
}
.testimonial__quote::before {
  content: "„";
  content: "„" / "";
  position: absolute;
  left: -0.02em;
  top: -1.9rem;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-blue-300);
  pointer-events: none;
}
.testimonial__quote p {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--heading);
  max-width: 34ch;
  text-wrap: balance;
  hyphens: manual;
}
.testimonial__by {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: var(--space-1) var(--space-4);
}
.testimonial__by .avatar { grid-row: 1 / span 2; }
.testimonial__by .testimonial__name { align-self: end; }
.testimonial__by .badge { align-self: start; max-width: 100%; white-space: normal; text-wrap: balance; }
.testimonial__by > * { min-width: 0; }
.testimonial__by:not(:has(> .avatar)) { grid-template-columns: minmax(0, 1fr); }
.testimonial__by:not(:has(> .badge)) .avatar { grid-row: auto; }
.testimonial__by:not(:has(> .badge)) .testimonial__name { align-self: center; }
.testimonial__name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; color: var(--text); }
.testimonial__full summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  background: var(--c-ice-100);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-blue-700);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.testimonial__full summary::-webkit-details-marker { display: none; }
.testimonial__full summary::marker { content: ""; }
.testimonial__full summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.45s var(--ease-spring);
}
.testimonial__full[open] summary::after { transform: rotate(45deg); }
.testimonial__full summary:hover { background: var(--c-blue-700); color: var(--c-white); }
.on-dark .testimonial__full summary,
.section--dark .testimonial__full summary { background: rgba(241, 247, 249, 0.12); color: var(--c-on-dark); }
.testimonial__full blockquote {
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  border-left: 2px solid var(--c-blue-300);
  color: var(--text);
}
.testimonial__full blockquote p { max-width: var(--measure); }

.testimonial--compact { gap: var(--space-4); }
.testimonial--compact .testimonial__quote { padding-top: 2.2rem; }
.testimonial--compact .testimonial__quote::before { font-size: 3.5rem; top: -1.2rem; }
.testimonial--compact .testimonial__quote p { font-size: var(--fs-h4); line-height: 1.45; max-width: none; }

.testimonial--full .testimonial__quote p {
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

/* Kunden-Avatar: abgerundete Kachel mit weißem Rand, leicht gedreht (Variante C) – keine Tönung */
.avatar {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 30%;
  object-fit: cover;
  background: var(--c-ice-100);
  border: 3px solid var(--c-white);
  box-shadow: 0 10px 22px -12px rgba(17, 40, 48, 0.6);
  transform: rotate(-5deg);
}
.avatar--sm { width: 56px; height: 56px; }
@media (min-width: 768px) {
  .avatar:not(.avatar--sm) { width: var(--avatar); height: var(--avatar); }
}


/* =========================================================================
   21  FORMULARFELDER – runde Felder, deutliche Fokus- und Fehlerzustände
   Fehler: einzige Nicht-Blau-Farbe (--c-error), nur Text, Icon und Rand.
   ========================================================================= */
.form-required-note { font-size: var(--fs-small); color: var(--text-muted); }
.field {
  display: grid;
  gap: var(--space-2);
  --text: var(--c-ink);
}
.field + .field,
.field + .choice-group,
.choice-group + .field,
.choice-group + .choice-group { margin-top: var(--space-5); }
.field__label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.field__req { color: var(--c-accent); margin-left: 2px; }
.field__hint {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-error);
}
/* Kurze Hinweise und Fehlermeldungen nie automatisch trennen („Stich-punkte“, „unvoll-ständig“ bei 390 px) */
.field__hint,
.field__error { hyphens: manual; }
.field__error .icon { width: 18px; height: 18px; margin-top: 1px; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: 0 1rem;
  background: var(--c-white);
  border: 1.5px solid var(--field-border);
  border-radius: 14px;
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 140px; padding: 0.875rem 1rem; }
.input::placeholder,
.textarea::placeholder { color: var(--c-ink-2); opacity: 1; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-blue-700); }
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--c-blue-700);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--c-ice-100);
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--c-error);
  border-width: 2px;
  background: var(--error-bg);
}
.input:disabled,
.select:disabled,
.textarea:disabled { background: var(--c-ice-100); cursor: not-allowed; }
.input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c505b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 20px 20px;
  cursor: pointer;
}

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input {
  text-align: right;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  padding-right: calc(1rem + var(--suffix-w, 1em) + 0.5rem);
}
.input-group__suffix {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-ink-2);
  font-size: 1rem;
  pointer-events: none;
  white-space: nowrap;
}
/* Breite des Einheiten-Texts in em (Konsolidierung 13.10.2026): „ch“ wurde in Termina gerechnet
   (1ch ≈ 0,91em) und reservierte viel zu viel – in schmalen Feldern war die letzte Ziffer abgeschnitten.
   Gemessen (Roc Grotesk 16px): „€“ 0,61em · „Jahre“ 2,95em · „% p. a.“ 2,78em · „€ / Monat“ 4,42em. */
.input-group--wide { --suffix-w: 3.25em; }
.input-group--xwide { --suffix-w: 4.75em; }

/* Range als Zeigerhilfe (nicht fokussierbar, aria-hidden) */
.range {
  --fill: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--c-blue-700) 0 var(--fill), var(--c-ice-200) var(--fill) 100%);
}
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--c-ice-200); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c-blue-700); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-blue-700);
  box-shadow: 0 6px 14px -6px rgba(17, 40, 48, 0.5);
  transition: transform 0.4s var(--ease-spring);
}
.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-blue-700);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.12); }

.choice-group { display: grid; gap: var(--space-3); }
.choice-group__legend {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.choice-group__options { display: grid; gap: var(--space-3); }
@media (min-width: 768px) {
  .choice-group__options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-group__options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.choice-card { position: relative; display: block; cursor: pointer; }
.choice-card__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-card__body {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  column-gap: var(--space-4);
  row-gap: 2px;
  min-height: 64px;
  height: 100%;
  padding: var(--space-4) calc(var(--space-4) + 28px) var(--space-4) var(--space-4);
  background: var(--c-white);
  border: 1.5px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--c-ink);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring);
}
.choice-card__body > .icon,
.choice-card__body > .avatar { grid-row: 1 / span 2; color: var(--c-blue-700); }
.choice-card__body > .stk { grid-row: 1 / span 2; }
.choice-card__body:not(:has(> .icon, > .avatar, > .stk)) { grid-template-columns: minmax(0, 1fr); }
.choice-card__title { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.choice-card__text { font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.45; }
.choice-card__body::after {
  content: "";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-blue-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-1) var(--ease-out), transform 0.5s var(--ease-spring);
}
.choice-card:hover .choice-card__body { border-color: var(--c-blue-700); transform: translateY(-2px); }
.choice-card__input:checked + .choice-card__body {
  border-color: var(--c-blue-700);
  box-shadow: inset 0 0 0 1px var(--c-blue-700);
  background: var(--c-ice-50);
}
.choice-card__input:checked + .choice-card__body::after { opacity: 1; transform: none; }
.choice-card__input:focus-visible + .choice-card__body { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice-card__input[aria-invalid="true"] + .choice-card__body { border-color: var(--c-error); }
.choice-card__input:disabled + .choice-card__body { background: var(--c-ice-100); cursor: not-allowed; }

/* Chip (interaktiv, Radio/Checkbox)
   Farben über --chip-* (Konsolidierung 13.10.2026): hell als Standard, auf Petrol (.section--dark,
   .on-dark, .card--deep, .note--deep) transparente Pille, gewählt = Weiß. Helle Flächen in dunklen
   Sektionen (.card, .note, Rechner-Panels) setzen die hellen Werte zurück – wie bei den Rollen-Tokens. */
:root,
.card, .note, .calc__inputs, .calc__result {
  --chip-bg: var(--c-white);
  --chip-line: var(--c-blue-400);
  --chip-text: var(--c-ink);
  --chip-hover-bg: var(--c-ice-50);
  --chip-hover-line: var(--c-blue-700);
  --chip-on-bg: var(--c-blue-700);
  --chip-on-text: var(--c-white);
}
.section--dark, .on-dark, .card--deep, .note--deep {
  --chip-bg: rgba(var(--shadow-c), 0.35);
  --chip-line: rgba(169, 199, 207, 0.6);   /* on-dark-2 · ≥ 3:1 auf blue-700 … blue-950 */
  --chip-text: var(--c-on-dark);
  --chip-hover-bg: rgba(var(--shadow-c), 0.55);
  --chip-hover-line: var(--c-on-dark-2);
  --chip-on-bg: var(--c-white);
  --chip-on-text: var(--c-blue-900);
}
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 1.125rem;
  border: 1.5px solid var(--chip-line);
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring);
}
/* Haken als Maske in der Schriftfarbe (folgt hell/dunkel/Druck) statt als weißes Hintergrundbild */
.chip__label::before {
  content: "";
  flex: none;
  width: 0;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  margin-left: calc(-1 * var(--space-2));
  transition: width var(--dur-2) var(--ease-out), margin var(--dur-2) var(--ease-out);
}
.chip--wrap .chip__label { white-space: normal; text-wrap: balance; padding-block: var(--space-2); }
.chip:hover .chip__label { border-color: var(--chip-hover-line); background: var(--chip-hover-bg); transform: translateY(-2px); }
.chip__input:checked + .chip__label { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-text); }
.chip__input:checked + .chip__label::before { width: 14px; margin-left: 0; }
.chip__input:focus-visible + .chip__label { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip__input[aria-invalid="true"]:not(:checked) + .chip__label { border-color: var(--c-error); }

/* Checkbox mit eigener Box (label.check – der Freiheits-Check-Mount div.check bleibt unberührt) */
label.check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap);
  padding-block: 10px;
  cursor: pointer;
  line-height: 1.45;
}
.check__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 0;
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-white);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform 0.45s var(--ease-spring);
}
.check__box .icon { width: 16px; height: 16px; stroke-width: 2.5; opacity: 0; transform: scale(0.4); transition: opacity var(--dur-1), transform 0.5s var(--ease-spring); }
label.check:hover .check__box { border-color: var(--c-blue-700); }
.check__input:checked + .check__box { background: var(--c-blue-700); border-color: var(--c-blue-700); }
.check__input:checked + .check__box .icon { opacity: 1; transform: none; }
.check__input:focus-visible + .check__box { outline: 3px solid var(--focus); outline-offset: 3px; }
.check__input[aria-invalid="true"] + .check__box { border-color: var(--c-error); border-width: 2px; }
.check__input:checked ~ .check__label--strike { color: var(--c-ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }

.form-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}
/* Fehlerzusammenfassung (role="alert"): weiße Fläche, roter Rand – kein Rosa */
.form-summary {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--c-error);
  border-radius: var(--r-sm);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  color: var(--c-ink);
}
.form-summary__title { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 500; color: var(--c-error); }
.form-summary ul { margin-top: var(--space-2); padding-left: 1.2em; }
.form-summary a { color: var(--c-error); }

.form-success {
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--success-bg);
  color: var(--c-ink);
}
.form-success__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--success);
}
.form-success:focus,
.form-success:focus-visible { outline: none; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
}


/* =========================================================================
   22  RECHNER-UI – Eingaben weiß, Ergebnis in Eis-Blau, Zahlen in Termina
   ========================================================================= */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.calc__inputs {
  padding: var(--space-5);
  background: var(--c-white);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--c-ink);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --focus: var(--c-blue-700);
}
.calc__more {
  margin-top: var(--space-6);
  border-top: 1px solid var(--c-ice-200);
}
.calc__more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-blue-700);
  cursor: pointer;
  list-style: none;
}
.calc__more > summary::-webkit-details-marker { display: none; }
.calc__more > summary::marker { content: ""; }
.calc__more > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-ice-100);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.45s var(--ease-spring);
}
.calc__more[open] > summary::after { transform: rotate(45deg); }
.calc__more > summary + * { margin-top: var(--space-3); }

.calc__result {
  position: relative;
  padding: var(--space-5);
  background: var(--c-ice-100);
  border-radius: var(--r-lg);
  color: var(--c-ink);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --heading: var(--c-blue-900);
  --focus: var(--c-blue-700);
  --chart-track: var(--c-white);
}
.calc__result > * + * { margin-top: var(--space-5); }
.calc__result-title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.calc__hero { display: grid; gap: var(--space-1); max-width: none; }
.calc__hero-label { font-size: var(--fs-small); color: var(--c-ink-2); }
.calc__hero-value { display: block; color: var(--c-blue-700); white-space: nowrap; }
.calc__hero-sub { font-size: var(--fs-small); color: var(--c-ink-2); }

.calc__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(var(--space-3), 4vw, var(--space-5));
}
.calc__kpi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-ice-300);
  min-width: 0;
}
.calc__kpi dt { font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.35; }
.calc__kpi dd {
  margin-top: 2px;
  font-family: var(--font-display);
  /* Termina ist breit: unter ~400px etwas kleiner, damit „ca. 29 Jahre“ / „123.456 €“ in die halbe Spalte passen */
  font-size: clamp(0.875rem, 0.7rem + 0.9vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.calc__kpi--accent dd { color: var(--c-blue-700); }
.calc__kpi--accent dt::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--chart-3-pattern);
  vertical-align: 0;
}
.calc__kpi--full { grid-column: 1 / -1; }

.calc__chart { min-height: 40px; }
.calc__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
}
.calc__bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  min-width: 2px;
  height: 100%;
}
.calc__bar > span { display: block; border-radius: 2px; }
.calc__stack {
  display: flex;
  gap: 2px;
  height: 28px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--chart-track);
}
.calc__stack > span { display: block; min-width: 2px; transition: flex-basis var(--dur-3) var(--ease-out); }
.calc__seg,
.calc__seg--1 { background: var(--chart-1); }
.calc__seg--2 { background: var(--chart-2); }
.calc__seg--3 { background: var(--chart-3-pattern); }
.calc__seg--track { background: var(--chart-track); }
.calc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--c-ink);
  list-style: none;
  padding: 0;
}
.calc__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.calc__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--chart-1);
}
.calc__swatch--2 { background: var(--chart-2); }
.calc__swatch--3 { background: var(--chart-3-pattern); }

.calc__table > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-blue-700);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.calc__table table { margin-top: var(--space-3); font-size: var(--fs-small); }
.calc__table th,
.calc__table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--c-ice-300); }
.calc__table th:first-child,
.calc__table td:first-child { text-align: left; padding-left: 0; }
.calc__table thead th { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink-2); }
.calc__table-wrap { max-height: 320px; overflow: auto; }

.calc__notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-sm);
  background: var(--c-white);
  border-left: 4px solid var(--c-blue-700);
  font-size: var(--fs-small);
  color: var(--c-ink);
}
.calc__disclaimer {
  hyphens: manual;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.calc__disclaimer .icon { margin-top: 1px; color: var(--c-blue-500); }
.calc__actions { padding-top: var(--space-1); }

@media (min-width: 768px) {
  .calc__inputs,
  .calc__result { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .calc:not(.calc--mini) {
    grid-template-columns: var(--grid-cols);
    gap: var(--grid-gap);
  }
  .calc:not(.calc--mini) > .calc__inputs { grid-column: span 7; }
  .calc:not(.calc--mini) > .calc__result { grid-column: span 5; }
  /* Klebt nur, wenn es passt (main.js setzt .is-sticky): Panel samt Abstand passt ins Fenster, ist
     nicht höher als die Eingabe-Spalte und im Rechner folgt kein weiterer Block. Sonst schob es sich
     über Folgeinhalte, und per Tab erreichte Knöpfe am Panel-Ende blieben unter dem Fensterrand
     (WCAG 2.4.11). Ohne JS: kein Kleben. `top` nur hier – das Panel ist sonst position: relative. */
  .calc:not(.calc--mini) > .calc__result.is-sticky {
    position: sticky;
    top: calc(var(--header-offset, var(--header-h)) + 24px);
  }
  body:has(.subnav) .calc:not(.calc--mini) > .calc__result.is-sticky { top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h) + 24px); }
}
@media (max-height: 500px) {
  .steps--detail .steps__num,
  .calc:not(.calc--mini) > .calc__result,
  .calc:not(.calc--mini) > .calc__result.is-sticky { position: static; }
}
.calc--mini { gap: var(--fuge); }
@media (min-width: 768px) {
  .calc--mini { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
}


/* =========================================================================
   23  BADGES
   ========================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--c-blue-800);
  color: var(--c-white);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Review 13.10.: Badges folgen den semantischen Tokens (--text, --text-muted) statt fester
   Dunkel-Overrides – sonst wurde ein Badge in einer hellen Karte innerhalb einer dunklen Sektion
   hell auf weiß (z. B. „Annahme“ im Mini-Sparplan, 1,5:1). Helle Flächen (.card, .calc__inputs …)
   setzen --text/--text-muted ohnehin zurück. */
.badge--petrol { background: rgba(126, 168, 181, 0.3); color: var(--text, var(--c-ink)); }
.badge--wrap { white-space: normal; text-wrap: balance; line-height: 1.35; padding-block: 4px; }
.badge--outline {
  background: transparent;
  border: 1px solid var(--c-blue-400);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  color: var(--text-muted, var(--c-ink-2));
}


/* =========================================================================
   24  UNTERNAVIGATION – Pillen-Leiste unter dem schwebenden Header
   ========================================================================= */
.subnav {
  position: sticky;
  top: var(--header-offset, var(--header-h));
  z-index: var(--z-subnav);
  height: var(--subnav-h);
  background: rgba(238, 245, 247, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(44, 80, 91, 0.08);
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.subnav .container { position: relative; height: 100%; }
/* Scrollbare Liste läuft an den Rändern weich aus (Maske statt hellem Verlauf – passt auf hell und
   dunkel). main.js setzt .is-more-l / .is-more-r, solange links/rechts noch Punkte liegen; ohne JS
   läuft nur der rechte Rand aus (Review 13.10.2026: links wurde mitten im Buchstaben abgeschnitten). */
.subnav__list {
  --fade-l: 0px;
  --fade-r: 0px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding-right: 40px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--c-ink) var(--fade-l), var(--c-ink) calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, var(--c-ink) var(--fade-l), var(--c-ink) calc(100% - var(--fade-r)), transparent 100%);
}
html:not(.js) .subnav__list { --fade-r: 40px; }
.subnav__list.is-more-l { --fade-l: 28px; }
.subnav__list.is-more-r { --fade-r: 40px; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { flex: none; display: flex; }
.subnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.subnav__link:hover { color: var(--c-ink); background: var(--c-white); }
.subnav__link[aria-current="location"] { background: var(--c-blue-700); color: var(--c-white); }
/* Fokus innen (die Scroll-Liste schneidet Rahmen außen ab); auf der aktiven Pille weiß, sonst wäre
   der Rahmen blue-700 auf blue-700 unsichtbar (Review 13.10.2026; Weiß auf blue-700: 8,7:1) */
.subnav__link:focus-visible { outline-offset: -3px; border-radius: var(--r-pill); }
.subnav__link[aria-current="location"]:focus-visible { outline-color: var(--c-white); }
/* Über dunklen Flächen (main.js: .is-over-dark wie beim Header – .section--dark, CTA-Band, breite
   .on-dark-Flächen): Leiste in tiefem Petrol statt hellem Milchglas-Streifen quer durch die Karte */
.subnav.is-over-dark {
  --focus: var(--focus-on-dark);
  background: rgba(17, 40, 48, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.subnav.is-over-dark .subnav__link { color: var(--c-on-dark-2); }
.subnav.is-over-dark .subnav__link:hover { color: var(--c-white); background: rgba(255, 255, 255, 0.1); }
.subnav.is-over-dark .subnav__link[aria-current="location"] { background: var(--c-white); color: var(--c-blue-950); }
.subnav.is-over-dark .subnav__link[aria-current="location"]:focus-visible { outline-color: var(--c-blue-700); }
@media (min-width: 1024px) {
  .subnav__list { padding-right: 0; }
  html:not(.js) .subnav__list { --fade-r: 0px; }
}
@media (max-height: 500px) {
  .subnav { position: relative; top: auto; }
}


/* =========================================================================
   25  CTA-BAND – große tiefe Petrol-Karte (Variante C „Outro“)
   ========================================================================= */
.cta-band {
  --section-bg: var(--c-blue-950);
  --text: var(--on-dark);
  --text-muted: var(--on-dark-muted);
  --heading: var(--on-dark);
  --link: var(--c-on-dark);
  --link-hover: var(--c-white);
  --focus: var(--focus-on-dark);
  --em-fill: var(--gradient-em-on-dark);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: var(--inset);
  padding-block: var(--section-y);
  border-radius: var(--r-xl);
  background: var(--gradient-deep-2);
  color: var(--on-dark);
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band__inner > * { max-width: 100%; }
.cta-band__eyebrow { margin-bottom: var(--space-4); color: var(--on-dark-muted); }
.cta-band__title {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--c-white);
  max-width: 12em;
}
.cta-band__note {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--on-dark-muted);
}
.cta-band__actions { margin-top: var(--space-7); gap: var(--space-4) var(--space-7); }
.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-on-dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.cta-band__phone:hover { color: var(--c-white); text-decoration-thickness: 2px; }
/* Schwebende Bildmarke (Konsolidierung 13.10.2026: auf allen Seiten wie auf der Startseite, der frühere
   Bogen .cta-band__arc entfällt). Braucht den Sprite (#s-bl, #s-body, Verläufe) – steht auf jeder Seite. */
.cta-band { --cta-mark: min(30vw, 400px); }
.cta-band__mark {
  position: absolute;
  z-index: 0;
  right: clamp(24px, 7vw, 120px);
  top: 50%;
  width: var(--cta-mark);
  margin-top: calc(var(--cta-mark) / -2);
  filter: drop-shadow(10px 16px 0 #0b1d23) drop-shadow(0 40px 40px rgba(11, 29, 35, 0.45));
  pointer-events: none;
}
.cta-band__mark svg { width: 100%; height: auto; overflow: visible; }
@media (min-width: 768px) {
  .cta-band__inner > * { max-width: 62%; }
}
@media (max-width: 767.98px) {
  .cta-band { display: flex; flex-direction: column; }
  .cta-band__mark {
    position: relative;
    order: -1;
    top: auto;
    right: auto;
    width: min(46vw, 200px);
    margin: 0 0 var(--space-6) var(--gutter);
  }
}


/* =========================================================================
   26  HINWEIS-BOXEN
   ========================================================================= */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--c-ice-100);
  color: var(--c-ink);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --heading: var(--c-blue-900);
  --link: var(--c-blue-700);
  --focus: var(--c-blue-700);
}
.section--stone .note:not(.note--info):not(.note--privacy):not(.note--frieda):not(.note--deep) { background: var(--c-white); }
/* Hinweis ohne Icon/Avatar/Sticker (z. B. <p class="note">Text <a>…</a> Text</p>): als Block,
   sonst zerfällt der Absatz in Flex-Spalten (Konsolidierung 13.10.2026) */
.note:not(:has(> .icon, > .avatar, > .stk, > .ph, > .note__body, > svg, > img)) { display: block; }
.note > .icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 9px;
  margin-top: -6px;
  border-radius: var(--r-sticker);
  color: var(--c-white);
  background: var(--gloss-sticker);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 14px -8px rgba(var(--shadow-c), 0.5);
  stroke-width: 2;
  transform: rotate(-6deg);
}
.note__body > * + * { margin-top: var(--space-2); }
@media (max-width: 479.98px) {
  .note--stack { flex-direction: column; gap: var(--space-3); }
}
.note__title { font-family: var(--font-display); font-size: 0.9375rem; line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; color: var(--text); }
.note--info,
.note--privacy { background: var(--c-white); box-shadow: var(--shadow-sm); }
.section--white .note--info,
.section--white .note--privacy { background: var(--c-ice-50); }
.note--frieda {
  align-items: center;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1.5px var(--c-ice-300), var(--shadow-sm);
}
/* Frieda-Avatar: nur das DIREKTE Kind wird zugeschnitten (Wrapper-Lösungen wie wissen.html
   .ph > .avatar behalten ihren eigenen Ausschnitt). Teamfoto → dezentes Grading (Sättigung, §22.7);
   volle Petrol-Tönung mit Rand-Verlauf gibt es nur im Wrapper <span class="ph">. */
.note--frieda > .avatar {
  width: 56px;
  height: 56px;
  object-position: 45% 62%;
  border: 0;
  box-shadow: none;
  border-radius: 50%;
  transform: scale(1.9);
  transform-origin: 40% 50%;
  clip-path: circle(26.3% at 45.25% 50%);
  filter: saturate(var(--ph-sat)) contrast(1.03);
}
/* Petrol-Tönung wie bei .ph (Review 13.10.2026: ohne sie blieb das Studiolicht orange-braun): runde
   Tönungsebene als erstes Flex-Kind genau über dem 56-px-Avatar – negativer Abstand = Breite + gap,
   gleiche Höhe und align-items: center legen sie deckungsgleich. Aus mit .u-photo-natural. */
.note--frieda:has(> .avatar:first-child)::before {
  content: "";
  position: relative;
  z-index: 1;
  flex: none;
  width: 56px;
  height: 56px;
  margin-right: calc(-56px - var(--space-4));
  border-radius: 50%;
  /* kleiner Ausschnitt: das warme Studiolicht sitzt direkt hinter dem Kopf → kräftiger als --ph-grade */
  background: radial-gradient(closest-side at 50% 60%, rgba(62, 104, 116, 0.6) 35%, #3e6874 100%);
  mix-blend-mode: color;
  opacity: var(--ph-tint);
  pointer-events: none;
}
.note--frieda .note__title { font-size: 1rem; color: var(--c-blue-800); }

/* Tiefe Petrol-Hinweisbox (Konsolidierung 13.10.2026, Muster datenschutz.html Art. 21):
   biegt die Rollen-Tokens um; Icon-Sticker wird hell. Auch mit --info/--privacy kombinierbar. */
.note.note--deep {
  --text: var(--on-dark);
  --text-muted: var(--on-dark-muted);
  --heading: var(--on-dark);
  --link: var(--c-on-dark);
  --link-hover: var(--c-white);
  --accent: var(--on-dark-accent);
  --focus: var(--focus-on-dark);
  --border: var(--line-on-dark);
  --em-fill: var(--gradient-em-on-dark);
  background: var(--gradient-deep);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.note.note--deep > .icon { background: var(--gloss-sticker-light); color: var(--c-blue-700); }


/* =========================================================================
   27  LOGO-ORNAMENTE
   ========================================================================= */
.mark-dock {
  fill: var(--c-blue-300);
  width: min(100%, 360px);
  height: auto;
  overflow: visible;
}
.mark-dock__quarter {
  transform-box: view-box;
  transform-origin: 330px 670px;
  transition: transform var(--dur-signature) var(--ease-spring), opacity var(--dur-3) var(--ease-out);
}
.js .mark-dock:not(.is-docked) .mark-dock__quarter {
  transform: translate(-70px, 70px) rotate(-10deg);
  opacity: 0.35;
}

.orn-bracket { position: relative; padding: var(--space-5); }
@media (min-width: 768px) { .orn-bracket { padding: var(--space-6); } }
.orn-bracket::before,
.orn-bracket::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 0 solid var(--c-blue-300);
  pointer-events: none;
}
.orn-bracket::before { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 10px; }
.orn-bracket::after { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 10px; }
:is(.section--dark, .on-dark, .cta-band) .orn-bracket::before,
:is(.section--dark, .on-dark, .cta-band) .orn-bracket::after { border-color: var(--c-on-dark-2); }

.konzept-ecke { border-radius: var(--konzept-ecke); overflow: hidden; }
.konzept-ecke-sm { border-radius: var(--konzept-ecke-sm); overflow: hidden; }

/* Liste mit Winkel-Bullets (Winkel der Bildmarke) */
.list-winkel { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.list-winkel > li { position: relative; padding-left: 1.85rem; }
.list-winkel > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--c-ice-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232c505b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h5.5V11'/%3E%3C/svg%3E") center / 14px no-repeat;
}
:is(.section--dark, .on-dark) .list-winkel > li::before {
  background-color: rgba(126, 168, 181, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9c7cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h5.5V11'/%3E%3C/svg%3E");
}


/* =========================================================================
   28  FIGURE, PEOPLE, SCROLLER, LAGESKIZZE & FOTO-GRADING
   Foto-Grading der Teamfotos (Variante A): Sättigung leicht runter, Petrol-Tönung
   (mix-blend-mode: color) nur an den Rändern – die Mitte mit den Gesichtern bleibt
   natürlich. Abschalten: --ph-tint: 0; --ph-sat: 1 (global oder .u-photo-natural).
   ========================================================================= */
.figure { margin: 0; }
.figure__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xl);
  background: var(--c-blue-900);
}
.figure__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(var(--ph-sat)) contrast(1.03);
}
.figure--sm .figure__media { border-radius: var(--r-lg); }
.figure .caption,
.figure figcaption { margin-top: var(--space-3); }

/* Allgemeiner Foto-Wrapper mit Grading: <span class="ph"><img …></span> (Rundung über eigene Klasse) */
.ph { position: relative; display: block; overflow: hidden; isolation: isolate; }
.ph img { filter: saturate(var(--ph-sat)) contrast(1.03); }

/* Tönungs-Ebene über Teamfotos */
.ph::after,
.figure__media::after,
.card--team .card__media::after,
.people__item::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--ph-grade);
  mix-blend-mode: color;
  opacity: var(--ph-tint);
  transition: opacity 0.8s var(--ease-out);
}
.people__item::before {
  /* --ph-inset: Abstand der Tönungsebene, wenn das Porträt gerahmt ist (z. B. Polaroid-Padding) */
  inset: var(--ph-inset, 0px) var(--ph-inset, 0px) auto var(--ph-inset, 0px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
}
/* „Hallo!“: beim Überfahren wird das Foto etwas natürlicher */
.people__item:hover::before,
.card--team:hover .card__media::after,
a:hover > .ph::after,
a:focus-visible > .ph::after { opacity: calc(var(--ph-tint) * 0.4); }

.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--scroller-item, minmax(min(72%, 260px), 1fr));
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-ice-300) transparent;
}
.scroller > * { position: relative; scroll-snap-align: start; }
.scroller:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
.scroller--bleed {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}
.scroller-controls { display: none; }
.js .scroller-controls {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* Porträtreihe */
.people { --scroller-item: minmax(148px, 38vw); }
.people__item { position: relative; display: grid; gap: 2px; align-content: start; }
.people__item img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r-md);
  background: var(--c-blue-900);
  margin-bottom: var(--space-3);
  filter: saturate(var(--ph-sat)) contrast(1.03);
  transition: transform 0.7s var(--ease-spring), filter 0.8s var(--ease-out);
}
.people__item:hover img { transform: translateY(-4px) rotate(-1deg); }
.people__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.people__role {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--text-muted);
}
.people__item a { color: inherit; }
@media (min-width: 768px) {
  .people { --scroller-item: minmax(170px, 26vw); }
}
@media (min-width: 1024px) {
  .people {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--people-cols, 9), minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: var(--space-4);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .people.scroller--bleed { margin-inline: 0; padding-inline: 0; }
}

/* Lageskizze statt Karten-Embed */
.map-sketch {
  margin: 0;
  padding: var(--space-5);
  background: var(--c-white);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.map-sketch img { width: 100%; height: auto; }
@media (max-width: 599.98px) {
  .map-sketch img { max-width: 400px; margin-inline: auto; }
}
.map-sketch figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-ice-200);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}
.map-sketch .link-arrow { min-height: var(--tap); }


/* =========================================================================
   29  GLOSSAR-BEGRIFF & GLOSSAR-LISTE
   ========================================================================= */
.term {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--c-blue-400);
  text-underline-offset: 0.22em;
}
.term:hover {
  /* --link: hell blue-700 (wie bisher), auf Petrol (.section--dark, .on-dark, .card--deep, .note--deep,
     .cta-band) hell – vorher blue-700 auf Petrol, kaum sichtbar (Konsolidierung 13.10.2026) */
  color: var(--link, var(--c-blue-700));
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
.glossary { display: grid; gap: 0; }
.glossary__entry {
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
}
.glossary__entry dt {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.glossary__entry dd { margin-top: var(--space-2); max-width: var(--measure); }
@media (min-width: 1024px) {
  .glossary__entry { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--grid-gap); }
  .glossary__entry dd { margin-top: 0; }
}
mark {
  background: var(--c-ice-200);
  color: var(--c-ink);
  border-radius: 3px;
  padding: 0 2px;
  box-shadow: inset 0 -2px 0 var(--c-blue-500);
}


/* =========================================================================
   30  KOMPASS & MINI-QUADRANT
   ========================================================================= */
.icon-quad { width: 24px; height: 24px; flex: none; color: var(--c-blue-700); }
.icon-quad path { fill: currentColor; opacity: 0.22; transition: opacity var(--dur-2) var(--ease-out), transform 0.5s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
.icon-quad path.is-on { opacity: 1; }
.icon-quad--lg { width: 160px; height: 160px; }

.compass { width: 240px; max-width: 100%; height: auto; overflow: visible; }
.compass__q {
  fill: var(--c-ice-100);
  stroke: none;
  transition: transform var(--dur-signature) var(--ease-spring), fill var(--dur-2) var(--ease-out);
}
.compass__q.is-gut { fill: var(--c-blue-700); }
.compass__q.is-blick { fill: var(--c-blue-300); }
.compass__q.is-gespraech {
  fill: var(--c-white);
  stroke: var(--c-blue-700);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.compass__q--tl.is-gespraech { transform: translate(-4px, -4px); }
.compass__q--tr.is-gespraech { transform: translate(4px, -4px); }
.compass__q--br.is-gespraech { transform: translate(4px, 4px); }
.compass__q--bl.is-gespraech { transform: translate(-4px, 4px); }
.compass.is-docked .compass__q,
.compass__q.is-docked { transform: none; }
.compass__q.is-kein-thema { fill: var(--c-ice-50); stroke: var(--c-ice-300); stroke-width: 1; }
.compass__q.is-progress { fill: var(--c-blue-700); }
.compass__q.is-partial { fill: var(--c-blue-300); }
.compass__winkel {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compass--sm { width: 56px; }
/* „Fertig“: alle vier Viertel tief gefüllt (gut/Fortschritt) – der Winkel in Ink wäre auf Petrol kaum
   lesbar (≈ 1,9:1). Dann weiß wie in der Bildmarke (8,7:1). Automatisch per :has oder explizit .compass--done. */
.compass--done .compass__winkel,
.compass:not(:has(.compass__q:not(.is-gut):not(.is-progress))) .compass__winkel { stroke: var(--c-white); }


/* =========================================================================
   31  WIZARD – Grundgerüst Terminwunsch (Feinschliff in kontakt.css)
   ========================================================================= */
.wizard__progress { display: none; }
.js .wizard__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.wizard__bar,
.progress {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--c-ice-200);
  overflow: hidden;
}
.progress { flex: none; width: 100%; }
.wizard__bar > span,
.progress > span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform var(--dur-3) var(--ease-out);
}
.wizard__step > legend {
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--heading);
  margin-bottom: var(--space-6);
}
.wizard__step > legend:focus { outline: none; }
.wizard__step + .wizard__step { margin-top: var(--space-8); }
.js .wizard__step:not(.is-current) { display: none; }
.js .wizard__step + .wizard__step { margin-top: 0; }
.js .wizard__step.is-current { animation: fmk-panel-in var(--dur-3) var(--ease-out); }
.wizard__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-ice-200);
}
.wizard__handover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.wizard__summary { display: grid; gap: 0; }
.wizard__summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-ice-200);
}
.wizard__summary dt { font-size: var(--fs-small); color: var(--c-ink-2); }
.wizard__summary dd { grid-column: 1; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; }

.print-head { display: none; }


/* =========================================================================
   32  MOTION
   a) main.js: [data-reveal] (Einblenden), [data-steps] (Linie), Header-Morph
   b) motion.js (html.mo = JS läuft, keine reduzierte Bewegung, motion.js geladen):
      [data-reveal-words] [data-sticker] [data-stagger] [data-marquee] [data-float]
      [data-draw] [data-count] [data-cursor-label] [data-logo-assemble]
      [data-sticky-split] [data-burst] [data-zoom] – Doku: components.md §8
   Startzustände stehen NUR unter .mo – ohne JS / mit reduzierter Bewegung ist alles sichtbar.
   ========================================================================= */
[data-reveal] {
  transition: opacity var(--dur-4) var(--ease-out), transform 1s var(--ease-out), filter var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.is-reveal-pending {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  filter: blur(4px);
}

@keyframes fmk-panel-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* 1 · Wort-Reveal (scroll-gebunden): motion.js zerlegt in .w-Wörter (--i) und setzt --p (0–1)
      und --n am Container. Jedes Wort läuft von blass/unscharf (#7ea8b5) zu scharf/tief. */
[data-reveal-words] .w { display: inline-block; }
.mo [data-reveal-words] {
  --reveal-from: var(--c-blue-300);
  --reveal-to: var(--heading);
}
:is(.section--dark, .on-dark, .cta-band) [data-reveal-words] { --reveal-from: var(--c-blue-500); }
.mo [data-reveal-words] .w {
  --w: clamp(0, (var(--p, 0) * (var(--n, 40) + 6) - var(--i, 0)) / 6, 1);
  opacity: calc(0.26 + 0.74 * var(--w));
  filter: blur(calc((1 - var(--w)) * var(--blur-reveal)));
  color: color-mix(in oklab, var(--reveal-to) calc(var(--w) * 100%), var(--reveal-from));
  transform: translate3d(0, calc((1 - var(--w)) * 0.14em), 0);
}
.mo [data-reveal-words] em .w { color: inherit; -webkit-text-fill-color: transparent; }
.mo [data-reveal-words] .stk {
  opacity: 0;
  transform: scale(0.2) rotate(-50deg);
  transition: transform 0.75s var(--ease-spring), opacity 0.25s;
}
.mo [data-reveal-words] .stk.is-on { opacity: 1; transform: rotate(var(--r)); }
@media (max-width: 699.98px) {
  :root { --blur-reveal: 5px; }
}

/* 2 · Sticker-Pop beim Erreichen */
.mo [data-sticker] { transition: transform 0.8s var(--ease-spring), opacity 0.3s; }
.mo [data-sticker]:not(.is-on) { opacity: 0; transform: scale(0.3) rotate(-40deg); }
.mo [data-sticker].is-on { opacity: 1; transform: rotate(var(--r, 0deg)); }

/* 3 · Gestaffelte Kinder (data-stagger="rise" | "tilt" | "pop" | "slide") */
.mo [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 56px, 0) scale(0.96);
  transition: opacity 0.7s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
}
.mo [data-stagger="tilt"] > * {
  transform: translate3d(0, 90px, 0) rotate(-7deg) scale(0.9);
  transition: opacity 0.6s var(--ease-out), transform 1s var(--ease-spring);
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
}
.mo [data-stagger="pop"] > * {
  transform: scale(0.45) rotate(-10deg);
  transition: opacity 0.4s var(--ease-out), transform 0.9s var(--ease-spring);
  transition-delay: calc(var(--stagger-i, 0) * 60ms);
}
.mo [data-stagger="slide"] > * { transform: translate3d(-40px, 0, 0) scale(0.97); }
.mo [data-stagger].is-in > * { opacity: 1; transform: none; }

/* 4 · Laufband (scroll-gebunden, läuft nicht von selbst – WCAG 2.2.2) */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; }
.marquee__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.marquee.is-running .marquee__list { flex-wrap: nowrap; flex: none; }
.mo .marquee__track { will-change: transform; }

/* 5 · Schweben/Parallax: motion.js setzt transform direkt */
.mo [data-float] { will-change: transform; }

/* 9 · Logo-Viertel: Wörter des Endzustands werden einzeln bewegt */
[data-assemble-title] .w { display: inline-block; }

/* 10 · Linie durch Punkte [data-path] (SVG legt motion.js an) */
.path-line {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
}
.path-line__track { stroke: var(--c-ice-300); stroke-width: 2; stroke-dasharray: 2 8; }
.path-line__draw { stroke: var(--c-blue-500); stroke-width: 3; }
:is(.section--dark, .on-dark, .cta-band) .path-line__track { stroke: rgba(126, 168, 181, 0.3); }
:is(.section--dark, .on-dark, .cta-band) .path-line__draw { stroke: var(--c-blue-300); }
[data-path] [data-path-node] { position: relative; z-index: 1; }
.mo .has-path [data-path-item] > :not([data-path-node]) { transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); }
.mo .has-path [data-path-item]:not(.is-on) > :not([data-path-node]) { opacity: 0.28; transform: translateY(10px); }
.mo .has-path [data-path-node] { transition: transform 0.8s var(--ease-spring), opacity 0.3s; }
.mo .has-path [data-path-item]:not(.is-on) [data-path-node] { opacity: 0; transform: scale(0.35) rotate(-40deg); }

/* 8 · Cursor-Label (nur hover:hover + pointer:fine, von motion.js erzeugt) */
.cursor-label {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0);
}
.cursor-label__text {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--c-blue-950);
  color: var(--c-white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgba(17, 40, 48, 0.55);
  transform: translate(16px, 18px) scale(0) rotate(-8deg);
  transform-origin: 0 0;
  transition: transform 0.4s var(--ease-spring);
}
.cursor-label.is-on .cursor-label__text { transform: translate(16px, 18px) scale(1) rotate(-4deg); }

/* 11 · Burst / 12 · Zoom: transform aus motion.js */
.mo [data-burst] > *,
.mo [data-zoom] { will-change: transform; }
/* Zoom von der Oberkante aus: Die Kante bleibt an ihrer Layout-Position, Ankersprünge (#weg, #fahrplan,
   #gruender, #mehr) landen deshalb wie ohne Bewegung unter Header/Subnav (Review 13.10.2026: um die
   Mitte skaliert lag die Kante beim Sprung bis 145 px zu tief) */
.mo [data-zoom] { transform-origin: 50% 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .is-reveal-pending { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .mark-dock:not(.is-docked) .mark-dock__quarter { transform: none !important; opacity: 1 !important; }
  .steps.is-pending::before { transform: none !important; }
  .cursor-label { display: none !important; }
}
/* ::details-content erfasst der *-Selektor oben nicht – Accordions öffnen sonst mit 560 ms Höhen-
   Animation (Review 13.10.2026). Eigene Regel: Browser ohne ::details-content verwerfen nur diese. */
@media (prefers-reduced-motion: reduce) {
  .accordion__item::details-content { transition: none !important; }
}


/* =========================================================================
   33  BÜHNEN-BAUSTEINE (Konsolidierung 13.10.2026 – vorher als Kopien in index.css,
       leistungen.css, immobilien.css, werkzeuge.css)
   a) Sticky-Split: links klebt die Bildmarke (Viertel im Blick hervorgehoben), rechts laufen
      Karten vorbei. Zustand: motion.js [data-sticky-split] (läuft auch bei reduzierter Bewegung).
      <div class="split" data-sticky-split>
        <div class="split__aside" aria-hidden="true"><div class="split__sticky">
          <div class="quad-mark"><svg viewBox="190 190 620 620" focusable="false">
            <g class="quad-mark__p quad-mark__p--tl" data-split-target="tl">…</g> … (tr, br, bl)
            <g class="quad-mark__whole" data-split-target="all">…</g></svg></div>
          <p class="split__count"><span class="section-head__num" data-split-num>01</span><span data-split-name>Absichern</span></p>
        </div></div>
        <div>… Karten mit data-split-item="tl" data-split-num="01" data-split-name="Absichern" …</div>
      </div>
      Anpassen über --split-aside / --split-main / --split-gap (Spalten ab 1024 px), --quad-w (Bildmarke).
   b) Laufband-Optik: Bühne .tape-stage + Band .tape (= .marquee mit [data-marquee]); ohne Bewegung
      ruhige, umbrechende Bänder, mit Bewegung schräg über die Bühne gelegt.
      Anpassen: Bühne --tape-h (Höhe mit Bewegung), --tape-above / --tape-below (Flächen davor/danach);
      Band --tape-top, --tape-tilt, --tape-fs; zweites, helles Band .tape--ice.
   ========================================================================= */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--split-gap, clamp(32px, 4.6vw, 80px));
}
.split__aside { display: none; }
@media (min-width: 1024px) {
  .split { grid-template-columns: var(--split-aside, minmax(0, 5fr)) minmax(0, var(--split-main, 7fr)); }
  .split__aside { display: block; }
}
.split__sticky { position: sticky; top: calc(var(--header-offset, var(--header-h)) + 48px); }
html:has(.subnav) .split__sticky { top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h) + 48px); }
@media (max-height: 500px) {
  .split__sticky { position: static; }
}
.split__count {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin-top: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
html:not(.js) .split__count { display: none; }

.quad-mark { width: min(100%, var(--quad-w, 360px)); }
.quad-mark svg { width: 100%; height: auto; overflow: visible; }
.quad-mark__p {
  opacity: 0.24;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.7s var(--ease-spring), opacity 0.4s;
}
.quad-mark__p.is-on { opacity: 1; }
.quad-mark__p--tl.is-on { transform: translate(-14px, -14px); }
.quad-mark__p--tr.is-on { transform: translate(14px, -14px); }
.quad-mark__p--br.is-on { transform: translate(14px, 14px); }
.quad-mark__p--bl.is-on { transform: translate(-14px, 14px); }
[data-sticky-split].is-all .quad-mark__p { opacity: 1; transform: none; }
.quad-mark__whole { opacity: 0; transition: opacity 0.15s; }
[data-sticky-split].is-all .quad-mark__whole { opacity: 1; transition: opacity 0.3s 0.45s; }
html:not(.js) .quad-mark__p,
html:not(.js) .quad-mark__whole { opacity: 1; }

.tape-stage {
  position: relative;
  background: linear-gradient(var(--tape-above, var(--c-ice-50)) 50%, var(--tape-below, var(--c-white)) 50%);
}
.tape {
  padding: clamp(14px, 1.6vw, 22px) var(--gutter);
  background: var(--c-blue-700);
  color: var(--c-white);
}
.tape--ice { background: var(--c-ice-200); color: var(--c-blue-900); }
.tape .marquee__list { gap: 0.4em 0; }
.tape li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding-right: 0.7em;
  font-family: var(--font-display);
  font-size: var(--tape-fs, clamp(1.125rem, 0.8rem + 1.9vw, 2.375rem));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
/* Trenner: Viertel-Punkt (Bildmarke im Kleinen) */
.tape li::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-300);
}
.tape--ice li::after { background: var(--c-blue-500); border-radius: 0 100% 0 0; }
.mo .tape-stage { height: var(--tape-h, clamp(130px, 14vw, 210px)); overflow: clip; }
.mo .tape-stage > .tape {
  position: absolute;
  left: -6%;
  right: -6%;
  top: var(--tape-top, 50%);
  padding-inline: 0;
  transform: translateY(-50%) rotate(var(--tape-tilt, -2.6deg));
  box-shadow: 0 26px 50px -28px rgba(var(--shadow-c), 0.8);
}
.mo .tape-stage > .tape--ice { box-shadow: none; }


/* =========================================================================
   34  PRINT
   ========================================================================= */
@media print {
  @page { margin: 16mm 14mm; }
  :root { --section-y: 12mm; --section-y-sm: 8mm; --header-h: 0px; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .skip-link, .site-header, .mobile-menu, .sticky-cta, .site-footer__nav, .site-footer__giant,
  .cta-band, .btn, .range, .subnav, .menu-toggle, .tabs__list, .cursor-label,
  .scroller-controls, .calc__actions, .wizard__nav, [data-no-print] { display: none !important; }
  .section, .page-hero, .section--dark, .section--stone, .section--cool,
  .calc__inputs, .calc__result, .card, .note, .facts__item, .accordion__item {
    background: #fff !important;
    color: #000;
    box-shadow: none !important;
  }
  .section--dark, .page-hero, .cta-band { margin: 0 !important; border-radius: 0 !important; }
  .page-hero { padding-top: 0 !important; }
  .page-hero::after { display: none; }
  .check__box,
  .check__input:checked + .check__box { background: #fff; border-color: #000; color: #000; }
  .section--dark, .on-dark { --text: #000; --heading: var(--c-blue-700); --text-muted: #333; --em-fill: none; }
  /* Review 13.10.: Die Hell-auf-Dunkel-Tokens selbst umbiegen – Komponenten und Seiten-CSS nutzen
     direkt var(--on-dark-muted)/var(--c-on-dark); ohne dunklen Hintergrund war das im Druck fast weiß.
     Konsolidierung: auch Petrol-Karten/-Hinweise (.card--deep, .card.on-dark, .note--deep; :is() hebt
     die Spezifität auf 0,2,0, damit es deren eigene Token-Blöcke schlägt) und Seiten-Flächen, die
     --text-muted auf eine helle Blaustufe setzen (index .home-tools, werkzeuge .tools-moresec). */
  :is(.section--dark, .on-dark, .cta-band, .card--deep, .card.on-dark, .note.note--deep) {
    --c-on-dark: #000; --on-dark: #000; --c-on-dark-2: #333; --on-dark-muted: #333;
    --on-dark-accent: var(--c-blue-700); --accent: var(--c-blue-700); --focus-on-dark: var(--c-blue-700); --line-on-dark: #999;
    --link: #000; --link-hover: #000; --text: #000; --text-muted: #333; --heading: var(--c-blue-700);
    --chip-text: #000; --chip-line: #666;
    color: #000;
  }
  h1, h2, h3, .stat, .calc__hero-value { color: var(--c-blue-700); }
  :is(h1, h2, h3, .display, .quote) em { -webkit-text-fill-color: currentColor; background: none; }
  .print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6mm;
    padding-bottom: 4mm;
    margin-bottom: 6mm;
    border-bottom: 1px solid #999;
    font-size: 9pt;
    color: #000;
  }
  .print-head img { width: 24px; height: 24px; }
  .print-head__brand { display: flex; align-items: center; gap: 3mm; }
  .site-footer { background: #fff; color: #000; margin: 0; border-radius: 0; }
  .site-footer__inner { padding: 0; display: none; }
  .site-footer__bottom { border-top: 1px solid #999; color: #000; }
  .site-footer a { color: #000; }
  a { color: #000; }
  a[href^="http"]:not(.brand)::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  /* Runde Icon-Buttons (LinkedIn …) haben keinen Platz für die URL – sie lief als Buchstabenkolonne;
     ihr Name steht ohnehin als Text daneben bzw. visually hidden */
  a.icon-btn[href]::after { content: none; }
  /* Winkel am Linkende wieder normal im Fluss – sonst läge die angehängte URL über ihm (§10 .link-arrow) */
  .link-arrow:has(> .icon--winkel:last-child) { padding-right: 0; }
  .link-arrow:has(> .icon--winkel:last-child) > .icon--winkel:last-child { margin-right: 0; }
  .card, .note, .testimonial, .accordion__item, .steps__item, figure,
  .field, .choice-group, .calc__hero, .calc__kpis, .calc__chart, .calc__legend,
  .calc__notice, .calc__disclaimer { break-inside: avoid; }
  .section-head, .section-head__marker, .calc__result-title { break-after: avoid; }
  /* Flächen, die Information tragen, drucken mit (Browser lassen Hintergründe sonst weg):
     Sticker (weißes Symbol auf Glanz-Kachel), Icon-Kacheln, Winkel-Bullets, Nummern-Pillen,
     Viertel-Punkt der Eyebrows, Badges, Diagramm-Segmente/Farbfelder/Kosten-Muster,
     Fortschritt, Kompass-Viertel (SVG-Füllung druckt ohnehin) und der gewählte Chip */
  .stk, .note > .icon, .card__icon, .list-winkel > li::before, .section-head__num,
  .eyebrow--line::before, .page-hero__text > .eyebrow:first-child::before,
  .badge, .calc__stack, .calc__stack > span, .calc__bar > span, .calc__swatch,
  .calc__kpi--accent dt::before, .progress, .progress > span, .wizard__bar, .wizard__bar > span,
  .chip__input:checked + .chip__label, .chip__input:checked + .chip__label::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Bühnen-Bausteine (§33): Laufband weglassen, Sticky-Split als einfache Liste */
  .tape-stage, .split__aside { display: none !important; }
  .split { display: block; }
  .calc { display: block; break-inside: auto; }
  .calc__result-title { break-after: avoid; }
  .calc__result { position: static; margin-top: 6mm; border: 1px solid #999; }
  .tabs__panel[hidden], .wizard__step { display: block !important; }
  details:not([open]) > :not(summary) { display: block; }
  .is-reveal-pending,
  [data-stagger] > *,
  [data-sticker],
  [data-reveal-words] .w,
  [data-reveal-words] .stk,
  [data-float],
  [data-burst] > *,
  [data-zoom],
  [data-path-item] > *,
  [data-assemble-copy] { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-reveal-words] .w { color: inherit !important; }
  .path-line, .ph::after { display: none !important; }
  img { max-width: 60mm; }
  .figure__media img, .people__item img { max-width: 100%; filter: none; }
  .figure__media::after, .card--team .card__media::after, .people__item::before, .note--frieda::before { display: none; }
  .is-print-scoped body :not([data-print-path], [data-print-scope], [data-print-scope] *, .print-head, .print-head *) { display: none !important; }
  .is-print-scoped [data-print-scope] { padding-block: 0; margin: 0; }
}
@supports selector(::details-content) {
  @media print {
    details:not([open])::details-content { content-visibility: visible; block-size: auto; overflow: visible; }
  }
}