/* ---- aus ../logo/tokens.css ---- */
/*
 * eförderungen.de – Farben und Schrift als CSS-Variablen.
 *
 * Teil des Markenhandbuchs (logo/README.md). Die beiden Markenfarben sind die
 * Farben des Logos und stehen genauso in logo/_work/build.py; das Skript bricht
 * ab, wenn sie hier anders lauten.
 *
 * Kontraste (WCAG 2.x) stehen hinter jedem Wert: „auf Weiß".
 */
:root {
  /* Markenfarben – genau die des Logos */
  --marke-navy:        #0A3165;   /* 12,80 : 1 – Schrift, Flächen, Primärknopf */
  --marke-gruen:       #5EB241;   /*  2,65 : 1 – nur Logo, Flächen, Zierde; keine Schrift */

  /* Abgeleitet für Schrift und Bedienelemente */
  --marke-gruen-dunkel: #3B7629;  /*  5,51 : 1 – grüne Schrift, Links, Häkchen */
  --marke-navy-hell:    #EBEFF3;  /* Navy 8 % auf Weiß – Flächen hinter Navy-Schrift (11,08 : 1) */
  --marke-gruen-hell:   #EFF7EC;  /* Grün 10 % auf Weiß – Hinweisflächen; darauf --marke-gruen-dunkel (5,04 : 1) */

  /* Neutrale Töne, zum Navy hin getönt */
  --text:          #1C2B3F;       /* 14,32 : 1 – Fließtext */
  --text-leise:    #5B6878;       /*  5,68 : 1 – Nebentext, Beschriftungen */
  --linie:         #D9E0E8;       /* Rahmen, Trennlinien */
  --grund:         #F5F7FA;       /* Seitengrund hinter weißen Karten */
  --weiss:         #FFFFFF;

  /* Schrift: Montserrat (SIL Open Font License), selbst gehostet – siehe README */
  --schrift: "Montserrat", "Segoe UI", Arial, sans-serif;
  --schrift-gewicht-text: 400;
  --schrift-gewicht-betont: 600;
  --schrift-gewicht-titel: 800;  /* kommt dem Schriftzug des Logos am nächsten */
}

/* ---- aus quelle/stil.css ---- */
/*
 * eförderungen.de — die Gestaltung der Webseite.
 *
 * Kopf, Fuß, Knöpfe und Cookie-Hinweis haben die Maße der öffentlichen Seite
 * von Beraterantrag.de (Weisung des Betreibers, 2026-10-15: „Die Kopfzeile
 * und Fußzeile soll wie bei beraterantrag.de sein. nur mit den jeweiligen
 * informationen und logos“). Farben und Schrift sind die eigenen, aus dem
 * Markenhandbuch (../logo/README.md); bauen.mjs stellt ../logo/tokens.css
 * davor.
 *
 * ⚠ DIE EINE FARBREGEL: Markengrün (#5EB241) ist keine Textfarbe — Weiß auf
 * Grün hat 2,65 : 1. Beraterantrag.de hat grüne Knöpfe mit weißer Schrift;
 * hier sind sie deshalb Navy (12,80 : 1), wie es das Handbuch für
 * Primärknöpfe vorsieht. Grüne Schrift und Links: --marke-gruen-dunkel.
 */

/* Montserrat, die Hausschrift — von dieser Seite ausgeliefert, nicht von
   Google (Markenhandbuch: Das Nachladen dort übermittelt die IP-Adresse jedes
   Besuchers). Drei Schnitte, wie im Handbuch: 400 Text, 600 Knöpfe und
   Zwischentitel, 800 Überschriften. Lizenz: schrift/OFL.txt. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/schrift/montserrat-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/schrift/montserrat-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/schrift/montserrat-extrabold.woff2") format("woff2");
}

:root {
  --web-haarlinie: rgba(0, 0, 0, 0.07);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* Weich scrollen bei Sprüngen innerhalb der Seite — aber erst nach dem Laden
   (seite.js setzt dann html.weich). Sonst scrollte der Browser auch beim
   Aufruf eines Sprungziels (/e-auto-foerderung#fahrzeugart) weich, rechnete
   das Ziel aus, bevor die Hausschrift geladen war, und landete daneben —
   gemessen am 2026-10-15: am Handy 41 px zu tief. */
@media (prefers-reduced-motion: no-preference) {
  html.weich {
    scroll-behavior: smooth;
  }
}

/* Solange der Cookie-Hinweis steht, hält die Seite unten so viel Platz frei,
   wie er hoch ist — sonst verdeckte er am Seitenende die Fußzeile mit
   Impressum und Datenschutz. seite.js misst die Höhe und schreibt sie hier
   hinein. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-weight: var(--schrift-gewicht-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--web-cookie-hoehe, 0px);
}

/* Bei offenem Fenster scrollt die Seite dahinter nicht mit. */
html:has(dialog[open]) {
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--marke-gruen-dunkel);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Breite ---- */

.web-innen,
.web-kopf-innen {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* ---- Kopfzeile ---- */

.web-kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(245, 247, 250, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--web-haarlinie);
}

.web-kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
}

.web-kopf-marke {
  display: flex;
  flex: none;
  align-items: center;
}

/* Das ganze Logo, nicht nur die Wortmarke: Das Auto über dem Euro trägt die
   Marke. 44 px hoch sind rund 141 px breit — der Schriftzug darin bleibt
   lesbar, und die Kopfzeile behält die 64 px von Beraterantrag.de. */
.web-kopf-marke img {
  display: block;
  width: auto;
  height: 44px;
}

.web-kopf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  margin-right: 16px;
}

.web-kopf-nav a {
  color: var(--text);
  font-size: 14px;
  font-weight: var(--schrift-gewicht-text);
  letter-spacing: -0.005em;
  text-decoration: none;
}

.web-kopf-nav a:hover,
.web-kopf-nav a:focus-visible {
  color: var(--marke-gruen-dunkel);
}

/* Fett an genau dem Merkmal, das auch der Bildschirmleser vorliest. */
.web-kopf-nav a[aria-current="page"] {
  font-weight: var(--schrift-gewicht-betont);
}

/* ---- Knöpfe ---- */

.web-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--marke-navy);
  color: var(--weiss);
  font: inherit;
  font-size: 14px;
  font-weight: var(--schrift-gewicht-betont);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.web-knopf:hover {
  background: #082953;
}

.web-knopf-still {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.web-knopf-still:hover,
.web-knopf-still:focus-visible {
  background: transparent;
  border-color: var(--marke-navy);
}

/* ---- Sprunglink ---- */

.web-sprunglink {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 50;
  transform: translateY(-160%);
  transition: transform 0.15s;
}

/* Der Schatten erst mit dem Fokus: Versteckt ragte er sonst als grauer Hauch
   über den oberen Rand ins Logo. */
.web-sprunglink:focus,
.web-sprunglink:focus-visible {
  transform: translateY(0);
  box-shadow: 0 6px 20px rgba(10, 49, 101, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .web-sprunglink {
    transition: none;
  }
}

/* ---- Inhalt ---- */

.web-inhalt {
  flex: 1;
}

.web-inhalt:focus {
  outline: none;
}

/* Platzhalter für Startseite und E-Auto-Förderung, bis der Inhalt kommt. */
.web-platzhalter {
  padding-block: 96px;
  text-align: center;
}

.web-platzhalter h1 {
  margin: 0;
  color: var(--marke-navy);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.web-platzhalter p {
  margin: 1rem 0 0;
  color: var(--text-leise);
}

/* ---- Rechtsseiten ---- */

.rechtsseite {
  max-width: 800px;
  padding-block: 48px 72px;
}

.rechtsseite h1 {
  margin: 0;
  color: var(--marke-navy);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.rechtsseite .stand {
  margin: 0.5rem 0 0;
  color: var(--text-leise);
  font-size: 14px;
}

.rechtsseite h2 {
  margin: 2.25rem 0 0.5rem;
  color: var(--marke-navy);
  font-size: 1.125rem;
  font-weight: var(--schrift-gewicht-betont);
  line-height: 1.35;
}

.rechtsseite h3 {
  margin: 1.5rem 0 0.4rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: var(--schrift-gewicht-betont);
}

.rechtsseite p,
.rechtsseite li {
  margin: 0.6rem 0 0;
}

.rechtsseite ul,
.rechtsseite ol {
  margin: 0.6rem 0 0;
  padding-left: 1.25rem;
}

.rechtsseite .leise {
  color: var(--text-leise);
}

.rechtsseite .hinweis {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: var(--marke-navy-hell);
}

/* Ein Absatz mit Nummer wie „(1)“ — die Nummer hebt sich ab. */
.rechtsseite .nr {
  font-weight: var(--schrift-gewicht-betont);
}

.rechtsseite a,
.web-platzhalter a,
.web-cookie-text a {
  color: var(--marke-gruen-dunkel);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Fußzeile ---- */

.web-fuss {
  padding-block: 20px;
  background: var(--grund);
  border-top: 1px solid var(--web-haarlinie);
  color: var(--text-leise);
  font-size: 13px;
}

.web-fuss-innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
}

.web-fuss-name {
  margin: 0;
  color: var(--text);
  font-weight: var(--schrift-gewicht-betont);
}

.web-fuss-kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  margin: 4px 0 0;
}

.web-fuss a {
  color: var(--text-leise);
  text-decoration: none;
}

.web-fuss a:hover,
.web-fuss a:focus-visible,
.web-fuss-knopf:hover,
.web-fuss-knopf:focus-visible {
  color: var(--marke-navy);
  text-decoration: underline;
}

.web-fuss-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.web-fuss-knopf {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ---- Cookie-Hinweis ---- */

.web-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 18px 40px;
  background: var(--weiss);
  border-top: 1px solid var(--web-haarlinie);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.06);
}

.web-cookie[hidden] {
  display: none;
}

.web-cookie-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  max-width: 1728px;
  margin: 0 auto;
}

.web-cookie-text {
  flex: 1 1 460px;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.web-cookie-kurz {
  display: none;
}

.web-cookie-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.web-cookie-knoepfe [hidden] {
  display: none;
}

.web-cookie-zu {
  align-self: flex-start;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.web-cookie-zu:hover,
.web-cookie-zu:focus-visible {
  background: var(--grund);
  color: var(--text);
}

/* ---- Fenster (Cookie-Einstellungen, Anfrage) ---- */

/* Das Fenster selbst hat keinen Rand nach innen: So trifft ein Klick, dessen
   Ziel das <dialog> selbst ist, sicher den abgedunkelten Grund daneben. */
.web-fenster {
  width: calc(100% - 48px);
  max-width: 560px;
  max-height: min(88vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--weiss);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 24px 60px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
}

.web-fenster::backdrop {
  background: rgba(2, 8, 20, 0.32);
}

.web-fenster-innen {
  padding: 26px 28px;
}

.web-fenster-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.web-fenster-titel {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.web-cookie-vorspann {
  margin: 0;
  color: var(--text-leise);
  font-size: 14px;
  line-height: 1.6;
}

.web-cookie-gruppe {
  padding: 18px 0;
  border-bottom: 1px solid var(--web-haarlinie);
}

.web-cookie-gruppe:last-of-type {
  border-bottom: 0;
}

.web-cookie-kopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.web-cookie-kopf input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--marke-navy);
}

.web-cookie-kopf label {
  color: var(--text);
  font-size: 15px;
  font-weight: var(--schrift-gewicht-betont);
  letter-spacing: -0.01em;
}

.web-cookie-fest {
  margin-left: auto;
  color: var(--text-leise);
  font-size: 12px;
  white-space: nowrap;
}

.web-cookie-gruppe p {
  margin: 6px 0 0 30px;
  color: var(--text-leise);
  font-size: 13px;
  line-height: 1.6;
}

.web-cookie-knoepfe-fenster {
  margin-top: 22px;
}

/* Das Anfrage-Fenster: bis zum Tool ohne Inhalt, aber in seiner Größe. */
.web-anfrage-inhalt {
  min-height: 220px;
}

/* ---- Schmale Fenster ---- */

@media (max-width: 900px) {
  .web-kopf-innen {
    flex-wrap: wrap;
    row-gap: 12px;
    height: auto;
    padding-block: 9px;
  }
  .web-kopf-nav {
    order: 3;
    width: 100%;
    margin-right: 0;
    gap: 8px 20px;
  }
  .web-kopf-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .web-knopf,
  .web-kopf-marke {
    min-height: 44px;
  }
  .web-cookie-zu {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 720px) {
  .web-innen,
  .web-kopf-innen {
    padding-inline: 20px;
  }
  .web-cookie {
    padding: 16px 20px;
  }
  .web-cookie-innen {
    gap: 14px;
  }
  .web-fenster-innen {
    padding: 22px 20px;
  }
  .web-platzhalter {
    padding-block: 64px;
  }
}

@media (max-width: 640px) {
  .web-cookie-lang {
    display: none;
  }
  .web-cookie-kurz {
    display: inline;
  }
  .web-fuss a,
  .web-fuss-knopf {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .web-fuss-links {
    gap: 0 18px;
  }
}

/* ---- Muster-Widerrufsformular als E-Mail-Vorlage (widerruf.html) ----
   Seit 2026-10-15, Weisung des Betreibers: „… sodass es wie eine echte
   e-mail-vorlage aussieht“. Ein Fenster „Neue E-Mail“: Leiste, Kopfzeilen
   Von/An/Betreff, der Text des Musters mit Linien zum Ausfüllen, unten die
   Knöpfe. Der Wortlaut des Musters steht unverändert im HTML. */

.rechtsseite .mailvorlage-hinweis {
  margin-top: 0.4rem;
  color: var(--text-leise);
  font-size: 14.5px;
}

.mailvorlage {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--weiss);
  box-shadow: 0 1px 2px rgba(10, 49, 101, 0.06), 0 18px 40px rgba(10, 49, 101, 0.1);
}

.mailvorlage-leiste {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}

.mailvorlage-leiste span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #D3DAE3;
}

.rechtsseite .mailvorlage-leiste p {
  margin: 0 0 0 10px;
  color: var(--text-leise);
  font-size: 12.5px;
  font-weight: var(--schrift-gewicht-betont);
}

.mailvorlage-kopf {
  margin: 0;
  padding: 2px 20px;
  border-bottom: 1px solid var(--linie);
}

.mailvorlage-kopf div {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  font-size: 14.5px;
}

.mailvorlage-kopf div + div {
  border-top: 1px solid var(--web-haarlinie);
}

.mailvorlage-kopf dt {
  flex: none;
  width: 64px;
  color: var(--text-leise);
}

.mailvorlage-kopf dd {
  margin: 0;
  color: var(--text);
  font-weight: var(--schrift-gewicht-betont);
  overflow-wrap: anywhere;
}

.mailvorlage-kopf .mailvorlage-platzhalter {
  color: #9AA5B4;
  font-weight: var(--schrift-gewicht-text);
  font-style: italic;
}

.mailvorlage-text {
  padding: 22px 20px 6px;
  font-size: 15px;
  line-height: 1.65;
}

.rechtsseite .mailvorlage-text p {
  margin: 0 0 14px;
}

/* Die Linien zum Ausfüllen: gestrichelt, wie auf einem Vordruck. */
.rechtsseite .mailvorlage-linie {
  height: 1.6em;
  margin: -6px 0 18px;
  border-bottom: 1.5px dashed var(--linie);
}

.mailvorlage-felder {
  margin: 0 0 16px;
}

.mailvorlage-felder div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px;
  padding: 7px 0;
}

.mailvorlage-felder dt {
  color: var(--text);
}

.mailvorlage-felder dd {
  height: 1.5em;
  margin: 0;
  border-bottom: 1.5px dashed var(--linie);
}

.rechtsseite .mailvorlage-fussnote {
  color: var(--text-leise);
  font-size: 13.5px;
}

.mailvorlage-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--linie);
  background: var(--grund);
}

/* .rechtsseite a färbt Verweise grün und unterstreicht sie — die Knöpfe hier
   bleiben Knöpfe. */
.mailvorlage .web-knopf {
  color: var(--weiss);
  text-decoration: none;
}

.mailvorlage .web-knopf-still {
  background: var(--weiss);
  color: var(--text);
}

.mailvorlage-status {
  color: var(--marke-gruen-dunkel);
  font-size: 13.5px;
  font-weight: var(--schrift-gewicht-betont);
}

@media (max-width: 640px) {
  .mailvorlage-kopf,
  .mailvorlage-text,
  .mailvorlage-aktionen {
    padding-inline: 16px;
  }
  .mailvorlage-felder div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .mailvorlage-aktionen .web-knopf {
    flex: 1 1 auto;
  }
}

/*
 * ======== Die Inhalte: Startseite und „E-Auto-Förderung“ ========
 * Seit dem 2026-10-15 als Vorschau, freigegeben und hierher übernommen am
 * 2026-10-18 (Weisung des Betreibers: „Du sollst nur den admin bereich und
 * die unter "https://vorschau.efoerderungen.pages.dev/" einbauen“,
 * webseite/ERLEDIGT.md, Punkt 6).
 *
 * Aufbau nach der öffentlichen Seite von Beraterantrag.de (Kopfbereich mit
 * Karte, Bänder in Weiß und Grau, Karten, Schritte, Produkt), Farben und
 * Schrift aus dem Markenhandbuch (../logo/).
 */

/* Sprungziele (#rechner, /e-auto-foerderung#fahrzeugart …) landen unter der
   festen Kopfzeile, nicht dahinter. Sie ist 65 px hoch, unter 900 px Breite
   119 px (zweite Zeile mit den Bereichen; gemessen am 2026-10-15). */
[id] {
  scroll-margin-top: 84px;
}

@media (max-width: 900px) {
  [id] {
    scroll-margin-top: 136px;
  }
}

/* Schmale Handys: Logo, „Jetzt Anfragen“ und das Personen-Symbol müssen in
   eine Zeile passen, sonst wird die Kopfzeile 175 px hoch. Gemessen am
   2026-10-18: Sie brauchen in voller Größe 393 px (mit Rand), seit dem
   Symbol. Deshalb zwei Stufen kleiner — bis 412 px (iPhone 375 bis 414,
   Android 384 und 412) und bis 374 px (360, 340, 320). */
@media (max-width: 412px) {
  .web-kopf-marke img {
    height: 38px;
  }
  .web-kopf .web-knopf {
    padding: 0 14px;
    font-size: 13.5px;
  }
}

@media (max-width: 374px) {
  .web-kopf-innen {
    column-gap: 10px;
    padding-inline: 14px;
  }
  .web-kopf-marke img {
    height: 31px;
  }
  .web-kopf .web-knopf {
    padding: 0 11px;
    font-size: 12.5px;
  }
  /* .web-kopf davor: Die 44 px unter 900 px stehen weiter hinten
     („Konto“) und gingen sonst vor. */
  .web-kopf .web-konto-knopf {
    width: 40px;
    height: 40px;
    margin-left: -4px;
  }
}

/* ---- Knöpfe im Inhalt (wie .web-knopf-ruf bei Beraterantrag.de) ---- */

.web-knopfpaar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.web-knopf-ruf {
  height: 46px;
  padding: 0 26px;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(10, 49, 101, 0.18), 0 10px 24px rgba(10, 49, 101, 0.18);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.web-knopf-ruf::after {
  content: "→";
  margin-left: 10px;
  font-size: 16px;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.web-knopf-runter::after {
  content: "↓";
}

.web-knopf-ruf:hover,
.web-knopf-ruf:focus-visible {
  transform: translateY(-2px);
}

.web-knopf-ruf:hover::after,
.web-knopf-ruf:focus-visible::after {
  transform: translateX(3px);
}

.web-knopf-runter:hover::after,
.web-knopf-runter:focus-visible::after {
  transform: translateY(2px);
}

.web-knopf-ruf.web-knopf-still {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .web-knopf-ruf,
  .web-knopf-ruf::after {
    transition: none;
  }
  .web-knopf-ruf:hover,
  .web-knopf-ruf:focus-visible,
  .web-knopf-ruf:hover::after,
  .web-knopf-ruf:focus-visible::after {
    transform: none;
  }
}

/* ---- Bänder und Überschriften ---- */

.web-band {
  padding-block: 88px;
}

.web-band-grau {
  background: var(--grund);
}

.web-titel {
  margin: 0 0 10px;
  color: var(--marke-navy);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.web-vorspann {
  max-width: 46rem;
  margin: 0 0 36px;
  color: var(--text-leise);
  font-size: 18px;
  line-height: 1.6;
}

.web-fussnote {
  max-width: 52rem;
  margin: 24px 0 0;
  color: var(--text-leise);
  font-size: 13.5px;
  line-height: 1.6;
}

.web-vorspann a,
.web-fussnote a,
.wahl-hinweis a,
.web-weiter a,
.web-quellen a,
.bedingungen a {
  color: var(--marke-gruen-dunkel);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.web-gruen {
  color: var(--marke-gruen-dunkel);
}

/* Hält ein Wort mit Bindestrich zusammen: „Ihrer E-“ / „Auto-Förderung“
   wäre ein schlechter Umbruch. */
.zusammen {
  white-space: nowrap;
}

/* ---- Kopfbereich ---- */

/* Einspaltig seit dem 2026-10-15 (Karte und Hinweis „Wichtig“ entfallen auf
   Weisung des Betreibers). */
.web-held {
  padding-block: 80px 76px;
}

.web-held-schmal {
  padding-block: 64px 56px;
}

.web-vorzeile {
  margin: 0 0 14px;
  color: var(--text-leise);
  font-size: 12px;
  font-weight: var(--schrift-gewicht-betont);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.web-held-titel {
  margin: 0;
  color: var(--marke-navy);
  max-width: 17em;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.web-held-vorspann {
  max-width: 42rem;
  margin: 22px 0 0;
  color: var(--text-leise);
  font-size: 19px;
  line-height: 1.6;
}

/* Die erste Zeile des Vorspanns (Wortlaut des Betreibers) trägt die Aussage. */
.web-held-vorspann strong {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--marke-navy);
  font-weight: var(--schrift-gewicht-betont);
}

.web-weiter {
  margin: 18px 0 0;
  font-size: 15px;
}

.web-weiter a::after {
  content: " ↗";
}

/* ---- Rechner ---- */

.rechner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

.rechner-wahl,
.rechner-ergebnis,
.foerdertabelle-rahmen,
.karte {
  border-radius: 18px;
  background: var(--weiss);
  box-shadow: 0 0 0 1px var(--web-haarlinie), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rechner-wahl {
  padding: 26px 28px 6px;
}

.wahl {
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.wahl legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--schrift-gewicht-betont);
}

.wahl-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wahl-knoepfe label {
  position: relative;
}

/* Echte Auswahlknöpfe (Tastatur, Bildschirmleser), nur anders gezeichnet. */
.wahl-knoepfe input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.wahl-knoepfe span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--text);
  font-size: 14px;
  font-weight: var(--schrift-gewicht-betont);
  white-space: nowrap;
}

.wahl-knoepfe label:hover span {
  border-color: var(--marke-navy);
}

.wahl-knoepfe input:checked + span {
  border-color: var(--marke-navy);
  background: var(--marke-navy);
  color: var(--weiss);
}

.wahl-knoepfe input:focus-visible + span {
  outline: 2px solid var(--marke-gruen-dunkel);
  outline-offset: 2px;
}

.wahl-hinweis {
  margin: 10px 0 0;
  color: var(--text-leise);
  font-size: 13px;
  line-height: 1.55;
}

.rechner-ergebnis {
  padding: 26px 28px;
}

.rechner-titel {
  margin: 0;
  color: var(--text-leise);
  font-size: 13px;
  font-weight: var(--schrift-gewicht-betont);
}

.rechner-fall {
  margin: 4px 0 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--schrift-gewicht-betont);
}

.rechner-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--web-haarlinie);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.rechner-zeile > span:last-child {
  white-space: nowrap;
}

.rechner-zeile-gross {
  align-items: center;
}

.rechner-zeile-gross strong {
  color: var(--marke-gruen-dunkel);
  font-size: 36px;
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.02em;
  font-variant-numeric: normal;
}

/* Der Balken: die Förderung (Markengrün) und der Rest bis zum Höchstbetrag
   von 6.000 € (hell). seite.js setzt die Anteile als --foerderung und
   --rest; ohne Skript gelten die des Beispiels. Unsere Gebühr rechnet er
   seit dem 2026-10-15 nicht mehr ein (Weisung des Betreibers: „bei der
   Rechnung nicht berücksichtigen die kosten“). */
.rechner-balken {
  display: flex;
  gap: 2px;
  height: 12px;
  margin: 2px 0 6px;
}

.rechner-balken span {
  min-width: 3px;
  border-radius: 2px;
}

.rechner-balken-foerderung {
  flex: var(--foerderung, 5000) 1 0;
  border-radius: 4px 2px 2px 4px;
  background: var(--marke-gruen);
}

/* Beim Höchstbetrag ist der Rest 0 — dann verschwindet er ganz. */
.rechner-balken .rechner-balken-rest {
  flex: var(--rest, 1000) 1 0;
  min-width: 0;
  border-radius: 2px 4px 4px 2px;
  background: var(--linie);
}

.rechner-skala {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px;
  color: var(--text-leise);
  font-size: 11.5px;
}

.rechner-nein {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--grund);
  color: var(--text);
  font-size: 15px;
}

.rechner-hinweis {
  margin: 14px 0 0;
  color: var(--text-leise);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---- Fördertabellen ---- */

.rechner-tabellen,
.tabellen-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 24px;
}

.rechner-tabellen {
  margin-top: 24px;
}

.foerdertabelle-rahmen {
  padding: 8px;
  overflow-x: auto;
}

.foerdertabelle-rahmen[hidden] {
  display: none;
}

.foerdertabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-variant-numeric: tabular-nums;
}

.foerdertabelle caption {
  padding: 12px 10px 8px;
  text-align: left;
}

.foerdertabelle-name {
  display: block;
  color: var(--marke-navy);
  font-size: 17px;
  font-weight: 700;
}

.foerdertabelle-zusatz {
  display: block;
  color: var(--text-leise);
  font-size: 13px;
}

.foerdertabelle thead th {
  padding: 4px 6px 6px;
  color: var(--text-leise);
  font-size: 12.5px;
  font-weight: var(--schrift-gewicht-betont);
  line-height: 1.35;
  text-align: center;
  vertical-align: bottom;
}

.foerdertabelle thead th:first-child {
  text-align: left;
}

.foerdertabelle tbody th {
  padding: 0 10px 0 6px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--schrift-gewicht-betont);
  text-align: left;
  white-space: nowrap;
}

.foerdertabelle td {
  padding: 14px 6px;
  border-radius: 10px;
  color: var(--marke-navy);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

/* Fünf Stufen einer Farbe: mehr Förderung ist dunkler. Navy-Schrift hat auf
   der dunkelsten Stufe 6,3 : 1 (gerechnet am 2026-10-15), die Stufen werden
   gleichmäßig dunkler (OKLab-Helligkeit 0,96 → 0,76). */
.foerder-s1 { background: #EEF6EA; }
.foerder-s2 { background: #DAEDD0; }
.foerder-s3 { background: #C2E2B3; }
.foerder-s4 { background: #A6D493; }
.foerder-s5 { background: #88C672; }

.foerdertabelle .foerder-nicht {
  background: #F1F3F6;
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 500;
  white-space: normal;
}

/* Im Rechner: Zellen lassen sich anklicken, die gewählte steht in Navy. */
[data-rechner-tabellen] td {
  cursor: pointer;
}

[data-rechner-tabellen] td:hover {
  box-shadow: inset 0 0 0 2px var(--marke-navy);
}

.foerdertabelle td.gewaehlt {
  background: var(--marke-navy);
  color: var(--weiss);
  box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--marke-navy);
}

/* ---- Elektroauto oder Plug-in-Hybrid ---- */

.art-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.art-karte {
  padding: 28px;
  border: 1px solid var(--linie);
  border-top-width: 6px;
  border-radius: 18px;
  background: var(--weiss);
}

.art-karte-elektro {
  border-top-color: var(--marke-gruen);
}

.art-karte-hybrid {
  border-top-color: var(--marke-navy);
}

.art-betrag {
  margin: 0;
  color: var(--text-leise);
  font-size: 14px;
  font-weight: var(--schrift-gewicht-betont);
}

.art-karte h3 {
  margin: 4px 0 16px;
  color: var(--marke-navy);
  font-size: 22px;
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.01em;
}

.art-frist {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--web-haarlinie);
  color: var(--text-leise);
  font-size: 13.5px;
}

.art-unten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.art-kasten {
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--marke-navy-hell);
}

.art-kasten-nein {
  background: var(--grund);
}

.web-band-grau .art-kasten-nein {
  background: var(--weiss);
}

.art-kasten h3 {
  margin: 0 0 6px;
  color: var(--marke-navy);
  font-size: 16px;
  font-weight: 700;
}

.art-kasten p {
  margin: 0;
  font-size: 14.5px;
}

/* ---- Listen ---- */

.haken-liste,
.kreuz-liste,
.punkt-liste,
.zahl-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.haken-liste li,
.kreuz-liste li,
.punkt-liste li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.55;
}

.haken-liste li::before,
.kreuz-liste li::before {
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.haken-liste li::before {
  content: "✓";
  background: var(--marke-gruen-hell);
  color: var(--marke-gruen-dunkel);
}

.kreuz-liste li::before {
  content: "✕";
  background: #EEF0F3;
  color: var(--text-leise);
}

.punkt-liste li {
  padding-left: 18px;
}

.punkt-liste li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--marke-navy);
}

.zahl-liste {
  counter-reset: zahl;
}

.zahl-liste li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 36px;
  counter-increment: zahl;
  font-size: 15px;
}

.zahl-liste li::before {
  content: counter(zahl);
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--marke-navy-hell);
  color: var(--marke-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.haken-liste-breit li {
  max-width: 52rem;
  margin-bottom: 16px;
}

/* ---- Bedingungen ---- */

.bedingungen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bedingung;
}

.bedingungen li {
  padding: 24px;
  border-radius: 16px;
  background: var(--weiss);
  box-shadow: 0 0 0 1px var(--web-haarlinie), 0 1px 3px rgba(0, 0, 0, 0.04);
  counter-increment: bedingung;
}

.bedingungen li::before {
  content: counter(bedingung);
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--marke-gruen-hell);
  color: var(--marke-gruen-dunkel);
  font-size: 14px;
  font-weight: 800;
  line-height: 30px;
  text-align: center;
}

.bedingungen h3 {
  margin: 14px 0 6px;
  color: var(--marke-navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.bedingungen p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Seit 2026-10-15 liegen die Bedingungen auf einem weißen Band (der Abschnitt
   „Elektroauto oder Plug-in-Hybrid?“ ist auf die Detailseite gezogen) — die
   Karten werden dort leicht grau, wie .karte auf weißen Bändern. */
.web-band:not(.web-band-grau) .bedingungen li {
  background: var(--grund);
  box-shadow: none;
}

/* ---- So läuft Ihre Förderung ---- */

.schritte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritte li {
  position: relative;
  counter-increment: schritt;
}

/* Die Linie zum nächsten Schritt. */
.schritte li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 72px;
  right: -16px;
  height: 2px;
  background: var(--linie);
}

.schritt-symbol {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--marke-navy-hell);
  color: var(--marke-navy);
}

/* Auf einem grauen Band (Startseite seit 2026-10-15) ist der Kreis weiß. */
.web-band-grau .schritt-symbol {
  background: var(--weiss);
  box-shadow: 0 0 0 1px var(--web-haarlinie);
}

.schritt-symbol svg {
  width: 26px;
  height: 26px;
}

.schritte h3 {
  margin: 18px 0 6px;
  color: var(--marke-navy);
  font-size: 18px;
  font-weight: 700;
}

.schritte h3::before {
  content: "Schritt " counter(schritt);
  display: block;
  margin-bottom: 2px;
  color: var(--text-leise);
  font-size: 12px;
  font-weight: var(--schrift-gewicht-betont);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schritte p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- Das Angebot ---- */

.angebot {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 22px;
  background: var(--weiss);
  box-shadow: 0 0 0 1px var(--web-haarlinie), 0 24px 60px rgba(10, 49, 101, 0.12);
}

.angebot-text {
  padding: 40px;
}

.angebot-marke {
  margin: 0;
  color: var(--marke-gruen-dunkel);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.angebot-titel {
  margin: 6px 0 12px;
  color: var(--marke-navy);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.angebot-text > p {
  margin: 0;
  color: var(--text-leise);
  font-size: 16px;
}

.angebot-liste {
  margin-top: 22px;
}

.angebot-preis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px;
  background: var(--marke-navy);
  color: var(--weiss);
}

.angebot-betrag {
  margin: 0;
  font-size: 56px;
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.03em;
  line-height: 1;
}

.angebot-preiszusatz {
  margin: 10px 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

/* Auf Navy ist der Knopf Markengrün mit Navy-Schrift (4,83 : 1) — Weiß auf
   Grün wäre zu schwach (Markenhandbuch). */
.angebot-preis .web-knopf {
  background: var(--marke-gruen);
  color: var(--marke-navy);
  box-shadow: none;
}

.angebot-preis .web-knopf:hover {
  background: #6BBD4F;
}

.angebot-preis .web-knopf:focus-visible {
  outline-color: var(--weiss);
}

.angebot-klein {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.5px;
}

/* ---- Seite „E-Auto-Förderung“ ---- */

.drei-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.karte {
  padding: 24px;
}

.karte h3 {
  margin: 0 0 8px;
  color: var(--marke-navy);
  font-size: 17px;
  font-weight: 700;
}

.karte p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

.kennzahlen-reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0 0;
}

.kennzahlen-reihe div {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--weiss);
  box-shadow: 0 0 0 1px var(--web-haarlinie);
}

.kennzahlen-reihe dt {
  color: var(--text-leise);
  font-size: 12.5px;
}

.kennzahlen-reihe dd {
  margin: 4px 0 0;
  color: var(--marke-navy);
  font-size: 26px;
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.01em;
}

.zwei-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.zwei-spalten > div > p {
  margin: 12px 0 0;
  font-size: 15px;
}

.spalten-titel {
  margin: 0 0 14px;
  color: var(--marke-navy);
  font-size: 18px;
  font-weight: 700;
}

.klein-vorspann {
  margin: -6px 0 14px;
  color: var(--text-leise);
  font-size: 13px;
}

.zwei-spalten .kreuz-liste {
  margin-top: 14px;
}

.unterlagen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.web-band:not(.web-band-grau) .karte {
  background: var(--grund);
  box-shadow: none;
}

.unterlagen .karte h3 {
  margin-bottom: 14px;
}

.ablauf {
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ablauf;
}

.ablauf li {
  position: relative;
  padding: 0 0 28px 60px;
  counter-increment: ablauf;
}

.ablauf li::before {
  content: counter(ablauf);
  position: absolute;
  top: -4px;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--marke-navy);
  color: var(--weiss);
  font-size: 15px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
}

/* Die Linie zum nächsten Schritt. */
.ablauf li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 4px;
  left: 18px;
  width: 2px;
  background: var(--linie);
}

.ablauf h3 {
  margin: 0 0 4px;
  color: var(--marke-navy);
  font-size: 17px;
  font-weight: 700;
}

.ablauf p {
  margin: 0;
  font-size: 15px;
}

.web-band-quellen {
  padding-block: 36px;
  border-top: 1px solid var(--web-haarlinie);
}

.web-quellen {
  max-width: 56rem;
  margin: 0;
  color: var(--text-leise);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Schmale Fenster ---- */

@media (max-width: 960px) {
  .rechner,
  .art-paar,
  .art-unten,
  .zwei-spalten,
  .angebot,
  .unterlagen,
  .drei-karten {
    grid-template-columns: 1fr;
  }
  .bedingungen,
  .schritte {
    grid-template-columns: repeat(2, 1fr);
  }
  .schritte li::after {
    display: none;
  }
  .kennzahlen-reihe {
    grid-template-columns: repeat(2, 1fr);
  }
  .zwei-spalten {
    gap: 32px;
  }
}

@media (max-width: 720px) {
  .web-band {
    padding-block: 60px;
  }
  .web-held {
    padding-block: 48px 56px;
  }
  .web-held-vorspann,
  .web-vorspann {
    font-size: 16.5px;
  }
  .rechner-wahl,
  .rechner-ergebnis,
  .art-karte,
  .angebot-text,
  .angebot-preis {
    padding: 22px 20px;
  }
  .angebot-betrag {
    font-size: 46px;
  }
  .foerdertabelle tbody th {
    padding-right: 4px;
    font-size: 12.5px;
    white-space: normal;
  }
  .foerdertabelle td {
    padding: 12px 4px;
    font-size: 14px;
  }
  .foerdertabelle {
    border-spacing: 3px;
  }
}

@media (max-width: 600px) {
  .bedingungen,
  .schritte {
    grid-template-columns: 1fr;
  }
  .kennzahlen-reihe {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==== Bewegung ====
 *
 * Weisung des Betreibers, 2026-10-15: „die ganzen Elemente sind zu statisch,
 * baue gerne animationen ein dass das ganze besser rüber kommt“.
 *
 * ⚠ DIE REGELN:
 * • Bewegt werden fast nur transform und opacity — das bleibt flüssig, auch
 *   am Handy. Ausnahmen: der Balken im Rechner (flex-grow) und der
 *   Markerstrich (background-size), beide klein.
 * • Versteckt wird nur unter html.bewegt. Die Klasse setzt seite.js erst,
 *   wenn es alles wieder zeigen kann; ohne Skript ist alles sofort da.
 * • „Bewegung reduzieren“ (prefers-reduced-motion: reduce) schaltet alles
 *   ab, was sich bewegt: Alles steht dann sofort an seinem Platz.
 * • Gedruckt wird ohne Bewegung und ohne Verstecktes.
 */

@keyframes hochkommen {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes einblenden {
  from { opacity: 0; }
}

@keyframes auftauchen {
  from { opacity: 0; transform: scale(0.6); }
}

@keyframes markieren {
  from { background-size: 0% 0.32em; }
}

@keyframes schweben {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-70px, 40px, 0) scale(1.15); }
}

@keyframes puls {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.03); }
  100% { transform: none; }
}

@keyframes fenster-auf {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

@keyframes leiste-hoch {
  from { transform: translateY(100%); }
}

@keyframes glanz {
  0% { background-position: 100% 0; }
  22%, 100% { background-position: 0 0; }
}

@keyframes zelle {
  from { opacity: 0; transform: scale(0.9); }
}

/* ---- Kopfbereich: zwei weiche Farbflächen, der Markerstrich ---- */

.web-held {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.web-held::before,
.web-held::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.web-held::before {
  top: -240px;
  right: -180px;
  width: 680px;
  height: 680px;
  background: radial-gradient(closest-side, rgba(94, 178, 65, 0.2), rgba(94, 178, 65, 0));
}

.web-held::after {
  top: 60px;
  right: 200px;
  width: 440px;
  height: 440px;
  background: radial-gradient(closest-side, rgba(10, 49, 101, 0.09), rgba(10, 49, 101, 0));
}

/* Der grüne Teil der Überschrift bekommt einen Markerstrich in hellem Grün;
   darauf hat Grün dunkel 5,04 : 1. */
.web-held-titel .web-gruen {
  background-image: linear-gradient(var(--marke-gruen-hell), var(--marke-gruen-hell));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.32em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Die Linien zwischen den Schritten wachsen von ihrem Anfang aus. */
.schritte li::after {
  transform-origin: left center;
}

.ablauf li::after {
  transform-origin: top center;
}

.rechner-zeile-gross strong {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  /* Kopfbereich: beim Laden nacheinander herein, ohne Skript. */
  .web-held .web-vorzeile,
  .web-held .web-held-titel,
  .web-held .web-held-vorspann,
  .web-held .web-knopfpaar,
  .web-held .web-weiter {
    animation: hochkommen 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .web-held .web-held-titel { animation-delay: 0.08s; }
  .web-held .web-held-vorspann { animation-delay: 0.18s; }
  .web-held .web-knopfpaar,
  .web-held .web-weiter { animation-delay: 0.28s; }
  .web-held-titel .web-gruen {
    animation: markieren 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s backwards;
  }
  .web-held::before { animation: schweben 14s ease-in-out infinite alternate; }
  .web-held::after { animation: schweben 18s ease-in-out -6s infinite alternate-reverse; }

  /* Beim Scrollen: herein, Geschwister nacheinander (--verzug, seite.js). */
  html.bewegt .erscheint:not(.sichtbar) {
    opacity: 0;
  }
  html.bewegt .erscheint.sichtbar {
    animation: hochkommen 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: var(--verzug, 0ms);
  }

  /* So läuft Ihre Förderung: Symbol springt auf, die Linie zeichnet sich. */
  html.bewegt .schritte li.erscheint::after {
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--verzug, 0ms) + 0.35s);
  }
  html.bewegt .schritte li.erscheint:not(.sichtbar)::after {
    transform: scaleX(0);
  }
  html.bewegt .schritte li.sichtbar .schritt-symbol {
    animation: auftauchen 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
    animation-delay: calc(var(--verzug, 0ms) + 0.1s);
  }

  /* Ablauf beim BAFA: Nummer springt auf, die Linie wächst nach unten. */
  html.bewegt .ablauf li.erscheint::after {
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--verzug, 0ms) + 0.3s);
  }
  html.bewegt .ablauf li.erscheint:not(.sichtbar)::after {
    transform: scaleY(0);
  }
  html.bewegt .ablauf li.sichtbar::before,
  html.bewegt .bedingungen li.sichtbar::before {
    animation: auftauchen 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
    animation-delay: calc(var(--verzug, 0ms) + 0.15s);
  }

  /* Fördertabellen: die Zellen füllen sich Zeile für Zeile — beim ersten
     Erscheinen und bei jedem Wechsel des Fahrzeugs. */
  html.bewegt .foerdertabelle-rahmen.sichtbar td,
  html.bewegt .foerdertabelle-rahmen.einblenden td {
    animation: zelle 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--verzug, 0ms) + 0.15s + var(--zeile, 0) * 55ms + var(--spalte, 0) * 40ms);
  }
  .foerdertabelle-rahmen.einblenden {
    animation: einblenden 0.35s ease;
  }

  /* Rechner: Auswahl, Balken, Betrag. */
  .wahl-knoepfe span {
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  }
  .wahl-knoepfe label:active span {
    transform: scale(0.96);
  }
  .rechner-balken span {
    transition: flex-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .rechner-zeile-gross strong.puls {
    animation: puls 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  }

  /* Fenster und Cookie-Hinweis: weich auf, der Hinweis von unten herein. */
  .web-fenster[open] {
    animation: fenster-auf 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .web-fenster[open]::backdrop {
    animation: einblenden 0.3s ease;
  }
  .web-cookie:not([hidden]) {
    animation: leiste-hoch 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards;
  }

  /* Der Knopf im Angebot: alle sechs Sekunden ein Glanz. */
  .angebot-preis .web-knopf {
    background-image: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 100% 0;
    animation: glanz 6s ease-in-out 2s infinite;
  }
}

/* Zeile und Spalte jeder Zelle, für das Füllen nacheinander. */
.foerdertabelle tbody tr:nth-child(2) { --zeile: 1; }
.foerdertabelle tbody tr:nth-child(3) { --zeile: 2; }
.foerdertabelle tbody tr:nth-child(4) { --zeile: 3; }
.foerdertabelle tbody tr:nth-child(5) { --zeile: 4; }
.foerdertabelle tbody tr:nth-child(6) { --zeile: 5; }
.foerdertabelle td:nth-of-type(2) { --spalte: 1; }
.foerdertabelle td:nth-of-type(3) { --spalte: 2; }

/* Karten heben sich unter der Maus (nur wo es eine Maus gibt). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bedingungen li,
  .karte,
  .art-karte,
  .kennzahlen-reihe div {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s;
  }
  .bedingungen li:hover,
  .karte:hover,
  .art-karte:hover,
  .kennzahlen-reihe div:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--web-haarlinie), 0 18px 36px rgba(10, 49, 101, 0.12);
  }
  .web-band:not(.web-band-grau) .karte:hover,
  .web-band:not(.web-band-grau) .bedingungen li:hover {
    box-shadow: 0 18px 36px rgba(10, 49, 101, 0.1);
  }
  .schritt-symbol {
    transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.25s;
  }
  .schritte li:hover .schritt-symbol {
    transform: scale(1.08);
    background-color: var(--marke-gruen-hell);
  }
}

@media print {
  .erscheint {
    opacity: 1 !important;
    animation: none !important;
  }
  .web-held::before,
  .web-held::after {
    display: none;
  }
}

/* ---- Der Förder-Check im Anfrage-Fenster (seit 2026-10-16) ----
   Weisung des Betreibers: „wenn man auf der Webseite auf "Jetzt anfragen"
   klickt, soll man erstmal ausgefragt werden über generelle relevante
   informationen um dann sich registrieren zu können“. Inhalt:
   quelle/teile/anfrage.html, Verhalten: seite.js („Förder-Check“).

   Das Fenster hat eine feste Höhe: So springt es nicht, wenn eine Frage
   kürzer ist als die vorige. Die Leiste mit „Zurück“ und „Weiter“ steht
   unten und bleibt beim Scrollen stehen. */

.web-anfrage {
  max-width: 600px;
  height: min(88vh, 720px);
  height: min(88dvh, 720px);
}

.web-anfrage .web-fenster-innen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.check {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Elemente mit eigener display-Regel blieben sonst trotz hidden sichtbar. */
.check [hidden] {
  display: none !important;
}

.check-kopf {
  margin: 6px 0 18px;
}

.check-zaehler {
  margin: 0 0 8px;
  color: var(--text-leise);
  font-size: 13px;
  font-weight: var(--schrift-gewicht-betont);
}

.check-balken {
  height: 6px;
  border-radius: 999px;
  background: var(--grund);
  overflow: hidden;
}

/* Grün ist hier keine Schrift, nur Fläche: erlaubt (Markenhandbuch). */
.check-balken span {
  display: block;
  width: calc(var(--anteil, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--marke-gruen);
}

.check-vorspann,
.check-hilfe,
.check-text {
  margin: 0 0 16px;
  color: var(--text-leise);
  font-size: 14px;
  line-height: 1.6;
}

.check-text a,
.check-klein a {
  color: var(--marke-gruen-dunkel);
  text-underline-offset: 3px;
}

.check-fragen,
.check-ergebnis {
  margin-bottom: 22px;
}

.check-frage {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.check-titel,
.check-ergebnis-titel {
  margin: 0 0 8px;
  padding: 0;
  color: var(--marke-navy);
  font-size: 19px;
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.check-ergebnis-titel:focus {
  outline: none;
}

/* ---- Antworten als große Karten ---- */

.check-optionen {
  display: grid;
  gap: 10px;
}

.check-optionen-paar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-optionen-drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.check-optionen-raster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-option-breit {
  grid-column: 1 / -1;
}

.check-option {
  position: relative;
  display: block;
  cursor: pointer;
}

/* Echte Auswahlknöpfe (Tastatur, Bildschirmleser), nur anders gezeichnet.
   z-index: Sie liegen unsichtbar über der Karte und bekommen den Klick
   selbst; die Karte darunter ist positioniert (für den Kreis) und läge
   sonst obenauf. */
.check-option input,
.check-jein input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.check-option-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 54px;
  padding: 13px 16px 13px 50px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--weiss);
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

/* Der Kreis links: leer, gewählt navy mit weißem Rand innen. */
.check-option-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 17px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--weiss);
}

.check-option-text strong {
  font-weight: var(--schrift-gewicht-betont);
}

.check-option-text > span {
  color: var(--text-leise);
  font-size: 13.5px;
  line-height: 1.5;
}

.check-option:hover .check-option-text {
  border-color: var(--marke-navy);
}

.check-option input:checked + .check-option-text {
  border-color: var(--marke-navy);
  background: var(--marke-navy-hell);
}

.check-option input:checked + .check-option-text::before {
  border-color: var(--marke-navy);
  background: var(--marke-navy);
  box-shadow: inset 0 0 0 4px var(--weiss);
}

.check-option input:focus-visible + .check-option-text,
.check-jein input:focus-visible + span {
  outline: 2px solid var(--marke-gruen-dunkel);
  outline-offset: 2px;
}

/* Das Datum der Zulassung, unter „Ja, es ist zugelassen“. */
.check-datum {
  padding: 2px 0 4px 50px;
}

.check-datum label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--schrift-gewicht-betont);
}

/* 16 px: Darunter vergrößert Safari am iPhone die Seite beim Tippen. */
.check-datum input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.check-datum input {
  max-width: 220px;
}

.check-datum input:focus {
  border-color: var(--marke-navy);
  outline: 2px solid var(--marke-navy-hell);
}

.check [aria-invalid="true"] {
  border-color: #9B1C1C;
}

/* ---- „Trifft das auf Sie zu?“: je Aussage zwei Knöpfe ---- */

.check-aussagen {
  display: grid;
  gap: 10px;
}

.check-aussage {
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
}

/* float: So bleibt die Aussage im Rahmen, statt auf seiner Linie zu sitzen. */
.check-aussage legend {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
}

.check-jein {
  display: flex;
  clear: both;
  gap: 8px;
}

.check-jein label {
  position: relative;
  flex: 1;
}

.check-jein span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--schrift-gewicht-betont);
}

.check-jein label:hover span {
  border-color: var(--marke-navy);
}

.check-jein input:checked + span {
  border-color: var(--marke-navy);
  background: var(--marke-navy);
  color: var(--weiss);
}

/* ---- Meldung und Leiste ---- */

.check-meldung {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FDECEC;
  color: #9B1C1C;
  font-size: 13.5px;
  font-weight: var(--schrift-gewicht-betont);
}

.check-leiste {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto -28px -26px;
  padding: 14px 28px 18px;
  border-top: 1px solid var(--web-haarlinie);
  background: var(--weiss);
}

.check-leiste .web-knopf {
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

.check-leiste [data-check-weiter] {
  margin-left: auto;
}

/* ---- Ergebnis ---- */

.check-betrag-kasten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 6px 0 12px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--marke-gruen-hell);
}

.check-betrag-titel {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--schrift-gewicht-betont);
}

.check-betrag {
  margin: 0;
  color: var(--marke-gruen-dunkel);
  font-size: 36px;
  font-weight: var(--schrift-gewicht-titel);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.check-fall {
  width: 100%;
  margin: 0;
  color: var(--text-leise);
  font-size: 13.5px;
  line-height: 1.5;
}

.check-frist {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--grund);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.check-frist-knapp {
  background: #FFF4D6;
  color: #6E4B00;
}

.check-hinweise li,
.check-unterlagen li,
.check-gruende li {
  font-size: 14px;
}

.check-hinweise li {
  color: var(--text-leise);
}

.check-abschnitt {
  margin: 18px 0 10px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: var(--schrift-gewicht-betont);
}

.check-angebot {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--marke-navy);
  color: var(--weiss);
  font-size: 14px;
  line-height: 1.55;
}

.check-angebot p {
  margin: 0;
}

.check-angebot strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15.5px;
}

.check-klein {
  margin: 10px 0 0;
  color: var(--text-leise);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---- Am Ende: „Registrierung bald möglich“ (seit 2026-10-18) ---- */

.check-bald {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1.5px dashed var(--linie);
  border-radius: 14px;
  background: var(--grund);
  color: var(--text-leise);
  font-size: 14px;
  line-height: 1.6;
}

.check-bald p {
  margin: 0;
}

.check-bald .check-bald-titel {
  margin-bottom: 4px;
  color: var(--marke-navy);
  font-size: 15.5px;
  font-weight: var(--schrift-gewicht-titel);
}

.check-bald a {
  color: var(--marke-gruen-dunkel);
  text-underline-offset: 3px;
}

/* ---- Schmal ---- */

@media (max-width: 900px) {
  .check-leiste {
    margin: auto -20px -22px;
    padding: 12px 20px 16px;
  }
}

@media (max-width: 520px) {
  .web-anfrage {
    width: calc(100% - 24px);
  }
  .check-optionen-drei,
  .check-optionen-raster {
    grid-template-columns: 1fr;
  }
  .check-datum {
    padding-left: 0;
  }
  .check-datum input {
    max-width: none;
  }
  .check-betrag {
    font-size: 32px;
  }
  /* Reicht der Platz für beide Knöpfe nicht, rutscht „Weiter“ in eine
     zweite Zeile, statt aus dem Fenster zu ragen. */
  .check-leiste {
    flex-wrap: wrap;
  }
}

/* Sehr schmale Handys (320 px): „Zurück“ und „Jetzt registrieren“ passen so
   noch nebeneinander (am 2026-10-16 gemessen: vorher 11 px zu breit). */
@media (max-width: 380px) {
  .check-leiste .web-knopf {
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ---- Bewegung (abschaltbar über „Bewegung reduzieren“) ---- */

@keyframes check-vor {
  from { opacity: 0; transform: translateX(18px); }
}

@keyframes check-zurueck {
  from { opacity: 0; transform: translateX(-18px); }
}

@media (prefers-reduced-motion: no-preference) {
  .check-vor {
    animation: check-vor 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .check-zurueck {
    animation: check-zurueck 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Der Fortschrittsbalken wächst mit — eine Ausnahme von „nur transform
     und opacity“ wie der Balken im Rechner. */
  .check-balken span {
    transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .check-option-text,
  .check-option-text::before,
  .check-jein span {
    transition: border-color 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.15s;
  }
}

/* ---- Konto: Personen-Symbol, Konto-Fenster, Willkommensseite (seit 2026-10-18) ----
   Weisung des Betreibers: „Ergänze ebenfalls rechts von "Jetzt anfragen" oben
   an der Kopfzeile ein kleines männchen wo man sich direkt registrieren kann
   oder einfach nur einloggen kann“ und „Wenn man sich einloggt soll vorerst
   eine Willkommensseite stehen“. Inhalt: rahmen.html (Konto-Fenster),
   seiten/willkommen.html; Verhalten: seite.js („Konto“). */

.web-konto-knopf {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: -6px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--marke-navy);
  cursor: pointer;
}

.web-konto-knopf svg {
  width: 20px;
  height: 20px;
}

.web-konto-knopf:hover,
.web-konto-knopf:focus-visible {
  border-color: var(--marke-navy);
  background: var(--marke-navy-hell);
}

.web-konto {
  max-width: 440px;
}

.konto-teil + .konto-teil {
  margin-top: 22px;
  padding-top: 4px;
  border-top: 1px solid var(--web-haarlinie);
}

.konto-zwischentitel {
  margin: 16px 0 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--schrift-gewicht-betont);
}

.konto-bald {
  padding: 14px 16px;
  border: 1.5px dashed var(--linie);
  border-radius: 12px;
  background: var(--grund);
  color: var(--text-leise);
  font-size: 13.5px;
  line-height: 1.6;
}

.konto-bald p {
  margin: 0;
}

.konto-bald .konto-bald-titel {
  margin-bottom: 4px;
  color: var(--marke-navy);
  font-size: 15px;
  font-weight: var(--schrift-gewicht-titel);
}

.konto-form {
  display: grid;
  gap: 14px;
}

.konto-feld label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--schrift-gewicht-betont);
}

/* 16 px: Darunter vergrößert Safari am iPhone die Seite beim Tippen. */
.konto-feld input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.konto-feld input:focus {
  border-color: var(--marke-navy);
  outline: 2px solid var(--marke-navy-hell);
}

.konto-meldung {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FDECEC;
  color: #9B1C1C;
  font-size: 13.5px;
  font-weight: var(--schrift-gewicht-betont);
  line-height: 1.5;
}

.konto-absenden {
  width: 100%;
  height: 46px;
  font-size: 15px;
}

.konto-absenden:disabled {
  opacity: 0.7;
  cursor: progress;
}

.konto-wer {
  margin: 16px 0 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.konto-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.konto-knoepfe .web-knopf {
  height: 44px;
  padding: 0 20px;
  font-size: 14.5px;
}

.willkommen {
  background: var(--grund);
}

.willkommen [hidden] {
  display: none !important;
}

.willkommen-karte {
  max-width: 640px;
  margin-inline: auto;
  padding: 40px 36px;
  border-radius: 20px;
  background: var(--weiss);
  box-shadow: 0 0 0 1px var(--web-haarlinie), 0 18px 40px rgba(10, 49, 101, 0.08);
}

.willkommen-karte .web-vorspann {
  margin-bottom: 14px;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.willkommen-laden {
  margin: 0;
  color: var(--text-leise);
}

.willkommen-zeichen {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 18px;
  border-radius: 50%;
  background: var(--marke-gruen-hell);
  color: var(--marke-gruen-dunkel);
  font-size: 28px;
  font-weight: var(--schrift-gewicht-titel);
}

.willkommen-test {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #FFF4D6;
  color: #6E4B00;
  font-size: 13px;
  font-weight: var(--schrift-gewicht-betont);
}

.willkommen-text {
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Unter 900 px steht die Navigation in einer zweiten Zeile; „Jetzt Anfragen“
   und das Symbol bleiben dann zusammen rechts, statt in die Mitte zu rücken. */
@media (max-width: 900px) {
  .web-kopf-innen > .web-knopf {
    margin-left: auto;
  }
  .web-konto-knopf {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 520px) {
  .willkommen-karte {
    padding: 28px 22px;
  }
}

/* ======== Die BAFA-Statistik (seit 2026-10-18, live seit 2026-10-19) ========
 *
 * Das HTML entsteht in bauen.mjs ({{bafa-statistik}}) aus bafa-statistik.json.
 * Gewählt am 2026-10-19 aus drei Vorschlägen („Übernimm den A“): links Zahl
 * und Füllstand, rechts die Monate als liegende Balken.
 *
 * ⚠ DIE LÄNGE JEDES BALKENS STEHT IM HTML, als width-Angabe eines leeren
 * <svg> (die CSP verbietet style-Attribute). Hier bekommen diese <svg> darum
 * NIE eine Breite.
 *
 * Die Farben sind mit dem Farbprüfer gerechnet (dataviz, validate_palette.js,
 * 2026-10-18, auf Weiß): beide Töne in der Helligkeit L 0,43–0,77, Abstand
 * auch bei Rot-Grün-Schwäche ΔE 20, Kontrast über 3 : 1. Das Marken-Navy
 * selbst ist für Flächen zu dunkel (L 0,32); #2E5DA0 ist derselbe Farbton,
 * heller. Schrift steht nie in diesen Farben, nur in --text, --text-leise
 * und Navy.
 *
 * ⚠ Absätze in Karten setzt quelle/stil.css (.karte p) auf 14,5 px und ohne
 * Abstand; Regeln für Absätze stehen deshalb hinter .statistik.
 */
:root {
  --statistik-bewilligt: #2E5DA0;                  /* 6,58 : 1 auf Weiß */
  --statistik-moeglich: var(--marke-gruen-dunkel); /* 5,51 : 1 auf Weiß */
}

/* ---------------- Gemeinsam ---------------- */

.statistik {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.statistik .karte {
  padding: 28px;
}

@media (max-width: 480px) {
  .statistik .karte {
    padding: 22px 20px;
  }
}

.statistik .statistik-zahl {
  margin: 0;
  color: var(--marke-navy);
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  font-weight: var(--schrift-gewicht-titel);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.statistik-rund {
  font-size: 0.42em;
  font-weight: var(--schrift-gewicht-betont);
  color: var(--text-leise);
}

.statistik .statistik-zahl-text {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 16px;
  font-weight: var(--schrift-gewicht-betont);
  line-height: 1.45;
}

.statistik .statistik-skala,
.statistik .statistik-hinweis {
  margin: 14px 0 0;
  color: var(--text-leise);
  font-size: 14px;
}

.statistik-farbe {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
  transform: translateY(1px);
}

.statistik-farbe-bewilligt { background: var(--statistik-bewilligt); }
.statistik-farbe-moeglich { background: var(--statistik-moeglich); }

/* Die Tabelle, aufklappbar */
.statistik-tabelle {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}

.statistik-tabelle summary {
  color: var(--marke-navy);
  font-weight: var(--schrift-gewicht-betont);
  cursor: pointer;
}

.statistik-tabelle-rahmen {
  position: relative;
  margin-top: 10px;
  overflow-x: auto;
  /* Schmal muss man wischen: ein Schatten am Rand, solange dort noch etwas
     steht (die Deckfläche wandert mit dem Inhalt mit und verdeckt ihn am
     Ende). Sie hat die Farbe der Karte: auf weißen Bändern --grund
     (quelle/stil.css, .web-band:not(.web-band-grau) .karte). */
  background:
    linear-gradient(to left, var(--grund) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 49, 101, 0.16), transparent) right / 12px 100% no-repeat scroll;
}

.statistik-tabelle table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.statistik-tabelle th,
.statistik-tabelle td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  text-align: end;
  white-space: nowrap;
}

.statistik-tabelle th:first-child {
  padding-inline-start: 0;
  text-align: start;
}

.statistik-tabelle thead th {
  background: var(--grund);
  color: var(--text-leise);
  font-weight: var(--schrift-gewicht-betont);
}

.statistik-tabelle tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-inline-size: 7em;
  background: var(--grund);
  font-weight: var(--schrift-gewicht-text);
  white-space: normal;
}

/* ---------------- Zahl und Füllstand, die Monate ---------------- */

@media (min-width: 900px) {
  .statistik {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
  }
}

/* Der Füllstand: zwei Teile, 2 px Abstand dazwischen, gerundet nur am Ende. */
.statistik-anteil {
  display: flex;
  gap: 2px;
  block-size: 24px;
  margin: 22px 0 14px;
}

.statistik-anteil-bewilligt {
  flex: none;
  block-size: 100%;
  background: var(--statistik-bewilligt);
}

.statistik-anteil-moeglich {
  flex: 1;
  border-radius: 0 4px 4px 0;
  background: var(--statistik-moeglich);
}

.statistik-legende {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
}

.statistik-legende li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.statistik-verlauf {
  container-type: inline-size;
}

.statistik-monate {
  display: grid;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.statistik-monat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  border-radius: 6px;
}

.statistik-monat:focus {
  outline: none;
}

.statistik-monat:focus-visible {
  outline: 2px solid var(--marke-navy);
  outline-offset: 4px;
}

.statistik-monat-name {
  color: var(--text);
  font-size: 15px;
}

/* Rechts Platz für die Zahl: Der längste Balken ist 100 % der Bahn, die Zahl
   steht dahinter im Polster. */
.statistik-monat-bahn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  padding-inline-end: 4.8em;
}

.statistik-monat-balken {
  flex: none;
  block-size: 20px;
  border-radius: 0 4px 4px 0;
  background: var(--statistik-bewilligt);
}

.statistik-monat-wert {
  flex: none;
  color: var(--text);
  font-weight: var(--schrift-gewicht-betont);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Beim Darüberfahren (oder Antippen, dann hat die Zeile den Fokus): der Stand
   insgesamt. Dieselben Zahlen stehen in der Tabelle darunter. */
.statistik-tipp {
  position: absolute;
  z-index: 2;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 0;
  max-inline-size: min(24rem, 100%);
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--marke-navy);
  box-shadow: 0 8px 24px rgba(10, 49, 101, 0.18);
  color: var(--weiss);
  font-size: 13.5px;
  line-height: 1.4;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.statistik-monat:hover .statistik-tipp,
.statistik-monat:focus .statistik-tipp {
  visibility: visible;
  opacity: 1;
}

@media (hover: hover) {
  .statistik-monate:hover .statistik-monat:not(:hover) .statistik-monat-balken {
    opacity: 0.45;
  }
}

@container (max-width: 26rem) {
  .statistik-monat {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  .statistik-monat-name {
    color: var(--text-leise);
    font-size: 14px;
  }
}

/* ---------------- Bewegung ----------------
   seite.js setzt „waechst“ nur an Karten, die beim Laden noch nicht im Bild
   sind, und „gewachsen“, sobald sie erscheinen. Versteckt wird nur unter
   html.bewegt; „Bewegung reduzieren“ schaltet alles ab. */
@media (prefers-reduced-motion: no-preference) {
  .statistik-tipp {
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  }

  .statistik-monat:hover .statistik-tipp,
  .statistik-monat:focus .statistik-tipp {
    transform: none;
  }

  .statistik-monat-balken {
    transition: opacity 0.2s;
  }

  /* Balken und Füllstand wachsen von links */
  html.bewegt .waechst .statistik-monat-balken,
  html.bewegt .waechst .statistik-anteil-bewilligt,
  html.bewegt .waechst .statistik-anteil-moeglich {
    transform: scaleX(0);
    transform-origin: left center;
  }

  html.bewegt .waechst .statistik-monat-wert {
    opacity: 0;
  }

  html.bewegt .waechst.gewachsen .statistik-monat-balken,
  html.bewegt .waechst.gewachsen .statistik-anteil-bewilligt,
  html.bewegt .waechst.gewachsen .statistik-anteil-moeglich {
    transform: none;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--verzug, 0ms), opacity 0.2s;
  }

  html.bewegt .waechst.gewachsen .statistik-monat-wert {
    opacity: 1;
    transition: opacity 0.4s ease calc(var(--verzug, 0ms) + 0.55s);
  }

  .statistik-anteil-moeglich { --verzug: 250ms; }
  .statistik-monat:nth-child(2) { --verzug: 90ms; }
  .statistik-monat:nth-child(3) { --verzug: 180ms; }
  .statistik-monat:nth-child(4) { --verzug: 270ms; }
  .statistik-monat:nth-child(5) { --verzug: 360ms; }
  .statistik-monat:nth-child(n + 6) { --verzug: 450ms; }
}