/* Gemeinsam fuer alle Seiten: Farben, Schrift, Kopf, Fuss, Taste.
   Uebernommen aus dem Entwurf (start.css), damit beide nicht auseinanderlaufen.
   Darunter die Teile, die der Entwurf nicht hatte: ein echtes Suchfeld, der
   Sprachumschalter als Link statt als Schalter, und die Rechtstexte. */

*, *::before, *::after { box-sizing: border-box; }

/* Im Entwurf war .kfz ein div innerhalb einer Huelle, die den Rand des body
   schon zurueckgesetzt hatte. Hier IST .kfz der body. Ohne diese Zeile bleibt
   der Standardrand von 8px stehen, und jede Seite scrollt seitlich. */
html, body { margin: 0; padding: 0; }
body.kfz { overflow-x: hidden; }

      .kfz {
        --papier: #fcfcfb;
        --panel: #f4f4f1;
        --senke: #eeeeea;
        --rule: #dcdcd6;
        --tinte: #1a1a19;
        --tinte2: #55554f;
        --tinte3: #7a7a72;
        --teal: #1f8f74;
        --teal-tief: #14604e;
        --teal-zart: #e7f1ee;
        --amber: #c2750e;
        --rot: #8f3523;

        --takt: 8px;
        --rand: 72px;

        font-family: var(--schrift-text);
        font-size: 16px;
        line-height: 1.6;
        color: var(--tinte);
        background: var(--papier);
        width: 100%;
        min-height: 100%;
        -webkit-font-smoothing: antialiased;
      }

      .kfz h1, .kfz h2, .kfz h3, .kfz .anzeige {
        font-family: var(--schrift-anzeige);
        font-weight: 500;
        letter-spacing: -0.022em;
        line-height: 1.08;
        margin: 0;
        text-wrap: balance;
      }

      .kfz p { margin: 0; }
      .kfz a { color: inherit; text-decoration: none; }

      .zahl { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

      .bahn { max-width: 1120px; margin: 0 auto; padding: 0 var(--rand); }

      /* ---------- Kopf ---------- */
      .kopf {
        position: sticky; top: 0; z-index: 20;
        background: color-mix(in srgb, var(--papier) 88%, transparent);
        backdrop-filter: saturate(140%) blur(12px);
        border-bottom: 1px solid var(--rule);
      }
      .kopf-innen {
        display: flex; align-items: center; gap: 40px;
        height: 72px;
      }
      .marke {
        font-family: var(--schrift-anzeige);
        font-weight: 600; font-size: 19px; letter-spacing: -0.03em;
        display: flex; align-items: center; gap: 9px;
      }
      .marke-zeichen {
        width: 18px; height: 18px; flex: none;
        border: 1.5px solid var(--teal); border-radius: 50%;
        position: relative;
      }
      .marke-zeichen::after {
        content: ""; position: absolute; inset: 4.5px;
        background: var(--teal); border-radius: 50%;
      }
      .nav { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--tinte2); }
      .nav a { position: relative; padding: 4px 0; transition: color .18s ease; }
      .nav a::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0;
        height: 1.5px; background: var(--teal);
        transform: scaleX(0); transform-origin: left;
        transition: transform .22s cubic-bezier(.2,.7,.2,1);
      }
      .nav a:hover { color: var(--tinte); }
      .nav a:hover::after { transform: scaleX(1); }

      .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }

      .sprache {
        display: flex; border: 1px solid var(--rule); border-radius: 7px;
        overflow: hidden; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
      }
      .sprache label {
        padding: 5px 10px; color: var(--tinte3); cursor: pointer;
        transition: background .16s ease, color .16s ease;
      }
      .sprache label:first-child { border-right: 1px solid var(--rule); }
      .kfz:has(#lang:not(:checked)) .sp-de,
      .kfz:has(#lang:checked) .sp-en { background: var(--tinte); color: var(--papier); }
      #lang { position: absolute; opacity: 0; pointer-events: none; }
      .kfz:has(#lang:checked) [data-de] { display: none; }
      .kfz:has(#lang:not(:checked)) [data-en] { display: none; }

      .taste {
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--tinte); color: var(--papier);
        font-family: var(--schrift-text); font-size: 14.5px; font-weight: 600;
        padding: 10px 18px; border: 1px solid var(--tinte); border-radius: 8px;
        cursor: pointer; white-space: nowrap;
        transition: transform .16s cubic-bezier(.2,.7,.2,1), background .16s ease;
      }
      .taste:hover { background: #000; transform: translateY(-1px); }
      .taste:active { transform: translateY(0); }
      .taste.leise { background: transparent; color: var(--tinte); border-color: var(--rule); }
      .taste.leise:hover { background: var(--senke); border-color: var(--tinte3); }

      .fuss { padding: 64px 0 48px; }
      .fuss-raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
      .fuss h4 { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tinte3); margin: 0 0 14px; }
      .fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
      .fuss li { font-size: 14px; color: var(--tinte2); }
      .fuss li a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
      .fuss .marke { margin-bottom: 14px; }
      .fuss .risiko {
        margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule);
        font-size: 12.5px; color: var(--tinte3); line-height: 1.6; max-width: 86ch;
      }


/* --- Sprachumschalter: im Entwurf eine CSS-Checkbox, hier zwei Links ----- */
.sprache { display: inline-flex; }
.sprache > * {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 9px; color: var(--tinte2); line-height: 1;
}
.sprache > *:first-child { border-right: 1px solid var(--rule); }
.sprache .hier { background: var(--tinte); color: var(--papier); }
.sprache a:hover { color: var(--tinte); }

/* --- Taste ist jetzt ein Link, nicht ein button -------------------------- */
/* Im Entwurf war das ein <button>, deshalb griff `.kfz a { color: inherit }`
   nie. Als <a> gewinnt diese Regel gegen `.taste` (gleiche Spezifitaet, aber
   frueher im Stil), und die Schrift wurde schwarz auf schwarz: die Taste sah
   aus wie ein leerer Kasten. Deshalb hier noch einmal ausdruecklich. */
a.taste { display: inline-flex; align-items: center; text-decoration: none; }
/* Die Farbe steht in zuletzt.css: die Seiten-CSS aus dem Entwurf setzt spaeter
   noch einmal `.kfz a { color: inherit }`, mit gleicher Spezifitaet. Wer zuletzt
   kommt, gewinnt, deshalb gehoert die Korrektur in die letzte Datei. */

/* --- Suchfeld im Kopf ---------------------------------------------------- */
.suche {
  position: relative; display: flex; align-items: center; flex: 1;
  max-width: 420px; margin: 0 24px;
}
.suche-zeichen {
  position: absolute; left: 12px; color: var(--tinte3); font-size: 15px; pointer-events: none;
}
.suche input {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--tinte);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 8px;
  padding: 9px 12px 9px 34px; min-height: 40px;
}
.suche input::placeholder { color: var(--tinte3); }
.suche input:focus { outline: 2px solid var(--teal); outline-offset: 1px; background: var(--papier); }
.nurlesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.fuss-marke { font-size: 14px; color: var(--tinte3); max-width: 34ch; }
.nav a[aria-current="page"] { color: var(--tinte); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* --- Rechtstexte --------------------------------------------------------- */
.rechtstext {
  padding: 72px 0 96px; max-width: 72ch; font-size: 16.5px; line-height: 1.7;
}
.rechtstext h1 { font-size: 40px; margin: 0 0 24px; }
.rechtstext h2 {
  font-size: 21px; margin: 44px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
.rechtstext p { margin: 0 0 16px; }
.rechtstext ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.rechtstext li { padding-left: 2px; }
.rechtstext a { color: var(--teal-tief); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext strong { font-weight: 600; }
.rechts-vorlauf { font-size: 18px; color: var(--tinte2); }
.rechts-hinweis {
  font-size: 14px; color: var(--tinte3); background: var(--panel);
  border-left: 2px solid var(--rule); padding: 10px 14px; margin: 0 0 28px;
}

/* --- Schmale Schirme ----------------------------------------------------- */
@media (max-width: 1024px) {
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .fuss-raster { grid-template-columns: 1fr; }
  .rechtstext { padding: 40px 0 64px; font-size: 16px; }
  .rechtstext h1 { font-size: 30px; }
  .rechtstext h2 { font-size: 19px; margin-top: 32px; }
  .suche { margin: 0 12px; }
  .nav { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .nav a:hover::after { transform: scaleX(0); }
  .taste:hover { transform: none; }
}

/* ---- Rueckmeldung eines Formulars ----
   Steht in gemeinsam.css, weil jede Seite ein Formular bekommen kann. Die Meldung
   ist bis zum ersten Absenden versteckt und traegt role="status", damit ein
   Vorleseprogramm sie ansagt, ohne dass der Fokus springt. */
.warteform-meldung {
  flex-basis: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 8px;
  font-size: 14px; line-height: 1.5; text-align: left;
}
.warteform-meldung[hidden] { display: none; }
.warteform-meldung.gut { background: var(--teal-zart); border-color: var(--teal); color: var(--teal-tief); }
.warteform-meldung.schlecht { background: var(--amber-zart); border-color: var(--amber); color: var(--rot); }
.feld[aria-invalid="true"] { border-color: var(--rot); }
.taste[disabled] { opacity: .55; cursor: progress; }

/* Nur fuer Vorleseprogramme. Eine Beschriftung, die jeder sehende Nutzer schon am
   Platzhalter erkennt, soll trotzdem vorgelesen werden. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sichtbarer Tastaturfokus. Ohne ihn ist die Seite mit der Tastatur nicht bedienbar. */
.kfz :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.kfz :focus:not(:focus-visible) { outline: none; }

/* Mehrere Karten nebeneinander, so breit, wie sie lesbar bleiben. */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 18px; }
.karten > * { min-width: 0; }

/* Der Titelblock einer schlichten Seite. aktie.css bringt eine eigene Fassung mit;
   diese hier gilt fuer alle uebrigen, damit die Ueberschrift nicht an der
   Kopfzeile klebt. */
.titelblock { padding: 48px 0 8px; }
.titelblock h1 { margin: 0 0 14px; }
.titelblock .nachsatz { max-width: 58ch; font-size: 16.5px; line-height: 1.6; color: var(--tinte2); }
.titelblock .warteform { margin: 28px 0 0; }
.titelblock .fussnote { margin-top: 12px; }
@media (max-width: 720px) { .titelblock { padding: 28px 0 4px; } }

/* Seiten, auf denen ein Klick aus einer Bestaetigungs- oder Abmeldemail landet.
   `.kfz p` traegt keinen Rand, also kleben mehrere Absaetze aneinander — auf der
   Seite fuer ungueltige Links sogar deutsch und englisch zu einem Block. */
.antwort p + p { margin-top: 14px; }
.antwort p[lang="en"] { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.antwort .taste { display: inline-block; margin-top: 26px; }