/* ─────────────────────────────────────────────────────────────
   SiKi Admin Center — Anwendungsschicht auf dem Konzeptsan-Design-System
   Marke: Siki (Pink). Ladereihenfolge: tokens.css -> brand-siki.css ->
   diese Datei. Hier steht ausschliesslich, was das Admin Center an
   Bausteinen braucht und was das Design-System selbst nicht abdeckt
   (Tabellen, Status-Chips, Modal, Chat-Verlauf) - keine Neudefinition
   von Farben, Radien oder Schriftgraden, die tokens.css schon hat.

   Markenfarbe bewusst sparsam (s. brands/siki/BRAND.md: "nie als Flaeche
   einsetzen"): Logo, aktiver Navigationspunkt, Fokusring, primaere
   Aktion. Alles Funktionale nutzt --brand-ui (= --brand-deep #F84B86),
   weil --brand auf dem kuehlen Off-White nur 2.21:1 erreicht.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ─── Statusfarben — dokumentierte Erweiterung ────────────────
     Das Design-System kennt keine UI-Status ("Support palette ...
     not as UI states"), ein Admin Center braucht sie aber: laeuft /
     abgebrochen / Fehler / Kategorie-Chips. Gewaehlt sind gedeckte
     Toene, die neben dem kuehlen Off-White bestehen, ohne mit dem
     Marken-Pink zu konkurrieren - Pink bleibt ausschliesslich der
     Marke vorbehalten und wird nie als Statusfarbe verwendet.
     Flaechentoene sind an rgba(228,238,250,1) angelehnt, den zweiten
     Blauton der Live-Seite simplisan.de. */
  --status-ok:        rgb(31, 107, 79);
  --status-ok-soft:   rgb(226, 240, 234);
  --status-risk:      rgb(169, 50, 38);
  --status-risk-soft: rgb(247, 228, 225);
  --status-warn:      rgb(138, 90, 18);
  --status-warn-soft: rgb(246, 235, 218);
  --status-info:      rgb(42, 92, 153);
  --status-info-soft: rgb(228, 238, 250);
  --status-neutral:      var(--ink-muted);
  --status-neutral-soft: rgb(233, 237, 244);

  /* Monospace nur fuer echte Maschinendaten (Pfade, IDs, Kennzahlen,
     Skriptausgabe). Das Design-System kennt eine einzige Schrift; fuer
     tabellarische Logdaten ist Host Grotesk aber die falsche Wahl, weil
     die Ziffern nicht dimensionsgleich laufen. Bewusste Erweiterung,
     nirgends fuer Flaechentext oder Bedienelemente. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Breite der Seitenleiste. 264px wie im Onboarding-Portal der Gruppe
     (/opt/onboarding); das 4er-Raster des Design-Systems endet bei
     --space-10 (136px) und kennt ueberhaupt keine Layoutmasse, deshalb
     ein eigener Wert an genau einer Stelle statt einer Zahl im Bauteil. */
  --nav-w: 16.5rem;

  /* ─── Bruecke zu den alten Token-Namen ───────────────────────
     Einzelne Partials setzen Farben noch inline (z.B.
     _api_log_liste.html). Statt sie alle umzuschreiben zeigen
     die alten Namen auf die Design-System-Token - damit gibt es
     weiterhin nur eine Farbquelle. */
  --paper:      var(--bg);
  --surface:    var(--bg-elev);
  --ink-soft:   var(--ink-muted);
  --ink-faint:  var(--ink-muted);
  --accent:     var(--brand-ui);
  --risk:       var(--status-risk);
  --font-body:  var(--font-sans);
  --font-display: var(--font-sans);
}

* { box-sizing: border-box; }

body {
  font: var(--t-body-sm);
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--brand-ui); }

/* Fokus - dokumentierte Abweichung von --ring-focus aus brand-siki.css:
   dessen 35% transparentes Pink erreicht auf Weiss nur 1.3:1, WCAG 2.4.11
   verlangt fuer Fokusanzeigen 3:1. Traeger des Rings ist deshalb eine
   deckende Linie in --ink (13.7:1 auf Weiss, 6.2:1 auf der Markenflaeche),
   der weiche Markenschimmer bleibt als Schatten darunter.
   outline statt box-shadow ist dabei der Punkt: ein Element mit eigenem
   box-shadow (.nav-thema-btn.thema-aktiv traegt darin seinen
   Markenbalken) hat die hoehere Spezifitaet und loeschte den Ring sonst
   ersatzlos - der aktive Navigationspunkt zeigte beim Tabben gar keinen.
   Kein border-radius hier: outline folgt dem Radius des Elements selbst,
   ein eigener Wert machte aus runden Knoepfen beim Fokussieren eckige. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: var(--ring-focus);
}

code, .mono, pre { font-family: var(--font-mono); }
/* Maschinentext bricht notfalls mitten im Wort: Commit-Texte, Skriptausgaben
   und Pfade enthalten Zeichenfolgen ohne Trennmoeglichkeit (Session-URLs,
   Modulpfade wie ui_server.py:api_...), die auf 390px sonst ueber den Rand
   hinauslaufen und - anders als eine Tabelle, die ihren eigenen Rahmen hat -
   die ganze Seite mit aufschieben. */
code, pre.entwurf, .update-text { overflow-wrap: anywhere; }
code {
  font-size: 0.85em; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0.1em 0.35em;
}

/* ─── Navigation ───────────────────────────────────────────────
   Seitenleiste links statt Kopfleiste. Das Design-System beschreibt nur
   die Navigation einer Marketing-Seite (hohe "First view"-Leiste und
   kompakter "Sticky"-Zustand) und kennt keine Anwendungs-Shell; Vorbild
   fuer Aufbau und Masse ist deshalb das Onboarding-Portal der Gruppe
   (/opt/onboarding), das auf derselben Token- und Markenschicht sitzt.
   Uebernommen ist dessen Geometrie, nicht dessen Farbgebung: dort steht
   die Markenfarbe hartcodiert im Bauteil und faerbt zusaetzlich den
   aktiven Menuetext - beides waere hier falsch, s. .nav-thema-btn.
   Der Gewinn ist nicht nur optisch: senkrecht ist Platz fuer beide
   Ebenen, sodass jedes Thema direkt anspringbar ist, statt dass ein
   Klick auf eine Gruppe alle ihre Themen untereinander stapelt. Welche
   Gruppen und Themen es gibt, steht in simplisan/navigation.py. */
.layout { display: flex; align-items: flex-start; }

#hauptnav {
  position: sticky; top: 0; z-index: 21;
  flex: 0 0 var(--nav-w); width: var(--nav-w); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--space-4) var(--space-4);
  padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  /* Schleier und Blurwert unveraendert aus dem "Sticky"-Zustand des
     Design-Systems - die Leiste bleibt der einzige Ort mit Blur. */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(7.9px); -webkit-backdrop-filter: blur(7.9px);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* Wortmarke als Bild statt als Text - logo-primary.svg ist bei Siki die
   verbindliche Fassung (abweichende Schriftzugposition, s. BRAND.md),
   deshalb unveraendert eingebunden und nicht nachgebaut. */
.nav-marke { display: block; margin: 0 var(--space-2) var(--space-2); }
.nav-marke img { height: 1.9rem; width: auto; display: block; }

/* Leise Bereichsangabe unter der Marke: benennt, was das hier ist, ohne
   eine zweite Ueberschrift neben den Themen-Titeln aufzumachen. */
.nav-untertitel {
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 var(--space-2) var(--space-5);
}

.nav-menu { display: flex; flex-direction: column; }
.nav-themen { display: flex; flex-direction: column; gap: 2px; }

/* Der Gruppenname ist seit dem Wechsel auf die Seitenleiste eine reine
   Beschriftung und kein Bedienelement mehr - jedes Thema darunter ist
   direkt anklickbar, eine Gruppe hat nichts mehr zu schalten. */
.nav-gruppe {
  font: var(--t-meta); font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  margin: var(--space-5) var(--space-2) var(--space-2);
}
.nav-gruppe:first-child { margin-top: 0; }

.nav-thema-btn {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; cursor: pointer;
  font: var(--t-nav); font-weight: var(--fw-medium); color: var(--ink-muted);
  background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: color .15s ease, background .15s ease;
}
.nav-thema-btn .icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
/* Mit .nav-menu davor, weil die globale Regel button:hover:not(:disabled)
   (0,2,1) weiter unten sonst gewinnt und jeden Menuepunkt beim Ueberfahren
   schwarz faerbt - so stand es bis Issue #105 unbemerkt im Betrieb. Der
   Menuepunkt ist kein Aktionsknopf und bekommt nur die leise Flaeche. */
.nav-menu .nav-thema-btn:hover { color: var(--ink); background: var(--bg-soft); }
.nav-menu .nav-thema-btn.thema-aktiv:hover { background: var(--bg-elev); }

/* Aktiver Punkt: die Marke steckt allein im Balken links, Flaeche und
   Text kommen aus den neutralen Token. Zwei Dinge aus dem Vorbild
   bleiben hier bewusst aussen vor:
   - Es tont die Flaeche des aktiven Eintrags in der Markenfarbe.
     brands/siki/BRAND.md verbietet das fuer Siki ausdruecklich ("nie
     als Flaeche einsetzen"), und das Admin Center hatte es fuer die alte
     Kopfleiste bereits so entschieden. Die Flaeche ist deshalb
     --bg-elev mit Haarlinie, genau wie vorher.
   - Es faerbt zusaetzlich den Text in der dunklen Markenfarbe. Bei
     Simplisan-Orange geht das auf; Siki-Pink liegt mit --brand-deep
     auf --bg bei 3.11:1 (s. BRAND.md) und damit unter den 4.5:1, die
     Fliesstext braucht. Das Wort bleibt --ink.
   Der Balken sitzt als inset-Schatten im Knopf, nicht als ::before am
   Rand der Leiste wie im Vorbild - dieselbe Bauart wie die
   Unterstreichung, die die Kopfleiste vorher trug und die
   tenants/siki.html weiterfuehrt. */
.nav-thema-btn.thema-aktiv {
  color: var(--ink);
  background: var(--bg-elev); border-color: var(--line);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Abmelden steht unten und bleibt die leiseste Aktion der Leiste. */
.nav-fuss { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
/* Wer angemeldet ist und als was (Issue #104): Name fett, Rolle gedaempft
   darunter, ueber dem Abmelden-Knopf. */
.nav-angemeldet {
  margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 0.1rem;
  font-size: var(--fs-14); color: var(--ink);
  overflow-wrap: anywhere;
}
.nav-angemeldet span { color: var(--ink-muted); font-size: var(--fs-12); }
.nav-abmelden { margin: 0; }
.nav-abmelden button {
  width: 100%; font-size: var(--fs-14); padding: 0.35rem 0.8rem;
  border-color: var(--line-strong); color: var(--ink-muted);
}
.nav-abmelden button:hover { background: var(--ink); border-color: var(--ink); color: var(--ink-on-dark); }

/* Schalter und Schleier gehoeren zur Schubladenfassung weiter unten und
   sind oberhalb des Umbruchs nie sichtbar. */
.nav-schalter, .nav-schleier { display: none; }

/* ─── Seitenaufbau ─────────────────────────────────────────────
   Grosszuegiger Aussenabstand statt der 122px des Marketing-Grids -
   ein Arbeitswerkzeug darf dichter sein als eine Startseite, behaelt
   aber die ruhige Spaltenbreite. Linksbuendig neben der Leiste statt
   mittig im Fenster, wie im Onboarding-Portal: die Spalte soll dort
   anfangen, wo die Navigation aufhoert. */
main {
  flex: 1 1 auto; min-width: 0; max-width: 78rem;
  padding: var(--space-7) var(--space-6) var(--space-9);
  padding-top: calc(var(--space-7) + env(safe-area-inset-top, 0px));
}

.thema { margin-bottom: var(--space-9); }
.thema[hidden] { display: none; }

.thema-kicker {
  font: var(--t-body-sm); color: var(--ink-muted);
  margin: 0 0 var(--space-1);
}
.thema-titel {
  font: var(--t-h2); color: var(--ink); margin: 0 0 var(--space-6);
  letter-spacing: -0.08px;  /* wie auf simplisan.de fuer Displaygrade */
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--line);
}

section { margin-bottom: var(--space-4); }

/* "SiKi Tenants" ist ein eigenstaendiges, breiteres Layout. Solange die
   Navigation oben lag, rechnete sich der Rahmen dafuer per 100vw aus der
   Spaltenbreite von <main> heraus; neben einer Seitenleiste waere er
   damit unter ihr gelandet. Noetig ist das nicht mehr: <main> ist mit
   78rem breiter als die frueheren 1000px, der Rahmen fuellt sie einfach. */
/* Die Hoehe setzt das Skript in index.html auf die Inhaltshoehe des
   eingebetteten Dokuments (gleiches Origin ueber den Reverse-Proxy). Der
   Viewport-Wert hier ist nur der Startwert, bis das geschehen ist: fest an
   den Viewport gebunden bekam der Bereich zwei Scrollbalken uebereinander,
   sobald Mandanten angelegt waren. */
.thema-embed {
  border: 0; display: block; width: 100%;
  height: calc(100vh - var(--space-9)); min-height: 24rem;
  background: var(--bg-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}

/* ─── Bedienelemente ───────────────────────────────────────────
   Umrissbutton nach Systemvorgabe (1px Haarlinie in --ink, Invertieren
   beim Hover, 1px Versatz beim Druecken). */
/* Ein Link in Knopfform ist ein Knopf: keine Unterstreichung, die ein <a>
   sonst aus der Grundregel erbt (Issue-Board-Knopf unter Fortschrittsberichte). */
a.btn { text-decoration: none; }
button, .btn {
  font: var(--t-button); color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, transform .08s ease, border-color .15s ease;
}
button:hover:not(:disabled) { background: var(--ink); color: var(--ink-on-dark); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; font-weight: var(--fw-light); }

/* Primaere Aktion: Markenflaeche, Text in --ink (bei Siki nie weiss -
   weiss auf Pink waere 2.35:1). Bewusst nur fuer die jeweils eine
   abschliessende Aktion eines Formulars - und deshalb an .primaer
   gebunden statt an button[type=submit]: ueber den Typ bekam jede
   Zeilenaktion einer Liste eine Markenflaeche (vier gleich gewichtete
   Pink-Flaechen untereinander auf der Skripte-Seite, "Gut" als Pink neben
   dem roten "Nicht optimal", wo Pink sich als Status liest). Genau das
   nimmt der Farbe die Sparsamkeit, auf der BRAND.md besteht. */
button.aktiv, button.primaer {
  background: var(--brand); border-color: var(--brand); color: var(--fg-on-brand);
}
/* Abweichung von .ds-btn--primary in tokens.css, das hier auf Weiss wechselt:
   brands/siki/BRAND.md legt fuer Siki ausdruecklich fest "Text auf der
   Markenfarbe ist --ink, nie weiss". Das deckt sich mit den Zahlen - auf
   --brand-deep erreicht --ink 4.3:1, Weiss nur 3.3:1. */
button.aktiv:hover, button.primaer:hover {
  background: var(--brand-deep); border-color: var(--brand-deep); color: var(--fg-on-brand);
}
button.primaer:disabled, button.primaer:disabled:hover {
  background: var(--brand); border-color: var(--brand); color: var(--fg-on-brand);
}

.btnLoeschen {
  background: transparent; border-color: var(--status-risk); color: var(--status-risk);
  font-size: var(--fs-14); padding: 0.35rem 0.8rem;
}
.btnLoeschen:hover:not(:disabled) { background: var(--status-risk); border-color: var(--status-risk); color: var(--ink-on-dark); }

/* Runder Icon-Button, 41x41 - das wiederkehrende Gegenstueck zum
   Umrissbutton im Design-System. */
.iconbtn {
  width: 41px; height: 41px; min-width: 41px; border-radius: var(--radius-pill);
  border: 1px solid var(--ink); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* input[type=email] gehoert mit in die Liste: ohne ihn stand das
   E-Mail-Feld im Benutzerformular als rahmenloser Strich zwischen
   zwei gerahmten Feldern - die Browservorgabe, weil hier nach Typ
   und nicht nach Element ausgewaehlt wird. */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], textarea, select {
  font: var(--t-body-sm); color: var(--ink);
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg-elev);
  min-width: 16rem;
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 0.8; }
input:hover, textarea:hover, select:hover { border-color: var(--ink-muted); }
textarea { min-height: 3.2rem; resize: vertical; font-family: var(--font-sans); }
select { min-width: 10rem; cursor: pointer; }
input[type=checkbox] { accent-color: var(--brand-deep); width: 1rem; height: 1rem; }
label { font: var(--t-body-sm); color: var(--ink); }

.formular { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); align-items: flex-start; }
.formular input, .formular textarea { flex: 1 1 10rem; }
form.inline { display: inline; }
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ─── Tabs im Transkript-Modal ──────────────────────────────────
   Der aktive Tab traegt einen Balken in der Markenfarbe, keine Flaeche:
   brands/siki/BRAND.md schliesst Pink als Flaeche aus, und --brand-deep auf
   --bg erreicht nur 3.11:1 (Fliesstext braucht 4.5:1). Gleiche Loesung wie
   der aktive Navigationspunkt in der Seitenleiste. */
.tabs-transkript { border-bottom: 1px solid var(--line); gap: 0; margin-bottom: var(--space-4); }
.tab-btn {
  background: none; border: none; border-bottom: 3px solid transparent;
  border-radius: 0; color: var(--ink-muted); padding: var(--space-2) var(--space-3);
  font: var(--t-body-sm);
}
.tab-btn:hover:not(:disabled) { background: var(--bg-soft); color: var(--ink); }
.tab-btn.tab-aktiv { color: var(--ink); border-bottom-color: var(--brand-ui); font-weight: var(--fw-medium); }
/* Ausdruecklich, weil eine eigene display-Regel die Browserregel fuer
   [hidden] schlaegt - genau dieser Fehler liess im Mandanten-Portal
   ausgeblendete Bausteine sichtbar bleiben. */
.tab-inhalt[hidden] { display: none; }

/* ─── Bewertung einzelner Objekte ──────────────────────────────── */
.beitrag { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.beitrag:last-child { border-bottom: none; }
/* Nicht zugestellter Beitrag: gedeckte Statusfarbe (dokumentierte Erweiterung
   des Design-Systems, s. oben) statt eines eigenen Rot - der Fall ist eine
   Warnung, kein Defekt der Oberflaeche. */
.zustellung-fehler {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--status-warn);
  background: var(--status-warn-soft);
  color: var(--status-warn);
  font-size: var(--fs-12);
  border-radius: var(--radius-xs);
}
.zustellung-fehler .mono { font-size: var(--fs-10); overflow-wrap: anywhere; }
.bewertung-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font: var(--t-meta); color: var(--ink-muted); margin: var(--space-2) 0;
}
/* Seit dem Bewerter (Issue #110) ist die Meta-Angabe laenger; auf schmalen
   Bildschirmen darf sie umbrechen, statt die Seite aufzuschieben. */
.bewertung-zeile .update-meta { white-space: normal; }
.bewertung-kommentar { color: var(--ink); }
/* Die Bewertungsformulare stehen dicht unter ihrem Objekt und sollen den
   Blick nicht vom Gespraech wegziehen: kleiner, gedeckt, ohne Markenflaeche. */
.bewertung-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.bewerten-schnell { font-size: var(--fs-14); padding: 0.25rem 0.7rem; }
.bewertung-detail > summary {
  cursor: pointer; font: var(--t-meta); color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.bewertung-detail > summary:hover { color: var(--ink); }
.bewertung-detail[open] { display: block; flex: 1 1 100%; }
.formular-bewertung, .formular-korrektur { margin-top: var(--space-2); gap: var(--space-2); }
.formular-bewertung select, .formular-korrektur input { font-size: var(--fs-14); }
.formular-bewertung button, .formular-korrektur button { font-size: var(--fs-14); padding: 0.3rem 0.8rem; }

/* ─── Flaechen ─────────────────────────────────────────────────
   Karte nach Systemvorgabe: 16px Radius, Weiss->transparent-Verlauf,
   sehr weicher Schatten. */
.karte, .sip-block, #modal .inhalt {
  background: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.55) 100%);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.sip-block { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); }
.sip-block h3 { font: var(--t-body); font-weight: var(--fw-medium); margin: 0 0 var(--space-2); color: var(--ink); }

h3 { font: var(--t-body); font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 var(--space-3); }
h4 { font: var(--t-body-sm); font-weight: var(--fw-semibold); color: var(--ink); margin: var(--space-5) 0 var(--space-2); }

.hinweis { font: var(--t-meta); color: var(--ink-muted); max-width: 68ch; }
/* Einleitungssatz direkt unter der Bereichsueberschrift. */
.einleitung { margin: 0 0 var(--space-5); }
.fehler { color: var(--status-risk); }
/* Nur die Inline-Variante richtet ein Icon aus - auf einem <p> wuerde
   inline-flex den Absatz auf seine Inhaltsbreite zusammenziehen. */
span.fehler { display: inline-flex; align-items: center; gap: var(--space-1); }

/* Ausfall einer einzelnen Datenquelle der Startseite (s. index() in
   ui_server.py, templates/_bereich_ausfall.html). Dieselbe gedeckte
   Risk-Farbe wie das Fehlerband, aber im Textfluss statt schwebend: der
   Ausfall gehoert zu diesem einen Bereich, nicht zur letzten Aktion. */
.bereich-ausfall {
  max-width: 68ch; margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--status-risk-soft); color: var(--status-risk);
  border: 1px solid var(--status-risk); border-radius: var(--radius-md);
  font: var(--t-body-sm);
}
.bereich-ausfall .bereich-ausfall-meldung {
  display: block; margin-top: var(--space-1);
  font-family: var(--font-mono); font-size: var(--fs-12);
  overflow-wrap: anywhere;
}

.feld-breit { flex: 1 1 20rem; }
.filter-label { display: flex; align-items: center; gap: var(--space-2); font: var(--t-meta); color: var(--ink-muted); }
.sortier-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.sortier-link:hover { color: var(--ink); }
.tabs-blaettern { justify-content: space-between; }
.tabs-blaettern button { display: inline-flex; align-items: center; gap: var(--space-2); }
.bewertung-block-eng { margin-top: var(--space-3); padding-top: var(--space-3); }

details summary { cursor: pointer; font: var(--t-meta); color: var(--ink-muted); margin-top: var(--space-2); }
details summary:hover { color: var(--ink); }

pre.entwurf {
  white-space: pre-wrap; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--space-3);
  font: var(--t-meta); font-family: var(--font-mono); color: var(--ink);
}
pre.entwurf.skript-ausgabe { max-height: 16rem; overflow-y: auto; font-size: var(--fs-12); }

/* ─── Tabellen ─────────────────────────────────────────────────
   Nur Haarlinien, keine Zebrastreifen - dieselbe Zurueckhaltung wie
   bei den Trennlinien im Design-System. */
/* Breite Tabellen scrollen in ihrem eigenen Rahmen, statt das ganze
   Dokument aufzuschieben: auf 390px schob die Gespraechs-Tabelle die Seite
   auf 894px, die rechten Spalten waren nicht erreichbar. Ein frueheres
   body{overflow-x:hidden} hat das nur verdeckt - es unterdrueckt den
   Scrollbalken, nicht den Ueberhang.
   position: relative macht den Rahmen zum Bezug fuer absolut
   positionierte Kinder: ein .nur-vorlesen im Tabellenkopf (Seite
   "Optimierung", Issue #114) entkam sonst dem Scrollrahmen und schob die
   Seite auf 390px trotzdem auf 938px. */
.tabelle-rahmen { overflow-x: auto; position: relative; }

table { border-collapse: collapse; width: 100%; font: var(--t-body-sm); }
td, th { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
th {
  font: var(--t-meta); font-weight: var(--fw-medium); color: var(--ink-muted);
  border-bottom-color: var(--line-strong);
}
tbody tr:hover { background: rgba(255, 255, 255, 0.6); }
td.zahl, .metriken-tabelle td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.metriken-tabelle { margin: 0 0 var(--space-4); font-size: var(--fs-14); }

/* ─── Chips ────────────────────────────────────────────────────
   Ein einziges Chip-Muster fuer Kanal, Kategorie und Status. */
.anruftyp, .kategorie, .referenz {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
  font: var(--t-meta); white-space: nowrap;
  background: var(--status-neutral-soft); color: var(--status-neutral);
}
.anruftyp .icon, .kategorie .icon, .referenz .icon { flex-shrink: 0; }

.anruftyp.eingehend, .anruftyp.ausgehend { background: var(--status-ok-soft); color: var(--status-ok); }
.anruftyp.whatsapp, .anruftyp.whatsapp-test, .anruftyp.e-mail-test,
.anruftyp.web-chat-test, .anruftyp.rcs-test { background: var(--status-info-soft); color: var(--status-info); }
.anruftyp.unbekannt { background: var(--status-risk-soft); color: var(--status-risk); }

.kategorie-feature, .kategorie-erledigt, .kategorie-positiv,
.kategorie-laeuft, .kategorie-erfolg { background: var(--status-ok-soft); color: var(--status-ok); }
.kategorie-fix, .kategorie-negativ, .kategorie-fehler,
.kategorie-nicht_generierbar { background: var(--status-risk-soft); color: var(--status-risk); }
.kategorie-refactoring, .kategorie-entwurf_erstellt { background: var(--status-info-soft); color: var(--status-info); }
.kategorie-offen { background: var(--status-warn-soft); color: var(--status-warn); }
.kategorie-korrektur, .kategorie-quelle { background: var(--status-info-soft); color: var(--status-info); }
/* Herkunft "Kunde": bewusst neutral und nicht in einer Statusfarbe - es ist
   keine Wertung, sondern die Auskunft, wer bewertet hat. */
.kategorie-herkunft { border: 1px solid var(--line); background: transparent; color: var(--ink-muted); }
/* Status einer Wissensluecke seit #295: der Entwurf in Freshdesk wartet auf
   die Freigabe (Info), veroeffentlicht ist erledigt (Ok), verworfen ist keine
   Wertung und bleibt neutral wie die Herkunft, ebenso ein Thema, das schon in
   Freshdesk liegt (#307). */
.kategorie-freshdesk_entwurf { background: var(--status-info-soft); color: var(--status-info); }
.kategorie-veroeffentlicht { background: var(--status-ok-soft); color: var(--status-ok); }
.kategorie-verworfen,
.kategorie-in_freshdesk_vorhanden { border: 1px solid var(--line); background: transparent; color: var(--ink-muted); }

/* Wissensluecken (#295): Schritte je Zeile und Punkte "Bitte prüfen". Die
   Knoepfe sind kleiner als die Grundform, weil eine Zeile bis zu vier traegt. */
.schritte { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.schritte button, .schritte .btn { font-size: var(--fs-14); padding: 0.35rem 0.8rem; display: inline-flex; align-items: center; gap: var(--space-1); }
.meldung-erfolg { color: var(--status-ok); display: flex; align-items: center; gap: var(--space-2); }
p.fehler[role=status] { display: flex; align-items: center; gap: var(--space-2); }
.meldung-rueckfrage {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--status-warn); border-radius: var(--radius-sm);
  background: var(--status-warn-soft); color: var(--ink);
}
.meldung-rueckfrage p { margin: 0; flex: 1 1 24rem; font: var(--t-body-sm); }
.meldung-rueckfrage button { font-size: var(--fs-14); padding: 0.35rem 0.8rem; }
td.pruefpunkt-hinweis .icon { vertical-align: -0.15em; }
.pruefpunkte { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.pruefpunkt {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.pruefpunkt-kaestchen {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.15rem; height: 1.15rem; border: 1px solid var(--ink); border-radius: var(--radius-sm);
}
.pruefpunkt-kaestchen .icon { width: 0.85rem; height: 0.85rem; }
.pruefpunkt-aussage { flex: 1 1 22rem; font: var(--t-body-sm); color: var(--ink); }
.pruefpunkt-gestrichen .pruefpunkt-aussage { text-decoration: line-through; color: var(--ink-muted); }
.pruefpunkt-bleibt .pruefpunkt-kaestchen { color: var(--status-ok); border-color: var(--status-ok); }
.pruefpunkt-gestrichen .pruefpunkt-kaestchen { color: var(--status-warn); border-color: var(--status-warn); }
.pruefpunkt-hinweis { flex-basis: 100%; font: var(--t-meta); color: var(--ink-muted); }
.pruefpunkt-hinweis-stark { color: var(--status-warn); font-weight: var(--fw-semibold); }

/* Diff alt/neu der Artikelpflege (#299): eine Spalte statt zwei, damit er
   im Modal auch schmal lesbar bleibt; entfallene Zeilen gedeckt rot, neue
   gedeckt gruen (Statusfarben), das Zeichen davor als Icon. */
.diff {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev);
  font: var(--t-body-sm); margin: var(--space-2) 0 var(--space-3); max-height: 28rem; overflow-y: auto;
}
.diff-zeile { display: flex; gap: var(--space-2); padding: 0.1rem var(--space-3); min-height: 1.4em; }
.diff-weg { background: var(--status-risk-soft); color: var(--status-risk); text-decoration: line-through; }
.diff-neu { background: var(--status-ok-soft); color: var(--status-ok); }
.diff-marke { flex: 0 0 1rem; display: inline-flex; align-items: center; }
.diff-marke .icon { width: 0.85rem; height: 0.85rem; }
.diff-text { flex: 1 1 auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.liste-schlicht { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.liste-schlicht .icon { vertical-align: -0.15em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.status { font: var(--t-meta); white-space: nowrap; }
.status.laeuft { color: var(--status-ok); }
.status.abgebrochen, .status.fehlgeschlagen { color: var(--status-risk); }
.status.beendet { color: var(--ink-muted); }

/* ─── Kennzahlen ───────────────────────────────────────────────
   Wert vor Beschriftung, genau ein Grad Unterschied - das
   "Wert zuerst, Metrik danach"-Muster des Design-Systems. */
.kennzahlen { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: baseline; margin-bottom: var(--space-4); }
.kennzahl b { font: var(--t-h2); font-variant-numeric: tabular-nums; color: var(--ink); display: block; }
.kennzahl span { font: var(--t-meta); color: var(--ink-muted); display: block; }

/* ─── Referenzen ───────────────────────────────────────────────*/
.referenzen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
/* Freshdesk-Artikeltitel sind teils ganze Saetze. Als Chip mit nowrap laufen
   sie im Transkript-Modal aus dem Rahmen (im Browser nachgesehen) - hier
   darf der Chip deshalb mehrzeilig werden. Nur im Modal: in den Listen
   daneben sind die Chips kurz und sollen in einer Zeile bleiben. */
#modal .referenz { white-space: normal; text-align: left; max-width: 100%; }
.referenz { border: 1px solid var(--line); text-decoration: none; background: var(--bg-elev); color: var(--ink); }
.referenz:hover { border-color: var(--brand-ui); }
.referenz.ticket { background: var(--status-info-soft); border-color: transparent; color: var(--status-info); }
a.fd-link { color: var(--status-info); text-decoration-color: currentColor; white-space: nowrap; }

.technische-daten {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  font: var(--t-meta); color: var(--ink-muted); margin: var(--space-2) 0 var(--space-4);
}

/* ─── Quellen und Wissensdatenbank (Bereich Wissensbasis) ───────
   Karten je Quelle, Matrix "wer darf was", Endpunkte. Gruppenzeilen
   (tr.tabelle-gruppe) teilen lange Tabellen nach Quelle bzw. Herkunft,
   statt je Quelle eine eigene Tabelle mit eigenem Kopf zu setzen. */
/* align-items: start, weil die Karten sehr verschieden lang sind (SimpliSan
   neun Eintraege, WhatsApp einer) - gestreckt stuende unter den kurzen eine
   leere Flaeche von Kartenhoehe. */
.quellen-raster {
  display: grid; gap: var(--space-4); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
.quelle-karte { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.quelle-karte > .hinweis { margin: 0; }
.quelle-kopf { display: flex; align-items: center; gap: var(--space-2); }
.quelle-kopf h3 { margin: 0; }
.quelle-kopf .kategorie { margin-left: auto; }
.quelle-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--brand-ui);
}
.quelle-infos { list-style: none; margin: 0; padding: 0; }
.quelle-infos li { padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.quelle-infos .hinweis { margin: var(--space-1) 0 0; }
.quelle-info-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--t-body-sm); }
.quelle-zahl { margin-left: auto; font: var(--t-meta); font-family: var(--font-mono); color: var(--ink-muted); }
.quelle-rollen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 0; }
.quelle-fuss { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); font: var(--t-meta); color: var(--ink-muted); }
.kategorie-rolle { background: var(--bg-soft); color: var(--ink); }

tr.tabelle-gruppe > th, tr.tabelle-gruppe > td { background: var(--bg-soft); }
tr.tabelle-gruppe > th { font: var(--t-body-sm); font-weight: var(--fw-semibold); color: var(--ink); }
tr.tabelle-gruppe .icon { color: var(--brand-ui); vertical-align: -0.15em; }
.zugriff-rahmen { margin-top: var(--space-5); }
.matrix-zelle { text-align: center; white-space: nowrap; }
.matrix-leer { color: var(--ink-muted); }
.matrix-wege {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1); font: var(--t-meta); color: var(--ink-muted);
}
.matrix-wege code { font-size: var(--fs-12); color: var(--ink); }
.methode { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--ink); }
code.pfad { font-size: var(--fs-12); overflow-wrap: anywhere; }
.endpunkt-tabelle td:nth-child(2) { min-width: 16rem; }

/* Titel als Knopf, der wie ein Link aussieht: oeffnet das Modal bzw.
   filtert. button.<klasse> statt .<klasse>, sonst schlaegt die globale
   button-Regel oben Rahmen und Hover-Flaeche durch. */
button.link-knopf {
  border: 0; background: none; padding: 0; font: inherit; color: var(--ink);
  text-align: left; white-space: normal; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em;
}
button.link-knopf:hover:not(:disabled) { background: none; color: var(--ink); text-decoration-color: var(--brand-ui); }
tr.tabelle-gruppe button.link-knopf { font-weight: var(--fw-semibold); }
.gliederung-einzug { padding-left: var(--space-6); }
.gliederung-ordner { display: flex; flex-wrap: wrap; gap: var(--space-1); }
button.ordner-chip {
  font: var(--t-meta); padding: 0.15rem 0.6rem; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--ink);
}
button.ordner-chip span { font-family: var(--font-mono); color: var(--ink-muted); }
button.ordner-chip:hover:not(:disabled) { background: var(--bg-soft); color: var(--ink); border-color: var(--brand-ui); }
.wissen-filter select { flex: 0 1 16rem; min-width: 0; }
.tabelle-rahmen + h3 { margin-top: var(--space-6); }
.liste-mehr { margin-top: var(--space-3); }
.artikel-inhalt {
  white-space: pre-line; font: var(--t-body-sm); color: var(--ink);
  border-top: 1px solid var(--line); padding-top: var(--space-4);
}

/* ─── Modal ────────────────────────────────────────────────────*/
#modal {
  display: none; position: fixed; inset: 0; z-index: 30;
  background: rgba(41, 41, 41, 0.45);
  align-items: center; justify-content: center; padding: var(--space-5);
}
/* 64rem statt 46rem (Issue #110): ein Transkript mit Bewertungen je
   Beitrag wurde in der schmalen Fassung zur Spalte aus Umbruechen. */
#modal .inhalt {
  background: var(--bg-elev); color: var(--ink);
  max-width: 64rem; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: var(--space-6); box-shadow: 0 12px 40px rgba(41, 41, 41, 0.18);
}
/* Schliessen bleibt beim Scrollen im langen Transkript sichtbar. */
.modal-kopf {
  display: flex; justify-content: flex-end;
  position: sticky; top: 0; z-index: 1;
  padding-bottom: var(--space-3); background: var(--bg-elev);
}

/* ─── Gespraechsverlauf ────────────────────────────────────────*/
.zeile { margin: var(--space-2) 0; font: var(--t-body-sm); }
.zeile b { color: var(--ink-muted); font-weight: var(--fw-medium); }
/* Antworttext ohne Markdown (ui_server.markdown_als_html): die Zeilenumbrueche
   der Liste bleiben stehen, der Fettdruck in <strong> soll nicht wie die
   gedeckte Rollenbeschriftung aussehen. */
.beitrag-text { white-space: pre-line; }
.zeile .beitrag-text strong { color: var(--ink); font-weight: var(--fw-semibold); }
/* Beispiele im Bewertungsstand: hoechstens sechs Zeilen, der Rest steht im
   Transkript. */
.beispiel-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  line-clamp: 6; overflow: hidden;
}
/* ─── Wartungslaeufe (Issue #109) ──────────────────────────────
   Je Lauf eine Karte direkt unter der Seitenueberschrift, auf breiten
   Bildschirmen nebeneinander. Umrissknopf statt Markenflaeche: ein
   Wartungslauf ist nicht die Hauptaufgabe der Seite, und unter
   Konfiguration traegt "Speichern" sie schon. */
.laeufe {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-4); margin-bottom: var(--space-7);
}
.lauf { padding: var(--space-4) var(--space-5); min-width: 0; }
.lauf-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.lauf-text { flex: 1 1 16rem; }
.lauf-text .hinweis { margin: var(--space-1) 0 0; }
/* Mit .lauf davor: .update-meta steht weiter unten und setzte sonst nowrap
   und margin-left durch - die Zeitangaben schoben die Seite auf dem Telefon
   um 72px auf. */
.lauf .lauf-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; white-space: normal; }
.lauf pre.skript-ausgabe { margin-bottom: 0; }

/* ─── Optimierung (Issue #114) ─────────────────────────────────
   Kopf mit Kennzahlen und dem einen Startknopf, Mustertabelle mit
   aufklappbaren Beispielen, Vorschlagskarten. Keine eigenen Farben: der
   Zustand steckt in den Chips, die Markenflaeche traegt nur der
   Startknopf (.primaer) - die Entscheidungsknoepfe der Karten bleiben
   Umrissknoepfe, sonst stuenden drei gleich gewichtete Pink-Flaechen
   untereinander. */
.opt-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-7);
}
.opt-kopf .kennzahlen { margin-bottom: 0; gap: var(--space-6); }
.opt-lauf { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); text-align: right; }
.opt-lauf form { margin: 0; }
/* Breite begrenzt: der Hinweis "Gerade läuft „…“ unter …" (#109) ist
   laenger als eine Zeile der Spalte und schob sie sonst unter die
   Kennzahlen, statt selbst umzubrechen. */
.opt-lauf .update-meta { margin: 0; white-space: normal; max-width: 44ch; }
.opt-meldung { margin: 0; white-space: pre-line; max-width: 44ch; }
.opt-abschnitt-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
.opt-abschnitt-kopf .db-filterzeile { margin: 0; }
.opt-titel { font: var(--t-title); color: var(--ink); margin: 0 0 var(--space-2); }
.opt-unter { margin: 0 0 var(--space-4); }
#optimierung-muster { margin-bottom: var(--space-7); }
.opt-muster td { vertical-align: middle; }
.opt-haeufigkeit { font-variant-numeric: tabular-nums; }
.opt-beispiel {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden; color: var(--ink-muted); min-width: 14rem; max-width: 40ch;
}
.opt-aufklapp > td { background: var(--bg-soft); padding: var(--space-2) var(--space-4); }
/* Ein Knopf, dessen Inhalt gerade aufgeklappt ist, bleibt als gedrueckt
   erkennbar (data-aufklappen, index.html). */
button[data-aufklappen][aria-expanded="true"] { background: var(--bg-soft); }
/* Ausdruecklich, wie bei .tab-inhalt: eine eigene display-Regel schluege
   sonst die Browserregel fuer [hidden]. */
.opt-aufklapp[hidden], .opt-belege[hidden] { display: none; }
.opt-signal:last-child { border-bottom: none; }
.opt-signal button { font-size: var(--fs-14); padding: 0.3rem 0.8rem; }
.opt-vorschlag { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.opt-vorschlag h3 { margin: var(--space-2) 0; }
.opt-vorschlag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.opt-vorschlag-meta .update-meta { margin-left: 0; white-space: normal; }
.opt-begruendung { font: var(--t-body-sm); color: var(--ink); margin: 0 0 var(--space-3); max-width: 80ch; }
.opt-entschieden { margin: 0 0 var(--space-3); }
.opt-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opt-aktionen form { display: contents; }
.opt-belege { margin-top: var(--space-3); border-top: 1px solid var(--line); }
.kategorie-art-wissensbasis { background: var(--status-info-soft); color: var(--status-info); }
.kategorie-art-prompt { background: var(--status-ok-soft); color: var(--status-ok); }
.kategorie-art-neuer_artikel { background: var(--status-warn-soft); color: var(--status-warn); }
/* Der Beitrag, zu dem ein Knopf "Transkript" gesprungen ist (index.html,
   sprungAusfuehren): derselbe Balken wie am aktiven Navigationspunkt. */
.sprung-ziel { box-shadow: inset 3px 0 0 var(--brand-ui); padding-left: var(--space-3); }
@media (max-width: 900px) {
  .opt-lauf { align-items: flex-start; text-align: left; }
}
/* Gesamtbewertung im Transkriptkopf. */
.bewertung-block-kopf { margin: var(--space-3) 0 var(--space-4); }
/* Eingeklappte Kennzahlen unter der Gespraechsliste. */
.kennzahlen-klappe { margin-top: var(--space-5); }
.kennzahlen-klappe > summary { cursor: pointer; font: var(--t-body-sm); color: var(--ink-muted); }
.kennzahlen-klappe > summary:hover { color: var(--ink); }
.rolle-agent { color: var(--ink); }
.rolle-du { color: var(--ink-3); }

.schnellantworten { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.schnellantwort { padding: 0.3rem 0.8rem; font-size: var(--fs-14); border-radius: var(--radius-pill); min-width: 0; }

.update-eintrag { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.update-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.update-meta { font: var(--t-meta); color: var(--ink-muted); margin-left: auto; white-space: nowrap; }
.update-text { font: var(--t-body-sm); color: var(--ink-muted); white-space: pre-line; margin: var(--space-2) 0; }
/* HTTP-Aufrufe unter einem Werkzeugaufruf im Endpunkt-Tab (Issue #70):
   eingerueckt mit Linie, damit sie als Teil der Zeile darueber lesbar sind
   und nicht als eigene Aufrufe. */
.endpunkt-details { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--line); }
.endpunkt-details li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }

.bewertung-block { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bewertung-block h4 { font: var(--t-meta); font-weight: var(--fw-semibold); color: var(--ink-muted); margin: 0 0 var(--space-2); }

/* ─── Icons ────────────────────────────────────────────────────
   Lucide-Stil (https://lucide.dev), Strichstaerke 1.75, Farbe folgt
   currentColor - die im Design-System vorgesehene Ersatzfamilie fuer
   Icons, die der Bestand nicht mitbringt. Ersetzt die zuvor genutzten
   Emoji/Unicode-Glyphen, die das System ausdruecklich ausschliesst. */
.icon {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-gross { width: 1.15em; height: 1.15em; }
.icon-marke { color: var(--brand-ui); }

.chat-zeit { font-family: var(--font-mono); font-size: var(--fs-10); color: var(--ink-muted); margin-left: var(--space-2); }

/* ─── Fehlerband ───────────────────────────────────────────────
   htmx tauscht bei einer Antwort ausserhalb 2xx nichts ein und meldet
   von sich aus auch nichts - ein 500 sah im Admin Center aus wie "es
   passiert nichts". Dieses Band zeigt den Fehler stattdessen an; die
   Meldung liefert die Fehler-Middleware in ui_server.py. */
#fehlerband {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 40; max-width: min(46rem, calc(100vw - 2 * var(--space-4)));
  display: none; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--status-risk-soft); color: var(--status-risk);
  border: 1px solid var(--status-risk); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); font: var(--t-body-sm);
}
#fehlerband[data-sichtbar] { display: flex; }
#fehlerband .fehlerband-text { overflow-wrap: anywhere; }
#fehlerband .fehlerband-quelle { font-family: var(--font-mono); font-size: var(--fs-12); display: block; }
#fehlerband button {
  border-color: currentColor; color: inherit; margin-left: auto;
  font-size: var(--fs-12); padding: 0.15rem 0.5rem;
}
#fehlerband button:hover:not(:disabled) { background: var(--status-risk); color: var(--ink-on-dark); }

/* ─── htmx ─────────────────────────────────────────────────────*/
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* ─── Anmeldung ────────────────────────────────────────────────*/
.login-seite { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.login-karte {
  width: 100%; max-width: 23rem; margin: var(--space-5);
  background: linear-gradient(rgb(255,255,255) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: var(--space-7) var(--space-6);
}
.login-karte .marke { margin-bottom: var(--space-6); display: block; }
.login-karte .marke img { height: 1.9rem; width: auto; display: block; }
.login-karte h1 { font: var(--t-title); color: var(--ink); margin: 0 0 var(--space-5); }
.login-karte .feld { margin-bottom: var(--space-4); }
.login-karte label { display: block; font: var(--t-meta); color: var(--ink-muted); margin-bottom: var(--space-1); }
.login-karte input { width: 100%; min-width: 0; }
.login-karte button { width: 100%; margin-top: var(--space-2); }
/* Mit dem Finger (#284): iOS zoomt jedes Feld unter 16px beim Antippen heran. */
@media (pointer: coarse) {
  .login-karte input { font-size: var(--fs-16); }
  .login-karte button { min-height: 44px; }
}
/* Untertitel wie .nav-untertitel unter der Marke im Admin Center (#131). */
.login-untertitel {
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin: calc(-1 * var(--space-4)) 0 var(--space-5);
}
.login-karte h1 + .hinweis { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.login-portal { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
/* Freigabeseite zum Anmeldelink (Issue #58): die gekuerzte Adresse bleibt in einer Zeile. */
.freigabe-karte .mono { white-space: nowrap; }
.freigabe-karte p { margin: 0 0 var(--space-4); }

/* ─── Bewegung / schmale Viewports ─────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Schmale Viewports: die Leiste wird zur Schublade. Diesen Fall loest
   das Onboarding-Portal nicht - dessen Media-Query fasst .sb gar nicht
   an, die 264px stehen dort auch auf dem Telefon und fressen zwei
   Drittel der Breite. Hier deshalb eine eigene Regel statt einer
   Uebernahme. Die z-Ebenen bleiben unter dem Modal (30) und dem
   Fehlerband (40). */
@media (max-width: 900px) {
  .nav-schalter {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; z-index: 23;
    top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); left: var(--space-3);
    width: 2.5rem; height: 2.5rem; padding: 0;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(7.9px); -webkit-backdrop-filter: blur(7.9px);
  }
  .nav-schalter .icon { width: 1.25rem; height: 1.25rem; }

  #hauptnav {
    position: fixed; z-index: 24; top: 0; left: 0; bottom: 0; height: auto;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body[data-nav-offen] #hauptnav { transform: none; }

  /* Gleicher Ton wie der Modal-Hintergrund - dieselbe Aufgabe. */
  .nav-schleier {
    display: block; position: fixed; inset: 0; z-index: 22;
    background: rgba(41, 41, 41, 0.45); border: 0; border-radius: 0;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body[data-nav-offen] .nav-schleier { opacity: 1; pointer-events: auto; }

  main {
    max-width: none;
    padding-top: calc(2.5rem + var(--space-5) + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 640px) {
  main { padding-left: var(--space-4); padding-right: var(--space-4); }
  .kennzahlen { gap: var(--space-5); }
  input[type=text], input[type=tel], input[type=password], textarea, select { min-width: 0; width: 100%; }
}

/* ─── Dashboards ──────────────────────────────────────────────────────
   Diagramme aus reinem HTML/CSS (s. templates/_dashboard_teile.html):
   keine Diagrammbibliothek, weil das Admin Center auch ohne freien
   Internetzugang laufen soll und ein CDN-Script genau dort ausfaellt.

   Die drei Serienfarben sind eine bewusste Erweiterung des
   Design-Systems - es kennt genau eine Markenfarbe und keine
   Serienpalette, ein Diagramm mit drei Reihen braucht aber drei
   unterscheidbare Farben. Die Slots sind nicht nach Augenmass gewaehlt,
   sondern gegen die Kartenflaeche geprueft (OKLab-Abstand unter
   simulierter Rot-Gruen-Schwaeche, Helligkeitsband, Chroma-Untergrenze,
   Kontrast): schlechtestes Paar dE 12.6 unter Deuteranopie, alle drei
   ueber 3:1. --serie-2 ist --brand-deep, die Marke tritt also als eine
   Reihe unter dreien auf und bleibt sparsam; Blau fuehrt.

   --rampe-* ist eine einzige Blau-Tonleiter fuer GEORDNETE Klassen
   (Groessen-, Dauerklassen), monoton heller->dunkler, helles Ende ueber
   2:1 gegen Weiss. Nominale Kategorien (Wissensbereiche, Themen)
   bekommen dagegen alle --serie-1: eine Werte-Rampe wuerde dort nur die
   Balkenlaenge ein zweites Mal verschluesseln. */
:root {
  --serie-1: #2a6fd1;
  --serie-2: var(--brand-deep);
  --serie-3: #a86a12;
  --rampe-1: #8ab0e8; --rampe-2: #6a95d4; --rampe-3: #4a7ac1;
  --rampe-4: #2a5fad; --rampe-5: #004499; --rampe-6: #002784;
  --db-spur: rgb(238, 242, 249);
}

.db-raster {
  display: grid; gap: var(--space-4); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.db-karte { padding: var(--space-4) var(--space-5); min-width: 0; }
.db-karte > h3 { margin-bottom: 2px; }
.db-unter { margin: 0 0 var(--space-4); }
.db-fussnote {
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.db-spanne { grid-column: 1 / -1; }
.db-kennzahlen { gap: var(--space-6); margin-bottom: var(--space-5); }
.db-einheit { font: var(--t-meta); color: var(--ink-muted); }
.db-gedaempft { color: var(--ink-muted); }
.db-kopf { margin-bottom: var(--space-4); }

/* Befunde - die ausformulierten Auffaelligkeiten ueber der Seite. */
.db-befunde {
  display: grid; gap: var(--space-3); margin-bottom: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.db-befund {
  background: var(--bg-elev); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-2);
  border-left: 3px solid var(--ink-muted);
}
.db-befund.risk { border-left-color: var(--status-risk); }
.db-befund.warn { border-left-color: var(--status-warn); }
.db-befund.info { border-left-color: var(--status-info); }
.db-befund h3 { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.db-befund .marke {
  font: var(--t-meta); font-weight: var(--fw-medium); text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
}
.db-befund.risk .marke { background: var(--status-risk-soft); color: var(--status-risk); }
.db-befund.warn .marke { background: var(--status-warn-soft); color: var(--status-warn); }
.db-befund.info .marke { background: var(--status-info-soft); color: var(--status-info); }
.db-befund p { font: var(--t-meta); color: var(--ink-muted); margin: 0; }
.db-befund b { color: var(--ink); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

/* Waagerechte Balken. Das Ziel ist die ganze Zeile, nicht der 16px-Balken. */
.db-balken { display: grid; gap: var(--space-2); }
.db-balken-zeile {
  display: grid; grid-template-columns: minmax(96px, 44%) 1fr auto;
  gap: var(--space-3); align-items: center; border-radius: var(--radius-xs);
}
.db-balken-zeile.schmal { grid-template-columns: minmax(78px, 30%) 1fr auto; }
.db-balken-zeile:hover .db-balken-spur { background: var(--line); }
.db-balken-label {
  font: var(--t-meta); color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-balken-spur {
  position: relative; height: 16px; background: var(--db-spur);
  border-radius: var(--radius-xs); overflow: hidden;
}
.db-balken-fuellung {
  display: block; height: 100%; border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.db-balken-wert {
  font-family: var(--font-mono); font-size: var(--fs-14);
  font-variant-numeric: tabular-nums; color: var(--ink);
  min-width: 3.4em; text-align: right;
}

/* Gestapelte Saeulen. Breite gedeckelt, sonst lesen sich vier Kategorien
   als schwere Bloecke statt als Marken. */
.db-saeulen {
  display: flex; align-items: flex-end; gap: var(--space-3);
  height: 190px; border-bottom: 1px solid var(--line-strong);
}
.db-saeule {
  flex: 1 1 0; max-width: 52px; margin: 0 auto; height: 100%; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.db-saeule > span { display: block; width: 100%; }
.db-saeule > span:first-child { border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.db-saeulen-achse { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.db-saeulen-achse > span {
  flex: 1 1 0; text-align: center; min-width: 0; font: var(--t-meta); color: var(--ink-muted);
}
.db-saeulen-achse > span b {
  display: block; font-family: var(--font-mono); color: var(--ink);
  font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
}

/* Gestapelte Zeile: 2px Flaechenabstand statt eines Rahmens um die Segmente. */
.db-stapel-zeile {
  display: grid; grid-template-columns: minmax(90px, 26%) 1fr auto;
  gap: var(--space-3); align-items: center; margin-bottom: var(--space-2);
}
.db-stapel { display: flex; gap: 2px; height: 20px; }
.db-stapel > span {
  height: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; font-size: var(--fs-14);
  font-weight: var(--fw-medium); color: var(--ink-on-dark);
}
.db-stapel > span:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.db-stapel > span:last-child { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }

.db-legende {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4); font: var(--t-meta); color: var(--ink-muted);
}
.db-legende span { display: inline-flex; align-items: center; gap: 6px; }
.db-legende i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.db-meter-wert { font: var(--t-h2); color: var(--ink); }
.db-meter-wert small { font: var(--t-meta); color: var(--ink-muted); }
.db-meter-spur {
  height: 20px; background: var(--db-spur); border-radius: var(--radius-xs);
  overflow: hidden; margin: var(--space-3) 0 var(--space-2);
}
.db-meter-fuellung {
  height: 100%; background: var(--serie-1);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.db-meter-fuss {
  display: flex; justify-content: space-between; font: var(--t-meta); color: var(--ink-muted);
}

.db-kanal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.db-kanal i { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }

.db-tabellenansicht {
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line);
}
.db-tabellenansicht > summary { font: var(--t-meta); color: var(--ink-muted); cursor: pointer; }
.db-tabellenansicht > summary:hover { color: var(--ink); }
.db-tabellenansicht > div { margin-top: var(--space-3); }

/* Zuweisung: welcher Mandant welchen Bereich sieht. */
.db-bereiche {
  display: grid; gap: var(--space-2); margin: var(--space-3) 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.db-bereich {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3);
  align-items: start; padding: var(--space-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-elev);
}
.db-bereich:has(input:checked) { border-color: var(--brand-ui); }
.db-bereich input { margin-top: 3px; }
.db-bereich strong { font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--space-2); }
.db-bereich .hinweis { grid-column: 2; margin: 0; }
/* Variante ohne Auswahlkaestchen (Vorschau der Funktionsbausteine): eine
   Spalte, sonst rutschen die Beschreibungen in eine Spalte, die es hier
   nicht gibt. */
.db-bereich.nur-text { grid-template-columns: 1fr; }
.db-bereich.nur-text .hinweis { grid-column: 1; }
.db-bereich strong { flex-wrap: wrap; }

@media (max-width: 640px) {
  .db-balken-zeile, .db-balken-zeile.schmal, .db-stapel-zeile { grid-template-columns: 1fr auto; }
  .db-balken-label { grid-column: 1 / -1; }
}
.db-zeile-kopf { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.db-zeile-kopf h3 { margin-bottom: 2px; }
.db-filterzeile { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }

/* ─── Listenkopf und Formular im Modal ────────────────────────
   Zaehlzeile links, die anlegende Aktion rechts - dasselbe Muster wie
   .db-zeile-kopf, nur ueber einer Tabelle statt ueber einer Karte. */
.listen-kopf {
  display: flex; gap: var(--space-4); align-items: center;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--space-3);
}
.listen-kopf .hinweis { margin: 0; }
.listen-kopf button { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Zweite Zeile in einer Tabellenzelle (Klarname unter dem Benutzernamen):
   gedeckt und eine Stufe kleiner, damit die Zelle eine Einheit bleibt. */
.zeile-zweitzeile { display: block; font: var(--t-meta); color: var(--ink-muted); }
/* Die Zeilenaktion steht rechts und bricht nicht um - sonst wandert der
   Knopf bei langen E-Mail-Adressen unter den Text. */
td.zeile-aktion { text-align: right; white-space: nowrap; }
td.zeile-aktion button { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-14); padding: 0.35rem 0.8rem; }

/* Formular im Modal: Beschriftung ueber dem Feld, so viele Spalten wie
   hineinpassen. Die globale Mindestbreite der Eingabefelder (16rem) wird
   hier aufgehoben - im Raster bestimmt die Spalte die Breite, sonst
   sprengen zwei Felder nebeneinander das Modal auf schmalen Viewports. */
.formular-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4); margin: var(--space-4) 0;
}
.formular-raster label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font: var(--t-meta); color: var(--ink-muted);
}
.formular-raster input, .formular-raster select { min-width: 0; width: 100%; }
/* Unveraenderliches Feld (Benutzername, Rolle): als Text und nicht als
   deaktiviertes Eingabefeld - ein graues Feld liest sich wie "gerade nicht
   verfuegbar", nicht wie "steht fest". */
.feld-fest { font: var(--t-body-sm); color: var(--ink); padding: 0.5rem 0; }

.haken { display: flex; align-items: center; gap: var(--space-2); font: var(--t-body-sm); }
.haken input { flex-shrink: 0; }
.whatsapp-kennung {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font: var(--t-meta); color: var(--ink-muted); margin: var(--space-3) 0 0;
}

/* "Bei SimpliSan anmelden" im Modal (Issue #287): die Markenschicht
   wechselt an .marke-simplisan auf Simplisan (static/brand-simplisan.css),
   damit die Maske als SimpliSan-Login erkennbar ist, nicht als Siki-Login;
   Knopf .primaer und Fokusring nehmen die Token von dort. Schmal wie die
   Anmeldekarte des Portals, ein Feld je Zeile. */
.simplisan-login { display: flex; flex-direction: column; gap: var(--space-4); max-width: 28rem; }
.simplisan-login .simplisan-logo { height: 2.2rem; width: auto; display: block; }
.simplisan-login h3 { margin: 0; }
.simplisan-login .formular-raster { grid-template-columns: 1fr; }
.simplisan-login .hinweis { margin: 0; }
/* Die Liste der Anmeldungen ueber der Mandantenverwaltung: Abstand zum iFrame. */
#simplisan-anmeldungen { margin-bottom: var(--space-5); }
#simplisan-anmeldungen .meta { color: var(--ink-muted); font: var(--t-meta); }

/* Loeschen links, die abschliessende Aktion rechts - die beiden sollen
   nicht nebeneinander unter demselben Daumen liegen. */
.formular-fuss {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line);
}
.formular-fuss .primaer { margin-left: auto; }
.formular-fuss button { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Rollenabhaengige Felder beim Anlegen: Passwort gibt es nur fuer Team-Konten
   (Admin, Support; Mandanten-Benutzer melden sich gegen die SimpliSan-Auth-API
   ihres Hauses an), einen Mandanten nur fuer Mandanten-Benutzer. Umgeschaltet
   per :has() und nicht per Skript, weil das Formular per htmx nachgeladen
   wird - ein Skript muesste sich nach jedem Austausch neu verdrahten (dieselbe
   Ueberlegung wie beim <details> der Bewertungsformulare). Beim Bearbeiten
   steht die Rolle fest, dort entscheidet schon die Vorlage. */
.benutzer-formular:has(select[name="rolle"] option:not([value="mandant"]):checked) .nur-mandant,
.benutzer-formular:has(select[name="rolle"] option[value="mandant"]:checked) .nur-admin {
  display: none;
}

/* Portal-Freigabe (Mandanten -> Portal-Freigabe): Haken links, Menue-
   Vorschau rechts. Unter 900px stapelt sich das, die Vorschau zuerst - sie
   ist die Antwort auf die Frage "was sieht der Kunde", die Haken sind der
   Weg dahin. */
.pf-kopf { align-items: center; gap: var(--space-4); }
.pf-wahl { margin-top: 0; align-items: center; }
.pf-wahl select { min-width: 18rem; }
.pf-raster {
  display: grid; gap: var(--space-4); align-items: start;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
}
.pf-formular, .pf-vorschau { padding: var(--space-4) var(--space-5); min-width: 0; }
.pf-gruppe { margin: var(--space-5) 0 var(--space-2); font: var(--t-meta); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.pf-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
/* Die Vorschau ahmt die Seitenleiste des Portals nach: Gruppentitel klein
   und gedaempft, Punkte als Zeilen mit dem 3px-Markenbalken des aktiven
   Eintrags - der erste Punkt ist im Portal der aktive. */
.pf-menue { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); background: var(--bg); }
.pf-menue-titel { font: var(--t-meta); font-weight: var(--fw-semibold); color: var(--ink-muted); margin: var(--space-3) var(--space-2) var(--space-1); }
.pf-menue-gruppe:first-child .pf-menue-titel { margin-top: 0; }
.pf-menue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pf-menue li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: var(--fw-medium); color: var(--ink-muted); }
.pf-menue-gruppe:not([hidden]) li:not([hidden]) { border: 1px solid transparent; }
.pf-menue .pf-menue-gruppe:not([hidden]):first-of-type li:not([hidden]):first-of-type {
  color: var(--ink); background: var(--bg-elev); border-color: var(--line);
  box-shadow: inset 3px 0 0 var(--brand);
}
.pf-menue-leer { margin: var(--space-2); }
.pf-fuss { margin-top: var(--space-4); }
@media (max-width: 900px) {
  .pf-raster { grid-template-columns: 1fr; }
  .pf-vorschau { order: -1; }
}

/* Text nur fuer Screenreader, etwa neben einem Icon als Spaltentitel
   (Bewertungsstand, Issue #110). Das uebliche Muster: unsichtbar, aber nicht
   display:none, sonst liest ihn auch kein Screenreader vor. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Startseite "Überblick" (Issue #131) ──────────────────────
   Karten und Kacheln aus den vorhandenen Flaechen (.karte, .quelle-kopf,
   .quelle-icon), im selben Raster wie die Quellen: auto-fill mit min(),
   damit bei 390px eine Spalte bleibt statt waagerecht zu scrollen. */
.ub-gruss { font: var(--t-title); color: var(--ink); margin: 0 0 var(--space-1); }
.ub-abschnitt { margin-top: var(--space-8); }
.ub-titel { font: var(--t-body); font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 var(--space-3); }
.ub-raster { display: grid; gap: var(--space-4); }
.ub-einstiege, .ub-kacheln { grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
/* Zwei Kacheln je Zeile noch auf dem Telefon: eine Zahl braucht keine 17rem. */
@media (max-width: 640px) {
  .ub-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  a.ub-kachel { padding: var(--space-3) var(--space-4); }
}
.ub-karte { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ub-karte > .hinweis { margin: 0; }
.ub-karte h3 { margin: 0; }
/* Der Knopf sitzt unten, auch wenn die Saetze verschieden lang sind. */
.ub-karte > button, .ub-karte > .btn { margin-top: auto; align-self: flex-start; }
.ub-angabe { margin: 0; font: var(--t-body-sm); color: var(--ink); overflow-wrap: anywhere; }

/* Eine Kachel ist ein Link auf ihre Seite: kein Unterstrich, Rand beim
   Ueberfahren wie .referenz. */
a.ub-kachel {
  display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
  padding: var(--space-4) var(--space-5); text-decoration: none; color: var(--ink);
  border: 1px solid transparent; transition: border-color .15s ease;
}
a.ub-kachel:hover { border-color: var(--brand-ui); }
.ub-kachel b { font: var(--t-h2); font-variant-numeric: tabular-nums; color: var(--ink); }
.ub-kachel > span { font: var(--t-body-sm); color: var(--ink); }
.ub-kachel small { font: var(--t-meta); color: var(--ink-muted); }
.ub-daumen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ub-daumen .kategorie { font: var(--t-body-sm); font-weight: var(--fw-semibold); }

.ub-zuletzt { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 3fr) minmax(min(11rem, 100%), 1fr); align-items: start; }
.ub-liste { padding: var(--space-2) var(--space-5); min-width: 0; }
.ub-liste > .hinweis { margin: var(--space-3) 0; }
.ub-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.ub-zeile:last-child { border-bottom: none; }
.ub-zeit { font: var(--t-meta); color: var(--ink-muted); }
button.ub-ansehen { margin-left: auto; font-size: var(--fs-14); padding: 0.3rem 0.8rem; }

.ub-portale { list-style: none; margin: 0; padding: 0; }
.ub-portale li { padding: var(--space-2) 0; border-top: 1px solid var(--line); font: var(--t-body-sm); }
.ub-portale a { display: block; font: var(--t-meta); overflow-wrap: anywhere; }

.ub-stand {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  margin: var(--space-8) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line);
  font: var(--t-meta); color: var(--ink-muted);
}
.ub-stand a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); text-decoration: none; }
.ub-stand a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .ub-zuletzt { grid-template-columns: 1fr; }
}

/* ── Spielwiese "Lara in SimpliSan" (#323) ──────────────────────────────
   Nachbau der SimpliSan-Seitenleiste mit den Klassen des Frontends
   (nav-title, nav-dropdown, nav-link), aber in Siki-Token: nachgebaut ist
   der Aufbau, nicht die Farbe. Alles unter .spielwiese, damit die Namen
   nichts im Admin Center treffen; die Knoepfe als button.<klasse>, sonst
   schlaegt die globale button-Regel Rahmen und Hover-Flaeche durch. */
.spielwiese {
  display: grid; grid-template-columns: minmax(220px, 280px) 1fr;
  min-height: 70vh; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-elev);
}
.spielwiese-leiste {
  border-right: 1px solid var(--line); padding: var(--space-3) var(--space-2);
  overflow-y: auto; max-height: 80vh;
}
.spielwiese ul { list-style: none; margin: 0; padding: 0; }
.spielwiese .nav-title {
  font: var(--t-meta); font-weight: var(--fw-semibold); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: var(--space-4) var(--space-3) var(--space-1);
}
.spielwiese .nav-link {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  font: var(--t-nav); color: var(--ink-2); text-align: left; text-decoration: none;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
}
/* Gleiche Spezifitaet wie button:active:not(:disabled) und spaeter im
   Dokument: kein Ruck beim Klick, und lange Gruppennamen brechen um wie die
   Links daneben statt aus der Spalte zu laufen (white-space der globalen
   button-Regel). */
.spielwiese button.nav-dropdown-toggle {
  background: none; border: 1px solid transparent; cursor: pointer; font-weight: var(--fw-medium);
  white-space: normal; transform: none;
}
.spielwiese a.nav-link:hover,
.spielwiese button.nav-dropdown-toggle:hover:not(:disabled) { background: var(--bg-soft); color: var(--ink); }
/* "Benachrichtigungseinstellungen" passt in der dritten Ebene nicht in die
   Spalte: trennen statt ueberlaufen. */
.spielwiese .link-text { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.spielwiese .nav-dropdown-toggle .icon { margin-left: auto; transition: transform .15s ease; }
.spielwiese .nav-dropdown.open > .nav-dropdown-toggle .icon { transform: rotate(90deg); }
.spielwiese .nav-dropdown:not(.open) > .nav-dropdown-items { display: none; }
/* Einzug je Ebene an der Liste, damit eine Gruppe in einer Gruppe weiter
   eingerueckt steht als ihre Geschwister. */
.spielwiese .nav-dropdown-items { padding-left: var(--space-4); }
/* Geoeffnete Seite wie der aktive Punkt im Admin Center: Balken links. */
.spielwiese a.nav-link.active { color: var(--ink); background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--brand); }
.spielwiese-seite { background: var(--bg-soft); padding: var(--space-6); }
.spielwiese-offen { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; color: var(--ink-muted); }
.spielwiese-offen[hidden] { display: none; }
.spielwiese-offen b { font: var(--t-h3); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .spielwiese .nav-dropdown-toggle .icon { transition: none; }
}
@media (max-width: 900px) {
  .spielwiese { grid-template-columns: 1fr; }
  .spielwiese-leiste { border-right: none; border-bottom: 1px solid var(--line); max-height: none; }
}
/* Bedienelemente der offenen Seite (#400, Konzept #362 3.8): Knoepfe mit
   denselben ids, Icons und Texten wie im Frontend, ein Dialog zum Aufklappen. */
.spielwiese-elemente { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.spielwiese-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.spielwiese .spielwiese-knopf { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.spielwiese .spielwiese-knopf .icon { width: 1em; height: 1em; }
.spielwiese-dialog > summary { cursor: pointer; color: var(--ink-muted); }
.spielwiese-dialog .modal-content {
  margin-top: var(--space-2); padding: var(--space-4); background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.spielwiese-dialog .modal-title { margin: 0 0 var(--space-3); font: var(--t-h3); }