/* Designsystem "BEFUND". Kein Akkordeon/Tabs/Karussell.
   1. Schriften: WOFF2 lokal, Subset/System. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Source Serif 4 -- nur Schnitt 700 (LIZENZEN.md). */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/sourceserif4-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/sourceserif4-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/sourceserif4-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* JetBrains Mono -- Latin-Subset (Az./Beträge sind ASCII). */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrainsmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Noto Sans Arabic -- eigenes Subsetting (LIZENZEN.md), trägt Body+H. */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/notosansarabic-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E, U+2010-2011;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/notosansarabic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* 2. Tokens */
:root {
  /* Farben, hell (DESIGN.md Tabelle "Farben") */
  --grund: #FAFAF7;
  --flaeche: #FFFFFF;
  --text: #191A16;
  --text-leise: #5A5C54;
  --linie: #DFE0D8;
  --akzent: #0E5A54;
  --akzent-still: #E6F0EE;
  --hinweis: #8A5A00;
  --hinweis-still: #FDF4E3;
  --beleg: #2F6B3A;
  /* Text auf --akzent (Primärbutton). Hell: Weiß = 8.05:1. */
  --auf-akzent: #FFFFFF;

  /* Schriften */
  --schrift-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --schrift-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Skala: fluid via clamp(), 18px mobil -> 19px Desktop */
  --fs-root: clamp(1.125rem, 1.09rem + 0.18vw, 1.1875rem);
  --fs-klein: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-basis: 1rem;
  --fs-gross: clamp(1.0625rem, 1.02rem + 0.24vw, 1.1875rem);
  --fs-b1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-h2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --fs-h1: clamp(1.75rem, 1.45rem + 1.8vw, 2.75rem);
  --zh-text: 1.65;
  --zh-heading: 1.15;

  /* Raster */
  --container: 74rem;
  --spalte: 38rem;
  --spalte-breit: 52rem;
  --rand: clamp(1.25rem, 4vw, 2rem);
  --radius: 2px;
  --abstand-baustein: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #141513;
    --flaeche: #1C1E1B;
    --text: #EDEEE9;
    --text-leise: #A3A69B;
    --linie: #33362F;
    --akzent: #4FB3A5;
    --akzent-still: #173330;
    --hinweis: #D9A441;
    --hinweis-still: #2B2415;
    --beleg: #6FBF7E;
    /* #4FB3A5: Weiß erreicht nur 2.52:1, dunkler Text 7.26:1. */
    --auf-akzent: #141513;
  }
}

/* 3. Reset */
* { box-sizing: border-box; }
html { font-size: 100%; }

html, body { background: var(--grund); }

body {
  margin: 0;
  font-family: var(--schrift-sans);
  font-size: var(--fs-root);
  color: var(--text);
  background: var(--grund);
  line-height: var(--zh-text);
  text-align: start;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: "Noto Sans Arabic", Tahoma, sans-serif;
}

img { max-width: 100%; height: auto; }

a { color: var(--akzent); }
a:not(.btn) { text-underline-offset: 0.15em; }

table { max-width: 100%; overflow-x: auto; }

/* prefers-reduced-motion: Hover/Fokus-Übergänge auf ~0. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Barrierefreiheit */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--akzent);
  color: var(--auf-akzent);
  padding: 0.75rem 1.25rem;
  z-index: 20;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  inset-inline-start: 0.5rem;
  top: 0.5rem;
  border-radius: var(--radius);
}

/* Klickflächen >= 44x44px (Barrierefreiheit) */
.btn,
.nav-zeile nav a,
.nav-toggle,
.footer-col a,
.sprachliste a,
.sprachliste span,
.breadcrumbs a,
.telefon {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 5. Raster */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--rand);
}

main#inhalt {
  max-width: var(--spalte-breit);
  margin-inline: auto;
  padding: 2rem var(--rand) 3rem;
}

article > h1 { max-width: var(--spalte-breit); }
article > p,
article > ul,
article > ol,
.faq-item p {
  max-width: var(--spalte);
}

/* 6. Kopf */
.site-header {
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}
.logo {
  font-family: var(--schrift-serif);
  font-weight: 700;
  font-size: var(--fs-gross);
  text-decoration: none;
  color: var(--text);
}
.header-aktionen {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.telefon {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: var(--fs-basis);
  text-decoration: none;
  color: var(--akzent);
  white-space: nowrap;
}
.telefon-platzhalter { color: var(--text-leise); font-style: italic; font-family: var(--schrift-sans); }

.btn {
  padding-inline: 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-klein);
  border: 1px solid transparent;
}
.btn-primary { background: var(--akzent); color: var(--auf-akzent); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--text); color: var(--grund); }

/* Schmale Navigationszeile mit den fünf Hauptzielen. */
.nav-zeile {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.nav-zeile nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.nav-zeile nav a {
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-klein);
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.nav-zeile nav a:hover { border-block-end-color: var(--akzent); }
.nav-zeile nav a[aria-current="page"] { color: var(--akzent); border-block-end-color: var(--akzent); }

/* Mobilmenü: <details> ohne JS, ab 48rem via display:contents. */
.mobilmenu {
  padding-block: 0.5rem;
}
.nav-toggle {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-klein);
  list-style: none;
  padding-inline: 0.25rem;
  border-radius: var(--radius);
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::before {
  content: "☰ ";
}
.mobilmenu[open] > .nav-toggle::before { content: "✕ "; }
.mobilmenu nav {
  flex-direction: column;
  gap: 0;
  padding-block: 0.25rem 0.75rem;
}
.mobilmenu nav a { padding-block: 0.5rem; border-block-end: 1px solid var(--linie); }

@media (min-width: 48rem) {
  .mobilmenu { display: contents; }
  .mobilmenu > .nav-toggle { display: none; }
  .mobilmenu > nav { display: flex !important; flex-direction: row; padding-block: 0.75rem; }
  .mobilmenu nav a { border-block-end: 2px solid transparent; padding-block: 0; }
}

/* 7. Breadcrumbs */
.breadcrumbs {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--rand);
  padding-block: 0.75rem;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  font-size: var(--fs-klein);
  color: var(--text-leise);
}
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.35rem; }
.breadcrumbs a { color: var(--text-leise); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* 8. Artikel */
article h1, article h2, article h3,
.logo, caption {
  font-family: var(--schrift-serif);
  line-height: var(--zh-heading);
  font-weight: 700;
}
article h1 { font-size: var(--fs-h1); margin: 0 0 1rem; }
article h2 { font-size: var(--fs-h2); margin: var(--abstand-baustein) 0 1rem; }
article h3 { font-size: var(--fs-h3); margin: 1.5rem 0 0.5rem; }
article p { margin: 0 0 1rem; }
article ul, article ol { padding-inline-start: 1.25rem; }

.tldr {
  font-size: var(--fs-gross);
  color: var(--text-leise);
  border-block-start: 1px solid var(--linie);
  border-block-end: 1px solid var(--linie);
  padding-block: 1rem;
  margin: 0 0 var(--abstand-baustein);
  max-width: var(--spalte-breit);
}

.platzhalter-hinweis {
  background: var(--hinweis-still);
  border: 1px dashed var(--hinweis);
  color: var(--text);
  padding: 0.6rem 0.9rem;
  font-size: var(--fs-klein);
  border-radius: var(--radius);
  margin: 0 0 1.5rem;
}

/* Maßgeblichkeitshinweis -- Befund F11/F12/F13 (Kritik Sprachfassungen,
   2026-08-29): der Hinweis, dass die deutsche Fassung rechtlich maßgeblich
   ist, hatte keine eigene Gestaltung (19px, Textfarbe, kein Rahmen -- sah
   aus wie ein kursiver Nebensatz) und lief randlos über die volle
   Fensterbreite, weil er außerhalb von <main> stand. Eigene Fläche nach
   demselben Muster wie B1/B6 (linker Balken), auf --hinweis statt --akzent,
   weil es sich um denselben Hinweistyp wie .platzhalter-hinweis handelt --
   ein Status der Fassung, kein Bausteininhalt. Innerhalb der Textspalte
   (--spalte, nicht --spalte-breit): der Hinweis richtet sich an den
   Fließtext, nicht an die breiteren Bausteine/Tabellen. `border-inline-*`
   und `padding-inline-*` sind logische Properties, die im arabischen
   dir="rtl" automatisch spiegeln. */
.massgeblichkeit-hinweis {
  background: var(--hinweis-still);
  border-inline-start: 4px solid var(--hinweis);
  color: var(--text);
  font-size: var(--fs-klein);
  padding-block: 0.85rem;
  padding-inline: 1.1rem;
  margin: 0 0 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--spalte);
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: var(--fs-klein);
}
caption { text-align: start; font-size: var(--fs-h3); margin-block-end: 0.75rem; font-weight: 700; }
th, td { border: 1px solid var(--linie); padding: 0.6rem 0.75rem; text-align: start; }
th { background: var(--grund); font-family: var(--schrift-sans); font-weight: 600; }

/* 9. Bausteine B1 - B12 */
.baustein { margin-block-start: var(--abstand-baustein); }

/* B1 -- unter H1, Akzent-still-Fläche, linker Balken. */
.b1-in-einem-satz {
  font-size: var(--fs-b1);
  font-weight: 600;
  background: var(--akzent-still);
  border-inline-start: 4px solid var(--akzent);
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--spalte-breit);
}

/* B2 -- Fließtext, etwas größer, ohne Hinterlegung. */
.b2-in-drei-saetzen {
  font-size: var(--fs-gross);
  color: var(--text);
  margin: 0 0 1.5rem;
}

/* B3 -- Chips, dünne Linie. */
.b3-auch-bekannt-als ul.synonyme {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.b3-auch-bekannt-als ul.synonyme li {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
}

/* B4 -- Wert in Monospace. */
.b4-die-zahlen td:first-child {
  font-family: var(--schrift-mono);
  color: var(--text);
  white-space: nowrap;
}
.b4-die-zahlen td:nth-child(3),
.b4-die-zahlen td:nth-child(4) {
  color: var(--text-leise);
  font-size: var(--fs-klein);
}

/* B5 -- Beträge rechtsbündig Monospace, Ergebnis fett mit Oberlinie. */
.b5-rechenbeispiel td:last-child {
  font-family: var(--schrift-mono);
  text-align: end;
}
.b5-rechenbeispiel .rechenbeispiel-ergebnis {
  border-block-start: 2px solid var(--text);
  font-weight: 700;
  padding-block-start: 0.75rem;
  margin-block-start: 0.5rem;
  max-width: var(--spalte-breit);
}
.b5-rechenbeispiel .rechenbeispiel-ergebnis strong { font-family: var(--schrift-mono); }

/* B6 -- Zitatliste, Hinweis-still-Fläche, kursiv. */
.b6-versicherung-schreibt blockquote {
  background: var(--hinweis-still);
  border-inline-start: 4px solid var(--hinweis);
  padding: 0.85rem 1.1rem;
  margin: 0 0 0.75rem;
  font-style: italic;
  color: var(--text);
  max-width: var(--spalte-breit);
}

/* B7 -- Blockzitat mit Rahmen, Pflichthinweis klein/leise. */
.b7-erwiderung p:not(.b7-pflichthinweis) {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  max-width: var(--spalte-breit);
}
.b7-erwiderung .b7-pflichthinweis {
  color: var(--text-leise);
  font-size: var(--fs-klein);
  margin-block-start: 0.6rem;
  max-width: var(--spalte-breit);
}

/* B8 -- Liste, große Ziffern in Akzent. */
.b8-naechster-schritt ol {
  list-style: none;
  counter-reset: schritt;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: var(--spalte-breit);
}
.b8-naechster-schritt li {
  counter-increment: schritt;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.b8-naechster-schritt li::before {
  content: counter(schritt);
  font-family: var(--schrift-serif);
  font-size: var(--fs-h2);
  color: var(--akzent);
  line-height: 1;
  min-width: 1.5em;
}

/* B9 -- Aktenzeichen in Monospace, horizontal scrollbar. */
.b9-rechtsprechung { overflow-x: auto; }
.b9-rechtsprechung table { min-width: 42rem; }
.b9-rechtsprechung td:nth-child(2) { font-family: var(--schrift-mono); white-space: nowrap; }

/* B10 -- kompakte, leise Liste am Seitenende. */
.b10-quellen ul {
  padding-inline-start: 1.1rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
}
.b10-quellen a { color: var(--text-leise); }

/* B12 -- Frage als H3, Antwort direkt darunter, kein Akkordeon. */
.faq-item { margin-block-end: 1.5rem; }
.faq-item h3 { margin-block-end: 0.4rem; }

aside.verwandt {
  border-block-start: 1px solid var(--linie);
  margin-block-start: var(--abstand-baustein);
  padding-block-start: 1rem;
  max-width: var(--spalte-breit);
}
aside.verwandt h2 { font-size: var(--fs-h3); }
aside.verwandt ul { padding-inline-start: 1.1rem; }

.updated {
  max-width: var(--spalte-breit);
  margin-inline: auto;
  padding-inline: var(--rand);
  margin-block-end: 2rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
}

/* Formularkarte: einziger Ort mit Schatten, sehr flach. */
.formular-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  padding: 1.5rem;
}
.formular-karte label { display: block; font-weight: 600; margin-block-end: 0.35rem; }
.formular-karte input,
.formular-karte textarea,
.formular-karte select {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  margin-block-end: 1rem;
  min-height: 44px;
}
.formular-fehler { color: var(--hinweis); font-size: var(--fs-klein); }

/* Fehlertext erst nach Interaktion/Sendeversuch zeigen, nicht schon beim
   ersten Laden (Bug: leere Pflichtfelder gelten HTML5-seitig sofort als
   :invalid, ohne Gate war der Text ab Seitenaufruf sichtbar). Zwei getrennte
   Regeln statt einer Selektorliste: faellt :has() in einem Browser weg, bleibt
   die :user-invalid-Regel fuer PLZ/Telefon trotzdem gueltig (eine ungueltige
   Teilselektion in einer kommagetrennten Liste wuerde sonst die gesamte Regel
   verwerfen). :user-invalid matcht erst nach Nutzerinteraktion oder einem
   Sendeversuch -- native HTML5-Validierung (Browser-Tooltip) bleibt in jedem
   Fall unabhaengig davon aktiv. */
.formular-fehler { display: none; }
input:user-invalid ~ .formular-fehler { display: block; }
label:has(:user-invalid) ~ .formular-fehler { display: block; }

/* Pflicht-/Freiwillig-Marker als Text, nicht nur Farbe (src/formular.py). */
.feld-marker {
  font-weight: 400;
  color: var(--text-leise);
  font-size: var(--fs-klein);
}
.feld-hinweis {
  margin-block: -0.6rem 0.75rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
  max-width: var(--spalte);
}
.feld-hinweis.formular-fehler { color: var(--hinweis); }

/* Radio/Checkbox: Formularkarte-Regeln oben gezielt überschrieben. */
.formular-karte fieldset.feld-radiogruppe {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}
.formular-karte .feld-radiogruppe legend {
  font-weight: 600;
  padding: 0;
  margin-block-end: 0.5rem;
  font: inherit;
}
.formular-karte label.radio-label,
.formular-karte label.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  margin-block-end: 0.6rem;
  cursor: pointer;
  min-height: 44px;
}
.formular-karte input[type="radio"],
.formular-karte input[type="checkbox"] {
  width: auto;
  min-height: auto;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
}

/* Zwei gleichrangige Kontaktwege: Formular / Telefon. */
.kontakt-wege {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-block-start: var(--abstand-baustein);
  max-width: var(--spalte-breit);
}
@media (max-width: 47.99rem) {
  .kontakt-wege { grid-template-columns: 1fr; }
}
.telefon-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.telefon-karte h2,
.telefon-karte .telefon-label {
  font-size: var(--fs-h3);
  margin: 0 0 0.5rem;
  font-family: var(--schrift-serif);
  font-weight: 700;
  display: block;
}
.telefon-karte p { color: var(--text-leise); font-size: var(--fs-klein); margin: 0 0 1rem; }
.telefon-cta {
  font-family: var(--schrift-mono);
  font-size: var(--fs-gross);
  font-weight: 700;
  padding-block: 0.75rem;
}

/* Honeypot: Position statt display:none (Bots ignorieren das oft). */
.hp-feld {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Einstiegsblock (nur Startseite, typ "kern"): Handlungseinstieg oberhalb
   der Falz, vor dem Rechtsteil (tldr/B1/Fließtext). src/formular.py,
   render_einstieg. Wiederverwendet .b1-in-einem-satz fuer die Zustandszeile
   (dieselbe visuelle Sprache wie der spaeter im Rechtsteil folgende
   B1-Baustein) und .kontakt-wege/.formular-karte/.telefon-karte fuer das
   Kurzformular -- keine neuen Muster, kein neues Farbpaar. */
.einstieg {
  margin-block-end: var(--abstand-baustein);
  padding-block-end: 1.75rem;
  border-block-end: 1px solid var(--linie);
}
.einstieg .kontakt-wege { margin-block-start: 0; }
.einstieg-formular-label {
  display: block;
  font-family: var(--schrift-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.einstieg-zeitzusage {
  color: var(--text-leise);
  font-size: var(--fs-klein);
  margin: 1rem 0 0;
}

/* 10. Fuß */
.site-footer {
  border-block-start: 1px solid var(--linie);
  background: var(--flaeche);
  padding-block: 2.5rem 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.75rem;
}
.footer-col h2 {
  font-family: var(--schrift-sans);
  font-size: var(--fs-klein);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
  margin: 0 0 0.6rem;
}
.footer-col a { color: var(--text); text-decoration: none; font-size: var(--fs-klein); }
.footer-col a:hover { text-decoration: underline; }
.footer-marke { font-family: var(--schrift-serif); font-weight: 700; margin: 0 0 0.25rem; font-size: var(--fs-gross); }
.footer-claim { color: var(--text-leise); font-size: var(--fs-klein); margin: 0; }
.footer-orte { color: var(--text-leise); font-size: var(--fs-klein); }

/* Sprachumschalter: Systemschrift statt Inter (Ziel <= 3 Fonts/Seite). */
.sprachliste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; flex-direction: column; }
.sprachliste a, .sprachliste span {
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: var(--fs-klein);
  text-decoration: none;
}
.sprachliste a { color: var(--text); }
.sprachliste a:hover { text-decoration: underline; }
.sprachliste span[aria-current="true"] { color: var(--akzent); font-weight: 600; }

.footer-bottom {
  margin-block-start: 2rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--linie);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
}

/* 11. Bilder */
/* src/bilder.py: <picture>-Markup, hier nur Layout auf Bausteinbreite. */
.bild {
  display: block;
  max-width: var(--spalte-breit);
  margin: var(--abstand-baustein) auto;
}
.bild img {
  border-radius: var(--radius);
  border: 1px solid var(--linie);
}
.bild figcaption {
  font-size: var(--fs-klein);
  color: var(--text-leise);
  margin-block-start: 0.5rem;
}
.footer-bottom p { margin: 0; }