/* routino.live — Stylesheet.
   Ausgelagert aus index.php am 2026-07-27 (vorher <style>-Block).
   Gilt fuer ALLE Routen des Front-Controllers (Startseite + /fahrpraxis-verordnung).
   Cache-Busting: index.php haengt ?v=<filemtime> an — nach jedem Deploy also
   automatisch neu, ohne dass hier eine Versionsnummer gepflegt werden muss. */

:root{
  --ink:#0A1A26;
  --ink-2:#122B3D;
  --mint:#00E0A4;
  /* Von #009E75 abgedunkelt, als der Grundton warm wurde: auf dem creme-farbenen
     Papier lag der Kontrast des Weiterlesen-Badges bei 2,94 und damit unter der
     Schwelle von 3,0 fuer grosse/fette Schrift. Jetzt 3,84 auf --paper und 4,24
     auf --paper-2. Gegengeprueft: mint-d steht an 16 Stellen, davon 15 auf hellem
     Grund — die einzige Ausnahme war der linke Rand von .kopf-stand, der deshalb
     auf --mint umgestellt wurde. Wer mint-d weiter abdunkelt, muss diese Probe
     wiederholen. */
  --mint-d:#008864;
  --coral:#FF7A59;
  /* Warmer Creme-Grundton statt des kuehlen, leicht gruenstichigen Off-White von
     vorher (#F6F9F8). Die Anmutung ist die von anthropic.com: ruhig, papierartig,
     warm — statt der ueblichen kalten Tech-Blaesse.
     --paper-2 (Karten, Panels, Tabellen) bewusst NICHT auf Reinweiss: reines
     #FFFFFF auf warmem Grund wirkt wie ein Loch im Papier. Ein leicht waermeres
     Off-White hebt die Flaeche ab, ohne den Grundton zu brechen. */
  --paper:#F0EEE6;
  --paper-2:#FAF9F5;
  --line:rgba(10,26,38,.10);
  --muted:#54666F;
  --radius:18px;
  --shadow:0 18px 50px -22px rgba(10,26,38,.45);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Sprungziele unter der klebenden Kopfleiste freistellen. header ist
   position:sticky mit 66px Hoehe — ohne diesen Ausgleich verschwindet die
   Ueberschrift jedes angesprungenen Abschnitts dahinter. Betrifft die neuen
   Weiterlesen-Sprünge ebenso wie die bestehenden Marken (#vormerken, #faq). */
[id]{scroll-margin-top:82px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.14;letter-spacing:-.022em;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.2rem,6vw,4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:1.13rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(10,26,38,.92);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav{display:flex;align-items:center;gap:14px;height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800;font-size:1.24rem;letter-spacing:-.03em}
.logo svg{width:30px;height:30px;flex:none}
.logo b{color:var(--mint)}
.pill{
  margin-left:6px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mint);border:1px solid rgba(0,224,164,.42);border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.nav .sp{flex:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:.97rem;
  padding:13px 22px;border-radius:999px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn-primary{background:var(--mint);color:#05202C;box-shadow:0 10px 26px -12px rgba(0,224,164,.9)}
.btn-primary:hover{transform:translateY(-2px);background:#1BEDB4}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:10px 18px;font-size:.9rem}

.claim{
  align-self:center;white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.20);padding-left:14px;
  font-size:.93rem;font-weight:600;letter-spacing:-.005em;
  color:rgba(255,255,255,.80);
}
.claim em{font-style:normal;font-weight:700;color:var(--mint)}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:#0A1A26;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:74% 62%;display:block}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 84% 6%,rgba(0,224,164,.20),transparent 60%),
    linear-gradient(101deg,
      rgba(7,20,29,.95) 0%,
      rgba(7,20,29,.90) 30%,
      rgba(7,20,29,.62) 52%,
      rgba(7,20,29,.32) 72%,
      rgba(7,20,29,.32) 100%),
    linear-gradient(to bottom,rgba(7,20,29,.55) 0%,rgba(7,20,29,0) 26%,rgba(7,20,29,.30) 100%);
}
.hero:after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:90px;z-index:2;
  background:linear-gradient(to bottom,transparent,var(--paper));
}
.hero-in{position:relative;z-index:3;padding-top:104px;padding-bottom:124px}
.hero-in h1{max-width:820px}
.badge{
  display:inline-flex;align-items:center;gap:9px;background:rgba(0,224,164,.13);
  border:1px solid rgba(0,224,164,.34);color:var(--mint);
  border-radius:999px;padding:7px 16px;font-size:.83rem;font-weight:700;letter-spacing:.02em;margin-bottom:26px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(0,224,164,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(0,224,164,0)}100%{box-shadow:0 0 0 0 rgba(0,224,164,0)}}
.hero h1{color:#fff;text-shadow:0 2px 30px rgba(4,14,20,.55)}
.hero h1 em{font-style:normal;color:var(--mint)}
.lead{font-size:clamp(1.06rem,2.1vw,1.31rem);color:rgba(255,255,255,.86);max-width:660px;margin-bottom:16px;text-shadow:0 1px 18px rgba(4,14,20,.5)}
.lead-2{font-size:1.03rem;color:rgba(255,255,255,.74);max-width:620px;margin-bottom:32px;text-shadow:0 1px 18px rgba(4,14,20,.5)}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.hero-note{margin-top:24px;font-size:.9rem;color:rgba(255,255,255,.74);text-shadow:0 1px 14px rgba(4,14,20,.6)}

/* ---------- Sections ---------- */
section{padding:74px 0}
.eyebrow{
  font-size:.78rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mint-d);margin-bottom:12px;
}
.sec-lead{color:var(--muted);max-width:640px;font-size:1.05rem}

/* Cards */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:20px;margin-top:42px}
.card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;box-shadow:0 2px 14px -8px rgba(10,26,38,.24);
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(145deg,rgba(0,224,164,.19),rgba(0,224,164,.06));color:var(--mint-d);
}
.ico svg{width:25px;height:25px}
.card p{color:var(--muted);margin:0;font-size:.98rem}
.card.accent .ico{background:linear-gradient(145deg,rgba(255,122,89,.20),rgba(255,122,89,.06));color:#D14A26}

/* Zeitpakete */
.tariffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-top:42px;align-items:start}
.tariff{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;box-shadow:0 2px 14px -8px rgba(10,26,38,.24)}
/* Groesser und kraeftiger als vorher (.78rem in --muted). Bei dieser Groesse wirkt
   das blasse Grau kraftlos, deshalb --ink; und die Laufweite ist von .12em auf
   .04em zurueck, sonst braucht "24 STUNDEN" in der schmalen Karte zwei Zeilen. */
.tariff .t-name{
  display:flex;align-items:center;gap:9px;
  font-size:1.04rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);
}
/* Die Uhr erbt ihre Farbe ueber currentColor von .t-name — deshalb genuegt es,
   sie hier einmal zu setzen und auf der dunklen Karte zu ueberschreiben. */
.tariff .t-name .uhr{width:23px;height:23px;flex:none;color:var(--mint-d)}
/* Die empfohlene Karte ist seit den Farbstufen HELL — dort gilt wieder das
   dunkle Mint aus .tariff .t-name .uhr. Helles Mint auf #D9DEDD waere kaum
   zu erkennen. Die Regel entfaellt deshalb; die dunkle Stufe setzt ihr Mint
   selbst (.tariff.st3). */
.tariff .t-price{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.tariff .t-price b{font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.tariff .t-price span{color:var(--muted);font-size:.95rem}
.tariff p{color:var(--muted);margin:14px 0 0;font-size:.98rem}
.tariff p + p{margin-top:8px}
/* ===== Drei Stufen aus RGB(100,125,135) =====================================
   Die DAUER steigt ueber den Farbton, die EMPFEHLUNG haengt am Mint-Rahmen der
   Acht-Stunden-Karte. Vorher trug die dunkle Farbe beide Aufgaben, und dabei
   fiel die Progression ganz aus: die 24-Stunden-Karte sah aus wie die mit vier.

   Die Stufen sind Mischungen des Grundtons mit dem Papier, keine frei gewaehlten
   Graus — deshalb bleiben sie als eine Farbfamilie erkennbar. */
/* st1 ist eine hellere Tonung derselben Farbe (12 Prozent gegen 22 bei st2),
   nicht mehr das ungetoente Papier — dadurch beginnt die Reihe sichtbar und
   nicht erst bei der zweiten Karte.
   Warum 12 und nicht weniger: darunter faellt der Karton kaum noch vom warmen
   Seitengrund ab. Warum nicht mehr: bei 16 Prozent schrumpft der Abstand zu st2
   so weit, dass die Steigerung verschwimmt, und --muted naehert sich 4,5.
   Bei 12 Prozent steht --muted auf 4,95 und braucht keinen Sonderton wie st2. */
/* st1 teilt sich seit 2026-07-28 den Ton mit st3 — die beiden aeusseren Karten
   sind gleich, die empfohlene in der Mitte hebt sich dunkel ab. Die Regel steht
   deshalb weiter unten gemeinsam mit st3: so kann der Ton nicht an einer Stelle
   geaendert werden und an der anderen stehenbleiben. */

/* st2 und st3 wurden am 2026-07-28 GETAUSCHT: die empfohlene Acht-Stunden-Karte
   traegt jetzt den dunkelsten Ton, die 24-Stunden-Karte den mittleren. Damit ist
   die Reihenfolge hell/dunkel/mittel — keine durchgehende Steigerung mehr, dafuer
   steht die Empfehlung wieder im Zentrum. Wer die Steigerung zurueckwill, tauscht
   nur die beiden Hintergruende samt ihrer Textfarben zurueck.

   Nicht der volle Ton #647D87: weisser Text erreicht darauf nur 4,35 und liegt
   damit unter 4,5. #3E535C ist dieselbe Farbe abgedunkelt — weiss 8,1, Mint 4,7. */
.tariff.st2{background:#3E535C;border-color:rgba(100,125,135,.55)}
.tariff.st2 .t-name{color:#fff}
.tariff.st2 .t-name .uhr{color:var(--mint)}
.tariff.st2 p,.tariff.st2 .t-price span{color:rgba(255,255,255,.82)}
.tariff.st2 .t-price b{color:#fff}

/* Auf dem mittleren Ton #D9DEDD reicht --muted nicht: es kommt dort nur auf 4,40.
   Dieser Ton liegt bei 6,0 und bleibt trotzdem zurueckhaltend. */
.tariff.st1,.tariff.st3{background:#D9DEDD}
/* Der Sonderton gilt fuer BEIDE aeusseren Karten: --muted kommt auf #D9DEDD nur
   auf 4,40 und liegt damit unter 4,5. Wer den Hintergrund hier aendert, muss
   diesen Wert mitpruefen. */
.tariff.st1 p,.tariff.st1 .t-price span,
.tariff.st3 p,.tariff.st3 .t-price span{color:#44555E}

/* Empfehlung: Mint-Rahmen und Badge, unabhaengig von der Farbstufe. */
.tariff.best{border:2px solid var(--mint);box-shadow:var(--shadow);position:relative}
.tariff.best .tag{
  position:absolute;top:-13px;left:26px;background:var(--mint);color:#05202C;border-radius:999px;
  padding:5px 13px;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.compare{
  margin-top:26px;background:var(--paper-2);border:1px solid rgba(0,224,164,.34);border-left:4px solid var(--mint);
  border-radius:var(--radius);padding:30px 28px;box-shadow:0 2px 14px -8px rgba(10,26,38,.24);
  display:grid;grid-template-columns:1.2fr 1fr;gap:30px;
}
.compare h3{font-size:1.24rem;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.compare p{color:var(--muted);margin:0;font-size:.98rem}
.calc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-size:.94rem}
.calc div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;color:var(--muted)}
.calc div.sum{padding:6px 0;font-weight:800;color:var(--ink)}
.calc div.sum b{color:var(--mint-d)}
.calc hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.note{margin-top:22px;font-size:.85rem;color:var(--muted);border-left:2px solid rgba(0,158,117,.4);padding-left:15px;max-width:760px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:44px;counter-reset:s}
.step{position:relative;padding-top:16px;border-top:2px solid var(--line)}
.step:before{
  counter-increment:s;content:counter(s);
  position:absolute;top:-19px;left:0;width:36px;height:36px;border-radius:50%;
  background:var(--ink);color:var(--mint);display:grid;place-items:center;font-weight:800;font-size:.95rem;
}
.step h3{margin-top:22px}
.step p{color:var(--muted);font-size:.96rem;margin:0}

/* Dunkles Band + helle Karten */
.band{background:var(--ink-2);color:#fff}
.band .eyebrow{color:var(--mint)}
.band .sec-lead{color:rgba(255,255,255,.78);max-width:660px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:38px}
.fact{background:var(--paper);border-radius:15px;padding:26px 24px;box-shadow:0 22px 44px -26px rgba(0,0,0,.75)}
.fact-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.fact-n{
  width:26px;height:26px;border-radius:8px;background:var(--mint);color:#05202C;
  display:grid;place-items:center;font-size:.76rem;font-weight:800;flex:none;
}
.fact h3{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.fact p{margin:0;color:var(--muted);font-size:.95rem}

/* Fahrzeugkonzept */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.ticks{display:flex;flex-direction:column;gap:12px}
.tick{display:flex;gap:12px;align-items:flex-start}
.tick i{width:7px;height:7px;border-radius:50%;background:var(--mint);margin-top:9px;flex:none}
.tick p{margin:0;color:var(--muted);font-size:.98rem}
.tick b{color:var(--ink)}
.shot{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--ink)}
.shot img{display:block;width:100%;height:360px;object-fit:cover;object-position:60% 62%}

/* Rechtsstand */
.panel{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,4vw,44px);box-shadow:0 2px 14px -8px rgba(10,26,38,.24)}
.panel h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.panel p{color:var(--muted);max-width:760px}

/* Warteliste */
#vormerken{background:linear-gradient(180deg,var(--paper) 0%,#E7F1ED 100%)}
.wl{
  max-width:980px;margin:0 auto;background:var(--paper-2);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:.78fr 1.22fr;
}
.wl-side{background:var(--ink);color:#fff;padding:36px 32px;display:flex;flex-direction:column;gap:26px}
.wl-side .eyebrow{color:var(--mint);font-size:.72rem;margin-bottom:10px}
.wl-side h2{font-size:1.72rem;letter-spacing:-.03em;margin:0 0 10px}
.wl-side .sub{margin:0;font-size:.96rem;color:rgba(255,255,255,.70)}
.hl{display:flex;flex-direction:column;gap:16px}
.hl-row{display:flex;gap:11px;align-items:flex-start}
.hl-row svg{width:17px;height:17px;flex:none;margin-top:4px}
.hl-row b{display:block;font-weight:700;font-size:.95rem;color:#fff}
.hl-row span{display:block;margin-top:2px;font-size:.87rem;color:rgba(255,255,255,.62)}
.wl-foot{margin:auto 0 0;font-size:.8rem;color:rgba(255,255,255,.45)}
.wl-form{padding:36px 32px}
/* Hervorhebung in der dunklen Seitenspalte. Geschuetztes Leerzeichen im Markup,
   damit "25 %" nie zwischen Zahl und Prozentzeichen umbricht. */
.wl-side h2 .mint{color:var(--mint)}
/* align-items:end laesst die Eingabefelder einer Zeile immer auf gleicher Hoehe
   stehen — auch wenn ein Label wie "Interessiert an Zeitpaket" zweizeilig
   umbricht und das Nachbarlabel nicht. Ohne das rutscht ein Feld nach unten. */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:13px 14px;align-items:end}
.frow.plz{grid-template-columns:.62fr 1.38fr}
/* Statuszeichen im E-Mail-Feld: Haken, Kreuz oder Fragezeichen, rechtsbuendig.
   Das Feld bekommt nur dann zusaetzlichen rechten Innenabstand, wenn ein
   Zeichen steht — sonst waere bei leerem Feld unnoetig Platz verschenkt. */
.mail-feld{position:relative;display:block}
.mail-zeichen{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:1rem;font-weight:800;line-height:1;pointer-events:none;
  opacity:0;transition:opacity .15s ease;
}
.mail-feld.hat-zeichen input{padding-right:32px}
.mail-zeichen.an{opacity:1}
.mail-zeichen.gut{color:#0F9D6E}
.mail-zeichen.schlecht{color:#D14343}
.mail-zeichen.unklar{color:#8FA0A8}
/* Kurzhinweis unter einem Feld. Verschwindet nach wenigen Sekunden — die
   Eingabe wurde ja bereits korrigiert, der Hinweis erklaert nur, warum.
   Er ist ein eigenes Gitterelement der ZEILE und steht per grid-column in der
   Spalte seines Feldes (gesetzt im Skript). Er darf NICHT in die Zelle
   zurueckwandern: der Absatz haengt dauerhaft im Markup und ist nur unsichtbar,
   macht die Zelle also immer 22 px hoeher — bei align-items:end schiebt das
   das Nachbarfeld nach unten. Kein margin-top, den Abstand macht der row-gap. */
.feld-hinweis{
  margin:0;font-size:.78rem;line-height:1.35;color:#B4552F;
  opacity:0;transition:opacity .18s ease;
}
.feld-hinweis.an{opacity:1}
/* E-Mail-Hinweis: erscheint erst beim Absenden, wenn etwas auffaellig ist. */
.mail-hint{
  margin:8px 0 0;padding:9px 12px;border-radius:9px;font-size:.85rem;line-height:1.4;
  background:rgba(255,122,89,.10);border:1.5px solid rgba(255,122,89,.42);color:#8A3A1E;
}
.mail-hint button{
  display:inline-block;margin-left:6px;padding:3px 10px;border:0;border-radius:999px;
  background:var(--mint-d);color:#fff;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
}
.mail-hint button.grau{background:transparent;color:#8A3A1E;text-decoration:underline;padding:3px 4px}
/* Ort-Automatik: Auswahlfeld und Hinweis erscheinen nur bei mehreren Treffern. */
.ort-wahl{margin-top:7px}
.ort-hinweis{margin:6px 0 0;font-size:.78rem;color:var(--muted);line-height:1.35}
.ort-hinweis.warn{color:#B4552F}
/* Umfrage-Block: hebt die vier Bedarfsfragen sichtbar vom Kontaktteil ab. */
.survey{
  margin-top:16px;padding:15px 16px 17px;border-radius:14px;
  background:rgba(0,224,164,.07);border:1.5px solid rgba(0,224,164,.30);
}
.survey-head{margin-bottom:13px}
.survey-head b{display:block;font-size:.95rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.survey-head span{display:block;margin-top:2px;font-size:.82rem;color:var(--muted)}
.survey .frow:first-of-type{margin-top:0}
.survey label{color:#3E5560}

label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:6px 12px;border:1.5px solid #DFDCD0;border-radius:9px;
  font:inherit;font-size:.94rem;background:var(--paper-2);color:var(--ink);transition:border-color .15s,box-shadow .15s;
  /* line-height muss mit: body vererbt 1.62, das allein macht rund 24px Zeilenhoehe
     und damit den groessten Teil der Feldhoehe — Padding zu kuerzen reicht nicht. */
  line-height:1.25;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--mint-d);box-shadow:0 0 0 3px rgba(0,224,164,.16);
}
textarea{resize:vertical;min-height:66px;margin-top:10px}
details.opt{margin-top:14px}
details.opt summary{list-style:none;cursor:pointer;font-size:.83rem;font-weight:700;color:var(--mint-d)}
details.opt summary::-webkit-details-marker{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:10px;align-items:flex-start;margin:18px 0 16px;font-size:.82rem;color:var(--muted);line-height:1.5;
  font-weight:400;letter-spacing:0;text-transform:none}
.check input{margin-top:2px;width:16px;height:16px;accent-color:var(--mint-d);flex:none}
.check a{color:var(--mint-d);text-decoration:underline}
.submit{width:100%;padding:14px;font-size:1rem}
.submit[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.msg{margin-top:14px;padding:13px 15px;border-radius:11px;font-size:.92rem;display:none}
.msg.ok{display:block;background:rgba(0,224,164,.13);border:1px solid rgba(0,158,117,.42);color:#046B50}
.msg.err{display:block;background:rgba(255,122,89,.12);border:1px solid rgba(209,74,38,.35);color:#98310F}

/* Ueber Routino */
.about{max-width:820px}
.about p{color:rgba(255,255,255,.82);font-size:1.08rem}
.about p + p{color:rgba(255,255,255,.72);font-size:1.02rem;margin:0}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.faq details{
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 2px 14px -8px rgba(10,26,38,.24);height:fit-content;
}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--mint-d);font-weight:800;font-style:normal;flex:none}
.faq p{margin:12px 0 0;padding-left:24px;color:var(--muted);font-size:.96rem}

/* Footer */
footer{background:var(--ink);color:rgba(255,255,255,.66);padding:52px 0 40px;font-size:.9rem}
.fgrid{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between}
footer a{color:rgba(255,255,255,.86);text-decoration:none}
footer a:hover{color:var(--mint);text-decoration:underline}
.flinks{display:flex;flex-direction:column;gap:6px}
.fbar{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11);font-size:.83rem;color:rgba(255,255,255,.48)}

/* Sticky CTA (nur mobil) */
/* Ausblend-Header auf schmalen Geraeten: gleitet beim Abwaertsscrollen nach oben
   aus dem Bild und kommt zurueck, sobald nach oben gescrollt wird. Auf grossen
   Bildschirmen bleibt er unveraendert klebend. */
@media(max-width:820px){
  header{transition:transform .28s ease}
  header.weg{transform:translateY(-100%)}

  /* URSACHE, gemessen: der Claim passt neben Logo und Knopf nicht in eine Zeile,
     bricht um und treibt die Leiste von 66 auf 83px. Der Knopf sass dadurch oben
     statt mittig (0px oben, 40px unten) — align-items:center kann nichts
     ausrichten, wenn ein Geschwisterelement die Zeile aufzieht. Auf dem Handy ist
     der Claim ohnehin Beiwerk; die Aussage steht zwei Zeilen weiter unten in der
     Ueberschrift. Ohne ihn passt alles in die 66px und der Knopf sitzt mittig. */
  .claim{display:none}

  /* Knopf rund ein Viertel kleiner: 43px hoch -> 32px, Schrift 14,4px -> 11,5px.
     Beides zusammen, sonst wird aus dem Knopf ein flacher Balken mit zu grosser
     Schrift. */
  .nav .btn-sm{padding:6.5px 13px;font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* ================= RESPONSIVE ================= */
@media(max-width:1120px){.pill{display:none}}

@media(max-width:980px){
  .compare{grid-template-columns:1fr;gap:22px}
  .split{grid-template-columns:1fr;gap:28px}
  .shot{order:-1}
  .shot img{height:260px}
  .wl{grid-template-columns:1fr;max-width:640px}
  .faq{grid-template-columns:1fr}
}

@media(max-width:860px){
  /* height:auto + flex-wrap war fuer den umbrechenden Claim gedacht. Der ist auf
     schmalen Displays jetzt ausgeblendet — ohne ihn braucht die Leiste keinen
     Umbruch mehr, und height:auto liesse sie auf Kindhoehe (32px) zusammenfallen.
     Feste 58px: kompakter als die 66px am Desktop, aber Logo und Knopf haben Luft. */
  .nav{height:58px;flex-wrap:nowrap;padding-top:0;row-gap:0}
  .claim{order:1;flex:0 0 100%;white-space:normal;border-left:0;padding:7px 0 11px;
         font-size:.84rem;color:rgba(255,255,255,.74)}
}

@media(max-width:820px){
  body{font-size:16px}
  section{padding:40px 0}
  .wrap{padding:0 18px}
  h1{font-size:2.15rem;line-height:1.1;letter-spacing:-.03em}
  h2{font-size:1.58rem;line-height:1.15;letter-spacing:-.03em}

  /* Bild als Band am unteren Hero-Rand, Sekundaer-Button darunter */
  .hero-bg{inset:auto 0 74px 0;height:auto;line-height:0;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 16%,#000 34%);
            mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 16%,#000 34%)}
  .hero-bg img{height:auto;object-fit:contain;object-position:center bottom}
  .hero-scrim{
    background:
      radial-gradient(700px 420px at 80% 4%,rgba(0,224,164,.16),transparent 62%),
      linear-gradient(to bottom,
        rgba(7,20,29,.96) 0%,
        rgba(7,20,29,.93) 46%,
        rgba(7,20,29,.68) 66%,
        rgba(7,20,29,.24) 84%,
        rgba(7,20,29,.06) 100%);
  }
  .hero:after{height:56px}
  .hero-in{padding-top:34px;padding-bottom:216px}
  .lead{font-size:1.02rem}
  .lead-2{font-size:.94rem;margin-bottom:0}
  .hero-note{display:none}
  .cta-row{display:none}
  .hero-cta-m{position:relative;z-index:3;padding:0 18px 22px}
  .hero-cta-m .btn{display:flex;min-height:46px;font-size:.92rem;padding:11px 16px}

  .grid3,.tariffs,.facts{grid-template-columns:1fr;gap:12px;margin-top:26px}
  .card{display:flex;gap:14px;align-items:flex-start;padding:20px 18px;border-radius:16px}
  .card .ico{width:40px;height:40px;border-radius:12px;margin:0;flex:none}
  .card .ico svg{width:21px;height:21px}
  .card h3{font-size:1.02rem;margin:0 0 5px}
  .card p{font-size:.92rem}
  .card:hover{transform:none;box-shadow:0 2px 14px -8px rgba(10,26,38,.24)}

  .tariff{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:20px 18px;border-radius:16px;flex-wrap:wrap}
  .tariff .t-price{margin:0;order:2}
  .tariff .t-price b{font-size:1.65rem}
  .tariff .t-price span{display:none}
  .tariff .t-body{flex:1;min-width:60%}
  .tariff p{margin:8px 0 0;font-size:.9rem}
  .tariff.best{padding-top:22px}

  .compare{padding:22px 18px;border-radius:16px}
  .compare h3{font-size:1.06rem}
  .calc{padding:16px}

  .steps{grid-template-columns:1fr;gap:18px;margin-top:26px}
  .step{border-top:0;padding-top:0;padding-left:46px}
  .step:before{top:0;left:0;width:32px;height:32px}
  .step h3{margin:4px 0 4px;font-size:1.02rem}

  .fact{padding:20px 18px;border-radius:14px}
  .fact h3{font-size:.98rem}
  .fact p{font-size:.9rem}

  .panel{padding:24px 20px;border-radius:18px}
  .panel h2{font-size:1.34rem}
  .panel p{font-size:.95rem}

  .wl{border-radius:20px}
  .wl-side{padding:26px 20px;gap:18px}
  .wl-side h2{font-size:1.44rem}
  .wl-form{padding:24px 20px}
  .frow{gap:11px 10px}
  /* Der Umfrage-Kasten sitzt IM Formular — seine Innenabstaende kommen also zu
     denen von .wl-form hinzu. Auf schmalen Geraeten bliebe fuer die zweispaltigen
     Felder sonst zu wenig Platz, deshalb hier deutlich schmaler. */
  .survey{padding:13px 12px 15px;border-radius:12px;margin-top:14px}
  .survey-head{margin-bottom:11px}
  .survey-head b{font-size:.9rem}
  .survey-head span{font-size:.79rem}
  /* Auf dem Handy bleibt min-height 44px: das ist die uebliche Mindestgroesse
     fuer eine Fingerflaeche. Kleiner wird hier bewusst NICHT gemacht — am
     Schreibtisch spart man Hoehe, am Telefon kostet es Treffsicherheit. */
  input[type=text],input[type=email],input[type=tel],select,textarea{min-height:44px;padding:8px 12px;font-size:.95rem}
  .check input{width:20px;height:20px}
  .submit{min-height:48px;padding:13px}

  .fgrid{flex-direction:column;gap:20px}
  footer{padding:34px 0 30px}

  /* 2026-07-27: feste Fussleiste (.mbar) entfernt — samt body-padding-bottom,
     das nur ihren Platz freihielt. */
}

@media(max-width:560px){
  .frow{grid-template-columns:1fr 1fr}
}

/* ---- Preisrechner (aus V2 uebernommen) ---- */
.rechner{margin-top:34px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.4vw,36px);box-shadow:var(--shadow)}
.rechner h3{margin:0 0 6px}
.rechner .hint{color:var(--muted);font-size:.95rem;margin:0 0 22px}
.seg{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
/* Rahmenfarbe mit umgestellt: #D7E2DE war ein kuehles Blaugrau und wirkt auf dem
   warmen Papier wie ein Fremdkoerper. */
.seg button{flex:1 1 150px;padding:13px 16px;border-radius:13px;border:1.5px solid #DFDCD0;background:var(--paper-2);
  font:inherit;font-weight:700;font-size:.96rem;color:var(--ink);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.seg button[aria-pressed="true"]{border-color:var(--mint-d);background:rgba(0,224,164,.12);color:#04543F}
.slider-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.slider-row label{margin:0;flex:0 0 auto;font-weight:600;font-size:.95rem}
.slider-row input[type=range]{flex:1 1 240px;accent-color:var(--mint-d);height:26px}
.km-out{font-weight:800;font-size:1.1rem;min-width:104px;text-align:right;letter-spacing:-.02em}
.rechner-out{margin-top:24px;padding:22px 24px;border-radius:16px;
  background:linear-gradient(145deg,rgba(0,224,164,.14),rgba(0,224,164,.05));
  border:1px solid rgba(0,158,117,.3)}
.rechner-out .zeile{display:flex;justify-content:space-between;gap:14px;font-size:.94rem;color:var(--muted);margin-bottom:6px}
.rechner-out .gesamt{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(0,158,117,.28)}
.rechner-out .gesamt b{font-size:2rem;font-weight:800;letter-spacing:-.035em;color:#04543F}
/* ---- Eckdaten-Kacheln Rechtsstand (aus V2 uebernommen) ---- */
.eckdaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:26px 0 6px}
.eck{background:var(--ink);border-radius:14px;padding:20px}
.eck b{display:block;color:var(--mint);font-size:1.24rem;font-weight:800;letter-spacing:-.03em;
  margin-bottom:7px;line-height:1.18}
.eck span{display:block;color:rgba(255,255,255,.74);font-size:.88rem;line-height:1.5}
/* Bildausschnitt an die Spiegelung anpassen: Fahrzeug sass bei 60%, gespiegelt sitzt es bei 40% */
.shot img{object-position:40% 62%}
/* ---- Anforderungs-Spalten im Rechtsstands-Abschnitt ---- */
.regeln{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin:28px 0 4px}
.regeln>div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px}
.regeln h3{font-size:1.02rem;font-weight:800;margin:0 0 13px}
.regeln .tick p{font-size:.92rem}
/* Gruenderabschnitt hat jetzt vier Absaetze; die Originalregel .about p+p{margin:0}
   war fuer genau zwei geschrieben und klebte sie sonst zusammen */
.about p+p{margin:0 0 1em}
.about p:last-child{margin-bottom:0}
@media(max-width:560px){.km-out{min-width:0;text-align:left}}

/* ==================================================================
   Route /fahrpraxis-verordnung — seit 2026-07-27.
   Bewusst als eigener Block ganz am Ende: die Startseiten-Regeln
   oben bleiben unberuehrt, und jede Klasse hier wird ausschliesslich
   von dieser Route benutzt. Wer die Route entfernt, kann diesen
   Block ersatzlos loeschen.
   ================================================================== */

/* --- Seitenkopf statt Hero -------------------------------------
   Die Verordnungsseite ist eine Lese-Seite. Ein grossflaechiges
   Fahrzeugbild wuerde die erste Bildschirmseite kosten, ohne etwas
   zur Frage beizutragen, mit der Leute hier ankommen.
   header ist position:sticky, nimmt also selbst Platz ein — hier
   ist deshalb KEIN Ausgleichs-padding fuer den Header noetig. */
/* Hoehe ist hier keine Kosmetik: der Kopf war mit rund 2,4:1 so flach, dass cover
   die Bildhoehe auf drei Viertel beschnitt und dem Zeichen den oberen Bogen nahm.
   Mit mehr Innenabstand liegt das Seitenverhaeltnis naeher an den 16:9 der Quelle
   und das Motiv bleibt ganz — derselbe Grund, aus dem der Fahrzeug-Hero hoch ist. */
.kopf{position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);color:#fff;padding:clamp(64px,8vw,112px) 0 clamp(56px,7vw,92px)}

/* Bild und Scrim wie beim Fahrzeug-Hero der Startseite. object-position schiebt das
   Zeichen nach rechts: links steht die Ueberschrift, und ein mittig sitzendes Motiv
   waere von ihr verdeckt. */
.kopf-bg{position:absolute;inset:0;z-index:0}
/* cover wie beim Fahrzeug-Hero. Moeglich wurde das erst mit der zweiten Bildfassung:
   das erste Rendering stand vor schwarzem Studiogrund, da lief der Scrim gegen eine
   Wand statt in eine Szene. Jetzt steht das Zeichen auf derselben hellen Strasse wie
   das Fahrzeug — der Verlauf hat etwas zum Ueberblenden.
   Die Bildquelle liegt seit der dritten Fassung im Seitenverhaeltnis des Kopfes vor
   (1376x636 statt 16:9), damit cover praktisch nichts mehr wegnimmt und das Zeichen
   ganz sichtbar bleibt — das war die eigentliche Ursache des Beschnitts, nicht die
   object-position. */
.kopf-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Rechts bewusst viel schwaecher als beim Fahrzeug-Hero (dort .32 am rechten Rand,
   hier .06): das Bild lebt von der farbigen Skyline und dem Sonnenlicht, und ein
   Verlauf, der bis nach rechts durchzieht, macht genau daraus wieder Grau. Links
   bleibt er dicht, weil dort die Ueberschrift steht. */
.kopf-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(97deg,
      rgba(7,20,29,.96) 0%,
      rgba(7,20,29,.93) 30%,
      rgba(7,20,29,.78) 48%,
      rgba(7,20,29,.52) 62%,
      rgba(7,20,29,.22) 76%,
      rgba(7,20,29,.06) 100%);
}
.kopf-in{position:relative;z-index:3}

/* Textschatten statt mehr Verlauf: die Ueberschrift laeuft ueber das helle Zeichen,
   und den Scrim dafuer weiter aufzuziehen wuerde genau die farbige Skyline wieder
   zu Grau machen, um die es hier geht. Dieselbe Loesung nutzt der Fahrzeug-Hero der
   Startseite fuer seinen Vorspann. */
.kopf h1{max-width:900px;font-size:clamp(1.9rem,4.4vw,3.15rem);
  text-shadow:0 2px 24px rgba(4,14,20,.75),0 1px 4px rgba(4,14,20,.5)}
/* Zweite Zeile bewusst kleiner als die erste: sie ist der Nachsatz, nicht die
   Aussage. .75em statt einer festen Groesse, damit das Verhaeltnis ueber die
   ganze clamp()-Spanne der H1 gleich bleibt. */
.kopf h1 em{font-style:normal;color:var(--mint);font-size:.75em}
.kopf .lead{color:rgba(255,255,255,.9);margin-bottom:22px;
  text-shadow:0 1px 18px rgba(4,14,20,.7),0 1px 3px rgba(4,14,20,.45)}
.kopf .eyebrow{text-shadow:0 1px 12px rgba(4,14,20,.6)}
.kopf-stand{
  margin:0;font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.6);
  /* --mint statt --mint-d: diese Zeile steht als einzige Verwendung von mint-d
     auf DUNKLEM Grund. Als mint-d fuer die Lesbarkeit auf hellem Papier
     abgedunkelt wurde, waere der Rand hier fast unsichtbar geworden. */
  border-left:2px solid var(--mint);padding-left:14px;max-width:680px;
}
.kopf-stand b{color:rgba(255,255,255,.88)}

/* --- Kurzfassung oben ------------------------------------------
   Steht bewusst VOR allen Details: wer ueber eine Suche kommt, hat
   genau eine Frage und soll sie beantwortet bekommen, ohne scrollen
   zu muessen. */
.kurz{
  background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--mint);
  border-radius:var(--radius);padding:clamp(24px,3.4vw,34px);
  box-shadow:0 2px 14px -8px rgba(10,26,38,.24);
}
.kurz h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin-bottom:20px}
.kurz .ticks{gap:14px}

/* --- Hervorgehobener Hinweis im Fliesstext ---------------------- */
.hinweis-box{
  background:rgba(255,122,89,.07);border:1px solid rgba(255,122,89,.28);
  border-radius:14px;padding:20px 22px;margin:26px 0 4px;max-width:820px;
}
.hinweis-box h3{margin:0 0 8px;font-size:1.02rem;font-weight:800;color:#B4431F}
.hinweis-box p{margin:0;color:var(--muted);font-size:.96rem}
.hinweis-box b{color:var(--ink)}

/* --- Nummerierter Ablauf ---------------------------------------
   Als <ol> ausgezeichnet, nicht als Kachelraster: die Reihenfolge
   ist hier rechtlich verbindlich, das gehoert in die Semantik und
   nicht nur in die Optik. Die sichtbare Ziffer kommt aus dem Markup
   und nicht aus einem ::before-Zaehler, damit sie beim Vorlesen
   ebenfalls ankommt. */
.zeit{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px;max-width:860px}
.zeit li{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.12)}
.zeit li:first-child{border-top:0;padding-top:4px}
.zeit-n{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--mint);color:#05202C;font-weight:800;font-size:.95rem;
}
.zeit h3{margin:0 0 5px;color:#fff;font-size:1.04rem}
.zeit p{margin:0;color:rgba(255,255,255,.72);font-size:.96rem;max-width:640px}

/* --- Was nicht erlaubt ist -------------------------------------- */
.nogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-top:30px}
.nogo-item{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:19px 21px;
}
.nogo-item b{display:block;color:#fff;font-size:.99rem;margin-bottom:7px;line-height:1.35}
.nogo-item span{display:block;color:rgba(255,255,255,.7);font-size:.91rem;line-height:1.6}
.nogo-item em{font-style:italic;color:rgba(255,255,255,.86)}

/* --- Paragraphen-Tabelle ----------------------------------------
   Der Wrapper scrollt, nicht die Seite: auf schmalen Displays
   soll die Tabelle nicht das gesamte Layout breiter machen. */
.ptab-wrap{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.ptab{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
.ptab th,.ptab td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.ptab thead th{background:var(--paper);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-d);font-weight:800}
.ptab tbody th{white-space:nowrap;font-weight:800;color:var(--ink);width:1%}
.ptab tbody td{color:var(--muted)}
.ptab tbody tr:last-child th,.ptab tbody tr:last-child td{border-bottom:0}

/* --- Quellenangaben --------------------------------------------- */
.quellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:24px}
.quellen a{
  display:block;text-decoration:none;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;transition:border-color .18s ease,transform .18s ease;
}
.quellen a:hover{border-color:var(--mint);transform:translateY(-2px)}
.quellen b{display:block;color:var(--ink);font-size:.97rem;margin-bottom:6px}
.quellen span{display:block;color:var(--muted);font-size:.89rem;line-height:1.55}

/* --- Abschluss-Aufruf -------------------------------------------
   Dunkler Grund, weil .btn-ghost fuer dunklen Untergrund gebaut ist
   (weisse Schrift) und auf hellem Panel unlesbar waere.
   .cta-row ist unter 820px global display:none — das ist fuer die
   mobile Hero-Leiste der Startseite gedacht. Hier hoehere
   Spezifitaet, sonst verschwindet der Aufruf auf dem Handy
   lautlos. */
.cta-box{
  background:var(--ink);border-radius:22px;color:#fff;text-align:center;
  padding:clamp(30px,4.6vw,52px) clamp(22px,4vw,44px);
}
.cta-box h2{color:#fff;margin-bottom:14px}
.cta-box p{color:rgba(255,255,255,.75)}
.cta-box .cta-row{display:flex;justify-content:center}

@media(max-width:820px){
  /* Auf schmalen Displays steht das Bild GANZ OBEN und der Text darunter — nicht
     mehr als Band am Fuss. Bild-dann-Text liest sich auf dem Handy ruhiger als
     Text-auf-Bild, und der Abschnitt beginnt mit dem Motiv statt damit zu enden.
     (Frueher: Band unten. Davor: hinter dem Text mit opacity .42 — das war
     praktisch unsichtbar.)

     Die Hoehe des Bandes haengt an der Viewport-Breite, nicht an einem festen
     Wert: das Bild liegt in 1376x636 vor, fuellt die volle Breite und ist damit
     immer 636/1376 = 46,2vw hoch. Ein fixes padding wuerde je nach Geraet eine
     Luecke oder eine Ueberlappung erzeugen. */
  .kopf{padding:0 0 34px}
  .kopf-bg{inset:0 0 auto 0;height:auto;line-height:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.6) 80%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.6) 80%,rgba(0,0,0,0) 100%)}
  .kopf-bg img{height:auto;object-fit:contain;object-position:center top;opacity:1}
  /* Der Text startet bei 40vw, also NOCH im ausmaskierten Bildbereich. Bei exakt
     46,2vw entstuende eine sichtbare Kante zwischen Bildende und Textanfang. */
  .kopf-in{padding-top:40vw}
  .kopf-scrim{
    background:
      radial-gradient(420px 240px at 78% 16%,rgba(0,224,164,.12),transparent 66%),
      linear-gradient(to bottom,
        rgba(7,20,29,.22) 0%,
        rgba(7,20,29,.10) 22%,
        rgba(7,20,29,.42) 40%,
        rgba(7,20,29,.86) 56%,
        rgba(7,20,29,.97) 72%,
        rgba(7,20,29,1) 100%);
  }
  .zeit li{gap:14px;padding:15px 0}
  .zeit-n{width:29px;height:29px;font-size:.88rem}
  .nogo{grid-template-columns:1fr;gap:11px}
  .quellen{grid-template-columns:1fr}
  .cta-box .cta-row{flex-direction:column;align-items:stretch}
  .cta-box .cta-row .btn{display:flex;justify-content:center;min-height:46px}
}

/* ============ Rechtsstand-Abschnitt der Startseite (2026-07-27) ============
   Der frueher hier stehende Textlink war im Fliesstext kaum sichtbar. Statt
   dessen zwei Badge-Formen: eine kraeftige neben der Ueberschrift, und je eine
   dezente am Fuss der drei gekuerzten Spalten. */

/* Ueberschrift links, Badge rechts — bricht auf schmalen Displays um, statt
   die Ueberschrift zu quetschen. */
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin:0 0 .5em}
.kopf-zeile h2{margin:0}

.para-badge{
  display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;
  background:var(--ink);color:#fff;border-radius:999px;padding:7px 20px 7px 7px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.para-badge:hover{transform:translateY(-2px);box-shadow:0 16px 32px -18px rgba(10,26,38,.75)}
.para-zeichen{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--mint);color:#05202C;font-weight:800;font-size:1.08rem;line-height:1;
}
.para-text{font-size:.9rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}

/* Spalten-Badge. .regeln>div ist kein Flex-Container, deshalb reicht ein
   margin-top statt einer Ausrichtung am unteren Rand. */
.mehr-badge{
  display:inline-flex;align-items:center;gap:7px;margin-top:15px;text-decoration:none;
  background:rgba(0,158,117,.10);border:1px solid rgba(0,158,117,.30);color:var(--mint-d);
  border-radius:999px;padding:6px 15px;font-size:.83rem;font-weight:800;
  transition:background .18s ease,border-color .18s ease;
}
.mehr-badge:hover{background:rgba(0,158,117,.18);border-color:var(--mint-d)}
.mehr-badge span{font-size:.98rem;line-height:1}

@media(max-width:820px){
  .kopf-zeile{gap:14px}
  .para-badge{padding:6px 16px 6px 6px}
  .para-zeichen{width:28px;height:28px;font-size:.98rem}
  .para-text{font-size:.85rem}
}