/* Bausteine aus dem Story-Prototyp (1:1 übernommen) — Ergänzungen für die echte Seite stehen am Ende. */
/* Layout: Bild zuerst. Jedes Kapitel öffnet mit einem Foto, Text bleibt kurz daneben oder darunter. Links eine Kursskala als Flugroute mit Höhen in Michroma. Farben, Schriften, Hexagon-Porträts, Liniensymbole und Signal-Buttons exakt nach Branding Guidelines 2.0. Eine Farbwelt, bewusst ohne Dark-Mode-Umschaltung. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--weiss);color:var(--anthrazit);font-family:var(--f);font-size:1.0625rem;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--weiss)}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;color:var(--anthrazit)}
h3{font-weight:600;letter-spacing:-.01em;line-height:1.25;font-size:1.25rem}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
.zahl{font-family:var(--f-zahl);font-variant-numeric:tabular-nums}
.label{font-family:var(--f-marke);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tief)}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* Buttons nach CI: Signal = Handlung */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;border-radius:2px;padding:14px 24px;cursor:pointer;text-decoration:none;border:1px solid var(--signal);background:var(--signal);color:var(--anthrazit)}
.btn:hover{filter:brightness(1.05)}
.btn.zweit{background:transparent;border-color:var(--anthrazit);color:var(--anthrazit)}
.btn.zweit:hover{background:var(--anthrazit);color:var(--weiss);filter:none}
.btn.klein{padding:10px 18px;font-size:.9375rem}

/* Kopf mit Kursskala */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.kopf svg{height:26px;width:auto}
.kopf nav{display:flex;align-items:center;gap:28px;font-size:.9375rem}
.kopf nav a.nv{color:var(--anthrazit);text-decoration:none;display:none}
.kopf nav a.nv:hover{color:var(--tief)}
@media (min-width:860px){.kopf nav a.nv{display:inline}}
/* Handy: Logo bleibt laut CI mind. 160 px breit, darum rückt der Termin-Knopf enger und bricht nie um */
@media (max-width:420px){.kopf .wrap{gap:12px}.kopf nav .btn.klein{padding-inline:14px;white-space:nowrap}}
.skala{position:relative;height:10px;border-top:1px solid var(--linie);background:repeating-linear-gradient(90deg,var(--linie) 0 1px,transparent 1px 2.5%) top/100% 5px no-repeat}
.skala i{position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--tief)}
.skala b{position:absolute;top:-4px;left:0;width:2px;height:12px;background:var(--tief);transform:translateX(-1px)}

/* Flugroute links */
.flug{position:relative}
.flug::before{display:none}
.kap,.hero{overflow:clip}
.kap{position:relative;padding-block:clamp(72px,10vw,136px)}
.kap .wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
.hoehe{position:relative;z-index:2;--bgh:var(--weiss)}
.hoehe::after{content:"";position:absolute;left:50%;top:-400px;bottom:-400px;width:1px;background:var(--linie);z-index:-1}
.hoehe span{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:.5rem}
.hoehe span::before{content:"";width:11px;height:10px;flex:none;background:var(--linie);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hoehe i{font-style:normal;writing-mode:vertical-rl;transform:rotate(180deg);background:var(--bgh);padding:8px 0;font-family:var(--f-marke);font-size:.5625rem;letter-spacing:.2em;color:var(--stein);white-space:nowrap}
.hoehe.an span::before{background:var(--tief)}
.nebel .hoehe{--bgh:var(--nebel)}
.dunkel .hoehe{--bgh:var(--anthrazit)}
.dunkel .hoehe::after{background:var(--linie-d)}
@media (max-width:760px){.kap .wrap{grid-template-columns:minmax(0,1fr)}.hoehe{display:none}}
.inhalt{min-width:0}
.kopfzeile{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:760px}
.kopfzeile .kurz{margin-top:0}
.kopfzeile .label{margin-bottom:-4px}
.dunkel{background:var(--anthrazit);color:var(--nebel)}
.dunkel h2,.dunkel h3{color:var(--weiss)}
.dunkel .label{color:var(--petrol)}
.dunkel .hoehe i{color:#8D9A9D}
.dunkel .hoehe span::before{background:var(--linie-d)}
.dunkel .hoehe.an span::before{background:var(--petrol)}
.nebel{background:var(--nebel)}
.h-xl{font-size:clamp(3rem,7.6vw,6.4rem)}
.h-l{font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:17ch}
.kurz{font-size:clamp(1.125rem,1.5vw,1.25rem);font-weight:300;line-height:1.55;max-width:34ch;margin-top:22px;color:var(--anthrazit)}
.dunkel .kurz{color:var(--nebel)}
.klein{font-size:.8125rem;color:var(--stein);line-height:1.55;max-width:62ch}
.dunkel .klein{color:#9AA8AB}

/* Fotoplätze: kühl, ruhig, Platz für Text */
.foto{position:relative;overflow:hidden;margin:0;max-width:100%;background:#9DB9BC}
.foto::before{content:"";position:absolute;inset:0;background:var(--bg,linear-gradient(165deg,#C5D8DA 0%,#8FB0B4 55%,#4D7B80 100%))}
.foto::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.foto figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;font-size:.8125rem;line-height:1.4;color:var(--weiss);text-shadow:0 1px 10px rgba(0,0,0,.3);max-width:46ch}
.foto figcaption .zahl{display:inline-block;font-size:.6875rem;background:rgba(22,24,23,.55);padding:2px 7px;border-radius:2px;margin-right:6px;text-shadow:none}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.foto.bild figcaption{display:none}
.foto .ki{position:absolute;right:10px;top:10px;z-index:2;font-family:var(--f-zahl);font-size:.625rem;letter-spacing:.04em;background:rgba(22,24,23,.6);color:#fff;padding:2px 6px;border-radius:2px}
.r-21{aspect-ratio:21/9}.r-16{aspect-ratio:16/9}.r-4{aspect-ratio:4/5}.r-3{aspect-ratio:3/2}
@media (max-width:700px){.r-21{aspect-ratio:4/3}}
/* Crew-Ausweis (Entscheidung Ben 26.10.2026, ersetzt den Hexagon-Rahmen der Branding Guidelines 2.0): Hochformat 4:5,
   gerade Kanten, Name und Rangstreifen unten im Foto. Am Handy rutscht die Aufgabe unter das Foto, damit nichts das Gesicht verdeckt. */
.ausweis{aspect-ratio:4/5;border-radius:2px;background:var(--cockpit)}
.ausweis img{object-position:50% 28%}
.ausweis .band{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:56px 16px 14px;background:linear-gradient(rgba(22,24,23,0),rgba(22,24,23,.88) 62%)}
.ausweis .band h3,.ausweis .band p{margin:0;color:var(--weiss);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.ausweis .band .rang{margin-top:6px}
.ausweis .band .rang i b{background:var(--petrol)}
.ausweis .band .rang span{color:#C3D3D5}
.ausweis.initialen .ini{padding-bottom:22%}
.aufgabe-m{display:none;font-size:.8125rem;color:var(--stein);margin-top:-4px}
@media (max-width:540px){.ausweis .band{padding:40px 10px 10px}.ausweis .band .aufg{display:none}.aufgabe-m{display:block}}
.ausweis-link{display:block;color:inherit;text-decoration:none}
.ausweis-link img{transition:transform .5s}
.ausweis-link:hover img{transform:scale(1.03)}
.ausweis-link:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
.person .kennen{font-size:.875rem;font-weight:600;color:var(--tief);text-decoration:none}
.person .kennen::after{content:" →"}
.person .kennen:hover{text-decoration:underline}
[hidden]{display:none!important}

/* Hero: Text links, großes Foto rechts, wechselt mit dem Ziel */
.hero{padding-block:clamp(40px,6vw,80px) clamp(64px,8vw,110px)}
.hero .raster{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,1fr);gap:0 clamp(28px,4vw,64px);align-items:center}
@media (max-width:960px){.hero .raster{grid-template-columns:var(--rail) minmax(0,1fr)}.hero .heroFoto{grid-column:2;order:-1;margin-bottom:28px}}
@media (max-width:760px){.hero .raster{grid-template-columns:minmax(0,1fr)}.hero .heroFoto{grid-column:1}}
.heroFoto{aspect-ratio:4/5;max-height:78vh}
@media (max-width:960px){.heroFoto{aspect-ratio:4/3}}
.ziele{margin-top:36px;border-top:1px solid var(--linie);max-width:560px}
.ziel{all:unset;box-sizing:border-box;display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:14px 2px;border-bottom:1px solid var(--linie);cursor:pointer}
.ziel:focus-visible{outline:2px solid var(--tief)}
.ziel i{width:18px;height:16px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--anthrazit);position:relative}
.ziel i::after{content:"";position:absolute;inset:1.5px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--weiss)}
.ziel[aria-checked="true"] i{background:var(--tief)}
.ziel[aria-checked="true"] i::after{background:var(--tief)}
.ziel b{font-weight:400;font-size:clamp(1.1rem,1.8vw,1.3rem)}
.alter{margin-top:24px;max-width:560px;display:grid;gap:8px}
.alter p{font-size:1.125rem;font-weight:300}
.alter output{font-family:var(--f-zahl);color:var(--tief)}
input[type=range]{width:100%;accent-color:var(--tief);height:28px}
.dunkel input[type=range]{accent-color:var(--petrol)}
.los{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.los p{font-size:.875rem;color:var(--stein);max-width:28ch}

/* Zwei Spalten */
.spalten{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
@media (max-width:960px){.spalten{grid-template-columns:minmax(0,1fr)}}
.oben-bild{margin-bottom:clamp(40px,6vw,72px)}

/* Kapitel 1 */
.schaetz{display:grid;gap:16px;margin-top:32px;max-width:420px}
.schaetz .wert{font-family:var(--f-zahl);font-size:clamp(2.4rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.03em}
.ergebnis{background:var(--nebel);padding:clamp(22px,3vw,34px);display:grid;gap:18px}
.balken{display:grid;gap:14px}
.bk .t{display:flex;justify-content:space-between;gap:12px;font-size:.9375rem}
.bk .t .zahl{color:var(--anthrazit)}
.bk .spur{height:6px;background:var(--weiss);margin-top:6px;position:relative}
.bk .spur i{position:absolute;inset:0 auto 0 0;background:var(--tief);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bk.du .spur i{background:var(--signal)}
.ergebnis .satz{font-size:1.125rem;font-weight:300;line-height:1.5}
.ergebnis[data-zu="true"] .balken,.ergebnis[data-zu="true"] .satz{filter:blur(7px);opacity:.4;user-select:none}
.ergebnis[data-zu="false"] .hinweis{display:none}

/* Kapitel 2 dunkel */
/* Gegenwind: stilisierte 100-€-Scheine (bewusst nicht das echte Euro-Design) — farbig ist, was der Schein noch kauft.
   Zwei deckungsgleiche Ebenen: unten schraffiert mit heller Schrift, oben Petrol mit dunkler Schrift, per clip-path gekürzt. */
.scheine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.schein{display:grid;gap:10px;align-content:start}
.geldschein{position:relative;aspect-ratio:2/1;border:1px solid var(--petrol);border-radius:2px;overflow:hidden}
.geldschein span{position:absolute;inset:0;padding:10px 12px;font-family:var(--f-zahl);font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1;letter-spacing:-.02em}
.geldschein .lage{color:#9AA8AB;background:repeating-linear-gradient(135deg,transparent 0 7px,var(--linie-d) 7px 8px)}
.geldschein .kauf{color:var(--anthrazit);background:var(--petrol)}
.geldschein::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.schein p{margin:0;display:grid;gap:2px}
.schein b{font-family:var(--f-zahl);font-weight:400;font-size:clamp(.95rem,1.4vw,1.1rem);color:var(--weiss)}
.schein small{font-size:.8125rem;color:#9AA8AB}
.folge{margin-top:24px;font-size:1.25rem;font-weight:300;max-width:30ch;color:var(--weiss)}

/* Kapitel 3: Kubus */
.kubus-feld{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(40px,6vw,72px)}
@media (max-width:900px){.kubus-feld{grid-template-columns:minmax(0,1fr)}}
.kubus svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.kubus path{transition:opacity .25s}
.kubus.fokus path{opacity:.18}
.kubus.fokus path.an{opacity:1}
.kubus text{font-family:"Michroma",sans-serif;font-size:3.3px;letter-spacing:.5px;fill:#fff;text-anchor:middle}
.bereiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie)}
@media (max-width:560px){.bereiche{grid-template-columns:minmax(0,1fr)}}
.bereich{all:unset;box-sizing:border-box;cursor:pointer;padding:22px 20px 22px 0;border-bottom:1px solid var(--linie);display:grid;gap:8px;align-content:start}
@media (min-width:561px){.bereich:nth-child(even){padding-left:24px;border-left:1px solid var(--linie)}}
.bereich:focus-visible{outline:2px solid var(--tief)}
.bereich svg{width:28px;height:28px}
.bereich span{font-size:.875rem;color:var(--stein)}
.bereich:hover h3,.bereich[aria-pressed="true"] h3{color:var(--tief)}

/* Kapitel 4 */
.panel{background:var(--weiss);border:1px solid var(--linie);padding:clamp(22px,3vw,34px);display:grid;gap:20px;min-width:0}
.feld{display:grid;gap:6px}
.feld .t{display:flex;justify-content:space-between;gap:12px;font-size:.9375rem;font-weight:600}
.feld output{font-family:var(--f-zahl);color:var(--tief);font-weight:400}
.gross{font-family:var(--f-zahl);font-size:clamp(1.35rem,5.6vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
.sub{font-size:.9375rem;color:var(--stein)}
.teil{display:grid;height:10px;grid-template-columns:var(--a,30%) 1fr;gap:3px}
.teil i{background:var(--signal)}.teil i+i{background:var(--tief)}
.teil-l{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--stein);margin-top:6px}
details{border-top:1px solid var(--linie);padding-top:12px;font-size:.8125rem;color:var(--stein)}
summary{cursor:pointer;color:var(--tief);font-weight:600}
details dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0}
details dt{font-family:var(--f-zahl);color:var(--anthrazit)}
details dd{margin:0}
.bahnen{display:grid;gap:12px}
.bahn{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.875rem}
.bahn .spur{height:6px;background:var(--nebel);position:relative}
.bahn .spur i{position:absolute;inset:0 auto 0 0;background:var(--tief)}
.bahn:first-child .spur i{background:#A9B6B8}

/* Kapitel 5 dunkel */
.wahr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--linie-d)}
@media (max-width:900px){.wahr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.wahr{grid-template-columns:minmax(0,1fr)}}
.wahr div{padding:24px 22px 24px 0;border-bottom:1px solid var(--linie-d)}
.wahr p{margin-top:8px;color:#AEBBBD;font-size:.9375rem}

/* Kapitel 6 */
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:48px}
@media (max-width:900px){.crew{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.crew{gap:28px 16px}.person h3{font-size:1rem}.person blockquote{font-size:.8125rem}}
.person{display:grid;gap:12px;align-content:start}
.person .foto figcaption{left:22%;right:22%;bottom:12%;font-size:.75rem;text-align:center}
.rang{display:flex;align-items:center;gap:10px}
.rang i{display:grid;gap:2px;width:22px;flex:none}
.rang span{min-width:0}
@media (max-width:540px){.rang{align-items:flex-start;gap:8px}.rang i{width:16px;margin-top:3px}.rang span{letter-spacing:.08em;font-size:.5rem;line-height:1.5;overflow-wrap:anywhere}}
.rang i b{height:2px;background:var(--tief)}
.rang span{font-family:var(--f-marke);font-size:.5625rem;letter-spacing:.18em;color:var(--stein);text-transform:uppercase}
.person blockquote{margin:0;font-size:.9375rem;font-weight:300;line-height:1.55;color:var(--stein)}
.foto.initialen{background:var(--anthrazit)}
.foto.initialen::before,.foto.initialen::after{display:none}
.foto .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-marke);font-size:1.6rem;letter-spacing:.1em;color:var(--petrol)}
.vier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linie)}
@media (max-width:560px){.vier{grid-template-columns:minmax(0,1fr)}}
.vier div{padding:22px 20px 22px 0;border-bottom:1px solid var(--linie)}
@media (min-width:561px){.vier div:nth-child(even){padding-left:24px;border-left:1px solid var(--linie)}}
.vier p{margin-top:8px;color:var(--stein);font-size:.9375rem}
.haken{display:grid;gap:8px}
.hk{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--linie);border-radius:2px;font-size:.9375rem}
.hk i{width:16px;height:14px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--linie)}
.hk[aria-pressed="true"]{border-color:var(--tief)}
.hk[aria-pressed="true"] i{background:var(--tief)}
.hk:focus-visible{outline:2px solid var(--tief)}
.bericht{margin-top:clamp(64px,9vw,104px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.bericht{grid-template-columns:minmax(0,1fr)}}
.bericht h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;letter-spacing:-.02em;margin-top:12px}
.bericht blockquote{margin:20px 0 0;font-size:1.0625rem;line-height:1.55;border-left:1px solid var(--tief);padding-left:18px}
.bericht .erg{margin-top:16px;font-weight:600}
.bericht .klein{margin-top:12px}

/* Kapitel 7 */
.fragen{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
.frage{min-width:0}
.frage h3{margin-bottom:10px;font-size:1.0625rem}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.w{font-size:.9375rem;border:1px solid #B5C3C5;background:var(--weiss);color:var(--anthrazit);border-radius:2px;padding:10px 16px;cursor:pointer}
.w:hover{border-color:var(--anthrazit)}
.w[aria-pressed="true"]{background:var(--anthrazit);color:var(--weiss);border-color:var(--anthrazit)}
.fragen input[type=text]{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #B5C3C5;border-radius:2px;width:100%;max-width:340px;background:var(--weiss);color:var(--anthrazit)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px;max-width:520px}
.slot{font-family:var(--f-zahl);font-size:.8125rem;line-height:1.4;padding:11px 8px;border:1px solid #B5C3C5;border-radius:2px;background:var(--weiss);cursor:pointer;color:var(--anthrazit)}
.slot[aria-pressed="true"]{background:var(--tief);border-color:var(--tief);color:var(--weiss)}
.ok{font-size:.9375rem;background:var(--nebel);padding:14px 16px;max-width:520px}
.karte{position:sticky;top:100px;background:var(--anthrazit);color:var(--nebel);border-radius:2px;overflow:hidden;box-shadow:0 36px 70px -36px rgba(22,24,23,.6)}
.karte .k1{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px}
.karte .art{font-family:var(--f-marke);font-size:.5625rem;letter-spacing:.24em;color:var(--petrol)}
.karte .route{display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,90px) minmax(0,1fr);gap:12px;align-items:end;padding:6px 24px 22px;border-bottom:1px dashed rgba(255,255,255,.2)}
.karte .route small{display:block;font-family:var(--f-marke);font-size:.5625rem;letter-spacing:.18em;color:#8D9A9D;margin-bottom:6px}
.karte .route b{display:block;font-weight:300;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;line-height:1.05;color:#fff;overflow-wrap:anywhere}
.karte .route .r{text-align:right}
.karte .route svg{width:100%;height:14px;margin-bottom:10px}
.karte dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14px;padding:20px 24px;margin:0}
.karte dt{font-family:var(--f-marke);font-size:.5rem;letter-spacing:.18em;color:#8D9A9D}
.karte dd{margin:4px 0 0;font-family:var(--f-zahl);font-size:clamp(.8125rem,2.4vw,.9375rem);color:#fff;overflow-wrap:normal;hyphens:none}
.karte dl.paar{grid-template-columns:repeat(2,minmax(0,1fr))}
.kopfzeile .kurz a{color:var(--tief)}
.karte .themen{padding:18px 24px 22px;border-top:1px dashed rgba(255,255,255,.2)}
.karte h4{margin:0 0 12px;font-family:var(--f-marke);font-size:.5rem;letter-spacing:.18em;color:#8D9A9D;font-weight:400}
.karte ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:w}
.karte li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.9375rem;color:#C9D6D7;counter-increment:w}
.karte li::before{content:counter(w);font-family:var(--f-zahl);font-size:.75rem;color:var(--petrol);padding-top:3px}
.karte li b{font-weight:600;color:#fff}
.karte .abriss{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;background:var(--cockpit);border-top:1px dashed rgba(255,255,255,.2)}
.karte .abriss span{font-size:.8125rem;color:#9AA8AB}
.karte .abriss b{color:var(--weiss);font-weight:600}
.aktion .zur{all:unset;cursor:pointer;display:inline-block;margin-top:12px;font-size:.875rem;color:var(--tief);text-decoration:underline}
.aktion .zur:focus-visible{outline:2px solid var(--tief);outline-offset:3px}

/* Standorte und Fuß */
.orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);margin-top:40px}
@media (max-width:640px){.orte{grid-template-columns:minmax(0,1fr)}}
.ort h3{margin-top:14px}
.ort p{color:var(--stein);font-size:.9375rem}
footer{background:var(--anthrazit);color:#9AA8AB;padding-block:48px;font-size:.875rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer svg{height:28px;width:auto}

/* Bordbuch: Google-Bewertungen */
.sterne{display:inline-flex;gap:3px;vertical-align:-2px}
.sterne i{width:14px;height:14px;background:var(--tief);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.dunkel .sterne i{background:var(--petrol)}
.vertrauen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;font-size:.875rem;color:var(--stein);text-decoration:none}
.vertrauen b{font-family:var(--f-zahl);font-weight:500;color:var(--anthrazit)}
.vertrauen:hover u{color:var(--tief)}
.bilanz{display:flex;align-items:flex-end;gap:clamp(18px,3vw,36px);flex-wrap:wrap;padding-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--linie);margin-bottom:clamp(28px,4vw,40px)}
.bilanz .note{font-family:var(--f-zahl);font-size:clamp(3rem,7vw,5rem);line-height:.9;letter-spacing:-.03em}
.bilanz p{margin:0;font-size:.9375rem;color:var(--stein)}
.bilanz .btn{margin-left:auto}
.schreiben{font-size:.875rem;color:var(--tief);align-self:center}
@media (max-width:640px){.bilanz .btn{margin-left:0}}
.stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,32px)}
@media (max-width:960px){.stimmen{grid-template-columns:minmax(0,1fr)}}
.stimme{background:var(--weiss);border:1px solid var(--linie);padding:clamp(22px,3vw,30px);display:grid;gap:16px;align-content:start;margin:0}
.stimme blockquote{margin:0;font-size:1.0625rem;font-weight:300;line-height:1.55}
.stimme figcaption{display:flex;justify-content:space-between;gap:12px;font-size:.8125rem;color:var(--stein);border-top:1px solid var(--linie);padding-top:14px}
.stimme figcaption b{color:var(--anthrazit);font-weight:600}
.stimme .kopf-s{display:flex;justify-content:space-between;align-items:center}
.stimme .anz{font-family:var(--f-marke);font-size:.5625rem;text-transform:uppercase;color:var(--stein)}
/* Medien */
.medien{margin-top:clamp(56px,8vw,96px)}
.medien h3{font-size:1.25rem;font-weight:400;margin:6px 0 20px}
.artikel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,32px)}
@media (max-width:760px){.artikel{grid-template-columns:minmax(0,1fr)}}
.artikel a{display:grid;gap:10px;padding:22px 0;border-top:1px solid var(--anthrazit);color:inherit;text-decoration:none}
.artikel a:hover strong{color:var(--tief)}
.artikel .quelle{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-marke);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stein)}
.artikel strong{font-size:1.1875rem;font-weight:400;line-height:1.35;transition:color .2s}
.artikel .mehr{font-size:.875rem;color:var(--tief)}
.los .vertrauen{flex-basis:100%;margin-top:6px}
.anz{border:1px solid var(--linie);padding:1px 6px;letter-spacing:.12em}

/* ===================================================================
   Ergänzungen für die echte Seite (nicht im Prototyp)
   =================================================================== */
/* Zugänglichkeit */
.sprung{position:absolute;left:12px;top:-80px;z-index:40;background:var(--anthrazit);color:var(--weiss);padding:10px 16px;border-radius:2px;text-decoration:none}
.sprung:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Logo als echte Datei (img statt eingebettetes SVG), Höhen wie im Prototyp */
.kopf .logo{display:block;line-height:0;flex:none}
/* Logo gut lesbar (Ben, 26.10.2026): 40 px am Computer, 34 px Tablet, 30 px Handy (CI: horizontal mind. 160 px breit) */
.kopf .logo img{height:40px;width:auto;display:block}
@media (max-width:1024px){.kopf .logo img{height:34px}}
@media (max-width:600px){.kopf .logo img{height:30px}}
.kopf .kz{display:none}
@media (max-width:520px){.kopf .lg{display:none}.kopf .kz{display:inline}}
.kopf nav a.nv[aria-current]{color:var(--tief)}

/* Fuß mit Seitenlinks (am Handy die einzige Navigation neben dem Termin-Knopf) */
footer a{color:#9AA8AB;text-decoration:none}
footer a:hover{color:var(--weiss)}
.fuss-marke{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
.fuss-marke img{height:28px;width:auto;display:block}
.fuss-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss-unten{flex-basis:100%;display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;border-top:1px solid var(--linie-d);padding-top:20px;margin-top:8px;font-size:.8125rem}
.fuss-unten p{max-width:72ch}

/* Brotkrumen = optionales Michroma-Label der Kopfzeile */
.brot{font-family:var(--f-marke);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stein);display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:-4px}
.brot a{color:var(--tief);text-decoration:none}
.brot a:hover{text-decoration:underline}
.dunkel .brot{color:#9AA8AB}
.dunkel .brot a{color:var(--petrol)}

/* Häufige Fragen */
.faq{display:grid;max-width:760px;border-top:1px solid var(--linie)}
.faq details{border-top:0;border-bottom:1px solid var(--linie);padding:0;font-size:1rem;color:var(--anthrazit)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-weight:600;font-size:1.0625rem;color:var(--anthrazit)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:12px;margin-top:-6px;background:var(--linie);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.faq details[open] summary::after{background:var(--tief)}
.faq summary:hover{color:var(--tief)}
.faq details p{padding:0 0 22px;color:var(--stein);max-width:62ch;font-size:.9375rem}

/* Schritte (So rechnet der Rechner, So läuft es) */
.schritte{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--linie);counter-reset:s;max-width:860px}
.schritte li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--linie);counter-increment:s}
.schritte li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-zahl);color:var(--tief);padding-top:2px}
.schritte p{color:var(--stein);font-size:.9375rem;margin-top:4px}
.dunkel .schritte,.dunkel .schritte li{border-color:var(--linie-d)}
.dunkel .schritte li::before{color:var(--petrol)}
.dunkel .schritte p{color:#AEBBBD}
.quellen{margin-top:22px}
.quellen a{color:inherit}

/* Rechner-Übersicht */
.karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,64px) clamp(24px,4vw,48px)}
@media (max-width:700px){.karten{grid-template-columns:minmax(0,1fr)}}
.rk{display:grid;gap:14px;color:inherit;text-decoration:none;align-content:start}
.rk h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.rk p{color:var(--stein);font-size:.9375rem}
.rk .mehr{color:var(--tief);font-weight:600;font-size:.9375rem}
.rk:hover h2{color:var(--tief)}

/* Rechner im Panel: Spur auf weißem Grund, ungünstiges Szenario grau */
.panel .bk .spur{background:var(--nebel)}
.bk.grau .spur i{background:#A9B6B8}
.bk small{display:block;font-size:.8125rem;color:var(--stein);margin-top:4px}
.szene{display:grid;gap:10px}
.szene .wahl{gap:6px}
.szene .w{padding:8px 12px;font-size:.875rem}

/* Boarding: Buchungsknopf ohne Link, Mail als zweiter Weg */
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none}
.weg2{font-size:.875rem;color:var(--stein);margin-top:10px}
.weg2 a{color:var(--tief)}

/* Kennzeichnung „Beispiel“ außerhalb der Bewertungen */
.marke-bsp{font-family:var(--f-marke);font-size:.5625rem;text-transform:uppercase;color:var(--stein);margin-left:10px;vertical-align:2px}

/* Platzhalter für fehlende Angaben, sichtbar markiert */
.ph{font-family:var(--f-zahl);font-size:.92em;color:var(--stein);border-bottom:1px dashed var(--stein)}

/* Rechtstexte */
.recht{max-width:760px;display:grid;gap:36px}
.recht section{display:grid;gap:12px}
.recht h2{font-size:1.375rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.recht p,.recht li{font-size:1rem}
.recht ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.recht a{color:var(--tief)}
.recht dl{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 20px;margin:0}
@media (max-width:560px){.recht dl{grid-template-columns:minmax(0,1fr);gap:2px}.recht dd{margin-bottom:10px}}
.recht dt{color:var(--stein)}
.recht dd{margin:0;min-width:0;overflow-wrap:anywhere}
.entwurf{background:var(--nebel);padding:16px 18px;font-size:.9375rem;max-width:760px}

/* Bordkarte: Logo als Datei; Sterne mit leeren Plätzen für echte Bewertungen unter 5 */
.karte .k1 img{height:28px;width:auto;display:block}
@media (max-width:420px){.karte .k1 img{height:22px}}
.ok a{color:var(--tief)}
.sterne i.leer{background:var(--linie)}
/* Bordkarte: langes Ziel („Vermögen und Unternehmen“) am Handy nicht mitten im Wort zerreißen */
.karte .route{grid-template-columns:auto minmax(24px,.4fr) minmax(0,1fr)}
@media (max-width:420px){.karte .route b{font-size:1.25rem}}
.karte .route b{overflow-wrap:break-word;hyphens:auto}
/* Fokus auf dunklem Grund sichtbar (Tief auf Anthrazit wäre unter 3:1) */
.dunkel :focus-visible,footer :focus-visible,.karte :focus-visible{outline-color:var(--petrol)}
/* Halber Stern für echte Noten (z. B. 4,5) */
.sterne i.halb{background:linear-gradient(90deg,var(--tief) 50%,var(--linie) 50%)}
.dunkel .sterne i.halb{background:linear-gradient(90deg,var(--petrol) 50%,var(--linie-d) 50%)}

/* ===================================================================
   Cockpit-Bühne der Startseite (Entscheidung Ben 16.10.2026: „eine eigene Welt beim Öffnen“)
   Dunkler erster Bildschirm, Abflugtafel, Foto randlos, Startsequenz. Bewegung nur über
   transform/opacity; bei „weniger Bewegung“ schaltet die Regel ganz oben alles ab.
   =================================================================== */
.dunkel h1{color:var(--weiss)}
.dunkel .alter output{color:var(--petrol)}
.dunkel .los p,.dunkel .vertrauen{color:#9AA8AB}
.dunkel .vertrauen b{color:var(--weiss)}
.dunkel .vertrauen:hover u{color:var(--petrol)}
.dunkel .sterne i.leer{background:var(--linie-d)}

.cockpit{position:relative;min-height:calc(100svh - 64px);display:grid;align-items:center}
.cockpit>.wrap{width:100%}
.cockpit .inhalt{position:relative;z-index:1}
.kubus-buehne{position:absolute;z-index:0;left:max(-9vw,-140px);top:50%;width:min(82vh,860px);transform:translateY(-50%);opacity:.13;pointer-events:none}
.kubus-buehne svg{width:100%;height:auto;display:block}
@keyframes einrasten{from{opacity:0;transform:var(--von)}to{opacity:1;transform:none}}
.kubus-marke path{animation:einrasten 1.1s cubic-bezier(.2,.8,.2,1) both}
.kubus-marke path[data-f="links"]{--von:translate(-18px,-2px)}
.kubus-marke path[data-f="unten"]{--von:translate(12px,14px);animation-delay:.12s}
.kubus-marke path[data-f="oben"]{--von:translate(14px,-14px);animation-delay:.24s}

/* Foto: rechte Hälfte bis zum Bildschirmrand, weicher Übergang in die Bühne, zoomt langsam */
@media (min-width:961px){
  .cockpit .heroFoto{position:absolute;z-index:1;top:0;right:0;bottom:0;width:42vw;max-height:none;aspect-ratio:auto;margin:0}
  .cockpit .heroFoto img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
}
@media (max-width:960px){
  .cockpit{padding-top:0}
  .cockpit .heroFoto{position:relative;z-index:1;grid-column:1/-1;margin:0 calc(-1 * max(20px,env(safe-area-inset-left,0px))) 32px;height:min(56svh,560px);max-width:none;max-height:none;aspect-ratio:auto}
  .cockpit .heroFoto img{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
  .kubus-buehne{top:auto;bottom:-6%;left:-30%;width:130vw;transform:none}
}
@keyframes schweben{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.cockpit .heroFoto img{animation:schweben 24s ease-in-out infinite alternate;transform-origin:60% 40%}
.cockpit .heroFoto{background:transparent}
.cockpit .heroFoto::before,.cockpit .heroFoto::after{display:none}

/* Abflugtafel */
.tafel{border-top-color:var(--linie-d);max-width:580px}
.tafel-kopf,.tafel .ziel{grid-template-columns:22px minmax(0,1fr) 44px 92px;gap:14px}
.tafel-kopf{display:grid;padding:12px 2px 8px;font-family:var(--f-marke);font-size:.5rem;letter-spacing:.2em;color:#8D9A9D;border-bottom:1px solid var(--linie-d)}
.tafel-kopf span:last-child{text-align:right}
.tafel .ziel{border-bottom-color:var(--linie-d)}
.tafel .ziel b{font-family:var(--f-zahl);font-weight:500;font-size:clamp(.875rem,1.25vw,1rem);text-transform:uppercase;letter-spacing:.04em;color:#C9D6D7}
.tafel .ziel .gate,.tafel .ziel .status{font-family:var(--f-zahl);font-size:.8125rem;color:#8D9A9D;letter-spacing:.04em}
.tafel .ziel .status{text-align:right}
.tafel .ziel i{background:#8D9A9D}
.tafel .ziel i::after{background:var(--anthrazit)}
.tafel .ziel[aria-checked="true"] i,.tafel .ziel[aria-checked="true"] i::after{background:var(--petrol)}
.tafel .ziel[aria-checked="true"] b,.tafel .ziel:hover b{color:var(--weiss)}
.tafel .ziel[aria-checked="true"] .status{color:var(--petrol)}
.tafel .ziel:focus-visible{outline-color:var(--petrol)}
@media (max-width:420px){
  .tafel-kopf,.tafel .ziel{grid-template-columns:18px minmax(0,1fr) 28px 74px;gap:10px}
  .tafel .ziel .gate,.tafel .ziel .status{font-size:.6875rem}
}

/* Kopf über der Bühne: dunkel, dunkle Logo-Fassung; wird beim Weiterscrollen hell */
.kopf{transition:background-color .35s}
.kopf .logo .logo-nacht{display:none}
.kopf.nacht{background:var(--anthrazit)}
.kopf.nacht .logo .logo-tag{display:none}
.kopf.nacht .logo .logo-nacht{display:block}
.kopf.nacht nav a.nv{color:var(--nebel)}
.kopf.nacht nav a.nv:hover,.kopf.nacht nav a.nv[aria-current]{color:var(--petrol)}
.kopf.nacht .skala{border-top-color:var(--linie-d);background-image:repeating-linear-gradient(90deg,var(--linie-d) 0 1px,transparent 1px 2.5%)}
.kopf.nacht .skala i,.kopf.nacht .skala b{background:var(--petrol)}
.kopf.nacht :focus-visible{outline-color:var(--petrol)}
html:has(.kopf.nacht) body::before{background:var(--anthrazit)}
/* nur die Teilstriche zeichnen sich ein (kein clip-path: der würde den Höhenmesser darunter abschneiden) */
@keyframes skala-auf{from{background-size:0% 5px}to{background-size:100% 5px}}
.kopf.anflug .skala{animation:skala-auf 1.3s .15s cubic-bezier(.2,.8,.2,1) both}

/* Höhenmesser: wandert mit der Kursskala und zeigt die Höhe des aktuellen Kapitels */
.skala .alt{position:absolute;top:7px;left:0;font-family:var(--f-marke);font-size:.5rem;letter-spacing:.16em;line-height:1.4;color:var(--tief);background:var(--weiss);border:1px solid var(--linie);padding:2px 6px 1px;white-space:nowrap;pointer-events:none}
.kopf.nacht .skala .alt{background:var(--anthrazit);border-color:var(--linie-d);color:var(--petrol)}

/* Überblick: drei Schichten wie die drei Flächen des Kubus */
.schichten{display:grid;border-top:1px solid var(--linie)}
.schicht{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--linie)}
@media (max-width:560px){.schicht{grid-template-columns:minmax(0,1fr)}}
.schicht:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
.schicht .label{display:flex;align-items:center;gap:10px;margin:0}
.schicht .farbe{width:14px;height:12px;flex:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.schicht ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.schicht li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.0625rem;line-height:1.3}
.schicht li svg{width:24px;height:24px;flex:none}
.schicht li small{display:block;font-weight:400;font-size:.8125rem;color:var(--stein)}
.schicht:hover li,.schicht[aria-pressed="true"] li{color:var(--tief)}
.kubus path{cursor:pointer}

/* ===================================================================
   Wow-Bausteine der Startseite (Ben, 26.10.2026): A lebendige Tafel · B Live-Instrument · C Pre-Flight-Intro.
   Bewegung nur über transform/opacity; bei „weniger Bewegung“ schaltet die Regel ganz oben alles ab,
   das Intro läuft dann gar nicht (js/intro-vorab.js).
   =================================================================== */
/* A · Tafel: Titelzeile mit Ortszeit, Zeilen klappen nacheinander auf, BOARDING blinkt ruhig */
.tafel-titel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 2px 2px;font-family:var(--f-marke);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--petrol)}
.tafel-titel .uhr{font-family:var(--f-zahl);font-size:.8125rem;letter-spacing:.06em;color:#C9D6D7}
@keyframes zeile-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tafel.aufbau .ziel{animation:zeile-auf .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(120ms + var(--i,0) * 90ms)}
@keyframes blinken{50%{opacity:.35}}
.tafel .ziel[aria-checked="true"] .status{animation:blinken 1.8s ease-in-out infinite}

/* B · Live-Instrument unter der Tafel: zählt die verlorene Kaufkraft mit, führt zum Kapitel Gegenwind */
.instrument{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 16px;max-width:580px;padding:14px 2px 16px;border-bottom:1px solid var(--linie-d);color:inherit;text-decoration:none}
.instrument .i-label{font-family:var(--f-marke);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:#8D9A9D}
.instrument .i-wert{font-family:var(--f-zahl);font-size:clamp(1.05rem,1.7vw,1.3rem);font-variant-numeric:tabular-nums;color:var(--petrol);white-space:nowrap}
.instrument .i-text{grid-column:1/-1;font-size:.8125rem;line-height:1.5;color:#9AA8AB}
.instrument .quelle{display:block;font-size:.75rem;color:#7F8D90;margin-top:2px}
.instrument:hover .i-text{color:var(--nebel)}
.instrument:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

/* „Los geht's“: die Bühne hebt ab, dann geht es zur ersten Station */
.cockpit .inhalt,.cockpit .heroFoto{transition:transform .5s cubic-bezier(.6,0,.3,1),opacity .5s}
.cockpit.abheben .inhalt{transform:translateY(-48px);opacity:0}
.cockpit.abheben .heroFoto{transform:translateY(-28px);opacity:.35}

/* C · Pre-Flight-Intro: Vorhang in Anthrazit, das Hauptlogo setzt sich zusammen, Horizont, Satz — dann hebt der Vorhang ab */
.intro-vorhang,.intro-weiter{display:none}
html.intro .intro-vorhang{display:grid;place-items:center;position:fixed;inset:0;z-index:60;background:var(--anthrazit);animation:vorhang-hoch .6s 1.75s cubic-bezier(.65,0,.25,1) forwards}
html.intro.intro-schnell .intro-vorhang{animation:vorhang-schnell .3s ease forwards}
@keyframes vorhang-hoch{to{transform:translateY(-100%)}}
@keyframes vorhang-schnell{to{opacity:0;transform:translateY(-24px)}}
.intro-mitte{display:grid;justify-items:center;gap:26px;width:100%}
.intro-logo{width:min(420px,70vw);height:auto;overflow:visible}
.intro-logo .f{animation:einrasten .9s cubic-bezier(.2,.8,.2,1) both}
.intro-logo .f1{--von:translate(-260px,-20px)}
.intro-logo .f2{--von:translate(180px,200px);animation-delay:.12s}
.intro-logo .f3{--von:translate(200px,-200px);animation-delay:.24s}
@keyframes auftauchen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.intro-logo .wort{animation:auftauchen .6s .7s ease both}
.horizont{display:block;width:min(78vw,760px);height:1px;background:var(--petrol);animation:horizont .8s .95s cubic-bezier(.2,.8,.2,1) both}
@keyframes horizont{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.intro-satz{margin:0;font-weight:300;font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--nebel);animation:auftauchen .6s 1.1s ease both}
html.intro .intro-weiter{display:block;position:fixed;z-index:61;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));font:inherit;font-size:.8125rem;color:var(--nebel);background:transparent;border:1px solid var(--linie-d);border-radius:2px;padding:9px 14px;cursor:pointer;animation:knopf-weg .2s 2.3s forwards}
html.intro.intro-schnell .intro-weiter{animation:knopf-weg .15s forwards}
html.intro .intro-weiter:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
@keyframes knopf-weg{to{opacity:0;visibility:hidden}}
/* solange das Intro läuft, warten die Startbewegungen der Bühne */
html.intro .kubus-marke path,html.intro .kopf.anflug .skala{animation-play-state:paused}

/* ===================================================================
   Persönliche Seiten (/heidi/, Entscheidung Ben 26.10.2026): Kennenlernen, Bordkarte mit dieser Person, Weitersagen.
   Steckbrief nur mit dem, was die Person selbst freigibt; Video folgt.
   =================================================================== */
.person-kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:12px}
.person-kopf .ausweis{width:100%;max-width:420px}
@media (max-width:760px){.person-kopf{grid-template-columns:minmax(0,1fr)}.person-kopf .ausweis{max-width:240px}}
.person-text h1,.person-text h2{margin:14px 0 16px}
.person-text .kurz{max-width:44ch}
.person-text .empf{margin:14px 0 0;font-size:.9375rem;background:var(--nebel);padding:10px 14px;border-left:3px solid var(--tief)}
.aktionen{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:28px}
.steckbrief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:36px;max-width:980px}
@media (max-width:640px){.steckbrief{grid-template-columns:minmax(0,1fr)}}
.steckbrief .sb-ueber{grid-column:1/-1;max-width:62ch}
.steckbrief h3{font-size:1rem;margin-bottom:8px}
.steckbrief p{color:var(--stein)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:.875rem;border:1px solid var(--linie);background:var(--weiss);padding:6px 12px;border-radius:2px}
/* Video-Knopf (auch Karriere-Stimmen): Liniensymbol im liegenden Hexagon */
.play{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--tief);font-weight:600}
.play i{width:22px;height:19px;background:var(--tief);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);position:relative}
.play i::after{content:"";position:absolute;left:9px;top:5.5px;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.play[disabled]{cursor:default;color:var(--stein)}
.play[disabled] i{background:var(--linie)}
.play:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
.empfehlen{max-width:560px;display:grid;gap:10px;margin-top:28px}
.empfehlen label{font-weight:600;font-size:.9375rem}
.empfehlen .zeile{display:flex;flex-wrap:wrap;gap:10px}
.empfehlen input{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #B5C3C5;border-radius:2px;flex:1 1 220px;min-width:0;background:var(--weiss);color:var(--anthrazit)}
/* Bordkarte ausstellen (/bordkarte/, nur für die Crew) */
.ausstellen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:start;margin-top:36px}
@media (max-width:860px){.ausstellen{grid-template-columns:minmax(0,1fr)}}
.ausstellen .formular{display:grid;gap:14px}
.ausstellen label,.ausstellen legend{display:grid;gap:6px;font-size:.875rem;font-weight:600}
.ausstellen input,.ausstellen select,.ausstellen textarea{font:inherit;font-weight:400;font-size:1rem;padding:11px 13px;border:1px solid #B5C3C5;border-radius:2px;background:var(--weiss);color:var(--anthrazit);width:100%}
.ausstellen .zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ausstellen fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.ausstellen canvas{width:100%;max-width:540px;height:auto;display:block;border-radius:2px;box-shadow:0 30px 60px -34px rgba(22,24,23,.6)}
.ausstellen .aktionen{margin-top:18px}
.ausstellen .begleit{margin-top:18px;max-width:540px}
.ausstellen .zur{all:unset;cursor:pointer;margin-top:8px;font-size:.875rem;color:var(--tief);text-decoration:underline}
.ausstellen .zur:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
/* Was wir für dich tun (Stefan, 25.10.2026: in zwei Absätzen verstehen, was ihr macht) — gleich nach dem ersten Bildschirm */
.leistungen{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--linie)}
@media (max-width:900px){.leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.leistungen{grid-template-columns:minmax(0,1fr)}}
.leistungen li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 14px;padding:20px 0;border-bottom:1px solid var(--linie);align-content:start}
.leistungen svg{width:24px;height:24px;grid-row:span 2;margin-top:2px}
.leistungen h3{font-size:1.0625rem}
.leistungen p{font-size:.9375rem;color:var(--stein)}
.kurzweg{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:0;max-width:none;margin-top:36px}
@media (max-width:760px){.kurzweg{grid-template-columns:minmax(0,1fr)}}
.kurzweg li{border-bottom:0;border-top:2px solid var(--tief)}


/* Terminbuchung mit festen Zeitfenstern und Lotsen-Frage (Ben, 27.10.2026) — Bordkarte und Karriereseite */
.fragen input[type=email],.fragen input[type=tel]{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #B5C3C5;border-radius:2px;width:100%;max-width:340px;background:var(--weiss);color:var(--anthrazit)}
.kontakt{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.kontakt .klein{margin-top:6px}
.einw{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;line-height:1.5;color:var(--stein);max-width:520px}
.einw input{margin-top:3px;accent-color:var(--tief);flex:none}
.einw a{color:var(--tief)}
.fehler{font-size:.875rem;color:#9A3B1F;margin:6px 0 0}
.fehler:empty{display:none}
.honig{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.zeiten{display:grid;gap:10px}
.zeiten .tag{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center}
.zeiten .tag[hidden]{display:none}
.zeiten .tag h4{margin:0;font-family:var(--f-zahl);font-size:.75rem;letter-spacing:.04em;color:var(--stein);font-weight:400}
.zeiten .slots{display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.zeiten .slot{white-space:nowrap;padding:10px 12px}
.zeiten .mehr{all:unset;cursor:pointer;font-size:.875rem;color:var(--tief);text-decoration:underline;justify-self:start}
.zeiten .mehr:focus-visible,.slot:focus-visible,.gesicht:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
.lotse h3{margin:0 0 10px;font-size:1.0625rem}
.gesichter{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gesicht{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:6px;width:72px;padding:8px 4px;border:1px solid transparent;border-radius:2px;font-size:.8125rem;color:var(--anthrazit);text-align:center}
.gesicht img,.gesicht .ini{width:52px;height:65px;object-fit:cover;border-radius:2px;background:var(--nebel)}
.gesicht .ini{display:grid;place-items:center;font-family:var(--f-zahl);font-size:.875rem;color:var(--tief)}
.gesicht[aria-pressed="true"]{border-color:var(--tief);background:var(--nebel)}
.lotse-text{display:grid;gap:6px;margin-top:12px;font-size:.875rem;max-width:340px}
.lotse-text input{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #B5C3C5;border-radius:2px;background:var(--weiss);color:var(--anthrazit);width:100%;box-sizing:border-box}
.bestaetigt{background:var(--nebel);padding:22px 22px 18px;max-width:560px}
.bestaetigt h3{margin:0 0 10px}
.bestaetigt p{margin:0 0 10px;font-size:.9375rem}
.bestaetigt .aktionen{margin:16px 0 4px}

/* Seite „Dein Termin“ (Ben 28.10.2026, Paket 2): dieselbe Bordkarte wie in der Mail — hochkant, große Uhrzeit, Band unten */
.dt-karte{background:var(--cockpit);color:var(--weiss);max-width:460px;margin:8px 0 22px;border-radius:10px;overflow:hidden}
.dt-karte.aus{opacity:.62}
.dt-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px 0}
.dt-kopf span{font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.14em;color:var(--petrol)}
.dt-kopf em{font-style:normal;font-family:var(--f-zahl);font-size:.625rem;letter-spacing:.12em;border:1px solid var(--petrol);color:var(--petrol);padding:3px 6px}
.dt-held{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:14px 0 16px;margin:0 20px;border-bottom:2px dashed var(--linie-d)}
.dt-held span{display:block;font-family:var(--f-zahl);font-size:.75rem;letter-spacing:.1em;color:var(--petrol)}
.dt-held strong{display:block;font-size:2.75rem;line-height:1.05;font-weight:700;letter-spacing:-.02em}
.dt-held div:last-child{text-align:right}
.dt-held b{display:block;font-size:1.375rem;font-weight:400}
.dt-held div:last-child span{color:#8D9A9D;letter-spacing:0;font-family:var(--f);margin-top:2px}
.dt-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:0;padding:16px 20px 14px}
.dt-felder dt{font-family:var(--f-zahl);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:#8D9A9D}
.dt-felder dd{margin:4px 0 0;font-size:1.0625rem}
.dt-person{display:flex;align-items:center;gap:12px;padding:0 20px 16px}
.dt-person img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--petrol)}
.dt-person small{display:block;font-family:var(--f-zahl);font-size:.625rem;letter-spacing:.14em;color:#8D9A9D}
.dt-person b{font-weight:500}
.dt-band{background:#262A2B;padding:14px 20px 16px}
.dt-band small{display:block;font-family:var(--f-zahl);font-size:.625rem;letter-spacing:.14em;color:var(--petrol)}
.dt-band p{margin:6px 0 10px;font-size:.875rem;color:#C9D6D7}
.dt-balken{height:8px;background:#3a4244;border-radius:4px;overflow:hidden}
.dt-balken i{display:block;height:100%;background:var(--petrol)}
.dt-stand{display:flex;justify-content:space-between;font-size:.75rem;color:#8D9A9D;margin-top:8px}
.dt-stand b{color:var(--weiss)}
.dt-strich{height:22px;width:160px;margin-top:14px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 3px,#fff 3px 4px,transparent 4px 7px,#fff 7px 10px,transparent 10px 11px,#fff 11px 12px,transparent 12px 14px)}
.dt-aktionen{margin:4px 0 12px}
.dt-mehr{margin:0 0 18px}
.dt-zeiten{max-width:620px;margin:8px 0 18px}
.dt-zeiten .aktionen{margin-top:16px}
.dt-meldung{min-height:1px;margin:0 0 16px;max-width:620px}
.dt-meldung.gut{background:var(--nebel);border-left:4px solid var(--tief);padding:12px 14px}
.dt-meldung.fehler{background:#FFF4E5;border-left:4px solid #B26A00;padding:12px 14px}
.dt-weg{max-width:620px;margin:10px 0 18px}
.dt-weg ol{margin:0 0 12px;padding-left:20px}
.dt-weg li{margin:0 0 6px}
.dt-absage{margin:18px 0 0;font-size:.9375rem}
.dt-absage .btn{margin:0 8px}
@media (max-width:420px){.dt-held strong{font-size:2.375rem}}

/* Die Bewegung (Ben 28.10.2026): Wir-Geschichte als Steigflug — Linie durch die Mitte, Bildkarten links und rechts, große
   Jahreszahlen dahinter, die Spur füllt sich beim Scrollen (shared/js/bausteine/bewegung.js). Ohne JavaScript ist alles sichtbar. */
.bw-flug{padding-block:clamp(72px,10vw,128px) clamp(64px,9vw,112px);overflow:hidden}   /* nicht „.flug“: so heißt schon der Inhaltsbereich jeder Seite */
.bw-flug .wrap{display:block}
.bw-kopf{text-align:center;max-width:780px;margin:0 auto clamp(48px,7vw,88px)}
.bw-kopf h2{margin:16px 0 18px}
.bw-kopf p{color:#C9D6D7;font-size:1.0625rem;margin:0}
.bw-kennzahlen{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-family:var(--f-zahl);font-size:.75rem;letter-spacing:.08em;color:#8D9A9D}
.bw-kennzahlen b{color:var(--weiss);font-size:1.5rem;font-weight:500;letter-spacing:0;margin-right:6px}
.bw-strecke{position:relative;max-width:1180px;margin:0 auto;padding:10px 0}
.bw-strecke::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--linie-d)}
.bw-spur{position:absolute;left:50%;top:0;width:2px;margin-left:-1px;height:calc(var(--weg,0) * 100%);background:linear-gradient(var(--petrol),var(--signal));transition:height .15s linear}
.bw-spur::after{content:"";position:absolute;bottom:-7px;left:-6px;width:14px;height:14px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 6px rgba(227,162,74,.18),0 0 24px rgba(227,162,74,.6)}
.bw-etappe{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(48px,8vw,120px);align-items:center;margin:0 0 clamp(56px,8vw,110px)}
.bw-etappe:last-child{margin-bottom:0}
.bw-jahr{font-family:var(--f-marke);font-size:clamp(4.5rem,11vw,10rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(131,183,189,.32);letter-spacing:.02em;user-select:none}
.bw-etappe:nth-child(odd) .bw-karte{grid-column:1;grid-row:1}
.bw-etappe:nth-child(odd) .bw-jahr{grid-column:2;grid-row:1}
.bw-etappe:nth-child(even) .bw-karte{grid-column:2;grid-row:1}
.bw-etappe:nth-child(even) .bw-jahr{grid-column:1;grid-row:1;text-align:right}
.bw-punkt{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--anthrazit);border:2px solid var(--petrol);z-index:2}
.bw-hoehe{position:absolute;left:50%;top:50%;transform:translate(16px,-50%);font-family:var(--f-zahl);font-size:.625rem;letter-spacing:.14em;color:var(--petrol);white-space:nowrap}
.bw-etappe:nth-child(even) .bw-hoehe{transform:translate(calc(-100% - 16px),-50%)}
.bw-karte{background:var(--cockpit);border:1px solid var(--linie-d);border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.bw-karte .bw-bild{aspect-ratio:16/9;width:100%}
.bw-marke{position:absolute;top:14px;left:14px;z-index:2;background:var(--petrol);color:var(--anthrazit);font-family:var(--f-zahl);font-size:.75rem;font-weight:500;padding:4px 10px;border-radius:20px}
.bw-text{padding:20px 22px 22px}
.bw-text h3{margin:0 0 6px;font-size:1.25rem;font-weight:500;color:var(--weiss)}
.bw-text p{margin:0 0 14px;color:#C9D6D7;font-size:.9375rem;line-height:1.55}
.bw-chips{display:flex;flex-wrap:wrap;gap:8px}
.bw-chips span{font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.08em;border:1px solid #3a4244;border-radius:20px;padding:5px 10px;color:#C9D6D7}
.bw-etappe.mission{grid-template-columns:minmax(0,1fr)}
.bw-etappe.mission .bw-karte{grid-column:1;max-width:760px;width:100%;margin:0 auto;border-color:rgba(227,162,74,.45)}
.bw-etappe.mission .bw-jahr,.bw-etappe.mission .bw-hoehe{display:none}
.bw-etappe.mission .bw-punkt{top:0}
.bw-etappe.mission .label{color:var(--signal)}
.bw-etappe.mission h3{margin-top:10px}
.bw-zaehler{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-family:var(--f-zahl);margin-top:6px}
.bw-zaehler b{font-size:clamp(2.5rem,6vw,3.75rem);font-weight:500;color:var(--weiss)}
.bw-zaehler span{color:#8D9A9D;font-size:.8125rem}
.bw-balken{height:8px;background:#3a4244;border-radius:4px;overflow:hidden;margin:10px 0 16px}
.bw-balken i{display:block;height:100%;background:linear-gradient(90deg,var(--petrol),var(--signal))}
.bw-weiter{color:var(--signal);font-size:.875rem;text-decoration:none}
.bw-etappe.kurs .bw-karte{background:transparent;border:1px dashed rgba(131,183,189,.55);box-shadow:none}
.bw-ort{position:relative;padding:54px 22px 6px}
.bw-ort b{display:block;font-family:var(--f-marke);font-weight:400;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;color:var(--weiss);letter-spacing:.02em}
.bw-ort small{display:block;margin-top:8px;font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.16em;color:var(--signal)}
.bw-etappe.kurs .bw-marke{background:transparent;border:1px solid var(--signal);color:var(--signal)}
.bw-etappe.kurs .bw-punkt{border-style:dashed;border-color:var(--signal)}
.bw-etappe.kurs .bw-jahr{-webkit-text-stroke:1px rgba(227,162,74,.28)}
.bw-ende{text-align:center;margin-top:clamp(48px,7vw,80px)}
.bw-ende p{margin:14px 0 0;color:#8D9A9D;font-size:.9375rem}
.mit-js .bw-etappe .bw-karte{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.mit-js .bw-etappe .bw-jahr{opacity:0;transition:opacity 1s ease .15s}
.mit-js .bw-etappe.da .bw-karte{opacity:1;transform:none}
.mit-js .bw-etappe.da .bw-jahr{opacity:1}
.mit-js .bw-etappe.da .bw-punkt{background:var(--petrol);box-shadow:0 0 0 6px rgba(131,183,189,.15)}
@media (prefers-reduced-motion:reduce){.mit-js .bw-etappe .bw-karte,.mit-js .bw-etappe .bw-jahr{opacity:1;transform:none;transition:none}.bw-spur{transition:none}}
@media (max-width:860px){
  .bw-strecke{padding-left:34px}
  .bw-strecke::before,.bw-spur{left:12px}
  .bw-etappe{grid-template-columns:minmax(0,1fr);gap:0}
  .bw-etappe:nth-child(n) .bw-karte{grid-column:1;grid-row:1}
  .bw-etappe:nth-child(n) .bw-jahr,.bw-etappe:nth-child(n) .bw-hoehe{display:none}
  .bw-punkt{left:-22px;top:24px}   /* auf der Linie: 12px vom Rand der Strecke, die Etappe beginnt 34px weiter rechts */
}
/* Gesundheits-Brücke: hell (Karriereseite) und dunkel (Kundenseite, Abschnitt „Gegenwind“) */
.bruecke{margin-top:clamp(40px,6vw,72px)}
.kap.nebel .bruecke{margin-top:0}
.bruecke-satz{font-size:clamp(1.375rem,3vw,2rem);line-height:1.3;max-width:28ch;margin:16px 0 0}
.bruecke-punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,28px);margin-top:28px}
.bruecke-punkte div{border-top:2px solid var(--petrol);padding-top:16px}
.bruecke-punkte small{display:block;font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.14em;color:var(--tief)}
.bruecke-punkte h3{margin:8px 0 6px;font-size:1.125rem}
.bruecke-punkte p{margin:0;color:var(--stein);font-size:.9375rem}
.bruecke-punkte a{display:inline-block;margin-top:8px;font-size:.875rem;color:var(--tief)}
.dunkel .bruecke-punkte small{color:var(--petrol)}
.dunkel .bruecke-punkte p{color:#C9D6D7}
.dunkel .bruecke-punkte a{color:var(--signal)}
@media (max-width:760px){.bruecke-punkte{grid-template-columns:minmax(0,1fr)}}
/* Kundenseite: Band über der Crew */
.bw-band{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:18px 0;margin:0 0 clamp(28px,4vw,44px);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.bw-band b{font-family:var(--f-zahl);font-weight:500;font-size:1.5rem;margin-right:6px}
.bw-band span{font-size:.9375rem;color:var(--stein)}
.bw-band a{margin-left:auto;font-size:.875rem;color:var(--tief)}
@media (max-width:760px){.bw-band a{margin-left:0}}
/* Mission 1000 für alle: drei Wege */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.weg-karte{display:grid;gap:8px;align-content:start;padding:20px;border:1px solid var(--linie-d);color:var(--weiss);text-decoration:none;border-radius:2px}
.weg-karte:hover,.weg-karte:focus-visible{border-color:var(--petrol)}
.weg-karte small{font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.14em;color:var(--petrol)}
.weg-karte b{font-size:1.125rem;font-weight:500}
.weg-karte span{color:#C9D6D7;font-size:.9375rem}
.weg-karte u{text-decoration:none;color:var(--signal);font-size:.875rem}
@media (max-width:760px){.wege{grid-template-columns:minmax(0,1fr)}}

/* Startseite: drei Gates (Ben 28.10.2026) — A erst kennenlernen, B mit Ziel (der Flug), C gleich ein Termin.
   Welche Kapitel erscheinen, steuert html[data-gate] (js/intro-vorab.js, vor dem ersten Bild); die Reihenfolge im HTML
   passt für beide Gates. Ohne JavaScript fehlt das Merkmal, dann ist alles sichtbar. */
html[data-gate="a"] :is(#boden,#gegenwind,#route,#unternehmer,#turbulenz),
html[data-gate="b"] :is(#kennenlernen,#ziele-ende,#oben .nur-a),
html[data-gate="a"] #abflug,
html[data-gate="a"] #crew .bw-band{display:none}
html[data-gate="a"] #oben{background:var(--nebel)}
html[data-gate="a"] #oben .hoehe{--bgh:var(--nebel)}
html[data-gate]{scroll-padding-top:48px}
@media (max-width:700px){html[data-gate]{scroll-padding-top:80px}}   /* bis start.js den Kopf misst (abstand) */
html[data-gate] .hoehe span{top:128px}

.gates{display:grid;gap:12px;margin-top:clamp(24px,3.5vw,36px);max-width:580px}
.einstieg{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--linie-d);border-radius:8px;background:var(--cockpit);color:var(--weiss);text-decoration:none;transition:border-color .2s,transform .2s,opacity .2s}
.einstieg:hover{border-color:var(--petrol);transform:translateX(4px)}
.einstieg:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.einstieg .g{font-family:var(--f-marke);font-size:.5625rem;letter-spacing:.16em;color:var(--petrol);text-align:center;border-right:1px solid var(--linie-d);padding-right:14px}
.einstieg .g b{display:block;font-family:var(--f-zahl);font-size:1.75rem;font-weight:500;letter-spacing:0;color:var(--weiss);margin-top:2px}
.einstieg .gt{min-width:0}
.einstieg .gt b{display:block;font-size:1.1875rem;font-weight:500;line-height:1.3}
.einstieg .gt span{display:block;margin-top:3px;font-size:.9375rem;line-height:1.45;color:#C9D6D7}
.einstieg .s{font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.1em;color:#8D9A9D;text-align:right;white-space:nowrap}
.einstieg .s u{display:block;text-decoration:none;color:var(--petrol);font-size:1.25rem;margin-top:4px}
.einstieg.an{border-color:var(--petrol);box-shadow:0 0 0 1px var(--petrol);background:#22393C}
.gates.gewaehlt .einstieg:not(.an){opacity:.5}
.gates.gewaehlt .einstieg:not(.an):hover,.gates.gewaehlt .einstieg:not(.an):focus-visible{opacity:1}
/* Empfehlung: Gate C steht vorne und ist der Knopf der Seite */
.einstieg.vor{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.einstieg.vor .g,.einstieg.vor .g b,.einstieg.vor .s,.einstieg.vor .s u{color:var(--signal)}
@media (max-width:480px){
  .einstieg{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:14px}
  .einstieg .g{padding-right:10px}
  .einstieg .s{grid-column:2;text-align:left;white-space:normal}
  .einstieg .s u{display:inline;margin-left:8px;font-size:1rem}
}
.empf-start{display:flex;align-items:center;gap:12px;max-width:580px;margin:22px 0 0;padding:12px 16px;border:1px solid rgba(131,183,189,.45);border-radius:6px;background:rgba(131,183,189,.08);color:var(--weiss);font-size:.9375rem;line-height:1.45}
.empf-start img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
/* Gate B klappt die Abflugtafel im ersten Bildschirm auf */
.abflug{margin-top:22px}
.abflug .ziele{margin-top:0}
@keyframes aufklappen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
html[data-gate="b"] .gates.gewaehlt .abflug{animation:aufklappen .45s cubic-bezier(.2,.8,.2,1) both}
.gates .abflug{margin:4px 0 14px}
.cockpit .inhalt>.vertrauen{margin-top:26px}
/* am Handy steht das Foto kleiner über der Bühne, damit die Gates im ersten Bildschirm sind */
@media (max-width:960px){.cockpit .heroFoto{height:min(28svh,300px)}}

/* Gate A, erste Station: wer wir sind */
#kennenlernen{border-top:1px solid var(--linie-d)}
.wer{align-items:center}
.wer-zahlen{display:grid;border-top:1px solid var(--linie-d)}
.wer-zahlen div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--linie-d)}
.wer-zahlen b{font-family:var(--f-zahl);font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--petrol);white-space:nowrap}
.wer-zahlen span{color:var(--nebel)}
.wer .weiter{display:inline-block;margin-top:22px;color:var(--petrol);font-weight:600;text-decoration:none}
.wer .weiter:hover{text-decoration:underline}
@media (max-width:480px){.wer-zahlen div{grid-template-columns:minmax(0,1fr);gap:4px}}
/* Gate A, zweite Station: wie wir arbeiten (Überblick) */
.ehrlich{margin:28px 0 0;max-width:860px;padding:16px 18px;background:var(--weiss);border-left:3px solid var(--tief);font-size:.9375rem;line-height:1.5;color:var(--stein)}
.ehrlich b{color:var(--anthrazit)}
#ziele-ende .tafel{margin-top:clamp(28px,4vw,40px)}

/* Leiste im Kopf: hängt unter dem Kopf (ohne die Seite zu verschieben) und deckt die Kursskala ab */
.gate-leiste{display:none;position:absolute;left:0;right:0;top:calc(100% - 10px);background:var(--cockpit);color:var(--weiss);border-bottom:1px solid var(--linie-d)}
@keyframes leiste-ein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.kopf.mit-leiste .gate-leiste{display:block;animation:leiste-ein .25s ease-out both}
.kopf.mit-leiste .skala{visibility:hidden}
.gate-leiste .wrap{display:grid;grid-template-columns:auto minmax(60px,1fr) auto auto auto;align-items:center;gap:6px 18px;padding-block:9px}
.gl-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-zahl);font-weight:500;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol)}
.gl-spur{display:flex;gap:4px}
.gl-spur i{flex:1;height:3px;border-radius:2px;background:#3A4244;transition:background-color .3s}
.gl-spur i.an{background:var(--petrol)}
.gl-spur i.jetzt{background:var(--weiss)}
.gl-station{font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--weiss);white-space:nowrap}
.gl-wert{font-family:var(--f-zahl);font-size:.6875rem;color:#8D9A9D;white-space:nowrap}
.gl-wechseln{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#8D9A9D;padding:6px 0 6px 8px}
.gl-wechseln:hover{color:var(--weiss)}
.gl-wechseln:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
@media (max-width:700px){
  .gate-leiste .wrap{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name wechseln" "spur spur" "station wert";gap:6px 12px;padding-block:7px 9px}
  .gl-name{grid-area:name}.gl-wechseln{grid-area:wechseln;padding-block:2px}.gl-spur{grid-area:spur}
  .gl-station{grid-area:station;overflow:hidden;text-overflow:ellipsis}.gl-wert{grid-area:wert;text-align:right}
}

/* Crew-Karussell der Startseite (Ben 28.10.2026; Entwurf docs/entwuerfe/2026-10-28-crew-karussell-*.png):
   Mitte farbig mit Name und Rolle auf Glas, Nachbarn grau. Grundform (auch ohne JavaScript) = Wischreihe mit Einrasten und
   dem Kurztext unter jeder Karte. .kar-js (shared/js/bausteine/karussell.js) zeigt den Text darunter zentral,
   .kar-ring = breite Bühne ab 820 px: gewölbte Reihe, die langsam weitergleitet. Gerade Kanten wie der Crew-Ausweis. */
.karussell{--kw:min(62vw,300px);margin-top:clamp(28px,4vw,48px)}
.kar-buehne{position:relative}
.kar-spur{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:12px 0 28px}
.kar-spur::-webkit-scrollbar{display:none}
.kar-karte{flex:0 0 var(--kw);scroll-snap-align:start;display:grid;gap:12px;align-content:start}
.kar-foto{aspect-ratio:4/5;border-radius:2px;background:var(--cockpit);box-shadow:0 24px 50px -24px rgba(22,24,23,.5)}
.kar-foto img{object-position:50% 28%}
.kar-foto.initialen .ini{padding-bottom:30%}
.kar-link{display:block;color:inherit;text-decoration:none}
.kar-link:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
.kar-foto .glas{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;padding:12px 14px;border-radius:2px;color:var(--weiss);
  background:rgba(22,24,23,.42);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);transition:opacity .5s,transform .5s}
.kar-foto .glas h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--weiss)}
.kar-foto .glas .rang{margin-top:6px;align-items:flex-start}
.kar-foto .glas .rang i{margin-top:5px}
.kar-foto .glas .rang i b{background:var(--petrol)}
.kar-foto .glas .rang span{font-family:var(--f-marke);font-size:.625rem;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:#D5E2E3}
.kar-foto .glas .rang em{display:block;margin-top:3px;font-family:var(--f);font-style:normal;font-size:.8125rem;letter-spacing:0;line-height:1.4;text-transform:none;color:#C3D3D5}
.kar-kurz{margin:0;font-size:.875rem;font-weight:300;line-height:1.55;color:var(--stein)}
.kar-wisch{margin:0;text-align:center;font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}
.kar-alle{display:block;width:max-content;max-width:100%;margin:22px auto 0;font-family:var(--f-zahl);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stein);text-decoration:none}
.kar-alle:hover,.kar-alle:focus-visible{color:var(--tief)}
@media (max-width:760px){.kar-buehne{margin-inline:calc(50% - 50vw)}.kar-spur{padding-inline:20px;scroll-padding-inline:20px}}
/* mit JavaScript: der Text der Person in der Mitte steht zentral unter der Reihe */
.kar-js .kar-kurz{display:none}
.kar-js .kar-spur{gap:0;padding-inline:calc(50% - var(--kw) / 2 + var(--kw) * .03);scroll-padding-inline:0}
.kar-js .kar-karte{margin-inline:calc(var(--kw) * -.03);scroll-snap-align:center}
.kar-js .kar-karte:not(.kar-mitte) .glas{opacity:0;transform:translateY(8px)}
.kar-js .kar-unten{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;max-width:760px;margin:8px auto 0}
.kar-text{text-align:center;min-height:120px}
.kar-zahl{margin:0;font-family:var(--f-zahl);font-size:.75rem;letter-spacing:.14em;color:var(--stein)}
.kar-zahl b{color:var(--anthrazit);font-weight:500}
.kar-satz{margin:10px auto 0;max-width:50ch;font-size:1rem;line-height:1.6;color:var(--anthrazit)}
.kar-los{display:inline-block;margin-top:12px;font-weight:600;color:var(--tief);text-decoration:none;border-bottom:1px solid currentColor}
.kar-punkte{display:flex;gap:6px;justify-content:center;margin-top:16px}
.kar-punkte i{width:22px;height:2px;background:var(--linie);transition:background .3s,width .3s}
.kar-punkte i.an{width:40px;background:var(--tief)}
.kar-pause{margin-top:10px;padding:6px 10px;background:none;border:0;font-family:var(--f-zahl);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stein);cursor:pointer}
.kar-pause:hover{color:var(--tief)}
.kar-pfeil{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--linie);background:var(--weiss);color:var(--anthrazit);font-size:1.25rem;cursor:pointer}
.kar-pfeil:hover{border-color:var(--tief);color:var(--tief)}
.kar-pfeil:focus-visible,.kar-pause:focus-visible,.kar-los:focus-visible{outline:2px solid var(--tief);outline-offset:3px}
.kar-los[hidden],.kar-pause[hidden]{display:none}
/* breite Bühne: gewölbte Reihe; --kar-s verkleinert sie, bis sie in die Spalte passt */
.kar-ring .kar-buehne{height:calc(500px * var(--kar-s,1));margin-inline:0;overflow:hidden;perspective:1400px;perspective-origin:50% 40%}
.kar-ring .kar-spur{position:absolute;left:50%;top:0;width:320px;height:500px;margin-left:-160px;padding:0;display:block;overflow:visible;
  scroll-snap-type:none;transform-style:preserve-3d;transform:scale(var(--kar-s,1));transform-origin:50% 0}
.kar-ring .kar-karte{position:absolute;left:0;top:20px;width:320px;margin:0;cursor:pointer;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s,opacity .8s}
.kar-ring .kar-karte.kar-mitte{cursor:auto}
.kar-ring .kar-karte.kar-weg{opacity:0;pointer-events:none}   /* bleibt per Tab erreichbar; der Fokus holt sie nach vorne */
.kar-ring .kar-wisch{display:none}
.kar-ring .kar-unten{grid-template-columns:auto minmax(0,1fr) auto}
.kar-ring .kar-pfeil{display:block}
@media (prefers-reduced-motion:reduce){.kar-ring .kar-karte,.kar-foto .glas,.kar-punkte i{transition:none}}