:root {
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1e242c;
  --line: #2a323d;
  --text: #dde3ea;
  --muted: #8b97a6;
  --accent: #4c9aff;
  --up: #35c46b;
  --down: #f2545b;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------- Kopfzeile */
/* Die Kopfzeile MUSS umbrechen duerfen.

   Sie traegt Marke, Anmeldeleiste, zehn Navigationsknoepfe, fuenf
   Ansichtsknoepfe, die Auto-Suche und das Statusfeld. Als starre Reihe ist das
   breiter als ein normales Fenster -- und weil `.status` mit `margin-left:auto`
   am Ende steht, wurde ausgerechnet IT hinausgeschoben: gemessen x = 2541 px
   bei 1254 px Fensterbreite.

   Die Folge war nicht ein haesslicher Umbruch, sondern eine Anwendung, die auf
   nichts mehr zu antworten schien. „Benutzer angelegt" wurde geschrieben --
   nur eben neben den Bildschirm. Erfolg und Fehler gleichermassen. Gemeldet
   als „man kann keinen user anlegen, keine reaktion der ui"; angelegt war er.

   Deshalb `flex-wrap` und eine Mindest- statt einer Festhoehe. Ein Feld, das
   Rueckmeldung gibt, darf nie das erste sein, das aus dem Bild faellt.      */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 6px 20px;
  min-height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { font-weight: 600; letter-spacing: .3px; }
.brand-org { color: var(--accent); }

.tabs { display: flex; gap: 4px; }

.tabs button {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
}

.tabs button:hover { background: var(--panel-2); color: var(--text); }
.tabs button.active { background: var(--panel-2); color: var(--text); }

/* Ansichtsumschalter in der Kopfzeile */
.viewswitch { display: flex; margin-left: 8px; }

.viewswitch button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
}

.viewswitch button + button { border-left: 0; }
.viewswitch button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.viewswitch button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.viewswitch button:hover { color: var(--text); }
.viewswitch button.active { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 600; }

/* Auto-Suche neben dem Ansichtsumschalter */
.autofind { display: flex; gap: 6px; margin-left: 10px; align-items: center; }
.autofind select { padding: 5px 8px; font-size: 13px; }
.autofind button {
  padding: 5px 12px;
  font-size: 13px;
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.autofind button:hover { background: var(--accent); color: #06101f; }

/* `margin-left:auto` schiebt es an den rechten Rand SEINER Zeile. Bricht die
   Kopfzeile um, ist das eine eigene Zeile -- sichtbar statt abgeschnitten.
   `flex-shrink:0` verhindert, dass eine lange Fehlermeldung auf null Breite
   zusammengedrueckt wird, was dasselbe Ergebnis haette wie vorher.          */
.status {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  min-height: 18px;
  flex-shrink: 0;
  max-width: 100%;
}

.status.err { color: var(--down); }
.status.busy { color: var(--accent); }

/* --------------------------------------------------------------- Layout */
.view { display: none; }
.view.active { display: flex; }

.sidebar {
  width: 300px;
  flex: 0 0 300px;
  border-right: 1px solid var(--line);
  padding: 16px;
  height: calc(100vh - 52px);
  overflow-y: auto;
  background: var(--panel);
}

.content { flex: 1; padding: 16px 20px; min-width: 0; }
.content.wide { max-width: 1500px; }

/* ------------------------------------------------------------ Bedienung */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.group { display: flex; flex-direction: column; gap: 5px; }

label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

input, select, button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
}

input[type="number"] { width: 90px; }
input[type="date"] { width: 140px; font-size: 13px; }

.daterange { display: flex; align-items: center; gap: 6px; }
.daterange .dash { color: var(--muted); }

.asof-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.asof-list .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 4px 2px 7px;
  font-size: 12px;
}

.asof-list .chip .dot { width: 8px; height: 8px; border-radius: 50%; }

.asof-list .chip button {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 0 3px;
  font-size: 14px;
  line-height: 1;
}

.asof-list .chip button:hover { color: var(--down); }
input[type="search"] { min-width: 180px; }

button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }
button.link { background: none; border: 0; color: var(--accent); padding: 0; font-size: 12px; }

.segmented { display: flex; }
.segmented button { border-radius: 0; }
.segmented button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.segmented button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.segmented button.active { background: var(--accent); border-color: var(--accent); color: #06101f; }

/* Mehrfachauswahl: schmaler, weil hier bis zu sechs Schalter nebeneinander stehen */
.segmented.multi button { padding: 6px 9px; font-size: 12px; min-width: 34px; }

.check { display: flex; align-items: center; gap: 7px; text-transform: none; font-size: 14px; color: var(--text); }
.check input { width: auto; }

.hint { color: var(--muted); font-size: 12px; margin: 2px 0 0; }
.hint.block { margin: 0 0 14px; max-width: 900px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field.inline { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 10px; }

/* ---------------------------------------------------------- Wertauswahl */
.picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 6px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.picker {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 300px;
  overflow-y: auto;
  background: var(--panel-2);
}

.picker li {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.picker li:last-child { border-bottom: 0; }
.picker li:hover { background: #263040; }
.picker .sym { font-weight: 600; min-width: 74px; }
.picker .nm { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.picker.selected li { background: #1a2330; }

/* ------------------------------------------------------------- Diagramme */
.charts { display: grid; gap: 16px; }
.charts.grid-mode { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.chart-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;

  /* Ohne min-width:0 weigern sich Grid-Kinder zu schrumpfen und übernehmen
     stattdessen die Breite ihres Inhalts — beim Canvas also dessen feste
     Pixelbreite. Zusammen mit overflow:hidden kann ein zu breit berechnetes
     Diagramm nie in die Nachbarspalte laufen. */
  min-width: 0;
  overflow: hidden;
}

.chart-box .u-wrap { max-width: 100%; }

.chart-title { font-weight: 600; margin: 0 0 6px; font-size: 13px; }
.chart-title .sub { color: var(--muted); font-weight: 400; margin-left: 8px; font-size: 12px; }

.chart-help { margin: 0 0 8px; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }

.legend .item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 9px;
}

.legend .swatch { width: 10px; height: 10px; border-radius: 2px; }
.legend .chg.up { color: var(--up); }
.legend .chg.down { color: var(--down); }

.empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* ------------------------------------------------------ Korrelationsmatrix */

.matrix-wrap { overflow-x: auto; }
.flow-wrap { margin-top: 16px; }

.heatmap { border-collapse: separate; border-spacing: 2px; font-size: 12px; }

.heatmap th {
  color: var(--muted);
  font-weight: 500;
  padding: 4px 8px;
  text-align: right;
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 1;
}

/* Kopfzeile schräg gestellt, sonst wird die Matrix bei vielen Werten
   unlesbar breit. */
.heatmap tr:first-child th {
  position: static;
  height: 92px;
  vertical-align: bottom;
  text-align: left;
  padding: 0;
}

.heatmap th.rot span {
  display: inline-block;
  transform: rotate(-60deg);
  transform-origin: left bottom;
  white-space: nowrap;
  font-size: 11px;
  padding-left: 4px;
}

.heatmap td {
  width: 46px;
  min-width: 46px;
  text-align: center;
  padding: 6px 2px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: default;
}

.heatmap td.strong { font-weight: 700; }
.heatmap td.na { color: var(--muted); background: var(--panel-2); }

/* --------------------------------------------------------------- Tabellen */
.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th, .grid td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.grid th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tbody tr:hover { background: var(--panel-2); }
.grid .up { color: var(--up); }
.grid .down { color: var(--down); }
.grid .dim { color: var(--muted); }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 16px; margin-bottom: 16px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.card h3 { margin: 0 0 4px; font-size: 14px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--line); }
.pill.ok { color: var(--up); border-color: var(--up); }
.pill.off { color: var(--muted); }

/* uPlot an das dunkle Thema anpassen */
.u-legend { color: var(--text); font-size: 12px; }
.u-legend .u-marker { border-radius: 2px; }

/* Ebene fuer den Bezugspunkt: liegt ueber dem Diagramm, faengt aber
   keine Mausereignisse ab -- Zoom und Verschieben muessen weiter
   beim Diagramm ankommen. */
.anchor-layer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------- Säulen --- */

.pillar-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid #2a2f37;
}

.pillar-tabs button {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 8px 16px;
  color: #9aa3ad;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}

.pillar-tabs button:hover { color: #e8e8e8; }

.pillar-tabs button.active {
  background: #171b21;
  border-color: #2a2f37;
  color: #e8e8e8;
  /* Deckt die Trennlinie darunter ab, damit der Reiter mit dem Inhalt verbunden wirkt. */
  margin-bottom: -1px;
  padding-bottom: 9px;
}

.pillar-panel { display: none; }
.pillar-panel.active { display: block; }

.pillar-head {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #171b21;
  border: 1px solid #2a2f37;
  border-radius: 6px;
}

.pillar-head .weight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pillar-head .weight input[type=range] { width: 200px; }

.pillar-head .weight output {
  min-width: 2.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Der normierte Anteil -- das Gewicht allein sagt nichts, erst das Verhältnis. */
.pillar-head .share {
  color: #9aa3ad;
  font-size: 12px;
  min-width: 9em;
}

.strategies {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.strategy {
  padding: 12px 14px;
  background: #14181d;
  border: 1px solid #262b33;
  border-radius: 6px;
}

.strategy .hint { margin: 6px 0 8px 24px; max-width: 78ch; }

.strategy .params {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: 24px;
}

.strategy .params label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9aa3ad;
}

.strategy .params input { width: 80px; }

.strategy .result {
  margin: 10px 0 0 24px;
  font-size: 13px;
  color: #cfd6dd;
}

.strategy .result .num { font-variant-numeric: tabular-nums; }

.strategy.off { opacity: 0.45; }

.verdict {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 6px;
}

.verdict.good { background: #1d3a26; color: #7ee2a0; }
.verdict.mid  { background: #3a341d; color: #e2cd7e; }
.verdict.bad  { background: #3a1d1d; color: #e28c7e; }

/* Trennt die beiden Hälften der mathematischen Säule: Einzelkurs oben,
   Universum unten. Ohne sichtbare Trennung liest man den zweiten Teil als
   Fortsetzung des ersten und wundert sich, warum das Auswahlfeld nicht wirkt. */
.section-split {
  margin: 26px 0 10px;
  padding-top: 18px;
  border-top: 1px solid #2a2f37;
  font-size: 15px;
}

.mm-busy { opacity: 0.5; pointer-events: none; }

/* Die Ladung als Balken -- eine Zahl zwischen 0 und 1 liest sich in einer
   Tabelle mit dreißig Zeilen schlecht. */
.bar {
  display: inline-block;
  height: 8px;
  background: #6aa9ff;
  border-radius: 2px;
  vertical-align: middle;
}

/* Vorläufer und Nachzügler nebeneinander -- untereinander verliert man den
   Vergleich, und genau der ist die Aussage. */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

#mm-leaders h4 { margin: 16px 0 6px; font-size: 13px; color: #cfd6dd; }

/* Hinweis über dem Diagrammbereich: was von der Auswahl nicht gezeigt wird.
   Auffällig genug, um gelesen zu werden, zurückhaltend genug, um nicht wie ein
   Fehler auszusehen — es ist eine Auskunft, keine Störung. */
.notice {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 3px solid #c9a227;
  background: rgba(201, 162, 39, 0.08);
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  line-height: 1.5;
}

/* --- Die drei Bänder der Deep-Learning-Säule -------------------------------
   Jedes Band ist eine eigene Einheit mit eigenem Gewicht. Der Rahmen macht
   sichtbar, dass die Messwerte darin zum Regler daneben gehören und nicht zur
   Säule als ganzer. */
.band, .band-fc {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #2a3341;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
}

.band.off, .band-fc.off { opacity: 0.62; }

.band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.band-name b { font-size: 15px; }
.band-name .dim { margin-left: 8px; font-size: 12px; }

.band-head .weight { display: flex; align-items: center; gap: 8px; }
.band-head .weight input[type="range"] { width: 160px; }
.band-head .weight output { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }

.band .share, .band-fc .share { font-size: 12px; color: #8b98a8; }

.band-fc h4 { margin: 0 0 6px; font-size: 14px; }
.band-fc h4 .share { float: right; font-weight: normal; }

table.grid.compact th, table.grid.compact td { padding: 3px 8px; font-size: 12px; }

button.link {
  background: none;
  border: none;
  color: #6aa9ff;
  cursor: pointer;
  padding: 0 2px;
  font: inherit;
  text-decoration: underline;
}

/* Blätterleiste. Bei 185 Seiten wäre eine vollständige Zahlenreihe breiter als
   das Fenster — gezeigt werden die Nachbarn, Anfang und Ende. */
.pager {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.pager button {
  min-width: 32px;
  padding: 4px 8px;
  border: 1px solid #2a3341;
  border-radius: 4px;
  background: #161c25;
  color: #c8d2de;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.pager button:hover { background: #1d2530; }
.pager button.active { background: #2b5c9e; border-color: #3c7ad1; color: #fff; }
.pager .dim { margin-left: 8px; font-size: 12px; }

.warn { color: #e0b45c; }

/* --- Wissen und Semantik -------------------------------------------------- */

.toolbar.wide { flex-wrap: wrap; }
.toolbar .group.grow { flex: 1 1 340px; }
.toolbar .group.grow input[type="text"] { width: 100%; }

.row-actions { white-space: nowrap; }
.row-actions button { margin-right: 8px; }

/* Ein Treffer der Ähnlichkeitssuche. Der Text bekommt Luft — er ist hier der
   Inhalt und nicht eine Zelle in einer Tabelle. */
.hit {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 3px solid #2b5c9e;
  background: rgba(43, 92, 158, 0.06);
  border-radius: 0 4px 4px 0;
}

.hit-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.hit-head .score { margin-left: auto; font-size: 12px; color: #8b98a8; }
.hit p { margin: 4px 0; line-height: 1.55; }
.hit .small { font-size: 12px; }

input[type="file"] { font: inherit; color: #c8d2de; }

/* --- Reasoning ------------------------------------------------------------ */

.chat {
  max-height: 620px;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 12px;
}

.msg {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #232c38;
}

.msg.user { background: rgba(43, 92, 158, 0.10); border-color: #2b5c9e; }
.msg.assistant { background: rgba(255, 255, 255, 0.02); }

.msg-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: #8b98a8;
  margin-bottom: 6px;
}

.msg-head .dim { margin-left: auto; font-weight: normal; }
.msg-body { line-height: 1.6; }

/* Die Werkzeugspur gehört zur Antwort, drängt sich aber nicht auf. */
details.tools { margin-top: 10px; font-size: 12px; }
details.tools summary { cursor: pointer; color: #6aa9ff; }

details.tools .tool {
  margin: 8px 0 0 12px;
  padding-left: 10px;
  border-left: 2px solid #2a3341;
}

details.tools code { color: #d8b46a; }

details.tools pre {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: #10151d;
  border-radius: 4px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  color: #9aa7b8;
}

#rs-input {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  background: #10151d;
  border: 1px solid #2a3341;
  border-radius: 4px;
  color: #c8d2de;
  resize: vertical;
}

/* Die Wippe einer Erhaltungsgruppe: zwei Seiten, die sich gegenläufig bewegen.
   Die Pfeile in der Mitte sind der Punkt — ohne sie liest man zwei Listen. */
.wippe {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.wippe .seite-a, .wippe .seite-b {
  flex: 1 1 40%;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.wippe .seite-a { background: rgba(95, 191, 143, 0.10); border-left: 3px solid #5fbf8f; }
.wippe .seite-b { background: rgba(226, 140, 126, 0.10); border-left: 3px solid #e28c7e; text-align: right; }
.wippe .wippe-mitte { color: #8b98a8; font-size: 18px; }

/* Die Fundstelle im Trefferkopf — sichtbar, aber nicht lauter als der Inhalt. */
.hit-head .stelle { font-size: 12px; }
.hit-head .stelle a { color: #6aa9ff; text-decoration: none; }
.hit-head .stelle a:hover { text-decoration: underline; }

/* --- Tagesübersicht ------------------------------------------------------- */

.heute-punkt {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid #2a3341;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 0 4px 4px 0;
}

.heute-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.heute-kopf b { font-size: 14px; }
.heute-saeule { font-size: 11px; color: #6b7684; text-transform: uppercase; letter-spacing: .04em; }

/* Das Gewicht ganz rechts: Es ordnet ein, es ist nicht die Aussage. */
.heute-gewicht {
  margin-left: auto;
  font-size: 12px;
  color: #8b98a8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.heute-punkt p { margin: 2px 0 0; line-height: 1.55; font-size: 13px; }

/* Die Einschränkungen stehen mit der Übersicht, nicht als Kleingedrucktes
   darunter — wer sie überliest, soll sie wenigstens gesehen haben. */
.heute-caveats {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid #c9a227;
  background: rgba(201, 162, 39, 0.07);
  border-radius: 0 4px 4px 0;
}

.heute-caveats p { margin: 4px 0; }

/* --- Tagesjournal --------------------------------------------------------- */

.journal { margin-top: 10px; line-height: 1.65; }
.journal h4 { margin: 0 0 4px; font-size: 17px; }

.journal-lead {
  margin: 0 0 14px;
  font-size: 14px;
  color: #c8d2de;
  padding-bottom: 10px;
  border-bottom: 1px solid #232c38;
}

.journal-abschnitt { margin: 14px 0; }
.journal-abschnitt h5 { margin: 0 0 5px; font-size: 14px; color: #9fb4cc; }
.journal-abschnitt p { margin: 0; font-size: 13px; }

/* Die Notiz unter einem Abschnitt ist die Einordnung, nicht der Inhalt —
   sie steht eingerückt und ruhiger. */
.journal-notiz {
  margin-top: 6px !important;
  padding-left: 12px;
  border-left: 2px solid #2a3341;
  color: #8b98a8;
  font-size: 12px !important;
}

a.link {
  color: #6aa9ff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  align-self: center;
}


/* ============================================================= Anmeldung ===

   Der Schleier liegt ueber allem und ist die einzige Stelle, an der die
   Oberflaeche etwas verbirgt. Sicherheit ist er nicht -- die sitzt im Server;
   wer den Schleier im Browser wegraeumt, sieht eine Anwendung, deren Abfragen
   alle mit 401 antworten.                                                  */

/* [hidden] MUSS gewinnen.

   Das Browser-Stylesheet setzt fuer [hidden] ein `display: none` -- aber jede
   eigene Regel mit `display` schlaegt es, weil Autoren-Regeln vor denen des
   Browsers kommen. Genau das ist hier passiert: `.anmeldeschleier` traegt
   `display: flex`, also liess sich der Schleier nie verbergen. Man meldete
   sich an, die Seite lud neu -- und der Schleier stand wieder da. Das sieht
   aus wie „die Anmeldung funktioniert nicht", obwohl der Server sauber
   antwortete.

   Die Regel steht hier oben und gilt fuer alles, was kuenftig ein `display`
   bekommt. Ein `!important` ist selten richtig; hier ist es genau richtig,
   denn `hidden` bedeutet unsichtbar und nichts anderes. */
[hidden] { display: none !important; }

.anmeldeschleier {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(8, 10, 13, .96);
  display: flex;
  align-items: center;
  justify-content: center;
}

.anmeldekasten {
  width: 380px;
  max-width: 92vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 26px 20px;
}

.anmeldekasten h2 { margin: 0 0 6px; font-size: 19px; }

.an-feld { display: block; margin: 16px 0; }
.an-feld > span:first-child {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.an-feld input { width: 100%; box-sizing: border-box; }
.an-feld .hint { margin-top: 6px; }

.anmeldekasten button.primary { width: 100%; margin-top: 8px; }

.an-fehler { color: var(--down); font-size: 13px; min-height: 18px; margin: 10px 0 0; }

/* Wer ist angemeldet -- rechts in der Kopfzeile.

   NICHT absolut positioniert. Als ich das zuerst so gebaut habe, war die
   Leiste aus dem Fluss genommen -- die Flex-Zeile wusste nichts von ihr, und
   das Statusfeld daneben lief darunter hindurch. Eine rote Fehlermeldung
   ueberdruckte dann den Anmeldenamen, beides unlesbar.

   Als gewoehnliches Flex-Element mit `order` am Ende regelt die Zeile den
   Abstand selbst, und beim Umbruch wandert die Leiste mit, statt stehen zu
   bleiben.                                                                  */
.wer {
  order: 99;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.wer button { font-size: 11px; padding: 2px 8px; }

/* Das Band fuer Nur-Lese-Zugang. Es steht dauerhaft, nicht als Meldung, die
   verschwindet -- die Einschraenkung gilt ja auch dauerhaft. */
.nurlesen-band {
  background: #2a2413;
  border-bottom: 1px solid #4a3f1d;
  color: #d8c98d;
  font-size: 12px;
  padding: 6px 14px;
}

/* Abgelegte Antworten im Journal: Umbrueche des Modells bleiben erhalten, und
   eine lange Antwort sprengt nicht die Karte. */
pre.antwort {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
}
pre.antwort.dim { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; }