/* ─────────────────────────────────────────────────────────────
   Gemeinsames Stylesheet der Landingpages.

   EINE Datei für /index.html (deutsch) und /en/index.html (englisch).
   Zweimal eingebettet wäre es zweimal zu pflegen, und die zweite Fassung
   hinkte spätestens ab der ersten Änderung hinterher.

   Der Preis: ein zusätzlicher Abruf. Über HTTP/2 auf derselben Herkunft
   fällt der kaum ins Gewicht, und ab der zweiten Seite liegt die Datei
   ohnehin im Zwischenspeicher.

   Der Dateiname trägt die Version (landing-3.css). Nur deshalb darf Caddy
   sie "immutable" ausliefern. Wer hier etwas ändert, muss die Zahl
   hochsetzen UND beide <link>-Zeilen mitziehen -- sonst sehen
   Stammbesucher bis zu ein Jahr lang das alte Aussehen.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Farben: nur die fünf Signalfarben der App, sonst nichts.
   Sie treten als kleine Marken auf, nie als Fläche.
   ───────────────────────────────────────────────────────────── */
:root{
  --frei:#2563eb;      /* freie Strecke – zugleich Aktionsfarbe */
  --frei-tief:#1d4ed8; /* nur für den gedrückten Knopf */
  --limit:#dc2626;
  --bau:#eab308;
  --unbekannt:#9ca3af;
  --grund:#F4F6FA;
  --text:#1f2937;
  --text-leise:#5b6472;
  --linie:rgba(31,41,55,.10);
  --linie-fein:rgba(31,41,55,.06);
  --karte:#ffffff;
  --schatten:0 1px 2px rgba(31,41,55,.04), 0 8px 24px rgba(31,41,55,.05);
  --radius:14px;
  --radius-klein:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

h1,h2,h3{letter-spacing:-.02em;color:var(--text);margin:0;text-wrap:balance}
h1{font-size:clamp(32px,7.4vw,52px);line-height:1.1;font-weight:800}
h2{font-size:clamp(25px,4.2vw,34px);line-height:1.18;font-weight:750}
h3{font-size:19px;line-height:1.32;font-weight:700}
p{margin:0}

a{color:var(--frei);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:3px solid var(--frei);outline-offset:3px;border-radius:4px}

/* Nur für Vorleseprogramme: sichtbar entfernt, aber vorhanden. */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Zeilenlänge: nie mehr als 68 Zeichen */
.mass{max-width:62ch}
.mass-eng{max-width:54ch}

.wrap{max-width:1100px;margin:0 auto;padding:0 22px}

section{padding:68px 0}
section + section{border-top:1px solid var(--linie-fein)}
.kopfzeile-abschnitt{margin-bottom:34px;display:flex;flex-direction:column;gap:14px}
.uber{
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-leise);
}
.leise{color:var(--text-leise)}
.quelle{font-size:14.5px;color:var(--text-leise);margin-top:22px}

/* ── Kopf ───────────────────────────────────────────────────── */
.springmarke{
  position:absolute;left:-9999px;top:0;background:#fff;color:var(--text);
  padding:12px 18px;border-radius:0 0 var(--radius-klein) 0;z-index:20;
}
.springmarke:focus{left:0}
.seitenkopf{padding:22px 0 6px}
.seitenkopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Der Name darf nie umbrechen. "Autobahn-" ueber "Tempolimit" liest sich wie
   zwei Woerter statt wie eine Marke, und die Kopfzeile wird doppelt so hoch. */
.wortmarke{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;
  color:var(--text);text-decoration:none;font-size:16px;white-space:nowrap}
/* 34 Punkte statt der 16 der alten Balken. Das Motiv fuellt nur 66% der Datei,
   der sichtbare Ring wird also ~22 Punkte gross - erst damit wiegt das Zeichen
   so schwer wie der Schriftzug daneben. Der Abstand geht dafuer von 10 auf 9:
   ein groesseres Zeichen braucht weniger Luft, um dazuzugehoeren. */
.wortmarke .zeichen{width:34px;height:34px;display:block;flex:none}
/* "nowrap" ist hier nicht Geschmack: Seit rechts neben dem Link noch der
   Sprachknopf steht, ist der Platz auf 375 Punkten so knapp, dass "Zur Karte"
   sonst in zwei Zeilen umbricht und die ganze Kopfzeile hoeher wird. Der Text
   ist kurz genug, dass er in einer Zeile immer passt. */
.kopf-link{font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
/* 12 statt 16 Punkte Abstand, aus demselben Grund. */
.kopf-rechts{display:flex;align-items:center;gap:12px}
/* Der Sprachknopf zeigt die ANDERE Sprache, nicht die aktuelle -- er ist ein
   Link dorthin, keine Anzeige des Ist-Zustands. Deshalb steht auf der
   deutschen Seite "EN" und auf der englischen "DE". */
.kopf-sprache{
  font-size:13px;font-weight:700;letter-spacing:.04em;text-decoration:none;
  color:var(--text-leise);border:1px solid var(--linie);
  padding:5px 10px;border-radius:999px;line-height:1;
}
.kopf-sprache:hover{color:var(--text);border-color:var(--text-leise)}
/* Unter 720 px steht rechts jetzt ein dritter Eintrag (Ratgeber neben Karte und
   Sprachknopf). Der ausgeschriebene Markenname passt dann nicht mehr in eine
   Zeile. Deshalb bleibt auf schmalen Schirmen nur das runde Zeichen als
   Heim-Link; der Name steht weiter im Quelltext und wird vom Vorleseprogramm
   gelesen, er ist nur visuell auf 0 gesetzt. Ab 720 px kommt er zurueck. */
@media (max-width:719px){
  .wortmarke{font-size:0;gap:0}
}

/* ── Farbmarken ─────────────────────────────────────────────── */
.marke{
  display:inline-block;width:14px;height:14px;border-radius:4px;flex:none;
  vertical-align:-2px;
}
.m-frei{background:var(--frei)}
.m-limit{background:var(--limit)}
.m-bau{background:var(--bau)}
.m-unbekannt{background:var(--unbekannt)}
/* Dynamisch: rot und blau gestreift, wie in der App */
.m-dyn{background:repeating-linear-gradient(135deg,var(--frei) 0 4px,var(--limit) 4px 8px)}

.legende{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:0;list-style:none;
  font-size:14.5px;color:var(--text-leise)}
.legende li{display:flex;align-items:center;gap:9px}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{padding-top:34px}
.hero-text{display:flex;flex-direction:column;gap:22px}
.hero p.unter{font-size:19px;line-height:1.55;color:var(--text-leise)}
.aktion{display:flex;flex-direction:column;gap:11px;align-items:flex-start}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--frei);color:#fff;text-decoration:none;
  font-size:17px;font-weight:650;letter-spacing:-.01em;
  padding:15px 30px;border-radius:var(--radius-klein);border:0;
  box-shadow:0 1px 2px rgba(37,99,235,.28);
  transition:background .15s ease;
}
.knopf:hover{background:var(--frei-tief)}
.knopf:active{background:var(--frei-tief)}
.knopf--rand{
  background:#fff;color:var(--frei);border:1.5px solid var(--linie);
  box-shadow:none;font-weight:600;
}
.knopf--rand:hover{background:#fff;border-color:var(--frei)}

/* Offizieller "Laden im App Store"-Knopf. Schwarz mit Apfel-Zeichen, wie von
   Apple vorgegeben; fuehrt direkt zur Store-Seite der iPhone-App. */
.app-store-knopf{
  display:inline-flex;align-items:center;gap:9px;
  background:#000;color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:12px;line-height:1.05;
  transition:background .15s ease;
}
.app-store-knopf:hover{background:#1a1a1a}
.app-store-knopf svg{width:22px;height:22px;fill:#fff;flex:none}
.app-store-knopf small{display:block;font-size:11px;opacity:.85}
.app-store-knopf b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}

.hinweis{font-size:14.5px;color:var(--text-leise)}

/* Bildschirmfoto der App – Platzhalter im Seitenverhältnis 375 × 812 */
.schirm{
  position:relative;width:100%;max-width:322px;aspect-ratio:375/812;
  background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);
}
.schirm .platzhalter{
  position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;
  font-size:13px;line-height:1.5;color:var(--text-leise);
}
/* Das Bild liegt als Hintergrund darüber: fehlt die Datei, bleibt der
   Platzhalter stehen – kein kaputtes Bildsymbol. Rein schmückend, daher
   ohne Alternativtext.
   644 × 1394 ist genau das Doppelte des Kastens (322 breit) und hat dasselbe
   Seitenverhältnis wie er – "cover" schneidet also nichts ab.
   Neu erzeugen: python3 tools/bildschirmfoto.py

   Hier steht die deutsche Aufnahme. Die englische Seite überschreibt allein
   background-image mit app-karte-en.jpg; Lage, Größe und no-repeat aus dieser
   Kurzschreibweise bleiben dabei stehen. */
.schirm .bild{
  position:absolute;inset:0;
  background:url("/bilder/app-karte.jpg") center / cover no-repeat;
}

/* ── Die Antwort sofort: vier Zahlen ────────────────────────── */
.zahlen{display:grid;gap:14px}
.zahl{
  background:var(--karte);border:1px solid var(--linie-fein);border-radius:var(--radius);
  padding:22px;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:6px;
}
.zahl .streifen{height:7px;border-radius:4px;width:100%;margin-bottom:8px}
.s-frei{background:var(--frei)}
.s-limit{background:var(--limit)}
.s-dyn{background:repeating-linear-gradient(135deg,var(--frei) 0 5px,var(--limit) 5px 10px)}
.s-unbekannt{background:var(--unbekannt)}
.zahl b{font-size:clamp(28px,5vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.zahl .was{font-size:16px;font-weight:650}
.zahl .km{font-size:14.5px;color:var(--text-leise);font-variant-numeric:tabular-nums}

.summe{
  margin-top:22px;background:var(--karte);border:1px solid var(--linie-fein);
  border-radius:var(--radius);padding:22px 24px;box-shadow:var(--schatten);
}
.summe b{font-variant-numeric:tabular-nums}

/* ── Karten ─────────────────────────────────────────────────── */
.raster{display:grid;gap:18px}
.karte{
  background:var(--karte);border:1px solid var(--linie-fein);border-radius:var(--radius);
  padding:26px;box-shadow:var(--schatten);
}
.karte h3{margin-bottom:10px}
.karte p{color:var(--text-leise);font-size:16.5px}
.karte ol{
  color:var(--text-leise);font-size:16.5px;margin:0;padding-left:22px;
  display:flex;flex-direction:column;gap:8px;
}
.karte ol b{color:var(--text)}

/* ── Lösung: Farbmarke als Straßenabschnitt ─────────────────── */
.loesung{display:flex;flex-direction:column;gap:34px}
.punkt{display:flex;flex-direction:column;gap:12px}
.balken{width:56px;height:11px;border-radius:5px}
.b-frei{background:var(--frei)}
.b-dyn{background:repeating-linear-gradient(135deg,var(--frei) 0 5px,var(--limit) 5px 10px)}
.b-bau{background:var(--bau)}
.b-limit{background:var(--limit)}
.punkt p{color:var(--text-leise);font-size:16.5px}

/* ── Tempo-Rechner ──────────────────────────────────────────── */
.rechner{background:var(--karte);border:1px solid var(--linie-fein);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:26px 22px 22px}
.rechner-kopf{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--linie-fein)}
.rechner-kopf .strecke{font-size:18px;font-weight:700;letter-spacing:-.015em}
.rechner-kopf .distanz{font-size:15px;color:var(--text-leise);font-variant-numeric:tabular-nums}

.zeile{display:grid;grid-template-columns:74px 1fr;gap:4px 16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--linie-fein)}
.zeile:last-of-type{border-bottom:0}
.tempo{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.tempo span{font-size:12.5px;font-weight:500;color:var(--text-leise);display:block;letter-spacing:0}
.dauer{display:flex;align-items:baseline;gap:9px;font-variant-numeric:tabular-nums}
.dauer b{font-size:22px;font-weight:750;letter-spacing:-.02em}
.dauer em{font-style:normal;font-size:14px;color:var(--text-leise)}
.spur{grid-column:2;height:9px;border-radius:5px;background:rgba(31,41,55,.07);overflow:hidden}
.spur i{display:block;height:100%;width:var(--anteil,100%);border-radius:5px;background:var(--frei)}

.rechner-fuss{margin-top:20px;padding-top:18px;border-top:1px solid var(--linie-fein);
  font-size:15px;color:var(--text-leise)}

/* ── Funktionsübersicht ─────────────────────────────────────── */
.funktionen{display:grid;gap:18px;align-items:start}
.spalte{
  background:var(--karte);border:1px solid var(--linie-fein);border-radius:var(--radius);
  padding:26px;box-shadow:var(--schatten);
}
.spalte--premium{border:1.5px solid var(--linie)}
.spalte h3{margin-bottom:4px}
.spalte .preisnote{font-size:15px;color:var(--text-leise);margin-bottom:18px}
.spalte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.spalte li{display:flex;gap:12px;font-size:16.5px;color:var(--text-leise);line-height:1.5}
.spalte li .marke{margin-top:5px}
.spalte li b{color:var(--text);font-weight:650}

/* ── Preise ─────────────────────────────────────────────────── */
.versprechen{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:13px}
.versprechen li{display:flex;align-items:center;gap:13px;font-size:17px;font-weight:600}

.preise{display:grid;gap:18px;align-items:start}
.preis{
  position:relative;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius);padding:26px;box-shadow:var(--schatten);
  display:flex;flex-direction:column;gap:16px;
}
.preis--wahl{border:2px solid var(--frei);box-shadow:0 1px 2px rgba(37,99,235,.10),0 10px 30px rgba(37,99,235,.10)}
.abzeichen{
  position:absolute;top:-12px;left:26px;background:var(--frei);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.preis .art{font-size:15px;font-weight:700;letter-spacing:-.01em}
.preis .betrag{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.preis .betrag b{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.preis .betrag span{font-size:15px;color:var(--text-leise)}
.preis .dazu{font-size:15.5px;color:var(--text-leise)}
.preis .knopf{width:100%}

.preis-fuss{margin-top:26px;font-size:16.5px;color:var(--text-leise)}

/* ── Tabelle: die freiesten Autobahnen ──────────────────────── */
.tabelle-huelle{
  background:var(--karte);border:1px solid var(--linie-fein);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:8px 22px 14px;overflow-x:auto;
}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:14.5px;color:var(--text-leise);padding:14px 0 4px}
/* nowrap: sonst bricht "690 km" auf dem Handy in zwei Zeilen um und die
   Tabelle wird doppelt so hoch wie noetig. */
th,td{text-align:right;padding:11px 0 11px 16px;white-space:nowrap;
  border-bottom:1px solid var(--linie-fein);font-size:16px}
th:first-child,td:first-child{text-align:left;padding-left:0}
thead th{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-leise);border-bottom:1px solid var(--linie);vertical-align:bottom}
tbody tr:last-child td{border-bottom:0}
td.name{font-weight:700;letter-spacing:-.015em}
/* Der Balken ist reine Zugabe zur Prozentzahl. Unter 720 px ist kein Platz
   dafuer, ohne dass die Zahlen umbrechen -- dann faellt er weg. */
.spur-zelle{display:none}
.mini{height:9px;border-radius:5px;background:rgba(31,41,55,.07);overflow:hidden;min-width:70px}
.mini i{display:block;height:100%;border-radius:5px;background:var(--frei);width:var(--anteil,100%)}

/* ── Fragen ─────────────────────────────────────────────────── */
.fragen{display:flex;flex-direction:column;gap:10px}
.fragen-gruppe{margin:34px 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-leise)}
.fragen-gruppe:first-child{margin-top:0}
details{
  background:var(--karte);border:1px solid var(--linie-fein);border-radius:var(--radius-klein);
  box-shadow:var(--schatten);
}
summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-size:17px;font-weight:650;letter-spacing:-.012em;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-radius:var(--radius-klein);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--unbekannt);border-bottom:2px solid var(--unbekannt);
  transform:rotate(45deg) translateY(-3px);
}
details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details p{padding:0 22px 20px;color:var(--text-leise);font-size:16.5px}

/* ── Abschluss und Fußzeile ─────────────────────────────────── */
.abschluss{text-align:left}
.seitenfuss{padding:34px 0 46px;border-top:1px solid var(--linie-fein);font-size:15px}
.seitenfuss nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;padding:0;margin:0 0 16px}
.seitenfuss a{color:var(--text-leise);text-decoration:none}
.seitenfuss a:hover{color:var(--text);text-decoration:underline}
.seitenfuss .zeile-klein{color:var(--text-leise);font-size:14px}

/* Datenschutz-Hinweis statt Cookie-Banner.
   Diese Seite speichert und liest nichts auf dem Gerät: kein Skript, kein
   Cookie, kein localStorage, keine fremde Schrift, kein fremdes Bild.
   § 25 TDDDG verlangt eine Einwilligung nur für genau das -- es gibt hier
   also nichts einzuwilligen. Ein Banner würde Zustimmung für etwas
   einholen, das gar nicht stattfindet.
   Deshalb steht hier eine AUSSAGE statt einer Abfrage: nichts zum
   Wegklicken, nichts, was beim nächsten Besuch wiederkommt, und sie
   verschwindet auch nicht -- ein weggeklickter Banner ist danach nicht
   mehr auffindbar, dieser Absatz schon. */
.datenschutz-hinweis{
  background:var(--karte);border:1px solid var(--linie-fein);
  border-radius:var(--radius-klein);box-shadow:var(--schatten);
  padding:16px 20px;margin:0 0 22px;max-width:62ch;
  font-size:14.5px;line-height:1.55;color:var(--text-leise);
}
.datenschutz-hinweis b{color:var(--text);font-weight:650}
.datenschutz-hinweis a{color:var(--frei);text-decoration:underline}

/* ─────────────────────────────────────────────────────────────
   Ab 720 px: zwei Spalten
   ───────────────────────────────────────────────────────────── */
@media (min-width:720px){
  body{font-size:18px}
  section{padding:100px 0}
  .hero{padding-top:52px}
  .hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
  .hero .unter{font-size:20px}
  .schirm{max-width:340px;margin-left:auto}
  .zahlen{grid-template-columns:repeat(4,1fr);gap:18px}
  .raster--drei{grid-template-columns:repeat(3,1fr);gap:20px}
  .raster--zwei{grid-template-columns:repeat(2,1fr);gap:20px}
  .loesung{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
  .funktionen{grid-template-columns:1fr 1fr;gap:22px}
  .preise{grid-template-columns:1fr 1fr;gap:22px}
  .rechner{padding:32px}
  .zeile{grid-template-columns:96px 200px 1fr;gap:20px;align-items:center}
  .spur{grid-column:auto}
  .versprechen li{font-size:18px}
  .spur-zelle{display:table-cell;width:42%;padding-left:28px}
  .abschluss .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
}
@media (min-width:1000px){
  .hero .unter{font-size:21px}
  .loesung{grid-template-columns:repeat(4,1fr);gap:32px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}