/* WebKlang Startseite, Runde 4. Aufbau: Schriften, Tokens, Grundlagen, Bausteine, Abschnitte in Seitenreihenfolge, Bewegung.
   Schrift: Clash Grotesk 500 für Überschriften, Hanken Grotesk für alles andere. Am Handy 16, 20, 28, 36 und Display, je Bild höchstens vier.
   Flächen: Weiß ist der Grund, Tint trägt Leistungen und Footer, Navy eine Bühne, Markenblau „Betreuung an“, Kontakt und Kundenlogin.
   Am Handy stehen Bühnen, Karten und Platten 8 px vom Fensterrand (Radius 24, innen 16), jeder Text auf der Kante der Überschriften (24).
   Abstände aus --s1 bis --s9, Bewegung nur über transform und opacity. Ohne Skript und bei reduzierter Bewegung steht alles ruhig da. */

/* ---------- Schriften (selbst gehostet) ----------
   Die Ersatzschriften sind metrisch an die Webfonts angepasst (Breite, Ober- und Unterlänge), damit beim Laden nichts springt. */
@font-face { font-family: "Clash Grotesk"; src: url("fonts/clash-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Grotesk Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 99.05%; ascent-override: 89.86%; descent-override: 25.24%; line-gap-override: 9.09%; }
@font-face { font-family: "Hanken Grotesk Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 98.96%; ascent-override: 101.06%; descent-override: 30.62%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 94.32%; ascent-override: 106.02%; descent-override: 32.12%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  /* Farbe */
  --ink: #040b1e;
  --ink-2: #364055;            /* Nebentext, 10:1 auf Weiß */
  --paper: #ffffff;
  --tint: #f2f4f8;             /* Grund der Leistungen und des Footers */
  --tint-blue: #e9effc;        /* Bühne „Betreuung“ */
  --navy: #081233;             /* die eine dunkle Bühne, Weiß darauf 18:1 */
  --blue: #2957eb;             /* Markenblau, Weiß darauf 5,7:1 */
  --sky: #8ec8f5;              /* Haken und Hinweise auf Navy, 10:1 */
  --off: #e4e8ee;              /* „Betreuung aus“, Schienen */
  --spy: #eef2fd;              /* aktiver Abschnitt in der Kopfzeile */
  --error: #b42318;            /* Rand des Felds bei Fehler, 6,5:1 auf dem weißen Feld */

  /* Schrift: genau sechs Größen */
  --font-display: "Clash Grotesk", "Clash Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --fs-display: clamp(2.75rem, 0.8rem + 6.3vw, 6.75rem);   /* 44 bis 108 */
  --fs-xl: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem);        /* 36 bis 68 */
  --fs-l: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);             /* 32 bis 56 */
  --fs-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);    /* 20 bis 26 */
  --fs-body: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);   /* 17 bis 20 */
  --fs-small: 1rem;                                         /* 16: Navigation, Buttons, Hinweise */

  /* Abstände: eine Skala */
  --s1: 0.5rem;  /* 8 */
  --s2: 1rem;    /* 16 */
  --s3: 1.5rem;  /* 24 */
  --s4: 2rem;    /* 32 */
  --s5: 3rem;    /* 48 */
  --s6: 4rem;    /* 64 */
  --s7: 6rem;    /* 96 */
  --s8: 8rem;    /* 128 */
  --s9: 10rem;   /* 160 */

  /* Raster */
  --wrap: 77.5rem;                          /* 1240 */
  --pad: clamp(1.5rem, 4vw, 3rem);          /* Seitenrand 24 bis 48 */
  --gutter: var(--s3);
  --nav-h: 4.5rem;                          /* Zeile 72, sichtbare Platte 56 */
  --inset: var(--s1);                       /* Abstand der Bühnen und Karten zum Fensterrand */
  --sec: var(--s7);                         /* Abstand der Abschnitte: Handy 96 und 128, ab Tablet 128 und 160 */
  --sec-l: var(--s8);
  --seam: calc(var(--sec-l) / 2);           /* Grundwechsel Weiß/Tint: --sec-l, je zur Hälfte auf beiden Gründen (64, Tablet 80) */

  /* Form */
  --r1: 1rem;
  --r2: 1.5rem;
  --r3: 2rem;
  --r-panel: var(--r3);                     /* Bühnen, Karten, Porträt; am Handy 24 */
  --r-bar: 1.25rem;                         /* Platte der Kopfzeile */
  --r-spy: 0.625rem;                        /* Markierung darin: Radius der Platte minus 10 px Abstand */
  --r-login: 0.875rem;                      /* Kundenlogin (44 hoch in der 56 hohen Platte): Radius der Platte minus 6 px Abstand */
  --pill: 999px;
  --shadow-float: 0 1px 2px rgba(4, 11, 30, 0.06), 0 12px 32px -12px rgba(4, 11, 30, 0.18);

  /* Bildmarke: Richtung der Balkenachse (55,66°) */
  --bar-cos: 0.5643;
  --bar-sin: 0.8256;

  /* Bewegung: Kurven und Dauern */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* Zustände, Hover */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* Eintritte, langer ruhiger Auslauf */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-press: 120ms;
  --dur-hover: 200ms;
  --dur-ui: 260ms;
  --dur-slow: 480ms;
  --dur-hero: 900ms;
}
/* Handy: Stufe L 28 px (Kartentitel, Stationen unter den Abschnitten mit 36), alle Flächen Radius 24, Kundenlogin konzentrisch.
   --w-end: Fensterrand bis Ende der Bildmarke (24 px Luft in der Fläche plus 8 px Einzug). */
@media (max-width: 47.99em) {
  :root {
    --fs-display: clamp(2.125rem, 12.4vw - 0.3125rem, 3.5rem); --fs-l: 1.75rem;
    --fs-body: var(--fs-small);             /* Text 16 wie Navigation und Buttons: eine Größe weniger, keine Stufe von nur 1 px */
    --r-panel: var(--r2); --r-bar: var(--r2); --r-login: calc(var(--r2) - 6px);
    --w-end: calc(var(--s3) + var(--inset));
  }
}
@media (min-width: 48em) { :root { --inset: var(--s2); --sec: var(--s8); --sec-l: var(--s9); } }
@media (min-width: 64em) { :root { --seam: var(--s6); } } /* Desktop: Band über Betreuung und Kontakt, ohne dass sich etwas verschiebt */

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue); color: #fff; }
main section[id] { scroll-margin-top: var(--nav-h); }

.skip {
  position: absolute; left: var(--pad); top: var(--s1); z-index: 100;
  padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--ink); color: #fff;
  font-size: var(--fs-small); text-decoration: none;
}
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: Sprunglink erst bei Fokus sichtbar */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Die Seite schneidet ab, was seitlich über den Rand ragt (die Balken). clip erzeugt keinen Scrollbereich, sticky bleibt intakt. */
.page { position: relative; overflow-x: clip; }

/* Der Inhaltsrahmen: 1240 px, gleiche linke Kante für die ganze Seite */
.nav__in, .hero__copy, .svc__head, .stack, .chapter__in, .foot__in {
  width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto;
}

/* ---------- Bausteine ---------- */
/* Buttons: eine Form (Pille), drei Füllungen. Hover legt eine Ebene darüber (nur opacity), Druck federt leicht ein. */
.button {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 3rem; padding: 0 var(--s4); border: 0; border-radius: var(--pill); cursor: pointer;
  font-family: var(--font-text); font-size: var(--fs-small); font-weight: 600; line-height: 1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-standard);
}
.button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--veil, rgba(255, 255, 255, 0.14)); opacity: 0; transition: opacity var(--dur-hover) var(--ease-standard);
}
.button:active { transform: scale(0.97); }
.button--ink { background: var(--ink); color: #fff; }
.button--blue { --veil: rgba(4, 11, 30, 0.16); min-height: 2.75rem; padding: 0 var(--s3); background: var(--blue); color: #fff; }
.button--light { --veil: rgba(41, 87, 235, 0.1); background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .button:hover::before { opacity: 1; } }

/* Links: ein Stil. Hover färbt Blau, kein wachsender Strich (Luca: „nicht diese Line“). Nur Telefon und E-Mail (--on) tragen
   den Unterstrich dauerhaft, damit sie auch ohne Hover als Link lesbar sind. */
.link {
  position: relative; display: inline-flex; align-items: center; line-height: 1.15; text-decoration: none;
  transition: color var(--dur-ui) var(--ease-standard), opacity var(--dur-press) var(--ease-standard);
}
.link--on::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 0.52em); height: max(2px, 0.07em); border-radius: 1px;
  background: currentColor;
}
.link:active { opacity: 0.72; }
.link--arrow { gap: var(--s1); min-height: 3rem; font-size: var(--fs-small); font-weight: 600; }
.link--arrow::before { /* Pfeil hinter dem Text */
  content: ""; order: 2; width: 0.5em; height: 0.5em; margin-inline: 0.1em 0.15em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--blue); }
}

.h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 34em; text-wrap: pretty; }

/* Zeilen, die aus einer Maske steigen. Innenabstand mit gleich großem negativem Außenabstand, damit nichts angeschnitten wird. */
.line { display: block; overflow: hidden; padding: 0.12em 0.1em 0.2em 0.06em; margin: -0.12em -0.1em -0.2em -0.06em; } /* taste-skill-ignore: Maske mit Luft, schneidet keinen Text */
.line__in { display: block; }

/* Haken: fein, in Markenblau */
.ticks { display: grid; gap: var(--s2); }
.ticks li { position: relative; padding-left: 2.1em; font-size: var(--fs-body); line-height: 1.45; text-wrap: pretty; }
.ticks li::before {
  content: ""; position: absolute; left: 0.3em; top: 0.22em;
  width: 0.42em; height: 0.78em; border-right: 0.12em solid var(--blue); border-bottom: 0.12em solid var(--blue);
  transform: rotate(45deg); transform-origin: 60% 60%;
}

/* ---------- Bildmarke: das W aus logo/w_color.svg ----------
   Kasten = viewBox des Logos (8049 x 4276 Einheiten): zwei Balken und der Punkt, genau in dieser Fläche.
   Jeder Balken ist ein eigenes SVG (viewBox -700 -300 6200 5700) mit Rand für Kante und Schatten; Balken 2 steht 2977,43 Einheiten weiter rechts. */
.mark { position: absolute; aspect-ratio: 8049 / 4276; pointer-events: none; }
.bar { position: absolute; top: -7.016%; width: 77.028%; height: 133.302%; max-width: none; overflow: visible; }
.bar--1 { left: -8.697%; }
.bar--2 { left: 28.295%; }

/* ---------- Navigation ----------
   Oben ohne Fläche auf dem Hero, nach dem ersten Scrollen blendet die Platte (.nav__bg) ein: 8 px eingerückt, nur opacity und scale.
   Ohne Skript ein fester weißer Balken. */
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.js .nav { background: none; }
.nav__in { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); min-height: var(--nav-h); }
.nav__bg {
  position: absolute; z-index: -1; top: var(--s1); bottom: var(--s1); left: calc(var(--s1) - var(--pad)); right: calc(var(--s1) - var(--pad));
  border-radius: var(--r-bar); background: var(--paper); box-shadow: var(--shadow-float);
  opacity: 0; transform: scale(0.985); pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-standard), transform var(--dur-ui) var(--ease-out);
}
.nav.is-scrolled .nav__bg, .nav.is-open .nav__bg { opacity: 1; transform: none; }
/* Glas, wo der Browser es kann: 86 % Weiß über stark weichgezeichnetem, kräftigerem Grund (40 px). Darunter ahnt man Farbe und Licht,
   aber keine Schrift, auch nicht in Chromium. 86 % halten den Nebentext (#364055) auch über der Navy-Bühne weit über 4,5:1.
   Oben ein feines Kantenlicht. Ohne Glas die helle Platte. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav__bg {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(4, 11, 30, 0.05), var(--shadow-float);
  }
  /* über der Navy-Bühne würde das Glas grau: dort blendet eine zweite weiße Schicht ein (zusammen etwa 94 % Weiß) */
  .nav__bg::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.6);
    opacity: 0; transition: opacity var(--dur-ui) var(--ease-standard);
  }
  .nav.is-over-dark .nav__bg::before { opacity: 1; }
  /* Handy: 95 % Weiß, so scheint in WebKit (dort zeichnet das Glas weniger weich) keine Schrift lesbar durch */
  @media (max-width: 47.99em) { .nav__bg { background: rgba(255, 255, 255, 0.95); } }
}
/* wer weniger Transparenz eingestellt hat, bekommt die helle Platte */
@media (prefers-reduced-transparency: reduce) {
  .nav__bg { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav__bg::before { display: none; }
}
.nav__brand { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto; border-radius: 6px; }
.nav__brand img { width: 7.75rem; height: auto; }
.nav__menu { order: 3; width: 100%; }
.nav__sheet, .nav__sheet-in { display: contents; } /* Hüllen nur für das Aufklappen am Handy */
.nav__spy, .nav__extra, .nav__scrim, .nav__login-sheet { display: none; }
.nav__links { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: color var(--dur-ui) var(--ease-standard);
}
.nav__link[aria-current] { color: var(--ink); }
.nav__login { order: 2; border-radius: var(--r-login); } /* konzentrisch zur Platte, auch ohne Platte; der Fokusring folgt */
.nav__toggle { display: none; }

/* mit Skript unter 64em: Menü-Knopf. Die Platte klappt nach unten auf (nur transform): .nav__sheet gleitet hinter der Leiste herunter,
   .nav__sheet-in gegenläufig und steht so still. Offen sind Leiste und Platte deckend weiß, beim Schließen wird die Leiste erst danach
   wieder Glas (.is-closing). */
@media (max-width: 63.99em) {
  .js .nav { --plate-h: calc(var(--nav-h) - 2 * var(--s1)); --menu-in: 440ms; --menu-out: 340ms; }
  .js .nav__scrim {
    display: block; position: fixed; inset: 0; z-index: -2; background: rgba(4, 11, 30, 0.28);
    opacity: 0; visibility: hidden; transition: opacity var(--menu-out) var(--ease-standard), visibility 0s linear var(--menu-out);
  }
  .js .nav.is-open .nav__scrim { opacity: 1; visibility: visible; transition: opacity var(--menu-in) var(--ease-standard); }
  .js .nav.is-open .nav__bg, .js .nav.is-closing .nav__bg {
    opacity: 1; transform: none; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .js .nav.is-open .nav__bg::before, .js .nav.is-closing .nav__bg::before { display: none; }
  .js .nav__menu {
    position: absolute; z-index: -1; top: calc(var(--s1) + var(--r-bar)); left: calc(var(--s1) - var(--pad) - var(--s4)); right: calc(var(--s1) - var(--pad) - var(--s4));
    width: auto; padding: 0 var(--s4) var(--s6); overflow: clip; pointer-events: none;
    visibility: hidden; transition: visibility 0s linear var(--menu-out);
  }
  .js .nav__menu.is-open { visibility: visible; transition-delay: 0s; }
  .js .nav__sheet {
    display: block; overflow: clip; pointer-events: auto;
    border-radius: 0 0 var(--r-bar) var(--r-bar); background: var(--paper); box-shadow: 0 24px 48px -16px rgba(4, 11, 30, 0.28);
    transform: translate3d(0, calc(-100% + var(--plate-h) - var(--r-bar)), 0);
  }
  .js .nav__sheet-in {
    display: flex; flex-direction: column;
    max-height: calc(100svh - 2 * var(--s1) - var(--r-bar)); overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--plate-h) - var(--r-bar) + var(--s2)) calc(var(--pad) - var(--s1)) var(--s4);
    transform: translate3d(0, calc(100% - var(--plate-h) + var(--r-bar)), 0);
  }
  .js .nav__sheet, .js .nav__sheet-in { transition: transform var(--menu-out) var(--ease-in-out); }
  .js .is-open .nav__sheet, .js .is-open .nav__sheet-in { transform: none; transition: transform var(--menu-in) var(--ease-out); }
  .menu-open { overflow: hidden; }
  .js .nav__in { flex-wrap: nowrap; height: var(--nav-h); }
  .js .nav__toggle {
    order: 3; display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin-right: calc(-1 * var(--s1));
    border: 0; border-radius: var(--r1); background: transparent; cursor: pointer;
  }
  .nav__login { flex: none; }
  .nav__burger, .nav__burger::before {
    display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform var(--dur-ui) var(--ease-out);
  }
  .nav__burger { position: relative; transform: translateY(-4px); }
  .nav__burger::before { content: ""; position: absolute; left: 0; top: 8px; }
  .nav__toggle[aria-expanded="true"] .nav__burger { transform: translateY(0) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__burger::before { transform: translateY(-8px) rotate(-90deg); }

  .js .nav__links { flex-direction: column; gap: 0; }
  .js .nav__link { display: flex; min-height: 3.5rem; font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.02em; color: var(--ink); }
  .js .nav__link[aria-current] { color: var(--blue); }
  .js .nav__extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); padding-top: var(--s4); }
  /* Die Links steigen leicht, während die Kante der Platte sie aufdeckt, je 40 ms versetzt. Beim Schließen gehen sie sofort und ohne Staffel. */
  .js .nav__links li, .js .nav__extra { opacity: 0; transform: translate3d(0, var(--s1), 0); transition: opacity 120ms var(--ease-standard), transform 0s linear 120ms; }
  .js .is-open .nav__links li, .js .is-open .nav__extra { opacity: 1; transform: none; transition: opacity 280ms var(--ease-standard), transform var(--dur-slow) var(--ease-out); }
  .js .is-open .nav__links li:nth-child(1) { transition-delay: 60ms; }
  .js .is-open .nav__links li:nth-child(2) { transition-delay: 100ms; }
  .js .is-open .nav__links li:nth-child(3) { transition-delay: 140ms; }
  .js .is-open .nav__links li:nth-child(4) { transition-delay: 180ms; }
  .js .is-open .nav__extra { transition-delay: 220ms; }
}
/* Handy: In der Leiste stehen nur Logo und Menü-Knopf (Luca: der Kundenlogin oben „schaut nicht gut aus“). Der Kundenlogin steht im
   aufgeklappten Menü unter „Gespräch anfragen“, beide über die ganze Breite. Ohne Skript bleibt er in der Leiste. Die Links in Stufe L.
   Bis 383 px (360 und 375 eingeschlossen) das kleinere Logo. */
@media (max-width: 47.99em) {
  .button--blue.nav__login { padding: 0 var(--s2); }
  .js .nav__login { display: none; }
  .js .nav__extra { display: grid; gap: var(--s2); }
  .js .nav__extra .button { width: 100%; min-height: 3rem; }
  .js .nav__login-sheet { display: flex; }
  .js .nav__link { font-size: var(--fs-l); }
}
@media (max-width: 23.99em) { .nav__brand img { width: 6.75rem; } }

/* Desktop: Links in der Mitte, die Markierung des aktiven Abschnitts gleitet per translateX und scaleX hinter den Link */
@media (min-width: 64em) {
  .nav__in { flex-wrap: nowrap; gap: var(--s4); }
  .nav__bg { left: calc(-1 * var(--s3)); right: calc(-1 * var(--s3)); }
  .nav__brand { margin-right: 0; }
  .nav__brand img { width: 9.5rem; }
  .nav__menu { order: 2; position: relative; width: auto; flex: 1; display: flex; justify-content: center; }
  .nav__links { position: relative; z-index: 1; gap: var(--s1); }
  .nav__link { padding: 0 var(--s2); }
  .nav__spy {
    display: block; position: absolute; left: 0; top: 50%; width: 0; height: 2.25rem; margin-top: -1.125rem;
    border-radius: var(--r-spy); background: var(--spy); transform-origin: 0 50%;
    opacity: 0; transition: opacity var(--dur-ui) var(--ease-standard);
  }
  .nav__spy.is-on { opacity: 1; }
  .nav__login { order: 3; }
}
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--blue); } /* wie alle Links: Blau statt Unterstrich */
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; padding-top: var(--s5); }
.hero__copy { position: relative; z-index: 2; }
.hero__title {
  font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500; line-height: 0.98; letter-spacing: -0.025em;
  margin-left: -0.04em;
}
.hero__lede { max-width: 30em; margin-top: var(--s3); font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty; }
.hero__lede span { display: block; text-wrap: balance; } /* „Die Komplettlösung …“ beginnt immer in einer neuen Zeile (Luca) */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); margin-top: var(--s4); }

/* Handy und Tablet: das W unter den Buttons, ab der Textkante. Am Tablet liegt die Punktmitte auf dem Fensterrand; darunter Platz für den
   Schatten (etwa 0,085 w, also 10 % von 100 % plus Seitenrand), mindestens --seam bis zum Grund der Betreuung. */
.hero__stage { position: relative; margin-top: var(--s5); padding-bottom: max(var(--seam), (100% + var(--pad)) * 0.1); pointer-events: none; }
.mark--hero { position: relative; width: calc((100% + var(--pad)) * 8049 / 7239.19); }
/* Logozeile unter den Buttons, an jeder Breite: eRecht24-Wortmarke und Hetzner-Badge, freigestellt, in Originalfarben (Luca, 2026-11-03).
   Keine Beschriftungen, kein Kasten: zwei Wortmarken auf einer Achse, so wie Partnerzeilen bei Airtable oder Frontify. Nicht gleich hoch,
   sondern gleich schwer: HETZNER ist fett und rot, eRecht24 leicht, also bekommt eRecht24 die etwas größere Versalhöhe (Wortmarke ohne
   Zeichen 57 % der Bildhöhe, HETZNER 44 %). Die Achse liegt auf den Wörtern, nicht auf den Bildmitten: das eRecht24-Zeichen ragt oben
   heraus, die Hetzner-Zeile „Hosted in Germany“ hängt unten, darum rücken beide um einen Anteil ihrer Höhe. Handy 30 + 30 px (bei 360
   eine Zeile: 130 + 32 + 140 px), ab 48em 40 + 40 px. Höhe des Blocks am Desktop: --s5 + 2.5rem, steht in --hc.
   Davor „Wir setzen auf“ in Nebentextfarbe, 16 px wie Navigation und Buttons (keine neue Größe), ohne Versalien oder Mono: am Handy als
   eigene Zeile 16 px über den Logos, ab 48em auf derselben Achse links vor ihnen, im selben Abstand wie die Logos untereinander. */
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s5); }
.hero__trust-lead { flex: 0 0 100%; font-size: var(--fs-small); line-height: 1; color: var(--ink-2); }
.hero__logos { display: flex; align-items: center; gap: var(--s4); }
.hero__seal { display: block; width: auto; height: 1.875rem; }
.hero__seal--erecht24 { transform: translateY(-14%); }
.hero__seal--hetzner { transform: translateY(6%); }
@media (min-width: 48em) {
  .hero__trust-lead { flex-basis: auto; }
  .hero__logos { gap: var(--s5); }
  .hero__seal { height: 2.5rem; }
}
/* Handy: kein W im Hero. Unter den Buttons hing es wie ein eigenes Bild und lief auf 393x659 unten aus dem Bild; groß kommt es in
   Betreuung und Kontakt (Luca, 2026-11-03). Unter den Logos --seam bis zum Grund der Betreuung. */
@media (max-width: 47.99em) {
  .hero { padding-bottom: var(--seam); }
  .hero__stage { display: none; }
}

@media (min-width: 48em) {
  .hero { padding-top: var(--s7); }
  .hero__lede { font-size: var(--fs-lead); line-height: 1.4; }
}
/* Desktop: das W oben rechts, ab 6,5rem (in hohen Heros bis 9rem) über der Überschrift, mindestens 3rem unter der Oberkante des Heros.
   Die Punktmitte liegt auf dem Fensterrand, auf breiten Schirmen höchstens 22rem neben dem Container. So groß, dass Balken 1 mindestens
   30 px und sein Schatten (0,0445 w) 12 px an „uns.“ vorbeilaufen und Füße samt Schatten über dem Fuß des Heros bleiben.
   Rechengrößen: Balkenkante 0,68317 px je px Höhe, Punktmitte 0,89939 w, Höhe 0,53124 w; Zeile 2 endet bei 7,841 em, ihre Ecke liegt
   1,55 em tief; Textblock 2,08 em + 2,8 em Lede (zwei Sätze, je eine Zeile ab 64em, gemessen 1024 bis 3440) + 6,5rem + Siegelzeile;
   Hero mindestens min(100svh - Navigation - 3,5rem, 82rem). */
@media (min-width: 64em) {
  /* Höhe: Die Betreuungs-Bühne ragt 56 px ins erste Bild, bis 1440 px Fensterhöhe. Der Text steht mittig, damit unten links kein Loch bleibt. */
  .hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: min(100svh - var(--nav-h) - 3.5rem, 82rem); padding-block: var(--s6);
    container-type: inline-size; /* 100cqw = Breite des Heros = Fenster ohne Scrollleiste */
  }
  .hero__lede { max-width: 24em; }
  .hero__title, .hero__lede, .hero__actions, .hero__trust { position: relative; z-index: 1; }
  .hero__stage { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; }
  .mark--hero {
    --hc: calc(2.08 * var(--fs-display) + 2.8 * var(--fs-lead) + 6.5rem + var(--s5) + 2.5rem); /* Höhe des Textblocks samt Logozeile */
    --hmin: min(100svh - var(--nav-h) - 3.5rem, 82rem);                                     /* Mindesthöhe des Heros */
    --off: max(0px, (var(--hmin) - 2 * var(--s6) - var(--hc)) / 2);                        /* Textblock mittig: Abstand zum Innenrand */
    --up: min(clamp(6.5rem, 6.5rem + (var(--hmin) - 48.25rem) / 4, 9rem), var(--s6) - var(--s5) + var(--off)); /* so weit beginnt das W über der Überschrift */
    --hb: max((var(--hmin) + var(--hc)) / 2, var(--hc) + var(--s6));                        /* Fuß des Heros ab Oberkante Textblock */
    --dc: calc(100% + min((100cqw - 100%) / 2, 22rem));                                     /* Mittelpunkt des Punkts */
    --a: calc(var(--dc) + 0.68317 * (1.55 * var(--fs-display) + var(--up)) - 7.841 * var(--fs-display)); /* Platz rechts der Ecke von „s.“ */
    --w: min((var(--a) - 30px) / 0.948154, (var(--a) - 5px) / 0.992654,
             (var(--hb) - var(--s3) + var(--up)) / 0.6109);                                  /* Abstand zur Schrift und zum Schatten; Füße samt Schatten */
    position: absolute; top: calc(-1 * var(--up)); left: calc(var(--dc) - 0.89939 * var(--w)); width: var(--w);
  }
}

/* ---------- Betreuung: ruhige Gegenüberstellung (ohne Skript, reduzierte Bewegung, zu wenig Platz) ---------- */
.care { padding: var(--sec) 0; }
/* Bis 64em steht die Betreuung auf dem Grund, der nach ihr kommt (Tint der Leistungen), wie die Kontaktkarte auf dem des Footers:
   Weiß endet --seam unter dem W des Heros, ihr Inhalt beginnt --seam darunter. Zu den Leistungen bleibt ein Abschnittsabstand. */
@media (max-width: 63.99em) { .care { padding: var(--seam) 0 0; background: var(--tint); } }
.care__stage { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.care__light, .care__marks, .care__answer, .switch, .care__q-light, .care__t--light, .care__lead { display: none; }
.care__q, .care__lead { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; max-width: 14em; }
.care__lists { display: grid; gap: var(--s2); margin-top: var(--s6); }
.care__col { border-radius: var(--r-panel); }
.care__col--off { background: var(--off); }
.care__col--on { background: var(--blue); color: #fff; }
.care__h { display: grid; gap: var(--s1); margin-bottom: var(--s4); font-weight: 500; }
.care__h-label { font-size: var(--fs-small); font-weight: 600; }
.care__h-word { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; letter-spacing: -0.02em; }
.care__list { display: grid; gap: var(--s2); }
.care__item { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); column-gap: var(--s2); align-items: start; font-size: var(--fs-body); line-height: 1.4; text-wrap: pretty; }
.care__t { grid-area: 1 / 2; }
.care__mk { grid-area: 1 / 1; position: relative; width: 1.5em; height: 1.4em; }
/* aus: ein feines Kreuz in Tinte und eine weiße Fassung darüber, die im Licht einblendet. an: ein Haken. */
.care__col--off .care__mk::before, .care__col--off .care__mk::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.8em; height: 0.8em; margin: -0.4em 0 0 -0.4em;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.055em), currentColor calc(50% - 0.055em), currentColor calc(50% + 0.055em), transparent calc(50% + 0.055em)),
    linear-gradient(-45deg, transparent calc(50% - 0.055em), currentColor calc(50% - 0.055em), currentColor calc(50% + 0.055em), transparent calc(50% + 0.055em));
}
.care__col--off .care__mk::before { color: rgba(4, 11, 30, 0.42); }
.care__col--off .care__mk::after { color: rgba(255, 255, 255, 0.6); opacity: 0; }
.care__col--on .care__mk::before {
  content: ""; position: absolute; left: 0.5em; top: 0.18em; width: 0.42em; height: 0.78em;
  border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; transform: rotate(45deg);
}
@media (min-width: 48em) {
  .care__lists { grid-template-columns: 1fr 1fr; }
  .care__col { padding: var(--s6) var(--s5); }
}
/* Handy: die Spalten sind Flächen wie alle anderen, „Niemand.“ und „Wir.“ ohne Etikett (es bleibt für Screenreader). Die blaue endet mit dem
   W in der Lichtfassung, die Kante der Füße (0,00994 w unter dem Kasten) 48 px über ihrem Rand. In der angehefteten Szene bleibt es verborgen. */
.care__end { display: none; }
@media (max-width: 47.99em) {
  .care__col { margin-inline: calc(var(--inset) - var(--pad)); padding: var(--s5) calc(var(--pad) - var(--inset)); }
  .care__h-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: nur für Screenreader */
  .care__end { display: block; margin-top: var(--s5); }
  .care-scroll .care__end { display: none; }
  .mark--care-end { --w: calc(100% + var(--pad) - var(--w-end)); position: relative; width: var(--w); margin-bottom: calc(0.00994 * var(--w)); }
}

/* ---------- Betreuung: die angeheftete Szene ----------
   html.care-scroll setzt boot.js im Kopf (Skript an, keine reduzierte Bewegung, Subgrid vorhanden).
   Die Bühne bleibt stehen, der Fortschritt kommt aus der Scrollposition des hohen Rahmens. */
.care-scroll .care { padding: 0; }
.care-scroll .care__track { height: 165svh; } /* ein Scroll löst aus, der Rest ist Ruhe für das Ergebnis (bis 2026-11-04 250svh) */
.care-scroll .care__stage {
  position: sticky; top: calc(var(--nav-h) + var(--inset));
  width: calc(100% - 2 * var(--inset)); height: calc(100svh - var(--nav-h) - 2 * var(--inset));
  --cp: var(--s5); --cg: var(--s5);                       /* Innenabstand oben und unten, Abstand zwischen Kopf und Liste */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--cg);
  padding: var(--cp) var(--pad);
  border-radius: var(--r-panel); background: var(--off); color: var(--ink);
  overflow: clip; isolation: isolate;
}
/* Die Bühne steht auf dem Grund, der nach ihr kommt (Tint), mit dem Einzug als Rand: keine fremden Ecken, kein Restspalt. Bis 64em wechselt
   der Grund --seam über ihr, darunter ein Abschnittsabstand. Ab 64em liegt das Band im Fuß des Heros (negativer Rand), nichts verschiebt sich. */
@media (max-width: 47.99em) {
  .care-scroll .care__stage { padding-inline: calc(var(--pad) - var(--inset)); }
}
@media (max-width: 63.99em) {
  .care-scroll .care { padding: var(--seam) 0 var(--inset); }
  .care-scroll .svc { padding-top: calc(var(--sec) - var(--inset)); }
}
@media (min-width: 64em) { .care-scroll .care { margin-top: calc(-1 * var(--seam)); padding-top: var(--seam); background: var(--tint); } }
.care-scroll .care__light { display: block; position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
/* Das Licht: ein Kreis aus dem Knopf (Radius --r), in der Mitte etwas heller. Weiß bleibt überall bei mindestens 4,5:1.
   Die blaue Fläche und die hellen Fassungen von Frage und „Niemand.“ deckt derselbe Kreis auf: ein clip-path mit gleicher Dauer und Kurve,
   Mitte im Knopf, je relativ zur eigenen Box (--x, --y aus app.js). Alle drei laufen im selben Bild, die Schrift wechselt genau am Rand. */
.care-scroll .care__fill, .care-scroll .care__q-light, .care-scroll .care__lit {
  clip-path: circle(0px at var(--x, 50%) var(--y, 50%));
  transition: clip-path 640ms cubic-bezier(0.55, 0, 0.8, 0.4); /* aus: das Licht zieht sich in den Knopf zurück */
}
.care-scroll .care.is-on .care__fill, .care-scroll .care.is-on .care__q-light, .care-scroll .care.is-on .care__lit {
  clip-path: circle(var(--r, 150vmax) at var(--x, 50%) var(--y, 50%));
  transition: clip-path 850ms cubic-bezier(0.3, 0.05, 0.1, 1) 60ms; /* an: schneller Lichtstoß, langer Auslauf */
}
.care-scroll .care__fill { position: absolute; inset: 0; background: radial-gradient(circle var(--r, 100vmax) at var(--x, 50%) var(--y, 50%), #3a68ee 0%, var(--blue) 55%); } /* taste-skill-ignore: Lichtquelle am Knopf */

.care-scroll .care__head, .care-scroll .care__lists { position: relative; z-index: 2; }
.care-scroll .care__h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* taste-skill-ignore: Überschriften der Listen nur für Screenreader */

/* Frage und „Niemand.“: je zwei Fassungen übereinander, die helle zeigt der Kreis (oben). Die dunkle geht erst, wenn er sie ganz bedeckt,
   und ist wieder da, bevor er sie freigibt (Zeiten aus app.js: --ink-hide, --ink-show). So steht nie dunkle Schrift auf Blau. */
.care-scroll .care__q { display: grid; max-width: 11em; }
.care-scroll .care__q > span { grid-area: 1 / 1; }
.care-scroll .care__q-light { display: block; color: #fff; }
.care-scroll .care__q-ink, .care-scroll .care__ink { transition: opacity 80ms linear var(--ink-show, 0ms); }
.care-scroll .care.is-on .care__q-ink, .care-scroll .care.is-on .care__ink { opacity: 0; transition-delay: var(--ink-hide, 600ms); }

/* Antwort: „Niemand.“ steigt aus der Maske und blendet dabei aus, „Wir.“ steigt hinein. Über „Niemand.“ liegt seine helle Fassung, die sich
   genauso bewegt und die der Kreis zeigt (.care__lit steht still, nur das Wort darin bewegt sich). */
.care-scroll .care__answer {
  display: grid; overflow: hidden; margin: calc(var(--s2) - 0.1em) -0.06em -0.2em; padding: 0.1em 0.06em 0.2em; /* taste-skill-ignore: Maske mit Luft */
  font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500; line-height: 1; letter-spacing: -0.025em;
}
.care-scroll .care__word, .care-scroll .care__lit, .care-scroll .care__ink { grid-area: 1 / 1; }
.care-scroll .care__lit, .care-scroll .care__ink { display: grid; }
.care-scroll .care__lit { color: #fff; }
.care-scroll .care__word { transition: transform 640ms var(--ease-out), opacity 260ms var(--ease-standard); }
.care-scroll .care__word--on { color: #fff; transform: translate3d(0, 115%, 0); opacity: 0; }
.care-scroll .care.is-on .care__word--off { transform: translate3d(0, -115%, 0); opacity: 0; transition: transform 520ms var(--ease-in-out) 120ms, opacity 260ms var(--ease-standard) 160ms; }
.care-scroll .care.is-on .care__word--on { transform: none; opacity: 1; transition: transform 760ms var(--ease-out) 300ms, opacity 200ms var(--ease-standard) 300ms; }

/* Der Schalter: eine helle Platte mit versenkter Spur und einem Knopf, der mit leichtem Überschwingen umspringt */
.care-scroll .switch {
  --sw-w: 4.75rem; --sw-h: 2.75rem; --sw-k: 2.25rem;
  display: inline-flex; align-items: center; gap: var(--s2); justify-self: start; margin-top: var(--s4);
  padding: var(--s1) var(--s3) var(--s1) var(--s1); border: 0; border-radius: var(--pill);
  background: var(--paper); color: var(--ink); cursor: pointer;
  font-size: var(--fs-body); font-weight: 600; line-height: 1;
  box-shadow: 0 1px 2px rgba(4, 11, 30, 0.08), 0 10px 28px -10px rgba(4, 11, 30, 0.28); /* taste-skill-ignore: Platte liegt auf der Bühne */
  transition: transform var(--dur-press) var(--ease-standard);
}
.care-scroll .switch:active { transform: scale(0.97); }
.care.is-on .switch:focus-visible { outline-color: #fff; } /* Fokusring auf Blau: weiß */
.switch__track {
  position: relative; flex: none; width: var(--sw-w); height: var(--sw-h); border-radius: var(--pill);
  background: #c3cad7; box-shadow: inset 0 2px 5px rgba(4, 11, 30, 0.22); /* taste-skill-ignore: versenkte Spur */
}
.switch__on { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); box-shadow: inset 0 2px 5px rgba(4, 11, 30, 0.25); opacity: 0; transition: opacity 220ms var(--ease-standard) 60ms; } /* taste-skill-ignore: versenkte Spur */
.switch__knob {
  position: absolute; top: calc((var(--sw-h) - var(--sw-k)) / 2); left: calc((var(--sw-h) - var(--sw-k)) / 2);
  width: var(--sw-k); height: var(--sw-k); border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e9edf4); /* taste-skill-ignore: Wölbung des Knopfs */
  box-shadow: 0 1px 1px rgba(4, 11, 30, 0.14), 0 4px 10px rgba(4, 11, 30, 0.24), inset 0 -1px 1px rgba(4, 11, 30, 0.06); /* taste-skill-ignore: Knopf steht über der Spur */
  transition: transform 560ms var(--ease-spring);
}
.care.is-on .switch__on { opacity: 1; }
.care.is-on .switch__knob { transform: translate3d(calc(var(--sw-w) - var(--sw-h)), 0, 0); }
.switch__label { display: inline-flex; align-items: baseline; gap: 0.22em; }
.switch__state { display: inline-grid; overflow: hidden; padding: 0.15em 0.04em 0.2em 0.1em; margin: -0.15em 0 -0.2em -0.1em; } /* taste-skill-ignore: Maske mit Luft */
.switch__word { grid-area: 1 / 1; transition: transform 420ms var(--ease-out); }
.switch__word--on { color: var(--blue); transform: translate3d(0, 120%, 0); }
.care.is-on .switch__word--off { transform: translate3d(0, -120%, 0); }
.care.is-on .switch__word--on { transform: none; }

/* Listen: beide liegen übereinander und teilen sich die Zeilen (Subgrid), jede Zeile so hoch wie ihr längerer Text, der kürzere mittig. */
.care-scroll .care__lists { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); row-gap: var(--s2); align-content: start; margin: 0; }
.care-scroll .care__col { grid-area: 1 / 1 / -1 / 2; display: grid; grid-template-rows: subgrid; margin: 0; padding: 0; border-radius: 0; background: none; color: inherit; }
.care-scroll .care__list { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; gap: inherit; }
.care-scroll .care__item { align-content: center; }
/* Bis 64em brechen „aus“ und „an“ verschieden oft um. Dort setzt jede Liste ihre Zeilen selbst, mit gleichem Abstand (--lg): So stehen beide
   Zustände gleichmäßig, eine einzeilige Zusage steht nie mittig in einer zweizeiligen Zeile. */
@media (max-width: 63.99em) {
  .care-scroll .care__lists { grid-template-rows: none; row-gap: 0; }
  .care-scroll .care__col { grid-area: 1 / 1; display: block; }
  .care-scroll .care__list { grid-row: auto; grid-template-rows: none; row-gap: var(--lg, var(--s2)); }
}
.care-scroll .care__t--light { display: block; }
/* Ungekippte Zeilen stehen im Licht weiß (mindestens 4,8:1), Kreuze 60 %. Jede wechselt, wenn der Lichtrand sie überquert: dunkel geht,
   bevor das Blau sie erreicht, hell kommt, wenn es sie bedeckt (Zeiten je Zeile aus app.js: --ink-out, --light-in, ...). */
.care-scroll .care__col--off .care__t { color: var(--ink-2); transition: opacity 80ms linear var(--ink-in, 430ms); }
.care-scroll .care__col--off .care__t--light { color: #fff; opacity: 0; transition: opacity 80ms linear var(--light-out, 0ms); }
.care-scroll .care.is-on .care__col--off .care__t { opacity: 0; transition-delay: var(--ink-out, 0ms); }
.care-scroll .care.is-on .care__col--off .care__t--light { opacity: 1; transition-delay: var(--light-in, 300ms); }
.care-scroll .care__col--off .care__mk::before { transition: opacity 80ms linear var(--ink-in, 430ms); }
.care-scroll .care__col--off .care__mk::after { transition: opacity 80ms linear var(--light-out, 0ms); }
.care-scroll .care.is-on .care__col--off .care__mk::before { opacity: 0; transition-delay: var(--ink-out, 0ms); }
.care-scroll .care.is-on .care__col--off .care__mk::after { opacity: 1; transition-delay: var(--light-in, 300ms); }
.care-scroll .care__col--on { color: #fff; }

/* Kippen: die alte Zeile rollt nach oben weg, die neue kommt von unten mit Haken */
.care-scroll .care__item { transform-origin: 50% 50%; transition: transform 420ms var(--ease-out) var(--d, 0ms), opacity 90ms linear var(--d, 0ms); }
.care-scroll .care__col--off .care__item.is-gone { opacity: 0; transform: perspective(40em) translate3d(0, -0.7em, 0) rotateX(55deg); transition: transform 380ms var(--ease-exit) var(--d, 0ms), opacity 90ms linear var(--d, 0ms); }
.care-scroll .care__col--on .care__item { opacity: 0; transform: perspective(40em) translate3d(0, 0.7em, 0) rotateX(-55deg); pointer-events: none; }
.care-scroll .care__col--on .care__item.is-shown { opacity: 1; transform: none; pointer-events: auto; transition: transform 620ms var(--ease-out) calc(var(--d, 0ms) + 90ms), opacity 90ms linear calc(var(--d, 0ms) + 90ms); }
.care-scroll .care__col--on .care__mk::before { transform: rotate(45deg) scale(0.3); opacity: 0; transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-standard); }
.care-scroll .care__col--on .is-shown .care__mk::before { transform: rotate(45deg); opacity: 1; transition: transform 520ms var(--ease-spring) calc(var(--d, 0ms) + 300ms), opacity 200ms var(--ease-standard) calc(var(--d, 0ms) + 300ms); }

/* Das W: matt bei „aus“, im Licht die Lichtfassung; app.js setzt --ml, --mt, --mw, --glide. Ab 64em unten rechts, Punktmitte auf dem Rand der
   Karte, die helle Fassung gleitet beim Einschalten in 900 ms an ihren Platz (auf der Zeit, nicht am Scrollweg). Bis 64em ganz und rechtsbündig, ohne Gleiten: die neue Fassung
   blendet erst ein, dann geht die alte, so ist immer ein W voll zu sehen. */
.care-scroll .care__marks { display: block; position: absolute; inset: 0; z-index: 1; overflow: clip; border-radius: inherit; pointer-events: none; }
.mark--care { --glide: 0px; width: var(--mw, 16rem); left: var(--ml, 34%); top: var(--mt, calc(100% - 11rem)); }
.care-scroll .care.no-marks .care__marks { display: none; }
.care-scroll .bar--off { transition: opacity 500ms var(--ease-standard) 200ms; }
.care-scroll .bar--lit { opacity: 0; transition: opacity 400ms var(--ease-standard); }
.care-scroll .care.is-on .bar--off { opacity: 0; transition-delay: 0ms; }
.care-scroll .care.is-on .bar--lit { opacity: 1; transition-delay: 200ms; }
.care-scroll .care__marks .bar--lit {
  transform: translate3d(calc(-1 * var(--glide)), 0, 0);
  transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
}
.care-scroll .care.is-on .care__marks .bar--lit { transform: none; transition: opacity 400ms var(--ease-standard) 200ms, transform 900ms var(--ease-out) 200ms; }
@media (max-width: 63.99em) {
  .care-scroll .bar--off { transition: none; }                                  /* aus: die matte liegt sofort wieder unter der hellen */
  .care-scroll .care.is-on .bar--off { transition: opacity 1ms linear 600ms; } /* an: erst wenn die helle ganz da ist (200 + 400 ms) */
}

/* ab Tablet: größere Stufen und der große Schalter (Spur 136 x 76, Knopf 64, Beschriftung 26) */
@media (min-width: 48em) {
  .care-scroll .care__item { font-size: var(--fs-lead); line-height: 1.3; }
  .care-scroll .care__lists { row-gap: var(--s3); --lg: var(--s3); }
  .care-scroll .switch { --sw-w: 8.5rem; --sw-h: 4.75rem; --sw-k: 4rem; font-size: var(--fs-lead); padding-right: var(--s4); gap: var(--s3); }
}
/* breite Bühne: links Frage, Antwort und Schalter (Spalte 1 bis 5), rechts die Zeilen (6 bis 12). Text in der Flucht der Seite.
   Die Zeilen beginnen oben bündig mit der Frage, darunter steht unten rechts das W. */
@media (min-width: 40em) and (min-aspect-ratio: 5/4) {
  .care-scroll .care__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: max(var(--s6), (100% - var(--wrap)) / 2 - var(--inset)); }
  .care-scroll .care__head { grid-column: 1 / span 5; }
  .care-scroll .care__lists { grid-column: 6 / -1; align-self: start; }
}
/* niedrige Bühne (Querformat am Handy, kleine Fenster): kleinere Stufen, kleiner Schalter, weniger Luft. Hochkant gilt das nie,
   dort bleibt die Frage so groß wie die Abschnittsüberschriften. */
@media (max-height: 40em) and (orientation: landscape) {
  .care-scroll .care__stage { --cg: var(--s3); --cp: var(--s3); }
  .care-scroll .care__q { font-size: var(--fs-lead); }
  .care-scroll .care__answer { font-size: var(--fs-xl); }
  .care-scroll .care__item { font-size: var(--fs-body); line-height: 1.3; }
  .care-scroll .care__lists { row-gap: var(--s1); --lg: var(--s1); }
  .care-scroll .switch { --sw-w: 4.75rem; --sw-h: 2.75rem; --sw-k: 2.25rem; margin-top: var(--s2); font-size: var(--fs-body); padding-right: var(--s3); gap: var(--s2); }
}
@media (max-height: 30em) and (orientation: landscape) {
  .care-scroll .care__stage { --cp: var(--s2); padding-inline: var(--s5); }
  .care-scroll .care__head { grid-column: 1 / span 5; }
  .care-scroll .switch { font-size: var(--fs-small); }
  .care-scroll .care__lists { grid-column: 6 / -1; }
  .care-scroll .care__answer { margin-top: var(--s1); }
}
/* Handy hochkant, in jeder Höhe dieselbe Ordnung: über der Frage mindestens 48 px, unten rechts das W ganz, 24 px vom Rand, die Füße
   max(3rem, Safe-Area + 1,5rem) über der Unterkante (--wb). app.js macht es so groß, wie die Resthöhe zulässt; unter 15rem Breite steht die
   ruhige Gegenüberstellung da. Die vorletzte Rasterzeile ist so hoch wie das W (--wh, Ersatzwert bis zur Messung), app.js setzt es dorthin.
   Zwischen Liste und W 24 bis 48 px, kein totes Band (Luca). Auf hohen Handys wird die Karte dafür kürzer (siehe unten, --ch). */
@media (max-width: 47.99em) and (orientation: portrait) {
  .care-scroll .care__q { font-size: var(--fs-xl); }
  .care-scroll .care__item { column-gap: 0.6em; } /* Text bei 2,1 em wie bei den Haken der Leistungen */
  /* Kompakt (Luca): Die Karte ist so hoch wie ihr Inhalt (--ch aus app.js), nicht so hoch wie das Fenster, und haftet mittig im Platz
     unter der Kopfzeile. Freie Höhe liegt als Tint über und unter der Karte statt als totes Band in ihr. Ohne Messung fensterhoch. */
  .care-scroll .care__stage {
    --ah: calc(100svh - var(--nav-h) - 2 * var(--inset));
    height: var(--ch, var(--ah));
    top: calc(var(--nav-h) + var(--inset) + (var(--ah) - var(--ch, var(--ah))) / 2);
    --cp: var(--s5); --cg: var(--s3); --lg: var(--s2);
    --wb: max(var(--s5), env(safe-area-inset-bottom, 0px) + var(--s3));
    grid-template-rows: minmax(0, 1fr) auto auto minmax(var(--s3), var(--s5)) var(--wh, calc(0.54118 * (100vw - var(--inset) - var(--pad) - var(--s3)))) minmax(0, 1fr);
    row-gap: 0; padding-bottom: var(--wb);
  }
  .care-scroll .care__head { grid-row: 2; }
  .care-scroll .care__lists { grid-row: 3; margin-top: var(--cg); }
  .care-scroll .switch { margin-top: var(--s3); }
  /* Die Frage steht vor der Karte auf Tint, wie in der ruhigen Fassung (Abstand zur Karte wie dort), und scrollt mit. In der Karte bleibt die
     h2 nur für Screenreader, die Antwort ist ihre erste Zeile (Zeilenbox bündig mit dem Kopf). */
  .care-scroll .care__lead { display: block; margin: 0 var(--pad) var(--s6); }
  .care-scroll .care__q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: nur für Screenreader */
  .care-scroll .care__answer { margin-top: -0.1em; }
}
@media (max-width: 47.99em) and (orientation: portrait) and (max-height: 50em) {
  .care-scroll .care__stage { --lg: var(--s1); }
  .care-scroll .switch { margin-top: var(--s2); }
}
@media (max-width: 47.99em) and (orientation: portrait) and (max-height: 47em) {
  .care-scroll .care__stage { --cg: var(--s2); }
  .care-scroll .care__item { font-size: var(--fs-small); line-height: 1.35; }
}

/* ---------- Leistungen: vier Bühnen ----------
   Flächen im Wechsel Weiß, Navy, Hellblau, Weiß. Jede Bühne trägt ein Motiv im gemeinsamen Material (siehe Defs im HTML). */
.svc { background: var(--tint); padding: var(--sec) 0 var(--seam); } /* Grundwechsel zum Ablauf: --seam auf Tint, --seam auf Weiß */
.svc__lead { margin-top: var(--s3); }
.stack { display: grid; gap: var(--s3); margin-top: var(--s7); } /* ohne Skript laufen die Bühnen im Fluss */

/* ---------- Lighthouse am Ende der Leistungen: „Gemessen, nicht versprochen.“ ----------
   Aufbau wie die Bühnen darüber, aber frei auf dem Grund: links bündig der Text, rechts das Lighthouse-Logo als Motiv (Lucas Wunsch, Datei
   img/google-lighthouse.png, unverändert, nur auf den Inhalt beschnitten). Der Lichtstrahl des Leuchtturms zeigt nach links auf „Bestnote“.
   Darunter mittig der Google-Schriftzug (img/google.png). Keine Karte, keine Linien, keine Icons. „Bestnote“ in Markenblau, Stufe Display: die Pointe des Blocks.
   Handy und Tablet: Logo oben (höchstens 22rem), Text darunter. Ab 64em: Text in 6 Spalten, Logo in den Spalten 7 bis 12, beide mittig zueinander.
   Abstände: 96 nach der letzten Bühne, Titel und Satz eine Gruppe (16), 48 bis „Bestnote“, 32 bis Quelle und Link, Schriftzug 24 unter dem Logo. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: nur für Screenreader */
.proof { width: min(100% - 2 * var(--pad), var(--wrap)); margin: var(--s7) auto 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.proof__art { width: min(100%, 22rem); }
.proof__art img { display: block; height: auto; }
.proof__lh { width: 100%; }
/* Google-Schriftzug (Lucas Wunsch) mittig unter der Kuppel, nicht unter dem ganzen Bild: Die Kuppel sitzt bei 54 % der Bildbreite (links reicht der Strahl hinaus). */
.proof__g { width: 28%; margin: var(--s3) 0 0 calc(54% - 14%); }
.proof__copy { margin-top: var(--s5); }
.proof__title { max-width: 14em; font-family: var(--font-display); font-size: var(--fs-l); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.proof__note { margin-top: var(--s2); color: var(--ink-2); text-wrap: pretty; }
.proof__grade { margin-top: var(--s5); font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500; line-height: 0.92; letter-spacing: -0.035em; color: var(--blue); }
.proof__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); margin-top: var(--s4); }
.proof__meta { font-size: var(--fs-small); color: var(--ink-2); }
/* Einblenden (app.js setzt .is-armed, sobald es animieren darf, und .is-in beim Hereinscrollen): Das Logo steigt weich auf und blendet ein,
   „Bestnote“ steigt aus seiner Zeile wie die Überschriften. Nur transform und opacity, einmalig.
   Ohne Skript und bei reduzierter Bewegung steht alles da (.is-armed kommt dann nie). */
.proof.is-armed .proof__art { opacity: 0; transform: translate3d(0, var(--s4), 0); }
.proof.is-armed .proof__grade .line__in { transform: translate3d(0, 115%, 0); }
.proof.is-armed.is-in .proof__art { opacity: 1; transform: none; transition: opacity 700ms var(--ease-standard), transform 1100ms var(--ease-out); }
.proof.is-armed.is-in .proof__grade .line__in { transform: none; transition: transform var(--dur-hero) var(--ease-out) 200ms; }
@media (min-width: 48em) {
  .proof__art { width: min(100%, 26rem); }
}
@media (min-width: 64em) {
  .proof { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .proof__copy { grid-column: 1 / span 6; grid-row: 1; margin-top: 0; }
  .proof__art { grid-column: 7 / -1; grid-row: 1; justify-self: end; width: min(100%, 36rem); }
}
@media (min-width: 48em) { .stack { gap: var(--s5); } }
.stage {
  --q: 0;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  border-radius: var(--r-panel); overflow: hidden; isolation: isolate;
  background: var(--paper); color: var(--ink);
  transform-origin: 50% 0;
}
.stage::after { /* tritt zurück, wenn die nächste Bühne darüber gleitet: helle Bühnen in den Grund, Navy ins Dunkle */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--tint); opacity: calc(var(--q) * 0.6);
}
.stage--host::after { background: var(--ink); opacity: calc(var(--q) * 0.5); }
/* Der Text ist ganz weg, bevor die Oberkante der nächsten Bühne ihn erreicht (app.js): ab Tablet als Ganzes (--t), am Handy Zeile für Zeile (--lt),
   jede kurz bevor die Kante der nächsten Bühne über sie gleitet. */
.stage__copy { opacity: var(--t, 1); }
.stage__title, .stage__promise, .stage .ticks li { opacity: var(--lt, 1); }
.stage__art { position: relative; order: -1; }
.art { position: absolute; overflow: visible; }
.art__word { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
/* Kundenportal: Jedes Wort gleitet auf der Balkenachse an seinen Platz (--o), die blaue Kopie zeigt die Farbe (--c), das untere zuerst.
   Ohne Werte aus app.js der Ruhezustand: alles an seinem Platz, „Status“ blau. Wege in Einheiten der viewBox. */
.pw { transform: translate(calc(var(--o, 0) * -85px), calc(var(--o, 0) * -124px)); opacity: var(--a, 1); } /* 150 Einheiten auf der Achse */
.pw__blue { opacity: var(--c, 0); }
.pw--1 .pw__blue { opacity: var(--c, 1); }
.stage__title { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.stage__promise { margin-top: var(--s2); font-size: var(--fs-lead); line-height: 1.35; text-wrap: pretty; }
.stage .ticks { margin-top: var(--s3); gap: var(--s1); }

.stage--host { background: var(--navy); color: #fff; }
.stage--host .stage__art { background: radial-gradient(closest-side, #172a72 0%, rgba(8, 18, 51, 0) 100%); } /* taste-skill-ignore: Licht hinter den Servern, ohne Kante */
.stage--host .ticks li::before { border-color: var(--sky); }
.stage--care { background: var(--tint-blue); }

@media (min-width: 48em) {
  .stage .ticks { margin-top: var(--s4); gap: var(--s2); }
  .stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); min-height: clamp(40rem, calc(100svh - var(--nav-h) - 4rem), 47.5rem); }
  .stage__copy { grid-column: 1 / span 6; align-self: center; padding: var(--s5) 0 var(--s5) var(--s5); }
  .stage__art { grid-column: 7 / -1; order: 0; }
  .art { inset: var(--s4); width: calc(100% - 2 * var(--s4)); height: calc(100% - 2 * var(--s4)); }
}
@media (min-width: 64em) {
  .stage__copy { padding-left: var(--s6); }
}
/* Handy: Alle Motive haben denselben Maßstab (--u: Pixel je Einheit, die viewBoxen sind 760 breit) und stehen mittig im Feld, nie breiter
   als die Karte. Das Feld ist so hoch wie die höchste Zeichnung (600) plus 2 × 16 px (--art-h), kleiner, wo die höchste Karte samt Stufen
   sonst nicht unter die Kopfzeile passt (app.js: --copy-h). Unter 11,25rem (sehr niedrige Fenster, .is-low) wird die Karte so hoch wie das
   Fenster und haftet mit der Unterkante, keine Stufe halb unter der Platte. Der Maßstab richtet sich dann nach dem sichtbaren Teil des
   kleinsten Felds (Fenster ohne Kopfzeile und höchsten Text, 8 px Luft je Seite): Jedes Motiv steht ganz unter der Platte, alle gleich groß.
   Hosting samt Bodenschein mittig. */
@media (max-width: 47.99em) {
  .stack {
    width: calc(100% - 2 * var(--inset)); margin-top: var(--s5);
    --art-max: calc((100vw - 2 * var(--inset)) * 600 / 1000 + 2 * var(--s2));
    --art-h: clamp(11.25rem, 100svh - var(--nav-h) - 5 * var(--s1) - var(--copy-h, 0px), var(--art-max));
    --u: calc((var(--art-h) - 2 * var(--s2)) / 600);
  }
  .stack.is-low {
    --art-h: max(12.5rem, 100svh - var(--copy-h, 0px));
    --u: max(7.5rem / 600, (100svh - var(--nav-h) - var(--copy-h, 0px) - var(--s2)) / 600);
  }
  .stage__copy { padding: var(--s2) calc(var(--pad) - var(--inset)) var(--s3); }
  .stage__art { min-height: var(--art-h); }
  .art { inset: 0; margin: auto; width: calc(760 * var(--u)); height: calc(720 * var(--u)); }
  .art--portal { width: calc(760 * 0.85 * var(--u)); height: calc(361.5 * 0.85 * var(--u)); }
  .art--host { transform: translate3d(0, calc(-12 * var(--u)), 0); } /* Server etwas tiefer: mehr Luft zur Oberkante der Karte (Luca) */
  /* Portal: Die Wörter füllen ihre viewBox fast ganz, 0,85 macht sie so breit wie die anderen Motive (etwa 630 Einheiten). */
  .stage .ticks li { line-height: 1.4; }
}
/* niedrige Handys (bis 752 px Höhe): engere Abstände im Text, so bleibt dem Motiv mehr Höhe */
@media (max-width: 47.99em) and (max-height: 47em) {
  .stage__copy { padding-top: var(--s1); padding-bottom: var(--s2); }
  .stage__promise { margin-top: var(--s1); }
  .stage .ticks { margin-top: var(--s2); }
  .stage .ticks li { line-height: 1.3; }
}
/* sehr niedrige Handys (bis 576 px, iPhone SE mit Leisten): Listen noch enger, jeder gesparte Pixel geht an das Motiv */
@media (max-width: 47.99em) and (max-height: 36em) {
  .stage .ticks { margin-top: var(--s1); gap: calc(var(--s1) / 2); }
}

/* Stapeln (mit Skript): alle Bühnen gleich hoch (--stage-h), Oberkanten in 8-px-Stufen. Passt eine nicht unter die Kopfzeile, haftet sie
   mit der Unterkante 16 px über dem Rand (man sieht sie ganz, bevor die nächste kommt), die Stufen bleiben. Am Handy 8 px unter der Kopfzeile,
   kürzere Bühnen bekommen ein höheres Feld. Bei reduzierter Bewegung haften sie genauso, ohne Verkleinern. */
.stack.is-stacked .stage {
  min-height: var(--stage-h, auto); position: sticky;
  top: min(calc(var(--nav-h) + var(--s2) + var(--i, 0) * var(--s1)), calc(100svh - var(--stage-h, 0px) - var(--s2)));
  transform: scale(calc(1 - var(--q) * 0.05));
}
.stack.is-stacked .stage:nth-child(2) { --i: 1; }
.stack.is-stacked .stage:nth-child(3) { --i: 2; }
.stack.is-stacked .stage:nth-child(4) { --i: 3; }
@media (max-width: 47.99em) {
  .stack.is-stacked .stage {
    grid-template-rows: 1fr auto;
    top: calc(min(var(--nav-h) + var(--inset), 100svh - var(--stage-h, 0px) - var(--inset) - 3 * var(--s1)) + var(--i, 0) * var(--s1));
  }
  .stack.is-stacked .stage__art { align-self: stretch; }
  /* Sehr niedrige Fenster (.is-low): Die Karten sind höher als der Platz unter der Kopfzeile und haften alle mit der Unterkante 8 px über dem
     Rand, ohne Stufen (sie lägen ohnehin über dem Fenster). Das Motiv steht mittig im sichtbaren Teil seines Felds, zwischen der Unterkante
     der Platte (in der Karte bei --nav-h + --stage-h - 100svh) und dem Text. */
  .stack.is-stacked.is-low .stage { top: calc(100svh - var(--stage-h, 0px) - var(--inset)); }
  .stack.is-stacked.is-low .art { top: max(0px, var(--nav-h) + var(--stage-h, 0px) - 100svh); }
}
@media (prefers-reduced-motion: reduce) { .stack.is-stacked .stage { transform: none; } }

/* ---------- Ablauf, Ansprechpartner, Fragen: ein Kapitel ----------
   Am Desktop steht links das Porträt, rechts ziehen Ablauf und Ansprechpartner vorbei, darunter die Fragen; am Handy untereinander.
   Innenabstand statt Außenabstand, so springt der Scrollspy nie ins Leere. .chapter__in ist ein Container (Breite ohne Bildlaufleiste). */
.chapter { padding-bottom: var(--sec); }
.chapter__in { container-type: inline-size; }
.chapter section[id] { scroll-margin-top: calc(var(--nav-h) + var(--s5)); }
.how { padding-bottom: var(--sec); }
.faq { padding-top: var(--sec); }
/* Der Abstand über dem Kapitel gehört zum Ablauf, so wechselt der Scrollspy ohne Lücke von „Leistungen“ zu „Ablauf“, ebenso gehört der Abstand
   über den Fragen zu ihnen. Die Anker ziehen diese Abstände wieder ab: die Überschrift landet 48 px unter der Kopfzeile. */
.chapter .faq[id] { scroll-margin-top: calc(var(--nav-h) + var(--s5) - var(--sec)); }
/* Ein Takt an jedem Grundwechsel: „So arbeiten wir“ steht --seam unter der Kante, die letzte Karte endet --seam darüber (alle Breiten).
   Bis 64em enden ebenso die Fragen --seam über dem Tint des Kontakts, gemessen bis zum Knopf der letzten Frage: Ihr Innenabstand darunter
   (Handy 16, Tablet 24) zählt mit, so ist dieser Wechsel auch sichtbar so groß wie die anderen. */
.chapter .how[id] { padding-top: var(--seam); scroll-margin-top: calc(var(--nav-h) + var(--s5) - var(--seam)); }
@media (max-width: 63.99em) { .chapter { padding-bottom: calc(var(--seam) - var(--s3)); } }
@media (max-width: 47.99em) { .chapter { padding-bottom: calc(var(--seam) - var(--s2)); } }

/* Ablauf: drei Stationen an einer Schiene, darin wächst beim Scrollen eine blaue Linie (4 px) von Punkt zu Punkt (app.js: --seg, .is-reached).
   Jeder Abschnitt ist so hoch wie seine Station plus Abstand und trifft den nächsten Punkt ohne Messung. Ohne Skript und bei reduzierter
   Bewegung ist alles voll. Stationen in Stufe L (ab Tablet höchstens 44 px), 64 px dazwischen. Ab 64em hängt die Schiene vor der Spalte. */
.how__steps {
  --dot: 1rem; --rail: 4px; --ts: var(--fs-l); --tlh: 1.04; --gap: var(--s6);
  --dot-y: calc(var(--ts) * var(--tlh) / 2);                       /* Mitte der ersten Titelzeile */
  display: grid; gap: var(--gap); margin-top: var(--s5);
}
.how__step { position: relative; display: grid; gap: var(--s2); padding-left: calc(var(--dot) + var(--s3)); }
.how__step:not(:last-child)::before, .how__step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--dot) / 2 - var(--rail) / 2); top: var(--dot-y);
  width: var(--rail); height: calc(100% + var(--gap)); border-radius: var(--rail);
}
.how__step::before { background: var(--off); }
.how__step::after { background: var(--blue); transform-origin: 50% 0; transform: scaleY(var(--seg, 1)); }
.how__dot {
  position: absolute; z-index: 1; left: 0; top: calc(var(--dot-y) - var(--dot) / 2);
  width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--off);
}
.how__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); }
.how__title { font-family: var(--font-display); font-size: var(--ts); font-weight: 500; line-height: var(--tlh); letter-spacing: -0.02em; text-wrap: balance; }
.how__text { max-width: 26em; text-wrap: balance; } /* ein Satz je Station: beide Zeilen etwa gleich lang statt einem kurzen Rest */
@media (min-width: 48em) {
  .how__steps { --dot: 1.25rem; --ts: min(var(--fs-l), 2.75rem); margin-top: var(--s6); }
  .how__step { padding-left: calc(var(--dot) + var(--s4)); }
}
@media (min-width: 64em) {
  .how__step { padding-left: 0; }
  .how__dot, .how__step:not(:last-child)::before, .how__step:not(:last-child)::after { margin-left: calc(-1 * var(--s6)); }
}

/* Fragen: keine Fläche, keine Linien, große Zeilen in der Display-Schrift. Die offene liegt auf einer hellblauen Platte, die über die Spalte
   hinausragt (--bleed, am Handy bis 8 px vor den Rand). Sie blendet nach dem Nachgleiten ein und mit der Antwort aus (app.js: .is-shut). */
/* Nachsatz der Fragen: wer keine Antwort findet, kommt direkt zum Formular. Bis 64em unter der Liste (der Kopf löst sich auf, order),
   ab 64em mit der Überschrift in der linken Spalte, beide laufen mit. Textlink mit Pfeil wie „So arbeiten wir“ im Hero, kein Button. */
/* Drei Zeilen: die Frage im Satz der Fragen rechts (Clash, Stufe Lead), darunter „Schreiben Sie uns.“ in --ink-2 dicht an ihr (eine Gruppe),
   dann der Link mit sichtbar 24 px Luft (8 px Rand plus 16 px Innenraum der 48 px hohen Tippfläche). */
.faq__more { display: grid; justify-items: start; }
.faq__more-q { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.faq__more-t { margin-top: 0.25rem; color: var(--ink-2); }
.faq__more .link { margin-top: var(--s1); color: var(--ink); }
@media (max-width: 63.99em) {
  .faq { display: flex; flex-direction: column; }
  .faq__head { display: contents; }
  .faq__more { order: 1; margin-top: var(--s4); }
}
/* Tablet: Der Abstand zum Kontakt wird bis zur Unterkante der letzten Frage samt 24 px Innenabstand gemessen; der Link bringt 15 px mit. */
@media (min-width: 48em) and (max-width: 63.99em) { .faq__more { padding-bottom: var(--s1); } }
.faq__list { --bleed: min(var(--s3), var(--pad) - var(--inset)); display: grid; margin-top: var(--s4); }
.faq__item { position: relative; isolation: isolate; }
.faq__item::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--bleed)); z-index: -1; border-radius: var(--r2); background: var(--tint-blue);
  opacity: 0; transition: opacity var(--dur-ui) var(--ease-standard);
}
.faq__item[open]::before { opacity: 1; transition-delay: 120ms; }
.faq__item.is-shut::before { opacity: 0; transition-delay: 0s; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 3rem; padding: var(--s3) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance;
  transition: color var(--dur-hover) var(--ease-standard);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline-offset: 4px; }
/* Knopf: geschlossen ein hellblauer Kreis mit Plus in Tinte, offen ein weißer Kreis auf der Platte, das Plus dreht sich zum Minus in Blau
   (der senkrechte Balken legt sich um 90°, der waagrechte dreht mit). Die Balken sind 2 px stark. */
.faq__icon { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--tint-blue); color: var(--ink); transition: background-color var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard); }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: currentColor;
  transition: transform var(--dur-slow) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--paper); color: var(--blue); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { transform: rotate(180deg); }
.faq__a { max-width: 36em; padding: 0 0 var(--s3); color: var(--ink-2); }
/* Handy: die Fragen rücken enger zusammen (16 px über und unter jeder Zeile, mindestens 48 px hoch), die Liste wirkt als ein Block.
   In der offenen Frage steht der Text damit 16 px unter der Kante der Platte, so wie die Platte 16 px über die Textkante hinausragt. */
@media (max-width: 47.99em) { .faq__q { padding-block: var(--s2); } }
@media (min-width: 48em) {
  .faq__list { margin-top: var(--s5); }
  .faq__q { gap: var(--s3); }
  .faq__icon { width: 2.5rem; height: 2.5rem; }
  .faq__a { padding: 0 var(--s6) var(--s4) 0; }
}
@media (hover: hover) and (pointer: fine) { .faq__q:hover { color: var(--blue); } }

/* Porträt: am Desktop 4:5, am Handy 6:5 (eigener Ausschnitt), Schwarzweiß ohne Filter, Rahmen im Grau des Hintergrunds.
   Namensschild klein und leise, Tinte mit Weiß (19:1), Radius konzentrisch, am Handy auf der Schulter mindestens 24 px unter dem Kinn. */
.portrait {
  position: relative; aspect-ratio: 6 / 5; width: min(100%, 30rem); overflow: hidden; isolation: isolate;
  margin-bottom: var(--s4); border-radius: var(--r-panel); background: #aeaeae;
}
.portrait__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait__badge {
  position: absolute; left: var(--s3); bottom: var(--s3); padding: var(--s1) var(--s2);
  border-radius: calc(var(--r3) - var(--s3)); background: var(--ink); color: #fff;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
}
/* Handy: Radius 24 wie alle Flächen. Das Schild rückt 16 px in die Ecke (Radius konzentrisch: 24 minus 16), so bleiben überall mehr als 24 px zum Kinn. */
@media (max-width: 47.99em) {
  .portrait__badge { left: var(--s2); bottom: var(--s2); border-radius: calc(var(--r-panel) - var(--s2)); }
}

/* Ansprechpartner: der Abschluss neben dem Porträt, ruhig und typografisch wie die Angaben im Kontakt. Je ein kleiner Hinweis, darunter
   Nummer und Adresse groß in der Display-Schrift, als Link mit Unterstrich (Hover: Blau). Jeder Link ist mindestens 44 px hoch. */
.person .lead { margin-top: var(--s3); }
.reach { display: grid; gap: var(--s3); margin-top: var(--s5); }
.reach__label { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.reach__value {
  min-height: 2.75rem; font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 500;
  letter-spacing: -0.015em; white-space: nowrap;
}
.reach__value::after { height: 2px; } /* in der großen Schrift fein bleiben */
@media (max-width: 47.99em) { .reach__value { font-size: var(--fs-l); } } /* Handy: Stufe L wie die Kartentitel, keine eigene Größe */

@media (min-width: 48em) {
  .chapter__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .how, .faq { grid-column: 1 / -1; }
  .portrait { grid-column: 1 / span 5; align-self: end; aspect-ratio: 4 / 5; width: 100%; margin: 0; } /* unten bündig mit Telefon und E-Mail */
  .person { grid-column: 7 / -1; align-self: end; }
}
/* 48em bis 64em: „Ansprechpartner“ passt in die sechs Spalten neben dem Porträt (das Wort ist 7,6 em breit, gerechnet mit 7,7 für etwas Luft).
   Das greift nur bis etwa 790 px Breite und nimmt dort gut 1 px weg, darüber gilt die volle Größe. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .person .h2 { font-size: min(var(--fs-xl), (50cqi - var(--gutter) / 2) / 7.7); }
}
/* Ab 64em: links das Porträt (fünf Spalten), es läuft mittig unter der Kopfzeile mit (--ph: Höhe 4:5, höchstens der Platz) und endet bündig mit
   dem Ansprechpartner (Zeile 1 und 2 des Rasters). Der Ansprechpartner ist eine Gruppe wie am Handy. Darunter die Fragen: links die
   mitlaufende Überschrift, rechts ab Spalte 7 die Liste. */
@media (min-width: 64em) {
  .chapter__in { --ph: min((5 * (100cqi - 11 * var(--gutter)) / 12 + 4 * var(--gutter)) * 1.25, 100svh - var(--nav-h) - 2 * var(--s4)); } /* cqi gilt dort, wo --ph verwendet wird */
  .how, .person { grid-column: 7 / -1; }
  .how { grid-row: 1; }
  .person { grid-row: 2; }
  .reach__value { font-size: min(var(--fs-l), 2.75rem); } /* so groß wie die Stationen des Ablaufs direkt darüber, keine eigene Stufe */
  .faq { display: grid; grid-template-columns: subgrid; align-items: start; }
  .faq__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + var(--s5)); margin-top: var(--s3); }
  .faq__more { margin-top: var(--s5); } /* 48 px unter der großen Überschrift: eigene Gruppe, nicht ihr Untertitel */
  .faq__list { grid-column: 7 / -1; margin-top: 0; }
  .portrait {
    grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: start; margin-top: var(--seam);
    position: sticky; top: max(var(--nav-h) + var(--s4), (100svh + var(--nav-h) - var(--ph)) / 2);
    width: min(100%, (100svh - var(--nav-h) - 2 * var(--s4)) * 0.8);
  }
}

/* ---------- Kontakt: die blaue Schlussbühne ----------
   Eingerückt wie die Betreuung, steht auf dem Grund, der nach ihr kommt (Tint des Footers); das Weiß der Fragen endet --seam über ihr.
   Auf Blau: Schrift weiß, Feld weiß, Button hell, Fokusring weiß, Balken in der Lichtfassung. */
.contact { padding: var(--seam) var(--inset) var(--inset); background: var(--tint); }
@media (min-width: 64em) { .contact { margin-top: calc(-1 * var(--seam)); } } /* das Band liegt im Abstand unter den Fragen, die Karte bleibt, wo sie ist */
.contact__card {
  position: relative; overflow: clip; isolation: isolate;
  padding: var(--sec) var(--pad); border-radius: var(--r-panel); background: var(--blue); color: #fff;
}
.contact__card :focus-visible { outline-color: #fff; }
.contact__card ::selection { background: #fff; color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .contact__card .link--on:hover { color: inherit; } }
.contact__in { display: grid; gap: var(--s6); }
.contact__copy { display: grid; gap: var(--s3); max-width: 36rem; }
/* Überall sonst verschmilzt der untere Rand der Zeilenmaske (-0.2em, .line) mit dem Abstand darunter. Im Grid verschmilzt nichts,
   darum zieht die Überschrift hier dasselbe ab: Überschrift bis Lead sieht im Kontakt so aus wie in Hero, Leistungen und Ansprechpartner. */
.contact__copy .h2 { margin-bottom: -0.2em; }
.form { display: grid; gap: var(--s3); margin-top: var(--s2); }
/* Zwei Sätze, jeder auf eigener Zeile und für sich ausgewogen umbrochen (Luca: „Schreiben Sie uns ein paar Zeilen:“ in die nächste Zeile) */
.contact__lead span { display: block; text-wrap: balance; }
/* Name und E-Mail: am Handy untereinander, ab Tablet nebeneinander, die Nachricht darunter über die volle Breite */
.form__row { display: grid; gap: var(--s3); }
@media (min-width: 48em) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--s1); }
.field__label { font-size: var(--fs-small); font-weight: 600; }
.field__input {
  width: 100%; min-height: 10rem; padding: var(--s2); border: 2px solid var(--paper); border-radius: var(--r1); background: var(--paper); color: var(--ink);
  font-size: var(--fs-body); line-height: 1.5; resize: vertical;
}
input.field__input { min-height: 0; height: 3rem; padding-block: 0; } /* einzeilig so hoch wie der Button */
.field__input::placeholder { color: #5f6880; opacity: 1; }
.field__input[aria-invalid="true"] { border-color: var(--error); }
.field__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s2); font-size: var(--fs-small); }
.field__error, .field__full { font-weight: 600; }
.field__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
/* Kontaktdaten: die Bezeichnungen nur für Screenreader, die Links untereinander in 20 px */
.contact__facts { display: grid; justify-items: start; margin-top: var(--s3); }
.contact__facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: Bezeichnung nur für Screenreader */
.contact__facts dd a { min-height: 2.75rem; font-size: var(--fs-body); font-weight: 600; }
/* Schlussbild: das W in der Lichtfassung ab der Textkante. Am Tablet liegt die Punktmitte auf dem Rand der Karte, am Handy steht es ganz
   in ihr (bis 24 px vor den Rand), so groß wie im Hero und in der Betreuung. */
.contact__art { position: relative; pointer-events: none; }
.mark--end { position: relative; }
@media (max-width: 63.99em) { .contact__card { padding-bottom: var(--s6); } } /* unter dem W 64 px, darin hat der Schatten Platz (etwa 0,085 w) */
@media (max-width: 47.99em) {
  .contact__card { padding: var(--s6) calc(var(--pad) - var(--inset)); }
  .mark--end { width: calc(100% + var(--pad) - var(--w-end)); }
}
@media (min-width: 48em) {
  .contact__card { padding-inline: max(var(--s6), (100% - var(--wrap)) / 2); } /* 100 % ist hier die Bühne: der Text steht in der Flucht der Seite */
  .mark--end { width: calc((100% + var(--s6)) / 0.89939); } /* bis 64em ist der Innenabstand der Karte 4rem */
}
/* Text über Spalte 1 bis 7, das W rechts daneben, 3rem neben dem Formular (höchstens 36rem), Punktmitte auf dem Rand der Karte (höchstens
   22rem neben dem Container), senkrecht mittig. */
@media (min-width: 64em) {
  .contact__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .contact__copy { grid-column: 1 / span 7; }
  .contact__art { position: static; grid-column: 8 / -1; padding: 0; }
  .mark--end {
    --pl: max(var(--s6), (100% - var(--wrap)) / 2);
    --left: calc(var(--pl) + min(36rem, (100% - 2 * var(--pl) - 11 * var(--gutter)) * 7 / 12 + 6 * var(--gutter)) + var(--s5));
    --dc: min(100%, 100% - var(--pl) + 22rem);
    position: absolute; top: 50%; left: var(--left); width: calc((var(--dc) - var(--left)) / 0.89939); transform: translateY(-50%);
  }
}

/* ---------- Footer ---------- */
.foot { padding: var(--s7) 0 var(--s5); background: var(--tint); font-size: var(--fs-small); }
@media (max-width: 63.99em) { .foot { padding-top: calc(var(--sec) - var(--inset)); } } /* ein Abschnittsabstand unter der Kontaktkarte, ihr Rand zählt mit */
.foot__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--gutter); }
.foot__brand, .foot__base { grid-column: 1 / -1; }
.foot__logo { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: 6px; }
.foot__logo img { width: 8.75rem; height: auto; }
.foot__claim { margin-top: var(--s1); max-width: 22em; font-size: var(--fs-body); text-wrap: balance; }
/* Spalten wie bei Apple und Stripe: kleine Überschrift in Tinte, die Links darunter ruhiger in --ink-2 wie die Zeile ganz unten */
.foot__h { margin-bottom: var(--s1); font-weight: 600; }
.foot__list { display: grid; align-content: start; justify-items: start; }
.foot__list { color: var(--ink-2); } /* am Container, so färbt der Hover den Link ohne Spezifitätsstreit */
.foot__list .link, .foot__links .link { min-height: 2.75rem; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); color: var(--ink-2); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
@media (min-width: 48em) {
  .foot__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s6); }
  .foot__brand { grid-column: 1 / span 6; }
  .foot__nav { grid-column: 7 / span 3; }
  .foot__contact { grid-column: 10 / -1; }
  .foot__base { grid-column: 1 / -1; }
}

/* ---------- Rechtstexte (impressum.html, datenschutz.html) ----------
   Eine ruhige Lesespalte, bündig links wie die Startseite. Titel in Clash, Abschnitte in Clash fs-lead, Zwischentitel fett in der Textschrift.
   Keine eigenen Effekte, kein Skript. */
.legal { width: min(100% - 2 * var(--pad), var(--wrap)); margin: var(--s6) auto var(--sec); }
.legal__in { max-width: 44rem; }
.legal h1 { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; hyphens: manual; }
.legal__date { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-2); }
.legal h2 { margin-top: var(--s6); font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.legal h3 { margin-top: var(--s4); font-size: var(--fs-body); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.legal h2 + p, .legal h2 + h3 { margin-top: var(--s2); }
.legal p, .legal ul { margin-top: var(--s2); overflow-wrap: break-word; text-wrap: pretty; }
.legal h3 + p { margin-top: var(--s1); }
.legal ul { display: grid; gap: var(--s1); padding-left: 1.25em; list-style: disc; }
.legal li::marker { color: var(--ink-2); }
.legal a { color: var(--blue); text-decoration: underline; text-decoration-thickness: max(1px, 0.06em); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.legal__strong { font-weight: 600; }

/* ---------- 404 (404.html, gleiche Hülle wie die Rechtstexte) ----------
   Bündig links wie die Startseite: die Zahl groß in Markenblau (Clash, fs-display, wie „Bestnote“), darunter der Satz in fs-l,
   ein Hinweis und zwei Wege zurück. Zahl und Satz steigen wie die Überschriften aus ihrer Zeile (.rise), kein eigener Effekt.
   Die Mindesthöhe hält den Footer bei kurzem Inhalt aus der Bildmitte. */
.err { width: min(100% - 2 * var(--pad), var(--wrap)); min-height: min(72svh, 46rem); margin: 0 auto; padding: var(--s7) 0 var(--sec); }
.err__code { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500; line-height: 0.92; letter-spacing: -0.035em; color: var(--blue); }
.err__title { max-width: 14em; margin-top: var(--s4); font-family: var(--font-display); font-size: var(--fs-l); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.err__text { max-width: 30em; margin-top: var(--s3); font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.err__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s5); }
@media (prefers-reduced-motion: no-preference) {
  .js .err__title.rise.is-in .line__in { animation-delay: 110ms; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: die Zeilen steigen aus der Maske, die Balken gleiten auf ihrer Achse herein, danach läuft einmal Licht über sie. */
  .hero__title .line__in { animation: line-up var(--dur-hero) var(--ease-out) backwards; }
  .hero__title .line:nth-child(1) .line__in { animation-delay: 100ms; }
  .hero__title .line:nth-child(2) .line__in { animation-delay: 210ms; }
  .hero .bar { animation: glide 1300ms var(--ease-out) backwards; }
  .hero .bar--1 { animation-delay: 120ms; }
  .hero .bar--2 { animation-delay: 260ms; }
  .hero .glint { animation: glint 2200ms var(--ease-in-out) 1000ms both; }
  .hero .bar--2 .glint { animation-delay: 1160ms; }

  /* zwei Schlüsselüberschriften steigen, sobald sie ins Bild kommen */
  .js .rise:not(.is-in) .line__in { transform: translate3d(0, 115%, 0); }
  .js .rise.is-in .line__in { animation: line-up 760ms var(--ease-out) backwards; }

  /* Ablauf: Erreicht die Linie einen Punkt, füllt er sich und die Station wird voll (.is-reached). Vorher ab Tablet Text 0,6 (5,2:1) und
     Titel 0,45 (3,3:1, große Schrift); am Handy beides 0,7 (6,6:1), dort nur unten im Bild. */
  .js .how__step { --dt: 0.7; --dx: 0.7; }
  .js .how__step::after { transform: scaleY(var(--seg, 0)); }
  .js .how__dot::after { transition: transform 560ms var(--ease-spring), opacity 180ms var(--ease-standard); }
  .js .how__step:not(.is-reached) .how__dot::after { transform: scale(0.3); opacity: 0; transition-duration: 240ms, 160ms; }
  .js .how__title, .js .how__text { transition: opacity var(--dur-slow) var(--ease-standard); }
  .js .how__step:not(.is-reached) .how__title { opacity: var(--dt); }
  .js .how__step:not(.is-reached) .how__text { opacity: var(--dx); }
  @media (min-width: 48em) { .js .how__step { --dt: 0.45; --dx: 0.6; } }

  /* Porträt: Das Foto setzt sich einmal ruhig (3 % größer und blass zu ganz), danach steigt die Namensplakette */
  .js .portrait__img { transition: transform var(--dur-hero) var(--ease-out), opacity var(--dur-slow) var(--ease-standard); }
  .js .portrait:not(.is-in) .portrait__img { opacity: 0; transform: scale(1.03); }
  .js .portrait__badge { transition: transform 620ms var(--ease-out) 320ms, opacity 280ms var(--ease-standard) 320ms; }
  .js .portrait:not(.is-in) .portrait__badge { opacity: 0; transform: translate3d(0, var(--s2), 0); }

  /* Gestaltung: die fünf Bausteine rücken einmal zu einer Seite zusammen */
  .js .stage--design .blk { transition: transform var(--dur-hero) var(--ease-out), opacity var(--dur-slow) var(--ease-standard); }
  .js .stage--design:not(.is-in) .blk { opacity: 0; }
  .js .stage--design:not(.is-in) .blk--head { transform: translate3d(0, -56px, 0); }
  .js .stage--design:not(.is-in) .blk--main { transform: translate3d(-56px, 0, 0); }
  .js .stage--design:not(.is-in) .blk--side1 { transform: translate3d(56px, -28px, 0); }
  .js .stage--design:not(.is-in) .blk--side2 { transform: translate3d(56px, 28px, 0); }
  .js .stage--design:not(.is-in) .blk--foot { transform: translate3d(0, 56px, 0); }
  .js .stage--design .blk--main { transition-delay: 80ms; }
  .js .stage--design .blk--side1 { transition-delay: 160ms; }
  .js .stage--design .blk--side2 { transition-delay: 240ms; }
  .js .stage--design .blk--foot { transition-delay: 320ms; }

  /* Betreuung: der Schalter springt einmal auf „an“ (320 Einheiten Weg, aus art.py), dann läuft Licht über die Spur */
  .js .stage--care .sw__knob { transition: transform 760ms cubic-bezier(0.3, 1.25, 0.5, 1) 250ms; }
  .js .stage--care .sw__on { transition: opacity 360ms var(--ease-standard) 480ms; }
  .js .stage--care:not(.is-in) .sw__knob { transform: translate3d(-320px, 0, 0); }
  .js .stage--care:not(.is-in) .sw__on { opacity: 0; }
  .js .stage--care.is-in .sw__sweep { animation: sweep 1400ms var(--ease-in-out) 1000ms both; }
}
@keyframes line-up { from { transform: translate3d(0, 115%, 0); } }
@keyframes glide {
  0% { opacity: 0; transform: translate3d(calc(var(--bar-cos) * 30vh), calc(var(--bar-sin) * 30vh), 0); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes glint { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 7600px, 0); } } /* Einheiten der Balkenachse: von vor dem Kopfende bis hinter das Fußende */
@keyframes sweep { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(860px, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}