/* Orkestr, Seite (Quelle; ausgeliefert wird assets/seite.<hash>.css über tools/bauen.mjs).
   Richtung B „Leitstand“ (Janik 20.10.2026), Relaunch 02.11.2026 nach Janiks Vorgaben: Seal Blue als Fläche, Navy für Schrift
   und Tiefe, Crimson nur dort, wo Sie handeln (Hauptknopf, Freigabe, Notaus). Kopfzeile als schwebende Kapsel mit klarer
   Linie, feine Körnung über dem Grund, ruhiger Farbschimmer dahinter (quelle/js/grund.js).
   Kontrast (WCAG AA): Navy auf Seal Blue 11,9:1, Navy auf Crimson 5,1:1, Nebentext #3D5A78 auf Seal Blue 6,2:1. Crimson nie
   als Textfarbe auf Hell (2,3:1), Schrift auf Crimson immer Navy. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-500-normal-latin.woff2") format("woff2"); font-weight: 500; 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-500-normal-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --grund: #DBF2FC;        /* Seal Blue: Fläche */
  --grund-hell: #EBF8FE;
  --grund-tief: #C4E5F4;   /* deaktiviert, leere Bahnen */
  --karte: #F7FCFE;        /* Karten: fast weiß, ein Hauch Blau */
  --tinte: #072D59;        /* Navy: Schrift und Tiefe */
  --grau: #3D5A78;         /* Nebentext: 6,2:1 auf Seal Blue, 7:1 auf Karte, über 4,5:1 auch auf den tiefsten Stellen des Schimmers */
  --linie: rgba(7, 45, 89, .14);
  --zug: #FD6E88;          /* Crimson: wo Sie handeln */
  --zug-tief: #D9466A;     /* Schatten des gedrückten Knopfs, nie als Text */
  --signal: #1F6FD6;       /* KI-Schritte und unsere Spur */
  /* Farben der vier Abläufe, gleich wie im Modell (quelle/js/modell.js, FARBEN) */
  --f-anfragen: #1F6FD6; --f-angebote: #0E97A6; --f-rechnungen: #D9A11E; --f-montag: #2F8A55;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --rand: 20px;
  --kapsel-rand: 12px;
  --weich: cubic-bezier(.2, .7, .1, 1);
  /* Körnung: zwei Rauschebenen, Navy-Körner und helle Körner, damit die Fläche nicht grau wird */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03 0 0 0 0 .18 0 0 0 0 .35 2.6 0 0 0 -1.5'/%3E%3C/filter%3E%3Cfilter id='h' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 2.6 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)'/%3E%3Crect width='160' height='160' filter='url(%23h)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
/* Nur html trägt die Fläche: body bleibt durchsichtig, sonst lägen Farbschimmer (z-index -1) und Körnung darunter */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: radial-gradient(120% 80% at 18% 0%, var(--grund-hell) 0%, var(--grund) 52%, #CFEBF8 100%) fixed, var(--grund); }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; color: var(--tinte); font-family: var(--sans); font-weight: 500; font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* Körnung über Grund und Modell, unter Karten, Abschnitten und Kopfzeile (z-index 1, vor .szenen im Dokument) */
body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: var(--korn); background-size: 160px; opacity: .2; }
.grund { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.grund.bereit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .grund { opacity: 1; } }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--tinte); color: var(--karte); }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: var(--rand); top: var(--rand); z-index: 40; background: var(--tinte); color: var(--karte); padding: .5rem .8rem; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hauptknopf: Crimson mit Navy-Schrift (5,1:1). Der Rand in Navy hält die Form auf dem hellen Grund. */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; background: var(--zug); color: var(--tinte); text-decoration: none; padding: .7rem 1.25rem; border-radius: 999px; line-height: 1.2; border: 1px solid rgba(7, 45, 89, .22); font: inherit; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 8px 20px -12px rgba(217, 70, 106, .9); transition: background-color .2s ease, transform .2s var(--weich), box-shadow .2s ease; }
.knopf:hover { background: #FF8299; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 24px -12px rgba(217, 70, 106, .95); }
.knopf:active { transform: translateY(0); }
.leise { text-underline-offset: .22em; text-decoration-thickness: 1px; }
.leise:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.035em; }
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 8.6vw, 4.4rem); line-height: .98; }
h2 { font-size: clamp(2rem, 7.6vw, 3.4rem); line-height: 1; }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }

/* ---------- Kopfzeile: schwebende Kapsel mit klarer Linie ---------- */
.kopf { position: fixed; top: 10px; left: 0; right: 0; z-index: 20; pointer-events: none; transition: transform .45s var(--weich); }
.kopf.weg { transform: translateY(calc(-100% - 48px)); }
.kapsel { position: relative; pointer-events: auto; display: flex; align-items: center; gap: .75rem; height: 3.5rem; margin: 0 var(--kapsel-rand); padding: 0 .35rem 0 1.1rem; border-radius: 999px; border: 1px solid rgba(7, 45, 89, .16); background: rgba(239, 249, 254, .74); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 16px 36px -26px rgba(7, 45, 89, .6); transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease; }
.kopf.fest .kapsel, .blatt-offen .kapsel { background: rgba(244, 251, 254, .92); border-color: rgba(7, 45, 89, .2); box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 20px 44px -26px rgba(7, 45, 89, .7); }
.marke { font-size: 1.3rem; letter-spacing: -0.04em; text-decoration: none; margin-right: auto; padding: .3rem 0; white-space: nowrap; }
.wege { display: none; align-items: center; gap: 2px; }
.wege > a, .wege-knopf { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: 0 .85rem; border-radius: 999px; border: 0; background: none; font: inherit; font-size: .9375rem; color: var(--grau); text-decoration: none; cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.wege > a:hover, .wege-knopf:hover, .tafel-halter.offen .wege-knopf { color: var(--tinte); background: rgba(7, 45, 89, .06); }
/* Abschnitt, in dem Sie gerade sind: kurzer Strich unter dem Wort, Farbe Navy */
.wege > a[aria-current="true"], .wege-knopf[data-aktiv] { color: var(--tinte); }
.wege > a[aria-current="true"]::after, .wege-knopf[data-aktiv]::after { content: ""; position: absolute; left: 50%; bottom: .32rem; width: .9rem; height: 2px; border-radius: 2px; background: var(--tinte); transform: translateX(-50%); }
.wege-knopf svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--weich); }
.tafel-halter.offen .wege-knopf svg { transform: rotate(180deg); }
.kopf-rechts { display: flex; align-items: center; gap: .5rem; }
.kopf .knopf { min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .9375rem; }
/* Sprachen: EN · DE · ES; die aktuelle in Navy mit Strich, die anderen im Nebenton */
.sprachen { display: flex; align-items: center; gap: .1rem; margin: 0; font-size: .8125rem; letter-spacing: .02em; color: var(--grau); }
.sprachen a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 1.9rem; justify-content: center; padding: 0 .25rem; border-radius: 8px; text-decoration: none; color: var(--grau); }
.sprachen a:hover { color: var(--tinte); }
.sprachen a[aria-current="page"] { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.sprachen span { color: var(--grau); }
.menueknopf { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(7, 45, 89, .18); background: rgba(255, 255, 255, .55); cursor: pointer; padding: 0; color: var(--tinte); }
.menueknopf span { position: absolute; left: 50%; width: 1.05rem; height: 2px; margin-left: -.525rem; border-radius: 2px; background: currentColor; transition: transform .35s var(--weich), top .35s var(--weich); }
.menueknopf span:first-child { top: calc(50% - 4px); } .menueknopf span:last-child { top: calc(50% + 3px); }
.blatt-offen .menueknopf span:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
.blatt-offen .menueknopf span:last-child { top: calc(50% - 1px); transform: rotate(-45deg); }
/* Ohne JavaScript gibt es kein Menüblatt: Knopf weg, die Wege stehen in der Fußzeile */
html:not(.js) .menueknopf { display: none; }
/* Lesefortschritt: Linie an der Unterkante der Kapsel, vorn ein Signal wie die Punkte im Modell (navi.js setzt --fortschritt) */
.kopf-linie { position: absolute; left: 1.6rem; right: 1.6rem; bottom: -1px; height: 2px; pointer-events: none; }
.kopf-linie::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--tinte); opacity: .5; transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 0)); }
.kopf-linie::after { content: ""; position: absolute; top: 50%; left: calc(var(--fortschritt, 0) * 100%); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--tinte); }
html:not(.js) .kopf-linie { display: none; }

/* Abläufe-Tafel unter der Kapsel (breite Schirme) */
.tafel-halter { position: static; }
.tafel { position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding: .5rem; border-radius: 26px; border: 1px solid rgba(7, 45, 89, .14); background: var(--karte); box-shadow: 0 30px 70px -36px rgba(7, 45, 89, .55); display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: .4rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .35s var(--weich), visibility 0s .35s; }
.tafel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.tafel-halter.offen .tafel, html:not(.js) .tafel-halter:hover .tafel, html:not(.js) .tafel-halter:focus-within .tafel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--weich), visibility 0s; }
.tafel ul { list-style: none; margin: 0; padding: .3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; }
.tafel ul a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .1rem .7rem; padding: .85rem .9rem; border-radius: 16px; text-decoration: none; transition: background-color .2s ease; }
.tafel ul a:hover, .tafel ul a:focus-visible { background: rgba(7, 45, 89, .055); }
.tafel ul .punkt { width: .8rem; height: .8rem; margin: .34rem 0 0 .35rem; grid-row: span 2; }
.tafel ul b { font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }
.tafel ul small { font-size: .875rem; color: var(--grau); line-height: 1.4; }
.tafel-karte { display: flex; flex-direction: column; gap: .55rem; margin: .3rem; padding: 1.1rem 1.15rem; border-radius: 18px; background: var(--grund); }
.tafel-karte p { margin: 0; }
.tafel-karte .gross { font-size: 1.25rem; letter-spacing: -.025em; line-height: 1.15; }
.tafel-karte .klein { font-size: .875rem; color: var(--grau); }
.tafel-karte a { font-size: .9375rem; text-underline-offset: .22em; }
.tafel-karte .notaus-zeichen { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--zug); box-shadow: 0 3px 0 var(--zug-tief), 0 0 0 4px var(--tinte); margin: .2rem 0 .3rem .25rem; }

/* Menüblatt (schmale Schirme): ganze Fläche unter der Kapsel */
.blatt { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; gap: 1.6rem; padding: calc(3.5rem + 26px) var(--rand) 1.6rem; background: rgba(235, 248, 254, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .35s var(--weich), visibility 0s .35s; }
.blatt-offen .blatt { opacity: 1; visibility: visible; transition: opacity .35s var(--weich), visibility 0s; }
.blatt-offen, .blatt-offen body { overflow: hidden; }
.blatt > nav { display: grid; }
.blatt > nav > a { display: block; padding: .7rem 0; font-size: clamp(1.45rem, 6.4vw, 2rem); letter-spacing: -.035em; text-decoration: none; border-bottom: 1px solid var(--linie); }
.blatt ul { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.blatt ul a { display: flex; align-items: center; gap: .55rem; min-height: 3.1rem; padding: .55rem .8rem; border-radius: 14px; background: var(--karte); text-decoration: none; font-size: .9375rem; line-height: 1.25; }
.blatt .sprachen { font-size: 1rem; gap: .3rem; }
.blatt .knopf { width: 100%; min-height: 3.3rem; }
.blatt-fuss { display: grid; gap: .9rem; margin-top: auto; }
.blatt-fuss a.leise { justify-self: center; color: var(--grau); font-size: .9375rem; }

@media (max-width: 559px) { .kopf .kapsel > .kopf-rechts > .knopf { display: none; } }
@media (min-width: 760px) { :root { --kapsel-rand: 24px; } }
@media (min-width: 1100px) {
  .wege { display: flex; }
  .menueknopf, .blatt { display: none; }
  .kapsel { max-width: 80rem; margin: 0 auto; width: calc(100% - 2 * var(--kapsel-rand)); padding-left: 1.4rem; gap: 1rem; }
  .marke { margin-right: .4rem; }
  .wege { margin-right: auto; }
}

/* ---------- Modell mit Szenen-Karten ---------- */
.modell-bereich { position: relative; }
.buehnen-halter { position: sticky; top: 0; height: 100svh; z-index: 0; }
/* Die Bühne ist durchsichtig: das Modell steht auf dem Farbschimmer des Grundes */
.buehne { position: absolute; inset: 0; }
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.buehne.zieht canvas { cursor: grabbing; }
/* Standbild bis zum Start des Modells (und ohne WebGL): Grundriss der Platte mit vier Bahnen */
.buehne .standbild { position: absolute; inset: 24% 10% 30% 30%; border-radius: 14px; background: repeating-linear-gradient(0deg, transparent 0 22%, rgba(7, 45, 89, .07) 22% calc(22% + 2px)), var(--karte); box-shadow: 0 30px 60px -40px rgba(7, 45, 89, .55); }
.webgl .buehne .standbild { display: none; }
.buehne .hinweis { position: absolute; right: var(--rand); bottom: .8rem; margin: 0; font-size: .8125rem; color: var(--grau); text-align: right; max-width: 22rem; pointer-events: auto; }
/* oben über dem Modell: eigener Grund, sonst laufen Schriften und Bahnen des Modells durch den Text */
@media (max-width: 1099px) { .buehne .hinweis { top: 5.1rem; bottom: auto; max-width: 15rem; padding: .45rem .6rem .55rem; border-radius: 12px; background: rgba(239, 249, 254, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.buehne .pause { display: inline-block; margin-top: .35rem; font: inherit; font-size: .8125rem; color: var(--tinte); background: var(--karte); border: 1px solid rgba(7, 45, 89, .2); border-radius: 999px; padding: .3rem .75rem; cursor: pointer; }
/* „Bewegung anhalten“ nur, wenn sich das Modell bewegt: das display oben hebelte sonst das hidden-Attribut aus (Prüfung 02.11.2026) */
.buehne .pause[hidden] { display: none; }
/* Ohne Modell (kein WebGL2 oder Start gescheitert, .ohne-3d aus seite.js) nichts zeigen, was das Modell bedient oder erklärt.
   Ohne JavaScript bleibt der Text stehen (Prüfregel „ohne JS lesbar“); die Knöpfe sind dort deaktiviert. */
.ohne-3d .stand, .ohne-3d .buehne .hinweis, .ohne-3d .ki-hinweis { display: none; }
.szenen { position: relative; z-index: 1; margin-top: -100svh; pointer-events: none; overflow-x: clip; } /* Zeiger gehen durch zum Modell: ziehen, Stationen, Notaus */
/* Luft nach der letzten Szene, damit „Bewegung anhalten“ frei bleibt */
.szenen { padding-bottom: 6rem; }
.szene { min-height: 100svh; display: flex; align-items: flex-end; padding: 0 var(--rand) 1.2rem; pointer-events: none; scroll-margin-top: 0; }
.szene .karte { pointer-events: auto; width: 100%; background: var(--karte); border-radius: 16px; padding: 1.3rem 1.3rem 1.4rem; border: 1px solid rgba(7, 45, 89, .08); box-shadow: 0 1px 2px rgba(7, 45, 89, .06), 0 22px 54px -20px rgba(7, 45, 89, .28); }
.karte .lead { margin: 1rem 0 0; font-size: 1.0625rem; max-width: 34rem; color: var(--tinte); }
.karte p { margin: .7rem 0 0; max-width: 34rem; }
.karte .klein { font-size: .875rem; color: var(--grau); }
.karte .handlungen { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: 1.2rem; }
.stand { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.stand .text { font-size: .9375rem; color: var(--grau); min-height: 1.4em; flex: 1 1 14rem; min-width: 0; }
.stand .text b { color: var(--tinte); font-weight: 500; }
/* Freigabe: dieselbe Farbe wie die Schranke im Modell (Crimson), Schrift Navy */
.frei { background: var(--zug); color: var(--tinte); border: 1px solid rgba(7, 45, 89, .22); border-radius: 999px; min-height: 2.6rem; padding: .55rem 1.1rem; font: inherit; cursor: pointer; transition: background-color .2s ease; }
.frei:hover { background: #FF8299; }
.frei[disabled] { background: var(--grund-tief); border-color: transparent; color: var(--grau); cursor: default; }
.ki-hinweis { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--grau); margin-top: .8rem; }
.ki-hinweis::before { content: ""; width: .9rem; height: .9rem; flex: none; border-radius: 50%; border: 2.5px solid transparent; background: conic-gradient(var(--f-anfragen) 0 25%, var(--f-angebote) 0 50%, var(--f-rechnungen) 0 75%, var(--f-montag) 0) border-box; -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%); mask: radial-gradient(circle, transparent 46%, #000 48%); }
/* Notaus: Crimson auf Navy-Sockel wie im Modell, Schrift Navy */
.notaus-knopf { background: var(--zug); color: var(--tinte); border: 0; border-radius: 999px; padding: .95rem 1.4rem; font: inherit; font-size: 1.05rem; cursor: pointer; box-shadow: 0 6px 0 var(--tinte), 0 14px 26px -8px rgba(7, 45, 89, .45); transform: translateY(0); transition: transform .1s ease, box-shadow .1s ease; }
.notaus-knopf[aria-pressed="true"] { transform: translateY(5px); box-shadow: 0 1px 0 var(--tinte), 0 4px 10px rgba(7, 45, 89, .3); }
/* bis das Modell läuft (und ohne JavaScript) deaktiviert, wie die Freigabe-Knöpfe */
.notaus-knopf[disabled] { background: var(--grund-tief); color: var(--grau); box-shadow: none; cursor: default; }
.regeln { margin: 1rem 0 0; padding-left: 1.1rem; max-width: 34rem; }
.regeln li + li { margin-top: .35rem; }

/* ---------- Abschnitte (durchsichtig: Farbschimmer und Körnung bleiben sichtbar, Karten decken) ---------- */
.abschnitt { position: relative; z-index: 2; padding: 5rem var(--rand) 1rem; scroll-margin-top: 4.5rem; }
.einleitung { max-width: 38rem; margin: 1.1rem 0 0; font-size: 1.0625rem; color: var(--grau); }
.vergleich { display: grid; gap: 1rem; margin: 2.2rem 0 0; }
.vergleich div { background: var(--karte); border-radius: 14px; padding: 1.2rem 1.3rem; border: 1px solid rgba(7, 45, 89, .08); }
.vergleich div:last-child { box-shadow: inset 0 0 0 2px var(--signal); border-color: transparent; }
.vergleich p { margin: .5rem 0 0; color: var(--grau); }
.daten { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: 2rem 0 0; font-size: .9375rem; }
.daten th, .daten td { text-align: left; vertical-align: top; padding: .85rem .9rem; background: var(--karte); }
.daten thead th { background: transparent; color: var(--grau); font-size: .8125rem; padding-bottom: .2rem; }
.daten tbody th { border-radius: 10px 0 0 10px; }
.daten tbody td:last-child { border-radius: 0 10px 10px 0; }
/* noch offen: gestrichelt unterstrichen statt farbiger Schrift */
.daten .offen { color: var(--tinte); text-decoration: underline dashed rgba(7, 45, 89, .5); text-decoration-thickness: 1px; text-underline-offset: .28em; }
.daten caption { caption-side: bottom; text-align: left; color: var(--grau); font-size: .875rem; padding-top: .6rem; }
.spuren { margin: 2.4rem 0 0; display: grid; gap: .5rem; position: relative; }
.spur { display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; align-items: center; }
.spur > span { font-size: .8125rem; color: var(--grau); }
.spur .bahn { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; height: 1.6rem; }
.spur .bahn i { background: var(--grund-tief); border-radius: 4px; transition: opacity .25s ease; }
.spur .bahn i.sie { background: var(--tinte); } /* Spur des Kunden (Anrede Sie seit 02.11.2026) */
.spur .bahn i.wir { background: var(--signal); }
/* hier wartet alles auf Sie: gestreift wie die Schranke (Crimson und hell), erkennbar auch ohne Farbe */
.spur .bahn i.halt { background: repeating-linear-gradient(-45deg, var(--zug) 0 5px, var(--karte) 5px 9px); box-shadow: inset 0 0 0 1px rgba(7, 45, 89, .25); }
.tage { display: grid; grid-template-columns: 3.2rem repeat(15, minmax(0, 1fr)); gap: 3px; font-size: .75rem; color: var(--grau); text-align: center; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.phasen { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .9rem; }
.phasen li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0 1rem; border-left: 3px solid transparent; padding-left: .7rem; margin-left: -.85rem; transition: border-color .3s ease, color .3s ease; }
.phasen .tag { color: var(--grau); }
.phasen p { margin: .1rem 0 0; color: var(--grau); }
.bedingung { margin: 1.4rem 0 0; max-width: 40rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--karte); box-shadow: inset 0 0 0 2px var(--zug); }
.pakete { margin: 2rem 0 0; display: grid; gap: .6rem; }
.paket { background: var(--karte); border-radius: 14px; padding: 1.1rem 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; }
.paket .preis { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paket .preis small { color: var(--grau); font-size: .8125rem; }
.paket p { grid-column: 1 / -1; margin: .2rem 0 0; color: var(--grau); }
.werkzeug { margin: 2.4rem 0 0; max-width: 46rem; padding: 1.3rem 1.3rem 1.2rem; border-radius: 16px; background: var(--karte); border: 1px solid rgba(7, 45, 89, .08); }
.kosten-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; border: 0; padding: 0; }
.kosten-wahl label { cursor: pointer; border-radius: 999px; padding: .5rem .95rem; background: var(--grund); }
.kosten-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.kosten-wahl label:has(input:checked) { background: var(--tinte); color: var(--karte); }
.kosten-wahl label:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 2px; }
.rechnung { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.rechnung td { padding: .5rem 0; border-top: 1px solid var(--linie); }
.rechnung td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
.rechnung tr.summe td { border-top: 2px solid var(--tinte); }
.annahmen { margin: .8rem 0 0; color: var(--grau); font-size: .875rem; }
.nicht { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 46rem; }
.nicht li { background: var(--karte); border-radius: 12px; padding: .9rem 1rem .9rem 2.8rem; position: relative; }
.nein { position: absolute; left: .95rem; top: 1rem; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--tinte); stroke-width: 2.2; stroke-linecap: round; }
.nicht span { color: var(--grau); }
.schluss { padding-bottom: 5rem; }
.schluss p { max-width: 38rem; margin: 1rem 0 0; }
.kriterien { margin: 1.2rem 0 0; padding-left: 1.1rem; color: var(--grau); max-width: 40rem; }
.schluss .handlungen { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: 1.6rem; }
.fuss { position: relative; z-index: 2; padding: 2rem var(--rand) 2.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; font-size: .9375rem; color: var(--grau); border-top: 1px solid var(--linie); margin: 0 var(--rand); padding-left: 0; padding-right: 0; }
.fuss > span { flex-basis: 100%; color: var(--tinte); }
.fuss .sprachen { flex-basis: 100%; font-size: .9375rem; margin-top: .2rem; }
.fuss .sprachen a { min-height: 2.4rem; }
.fuss .wege-fuss { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }

@media (min-width: 760px) {
  :root { --rand: 40px; }
  .vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss > span { flex-basis: auto; margin-right: auto; }
  .fuss .sprachen { flex-basis: auto; margin-top: 0; }
}
@media (min-width: 1100px) {
  :root { --rand: 5vw; }
  .szene { align-items: center; padding-bottom: 0; }
  .szene .karte { width: min(36rem, 38vw); padding: 1.8rem 1.9rem 1.9rem; }
  .szene:first-child .karte { background: rgba(247, 252, 254, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  /* Held: gleicher Abstand oben und unten wie die Kopfzeile hoch ist. Passt die Karte ins Fenster, bleibt sie mittig wie vorher;
     ist sie höher (Laptops bis etwa 800 px Höhe), beginnt sie unter der Kopfzeile statt dahinter (Textrunde 04.11.2026) */
  .szene:first-child { padding-block: 4.75rem; }
  h1 { font-size: 4.6rem; }
  /* ganz in :where, also ohne Gewicht: die eigenen Breiten (Einleitung 38rem, Bedingung 40rem …) gewinnen, Zeilen bleiben lesbar */
  :where(.abschnitt > *) { max-width: 72rem; }
  /* Karten wechseln die Seite, das Modell weicht jeweils auf die andere Seite aus */
  .szene[data-seite="rechts"] { justify-content: flex-end; }
  /* Gesamtansicht: Karte unten links, das Modell nutzt die ganze Breite */
  .szene[data-ansicht="gesamt"] { align-items: flex-end; padding-bottom: 6vh; }
  .szene[data-ansicht="gesamt"] .karte { width: min(30rem, 32vw); }
  .daten th, .daten td { padding: 1rem 1.1rem; }
  .szene .karte h2 { font-size: min(3.4rem, 3.5vw); }
  .fuss { margin: 0 var(--rand); }
}

/* ---------- Ergänzungen Vollbau ---------- */
/* Farbpunkt je Ablauf: zeigt in Karte und Paket, welches Signal im Modell gemeint ist */
.punkt { display: inline-block; width: .72rem; height: .72rem; border-radius: 50%; background: var(--f, var(--grau)); flex: none; transition: background-color .3s ease; }
.punkt.anfragen { --f: var(--f-anfragen); } .punkt.angebote { --f: var(--f-angebote); } .punkt.rechnungen { --f: var(--f-rechnungen); } .punkt.montag { --f: var(--f-montag); }
.notaus-an .stand .punkt { background: #A9B8C4; }
.stand .punkt { margin-right: -.2rem; }
.punkte { display: inline-flex; gap: .3rem; margin-left: .6rem; vertical-align: .08em; }
.punkte .punkt { width: .62rem; height: .62rem; }
/* Wegskizzen bei „Kein Chatbot“ */
.skizze { display: block; width: 100%; max-width: 26rem; height: auto; margin: 1rem 0 .3rem; overflow: visible; }
.weg-agent { fill: none; stroke: #8DA4B8; stroke-width: 2.5; stroke-linecap: round; }
.weg-ablauf { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; }
.skizze .station { fill: var(--karte); stroke: var(--tinte); stroke-width: 2; }
.skizze .station-ki { fill: none; stroke: var(--signal); stroke-width: 3; }
.skizze .tor { fill: var(--zug); stroke: var(--tinte); stroke-width: 1; }
.skizze .ende { fill: var(--tinte); }
.skizze .laeufer { fill: var(--signal); }
.zahlung { margin: 1rem 0 0; color: var(--grau); max-width: 46rem; }
.fragen { margin: 2rem 0 0; max-width: 46rem; }
.fragen details { background: var(--karte); border-radius: 12px; margin-bottom: .5rem; }
.fragen summary { cursor: pointer; list-style: none; padding: 1rem 2.6rem 1rem 1.1rem; position: relative; border-radius: 12px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 1.1rem; top: 1.25rem; width: .6rem; height: .6rem; border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(45deg); transition: transform .2s ease; }
.fragen details[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.fragen details p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--grau); max-width: 40rem; }
.rechtstext { position: relative; z-index: 2; max-width: 46rem; padding: 7rem var(--rand) 4rem; }
.rechtstext h1 { margin-bottom: 1.4rem; }
.rechtstext h2 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 1.8rem 0 .4rem; }
.rechtstext p { margin: 0 0 .6rem; color: var(--tinte); }
.rechtstext .handlungen { margin-top: 1.4rem; }
.rechtstext .hinweis-sprache { color: var(--grau); margin-bottom: 1.4rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* Hinweis an einer Station im Modell */
.station-tipp { position: absolute; z-index: 2; margin: 0; max-width: 17rem; transform: translate(-50%, calc(-100% - 12px)); padding: .6rem .8rem .65rem; background: var(--tinte); color: rgba(247, 252, 254, .86); font-size: .875rem; line-height: 1.38; border-radius: 10px; pointer-events: none; box-shadow: 0 12px 32px rgba(7, 45, 89, .3); }
.station-tipp b { display: block; color: var(--karte); font-weight: 500; margin-bottom: .1rem; }
.station-tipp::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--tinte); transform: translateX(-50%) rotate(45deg); }
/* Aufbau in 14 Tagen: Tageszeiger über den Spuren, Phasen leuchten der Reihe nach auf */
.zeiger { display: none; position: absolute; left: 0; top: -.4rem; bottom: 1.4rem; width: 2px; margin-left: -1px; background: var(--tinte); border-radius: 2px; will-change: transform; }
.js.bewegt .zeiger { display: block; }
.zeiger span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -105%); background: var(--tinte); color: var(--karte); font-size: .75rem; line-height: 1; padding: .3rem .5rem; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zeiger[data-rand="links"] span { left: 0; transform: translate(-6px, -105%); }
.zeiger[data-rand="rechts"] span { left: auto; right: 0; transform: translate(6px, -105%); }
.spur .bahn i.aus { opacity: .16; }
/* aktive Phase: Strich in Navy und volle Tinte; die anderen im Nebenton (Kontrast bleibt über 4,5:1) */
.phasen.laeuft li:not(.jetzt) > div { color: var(--grau); }
.phasen.laeuft li.jetzt { border-left-color: var(--tinte); }
.phasen.laeuft li.jetzt .tag { color: var(--tinte); }
/* breit: die Spuren kleben als Karte unter der Kapsel, der Zeiger steht im oberen Polster */
@media (min-width: 760px) {
  .js.bewegt .spuren { position: sticky; top: 4.9rem; z-index: 1; background: var(--karte); border-radius: 16px; padding: 3.1rem 1.1rem .9rem; margin-top: 2rem; box-shadow: 0 18px 40px -30px rgba(7, 45, 89, .5); }
  .js.bewegt .zeiger { top: 2.6rem; }
}
/* Schranke am Schluss: hebt sich, wenn der Buchen-Knopf gemeint ist; Crimson mit hellen Streifen wie im Modell */
.schranke { display: block; width: 9.5rem; height: auto; margin: 2.2rem 0 -.4rem; overflow: visible; }
.schranke .boden { fill: rgba(7, 45, 89, .14); }
.schranke .pfosten { fill: var(--karte); stroke: rgba(7, 45, 89, .3); }
.schranke .lampe { fill: #F3D3DC; transition: fill .3s ease; }
.schranke .arm rect { fill: var(--zug); }
.schranke .arm .streifen { fill: var(--karte); }
.schranke .arm { transform-box: view-box; transform-origin: 20px 37px; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.schluss:has(.knopf:hover) .schranke .arm, .schluss:has(.knopf:focus-visible) .schranke .arm, .schranke.offen .arm { transform: rotate(-74deg); }
.schluss:has(.knopf:hover) .schranke .lampe, .schluss:has(.knopf:focus-visible) .schranke .lampe, .schranke.offen .lampe { fill: var(--zug); }
/* Fragen öffnen weich, wo der Browser es kann */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .fragen details::details-content { height: 0; overflow: clip; transition: height .32s ease, content-visibility .32s allow-discrete; }
  .fragen details[open]::details-content { height: auto; }
}
/* Schmal gibt es keinen Weichzeichner hinter der ersten Karte: deckend, sonst scheint der Modell-Hinweis durch ihren Text (Prüfung 02.11.2026) */
@media (max-width: 1099px) { .szene:first-child .karte { background: var(--karte); } }
.daten th .punkte { display: flex; margin: .45rem 0 0; }
/* Datenliste: auf schmalen Schirmen wird jede Zeile eine Karte, sonst ist die Tabelle breiter als der Bildschirm */
@media (max-width: 759px) {
  .daten, .daten tbody, .daten tr, .daten th, .daten td { display: block; }
  .daten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .daten { border-spacing: 0; }
  .daten tr { background: var(--karte); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .6rem; }
  .daten th, .daten td { padding: 0; background: transparent; border-radius: 0 !important; }
  .daten td { margin-top: .5rem; }
  .daten td::before { content: attr(data-titel); display: block; font-size: .75rem; color: var(--grau); }
  .daten caption { display: block; }
}
/* Hero: Beispiel-Montag in Farben der Abläufe */
.montag-bsp { margin: 1.1rem 0 0; padding: .85rem 1rem .9rem; border-radius: 12px; background: var(--grund); max-width: 34rem; }
.montag-bsp p { margin: 0 0 .45rem; font-size: .8125rem; color: var(--grau); }
.montag-bsp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.montag-bsp li { display: flex; gap: .6rem; align-items: baseline; font-size: .9375rem; line-height: 1.4; }
.montag-bsp .punkt { transform: translateY(.06em); }
.aufwand { max-width: 40rem; margin: 1rem 0 0; padding-left: .9rem; border-left: 3px solid var(--tinte); }
.vergleich-preis { max-width: 46rem; margin: .8rem 0 0; color: var(--tinte); }
/* schmal: Modell oben im Bild, die erste Karte beginnt darunter (sie ist höher als der Bildschirm) */
@media (max-width: 1099px) { .szene:first-child { align-items: flex-start; padding-top: 44svh; } }
/* sehr schmal: lange Wörter („Montagsübersicht“) dürfen trennen statt über die Karte zu laufen */
@media (max-width: 420px) { .szene h2, .abschnitt h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } }
/* manueller Weg: kein vierter Preis, sondern das Gespräch */
.paket.individuell { margin-top: .6rem; max-width: 46rem; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(7, 45, 89, .28); }
.paket.individuell .preis { color: var(--grau); }
/* Startadresse ohne Weiterleitung (nur ohne Middleware sichtbar): die drei Sprachen */
.wahl { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 34rem; }
.wahl a { display: grid; gap: .25rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--karte); border: 1px solid rgba(7, 45, 89, .1); text-decoration: none; transition: border-color .2s ease; }
.wahl a:hover { border-color: rgba(7, 45, 89, .35); }
.wahl b { font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; }
.wahl span { color: var(--grau); }
/* 404: Englisch zuerst, darunter Deutsch und Spanisch */
.fehler-sprache { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--linie); }
.rechtstext .fehler-sprache h2 { font-size: 1.4rem; letter-spacing: -.02em; margin: 0; }
.fehler-sprache p { margin-top: .5rem; color: var(--grau); }
.fehler-sprache a { color: var(--tinte); text-underline-offset: .22em; }