/* ==========================================================================
   suche.css – FörderPLUS-Kleid der Fachsuche (CR-121, Paket C)
   ==========================================================================
   Ergänzt `foerderplus.css` um genau die Bausteine, die NUR die Anwendung
   `web/foerderfinder.html` braucht: Kopfleiste mit Suchzeile, Filterspalte,
   Ergebniskopf, Programmkarte in der Trefferliste, Anzeigegruppen, Dialog.

   Grundsätze dieser Datei:
   · KEINE Fachlogik. Filterwirkung, Trefferzahlen, Klartextbegriffe und die
     Frische-Ampel bleiben unberührt – hier steht ausschließlich Darstellung.
   · KEINE Hex-Literale, jede Farbe über `var(--fp-…)` (geprüft von
     scripts/design_pruefung.py).
   · Seitenspezifische Klassen tragen das Präfix `su-`; bestehende App-Klassen
     (`karte`, `wahlzeile`, `badge`, `tab`, …) bleiben erhalten und werden nur
     ergänzt – der Smoke-Test und das Seiten-JS greifen darauf zu.

   Ladereihenfolge: fonts.css → foerderplus.css → suche.css → der bestehende
   <style>-Block der Anwendung. Regeln, die eine ALTE Regel aus diesem Block
   überschreiben müssen, brauchen deshalb höhere Spezifität (zwei Klassen).
   ========================================================================== */

/* ==========================================================================
   1. SEITENGERÜST
   ========================================================================== */
/* Die Anwendung nutzt die volle Arbeitsbreite (1400 px), nicht den 1360-px-
   Container der Startseite – die Filterspalte braucht den Platz. */
.su-breite { max-width: 1400px; margin: 0 auto; padding: 0 var(--fp-s-5); }
@media (max-width: 900px) { .su-breite { padding: 0 var(--fp-s-4); } }

/* ==========================================================================
   2. KOPF: Marke · Navigation · Aktionen
   ========================================================================== */
.su-kopf-row { display: flex; align-items: center; gap: var(--fp-s-5); padding: 14px 0; }

.su-marke { margin: 0; font-size: var(--fp-fs-19); font-weight: 500; flex: none; display: flex; align-items: center; }
.su-marke .logo-btn { display: flex; align-items: center; gap: 10px; }
.su-marke .logo-btn:hover { text-decoration: none; }
.su-marke .logo-btn:hover .fp-marke-wort { color: var(--fp-blau); }
.su-marke .logo-btn:focus-visible { outline: 3px solid var(--fp-blau); outline-offset: 3px; border-radius: var(--fp-r-8); }

/* Navigationspunkte: die vorhandenen .tab-Elemente tragen zusätzlich
   .fp-nav-link. Zwei Klassen, damit die Regeln den .tab-Reset des
   Anwendungs-Styles (border: none) sicher überschreiben.
   Die Hauptnavigation ist wie im Design REIN TEXTLICH – Icons stehen nur in
   den Überschriften der Reiter-Inhalte, nicht in der Kopfzeile. */
.tab.fp-nav-link { display: inline-flex; align-items: center; padding: 6px 0;
  border-bottom: 2px solid transparent; color: var(--fp-text); white-space: nowrap; flex: none;
  font-size: var(--fp-fs-15); font-weight: 500; }
.tab.fp-nav-link:hover { border-bottom-color: var(--fp-rand-kraeftig); }
.tab.fp-nav-link.fp-nav-link--aktiv, .tab.fp-nav-link.fp-nav-link--aktiv:hover { border-bottom-color: var(--fp-blau); font-weight: 600; }
/* Das hidden-Attribut muss die display-Regel der Klasse schlagen können – der
   Browser-Grundstil `[hidden]{display:none}` verliert gegen eine Klassenregel.
   Seit Weisung Eric 22.08.2026 ist kein Navigationspunkt mehr dauerhaft
   ausgeblendet (auch der Cockpit-Punkt nicht mehr) – die Regel bleibt als
   generische Absicherung für einen künftigen, wirklich verborgenen Punkt. */
.tab.fp-nav-link[hidden] { display: none; }

/* Die Navigation steht zwischen Marke und Aktionen in DERSELBEN Zeile und
   nimmt den verbleibenden Platz ein. `min-width: 0` erlaubt ihr zu schrumpfen,
   `overflow-x: auto` lässt sie in sich scrollen, statt die Zeile zu sprengen. */
.su-kopf-row .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.su-kopf-aktionen { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.su-kopf-aktionen .fp-btn { min-height: 40px; font-size: var(--fp-fs-14-5); padding: 0 var(--fp-s-3); }
.su-kopf-aktionen .fp-btn svg { width: 17px; height: 17px; flex: none; }
.su-kopf-aktionen .fp-regionsknopf svg { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   3. SUCHSTREIFEN unter der Reiterleiste (CR-143, Teil `suchleiste`)
   ==========================================================================
   Der Streifen läuft über die volle Fensterbreite auf --fp-navy.

   ABWEICHUNG VOM ENTWURF, bewusst: Der Entwurf begrenzt den Streifeninhalt auf
   1280 px – dort ist 1280 px aber die Breite des GESAMTEN Seitenrasters, der
   Suchstreifen fluchtet also mit Kopfzeile und Inhalt. Die Fachsuche rechnet
   seit CR-121 mit 1400 px (`.su-breite`, VERTRAG-Seitengerüst; die
   Filterspalte braucht den Platz). 1280 px hier hieße: Suchfeld 60 px
   eingerückt gegenüber Marke, Navigation und Trefferliste – genau die Flucht,
   die der Entwurf herstellen will, wäre zerstört. Der Streifen übernimmt
   deshalb `.su-breite`; wer 1280 px will, setzt hier eine Zeile.

   WICHTIG: Hier steht ausschließlich Aussehen. #suche, #such-knopf und
   #filter-btn sind dieselben Elemente wie vor CR-143 – Suchlogik, Bindungen
   und Trefferzahlen bleiben unberührt. */
.su-suchstreifen { background: var(--fp-navy); padding: 22px 0 24px; }

/* Kein eigenes `padding` – die Zeile trägt zusätzlich `.su-breite` und muss
   deren Seitenabstand behalten, sonst fluchtet das Suchfeld nicht mit Marke,
   Navigation und Filterspalte. */
.su-suchzeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.su-suchfeld { flex: 1 1 420px; min-width: 0; margin: 0; }
.su-suchzeile .su-suchknopf { height: 54px; min-height: 54px; flex: none; }
.su-suchhinweis { max-width: 240px; }

/* Elementhöhe im Streifen einheitlich 54 px (Vorlage). */
.su-suchstreifen .fp-suchleiste-feld { height: 54px; border: 2px solid var(--fp-gruen);
  border-radius: var(--fp-r-9); background: var(--fp-flaeche); }
.su-suchstreifen .fp-suchleiste-feld svg { width: 19px; height: 19px; color: var(--fp-text-beispiel); }
.su-suchstreifen .fp-suchleiste-feld input { font-size: var(--fp-fs-16); }
.su-suchstreifen .fp-suchleiste-feld input::placeholder { color: var(--fp-text-beispiel); }
/* Der Fokusring gehört an den Kasten (wie in foerderplus.css begründet); auf
   dunklem Grund muss er hell sein, ein blauer Ring verschwände im Navy. */
.su-suchstreifen .fp-suchleiste-feld:focus-within { outline: 3px solid var(--fp-flaeche);
  outline-offset: 2px; border-color: var(--fp-gruen); }

.su-suchstreifen .filter-toggle { height: 54px; border-radius: var(--fp-r-9); }
.su-suchstreifen .su-streifen-region { height: 54px; min-width: 220px; border-radius: var(--fp-r-9);
  border: 1px solid var(--fp-rand-kraeftig); background: var(--fp-flaeche); padding: 0 16px; }
.su-suchstreifen .su-streifen-region:hover { background: var(--fp-neutral-flaeche); border-color: var(--fp-trenner); }
.su-suchstreifen .su-streifen-region svg { width: 18px; height: 18px; flex: none; color: var(--fp-gruen-text); }
.su-suchstreifen .fp-regionsknopf-titel { font-size: var(--fp-fs-15-5); color: var(--fp-text); }
.su-suchstreifen .fp-regionsknopf-sub { color: var(--fp-text-3); }

/* Suchknopf: grüne Fläche, Schrift in Navy (6,34:1) – Vorlage Abschnitt 1. */
.su-suchstreifen .fp-btn--primaer.su-suchknopf { background: var(--fp-gruen); color: var(--fp-navy);
  border-radius: var(--fp-r-9); padding: 0 32px; font-size: var(--fp-fs-16-5); font-weight: 700; }
.su-suchstreifen .fp-btn--primaer.su-suchknopf:hover { background: var(--fp-gruen-hover); color: var(--fp-navy); }
.su-suchstreifen .fp-btn--primaer.su-suchknopf:focus-visible { outline: 3px solid var(--fp-flaeche); outline-offset: 2px; }

/* Datenstands-Angabe auf dunklem Grund. */
.su-suchstreifen .datenstand-badge { background: var(--fp-dunkel-flaeche); border-color: var(--fp-dunkel-rand);
  color: var(--fp-dunkel-text); }

/* Hinweiszeile unter der Suchzeile (13,5 px, --fp-dunkel-text-2 = 7,62:1). */
.su-streifen-fuss { margin-top: 12px; }
.su-suchstreifen .su-suchhinweis { max-width: 100%; color: var(--fp-dunkel-text-2); font-size: var(--fp-fs-13-5); }

@media (max-width: 900px) {
  .su-suchstreifen { padding: 16px 0 18px; }
  .su-suchzeile .su-suchknopf { flex: none; }
  .su-suchstreifen .su-streifen-region { min-width: 0; flex: 1 1 200px; }
}

/* ==========================================================================
   4. FUSSZEILE
   ========================================================================== */
.su-fuss-link { background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font: inherit; font-size: var(--fp-fs-14-5); color: var(--fp-text-2); cursor: pointer; }
.su-fuss-link:hover { color: var(--fp-navy); text-decoration: underline; }
.fp-fuss-spalte .su-fuss-link { width: auto; }

/* ==========================================================================
   5. FILTERSPALTE
   ==========================================================================
   Die Zeilen selbst bleiben `.wahlzeile` (Anwendungs-CSS); hier steht nur die
   Kachel-Form der Einfachauswahl „Wer beantragt?". Zwei Klassen, damit die
   Regeln den späteren `.wahlzeile`-Block überschreiben. */
#sb-ziel .wahlliste { display: grid; gap: 6px; }
.wahlzeile.fp-filter-kachel { min-height: 46px; padding: 0 12px; margin: 0;
  border: 1px solid var(--fp-linie); border-radius: var(--fp-r-8); background: var(--fp-flaeche); }
.wahlzeile.fp-filter-kachel:hover { background: var(--fp-bg); }
.wahlzeile.fp-filter-kachel .wz-text { font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text); }
/* Ausgewählte Kachel: die Auswahl steht zusätzlich am Radiobutton und an der
   fetten Beschriftung – die Fläche ist nur eine zweite, keine alleinige Anzeige. */
.wahlzeile.fp-filter-kachel:has(input:checked) { background: var(--fp-info-flaeche); border-color: var(--fp-blau); }

/* Zähler rechts in der Kachel etwas kräftiger als in den Listenzeilen. */
.wahlzeile.fp-filter-kachel .wz-anz { color: var(--fp-text-3); }

/* --------------------------------------------------------------------------
   5b. CR-143, Teil `filterspalte`: jede Gruppe eine eigene weiße Karte
   --------------------------------------------------------------------------
   Die Gruppen sind unverändert `<details class="sb-gruppe fp-filter-box">` –
   dazu kommt nur `su-filterkarte`. Zwei Klassen, damit die Regeln den
   `.sidebar summary`-Block des Anwendungs-Styles sicher überschreiben.
   Ids, Reihenfolge, Texte, Aufklapp-Mechanik und alle Verdrahtungen bleiben. */
.su-filterkarte { border: 1px solid var(--fp-linie); border-radius: var(--fp-r-10);
  background: var(--fp-flaeche); }
/* Karten-Überschrift: 14,5 px/700 (Vorlage 2a). Sie bleibt ein <summary>, damit
   die Aufklapp-Mechanik von <details> erhalten bleibt – der Entwurf zeigt hier
   ein <h3>, das aber nicht klickbar wäre. */
.sidebar .su-filterkarte > summary { font-size: var(--fp-fs-14-5); font-weight: 700;
  color: var(--fp-text); padding: 14px 16px; }
.sidebar .su-filterkarte > summary:hover { color: var(--fp-navy); }
.sidebar .su-filterkarte[open] > summary { border-bottom: 1px solid var(--fp-linie-innen); }
.su-filterkarte .su-filter-inhalt { padding: 16px; }

/* Kopfzeile der Spalte: im Entwurf KEINE Karte, sondern eine Überschriftzeile
   über den Karten – „Filter" links, „Alle zurücksetzen" rechts. */
.su-filter-kopfbox { background: transparent; border: 0; border-radius: 0; }
.su-filter-kopfbox .fp-filter-kopf { padding: 2px 2px 0; }
.su-filter-kopfbox .fp-filter-titel { font-size: var(--fp-fs-17); font-weight: 700; color: var(--fp-navy); }
.su-filter-kopfbox .reset-btn.reset-top { font-weight: 600; }
.su-filter-kopfbox .reset-btn.reset-top:hover { color: var(--fp-gruen-text); }

/* Auswahlzeilen: Beschriftung 15 px in --fp-text-filter, Trefferzahl rechts
   13,5 px in --fp-text-leise mit gleichbreiten Ziffern (Vorlage 2a). */
.su-filterkarte .wahlzeile { padding: 7px 8px; }
.su-filterkarte .wahlzeile .wz-text { font-size: var(--fp-fs-15); color: var(--fp-text-filter); }
.su-filterkarte .wahlzeile .wz-anz { font-size: var(--fp-fs-13-5); color: var(--fp-text-leise); }
.su-filterkarte .sb-check { padding: 7px 8px; }
.su-filterkarte .sb-check .wz-text { font-size: var(--fp-fs-15); color: var(--fp-text-filter); }
/* `.anz` trägt die Zahl der Schalterzeilen (nur mit Frist, Historie, …). Sie
   steht rechts wie in den Auswahlzeilen und bekommt dieselben Ziffernbreiten –
   sonst springen die Zahlen beim Filtern seitlich. */
.su-filterkarte .anz { font-size: var(--fp-fs-13-5); color: var(--fp-text-leise);
  font-variant-numeric: tabular-nums; }
/* Die Kacheln der Einfachauswahl behalten ihre kräftigere Beschriftung. */
.su-filterkarte .wahlzeile.fp-filter-kachel .wz-text { font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text); }

/* ==========================================================================
   6. PROGRAMMKARTE
   ==========================================================================
   Aufbau und Abstände kommen aus foerderplus.css (.fp-karte…); hier stehen nur
   die Ergänzungen der Anwendung: Statusleiste mit weniger als drei belegten
   Zellen, Zustands-Icons, Glocken-Knopf, Detail-Knopf. */
.fp-statusleiste.su-status--1 { grid-template-columns: minmax(0, 1fr); }
.fp-statusleiste.su-status--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Vier Zellen entstehen genau dann, wenn zusätzlich der Prüfstand belegt ist
   (Status „prüfen"). Ab 1200 px Fensterbreite wird daraus ein 2×2-Feld – vier
   Spalten in einer 900-px-Karte wären unlesbar. */
.fp-statusleiste.su-status--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .fp-statusleiste.su-status--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Zustands-Icon: rein zusätzlich, der Zustand steht immer als Text daneben.
   Die Farbfamilien folgen der Begriffstabelle (grün/orange/blau/grau/rot). */
.su-icon { display: inline-flex; flex: none; }
.su-icon svg { width: 15px; height: 15px; }
.su-icon--gruen { color: var(--fp-gruen); }
.su-icon--orange { color: var(--fp-amber-text); }
.su-icon--blau { color: var(--fp-blau); }
.su-icon--grau { color: var(--fp-text-3); }
.su-icon--rot { color: var(--fp-rot); }

/* Der Prüfstand trägt die ausführliche Erklärung des Zustands – sie muss
   umbrechen dürfen, sonst liefe sie aus der Spalte heraus. */
.fp-statusleiste-wert .badge { white-space: normal; }

/* CR-145/Nachtrag (Auftrag Eric 25.08.2026): Die Kennzeichen der Trefferkarte sagen
   jetzt, WOFÜR die Angabe steht – „von: Bund", „Art: Zuschuss", „für: Verein".
   Das Präfix ist bewusst leiser als der Wert: gleiche Größe, geringeres Gewicht und
   die gedämpfte Textfarbe. Es erbt die Farbe seines Kennzeichens NICHT, damit es in
   allen Varianten (Ebene, Förderart, Zielgruppe) gleich zurücktritt. */
.kz-praefix { font-weight: 400; opacity: .72; }

/* ---- CR-148 (Auftrag Eric 25.08.2026) ------------------------------------
   (a) Stichwortsuche als oberste Filterkarte. Sie sieht aus wie die übrigen
       Karten der Spalte; das Feld nimmt die volle Kartenbreite.
   (b) KI-Suche zweispaltig: links die Eingabe, rechts der technische Ablauf.
       `minmax(0, …)` in beiden Spuren, damit lange Ablauftexte die Spalte nicht
       aufziehen. Unter 900 px – derselbe Umbruchpunkt wie beim Filter-Layout –
       stehen beide Blöcke untereinander. */
.sb-suchlabel { display: block; font-size: var(--fp-fs-14-5); font-weight: 600;
  color: var(--fp-text); margin: 0 0 7px; }
.sb-suchfeld { width: 100%; box-sizing: border-box; padding: 9px 11px; margin: 0 0 8px;
  border: 1px solid var(--fp-linie); border-radius: var(--fp-r-8);
  font: inherit; font-size: var(--fp-fs-14-5); color: var(--fp-text); background: var(--fp-bg); }
.sb-suchfeld:focus-visible { outline: 2px solid var(--fp-blau); outline-offset: 1px;
  border-color: var(--fp-blau); }

.vc-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--fp-s-5); align-items: start; }
.vc-ablaufspalte:empty { display: none; }
.vc-ablaufspalte { min-width: 0; }
/* CR-171: Eingabe und Ergebnis teilen sich die linke Rasterzelle. */
.vc-links { min-width: 0; }
.vc-rf-frage { display: block; margin: 6px 0 2px; }
/* Die KI-Karten stehen jetzt in der schmaleren linken Spalte: lange Hinweis-Badges
   (Klartext der Anzeigeklasse) umbrechen statt abgeschnitten zu werden. */
#vc-ergebnis .badge { white-space: normal; }
@media (max-width: 900px) {
  .vc-raster { grid-template-columns: minmax(0, 1fr); }
}
.su-aktualitaet { flex-direction: column; align-items: flex-start; gap: 2px; font-weight: 500; }
.su-aktualitaet .fp-mono { font-size: var(--fp-fs-13-5); color: var(--fp-text); }

.su-glocke { align-self: start; }
/* Der Detail-Knopf trägt zusätzlich die Klasse `kopf`: damit hängt er an
   derselben Verdrahtung wie der Kartenkopf und öffnet/schließt das Detail,
   ohne dass ein zweiter Weg ins Programm käme. */
.su-detail-btn { min-height: 44px; padding: 0 20px; font-size: var(--fp-fs-15); }
.fp-karte-fuss-aktionen .fp-quelle-link:hover { text-decoration: underline; }
/* Ohne Originalquelle bleibt der Aktionsbereich der Fußzeile leer – dann darf er
   auch keinen Platz beanspruchen (der Detail-Knopf steht seit CR-143 oben). */
.fp-karte-fuss-aktionen:empty { display: none; }

/* --------------------------------------------------------------------------
   6b. CR-143, Teil `trefferkarte`: rechte Kennzahlenspalte
   --------------------------------------------------------------------------
   Der Kartenkopf ist schon ein Raster (`minmax(0,1fr) auto`, foerderplus.css);
   die zweite Spalte bekommt hier ihre feste Breite, die Trennlinie und den
   Innenabstand aus dem Entwurf (208 px, 22 px). */
.karte .fp-karte-kopf.su-karte-kopf { grid-template-columns: minmax(0, 1fr) 208px; gap: 26px; }
.su-kennzahlen { display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  border-left: 1px solid var(--fp-linie); padding-left: 22px; min-width: 0; }
.su-kennzahlen .su-glocke { align-self: flex-end; }
.su-kennzahl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Hier stand zuerst --fp-text-beispiel, so war es in der Bauvorlage vorgegeben.
   Das ist der Grauton fuer PLATZHALTERTEXT in Eingabefeldern und ergibt auf
   Weiss nur 3,53:1; die Beschriftung ist aber echter Lesetext bei 12,5 px.
   Die Tokenpruefung kann das nicht sehen – das Paar steht nicht in ihrer Liste;
   gefunden hat es die Kontrastmessung am gerenderten Zustand (5,15:1 mit
   --fp-text-leise). Farbwerte stehen bewusst NICHT in diesem Kommentar: die
   Token-Disziplin verbietet Hex-Literale in dieser Datei, auch in Kommentaren. */
.su-kennzahl-label { font-size: var(--fp-fs-12-5); color: var(--fp-text-leise); }
.su-kennzahl-wert { font-size: var(--fp-fs-15); font-weight: 600; color: var(--fp-text);
  display: flex; flex-wrap: wrap; gap: 4px; overflow-wrap: anywhere; }
.su-kennzahl-wert--gross { font-size: var(--fp-fs-18); font-weight: 700; }
/* Der Detail-Knopf schließt die Spalte unten ab. */
.su-kennzahlen .su-detail-btn { margin-top: auto; width: 100%; }

/* Unter 900 px wird aus der Spalte eine Zeile unter dem Text: 208 px neben
   einer Karte, die selbst nur noch ~340 px breit ist, ergäben zwei Spalten,
   in denen beides umbricht. */
@media (max-width: 900px) {
  .karte .fp-karte-kopf.su-karte-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--fp-s-4); }
  .su-kennzahlen { border-left: 0; border-top: 1px solid var(--fp-linie); padding-left: 0; padding-top: 14px;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
  .su-kennzahlen .su-glocke { order: 3; align-self: center; margin-left: auto; }
  .su-kennzahlen .su-detail-btn { order: 4; width: 100%; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   6c. CR-143: Prüfstand-Zeile
   --------------------------------------------------------------------------
   Gleich breite Zellen, 1 px Fuge auf --fp-linie-innen, Zellgrund
   --fp-nachgeordnet (Entwurf 3b). Die Fuge entsteht über `gap` auf dem Grund
   des Rasters – so bleibt sie auch bei umbrechenden Zellen gleichmäßig. */
.karte .fp-statusleiste { background: var(--fp-linie-innen); gap: 1px;
  border-color: var(--fp-linie-innen); }
.karte .fp-statusleiste-zelle { background: var(--fp-nachgeordnet); border-right: 0;
  padding: 12px 18px; gap: 5px; }
.su-pruefzelle .fp-statusleiste-label { display: flex; align-items: center;
  font-size: var(--fp-fs-11-5); color: var(--fp-text-leise); }
.su-punkt { display: inline-block; width: 8px; height: 8px; border-radius: var(--fp-r-999);
  margin-right: 6px; flex: none; background: var(--fp-rand-kraeftig); }
/* Die Farben gruen/grau/orange liefert `.punkt.<farbe>` aus dem Anwendungs-Style
   – EINE Farbtabelle, dieselbe wie bei der Frische-Ampel. Blau und Rot fehlen
   dort, weil die Ampel sie nicht kennt; sie stehen hier mit denselben Tokens
   wie `.su-icon--blau` / `.su-icon--rot`. */
.su-punkt.blau { background: var(--fp-blau); }
.su-punkt.rot { background: var(--fp-rot); }
/* Der Aufruflage-Text ist ein ganzer Satz aus der Begriffstabelle, kein
   Stichwort – er darf umbrechen und tritt deshalb leiser auf als die übrigen
   Zellwerte (Begründung zur Farbwahl siehe statusleisteHTML). */
.su-aufruflage { font-size: var(--fp-fs-13-5); font-weight: 500; color: var(--fp-text-filter);
  line-height: 1.4; display: block; }
.su-aufruflage--unklar { color: var(--fp-text-3); }

/* --------------------------------------------------------------------------
   6d. CR-143: Detailbereich in vier Abschnitten
   --------------------------------------------------------------------------
   Jeder Abschnitt trägt links eine 4-px-Leiste in seiner Farbe und eine
   Überschrift mit vorangestelltem Punkt (Entwurf 3c). Gezeigt wird nur ein
   Abschnitt, der Inhalt hat – das entscheidet `suAbschnitt()` im Markup, nicht
   das CSS: ein per CSS versteckter leerer Kasten wäre für Vorlese-Software
   trotzdem da. */
.su-abschnitt { border-left: 4px solid var(--fp-rand-kraeftig); border-radius: 0 var(--fp-r-8) var(--fp-r-8) 0;
  background: var(--fp-flaeche); padding: 14px 18px 16px; margin: 0 0 var(--fp-s-3); }
.su-abschnitt:last-child { margin-bottom: 0; }
.su-abschnitt-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: var(--fp-fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--fp-text-leise); }
.su-abschnitt-punkt { width: 6px; height: 6px; border-radius: var(--fp-r-999); flex: none;
  background: currentColor; }
/* Der erste Zwischentitel eines Abschnitts braucht keinen Abstand nach oben –
   die Abschnittsüberschrift steht schon darüber. */
.su-abschnitt-inhalt > h4:first-child { margin-top: 0; }
.su-abschnitt-inhalt > *:last-child { margin-bottom: 0; }

.su-abschnitt--gefoerdert { border-left-color: var(--fp-blau); background: var(--fp-warum-flaeche); }
.su-abschnitt--gefoerdert .su-abschnitt-titel { color: var(--fp-blau); }
/* Fließtext auf 76 Zeichen begrenzt (Entwurf) – längere Zeilen liest niemand. */
.su-abschnitt--gefoerdert .dt-kurz { max-width: 76ch; font-size: var(--fp-fs-15-5); }
/* Aufzählungen im ersten Abschnitt mit grünen Punkten statt Standardmarkierung. */
.su-abschnitt--gefoerdert ul { list-style: none; padding-left: 0; }
.su-abschnitt--gefoerdert ul > li { position: relative; padding-left: 16px; }
.su-abschnitt--gefoerdert ul > li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: var(--fp-r-999); background: var(--fp-gruen); }

.su-abschnitt--konditionen { border-left-color: var(--fp-amber); background: var(--fp-amber-flaeche); }
.su-abschnitt--konditionen .su-abschnitt-titel { color: var(--fp-amber-text); }
/* Die Eckdaten-Tabelle wird zur LISTE – eine Zeile je Angabe über die volle Breite.
   Struktur, Zeilen und Werte bleiben eine <table>; umgestellt wird nur die Darstellung.
   Die Regeln brauchen `.detail` davor, weil der spätere <style>-Block der
   Anwendung dieselbe Spezifität hätte und dann gewänne.

   CR-145/Nachtrag (Auftrag Eric 25.08.2026): Vorher stand hier ein vierspaltiges
   Raster (Entwurf 3c). Bei 220 px Spaltenbreite brechen genau die Angaben um, auf die
   es ankommt – Kumulierung, Zweckbindung, Verwendungsnachweis, Aufruflage sind
   ganze Sätze, keine Kennzahlen. Das Raster erzeugte dadurch unterschiedlich hohe
   Kacheln mit Flatterrand. Als Liste bekommt jeder Wert die volle Kartenbreite:
   Bezeichnung links in fester Spur, Wert rechts mit dem gesamten Rest. Unter 560 px
   rutscht der Wert unter seine Bezeichnung. */
.detail .su-abschnitt--konditionen table.dt { display: flex; flex-direction: column;
  gap: 1px; background: var(--fp-amber-rand); border: 1px solid var(--fp-amber-rand);
  border-radius: var(--fp-r-8); overflow: hidden; margin: 4px 0 12px; }
.detail .su-abschnitt--konditionen table.dt tbody { display: contents; }
.detail .su-abschnitt--konditionen table.dt tr { display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 2px 18px;
  align-items: baseline; background: var(--fp-flaeche); padding: 9px 13px; margin: 0; }
.detail .su-abschnitt--konditionen table.dt td { display: block; width: auto; padding: 0;
  overflow-wrap: anywhere; }
.detail .su-abschnitt--konditionen table.dt td:first-child { width: auto; white-space: normal;
  font-size: var(--fp-fs-12-5); color: var(--fp-amber-text); }
.detail .su-abschnitt--konditionen table.dt td:last-child { font-size: var(--fp-fs-14-5);
  font-weight: 500; color: var(--fp-text); line-height: 1.5; }
/* Mehrzeilige Werte (offene Aufrufe) bleiben innerhalb ihrer Spur eine Liste. */
.detail .su-abschnitt--konditionen table.dt td .aufruf-zeile { margin-top: 4px; }
@media (max-width: 560px) {
  .detail .su-abschnitt--konditionen table.dt tr { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

.su-abschnitt--fundstellen { border-left-color: var(--fp-rand-kraeftig); background: var(--fp-flaeche); }
.su-abschnitt--fundstellen .su-abschnitt-titel { color: var(--fp-text-leise); }
.su-fundstellen { display: flex; flex-direction: column; gap: 1px; background: var(--fp-linie);
  border: 1px solid var(--fp-linie); border-radius: var(--fp-r-8); overflow: hidden; }
.su-fundstelle { display: flex; align-items: center; gap: 10px; background: var(--fp-flaeche);
  padding: 10px 12px; font-size: var(--fp-fs-14-5); }
.su-fundstelle-icon { display: inline-flex; flex: none; color: var(--fp-text-leise); }
.su-fundstelle-icon svg { width: 16px; height: 16px; }
.su-fundstelle-name { flex: 1 1 auto; min-width: 0; color: var(--fp-text); overflow-wrap: anywhere; }
.su-fundstelle-link { flex: none; font-weight: 600; }
.su-fundstellen-stempel { margin: 8px 0 0; font-size: var(--fp-fs-13); }

.su-abschnitt--beobachtung { border-left-color: var(--fp-gruen); background: var(--fp-gruen-flaeche); }
.su-abschnitt--beobachtung .su-abschnitt-titel { color: var(--fp-gruen-text); }
/* Der Punkt „atmet" leicht – reine Zierde, nie Bedeutungsträger. Die globale
   Regel in foerderplus.css (`prefers-reduced-motion: reduce` → animation:none)
   schaltet sie ab; hier wird sie deshalb NICHT zusätzlich abgefragt, damit es
   nur eine Stelle gibt, an der das entschieden wird. */
.su-abschnitt--beobachtung .su-abschnitt-punkt { animation: su-puls 2.4s ease-in-out infinite; }
@keyframes su-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(1.25); }
}
/* Chronik-Einträge als weiße Kästen (Entwurf 3c). */
.su-abschnitt--beobachtung .hist-liste { list-style: none; padding-left: 0; margin: 4px 0 0; }
.su-abschnitt--beobachtung .hist-liste > li { background: var(--fp-flaeche);
  border: 1px solid var(--fp-gruen-rand); border-radius: var(--fp-r-8); padding: 10px 12px;
  margin-bottom: 8px; font-size: var(--fp-fs-15); }
.su-abschnitt--beobachtung .hist-detail, .su-abschnitt--beobachtung .hist-art,
.su-abschnitt--beobachtung .hist-begruendung { font-size: var(--fp-fs-14); color: var(--fp-text-leise); }

/* ==========================================================================
   7. KOPF-ZEILEN: Navigation IMMER in eigener Zeile, dort scrollbar
   ========================================================================== */
/* Bis 19.08.2026 stand hier ein Umbruchpunkt (@media max-width:1400px), weil
   Marke + Navigation + Aktionen bei 1.440 px noch knapp in eine Zeile
   passten: Marke 143 px + Navigation 743 px (damals 6 Punkte, Cockpit noch
   `hidden`) + Aktionen 431 px + zwei Abstände à 20 px = 1.357 px Innenbreite.
   Weisung Eric 22.08.2026 (Cockpit-Punkt dauerhaft sichtbar, siehe
   web/foerderfinder.html) macht die Navigation zum 8-Punkte-Streifen: NEU
   gemessen (22.08.2026, Chromium) 853 px allein für die Navigation - macht
   142 + 853 + 431 + 40 = 1.466 px Innenbreite. `.su-breite` deckelt die
   Kopfzeile aber bei max-width:1400px (VERTRAG-Seitengerüst) - das reicht bei
   KEINER Fensterbreite mehr für eine gemeinsame Zeile, auch nicht auf sehr
   breiten Bildschirmen, weil die Kopfzeile ab 1.400 px ohnehin nicht weiter
   wächst. Der frühere Umbruchpunkt ist deshalb kein Sonderfall unterhalb einer
   Schwelle mehr, sondern der einzige Zustand, der noch passt - die Regeln
   gelten jetzt unbedingt statt hinter einer Media Query. Die Seite selbst
   scrollt nie waagerecht (bleibt unverändert); nur der Navigationsstreifen
   selbst scrollt bei Bedarf innerhalb seiner eigenen Zeile. */
.su-kopf-row { flex-wrap: wrap; row-gap: var(--fp-s-2); }
.su-kopf-row .tabs { order: 3; flex: 1 1 100%; min-width: 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.su-kopf-aktionen { margin-left: auto; }
@media (max-width: 900px) {
  .su-kopf-row { gap: var(--fp-s-3); }
  /* Aktionen kompakt: Regionsknopf verliert seine Unterzeile, „Anmelden"
     bleibt vollständig lesbar. */
  .su-kopf-aktionen { gap: 6px; }
  .su-kopf-aktionen .fp-regionsknopf-sub { display: none; }
  .su-kopf-aktionen .fp-btn, .su-kopf-aktionen .fp-regionsknopf { padding: 0 10px; }
}
@media (max-width: 560px) {
  /* Aktionen nur noch als Icons – die Beschriftung steht als aria-label und
     title am Knopf, die Funktion bleibt vollständig erhalten. Ohne das lief die
     Kopfzeile bei 375 px waagerecht über (gemessen 382 px Aktionsbreite). */
  .su-kopf-aktionen .fp-btn { width: auto; padding: 0 10px; }
  /* CR-143: auf .su-kopf-aktionen eingegrenzt. Der Regionsknopf steht seit
     CR-143 im Suchstreifen und hat dort eine eigene Zeile – seine Beschriftung
     darf und soll dort auch bei 375 px sichtbar bleiben. */
  .su-kopf-aktionen .su-aktion-text, .su-kopf-aktionen .fp-regionsknopf-text { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .su-marke .fp-marke-wort { font-size: var(--fp-fs-17); }
  /* Lange Kennzeichen und der Datenstand dürfen umbrechen statt zu überstehen.
     .pu-datenstand-badge (Weisung Eric 22.08.2026, Programmübersicht-Kopf)
     zeigt zwei Zahlen und ist dadurch länger als .datenstand-badge – dieselbe
     Regel gilt hier deshalb mit. */
  .datenstand-badge, .pu-datenstand-badge { white-space: normal; }
  .badge, .fam, .ort-badge, .fp-kennzeichen { white-space: normal; }
}

/* ==========================================================================
   8. FORMULARFELDER DER ÜBRIGEN REITER
   ==========================================================================
   Nur Aussehen – Auswahlwerte, Ereignisse und Wirkung bleiben unverändert. */
.q-filter select, .q-filter input, .aend-suchfeld input {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--fp-rand-kraeftig);
  border-radius: var(--fp-r-8); background: var(--fp-flaeche); font-family: inherit;
  font-size: var(--fp-fs-14-5); color: var(--fp-text);
}
.q-filter label { font-size: var(--fp-fs-14); color: var(--fp-text-2); gap: 8px; }

/* Breite Tabellen der Auswertungsreiter scrollen INNERHALB ihres Kastens –
   die Seite selbst scrollt nie waagerecht (gemessen bei 375 px: Datenlage
   964 px, Änderungen 1.234 px Inhaltsbreite). */
#u-status, #u-gebiete, #u-bestand, #u-frische, #aend-liste,
#ck-inventur, #ck-zustand, #ck-bestandslage, #ck-rueckstaende5, #ck-doc2query,
#ck-pruefen3, #ck-pruefgrund, #ck-rueckstand, #ck-erfasst, #ck-quellen,
#ck-laeufe, #ck-funde, #ck-aenderungen, #ck-unerreichbar, #ck-urlfehler,
#ck-verlauf, #ckp-inhalt { overflow-x: auto; }

/* ==========================================================================
   ARBEITSSTREIFEN DER FACHSUCHE (Kopf-Umbau 27.08.2026, Weisung Eric)

   Das Suchfeld (#suche) ist in die dunkle Kopfzeile gewandert - Entscheidung
   Eric: EIN Suchfeld, und zwar im Kopf. Was hier bleibt, sind die Werkzeuge
   der Ergebnisliste: Filter, Region, Suchen, Datenstand. Dieselben Elemente
   wie zuvor, nur schlanker und auf hellem Grund statt auf Navy.

   Die alten .su-suchstreifen-Regeln bleiben unangetastet stehen; sie greifen
   nur noch ueber die zusaetzliche Klasse .su-streifen-schlank ueberschrieben.
   ========================================================================== */
.su-suchstreifen.su-streifen-schlank { background: var(--fp-kasten);
  border-bottom: 1px solid var(--fp-linie); padding: 10px 0; }
.su-streifen-schlank .su-streifen-zeile { gap: var(--fp-s-2); flex-wrap: wrap; }
.su-streifen-schlank .filter-toggle,
.su-streifen-schlank .su-streifen-region,
.su-streifen-schlank .fp-btn--primaer.su-suchknopf { height: 40px; min-height: 40px;
  border-radius: var(--fp-r-8); }
.su-streifen-schlank .su-streifen-region { min-width: 0; }
.su-streifen-schlank .su-streifen-region .fp-regionsknopf-titel { font-size: var(--fp-fs-14); }
.su-streifen-schlank .su-streifen-region .fp-regionsknopf-sub { font-size: var(--fp-fs-12); }
/* Suchen-Knopf auf hellem Grund: die primaere Interaktionsfarbe des Systems,
   nicht mehr das Gruen des dunklen Streifens. */
.su-suchstreifen.su-streifen-schlank .fp-btn--primaer.su-suchknopf {
  background: var(--fp-blau); color: var(--fp-flaeche); padding: 0 var(--fp-s-5); }
.su-suchstreifen.su-streifen-schlank .fp-btn--primaer.su-suchknopf:hover {
  background: var(--fp-blau-hover); color: var(--fp-flaeche); }
.su-suchstreifen.su-streifen-schlank .fp-btn--primaer.su-suchknopf:focus-visible {
  outline: 3px solid var(--fp-blau); outline-offset: 2px; }
/* Datenstand und Hinweis stehen jetzt auf Hell - die Farben des dunklen
   Streifens wuerden hier untergehen. */
.su-suchstreifen.su-streifen-schlank .datenstand-badge { background: var(--fp-neutral-flaeche);
  border-color: var(--fp-info-rand); color: var(--fp-text-2); }
.su-suchstreifen.su-streifen-schlank .su-suchhinweis { color: var(--fp-text-leise);
  font-size: var(--fp-fs-13); margin-left: auto; text-align: right; }

@media (max-width: 900px) {
  .su-streifen-schlank .su-suchhinweis { display: none; }
}