/* ==================================================================
   Kevin Doczi · KI-Automatisierung
   Bildwelt: Schwerelosigkeit. Ein tiefschwarzer Raum, in dem alle Flächen
   schweben – weiche Rundung, Schlagschatten mit Versatz, helle Oberkante,
   Licht statt Linie. Keine Fremd-CDNs, keine Cookies, kein Tracking.
   Schriften lokal: Anybody + Martian Mono + Source Sans 3 (SIL OFL).
   ================================================================== */

@font-face {
  font-family: 'Anybody';
  src: url('fonts/anybody-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anybody';
  src: url('fonts/anybody-latin-ext-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('fonts/martian-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Petrona';
  src: url('fonts/petrona-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- Chassis: das, was sich nie ändert ---------------- */

:root {
  /* Der Grund ist tiefer und eine Spur blauer als zuvor: kein Gehäuse mehr,
     sondern Raum, in dem Flächen schweben. */
  --ground: #07080c;
  --panel: #0d1016;
  --panel-2: #141821;
  --ink: #eef2f6;
  --dim: #97a5b4;
  --line: rgba(238, 242, 246, .10);
  --line-hard: rgba(238, 242, 246, .19);
  --amber: #ffb000;
  --live: #4ade80;

  /* Schwerelosigkeit: Rundung, Auflagerung, Licht.
     Kanten trennen nicht mehr – Höhe trennt. Jede Fläche hat einen
     weichen Schlagschatten mit Versatz und eine helle Oberkante, als
     stünde sie einen Zentimeter über dem Grund. */
  --r-xs: 10px;
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 30px;
  --r-pill: 999px;
  --lift-1: 0 16px 38px -26px rgba(0, 0, 0, .95);
  --lift-2: 0 40px 90px -46px rgba(0, 0, 0, 1);
  --kante: inset 0 1px 0 rgba(238, 242, 246, .07);
  /* Wichtig: Schatten sind schwarz, nie farbig. Farbiges Leuchten an den
     Objekten selbst ist die abgegriffene Dunkelmodus-Masche und sieht aus
     wie eine Leuchtreklame. Das Licht in dieser Bildwelt kommt aus dem
     Raum – aus den weichen Kuppeln hinter den Abschnitten –, und die
     Flächen werfen darunter einen ganz normalen schwarzen Schatten. */
  --schein: 0 14px 34px -20px rgba(0, 0, 0, .9);

  /* Vom Skript pro Kanal gesetzt, damit die Leiste die Branche mitfährt */
  --rail: #ffb000;
  --rail-ink: #0b0f12;

  --display: 'Anybody', 'Arial Narrow', Arial, sans-serif;
  --text: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --data: 'Martian Mono', ui-monospace, 'Courier New', monospace;

  --wrap: 1220px;
  --rail-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  /* clip statt hidden: hidden würde die klebende Leiste und die klebende
     Schalterreihe außer Kraft setzen, clip nicht. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Browser-Oberflächen mitgestalten */
::selection { background: var(--amber); color: #0b0f12; }
:root { accent-color: var(--amber); caret-color: var(--amber); }
* { scrollbar-color: var(--line-hard) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: #262c38; border: 3px solid var(--ground); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #3a4354; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

/* Die Displayschrift bleibt Anybody, wechselt aber das Register:
   nicht mehr schmal und plakatfett, sondern normal breit, mittelschwer
   und dafür deutlich größer. Ruhe entsteht durch Größe, nicht durch Fett. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 620;
  font-stretch: 100%;
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.15rem + 5.2vw, 5rem); line-height: 1; }
h2 { font-size: clamp(1.95rem, 1.15rem + 3.2vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 1.08rem + .6vw, 1.6rem); line-height: 1.18; letter-spacing: -0.022em; }
h4 { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; }

p { margin: 0 0 1.05em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.lead {
  font-size: clamp(1.075rem, 1rem + .35vw, 1.28rem);
  line-height: 1.55;
  max-width: 54ch;
}

/* Messwert-/Kanalschrift: nur für Kennungen und Zahlen */
.tag {
  font-family: var(--data);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--amber); color: #07080c; padding: 14px 20px; font-weight: 700;
  border-radius: var(--r-pill);
  transform: translateY(-150%);
}
.skip:focus { transform: none; }

/* ---------------- Leiste ---------------- */

/* Die Leiste liegt nicht auf der Seite, sie schwebt darüber:
   eine abgesetzte Kapsel mit Milchglas, Rundung und eigenem Schatten. */
.rail {
  position: sticky; top: 12px; z-index: 60;
  height: var(--rail-h);
  margin-top: 12px;
  padding: 0 12px;
}
.rail-in {
  height: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 0 12px 0 14px;
  background: rgba(13, 16, 22, .82);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--lift-1), var(--kante);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.mark {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink); flex: none;
}
.mark-badge {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--rail); color: var(--rail-ink);
  border-radius: var(--r-xs);
  font-family: var(--display); font-weight: 700; font-size: .75rem; letter-spacing: .01em;
  transition: background-color .5s ease, color .5s ease;
}
.mark-name { font-family: var(--display); font-weight: 700; font-stretch: 106%; font-size: .9375rem; line-height: 1.2; letter-spacing: -.01em; }
/* Der Name der Marke oben, der Mensch dahinter darunter – klein, aber immer da. */
.mark-sub { display: block; font-family: var(--text); font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--dim); }

/* Kanalanzeige: zeigt, welche Branche gerade läuft */
.readout {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding-left: 20px; border-left: 1px solid var(--line);
  color: var(--dim);
}
.readout-name {
  font-family: var(--text); font-size: .9375rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--rail);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .5s ease;
}
.dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px rgba(74, 222, 128, .16);
}
.rail-tel {
  flex: none; margin-left: auto;
  font-family: var(--text); font-size: .9375rem; font-weight: 600; letter-spacing: -.005em;
  color: #07080c; background: var(--amber);
  padding: 11px 20px; text-decoration: none;
  border-radius: var(--r-pill);
  box-shadow: var(--schein);
  display: inline-flex; align-items: center; min-height: 44px;
  transition: background-color .18s ease;
}
.rail-tel:hover { background: #ffc340; }

/* ---------------- Hero: das System als Mimikbild ---------------- */

.hero { padding: 58px 0 0; position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: 34px 56px;
  align-items: start;
}
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 22px; color: var(--dim); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Kanalwähler: springt direkt ins eigene Gewerk */
.picker {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--lift-1), var(--kante);
  padding: 8px 22px 14px;
}
.picker-title { color: var(--dim); padding: 16px 0 6px; }
.picker a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 13px 0 14px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .18s ease;
}
@media (hover: hover) {
  .picker a:hover { border-top-color: var(--amber); }
  .picker a:hover .picker-name { color: var(--amber); }
}
.picker a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 176, 0, .3); }
.picker a:active { border-top-color: var(--amber); }
.picker a:first-of-type { border-top-color: var(--line); }
.picker a:active .picker-name { color: var(--amber); }
.picker a .tag { color: var(--amber); grid-row: span 2; padding-top: 3px; }
.picker-name { font-family: var(--display); font-weight: 620; font-stretch: 100%; font-size: 1.0625rem; color: var(--ink); }
.picker-note { font-size: .875rem; color: var(--dim); }

/* Fließbild */
.mimic { margin-top: 62px; }
.mimic-inner {
  background: var(--panel);
  border-radius: var(--r-l);
  box-shadow: var(--lift-2), var(--kante);
  padding: 4px 26px 26px;
  overflow: hidden;
}
.mimic-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 0 14px; border-bottom: 1px solid var(--line);
  color: var(--dim);
}
.mimic-title {
  font-size: 1.125rem; font-stretch: 104%; font-weight: 700;
  letter-spacing: -.012em; line-height: 1.3; color: var(--ink);
}
.mimic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-hard);
}
.node {
  padding: 26px 24px 30px;
  border-right: 1px solid var(--line);
  position: relative;
  min-height: 236px;
  display: flex; flex-direction: column;
}
.node:last-child { border-right: none; }
.node h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.node h3 .dot { flex: none; }
.mk-inline { width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; color: var(--amber); }
.node p { font-size: .9375rem; color: var(--dim); margin: 0; }
.node-sample {
  margin-top: auto; padding-top: 18px;
  font-family: var(--data); font-size: .8125rem; line-height: 1.7;
  color: var(--ink); font-weight: 400;
}
.node-sample b { color: var(--amber); font-weight: 500; }

/* Signalfluss zwischen den Knoten */
.flow { position: relative; height: 3px; background: var(--line); overflow: hidden; }
.flow::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26%;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: translateX(-110%);
}
.flow.in::after { animation: run 2.6s cubic-bezier(.4, 0, .2, 1) 3; }
@keyframes run { from { transform: translateX(-110%); } to { transform: translateX(420%); } }

/* ---------------- Bühne: ein Chat, Branche umschaltbar ---------------- */

.assist { padding: 112px 0 120px; position: relative; }
.assist-head { max-width: 62ch; }
.assist-head h2 { max-width: 18ch; }
.assist-head p { margin-top: 18px; color: var(--dim); }

.switch {
  margin: 44px 0 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px; padding: 6px;
  background: rgba(238, 242, 246, .035);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--lift-1), var(--kante);
}
.sw {
  font: inherit; font-family: var(--text); font-size: .9375rem; font-weight: 600;
  letter-spacing: -.005em;
  background: transparent; color: var(--dim);
  border: none; cursor: pointer; padding: 18px 12px 16px; min-height: 48px;
  border-radius: var(--r-s);
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  transition: background-color .18s ease, color .18s ease, box-shadow .25s ease;
  /* Touch: kein Zoom-Verzug, sichtbare Rückmeldung, kein Textmarkieren beim Tippen */
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 176, 0, .3);
  -webkit-user-select: none; user-select: none;
  -webkit-appearance: none; appearance: none;
}
/* Ein Tipp darf niemals auf dem Symbol oder der Beschriftung landen,
   sondern immer auf der Schaltfläche selbst. */
.sw > * { pointer-events: none; }
.sw .mk { width: 26px; height: 26px; }
@media (hover: hover) {
  .sw:hover { background: rgba(238, 242, 246, .07); color: var(--ink); }
}
.sw:active { background: rgba(238, 242, 246, .1); color: var(--ink); }

/* Der Umschalter braucht kein JavaScript.
   Fünf verdeckte Optionsfelder liegen vor der Reihe; jede Beschriftung
   gehört per for= zu einem davon. Ein Tipp auf die Beschriftung schaltet
   das Feld – das erledigt der Browser selbst, ohne Ereignis, ohne Skript.
   Welche Tafel sichtbar ist, entscheidet allein :checked (siehe den
   erzeugten Block am Dateiende). */
.switcher { border: none; margin: 0; padding: 0; min-width: 0; }
.branch-radio { position: absolute; }

.stage { display: block; }
.panel[data-trade] { display: none; }

/* Die Tafel trägt die Kanalfarben: dieselben Variablen wie zuvor die Zonen */
.panel {
  --z-bg: var(--panel);
  --z-ink: var(--ink);
  --z-dim: var(--dim);
  --z-accent: var(--amber);
  --z-accent-ink: #0b0f12;
  --z-line: var(--line);
  --z-radius: 22px;
  --z-display: var(--display);
  --z-text: var(--text);
  --z-stretch: 108%;
  --z-weight: 800;
  --z-track: -.028em;
  --z-size: 1rem;
  --z-leading: 1.6;

  background: var(--z-bg);
  color: var(--z-ink);
  border: none;
  border-radius: var(--r-l);
  margin-top: 14px;
  padding: 46px 44px 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 46px; align-items: start;
  box-shadow: var(--lift-2), var(--kante);
}
.panel h3 {
  color: var(--z-ink); font-family: var(--z-display);
  font-stretch: var(--z-stretch); font-weight: var(--z-weight);
  letter-spacing: var(--z-track);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); line-height: 1.1;
  max-width: 18ch;
}
.panel p, .panel .bubble, .panel .ask { font-family: var(--z-text); }
.stage-claim { margin-top: 16px; color: var(--z-dim); font-size: var(--z-size); line-height: var(--z-leading); max-width: 46ch; }

.stage-rules { list-style: none; margin: 28px 0 30px; padding: 0; display: grid; gap: 18px; }
.stage-rules li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 20px; }
.stage-rules .tag { color: var(--z-accent); padding-top: 3px; }
.stage-rules p { color: var(--z-dim); font-size: .9375rem; line-height: 1.55; max-width: 44ch; }

/* Fünf Welten, ein Raum. Alle bleiben dunkel und schweben in derselben
   Form; unterschieden werden sie durch Grundton, Licht, Schriftbreite und
   Rundung – nicht mehr durch einen Sprung von Schwarz nach Papierweiß. */
.z-kfz {
  --z-bg: #1c1310; --z-ink: #f8f4f2; --z-dim: #bcaaa2; --z-accent: #ff6a44; --z-accent-ink: #1c1310;
  --z-line: rgba(255,106,68,.16); --z-stretch: 92%; --z-weight: 680; --z-track: -.034em;
  --z-size: .9375rem; --z-leading: 1.55; --z-radius: 18px;
}
.z-physio {
  --z-bg: #08191a; --z-ink: #e6f2ef; --z-dim: #93b4ad; --z-accent: #3ddbb4; --z-accent-ink: #06181a;
  --z-line: rgba(61,219,180,.16); --z-radius: 26px; --z-weight: 500; --z-track: -.008em;
  --z-display: 'Petrona', Georgia, serif; --z-stretch: 100%;
  --z-size: 1.0625rem; --z-leading: 1.72;
}
.z-fahr {
  --z-bg: #0b0e26; --z-ink: #eceeff; --z-dim: #9ba4d6; --z-accent: #6b7dff; --z-accent-ink: #080a1c;
  --z-line: rgba(107,125,255,.18); --z-stretch: 112%; --z-weight: 660; --z-track: -.036em;
}
.z-shk {
  --z-bg: #0d1720; --z-ink: #e8f1f7; --z-dim: #9ab0be; --z-accent: #f0a75f; --z-accent-ink: #0d1720;
  --z-line: rgba(240,167,95,.16); --z-stretch: 96%; --z-weight: 620; --z-track: -.026em; --z-radius: 20px;
}
.z-mehr {
  --z-bg: #101420; --z-ink: var(--ink); --z-dim: var(--dim); --z-accent: var(--amber); --z-accent-ink: #07080c;
  --z-line: rgba(255,176,0,.16); --z-stretch: 100%; --z-weight: 620; --z-track: -.03em;
}

/* ---------------- Vorführ-Chat je Branche ---------------- */

.demo {
  background: color-mix(in srgb, var(--z-ink) 6%, var(--z-bg));
  border: none;
  border-radius: var(--z-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 428px;
}
.demo-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  background: var(--z-accent); color: var(--z-accent-ink);
}
.demo-head .who { font-family: var(--display); font-weight: 640; font-stretch: 100%; font-size: 1rem; line-height: 1.32; flex: 1; min-width: 0; }
.demo-head .who span { display: block; font-family: var(--data); font-size: .75rem; font-weight: 500; opacity: .9; letter-spacing: .04em; margin-top: 3px; }
.demo-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--z-accent-ink) 22%, transparent);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: .8125rem;
}
.demo-note {
  padding: 9px 16px; font-family: var(--data); font-size: .75rem; letter-spacing: .03em;
  color: var(--z-dim); border-bottom: 1px solid var(--z-line);
}
.demo-log {
  flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 11px;
  overflow-y: auto; max-height: 330px;
}
.bubble {
  max-width: 88%; padding: 11px 14px; font-size: .9375rem; line-height: 1.5;
  border-radius: var(--z-radius);
}
.bubble.them {
  align-self: flex-start;
  background: color-mix(in srgb, var(--z-ink) 9%, var(--z-bg));
  color: var(--z-ink);
  border-bottom-left-radius: 2px;
}
.bubble.you {
  align-self: flex-end;
  background: var(--z-accent); color: var(--z-accent-ink);
  border-bottom-right-radius: 2px;
}
/* Ein fertig gesetztes Frage-Antwort-Paar. Unsichtbar, bis das zugehörige
   Kontrollkästchen angehakt ist (die Regeln dafür stehen im erzeugten
   Block am Dateiende). Als eigene Spalte, damit die Blasen ihre Seite
   behalten: Frage rechts, Antwort links. */
.paar { display: none; flex-direction: column; gap: 11px; }
.paar > .bubble { animation: blaseAuf .3s cubic-bezier(.16, 1, .3, 1) both; }
.paar > .bubble.them { animation-delay: .2s; }
@keyframes blaseAuf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .paar > .bubble { animation: none; } }

.demo-asks { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px 14px; border-top: 1px solid var(--z-line); }
.ask {
  display: inline-flex; align-items: center;
  font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--z-accent); background: transparent;
  border: 1px solid var(--z-accent); border-radius: var(--z-radius);
  padding: 12px 16px; min-height: 44px; cursor: pointer; text-align: left;
  border-radius: var(--r-pill);
  transition: background-color .14s ease, color .14s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 176, 0, .3);
  -webkit-appearance: none; appearance: none;
}
@media (hover: hover) {
  .ask:hover { background: var(--z-accent); color: var(--z-accent-ink); }
}
.ask:active { background: var(--z-accent); color: var(--z-accent-ink); }
/* Eigene Frage tippen. Sitzt unter den vorbereiteten Fragen, weil die
   Knöpfe der Einstieg sind und das Feld die Einladung, weiterzugehen.
   16px Schriftgröße ist keine Geschmacksfrage: Darunter zoomt iOS beim
   Hineintippen die ganze Seite heran, und der Umschalter rutscht weg. */
.demo-say {
  display: flex; gap: 8px; align-items: center;
  padding: 0 16px 14px;
}
.demo-say[hidden] { display: none; }
.say-field {
  flex: 1; min-width: 0;
  font-family: var(--z-text); font-size: 16px; line-height: 1.4;
  color: var(--z-ink);
  background: color-mix(in srgb, var(--z-ink) 8%, var(--z-bg));
  /* 42 %, nicht 30: Erst dann steht der Rand der Eingabe in allen fünf
     Welten über 3:1 zum Untergrund – die Grenze, ab der ein Bedienelement
     als solches erkennbar ist (WCAG 1.4.11). Bei 30 % waren es 2,6:1. */
  border: 1px solid color-mix(in srgb, var(--z-ink) 42%, transparent);
  border-radius: var(--r-pill);
  padding: 10px 16px; min-height: 44px;
  -webkit-appearance: none; appearance: none;
}
.say-field::placeholder { color: var(--z-dim); opacity: 1; }
.say-field:focus-visible {
  outline: 2px solid var(--z-accent); outline-offset: 2px;
  border-color: transparent;
}
.say-send {
  flex: none; font-family: var(--z-text); font-size: .875rem; font-weight: 600;
  background: var(--z-accent); color: var(--z-accent-ink);
  border: none; border-radius: var(--r-pill);
  padding: 12px 18px; min-height: 44px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 176, 0, .3);
  -webkit-appearance: none; appearance: none;
  transition: filter .14s ease;
}
@media (hover: hover) { .say-send:hover { filter: brightness(1.08); } }
.say-send:active { filter: brightness(1.12); }
.say-send[aria-disabled="true"] { opacity: .5; cursor: default; }

.typing {
  align-self: flex-start; width: 92px; height: 4px; margin: 12px 0 10px;
  background: color-mix(in srgb, var(--z-ink) 14%, var(--z-bg));
  overflow: hidden; position: relative;
}
.typing::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 42%;
  background: var(--z-accent); animation: sweep .85s cubic-bezier(.5,0,.5,1) 3;
}
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(280%); } }

/* ---------------- Buttons ---------------- */

/* Knöpfe sind Pillen und sprechen in der Textschrift.
   Die Versalien-Monoschrift war Kostüm; sie trägt hier nichts mehr. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--text); font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
  padding: 15px 26px; border: 1px solid transparent; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer; min-height: 50px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .25s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-amber { background: var(--amber); color: #07080c; box-shadow: var(--schein); }
.btn-amber:hover { background: #ffc340; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .95); }
.btn-line { background: rgba(238, 242, 246, .04); color: var(--ink); border-color: var(--line-hard); box-shadow: var(--kante); }
.btn-line:hover { border-color: rgba(238, 242, 246, .34); background: rgba(238, 242, 246, .09); }
.btn-zone {
  background: var(--z-accent); color: var(--z-accent-ink);
  box-shadow: var(--schein);
}
.btn-zone:hover { filter: brightness(1.12); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .95); }
.btn-wide { width: 100%; }

/* ---------------- Konstanten-Abschnitt ---------------- */

.constant { padding: 104px 0 110px; }
.constant-head { max-width: 62ch; }
.constant-head p { margin-top: 18px; color: var(--dim); }
.matrix {
  margin-top: 46px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 46px;
}
.matrix > div {
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
}
.matrix h3 { margin-bottom: 9px; }
.matrix p { font-size: .9375rem; color: var(--dim); max-width: 44ch; }

/* ---------------- Preise ---------------- */

.prices { padding: 110px 0 120px; position: relative; }
.prices-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 40px; align-items: end; }
.prices-head p { color: var(--dim); font-size: 1rem; margin: 0; }
.plans {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.plan {
  background: var(--panel);
  border: none;
  border-radius: var(--r-l);
  box-shadow: var(--lift-1), var(--kante);
  padding: 32px 30px 34px;
  display: flex; flex-direction: column;
}
@supports not (grid-template-rows: subgrid) {
  .plans { grid-template-rows: none; }
  .plan { display: flex; flex-direction: column; }
  .plan h3 { min-height: 2.3em; }
}

.plan-mid {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 176, 0, .14) 0%, transparent 62%),
    var(--panel-2);
  box-shadow: var(--lift-2), var(--kante);
}
.plan h3, .plan h4 { margin-bottom: 8px; }
.plan-for strong { color: var(--amber); font-weight: 600; }
.plan-for { font-size: .875rem; color: var(--dim); margin: 0 0 22px; max-width: 34ch; }
.plan-fee {
  font-family: var(--display); font-weight: 680; font-stretch: 100%;
  font-size: 2.9rem; line-height: 1; letter-spacing: -.04em;
  display: flex; align-items: baseline; gap: 8px;
}
.plan-fee em { font-family: var(--text); font-size: .9375rem; font-weight: 500; font-style: normal;
  letter-spacing: 0; font-stretch: normal; white-space: nowrap; color: var(--dim); }
.plan-setup { font-family: var(--text); font-size: .9375rem; color: var(--dim); margin: 14px 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; font-size: .9375rem; }
.plan li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px; align-items: start; }
.plan li svg { margin-top: 5px; color: var(--amber); }
.plan .btn { margin-top: auto; }
.price-foot { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
.price-foot p { font-size: .9375rem; color: var(--dim); max-width: none; }
.price-foot strong { color: var(--ink); font-weight: 700; }

/* ---------------- Ablauf ---------------- */

.steps-sec { padding: 104px 0 112px; }
.steps { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step {
  padding: 26px 24px 28px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--lift-1), var(--kante);
}
.step h3 { margin: 0 0 10px; font-size: 1.0625rem; min-height: 2.6em; display: flex; gap: 12px; align-items: baseline; }
.step-no { color: var(--amber); font-weight: 700; flex: none; }
.step p { font-size: .9375rem; color: var(--dim); margin: 0; }

/* ---------------- Kontakt ---------------- */

.contact { padding: 110px 0 120px; position: relative; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.contact-lead p { color: var(--dim); margin-top: 18px; }
.direct { margin-top: 30px; display: grid; gap: 10px; }
.direct a, .direct div {
  background: var(--panel); padding: 16px 20px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-s);
  box-shadow: var(--kante);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  transition: background-color .18s ease, border-color .18s ease;
}
.direct .tag { color: var(--dim); width: 84px; flex: none; }
.direct a:hover { background: var(--panel-2); border-color: var(--line-hard); }
.direct b { font-family: var(--text); font-size: 1rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.direct span { font-size: .9375rem; color: var(--dim); }

.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--text); font-size: .9375rem; font-weight: 600; color: var(--dim); margin-bottom: 8px; }
.field .opt { text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; font-family: var(--text); font-size: 1rem; color: var(--ink);
  background: rgba(238, 242, 246, .04); border: 1px solid rgba(238, 242, 246, .42);
  border-radius: var(--r-s);
  padding: 14px 16px; line-height: 1.5;
  transition: border-color .18s ease, background-color .18s ease;
}
.field textarea { resize: vertical; min-height: 124px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--amber);
  background: rgba(238, 242, 246, .06);
  box-shadow: inset 0 0 0 1px var(--amber);
}
.field input::placeholder, .field textarea::placeholder { color: #7b8d96; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.consent-note { font-size: .875rem; color: var(--dim); margin: 4px 0 20px; max-width: 50ch; }
.form-status { margin-top: 16px; font-size: .9375rem; padding: 14px 18px; display: none; border: 1px solid; border-radius: var(--r-s); }
.form-status.ok { display: block; background: rgba(74, 222, 128, .1); border-color: var(--live); color: #b6f2cd; }
.form-status.bad { display: block; background: rgba(255, 91, 60, .1); border-color: #ff5b3c; color: #ffc0b4; }
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------- Fuß ---------------- */

.foot { border-top: 1px solid var(--line); padding: 54px 0 58px; margin-top: 40px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 24px 44px; justify-content: space-between; align-items: flex-start; }
.foot-name { font-family: var(--display); font-weight: 650; font-stretch: 100%; font-size: 1.125rem; }
.foot p, .foot a { font-size: .875rem; color: var(--dim); }
.foot a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 22px; }
.foot-links a { padding: 11px 0; display: inline-block; }
.foot-legal { margin-top: 30px; font-size: .875rem; color: #7b8d96; max-width: 74ch; line-height: 1.6; }

/* ---------------- Rechtsseiten ---------------- */

.legal { padding: 54px 0 84px; }
.legal .wrap { max-width: 760px; }
.legal .back { font-family: var(--data); font-size: .75rem; letter-spacing: .04em; color: var(--dim); text-decoration: none; display: inline-block; margin-bottom: 30px; text-transform: uppercase; }
.legal .back:hover { color: var(--amber); }
.legal h1 { font-size: 2.9rem; margin-bottom: 30px; }
.legal h2 { font-size: 1.65rem; margin: 46px 0 14px; }
.legal h3 { margin: 28px 0 8px; }
.legal p, .legal li { font-size: 1rem; color: #c2d0d6; max-width: 72ch; }
.legal address { font-style: normal; color: #c2d0d6; max-width: 72ch; margin-bottom: 1.05em; }
.legal a { color: var(--amber); }
.legal ul { padding-left: 20px; margin: 0 0 1.05em; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--ink); }

/* ---------------- Bewegung: ein einziger Auftritt ---------------- */

.js .rise { opacity: 0; transform: translateY(20px); }
.js .rise.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { opacity: 1; transform: none; }
  .flow.in::after, .typing::after { animation: none; }
  .flow::after { transform: none; width: 100%; opacity: .45; }
  * { transition-duration: .01ms !important; }
}

/* ---------------- Schmalere Bildschirme ---------------- */

@media (max-width: 1080px) {
  .panel { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 32px 26px 34px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .picker { max-width: 460px; }
  .zone-body { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .zone-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .prices-head { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0; }
  .step:nth-child(2) { margin-right: 0; }
}

@media (max-width: 860px) {
  .mimic-grid { grid-template-columns: minmax(0, 1fr); }
  .node { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
  .node:last-child { border-bottom: none; }

  .plan { padding: 22px 20px 24px; }
  .plan-for { margin-bottom: 16px; }
  .plan ul { margin-bottom: 20px; gap: 8px; }
  .plan { border-right: none; border-bottom: 1px solid var(--line); }
  .plan:last-child { border-bottom: none; }
  .matrix { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .price-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .readout { display: none; }
  .flow { display: none; }
  .demo-log { max-height: none; }
  .z-kfz .zone-body, .z-shk .zone-body { grid-template-columns: minmax(0, 1fr); }
  .zone-body > .setup, .zone-body > .demo, .zone-body > .zone-cta { grid-column: 1; grid-row: auto; }
  .z-fahr .setup { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sw[data-trade="mehr"] { grid-column: span 2; }
  .sw { font-size: .75rem; letter-spacing: .02em; padding: 16px 6px 14px; gap: 9px; }
  .sw .mk { width: 24px; height: 24px; }
  .panel { padding: 26px 18px 30px; }
  .stage-rules li { grid-template-columns: minmax(0, 1fr); }
  .stage-rules .tag { padding-top: 0; }
  .assist { padding: 62px 0 66px; }
  body { font-size: 1rem; }
  .wrap { padding: 0 18px; }
  .mimic-head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .plan-for { min-height: 0; }
  .hero { padding: 34px 0 0; }
  .mimic { margin-top: 34px; }
  .hero .lead { margin-top: 16px; }
  .hero-actions { margin-top: 22px; gap: 10px; }
  .picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .picker-title { grid-column: 1 / -1; }
  .picker a { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 11px 0 12px; }
  .picker a .tag { grid-row: auto; padding-top: 0; }
  .picker-note { font-size: .875rem; }
  .zone { padding: 54px 0 60px; }
  .channels-intro { padding: 66px 0 0; }
  .constant, .prices, .steps-sec, .contact, .reach, .works { padding: 62px 0 66px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { margin-right: 0; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-actions .btn { width: 100%; }
  .setup li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .setup .tag { padding-top: 0; }
  .demo-log { max-height: none; }
  .foot-in { flex-direction: column; }
}

/* ---------------- Nachträge aus dem Finish-Review ---------------- */

.hero-price { margin-top: 18px; font-size: .9375rem; }
.hero-price a { color: var(--amber); text-decoration: none; font-weight: 600; }
.hero-price a:hover { text-decoration: underline; }

/* Handlungsaufruf in jedem Kanal, in dessen eigener Sprache */
.zone-cta { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--z-line); }
.zone-cta-note { margin: 12px 0 0; font-size: .875rem; color: var(--z-dim); max-width: 42ch; }
.z-physio .zone-cta { text-align: center; border-top: none; padding-top: 8px; }
.z-physio .zone-cta-note { margin-inline: auto; }
.z-fahr .zone-cta { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .zone-cta .btn { width: 100%; }
}

/* ---------------- Leistungen und Arbeitsproben ---------------- */

.works { padding: 110px 0 116px; }
.works-head { max-width: 62ch; }
.works-head p { margin-top: 18px; color: var(--dim); }

.fields {
  margin-top: 46px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.field-card {
  background: var(--panel);
  border-radius: var(--r-l);
  background:
    radial-gradient(130% 62% at 50% 0%, rgba(255, 176, 0, .1) 0%, transparent 60%),
    var(--panel);
  box-shadow: var(--lift-1), var(--kante);
  padding: 30px 30px 32px;
}
.field-card h3 { margin: 0 0 12px; }
.field-card p { color: var(--dim); font-size: 1rem; max-width: 44ch; }
.mini { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 9px; font-size: .9375rem; }
.mini li { padding-left: 20px; position: relative; color: var(--ink); }
.mini li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--amber);
}

.proof {
  margin: 56px 0 0; background: var(--panel);
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--lift-2), var(--kante);
}
.proof img { display: block; width: 100%; height: auto; }
.proof figcaption { padding: 16px 18px 18px; font-size: .875rem; color: var(--dim); border-top: 1px solid var(--line); line-height: 1.55; max-width: 78ch; }

/* ---------------- Preise: zweites Feld ---------------- */

.price-kind {
  margin: 54px 0 22px; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  font-size: 1.125rem;
}
.price-kind:first-of-type { margin-top: 40px; }
.price-kind .tag { color: var(--amber); }

.webprices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wp {
  background: var(--panel); padding: 28px 28px 30px;
  border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--lift-1), var(--kante);
}
.wp h4 { margin-bottom: 8px; }
.wp p { font-size: .9375rem; color: var(--dim); max-width: 42ch; }
.wp-fee {
  margin-top: 16px;
  font-family: var(--display); font-weight: 680; font-stretch: 100%;
  font-size: 1.8rem; line-height: 1; letter-spacing: -.035em; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
.wp-fee em { font-family: var(--text); font-size: .9375rem; font-weight: 500; font-style: normal;
  letter-spacing: 0; font-stretch: normal; white-space: nowrap; color: var(--dim); }
.wp-note { margin-top: 22px; font-size: .9375rem; color: var(--dim); max-width: 70ch; }
.wp-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.wp-cta p { font-size: .9375rem; color: var(--dim); margin: 0; max-width: 40ch; }

@media (max-width: 1080px) {
  .panel { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 32px 26px 34px; }
  .reach-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .reach-map { max-width: 460px; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall-more { grid-column: span 4; }
}

@media (max-width: 860px) {
  .fields { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .webprices { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sw[data-trade="mehr"] { grid-column: span 2; }
  .sw { font-size: .75rem; letter-spacing: .02em; padding: 16px 6px 14px; gap: 9px; }
  .sw .mk { width: 24px; height: 24px; }
  .panel { padding: 26px 18px 30px; }
  .stage-rules li { grid-template-columns: minmax(0, 1fr); }
  .stage-rules .tag { padding-top: 0; }
  .assist { padding: 62px 0 66px; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-more { grid-column: span 2; justify-content: center; }
  .wall li { padding: 18px 10px 16px; }
  .reach-copy .btn, .field-card .btn { width: 100%; }
}

/* Feld 01 tritt zurück, Feld 02 bekommt das Gewicht */
/* Feld 01 tritt zurück: dieselbe Tafel, aber ohne das warme Licht. */
.field-back { box-shadow: var(--lift-1), var(--kante); }
.field-price { font-family: var(--data); font-size: .9375rem; color: var(--ink); margin: 18px 0 24px !important; }
.hero-price { display: flex; flex-wrap: wrap; gap: 6px 26px; }

/* ---------------- Handy: der Umschalter muss immer erreichbar sein ----------------
   Zwei Dinge gingen auf dem Telefon schief:
   1. Sprang man über den Wähler im ersten Bildschirm zum Abschnitt, lag dessen
      Kopf unter der klebenden Leiste. -> scroll-margin-top für alle Sprungziele.
   2. Scrollte man weiter, verschwanden die Branchen-Schalter nach oben aus dem
      Bild; ein Tipp am oberen Rand traf die Leiste statt den Schalter.
      -> Die Schalterreihe klebt jetzt selbst unter der Leiste. */

[id] { scroll-margin-top: calc(var(--rail-h) + 30px); }

@media (max-width: 860px) {
  .switch {
    position: sticky; top: calc(var(--rail-h) + 18px); z-index: 40;
    margin-top: 30px;
    /* Deckend, sobald sie klebt: sonst scheint die Tafel darunter durch
       und die zweite Schalterreihe wird unlesbar. */
    background: rgba(11, 14, 20, .92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--lift-2), var(--kante);
  }
  /* Flach halten: die Reihe klebt, sie darf nicht das halbe Bild fressen.
     Symbol und Beschriftung stehen deshalb nebeneinander. */
  .sw {
    flex-direction: row; justify-content: center; align-items: center;
    gap: 8px; padding: 10px 6px; min-height: 46px; text-align: center;
    line-height: 1.25;
  }
  .sw .mk { width: 18px; height: 18px; flex: none; }
  .panel { scroll-margin-top: calc(var(--rail-h) + 124px); }
}

/* Sehr schmale Geräte: nebeneinander wird die Beschriftung zu eng.
   Das Symbol steht dort wieder über der Beschriftung – das kostet etwas
   Höhe, hält aber „Fahrschule" und „Kfz-Werkstatt" lesbar. */
@media (max-width: 620px) {
  .switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sw {
    flex-direction: column; justify-content: center;
    letter-spacing: .01em; padding: 10px 5px 11px; gap: 7px;
  }
  .sw .mk { width: 19px; height: 19px; }
}

/* == ERZEUGT: Umschalter-Regeln == */
/* Erzeugt von tools/build-assistent.mjs – nicht von Hand ändern.
   Ohne diese Regeln gäbe es keinen Branchenwechsel; sie sind der
   Umschalter, nicht seine Verzierung. */

/* Der gewählte Schalter trägt die Farbe seiner Branche, nicht die
   Chassisfarbe – sonst zeigt der Umschalter Bernstein, während die Tafel
   darunter schon in Petrol oder Indigo leuchtet. */
#br-kfz:checked ~ .switch .sw[for="br-kfz"] {
  background: #ff6a44; color: #1c1310;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
}
#br-praxis:checked ~ .switch .sw[for="br-praxis"] {
  background: #3ddbb4; color: #06181a;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
}
#br-fahrschule:checked ~ .switch .sw[for="br-fahrschule"] {
  background: #6b7dff; color: #080a1c;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
}
#br-heizung:checked ~ .switch .sw[for="br-heizung"] {
  background: #f0a75f; color: #0d1720;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
}
#br-mehr:checked ~ .switch .sw[for="br-mehr"] {
  background: #ffb000; color: #07080c;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
}
#br-kfz:checked ~ .switch .sw[for="br-kfz"]:active {
  filter: brightness(1.1);
}
#br-praxis:checked ~ .switch .sw[for="br-praxis"]:active {
  filter: brightness(1.1);
}
#br-fahrschule:checked ~ .switch .sw[for="br-fahrschule"]:active {
  filter: brightness(1.1);
}
#br-heizung:checked ~ .switch .sw[for="br-heizung"]:active {
  filter: brightness(1.1);
}
#br-mehr:checked ~ .switch .sw[for="br-mehr"]:active {
  filter: brightness(1.1);
}
/* Die gewählte Branche bekommt zusätzlich eine Marke – für Augen,
   die Farbe schlecht unterscheiden. */
#br-kfz:checked ~ .switch .sw[for="br-kfz"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 7px; width: 22px; height: 3px; border-radius: 2px;
  background: #1c1310; opacity: .8;
}
#br-praxis:checked ~ .switch .sw[for="br-praxis"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 7px; width: 22px; height: 3px; border-radius: 2px;
  background: #06181a; opacity: .8;
}
#br-fahrschule:checked ~ .switch .sw[for="br-fahrschule"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 7px; width: 22px; height: 3px; border-radius: 2px;
  background: #080a1c; opacity: .8;
}
#br-heizung:checked ~ .switch .sw[for="br-heizung"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 7px; width: 22px; height: 3px; border-radius: 2px;
  background: #0d1720; opacity: .8;
}
#br-mehr:checked ~ .switch .sw[for="br-mehr"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 7px; width: 22px; height: 3px; border-radius: 2px;
  background: #07080c; opacity: .8;
}
/* Das verdeckte Optionsfeld hat den Tastaturfokus – zeigen muss ihn die Beschriftung.
   Der Ring liegt AUSSEN: innen läge er auf der Branchenfarbe des gewählten Knopfes,
   und weil in einer Optionsfeld-Gruppe die Auswahl dem Fokus folgt, wäre er nie
   sichtbar (gemessen 1,00:1 bei „Ihr Gewerbe"). */
#br-kfz:focus-visible ~ .switch .sw[for="br-kfz"],
#br-praxis:focus-visible ~ .switch .sw[for="br-praxis"],
#br-fahrschule:focus-visible ~ .switch .sw[for="br-fahrschule"],
#br-heizung:focus-visible ~ .switch .sw[for="br-heizung"],
#br-mehr:focus-visible ~ .switch .sw[for="br-mehr"] {
  outline: 2px solid var(--amber); outline-offset: 3px; position: relative; z-index: 1;
}
/* Und hier geschieht der eigentliche Wechsel. */
#br-kfz:checked ~ .stage > #panel-kfz,
#br-praxis:checked ~ .stage > #panel-praxis,
#br-fahrschule:checked ~ .stage > #panel-fahrschule,
#br-heizung:checked ~ .stage > #panel-heizung,
#br-mehr:checked ~ .stage > #panel-mehr {
  display: grid;
  animation: tafelAuf .32s cubic-bezier(.16, 1, .3, 1) both;
}

/* ---- Die vorbereiteten Fragen, ebenfalls ohne JavaScript ----
   Ein Tipp auf die Beschriftung hakt das verdeckte Kontrollkästchen an,
   und das Frage-Antwort-Paar im Verlauf wird sichtbar. Mehr braucht es
   nicht; in der Dateivorschau ohne JavaScript funktioniert genau das. */
#ask-kfz-1:checked ~ .demo-log > #paar-kfz-1,
#ask-kfz-2:checked ~ .demo-log > #paar-kfz-2,
#ask-kfz-3:checked ~ .demo-log > #paar-kfz-3,
#ask-praxis-1:checked ~ .demo-log > #paar-praxis-1,
#ask-praxis-2:checked ~ .demo-log > #paar-praxis-2,
#ask-praxis-3:checked ~ .demo-log > #paar-praxis-3,
#ask-fahrschule-1:checked ~ .demo-log > #paar-fahrschule-1,
#ask-fahrschule-2:checked ~ .demo-log > #paar-fahrschule-2,
#ask-fahrschule-3:checked ~ .demo-log > #paar-fahrschule-3,
#ask-heizung-1:checked ~ .demo-log > #paar-heizung-1,
#ask-heizung-2:checked ~ .demo-log > #paar-heizung-2,
#ask-heizung-3:checked ~ .demo-log > #paar-heizung-3,
#ask-mehr-1:checked ~ .demo-log > #paar-mehr-1,
#ask-mehr-2:checked ~ .demo-log > #paar-mehr-2,
#ask-mehr-3:checked ~ .demo-log > #paar-mehr-3 {
  display: flex;
}
/* Eine beantwortete Frage ist erledigt: Sie sieht gebraucht aus und lässt
   sich nicht mehr antippen – sonst nähme ein zweiter Tipp die Antwort
   wieder weg, was aussähe, als hätte der Assistent sich verschluckt. */
#ask-kfz-1:checked ~ .demo-asks .ask[for="ask-kfz-1"],
#ask-kfz-2:checked ~ .demo-asks .ask[for="ask-kfz-2"],
#ask-kfz-3:checked ~ .demo-asks .ask[for="ask-kfz-3"],
#ask-praxis-1:checked ~ .demo-asks .ask[for="ask-praxis-1"],
#ask-praxis-2:checked ~ .demo-asks .ask[for="ask-praxis-2"],
#ask-praxis-3:checked ~ .demo-asks .ask[for="ask-praxis-3"],
#ask-fahrschule-1:checked ~ .demo-asks .ask[for="ask-fahrschule-1"],
#ask-fahrschule-2:checked ~ .demo-asks .ask[for="ask-fahrschule-2"],
#ask-fahrschule-3:checked ~ .demo-asks .ask[for="ask-fahrschule-3"],
#ask-heizung-1:checked ~ .demo-asks .ask[for="ask-heizung-1"],
#ask-heizung-2:checked ~ .demo-asks .ask[for="ask-heizung-2"],
#ask-heizung-3:checked ~ .demo-asks .ask[for="ask-heizung-3"],
#ask-mehr-1:checked ~ .demo-asks .ask[for="ask-mehr-1"],
#ask-mehr-2:checked ~ .demo-asks .ask[for="ask-mehr-2"],
#ask-mehr-3:checked ~ .demo-asks .ask[for="ask-mehr-3"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--z-ink) 8%, var(--z-bg));
  color: var(--z-dim);
  cursor: default;
  pointer-events: none;
}
/* Das Kontrollkästchen hat den Tastaturfokus, zeigen muss ihn die Beschriftung. */
#ask-kfz-1:focus-visible ~ .demo-asks .ask[for="ask-kfz-1"],
#ask-kfz-2:focus-visible ~ .demo-asks .ask[for="ask-kfz-2"],
#ask-kfz-3:focus-visible ~ .demo-asks .ask[for="ask-kfz-3"],
#ask-praxis-1:focus-visible ~ .demo-asks .ask[for="ask-praxis-1"],
#ask-praxis-2:focus-visible ~ .demo-asks .ask[for="ask-praxis-2"],
#ask-praxis-3:focus-visible ~ .demo-asks .ask[for="ask-praxis-3"],
#ask-fahrschule-1:focus-visible ~ .demo-asks .ask[for="ask-fahrschule-1"],
#ask-fahrschule-2:focus-visible ~ .demo-asks .ask[for="ask-fahrschule-2"],
#ask-fahrschule-3:focus-visible ~ .demo-asks .ask[for="ask-fahrschule-3"],
#ask-heizung-1:focus-visible ~ .demo-asks .ask[for="ask-heizung-1"],
#ask-heizung-2:focus-visible ~ .demo-asks .ask[for="ask-heizung-2"],
#ask-heizung-3:focus-visible ~ .demo-asks .ask[for="ask-heizung-3"],
#ask-mehr-1:focus-visible ~ .demo-asks .ask[for="ask-mehr-1"],
#ask-mehr-2:focus-visible ~ .demo-asks .ask[for="ask-mehr-2"],
#ask-mehr-3:focus-visible ~ .demo-asks .ask[for="ask-mehr-3"] {
  outline: 2px solid var(--z-accent); outline-offset: 3px; position: relative; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .panel[data-trade] { animation: none !important; }
}
@keyframes tafelAuf { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
/* == ENDE ERZEUGT == */

/* Auf schmalen Geräten teilen sich Marke und Telefonnummer eine enge Zeile.
   Beide müssen ganz lesbar bleiben – also gibt jede etwas Platz ab. */
@media (max-width: 860px) {
  .rail-in { gap: 12px; }
  .mark-name { font-size: .875rem; }
  .rail-tel { padding: 13px 10px; }
}

/* ================================================================
   Schwerelosigkeit: das Licht
   In diesem Raum gibt es keine Trennlinien über die volle Breite mehr.
   Getrennt wird durch Abstand und durch Licht: hinter dem ersten
   Bildschirm, hinter der Bühne und hinter der Preistafel steht je eine
   weiche Lichtkuppel, die den Grund anhebt. Sie liegt hinter allem
   (z-index 0, Inhalt auf 1) und fängt nie einen Klick ab.
   ================================================================ */

.hero, .assist, .prices, .contact { position: relative; isolation: isolate; }
.hero > *, .assist > *, .prices > *, .contact > * { position: relative; z-index: 1; }

.hero::before,
.assist::before,
.prices::before,
.contact::before {
  content: "";
  position: absolute; inset: -10% 0 auto;
  height: 620px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(88% 56% at 50% 0%, var(--licht, rgba(255, 176, 0, .16)) 0%, transparent 72%);
}
.hero::before { height: 780px; --licht: rgba(255, 176, 0, .17); }
/* Die Bühne leuchtet in der Farbe der gewählten Branche mit. */
.assist::before { --licht: var(--z-licht-aussen, rgba(255, 176, 0, .12)); transition: background .5s ease; }
.prices::before { --licht: rgba(255, 176, 0, .1); }
.contact::before { --licht: rgba(74, 222, 128, .09); }

/* Ein zweites, kälteres Licht tief unten im ersten Bildschirm –
   damit der Raum nach unten nicht abrupt schwarz zuläuft. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -180px;
  height: 420px; pointer-events: none; z-index: 0;
  background: radial-gradient(72% 62% at 50% 100%, rgba(107, 125, 255, .13) 0%, transparent 70%);
}

/* ---------------- Auftritt: alles steigt auf ----------------
   Eine einzige Bewegung, und sie heißt wie die Bildwelt: Die Fläche
   kommt von unten, leicht unscharf, und wird beim Ankommen scharf.
   Vorgabe ist der sichtbare Endzustand; nur mit Skript wird animiert. */

.js .rise { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); }
.js .rise.in {
  opacity: 1; transform: none; filter: none;
  transition: opacity .85s cubic-bezier(.16, 1, .3, 1),
              transform .85s cubic-bezier(.16, 1, .3, 1),
              filter .85s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; filter: none; }
  .hero::before, .hero::after, .assist::before, .prices::before, .contact::before { transition: none; }
}

/* Die Dreierreihe der Pakete braucht Platz. Unter 1000 px stapelt sie,
   damit die Titel nicht dreizeilig brechen und die Preise ausrichtbar bleiben. */
@media (max-width: 1000px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan h3, .plan h4 { min-height: 0; }
  .plan { border-right: none; }
}

/* Zwischen 1000 und 1280 px brechen die drei Pakettitel unterschiedlich um.
   Nur dort wird die zweite Zeile reserviert – bei 1400 px, wo alle drei
   einzeilig sind, entsteht so keine leere Zeile unter der Überschrift. */
@media (min-width: 1001px) and (max-width: 1280px) {
  .plan h3, .plan h4 { min-height: 2.6em; }
}

/* Der Live-Punkt gehört an die erste Zeile der Überschrift, nicht in ihre
   Mitte – sonst steht er bei zweizeiligen Knoten aus der Reihe. */
.node h3 { align-items: flex-start; }
.node h3 .dot { margin-top: .42em; }

/* ==================================================================
   TIEFE — die Z-Achse der Schwerelosigkeit
   ==================================================================
   Bis hierher war das Schweben eine Behauptung: Schatten und helle
   Oberkante deuten Höhe an, aber nichts bewegt sich jemals in der
   Tiefe. Ab hier wird die Behauptung wahr. Die Seite ist kein
   Dokument, das vorbeirollt, sondern ein Raum, durch den man geht.

   Sieben Abschnitte, sieben verschiedene Tiefenverhalten – nicht
   siebenmal dieselbe Einblendung:

     Hero        der Raum öffnet sich
     Assistent   das Produkt richtet sich auf   ← der eine Hauptmoment
     Konstanten  drei Regeln laufen zusammen
     Leistungen  zwei Felder schwingen herein
     Preise      stehen still (siehe Regel unten)
     Ablauf      der Weg läuft in die Tiefe
     Kontakt     der Raum kommt zur Ruhe

   DIE ZIELREGEL: Nichts, worauf jemand zielen muss, bewegt sich beim
   Scrollen. Preise, Formularfelder und der Umschalter bekommen Tiefe
   über Auflagerung, nie über scrollgebundene Bewegung. Scrollgebundene
   Animationen werden gescrubbt, nicht abgespielt – beim Zurückscrollen
   liefe die Bewegung rückwärts, und eine Preistafel, die unter dem
   Daumen wackelt, kostet Abschlüsse.

   DIE KRISPREGEL: Jede Bewegung endet auf `transform: none`, nie auf
   `translateZ(0)`. Eine 3-D-Ebene rendert Schrift mit anderer
   Kantenglättung; im Ruhezustand muss die Schrift wieder scharf sein.

   PERSPEKTIVE NUR AUF BLÄTTERN: `perspective` und `transform` machen
   ein Element zum Bezugsrahmen. Auf `section`, `.wrap` oder
   `.switcher` würden sie die klebende Leiste und die klebende
   Schalterreihe aus der Verankerung reißen. Deshalb steht Perspektive
   ausschließlich auf inneren Behältern.

   Ohne Skript, ohne Bibliothek, ohne ein Byte Ladegewicht: Das alles
   ist `animation-timeline`. Browser ohne diese Eigenschaft (Firefox,
   Safari vor 26) überspringen den ganzen Block und sehen die Seite
   so, wie sie ohne Tiefe aussieht – vollständig und fertig.
   ================================================================== */

:root {
  --tiefe-fern: -260px;
  --tiefe-mittel: -120px;
  --tiefe-nah: -48px;
  --raum: 1500px;
  --raum-eng: 1100px;
  /* Ankunft: die Kurve der Bildwelt, nur länger. Etwas, das aus der
     Tiefe kommt, braucht mehr Weg als ein Farbwechsel. */
  --ankunft: cubic-bezier(.16, 1, .3, 1);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---------- Hero: der Raum öffnet sich ----------
       Die beiden Lichter des ersten Bildschirms driften beim Scrollen
       auseinander – das warme von oben zieht nach hinten weg, das
       kalte von unten kommt herauf. Man fällt nicht durch die Seite,
       man taucht in einen Raum ein. */
    /* GEMESSEN UND KORRIGIERT: Die Kuppeln liegen als `inset: … 0 …`
       genau so breit wie ihr Abschnitt. Jede Vergrößerung und jede
       Verschiebung nach rechts ragt deshalb aus der Seite heraus – der
       Querüberlauf betrug 35 px, und Chrome verkleinert daraufhin auf
       dem Telefon die ganze Seite, bis das Chatfenster halb unter dem
       Bildschirmrand lag. Deshalb wandert das Licht nur noch senkrecht
       und nur nach oben; waagerecht bleibt alles unangetastet. */
    .hero::before {
      animation: heroLichtOben linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .hero::after {
      animation: heroLichtUnten linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes heroLichtOben {
      from { transform: translateY(0); opacity: 1; }
      to   { transform: translateY(-16%); opacity: .4; }
    }
    @keyframes heroLichtUnten {
      from { transform: translateY(3%); opacity: .45; }
      to   { transform: translateY(-14%); opacity: 1; }
    }

    /* Das Fließbild liegt auf der nahen Ebene und kommt dem Betrachter
       beim Scrollen entgegen. Es ist die einzige Fläche im ersten
       Bildschirm, die keine Schaltfläche trägt – deshalb darf sie sich
       bewegen, während Knöpfe und Wähler stillstehen. */
    .mimic { perspective: var(--raum); perspective-origin: 50% 0%; }
    /* Der skriptgesteuerte Auftritt (.rise) und diese Reise fassen beide
       `transform` an. Eine Animation schlägt einen Übergang, der Auftritt
       wäre also lautlos verschluckt worden. Deshalb gibt er hier ab –
       und bleibt in Browsern ohne Scroll-Zeitachse unverändert bestehen. */
    .js .mimic-inner.rise,
    .js .mimic-inner.rise.in {
      opacity: 1; filter: none; transition: none;
    }
    .mimic-inner {
      animation: bildKommtNaeher linear both;
      animation-timeline: view();
      /* Gemessen: Mit `cover 38%` stand die Tafel auch in der Bildmitte
         noch um 1,4 Grad gekippt – ihre Schrift wäre dauerhaft auf einer
         3-D-Ebene gerastert worden. Fertig ist die Reise, sobald die
         Tafel vollständig im Bild steht. */
      animation-range: entry 0% entry 100%;
    }
    @keyframes bildKommtNaeher {
      from { transform: translateZ(var(--tiefe-mittel)) rotateX(5deg); }
      to   { transform: none; }
    }

    /* ---------- Assistent: der eine Hauptmoment ----------
       Die Vorführung tritt gekippt und nach hinten versetzt in den Raum
       und richtet sich auf, während sie ins Bild fährt. Das ist keine
       Verzierung: Es ist der Vorgang, um den die ganze Seite gebaut ist –
       das Produkt kommt in den Blick. Deshalb steht dieser Moment allein
       und wird nirgendwo sonst wiederholt.

       Der Bereich endet auf `entry 100%`: Sobald die Tafel vollständig
       im Bild steht, ist sie flach, scharf und bedienbar. Wer tippt,
       tippt nie auf eine gekippte Fläche. */
    .stage { perspective: var(--raum); perspective-origin: 50% 34%; }
    .panel > .demo {
      animation: tafelRichtetSichAuf linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 100%;
      transform-origin: 50% 100%;
    }
    @keyframes tafelRichtetSichAuf {
      from {
        transform: translateZ(var(--tiefe-fern)) rotateX(11deg) rotateY(-8deg);
        opacity: .5;
      }
      to { transform: none; opacity: 1; }
    }

    /* Die Textspalte daneben liegt eine Ebene weiter hinten und holt
       langsamer auf – dadurch entsteht die Parallaxe zwischen Aussage
       und Beweis. */
    .panel > .stage-copy {
      animation: spalteHoltAuf linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes spalteHoltAuf {
      from { transform: translateY(38px); opacity: .35; }
      to   { transform: none; opacity: 1; }
    }

    /* Die Lichtkuppel der Bühne wandert mit. Sie trägt die Farbe der
       gewählten Branche, also wandert beim Scrollen buchstäblich das
       Licht dieser Branche durch den Raum. */
    .assist::before {
      animation: kuppelWandert linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes kuppelWandert {
      from { transform: translateY(4%); opacity: .55; }
      to   { transform: translateY(-18%); opacity: 1; }
    }

    /* ---------- Konstanten: drei Regeln laufen zusammen ----------
       Die drei Knoten kommen aus drei verschiedenen Tiefen und treffen
       sich auf einer Ebene. Was der Abschnitt behauptet – dass in jedem
       Gewerbe dasselbe System steckt – macht die Bewegung sichtbar. */
    .matrix { perspective: var(--raum); perspective-origin: 50% 40%; }
    .matrix > div {
      animation: knotenTrifftEin linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    /* Gemessen: Ein waagerechter Versatz von 30 px schob die rechte
       Spalte 5 px über den Seitenrand – bei 900 px und 1010 px, wo das
       Raster zweispaltig steht und der Rand nur 24 px misst. Die
       Aussage „dasselbe System in jedem Gewerbe" trägt die Tiefe, nicht
       die Seitwärtsbewegung. Also fällt die Seitwärtsbewegung weg. */
    .matrix > div:nth-child(1) { --von-y: 26px; --von-z: var(--tiefe-fern); }
    .matrix > div:nth-child(2) { --von-y: 18px; --von-z: var(--tiefe-nah); }
    .matrix > div:nth-child(3) { --von-y: 22px; --von-z: var(--tiefe-nah); }
    .matrix > div:nth-child(4) { --von-y: 30px; --von-z: var(--tiefe-fern); }
    @keyframes knotenTrifftEin {
      from { transform: translate3d(0, var(--von-y, 22px), var(--von-z, -120px)); opacity: .4; }
      to   { transform: none; opacity: 1; }
    }

    /* ---------- Leistungen: zwei Felder schwingen herein ----------
       Zwei Angebote, zwei Seiten des Raums. Sie drehen sich um ihre
       jeweils äußere Kante herein wie zwei Flügel. */
    .fields { perspective: var(--raum-eng); }
    .field-card {
      animation: feldSchwingtHerein linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .field-card:nth-child(odd)  { transform-origin: left center;  --dreh: 9deg; }
    .field-card:nth-child(even) { transform-origin: right center; --dreh: -9deg; }
    @keyframes feldSchwingtHerein {
      from { transform: rotateY(var(--dreh, 12deg)) translateZ(var(--tiefe-nah)); opacity: .45; }
      to   { transform: none; opacity: 1; }
    }

    /* Die Arbeitsprobe ist ein Bild vom Bildschirm – sie liegt flach im
       Raum und richtet sich auf, wie man ein Blatt aufnimmt. */
    .works .proof { perspective: var(--raum); }
    .works .proof img {
      animation: probeRichtetSichAuf linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
      transform-origin: 50% 100%;
    }
    @keyframes probeRichtetSichAuf {
      from { transform: rotateX(8deg) translateZ(var(--tiefe-nah)); }
      to   { transform: none; }
    }

    /* ---------- Ablauf: der Weg läuft in die Tiefe ----------
       Vier Schritte, die wie ein Gang nach hinten fluchten: Der erste
       steht vorn, der vierte hinten. Beim Scrollen kommen sie auf eine
       Ebene – der Ablauf legt sich vor einem hin.
       Reine Lesekarten ohne Bedienelement, deshalb dürfen sie sich
       bewegen. */
    .steps { perspective: 1800px; perspective-origin: 50% 50%; }
    .step {
      animation: schrittKommtNachVorn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    .step:nth-child(1) { --stufe: -60px; }
    .step:nth-child(2) { --stufe: -130px; }
    .step:nth-child(3) { --stufe: -200px; }
    .step:nth-child(4) { --stufe: -270px; }
    @keyframes schrittKommtNachVorn {
      from { transform: translate3d(0, 16px, var(--stufe, -120px)); opacity: .35; }
      to   { transform: none; opacity: 1; }
    }

    /* ---------- Preise und Kontakt: hier steht der Raum still ----------
       Bewusst keine scrollgebundene Bewegung (Zielregel oben). Was sich
       hier bewegt, ist ausschließlich das Licht hinter dem Abschnitt –
       nie eine Fläche, auf die jemand zielt. */
    .prices::before, .contact::before {
      animation: kuppelAtmet linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes kuppelAtmet {
      from { transform: translateY(3%); opacity: .5; }
      to   { transform: translateY(-12%); opacity: 1; }
    }
  }
}

/* Gemessen: Ohne diese eine Zeile malt die Leinwand Schwarz statt Licht.
   `isolation: isolate` auf `.hero` kappt die Mischung zum Seitengrund –
   der liegt auf `body`, also außerhalb der abgeschotteten Gruppe. Der
   Mischmodus „screen" hätte dann nichts, worüber er mischen könnte, und
   die deckend schwarze Leinwand deckt die Lichtkuppeln zu. Mit eigenem
   Grund hat die Gruppe einen Boden, und die Mischung stimmt wieder. */
.hero { background-color: var(--ground); }

/* Die WebGL-Zugabe im ersten Bildschirm. Das Element entsteht nur im
   Skript, es gibt also nie eine leere Leinwand ohne Inhalt. Sie liegt
   auf derselben Ebene wie die Lichtkuppeln und wird mit „screen"
   darübergelegt: Schwarz ist dabei das neutrale Element, deshalb
   scheint ausschließlich das Licht durch und die Kuppeln darunter
   bleiben unverändert. */
.raum {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .raum { display: none; } }

/* Statische Tiefe – gilt immer, auch ohne scrollgebundene Animationen
   und auch bei abgeschalteter Bewegung. Das mittlere Paket steht nicht
   durch Farbe vorn, sondern durch Höhe: der weiteste Schatten der
   ganzen Seite. Kein Rahmen, keine zweite Akzentfarbe. */
.plan-mid {
  box-shadow: 0 54px 120px -50px rgba(0, 0, 0, 1), var(--kante);
}

/* Bei abgeschalteter Bewegung bleibt die Tiefe, die Reise fällt weg.
   Nicht alles aus: Was Zustand zeigt, muss weiter sichtbar reagieren –
   nur der Raum hört auf, sich zu drehen. */
@media (prefers-reduced-motion: reduce) {
  .mimic-inner, .panel > .demo, .panel > .stage-copy,
  .matrix > div, .field-card, .works .proof img, .step,
  .hero::before, .hero::after, .assist::before,
  .prices::before, .contact::before {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}