/* Landing Routenplaner — HANS-01 (21.09.2026). Brand wie coreflow-ai.de: Obsidian/Emerald,
   Space Grotesk + Inter. Schriften liegen unter fonts/ (SIL OFL) — keine Anfrage an Dritte. */

/* ── Schriften: je Schnitt zwei Teilmengen, der Browser lädt nur, was die Seite braucht ── */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-latin.woff2) format("woff2");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:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-latin.woff2) format("woff2");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:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600-latin.woff2) format("woff2");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:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-500-latin.woff2) format("woff2");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:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-500-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-700-latin.woff2) format("woff2");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:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-700-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Tokens (Farbwerte aus mockup-4c/Main.dc.html) ── */
:root{
  color-scheme:dark;
  --bg:#020b07;          /* Obsidian */
  --flaeche:#0a1a12;
  --text:#f8f9fa;        /* Pearl */
  --text-2:#c9d1cd;
  --leise:#8fa39a;
  --em-400:#34d399;
  --em-500:#10b981;
  --em-dunkel:#022c22;   /* Unterzeile auf Emerald: 5.9:1 statt 3.8:1 (#064e3b im Mockup) */
  --linie:rgba(248,249,250,.12);
  --linie-stark:rgba(248,249,250,.22);
  --em-hauch:rgba(16,185,129,.06);
  --em-rand:rgba(52,211,153,.35);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --titel:"Space Grotesk","Inter",system-ui,sans-serif;

  /* Geometrie: Route-Linie und Inhaltskante, gemessen von der linken Kante der Hülle */
  --huelle:1440px;
  --route-x:96px;
  --inhalt-links:200px;
  --inhalt-rechts:64px;
  --auto-b:30px;
  --kopf-h:72px;
}
@media (max-width:1099px){
  :root{--route-x:40px;--inhalt-links:88px;--inhalt-rechts:32px;--auto-b:26px}
}
@media (max-width:760px){
  :root{--route-x:28px;--inhalt-links:60px;--inhalt-rechts:16px;--auto-b:22px;--kopf-h:60px}
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:600}
a{color:var(--em-400)}
a:hover{color:var(--em-500)}
:where(a,button,input,summary,dialog):focus-visible{outline:2px solid var(--em-400);outline-offset:3px;border-radius:6px}
.cf-h{font-family:var(--titel);letter-spacing:-.02em}
.gruen{color:var(--em-400)}
.leise{font-size:14px;color:var(--leise)}
.dach{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--em-400)}
[id]{scroll-margin-top:calc(var(--kopf-h) + 16px)}

.sprung{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--em-500);color:var(--bg);font-weight:600;text-decoration:none}
.sprung:focus{top:12px}

.huelle{position:relative;width:100%;max-width:var(--huelle);margin:0 auto;padding-left:var(--inhalt-links);padding-right:var(--inhalt-rechts)}

/* ── Knöpfe ── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;
  font:600 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.knopf-gross{min-height:56px;padding:0 26px;border-radius:12px;font-size:17px}
.knopf-breit{width:100%}
.knopf-voll{background:var(--em-500);color:var(--bg)}
.knopf-voll:hover{background:var(--em-400);color:var(--bg)}
.knopf-rand{border-color:var(--linie-stark);color:var(--text)}
.knopf-rand:hover{border-color:var(--em-400);color:var(--text)}
.knopf-dunkel{background:var(--bg);color:var(--text)}
.knopf-dunkel:hover{background:#0f2a1e;color:var(--text)}
.knopf-dunkel-rand{border-color:rgba(2,11,7,.55);color:var(--bg)}
.knopf-dunkel-rand:hover{border-color:var(--bg);color:var(--bg);background:rgba(2,11,7,.08)}

/* ── Kopf ── */
.kopf{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid rgba(248,249,250,.08)}
.kopf-innen{max-width:var(--huelle);margin:0 auto;height:var(--kopf-h);padding:0 64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);min-height:44px}
.marke:hover{color:var(--text)}
.marke .cf-h{font-size:18px;font-weight:700;white-space:nowrap}
.marke-zeichen{width:36px;height:36px;flex:none}
.marke-zeichen rect{fill:#0f2a1e;stroke:var(--em-rand)}
.marke-zeichen path{fill:none;stroke:var(--em-400);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:3.5 3.5}
.marke-zeichen circle{fill:var(--em-400)}
.kopf-nav{display:flex;align-items:center;gap:24px}
.kopf-nav > a:not(.knopf){color:var(--text-2);text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.kopf-nav > a:not(.knopf):hover{color:var(--text)}

/* ── Hero ── */
.hero{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:56px;align-items:start;padding-top:88px;padding-bottom:72px}
.hero-text{display:flex;flex-direction:column;gap:24px}
.hero h1{font-size:60px;line-height:1.04;font-weight:700;text-wrap:balance}
.hero-unter{font-size:19px;color:var(--text-2);max-width:520px}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px}
.hero-fakten{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;color:var(--leise)}

.platzhalter{display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;
  border:1px dashed var(--em-rand);border-radius:16px;background:var(--em-hauch);color:var(--em-400);font-size:14px}
.platzhalter-hero{aspect-ratio:16/10;border-radius:18px;background:var(--flaeche);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.platzhalter-bild{aspect-ratio:2/1}
.platzhalter-telefon{aspect-ratio:9/10;max-width:300px;border-radius:26px 26px 0 0;border-bottom:0}

/* ── Route + Auto ── */
.cf-weg{position:relative}
.cf-route{position:absolute;top:0;left:calc(max(0px,(100% - var(--huelle)) / 2) + var(--route-x) - 3px);width:6px;height:100%;
  overflow:visible;pointer-events:none;z-index:0}
.cf-route path{fill:none;stroke-linecap:round}
.cf-route .spur{stroke:var(--em-500);stroke-width:3;stroke-dasharray:10 12;opacity:.55}
.cf-route .fahrt{stroke:var(--em-400);stroke-width:4;stroke-dasharray:0 1;filter:drop-shadow(0 0 6px rgba(52,211,153,.6))}

/* Das Auto steht in der Bildschirmmitte, die Route läuft unter ihm durch (Entscheid 10).
   `left` setzt landing.js aus der Lage der Route. Front zeigt im Bild nach oben:
   Grundstellung 180° = fährt nach unten; `.hoch` = fährt nach oben. */
.cf-auto{position:fixed;top:50%;left:0;z-index:20;width:var(--auto-b);height:calc(var(--auto-b) * 2);
  transform:translateY(-50%);pointer-events:none;opacity:0;transition:opacity .25s ease}
.cf-auto.da{opacity:1}
.cf-auto img{display:block;width:100%;height:100%;transform:rotate(180deg);transition:transform .35s ease;
  filter:drop-shadow(0 0 10px rgba(52,211,153,.55))}
.cf-auto.hoch img{transform:rotate(0deg)}

.cf-stopp{position:absolute;left:calc(var(--route-x) - 11px);width:22px;height:22px;border-radius:999px;background:var(--bg);
  border:3px solid var(--em-500);box-shadow:0 0 0 6px rgba(16,185,129,.12);z-index:1}
.cf-stopp-ziel{background:var(--em-500)}

/* ── Stationen ── */
.station{display:flex;gap:56px;align-items:flex-start;padding-top:180px;padding-bottom:120px}
.station > .cf-stopp{top:182px}
.station-rechts{flex-direction:row-reverse;justify-content:flex-end}
.station-text{flex:0 0 520px;max-width:520px;display:flex;flex-direction:column;gap:14px}
.station-text h2{font-size:38px;line-height:1.1;font-weight:700}
.station-text p{color:var(--text-2)}
.station > .platzhalter{flex:1 1 auto;min-width:0}
.station > .platzhalter-telefon{flex:0 1 300px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:8px 12px;border-radius:999px;border:1px solid var(--em-rand);font-size:13px;color:var(--text-2)}

/* ── Preise ── */
.preise{display:flex;flex-direction:column;gap:10px;padding-top:160px;padding-bottom:40px}
.preise > .cf-stopp{top:162px}
.preise h2{font-size:40px;line-height:1.1;font-weight:700}
.preise-unter{color:var(--text-2);max-width:760px}
.kaufweg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:600;color:var(--text)}
.kaufweg li{display:inline-flex;align-items:center;gap:8px}
.kaufweg li + li::before{content:"→";color:var(--em-400);font-weight:600}
.pakete{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:24px}
.pakete-status{grid-column:1 / -1;padding:22px;border:1px dashed var(--linie-stark);border-radius:16px;color:var(--text-2)}
.pakete-status.fehler{border-color:rgba(248,113,113,.5);color:#fecaca}
.paket{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 18px 20px;border:1px solid var(--linie);border-radius:16px;
  background:rgba(248,249,250,.03);min-width:0}
.paket.hervor{border:2px solid var(--em-500);background:rgba(16,185,129,.08)}
.paket-badge{position:absolute;top:-12px;left:18px;padding:4px 10px;border-radius:999px;background:var(--em-500);color:var(--bg);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.paket-name{font-family:var(--titel);font-size:18px;font-weight:700}
.paket-sitze{font-size:13.5px;color:var(--leise)}
.paket-preis{font-family:var(--titel);font-size:30px;font-weight:500;margin-top:10px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.paket-preis small{font-family:var(--sans);font-size:13px;color:var(--leise);letter-spacing:0;font-weight:400}
.paket-preis.frage{font-size:20px;font-weight:700;margin-top:14px}
.paket-je{font-size:12.5px;color:var(--em-400)}
.paket-je.leise{color:var(--leise)}
.paket-wahl{margin-top:auto}
.paket .knopf{margin-top:14px}
.paket > .knopf{width:100%}

.enthalten{margin-top:36px;padding:26px 28px;border:1px solid var(--linie);border-radius:16px;background:var(--em-hauch);display:flex;flex-direction:column;gap:14px}
.enthalten h3{font-size:22px;font-weight:700}
.enthalten ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px 28px}
.enthalten li{position:relative;padding-left:26px;color:var(--text-2);font-size:15.5px}
.enthalten li::before{content:"✓";position:absolute;left:0;top:0;color:var(--em-400);font-weight:600}

/* ── Vertrauen ── */
.vertrauen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:56px;padding-bottom:0}
.vertrauen > div{padding:18px;border:1px solid var(--linie);border-radius:14px;display:flex;flex-direction:column;gap:6px}
.vertrauen h3{font-size:15px;font-weight:600;font-family:var(--sans)}
.vertrauen p{font-size:13.5px;color:var(--leise);line-height:1.5}

/* ── Zitat-Platz (Entscheid 12): leer und unsichtbar, bis der Pilotkunde spricht ── */
[data-slot="pilotkunde"]{display:none}

/* ── Fragen ── */
.fragen{padding-top:96px;display:flex;flex-direction:column;gap:18px}
.fragen h2{font-size:30px;font-weight:700}
.fragen-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-items:start}
.fragen details{border-top:1px solid var(--linie)}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:56px;padding:12px 0;font-weight:600;font-size:15.5px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";flex:none;font-family:var(--titel);font-size:22px;line-height:1;color:var(--em-400);transition:transform .2s ease}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 0 16px;font-size:14.5px;color:var(--text-2);line-height:1.55}

/* ── Ziel / Erstgespräch ── */
#kauf{padding-top:96px}
.ziel{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px 44px;
  background:var(--em-500);color:var(--bg);border-radius:20px}
.ziel-text{display:flex;flex-direction:column;gap:8px;max-width:700px}
.ziel h2{font-size:30px;line-height:1.1;font-weight:700}
.ziel p{font-size:16px;color:var(--em-dunkel)}
.ziel-knoepfe{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.ziel a:focus-visible{outline-color:var(--bg)}

/* ── Fuß ── */
.fuss{margin-top:96px;padding-top:40px;padding-bottom:48px;border-top:1px solid rgba(248,249,250,.1);display:flex;flex-direction:column;gap:12px;
  color:var(--leise);font-size:13.5px;padding-left:64px;padding-right:64px}
.fuss-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.fuss-firma{color:var(--text);font-weight:600}
.fuss-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.fuss-links a{color:var(--leise);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.fuss-links a:hover{color:var(--text)}
.fuss-links a[data-anmelden]{color:var(--text);font-weight:600}
.fuss-preis{color:var(--text-2)}
.fuss p{max-width:900px;line-height:1.5}

/* ── Anmelde-Fenster ── */
.fenster{width:min(420px,calc(100vw - 32px));padding:0;border:1px solid var(--linie-stark);border-radius:16px;background:var(--flaeche);color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.fenster::backdrop{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* Rückfall ohne showModal (landing.js): nicht-modal offen, fest in der Bildmitte statt am Seitenende. */
dialog.fenster[data-rueckfall][open]{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100vh - 32px);overflow:auto;z-index:100}
.fenster-form{display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px}
.fenster-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fenster-kopf h2{font-size:22px;font-weight:700}
.fenster-zu{width:44px;height:44px;margin-right:-10px;border:0;border-radius:10px;background:transparent;color:var(--text-2);font-size:26px;line-height:1;cursor:pointer}
.fenster-zu:hover{color:var(--text);background:rgba(248,249,250,.06)}
.fenster label{font-size:14px;font-weight:500;color:var(--text-2);margin-top:6px}
.fenster input{min-height:48px;padding:0 14px;border:1px solid var(--linie-stark);border-radius:10px;background:var(--bg);color:var(--text);font:400 16px var(--sans)}
.fenster input:focus{outline:2px solid var(--em-400);outline-offset:0;border-color:transparent}
.fenster-link{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--em-400);font:500 14px var(--sans);cursor:pointer}
.fenster-link:hover{color:var(--em-500);text-decoration:underline}
.fenster-meld{min-height:0;font-size:14px;color:#fecaca}
.fenster-meld:empty{display:none}
.fenster-meld.ok{color:var(--text-2)}
.fenster-hinweis{margin-top:6px;font-size:13.5px;color:var(--leise)}

/* ── Einblenden (nur mit Skript; ohne Skript ist alles sichtbar) ── */
.js .cf-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .cf-reveal.an{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .cf-reveal{opacity:1;transform:none;transition:none}
  .cf-auto,.cf-auto img,.fragen summary::after{transition:none}
}

/* ── Tablet ── */
@media (max-width:1099px){
  .kopf-innen{padding:0 32px}
  .kopf-nav{gap:16px}
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-left:32px;padding-right:32px;padding-top:64px}
  .hero h1{font-size:50px}
  .station,.station-rechts{flex-direction:column;justify-content:flex-start;gap:28px;padding-top:120px;padding-bottom:40px}
  .station > .cf-stopp{top:122px}
  .station-text{flex:none;max-width:640px}
  .station > .platzhalter{width:100%;flex:none}
  .station > .platzhalter-telefon{width:min(100%,300px)}
  .preise{padding-top:120px}
  .preise > .cf-stopp{top:122px}
  .pakete{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pakete > .paket:last-child:nth-child(odd){grid-column:1 / -1}   /* HANS-03: ungerade Zahl → letzte Karte über beide Spalten, keine leere Zelle */
  .vertrauen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fragen-liste{grid-template-columns:minmax(0,1fr)}
  .ziel{flex-direction:column;align-items:flex-start;padding:32px}
  .fuss{padding-left:32px;padding-right:32px}
}
@media (max-width:900px){
  .kopf .kopf-nav > a.nur-breit{display:none}
}

/* ── Telefon (Phone.dc.html, 390) ── */
@media (max-width:760px){
  body{font-size:16px}
  .kopf-innen{padding:0 16px}
  .marke{gap:10px}
  .marke .cf-h{font-size:16px}
  .marke-zeichen{width:32px;height:32px}
  .hero{padding:36px 16px 32px;gap:28px}
  .hero-text{gap:16px}
  .hero h1{font-size:38px;line-height:1.05}
  .hero-unter{font-size:16px}
  .knopf-reihe{flex-direction:column}
  .knopf-reihe .knopf{width:100%}
  .knopf-gross{min-height:54px;font-size:16px;white-space:normal;text-align:center}
  .hero-fakten{font-size:12.5px;gap:4px 14px}
  .dach{font-size:11.5px;letter-spacing:.1em}

  .station,.station-rechts{padding-top:56px;padding-bottom:8px;gap:18px}
  .station > .cf-stopp{top:56px}
  .station-text{gap:10px}
  .station-text h2{font-size:24px;line-height:1.15}
  .station-text p{font-size:15px}
  .chips li{font-size:12.5px}

  .preise{padding-top:64px}
  .preise > .cf-stopp{top:64px}
  .preise h2{font-size:26px}
  .preise-unter{font-size:15px}
  .kaufweg{font-size:13px;gap:6px}
  .pakete{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
  .paket{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name preis" "sitze preis" "je wahl";
    align-items:center;gap:2px 12px;padding:14px 14px}
  .paket.hervor{padding-top:20px}
  .paket-badge{top:-10px;left:14px;font-size:10px}
  .paket-name{grid-area:name;font-size:16px}
  .paket-sitze{grid-area:sitze;font-size:12.5px}
  .paket-preis{grid-area:preis;margin:0;font-size:22px;text-align:right}
  .paket-preis.frage{font-size:16px;margin:0}
  .paket-je{grid-area:je}
  .paket .knopf,.paket > .knopf{grid-area:wahl;width:auto;min-height:40px;margin-top:6px;padding:0 14px;font-size:14px}

  .enthalten{padding:18px 16px;margin-top:24px}
  .enthalten h3{font-size:19px}
  .enthalten li{font-size:14.5px}
  .vertrauen{grid-template-columns:minmax(0,1fr);gap:10px;padding-top:36px}
  .fragen{padding-top:56px}
  .fragen h2{font-size:24px}
  #kauf{padding-top:56px}
  .ziel{padding:26px 18px;gap:18px;border-radius:16px}
  .ziel h2{font-size:24px}
  .ziel p{font-size:15px}
  .ziel-knoepfe{width:100%;flex-direction:column}
  .ziel-knoepfe .knopf{width:100%}
  .fuss{margin-top:56px;padding:24px 16px 32px;font-size:12.5px}
}

/* ── Anmelde-Fenster der Landing: Zustände fehler / vergessen / gesendet (HANS-03, aus konto.css hierher verschoben M3b 23.09.2026) ──
   Das Fenster trägt data-zustand (anmelden · vergessen · gesendet); ohne Attribut gilt „anmelden“.
   IDs aus HANS-01 bleiben, wie sie sind (#anmelden, #anmelden-form, #an-email, #an-passwort, #an-vergessen, #an-meld, #an-senden). */
/* NUR am <dialog>: die Konto-Karten tragen die Klasse .fenster auch, aber ihre Zustände hängen an main.konto. */
dialog.fenster:not([data-zustand]) [data-nur]:not([data-nur~="anmelden"]),
dialog.fenster[data-zustand~="anmelden"] [data-nur]:not([data-nur~="anmelden"]),
dialog.fenster[data-zustand~="vergessen"] [data-nur]:not([data-nur~="vergessen"]),
dialog.fenster[data-zustand~="gesendet"] [data-nur]:not([data-nur~="gesendet"]){display:none}
.fenster-text{font-size:15px;color:var(--text-2);line-height:1.5}
.fenster-form .knopf-breit + .fenster-link{align-self:center}
/* <button class="knopf knopf-rand">: landing.css setzt für .knopf-rand keinen Hintergrund, der Knopf erbte die graue
   UA-Fläche (gemessen 5,06:1 statt Obsidian). Auf der Landing hing .knopf-rand nur an <a> — bis das Fenster (M3b) „Zurück“ als <button> bekam. */
button.knopf-rand{background:transparent}
button.knopf-rand:hover{background:rgba(248,249,250,.05)}
.knopf:disabled,.knopf[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.knopf-voll:disabled:hover{background:var(--em-500)}