/* ---- 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;
  }
}