/*
 * Komponenten (UI-KONZEPT 4.3). Klassennamen nach dem Muster block__element--variante, deutsch.
 * Nur Tokens aus tokens.css. Jede Komponente ist im Styleguide /system/komponenten/ zu sehen.
 */

/* ================================================================ Getönte Flächen */

/* Nebentext (--ink-muted) erreicht auf getönten Flächen keine 4,5:1; dort gilt der dunklere Ton (tokens.css). */
.segment, .datenstand, .nav__zaehler--dezent, .karte--warnung, .karte--fehler, .karte--info, .karte--erfolg,
.hinweis--info, .hinweis--erfolg, .hinweis--warnung, .hinweis--fehler, .toast--fehler, .badge,
.arbeitskarte--fehler, .fehleruebersicht, .chip,
.tabelle tbody tr:hover td, .jobkarte--unterbrochen, .jobkarte:has(> .jobkarte__stand--unterbrochen),
.mehrfach__option:hover, .treffer__link:hover, .treffer__link:focus-visible {
  --ink-muted: var(--ink-muted-on-tint);
}

/* ================================================================ Seitenkopf (PageHeader) */

.seitenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.seitenkopf__text { min-width: 0; }
.seitenkopf__titel:focus { outline: none; }
.seitenkopf__untertitel { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.seitenkopf__aktionen { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.seitenkopf__hilfe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  min-height: var(--ziel-min);
}

/* ================================================================ Brotkrumen */

.brotkrumen__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.brotkrumen__glied { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 600; }
.brotkrumen__glied + .brotkrumen__glied::before { content: "›"; margin: 0 var(--space-2); color: var(--ink-muted); }
.brotkrumen__glied a { color: var(--ink-muted); text-decoration: none; }
.brotkrumen__glied a:hover { color: var(--ink); text-decoration: underline; }
.brotkrumen__glied [aria-current] { color: var(--ink); font-weight: 700; }

/* ================================================================ Karte (Card) */

.karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5) var(--space-5);
  min-width: 0;
}
.karte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.karte__titel { font-size: var(--fs-lg); font-weight: 700; }
.karte__aktion { font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.karte--warnung { background: var(--warning-soft); border-color: var(--warning); }
.karte--fehler { background: var(--critical-soft); border-color: var(--critical); }
.karte--info { background: var(--accent-soft); }
.karte--erfolg { background: var(--success-soft); }

/* ================================================================ Steckbrief (KeyValue) und Schloss (LockHint) */

.kv { margin: 0; display: grid; gap: var(--space-2); }
.kv__zeile { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: var(--space-3); align-items: baseline; }
.kv__label { color: var(--ink-muted); font-size: var(--fs-sm); font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
.kv__wert { margin: 0; overflow-wrap: anywhere; }
.kv__leer { color: var(--ink-muted); }

.schloss { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); font-size: var(--fs-xs); }
.schloss .icon { width: 13px; height: 13px; }
.schloss a .icon { width: 12px; height: 12px; margin-left: 2px; }

/* ================================================================ Datenstand (DataFreshness) */

.datenstand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 30px;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.datenstand .icon { width: 14px; height: 14px; color: var(--ink-muted); }
.datenstand__hinweis { color: var(--ink-muted); font-weight: 500; }
.datenstand--warnung { background: var(--warning-soft); color: var(--warning-ink); }
.datenstand--warnung .icon, .datenstand--warnung .datenstand__hinweis { color: var(--warning-ink); }
.datenstand--fehler { background: var(--critical-soft); color: var(--critical-ink); }
.datenstand--fehler .icon, .datenstand--fehler .datenstand__hinweis { color: var(--critical-ink); }
a.datenstand:hover { text-decoration: underline; }

/* ================================================================ Badge / StatusChip */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink);
}
.badge .icon { width: 13px; height: 13px; }
.badge--info { background: var(--accent-soft); color: var(--accent-2); }
.badge--erfolg { background: var(--success-soft); color: var(--success); }
.badge--warnung { background: var(--warning-soft); color: var(--warning-ink); }
.badge--fehler { background: var(--critical-soft); color: var(--critical-ink); }

/* ================================================================ Objektverweis (ObjectLink) */

.objektlink { display: inline-flex; align-items: baseline; gap: var(--space-1); font-weight: 600; text-decoration: none; min-width: 0; }
a.objektlink:hover .objektlink__name { text-decoration: underline; }
.objektlink__icon { align-self: center; }
.objektlink__id { color: var(--ink-muted); font-weight: 500; font-size: var(--fs-xs); }
.objektlink--traeger .objektlink__icon { color: var(--typ-traeger); }
.objektlink--einrichtung .objektlink__icon { color: var(--typ-einrichtung); }
.objektlink--person .objektlink__icon { color: var(--typ-person); }
.objektlink--veranstaltung .objektlink__icon { color: var(--typ-veranstaltung); }

/* ================================================================ Tabs */

.tabs { border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; }
.tabs__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--ziel-touch);
  padding: 0 var(--space-4);
  border-bottom: 3px solid transparent;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--ink); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tabs__tab[aria-current="page"] { color: var(--accent-2); border-bottom-color: var(--accent-2); }
.tabs__zaehler { padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font-size: 11.5px; }

/* ================================================================ Tabelle (DataTable) */

.tabelle-rahmen {
  container: tabelle / inline-size;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabelle caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 700; caption-side: top; }
.tabelle caption.sr-only { padding: 0; }
.tabelle th, .tabelle td {
  text-align: left;
  padding: 0 var(--space-4);
  height: var(--row-h);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: var(--fs-sm);
}
.tabelle td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.tabelle thead th {
  position: sticky;
  top: var(--topbar-h);
  z-index: 2;
  background: var(--surface);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}
.tabelle thead th:first-child { border-top-left-radius: var(--radius-lg); }
.tabelle thead th:last-child { border-top-right-radius: var(--radius-lg); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--surface-2); }
.tabelle tbody tr[data-zeilenlink] { cursor: pointer; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle__auswahl { width: 44px; }
.tabelle__neben { display: block; color: var(--ink-muted); font-size: var(--fs-xs); }
.tabelle__leer td { height: auto; padding: var(--space-6); }
/* Zellen nur in einer Darstellung: Knöpfe „Anrufen“/„E-Mail“ gibt es nur im Kartenmodus (UI-KONZEPT 7),
   die ausgeschriebenen Adressen nur in der Tabelle */
.tabelle .tabelle__nur-karten { display: none; }
.kontaktknoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.telefonnummer { white-space: nowrap; }
/* Breite Listen schrumpfen statt aus dem Rahmen zu ragen: Köpfe dürfen umbrechen, E-Mail-Adressen auch ohne
   Bindestrich (UI-KONZEPT 6: breite Tabellen scrollen nur im eigenen Container, nie die Seite) */
.tabelle td a[href^="mailto:"] { overflow-wrap: anywhere; }
.tabelle__zeilen { display: flex; flex-direction: column; gap: 2px; }
/* Kompakte Zeilen nur auf großen Bildschirmen mit Maus, nie auf Touch-Geräten (UI-KONZEPT 4.1) */
@media (min-width: 1280px) and (pointer: fine) {
  .tabelle--kompakt th, .tabelle--kompakt td { height: var(--row-h-compact); }
}

.sortierlink { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; text-decoration: none; min-height: var(--ziel-min); }
.sortierlink:hover { color: var(--ink); }
.sortierlink .icon { width: 13px; height: 13px; }
.sortierlink__neutral { opacity: .45; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ink); }

/* Unter 1280 px scrollt der Rahmen selbst (dann ohne mitlaufenden Kopf, der braucht das Fenster als Scrollbereich);
   darüber passt die schrumpfbare Tabelle in den Inhalt (Laptop mit 1280 px und Zoom liegt darunter) */
@media (max-width: 1279px) {
  .tabelle-rahmen { overflow-x: auto; }
  .tabelle thead th { position: static; }
}

/* Kartenmodus unter 640 px Containerbreite: Zeilen werden Karten, Beschriftung aus data-label */
@container tabelle (max-width: 640px) {
  .tabelle--karten thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tabelle--karten, .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten td { display: block; width: 100%; }
  .tabelle--karten tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
  .tabelle--karten tbody tr:last-child { border-bottom: 0; }
  /* Beschriftung links, der Zellinhalt rechts als eine Spalte: Text und Kinder stehen untereinander (Nebentext in
     eigener Zeile), statt als schmale Spalten nebeneinander mitten im Wort umzubrechen */
  .tabelle--karten td {
    height: auto; border: 0; padding: 2px 0;
    display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: var(--space-3); align-items: start;
    overflow-wrap: break-word;
  }
  .tabelle--karten td > * { grid-column: 2; min-width: 0; }
  /* Lange E-Mail-Adressen ohne Bindestrich brechen um, statt aus der Karte zu ragen (WCAG 1.4.10) */
  .tabelle--karten td a { overflow-wrap: anywhere; }
  .tabelle--karten td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 9; color: var(--ink-muted); font-weight: 600; font-size: var(--fs-xs); }
  .tabelle--karten td[data-label=""], .tabelle--karten td:not([data-label]) { display: block; }
  .tabelle--karten td[data-label=""]::before, .tabelle--karten td:not([data-label])::before { content: none; }
  .tabelle--karten td.tabelle__haupt { font-size: var(--fs-base); font-weight: 600; padding-bottom: var(--space-1); }
  .tabelle--karten td.tabelle__haupt > .tabelle__neben { font-weight: 400; }
  .tabelle--karten .objektlink__id { white-space: nowrap; }
  .tabelle--karten td.zahl { text-align: left; }
  .tabelle--karten tbody tr:hover td { background: none; }
  .tabelle--karten .tabelle__nur-karten, .tabelle--karten td.tabelle__nur-karten { display: block; padding: var(--space-2) 0 var(--space-1); }
  .tabelle--karten td.tabelle__nur-tabelle { display: none; }
  .tabelle--karten .kontaktknoepfe .knopf { min-height: var(--ziel-touch); }
}

/* ================================================================ Filterleiste (FilterBar), Suchfeld, Mehrfachauswahl */

.ergebnis[aria-busy="true"], .htmx-request.ergebnis { opacity: .55; transition: opacity var(--dauer) ease; }
.ergebnis { display: flex; flex-direction: column; gap: var(--space-3); }
/* Zeile über der Tabelle: Trefferzahl links, Sortiermenü rechts (UI-KONZEPT 3.3) */
.ergebnis__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ergebnis__zahl { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-muted); }
.ergebnis__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); }

/* Ansichten und Spalten-Sets nebeneinander; JobCard eines laufenden Syncs über einer Liste */
.ansichten-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.liste__lauf { max-width: 640px; }
/* Schlichte Liste von Objekten mit Badges (z. B. Einrichtungen im Überblick eines Trägers) */
.objektliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.objektliste > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Sortiermenü: dieselbe Gestalt wie die Mehrfachauswahl, rechtsbündig; im Kartenmodus fehlen die Spaltenköpfe */
.sortiermenue .mehrfach__panel { left: auto; right: 0; min-width: 240px; }
.sortiermenue__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
a.mehrfach__option { color: var(--ink); text-decoration: none; }
a.mehrfach__option[aria-current="true"] { font-weight: 700; color: var(--accent-2); }

.filterleiste { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.filterleiste__felder { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; flex: 1; }
/* Doppelte Klasse, damit .knopf (weiter unten) den Knopf am Desktop nicht wieder einblendet */
.filterleiste .filterleiste__oeffnen, .filterleiste__kopf-mobil { display: none; }
.filterleiste__titel-mobil { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }

.suchfeld { position: relative; flex: 1 1 260px; max-width: 420px; }
.suchfeld__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.suchfeld__eingabe {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3) var(--space-2) 38px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.mehrfach { position: relative; }
.mehrfach__knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mehrfach__knopf::-webkit-details-marker { display: none; }
.mehrfach[data-aktiv] .mehrfach__knopf { border-color: var(--accent-2); background: var(--accent-soft); color: var(--accent-2); }
.mehrfach__anzahl { padding: 0 7px; border-radius: var(--radius-pill); background: var(--accent-2); color: var(--on-accent); font-size: 11.5px; }
.mehrfach__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}
.mehrfach__suche {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.mehrfach__optionen { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mehrfach__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.mehrfach__option:hover { background: var(--surface-2); }
.mehrfach__option input { width: 18px; height: 18px; accent-color: var(--accent-2); }

.filterchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filterchips__titel { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 600; }
.filterchips__liste { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.filterchips__alle { font-size: var(--fs-sm); font-weight: 600; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 30px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip .icon { width: 14px; height: 14px; }
.chip--unbekannt { background: var(--warning-soft); color: var(--warning-ink); }
.filterchips__hinweis { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); color: var(--warning-ink); }

@media (max-width: 860px) {
  .filterleiste .filterleiste__oeffnen { display: inline-flex; }
  .filterleiste__felder { display: none; }
  .filterleiste--offen .filterleiste__felder {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 70;
    flex-direction: column;
    flex-wrap: nowrap; /* sonst bricht eine lange, aufgeklappte Auswahl in eine zweite Spalte um */
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
    overflow-y: auto;
    background: var(--bg);
  }
  .filterleiste--offen .filterleiste__kopf-mobil { display: flex; justify-content: space-between; align-items: center; }
  .filterleiste--offen .suchfeld { max-width: none; flex: none; }
  .filterleiste--offen .mehrfach__panel { position: static; box-shadow: none; max-height: none; }
}

/* ================================================================ Ansichtswahl (ViewSwitch) */

.segment {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.segment__label { font-size: var(--fs-xs); color: var(--ink-muted); font-weight: 600; padding: 0 var(--space-2); }
.segment__option {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.segment__option:hover { color: var(--ink); }
.segment__option[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ================================================================ Seiten (Pagination) */

.seiten { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.seiten__stand { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.seiten__liste { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; }
.seiten__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
a.seiten__link:hover { background: var(--surface-2); }
.seiten__link--aktiv { background: var(--accent-2); color: var(--on-accent); }
.seiten__link--aus { color: var(--ink-muted); opacity: .6; }
.seiten__luecke { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-muted); }

/* ================================================================ Knopf (Button) */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dauer) ease, border-color var(--dauer) ease, color var(--dauer) ease;
}
.knopf--klein { min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.knopf--primaer { background: var(--accent-2); color: var(--on-accent); }
.knopf--primaer:hover { background: var(--accent-2-hover); color: var(--on-accent); }
.knopf--sekundaer { background: var(--surface); color: var(--ink); border-color: var(--control-border); }
.knopf--sekundaer:hover { background: var(--surface-2); color: var(--ink); }
.knopf--ghost { background: transparent; color: var(--accent-2); }
.knopf--ghost:hover { background: var(--surface-2); color: var(--accent-2); }
.knopf--gefahr { background: var(--critical-ink); color: var(--on-critical); }
.knopf--gefahr:hover { background: var(--critical-hover); color: var(--on-critical); }
.knopf:disabled, .knopf[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.knopf[aria-busy="true"] { cursor: progress; }
.knopf-gruppe { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.knopf__grund { font-size: var(--fs-xs); color: var(--ink-muted); max-width: 32ch; white-space: normal; }

/* Touch-Ziele 44 px (UI-KONZEPT 4.1, 7): auf Touch-Geräten und unter 640 px */
@media (pointer: coarse), (max-width: 640px) {
  .knopf, .knopf--klein, .chip, .segment__option, .seiten__link, .seiten__luecke, .mehrfach__option,
  .mehrfach__knopf, .nutzermenu__gruppe label, .nutzermenu__option, .sortierlink, .tabs__tab {
    min-height: var(--ziel-touch);
  }
  .seiten__link { min-width: var(--ziel-touch); }
  .toast__schliessen { width: var(--ziel-touch); height: var(--ziel-touch); }
  .chip { padding-left: var(--space-4); }
}

/* ================================================================ Dialog (ConfirmDialog) */

.dialog {
  width: min(520px, calc(100vw - 2 * var(--space-4)));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}
.dialog::backdrop { background: var(--overlay); }
.dialog__form { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.dialog__titel { font-size: var(--fs-h3); }
.dialog__aktionen { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

/* ================================================================ Formular, Feld, Fehlerübersicht */

.formular { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
.feld { display: flex; flex-direction: column; gap: var(--space-1); }
.feld__label { font-size: var(--fs-sm); font-weight: 600; }
.feld__pflicht { font-weight: 500; font-size: var(--fs-xs); color: var(--ink-muted); }
.feld__hilfe { margin: 0; font-size: var(--fs-xs); color: var(--ink-muted); }
.feld__fehler { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--critical-ink); }
.feld input:not([type="checkbox"]):not([type="radio"]),
.feld select,
.feld textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.feld textarea { min-height: 96px; resize: vertical; }
.feld [aria-invalid="true"] { border-color: var(--critical-ink); box-shadow: 0 0 0 1px var(--critical-ink); }
.feld--checkbox { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.feld--checkbox .feld__hilfe, .feld--checkbox .feld__fehler { flex-basis: 100%; }
.feld input[type="checkbox"], .feld input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent-2); }
.feld__gruppe { border: 0; margin: 0; padding: 0; }
.feld__gruppe > div { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.feld__gruppe label { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; font-size: var(--fs-sm); }

.fehleruebersicht {
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--critical-ink);
  border-radius: var(--radius-md);
  background: var(--critical-soft);
}
.fehleruebersicht:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fehleruebersicht__titel { font-size: var(--fs-lg); color: var(--critical-ink); margin-bottom: var(--space-2); }
.fehleruebersicht__liste { margin: 0; padding-left: var(--space-5); }
.fehleruebersicht__liste a { color: var(--critical-ink); font-weight: 600; }

/* ================================================================ Hinweis (Alert) */

.hinweis {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--surface);
}
.hinweis__icon { width: 20px; height: 20px; margin-top: 2px; }
.hinweis__text { min-width: 0; flex: 1; }
.hinweis__titel { font-weight: 700; margin-bottom: var(--space-1); }
.hinweis__details { margin-top: var(--space-2); font-size: var(--fs-sm); }
.hinweis__details summary { cursor: pointer; color: var(--ink-muted); font-weight: 600; }
.hinweis--info { border-left-color: var(--accent-2); background: var(--accent-soft); }
.hinweis--info .hinweis__icon { color: var(--accent-2); }
.hinweis--erfolg { border-left-color: var(--success); background: var(--success-soft); }
.hinweis--erfolg .hinweis__icon { color: var(--success); }
.hinweis--warnung { border-left-color: var(--warning); background: var(--warning-soft); }
.hinweis--warnung .hinweis__icon, .hinweis--warnung .hinweis__titel { color: var(--warning-ink); }
.hinweis--fehler { border-left-color: var(--critical-ink); background: var(--critical-soft); }
.hinweis--fehler .hinweis__icon, .hinweis--fehler .hinweis__titel { color: var(--critical-ink); }

/* ================================================================ Toast */

.toasts {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(420px, calc(100vw - 2 * var(--space-4)));
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.toast__text { margin: 0; flex: 1; font-size: var(--fs-sm); font-weight: 600; }
.toast__form { margin: 0; }
.toast__schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.toast__schliessen:hover { background: var(--surface-2); color: var(--ink); }
.toast--erfolg { border-left-color: var(--success); }
.toast--info, .toast--neutral { border-left-color: var(--accent-2); }
.toast--warnung { border-left-color: var(--warning); }
.toast--fehler { border-left-color: var(--critical-ink); background: var(--critical-soft); }
.toasts--statisch { position: static; width: auto; }

@media (max-width: 640px) {
  .toasts { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); width: auto; }
}

/* Hinweis zur Datenqualität an einer Detailseite: Satz, darunter die Aktionen (UI-KONZEPT 3.4) */
.hinweiszeile { display: flex; flex-direction: column; gap: var(--space-1); }
.hinweiszeile + .hinweiszeile { padding-top: var(--space-3); border-top: 1px solid var(--warning); }
.hinweiszeile__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.hinweiszeile__link { font-size: var(--fs-sm); font-weight: 600; }

/* ================================================================ Leerzustand und Skelett */

.leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.leerzustand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-2);
}
.leerzustand__icon .icon { width: 22px; height: 22px; }
.leerzustand__titel { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); margin: 0; }
.leerzustand__text { color: var(--ink-muted); max-width: 52ch; margin: 0 0 var(--space-2); }

@keyframes skelett-einblenden { to { opacity: 1; } }
@keyframes skelett-puls { 50% { opacity: .55; } }
.skelett {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;
  animation: skelett-einblenden 1ms linear var(--skelett-verzoegerung) forwards;
}
.skelett__zeile {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: skelett-puls 1.4s ease-in-out infinite;
}
.skelett__zeile:nth-child(3n) { width: 72%; }
.skelett__zeile:nth-child(3n + 1) { width: 92%; }
@media (prefers-reduced-motion: reduce) {
  .skelett { opacity: 1; }
}

/* ================================================================ Zeitleiste (Timeline) */

.zeitleiste { display: flex; flex-direction: column; gap: var(--space-4); }
.zeitleiste__datum { font-size: var(--fs-sm); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); }
.zeitleiste__liste { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.zeitleiste__eintrag { position: relative; display: flex; gap: var(--space-3); padding: var(--space-1) 0 var(--space-2) var(--space-4); }
.zeitleiste__eintrag::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}
.zeitleiste__zeit { flex: none; width: 3.2em; color: var(--ink-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.zeitleiste__text { font-size: var(--fs-sm); min-width: 0; }
.zeitleiste__akteur { font-weight: 600; }
.zeitleiste__leer { color: var(--ink-muted); }

/* ================================================================ Arbeitsvorrat (WorkCard, Stufen) */

.stufe { display: flex; flex-direction: column; gap: var(--space-3); }
.stufe__titel { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.stufe__anzahl { font-weight: 500; text-transform: none; letter-spacing: 0; }
.stufe__karten, .stapel { display: flex; flex-direction: column; gap: var(--space-2); }
.stufe__weitere > summary, .stufe__aufklappen > summary { cursor: pointer; font-weight: 600; color: var(--accent-2); min-height: var(--ziel-min); }
.stufe__aufklappen[open] > summary { margin-bottom: var(--space-3); }
.stufe__mehr { color: var(--ink-muted); font-size: var(--fs-sm); margin-top: var(--space-2); }
/* Seitenspalte des Arbeitsvorrats: Beiträge der Module („Läuft gerade“, „Zuletzt erledigt“), je eine Karte */
.arbeitsvorrat__neben { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.arbeitsvorrat__ruhe { display: flex; align-items: center; gap: var(--space-2); color: var(--success); font-weight: 600; }

.arbeitskarte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.arbeitskarte--erledigen { border-left-color: var(--critical-ink); }
.arbeitskarte--wartet { border-left-color: var(--accent-2); }
.arbeitskarte--im_blick { box-shadow: none; }
.arbeitskarte--fehler { border-left-color: var(--warning); background: var(--warning-soft); }
.arbeitskarte__satz { margin: 0; font-weight: 600; }
.arbeitskarte__zusatz { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-1); }
@media (max-width: 640px) {
  .arbeitskarte { grid-template-columns: 1fr; gap: var(--space-2); }
  .arbeitskarte__aktion { justify-self: start; }
}

/* ================================================================ Hintergrundlauf (JobCard) */

/* Der Stand (.jobkarte__stand) wird alle 2 s ersetzt; mit display: contents stehen seine Teile im Raster der
   Karte: Badge rechts neben dem Titel, alles Übrige darunter über die volle Breite. */
.jobkarte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.jobkarte--kompakt { padding: var(--space-2) var(--space-3); gap: var(--space-1) var(--space-3); }
.jobkarte__kopf { grid-column: 1; grid-row: 1; min-width: 0; }
.jobkarte__stand { display: contents; }
.jobkarte__stand > .badge { grid-column: 2; grid-row: 1; justify-self: end; }
.jobkarte__stand > :not(.badge) { grid-column: 1 / -1; }
.abfrage-hinweis { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--warning-ink); }
.jobkarte__titel { font-weight: 700; text-decoration: none; }
a.jobkarte__titel:hover { text-decoration: underline; }
.jobkarte__fortschritt { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.jobkarte__zahl { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.jobkarte__phase, .jobkarte__meldung { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.jobkarte__fehler { margin: 0; font-size: var(--fs-sm); color: var(--warning-ink); font-weight: 600; display: flex; align-items: center; gap: var(--space-1); }
.jobkarte--unterbrochen, .jobkarte:has(> .jobkarte__stand--unterbrochen) { border-color: var(--warning); background: var(--warning-soft); }
.jobkarte--fehlgeschlagen, .jobkarte:has(> .jobkarte__stand--fehlgeschlagen) { border-color: var(--critical); }

.fortschritt {
  flex: 1 1 200px;
  height: 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  appearance: none;
}
.fortschritt::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--radius-pill); }
.fortschritt::-webkit-progress-value { background: var(--accent-2); border-radius: var(--radius-pill); }
.fortschritt::-moz-progress-bar { background: var(--accent-2); border-radius: var(--radius-pill); }
/* Läuft, aber die Gesamtzahl steht noch nicht fest: wandernder Abschnitt (ohne Bewegung bei reduced-motion) */
.fortschritt:indeterminate {
  background: linear-gradient(90deg, var(--surface-2) 0 35%, var(--accent-2) 35% 55%, var(--surface-2) 55% 100%);
  background-size: 200% 100%;
  animation: fortschritt-unbestimmt 1.4s linear infinite;
}
.fortschritt:indeterminate::-webkit-progress-bar { background: transparent; }
.fortschritt:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes fortschritt-unbestimmt { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ================================================================ Topbar: Suche und Nutzermenü */

.topsuche { position: relative; flex: 1 1 340px; max-width: 520px; }
.topsuche__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.topsuche__eingabe {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) 72px var(--space-2) 38px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: var(--bg);
}
.topsuche__kuerzel {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 11px;
  pointer-events: none;
}
.topsuche__liste {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}
.topsuche__gruppe + .topsuche__gruppe { margin-top: var(--space-2); }
.topsuche__gruppentitel { margin: var(--space-1) var(--space-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.topsuche__leer, .topsuche__fehler { margin: var(--space-2); color: var(--ink-muted); font-size: var(--fs-sm); }
.topsuche__alle { display: block; margin-top: var(--space-2); padding: var(--space-2); border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; }

.trefferliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.treffer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; border-radius: var(--radius-sm); }
.treffer__link { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 240px; min-width: 0; padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.treffer__link:hover, .treffer__link:focus-visible { background: var(--surface-2); }
.treffer__icon { width: 18px; height: 18px; color: var(--ink-muted); }
.treffer--traeger .treffer__icon { color: var(--typ-traeger); }
.treffer--einrichtung .treffer__icon { color: var(--typ-einrichtung); }
.treffer--person .treffer__icon { color: var(--typ-person); }
.treffer--veranstaltung .treffer__icon { color: var(--typ-veranstaltung); }
.treffer__text { display: flex; flex-direction: column; min-width: 0; }
.treffer__titel { font-weight: 600; }
.treffer__unter { font-size: var(--fs-xs); color: var(--ink-muted); }
.treffer__aktionen { display: flex; gap: var(--space-2); padding-right: var(--space-2); }

.suchseite__form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.suchergebnis { display: flex; flex-direction: column; gap: var(--space-5); }
.suchergebnis__anzahl { color: var(--ink-muted); font-weight: 600; margin: 0; }
.suchgruppe { display: flex; flex-direction: column; gap: var(--space-2); }
.suchgruppe__titel { font-size: var(--fs-lg); }
.suchgruppe__alle { font-size: var(--fs-sm); font-weight: 600; }

.nutzermenu { position: relative; }
.nutzermenu__knopf { border: 0; padding: 2px; background: transparent; border-radius: 50%; cursor: pointer; display: inline-flex; }
.nutzermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}
.nutzermenu__name { margin: 0; font-weight: 700; }
.nutzermenu__rolle { margin: 0; font-size: var(--fs-xs); color: var(--ink-muted); }
.nutzermenu__gruppe { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-sm); }
.nutzermenu__gruppe legend { font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin-bottom: var(--space-1); }
.nutzermenu__gruppe label, .nutzermenu__option { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; font-size: var(--fs-sm); }
.nutzermenu form { margin: 0; }
/* Aufklappliste der Hintergrundläufe: Gestalt des Nutzermenüs, ohne Dreieck am summary; mobil linksbündig,
   sonst ragt das Panel links aus dem Bild */
.laeufe-topbar > summary { list-style: none; cursor: pointer; }
.laeufe-topbar > summary::-webkit-details-marker { display: none; }

.topbar__suche-knopf { display: none; }

/* Mobil genau eine Zeile (UI-KONZEPT 3.1: „[=] Träger › FEBB [Suche]“). Das Suchfeld klappt über den Knopf
   „Suche“ unter der Topbar auf; ohne Skript steht es als zweite Zeile da. Der Datenstand steht dann im
   Seitenkopf, die Läufe nur als Symbol. */
@media (max-width: 860px) {
  .laeufe-topbar > .nutzermenu__panel { position: fixed; top: calc(var(--topbar-h) + var(--space-1)); left: var(--space-4); right: var(--space-4); width: auto; }
  .topsuche__kuerzel { display: none; }
  .topsuche__eingabe { padding-right: var(--space-3); }
  .topbar__suche-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ziel-touch);
    height: var(--ziel-touch);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    flex: none;
  }
  .topbar__suche-knopf[aria-expanded="true"] { background: var(--surface-2); }
  .mit-js .topsuche { display: none; }
  .mit-js .topbar--suche-offen .topsuche {
    display: block;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    max-width: none;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
  }
  .mit-js .topbar--suche-offen .topsuche__icon { left: calc(var(--space-4) + 12px); }
  .ohne-js .topsuche { order: 6; flex-basis: 100%; max-width: none; }
  .topbar__status > .datenstand { display: none; }
  .laeufe-topbar > summary > span:not(.sr-only) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .laeufe-topbar > summary > .icon:last-child { display: none; }
  .laeufe-topbar > summary { min-height: var(--ziel-touch); min-width: var(--ziel-touch); justify-content: center; }
}

/* ================================================================ Detailseite */

.detail { display: flex; flex-direction: column; gap: var(--space-5); }
.detail__kopf { display: flex; flex-direction: column; gap: var(--space-2); }
.detail__titel:focus { outline: none; }
.detail__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.detail__chips:empty, .detail__meta:empty { display: none; }
.detail__meta { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.detail__aktionen { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.detail__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.detail__steckbrief:empty { display: none; }
.detail__tab { padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.detail__tab.htmx-request { opacity: .55; }
@media (min-width: 1280px) {
  .detail__raster { grid-template-columns: minmax(0, 1fr) var(--breite-steckbrief); }
}
@media (max-width: 1279px) {
  .detail__steckbrief { order: -1; }
}

/* ================================================================ Fehlerseite, Anmeldung, Hilfe */

.fehlerseite {
  max-width: 720px;
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.fehlerseite__titel { margin-bottom: var(--space-4); }
.fehlerseite__titel:focus { outline: none; }
.fehlerseite__aktionen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.fehlerseite__id { font-size: var(--fs-xs); color: var(--ink-muted); }

.anmeldung {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
  margin: var(--space-7) auto 0;
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.anmeldung__text { color: var(--ink-muted); }
.anmeldung__knopf { align-self: flex-start; }
.anmeldung__dev { font-size: var(--fs-sm); }

.prosa { max-width: 72ch; }
.prosa h2 { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-2); }
.prosa h3 { font-size: var(--fs-lg); margin: var(--space-5) 0 var(--space-2); }
.prosa ul, .prosa ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
.prosa li + li { margin-top: var(--space-1); }
.prosa table { border-collapse: collapse; margin: var(--space-3) 0; }
.prosa th, .prosa td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; font-size: var(--fs-sm); }
.prosa kbd { padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.hilfe__themen { margin: 0; padding-left: var(--space-5); columns: 2 260px; }

/* ================================================================ Styleguide (/system/komponenten/) */

.sg { display: flex; flex-direction: column; gap: var(--space-7); }
.sg__inhalt { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.sg__abschnitt { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.sg__abschnitt > h2 { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.sg__beschreibung { color: var(--ink-muted); font-size: var(--fs-sm); margin: 0; }
.sg__reihe { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sg__schmal { max-width: 360px; }
.sg__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.sg__thema { padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); }
.sg__code { font-size: var(--fs-xs); color: var(--ink-muted); }
.sg__farbe { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); }
.sg__muster { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.sg__muster--bg { background: var(--bg); }
.sg__muster--surface { background: var(--surface); }
.sg__muster--surface-2 { background: var(--surface-2); }
.sg__muster--ink { background: var(--ink); }
.sg__muster--ink-muted { background: var(--ink-muted); }
.sg__muster--accent { background: var(--accent); }
.sg__muster--accent-2 { background: var(--accent-2); }
.sg__muster--accent-soft { background: var(--accent-soft); }
.sg__muster--success { background: var(--success); }
.sg__muster--warning { background: var(--warning); }
.sg__muster--warning-ink { background: var(--warning-ink); }
.sg__muster--critical-ink { background: var(--critical-ink); }
.sg__muster--focus-ring { background: var(--focus-ring); }
.sg__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.sg__icons li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--ink-muted); }
.sg__icons .icon { color: var(--ink); width: 20px; height: 20px; }