/* AskEUDAMED — Oberfläche im Zuschnitt eines Analyse-Dashboards.
 *
 * Kein Tailwind, kein Build-Schritt: Der Bestand kommt mit vier Abhängigkeiten
 * aus, und eine Oberfläche, die man nur nach einem `npm run build` ansehen kann,
 * wäre in diesem Projekt ein Fremdkörper. Was von Tailwind übernommen ist, ist
 * die Denkweise — feste Abstufungen für Farbe, Abstand und Radius statt frei
 * gewählter Werte je Stelle. Die Abstufungen stehen als Custom Properties hier
 * oben; darunter wird nur noch darauf zugegriffen.
 */

:root {
  /* Grundflächen — Eisblau-Grau, entsättigt, damit die Statusfarben tragen */
  --grund:          #f4f7f9;
  --karte:          #ffffff;
  --karte-gedeckt:  #eef2f6;
  --rand:           #dde4ec;
  --rand-kraeftig:  #c3cedb;

  /* Schrift */
  --text:           #16202e;
  --text-leise:     #5a6879;
  --text-zart:      #8492a4;

  /* Palette des IGRT Lab (Medizinische Universität Innsbruck).
   *
   * `--akzent-nacht` trägt die Kopfleiste, `--akzent` das Aktive und
   * Anklickbare. Der Abstand zwischen beiden ist Absicht: Ein Kopf, der
   * dieselbe Farbe hat wie die Schaltflächen darin, lässt nicht erkennen,
   * was davon anklickbar ist. */
  --akzent:         #0066cc;
  --akzent-tief:    #13385b;
  --akzent-nacht:   #0f2b48;
  --akzent-hell:    #e8f1fb;
  --akzent-rand:    #b6d3f0;

  /* Statusfarben. Je Zustand drei Werte: Schrift, Fläche, Rand.
   *
   * Grün bleibt gedeckt (Smaragd statt Signalgrün): Es steht für „nach MDR
   * registriert und in Verkehr" — eine Tatsache, kein Gütesiegel. Die
   * Farbregel des Projekts gilt unverändert: Farbe kennzeichnet die
   * BELASTBARKEIT einer Aussage, nie die Qualität eines Produkts. */
  --gruen:          #0f7a4d;
  --gruen-flaeche:  #e3f5ec;
  --gruen-rand:     #9fd8bd;

  --gelb:           #8a6100;
  --gelb-flaeche:   #fdf4dd;
  --gelb-rand:      #e7cf94;

  --rot:            #b0453a;
  --rot-flaeche:    #fdeceb;
  --rot-rand:       #e9b5ae;

  --lila:           #6244a8;
  --lila-flaeche:   #efebfa;
  --lila-rand:      #c9bcea;

  --schatten:       0 1px 2px rgba(16,32,52,.06), 0 2px 8px rgba(16,32,52,.05);
  --schatten-hoch:  0 4px 12px rgba(16,32,52,.10), 0 12px 32px rgba(16,32,52,.09);

  --radius:         14px;
  --radius-klein:   9px;
  --radius-pille:   999px;

  --breite:         1060px;
}

* { box-sizing: border-box }

body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--grund);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Kopfleiste und Segmentsteuerung
   ========================================================================== */

.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(160deg, var(--akzent-nacht), var(--akzent-tief));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, var(--schatten);
}

.kopf-innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 13px 18px 0;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.marke { display: flex; align-items: center; flex: 1; min-width: 240px }
.marke b { display: block; font-size: 17px; letter-spacing: .2px }
.marke span { display: block; font-size: 12.5px; color: rgba(255,255,255,.66) }


/* Bereichswahl als schwebendes Segmented Control.
 *
 * Vorher waren es Reiter mit oben abgerundeten Ecken, die unten an der
 * Kopfleiste abgeschnitten wurden. Der aktive Reiter sollte optisch in den
 * Inhalt übergehen — dafür müssten Radius, Rand und Fläche von Reiter und
 * Inhaltsfläche exakt zusammenpassen. Sie taten es nicht, und die Kante
 * schnitt den Reiter hart ab.
 *
 * Der Umbau löst das Problem, statt es zu justieren: Eine Pille, die
 * vollständig IN der Kopfleiste liegt und nichts berührt, hat keine Kante,
 * an der etwas zusammenpassen müsste. Der aktive Bereich ist eine weiße
 * Fläche mit Schatten — dasselbe Zeichen, das die Karten im Inhalt tragen. */
.segmente {
  max-width: var(--breite); margin: 0 auto 2px;
  padding: 4px 18px 14px;
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.segmente::-webkit-scrollbar { display: none }

/* Die Pille selbst: der Rahmen um die drei Schaltflächen. Als eigenes
   Element statt als Rand am Container, damit sie bei schmalen Fenstern
   mitscrollen kann, ohne dass der Rahmen mitwandert. */
.segmente-innen {
  display: inline-flex; gap: 3px;
  padding: 4px;
  border-radius: var(--radius-pille);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

.segment {
  appearance: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-pille);
  background: transparent;
  color: rgba(255,255,255,.80);
  font: 500 14px/1.2 inherit;
  white-space: nowrap;
  transition: all .2s ease-in-out;
}
.segment:hover {
  background: rgba(255,255,255,.13); color: #fff;
}
.segment[aria-selected="true"] {
  background: #fff; color: var(--akzent-tief); font-weight: 650;
  box-shadow: 0 1px 3px rgba(6,20,36,.28);
}
.segment:focus-visible { outline: 2px solid #fff; outline-offset: 2px }

.segment-nummer {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.18); color: #fff;
  transition: all .2s ease-in-out;
}
.segment[aria-selected="true"] .segment-nummer {
  background: var(--akzent); color: #fff;
}
.segment-zaehler {
  min-width: 19px; padding: 0 5px; height: 19px;
  display: grid; place-items: center;
  border-radius: var(--radius-pille);
  background: var(--gelb); color: #fff;
  font-size: 11px; font-weight: 700;
}
.segment-zaehler[hidden] { display: none }
/* Gelb heißt „hier wartet etwas" (Postausgang). Die Zahl offener Fachfragen in
   Pfad C ist dagegen keine Warnung, sondern eine Angabe — sie bleibt blau. */
.segment-zaehler--ruhig { background: var(--akzent) }

/* Postausgangsanzeige in der Kopfleiste — sichtbar aus jedem Pfad. */
/* Sprachumschalter in der Kopfleiste.
 *
 * Zwei Schaltflächen in einer Pille, die aktive hell hinterlegt. Beide Wörter
 * bleiben sichtbar: Ein Umschalter, der nur die GERADE NICHT gewählte Sprache
 * zeigt, zwingt zum Raten, ob „EN" den Zustand oder die Wirkung meint.
 *
 * `flex: none` ist wichtig — ohne das schiebt sich die Pille bei schmalen
 * Fenstern zusammen und die beiden Kürzel brechen um. */
.sprachwahl {
  display: flex; flex: none; gap: 2px;
  padding: 3px; border-radius: var(--radius-pille);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
}
.sprachwahl button {
  appearance: none; border: 0; cursor: pointer;
  padding: 4px 12px; border-radius: var(--radius-pille);
  background: transparent; color: rgba(255,255,255,.75);
  font: 600 12px/1 inherit; letter-spacing: .04em;
}
.sprachwahl button:hover { color: #fff }
.sprachwahl button.aktiv {
  background: #fff; color: var(--akzent-tief);
}
.sprachwahl button:focus-visible {
  outline: 2px solid #fff; outline-offset: 1px;
}

.postausgang {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--radius-pille);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12.5px; color: #fff;
}
.postausgang[hidden] { display: none }
.postausgang button {
  appearance: none; border: 0; cursor: pointer;
  padding: 4px 11px; border-radius: var(--radius-pille);
  background: #fff; color: var(--akzent-tief);
  font: 600 12px inherit;
}

/* ==========================================================================
   Grundraster
   ========================================================================== */

main { max-width: var(--breite); margin: 0 auto; padding: 22px 18px 40px }
body.pfad-a main { padding-bottom: 132px }   /* Platz für die Eingabeleiste */

.pfad { display: none }
.pfad.aktiv { display: block; animation: einblenden .18s ease-out }
@keyframes einblenden { from { opacity: 0; transform: translateY(4px) } }

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.karte-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -2px 0 13px;
}
.karte-kopf h2 { font-size: 15px; margin: 0; letter-spacing: .1px }
.karte-kopf .kopf-neben { margin-left: auto; font-size: 12.5px; color: var(--text-zart) }

.abschnittskopf { margin: 26px 0 12px; font-size: 13px; font-weight: 700;
                  text-transform: uppercase; letter-spacing: .7px;
                  color: var(--text-zart) }

/* ==========================================================================
   Plaketten (Badges)
   ========================================================================== */

.plakette {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pille);
  font-size: 12px; font-weight: 650; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.plakette::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.plakette--gruen { color: var(--gruen); background: var(--gruen-flaeche); border-color: var(--gruen-rand) }
.plakette--gelb  { color: var(--gelb);  background: var(--gelb-flaeche);  border-color: var(--gelb-rand) }
.plakette--rot   { color: var(--rot);   background: var(--rot-flaeche);   border-color: var(--rot-rand) }
.plakette--lila  { color: var(--lila);  background: var(--lila-flaeche);  border-color: var(--lila-rand) }
.plakette--blau  { color: var(--akzent); background: var(--akzent-hell);  border-color: var(--akzent-rand) }
.plakette--grau  { color: var(--text-leise); background: var(--karte-gedeckt); border-color: var(--rand) }
.plakette--ohne-punkt::before { display: none }

.plaketten { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 }

/* ==========================================================================
   Kennzahlen — die Kachelreihe über der Trefferliste
   ========================================================================== */

.kennzahlen {
  display: grid; gap: 10px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.kennzahl {
  background: var(--karte-gedeckt);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 10px 13px;
}
.kennzahl b {
  display: block; font-size: 22px; font-weight: 680; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--akzent-tief);
}
.kennzahl span {
  display: block; font-size: 11.5px; color: var(--text-zart);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}

/* ==========================================================================
   Pfad A — Chatverlauf
   ========================================================================== */

.eintrag { margin-bottom: 18px }

.frage {
  background: var(--akzent); color: #fff;
  padding: 9px 15px; border-radius: 14px 14px 3px 14px;
  display: inline-block; max-width: 78%; float: right; clear: both;
  box-shadow: var(--schatten);
}

.antwort {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 3px 14px 14px 14px;
  box-shadow: var(--schatten);
  padding: 15px 17px; clear: both;
}

.verstanden {
  font-size: 13px; color: var(--text-leise);
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hell);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: 7px 12px; margin-bottom: 11px;
}
.verstanden code { color: var(--akzent); font-weight: 650 }

.unvollstaendig {
  font-size: 13px; color: var(--rot);
  background: var(--rot-flaeche); border: 1px solid var(--rot-rand);
  border-radius: var(--radius-klein); padding: 9px 12px; margin: 10px 0;
}
.hinweis {
  font-size: 13px; color: var(--gelb);
  background: var(--gelb-flaeche); border: 1px solid var(--gelb-rand);
  border-radius: var(--radius-klein); padding: 8px 12px; margin-top: 9px;
}
.zahl { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums }

a.csv {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 8px 14px;
  background: var(--akzent-hell); border: 1px solid var(--akzent-rand);
  border-radius: var(--radius-klein); text-decoration: none;
  color: var(--akzent); font-weight: 600; font-size: 13.5px;
}
a.csv:hover { background: #dbe9f5 }

/* --- Fußleiste eines Ergebnisses: CSV und Werkzeuge -----------------------
   Zwei Bedienelemente derselben Ordnung, deshalb dieselbe Gestalt und eine
   Zeile. Der Werkzeuge-Knopf ist bewusst KEIN <details>: In einer Flex-Zeile
   schöbe ein aufklappendes Element seine Nachbarn zur Seite. */
.fussleiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.fussleiste a.csv { margin-top: 12px }

button.werkzeuge-taste {
  margin-top: 12px; padding: 8px 14px;
  background: var(--karte-gedeckt); border: 1px solid var(--rand-kraeftig);
  color: var(--text-leise); font-weight: 550; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 7px;
}
button.werkzeuge-taste::before {
  content: "▸"; font-size: 10px; color: var(--text-zart);
  transition: transform .2s ease-in-out;
}
button.werkzeuge-taste.offen::before { transform: rotate(90deg) }
button.werkzeuge-taste:hover {
  background: var(--akzent-hell); border-color: var(--akzent-rand);
  color: var(--akzent-tief);
}
.werkzeuge-inhalt {
  margin-top: 8px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--karte-gedeckt);
}
.werkzeuge-inhalt[hidden] { display: none }

/* --- Berichtstext --------------------------------------------------------
   Der Fließtext aus Modellaufruf 2. Bei einer Punktantwort ist er die Auskunft
   selbst, und die Belege — Filter, Schritte, verdichtete Tabelle — klappen
   darunter auf. Bei einer zusammengesetzten Listenfrage steht er über der
   Tabelle und ordnet sie ein. Beide Male größer und ruhiger als der übrige
   Kartentext, weil er gelesen und nicht überflogen wird. */
.berichtstext { font-size: 15px; line-height: 1.65 }
.berichtstext > :first-child { margin-top: 0 }
.berichtstext > :last-child { margin-bottom: 0 }
.berichtstext p { margin: 0 0 10px }
/* Die Überschriften des Berichts (`# …` aus dem Modell) sind Zwischentitel in
   einer Karte, nicht Seitentitel — deshalb kaum größer als der Text selbst. */
.berichtstext h3, .berichtstext h4, .berichtstext h5, .berichtstext h6 {
  margin: 14px 0 7px; font-size: 14.5px; color: var(--akzent-tief);
}
.berichtstext > h3:first-child, .berichtstext > h4:first-child { margin-top: 0 }
.berichtstext ul, .berichtstext ol { margin: 0 0 10px; padding-left: 22px }
.berichtstext li { margin-bottom: 4px }
.berichtstext code {
  background: var(--akzent-hell); color: var(--akzent);
  padding: 1px 5px; border-radius: 4px; font-size: 13.5px;
}

details.arbeitsprozess {
  margin: 12px 0 0;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--karte-gedeckt);
}
details.arbeitsprozess > summary {
  cursor: pointer; list-style: none;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--text-leise); font-weight: 600;
  border-radius: var(--radius-klein);
  transition: all .2s ease-in-out;
}
details.arbeitsprozess > summary::-webkit-details-marker { display: none }
details.arbeitsprozess > summary::before {
  content: "▸"; font-size: 10px; color: var(--text-zart);
  transition: transform .2s ease-in-out;
}
details.arbeitsprozess[open] > summary::before { transform: rotate(90deg) }
details.arbeitsprozess > summary:hover {
  background: var(--akzent-hell); color: var(--akzent-tief);
}
details.arbeitsprozess[open] > summary {
  border-bottom: 1px solid var(--rand);
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}
.arbeitsprozess-inhalt { padding: 4px 12px 12px }
/* Innen ist die Karte schon eingerückt — die Tabelle braucht nicht noch einmal
   den vollen Abstand nach oben. */
.arbeitsprozess-inhalt > .verstanden { margin-top: 10px }

/* Trefferliste */
.tabelle {
  margin-top: 12px; max-height: 340px; overflow: auto;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--karte);
}
table { border-collapse: collapse; font-size: 12.5px; white-space: nowrap }
/* Füllt die Kartenbreite, ohne die Spalten umbrechen zu lassen: schmale
   Trefferlisten sähen sonst wie ein abgeschnittener Ausschnitt aus. */
.tabelle table { min-width: 100% }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--karte-gedeckt); text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--rand);
  font-weight: 650; color: var(--text-leise);
}
td { padding: 6px 10px; border-bottom: 1px solid #eef1f5 }
tr:hover td { background: #f7f9fc }
td .plakette { font-size: 11px; padding: 1px 8px }

/* Eingabeleiste */
footer.leiste-aussen {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rand);
  padding: 12px 18px;
}
body:not(.pfad-a) footer.leiste-aussen { display: none }
.leiste { max-width: var(--breite); margin: 0 auto; display: flex; gap: 9px }

input, select, textarea {
  font: inherit; color: inherit;
  border: 1px solid var(--rand-kraeftig); border-radius: var(--radius-klein);
  padding: 10px 13px; background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(28,93,153,.15);
}
.leiste input { flex: 1 }
textarea { resize: vertical; min-height: 42px; line-height: 1.5 }

/* Knöpfe */
button {
  font: inherit; cursor: pointer;
  padding: 10px 18px; border: 0; border-radius: var(--radius-klein);
  background: var(--akzent); color: #fff; font-weight: 600;
  transition: background .15s, box-shadow .15s;
}
button:hover { background: var(--akzent-tief) }
button:disabled { opacity: .5; cursor: default }
button.neben {
  background: var(--karte-gedeckt); color: var(--akzent);
  border: 1px solid var(--rand-kraeftig); font-weight: 550;
}
button.neben:hover { background: #e9eef5 }

/* Quick Actions unter jeder Antwort */
.quick {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--rand);
  align-items: center;
}
.quick-frage { font-size: 12.5px; color: var(--text-zart); margin-right: auto }
.quick button {
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  background: #fff; border: 1px solid var(--rand-kraeftig); color: var(--text-leise);
}
.quick button:hover { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-hell) }
.quick button.gut:hover   { border-color: var(--gruen-rand); color: var(--gruen); background: var(--gruen-flaeche) }
.quick button.melden:hover{ border-color: var(--gelb-rand);  color: var(--gelb);  background: var(--gelb-flaeche) }
.quick button.erledigt {
  border-color: var(--gruen-rand); color: var(--gruen);
  background: var(--gruen-flaeche); cursor: default;
}

/* Fortschritt */
.laedt { color: var(--text-leise); font-style: italic }
.uhr { color: var(--text-zart); font-variant-numeric: tabular-nums; font-style: normal }
.balken { height: 7px; background: #e4e9f0; border-radius: 4px; overflow: hidden; margin: 8px 0 }
.balken > div { height: 100%; background: var(--akzent); transition: width .4s }
.politik {
  font-size: 12.5px; color: var(--text-leise); background: var(--karte-gedeckt);
  border-radius: var(--radius-klein); padding: 8px 11px; margin-top: 8px;
  font-style: normal; line-height: 1.45;
}
/* Ausführungsprotokoll — zugeklappt eine Zeile, aufgeklappt der ganze Weg.
 *
 * Bewusst kein Terminal-Look mit schwarzem Grund: Das hier ist keine
 * Entwicklerkonsole, sondern der Nachweis, wie eine Auskunft zustande kam. Es
 * gehört in dieselbe Formensprache wie der Rest der Karte, nur ruhiger.
 *
 * Die Marke links (FILTER, EUDAMED, ZWISCHENSPEICHER) ersetzt die früheren
 * Sonderzeichen: „⚡" muss man raten, ein Wort nicht. */
.log {
  margin: 10px 0 12px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--karte-gedeckt);
  font-style: normal;
}
.log > summary {
  cursor: pointer; list-style: none;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--text-leise);
  border-radius: var(--radius-klein);
  transition: all .2s ease-in-out;
}
.log > summary::-webkit-details-marker { display: none }
.log > summary:hover { background: var(--akzent-hell); color: var(--akzent-tief) }
.log > summary::before {
  content: "▸"; font-size: 10px; color: var(--text-zart);
  transition: transform .2s ease-in-out;
}
.log[open] > summary::before { transform: rotate(90deg) }
.log[open] > summary { border-bottom: 1px solid var(--rand); border-radius: var(--radius-klein) var(--radius-klein) 0 0 }
.log-titel { font-weight: 600 }
.log-anzahl { margin-left: auto; color: var(--text-zart); font-variant-numeric: tabular-nums }

.log-inhalt { padding: 8px 12px 10px; max-height: 260px; overflow: auto }
.log-zeile {
  display: flex; gap: 9px; align-items: baseline;
  padding: 2px 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-leise);
}
.log-marke {
  flex: none; min-width: 108px;
  font: 600 10.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-zart);
}
.log-text { font-variant-numeric: tabular-nums }
.log-zeile--filter .log-marke  { color: var(--lila) }
.log-zeile--llm .log-marke     { color: var(--akzent) }
.log-zeile--cache .log-marke   { color: var(--akzent) }
.log-zeile--ok .log-marke      { color: var(--gruen) }
.log-zeile--warnung            { color: var(--gelb) }
.log-zeile--warnung .log-marke { color: var(--gelb) }
.log-zeile--fehler             { color: var(--rot) }
.log-zeile--fehler .log-marke  { color: var(--rot) }

/* Klärungskasten vor dem Abruf */
.plan {
  background: var(--karte-gedeckt); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: 13px 15px; margin: 9px 0; font-size: 14px;
}
.plan b { display: block; margin-bottom: 6px }
.plan > div { margin: 3px 0 }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.wahl button { padding: 8px 14px; font-size: 13px }
.feld { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rand) }
.feldkopf { font-weight: 650; font-size: 13.5px; margin-bottom: 7px }
.optionen { display: flex; flex-wrap: wrap; gap: 6px 12px }
.optionen label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  background: #fff; border: 1px solid var(--rand); border-radius: 7px;
  padding: 5px 10px; cursor: pointer;
}
.optionen label:hover { border-color: var(--akzent) }
.optionen code { color: var(--akzent); font-weight: 650 }
.klein { font-size: 12px; color: var(--text-leise); margin-top: 6px; line-height: 1.45 }
.feldkopf .klein { display: inline; margin: 0; font-weight: 400 }
.zusammen {
  margin-top: 13px; padding: 10px 13px; background: #fff;
  border: 1px solid var(--akzent-rand); border-left: 3px solid var(--akzent);
  border-radius: 7px; font-size: 13px;
}
.zuviel { color: var(--rot); font-weight: 650 }
.plan.erledigt { opacity: .55 }
.plan.erledigt input, .plan.erledigt button { pointer-events: none }
.nachladen {
  margin-top: 13px; padding: 12px 14px; background: var(--karte-gedeckt);
  border: 1px solid var(--rand); border-radius: var(--radius-klein); font-size: 13.5px;
}
.nachladen button { display: block; margin-top: 9px; padding: 8px 14px; font-size: 13px }

/* Anleitung und Warnhinweis */
.disclaimer {
  background: var(--rot-flaeche); border: 1px solid var(--rot-rand);
  border-left: 4px solid var(--rot);
  border-radius: var(--radius-klein);
  padding: 13px 17px; margin-bottom: 16px; color: #7d2e26; font-size: 13.5px;
}
.disclaimer b {
  display: block; margin-bottom: 4px; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .6px;
}

details.anleitung { padding: 0 }
details.anleitung > summary {
  list-style: none; cursor: pointer;
  padding: 15px 20px; font-weight: 650; font-size: 14.5px;
  display: flex; align-items: center; gap: 9px;
}
details.anleitung > summary::-webkit-details-marker { display: none }
details.anleitung > summary::after {
  content: "▾"; margin-left: auto; color: var(--text-zart); transition: transform .2s;
}
details.anleitung[open] > summary::after { transform: rotate(180deg) }
details.anleitung > summary:hover { color: var(--akzent) }
.anleitung-inhalt { padding: 0 20px 18px; border-top: 1px solid var(--rand) }
.anleitung-inhalt h3 { font-size: 14px; margin: 17px 0 7px }
.anleitung-inhalt p { margin: 6px 0 }
.anleitung-inhalt ul { margin: 6px 0; padding-left: 20px }
.anleitung-inhalt li { margin: 3px 0 }
.bsp { color: var(--akzent); font-style: italic }
.spalten { display: flex; gap: 22px; flex-wrap: wrap }
.spalten > div { flex: 1 1 300px }
.kann { border-left: 3px solid var(--gruen); padding-left: 13px }
.kannnicht { border-left: 3px solid var(--rot); padding-left: 13px }
.kann h3 { color: var(--gruen) } .kannnicht h3 { color: var(--rot) }
.zweitfilter {
  background: var(--karte-gedeckt); border-radius: var(--radius-klein);
  padding: 13px 15px; margin-top: 11px;
}
.zweitfilter code, .anleitung-inhalt code {
  background: #fff; padding: 1px 6px; border-radius: 4px; font-size: 12.5px;
  border: 1px solid var(--rand);
}

/* ==========================================================================
   Pfad B — Rückmeldung
   ========================================================================== */

.formularfeld { margin-bottom: 15px }
.formularfeld > label {
  display: block; font-weight: 650; font-size: 13.5px; margin-bottom: 6px;
}
.formularfeld > label .optional { font-weight: 400; color: var(--text-zart) }
.formularfeld input, .formularfeld select, .formularfeld textarea { width: 100% }
.feldhilfe { font-size: 12.5px; color: var(--text-zart); margin-top: 5px; line-height: 1.45 }

.parameterkasten {
  background: var(--karte-gedeckt); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: 11px 13px;
}
.parameterkasten .leer { font-size: 13px; color: var(--text-zart); font-style: italic }

/* Zurückgestellter Entwurf: sichtbar geparkt statt überschrieben. */
.entwurfsbanner {
  background: var(--gelb-flaeche); border: 1px solid var(--gelb-rand);
  border-left: 4px solid var(--gelb);
  border-radius: var(--radius-klein); padding: 12px 15px; margin-bottom: 16px;
  font-size: 13.5px; color: #6f4f08;
}
.entwurfsbanner b { display: block; margin-bottom: 4px }
.entwurfsbanner .wahl { margin-top: 10px }
.entwurfsbanner button { background: var(--gelb); color: #fff; font-size: 13px; padding: 7px 13px }
.entwurfsbanner button.neben { background: #fff; color: var(--gelb); border: 1px solid var(--gelb-rand) }
.entwurfsbanner button.neben:hover { background: #fdf0d0 }

.speicherstand { font-size: 12.5px; color: var(--text-zart); display: flex;
                 align-items: center; gap: 6px; min-height: 18px }
.speicherstand.gesichert { color: var(--gruen) }

/* ==========================================================================
   Pfad C — Experten-Fragen
   ========================================================================== */

.gruss {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(140deg, #fff, var(--akzent-hell));
  border: 1px solid var(--akzent-rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 20px 22px; margin-bottom: 20px;
}
.gruss-zeichen {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; font-size: 24px;
  border-radius: 13px; background: #fff; border: 1px solid var(--akzent-rand);
  box-shadow: var(--schatten);
}
.gruss h2 { margin: 0 0 6px; font-size: 16px; color: var(--akzent-tief) }
.gruss p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text) }
.gruss .dank { margin-top: 9px; font-size: 13px; color: var(--text-leise) }

.frage-karte { position: relative; transition: border-color .2s }
.frage-karte.beantwortet { border-color: var(--gruen-rand); background: #fbfefc }

/* `flex-wrap` und die schrumpfbare Titelbreite sind nicht kosmetisch: Sobald zu
   einer Frage Antworten vorliegen, steht rechts im Kopf eine Plakette
   („2 Einschätzungen“), und die bricht nicht um. Auf einem 390 px breiten
   Fenster schob sie die Karte 30 px über den Rand hinaus — sichtbar erst, wenn
   die Datenbank nicht mehr leer ist. */
.frage-kopf { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px;
              flex-wrap: wrap }
.frage-nummer {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--akzent-hell); border: 1px solid var(--akzent-rand);
  color: var(--akzent); font-weight: 700; font-size: 12.5px;
}
.frage-karte.beantwortet .frage-nummer {
  background: var(--gruen-flaeche); border-color: var(--gruen-rand); color: var(--gruen);
}
.frage-titel { margin: 0; font-size: 16px; line-height: 1.4; flex: 1 1 240px; min-width: 0 }
.frage-text { font-size: 14.5px; line-height: 1.6 }
.frage-text p:first-child { margin-top: 0 }
.frage-text ol, .frage-text ul { padding-left: 22px }
.frage-text li { margin: 5px 0 }

details.beleg { margin-top: 12px; border-top: 1px solid var(--rand); padding-top: 10px }
details.beleg > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: .5px; list-style: none;
  display: flex; align-items: center; gap: 7px;
}
details.beleg > summary::-webkit-details-marker { display: none }
details.beleg > summary::before { content: "▸"; transition: transform .2s; display: inline-block }
details.beleg[open] > summary::before { transform: rotate(90deg) }
details.beleg > summary:hover { color: var(--akzent) }
.beleg-inhalt { font-size: 13.5px; color: var(--text-leise); line-height: 1.6; margin-top: 8px }
.beleg-inhalt p:first-child { margin-top: 0 }
.beleg-inhalt code { background: var(--karte-gedeckt); padding: 1px 5px;
                     border-radius: 4px; font-size: 12.5px; border: 1px solid var(--rand) }

.md-tabelle { overflow-x: auto; margin: 10px 0; border: 1px solid var(--rand);
              border-radius: var(--radius-klein) }
.md-tabelle table { width: 100%; font-size: 12.5px; white-space: normal }
.md-tabelle th { background: var(--karte-gedeckt) }

.antwortfeld { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--rand) }
.antwortfeld .reihe { display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end;
                      margin-top: 11px }
.antwortfeld .reihe > div { flex: 1 1 220px }
.antwortfeld .reihe button { flex: none }

.dankekasten {
  background: var(--gruen-flaeche); border: 1px solid var(--gruen-rand);
  border-radius: var(--radius-klein); padding: 13px 15px; margin-top: 14px;
  font-size: 13.5px; color: var(--gruen);
}
.dankekasten b { display: block; margin-bottom: 4px; font-size: 14px }
.dankekasten .eigene {
  margin-top: 9px; padding: 9px 11px; background: #fff;
  border: 1px solid var(--gruen-rand); border-radius: 7px;
  color: var(--text); white-space: pre-wrap; line-height: 1.5;
}
.dankekasten button {
  margin-top: 10px; background: #fff; color: var(--gruen);
  border: 1px solid var(--gruen-rand); font-size: 13px; padding: 6px 12px;
}
.dankekasten button:hover { background: #d6f0e1 }

.quellhinweis {
  font-size: 12.5px; color: var(--text-zart); text-align: center;
  margin: 22px 0 6px; line-height: 1.6;
}

/* ==========================================================================
   Toasts — nicht blockierend, nie ein Dialog
   ========================================================================== */

.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
body.pfad-a .toasts { bottom: 84px }

.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 380px; padding: 12px 15px;
  border-radius: var(--radius-klein); box-shadow: var(--schatten-hoch);
  background: var(--karte); border: 1px solid var(--rand);
  font-size: 13.5px; line-height: 1.5;
  animation: toast-rein .2s ease-out;
}
@keyframes toast-rein { from { opacity: 0; transform: translateY(10px) } }
.toast.geht { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s }
.toast--gut  { border-color: var(--gruen-rand); background: var(--gruen-flaeche); color: var(--gruen) }
.toast--warn { border-color: var(--gelb-rand);  background: var(--gelb-flaeche);  color: var(--gelb) }
.toast--fehler { border-color: var(--rot-rand); background: var(--rot-flaeche);   color: var(--rot) }
.toast b { display: block }
.toast .toast-text { color: var(--text-leise); font-size: 12.5px; margin-top: 2px }
.toast button {
  margin-left: auto; background: transparent; color: inherit;
  padding: 0 4px; font-size: 16px; line-height: 1; opacity: .6;
}
.toast button:hover { background: transparent; opacity: 1 }

/* Hinweis, der auf den Klärungskasten zeigt. Kein Warnkasten — es ist ein
   Angebot, keine Beanstandung. */
.fuehrung {
  margin-top: 10px; padding: 9px 12px;
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hell);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: 13px; color: var(--akzent-tief); line-height: 1.55;
}

/* Begrüßung des Assistenten. Sie sieht aus wie eine Antwortkarte, ist aber
   keine — deshalb kein Abzeichen, keine Bewertungsknöpfe, und ein eigener,
   ruhiger Grund. Sie steht am Anfang jedes Gesprächs, auch nach „Neues
   Gespräch": Der Vorbehalt gehört vor die erste Antwort, nicht darunter. */
.assistent {
  background: linear-gradient(180deg, var(--akzent-hell), var(--karte));
  border-color: var(--akzent-rand);
}
.assistent-kopf { margin-bottom: 7px }
.assistent-kopf b { font-size: 15px; color: var(--akzent-tief) }
.assistent p { margin: 0 0 8px; font-size: 14px; line-height: 1.6 }
.assistent p:last-child { margin-bottom: 0 }
.assistent-start { color: var(--text-leise); font-size: 13.5px }

/* ==========================================================================
   Fuß und Impressum
   ========================================================================== */

/* Der institutionelle Rahmen. Zurückhaltend gestaltet und trotzdem immer da:
   Wer dieses Werkzeug in einer Klinik zu sehen bekommt, soll ohne Nachfrage
   erkennen, woher es kommt und woran er ist. */
.fuss {
  border-top: 1px solid var(--rand);
  background: var(--karte-gedeckt);
  margin-top: 34px;
}
/* In Pfad A liegt die Eingabeleiste fest am unteren Rand. Ohne diesen Abstand
   verschwände der Fuß darunter — sichtbar erst beim Scrollen ans Ende, also
   genau dann, wenn ihn jemand lesen will. */
body.pfad-a .fuss { margin-bottom: 92px }

.fuss-innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.fuss-haftung {
  margin: 0; max-width: 78ch;
  font-size: 12.5px; line-height: 1.6; color: var(--text-leise);
}
.fuss-zeile {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  font-size: 12.5px;
}
.fuss-logo {
  display: inline-flex; flex: none;
  padding: 3px 6px; border-radius: var(--radius-klein);
  background: #fff; border: 1px solid var(--rand);
  transition: all .2s ease-in-out;
}
.fuss-logo:hover { border-color: var(--rand-kraeftig) }
.fuss-logo img { display: block; height: 58px; width: auto }

.fuss-zeile a:not(.fuss-logo), .fuss-taste {
  color: var(--akzent); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all .2s ease-in-out;
}
.fuss-zeile a:not(.fuss-logo):hover, .fuss-taste:hover {
  border-bottom-color: var(--akzent);
}
.fuss-taste {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 0; font: inherit;
}

/* Statusabzeichen. Drei Zustände, nicht zwei — „ungeprüft" ist einer davon
   und sieht auch so aus (grau, nicht grün). */
.fuss-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: var(--radius-pille);
  border: 1px solid var(--rand-kraeftig);
  background: var(--karte);
  font-size: 11.5px; color: var(--text-leise); white-space: nowrap;
}
.fuss-status[hidden] { display: none }
.fuss-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-zart);
}
.fuss-punkt--gut { background: var(--gruen) }
.fuss-punkt--warn { background: var(--gelb) }
.fuss-punkt--schlecht { background: var(--rot) }

/* ==========================================================================
   Pfad D — Über das Tool
   ==========================================================================
   Der einzige Bereich, der überwiegend gelesen und nicht bedient wird. Deshalb
   eine Textspalte mit begrenzter Breite: 74 Zeichen sind die Grenze, an der ein
   Absatz noch in einem Zug lesbar bleibt. */

/* `margin-left/right: auto` gehört dazu, sonst klebt die schmalere Karte am
   linken Rand der 1060 px von `main`. Nur `margin-bottom` kommt aus `.karte` —
   die Seitenränder muss diese Regel selbst setzen. */
.ueber { max-width: 74ch; margin-left: auto; margin-right: auto }
.ueber h2 { margin: 0 0 12px; font-size: 19px }
.ueber h3 {
  margin: 22px 0 8px; font-size: 14.5px;
  color: var(--akzent-tief); letter-spacing: .01em;
}
.ueber p { margin: 0 0 11px; font-size: 14px; line-height: 1.68 }
.ueber ul { margin: 0 0 11px; padding-left: 20px }
.ueber li { margin-bottom: 9px; font-size: 14px; line-height: 1.62 }
.ueber li:last-child { margin-bottom: 0 }
.ueber a { color: var(--akzent) }
.ueber code {
  background: var(--akzent-hell); color: var(--akzent);
  padding: 1px 5px; border-radius: 4px; font-size: 13px;
}

/* Der Vorspann trägt die Spannung des ganzen Abschnitts: öffentlich, kostenlos —
   und trotzdem keine Auskunft. Er darf deshalb größer stehen als der Rest. */
/* In der Textfarbe des Fließtextes, nicht in `--text-leise`: Bei 15,5 px liegt
   das gedeckte Grau auf Weiß bei etwa 4,3:1 und damit unter der Schwelle. Die
   Hervorhebung leistet die Randlinie, nicht ein blasserer Ton. */
.ueber-vorspann {
  font-size: 15.5px !important; line-height: 1.6 !important;
  color: var(--text);
  padding-left: 13px; border-left: 3px solid var(--akzent-rand);
}

/* Der Vorbehalt in derselben Farbe wie überall sonst im Werkzeug. Er ist keine
   Fußnote, sondern die Aussage, die über allen anderen steht. */
.ueber-vorbehalt {
  color: var(--rot); background: var(--rot-flaeche);
  border: 1px solid var(--rot-rand); border-radius: var(--radius-klein);
  padding: 11px 13px; font-size: 13.5px !important;
}

.impressum-block {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 4px 0 18px;
}
.impressum-person {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 210px; min-width: 210px;
  padding: 12px 14px;
  background: var(--karte-gedeckt);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  font-size: 13px; line-height: 1.5;
}
.impressum-rolle {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-zart); margin-bottom: 3px;
}
.impressum-person b { font-size: 14px }
.impressum-person span { color: var(--text-leise) }
.impressum-person a { word-break: break-word }

/* ==========================================================================
   Zugang — Anmeldung und Einladung
   ==========================================================================
   Eine Karte, mittig, schmal: Auf diesen Seiten gibt es genau eine Aufgabe,
   und das Layout soll das sagen. */

.zugang-main {
  max-width: 430px; margin: 0 auto; padding: 48px 18px 40px;
}
.zugang-karte h1 { margin: 0 0 12px; font-size: 19px }
.zugang-erklaerung {
  margin: 0 0 16px; font-size: 13.5px; line-height: 1.6;
  color: var(--text-leise);
}
.zugang-karte form { display: flex; flex-direction: column; gap: 12px }
.zugang-karte label { display: flex; flex-direction: column; gap: 5px;
                      font-size: 13px; font-weight: 600 }
.zugang-karte input { font-weight: 400 }
.zugang-karte button[type="submit"] { margin-top: 6px }
.zugang-fehler {
  font-size: 13px; color: var(--rot);
  background: var(--rot-flaeche); border: 1px solid var(--rot-rand);
  border-radius: var(--radius-klein); padding: 9px 12px;
}
.zugang-fehler[hidden] { display: none }
.zugang-fuss {
  margin: 18px 4px 0; font-size: 12px; line-height: 1.6;
  color: var(--text-zart); text-align: center;
}

/* ==========================================================================
   Schmale Fenster
   ========================================================================== */

@media (max-width: 720px) {
  /* Die Leiste scrollt waagerecht (overflow-x oben), statt die Beschriftungen
     auszublenden: Drei Zahlen ohne Text wären keine Navigation mehr. */
  .segment { padding: 10px 12px; font-size: 13px }
  .frage { max-width: 90% }
  .kopf-innen { padding-bottom: 4px }
  .gruss { flex-direction: column; gap: 12px }
  /* Das Statusabzeichen rutscht auf schmalen Fenstern in eine eigene Zeile,
     statt die Links zusammenzuquetschen. */
  .fuss-status { margin-left: 0 }
}

/* --- Modellsicht: Umschalter, Varianten-Abzeichen, aufgeklappte Zeile -----
 *
 * Der Umschalter ist bewusst kein prominenter Kasten. Er ist eine Auskunft
 * über die Körnung, kein Aufruf zum Handeln — wer ihn nicht bemerkt, sieht
 * trotzdem die richtige (die gröbere) Sicht.
 */
.umschalter {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .75rem 0 .35rem;
}

.umschalter button {
  background: var(--flaeche-2, #f2f4f7);
  color: var(--text, #1a1a1a);
  border: 1px solid var(--linie, #d5d9e0);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .85rem;
  cursor: pointer;
}

.umschalter button.aktiv {
  background: var(--akzent, #12457e);
  border-color: var(--akzent, #12457e);
  color: #fff;
  font-weight: 600;
}

.umschalter .klein { flex: 1 1 18rem; }

/* Die Variantenzahl ist ein Knopf — aber nur, wo es mehr als eine gibt.
   Deshalb hier keine Regel für den Ein-Varianten-Fall: Der bleibt eine
   gewöhnliche Zelle und verspricht nichts. */
button.varianten {
  background: none;
  border: 1px solid var(--akzent, #12457e);
  color: var(--akzent, #12457e);
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

button.varianten:hover { background: var(--akzent-schwach, #e8f0f9); }
button.varianten:disabled { opacity: .5; cursor: progress; }

/* Die aufgeklappten Varianten sitzen eingerückt unter ihrer Modellzeile,
   damit die Zugehörigkeit auch dann sichtbar bleibt, wenn zwei Modelle
   gleichzeitig offen sind. */
tr.variantenzeile > td {
  background: var(--flaeche-2, #f7f8fa);
  border-left: 3px solid var(--akzent, #12457e);
  padding: .25rem .25rem .25rem .75rem;
}

tr.variantenzeile .tabelle { margin: 0; }
tr.variantenzeile table { font-size: .82rem; }


/* --- Quellenplakette -------------------------------------------------------
   Sie sitzt in derselben Reihe wie die Rechtsrahmen-Plaketten, ist aber ein
   Knopf: Woher die Daten stammen, lässt sich in zwei Wörtern sagen — warum
   diese Quelle gewählt wurde, nicht. Der Grund steht deshalb eingeklappt
   darunter statt in einem Tooltip, den niemand zitieren kann. */
.plakette--klickbar {
  cursor: pointer;
  border: 1px solid currentColor;
  font: inherit;
  font-size: 0.78rem;
}
.plakette--klickbar::after { content: " ⌄"; opacity: 0.6; }
.plakette--blau {
  background: var(--blau-hell, #e7f0fb);
  color: var(--blau-dunkel, #1f4f82);
}
.quelle-grund {
  flex-basis: 100%;
  margin-top: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--blau-dunkel, #1f4f82);
  background: var(--flaeche-still, #f6f7f9);
  font-size: 0.85rem;
  line-height: 1.5;
}
.quelle-grund div + div { margin-top: 0.3rem; }

/* --- Laufende Aufgabe ------------------------------------------------------
   Sie steht zwischen der Phasenzeile und dem Balken und bleibt stehen, während
   darüber die einzelnen Anfragen durchlaufen. Vorher teilten sich beide eine
   Zeile und überschrieben sich mehrmals pro Sekunde. */
.aufgabe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
  color: var(--text-still, #55606d);
}
.aufgabe .anteil { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Ablaufplan einer zusammengesetzten Frage ------------------------------
   Drei Schritte mit ihren Zeiten, bevor jemand zwei Minuten wartet. Die
   Zeitspalte ist rechtsbündig und tabellarisch, damit sich die Dauern
   untereinander vergleichen lassen statt im Fließtext zu verschwinden. */
.ablaufplan {
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linie, #dde2e8);
}
.ablaufplan ol { margin: 0.4rem 0 0.5rem; padding-left: 1.4rem; }
.ablaufplan li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.2rem;
}
.ablaufplan .dauer {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-still, #55606d);
  font-size: 0.85rem;
}