/* ==========================================================================
   foerderplus.css – FörderPLUS Designgrundlage (CR-121, Paket A1)
   ==========================================================================
   Eine einzige CSS-Grundlage für alle FörderPLUS-Oberflächen (Startseite,
   Fachsuche, Programmkarte). Quelle ist der Arbeitsvertrag FörderPLUS v3
   (Token-Werte, Namenskonvention) und die Design-Spezifikation
   `FoerderPLUS-v3.dc.html` / `ProgrammkartePLUS.dc.html` (Farben, Größen,
   Abstände, Radien, Rahmen, Hover-Zustände – wörtlich übernommen).

   Diese Datei liefert NUR Bausteine (Tokens + Komponentenklassen). Sie
   entscheidet nichts über Fachlogik, Trefferzahlen oder Klartext-Begriffe –
   das bleibt Aufgabe der Seiten, die sie einbinden (Pakete A2/C).

   Aufbau: 1. Tokens (:root, inkl. Alt-App-Aliase) · 2. Basis-Reset ·
   3. Komponenten (je Abschnitt mit Markup-Skizze im Kommentar) ·
   4. Responsive Grundregeln (560 / 900 / 1200 px).

   Farbregel: Innerhalb der Komponenten wird JEDE Farbe über ein
   `var(--fp-…)`-Token referenziert, nie als literales Hex – geprüft von
   `scripts/design_pruefung.py`.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Marke und Status (FÖRIS+-Schema, CR-140/farbschema – Werte laut CR-Tabelle) */
  --fp-navy: #072A50;              /* Vertrauen, Navigation, starke Überschriften */
  --fp-blau: #0B3D73;              /* NUR primäre Interaktion */
  --fp-blau-hover: #062948;
  --fp-gruen: #79BE3A;             /* NUR „geprüft/belegt"-Akzent (Grün), Icon, Knopffläche – nie Text auf Hell (2,27:1) */
  --fp-gruen-hover: #8CCB4C;
  --fp-gruen-text: #3F6D14;        /* Textvariante des Akzents (Überzeilen, Statuschip) */
  --fp-gruen-tief: #10240B;        /* Textfarbe auf grünem Knopf */
  --fp-gruen-flaeche: #EAF4DC;
  --fp-gruen-rand: #DCE9C9;
  --fp-amber: #FFB547;             /* Balken/Markierung */
  --fp-amber-text: #8B6A00;
  --fp-amber-flaeche: #FDF3D7;
  --fp-amber-rand: #F2E3B8;
  --fp-info-text: #0B3D73;
  --fp-info-flaeche: #EDF3FA;
  --fp-info-rand: #D5E3F2;
  --fp-info-flaeche-hover: #E3EDF8;
  --fp-rot: #C0392B;               /* NUR echte Fehler */
  --fp-sand: #C08A2E;              /* Icon „Dranbleiben", Überzeile „Änderungen im Blick" */

  /* Text */
  --fp-text: #0E1B2A;
  --fp-text-2: #47596E;
  --fp-text-3: #55677A;
  --fp-text-leise: #5D6F85;        /* Abweichung vom Entwurf: #62748A läge auf dem Seitengrund bei genau 4,50:1 ohne Reserve (CR-140) – dieselbe Entscheidung wie 19.08.2026 für #8B9AA8 */
  --fp-text-liste: #2C4257;
  --fp-text-filter: #1F3A57;
  --fp-text-beispiel: #7A8A9C;     /* Platzhaltertext im Hero-Eingabefeld */

  /* Flächen */
  --fp-flaeche: #FFFFFF;
  --fp-bg: #F5F8FC;                /* Seitengrund */
  --fp-kasten: #F7FAFD;
  --fp-nachgeordnet: #FBFCFE;
  --fp-neutral-flaeche: #EDF3FA;   /* neutrale Chips/Hover */
  --fp-warum-flaeche: #F2F6FB;
  --fp-warum-rand: #DCE5EF;

  /* Linien */
  --fp-linie: #E2E8F0;             /* Hairline */
  --fp-rand-kraeftig: #C9D6E4;     /* Eingabe/Rahmen kräftig */
  --fp-linie-innen: #EEF2F7;
  --fp-nachgeordnet-rand: #E8EDF4;
  --fp-trenner: #B9C7D6;           /* Trenner-Plus */

  /* Dunkler Block */
  --fp-tief: #0E1B2A;              /* sehr dunkler Block: Fuß, Beratungspraxis */
  --fp-dunkel-text: #C3D8EC;
  --fp-dunkel-text-2: #9FC0E0;
  --fp-dunkel-akzent: #A5D179;
  --fp-dunkel-flaeche: rgba(255, 255, 255, 0.07);
  --fp-dunkel-rand: rgba(255, 255, 255, 0.16);

  /* Kopfbereich (Design Runde 2 / Variante 1B, Weisung Eric 27.08.2026).
     Die beiden Werte kommen aus dem Kompass-Zeichen des Entwurfs; sie stehen
     hier, weil design_pruefung.py Hex-Literale in web/index.html nur
     durchlaesst, wenn sie einem Token entsprechen (Token-Disziplin). */
  --fp-kopf-ring: #5E8CB8;         /* Kompassring auf Navy */
  --fp-kopf-nadel: #E9F1F8;        /* helle Kompassnadel */

  /* Dialog */
  --fp-schleier: rgba(7, 42, 80, 0.55);
  --fp-schatten-dialog: 0 18px 40px rgba(7, 42, 80, 0.28);

  /* Schriftskala (px) */
  --fp-fs-11-5: 11.5px; --fp-fs-12: 12px; --fp-fs-12-5: 12.5px; --fp-fs-13: 13px;
  --fp-fs-13-5: 13.5px; --fp-fs-14: 14px; --fp-fs-14-5: 14.5px; --fp-fs-15: 15px;
  --fp-fs-15-5: 15.5px; --fp-fs-16: 16px; --fp-fs-16-5: 16.5px; --fp-fs-17: 17px;
  --fp-fs-17-5: 17.5px; --fp-fs-18: 18px; --fp-fs-18-5: 18.5px; --fp-fs-19: 19px;
  --fp-fs-19-5: 19.5px; --fp-fs-20: 20px; --fp-fs-21: 21px; --fp-fs-22: 22px;
  --fp-fs-24: 24px; --fp-fs-26: 26px; --fp-fs-28: 28px; --fp-fs-30: 30px;
  --fp-fs-32: 32px; --fp-fs-34: 34px; --fp-fs-36: 36px; --fp-fs-38: 38px;
  --fp-fs-40: 40px; --fp-fs-44: 44px; --fp-fs-56: 56px;

  /* Abstände, 4-px-Basis */
  --fp-s-1: 4px; --fp-s-2: 8px; --fp-s-3: 12px; --fp-s-4: 16px; --fp-s-5: 20px;
  --fp-s-6: 24px; --fp-s-7: 28px; --fp-s-8: 32px; --fp-s-9: 36px; --fp-s-10: 40px;
  --fp-s-12: 48px; --fp-s-14: 56px; --fp-s-16: 64px; --fp-s-19: 76px; --fp-s-24: 96px;

  /* Radien */
  --fp-r-4: 4px; --fp-r-5: 5px; --fp-r-6: 6px; --fp-r-8: 8px; --fp-r-9: 9px;
  --fp-r-10: 10px; --fp-r-12: 12px; --fp-r-14: 14px; --fp-r-999: 999px;

  /* Schriftfamilien kommen aus fonts.css (--fp-font-sans/--fp-font-mono).
     Hier NICHT neu definieren – sonst überschreibt die Ladereihenfolge den
     Fallback. Verwendung immer mit var(--fp-font-…, Fallback). */
}

/* Rückwärtskompatible Aliase für web/foerderfinder.html (Alt-App) – CR-121/A1:
   bestehendes App-CSS zieht damit sofort auf die neuen Tokens um, ohne dass
   web/foerderfinder.html angefasst werden muss. Zuordnung laut Vertrag. */
:root {
  --blau: var(--fp-blau);
  --blau-hell: var(--fp-info-flaeche);    /* #EDF3FA */
  --gruen: var(--fp-gruen-text);          /* #3F6D14 */
  --gelb: var(--fp-amber-text);           /* #8B6A00 */
  --orange: var(--fp-amber-text);         /* #8B6A00 */
  --orange-hell: var(--fp-amber-flaeche); /* #FDF3D7 */
  --rot: var(--fp-rot);
  --grau: var(--fp-text-3);               /* #55677A */
  --rand: var(--fp-linie);                /* #E2E8F0 */
  --bg: var(--fp-bg);                     /* #F5F8FC */
}

/* ==========================================================================
   2. BASIS
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fp-font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: var(--fp-fs-16); line-height: 1.55; color: var(--fp-text); background: var(--fp-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--fp-blau); text-decoration: none; }
a:hover { color: var(--fp-navy); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--fp-blau); outline-offset: 2px; border-radius: var(--fp-r-4); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--fp-blau); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.fp-mono { font-family: var(--fp-font-mono, ui-monospace, Consolas, monospace); font-variant-numeric: tabular-nums; }
.fp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Zentrierter Seiteninhalt, max. 1360 px, Seitenränder 40/20/16 px */
.fp-container { max-width: 1360px; margin: 0 auto; padding: 0 var(--fp-s-10); }
@media (max-width: 900px) { .fp-container { padding: 0 var(--fp-s-5); } }
@media (max-width: 560px) { .fp-container { padding: 0 var(--fp-s-4); } }

/* ==========================================================================
   3. KOMPONENTEN
   ========================================================================== */

/* -- 3.1 Kopf / Navigation --------------------------------------------------
   <header class="fp-kopf"><div class="fp-container fp-kopf-row">
     <a class="fp-marke" href="…">
       <span class="fp-marke-icon"><svg aria-hidden="true">Plus</svg></span>
       <span class="fp-marke-wort">Förder<strong>PLUS</strong></span></a>
     <nav class="fp-nav" aria-label="Hauptnavigation">
       <a class="fp-nav-link fp-nav-link--aktiv" href="…">Förderprogramme</a> …</nav>
     <div class="fp-kopf-aktionen">
       <button class="fp-regionsknopf">…</button>
       <button class="fp-btn fp-btn--sekundaer"><svg aria-hidden="true"/>Beobachtet</button>
       <a class="fp-btn fp-btn--sekundaer" href="…">Anmelden</a></div>
   </div></header> -------------------------------------------------------- */
.fp-kopf { background: var(--fp-flaeche); border-bottom: 1px solid var(--fp-linie); }
.fp-kopf-row { display: flex; align-items: center; gap: var(--fp-s-5); padding-top: 14px; padding-bottom: 14px; }
.fp-marke { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.fp-marke:hover { text-decoration: none; color: inherit; }
.fp-marke-icon { width: 30px; height: 30px; border-radius: var(--fp-r-8); background: var(--fp-navy); color: var(--fp-gruen); display: flex; align-items: center; justify-content: center; flex: none; }
.fp-marke-icon svg { width: 15px; height: 15px; }
.fp-marke-wort { font-size: var(--fp-fs-19); font-weight: 500; letter-spacing: -0.2px; white-space: nowrap; }
.fp-marke-wort strong { font-weight: 700; color: var(--fp-navy); }

.fp-nav { display: flex; gap: 18px; font-size: var(--fp-fs-15); font-weight: 500; flex: 1 1 auto; min-width: 0; }
.fp-nav-link { color: var(--fp-text); padding: 6px 0; white-space: nowrap; flex: none; border-bottom: 2px solid transparent; text-decoration: none; }
.fp-nav-link:hover { color: var(--fp-text); text-decoration: none; border-bottom-color: var(--fp-rand-kraeftig); }
.fp-nav-link--aktiv { border-bottom-color: var(--fp-blau); }

.fp-kopf-aktionen { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.fp-kopf-aktionen .fp-btn { min-height: 40px; font-size: var(--fp-fs-14-5); padding: 0 var(--fp-s-3); } /* Kopf-Aktionen sind 40 px hoch, nicht die generischen 44 px */

.fp-regionsknopf { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px; border: 1px solid var(--fp-linie); border-radius: var(--fp-r-8); background: var(--fp-bg); color: var(--fp-gruen); font-family: inherit; cursor: pointer; text-align: left; flex: none; }
.fp-regionsknopf:hover { background: var(--fp-neutral-flaeche); border-color: var(--fp-rand-kraeftig); }
.fp-regionsknopf-text { display: flex; flex-direction: column; line-height: 1.15; }
.fp-regionsknopf-titel { font-size: var(--fp-fs-14); font-weight: 600; color: var(--fp-text); }
.fp-regionsknopf-sub { font-size: 10.5px; letter-spacing: 0.04em; color: var(--fp-text-3); }

/* -- 3.2 Buttons -------------------------------------------------------------
   <button class="fp-btn fp-btn--primaer">Text</button>
   <a class="fp-btn fp-btn--sekundaer" href="…">Text</a>
   <button class="fp-btn fp-btn--icon" aria-label="…"><svg aria-hidden="true"/></button> ---- */
.fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--fp-r-8); font-family: inherit; font-size: var(--fp-fs-15-5); font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fp-btn--primaer { background: var(--fp-blau); color: var(--fp-flaeche); }
.fp-btn--primaer:hover { background: var(--fp-blau-hover); color: var(--fp-flaeche); text-decoration: none; }
.fp-btn--sekundaer { background: var(--fp-flaeche); color: var(--fp-navy); border: 1px solid var(--fp-rand-kraeftig); }
.fp-btn--sekundaer:hover { background: var(--fp-neutral-flaeche); color: var(--fp-navy); text-decoration: none; }
.fp-btn--leise { background: transparent; border: 0; padding: 0; min-height: auto; color: var(--fp-blau); font-weight: 600; }
.fp-btn--leise:hover { text-decoration: underline; background: transparent; }
.fp-btn--icon { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--fp-linie); background: var(--fp-flaeche); color: var(--fp-text-2); }
.fp-btn--icon:hover { background: var(--fp-bg); border-color: var(--fp-rand-kraeftig); }
.fp-btn--gross { min-height: 52px; padding: 0 30px; font-size: var(--fp-fs-17); }
.fp-btn:disabled { cursor: not-allowed; opacity: 0.6; }

/* -- 3.3 Chips (aktive Filter, entfernbar) -----------------------------------
   <button class="fp-chip">Vereine <svg aria-hidden="true">×</svg></button> ---- */
.fp-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--fp-info-rand); border-radius: var(--fp-r-999); background: var(--fp-info-flaeche); color: var(--fp-navy); font-family: inherit; font-size: var(--fp-fs-13-5); font-weight: 600; cursor: pointer; }
.fp-chip:hover { background: var(--fp-info-flaeche-hover); }
.fp-chip svg { width: 11px; height: 11px; flex: none; }

/* -- 3.4 Statuschips (Prüfstand einer belegten Aussage) ----------------------
   <span class="fp-status-chip fp-status-chip--gruen"><svg aria-hidden="true">✓</svg>geprüft</span>
   Vier Familien – Farbe ist NIE alleiniger Bedeutungsträger: Text steht immer
   daneben, Icon zeigt zusätzlich den Zustand. ------------------------------- */
.fp-status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fp-fs-13-5); font-weight: 600; border-radius: var(--fp-r-6); padding: 4px 9px; border: 1px solid transparent; }
.fp-status-chip svg { width: 13px; height: 13px; flex: none; }
.fp-status-chip--gruen { color: var(--fp-gruen-text); background: var(--fp-gruen-flaeche); border-color: var(--fp-gruen-rand); }
.fp-status-chip--amber { color: var(--fp-amber-text); background: var(--fp-amber-flaeche); border-color: var(--fp-amber-rand); }
.fp-status-chip--info { color: var(--fp-info-text); background: var(--fp-info-flaeche); border-color: var(--fp-info-rand); }
.fp-status-chip--neutral { color: var(--fp-text-2); background: var(--fp-neutral-flaeche); border-color: var(--fp-rand-kraeftig); }

/* -- 3.5 Kennzeichen (kleine eckige Labels: Ebene, Region) -------------------
   <span class="fp-kennzeichen fp-kennzeichen--ebene">Land Sachsen</span>
   <span class="fp-kennzeichen fp-kennzeichen--region"><svg aria-hidden="true">Pin</svg>Erzgebirgskreis</span> */
.fp-kennzeichen { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fp-fs-13); font-weight: 600; border-radius: var(--fp-r-4); padding: 3px 9px; }
.fp-kennzeichen svg { width: 12px; height: 12px; flex: none; }
.fp-kennzeichen--ebene { color: var(--fp-navy); background: var(--fp-neutral-flaeche); border: 1px solid var(--fp-linie); }
.fp-kennzeichen--region { color: var(--fp-gruen-text); background: var(--fp-gruen-flaeche); border: 1px solid var(--fp-gruen-rand); }

/* -- 3.6 Statusleiste (dreigeteilt: Prüfstand · Aufruflage · Aktualität) -----
   <div class="fp-statusleiste"><div class="fp-statusleiste-zelle">
     <span class="fp-statusleiste-label">Prüfstand</span>
     <span class="fp-statusleiste-wert fp-statusleiste-wert--gruen"><svg aria-hidden="true">✓</svg>geprüft</span>
   </div> … zwei weitere Zellen … </div> --------------------------------- */
.fp-statusleiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--fp-linie-innen); border-radius: var(--fp-r-8); overflow: hidden; }
.fp-statusleiste-zelle { padding: 11px 14px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--fp-linie-innen); }
.fp-statusleiste-zelle:last-child { border-right: none; }
.fp-statusleiste-label { font-size: var(--fp-fs-12); color: var(--fp-text-3); }
.fp-statusleiste-wert { display: flex; align-items: center; gap: 7px; font-size: var(--fp-fs-14-5); font-weight: 600; color: var(--fp-text); }
.fp-statusleiste-wert svg { width: 15px; height: 15px; flex: none; }
.fp-statusleiste-wert--gruen { color: var(--fp-gruen-text); }
.fp-statusleiste-wert--amber { color: var(--fp-amber-text); }
.fp-statusleiste-wert--neutral { color: var(--fp-text-3); }
@media (max-width: 560px) {
  .fp-statusleiste { grid-template-columns: 1fr; }
  .fp-statusleiste-zelle { border-right: none; border-bottom: 1px solid var(--fp-linie-innen); }
  .fp-statusleiste-zelle:last-child { border-bottom: none; }
}

/* -- 3.7 Karte (Programmkarte) -----------------------------------------------
   <article class="fp-karte"><div class="fp-karte-kopf"><div class="fp-karte-kopf-text">
       <div class="fp-karte-kennzeichen-zeile"> … fp-kennzeichen … </div>
       <h3 class="fp-karte-titel">Programmname</h3>
       <p class="fp-karte-zusammenfassung">…</p></div>
     <button class="fp-btn fp-btn--icon" aria-label="Programm beobachten"><svg aria-hidden="true"/></button></div>
     <div class="fp-karte-status"> … fp-statusleiste … </div>
     <div class="fp-karte-warum-wrap"> … fp-warum … </div>
     <div class="fp-karte-fuss"> … </div></article> ------------------------ */
.fp-karte { background: var(--fp-flaeche); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-10); overflow: hidden; }
.fp-karte--nachgeordnet { background: var(--fp-nachgeordnet); border-color: var(--fp-nachgeordnet-rand); }
.fp-karte-kopf { padding: 20px 22px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fp-s-4); }
.fp-karte-kopf-text { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.fp-karte-kennzeichen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.fp-karte-titel { font-size: var(--fp-fs-21); font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; }
.fp-karte-zusammenfassung { font-size: var(--fp-fs-15); line-height: 1.55; color: var(--fp-text-2); margin: 0; }
.fp-karte-status { margin: 0 22px; }
.fp-karte-warum-wrap { margin: 14px 22px 0; }

.fp-warum { background: var(--fp-warum-flaeche); border: 1px solid var(--fp-warum-rand); border-radius: var(--fp-r-8); padding: 14px 16px; }
.fp-warum-titel { font-size: var(--fp-fs-14-5); font-weight: 700; color: var(--fp-navy); margin: 0 0 8px; }
.fp-warum-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fp-warum-zeile { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fp-fs-14-5); line-height: 1.45; color: var(--fp-text-liste); }
.fp-warum-zeile svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.fp-warum-zeile--belegt svg { color: var(--fp-gruen); }
.fp-warum-zeile--offen svg { color: var(--fp-amber-text); }

.fp-karte-fuss { margin-top: 14px; background: var(--fp-kasten); border-top: 1px solid var(--fp-linie-innen); padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fp-karte-fuss-meta { display: flex; flex-direction: column; gap: 2px; }
.fp-karte-fuss-meta-zeile { font-size: var(--fp-fs-13-5); color: var(--fp-text-2); }
.fp-karte-fuss-meta-hinweis { font-size: var(--fp-fs-12-5); color: var(--fp-amber-text); }
.fp-karte-fuss-aktionen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fp-quelle-link { display: flex; align-items: center; gap: 7px; font-size: var(--fp-fs-14-5); font-weight: 600; color: var(--fp-blau); }
.fp-quelle-link svg { width: 15px; height: 15px; flex: none; }

/* -- 3.8 Hinweiskasten --------------------------------------------------------
   <div class="fp-hinweis"><svg aria-hidden="true">!</svg><span>Text</span></div> */
.fp-hinweis { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fp-fs-13); line-height: 1.5; color: var(--fp-amber-text); background: var(--fp-amber-flaeche); border: 1px solid var(--fp-amber-rand); border-radius: var(--fp-r-6); padding: 9px 11px; }
.fp-hinweis svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.fp-hinweis--neutral { color: var(--fp-text-2); background: var(--fp-kasten); border-color: var(--fp-linie); }

/* -- 3.9 Eingaben / Suchleiste ------------------------------------------------
   <label class="fp-suchleiste"><span class="fp-visually-hidden">Suche</span>
     <span class="fp-suchleiste-feld"><svg aria-hidden="true">Lupe</svg>
       <input class="fp-eingabe" type="search" placeholder="…"></span>
     <button class="fp-btn fp-btn--primaer">Suchen</button></label> --------- */
.fp-eingabe { border: 1px solid var(--fp-rand-kraeftig); border-radius: var(--fp-r-8); font-family: inherit; font-size: var(--fp-fs-15-5); color: var(--fp-text); background: var(--fp-flaeche); padding: 10px 12px; width: 100%; }
.fp-eingabe:focus { outline: none; border-color: var(--fp-blau); box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.15); }
.fp-eingabe::placeholder { color: var(--fp-text-3); }

.fp-suchleiste { display: flex; gap: 10px; align-items: center; }
.fp-suchleiste-feld { flex: 1; display: flex; align-items: center; gap: 11px; background: var(--fp-flaeche); border: 1px solid var(--fp-rand-kraeftig); border-radius: var(--fp-r-8); padding: 0 14px; height: 50px; }
.fp-suchleiste-feld svg { width: 18px; height: 18px; flex: none; color: var(--fp-text-3); }
.fp-suchleiste-feld input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: var(--fp-fs-15-5); color: var(--fp-text); background: transparent; min-width: 0; }
/* Der Fokusring gehoert an den KASTEN, nicht an das innere Eingabefeld: das
   Feld ist randlos in den Kasten eingelassen, ein Ring an ihm saesse mitten im
   Kasten. `outline: none` oben bleibt deshalb stehen – sichtbar wird der Fokus
   hier. Ohne diese Regel haette das Suchfeld bei Tastaturbedienung gar keine
   sichtbare Fokusanzeige (Befund 19.08.2026). */
.fp-suchleiste-feld:focus-within { outline: 3px solid var(--fp-blau); outline-offset: 2px; border-color: var(--fp-blau); }
.fp-suchleiste .fp-btn { height: 50px; min-height: 50px; }
.fp-suchleiste-hinweis { font-size: var(--fp-fs-13-5); color: var(--fp-text-3); line-height: 1.4; max-width: 220px; }

/* -- 3.10 Filterpanel ----------------------------------------------------------
   <aside class="fp-filter"><div class="fp-filter-box">
     <div class="fp-filter-kopf"><span class="fp-filter-titel">Filter</span>
       <button class="fp-btn fp-btn--leise">Alle zurücksetzen</button></div>
     <div class="fp-filter-abschnitt"><div class="fp-filter-abschnittskopf">Wo findet das Vorhaben statt?</div>
       <button class="fp-filter-kachel fp-filter-kachel--aktiv"> … </button></div>
     <div class="fp-filter-abschnitt"><div class="fp-filter-abschnittskopf">Wer beantragt?</div>
       <div class="fp-filter-kacheln"><label class="fp-filter-kachel"><input type="radio" name="antragsteller">
         <span class="fp-filter-kachel-text">Verein</span><span class="fp-mono fp-filter-zahl">500</span></label></div></div></div>
   <div class="fp-filter-box"><div class="fp-filter-boxkopf"><div class="fp-filter-titel">Förderzweck</div>
       <div class="fp-filter-unterzeile">Mein Vorhaben, mehrfach wählbar</div></div>
     <div class="fp-filter-gruppe"><div class="fp-filter-gruppenkopf"><span class="fp-filter-gruppentitel">Bauen &amp; Infrastruktur</span>
         <span class="fp-mono fp-filter-gruppenzahl">(8)</span></div>
       <label class="fp-filter-zeile"><input type="checkbox"><span class="fp-filter-zeile-text">Schul-Infrastruktur</span>
         <span class="fp-mono fp-filter-zeile-zahl">15</span></label></div></div></aside> -------------------------- */
.fp-filter { display: flex; flex-direction: column; gap: 14px; }
.fp-filter-box { background: var(--fp-flaeche); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-10); }
.fp-filter-kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--fp-neutral-flaeche); }
.fp-filter-boxkopf { padding: 14px 16px 4px; }
.fp-filter-titel { font-size: var(--fp-fs-15); font-weight: 600; }
.fp-filter-unterzeile { font-size: var(--fp-fs-13-5); color: var(--fp-text-3); margin-top: 3px; }
.fp-filter-abschnitt { padding: 16px; border-bottom: 1px solid var(--fp-neutral-flaeche); }
.fp-filter-abschnitt:last-child { border-bottom: none; }
.fp-filter-abschnittskopf { font-size: var(--fp-fs-13); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fp-text-3); }
.fp-filter-hinweis { font-size: var(--fp-fs-13); color: var(--fp-text-3); margin-top: 8px; line-height: 1.45; }

.fp-filter-gruppe { padding: 12px 16px 14px; border-top: 1px solid var(--fp-neutral-flaeche); }
.fp-filter-gruppenkopf { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.fp-filter-gruppentitel { font-size: var(--fp-fs-12-5); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fp-navy); }
.fp-filter-gruppenzahl { font-size: 11.5px; color: var(--fp-text-leise); }

.fp-filter-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--fp-r-6); cursor: pointer; }
.fp-filter-zeile:hover { background: var(--fp-bg); }
.fp-filter-zeile input { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
.fp-filter-zeile-text { font-size: var(--fp-fs-14-5); line-height: 1.3; flex: 1; color: var(--fp-text-filter); }
.fp-filter-zeile-zahl { font-size: var(--fp-fs-12-5); color: var(--fp-text-leise); }

.fp-filter-kacheln { display: grid; gap: 6px; margin-top: 12px; }
.fp-filter-kachel { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border: 1px solid var(--fp-linie); border-radius: var(--fp-r-8); background: var(--fp-flaeche); cursor: pointer; font-family: inherit; text-align: left; width: 100%; }
.fp-filter-kachel:hover { background: var(--fp-bg); }
.fp-filter-kachel--aktiv { background: var(--fp-info-flaeche); border-color: var(--fp-blau); }
.fp-filter-kachel input { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
.fp-filter-kachel-text { flex: 1; font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text); }
.fp-filter-zahl { font-family: var(--fp-font-mono, ui-monospace, Consolas, monospace); font-size: var(--fp-fs-12-5); color: var(--fp-text-3); }

/* -- 3.11 Ergebniskopf und aktive Filter --------------------------------------
   <div class="fp-ergebniskopf"><div><div class="fp-ergebniskopf-treffer">1.649 Förderprogramme</div>
       <div class="fp-ergebniskopf-kontext">gefiltert für Verein</div></div>
     <button class="fp-sortierfeld"><span class="fp-sortierfeld-label">Sortieren</span>Passgenauigkeit<svg aria-hidden="true">▾</svg></button></div>
   <div class="fp-aktive-filter"><span class="fp-aktive-filter-label">Aktive Filter</span>
     <button class="fp-chip">Verein <svg aria-hidden="true">×</svg></button>
     <button class="fp-btn fp-btn--leise">zurücksetzen</button></div> ------- */
.fp-ergebniskopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fp-s-4); flex-wrap: wrap; }
.fp-ergebniskopf-treffer { font-size: var(--fp-fs-22); font-weight: 700; letter-spacing: -0.3px; }
.fp-ergebniskopf-kontext { font-size: var(--fp-fs-14-5); color: var(--fp-text-3); margin-top: 2px; }
.fp-sortierfeld { display: flex; align-items: center; gap: 8px; background: var(--fp-flaeche); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-8); padding: 9px 13px; font-family: inherit; font-size: var(--fp-fs-14-5); font-weight: 600; color: var(--fp-text); cursor: pointer; }
.fp-sortierfeld svg { width: 12px; height: 12px; color: var(--fp-text-3); }
.fp-sortierfeld-label { font-size: var(--fp-fs-13-5); color: var(--fp-text-3); font-weight: 400; }

.fp-aktive-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; }
.fp-aktive-filter-label { font-size: var(--fp-fs-13-5); font-weight: 600; color: var(--fp-text-3); }
.fp-aktive-filter-leer { font-size: var(--fp-fs-13-5); color: var(--fp-text-leise); }

/* -- 3.12 Dialog ----------------------------------------------------------------
   <div class="fp-dialog-schleier"><div class="fp-dialog" role="dialog" aria-modal="true" aria-labelledby="fp-dialog-titel">
     <div class="fp-dialog-kopf"><span class="fp-dialog-icon fp-dialog-icon--info"><svg aria-hidden="true">Glocke</svg></span>
       <h2 class="fp-dialog-titel" id="fp-dialog-titel">Bald verfügbar</h2></div>
     <p class="fp-dialog-text">…</p>
     <div class="fp-dialog-fuss"><button class="fp-btn fp-btn--primaer">Verstanden</button></div>
   </div></div> ------------------------------------------------------------- */
.fp-dialog-schleier { position: fixed; inset: 0; background: var(--fp-schleier); display: flex; align-items: center; justify-content: center; padding: var(--fp-s-6); z-index: 50; }
.fp-dialog-schleier[hidden] { display: none; } /* [hidden] hat dieselbe Basis-Spezifität wie die Klasse und muss hier explizit gewinnen, sonst bleibt der Dialog trotz hidden-Attribut sichtbar */
.fp-dialog { width: 520px; max-width: 100%; background: var(--fp-flaeche); border-radius: var(--fp-r-12); padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--fp-schatten-dialog); }
.fp-dialog-kopf { display: flex; align-items: center; gap: var(--fp-s-3); }
.fp-dialog-icon { width: 40px; height: 40px; border-radius: var(--fp-r-10); display: flex; align-items: center; justify-content: center; flex: none; }
.fp-dialog-icon svg { width: 20px; height: 20px; }
.fp-dialog-icon--info { background: var(--fp-info-flaeche); color: var(--fp-blau); }
.fp-dialog-icon--gruen { background: var(--fp-gruen-flaeche); color: var(--fp-gruen); }
.fp-dialog-titel { font-size: var(--fp-fs-21); font-weight: 700; margin: 0; }
.fp-dialog-text { font-size: var(--fp-fs-16); line-height: 1.6; color: var(--fp-text-2); margin: 0; }
.fp-dialog-fuss { display: flex; justify-content: flex-end; margin-top: 4px; }

/* -- 3.13 Fußzeile (4 Spalten) ---------------------------------------------------
   <footer class="fp-fuss"><div class="fp-container fp-fuss-grid">
     <div><div class="fp-fuss-marke">Förder<strong>PLUS</strong></div><p class="fp-fuss-claim">…</p></div>
     <div class="fp-fuss-spalte"><span class="fp-fuss-spaltentitel">Produkt</span><a href="…">…</a></div> … </div>
     <div class="fp-container fp-fuss-unterzeile">Datenstand … · Maßgeblich sind …</div></footer> ------------------ */
.fp-fuss { background: var(--fp-flaeche); border-top: 1px solid var(--fp-linie); padding: 40px 0 26px; color: var(--fp-text-2); }
.fp-fuss-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--fp-s-10); }
.fp-fuss-marke { font-size: var(--fp-fs-18); font-weight: 500; color: var(--fp-text); }
.fp-fuss-marke strong { font-weight: 700; }
.fp-fuss-claim { font-size: var(--fp-fs-14-5); line-height: 1.6; margin: 8px 0 0; max-width: 300px; }
.fp-fuss-spalte { display: flex; flex-direction: column; gap: 8px; font-size: var(--fp-fs-14-5); }
.fp-fuss-spaltentitel { color: var(--fp-text); font-weight: 600; }
.fp-fuss-spalte a { color: var(--fp-text-2); }
.fp-fuss-spalte a:hover { color: var(--fp-navy); }
.fp-fuss-unterzeile { border-top: 1px solid var(--fp-neutral-flaeche); margin-top: 28px; padding-top: 16px; font-size: var(--fp-fs-13); color: var(--fp-text-3); }
@media (max-width: 900px) { .fp-fuss-grid { grid-template-columns: 1fr 1fr; gap: var(--fp-s-6); } }
@media (max-width: 560px) { .fp-fuss-grid { grid-template-columns: 1fr; } }

/* -- 3.14 Dunkler Block (regionale Tiefe, Vertrauensbeleg) -----------------------
   <section class="fp-dunkel"><div class="fp-container fp-abschnitt fp-dunkel-grid">
     <div><h2 class="fp-h2">…</h2><p class="fp-dunkel-text">…</p></div>
     <div class="fp-dunkel-kacheln"><div class="fp-dunkel-kachel">
       <div class="fp-dunkel-kachel-titel"><svg aria-hidden="true">Pin</svg>Erzgebirgskreis</div>
       <div class="fp-dunkel-kachel-text">…</div></div></div>
   </div></section> ----------------------------------------------------------- */
.fp-dunkel { background: var(--fp-navy); color: var(--fp-flaeche); }
.fp-dunkel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: var(--fp-s-14); align-items: center; }
.fp-dunkel-text { color: var(--fp-dunkel-text); }
.fp-dunkel-nebentext { color: var(--fp-dunkel-text-2); font-size: var(--fp-fs-14-5); display: flex; align-items: center; gap: 10px; }
.fp-dunkel-nebentext svg { width: 16px; height: 16px; color: var(--fp-dunkel-akzent); flex: none; }
.fp-dunkel-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fp-s-3); }
.fp-dunkel-kachel { background: var(--fp-dunkel-flaeche); border: 1px solid var(--fp-dunkel-rand); border-radius: var(--fp-r-10); padding: 18px 20px; }
.fp-dunkel-kachel-titel { display: flex; align-items: center; gap: 7px; font-size: var(--fp-fs-16); font-weight: 600; color: var(--fp-flaeche); }
.fp-dunkel-kachel-titel svg { width: 14px; height: 14px; color: var(--fp-dunkel-akzent); flex: none; }
.fp-dunkel-kachel-text { font-size: var(--fp-fs-14); line-height: 1.5; color: var(--fp-dunkel-text); margin-top: 6px; }
@media (max-width: 1200px) { .fp-dunkel-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fp-dunkel-kacheln { grid-template-columns: 1fr; } }

/* -- 3.15 Abschnitt, Überzeile, Überschriften -------------------------------
   <section class="fp-abschnitt"><span class="fp-ueberzeile fp-ueberzeile--gruen">Text</span>
     <h2 class="fp-h2">Titel</h2><p class="fp-untertitel">…</p></section> ---- */
.fp-abschnitt { padding: var(--fp-s-19) 0; }
@media (max-width: 900px) { .fp-abschnitt { padding: var(--fp-s-12) 0; } }
@media (max-width: 560px) { .fp-abschnitt { padding: var(--fp-s-9) 0; } }

.fp-ueberzeile { display: inline-block; font-size: var(--fp-fs-13); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.fp-ueberzeile--gruen { color: var(--fp-gruen-text); } /* CR-140: 13px-Text braucht die Textvariante, --fp-gruen ist reine Flaechenfarbe */
.fp-ueberzeile--sand { color: var(--fp-sand); }

.fp-h1 { font-size: var(--fp-fs-56); line-height: 1.05; font-weight: 700; letter-spacing: -1.6px; margin: 0; }
@media (max-width: 900px) { .fp-h1 { font-size: 40px; } }
@media (max-width: 560px) { .fp-h1 { font-size: 32px; } }

/* fp-h2: drei im Design genutzte Größen – Basisklasse 34 px, Modifikatoren für
   die kleineren Varianten (32/30 px). */
.fp-h2 { font-size: var(--fp-fs-34); font-weight: 700; letter-spacing: -0.8px; margin: 0; }
.fp-h2--m { font-size: var(--fp-fs-32); letter-spacing: -0.7px; }
.fp-h2--s { font-size: var(--fp-fs-30); letter-spacing: -0.6px; }
@media (max-width: 900px) { .fp-h2 { font-size: 28px; } }
@media (max-width: 560px) { .fp-h2 { font-size: 24px; } }

.fp-untertitel { font-size: var(--fp-fs-19); line-height: 1.55; color: var(--fp-text-2); margin: 0; }

/* -- 3.16 Plus-Trenner und Bausteinreihe ("Das PLUS in FörderPLUS") ---------
   <div class="fp-bausteine">
     <div class="fp-baustein"><svg aria-hidden="true">…</svg><div class="fp-baustein-titel">Finden</div>
       <div class="fp-baustein-text">…</div></div>
     <div class="fp-plus-trenner"><svg aria-hidden="true">+</svg></div>
     <div class="fp-baustein">…</div> … 4 Bausteine, 3 Trenner dazwischen … </div> */
.fp-plus-trenner { width: 34px; display: flex; align-items: center; justify-content: center; background: var(--fp-bg); color: var(--fp-trenner); flex: none; }
.fp-plus-trenner svg { width: 16px; height: 16px; }

.fp-bausteine { display: flex; align-items: stretch; flex-wrap: wrap; }
.fp-baustein { flex: 1 1 200px; background: var(--fp-flaeche); border: 1px solid var(--fp-linie); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fp-baustein:first-child { border-radius: var(--fp-r-10) 0 0 var(--fp-r-10); }
.fp-baustein:last-child { border-radius: 0 var(--fp-r-10) var(--fp-r-10) 0; }
.fp-baustein svg { width: 22px; height: 22px; }
.fp-baustein-titel { font-size: var(--fp-fs-21); font-weight: 700; letter-spacing: -0.3px; }
.fp-baustein-text { font-size: var(--fp-fs-15-5); line-height: 1.6; color: var(--fp-text-2); }
@media (max-width: 900px) {
  /* 2×2, Trenner ausgeblendet – bei umbrechendem Flex-Layout lassen sich die
     Eckenradien nicht mehr sinnvoll pro Kachel zuordnen, daher hier eckig. */
  .fp-plus-trenner { display: none; }
  .fp-baustein { flex: 1 1 calc(50% - 1px); border-radius: 0 !important; }
}
@media (max-width: 560px) { .fp-baustein { flex: 1 1 100%; } }

/* -- 3.17 Änderungschronik --------------------------------------------------
   <div class="fp-chronik"><div class="fp-chronik-zeile fp-chronik-zeile--info">
     <div class="fp-chronik-datum fp-mono">01.08.2026</div>
     <div class="fp-chronik-inhalt"><div class="fp-chronik-kopf">
         <span class="fp-chronik-typ">Neuer Förderaufruf</span><span class="fp-chronik-titel">Beispiel</span></div>
       <div class="fp-chronik-text">…</div><a class="fp-chronik-link" href="…">Änderung ansehen</a></div>
   </div></div> --------------------------------------------------------------- */
.fp-chronik { border: 1px solid var(--fp-linie); border-radius: var(--fp-r-10); overflow: hidden; }
.fp-chronik-zeile { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid var(--fp-neutral-flaeche); }
.fp-chronik-zeile:last-child { border-bottom: none; }
.fp-chronik-datum { font-size: var(--fp-fs-12-5); color: var(--fp-text-3); padding: 16px 0 16px 18px; }
.fp-chronik-inhalt { padding: 16px 18px 16px 8px; border-left: 3px solid var(--fp-rand-kraeftig); }
.fp-chronik-zeile--info .fp-chronik-inhalt { border-left-color: var(--fp-blau); }
.fp-chronik-zeile--amber .fp-chronik-inhalt { border-left-color: var(--fp-amber); }
.fp-chronik-zeile--neutral .fp-chronik-inhalt { border-left-color: var(--fp-rand-kraeftig); }
.fp-chronik-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-chronik-typ { font-size: var(--fp-fs-13); font-weight: 600; border-radius: var(--fp-r-4); padding: 3px 8px; }
.fp-chronik-zeile--info .fp-chronik-typ { color: var(--fp-info-text); background: var(--fp-info-flaeche); }
.fp-chronik-zeile--amber .fp-chronik-typ { color: var(--fp-amber-text); background: var(--fp-amber-flaeche); }
.fp-chronik-zeile--neutral .fp-chronik-typ { color: var(--fp-text-2); background: var(--fp-neutral-flaeche); }
.fp-chronik-titel { font-size: var(--fp-fs-17); font-weight: 700; }
.fp-chronik-text { font-size: var(--fp-fs-15); line-height: 1.55; color: var(--fp-text-2); margin-top: 6px; }
.fp-chronik-link { display: inline-block; font-size: var(--fp-fs-14-5); font-weight: 600; margin-top: 8px; }
@media (max-width: 560px) {
  .fp-chronik-zeile { grid-template-columns: 1fr; }
  .fp-chronik-datum { padding: 12px 18px 0; }
  .fp-chronik-inhalt { padding: 8px 18px 14px; }
}

/* -- 3.18 Hero-Kasten (Eingabefeld-Vorschau im Hero) -------------------------
   <div class="fp-hero-kasten"><div class="fp-hero-kasten-feld">
       <span class="fp-hero-kasten-beispiel">Zum Beispiel: …</span>
       <div class="fp-hero-kasten-fuss"><span class="fp-hero-kasten-fuss-text">Alltagssprache genügt…</span>
         <span class="fp-mono fp-hero-kasten-zaehler">0 / 1500</span></div></div>
     <div class="fp-hero-kasten-aktionen"> … fp-btn … </div>
     <div class="fp-hero-kasten-beleg"> … <span class="fp-hero-kasten-beleg-zeile"><svg aria-hidden="true">✓</svg>Text</span> … </div>
   </div> ----------------------------------------------------------------- */
.fp-hero-kasten { background: var(--fp-kasten); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-12); padding: 18px; display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.fp-hero-kasten-feld { background: var(--fp-flaeche); border: 1px solid var(--fp-rand-kraeftig); border-radius: var(--fp-r-10); padding: 16px 18px; min-height: 128px; display: flex; flex-direction: column; gap: 10px; }
.fp-hero-kasten-beispiel { font-size: var(--fp-fs-17); line-height: 1.5; color: var(--fp-text-beispiel); flex: 1; }
.fp-hero-kasten-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-hero-kasten-fuss-text { font-size: var(--fp-fs-13-5); color: var(--fp-text-3); }
.fp-hero-kasten-zaehler { font-size: var(--fp-fs-12); color: var(--fp-text-leise); }
.fp-hero-kasten-aktionen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fp-hero-kasten-beleg { display: flex; flex-wrap: wrap; gap: 10px 22px; border-top: 1px solid var(--fp-linie-innen); padding-top: 14px; }
.fp-hero-kasten-beleg-zeile { display: flex; align-items: center; gap: 8px; font-size: var(--fp-fs-14-5); color: var(--fp-text-liste); }
.fp-hero-kasten-beleg-zeile svg { width: 15px; height: 15px; color: var(--fp-gruen); flex: none; }

/* -- 3.19 Ebenen-Kasten (Zahlenübersicht EU/Bund/Land/Region) ----------------
   <div class="fp-ebenen-kasten"><span class="fp-ebenen-titel">Vier Ebenen in einer Suche</span>
     <div class="fp-ebenen"><div class="fp-ebenen-zeile"><span>EU</span><span class="fp-mono" data-meta="ebenen.eu">–</span></div>
       … <div class="fp-ebenen-zeile fp-ebenen-zeile--hervorgehoben"><span>Landkreise und Städte</span>
         <span class="fp-mono" data-meta="ebenen.region">–</span></div></div>
     <span class="fp-ebenen-fuss">Pilotregion Sachsen · Datenstand <span data-meta="datenstand">–</span></span></div> */
.fp-ebenen-kasten { background: var(--fp-kasten); border: 1px solid var(--fp-linie); border-radius: var(--fp-r-10); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.fp-ebenen-titel { font-size: var(--fp-fs-14-5); font-weight: 700; color: var(--fp-navy); }
.fp-ebenen { display: flex; flex-direction: column; gap: 7px; font-size: var(--fp-fs-14-5); color: var(--fp-text-2); }
.fp-ebenen-zeile { display: flex; justify-content: space-between; gap: 12px; }
.fp-ebenen-zeile span:last-child { color: var(--fp-text); }
.fp-ebenen-zeile--hervorgehoben { font-weight: 600; color: var(--fp-gruen-text); }
.fp-ebenen-zeile--hervorgehoben span:last-child { color: var(--fp-gruen-text); }
.fp-ebenen-fuss { font-size: var(--fp-fs-13); color: var(--fp-text-3); border-top: 1px solid var(--fp-linie-innen); padding-top: 9px; }

/* ==========================================================================
   3z. KOPFBEREICH - EIN Kopf fuer Startseite, Fachsuche und Programmuebersicht
   (Design Runde 2 / Variante 1B, Weisung Eric 27.08.2026).

   Markup-Skizze, auf allen drei Seiten gleich:
     header.topbar.fp-kopf.su-kopf
       div.su-kopf-leiste                  <- dunkle Hauptzeile, klebt
         div.su-breite.su-kopf-row
           .su-marke         Zeichen + Wortmarke + Claim
           .su-nav-zone      nav.tabs.fp-nav  +  .su-menu-panel
           .su-kopfsuche     Suchfeld (auf der Fachsuche das echte #suche)
           .su-kopf-aktionen Anmelden
       div.su-langform                     <- schmale Erklaerzeile, scrollt weg

   WARUM die Aufklapp-Liste AUSSERHALB von <nav> liegt: Die Smoke-Pruefung
   cr118:menue_beschriftungen_gleich vergleicht die Menuetexte der drei Seiten
   ueber drei verschiedene Selektoren (nav.tabs > .tab, .topbar nav a.tab,
   .st-nav a). Zwei davon greifen auf beliebiger Tiefe, einer nur auf direkte
   Kinder. Laege die Liste innerhalb von <nav>, zaehlten zwei Selektoren ihre
   Eintraege mit und der dritte nicht - die Pruefung waere ohne Sachgrund rot.
   ========================================================================== */

/* Die Schale des Kopfes. `.su-breite` selbst ist in suche.css definiert - die
   Startseite laedt diese Datei aber nicht, und ohne eigene Regel liefe ihr Kopf
   randlos ueber die volle Fensterbreite (so gesehen am 27.08.2026). Deshalb
   steht die Schale HIER, wo alle drei Seiten sie bekommen. Die Breite ist ein
   Stellwert, weil die Seiten unterschiedlich breite Inhalte haben: Fachsuche
   und Programmuebersicht 1400 px, Startseite 1200 px. Der Kopf soll mit dem
   Inhalt darunter fluchten, nicht ueber ihn hinausragen. */
.su-kopf .su-breite { width: 100%; max-width: var(--fp-kopf-breite, 1400px);
  margin: 0 auto; padding: 0 var(--fp-s-5); }
.su-kopf { position: sticky; top: 0; z-index: 100; background: var(--fp-navy); }
.su-kopf-leiste { background: var(--fp-navy); }
.su-kopf .su-kopf-row { display: flex; align-items: center; gap: var(--fp-s-4);
  min-height: 76px; padding: 0; }

/* --- Marke: Zeichen, Wortmarke, Claim ---------------------------------- */
.su-kopf .su-marke { margin: 0; flex: none; display: flex; align-items: center; }
.su-kopf .su-marke .logo-btn { display: flex; align-items: center; gap: 11px; }
.su-kopf .su-marke .logo-btn:hover { text-decoration: none; }
.su-kopf .su-marke-zeichen { display: flex; flex: none; }
.su-kopf .su-marke-text { display: flex; flex-direction: column; gap: 2px; }
.su-kopf .fp-marke-wort { display: flex; align-items: baseline; font-size: var(--fp-fs-21);
  font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fp-flaeche); }
.su-kopf .fp-marke-wort strong { color: var(--fp-gruen); font-weight: 700; }
.su-kopf .su-marke .logo-btn:hover .fp-marke-wort { color: var(--fp-flaeche); }
.su-kopf .su-claim { font-size: var(--fp-fs-12-5); font-weight: 500; line-height: 1;
  color: var(--fp-dunkel-text-2); white-space: nowrap; }
.su-kopf .su-marke .logo-btn:focus-visible { outline: 3px solid var(--fp-gruen);
  outline-offset: 3px; border-radius: var(--fp-r-8); }

/* --- Navigation --------------------------------------------------------- */
/* flex: none - die Zone darf NICHT unter ihre Inhaltsbreite schrumpfen. Mit
   min-width:0 tat sie das, und weil das Menue nicht umbricht (nowrap), lief sein
   Text sichtbar UNTER das Suchfeld, ohne dass die Box breiter wurde. Das
   Suchfeld daneben schrumpft stattdessen (flex-shrink 1, min-width 0). */
.su-nav-zone { position: relative; display: flex; align-items: center; flex: none; }
.su-kopf nav.tabs { display: flex; align-items: center; gap: 2px; border: 0;
  white-space: nowrap; min-width: 0; overflow: visible; }
/* Der .tab-Reset der Fachsuche (Unterstrich-Optik) wird hier bewusst
   ueberschrieben - gleiche Elemente, andere Gestalt, keine zweite Klasse. */
.su-kopf nav.tabs .tab, .su-kopf .su-menu-trigger {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border: 0; border-bottom: 0; border-radius: var(--fp-r-6); background: transparent;
  font-family: inherit; font-size: var(--fp-fs-14-5); font-weight: 500;
  color: var(--fp-dunkel-text); cursor: pointer; }
.su-kopf nav.tabs .tab:hover, .su-kopf .su-menu-trigger:hover {
  background: var(--fp-dunkel-flaeche); color: var(--fp-flaeche); border-bottom-color: transparent; }
.su-kopf nav.tabs .tab.fp-nav-link--aktiv,
.su-kopf nav.tabs .tab.fp-nav-link--aktiv:hover,
.su-kopf nav.tabs .tab[aria-current="page"] {
  color: var(--fp-flaeche); font-weight: 600; background: var(--fp-dunkel-rand);
  border-bottom-color: transparent; }
.su-kopf nav.tabs .tab:focus-visible, .su-kopf .su-menu-trigger:focus-visible {
  outline: 3px solid var(--fp-gruen); outline-offset: 2px; }
.su-kopf .su-nav-text { display: inline; }

/* Merker am Menuepunkt: NEU-Fahne und Zaehler */
.su-nav-fahne { font-size: var(--fp-fs-11-5); font-weight: 700; letter-spacing: .05em;
  color: var(--fp-navy); background: var(--fp-gruen); padding: 2px 5px;
  border-radius: var(--fp-r-4); line-height: 1.35; }
.su-nav-zaehler { font-size: var(--fp-fs-11-5); font-weight: 700; color: var(--fp-navy);
  background: var(--fp-amber); padding: 1px 6px; border-radius: var(--fp-r-999);
  line-height: 1.45; min-width: 20px; text-align: center; }
.su-nav-zaehler[hidden] { display: none; }

/* --- Aufklapp-Liste Datenbasis ----------------------------------------- */
.su-menu-trigger .su-menu-pfeil { display: inline-flex; }
.su-menu-trigger[aria-expanded="true"] { background: var(--fp-dunkel-flaeche); color: var(--fp-flaeche); }
.su-menu-trigger[aria-expanded="true"] .su-menu-pfeil { transform: rotate(180deg); }
.su-menu-panel { position: absolute; z-index: 20; left: 0; top: calc(100% + 14px);
  width: 320px; background: var(--fp-flaeche); border: 1px solid var(--fp-warum-rand);
  border-radius: var(--fp-r-10); box-shadow: var(--fp-schatten-dialog);
  padding: var(--fp-s-2); white-space: normal; }
.su-menu-panel[hidden] { display: none; }
.su-menu-panel a.tab { display: block; padding: 11px 12px; border: 0; border-radius: var(--fp-r-8);
  background: transparent; text-align: left; width: 100%; }
.su-menu-panel a.tab:hover { background: var(--fp-bg); text-decoration: none; }
.su-menu-panel a.tab:focus-visible { outline: 3px solid var(--fp-blau); outline-offset: -2px; }
.su-menu-titel { display: block; font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text); }
.su-menu-sub { display: block; margin-top: 2px; font-size: var(--fp-fs-13-5); color: var(--fp-text-leise); }
.su-menu-fuss { margin: var(--fp-s-1) var(--fp-s-1) 2px; padding-top: var(--fp-s-2);
  border-top: 1px solid var(--fp-nachgeordnet-rand); display: flex; align-items: center;
  gap: var(--fp-s-2); font-size: var(--fp-fs-13); color: var(--fp-text-leise); }
.su-menu-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--fp-gruen);
  display: block; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .su-menu-punkt { animation: suPuls 2.4s ease-in-out infinite; }
}
@keyframes suPuls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* --- Suchfeld im Kopf --------------------------------------------------- */
.su-kopfsuche { flex: 0 1 320px; min-width: 0; max-width: 340px; margin: 0 0 0 auto; display: flex;
  align-items: center; gap: 9px; background: var(--fp-dunkel-flaeche);
  border: 1px solid var(--fp-dunkel-rand); border-radius: var(--fp-r-8); height: 38px;
  padding: 0 var(--fp-s-3); }
.su-kopfsuche svg { width: 15px; height: 15px; flex: none; color: var(--fp-dunkel-text-2); }
.su-kopfsuche input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: var(--fp-fs-14); color: var(--fp-flaeche); }
.su-kopfsuche input::placeholder { color: var(--fp-dunkel-text-2); opacity: 1; }
.su-kopfsuche:focus-within { outline: 3px solid var(--fp-gruen); outline-offset: 2px; }

/* --- Aktionen rechts ---------------------------------------------------- */
.su-kopf .su-kopf-aktionen { display: flex; align-items: center; gap: var(--fp-s-3);
  flex: none; margin-left: 0; }
.su-kopf-anmelden { display: inline-flex; align-items: center; padding: 9px 17px;
  border: 0; border-radius: var(--fp-r-8); background: var(--fp-gruen);
  color: var(--fp-gruen-tief); font-family: inherit; font-size: var(--fp-fs-14);
  font-weight: 700; white-space: nowrap; cursor: pointer; }
.su-kopf-anmelden:hover { background: var(--fp-gruen-hover); color: var(--fp-gruen-tief);
  text-decoration: none; }
.su-kopf-anmelden:focus-visible { outline: 3px solid var(--fp-flaeche); outline-offset: 2px; }

/* --- Schmale Fenster ----------------------------------------------------
   Reihenfolge des Weglassens, von unwichtig nach wichtig: zuerst der rechte
   Zusatz der Langform-Zeile, dann das Suchfeld (die Suche ist ueber den ersten
   Menuepunkt einen Klick entfernt), dann der Claim unter der Wortmarke. Zuletzt
   bricht die Zeile um und das Menue bekommt eine eigene Zeile - Marke, Menue und
   Anmelden bleiben in JEDER Breite erreichbar. */
@media (max-width: 1100px) {
  .su-kopfsuche { display: none; }
  .su-langform-rechts { display: none; }
}
@media (max-width: 900px) {
  .su-kopf .su-claim { display: none; }
  .su-kopf .su-kopf-row { flex-wrap: wrap; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .su-nav-zone { order: 3; flex: 1 1 100%; }
  .su-kopf nav.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .su-kopf .su-kopf-aktionen { margin-left: auto; }
  .su-menu-panel { width: min(320px, calc(100vw - 40px)); }
}
@media (max-width: 560px) {
  .su-langform-row { flex-wrap: wrap; row-gap: 4px; }
  .su-langform-strich { display: none; }
}

/* --- Langform-Zeile ----------------------------------------------------- */
.su-langform { background: var(--fp-blau); border-top: 1px solid var(--fp-dunkel-rand); }
.su-langform-row { display: flex; align-items: center; gap: var(--fp-s-4);
  padding: var(--fp-s-2) 0; font-size: var(--fp-fs-12-5); color: var(--fp-dunkel-text-2); }
.su-langform-row strong { color: var(--fp-flaeche); font-weight: 600; }
.su-langform-strich { width: 1px; height: 13px; background: var(--fp-dunkel-rand);
  display: block; flex: none; }
.su-langform-rechts { margin-left: auto; }
/* .su-langform selbst hat seit CR-164 (Paket 1+2) keine Verwendung mehr -
   keine der drei Kopfzeilen führt die Untertitel-Leiste noch (Untertitel und
   Haftungshinweis stehen jetzt im jeweiligen Fuß bzw. sind dort bereits
   vorhanden, s. CR-164-Umsetzungsabschnitt „ohne Dopplung"). Die Regeln oben
   bleiben stehen, um die Änderungsfläche dieses Pakets nicht zusätzlich auf
   Aufräumarbeit auszuweiten - toter, aber harmloser Restzustand (analog zur
   Begründung in web/foerderfinder.html, Paket 1). */

/* --- Datenstand-Badge im Kopf --------------------------------------------
   CR-164 Teil `typleiste`: Duplikat der Regel aus web/foerderfinder.html
   (dort im eigenen <style>, lokal zu dieser einen Seite) - hier gebraucht,
   weil web/index.html jetzt ebenfalls ein `.datenstand-badge` in der
   Typleiste zeigt und weder design/suche.css noch ein eigenes <style> lädt.
   web/programmuebersicht.html nutzt weiterhin sein eigenes `.pu-datenstand-badge`
   (andere Kennzahl, andere Herkunft) und braucht diese Regel nicht. */
.datenstand-badge { font-size: var(--fp-fs-12-5); color: var(--fp-text-2); background: var(--fp-neutral-flaeche);
  border: 1px solid var(--fp-linie); border-radius: var(--fp-r-999); padding: 5px 12px; white-space: nowrap; }

/* --- CR-164 Teil `typleiste`: schmale zweite Leiste unter dem Hauptmenü ---
   Duplikat der Regeln aus web/foerderfinder.html (Paket 1, dort im eigenen
   <style>) - hier zusätzlich gebraucht, weil web/index.html und
   web/programmuebersicht.html dieselbe Leiste als reinen Linkblock zeigen und
   design/suche.css NICHT laden (nur die Fachsuche tut das). Die Fachsuche
   lädt diese Datei NACH ihrem eigenen <style>, deshalb bleibt ihre lokale
   Fassung dort unverändert wirksam (identische Regeln, keine Kollision). */
.su-typleiste { background: var(--fp-kasten); border-bottom: 1px solid var(--fp-linie); }
.su-typleiste-row { display: flex; align-items: center; gap: var(--fp-s-3); flex-wrap: wrap; padding: 10px 0; }
.su-typleiste-frage { font-size: var(--fp-fs-14-5); font-weight: 600; color: var(--fp-text-2); flex: none; }
.su-typleiste-personas { display: flex; flex-wrap: wrap; gap: 6px; }
.su-typ-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--fp-rand-kraeftig);
  background: var(--fp-flaeche); color: var(--fp-text); border-radius: var(--fp-r-999); padding: 6px 13px;
  font-family: inherit; font-size: var(--fp-fs-13-5); font-weight: 600; cursor: pointer; white-space: nowrap;
  text-decoration: none; }
.su-typ-btn:hover { background: var(--fp-neutral-flaeche); text-decoration: none; }
.su-typ-btn[aria-pressed="true"] { background: var(--fp-info-flaeche); color: var(--fp-info-text); border-color: var(--fp-info-rand); }
.su-typleiste-trenner { flex: 1 1 auto; }
.su-typleiste-region { height: 36px; border-radius: var(--fp-r-8); }
.su-typleiste .datenstand-badge, .su-typleiste .pu-datenstand-badge { flex: none; }
@media (max-width: 900px) {
  .su-typleiste-row { gap: var(--fp-s-2); }
  .su-typleiste-trenner { flex-basis: 100%; height: 0; }
}
/* Korrektur Typleiste mobil (03.09.2026, CR-164): Bei 375px ragte die
   Datenstand-Plakette (nowrap, flex:none) rechts über den Viewport hinaus -
   web_smoke.py cr164:mobil_typleiste_passt schlug rot an (Befund:
   .datenstand-badge rechts=428.5px bzw. .pu-datenstand-badge rechts=586px bei
   innerWidth=375). Spezifität (0,2,0) schlägt hier absichtlich sowohl die
   Basisregel oben als auch das lokale, unconditionale
   `.pu-datenstand-badge{white-space:nowrap}` in web/programmuebersicht.html
   (Spezifität 0,1,0) - für web/foerderfinder.html gilt zusätzlich die
   identische Ergänzung unten in dessen eigenem <style>, weil dessen später
   geladene, unconditionale `flex: none`-Regel bei gleicher Spezifität sonst
   gewinnen würde (siehe Kommentar dort). */
@media (max-width: 767px) {
  .su-typleiste .datenstand-badge, .su-typleiste .pu-datenstand-badge {
    flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  }
}

/* --- CR-164 Teil `mobil`: Hauptmenü als Aufklappleiste unter 768px --------
   Duplikat der Regeln aus web/foerderfinder.html (Paket 1, dort im eigenen
   <style>) - hier zusätzlich gebraucht, weil web/index.html und
   web/programmuebersicht.html denselben Aufklapp-Knopf/dasselbe Verhalten
   zeigen. Die Spezifität `.su-kopf nav.tabs` ist ABSICHTLICH gleich der
   Regel weiter oben (Zeile ~608) - nur bei gleicher Spezifität gewinnt die
   spaeter geladene Regel (s. Fund CR-164/Paket 1, Umsetzungsabschnitt). */
.su-menu-toggle-mobil { display: none; align-items: center; gap: 6px; background: var(--fp-flaeche);
  border: 1px solid var(--fp-rand-kraeftig); border-radius: var(--fp-r-8); padding: 0 12px; height: 40px;
  font-family: inherit; font-size: var(--fp-fs-14-5); font-weight: 600; color: var(--fp-navy); cursor: pointer; }
.su-menu-toggle-mobil svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 767px) {
  .su-menu-toggle-mobil { display: inline-flex; }
  .su-kopf nav.tabs { display: none; order: 4; flex: 1 1 100%; overflow: visible;
    flex-direction: column; align-items: stretch; gap: 0; margin-top: 6px;
    border-top: 1px solid var(--fp-neutral-flaeche); padding-top: 4px; }
  .su-kopf nav.tabs.offen { display: flex; }
  .su-kopf nav.tabs .tab.fp-nav-link { width: 100%; padding: 12px 4px;
    border-bottom: 1px solid var(--fp-neutral-flaeche); }
}

/* ==========================================================================
   4. RESPONSIVE GRUNDREGELN
   ========================================================================== */

/* ≤ 1200 px: zweispaltige Layouts (Hero, dunkler Block) → rechte Spalte
   verliert ihre feste Breite und rutscht unter die linke. Die dunkle Sektion
   regelt das bereits in 3.14; Hero-Grids der Seiten-CSS (Paket A2) nutzen
   dasselbe Muster über diese generische Klasse: */
@media (max-width: 1200px) { .fp-hero-grid { grid-template-columns: 1fr; } }

/* ≤ 900 px: Kopf umbricht – Marke bleibt oben, Navigation geht in eine
   zweite Zeile und darf dort horizontal scrollen (NICHT die ganze Seite). */
@media (max-width: 900px) {
  .fp-kopf-row { flex-wrap: wrap; row-gap: var(--fp-s-2); }
  .fp-nav { order: 3; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .fp-kopf-aktionen { margin-left: auto; }
  .fp-dunkel-grid, .fp-fuss-grid { row-gap: var(--fp-s-8); }
}

/* ≤ 560 px: Buttons volle Breite, kleinere Überschriften (fp-h1/fp-h2 bereits
   oben je Komponente geregelt). */
@media (max-width: 560px) {
  .fp-btn:not(.fp-btn--leise):not(.fp-btn--icon) { width: 100%; }
  .fp-hero-kasten-aktionen .fp-btn { width: 100%; }
  .fp-dialog { padding: 22px 20px; }
}

/* Die Seite darf nie horizontal scrollen – letzte Sicherung. */
html, body { max-width: 100%; overflow-x: hidden; }