/* ready4future · Design «Zukunft» – öffentliche Website, Stufe «Einmalig»
   ---------------------------------------------------------------------------
   Lädt NACH site.css und zukunft-tokens.css. Überschreibt nur Darstellung.
   Leitidee «Talente starten in die Zukunft»: Die Seite ist ein Flugplan. Ganz oben
   steht der Himmel mit Startrampe und Rakete. Die Abschnitte zünden wie die
   Stufen beim Scrollen nacheinander. Rechts zeigt eine schmale Flugbahn, wie weit
   man auf der Seite ist. Beim Seitenwechsel hebt die alte Seite ab, die neue setzt
   auf (View Transitions).

   Grenzen:
   - Alles steht in @media screen: Der Druck bleibt bei site.css.
   - Bewegung nur bei prefers-reduced-motion: no-preference UND ohne html.zk-pausiert
     (Pause-Knopf, setzt zukunft-theme-init.js schon vor dem ersten Bild).
   - Neuere Techniken nur als progressive Verbesserung (@supports). Ohne sie ist die
     Seite vollständig und ruhig: View Transitions, Scroll-Timelines, @starting-style,
     ::details-content, interpolate-size, color-mix(), Container Queries, :has().
     Hell/Dunkel-Werte stehen als Variablen je data-theme (kein light-dark(): Safari < 17.5).
   - Kontraste WCAG AA in beiden Modi (Tokens aus zukunft-tokens.css, dort geprüft;
     eigene Werte hier sind mit Messwert kommentiert).
   - Fusszeile bleibt in beiden Modi nachtblau (Klammer der Seite, wie bisher Navy). */

/* Seitenübergreifende View Transitions nur mit erlaubter Bewegung */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@keyframes zs-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes zs-flamme { from { transform: scaleY(.86); opacity: .55; } to { transform: scaleY(1.1); opacity: .95; } }
@keyframes zs-puls { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes zs-drehen { to { --zk-angle: 360deg; } }
@keyframes zs-orbit { to { transform: rotate(360deg); } }
@keyframes zs-glanz { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes zs-steigen {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-46vh) scale(.72); opacity: .15; }
}
@keyframes zs-zuenden {
  from { opacity: .55; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes zs-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zs-fuellen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zs-bahn { from { top: 100%; } to { top: 0%; } }
@keyframes zs-abheben { to { opacity: 0; transform: translateY(-48px) scale(.985); filter: blur(4px); } }
@keyframes zs-aufsetzen { from { opacity: 0; transform: translateY(56px); } }

/* Ersatzschrift mit den Massen von Inter: Der Wechsel auf die geladene Schrift verschiebt
   den Text nicht mehr (CLS). Werte wie bei next/font für Inter auf Arial. */
@font-face {
  font-family: 'Inter Ersatz';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

@media screen {

/* ============================== 1. Tokens (site.css -> Zukunft) ============================== */

:root {
  --zs-radius: 16px;
  --zs-radius-sm: 12px;
  --zs-head-h: 72px;

  /* alte Namen aus site.css bekommen die neuen Werte */
  --navy: var(--zk-text);
  --navy-2: var(--zk-bg-deep);
  --blue: var(--zk-cyan-text);
  --blue-700: var(--zk-mint-text);
  --cyan: var(--zk-cyan);
  --accent: var(--zk-cyan-text);
  --accent-bg: var(--zk-glass-soft);
  --accent-text: var(--zk-cyan-text);
  --ink: var(--zk-text);
  --muted: var(--zk-muted);
  --muted-2: var(--zk-lead);
  --line: var(--zk-line);
  --line-soft: var(--zk-line);
  --gray-50: var(--zk-surface-2);
  --gray-100: var(--zk-surface-2);
  --bg: var(--zk-sky-base);
  --ok: var(--zk-mint-text);
  --shadow-sm: none;
  --shadow-md: var(--zs-glow);
  --shadow-lg: var(--zs-glow);
  --shadow-btn: none;
  --ring: 0 0 0 2px var(--zk-focus), 0 0 0 6px var(--zk-focus-ring);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
}
/* Werte je Farbschema (statt light-dark(), das Safari erst ab 17.5 kennt) */
:root {
  --zs-card: rgba(13, 19, 34, .74);
  --zs-card-solid: #0d1322;
  --zs-band: rgba(105, 225, 245, .035);
  --zs-glow: 0 22px 60px rgba(0, 0, 0, .45);
  --zs-scrollbar: #2a3654;
  --zs-head-shadow: rgba(0, 0, 0, .35);
  --zs-ph-bg: rgba(255, 200, 60, .16);
  --zs-ph-line: #e3b341;
  --zs-check: #a492ff;
  --zs-invalid: #ff8a80;
  --zs-err-bg: rgba(255, 90, 80, .12);
  --zs-err-line: rgba(255, 138, 128, .5);
  --zs-err-text: #ffd6d1;
  --zs-out-bg: rgba(255, 90, 80, .16);
  --zs-out-text: #ffc9c3;
  --zs-few-bg: rgba(255, 180, 60, .16);
  --zs-few-text: #ffd59a;
}
:root[data-theme="light"] {
  --zs-card: rgba(255, 255, 255, .86);
  --zs-card-solid: #ffffff;
  --zs-band: rgba(85, 64, 173, .05);
  --zs-glow: 0 18px 44px rgba(50, 40, 140, .14);
  --zs-scrollbar: #b5c2d8;
  --zs-head-shadow: rgba(50, 40, 140, .10);
  --zs-ph-bg: #fff1c2;
  --zs-ph-line: #a87a00;
  --zs-check: #5540ad;
  --zs-invalid: #b42318;
  --zs-err-bg: #fdecec;
  --zs-err-line: #f3c9c9;
  --zs-err-text: #a53030;
  --zs-out-bg: #fdecec;
  --zs-out-text: #a53030;
  --zs-few-bg: #fff4e5;
  --zs-few-text: #8a5200;
}
@media (max-width: 1080px) { :root { --zs-head-h: 64px; } }

/* ============================== 2. Grundlagen ============================== */

html { background: var(--zk-sky-base); scrollbar-color: var(--zs-scrollbar) transparent; }
body {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--zk-text);
  font-family: 'Inter', 'Inter Ersatz', system-ui, -apple-system, sans-serif;
  text-rendering: optimizeLegibility;
}
/* Fester Himmel hinter der ganzen Seite: Nebel und ein sehr feines Sternenmuster aus CSS. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, var(--zk-star-css), transparent 60%),
    radial-gradient(1px 1px at 68% 42%, var(--zk-star-css), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 76%, var(--zk-star-css-2), transparent 60%),
    radial-gradient(1px 1px at 86% 88%, var(--zk-star-css), transparent 60%),
    radial-gradient(ellipse 60% 40% at 92% -6%, var(--zk-nebula-a), transparent 70%),
    radial-gradient(ellipse 50% 36% at 0% 104%, var(--zk-nebula-b), transparent 70%),
    var(--zk-sky-base);
  background-size: 340px 340px, 420px 420px, 380px 380px, 460px 460px, auto, auto, auto;
}
::selection { background: var(--zk-violet); color: #04070e; }
a { color: var(--zk-cyan-text); }
p, li { text-wrap: pretty; }
h1, h2, h3 { color: var(--zk-text); font-family: var(--zk-title); font-weight: 700; letter-spacing: .005em; }
h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; }
h2 { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; }
p { color: var(--zk-lead); }
.lead { color: var(--zk-lead); }
.hint, .source-note, .muted, .small { color: var(--zk-muted); }
.big-number { font-family: var(--zk-title); color: var(--zk-text); }
strong, b { color: inherit; }

/* Einheitliches Raster (Aufräumen 23.10.): alle Seiten gleich breit und bündig.
   Formular- und Lesebreite liegen IM Raster, linksbündig, nicht als schmale Insel. */
.container, .container--form, .container--narrow { max-width: var(--container); }
.container--narrow > :not(.section-head--center):not(.center) { max-width: 820px; }

/* Links im Fliesstext */
.section p a:not(.btn), .plan-note a, .faq a, .legal p a, .legal li a, .hero-lead a, .hero .hero-phone a {
  color: var(--zk-cyan-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: 3px;
}
.hero-lead a:hover, .section p a:not(.btn):hover { text-decoration-color: currentColor; }

/* Fokus: Cyan-Ring überall gleich */
:focus-visible,
.hero :focus-visible, .cta :focus-visible, .page-head :focus-visible, .site-footer :focus-visible {
  outline: 2px solid var(--zk-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--zk-focus-ring);
}
.skip-link {
  background: var(--zk-grad-btn);
  color: var(--zk-btn-ink);
  border-radius: var(--zs-radius-sm);
  padding: 10px 16px;
}

/* Bildschirmleser-Text */
.zs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================== 3. Kopfzeile ============================== */

.site-header {
  height: var(--zs-head-h);
  background: color-mix(in srgb, var(--zk-sky-base) 72%, transparent);
  border-bottom: 0;
  view-transition-name: zs-kopf;
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
  .site-header { -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); }
}
/* Handy: kein Weichzeichner (spart Rechenarbeit), dafür deckender Grund */
@media (max-width: 600px) {
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--zk-sky-base) 94%, transparent); }
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--zk-hairline-grad);
  opacity: .8;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px var(--zs-head-shadow); }

/* Wortmarke: dunkle Schrift auf hell, helle Schrift auf dunkel */
.brand { color: var(--zk-text); }
.site-header .brand { view-transition-name: zs-marke; }
.brand .zs-logo-hell { display: none; }
:root[data-theme="light"] .site-header .brand .zs-logo-hell { display: block; }
:root[data-theme="light"] .site-header .brand .zs-logo-dunkel { display: none; }
.brand-suffix { color: var(--zk-cyan-text); border-left-color: var(--zk-line-strong); }
.brand-claim { color: var(--zk-muted); }

.nav a { color: var(--zk-muted); border-radius: 10px; position: relative; }
.nav a:hover { color: var(--zk-text); background: var(--zk-glass-soft); }
.nav a.active { color: var(--zk-text); background: transparent; }
.nav a.active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--zk-grad-btn);
}
.tel { color: var(--zk-text); }
.tel:hover { color: var(--zk-cyan-text); }

/* Werkzeuge: Pause und Farbschema */
.zs-tools { display: inline-flex; align-items: center; gap: 6px; }
.zs-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--zk-line-strong);
  border-radius: 10px;
  background: var(--zk-chip-bg);
  color: var(--zk-text);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.zs-tool:hover { border-color: var(--zk-focus); background: var(--zk-glass-soft); }
.zs-tool[hidden] { display: none; }
.zs-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zs-farbe .zs-farbe-fuell { fill: currentColor; stroke: none; }
.zs-farbe svg { display: none; }
:root[data-theme-pref="auto"] .zs-farbe .zs-farbe-auto,
:root:not([data-theme-pref]) .zs-farbe .zs-farbe-auto,
:root[data-theme-pref="light"] .zs-farbe .zs-farbe-hell,
:root[data-theme-pref="dark"] .zs-farbe .zs-farbe-dunkel { display: block; }
.zs-pause .zs-pause-weiter { display: none; }
.zs-pause[aria-pressed="true"] .zs-pause-halt { display: none; }
.zs-pause[aria-pressed="true"] .zs-pause-weiter { display: block; }
.zs-tool--text { width: 100%; height: 48px; justify-content: flex-start; gap: 10px; padding: 0 12px; font: 600 15px/1.2 var(--zk-font); }

.menu-btn { border-color: var(--zk-line-strong); background: var(--zk-chip-bg); color: var(--zk-text); border-radius: 10px; }
.mobile-panel {
  background: var(--zs-card-solid);
  border-bottom: 1px solid var(--zk-line);
  box-shadow: var(--zs-glow);
}

.mobile-panel a { color: var(--zk-text); border-bottom-color: var(--zk-line); }
.mobile-panel a.active { color: var(--zk-cyan-text); }
.mobile-panel a.tel { color: var(--zk-cyan-text); }
.mobile-panel a.sec { color: var(--zk-muted); }
.mobile-panel a.btn, .mobile-panel a.btn:hover { color: var(--zk-btn-ink); }
.zs-panel-tools { display: none; gap: 8px; margin-top: 12px; }
/* Zwei Werkzeug-Knöpfe brauchen Platz: Telefonnummer bis 1439 px nur als Symbol (Text bleibt für Screenreader) */
@media (max-width: 1439px) { .tel-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 1080px) {
  .nav-actions .tel { border-color: var(--zk-line-strong); border-radius: 10px; background: var(--zk-chip-bg); }
}
@media (max-width: 480px) {
  .nav-actions .zs-tools { display: none; }
  .zs-panel-tools { display: grid; }
}

/* ============================== 4. Himmel (Hero und Seitenkopf) ============================== */

.hero, .page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--zk-text);
  background:
    radial-gradient(ellipse 58% 80% at 86% 0%, var(--zk-nebula-a), transparent 64%),
    radial-gradient(ellipse 44% 60% at 0% 100%, var(--zk-nebula-b), transparent 68%),
    var(--zk-sky-base);
}
.hero { padding: 92px 0 132px; }
.page-head { padding: 56px 0 64px; }
.page-head--slim { padding: 34px 0 34px; }
.hero > .container, .page-head > .container { position: relative; z-index: 2; }
.hero-nodes, .zs-himmel {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  pointer-events: none;
}
/* Planetenhorizont mit Leuchtkante, unten im Hero */
.hero::after, .page-head:not(.page-head--slim)::after {
  --zs-pd: min(170vw, 2400px);
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--zs-pd) * -.955);
  width: var(--zs-pd);
  height: var(--zs-pd);
  margin-left: calc(var(--zs-pd) / -2);
  border-radius: 50%;
  border-top: 1px solid var(--zk-planet-rim);
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--zk-cyan) 22%, transparent), var(--zk-planet-core) 7%);
  box-shadow: 0 -10px 70px -12px var(--zk-glow-cyan);
  pointer-events: none;
}
.page-head:not(.page-head--slim)::after { bottom: calc(var(--zs-pd) * -.985); }
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1px 1px at 18% 30%, var(--zk-star-css), transparent 60%),
    radial-gradient(1px 1px at 72% 24%, var(--zk-star-css-2), transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 70%, var(--zk-star-css), transparent 60%);
  background-size: 260px 200px, 320px 240px, 380px 220px;
  opacity: .9;
}
.hero h1, .page-head h1 {
  color: var(--zk-text);
  background: linear-gradient(105deg, var(--zk-text) 0 38%, var(--zk-violet-text) 64%, var(--zk-cyan-text) 84%, var(--zk-mint-text));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  view-transition-name: zs-titel;
  width: fit-content;
}
.page-head h1 { font-size: clamp(32px, 4vw, 48px); max-width: 900px; }
.hero p, .page-head p { color: var(--zk-lead); }
.hero p strong, .page-head p strong { color: var(--zk-text); }
.hero .hero-phone { color: var(--zk-muted); }
.hero .hero-phone a { color: var(--zk-cyan-text); }
.page-head .eyebrow, .hero .eyebrow, .cta .eyebrow { color: var(--zk-cyan-text); }

/* Kicker als Telemetrie-Kapsel */
.hero .kicker {
  gap: 10px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--zk-line-strong);
  background: var(--zk-chip-bg);
  color: var(--zk-cyan-text);
  font: 600 12px/1.4 var(--zk-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero .kicker::before {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zk-mint-text);
  box-shadow: 0 0 12px var(--zk-mint);
}
@media (max-width: 600px) {
  .hero { padding: 52px 0 96px; }
  .hero-nodes { display: block; }
  .hero .kicker { background: var(--zk-chip-bg); border: 1px solid var(--zk-line-strong); padding: 7px 12px; color: var(--zk-cyan-text); font-size: 11px; }
}

/* ============================== 5. Startrampe mit Rakete (nur Startseite) ============================== */

.zs-start {
  position: relative;
  pointer-events: none;
  width: 100%;
  height: 100%;
  min-height: 360px;
}
.zs-start-orbit {
  position: absolute;
  inset: 4% -6% 14% -6%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--zk-cyan) 35%, transparent);
  transform: rotate(-14deg);
}
.zs-start-orbit::after {
  content: '';
  position: absolute;
  top: 46%;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--zk-violet);
  box-shadow: 0 0 14px var(--zk-violet);
}
.zs-start-orbit--2 { inset: 18% 4% 28% 4%; transform: rotate(22deg); border-style: solid; border-color: color-mix(in srgb, var(--zk-violet) 30%, transparent); }
.zs-start-orbit--2::after { top: auto; bottom: -5px; left: 58%; background: var(--zk-mint); box-shadow: 0 0 14px var(--zk-mint); }
.zs-start-rakete {
  position: absolute;
  left: 50%;
  top: 4%;
  width: 46%;
  height: 78%;
  margin-left: -23%;
  filter: drop-shadow(0 0 24px var(--zk-glow-cyan));
}
.zs-start-rakete svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zs-start-rampe {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--zk-cyan) 45%, transparent), transparent 70%);
  filter: blur(2px);
}
.zs-start-mark {
  position: absolute;
  font: 600 11px/1 var(--zk-mono);
  letter-spacing: .12em;
  color: var(--zk-muted);
  text-transform: uppercase;
}
.zs-start-mark--a { left: 0; top: 6%; }
.zs-start-mark--b { right: 0; bottom: 2%; }
.zs-start-mark::before { content: '+ '; color: var(--zk-cyan-text); }

/* Rakete: Farben (Formen aus partials/zl_rocket.php) */
.zl-stop-hull-dark { stop-color: var(--zk-hull-dark); }
.zl-stop-hull-light { stop-color: var(--zk-hull-light); }
.zl-stop-hull-mid { stop-color: var(--zk-hull-mid); }
.zl-stop-violet { stop-color: var(--zk-violet); }
.zl-stop-indigo { stop-color: var(--zk-indigo); }
.zl-stop-white { stop-color: #ffffff; }
.zl-stop-cyan { stop-color: var(--zk-cyan); }
.zl-stop-fade { stop-color: var(--zk-violet); stop-opacity: 0; }
.zl-stop-window { stop-color: var(--zk-window); }
.zl-r-seam, .zl-r-mark { fill: none; stroke: var(--zk-hull-dark); stroke-width: 2; }
.zl-r-frame { fill: var(--zk-hull-dark); stroke: var(--zk-hull-light); stroke-width: 3; }
.zl-r-glint { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .65; }
.zl-r-center { fill: var(--zk-indigo); }
.zl-r-nozzle { fill: var(--zk-hull-dark); }
.zl-flame { transform-origin: 300px 350px; opacity: .85; }

.hero:has(.zs-start) > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  column-gap: 56px;
  align-items: start;
}
.hero:has(.zs-start) > .container > * { grid-column: 1; }
.hero:has(.zs-start) > .container > .kicker { justify-self: start; }
.hero:has(.zs-start) > .container > .zs-start { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.hero:has(.zs-start) .hero-lead { display: block; }
.hero:has(.zs-start) .hero-lead p { max-width: 68ch; }
.hero:has(.zs-start) h1 { max-width: 760px; }
@media (max-width: 960px) {
  .hero:has(.zs-start) > .container { display: block; }
  .hero:has(.zs-start) > .container > .zs-start {
    position: absolute;
    top: -30px;
    right: 8px;
    width: 92px;
    height: 150px;
    min-height: 0;
  }
  .zs-start-orbit, .zs-start-mark { display: none; }
  .zs-start-rakete { top: 0; height: 100%; width: 70%; margin-left: -35%; }
  .hero:has(.zs-start) .kicker { margin-right: 96px; }
  .hero:has(.zs-start) h1 { padding-right: 64px; }
}
@media (max-width: 420px) {
  .hero:has(.zs-start) > .container > .zs-start { width: 64px; height: 110px; top: -26px; right: 0; }
  .hero:has(.zs-start) .kicker { margin-right: 60px; }
  .hero:has(.zs-start) h1 { padding-right: 34px; }
}

/* ============================== 6. Flugbahn (Fortschritt der Seite) ============================== */

.zs-flugbahn { display: none; }
@media (min-width: 1300px) {
  .zs-flugbahn {
    display: block;
    position: fixed;
    z-index: 40;
    right: 20px;
    top: calc(var(--zs-head-h) + 40px);
    bottom: 40px;
    width: 2px;
    border-radius: 2px;
    background: var(--zk-line);
    pointer-events: none;
  }
  .zs-flugbahn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(0deg, var(--zk-mint), var(--zk-cyan) 45%, var(--zk-violet));
    transform-origin: bottom;
    transform: scaleY(0);
  }
  .zs-flugbahn-punkt {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--zk-cyan);
    box-shadow: 0 0 0 4px var(--zk-glow-cyan), 0 0 16px var(--zk-cyan);
  }
}

/* ============================== 7. Abschnitte und Komponenten ============================== */

.section.tint {
  background: var(--zs-band);
  border-block: 1px solid var(--zk-line);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--zk-cyan-text);
  font: 600 12px/1.3 var(--zk-mono);
  letter-spacing: .14em;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--zk-grad-btn);
  transform-origin: left;
}
.section-head--center .eyebrow, .center .eyebrow { justify-content: center; }
.section-head h2 { text-wrap: balance; }

/* Telemetrie-Leiste */
.trustbar {
  position: relative;
  z-index: 3;
  background: var(--zs-card);
  border-block: 1px solid var(--zk-line);
}
.trustbar .item {
  color: var(--zk-muted);
  font: 500 12px/1.4 var(--zk-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trustbar .item b { color: var(--zk-text); font-weight: 700; }
.trustbar .item::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--zk-mint-text);
}
.trustbar .sep { background: var(--zk-line-strong); }
@media (max-width: 860px) { .trustbar .item { font-size: 11px; letter-spacing: .02em; } .trustbar .item::before { display: none; } }

/* Karten: Glas */
.card, .value, .book, .plan-note, .contact-box, .faq details, .legal .legal-note, .legal .legal-toc {
  background: var(--zs-card);
  border: 1px solid var(--zk-line);
  border-radius: var(--zs-radius);
  color: var(--zk-text);
}
.card p, .value p, .feature p, .book__body p { color: var(--zk-lead); }
.card h3, .value h3, .feature h3 { color: var(--zk-text); }
a.card { color: var(--zk-text); }
a.card:hover {
  border-color: color-mix(in srgb, var(--zk-cyan) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--zk-cyan) 25%, transparent), var(--zs-glow);
}
.platform h3 { color: var(--zk-cyan-text); font-family: var(--zk-title); font-size: 20px; }
.platform h3 .ext { color: var(--zk-muted); }
.platform--soft h3 { color: var(--zk-text); }

/* Symbolfelder und Nummern */
.icon-box, .num-box, .step .n {
  position: relative;
  background: var(--zk-glass-soft);
  border: 1px solid color-mix(in srgb, var(--zk-cyan) 35%, transparent);
  color: var(--zk-cyan-text);
  border-radius: 12px;
  font-family: var(--zk-mono);
}
.icon-box svg { stroke: var(--zk-cyan-text); }
.checks svg { stroke: var(--zk-mint-text); }
.checks li { color: var(--zk-lead); }
.checks li strong { color: var(--zk-text); }
.ico--lg { stroke: var(--zk-mint-text); }

/* Ablauf als Flugplan: Stufen an einer Leuchtlinie */
.steps { position: relative; }
.steps::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: var(--zk-line);
}
.steps::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: linear-gradient(180deg, var(--zk-violet), var(--zk-cyan) 55%, var(--zk-mint));
  transform-origin: top;
}
.step { position: relative; border-bottom-color: var(--zk-line); }
.step .n { z-index: 1; background: var(--zs-card-solid); box-shadow: 0 0 0 4px var(--zk-sky-base); }
.step h3 { color: var(--zk-text); }
.step p { color: var(--zk-lead); }

/* Kennzahlen */
.facts, .stats { background: var(--zk-line); border-color: var(--zk-line); border-radius: var(--zs-radius); }
.facts .f, .stat { background: var(--zs-card-solid); }
.facts .f b, .stat b {
  font-family: var(--zk-title);
  font-size: 34px;
  color: var(--zk-text);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
.stat b small, .facts .f b small { color: var(--zk-cyan-text); -webkit-text-fill-color: currentColor; }
.facts .f span, .stat span { color: var(--zk-muted); }
@media (max-width: 860px) { .facts .f b, .stat b { font-size: 26px; } }

/* Schlagworte */
.tag { background: var(--zk-chip-bg); border-color: var(--zk-line-strong); color: var(--zk-lead); border-radius: 999px; }

/* Bücher */
.book__cover { background: var(--zk-glass-soft); border-bottom-color: var(--zk-line); }
.book__body h3 { color: var(--zk-text); }
.book__links { color: var(--zk-muted); }

/* Zitate */
blockquote { border-left: 0; padding-left: 20px; position: relative; color: var(--zk-lead); }
blockquote::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--zk-grad-btn); }
blockquote cite { color: var(--zk-muted); }

/* ============================== 8. Knöpfe ============================== */

.btn,
:is(.hero, .cta, .dark, .page-head) .btn:not(.btn-outline),
.btn-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--zs-radius-sm);
  background: var(--zk-grad-btn);
  color: var(--zk-btn-ink);
  font-weight: 700;
  box-shadow: 0 10px 30px var(--zk-glow-cyan);
  transition: box-shadow .2s, transform .2s;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) 160% 0 / 250% 100% no-repeat;
  opacity: 0;
}
.btn:hover,
:is(.hero, .cta, .dark, .page-head) .btn:not(.btn-outline):hover,
.btn-light:hover {
  background: var(--zk-grad-btn);
  color: var(--zk-btn-ink);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--zk-cyan) 32%, transparent);
}
.btn.sm { min-height: 40px; padding: 0 16px; }
.btn-outline,
:is(.hero, .cta, .dark, .page-head) .btn-outline {
  background: var(--zk-chip-bg);
  color: var(--zk-text);
  border: 1px solid var(--zk-line-strong);
  box-shadow: none;
}
.btn-outline::after { display: none; }
.btn-outline:hover,
:is(.hero, .cta, .dark, .page-head) .btn-outline:hover {
  background: var(--zk-glass-soft);
  color: var(--zk-text);
  border-color: var(--zk-focus);
  box-shadow: 0 0 26px var(--zk-glow-cyan);
}

/* ============================== 9. Preise ============================== */

.value--accent { background: var(--zk-glass-soft); border-color: color-mix(in srgb, var(--zk-cyan) 35%, transparent); }
.plan, .price {
  position: relative;
  isolation: isolate;
  background: var(--zs-card-solid);
  border: 1px solid var(--zk-line);
  border-radius: 20px;
  box-shadow: var(--zs-glow);
  container-type: inline-size;
}
.plan__name { font-family: var(--zk-title); font-size: 26px; color: var(--zk-text); letter-spacing: .02em; }
.plan__tag, .plan__price span, .price .amount small { color: var(--zk-muted); }
.plan__year { color: var(--zk-cyan-text); font-family: var(--zk-mono); font-size: 12.5px; letter-spacing: .03em; }
.plan__who { color: var(--zk-lead); }
.plan__price, .price .amount {
  font-family: var(--zk-title);
  font-size: 52px;
  color: var(--zk-text);
}
.plan--featured { border: 1px solid transparent; }
.plan--featured .plan__price {
  color: var(--zk-text);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
.plan--featured .plan__price span { -webkit-text-fill-color: var(--zk-muted); }
/* Leuchtender Rand des empfohlenen Pakets (@property --zk-angle, dreht nur mit Bewegung) */
.plan--featured::before, .plan:hover::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--zk-angle), var(--zk-violet), var(--zk-cyan) 25%, var(--zk-mint) 40%, transparent 55%, transparent 80%, var(--zk-violet));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.plan__badge { background: var(--zk-grad-btn); color: var(--zk-btn-ink); font-family: var(--zk-mono); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.plan-note--accent { background: var(--zk-glass-soft); border-color: color-mix(in srgb, var(--zk-cyan) 35%, transparent); }
.plan-note strong, .plan-note--accent strong { color: var(--zk-text); }
.plan-note span { color: var(--zk-lead); }
.price li { color: var(--zk-lead); }
.price li svg { stroke: var(--zk-mint-text); }
@container (max-width: 300px) { .plan__price { font-size: 44px; } }

/* ============================== 10. Fragen (FAQ) ============================== */

.faq details { padding: 2px 20px; margin-bottom: 12px; transition: border-color .2s; }
.faq details[open] { border-color: color-mix(in srgb, var(--zk-cyan) 40%, transparent); }
.faq summary { color: var(--zk-text); }
.faq summary::after { color: var(--zk-cyan-text); }
.faq p { color: var(--zk-lead); }

/* ============================== 11. Schlussband (CTA) ============================== */

.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--zk-text);
  background:
    radial-gradient(ellipse 50% 90% at 50% 120%, color-mix(in srgb, var(--zk-cyan) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 60% at 90% 0%, var(--zk-nebula-a), transparent 70%),
    var(--zk-sky-base);
  border-top: 1px solid var(--zk-line);
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1px 1px at 20% 30%, var(--zk-star-css), transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 60%, var(--zk-star-css-2), transparent 60%);
  background-size: 300px 220px, 360px 260px;
}
.cta h2 {
  color: var(--zk-text);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  max-width: 820px;
}
.cta p, .cta .contact-person { color: var(--zk-lead); }
.cta .cta-sub { color: var(--zk-muted); }
.cta .contact-person strong { color: var(--zk-text); }
.cta .contact-person a { color: var(--zk-cyan-text); }
.contact-person { color: var(--zk-muted); }

/* ============================== 12. Fusszeile (immer nachtblau) ============================== */

.site-footer {
  color-scheme: dark;
  position: relative;
  background: #05080f linear-gradient(180deg, #070a13, #04070e);
  color: #a6b2ca;              /* 9.6:1 auf #04070e */
  border-top: 0;
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a492ff 22%, #69e1f5 55%, #9af5d4 78%, transparent);
  opacity: .7;
}
.site-footer a { color: #d6e2f5; }
.site-footer a:hover { color: #9af5d4; }
.footer-h { color: #eef3ff; font-family: var(--zk-mono); font-weight: 600; letter-spacing: .14em; }
.footer-brand .brand-suffix { color: #69e1f5; }
.footer-brand .brand-claim, .footer-program, .footer-person span { color: #a6b2ca; }
.footer-hours, .footer-bottom, .footer-badge, .footer-col li a small { color: #8e9bb6; } /* 6.6:1 */
.site-footer :focus-visible { outline-color: #69e1f5; box-shadow: 0 0 0 6px rgba(105, 225, 245, .18); }
.footer-grid, .footer-bottom { border-color: rgba(255, 255, 255, .09); }

/* ============================== 13. Rechtliches ============================== */

.legal-tabs a { color: var(--zk-lead); border-color: var(--zk-line-strong); border-radius: 999px; background: var(--zk-chip-bg); }
.legal-tabs a:hover { color: var(--zk-text); border-color: var(--zk-focus); background: var(--zk-glass-soft); }
.legal-tabs a.active,
.page-head .legal-tabs a.active { background: var(--zk-grad-btn); color: var(--zk-btn-ink); border-color: transparent; }
.page-head .legal-tabs a { color: var(--zk-lead); border-color: var(--zk-line-strong); }
.page-head .legal-tabs a:hover { color: var(--zk-text); background: var(--zk-glass-soft); }
.legal .legal-box, .page-head .legal-box { max-width: 820px; margin-left: 0; }
.legal h1, .legal h2, .legal h3 { color: var(--zk-text); }
.legal p, .legal li { color: var(--zk-lead); }
.legal .legal-meta { color: var(--zk-muted); }
.legal .legal-note { color: var(--zk-lead); }
.legal .legal-ph { background: var(--zs-ph-bg); color: var(--zk-text); border-bottom-color: var(--zs-ph-line); }
.legal .legal-h2--part { border-top-color: var(--zk-line); }

/* ============================== 14. Formulare (Kontakt, Bestellung) ============================== */

/* Formular mit Seitenspalte im gleichen Raster (statt 760-px-Insel) */
.zs-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px 48px;
  align-items: start;
}
.zs-split > * { grid-column: 1; min-width: 0; }
.zs-split > .zs-split__aside { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: calc(var(--zs-head-h) + 24px); }
.zs-split__main { max-width: 760px; }
@media (max-width: 900px) {
  .zs-split { display: block; }
  .zs-split > .zs-split__aside { position: static; margin-bottom: 26px; }
}
.zs-split__aside.hint { padding: 18px 20px; margin: 0; font-size: 15px; background: var(--zs-card); border: 1px solid var(--zk-line); border-radius: var(--zs-radius); color: var(--zk-lead); }

.contact-box { container-type: inline-size; }
.contact-box__row { color: var(--zk-lead); }
.contact-box__row .ico { stroke: var(--zk-cyan-text); }
.contact-box__row strong { color: var(--zk-text); }
.contact-box__row span { color: var(--zk-muted); }
.check { color: var(--zk-lead); }
.check input, .radio-line input, .order-plan input { accent-color: var(--zs-check); }

.order-form h3, .form-h { color: var(--zk-text); font-family: var(--zk-title); font-size: 24px; }
.order-form .field > label:not(.radio-line), .order-form legend { color: var(--zk-text); }
.order-form input:not([type=radio]):not([type=checkbox]),
.order-form select, .order-form textarea {
  min-height: 48px;
  border: 1px solid var(--zk-field-border);
  border-radius: var(--zs-radius-sm);
  background: var(--zk-field);
  color: var(--zk-text);
  font-size: 16px;
}
.order-form input:not([type=radio]):not([type=checkbox]):hover,
.order-form select:hover, .order-form textarea:hover { border-color: var(--zk-field-hover); }
.order-form input:not([type=radio]):not([type=checkbox]):focus,
.order-form select:focus, .order-form textarea:focus {
  border-color: var(--zk-focus);
  box-shadow: 0 0 0 4px var(--zk-focus-ring);
}
.order-form input::placeholder, .order-form textarea::placeholder { color: var(--zk-faint); }
.order-form .hint { color: var(--zk-muted); }
.radio-line { color: var(--zk-lead); }
.order-form [aria-invalid="true"] { border-color: var(--zs-invalid); }
.flash-err { background: var(--zs-err-bg); border-color: var(--zs-err-line); color: var(--zs-err-text); border-radius: var(--zs-radius-sm); }

.order-plan {
  background: var(--zs-card-solid);
  border: 1px solid var(--zk-line-strong);
  border-radius: var(--zs-radius);
  transition: border-color .15s, box-shadow .15s;
}
.order-plan:hover { border-color: var(--zk-field-hover); }
.order-plan:has(input:checked) {
  border-color: var(--zk-focus);
  box-shadow: 0 0 0 1px var(--zk-focus), 0 12px 34px var(--zk-glow-cyan);
}
.order-plan:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--zk-focus), 0 0 0 6px var(--zk-focus-ring); }
.order-plan__name { color: var(--zk-text); font-family: var(--zk-title); font-size: 20px; }
.order-plan__price { color: var(--zk-text); font-family: var(--zk-title); font-size: 28px; }
.order-plan__price span, .order-plan__sum { color: var(--zk-muted); }
.order-plan__hours { color: var(--zk-lead); }
.order-plan__total { color: var(--zk-cyan-text); }
.order-sum { background: var(--zk-glass-soft); border-color: var(--zk-line-strong); border-radius: var(--zs-radius-sm); }
.order-sum b { color: var(--zk-text); font-family: var(--zk-mono); }
.order-sum span { color: var(--zk-lead); }
.tag-out { background: var(--zs-out-bg); color: var(--zs-out-text); }
.tag-few { background: var(--zs-few-bg); color: var(--zs-few-text); }

/* ============================== 15. Abschluss-Seiten (Bestätigung, Link erneut senden) ============================== */

.zs-panel {
  max-width: 760px;
  padding: 30px 32px;
  border-radius: 20px;
  background: var(--zs-card-solid);
  border: 1px solid var(--zk-line);
  box-shadow: var(--zs-glow);
}
.zs-panel > :first-child { margin-top: 0; }
.zs-panel p { color: var(--zk-lead); margin: 0 0 12px; }
.zs-panel .sub { font-size: 18px; color: var(--zk-text); }
.zs-panel .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-width: 480px; }
.zs-panel label { font-weight: 600; color: var(--zk-text); font-size: 15px; }
.zs-panel input {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--zk-field-border);
  border-radius: var(--zs-radius-sm);
  background: var(--zk-field);
  color: var(--zk-text);
  font: 400 16px/1.4 var(--zk-font);
}
.zs-panel input:focus { outline: 2px solid var(--zk-focus); outline-offset: 0; border-color: var(--zk-focus); box-shadow: 0 0 0 5px var(--zk-focus-ring); }
.zs-panel a:not(.btn) { color: var(--zk-cyan-text); text-decoration: underline; text-underline-offset: 3px; }
.zs-panel .actions { margin-top: 20px; }
.zs-panel .hint { margin-top: 12px; }
@media (max-width: 600px) { .zs-panel { padding: 22px 18px; } }

/* Testmodus-Hinweis (Admin agiert als Firma): bleibt auffällig orange, wie im Tool */
.zs-imp { padding-top: 14px; }
.zs-imp .impersonation-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
  padding: 10px 16px; border-radius: 12px; background: #b45309; color: #fff; font-size: 15px;
  box-shadow: 0 4px 16px rgba(180, 83, 9, .35);
}
.zs-imp .impersonation-bar form { margin: 0; }
.zs-imp .impersonation-bar button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 8px; background: #fff; color: #7c2d05; font-weight: 700; cursor: pointer; }

/* ============================== 16. Neuste Techniken, progressiv ============================== */

/* Menü auf dem Handy: weicher Auftritt beim Öffnen (display wird diskret animiert) */
@supports (transition-behavior: allow-discrete) {
  .mobile-panel {
    transition: opacity .22s, transform .22s, display .22s allow-discrete, overlay .22s allow-discrete;
  }
  .mobile-panel.open {
    opacity: 1;
    transform: none;
    @starting-style { opacity: 0; transform: translateY(-10px); }
  }
}

/* FAQ: Aufklappen gleitet (interpolate-size + ::details-content) */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

} /* Ende @media screen */

/* ============================== 17. Bewegung (nur wenn erlaubt) ============================== */

@media screen and (prefers-reduced-motion: no-preference) {
  :root:not(.zk-pausiert) .zs-start-rakete .zl-rocket-float { animation: zs-schweben 5.5s ease-in-out infinite; }
  :root:not(.zk-pausiert) .zs-start-rakete .zl-flame { animation: zs-flamme 1.1s ease-in-out infinite alternate; }
  :root:not(.zk-pausiert) .zs-start-orbit { animation: zs-orbit 60s linear infinite; }
  :root:not(.zk-pausiert) .zs-start-orbit--2 { animation-duration: 90s; animation-direction: reverse; }
  :root:not(.zk-pausiert) .hero .kicker::before { animation: zs-puls 2.6s ease-in-out infinite; }
  :root:not(.zk-pausiert) .plan--featured::before { animation: zs-drehen 7s linear infinite; }
  :root:not(.zk-pausiert) .plan:hover::before { animation: zs-drehen 3.5s linear infinite; }
  :root:not(.zk-pausiert) .btn:hover::after { opacity: 1; animation: zs-glanz .9s ease-out; }
  :root:not(.zk-pausiert) .btn:hover { transform: translateY(-1px); }
  :root:not(.zk-pausiert) a.card:hover { transform: translateY(-3px); }

  /* Seitenwechsel: die alte Seite hebt ab, die neue setzt auf */
  ::view-transition-old(root) { animation: zs-abheben .34s cubic-bezier(.5, 0, .9, .5) both; }
  ::view-transition-new(root) { animation: zs-aufsetzen .42s cubic-bezier(.2, .7, .2, 1) .06s both; }
  ::view-transition-group(zs-kopf), ::view-transition-group(zs-marke) { animation-duration: .3s; }
  ::view-transition-group(zs-titel) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  :root.zk-pausiert::view-transition-group(*),
  :root.zk-pausiert::view-transition-old(*),
  :root.zk-pausiert::view-transition-new(*) { animation: none !important; }

  /* Scroll-getrieben, ganz ohne JavaScript */
  @supports (animation-timeline: view()) {
    :root:not(.zk-pausiert) .hero:has(.zs-start) .zs-start {
      animation: zs-steigen 1ms linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }
    :root:not(.zk-pausiert) .zs-flugbahn::before {
      animation: zs-fuellen 1ms linear both;
      animation-timeline: scroll(root);
    }
    :root:not(.zk-pausiert) .zs-flugbahn-punkt {
      animation: zs-bahn 1ms linear both;
      animation-timeline: scroll(root);
    }
    /* Stufen zünden: Abschnittsköpfe, Karten und Pakete erscheinen beim Einflug */
    :root:not(.zk-pausiert) main .section :is(.section-head, .card, .plan, .value, .feature, .step, .book, .faq details, .plan-note) {
      animation: zs-zuenden 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    :root:not(.zk-pausiert) main .eyebrow::before {
      animation: zs-linie 1ms linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    :root:not(.zk-pausiert) .steps::after {
      animation: zs-fuellen 1ms linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }
  }
}

/* Ohne Bewegung: Linien voll, Flugbahn zeigt nichts Bewegtes */
@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zs-flugbahn { display: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a.card:hover, .btn:hover, .btn-outline:hover { transform: none !important; }
}
:root.zk-pausiert .zs-flugbahn { display: none !important; }
:root.zk-pausiert a.card:hover { transform: none; }

/* Windows-Kontrastmodus */
@media (forced-colors: active) {
  .hero h1, .page-head h1, .cta h2, .facts .f b, .stat b, .plan--featured .plan__price {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
  .btn { border: 1px solid ButtonText; }
  .card, .plan, .faq details { border: 1px solid CanvasText; }
}