/* Palette: kühles Schiefergrau als Grund, Signalorange als einziger Akzent.
   Keine externen Schriften — die CSP erlaubt nur eigene Quellen. */
:root {
  color-scheme: light dark;

  --ground: #e9ecf0;
  --surface: #ffffff;
  --surface-2: #f3f5f8;
  --ink: #14181e;
  --ink-2: #4a535f;
  /* Auf 4,5:1 gegen Grund und Fläche gebracht — bei #79838f lag der
     Hinweistext bei 3,4:1 und damit unter der Schwelle. */
  --ink-3: #656f7b;
  --line: #d3d9e0;
  --line-strong: #b6bfc9;
  /* Das Bedienwerk ist farblos. Der Schirm trägt schon vier
     bedeutungstragende Farben — Seite, Mannschaft — dazu grün, gelb und rot
     für gut, Achtung, kritisch. Eine weitere fürs Bedienwerk konkurrierte mit
     allen; Orange sagte hier zuletzt sogar "T". Wirkung kommt jetzt aus
     Fülle und Kontrast statt aus dem Farbton.

     --accent-fg ist die Schrift auf gefülltem Akzent: hell im hellen Schema,
     dunkel im dunklen, weil der Akzent dort ins Helle kippt. */
  --accent: #1F2733;
  --accent-ink: #14181e;
  --accent-soft: #e5e9ee;
  --accent-fg: #ffffff;
  /* Einzige Farbe der Marke. Sie steht nur im Zeichen und im Reitersymbol,
     nirgends in den Daten — mit mindestens 64 Abstand zu allen Datenfarben. */
  --brand: #7C3AED;
  --ok: #2c6a45;
  --ok-soft: #dcebe1;
  --warn: #8c6111;
  --warn-soft: #f4e9d2;
  --crit: #9e3122;
  --crit-soft: #f6dfdb;
  --focus: #b85219;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #12161b;
    --surface: #1a1f26;
    --surface-2: #212832;
    --ink: #e7ebf1;
    --ink-2: #a4aeba;
    --ink-3: #87919f;
    --line: #2c343e;
    --line-strong: #3d4753;
    --accent: #e7ebf1;
    --accent-ink: #f2f5f9;
    --accent-soft: #2c343e;
    --accent-fg: #14181e;
    --brand: #A78BFA;
    --ok: #69b98a;
    --ok-soft: #172b20;
    --warn: #dca645;
    --warn-soft: #31280f;
    --crit: #e47966;
    --crit-soft: #361d19;
    --focus: #e8834a;
  }
}

* { box-sizing: border-box; }

/* Verborgen heißt verborgen.
   Die Browser-Regel für [hidden] ist `display: none`, aber jede eigene
   display-Angabe schlägt sie — `.chipbtn { display: inline-block }` reichte,
   und die ausgefilterten Spieler standen weiter da. Diese Zeile stellt das
   für alle Elemente wieder her; wer trotzdem sichtbar bleiben soll, trägt
   kein hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code, .mono, .mono-title { font-family: var(--mono); }

/* Ohne Farbe braucht ein Link ein anderes Merkmal: einen zurückhaltenden
   Strich, der beim Überfahren kräftiger wird. */
a {
  color: var(--ink); text-underline-offset: 2px;
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--ink); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--surface);
  padding: 10px 16px; border: 1px solid var(--line); z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* Der Viewer bekommt die ganze Breite: dort ist die Karte der Inhalt. */
.wrap-wide { max-width: none; padding: 0 16px; }

/* ---------------------------------------------------------- Kopfzeile */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; min-height: 58px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 17px; height: 17px; color: var(--brand); flex: none; }
.nav-right { display: flex; align-items: center; gap: 6px; }

/* --- Bereiche: die erste Ebene ----------------------------------------
   Drei Punkte, mehr trägt eine Reihe nicht, ohne dass man sie lesen muss
   statt sie zu sehen. Was in einem Bereich liegt, sagt die Kontextleiste. */
.areas { display: flex; gap: 4px; margin-right: auto; align-items: center; flex-wrap: wrap; }
.areas a {
  padding: 6px 11px; border-radius: var(--radius); color: var(--ink-2);
  text-decoration: none; font-size: 14.5px; white-space: nowrap;
}
.areas a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.areas a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }

/* --- Kontextleiste: die zweite Ebene ----------------------------------
   Ein vertiefter Streifen, aus dem sich das offene Werkzeug als helle
   Kachel heraushebt. Keine neue Farbe: das Bedienwerk ist farblos, und die
   Unterscheidung zur Ebene darüber kommt aus Fläche und Erhebung statt aus
   einem weiteren Farbton. */
.contextbar { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.contextbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 2px; min-height: 42px; flex-wrap: wrap;
}
.contextbar a {
  padding: 5px 12px; border-radius: var(--radius); font-size: 14px;
  color: var(--ink-3); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
.contextbar a:hover { color: var(--ink); text-decoration: none; }
.contextbar a.on {
  background: var(--surface); border-color: var(--line-strong);
  color: var(--ink); font-weight: 500;
}

/* --- Der Team-Chip ----------------------------------------------------
   Er steht immer, auch bei nur einem Team — sonst weiß niemand, für welches
   eine Seite gilt. Auf einer Team-Seite bekommt er den Punkt der Marke und
   einen Rahmen: dann ist er nicht nur Umschalter, sondern Geltungsanzeiger.
   Das ist die einzige Stelle im Bedienwerk mit Farbe, und sie trägt keine
   Bedeutung, die auch in den Daten vorkäme. */
.teamchip .teamdot { display: none; }
.teamchip-on { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.teamchip-on .teamdot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}

/* --- Brotkrumen -------------------------------------------------------
   Eine Kette, an einer Stelle im Layout erzeugt. Vorher baute jede Vorlage
   ihren eigenen Zurück-Link, und die Hälfte zeigte auf die falsche Seite. */
.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; margin: 0 0 14px;
}
.crumbs a { color: var(--ink-2); }
.crumbs .sep { color: var(--line-strong); }
.crumbs .here { color: var(--ink); font-weight: 500; }

/* --- Kompakter Kopf ---------------------------------------------------
   Für Viewer, Ansehen-Raum und Druck-Zettel: dort ist die Karte der Inhalt,
   und die Kontextleiste fräße sie an. Weg zurück und Ort in einer Zeile. */
.chrome-compact {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 12px 2px 10px;
}
.cc-back { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; white-space: nowrap; }
.cc-back svg { width: 11px; height: 11px; flex: none; align-self: center; }
.cc-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.cc-meta { font-size: 13px; color: var(--ink-3); margin-left: auto; }

/* --- Der Kopf auf dem Telefon ------------------------------------------
   Kein Aufklappmenü für die Bereiche: es sind drei kurze Wörter, die in
   eine Zeile passen oder sauber umbrechen. Ein Menü wäre ein Klick mehr
   für nichts.

   Die Kontextleiste fährt dagegen seitlich — sie trägt bis zu sechs
   Werkzeuge. Der angeschnittene letzte Punkt ist die Einladung zum
   Wischen; eine Bildlaufleiste wäre auf einem Telefon nur ein Strich. */
@media (max-width: 760px) {
  .areas { order: 3; width: 100%; margin-right: 0; }
  .areas a { padding: 9px 11px; }

  .contextbar-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .contextbar-inner::-webkit-scrollbar { display: none; }
  .contextbar a { flex: none; min-height: 34px; display: inline-flex; align-items: center; }

  /* Reiter fahren genauso seitlich. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; min-height: 44px; display: inline-flex; align-items: center; }

  /* Von der Kette bleiben Eltern und Ort. Alles davor ist auf 390 px
     Breite Lärm — der Weg dorthin steht in der Kontextleiste. */
  .crumbs > :not(:nth-last-child(-n+3)) { display: none; }

  /* Fingerbreite Ziele im Bedienwerk. */
  .menu-btn { min-height: 40px; }
  .btn { min-height: 40px; }
}

/* Aufklappmenüs sind <details>: ohne JavaScript bedienbar, mit der Tastatur
   erreichbar, und die CSP muss nichts dafür erlauben. */
.menu { position: relative; }
.menu-btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 10px; border-radius: var(--radius); font-size: 14px; color: var(--ink-2);
  border: 1px solid transparent; white-space: nowrap;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn::marker { content: ""; }
.menu-btn:hover { background: var(--surface-2); color: var(--ink); }
.menu[open] > .menu-btn { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.menu-caret { width: 10px; height: 10px; color: var(--ink-3); flex: none; }
.menu-label { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }

.menu-panel {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 20; min-width: 190px;
  display: flex; flex-direction: column; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(10, 14, 20, 0.14);
}
.menu-right { left: auto; right: 0; }
.menu-head {
  margin: 0; padding: 6px 9px 7px; font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.menu-panel a, .menu-panel button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 14px;
  padding: 7px 9px; border-radius: var(--radius); border: none; background: none;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); text-decoration: none; }
.menu-panel a.on { color: var(--accent-ink); font-weight: 500; }
.menu-panel form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------- Struktur */
main { padding: 32px 0 72px; }
h1 { font-size: 25px; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
p { margin: 10px 0 0; }
.sub { color: var(--ink-2); font-size: 14px; }
.hint { color: var(--ink-3); font-size: 13.5px; }
.dim { color: var(--ink-3); }
.strong { font-weight: 500; color: var(--ink); }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.center { text-align: center; }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.mono-title { font-family: var(--mono); font-size: 20px; word-break: break-all; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.card + .card { margin-top: 18px; }
.card-narrow { max-width: 420px; margin: 40px auto; }

/* ---------------------------------------------------------- Formulare */
label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--ink-2); }
input[type="text"], input[type="password"], input[type="search"], select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 8px 11px; width: 100%;
}
input:focus, select:focus { border-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 500; }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-2); padding: 6px 11px; }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { border-color: var(--line); color: var(--crit); background: transparent; padding: 6px 11px; }
.btn-danger:hover { background: var(--crit-soft); }
.btn-steam { width: 100%; }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--ink-3); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.search { display: flex; gap: 8px; align-items: center; }
.search input { min-width: 220px; }
.inline { display: inline-flex; gap: 6px; align-items: center; }
/* Eine Zeile aus Feldern mit ihren Beschriftungen — für kurze Formulare, die
   keine eigene Spalte verdienen. Auf schmalen Fenstern brechen sie um. */
.rowform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 8px 0 4px; }
.rowform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.rowform input { width: auto; min-width: 12ch; }
.row-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.row-form label { flex: 0 1 240px; }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------------------------------------------------- Tabellen */
.table-scroll {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
table.grid { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
.grid th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 16px; border-bottom: 1px solid var(--line-strong);
  background: var(--surface-2); white-space: nowrap;
}
/* .grid th setzt text-align: left und schlug damit .num — die Zahlenspalten
   standen rechts, ihre Überschriften links. Bei einer Tabelle aus lauter Zahlen
   fällt das sofort auf. */
.grid th.num { text-align: right; }
/* Ein Zeilenkopf ist Inhalt, keine Kopfzeile: er soll wie eine Zelle aussehen
   und nicht wie ein zweiter Tabellenkopf mitten in der Tabelle. */
.grid tbody th {
  background: none; text-transform: none; letter-spacing: 0; font-size: 14px;
  font-family: inherit; color: var(--ink); border-bottom: 1px solid var(--line);
}
/* Die Summenzeile steht ab, ohne laut zu sein. */
.grid tr.sum td, .grid tr.sum th {
  border-top: 1px solid var(--line-strong); color: var(--ink);
}
.grid td { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
/* Auch der Zeilenkopf verliert in der letzten Zeile seine Linie — sonst
   endete die Tabelle mit einem Strich, der nur unter der ersten Spalte steht. */
.grid tbody tr:last-child td, .grid tbody tr:last-child th { border-bottom: none; }
.grid tbody tr:hover { background: var(--surface-2); }
.row-off td { opacity: .55; }

.pager { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 14px; }

/* ---------------------------------------------------------- Marker */
.pill {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 2px; margin-left: 8px; white-space: nowrap;
}
.pill-live { background: var(--accent-soft); color: var(--accent-ink); }
.pill-ok { background: var(--ok-soft); color: var(--ok); margin-left: 0; }
.pill-warn { background: var(--warn-soft); color: var(--warn); margin-left: 0; }
.pill-off { background: var(--crit-soft); color: var(--crit); margin-left: 0; }

.msg, .flash {
  padding: 11px 16px; border-radius: var(--radius); font-size: 14.5px;
  border: 1px solid var(--line); background: var(--surface); margin: 0 0 18px;
}
.msg { margin: 14px 0; }
.msg-ok, .flash-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.msg-warn, .flash-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.msg-error, .flash-error { background: var(--crit-soft); border-color: transparent; color: var(--crit); }

.credentials .cred { margin: 10px 0; }
.credentials code {
  font-size: 18px; letter-spacing: .04em; background: var(--surface);
  padding: 8px 12px; border-radius: var(--radius); display: inline-block;
  color: var(--ink); user-select: all;
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 18px 0 0; }
.facts > div { background: var(--surface); padding: 12px 16px; }
.facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 3px 0 0; font-weight: 500; }
.facts-tight { margin-top: 0; }

.empty { background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--radius); padding: 40px 28px; text-align: center; }
.empty p { max-width: 60ch; margin: 8px auto 0; }

.placeholder { margin-top: 26px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); padding: 22px 24px; color: var(--ink-2); }
.placeholder h2 { color: var(--ink); }

.status-code { font-size: 40px; font-weight: 600; color: var(--accent); margin: 0; font-variant-numeric: tabular-nums; }

.foot { border-top: 1px solid var(--line); padding: 16px 0; color: var(--ink-3);
  font-family: var(--mono); font-size: 11.5px; }

@media (max-width: 620px) {
  .topbar-inner { padding: 10px 18px; gap: 14px; }
  .wrap { padding: 0 18px; }
}

/* --- Auswertung ------------------------------------------------------- */
.score {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-ink);
  padding: 0 2px;
}
.mapname {
  font-family: var(--mono); font-size: 13px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 6px;
}
.small { font-size: 12.5px; }
.grid td .small { margin-top: 3px; }
.pill-wait { background: var(--warn-soft); color: var(--warn); }

/* ======================================================================
   Match-Auswertung
   Zwei Serienfarben für die beiden Mannschaften, geprüft mit dem
   Paletten-Validator: heller Grund #B85219 / #1A5FAD, dunkler Grund
   #D77339 / #5590DC. Beide Paare bestehen Helligkeitsband, Chroma-Boden,
   Farbfehlsichtigkeits-Trennung (ΔE 22–29) und Kontrast zur Fläche.
   Die Farbe hängt an der Mannschaft, nicht am Rang — ein Sortierwechsel
   färbt nichts um.
   ====================================================================== */
:root {
  /* Zwei Achsen, zwei Paletten. Eine Farbe hatte vorher beide Bedeutungen:
     Orange hieß "Mannschaft 1", wurde aber als "T" gelesen — und weil die
     Seiten zur Halbzeit wechseln, sagte sie regelmäßig das Gegenteil.

     --team-*  wer:  Scoreboard, Duelle, Rundenleiste, Verlauf
     --side-*  was:  Viewer, Killfeed, CT/T-Spalten, Seitenbilanz
     --series-* bleibt das allgemeine Diagrammpaar ohne Spielbedeutung. */
  --team-1: #B03A7A;
  --team-2: #0E7C74;
  --team-1-soft: #f7e2ee;
  --team-2-soft: #d9eeeb;
  --side-t: #B85219;
  --side-ct: #1A5FAD;
  --side-t-soft: #f6e4d8;
  --side-ct-soft: #dce7f6;

  --series-1: #B85219;
  --series-2: #1A5FAD;
  --series-1-soft: #f6e4d8;
  --series-2-soft: #dce7f6;
  --grid: #e3e8ed;
}
@media (prefers-color-scheme: dark) {
  :root {
    --team-1: #D46AA0;
    --team-2: #35A99F;
    --team-1-soft: #3a1f2f;
    --team-2-soft: #12312e;
    --side-t: #D77339;
    --side-ct: #5590DC;
    --side-t-soft: #3b2519;
    --side-ct-soft: #1b2a3d;

    --series-1: #D77339;
    --series-2: #5590DC;
    --series-1-soft: #3b2519;
    --series-2-soft: #1b2a3d;
    --grid: #262e38;
  }
}

.swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--ink-3); margin-right: 7px; flex: none; vertical-align: baseline;
}
/* Mannschaftsmarker. Wer, nicht welche Seite. */
.swatch-1 { background: var(--team-1); }
.swatch-2 { background: var(--team-2); }
/* Seitenmarker. Orange und Blau heißen ab hier immer T und CT. */
.swatch-t  { background: var(--side-t); }
.swatch-ct { background: var(--side-ct); }

/* --- Kopf ------------------------------------------------------------- */
.match-head { margin-bottom: 22px; }
.match-teams { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.team-name {
  display: flex; align-items: center; font-size: 20px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
}
.match-score {
  font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: -0.02em;
}
.match-score span { color: var(--ink-3); margin: 0 4px; font-weight: 400; }

.halves { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.half-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; flex: 1 1 240px;
}
.half-team { display: flex; align-items: center; font-weight: 500; margin-bottom: 5px; }
.half-split { display: flex; gap: 18px; font-size: 14px; color: var(--ink-2); }
.half-split b { color: var(--ink); font-variant-numeric: tabular-nums; }

section { margin-top: 38px; }
/* Der Abstand gehört über die Überschrift, nicht unter sie. Vorher stand er
   unten, und zwar unfreiwillig: die Überschrift brachte 14px mit, das auf sie
   folgende <section> weitere 38px, und benachbarte Ränder fallen zusammen —
   also 38px zwischen der Überschrift und ihrem eigenen Inhalt, und null über
   ihr. Die Überschrift klebte am Ende des vorigen Abschnitts. Das war der
   Grund, warum niemand sah, wo ein neuer Abschnitt beginnt; zu klein war sie
   nur zusätzlich.

   Dazu Farbe und Gewicht: --ink-3 ist der blasseste Ton im Haus, und mit 15px
   stand die Überschrift kleiner da als ein gewöhnliches h2 (17px) und blasser
   als der Text unter ihr. Wirkung kommt hier aus Kontrast und Fülle, nicht
   aus einem Farbton — eine eigene Farbe fürs Gliedern käme den vier
   bedeutungstragenden in die Quere. */
.section-title {
  font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line-strong);
  padding-bottom: 8px; margin: 40px 0 12px;
}
/* Oben auf einer Seite oder einem Reiter beginnt nichts neu — dort wäre der
   Abstand nur eine Lücke. */
.section-title:first-child { margin-top: 0; }
/* Und der Abschnitt, der zur Überschrift gehört, rückt an sie heran, statt
   seine 38px dazwischen zu legen. */
.section-title + section { margin-top: 0; }
.team-heading { display: flex; align-items: center; font-size: 15px; font-weight: 600; margin: 18px 0 8px; }
.team-heading:first-of-type { margin-top: 0; }

/* --- Scoreboard ------------------------------------------------------- */
.scoreboard th a { color: inherit; text-decoration: none; }
.scoreboard th a:hover { color: var(--accent-ink); text-decoration: underline; }
.scoreboard td { padding: 8px 14px; }
.scoreboard .pos { color: var(--ok); }
.scoreboard .neg { color: var(--crit); }

/* --- Rundenverlauf ---------------------------------------------------- */
.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13.5px; }
.legend-item { display: flex; align-items: center; color: var(--ink-2); }
.legend-sep { width: 1px; height: 14px; background: var(--line); }

.chart-wrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 14px 10px; overflow-x: auto;
}
.round-chart { width: 100%; min-width: 660px; height: auto; display: block; }

.grid-lines line { stroke: var(--grid); stroke-width: 1; }
.grid-lines .baseline { stroke: var(--line-strong); }
.axis-labels text {
  font-family: var(--mono); font-size: 9px; fill: var(--ink-3);
}
.trend-chart .axis-labels text { font-size: 11px; }

.bar { stroke: var(--surface); stroke-width: 1; }
/* Balken und Sieger-Chips tragen die Mannschaft, nicht die Seite. */
.bar-1 { fill: var(--team-1); }
.bar-2 { fill: var(--team-2); }

.chip { stroke: var(--surface); stroke-width: 2; }
.chip-1 { fill: var(--team-1); }
.chip-2 { fill: var(--team-2); }
.chip-0 { fill: var(--ink-3); }

.bomb { fill: var(--surface); }
.bomb-defused { fill: none; stroke: var(--surface); stroke-width: 1.5; }

.round-num { font-family: var(--mono); font-size: 9px; fill: var(--ink-3); }
.round-mark .hit { fill: transparent; }
.round-mark:hover .chip { stroke: var(--ink); }
.round-mark:hover .round-num { fill: var(--ink); }
.round-mark.on .chip { stroke: var(--ink); stroke-width: 2; }
.round-mark.on .round-num { fill: var(--ink); font-weight: 600; }
.round-mark:focus-visible .hit { outline: 2px solid var(--focus); }

/* --- Runde im Detail -------------------------------------------------- */
.round-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 18px;
}
.round-facts > div { background: var(--surface); padding: 11px 15px; }
.round-facts dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.round-facts dd { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.killfeed { list-style: none; margin: 0; padding: 0; max-width: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.killfeed li {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.killfeed li:last-child { border-bottom: none; }
.kf-time {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 34px;
}
.kf-duel { display: flex; align-items: center; gap: 3px; color: var(--ink-2); }
.kf-duel b { color: var(--ink); font-weight: 600; }
.kf-arrow { color: var(--ink-3); margin: 0 8px; }
.kf-weapon { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.kf-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px;
}
.kf-assist { font-size: 12.5px; }

/* --- Duelle ----------------------------------------------------------- */
.duels th .swatch { margin-right: 6px; }
.duel-cell { font-variant-numeric: tabular-nums; }
.duel-a1 { background: color-mix(in srgb, var(--team-1) 12%, transparent); }
.duel-a2 { background: color-mix(in srgb, var(--team-1) 22%, transparent); }
.duel-a3 { background: color-mix(in srgb, var(--team-1) 34%, transparent); }
.duel-b1 { background: color-mix(in srgb, var(--team-2) 12%, transparent); }
.duel-b2 { background: color-mix(in srgb, var(--team-2) 22%, transparent); }
.duel-b3 { background: color-mix(in srgb, var(--team-2) 34%, transparent); }


/* ======================================================================
   2D-Viewer
   ====================================================================== */
/* --- 2D-Viewer -----------------------------------------------------------
   Die Karte ist der Inhalt, nicht eine Kachel darin. Die Bühne nimmt die
   verfügbare Höhe, alles Weitere schwebt darüber: Mannschaftsleisten links
   und rechts, Killfeed oben rechts, Steuerung unten. Vorbild ist die
   Aufteilung, die man aus dem Spiel und aus Demo-Werkzeugen kennt. */

.viewer { display: flex; flex-direction: column; gap: 10px; position: relative; }

.viewer-stage {
  position: relative; overflow: hidden;
  background: #0d1015; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  /* Volle Höhe minus Kopfzeile, Viewer-Leiste, Rundenleiste und Hinweis.
     min-height hält sie auf kleinen Fenstern noch brauchbar. */
  height: calc(100vh - 250px);
  min-height: 420px;
}
.stage-canvas { display: block; cursor: default; }

/* --- Schlanke Leiste über der Bühne ------------------------------------ */

/* Der Kopf der Auswertungsseite: Mannschaften, Spielstand, Eckdaten. Kein
   Navigationsbauteil — die Kette steht darüber im Layout. */
.match-bar {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 4px 0 14px;
}
.match-meta { font-size: 13px; color: var(--ink-3); margin-left: auto; }

/* --- Rundenleiste ------------------------------------------------------ */

/* --- Rundenleiste, in der schwebenden Leiste über der Karte ------------
   Kreise statt Kacheln, gefärbt nach der Seite, die die Runde geholt hat.
   Nur die Seite: welche Mannschaft T war, wechselt zur Halbzeit, und zwei
   Bedeutungen je Kreis liest niemand im Vorbeigehen. */
.roundbar {
  display: flex; gap: 5px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 8px 14px 2px;
}
.rb {
  width: 27px; height: 27px; flex: 0 0 auto; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  background: rgba(255,255,255,0.06); color: #b9c2ce;
}
.rb:hover { background: rgba(255,255,255,0.18); color: #fff; }
/* Gewonnene Runden tragen die Farbe ihrer Seite. Auf der dunklen Leiste
   arbeiten die Farben selbst als Grund; die weichen Töne des hellen Schemas
   wären dort nicht zu sehen. */
.rb.side-t  { background: rgba(216,115,57,0.28);  border-color: #D77339; color: #f0c3a4; }
.rb.side-ct { background: rgba(85,144,220,0.28); border-color: #5590DC; color: #b9d2f4; }
.rb.on {
  font-weight: 700; color: #14181e; background: #e7ebf1; border-color: #ffffff;
}
.rb.on.side-t  { background: #D77339; color: #fff; border-color: #D77339; }
.rb.on.side-ct { background: #5590DC; color: #fff; border-color: #5590DC; }
.rb-i { width: 14px; height: 14px; display: block; }
/* Der Seitenwechsel steht zwischen den Runden, nicht an einer. */
.rb-swap { color: #8d97a4; font-size: 13px; padding: 0 1px; user-select: none; }

/* --- Was über der Karte schwebt ---------------------------------------- */

.stage-head {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; text-align: center; max-width: 72%;
}
/* Die Spieluhr steht zwischen den beiden Ständen, wie oben im Spiel: links die
   Mannschaft auf CT, rechts die auf T — dieselbe Seite wie ihre Leiste. Die
   Farben sind fest und nicht --side-*, weil die Bühne auch im hellen Schema
   dunkel ist; dieselben Töne trägt die Rundenleiste. */
.sh-row { display: flex; align-items: center; gap: 14px; }
.sh-row[hidden] { display: none; }
.sh-pts {
  font-size: 26px; font-weight: 700; line-height: 1; min-width: 2ch;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.sh-pts.side-ct { color: #5590DC; text-align: right; }
.sh-pts.side-t  { color: #D77339; text-align: left; }
.sh-clock {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 16px; border-radius: 12px; white-space: nowrap; color: #eef1f5;
  background: rgba(10,13,17,0.86); border: 1px solid rgba(231,235,241,0.16);
}
/* Die Ziffern haben feste Breite und etwas Luft, sonst zappelt die Kachel mit
   jeder Sekunde, in der eine 1 durchläuft. */
.shc-zeit {
  font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.shc-mark {
  display: flex; align-items: center; color: #8d97a4;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.shc-ic { width: 15px; height: 15px; display: block; }
.shc-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
/* Die Farbe sagt, welche Zeit gerade läuft — wie im Spiel, wo die Bombe die
   Rundenuhr ersetzt. Das Zeichen davor sagt es auch ohne Farbe. */
.sh-clock.freeze { color: #8fd0e6; border-color: rgba(143,208,230,0.32); }
.sh-clock.freeze .shc-mark { color: #8fd0e6; }
.sh-clock.bomb {
  color: #f26d6d; background: rgba(46,12,14,0.9); border-color: rgba(242,109,109,0.55);
}
.sh-clock.bomb .shc-mark { color: #b8323a; }
.sh-clock.ende { color: #8d97a4; }
.sh-score {
  font-size: 13px; font-weight: 600; color: #cfd5dd;
  font-variant-numeric: tabular-nums;
  background: rgba(10,13,17,0.72); border-radius: 999px; padding: 3px 12px;
  white-space: nowrap;
}


/* display:contents lässt die beiden Leisten so liegen, als wären sie direkte
   Kinder von .viewer — dadurch schweben sie über der Bühne, ohne darin zu
   stecken, und lassen sich schmal einfach darunter setzen. */
.teamcols { display: contents; }
/* Der Abstand nach unten kommt aus der tatsächlichen Höhe der schwebenden
   Leiste: sie wächst, wenn die Rundenleiste in eine zweite Zeile umbricht, und
   verdeckte sonst die unterste Spielerzeile. Gesetzt wird --dockhoehe vom
   Skript, der Wert hier ist der Rückfall. */
.teamcol {
  position: absolute; bottom: calc(var(--dockhoehe, 96px) + 14px);
  list-style: none; margin: 0; padding: 0;
  width: min(230px, 26%); display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100% - var(--dockhoehe, 96px) - 190px); overflow-y: auto; z-index: 2;
}
.teamcol-a { left: 10px; }
.teamcol-b { right: 10px; }

.utildrawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 84%); z-index: 4;
  overflow-y: auto; padding: 12px 14px;
  background: var(--surface); border-left: 1px solid var(--line-strong);
  box-shadow: -8px 0 24px rgba(8, 11, 16, 0.28);
}

/* Kopf jeder Schublade: Titel links, Schließen rechts. Das × steht dort, wo
   man es sucht — der Knopf in der Leiste schließt weiterhin genauso. */
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.drawer-head .lib-title { margin: 0; }
.drawer-x {
  flex: none; width: 26px; height: 26px; padding: 0; line-height: 1;
  font: inherit; font-size: 17px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-3);
}
.drawer-x:hover { background: var(--surface-2); color: var(--ink); }


.viewer-status {
  position: absolute; margin: 0; padding: 10px 16px; z-index: 5;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; color: var(--ink-2);
}
.viewer-status-error { border-color: var(--crit); color: var(--crit); }

.viewer-players { list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.vp {
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  align-items: center; gap: 2px 8px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px;
}
.vp:last-child { border-bottom: none; }
.vp:hover { background: var(--surface-2); }
.vp.followed { background: var(--accent-soft); }
.vp.dead { opacity: .45; }
.vp-name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-side { font-family: var(--mono); font-size: 10px; }
/* Kills und Deaths bis zur gezeigten Stelle — leiser gesetzt als HP und Geld:
   sie ändern sich selten und sollen den Blick nicht ziehen. */
.vp-kd {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.teamcol .vp-kd { color: #98a1ac; }
.vp-hp { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-width: 26px; text-align: right; }
.vp-track { grid-column: 1 / -1; height: 3px; margin-top: 3px; background: var(--surface-3, var(--line)); border-radius: 2px; overflow: hidden; }
.vp-bar { display: block; height: 100%; background: var(--ok); transition: width .12s linear; }
/* Im Viewer zählt die Seite: dort ist die Frage, wer gerade angreift. */
.vp.side-t  .vp-bar { background: var(--side-t); }
.vp.side-ct .vp-bar { background: var(--side-ct); }

/* --- Killfeed über dem Bild, oben rechts -------------------------------
   Eigener Klassenname: .killfeed gehört der Kill-Liste in der Rundenansicht
   auf der Auswertungsseite. Der gleiche Name hat sie schon einmal mit
   position:absolute aus dem Textfluss gerissen. */
.kf-overlay {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
  pointer-events: none; max-width: min(46%, 340px);
}
.kf-overlay:empty { display: none; }
.kf-row {
  display: flex; align-items: baseline; gap: 7px;
  /* Halbdurchsichtiger Grund, damit die Namen auch über einer hellen
     Radarfläche lesbar bleiben. */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 8px; font-size: 12.5px; white-space: nowrap;
  max-width: 100%; overflow: hidden;
}
/* Ältere Einträge bleiben stehen, treten aber zurück — beim Zurückspulen
   soll die Runde nachvollziehbar bleiben. */
.kf-row.old { opacity: .45; }
.kf-p { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.kf-t { color: var(--side-t); }
.kf-ct { color: var(--side-ct); }
.kf-w { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
/* Die Umstände eines Kills: Assist, geblendet, durch die Wand, durch Rauch,
   ohne Scope, Headshot. Klein und einfarbig — sie sollen die Namen ergänzen,
   nicht mit ihnen um Aufmerksamkeit ringen. Nur der Headshot sticht heraus,
   weil er die Auskunft ist, nach der man tatsächlich sucht. */
/* --- Optionen des Viewers ---------------------------------------------
   Dasselbe Menü wie oben in der Leiste, nur öffnet es nach oben: es steht
   am unteren Rand der Bühne, ein Panel nach unten liefe aus dem Bild. */
.viewopts .menu-panel {
  top: auto; bottom: calc(100% + 5px); left: auto; right: 0; min-width: 250px;
}
/* Das Fenster gehört zur schwebenden Leiste und sieht auch so aus: derselbe
   halbdurchsichtige Grund, dieselbe Weichzeichnung dahinter. Ein Panel in
   Seitenfarbe stand darüber wie ein fremdes Fenster. */
.viewopts-panel {
  min-width: 290px; padding: 6px;
  background: rgba(16, 20, 26, 0.92); border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 6, 10, 0.45);
}
.viewopts-panel .menu-head { color: #8d97a4; border-top-color: rgba(255,255,255,0.10); }
/* Beschriftung links, Schalter rechts — so, wie man eine Liste von Schaltern
   liest. Mittig gesetzter Text ließ jede Zeile woanders anfangen. */
.opt {
  /* flex-direction ausdrücklich: für <label> gilt weiter oben column — die
     Beschriftung steht in Formularen über dem Feld. Hier soll sie daneben
     stehen, und ohne diese Zeile stapelte der Schalter unter den Text. */
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 7px 9px; border-radius: var(--radius);
  font-size: 13.5px; color: #e7ebf1; cursor: pointer;
}
.opt:hover { background: rgba(255,255,255,0.08); }
/* Text links, Schalter rechts — deshalb wächst der Text und nicht der Rest. */
.opt-text { text-align: left; flex: 1 1 auto; }
/* Der eigentliche Kasten bleibt da — er trägt Zustand und Tastatur —, ist aber
   unsichtbar; gezeigt wird der Schieber daneben. */
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-schalter {
  flex: none; width: 34px; height: 20px; border-radius: 999px; position: relative;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.20);
  transition: background .12s linear, border-color .12s linear;
}
.opt-schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #aab3bf; transition: transform .12s ease, background .12s linear;
}
.opt input:checked + .opt-schalter { background: var(--accent); border-color: var(--accent); }
.opt input:checked + .opt-schalter::after { transform: translateX(14px); background: #fff; }
.opt input:focus-visible + .opt-schalter { outline: 2px solid var(--accent); outline-offset: 2px; }
.viewopts .menu-head:first-child { border-top: none; margin-top: 0; }
.viewopts .menu-head { border-bottom: none; border-top: 1px solid var(--line); margin-top: 4px; }

.kf-plus { color: var(--ink-3); font-size: 11px; margin: 0 -3px; }
.kf-mark { display: inline-flex; align-items: center; color: var(--ink-3); align-self: center; }
.kf-mark svg { display: block; width: 13px; height: 13px; }
.kf-mark-headshot { color: var(--warn); }
.kf-mark-blind { color: var(--warn); }

.viewer-hint { margin-top: 12px; }
.viewer-hint b { color: var(--ink-2); font-family: var(--mono); font-size: 12px; }

/* --- Der Wegweiser zu den drei Viewern ---------------------------------
   Dieselben Aufnahmen, drei Betriebsarten: allein, gemeinsam, nebeneinander.
   Er steht unten, nicht oben — wer die Seite öffnet, will zuerst die Karte
   sehen; gewechselt wird erst, wenn der Raum gerade nicht passt.

   Die Stelle, an der man steht, bleibt sichtbar und ist kein Verweis: ein Link
   auf die eigene Seite ist eine Sackgasse mit Ladezeit. */
.viewerbanner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px; margin: 26px 0 8px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.vwb {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2);
}
.vwb:hover { background: var(--surface-2); border-color: var(--line-strong); text-decoration: none; }
.vwb b { color: var(--ink); font-size: 14.5px; }
.vwb-sub { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.vwb.on { background: var(--accent-soft); border-color: transparent; }
.vwb.on b { color: var(--accent-ink); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.section-action { float: right; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ======================================================================
   Karten, Heatmaps und Utility-Bibliothek
   ====================================================================== */
.map-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.map-card {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; color: var(--ink-2);
}
.map-card:hover { border-color: var(--line-strong); text-decoration: none; background: var(--surface-2); }
.map-card .mapname { font-size: 15px; align-self: flex-start; }
.map-card-stats { font-size: 14px; }
.map-card-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-player { padding-top: 4px; border-top: 1px solid var(--line); }
.chipbtn {
  display: inline-block; font-size: 13.5px; line-height: 1.2; text-decoration: none;
  padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.chipbtn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.chipbtn.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 500; }

.mapview {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start;
}
@media (max-width: 860px) { .mapview { grid-template-columns: minmax(0, 1fr); } }
.mapview-stage {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 8px;
}
#mapcanvas { display: block; border-radius: 2px; }
.mapview-side { display: flex; flex-direction: column; gap: 12px; }

.mapview-legend {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-size: 13.5px;
}
.legend-line { display: flex; align-items: center; gap: 8px; }
.legend-line + .legend-line { margin-top: 6px; }
.legend-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-point { background: var(--series-1); }
.dot-pair { background: var(--series-2); }

.library {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  max-height: 620px; overflow-y: auto; padding-bottom: 6px;
}
.lib-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0; padding: 11px 14px 7px; border-bottom: 1px solid var(--line);
}
.lib-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 7px 14px; font-size: 13.5px; text-decoration: none; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.lib-row:last-of-type { border-bottom: none; }
.lib-row:hover, .lib-row.on { background: var(--accent-soft); text-decoration: none; }
.lib-player { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-round { font-size: 12px; }
.lib-time { font-size: 12px; }

/* --- Verläufe ---------------------------------------------------------- */
.trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.trend {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 10px;
}
.trend figcaption { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.trend-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.trend-last { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.trend-chart { width: 100%; height: auto; display: block; }
.trend .hint { margin-top: 6px; font-size: 12.5px; }

.trend-area { fill: var(--series-1); opacity: .1; }
.trend-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-average { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.trend-dot { fill: var(--series-1); opacity: .55; }
.trend-dot:hover { opacity: 1; }
.trend-dot.last { opacity: 1; stroke: var(--surface); stroke-width: 2; }

/* --- Radar-Kalibrierung ------------------------------------------------ */
.radar-panel {
  margin-top: 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.radar-panel > summary {
  cursor: pointer; padding: 12px 18px; font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.radar-panel > summary:hover { color: var(--ink); }
.radar-panel[open] > summary { border-bottom: 1px solid var(--line); }
.radar-body { padding: 14px 18px 18px; }
.radar-forms { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0; }
.radar-form { display: flex; flex-direction: column; gap: 8px; }
.radar-form input[type="file"] { font-size: 13px; color: var(--ink-2); }
.radar-values { display: flex; gap: 10px; flex-wrap: wrap; }
.radar-values label { flex: 0 1 120px; }
.radar-actions { flex-direction: row; gap: 8px; align-items: center; }

/* --- Live-Hinweis ------------------------------------------------------ */
.livebar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; z-index: 20;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 11px 14px 11px 16px; font-size: 14px; color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 12px 32px -12px rgba(0,0,0,.28);
  max-width: calc(100vw - 32px);
}
.livebar-action { font-weight: 500; white-space: nowrap; }
.livebar-close {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--ink-3); padding: 0 2px;
}
.livebar-close:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .livebar { animation: livebar-in .18s ease-out; }
  @keyframes livebar-in { from { opacity: 0; transform: translate(-50%, 8px); } }
}

pre.cmd {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-2); margin-top: 12px;
}

/* --- Teams ------------------------------------------------------------- */
.team-card-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.rosterlist { list-style: none; margin: 12px 0 0; padding: 0; }
.rosterlist li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.rosterlist li:last-child { border-bottom: none; }
.roster-name { color: var(--ink); font-weight: 500; }
.rosterlist form { margin-left: auto; }
.card h3 { font-size: 14px; margin-top: 22px; }

/* --- Utility-Board ----------------------------------------------------- */
.utillist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.util {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.util-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.util-head h3 { font-size: 15px; margin: 0; flex: 1 1 auto; }
/* Der Wurftyp im Kopf eines Wurfs: ein Begriff, kein Satz. */
.wurfart {
  font-size: 11.5px; letter-spacing: 0.02em; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  white-space: nowrap;
}

.util-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); white-space: nowrap;
}
.util-smoke { background: var(--surface-3, var(--surface-2)); }
.util-flash { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.util-fire  { background: var(--side-t-soft); color: var(--side-t); border-color: transparent; }
.util-he    { background: var(--crit-soft); color: var(--crit); border-color: transparent; }
.util-source { font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.util-how { margin: 0; font-size: 14px; color: var(--ink-2); }
.util-notes { margin: 0; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; }
.util-actions { margin-top: 4px; }
.util-group { margin-top: 30px; }
.util-group-head { display: flex; align-items: baseline; gap: 14px; }
/* Die Gruppe bringt ihren Abstand über .util-group schon mit, und der Kopf
   ist ein Flex-Streifen — 40px oben würden die Grundlinie verschieben. */
.util-group-head .section-title { flex: 1 1 auto; margin-top: 0; }

/* Die setpos-Zeile trägt den Kopierknopf am rechten Rand. */
.cmdline { margin: 0; display: flex; align-items: center; gap: 8px; }
.cmdline code {
  flex: 1 1 auto; min-width: 0;
  display: block; font-size: 12px; padding: 7px 10px; user-select: all;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; white-space: nowrap; color: var(--ink);
}
.prefill { border-left: 3px solid var(--accent); }
.checkline { flex-direction: row; align-items: center; gap: 7px; font-size: 14px; }
.checkline input { width: auto; }
textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 11px; width: 100%;
}

/* --- Übernehmen-Knopf -------------------------------------------------- */
.adopt { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; }
.lib-row .adopt { padding: 0 14px 8px; }
.adopt-team { font-size: 12px; padding: 3px 6px; width: auto; }
.adopt-button { font-size: 12px; padding: 4px 9px; }
.lib-row { display: block; padding: 0; }
.lib-link {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 7px 14px; text-decoration: none; color: var(--ink-2);
}
.lib-link:hover { text-decoration: none; }

/* --- Utility im Viewer ------------------------------------------------- */
.viewer-lineups {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  max-height: 340px; overflow-y: auto;
}
.viewer-lineups:empty { display: none; }
.lu { padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lu:last-child { border-bottom: none; }
.lu-head { display: flex; align-items: baseline; gap: 8px; }
.lu-player { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-time { margin-left: auto; font-size: 11px; }
.lu-how { margin: 5px 0 0; color: var(--ink-2); font-size: 12.5px; }
.lu-cmd {
  display: block; margin-top: 5px; font-size: 11px; padding: 5px 7px; user-select: all;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px;
  overflow-x: auto; white-space: nowrap;
}
.lu .adopt { padding: 7px 0 0; }


/* --- Vollbild ---------------------------------------------------------- */
.btn-fullscreen { font-size: 15px; line-height: 1; padding: 7px 11px; }

/* Im Vollbild fällt die Leiste über der Bühne weg; die Bühne nimmt alles. */
.viewer:fullscreen { background: #0d1015; gap: 0; }
/* Die Rundenleiste steht in der schwebenden Leiste und bringt ihren Grund
   mit. Eine eigene Fläche machte sie im Vollbild schwarz statt durchsichtig —
   ein Rest aus der Zeit, als sie unter der Bühne hing. */
.viewer:fullscreen .viewer-dock { bottom: 6px; }
/* Die Bühne nimmt im Vollbild alles. Die 34 Bildpunkte, die hier einmal
   abgezogen wurden, waren der Platz der Rundenleiste unter der Bühne — die
   steht jetzt in der schwebenden Leiste, und der Abzug ließ nur einen leeren
   Streifen unter dem Bild stehen. */
.viewer:fullscreen .viewer-stage {
  height: 100vh; border: none; border-radius: 0;
}
.viewer:fullscreen .kf-overlay { top: 18px; right: 18px; max-width: min(40vw, 380px); }
.viewer:fullscreen .teamcol { max-height: calc(100% - var(--dockhoehe, 96px) - 90px); }

/* --- Gemeinsam ansehen -------------------------------------------------- */
.roombar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 13px; font-size: 13.5px;
}
.room-lead { color: var(--ink-2); font-weight: 500; }
.room-lead.on { color: var(--accent-ink); }
.room-who { font-size: 12.5px; margin-top: 4px; }
.room-note { font-size: 12.5px; margin-top: 4px; }
.credentials .cred code { font-size: 14px; word-break: break-all; white-space: normal; }

/* === Strat-Board =========================================================
   Ein Strat gehört zu einer Karte und besteht aus Schritten. Gezeichnet wird
   auf dem Radarbild; die Zeichenfläche liegt deshalb mittig und quadratisch,
   damit das Bild nicht verzerrt.
   ------------------------------------------------------------------------ */

.btn-sm { padding: 5px 10px; font-size: 13px; }

.formrow { display: flex; gap: 14px; flex-wrap: wrap; }
.formrow > label { flex: 1 1 200px; }
.formrow > label:last-child { flex: 0 1 160px; }

.danger-row { margin-top: 14px; margin-right: 10px; }

.sidetag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid transparent;
}
.side-T  { background: var(--side-t-soft); color: var(--side-t); }
.side-CT { background: var(--side-ct-soft); color: var(--side-ct); }

/* --- Übersicht ---------------------------------------------------------- */

.stratlist { list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stratcard {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 14px 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
}
.stratcard:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
.stratcard-head { display: flex; align-items: center; gap: 4px; }
.stratcard-name { font-weight: 600; }
.stratcard-notes { color: var(--ink-2); font-size: 13.5px; }
.stratcard-meta { margin-top: auto; padding-top: 6px; color: var(--ink-3); font-size: 12.5px; }

.stratnote { max-width: 80ch; color: var(--ink-2); margin: -6px 0 18px; }

/* --- Schrittwechsler ---------------------------------------------------- */

.steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.steps form.inline { display: inline; }
.stepchip {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  text-decoration: none;
}
.stepchip:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.stepchip.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 500; }
.stepchip-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-3);
}
.stepchip.on .stepchip-no { background: var(--accent); color: var(--accent-fg); }
.stepchip-add { border-style: dashed; }

/* --- Brett -------------------------------------------------------------- */

.board {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "tools tools" "utilbar utilbar" "stage side";
}
@media (max-width: 900px) {
  .board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tools" "utilbar" "stage" "side";
  }
}

.tools {
  grid-area: tools;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.toolgroup { display: flex; gap: 4px; align-items: center; }

.tool {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px;
  cursor: pointer; padding: 6px 9px; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
}
.tool:hover { background: var(--surface-2); color: var(--ink); }
.tool.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.tool span[aria-hidden] { font-size: 15px; line-height: 1; width: 15px; text-align: center; }
@media (max-width: 1100px) { .tool-label { display: none; } }

/* Farbwahl des Zeichenbretts. Eigener Name: .swatch gehört den T/CT-Punkten
   auf der Auswertungsseite und in der Spielerliste des Viewers — der gleiche
   Name hat ihnen schon einmal die Farbe genommen.

   Die Farben stehen hier als Klassen und nicht als style-Attribut: die CSP
   erlaubt kein style-src 'unsafe-inline', ein Attribut würde also verworfen.
   Sie müssen mit COLORS in strat.js übereinstimmen; palette_test.go wacht. */
.inkpick {
  width: 22px; height: 22px; padding: 0; cursor: pointer; border-radius: 50%;
  /* Fester Rand statt --line: Weiß und Schwarz sind die Randfälle, und je
     nach Erscheinungsbild verschwände sonst einer der beiden ganz. */
  border: 2px solid rgba(128, 138, 150, 0.6);
}
.inkpick:hover { border-color: rgba(128, 138, 150, 0.95); }
.inkpick.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.inkpick-0 { background: #e8813a; }
.inkpick-1 { background: #4a9eea; }
.inkpick-2 { background: #5ab55f; }
.inkpick-3 { background: #e2504a; }
.inkpick-4 { background: #e6c33a; }
.inkpick-5 { background: #bf74d8; }
.inkpick-6 { background: #f2f4f7; }
.inkpick-7 { background: #14181e; }

.widthpick { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.widthpick input { width: 90px; }

.savestate { font-size: 13px; color: var(--ink-3); min-width: 9ch; }
.savestate-ok { color: var(--ok); }
.savestate-warn { color: var(--warn); }
.savestate-error { color: var(--crit); }

.boardstage { grid-area: stage; position: relative; min-width: 0; }
.boardcanvas {
  display: block; width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line); background: #0e1116;
}

/* Legende der Tastenkürzel, beim ersten Öffnen über dem Brett. Sie liegt in
   .boardstage und damit über der Zeichenfläche — nicht als Seitenleiste, weil
   sie nach dem ersten Mal verschwindet und dauerhaft keinen Platz bekommen
   soll. Die Fläche darunter ist dunkel, also deckt der Kasten sie ab statt
   sich hineinzumischen. */
/* Am Fenster verankert, nicht an der Bühne.
   Zuerst lag die Legende als absolutes Feld in .boardstage. Die Bühne ist
   aber so hoch, wie das Fenster hergibt, und beginnt erst unterhalb von
   Kopfzeile, Titel und Werkzeugleiste — auf einem 620 Pixel hohen Schirm
   blieben darunter 260 Pixel. Der Kasten stand dann zur Hälfte unter dem
   Rand, samt "Got it": die Legende ließ sich nicht schließen, ohne zu
   scrollen. Eine Höhenbegrenzung half nicht, denn nicht die Höhe war das
   Problem, sondern wo die Bühne anfängt.

   Kein Vorfahre trägt transform, filter oder perspective — sonst wäre fixed
   wieder an ihm verankert statt am Fenster. */
.keyhelp {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(14, 17, 22, .62);
}
.keyhelp-box {
  position: relative; max-width: 420px; width: 100%;
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
}
.keyhelp-titel {
  margin: 0 0 12px; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
/* Der Schließknopf sitzt in der Ecke des Kastens und darf die Überschrift
   nicht verschieben, wenn der Titel einmal länger wird. */
.keyhelp-x {
  position: absolute; top: 10px; right: 10px;
  border: 0; background: none; cursor: pointer;
  font-size: 19px; line-height: 1; padding: 2px 6px;
  color: var(--ink-3); border-radius: var(--radius);
}
.keyhelp-x:hover, .keyhelp-x:focus-visible { color: var(--ink); background: var(--surface-2); }
/* Tasten links, Bedeutung rechts. Die Spalte richtet sich nach der längsten
   Tastenfolge, damit die Erklärungen auf einer Kante stehen. */
.keyhelp-list {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
  margin: 0 0 16px; font-size: 13.5px;
}
.keyhelp-list dt { color: var(--ink); white-space: nowrap; }
.keyhelp-list dd { margin: 0; color: var(--ink-2); }
.keyhelp kbd {
  display: inline-block; padding: 1px 6px; min-width: 18px; text-align: center;
  font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 3px; background: var(--surface-2); color: var(--ink);
}
.keyhelp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.keyhelp-foot .hint { margin: 0; }
/* Der ?-Knopf in der Werkzeugleiste: gleiche Größe wie seine Nachbarn, aber
   ohne Beschriftung, damit er nicht wie eine Aktion aussieht. */
.keyhelp-open { min-width: 30px; font-weight: 700; }

/* Zoom auf dem Brett, oben rechts über der Fläche. Die Knöpfe sind für alle
   da, die kein Mausrad haben — auf dem Tablet der einzige Weg. */
.boardzoom {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.zoombtn {
  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 17px; line-height: 1;
  cursor: pointer; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.zoombtn:hover:not(:disabled) { background: var(--surface-2); }
.zoombtn:disabled { opacity: 0.45; cursor: default; }

/* Texteingabe direkt auf der Karte, dort wo geklickt wurde. */
.boardtext {
  position: absolute; width: 190px; padding: 4px 7px; font-size: 14px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); z-index: 2;
}

.boardside { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.boardside textarea { resize: vertical; }
.steptitle-read { margin: 0; font-size: 17px; }
.stepnotes-read { margin: 0; color: var(--ink-2); white-space: pre-wrap; }

.stratsettings { margin-top: 22px; }
.stratsettings summary { cursor: pointer; font-weight: 500; }
.stratsettings form { margin-top: 14px; }

/* --- Ausrüstung in der Spielerliste des Viewers ------------------------
   Drei feste Plätze in der Zeile: links, was in der Hand liegt, in der Mitte
   die Wurfgeräte, rechts Weste, Kit und Bombe. Die feste Breite links hält
   die Utility aller zehn Zeilen untereinander — sonst wanderte sie mit jeder
   Waffe hin und her. */
.vp-hand {
  display: inline-flex; align-items: center; justify-content: flex-start;
  flex: 0 0 52px; min-height: 14px; padding: 1px 4px; border-radius: 3px;
  background: rgba(255,255,255,0.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.vp-hand:empty { background: none; box-shadow: none; }
.vp-money {
  font-family: var(--mono); font-size: 11.5px; color: var(--ok);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vp-kit {
  grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
  margin-top: 3px; min-height: 15px;
}
.vp-nades { display: flex; align-items: center; gap: 4px; min-height: 14px; }
.vp-armor { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.wicon { display: inline-flex; align-items: center; color: var(--ink-2); }
.wicon svg { display: block; width: auto; height: 100%; }
.wicon-small { height: 13px; max-width: 46px; }
.wicon-tiny { height: 12px; max-width: 22px; }
.vp.side-t  .wicon { color: var(--side-t); }
.vp.side-ct .wicon { color: var(--side-ct); }
.wtext { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* --- Utility auf dem Strat-Board --------------------------------------- */

.utilbar {
  grid-area: utilbar; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 10px 12px; margin-top: -6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.utilfrom { display: flex; gap: 6px; align-items: center; }
.utilfrom select { width: auto; max-width: 260px; font-size: 13px; padding: 6px 9px; }
.utilhint { flex-basis: 100%; margin: 0; }

.kindbtn {
  font: inherit; font-size: 13px; cursor: pointer; padding: 5px 10px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2);
  border-left-width: 4px;
}
.kindbtn:hover { background: var(--surface-2); color: var(--ink); }
.kindbtn.on { color: var(--ink); font-weight: 500; border-color: var(--line-strong); background: var(--surface-2); }
/* Der linke Rand trägt die Farbe, in der das Wurfgerät auf der Karte steht. */
.kind-smoke { border-left-color: #9aa3ad; }
.kind-flash { border-left-color: #e6c33a; }
.kind-fire  { border-left-color: #e2504a; }
.kind-he    { border-left-color: #5ab55f; }
.kind-decoy { border-left-color: #bf74d8; }

.utilinfo { padding: 14px 16px; }
.utilinfo h3 { margin: 0 0 4px; font-size: 15px; }
.utilinfo p { margin: 6px 0; }
.utilinfo .cmd { margin: 8px 0 0; }

/* Auf der Karte ziehen zeichnet im Raum einen Zeigestrich. Der Zeiger sagt
   das an, damit niemand rätselt, warum das Ziehen etwas tut. */
.viewer.in-room .viewer-stage canvas { cursor: crosshair; }

/* Werkzeuge auf der Team-Seite. Zurückhaltend, weil sie oben in der
   Navigation stehen — hier sind sie nur der kurze Weg für den, der über
   die Teamliste hereinkommt. */
/* --- Steuerung, schwebend über der Karte ------------------------------- */

/* Rundenleiste und Steuerung sind eine Leiste: sie schwebt über dem unteren
   Rand der Karte, und die Runden stehen darin. Vorher hing die Rundenleiste
   unter der Bühne und war bei geöffnetem Vollbild gar nicht zu sehen. */
.viewer-dock {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 6; width: min(980px, calc(100% - 32px));
  border-radius: 20px;
  background: rgba(16, 20, 26, 0.88); border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(6px);
}
.viewer-dock .roundbar:empty { display: none; }
.viewer-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 10px;
}
.viewer-controls .btn {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: #e7ebf1;
}
.viewer-controls .btn:hover { background: rgba(255,255,255,0.16); }
/* Ein ▶ mit der Polsterung eines Textknopfes wirkt in der schmalen Leiste
   klobig: die Zeichenknöpfe bekommen deshalb ein Quadrat auf Zeilenhöhe. */
.viewer-controls .btn-icon {
  flex: none; width: 30px; height: 30px; padding: 0; font-size: 12px; line-height: 1;
}
/* Die Steuerleiste ist in beiden Erscheinungsbildern dunkel und hat damit
   ihren eigenen Untergrund. Der Akzent des hellen Schemas ist selbst dunkel —
   er stand hier mit 1,2:1 auf der Leiste und war nicht zu sehen. */
.viewer-controls .btn-primary {
  background: #e7ebf1; border-color: #e7ebf1; color: #14181e;
}
.viewer-controls .btn-primary:hover { background: #ffffff; border-color: #ffffff; }
.viewer-controls select {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14);
  color: #e7ebf1; width: auto; font-size: 13px; padding: 5px 8px;
}
/* Ein Symbol statt eines Wortes: die Leiste ist eng, und ein Zahnrad sagt
   dasselbe wie "Optionen". */
.menu-btn-icon { padding: 6px; }
.viewer-controls .ic { width: 15px; height: 15px; display: block; }
.viewer-controls .menu-btn { color: #b9c2ce; }
.viewer-controls .menu-btn:hover,
.viewer-controls .menu[open] > .menu-btn { background: rgba(255,255,255,0.16); color: #fff; border-color: transparent; }
/* Zeichnen ist ein Modus und sieht auch so aus, solange er läuft. */
.viewer-controls .btn[aria-pressed="true"] {
  background: #e7ebf1; border-color: #e7ebf1; color: #14181e;
}
.viewer-clock { color: #e7ebf1; font-size: 13px; min-width: 8ch; text-align: center;
  font-variant-numeric: tabular-nums; }
.viewer-speed { flex: none; }
/* Ebenenwahl — nur auf Karten mit mehreren Geschossen sichtbar. */
.viewer-level { max-width: 150px; }

/* --- Positionsregler mit Ereignismarken -------------------------------- */

.scrubwrap { position: relative; flex: 1 1 auto; min-width: 0; height: 26px; }
.scrubwrap .scrub {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  background: none; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.scrubwrap .scrub::-webkit-slider-runnable-track { height: 26px; background: none; }
.scrubwrap .scrub::-moz-range-track { height: 26px; background: none; }
.scrubwrap .scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 4px; height: 22px; margin-top: 2px;
  border-radius: 2px; background: #fff; border: 1px solid rgba(0,0,0,.5); cursor: pointer;
}
.scrubwrap .scrub::-moz-range-thumb {
  width: 4px; height: 22px; border-radius: 2px; background: #fff;
  border: 1px solid rgba(0,0,0,.5); cursor: pointer;
}

/* Die Marken liegen unter dem Regler und nehmen keine Zeigereignisse an —
   sonst ließe sich der Regler dort nicht mehr anfassen. */
.scrubmarks {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  border-radius: 3px; background: rgba(255,255,255,0.10);
}
.mk {
  position: absolute; bottom: 0; width: 2px; border-radius: 1px;
  transform: translateX(-1px);
  /* Über den Abschnittsbändern: ein Kill soll auf ihnen sichtbar bleiben. */
  z-index: 1;
}
/* Kills auf dem Regler tragen die Seite des Täters — wie alles im Viewer. */
.mk-kill-t  { background: var(--side-t); height: 100%; }
.mk-kill-ct { background: var(--side-ct); height: 100%; }
.mk-bomb   { background: #e6c33a; height: 100%; width: 3px; }
.mk-defused { background: #5ab55f; height: 100%; width: 3px; }
/* Das Ende der Kaufphase teilt die Runde: davor wird gekauft, danach gespielt. */
.mk-live { background: rgba(255,255,255,0.5); height: 100%; width: 1px; }
/* Abschnitte statt Striche: die Freezetime am Anfang, die Zeit nach dem Plant
   am Ende. Sie liegen hinter den Marken, damit ein Kill darauf sichtbar
   bleibt. */
.bd { position: absolute; top: 0; bottom: 0; z-index: 0; }
.bd-freeze { background: rgba(255,255,255,0.14); }
.bd-bomb { background: rgba(230,195,58,0.22); }
/* Nach der entschiedenen Runde läuft sie im Spiel noch weiter. */
.bd-ende { background: rgba(255,255,255,0.07); }

/* --- Mannschaftsleisten ------------------------------------------------ */

.teamcol .vp {
  background: rgba(16, 20, 26, 0.84); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 5px 9px; gap: 1px 7px;
  color: #e7ebf1; font-size: 12.5px;
}
.teamcol .vp:hover { background: rgba(30, 37, 47, 0.92); }
.teamcol .vp.followed { border-color: #e7ebf1; background: rgba(58, 66, 78, 0.94); }
.teamcol .vp-name { color: #eef1f5; }
.teamcol .vp-hp { color: #b9c1cb; }
.teamcol .vp-side { color: #8d96a2; }
.teamcol .vp-kit { border-top-color: rgba(255,255,255,0.1); }
.teamcol .vp-track { background: rgba(255,255,255,0.14); }
.teamcol .wtext { color: #98a1ad; }

/* --- Raumleiste im Ansehen-Modus --------------------------------------- */
.viewer-stage > .roombar {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 11px; border-radius: var(--radius);
  background: rgba(16, 20, 26, 0.84); border: 1px solid rgba(255,255,255,0.08);
  color: #d7dde5; font-size: 12.5px; max-width: 32%;
}

/* Schmal ist neben der Karte kein Platz: die Leisten rücken darunter, die
   Steuerung wird zum gewöhnlichen Balken. */
@media (max-width: 980px) {
  .viewer-stage { height: min(calc(100vh - 300px), 78vw); min-height: 300px; }
  .teamcols {
    display: flex; gap: 8px; align-items: flex-start;
  }
  .teamcol {
    position: static; width: auto; flex: 1 1 0; max-height: none; overflow: visible;
  }
  /* Nicht static: die Bühne ist ein Flex-Behälter, ein statisches Kind
     stellte sich neben die Karte und schöbe sie aus der Mitte. Sie bleibt
     also schwebend, nur breiter und weniger rund. */
  .viewer-controls {
    width: calc(100% - 16px); bottom: 8px; border-radius: var(--radius);
    gap: 8px; padding: 7px 9px;
  }
  .viewer-level { display: none; }
}
@media (max-width: 620px) {
  .viewer-speed { display: none; }
  .roundbar .rb { min-width: 18px; font-size: 10.5px; }
}

/* Kopf einer Mannschaftsleiste: Seite, Lebende, Kassenstand. */
.tc-head {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 9px 5px;
  font-size: 11.5px; letter-spacing: 0.03em; cursor: default;
  color: #9aa3ae; background: rgba(16, 20, 26, 0.84);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
}
.tc-side { font-weight: 700; color: #e7ebf1; letter-spacing: 0.06em; }
.tc-alive { margin-right: auto; }
.tc-money { font-family: var(--mono); color: var(--ok); font-variant-numeric: tabular-nums; }
.teamcol .vp-money { color: #7fc79b; }

/* Im Killfeed steht das Symbol der Waffe statt ihres Namens. */
.kf-w .wicon { color: var(--ink-2); }
.kf-w .wicon-small { height: 12px; max-width: 42px; }

/* --- Auswertungsseite: Reiter ------------------------------------------
   Serverseitig über ?tab=. Jede Ansicht ist verlinkbar und funktioniert
   ohne JavaScript; die Seite baut in wenigen Millisekunden auf. */

.match-bar .match-teams { display: flex; align-items: baseline; gap: 10px; }
.match-bar .match-score {
  font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: flex; gap: 5px;
}
.match-bar .match-score span { color: var(--ink-3); font-weight: 400; }
.match-bar .team-name { display: flex; align-items: center; font-weight: 500; }

.tabs {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.tabs-spacer { flex: 1 1 auto; }
.tab {
  padding: 9px 15px; font-size: 14.5px; color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.on { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 500; }

/* --- Übersicht --------------------------------------------------------- */

.ov {
  display: grid; gap: 14px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ov-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.ov-card h3 {
  margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.ov-card p { margin: 6px 0 0; }
.ov-big { font-size: 15px; }
.ov-big b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.ov-team { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 4px 0; font-size: 14px; flex-wrap: wrap; }
.ov-name { display: flex; align-items: center; font-weight: 500; }
.ov-sides { display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
.ov-sides b { font-weight: 600; }

/* Eröffnungsduelle als Verhältnis. Die Breiten setzt app.js aus data-w. */
.ov-split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.ovs-a { background: var(--team-1); }
.ovs-b { background: var(--team-2); }

/* --- Nach Kaufzustand -------------------------------------------------- */

.buys { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.buy-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.buytable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.buytable th {
  text-align: left; font-weight: 400; font-size: 13.5px; color: var(--ink-2);
  padding: 4px 10px 4px 0; white-space: nowrap;
}
.buytable td { padding: 4px 0; }
.buytable .num { padding-left: 10px; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.buybar { width: 100%; }
/* Kaufzustands-Balken zeigen eine Mannschaft, nicht eine Bedienabsicht. */
.bb { display: block; height: 8px; border-radius: 4px; min-width: 2px; background: var(--ink-3); }
.bb-1 { background: var(--team-1); }
.bb-2 { background: var(--team-2); }

/* --- Balken in Tabellen ------------------------------------------------ */

.bar-col { min-width: 108px; }
.statbar {
  display: inline-block; vertical-align: middle; width: 58px; height: 6px;
  border-radius: 3px; background: var(--line); overflow: hidden; margin-right: 7px;
}
/* Statistikbalken zeigen eine Menge, keine Zugehörigkeit — deshalb neutral. */
.sb-fill { display: block; height: 100%; background: var(--ink-3); }
.sb-text { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.short-sb td, .short-sb th { padding-top: 7px; padding-bottom: 7px; }

.match-actions { margin-top: 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Aus jedem Kill in den Viewer, ein paar Sekunden vor dem Duell. */
.kf-jump { font-size: 12.5px; white-space: nowrap; margin-left: 10px; }

/* Spaltengruppen im Scoreboard. Die feine Linie trennt sie, ohne die Tabelle
   in Kästen zu zerlegen. */
.sb-groups th {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; padding-bottom: 2px; text-align: left;
}
.scoreboard .g-start { border-left: 1px solid var(--line); }
.scoreboard .sb-groups th.num, .scoreboard .sb-groups th[colspan] { text-align: left; }
.scoreboard tbody td { vertical-align: middle; }

/* --- Duelle erklären ---------------------------------------------------- */

.duel-legend { margin-bottom: 16px; }
.duel-legend p { margin: 0 0 6px; max-width: 78ch; }
.tintkey { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; }
.tintkey li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.tk {
  width: 22px; height: 14px; border-radius: 3px; flex: none;
  border: 1px solid var(--line);
}
/* Ohne eigene Tönung bleibt das Kästchen leer — das ist "ausgeglichen". */
.tk:not([class*=" duel-"]) { background: var(--surface); }

.sub-title {
  margin: 24px 0 10px; font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.standouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.standouts li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px;
}
.so-pair { display: flex; align-items: center; gap: 4px; min-width: 0; }
.so-score { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Wer in einer Runde was geworfen hat -------------------------------- */

.throws {
  margin-top: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.throw-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--line);
}
.throw-row:last-child { border-bottom: none; }
.tr-who { display: flex; align-items: center; gap: 5px; min-width: 190px; font-size: 14px; }
.tr-side { font-family: var(--mono); font-size: 10.5px; }
.tr-items { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-item { display: inline-flex; align-items: center; gap: 5px; }
/* Als <img> geladen bleibt das Symbol schwarz; auf hellem wie dunklem Grund
   sorgt deshalb ein Filter für den nötigen Kontrast. */
.tr-icon { height: 18px; width: auto; max-width: 34px; display: block; opacity: .8; }
@media (prefers-color-scheme: dark) { .tr-icon { filter: invert(1); opacity: .8; } }
.tr-clock { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Zeilenköpfe der Duell-Matrix sind <th> für die Vorlesehilfe, sollen aber
   aussehen wie eine gewöhnliche Zelle — nicht wie die Spaltenüberschrift. */
.duels tbody th {
  font-family: inherit; font-size: inherit; letter-spacing: normal;
  text-transform: none; color: var(--ink); font-weight: 500; text-align: left;
}

/* In der Seitenbilanz steht der Seitenmarker vor der Zahl — die Farbe sagt
   dort T und CT, nicht Mannschaft. */
.ov-side { display: inline-flex; align-items: baseline; }

/* --- Startseite --------------------------------------------------------- */


/* Ergebnisliste, für eigene wie für Mannschaftspartien. */
.reslist { list-style: none; margin: 12px 0 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.reslist li { border-bottom: 1px solid var(--line); }
.reslist li:last-child { border-bottom: none; }
.res {
  display: grid; align-items: baseline; gap: 4px 14px; padding: 10px 14px;
  grid-template-columns: 96px 110px minmax(0, 1fr) auto auto auto;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.res:hover { background: var(--surface-2); text-decoration: none; }
.res-out {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; padding: 2px 8px;
  border-radius: 999px; text-align: center; white-space: nowrap;
}
.res-win { background: var(--ok-soft); color: var(--ok); }
.res-loss { background: var(--crit-soft); color: var(--crit); }
.res-draw { background: var(--surface-2); color: var(--ink-2); }
.res-vs { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-score, .res-line { font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-when { white-space: nowrap; font-size: 13px; }
@media (max-width: 780px) {
  .res { grid-template-columns: auto 1fr auto; }
  .res-line, .res-when { grid-column: 2 / -1; }
}

/* Formstreifen: die letzten Ergebnisse, ältestes links. */
.formstrip { display: flex; gap: 3px; margin-bottom: 4px; }
.fo {
  width: 22px; height: 22px; border-radius: 3px; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: #fff;
}
.fo-S { background: var(--ok); }
.fo-N { background: var(--crit); }
.fo-U { background: var(--ink-3); }

/* Was gerade im Ansehen-Raum läuft. */
.livecard {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.livecard:hover { background: var(--surface-2); text-decoration: none; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 4px var(--ok-soft);
}
.live-text { flex: 1; font-size: 14px; }
.live-go { white-space: nowrap; font-size: 13.5px; color: var(--ink-2); }

/* Kartenbilanz. Die Spalten bekommen feste Mindestbreiten — sonst laufen
   Bilanz und ADR ineinander. */
.maprec { width: 100%; }
.maprec td, .maprec th { vertical-align: middle; white-space: nowrap; }
.maprec .bar-col { min-width: 150px; width: 1%; }
.maprec .num { min-width: 110px; padding-left: 18px; }
.maprec td:first-child, .maprec th:first-child { width: 100%; }
.sb-t  { background: var(--side-t); }
.sb-ct { background: var(--side-ct); }

/* Stand der Vorbereitung. */
.preplist { list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.preplist li {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.preplist li:last-child { border-bottom: none; }
.prep-map { min-width: 120px; }
.prep-count { color: var(--ink-2); min-width: 130px; }
.prep-have { margin-left: auto; color: var(--ink-2); }
.prep-have b { color: var(--crit); font-weight: 500; }
.prep-ok .prep-have { color: var(--ok); }

/* --------------------------------------------------- Kartenwahl mit Zusatz */
/* Die Leiste zeigt benutzte Karten; alles Weitere klappt darunter auf, damit
   die gewohnte Auswahl nicht in einer langen Liste untergeht. */
.mappick { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.mapadd { position: relative; }
.mapadd > summary { list-style: none; cursor: pointer; }
.mapadd > summary::-webkit-details-marker { display: none; }
.chipbtn-add { border-style: dashed; }
.mapadd-body {
  margin-top: .5rem; padding: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  display: grid; gap: .6rem; max-width: 34rem;
}
.mapadd-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.mapadd-free { display: grid; gap: .2rem; }
.mapadd-free > span { font-size: .8rem; color: var(--ink-2); }
.mapadd-free > input { width: 14rem; }
.mapadd-body > .hint { margin: 0; }

/* ------------------------------------------------- Aufnahmen am Utility-Wurf */
.clips { display: flex; flex-wrap: wrap; gap: .75rem; margin: .6rem 0 0; }
.clip { margin: 0; display: grid; gap: .3rem; max-width: 22rem; }
/* Natürliche Größe, nur nach oben begrenzt: ein kleines GIF soll nicht auf
   Kartenbreite aufgeblasen werden. */
.clip video, .clip img {
  max-width: 100%; max-height: 15rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: #000; display: block;
}
.clip figcaption {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; font-size: .78rem;
}
.clipadd { margin-top: .6rem; }
.clipadd > summary { cursor: pointer; font-size: .85rem; color: var(--ink-2); }
.clipadd-form {
  margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
/* Das Dateifeld nimmt den Rest der Zeile, damit der Knopf daneben bleibt und
   nicht allein in die nächste Zeile rutscht. */
.clipadd-form > input[type=file] { flex: 1 1 9rem; min-width: 0; font-size: .82rem; }
.clipadd-form > .hint { flex-basis: 100%; margin: 0; }

/* -------------------------------------------------------- Demo hochladen */
.upload { margin: 0 0 1rem; }
.upload > summary { cursor: pointer; color: var(--ink-2); }
.upload-form {
  margin-top: .6rem; padding: .8rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.upload-form > .hint { flex-basis: 100%; margin: 0; }
.demo-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }

/* ------------------------------------------------------------ Kopierknopf */
/* Wird von app.js eingeblendet — ohne JavaScript steht kein toter Knopf da. */
.copybtn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: var(--radius); padding: .1rem .45rem;
  font: inherit; font-size: .72rem; line-height: 1.6; cursor: pointer;
}
.copybtn:hover { border-color: var(--ink-3); color: var(--ink); }
.copybtn.copied { border-color: var(--ok); color: var(--ok); }
.offscreen { position: fixed; top: -100vh; left: -100vw; opacity: 0; }

/* ------------------------------------------------------ Notizen am Match */
.notes { margin-top: 22px; }
.notelist { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--surface); padding: .6rem .75rem;
}
.note-body { margin: 0; white-space: pre-wrap; }
.note-meta {
  margin: .35rem 0 0; font-size: .78rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.noteform { display: flex; align-items: flex-start; gap: .5rem; }
.noteform textarea { flex: 1 1 auto; min-width: 0; }
/* Die Runde im Verlauf, an der schon etwas steht, bekommt einen Punkt. */
.note-dot { fill: var(--accent); }
.dupes {
  list-style: none; margin: 0 0 .6rem; padding: .5rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  display: grid; gap: .25rem;
}

/* --- Multi-Viewer: bis zu vier Runden nebeneinander oder übereinander ---
   Die Bahnen sind gewöhnliche Viewer; hier steht nur, wie sie liegen. */

.multibar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; margin: 10px 0;
  background: rgba(16, 20, 26, 0.88); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
}
.multibar .scrubwrap { height: 22px; }
.multibar .btn { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: #e7ebf1; }
.multibar .btn-primary { background: #e7ebf1; border-color: #e7ebf1; color: #14181e; }
.multibar select {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14);
  color: #e7ebf1; width: auto; font-size: 13px; padding: 5px 8px;
}

.lanes-split { display: grid; gap: 10px; }
.lanes-split.lanes-1 { grid-template-columns: 1fr; }
.lanes-split.lanes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lanes-split.lanes-3, .lanes-split.lanes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Übereinander: alle Bahnen liegen im selben Feld. Die unterste malt den
   Hintergrund, die darüber sind durchsichtig — deshalb genügt Stapeln, und
   niemand muss in ein fremdes Canvas zeichnen.
   Alle Bahnen sind absolut gesetzt, keine steht im Fluss: sonst schöbe die
   eine, die es tut, die anderen um ihre Kopfzeile nach unten, und die Karten
   lägen nicht mehr deckungsgleich. Deshalb steht auch die Höhe hier. */
.lanes-overlay { position: relative; height: min(62vh, 620px); }
.lanes-overlay .lane { position: absolute; inset: 0; }
.lanes-overlay .lane + .lane { pointer-events: none; }
.lanes-overlay .lane-viewer { background: none; }
/* Die Höhe muss durchgereicht werden: die Bahn ist so hoch wie der Stapel,
   der Viewer darin ebenso, und erst dann stimmt die Bühne. Ohne die mittlere
   Zeile rechnet der Zeichner mit einer Höhe, die es nicht gibt, und malt die
   Karte an der Bühne vorbei. */
.lanes-overlay .lane-viewer { height: 100%; }
.lanes-overlay .lane-viewer .viewer-stage { height: 100%; min-height: 0; }
/* Nicht nur die Leinwand muss durchsichtig sein, sondern auch die Bühne
   darunter: sie trägt eine deckende Farbe, und die der oberen Bahnen verdeckte
   die Karte der untersten vollständig. Die Leinwände waren dabei die ganze
   Zeit richtig — nur unsichtbar. */
.lanes-overlay .lane:not(:first-child) .viewer-stage { background: none; }

/* Stand und Killfeed gehören zu je einer Runde; übereinander wären es drei
   Sätze an derselben Stelle. Welche Bahn welche ist, sagt die Legende. */
.lanes-overlay .stage-head, .lanes-overlay .kf-overlay { display: none; }

/* Die Köpfe der Bahnen über dem Stapel. */
.lane-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 10px; }
.lane-legend .lane { flex: 0 1 auto; }
.lane-legend .lane-head { padding: 0; }

.lane-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 2px; font-size: 13px;
}
.lane-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lane-off { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.lane-off input { width: 7ch; padding: 2px 4px; }
.lane-x { margin-left: auto; color: var(--ink-3); text-decoration: none; font-size: 17px; padding: 0 6px; }
.lane-x:hover { color: var(--ink); }

/* In der Bahn ist die Bühne kleiner und ohne eigene Steuerung — die führt die
   Leiste oben für alle. */
.lane-viewer .viewer-controls, .lane-viewer .roundbar { display: none; }
.lane-viewer .viewer-stage { height: min(46vh, 460px); min-height: 240px; }
.lane-viewer .teamcols { display: none; }
.lanes-1 .lane-viewer .viewer-stage { height: min(70vh, 700px); }

/* --- Utility-Signatur --------------------------------------------------- */

/* Das Site trägt Farbe, damit die Tabelle beim Überfliegen zerfällt: alles A
   oben, alles B darunter. */
.sitetag {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 7px; border-radius: 999px; font-weight: 600; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.site-A { color: var(--team-1); border-color: var(--team-1); }
.site-B { color: var(--team-2); border-color: var(--team-2); }
/* Die Chips liegen in einem inneren Element, nicht in der Zelle selbst:
   display:flex auf einem <td> nimmt der Zelle ihre Rolle in der Tabelle, und
   die Trennlinie der Zeile brach genau dort ab. */
.wurflinks { display: flex; flex-wrap: wrap; gap: 4px; }

/* --- Utility-Signatur: Pakete mit Kartenbild --------------------------- */

.pakete {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.paket {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.paket-bild {
  flex: 0 0 150px; width: 150px; height: 150px; border-radius: 4px; overflow: hidden;
  background: var(--surface-2);
}
.paket-bild canvas { display: block; }
.paket-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.paket-kopf { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.paket-zahl { margin: 0; font-size: 13px; color: var(--ink-2); }

/* --- Rollen und Spots -------------------------------------------------- */

.rollen {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.rollen-kopf {
  margin: 14px 0 8px; font-size: 13px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink-3);
}
.rolle {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.rolle-bild {
  flex: 0 0 120px; width: 120px; height: 120px; border-radius: 4px; overflow: hidden;
  background: var(--surface-2);
}
.rolle-bild canvas { display: block; width: 120px; height: 120px; }
.rolle-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rolle-name { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rolle-zahl { margin: 0; font-size: 13px; color: var(--ink-2); }

/* Eine Liste ohne Punkte, für kurze Aufzählungen in Karten. */
.plainlist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.plainlist li { font-size: 14px; }
.site-Mid { color: var(--ink-2); border-color: var(--line-strong); }
.wurflinks .tag { text-decoration: none; }
.wurflinks .tag:hover { background: var(--surface-2); color: var(--ink); }

/* --- Fortschritt beim Hochladen ---------------------------------------- */

.uploadbar { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.uploadbar-track {
  flex: 1 1 auto; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.uploadbar-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.uploadbar-text { font-size: 12px; color: var(--ink-2); white-space: nowrap; min-width: 16ch; }


/* === Prep: Matchdays, Zettel, Veto =====================================
   Der Zettel ist die Hauptansicht und keine Tabelle: er wird zehn Minuten
   vor dem Match gelesen, oft auf einem zweiten Monitor. Große Schrift,
   kurze Zeilen, klare Abschnitte. */

.mdlist { display: grid; gap: 10px; margin: 18px 0 26px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mdcard {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink);
}
.mdcard:hover { background: var(--surface-2); text-decoration: none; }
/* Was noch bevorsteht, steht vorn — daran hängt die Arbeit. */
.mdcard-next { border-color: var(--accent); }
.md-when { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.md-gegner { font-size: 17px; font-weight: 600; }
.md-meta { font-size: 13px; color: var(--ink-2); }
/* Der Löschknopf liegt über der Karte statt in ihr: die Karte ist
   ganzflächig ein Link, und ein Formular darf nicht in einem <a> stehen.
   Er bleibt sichtbar, nur leise — nicht erst beim Überfahren. Auf einem
   Tablett gibt es kein Überfahren, und ein Knopf, den man dort nie zu
   Gesicht bekommt, ist schlimmer als einer, der zurückhaltend dasteht. */
.mdrow { position: relative; display: flex; }
.mdrow .mdcard { flex: 1 1 auto; padding-right: 40px; }
.md-del { position: absolute; top: 7px; right: 7px; }
.md-del button { color: var(--ink-3); padding: 2px 7px; line-height: 1.1; }
.md-del button:hover, .md-del button:focus-visible { color: var(--crit); border-color: var(--crit); }
/* Unten auf dem Matchday, mit Abstand zum Speichern darüber: die beiden
   dürfen nicht wie ein Paar aussehen. */
.md-del-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
}
.md-del-row button { color: var(--crit); }
.md-del-row .hint { margin: 0; }

.mdhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.mdhead h1 { margin: 0; }
.mdhead-meta { color: var(--ink-2); font-size: 14px; }
.mdhead-tools { margin-left: auto; display: flex; gap: 6px; }

.zettel { display: grid; gap: 14px; margin: 18px 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.zblock {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px;
}
.zblock-titel { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3); }
.zliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zitem { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.zitem-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zitem-text b { font-weight: 600; font-size: 14.5px; }
.zitem-mehr { font-size: 13px; color: var(--ink-2); }
.zitem-quelle { font-size: 11.5px; color: var(--ink-3); }
.zitem-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.zitem-tools form { display: flex; gap: 2px; }
.znote { white-space: pre-wrap; margin: 0; }

/* Anheften: der Vorschlag steht im Feld, geändert wird vor dem Übernehmen. */
.pin { margin-top: 8px; }
.pin-btn {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 12px; color: var(--ink-3); padding: 2px 6px;
  border: 1px dashed var(--line-strong); border-radius: 999px;
}
.pin-btn::-webkit-details-marker { display: none; }
.pin-btn::marker { content: ""; }
.pin-btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.pin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pin-zeile { gap: 2px; }
.pin-fuss { display: flex; align-items: center; gap: 8px; }
.pin-fuss select { width: auto; }
.pin-gilt { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; }
.zadd { margin-top: 10px; }

.vetoliste { list-style: none; margin: 0 0 12px; padding: 0; display: flex;
  flex-direction: column; gap: 4px; counter-reset: veto; }
.vetoschritt {
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  padding: 5px 8px; border-radius: var(--radius); background: var(--surface-2);
}
.vetoschritt::before {
  counter-increment: veto; content: counter(veto) "."; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 1.6em;
}
.v-wer { font-weight: 600; }
.v-uns { color: var(--accent-ink); }
.v-sie { color: var(--side-t); }
.v-aktion { color: var(--ink-2); }
.v-map { font-family: var(--mono); }
.vetoschritt form { margin-left: auto; }

.zettel-kopf h1 { margin-bottom: 2px; }
.zseite { margin: 20px 0 28px; }
.zseite-map { font-family: var(--mono); font-size: 18px; margin: 0 0 10px; }
.zliste-lesen .zitem-text b { font-size: 15.5px; }
.vetoliste-lesen .vetoschritt { background: none; padding: 2px 0; }

/* Drucken: eine Seite je Map, ohne alles, was man nicht anfassen kann. */
@media print {
  .topbar, .foot, .noprint, .tabs, .filter-group, .viewerbanner, .flash { display: none !important; }
  .zseite { break-inside: avoid; page-break-inside: avoid; }
  .zseite + .zseite { break-before: page; page-break-before: always; }
  .zblock { border-color: #bbb; background: none; }
  body { background: #fff; color: #000; }
}

/* --- Spielerkarten ------------------------------------------------------
   Fünf Karten statt einer Tabelle: vor einem Match liest niemand Spalten. */
.karten { display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.karte { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 10px 12px; }
.karte-kopf { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font-size: 15px; }
.tagawp {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 6px;
  border-radius: 999px; background: var(--warn-soft, rgba(230,195,58,0.18));
  color: var(--warn); border: 1px solid var(--warn);
}
.karte-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px 10px; margin: 0; }
.karte-zahlen div { display: flex; flex-direction: column; gap: 1px; }
.karte-zahlen dt { font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.03em; }
.karte-zahlen dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.karte-satz { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* --- Verzeichnis der Änderungen --------------------------------------- */
.changelog { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.cl-version {
  margin: 0 0 8px; font-size: 16px; font-family: var(--mono);
  display: flex; align-items: center; gap: 10px;
}
.cl-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cl-liste li { font-size: 14.5px; }

/* Die Gruppen. Ohne sie war eine Fassung eine Liste von zwölf Punkten, in der
   alles gleich wichtig aussah und man den einen suchte, der die eigene Arbeit
   betrifft. */
.cl-block { display: flex; flex-direction: column; gap: 16px; }
.cl-gruppe { display: flex; flex-direction: column; gap: 6px; }
.cl-bereich {
  margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cl-zahl {
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  color: var(--ink-3); margin-left: auto;
}
/* Der Hinweis auf eine neue Fassung. Er kommt vom Skript, weil nur der
   Browser weiß, was dieser Mensch zuletzt gesehen hat. */
.neueversion {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 9px 13px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent); font-size: 14px;
}
.neueversion a { font-weight: 600; }
.neueversion button {
  margin-left: auto; font: inherit; font-size: 13px; background: none; border: none;
  color: var(--ink-2); cursor: pointer; padding: 2px 6px; border-radius: var(--radius);
}
.neueversion button:hover { background: var(--surface-2); color: var(--ink); }
/* --- Spielerauswahl mit Suche ------------------------------------------
   Ein Muster für alle Stellen, an denen Spieler gewählt werden: das Feld
   über der Liste, der eigene Kader oben und erkennbar. */
.spielerwahl { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.sw-suche { flex-direction: row; max-width: 260px; }
.sw-suche-breit { max-width: 320px; margin-bottom: 10px; }
.sw-suche input { font: inherit; font-size: 14px; }
.sw-liste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Der eigene Kader hebt sich ab, ohne zu schreien: eine Kante in der
   Akzentfarbe genügt, die Namen stehen ohnehin vorn. */
.sw-eigen { border-color: var(--accent); }
.sw-marke {
  margin-left: 6px; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 999px; color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid var(--accent);
}
.sw-leer { color: var(--ink-3); font-size: 13.5px; margin: 6px 0 0; }

/* --- Mehrere Demos hochladen -------------------------------------------
   Je Datei eine Zeile mit eigenem Balken: bei fünf Uploads will man sehen,
   welcher gerade läuft und welcher abgelehnt wurde — ein einziger Balken
   sagt das nicht. */
.upload-bereit {
  outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: var(--radius);
}
.uploadliste { list-style: none; margin: 8px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 4px; }
.ul-zeile {
  display: grid; grid-template-columns: 1fr 120px auto; align-items: center; gap: 10px;
  font-size: 13px; padding: 3px 0;
}
.ul-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul-spur {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.ul-fuell { display: block; height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.ul-stand { font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ul-fertig .ul-fuell { background: var(--ok); }
.ul-fertig .ul-stand { color: var(--ok); }
.ul-fehler .ul-fuell { background: var(--crit); }
.ul-fehler .ul-stand { color: var(--crit); white-space: normal; }

/* === Melden und Vorgänge ================================================
   Die Kette aus der Oberfläche nach Zulip. Das Formular ist bewusst ein
   Formular und kein Fenster über der Seite: es soll auch ohne Skript
   vollständig bedienbar sein. */

.foot .wrap { display: flex; align-items: baseline; gap: 8px 22px; flex-wrap: wrap; }
.foot-weg { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-left: auto; }
.foot-weg a { color: var(--ink-3); text-decoration: none; }
.foot-weg a:hover { color: var(--ink); text-decoration: underline; }
.foot-melden { color: var(--ink-2) !important; }

.melden-form {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 620px; margin-top: 22px;
}

.md-art {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px 14px; margin: 0;
  display: flex; flex-direction: column; gap: 8px; background: var(--surface);
}
.md-art legend {
  font-size: 12px; font-family: var(--mono); color: var(--ink-3);
  letter-spacing: 0.04em; padding: 0 4px;
}
.md-radio { display: flex; align-items: baseline; gap: 9px; font-size: 14.5px; cursor: pointer; }
.md-radio span { color: var(--ink-2); }
.md-radio b { color: var(--ink); font-weight: 600; }

.md-feld { display: flex; flex-direction: column; gap: 6px; }
.md-label { font-size: 13px; font-weight: 600; }
.md-label .dim { font-weight: 400; }
.md-feld input[type="text"], .md-feld textarea {
  font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 8px 10px; width: 100%;
}
.md-feld textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.md-hinweis { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* Was mitgeschickt wird, steht sichtbar da. Ein Formular, das still Angaben
   anhängt, ist eines, dem man beim nächsten Mal weniger erzählt. */
.md-kontext {
  border-left: 2px solid var(--line-strong); padding: 4px 0 4px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.md-kontextliste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--mono); font-size: 12px;
}
.md-kontextliste li { display: flex; gap: 10px; }
.mk-was { color: var(--ink-3); min-width: 62px; }
.mk-wert { color: var(--ink-2); overflow-wrap: anywhere; }

.md-knoepfe { display: flex; gap: 10px; align-items: center; }

.seitenkopf { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.seitenkopf h1 { margin-right: auto; }

.vg-art {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 2px; margin-right: 7px;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
.vg-art-fehler { background: var(--crit-soft); color: var(--crit); border-color: transparent; }
.vg-art-wunsch { background: var(--accent-soft); color: var(--ink-2); border-color: transparent; }

.vg-stand {
  font-size: 12.5px; padding: 1.5px 8px; border-radius: 2px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.vg-neu { background: var(--accent-soft); color: var(--ink); }
.vg-pruefung { background: var(--warn-soft); color: var(--warn); }
.vg-rueckfrage { background: var(--warn-soft); color: var(--warn); }
.vg-umgesetzt { background: var(--ok-soft); color: var(--ok); }
.vg-gepusht { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.vg-abgelehnt { background: var(--surface-2); color: var(--ink-3); }