/* ==========================================================================
   startseite.css – FÖRIS+ Startseite (CR-140, Teil `startseite`)
   ==========================================================================
   Layout und Bausteine der Startseite (web/index.html). Klassen-Präfix `st-`.
   Grundlagen (Reset, Schrift, Fokus, Tokens) kommen aus foerderplus.css; die
   Startseite bringt ihren eigenen Kopf, Fuß und ihre eigenen Karten mit, weil
   der FÖRIS+-Entwurf einen anderen Aufbau hat als die Fachsuche.

   Farbregel: ausschließlich `var(--fp-…)`-Token, kein einziges Hex-Literal –
   geprüft von `scripts/design_pruefung.py` (Teil b, Token-Disziplin).
   Schatten werden über `color-mix()` aus einem Token gemischt, damit auch dort
   keine literale Farbe steht; fehlt color-mix, entfällt nur der Schatten.

   Ziffern stehen in der ohnehin geladenen Sans-Schrift mit
   `font-variant-numeric: tabular-nums` – die Klasse `.fp-mono` (und damit die
   56 KB IBM-Plex-Mono) wird auf dieser Seite bewusst NICHT verwendet (CR-140).

   Aufbau: 0. Grundlagen · 1. Skip-Link · 2. Kopf · 3. Knöpfe und Marken ·
   4. Held · 4b. Karten (mehrfach genutzt) · 5. Kennzahlenband · 6. Prinzip ·
   7. Zwei Suchwege · 8. Ebenen · 9. Monitoring · 10. Kommunen ·
   11. Vereine/Privat · 12. Unternehmen · 13. Beratungspraxis ·
   15. Datenbasis · 16. Zugänge · 17. Häufige Fragen · 18. Abschluss ·
   19. Fuß · 20. Dialog · 21. Responsiv (1024 / 900 / 640 / 560 px)

   Der Abschnitt „Was haben Sie vor?“ (Nummer 14 im Seitenaufbau) hat bewusst
   KEINEN eigenen CSS-Block: er setzt sich vollständig aus vorhandenen
   Bausteinen zusammen (.st-flaeche--kasten, .st-zitat--gross, .st-karte).
   ========================================================================== */

/* ==========================================================================
   0. Grundlagen
   ========================================================================== */
body { background: var(--fp-flaeche); }
img { max-width: 100%; }

.st-breite { max-width: 1200px; margin: 0 auto; }

.st-abschnitt { padding: 88px 24px; background: var(--fp-flaeche); }
.st-abschnitt--hell {
  background: var(--fp-warum-flaeche);
  border-top: 1px solid var(--fp-linie);
  border-bottom: 1px solid var(--fp-linie);
}
.st-abschnitt--dunkel { background: var(--fp-navy); }
.st-abschnitt--tief { background: var(--fp-tief); }

/* Überschriften und Fließtext */
.st-h1 {
  margin: 0;
  font-size: var(--fp-fs-56);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fp-navy);
  max-width: 15ch;
  overflow-wrap: break-word;
}
.st-h2 {
  margin: 16px 0 0;
  font-size: var(--fp-fs-38);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fp-navy);
  overflow-wrap: break-word;
}
.st-h2--eng { max-width: 24ch; }
.st-h2--klein { font-size: var(--fp-fs-32); max-width: 24ch; }
.st-h2--dunkel { color: var(--fp-flaeche); }
.st-h3 { margin: 0; font-size: var(--fp-fs-19); font-weight: 600; color: var(--fp-text); }
.st-h3--gross { margin: 0; font-size: var(--fp-fs-20); font-weight: 600; color: var(--fp-text); }

.st-lead { margin: 24px 0 0; font-size: var(--fp-fs-19-5); line-height: 1.6; color: var(--fp-text-2); max-width: 46ch; }
.st-absatz { margin: 16px 0 0; font-size: var(--fp-fs-18); line-height: 1.6; color: var(--fp-text-2); max-width: 62ch; }
.st-absatz--dunkel { color: var(--fp-dunkel-text); max-width: 48ch; }
.st-textspalte { max-width: 62ch; }
.st-kleintext { margin: 8px 0 0; font-size: var(--fp-fs-13); line-height: 1.55; color: var(--fp-text-leise); }

.st-ueberzeile {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fp-fs-13);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fp-gruen-text);
}
.st-ueberzeile--dunkel { color: var(--fp-dunkel-akzent); }

.st-claim {
  margin: 22px 0 0;
  display: inline-block;
  font-size: var(--fp-fs-16-5);
  font-weight: 600;
  color: var(--fp-blau);
  border-left: 3px solid var(--fp-gruen);
  padding-left: 14px;
}
.st-claim--dunkel { color: var(--fp-flaeche); }

.st-label {
  font-size: var(--fp-fs-12);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-text-leise);
}
.st-label--abstand { display: block; margin-top: 18px; }

.st-beispielvermerk { margin: 11px 0 0; font-size: var(--fp-fs-12-5); color: var(--fp-text-leise); }

/* Raster */
.st-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.st-split--schmal { grid-template-columns: 0.9fr 1.1fr; }
.st-split--breit { grid-template-columns: 0.95fr 1.05fr; }
.st-split--faq { grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.st-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.st-zwei--abstand { margin-top: 40px; }
.st-zwei--oben { align-items: start; }
.st-drei { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.st-vier { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

/* ==========================================================================
   1. Skip-Link
   ========================================================================== */
.st-skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--fp-flaeche);
  color: var(--fp-navy);
  font-weight: 600;
  font-size: var(--fp-fs-14-5);
  padding: 10px 16px;
  border-radius: var(--fp-r-8);
  box-shadow: var(--fp-schatten-dialog);
  z-index: 100;
  transition: top 0.12s ease-in-out;
}
.st-skip-link:focus { top: 12px; text-decoration: none; }

/* ==========================================================================
   2. Kopf – klebend
   ========================================================================== */
.st-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fp-flaeche);
  border-bottom: 1px solid var(--fp-linie);
}
.st-kopf-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.st-marke { display: flex; align-items: center; flex: none; }
.st-marke:hover { text-decoration: none; }
.st-marke img { height: 54px; width: auto; display: block; }

.st-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: var(--fp-fs-15);
  font-weight: 500;
  white-space: nowrap;
}
.st-nav a { color: var(--fp-text-filter); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.st-nav a:hover { color: var(--fp-blau); border-bottom-color: var(--fp-gruen); text-decoration: none; }

.st-kopf-aktionen { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.st-kopf-login {
  background: transparent;
  border: 0;
  padding: 6px 2px;
  font-family: inherit;
  font-size: var(--fp-fs-15);
  font-weight: 500;
  color: var(--fp-text-filter);
  cursor: pointer;
}
.st-kopf-login:hover { color: var(--fp-blau); }

/* ==========================================================================
   3. Knöpfe, Chips, Marken
   ========================================================================== */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: var(--fp-fs-15-5);
  font-weight: 600;
  line-height: 1.2;
  padding: 13px 22px;
  border-radius: var(--fp-r-9);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.st-btn:hover { text-decoration: none; }
.st-btn--gross { font-size: var(--fp-fs-16); padding: 15px 26px; }
.st-btn--abstand { margin-top: 28px; }

.st-btn--blau { background: var(--fp-blau); color: var(--fp-flaeche); }
.st-btn--blau:hover { background: var(--fp-navy); color: var(--fp-flaeche); }

.st-btn--gruen { background: var(--fp-gruen); color: var(--fp-gruen-tief); }
.st-btn--gruen:hover { background: var(--fp-gruen-hover); color: var(--fp-gruen-tief); }

.st-btn--rand { background: var(--fp-flaeche); color: var(--fp-blau); border-color: var(--fp-rand-kraeftig); }
.st-btn--rand:hover { border-color: var(--fp-blau); color: var(--fp-navy); }

.st-btn--dunkelrand { background: transparent; color: var(--fp-flaeche); border-color: var(--fp-dunkel-rand); }
.st-btn--dunkelrand:hover { border-color: var(--fp-flaeche); color: var(--fp-flaeche); }

.st-knopfreihe { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.st-pille-gruen {
  margin: 0 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--fp-gruen-flaeche);
  color: var(--fp-gruen-text);
  font-size: var(--fp-fs-13-5);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 13px;
  border-radius: var(--fp-r-999);
}
.st-pille-klein {
  flex: none;
  font-size: var(--fp-fs-12);
  font-weight: 700;
  color: var(--fp-gruen-text);
  background: var(--fp-gruen-flaeche);
  border: 1px solid var(--fp-gruen-rand);
  padding: 6px 10px;
  border-radius: var(--fp-r-999);
}

.st-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--fp-gruen); display: block; flex: none; }
.st-punkt--puls { width: 8px; height: 8px; animation: stPuls 2.4s ease-in-out infinite; }
@keyframes stPuls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }

.st-chip-gruen {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fp-gruen-flaeche);
  color: var(--fp-gruen-text);
  font-size: var(--fp-fs-12);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--fp-r-6);
}
.st-ebene-chip {
  flex: none;
  font-size: var(--fp-fs-11-5);
  font-weight: 600;
  color: var(--fp-info-text);
  background: var(--fp-info-flaeche);
  padding: 5px 9px;
  border-radius: var(--fp-r-5);
}

.st-marken { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.st-marke-chip {
  font-size: var(--fp-fs-13-5);
  font-weight: 500;
  color: var(--fp-text-filter);
  background: var(--fp-bg);
  border: 1px solid var(--fp-linie);
  border-radius: var(--fp-r-6);
  padding: 8px 12px;
}
.st-marke-chip--weiss { background: var(--fp-flaeche); border-color: var(--fp-warum-rand); font-size: var(--fp-fs-14); padding: 7px 12px; }

/* ==========================================================================
   4. Held
   ========================================================================== */
.st-held {
  padding: 84px 24px 72px;
  background: linear-gradient(180deg, var(--fp-bg) 0%, var(--fp-flaeche) 100%);
  border-bottom: 1px solid var(--fp-linie);
}
.st-held-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 48px; align-items: center; }
.st-held-fuss {
  margin: 30px 0 0;
  font-size: var(--fp-fs-14);
  line-height: 1.7;
  color: var(--fp-text-leise);
}
.st-held-fuss-strich { color: var(--fp-rand-kraeftig); padding: 0 6px; }

/* ==========================================================================
   4b. Karten (Held, Vorschau, Monitoring, Datenbasis …)
   ========================================================================== */
.st-karte {
  background: var(--fp-flaeche);
  border: 1px solid var(--fp-warum-rand);
  border-radius: var(--fp-r-14);
  overflow: hidden;
  min-width: 0;
}
.st-karte--schatten { box-shadow: 0 18px 46px -28px color-mix(in srgb, var(--fp-navy) 38%, transparent); }
.st-karte--voll { display: flex; flex-direction: column; }
.st-karte--gruen { border-color: var(--fp-gruen-rand); }
.st-karte--polster { padding: 28px; }
.st-karte--abstand { margin-top: 24px; }

.st-karte-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fp-nachgeordnet-rand);
  background: var(--fp-kasten);
}
.st-karte-kopf--breit { justify-content: space-between; gap: 16px; padding: 15px 20px; }
.st-karte-kopf-titel { font-size: var(--fp-fs-14); font-weight: 600; color: var(--fp-text); }
.st-karte-kopf-text { font-size: var(--fp-fs-12-5); color: var(--fp-text-leise); }
.st-karte-kopf .st-karte-kopf-text { margin-left: 10px; }
.st-karte-kopf--breit .st-karte-kopf-text { margin-left: 0; }
.st-fensterpunkt { width: 9px; height: 9px; border-radius: 50%; background: var(--fp-rand-kraeftig); display: block; flex: none; }

.st-karte-body { padding: 22px 22px 24px; }
.st-karte-kopfblock { padding: 30px 30px 26px; }
.st-karte-lead { margin: 8px 0 0; font-size: var(--fp-fs-17); font-weight: 600; }
.st-karte-lead--blau { color: var(--fp-blau); }
.st-karte-lead--gruen { color: var(--fp-gruen-text); }
.st-karte-text { margin: 10px 0 0; font-size: var(--fp-fs-15-5); line-height: 1.65; color: var(--fp-text-3); }
.st-karte-fuss { margin-top: auto; padding: 24px 30px 30px; }
.st-karte-fuss--schmal { padding: 16px 20px 20px; font-size: var(--fp-fs-14-5); font-weight: 600; }
.st-karte-fuss--leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 15px 22px;
  background: var(--fp-kasten);
  font-size: var(--fp-fs-13);
  color: var(--fp-text-3);
}

.st-karte-titelzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.st-karte-titel { margin-top: 7px; font-size: var(--fp-fs-19); font-weight: 600; color: var(--fp-text); line-height: 1.3; }

.st-werteraster {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--fp-nachgeordnet-rand);
  border: 1px solid var(--fp-nachgeordnet-rand);
  border-radius: var(--fp-r-9);
  overflow: hidden;
}
.st-werteraster > div { background: var(--fp-flaeche); padding: 13px 15px; }
.st-wert-label { display: block; font-size: var(--fp-fs-12); color: var(--fp-text-leise); }
.st-wert { display: block; margin-top: 4px; font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text); font-variant-numeric: tabular-nums; }

.st-belegliste {
  margin-top: 16px;
  border-top: 1px dashed var(--fp-linie);
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.st-belegzeile {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fp-fs-13-5);
  color: var(--fp-text-2);
}
.st-belegzeile svg { width: 16px; height: 16px; flex: none; color: var(--fp-blau); }
.st-belegzeile--gruen { color: var(--fp-gruen-text); }

/* ==========================================================================
   5. Kennzahlenband – Zahlen aus daten/meta.js, tabular-nums statt Mono
   ========================================================================== */
.st-band { padding: 56px 24px; background: var(--fp-navy); }
.st-band-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; }
.st-band-titel {
  margin: 0;
  font-size: var(--fp-fs-15);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-dunkel-text-2);
}
.st-band-notiz { font-size: var(--fp-fs-13); color: var(--fp-dunkel-text-2); }

.st-kennzahlen {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--fp-dunkel-rand);
  border: 1px solid var(--fp-dunkel-rand);
  border-radius: var(--fp-r-12);
  overflow: hidden;
}
.st-kennzahl { background: var(--fp-navy); padding: 24px 22px; }
.st-kennzahl-wert {
  font-size: var(--fp-fs-34);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fp-flaeche);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.st-kennzahl-wert--datum { font-size: var(--fp-fs-28); }
.st-kennzahl-label { margin-top: 6px; font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-dunkel-text); }
.st-kennzahl-notiz { margin-top: 4px; font-size: var(--fp-fs-13); color: var(--fp-dunkel-text-2); }

/* ==========================================================================
   6. Prinzip – vier Schritte
   ========================================================================== */
.st-schritte { margin-top: 52px; position: relative; }
.st-schritte-linie {
  position: absolute;
  top: 21px;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fp-warum-rand), var(--fp-rand-kraeftig) 55%, var(--fp-dunkel-akzent));
}
.st-schritte-raster { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
/* CR-165 Teil `startseite`: drei statt vier Schritte (der vierte wird zur
   Monitoring-Zeile darunter). Modifier statt zweiter Basisklasse – die
   responsiven Kollaps-Regeln der Basisklasse (@media weiter unten) gelten
   unverändert mit. */
.st-schritte-raster--drei { grid-template-columns: repeat(3, 1fr); }
/* CR-165 Teil `startseite`: Monitoring-Zeile unter den drei Schritten
   (vormals eigener dunkler Abschnitt #monitoring) – auf hellem Grund, daher
   KEINE --dunkel-Textvarianten. */
.st-monitoring-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 56px; }
/* CR-165 Teil `startseite`: Typ-Kacheln im Held (CR-163-Muster ?ziel=<Label>) –
   schmale Pillen statt der bisherigen zwei großen Knöpfe allein. */
.st-typ-kacheln { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
.st-typ-kachel {
  display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--fp-rand-kraeftig); background: var(--fp-flaeche); color: var(--fp-navy);
  font-weight: 600; font-size: var(--fp-fs-14-5, 0.95rem); text-decoration: none;
}
.st-typ-kachel:hover { background: var(--fp-neutral-flaeche); text-decoration: none; }
/* CR-165 Teil `startseite`: Ebenen-Zeile unter dem Kennzahlenband (vormals
   eigener Abschnitt #regionen) – reine Fließtext-Zeile, mittig. */
.st-band-ebenenzeile { margin-top: 22px; text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
/* CR-165 Teil `startseite`: FAQ zieht als zweiter Block in den
   Zugänge-Abschnitt (#zugaenge) ein – nur der Zwischenabstand ist neu. */
.st-faq-block { margin-top: 60px; }
.st-schritt-nr {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fp-flaeche);
  border: 2px solid var(--fp-rand-kraeftig);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fp-fs-15);
  font-weight: 700;
  color: var(--fp-blau);
}
.st-schritt-nr--gruen { border-color: var(--fp-gruen); color: var(--fp-gruen-text); }
.st-schritt .st-h3 { margin-top: 22px; }
.st-schritt-text { margin: 9px 0 0; font-size: var(--fp-fs-15-5); line-height: 1.6; color: var(--fp-text-3); max-width: 26ch; }

/* ==========================================================================
   7. Zwei Suchwege
   ========================================================================== */
.st-weg-pille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fp-fs-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--fp-r-999);
}
.st-weg-pille--blau { color: var(--fp-info-text); background: var(--fp-info-flaeche); }
.st-weg-pille--gruen { color: var(--fp-gruen-text); background: var(--fp-gruen-flaeche); }
.st-karte-kopfblock .st-h3--gross { margin-top: 16px; font-size: var(--fp-fs-24); }

.st-vorschau {
  margin: 0 30px;
  border: 1px solid var(--fp-linie);
  border-radius: var(--fp-r-10);
  overflow: hidden;
  background: var(--fp-nachgeordnet);
}
.st-vorschau--gruen { border-color: var(--fp-gruen-rand); background: var(--fp-flaeche); }
.st-vorschau-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fp-linie-innen);
}
.st-vorschau-kopf--block { display: block; border-bottom-color: var(--fp-gruen-rand); }
.st-vorschau-body { padding: 2px 16px 12px; }
.st-vorschau-body--polster { padding: 4px 20px 18px; }

.st-filter-chip {
  font-size: var(--fp-fs-12-5);
  font-weight: 500;
  color: var(--fp-info-text);
  background: var(--fp-info-flaeche);
  border: 1px solid var(--fp-info-rand);
  border-radius: var(--fp-r-5);
  padding: 6px 10px;
}
.st-filter-chip--offen {
  color: var(--fp-text-leise);
  background: transparent;
  border-style: dashed;
  border-color: var(--fp-rand-kraeftig);
  font-weight: 400;
}

.st-treffer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--fp-linie-innen);
}
.st-treffer-titel { font-size: var(--fp-fs-14-5); font-weight: 600; color: var(--fp-text); }
.st-treffer-meta { margin-top: 4px; font-size: var(--fp-fs-12-5); line-height: 1.5; color: var(--fp-text-leise); }

.st-passung { padding: 13px 0; border-bottom: 1px solid var(--fp-linie-innen); }
.st-passung-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

.st-zitat {
  margin: 8px 0 0;
  font-size: var(--fp-fs-14-5);
  line-height: 1.55;
  color: var(--fp-text);
  background: var(--fp-flaeche);
  border: 1px solid var(--fp-gruen-rand);
  border-radius: var(--fp-r-8);
  padding: 12px 14px;
}
.st-zitat--gross {
  margin-top: 14px;
  font-size: var(--fp-fs-17-5);
  line-height: 1.6;
  border-color: var(--fp-linie);
  border-radius: var(--fp-r-10);
  padding: 18px;
}

/* ==========================================================================
   8. Förderebenen
   ========================================================================== */
.st-hakenliste { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.st-hakenliste li { display: flex; gap: 11px; font-size: var(--fp-fs-16); color: var(--fp-text-liste); }
.st-hakenliste svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--fp-gruen-text); }

.st-ebenen { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.st-ebene {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--fp-bg);
  border: 1px solid var(--fp-linie);
  border-radius: var(--fp-r-8);
  padding: 14px 16px;
}
.st-ebene--1 { width: 100%; }
.st-ebene--2 { width: 95%; }
.st-ebene--3 { width: 90%; padding: 17px 18px; }
.st-ebene--4 { width: 84%; }
.st-ebene--schwerpunkt { background: var(--fp-blau); border-color: var(--fp-blau); }
.st-ebene--schwerpunkt .st-ebene-name { color: var(--fp-flaeche); font-size: var(--fp-fs-16-5); }
.st-ebene--schwerpunkt .st-ebene-zahl { color: var(--fp-dunkel-text); }
.st-ebene--gruen { background: var(--fp-gruen-flaeche); border-color: var(--fp-gruen-rand); }
.st-ebene--gruen .st-ebene-zahl { color: var(--fp-gruen-text); }
.st-ebene-name { font-size: var(--fp-fs-15-5); font-weight: 600; color: var(--fp-text); }
.st-ebene-zahl { font-size: var(--fp-fs-13-5); color: var(--fp-text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-ebene-pfeil { display: flex; align-items: center; padding-left: 18px; color: var(--fp-trenner); }
.st-ebene-pfeil svg { width: 15px; height: 15px; }

/* ==========================================================================
   9. Monitoring – Änderungsverlauf aus FP_META.chronik
   ========================================================================== */
.st-verlauf { padding: 6px 20px 4px; }
.st-verlauf-leer { margin: 12px 0; font-size: var(--fp-fs-14-5); color: var(--fp-text-3); }
.st-verlauf-zeile { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--fp-linie-innen); }
.st-verlauf-datum {
  flex: none;
  width: 88px;
  font-size: var(--fp-fs-12-5);
  color: var(--fp-text-leise);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.st-verlauf-inhalt { min-width: 0; }
.st-verlauf-typ { font-size: var(--fp-fs-15-5); font-weight: 600; color: var(--fp-text); }
.st-verlauf-programm { margin-top: 3px; font-size: var(--fp-fs-14); color: var(--fp-text-3); overflow-wrap: break-word; }
.st-verlauf-text { margin-top: 3px; font-size: var(--fp-fs-13-5); color: var(--fp-text-leise); }

/* ==========================================================================
   10. Kommunen
   ========================================================================== */
.st-nutzen { background: var(--fp-flaeche); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-12); padding: 30px 26px; }
.st-nutzen svg { width: 26px; height: 26px; color: var(--fp-blau); }
.st-nutzen .st-h3--gross { margin-top: 20px; }

/* Die Tabelle rollt bei schmalen Fenstern in ihrem eigenen Bereich – die
   SEITE rollt nie waagerecht (web_smoke prüft scrollWidth bei 375 px). */
.st-tabelle-rollbereich { overflow-x: auto; }
.st-tabelle {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--fp-linie-innen);
  min-width: 620px;
}
.st-tabelle-kopf {
  background: var(--fp-kasten);
  padding: 11px 16px;
  font-size: var(--fp-fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fp-text-leise);
}
.st-tabelle-kopf:first-child { padding-left: 22px; }
.st-tabelle-zelle { background: var(--fp-flaeche); padding: 16px; font-size: var(--fp-fs-14-5); color: var(--fp-text-3); }
.st-tabelle-zelle--stark { padding-left: 22px; font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text); }

/* ==========================================================================
   11. Vereine und Privatpersonen
   ========================================================================== */
.st-flaeche { background: var(--fp-bg); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-14); padding: 34px 30px; }
.st-flaeche--gruen { background: var(--fp-gruen-flaeche); border-color: var(--fp-gruen-rand); }
.st-flaeche--kasten { background: var(--fp-kasten); border-color: var(--fp-warum-rand); padding: 26px; }
.st-flaeche-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.st-flaeche-lead { margin: 14px 0 0; font-size: var(--fp-fs-17); line-height: 1.6; color: var(--fp-text-2); }
.st-punkteliste { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--fp-fs-15-5); color: var(--fp-text-liste); }
.st-punkteliste li { display: flex; gap: 10px; }
.st-punkteliste li::before { content: "·"; font-weight: 700; color: var(--fp-gruen-text); }

/* ==========================================================================
   12. Unternehmen
   ========================================================================== */
.st-themen { display: flex; flex-wrap: wrap; gap: 12px; }
.st-thema {
  background: var(--fp-flaeche);
  border: 1px solid var(--fp-warum-rand);
  border-radius: var(--fp-r-999);
  padding: 12px 20px;
  font-size: var(--fp-fs-15-5);
  font-weight: 500;
  color: var(--fp-text-filter);
}

/* ==========================================================================
   13. Beratungspraxis
   ========================================================================== */
.st-merkmale {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  font-size: var(--fp-fs-15-5);
  color: var(--fp-dunkel-text);
}
.st-merkmale li { display: flex; gap: 10px; }
.st-merkmale li::before { content: "·"; font-weight: 700; color: var(--fp-dunkel-akzent); }

/* ==========================================================================
   15. Datenbasis – Richtlinienangaben mit Fundstelle
   ========================================================================== */
.st-bedingung {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 13px 22px;
  border-bottom: 1px solid var(--fp-linie-innen);
}
.st-bedingung-feld { font-size: var(--fp-fs-14); color: var(--fp-text-leise); }
.st-bedingung-wert { font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text); }
.st-bedingung-ref { font-size: var(--fp-fs-12-5); color: var(--fp-blau); white-space: nowrap; }

/* ==========================================================================
   16. Zugänge
   ========================================================================== */
.st-zugang { border: 1px solid var(--fp-linie); border-radius: var(--fp-r-12); padding: 28px 26px; background: var(--fp-flaeche); }
.st-zugang--gruen { border-color: var(--fp-gruen-rand); background: var(--fp-gruen-flaeche); }
.st-zugang-stufe { margin: 16px 0 0; font-size: var(--fp-fs-15); font-weight: 700; color: var(--fp-blau); }
.st-zugang-stufe--gruen { color: var(--fp-gruen-text); }

/* ==========================================================================
   17. Häufige Fragen – Akkordeon
   ========================================================================== */
.st-faq { background: var(--fp-flaeche); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-14); overflow: hidden; }
.st-faq-punkt { border-bottom: 1px solid var(--fp-linie-innen); }
.st-faq-punkt:last-child { border-bottom: 0; }
.st-faq-h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.st-faq-knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 19px 22px;
  font-family: inherit;
  font-size: var(--fp-fs-16-5);
  font-weight: 600;
  color: var(--fp-text);
  cursor: pointer;
}
.st-faq-knopf:hover { background: var(--fp-kasten); }
.st-faq-zeichen { flex: none; width: 14px; height: 14px; position: relative; color: var(--fp-blau); }
.st-faq-zeichen::before,
.st-faq-zeichen::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.st-faq-zeichen::after { transform: rotate(90deg); }
.st-faq-knopf[aria-expanded="true"] .st-faq-zeichen::after { transform: rotate(0deg); }
.st-faq-antwort { padding: 0 22px 20px; }
.st-faq-antwort p { margin: 0; font-size: var(--fp-fs-15-5); line-height: 1.65; color: var(--fp-text-3); max-width: 70ch; }

/* ==========================================================================
   18. Abschluss-Aufruf
   ========================================================================== */
.st-abschluss { padding: 76px 24px; background: var(--fp-navy); }
.st-abschluss-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.st-abschluss-row .st-h2 { margin-top: 0; }
.st-abschluss-row .st-knopfreihe { margin-top: 0; }

/* ==========================================================================
   19. Fuß
   ========================================================================== */
.st-fuss { background: var(--fp-tief); color: var(--fp-dunkel-text); padding: 46px 24px; }
.st-fuss-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.st-fuss-marke { font-size: var(--fp-fs-14); color: var(--fp-dunkel-text-2); }
.st-fuss-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: var(--fp-fs-14); }
.st-fuss-links a { color: var(--fp-dunkel-text); text-decoration: none; }
.st-fuss-links a:hover { color: var(--fp-flaeche); text-decoration: underline; }
.st-fuss-hinweis {
  max-width: 1200px;
  margin: 22px auto 0;
  font-size: var(--fp-fs-12-5);
  line-height: 1.6;
  color: var(--fp-dunkel-text-2);
}

/* ==========================================================================
   20. Hinweisdialog
   ========================================================================== */
.st-schleier {
  position: fixed;
  inset: 0;
  background: var(--fp-schleier);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}
.st-schleier[hidden] { display: none; }
.st-dialog {
  width: 520px;
  max-width: 100%;
  background: var(--fp-flaeche);
  border-radius: var(--fp-r-12);
  padding: 28px 30px;
  box-shadow: var(--fp-schatten-dialog);
}
.st-dialog-titel { margin: 0; font-size: var(--fp-fs-22); font-weight: 700; color: var(--fp-navy); }
.st-dialog-text { margin: 12px 0 0; font-size: var(--fp-fs-15-5); line-height: 1.6; color: var(--fp-text-2); }
.st-dialog-fuss { margin-top: 22px; display: flex; justify-content: flex-end; }

/* ==========================================================================
   21. Responsiv – Umbrüche wie im Entwurf (1024 / 900 / 640 / 560 px)
   ========================================================================== */
@media (max-width: 1024px) {
  .st-nav { display: none; }
  .st-schritte-linie { display: none; }
  .st-schritte-raster, .st-schritte-raster--drei { grid-template-columns: repeat(2, 1fr); }
  .st-drei { grid-template-columns: repeat(2, 1fr); }
  .st-held-grid { gap: 32px; }
  .st-monitoring-zeile { grid-template-columns: 1fr; gap: 28px; }   /* CR-165 Teil `startseite` */
}

@media (max-width: 900px) {
  .st-abschnitt { padding: 56px 20px; }
  .st-held { padding: 56px 20px; }
  .st-band { padding: 40px 20px; }
  .st-abschluss { padding: 56px 20px; }
  .st-fuss { padding: 36px 20px; }
  .st-split, .st-split--schmal, .st-split--breit, .st-split--faq,
  .st-held-grid, .st-zwei, .st-drei, .st-schritte-raster, .st-schritte-raster--drei { grid-template-columns: 1fr; }
  .st-split, .st-split--faq { gap: 32px; }
  .st-h1 { font-size: var(--fp-fs-40); max-width: none; }
  .st-h2 { font-size: var(--fp-fs-30); }
  .st-h2--klein { font-size: var(--fp-fs-28); }
  .st-h2--eng { max-width: none; }
  .st-lead, .st-absatz, .st-absatz--dunkel { max-width: none; }
  .st-karte-kopfblock { padding: 24px 22px 20px; }
  .st-vorschau { margin: 0 22px; }
  .st-karte-fuss { padding: 20px 22px 24px; }
  .st-karte--polster { padding: 22px; }
  .st-flaeche { padding: 26px 22px; }
}

@media (max-width: 640px) {
  .st-kennzahlen { grid-template-columns: 1fr; }
  .st-werteraster { grid-template-columns: 1fr; }
  .st-merkmale { grid-template-columns: 1fr; }
  .st-bedingung { grid-template-columns: 1fr; gap: 4px; padding: 13px 18px; }
  .st-bedingung-ref { white-space: normal; }
  .st-ebene--1, .st-ebene--2, .st-ebene--3, .st-ebene--4 { width: 100%; }
  .st-ebene { flex-wrap: wrap; gap: 4px 12px; }
  .st-kennzahl-wert { font-size: var(--fp-fs-30); }
  .st-kennzahl-wert--datum { font-size: var(--fp-fs-24); }
  .st-verlauf-zeile { flex-direction: column; gap: 4px; }
  .st-verlauf-datum { width: auto; padding-top: 0; }
  .st-faq-knopf { padding: 16px 18px; font-size: var(--fp-fs-16); }
  .st-faq-antwort { padding: 0 18px 18px; }
}

@media (max-width: 560px) {
  .st-kopf-row { gap: 12px; padding: 10px 16px; }
  .st-marke img { height: 40px; }
  .st-kopf-login { display: none; }
  .st-kopf-aktionen { gap: 8px; }
  .st-kopf-aktionen .st-btn { font-size: var(--fp-fs-14); padding: 9px 14px; }
  .st-abschnitt, .st-held, .st-band, .st-abschluss, .st-fuss { padding-left: 16px; padding-right: 16px; }
  .st-h1 { font-size: var(--fp-fs-32); }
  .st-h2 { font-size: var(--fp-fs-26); }
  .st-knopfreihe .st-btn { width: 100%; }
  .st-nutzen { padding: 24px 20px; }
  .st-zugang { padding: 22px 20px; }
  .st-dialog { padding: 22px 20px; }
}

/* ==========================================================================
   KOPFBEREICH (Kopf-Umbau 27.08.2026, Weisung Eric)

   Die Startseite traegt jetzt denselben Kopf wie Fachsuche und
   Programmuebersicht; seine Regeln stehen in foerderplus.css, Abschnitt 3z.
   Hier bleiben nur die beiden Dinge, die seitenspezifisch sind:

   1. Die Inhaltsbreite dieser Seite ist 1200 px (.st-breite), nicht 1400 px -
      der Kopf fluchtet damit mit dem Inhalt darunter.
   2. Die Klasse `.st-nav` bleibt am <nav>, weil web_smoke.py sie als Anker
      benutzt. Ihre alten Regeln stammen aus dem frueheren HELLEN Kopf und
      wuerden im dunklen Kopf stoeren (dunkle Schrift, gruener Unterstrich,
      margin-left:auto). Sie werden deshalb hier zurueckgenommen - die alten
      Regeln selbst bleiben unangetastet stehen, falls der helle Kopf je
      wiederkommt.
   ========================================================================== */
.su-kopf { --fp-kopf-breite: 1200px; }
.su-kopf .st-nav { gap: 2px; margin-left: 0; font-size: var(--fp-fs-14-5); }
.su-kopf .st-nav a { color: var(--fp-dunkel-text); padding: 8px 12px; border-bottom: 0; }
.su-kopf .st-nav a:hover { color: var(--fp-flaeche); border-bottom-color: transparent; }

/* ==========================================================================
   UNTERSTUETZEN-SEITE (CR-504 Teil `unterstuetzung`, Freigabe Eric 16.09.2026)
   Markup: web/unterstuetzen.html – ruhige Einzelseite, nutzt sonst die
   vorhandenen .st-*-Komponenten. Nur diese vier Regeln kommen hinzu.
   ========================================================================== */
.su-kopf .st-unt-kopfaktion { margin-left: auto; }
.st-unt-bild { margin: var(--fp-s-7) 0 var(--fp-s-8); }
.st-unt-svg { display: block; width: 100%; height: auto; border-radius: var(--fp-r-12);
              border: 1px solid var(--fp-gruen-rand); background: var(--fp-amber-flaeche); }
.st-unt-bildvermerk { margin: var(--fp-s-2) 0 0; font-size: var(--fp-fs-13-5); color: var(--fp-text-leise); }
.st-unt-hinweis { margin-top: var(--fp-s-3); }
.st-unt-empfaenger { margin: var(--fp-s-2) 0 0; font-size: var(--fp-fs-14-5); color: var(--fp-text-2); }
.st-unt-entwurf { margin: var(--fp-s-4) 0 0; padding: var(--fp-s-4) var(--fp-s-5);
                  border: 1px solid var(--fp-amber-rand); border-radius: var(--fp-r-12);
                  background: var(--fp-amber-flaeche); color: var(--fp-amber-text);
                  font-size: var(--fp-fs-14-5); }
/* Schmale Anzeige: die Szene wird beschnitten statt winzig skaliert
   (preserveAspectRatio="slice" im SVG), damit Haus und Werkstatt lesbar bleiben. */
@media (max-width: 560px) { .st-unt-svg { height: 230px; } }