/* =====================================================================
   Platzfinder – Stylesheet (Bildschirm-Ansicht)

   Ziel: ein ruhiges, seriöses Erscheinungsbild, das in einer Behörde
   professionell wirkt. Klare Typografie, zurückhaltende Farben, gut
   lesbare Tabellen, deutliche Badges.

   Aufbau dieser Datei (von oben nach unten):
     1. Farb- und Größen-Variablen  (zentrale Stellschrauben)
     2. Grundlagen (Body, Typografie, Links)
     3. Kopfzeile / Navigation
     4. Layout-Container & Karten
     5. Tabellen
     6. Formulare
     7. Buttons
     8. Badges (Betriebserlaubnis, Quelle, Flags)
     9. Hinweise / Meldungen
    10. Responsiv (kleine Bildschirme)
   ===================================================================== */

/* --- 1. Variablen: hier zentral die Farben/Abstände anpassen ---------- */
:root {
  /* Ruhige, behördentaugliche Palette: gedecktes Blau/Schiefer + neutrale Grautöne */
  --farbe-primaer: #1f3a5f;        /* dunkles Schieferblau – Kopfzeile, Überschriften */
  --farbe-primaer-hell: #2c5282;   /* etwas heller – Links, Akzente */
  --farbe-akzent: #2b6cb0;         /* Buttons */
  --farbe-akzent-dunkel: #23527c;  /* Button beim Überfahren */

  --farbe-text: #1a202c;           /* fast schwarz, angenehmer als reines Schwarz */
  --farbe-text-leise: #5a6473;     /* Nebeninfos, Hilfetexte */
  --farbe-linie: #dfe3e8;          /* dünne Trennlinien */
  --farbe-hintergrund: #f4f6f8;    /* Seitenhintergrund, sehr helles Grau */
  --farbe-karte: #ffffff;          /* Karten/Flächen */

  /* Badge-Farben (Hintergrund + Text), bewusst gedeckt */
  --gruen-bg: #e3f3e8;   --gruen-tx: #1f6b3a;
  --grau-bg:  #eceef1;   --grau-tx:  #4a5563;
  --orange-bg:#fdeede;   --orange-tx:#9a5b12;
  --blau-bg:  #e4eefb;   --blau-tx:  #23527c;
  --rot-bg:   #fbe6e6;   --rot-tx:   #9b2c2c;

  --radius: 8px;                   /* Ecken-Rundung */
  --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
}

/* --- 2. Grundlagen ---------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  /* System-Schriften: schnell, überall verfügbar, sauber lesbar */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

/* Klare Hierarchie: h1 deutlich, h2 als Abschnitt, h3 zurückhaltend. */
h1, h2, h3 { color: var(--farbe-primaer); line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .2rem; }
h2 { font-size: 1.15rem; font-weight: 650; margin: 1.5rem 0 .65rem; }
h3 { font-size: 1rem; font-weight: 650; margin: 1.1rem 0 .45rem; }

a { color: var(--farbe-primaer-hell); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: .5rem 0; }
.leise { color: var(--farbe-text-leise); font-size: .875rem; font-weight: 400; }

/* Erklärzeile direkt unter der Seitenüberschrift */
.untertitel { color: var(--farbe-text-leise); font-size: .95rem; margin: 0 0 1.25rem; max-width: 60rem; }

/* --- 3. Kopfzeile / Navigation ---------------------------------------- */
header.kopf {
  background: var(--farbe-primaer);
  color: #fff;
  box-shadow: var(--schatten);
}
.kopf-innen {
  max-width: 1400px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; opacity: .9; }
nav.hauptnav {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
nav.hauptnav a {
  color: #dbe4f0;
  padding: .35rem .7rem;
  border-radius: var(--radius);
  font-size: .95rem;
}
nav.hauptnav a:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
/* Aktuelle Seite in der Navigation hervorheben (gesetzt in base.html) */
nav.hauptnav a.aktiv { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }

/* Nutzer-Leiste rechts in der Kopfzeile (Stufe A: wer ist angemeldet?) */
.nutzer-leiste { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nutzer-chip {
  color: #fff;
  text-align: right;
  line-height: 1.2;
  padding: .25rem .55rem;
  border-radius: var(--radius);
}
.nutzer-chip:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.nutzer-rolle { display: block; font-size: .72rem; color: #b9c6da; }

/* Anmeldeseite und Konto-Formular: schmale, zentrierte Karte */
.anmelde-rahmen { display: flex; justify-content: center; padding-top: 2rem; }
.anmelde-karte { max-width: 26rem; width: 100%; }

/* Fußzeile mit Rechtsseiten (Impressum/Datenschutz) */
.fusszeile { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--farbe-linie);
             color: var(--farbe-text-leise); font-size: .85rem; }

/* Zähler-Badge in der Navigation (offene Freigaben/Prüfungen/Tickets) */
.nav-zaehler {
  display: inline-block;
  background: var(--orange-bg, #f6e3c5);
  color: #7a4b12;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  padding: 0 .4rem;
  margin-left: .3rem;
  vertical-align: middle;
}

/* Statistik-Diagramme (Stufe D) – selbst gebaut, kein CDN */
.tages-balken { display: flex; align-items: flex-end; gap: .35rem; height: 9rem; }
.tages-spalte { flex: 1; display: flex; flex-direction: column; align-items: center;
                justify-content: flex-end; height: 100%; min-width: 0; }
.tages-wert { font-size: .72rem; color: var(--farbe-text-leise); }
.tages-saeule { width: 70%; background: var(--farbe-primaer-hell);
                border-radius: 3px 3px 0 0; min-height: 2px; }
.tages-datum { font-size: .68rem; color: var(--farbe-text-leise); margin-top: .25rem;
               white-space: nowrap; }
.quer-balken-zeile { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.quer-balken-text { flex: 0 0 14rem; font-size: .85rem; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.quer-balken { height: .9rem; background: var(--farbe-primaer-hell);
               border-radius: 3px; min-width: 2px; }
.budget-balken { height: 1.1rem; background: #e5eaf1; border-radius: 6px;
                 overflow: hidden; margin-bottom: .5rem; }
.budget-fuellung { height: 100%; background: var(--farbe-primaer-hell); }
.budget-fuellung.budget-voll { background: var(--rot-tx); }

/* Prüf-Warteschlange: ein Block je Änderung, dezent getrennt */
.aenderungs-block { border-top: 1px solid var(--farbe-linie); padding-top: .8rem; margin-top: .8rem; }
.aenderungs-block:first-of-type { border-top: none; margin-top: 0; }

/* Fälle & Verlauf: kleine Inline-Formulare (Fall wählen + zuordnen) */
.fall-zuordnen-form { display: flex; gap: .3rem; align-items: center; }
.fall-zuordnen-form select, .fall-zuordnen-form input { font-size: .82rem; padding: .2rem .35rem; }

/* --- 4. Layout-Container & Karten ------------------------------------- */
main {
  /* Breit genug, dass die Anrufliste neben dem Verlaufs-Fenster ohne
     Seitwärts-Scrollen auskommt (Nutzerwunsch 07/2026). Auf kleineren
     Bildschirmen begrenzt ohnehin das Fenster selbst die Breite. */
  max-width: 1400px;
  margin: 1.5rem auto;
  padding: 0 1.25rem 3rem;
}
.karte {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.15rem 1.4rem;
  margin-bottom: 1.5rem;
}

/* Kennzahlen-Kacheln auf der Startseite */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.kachel {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--schatten);
}
.kachel .zahl { font-size: 1.75rem; font-weight: 700; color: var(--farbe-primaer); line-height: 1.2; }
.kachel .beschriftung { color: var(--farbe-text-leise); font-size: .85rem; margin-top: .15rem; }

/* --- 5. Tabellen ------------------------------------------------------ */
.tabelle-umrandung { overflow-x: auto; }   /* auf kleinen Bildschirmen scrollbar */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
/* Ruhige Kopfzeile: kleine Kapitälchen statt grauem Balken */
thead th {
  text-align: left;
  background: none;
  color: var(--farbe-text-leise);
  font-size: .75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--farbe-linie);
  white-space: nowrap;
}
/* Dezente Zeilentrennung: hauchdünne, helle Linien, letzte Zeile ohne */
tbody td { padding: .65rem .75rem; border-bottom: 1px solid #edf0f4; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f7f9fb; }

/* Geflaggte Zeilen (Träger-Flag): gedimmt darstellen, aber NIE ausblenden.
   Nur leicht dimmen (.75) – bei .55 unterschreitet der Text den
   Mindestkontrast (WCAG AA); die Kennzeichnung trägt ohnehin das Warnbadge. */
tr.geflaggt { opacity: .75; }
tr.geflaggt:hover { opacity: 1; }

/* --- 6. Formulare ----------------------------------------------------- */
form .feld { margin-bottom: .9rem; }
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .25rem; color: var(--farbe-primaer); }
label .pflicht { color: var(--rot-tx); }

input[type="text"], input[type="email"], input[type="url"], input[type="number"],
input[type="date"], select, textarea {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid #c8cfd8;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--farbe-text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .15);   /* dezenter Fokus-Ring */
}
textarea { min-height: 4rem; resize: vertical; }

/* Zwei Felder nebeneinander (z. B. PLZ + Ort) */
.feld-reihe { display: flex; gap: 1rem; flex-wrap: wrap; }
.feld-reihe > .feld { flex: 1; min-width: 180px; }

/* Checkbox-Gruppen (Hilfeformen, Besonderheiten, Zielgruppe):
   kompaktes mehrspaltiges Raster mit engen Abständen. */
.checkbox-gruppe { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: .5rem .9rem; }
.checkbox-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: .05rem .9rem;
  padding: .15rem 0 .3rem;
}
.checkbox-liste label {
  font-weight: 400; font-size: .89rem; display: flex; align-items: flex-start;
  gap: .45rem; margin: 0; padding: .12rem 0; cursor: pointer; color: var(--farbe-text);
}
.checkbox-liste input { width: auto; margin-top: .22rem; accent-color: var(--farbe-akzent); flex-shrink: 0; }

/* Zusatz-Option unterhalb eines Rasters (z. B. "auch gemischte zeigen"):
   dezent durch gestrichelte Linie abgetrennt. */
.checkbox-extra {
  display: flex; align-items: flex-start; gap: .45rem;
  font-weight: 400; font-size: .89rem; color: var(--farbe-text);
  margin: 0; padding: .45rem 0 .15rem; cursor: pointer;
  border-top: 1px dashed var(--farbe-linie);
}
.checkbox-extra.ohne-linie { border-top: none; padding-top: .15rem; }
.checkbox-extra input { width: auto; margin-top: .22rem; accent-color: var(--farbe-akzent); flex-shrink: 0; }

/* Aufklappbare Paragraf-Gruppen der Hilfeformen (<details>/<summary>) */
.paragraf-gruppe { border-bottom: 1px solid #edf0f4; }
.paragraf-gruppe:last-child { border-bottom: none; }
.paragraf-gruppe summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  color: var(--farbe-primaer);
  padding: .4rem .15rem;
  border-radius: 4px;
  display: flex; align-items: center; gap: .5rem;
  user-select: none;              /* kein versehentliches Text-Markieren beim Klicken */
}
.paragraf-gruppe summary:hover { background: #f4f7fa; }
.paragraf-gruppe summary::marker { color: var(--farbe-text-leise); }
.paragraf-gruppe .checkbox-liste { padding-left: 1.1rem; }

/* Datenschutz-Hinweis an Notizfeldern */
.datenschutz-hinweis {
  color: var(--orange-tx); background: var(--orange-bg);
  border-radius: var(--radius); padding: .4rem .6rem; font-size: .85rem; margin-top: .35rem;
}

/* --- 7. Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--farbe-akzent);
  color: #fff;
  border: 1px solid transparent;      /* gleiche Höhe wie sekundäre Buttons */
  border-radius: var(--radius);
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.btn:hover { background: var(--farbe-akzent-dunkel); text-decoration: none; }
.btn:focus-visible { outline: 3px solid rgba(43, 108, 176, .35); outline-offset: 1px; }
.btn.sekundaer { background: #fff; color: var(--farbe-primaer); border-color: #c8cfd8; }
.btn.sekundaer:hover { background: #eef1f5; }
.btn-reihe { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.aktion-links a { margin-right: .75rem; font-size: .88rem; }

/* --- 8. Badges -------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;         /* Pillen-Form */
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  margin: .06rem 0;             /* Luft, wenn mehrere Badges umbrechen */
}
.badge.gruen  { background: var(--gruen-bg);  color: var(--gruen-tx); }
.badge.grau   { background: var(--grau-bg);   color: var(--grau-tx); }
.badge.orange { background: var(--orange-bg); color: var(--orange-tx); }
.badge.blau   { background: var(--blau-bg);   color: var(--blau-tx); }
.badge.rot    { background: var(--rot-bg);    color: var(--rot-tx); }

/* --- 9. Hinweise / Meldungen ------------------------------------------ */
.meldung {
  background: var(--gruen-bg); color: var(--gruen-tx);
  border: 1px solid #bfe3cb; border-radius: var(--radius);
  padding: .7rem 1rem; margin-bottom: 1.25rem;
}
.hinweis-box {
  background: var(--blau-bg); color: var(--blau-tx);
  border: 1px solid #c5daf5; border-radius: var(--radius);
  padding: .7rem 1rem; margin: 1rem 0;
}
.warn-box {
  background: var(--orange-bg); color: var(--orange-tx);
  border: 1px solid #f0d5ae; border-radius: var(--radius);
  padding: .7rem 1rem; margin-bottom: 1.25rem;
}
/* Start-Kasten der Live-Recherche: dezent hervorgehoben */
.live-box { border-left: 4px solid var(--farbe-akzent); }

/* Fortschrittsbalken der Hintergrund-Recherche (Balken + Prozentzahl) */
.fortschritt {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .6rem 0 .3rem;
}
.fortschritt-balken {
  flex: 1;
  height: 10px;
  background: #e4e9ef;
  border-radius: 999px;
  overflow: hidden;
}
.fortschritt-fuellung {
  height: 100%;
  background: var(--farbe-akzent);
  border-radius: 999px;
  transition: width .6s ease;   /* weiches Wachsen zwischen zwei Abfragen */
}
.fortschritt-prozent {
  font-weight: 700;
  color: var(--farbe-primaer);
  min-width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;   /* Ziffern gleicher Breite: kein Zappeln */
}

/* Benannte Untergruppen in Checkbox-Blöcken (Besonderheiten-Gruppen) */
.gruppen-titel {
  font-weight: 650;
  font-size: .85rem;
  color: var(--farbe-primaer);
  margin: .5rem 0 .15rem;
}
.gruppen-titel:first-child { margin-top: .15rem; }

/* "Alle aufklappen"-Zeile über den Hilfeform-Gruppen */
.alle-gruppen-zeile { margin: .15rem 0 .35rem; }
.alle-gruppen-zeile .btn { padding: .25rem .6rem; font-size: .8rem; }

/* Eingeklappter Ausschlusskriterien-Bereich (eigenständiges details) */
.ausschluss-bereich {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: .35rem .9rem;
}
.ausschluss-bereich[open] { padding-bottom: .6rem; }

/* Zeile unter der Trefferliste: erklärte Ausblendungen */
.ausgeblendet-zeile { margin-top: .75rem; }

/* "Nimmt nicht auf"-Hinweis in der Ergebniszeile */
.nimmt-nicht-auf { color: var(--rot-tx); }

/* Feedback-Knöpfe in der Ergebniszeile (Rückmeldung nach dem Anruf).
   2x2-Raster statt Spalte: halbiert die Zeilenhöhe der Trefferliste. */
.feedback-zelle { min-width: 12rem; }
.feedback-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
}
.fb-knopf {
  border: 1px solid #c8cfd8;
  background: #fff;
  color: var(--farbe-text);
  border-radius: 6px;
  padding: .2rem .5rem;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.fb-knopf:hover { background: #eef1f5; }
.fb-knopf:disabled { opacity: .5; cursor: wait; }
.fb-gut { border-color: #bfe3cb; color: var(--gruen-tx); }
.fb-gut:hover { background: var(--gruen-bg); }
.fb-schlecht { border-color: #f0c4c4; color: var(--rot-tx); }
.fb-schlecht:hover { background: var(--rot-bg); }

/* Überlauf-Menü ("mehr …"): existiert nicht + Träger-Hinweis setzen */
.mehr-menue { margin-top: .35rem; }
.mehr-menue summary {
  cursor: pointer;
  font-size: .78rem;
  /* Als bedienbares Element erkennbar: Link-Farbe + gepunktete Linie */
  color: var(--farbe-primaer);
  text-decoration: underline dotted;
  user-select: none;
}
.mehr-menue[open] {
  border: 1px solid var(--farbe-linie);
  border-radius: 6px;
  padding: .35rem .45rem;
  background: #fbfcfd;
}
.mehr-menue .fb-knopf { display: block; width: 100%; margin-top: .25rem; }
.mehr-menue .gruppen-titel { margin-top: .5rem; font-size: .78rem; }

/* Nur-Druck-Elemente: am Bildschirm unsichtbar (siehe print.css) */
.nur-druck { display: none; }
/* Druck-Liste der Anrufliste: existiert nur auf Papier (siehe print.css) */
.druck-liste { display: none; }

/* Eingabefeld mit kleinem Knopf daneben (z. B. Datum leeren) */
.eingabe-mit-knopf { display: flex; gap: .4rem; align-items: center; }
.eingabe-mit-knopf input { flex: 1; }
.knopf-klein { padding: .35rem .55rem; font-size: .85rem; line-height: 1; }

/* Suchverlauf: Ergebnisliste links, schmales Verlaufs-Fenster rechts.
   Auf schmalen Bildschirmen wandert das Fenster (eingeklappt) nach oben. */
.ergebnis-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.ergebnis-layout > #ergebnisse { flex: 1; min-width: 0; }
.verlauf-spalte { width: 280px; flex-shrink: 0; }
.verlauf-panel { padding: .6rem .9rem; position: sticky; top: 1rem; }
.verlauf-panel summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--farbe-primaer);
  user-select: none;
}
.verlauf-liste {
  list-style: none;
  margin: .5rem 0;
  padding: 0;
  max-height: 70vh;          /* wächst nach unten, dann scrollen */
  overflow-y: auto;
}
.verlauf-liste li { border-bottom: 1px solid #edf0f4; }
.verlauf-liste li:last-child { border-bottom: none; }
.verlauf-eintrag {
  display: block;
  padding: .45rem .3rem;
  border-radius: 6px;
  color: var(--farbe-text);
  text-decoration: none;
}
.verlauf-eintrag:hover { background: #f4f7fa; text-decoration: none; }
.verlauf-kopf { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.verlauf-nr { font-weight: 700; color: var(--farbe-primaer); font-size: .82rem; }
.verlauf-felder { font-size: .82rem; color: var(--farbe-text-leise); margin-top: .15rem; }
.verlauf-felder span::after { content: " · "; color: #c3cad3; }
.verlauf-felder span:last-child::after { content: ""; }
.verlauf-diff {
  color: var(--farbe-primaer);
  font-weight: 650;
  background: var(--blau-bg);
  border-radius: 4px;
  padding: 0 .2rem;
}
#verlauf-leeren { margin-top: .35rem; padding: .25rem .6rem; font-size: .8rem; }
@media (max-width: 900px) {
  .ergebnis-layout { flex-direction: column; }
  .verlauf-spalte { width: 100%; order: -1; }   /* oberhalb der Liste */
  .verlauf-panel { position: static; }
}

/* Aufklappbares Diagnose-Protokoll (eine Zeile je API-Runde) */
.diagnose { margin-top: .6rem; }
.diagnose summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--farbe-text-leise);
  user-select: none;
}
.diagnose table { font-size: .82rem; }
.leer-hinweis { color: var(--farbe-text-leise); font-style: italic; padding: 1rem 0; }

/* --- 10. Suche & Ergebnisliste (Phase 2) ------------------------------ */

/* Alterseingabe: kleine Zahlenfelder für "Jahre" und "Monate" nebeneinander */
.alter-eingabe { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.alter-teil { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.alter-teil input[type="number"] { width: 4.5rem; }

/* Score als Pille: fällt ins Auge, Tooltip erklärt die drei Bausteine */
.score-pill {
  display: inline-block;
  background: var(--farbe-primaer);
  color: #fff;
  border-radius: 999px;
  padding: .25rem .7rem;
  font-weight: 700;
  font-size: .95rem;
  cursor: help;              /* zeigt: hier gibt es einen Tooltip */
}
tr.geflaggt .score-pill { background: var(--farbe-text-leise); }

/* Kopfzeile über der Trefferliste: Überschrift links, Export-Knöpfe rechts */
.treffer-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.treffer-kopf h2 { margin: 0; }
.treffer-kopf .btn-reihe { margin: 0; }

/* htmx-Ladeanzeige: unsichtbar, solange keine Anfrage läuft */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* --- 11. Responsiv ---------------------------------------------------- */
@media (max-width: 640px) {
  .kopf-innen { flex-direction: column; align-items: flex-start; gap: .6rem; }
  h1 { font-size: 1.35rem; }
  main { margin-top: 1rem; }
}

/* --- Sortierbare Spaltenköpfe der Ergebnisliste --- */
.sortier-knopf {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: inherit; color: inherit;
  cursor: pointer; white-space: nowrap;
}
.sortier-knopf:hover, .sortier-knopf:focus-visible { text-decoration: underline; }
.sortier-pfeil { font-size: .8em; opacity: .65; }