/* ============================================================
   Clubbase — Oberfläche
   Alles läuft über Tokens. Ein Theme setzt Werte, keine Regeln.
   Achsen: Vorlage · Akzent · Schrift · Dichte · Ecken · Schaltflächen
   ============================================================ */

/* ---------- Schriftpaarungen ----------
   Bewusst systemseitige Stapel: Das Paket lädt keine Schrift von einem
   fremden Server nach (Google Fonts sind in Deutschland ein Abmahnrisiko).
   Eine spätere Ausbaustufe kann lizenzierte Schriften lokal mitliefern. */
:root{
  --f-grotesk:"Segoe UI Variable Display","Segoe UI","SF Pro Display",system-ui,-apple-system,"Noto Sans",sans-serif;
  --f-humanist:"Segoe UI","Noto Sans","Helvetica Neue",system-ui,-apple-system,sans-serif;
  --f-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --f-system:system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;

  --font-head:var(--f-grotesk);
  --font-ui:var(--f-grotesk);
  --font-data:var(--f-mono);
  --head-weight:650;
  --head-track:-.01em;
}
:root[data-font="humanist"]{ --font-head:var(--f-humanist); --font-ui:var(--f-humanist); }
:root[data-font="serif"]{ --font-head:var(--f-serif); --font-ui:var(--f-humanist); --head-weight:600; --head-track:0; }
:root[data-font="mono"]{ --font-head:var(--f-mono); --font-ui:var(--f-grotesk); --head-weight:600; --head-track:.01em; }
:root[data-font="system"]{ --font-head:var(--f-system); --font-ui:var(--f-system); }

/* ---------- Dichte ---------- */
:root{ --pad:14px; --pad-y:9px; --gap:14px; --line:1.5; --fs:14px; --row:9px; }
:root[data-density="kompakt"]{ --pad:11px; --pad-y:6px; --gap:10px; --line:1.42; --fs:13.5px; --row:6px; }
:root[data-density="luftig"]{ --pad:18px; --pad-y:12px; --gap:18px; --line:1.62; --fs:14.5px; --row:12px; }

/* ---------- Ecken ---------- */
:root{ --r:5px; --r-lg:7px; --r-pill:99px; }
:root[data-corners="scharf"]{ --r:2px; --r-lg:3px; --r-pill:3px; }
:root[data-corners="rund"]{ --r:10px; --r-lg:14px; --r-pill:99px; }

/* ============================================================
   Vorlagen — je Vorlage ein Hell- und ein Dunkelsatz.
   Reihenfolge: hell als Grundlage, dunkel per Systemwahl,
   ausdrückliche Wahl gewinnt über beides.
   ============================================================ */

/* --- Signal: blau gebrochenes Graphit, warmer Signalton --- */
:root,:root[data-preset="signal"]{
  --bg:#EEF1F4; --panel:#FFF; --panel-2:#F6F8FA;
  --rail:#12161C; --rail-ink:#C7CED8; --rail-dim:#7A8698; --rail-line:#232B36;
  --line-c:#D8DEE6; --line-soft:#E6EBF0;
  --ink:#111820; --ink-2:#4A5666; --ink-3:#7A8698;
  --ok:#177245; --ok-bg:#E4F2EA; --warn:#8A5B00; --warn-bg:#FBF0DA;
  --bad:#A62430; --bad-bg:#FBE6E8; --info:#1F4FA8; --info-bg:#E5EDFB;
  --num-weight:600;
}
:root[data-preset="signal"][data-scheme="dark"],
:root[data-scheme="dark"]{
  --bg:#0C0F13; --panel:#141920; --panel-2:#191F27;
  --rail:#0A0D11; --rail-dim:#69748A; --rail-line:#1D242E;
  --line-c:#242C37; --line-soft:#1C232C;
  --ink:#E7EBF0; --ink-2:#A2ADBC; --ink-3:#6D7889;
  --ok:#4FBE7B; --ok-bg:#12271C; --warn:#D9A441; --warn-bg:#2A2212;
  --bad:#E8636F; --bad-bg:#2B151A; --info:#6FA0F5; --info-bg:#131E33;
}
@media (prefers-color-scheme:dark){
  :root:not([data-scheme="light"]),
  :root[data-preset="signal"]:not([data-scheme="light"]){
    --bg:#0C0F13; --panel:#141920; --panel-2:#191F27;
    --rail:#0A0D11; --rail-dim:#69748A; --rail-line:#1D242E;
    --line-c:#242C37; --line-soft:#1C232C;
    --ink:#E7EBF0; --ink-2:#A2ADBC; --ink-3:#6D7889;
    --ok:#4FBE7B; --ok-bg:#12271C; --warn:#D9A441; --warn-bg:#2A2212;
    --bad:#E8636F; --bad-bg:#2B151A; --info:#6FA0F5; --info-bg:#131E33;
  }
}

/* --- Klar: heller, leicht warmer Neutralton --- */
:root[data-preset="klar"]{
  --bg:#F4F5F7; --panel:#FFF; --panel-2:#F8F9FB;
  --rail:#1B2430; --rail-ink:#D3DAE3; --rail-dim:#8A96A6; --rail-line:#2A3644;
  --line-c:#DFE3E9; --line-soft:#ECEFF3;
  --ink:#1A2029; --ink-2:#4E5866; --ink-3:#828D9C;
  --ok:#1B6B45; --ok-bg:#E6F3EC; --warn:#8A6100; --warn-bg:#FCF2DC;
  --bad:#A32833; --bad-bg:#FBE8EA; --info:#1E5BA8; --info-bg:#E7EFFA;
  --num-weight:550;
}
:root[data-preset="klar"][data-scheme="dark"]{
  --bg:#12161B; --panel:#1A1F26; --panel-2:#20262E;
  --rail:#0E1217; --rail-dim:#78849A; --rail-line:#242C36;
  --line-c:#2A323C; --line-soft:#222932;
  --ink:#E9ECF1; --ink-2:#A8B2BF; --ink-3:#75808E;
  --ok:#5BC489; --ok-bg:#152A1F; --warn:#DCA84C; --warn-bg:#2B2415;
  --bad:#E96C77; --bad-bg:#2C171B; --info:#78A6F2; --info-bg:#152036;
}
@media (prefers-color-scheme:dark){
  :root[data-preset="klar"]:not([data-scheme="light"]){
    --bg:#12161B; --panel:#1A1F26; --panel-2:#20262E;
    --rail:#0E1217; --rail-dim:#78849A; --rail-line:#242C36;
    --line-c:#2A323C; --line-soft:#222932;
    --ink:#E9ECF1; --ink-2:#A8B2BF; --ink-3:#75808E;
    --ok:#5BC489; --ok-bg:#152A1F; --warn:#DCA84C; --warn-bg:#2B2415;
    --bad:#E96C77; --bad-bg:#2C171B; --info:#78A6F2; --info-bg:#152036;
  }
}

/* --- Broadcast: sehr dunkel, hoher Kontrast. Bewusst einfarbig. --- */
:root[data-preset="broadcast"],
:root[data-preset="broadcast"][data-scheme="light"],
:root[data-preset="broadcast"][data-scheme="dark"]{
  --bg:#05070A; --panel:#0D1116; --panel-2:#141A21;
  --rail:#000205; --rail-ink:#D9E2EC; --rail-dim:#6B7A8C; --rail-line:#1A222C;
  --line-c:#1E2833; --line-soft:#151D26;
  --ink:#F2F6FA; --ink-2:#AFBCC9; --ink-3:#728395;
  --ok:#39D98A; --ok-bg:#082418; --warn:#F0B429; --warn-bg:#2A2008;
  --bad:#FF6B6B; --bad-bg:#2B1113; --info:#5AA9FF; --info-bg:#0A1B30;
  --num-weight:700;
}
:root[data-preset="broadcast"] .kpi-v{ font-size:32px; }

/* --- Arena: Statistikseiten-Optik (ewgf.gg als Vorbild) -----------------
   Sehr dunkel, kuehler Akzent, Zahlen gross und in Monospace. Ueberschriften
   gesperrt und in Versalien — das ersetzt die kantige Display-Schrift, die
   solche Seiten benutzen und die hier nicht mitgeliefert werden kann (kein
   Nachladen von fremden Servern, keine ungeklaerte Lizenz).

   Der Rahmen bleibt unveraendert: dieselbe Bereichsnavigation, dieselben
   Bausteine, dieselben Klassen. Ein Preset darf die Anwendung anders
   AUSSEHEN lassen, nicht anders FUNKTIONIEREN. */
:root[data-preset="arena"],
:root[data-preset="arena"][data-scheme="light"],
:root[data-preset="arena"][data-scheme="dark"]{
  --bg:#07090D; --panel:#0F131A; --panel-2:#151B24;
  --rail:#05070A; --rail-ink:#DCE4EF; --rail-dim:#68758A; --rail-line:#1A212C;
  --line-c:#1F2733; --line-soft:#161D26;
  --ink:#EEF2F8; --ink-2:#A5B1C2; --ink-3:#6C7A8D;
  --ok:#3FCF8E; --ok-bg:#0A2419; --warn:#F0B429; --warn-bg:#2A2008;
  --bad:#FF6B7A; --bad-bg:#2C1218; --info:#4C8DFF; --info-bg:#0B1B33;
  --num-weight:700;
}
/* Ueberschriften: gesperrt und in Versalien statt einer Display-Schrift. */
:root[data-preset="arena"] .panel-h h2,
:root[data-preset="arena"] .chart-h,
:root[data-preset="arena"] .tk-h3{
  text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;font-weight:700;
}
:root[data-preset="arena"] .topbar h1{letter-spacing:.02em}
/* Zahlen sind der Inhalt dieser Seiten, nicht Beiwerk. */
:root[data-preset="arena"] .kpi-v{font-size:34px;letter-spacing:-.02em}
:root[data-preset="arena"] .chart-single b{font-size:34px}
:root[data-preset="arena"] .chart-legend b,
:root[data-preset="arena"] .chart-legend em{font-family:var(--font-data)}
/* Panels ohne Rundung, mit einer betonten Oberkante — die Kante ersetzt den
   Schatten, den ein sehr dunkles Layout ohnehin verschluckt. */
:root[data-preset="arena"] .panel{border-top:2px solid var(--line-c)}
:root[data-preset="arena"] .chart-panel{border-top-color:color-mix(in oklab,var(--accent) 55%,transparent)}
/* Der aktive Menuepunkt bekommt eine Kante statt einer Flaeche. */
:root[data-preset="arena"] .nav a[aria-current="page"]{
  background:transparent;box-shadow:inset 2px 0 0 var(--accent);border-radius:0;
}


/* --- Presse: papiernah, gedeckt --- */
:root[data-preset="presse"]{
  --bg:#F2F0EC; --panel:#FBFAF8; --panel-2:#F5F3EF;
  --rail:#1F1C18; --rail-ink:#DCD6CC; --rail-dim:#968E82; --rail-line:#332E28;
  --line-c:#DED8CF; --line-soft:#E9E4DC;
  --ink:#1C1A17; --ink-2:#4F4A43; --ink-3:#867F75;
  --ok:#2C5F3E; --ok-bg:#E6EEE7; --warn:#7A5714; --warn-bg:#F5EBD8;
  --bad:#8A3324; --bad-bg:#F4E3DF; --info:#2B4B7A; --info-bg:#E4EAF2;
  --num-weight:550;
}
:root[data-preset="presse"][data-scheme="dark"]{
  --bg:#14120F; --panel:#1C1916; --panel-2:#232019;
  --rail:#0E0C0A; --rail-dim:#8A8175; --rail-line:#282420;
  --line-c:#2E2924; --line-soft:#24201B;
  --ink:#EDE8E0; --ink-2:#B0A89C; --ink-3:#807769;
  --ok:#6FB68A; --ok-bg:#16241A; --warn:#D2A34F; --warn-bg:#2A2214;
  --bad:#D9705C; --bad-bg:#2B1A16; --info:#7DA0D4; --info-bg:#182234;
}
@media (prefers-color-scheme:dark){
  :root[data-preset="presse"]:not([data-scheme="light"]){
    --bg:#14120F; --panel:#1C1916; --panel-2:#232019;
    --rail:#0E0C0A; --rail-dim:#8A8175; --rail-line:#282420;
    --line-c:#2E2924; --line-soft:#24201B;
    --ink:#EDE8E0; --ink-2:#B0A89C; --ink-3:#807769;
    --ok:#6FB68A; --ok-bg:#16241A; --warn:#D2A34F; --warn-bg:#2A2214;
    --bad:#D9705C; --bad-bg:#2B1A16; --info:#7DA0D4; --info-bg:#182234;
  }
}
:root[data-preset="presse"] h1,
:root[data-preset="presse"] h2{ letter-spacing:-.015em; }

/* --- Neutral: reines Grau, keine Handschrift --- */
:root[data-preset="neutral"]{
  --bg:#F1F2F3; --panel:#FFF; --panel-2:#F7F8F8;
  --rail:#22262A; --rail-ink:#D2D6DA; --rail-dim:#8B9298; --rail-line:#31363B;
  --line-c:#DCDEE1; --line-soft:#EAECEE;
  --ink:#16191C; --ink-2:#4C5257; --ink-3:#7F868C;
  --ok:#1E6B42; --ok-bg:#E8F1EC; --warn:#7E6011; --warn-bg:#F7F0DE;
  --bad:#9E2A33; --bad-bg:#F8E9EA; --info:#28527A; --info-bg:#E9EEF3;
  --num-weight:550;
}
:root[data-preset="neutral"][data-scheme="dark"]{
  --bg:#111315; --panel:#191C1F; --panel-2:#1F2326;
  --rail:#0D0F11; --rail-dim:#7C848B; --rail-line:#262A2E;
  --line-c:#2B2F33; --line-soft:#22262A;
  --ink:#E8EAEC; --ink-2:#A6ADB3; --ink-3:#767D84;
  --ok:#5CBE87; --ok-bg:#16261D; --warn:#D3A651; --warn-bg:#282213;
  --bad:#E06C74; --bad-bg:#2A181A; --info:#7BA3CE; --info-bg:#151F2A;
}
@media (prefers-color-scheme:dark){
  :root[data-preset="neutral"]:not([data-scheme="light"]){
    --bg:#111315; --panel:#191C1F; --panel-2:#1F2326;
    --rail:#0D0F11; --rail-dim:#7C848B; --rail-line:#262A2E;
    --line-c:#2B2F33; --line-soft:#22262A;
    --ink:#E8EAEC; --ink-2:#A6ADB3; --ink-3:#767D84;
    --ok:#5CBE87; --ok-bg:#16261D; --warn:#D3A651; --warn-bg:#282213;
    --bad:#E06C74; --bad-bg:#2A181A; --info:#7BA3CE; --info-bg:#151F2A;
  }
}

/* ============================================================
   Grundlagen
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font-ui);
  font-size:var(--fs);line-height:var(--line);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:var(--head-weight);
  letter-spacing:var(--head-track);text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- App-Rahmen ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100dvh}
/* Die Leiste selbst scrollt NICHT — nur ihre Mitte.
   Vorher lief der ganze Aufbau in einem Scrollbereich: Bei langer Navigation
   wanderten Logo und Fusszeile mit nach oben weg, und wer sich abmelden oder
   sein Konto sehen wollte, musste erst bis ans Ende scrollen. Jetzt stehen
   Marke oben und Fusszeile unten fest, dazwischen scrollt die Liste. */
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;
  border-right:1px solid var(--rail-line);position:sticky;top:0;height:100dvh;overflow:hidden}
.rail>.brand{flex:none}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px}
.brand-mark{width:32px;height:32px;border-radius:var(--r);background:var(--accent);color:#fff;
  display:grid;place-items:center;flex:none;font-family:var(--font-data);font-size:11px;font-weight:700;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-txt{min-width:0}
.brand-name{font-size:13.5px;font-weight:650;color:#fff;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-sub{font-family:var(--font-data);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rail-dim);margin-top:2px}
/* Logo über die volle Breite, ohne Text */
.brand--full{padding:14px 14px 10px;justify-content:center}
.brand-logo-full{width:100%;max-height:96px;object-fit:contain;display:block}
.brand-credit{font-size:10px;line-height:1.4;color:var(--rail-dim);text-align:center;
  padding-top:8px;border-top:1px solid var(--rail-line);margin-top:2px}
.nav{padding:6px 10px;display:flex;flex-direction:column;gap:1px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--rail-line) transparent}
/* Dezenter Balken statt des Systemstandards, der auf dunklem Grund als
   heller Klotz sitzt. Nur sichtbar, wenn es etwas zu scrollen gibt. */
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:var(--rail-line);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
.nav:hover::-webkit-scrollbar-thumb{background:var(--rail-dim);background-clip:content-box}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r);
  color:var(--rail-dim);font-size:13.5px;transition:background .12s,color .12s}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--rail-ink)}
.nav a[aria-current="page"]{background:rgba(255,255,255,.08);color:#fff}
.nav a[aria-current="page"] svg{color:var(--accent)}
.nav svg{width:17px;height:17px;flex:none}
.nav-sep{font-family:var(--font-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--rail-dim);padding:16px 8px 6px}
/* Untergruppe INNERHALB eines aufgeklappten Bereichs (z. B. Verwaltung ·
   Zugang). Leiser als .nav-sep, weil sie eine Ebene tiefer sitzt. */
.nav-sub{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--rail-dim);
  opacity:.75;padding:10px 8px 3px 26px}

/* --- Bereiche in der Seitenleiste (Hub-Navigation) --------------------
   Der Bereich, in dem man arbeitet, klappt auf; die anderen bleiben eine
   Zeile hoch. Dadurch bleibt der Ruhezustand der Leiste konstant, egal wie
   viele Seiten dazukommen — der eigentliche Zweck des Umbaus. */
.nav-area{display:flex;flex-direction:column}
.nav-area-head{display:flex;align-items:center;gap:2px}
.nav-area-link{flex:1;min-width:0}
.nav-area-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-area-toggle{flex:none;width:26px;height:28px;display:grid;place-items:center;border-radius:var(--r);
  color:var(--rail-dim);transition:background .12s,color .12s}
.nav-area-toggle:hover{background:rgba(255,255,255,.05);color:var(--rail-ink)}
.nav-area-toggle svg{width:15px;height:15px;transition:transform .16s}
.nav-area.is-open>.nav-area-head>.nav-area-toggle svg{transform:rotate(90deg)}
.nav-area.is-open>.nav-area-head>.nav-area-link{color:var(--rail-ink)}
.nav-area-body{display:none;flex-direction:column;gap:1px;
  margin:2px 0 6px 17px;padding-left:9px;border-left:1px solid var(--rail-line)}
.nav-area.is-open>.nav-area-body{display:flex}
.nav-area-body a{font-size:13px;padding:6px 8px}

/* Anheften: der Knopf sitzt im Link und erscheint erst beim Überfahren.
   app.js nimmt das `hidden` weg — ohne JavaScript gibt es kein Anheften und
   damit auch keinen Knopf, der nichts tut. */
.nav a{position:relative}
.nav-pin{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;display:grid;place-items:center;border-radius:6px;
  color:var(--rail-dim);opacity:0;transition:opacity .12s,color .12s,background .12s}
.nav-pin svg{width:13px;height:13px}
.nav a:hover .nav-pin,.nav-pin:focus-visible{opacity:1}
.nav-pin:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-pin.is-on{opacity:1;color:var(--accent)}
.nav-pinned a,.nav-recent a{font-size:13px}
.nav-recent a{color:var(--rail-dim);opacity:.85}

.rail-meta{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rail-dim);
  padding:5px 2px;border-radius:var(--r);transition:color .12s}
.rail-meta:hover{color:var(--rail-ink)}
.rail-meta svg{width:15px;height:15px;flex:none}
.rail-meta[aria-current="page"]{color:#fff}
.rail-meta[aria-current="page"] svg{color:var(--accent)}
.rail-foot{flex:none;padding:12px;border-top:1px solid var(--rail-line);display:flex;flex-direction:column;gap:9px}
.me{display:flex;align-items:center;gap:9px;min-width:0}
.me .av{background:#2A3340;color:#DDE3EA;border-color:transparent}
.me-txt{min-width:0}
.me-name{font-size:12.5px;color:var(--rail-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-role{font-family:var(--font-data);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--rail-dim)}
.logout .btn-2{width:100%;background:transparent;border-color:var(--rail-line);color:var(--rail-dim)}
.logout .btn-2:hover{color:#fff;border-color:var(--rail-dim)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:0 20px;height:53px;flex:none;
  border-bottom:1px solid var(--line-c);background:var(--panel);position:sticky;top:0;z-index:10}
.topbar h1{font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-title{min-width:0;display:flex;flex-direction:column;justify-content:center}
/* Brotkrume über dem Titel: Bereich / Gruppe / Seite. Sie ersetzt den Titel
   nicht, sie sagt, wo er steht — bis zum Umbau gab es vier Ebenen und keinen
   Hinweis, auf welcher man gerade ist. */
.crumbs{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3);
  line-height:1.2;margin-bottom:1px;overflow:hidden;white-space:nowrap}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs>span{overflow:hidden;text-overflow:ellipsis}
.crumb-sep{opacity:.5}
.topbar-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
/* Das eigene Bild in der Kopfzeile — am Rechner überflüssig (es steht im Fuß
   der Leiste), am Handy der einzige Weg zum Profil, seit die fünf Plätze der
   Tableiste den Bereichen gehören. */
.topbar-me{display:none;flex:none}
.topbar-me .tab-av{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;
  place-items:center;background:#2A3340;color:#DDE3EA;font-size:10px;font-weight:700}
.topbar-me .tab-av img{width:100%;height:100%;object-fit:cover;display:block}
.burger{display:none;width:32px;height:32px;place-items:center;border-radius:var(--r);color:var(--ink-2)}
.burger svg{width:20px;height:20px}
.scroll{padding:20px;display:flex;flex-direction:column;gap:var(--gap);flex:1}
.tabbar{display:none}

/* --- Bereichsseite (/bereich/…) --------------------------------------
   Die Kacheln tragen eine Zeile Erklärung. Das ist der Grund, warum diese
   Seite mehr kann als eine Seitenleiste: „Auswertung" allein sagt nicht,
   wofür sie gut ist — und wer das nicht weiß, sucht auch nicht danach. */
.hub-lead{color:var(--ink-2);max-width:70ch;margin:-4px 0 4px}
.hub-h{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  font-weight:700;margin:10px 0 -4px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.hub-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line-c);
  transition:border-color .12s,transform .12s,background .12s}
.hub-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.hub-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--accent)}
.hub-ic svg{width:18px;height:18px}
.hub-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.hub-txt b{font-size:14.5px;color:var(--ink)}
.hub-txt>span{font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* Kacheln ohne Symbol bekommen einen schmalen Akzentstreifen statt einer
   leeren Symbolfläche — sonst stünden Kacheln mit und ohne Symbol nicht auf
   derselben Kante. */
.hub-card--plain{border-left:3px solid color-mix(in oklab,var(--accent) 45%,transparent);
  padding-left:12px}
.hub-card--muted{background:transparent;border-style:dashed}
.hub-card--muted .hub-txt b{color:var(--ink-2);font-weight:600}

/* Reiter innerhalb eines Bereichs */
.subnav{display:flex;flex-direction:column;gap:7px;border-bottom:1px solid var(--line-c);padding-bottom:12px;margin-bottom:14px}
/* Unterbereichszeile der Verwaltung: sechs Namen statt 25 Reiter nebeneinander.
   Ohne JavaScript sind es Sprungmarken und alle Gruppen stehen offen — die
   Zeile ist dann eine Übersicht, kein toter Schalter. */
.subnav-areas{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:2px}
.subnav-areas a{padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--ink-3);
  border:1px solid var(--line-c);border-radius:999px;background:var(--panel)}
.subnav-areas a:hover{color:var(--ink);border-color:var(--ink-3)}
.subnav-areas a[aria-current="true"]{color:#fff;background:var(--accent);border-color:var(--accent)}
/* Mit JavaScript zeigt die Leiste nur den gewählten Unterbereich; dann ist
   die Zeilenüberschrift daneben doppelt gemoppelt. */
.subnav--areas.is-tabbed .subnav-label{display:none}
.subnav--areas.is-tabbed .subnav-group[hidden]{display:none}
.subnav-group{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.subnav-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700;
  width:118px;flex:none}
.subnav a{padding:6px 12px;font-size:13.5px;color:var(--ink-2);border-radius:8px;transition:background .12s,color .12s}
.subnav a:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 7%,transparent)}
.subnav a[aria-current="page"]{color:#fff;background:var(--accent);font-weight:600}
@media (max-width:640px){ .subnav-label{width:100%;margin-bottom:-2px} }

/* ---------- Bausteine ---------- */
.panel{background:var(--panel);border:1px solid var(--line-c);border-radius:var(--r);overflow:hidden}
.panel-h{display:flex;align-items:center;gap:10px;padding:11px var(--pad);border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-h h2,.panel-h h3{font-size:13.5px}
.panel-h .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel-b{padding:var(--pad);display:flex;flex-direction:column;gap:12px}
.lbl{font-family:var(--font-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.grid{display:grid;gap:var(--gap)}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g-2-1{grid-template-columns:1.6fr 1fr}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.mono{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:12.5px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.kpi{padding:13px var(--pad)}
.kpi .lbl{display:block;margin-bottom:7px}
.kpi-v{font-family:var(--font-data);font-size:25px;font-weight:var(--num-weight);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.kpi-m{margin-top:6px;font-size:12px;color:var(--ink-3)}

.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px var(--pad);font-family:var(--font-data);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  border-bottom:1px solid var(--line-soft);white-space:nowrap}
td{padding:var(--row) var(--pad);border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
.num{font-family:var(--font-data);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.person{display:flex;align-items:center;gap:9px;min-width:0}
.av{width:28px;height:28px;border-radius:var(--r);flex:none;display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-data);font-size:10.5px;font-weight:600;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-soft)}
.av img{width:100%;height:100%;object-fit:cover}
/* Größere Variante für Spielbilder: Charaktere, Rangabzeichen (nicht beschneiden) */
.av-lg{width:48px;height:48px;font-size:13px}
.av-lg img{object-fit:contain;padding:2px}
.person-n{display:block;font-weight:550;line-height:1.3}
.person-s{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.3}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:550;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.mute{background:var(--panel-2);color:var(--ink-3);border:1px solid var(--line-soft)}
.pill img{width:13px;height:13px;object-fit:contain;border-radius:2px}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.form-curve{display:flex;gap:3px}
.form-curve b{width:17px;height:19px;border-radius:2px;display:grid;place-items:center;
  font-family:var(--font-data);font-size:10px;font-weight:700}
.form-curve b.s{background:var(--ok-bg);color:var(--ok)}
.form-curve b.n{background:var(--bad-bg);color:var(--bad)}
.form-curve b.u{background:var(--panel-2);color:var(--ink-3)}

/* ---------- Schaltflächen ---------- */
.btn{padding:var(--pad-y) 13px;border-radius:var(--r);background:var(--accent);color:#fff;
  font-size:13px;font-weight:550;display:inline-block;white-space:nowrap;border:1px solid var(--accent);
  transition:filter .13s,background .13s,color .13s,border-color .13s,transform .06s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
:root[data-buttons="umrandet"] .btn{background:transparent;color:var(--accent)}
:root[data-buttons="umrandet"] .btn:hover{background:color-mix(in oklab,var(--accent) 12%,transparent);filter:none}
:root[data-buttons="dezent"] .btn{background:color-mix(in oklab,var(--accent) 14%,transparent);
  color:var(--accent);border-color:transparent}
:root[data-buttons="dezent"] .btn:hover{background:color-mix(in oklab,var(--accent) 22%,transparent);filter:none}
.btn-2{padding:var(--pad-y) 13px;border-radius:var(--r);border:1px solid var(--line-c);
  font-size:13px;color:var(--ink-2);background:var(--panel);display:inline-block;white-space:nowrap;
  transition:border-color .13s,color .13s,background .13s,transform .06s}
.btn-2:hover{border-color:var(--ink-3);color:var(--ink)}
.btn-2:active{transform:translateY(1px)}
.btn.busy,.btn-2.busy{opacity:.6;pointer-events:none}
.btn-2.active{border-color:var(--accent);color:var(--accent)}
.btn-danger{color:var(--bad);border-color:var(--bad-bg)}
.btn-danger:hover{border-color:var(--bad);color:var(--bad)}
/* Dezente Sekundär-Variante (gleiche Optik wie .btn-2, im gemeinsamen System). */
.btn.ghost{padding:var(--pad-y) 13px;border-radius:var(--r);border:1px solid var(--line-c);
  font-size:13px;color:var(--ink-2);background:var(--panel);transition:border-color .13s,color .13s,background .13s,transform .06s}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink);background:var(--panel-2)}
.btn.ghost:active{transform:translateY(1px)}
.sm{padding:4px 9px;font-size:12px}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field > label{font-family:var(--font-data);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
input[type=datetime-local],input[type=url],input[type=file],select,textarea{
  width:100%;padding:7px 10px;border:1px solid var(--line-c);border-radius:var(--r);
  background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px}
textarea{resize:vertical;min-height:80px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel)}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;cursor:pointer}
.check input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none}
.check-txt small{display:block;color:var(--ink-3);font-size:12px;margin-top:1px}

/* Passwortfeld mit Ein-/Ausblenden */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--ink-3);font-size:11.5px;font-weight:600;
  letter-spacing:.02em;padding:5px 8px;border-radius:var(--r);cursor:pointer;
  transition:color .12s,background .12s}
.pw-toggle:hover{color:var(--accent);background:var(--panel-2)}
.pw-hint{font-size:12px;margin-top:5px;min-height:15px;color:var(--ink-3)}
.pw-hint.ok{color:var(--ok)}
.pw-hint.bad{color:var(--bad)}

/* ---------- Meldungen ---------- */
.flash{padding:11px var(--pad);border-radius:var(--r);font-size:13px;border:1px solid transparent}
.flash.ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in oklab,var(--ok) 25%,transparent)}
.flash.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in oklab,var(--warn) 25%,transparent)}
.flash.bad{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in oklab,var(--bad) 25%,transparent)}
.note{display:flex;gap:11px;padding:12px var(--pad);border-radius:var(--r);background:var(--info-bg);
  border:1px solid color-mix(in oklab,var(--info) 22%,transparent);font-size:12.5px;color:var(--ink-2);line-height:1.55}
.note svg{width:16px;height:16px;color:var(--info);flex:none;margin-top:1px}
.note b{color:var(--ink)}
/* Warnton wie bei .flash.warn — die Klasse färbt Fläche und Icon, damit die View keinen Inline-Stil braucht. */
.note.warn{background:var(--warn-bg);border-color:color-mix(in oklab,var(--warn) 25%,transparent)}
.note.warn svg{color:var(--warn)}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}

/* ---------- Modul-Karten ---------- */
.mods{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
.mod{background:var(--panel);border:1px solid var(--line-c);border-radius:var(--r);padding:16px;
  display:flex;flex-direction:column;gap:11px}
.mod.on{border-color:var(--accent)}
.mod h3{font-size:14.5px}
.mod p{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.mod-foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:9px}
.price{font-family:var(--font-data);font-size:10.5px;color:var(--ink-3)}
.switch{margin-left:auto;display:inline-flex;align-items:center;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:21px;border-radius:99px;background:var(--line-c);position:relative;transition:background .16s;display:block}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .16s}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{transform:translateX(17px)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Auswahlkarten (Themes, Vorlagen) ---------- */
.choice{display:block;border:1px solid var(--line-c);border-radius:var(--r);padding:11px 13px;cursor:pointer;position:relative}
.choice:has(input:checked){border-color:var(--accent);background:color-mix(in oklab,var(--accent) 6%,transparent)}
.choice input{position:absolute;opacity:0}
.choice b{display:block;font-size:13.5px}
.choice small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px;line-height:1.5}
.swatch-row{display:flex;gap:4px;margin-top:8px}
.swatch-row i{width:16px;height:16px;border-radius:3px;display:block;border:1px solid rgba(128,128,128,.25)}

/* ---------- Medien (größere Darstellung) ---------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;padding:14px;max-height:60vh;overflow-y:auto}
.media-grid.lg{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:0;max-height:none}
.media-cell{padding:0;border:2px solid transparent;border-radius:var(--r);overflow:hidden;background:var(--panel-2);aspect-ratio:1}
.media-cell img{width:100%;height:100%;object-fit:contain;display:block}
.media-cell:hover{border-color:var(--ink-3)}
.media-cell.on{border-color:var(--accent)}
.media-item{position:relative;margin:0;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.media-select{position:absolute;top:6px;left:6px;z-index:2;background:rgba(8,10,14,.55);border-radius:5px;padding:3px;display:grid;place-items:center}
.media-select input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;margin:0}
.media-item:has(input:checked){outline:2px solid var(--accent);outline-offset:-2px}
.media-bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 14px 10px;padding:9px 12px;
  background:var(--panel-2);border:1px solid var(--accent);border-radius:var(--r)}
.media-bulkbar .spacer{flex:1}
.media-bulkbar select{width:auto;min-width:120px}
.media-item img{width:100%;aspect-ratio:1;object-fit:contain;display:block;background:var(--panel);padding:6px}
.media-item figcaption{padding:9px 11px}
.media-field{gap:7px}
.media-pick{display:flex;align-items:center;gap:12px}
.media-thumb{width:84px;height:84px;flex:none;border-radius:var(--r);border:1px solid var(--line-c);
  background:var(--panel-2);display:grid;place-items:center;overflow:hidden;text-align:center;padding:4px}
.media-thumb img{width:100%;height:100%;object-fit:contain}
.media-dialog{border:1px solid var(--line-c);border-radius:var(--r-lg);padding:0;background:var(--panel);
  color:var(--ink);width:min(680px,94vw);max-width:94vw}
.media-dialog::backdrop{background:rgba(0,0,0,.55)}
.media-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line-soft)}

/* ---------- Vorschau im Erscheinungsbild ---------- */
.preview{border:1px solid var(--line-c);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.preview-inner{padding:14px;display:flex;flex-direction:column;gap:10px}
/* Anpassen-Seite: getabter Editor + feste Vorschau */
.ap-grid{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:16px;align-items:start}
.ap-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
/* Ein Satz je Reiter, zwischen Reiterzeile und erster Karte. Er steht im
   Textfluss und nicht in der Karte, weil er den GANZEN Reiter beschreibt —
   in der ersten Karte gelesen wirkte er wie deren Untertitel. */
.ap-lead{margin:0 0 12px;max-width:70ch;line-height:1.5}
.ap-tab{padding:7px 14px;border:1px solid var(--line-c);border-radius:999px;background:var(--panel);color:var(--ink-2);
  cursor:pointer;font-size:13px;font-weight:600;transition:background .12s,border-color .12s,color .12s}
.ap-tab:hover{border-color:var(--ink-3)}
.ap-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ap-preview{position:sticky;top:12px}
.ap-color{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft)}
.ap-color:first-child{border-top:0;padding-top:0}
.ap-color input[type="color"]{width:44px;height:34px;padding:2px;border:1px solid var(--line-c);border-radius:8px;background:var(--panel);cursor:pointer}
@media (max-width:900px){ .ap-grid{grid-template-columns:1fr} .ap-preview{position:static} }

/* ---------- Login, Installer, Erstanmeldung ---------- */
body.plain{display:grid;place-items:center;min-height:100dvh;padding:20px}
.card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line-c);
  border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:16px}
.card.wide{max-width:760px}
.card-head{display:flex;align-items:center;gap:11px}
.card-head .brand-mark{width:40px;height:40px;font-size:12px}
/* Logo-Variante des Markenzeichens: kein Akzent-Hintergrund, Logo füllt */
.brand-mark--logo{background:transparent!important;padding:0}
.brand-mark--logo img{width:100%;height:100%;object-fit:contain}
.brand-credit-inline{font-size:12px;font-weight:400;color:var(--ink-3);white-space:nowrap}
.card h1{font-size:19px}
.card .sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.check-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.check-row:last-child{border-bottom:0}
.check-row .st{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.check-row .st.y{background:var(--ok-bg);color:var(--ok)}
.check-row .st.n{background:var(--bad-bg);color:var(--bad)}
.check-row small{display:block;color:var(--ink-3);font-size:11.5px}
.codeblock{font-family:var(--font-data);font-size:12px;background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:10px 12px;overflow-x:auto;white-space:pre;color:var(--ink-2)}
.keyout{font-family:var(--font-data);font-size:12.5px;background:var(--ok-bg);color:var(--ok);
  padding:10px 12px;border-radius:var(--r);word-break:break-all}
.copy-row{display:flex;gap:8px;align-items:stretch}
.copy-row .keyout{flex:1;min-width:0}
.copybtn{flex:none;align-self:stretch;display:inline-flex;align-items:center;white-space:nowrap;
  border:1px solid var(--line-c);background:var(--panel);color:var(--ink);font-weight:600;
  font-size:12.5px;padding:0 12px;border-radius:var(--r);cursor:pointer;
  transition:border-color .13s,color .13s,background .13s}
.copybtn:hover{border-color:var(--accent);color:var(--accent)}
.copybtn.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}

/* ---------- Onboarding ---------- */
.steps{display:flex;flex-direction:column;gap:2px}
.step-row{display:flex;align-items:center;gap:11px;padding:10px var(--pad);border-bottom:1px solid var(--line-soft)}
.step-row:last-child{border-bottom:0}
.step-row .mark{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:var(--panel-2);color:var(--ink-3);border:1px solid var(--line-c)}
.step-row.done .mark{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.step-row .step-txt{min-width:0;flex:1}
.step-row .step-txt b{font-weight:550;font-size:13.5px}
.step-row.done .step-txt b{color:var(--ink-3);text-decoration:line-through}
.step-row .step-txt small{display:block;color:var(--ink-3);font-size:12px}
.bar{display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--line-soft)}
.bar i{display:block;height:100%;background:var(--accent)}

/* ---------- Spiele als große Karten (Steam-Bibliothek-Optik) ---------- */
.game-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.game-card{position:relative;display:flex;flex-direction:column;aspect-ratio:9/16;
  border-radius:var(--r-lg);overflow:hidden;color:#fff;border:1px solid var(--line-c);
  background:#11151b var(--art,none) center/cover no-repeat;transition:transform .14s,box-shadow .14s}
.game-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -18px rgba(0,0,0,.62)}
/* Kopf: Farbfläche in der Spielfarbe mit kleinem Logo */
.game-card-head{flex:none;min-height:66px;display:flex;align-items:center;padding:12px 16px;
  background:var(--gc);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.game-card-logo{height:40px;max-width:72%;object-fit:contain;object-position:left center;filter:var(--lf,none)}
.game-card-mark{font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:.02em;color:#fff}
/* Körper: unten über dem Bannermotiv */
.game-card-body{margin-top:auto;padding:18px 18px 18px;
  background:linear-gradient(180deg,transparent,rgba(8,10,14,.42) 45%,rgba(8,10,14,.9))}
.game-card-name{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1.12;text-shadow:0 1px 5px rgba(0,0,0,.65)}
.game-card-genre{font-size:13px;opacity:.85;margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.game-card-stats{display:flex;gap:12px;margin-top:9px;font-family:var(--font-data);font-size:11px;opacity:.9}
.game-card-stats span{background:rgba(255,255,255,.14);padding:2px 8px;border-radius:99px}
.team-card{min-height:186px}
.game-card.is-off{opacity:.62}
.team-mono{font-family:var(--font-head);font-weight:800;font-size:34px;letter-spacing:.02em;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ---------- Spiele-Übersicht (Mitglieder-Detailseite) ---------- */
.pill.sm{padding:1px 6px;font-size:10.5px}

.go-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;color:#fff;
  background-color:var(--gc);background-size:cover;background-position:center;
  border:1px solid var(--line-c);display:flex;align-items:center;gap:18px;
  padding:22px 24px;min-height:132px}
.go-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,14,.25),rgba(8,10,14,.85));z-index:0}
.go-hero > *{position:relative;z-index:1}
.go-hero-logo{max-height:88px;max-width:150px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.go-hero-txt h2{font-family:var(--font-head);font-size:26px;line-height:1.1;text-shadow:0 1px 5px rgba(0,0,0,.6);margin:0}
.go-hero-genre{font-size:13px;opacity:.85;margin-top:3px}
.go-hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:13px}
.go-hero-meta b{font-family:var(--font-head);font-size:16px}
.go-record{display:inline-flex;gap:5px}

.go-players,.go-results,.go-teams,.go-ladder{display:flex;flex-direction:column}
.go-player,.go-result,.go-team{display:flex;align-items:center;gap:11px;padding:9px var(--pad);
  border-bottom:1px solid var(--line-soft);color:var(--ink)}
.go-player:last-child,.go-result:last-child,.go-team:last-child{border-bottom:0}
.go-player:hover,.go-result:hover,.go-team:hover{background:var(--panel-2)}
.go-player .av{width:34px;height:34px}
.go-player-txt,.go-result-txt,.go-team-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.go-player-name,.go-team-name{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.go-player-ign{font-size:12px;color:var(--ink-3)}
.go-rank{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;white-space:nowrap;color:var(--rc);
  background:color-mix(in oklab,var(--rc) 15%,transparent);
  border:1px solid color-mix(in oklab,var(--rc) 35%,transparent)}
.go-rank img{width:24px;height:24px;object-fit:contain}

.go-result-score{font-family:var(--font-data);font-weight:700;min-width:58px;justify-content:center}
.go-result-opp{font-weight:600;font-size:14px}
.go-result-date{white-space:nowrap;font-family:var(--font-data)}

.go-team-rec{font-family:var(--font-data);font-weight:700;white-space:nowrap}
.go-team-rec .ok{color:var(--ok)}
.go-team-rec .bad{color:var(--bad)}

.go-chips{display:flex;flex-wrap:wrap;gap:8px}
.go-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-pill);
  font-size:12.5px;background:var(--panel-2);border:1px solid var(--line-soft);border-left:3px solid var(--cc)}
.go-chip{font-size:13px;padding:5px 10px}
.go-chip img{width:26px;height:26px;object-fit:contain;border-radius:4px}
.go-chip b{font-family:var(--font-data);color:var(--ink-3)}

.go-rung{display:flex;align-items:center;gap:10px;padding:7px var(--pad);border-bottom:1px solid var(--line-soft)}
.go-rung:last-child{border-bottom:0}
.go-rung img{width:24px;height:24px;object-fit:contain}
.go-rung-dot{width:12px;height:12px;border-radius:50%;background:var(--rc);flex:none}
.go-rung-name{flex:1;font-size:13.5px}
.go-rung-count{font-family:var(--font-data)}

.go-cats{display:flex;flex-direction:column;gap:8px}
.go-cat{display:flex;align-items:center;gap:8px;font-size:13.5px}
.go-cat > span:first-child{flex:1}

/* ---------- Hintergrundbild (nur der Inhaltsbereich rechts, nicht hinter dem Menü) ---------- */
.app-bg{position:fixed;left:236px;right:0;top:0;bottom:0;z-index:-1;background-size:cover;background-position:center;background-attachment:fixed}
.app-bg::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:var(--dim,.8)}
@media (max-width:900px){ .app-bg{left:0} }

/* ---------- Spielerprofil (Steam-Stil) ---------- */
.pp-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-c);
  display:flex;align-items:flex-end;gap:24px;padding:28px;min-height:320px;isolation:isolate}
.pp-hero-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,color-mix(in oklab,var(--pa) 55%,#0b0e13),#0b0e13)}
.pp-hero[style*="--pb"] .pp-hero-bg{background-image:var(--pb);background-size:cover;background-position:center}
.pp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,10,14,.05) 30%,rgba(8,10,14,.86))}
.pp-av{width:168px;height:168px;border-radius:24px;flex:none;overflow:hidden;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:54px;color:#fff;
  background:color-mix(in oklab,var(--pa) 40%,#222);border:4px solid var(--pa);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.pp-av img{width:100%;height:100%;object-fit:cover}
.pp-id h2{font-size:38px}

/* Bühne: das Spielmotiv passt sich der Breite an (volle Grafik, kein harter Crop) */
.showcase{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-c);
  background:linear-gradient(120deg,color-mix(in oklab,var(--gc) 45%,#0b0e13),#0b0e13);isolation:isolate}
.showcase:not(.has-art){min-height:220px;display:flex;align-items:flex-end}
.showcase-art{display:block;width:100%;height:auto;max-height:620px;object-fit:cover;object-position:center}
.highlight-label{font-family:var(--font-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:2px 2px 6px}
.showcase.has-ratio{aspect-ratio:var(--hl-ratio)}
.showcase.has-ratio .showcase-art{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
/* Game-Highlight-Slots (Vordergrund-Figuren) */
.ghl-layer{position:absolute;inset:0;overflow:hidden;z-index:0}
.ghl-fg{position:absolute;bottom:0;height:94%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.ghl-fg img{height:100%;width:auto;max-width:52%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.ghl-fg .ghl-cap{font-family:var(--font-head);font-weight:800;font-size:13px;color:#fff;
  background:rgba(8,10,14,.55);padding:2px 9px;border-radius:99px;backdrop-filter:blur(3px);white-space:nowrap;margin-bottom:56px}
.ghl-links{left:1%;align-items:flex-start} .ghl-links img{max-width:60%}
.ghl-mitte{left:50%;transform:translateX(-50%)}
.ghl-rechts{right:1%;align-items:flex-end} .ghl-rechts img{max-width:60%}
.showcase.has-art .showcase-info{z-index:1}
/* Character-Select (Tekken-Stil, große Bilder) */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px;margin-top:4px}
.cs-cell{padding:0;border:2px solid var(--line-c);border-radius:var(--r);overflow:hidden;cursor:pointer;
  background:var(--panel-2);display:flex;flex-direction:column;transition:border-color .12s,transform .1s,box-shadow .12s}
.cs-cell:hover{transform:translateY(-2px);border-color:var(--ink-3)}
.cs-cell.on{border-color:var(--cc,var(--accent));box-shadow:0 0 0 2px color-mix(in oklab,var(--cc,var(--accent)) 35%,transparent)}
.cs-img{aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;background:color-mix(in oklab,var(--cc,#475569) 18%,var(--panel-2))}
.cs-img img{width:100%;height:100%;object-fit:cover}
.cs-mark{font-family:var(--font-head);font-weight:800;font-size:22px;color:#fff}
.cs-name{font-size:11.5px;font-weight:600;text-align:center;padding:5px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-none{align-items:center;justify-content:center;gap:4px;min-height:120px;color:var(--ink-3)}
.cs-none .cs-x{font-size:22px}
.showcase-info{display:flex;align-items:flex-end;gap:18px;width:100%;padding:70px 22px 20px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,10,14,.5) 45%,rgba(8,10,14,.92))}
.showcase.has-art .showcase-info{position:absolute;left:0;right:0;bottom:0}
.showcase-rank{width:92px;height:92px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.showcase-txt{flex:1;min-width:0}
.showcase-game{display:flex;align-items:center;font-size:14px;opacity:.95}
.showcase-game a{color:#fff}
.showcase-logo{width:48px;height:48px;object-fit:contain;margin-right:9px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.showcase-char{font-family:var(--font-head);font-weight:800;font-size:32px;line-height:1.08;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.showcase-meta{font-size:13.5px;opacity:.92;margin-top:3px}
/* In Ecken positionierte Statistiken (Game-Highlight) */
.gh-stat{position:absolute;z-index:2;display:flex;flex-direction:column;gap:5px;max-width:46%}
.gh-stat.gh-tl{top:12px;left:12px;align-items:flex-start}
.gh-stat.gh-tr{top:12px;right:12px;align-items:flex-end}
.gh-stat.gh-bl{bottom:12px;left:12px;align-items:flex-start}
.gh-stat.gh-br{bottom:12px;right:12px;align-items:flex-end}
.gh-stat-row{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:600;
  background:rgba(8,10,14,.58);padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px);
  text-shadow:0 1px 4px rgba(0,0,0,.6);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gh-stat-ico{width:22px;height:22px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
/* Widget-Editor: gerenderter Baum (Produktion + Editor-Vorschau teilen diese Klassen) */
.we-stage{position:relative;width:100%}
.we-stage.we-canvas{overflow:hidden}
.we-stage.we-canvas>.we-w{position:absolute}
.we-stage.we-flow>.we-w{position:relative}
.we-img{display:block;max-width:100%;height:auto}
.we-text{white-space:pre-wrap;overflow-wrap:anywhere}
.we-img-empty{min-width:20px;min-height:20px}
.showcase .we-stage.we-canvas{position:absolute;inset:0}
.pp-game .go-rank img{width:22px;height:22px}
@media (max-width:560px){ .pp-hero{min-height:260px;padding:20px} .pp-av{width:120px;height:120px;font-size:38px} .pp-id h2{font-size:28px} .showcase-rank{width:66px;height:66px} .showcase-logo{width:30px;height:30px} }
.pp-id{color:#fff;padding-bottom:2px;min-width:0}
.pp-id h2{font-family:var(--font-head);font-size:28px;line-height:1.1;margin:0;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.pp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.pp-meta .muted{color:#cbd3de!important}
.pp-tag{margin-top:8px;font-style:italic;color:#e7ebf0;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.6)}

.pp-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;padding:16px var(--pad)}
.pp-game{border:1px solid var(--line-soft);border-radius:var(--r);padding:14px;background:var(--panel-2);border-left:3px solid var(--gc)}
/* Zelle im Spielerprofil: optionales Mini-Highlight + die EINE Karte (GameRender). */
.pp-game-cell{display:flex;flex-direction:column;gap:10px;min-width:0}
.pp-game-cell .pp-game-hl{margin-top:0}
/* Karten-Template (games.card_layout) — exakt wie die Bühne im Profil-Editor. */
.gp-tpl{position:relative;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  background:color-mix(in oklab,var(--gc) 12%,var(--panel-2));border-left:3px solid var(--gc)}
.gp-tpl .we-stage.we-canvas{position:relative;width:100%;min-height:170px;overflow:hidden}
.gp-tpl .we-stage.we-canvas>.we-w{position:absolute}
/* Frei gestaltete Spielprofil-Karte (Canvas aus dem Spielerprofil-Editor). */
.pp-game-canvas{margin-top:10px;border-radius:var(--r);overflow:hidden}
.pp-game-canvas .we-stage.we-canvas{position:relative;width:100%;min-height:170px;overflow:hidden}
.pp-game-canvas .we-stage.we-canvas>.we-w{position:absolute}
/* Frei gestaltetes Game-Highlight je Spiel (auch außerhalb des Hauptspiels). */
.pp-game-hl{position:relative;margin-top:10px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(120deg,color-mix(in oklab,var(--gc) 45%,#0b0e13),#0b0e13)}
.pp-game-hl .we-stage.we-canvas{position:absolute;inset:0}
.pp-game-hl .we-stage.we-canvas>.we-w{position:absolute}
.pp-game-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pp-game-name{display:flex;align-items:center;gap:2px;font-weight:700;font-size:15.5px;color:var(--ink)}
.pp-game-body{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.pp-game-logo{width:38px;height:38px;object-fit:contain;margin-right:9px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.pp-taglist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pp-tag{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);
  color:var(--cc);background:color-mix(in oklab,var(--cc) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--cc) 34%,transparent)}
/* Vorlagen-Galerie (Profilbild / Banner / Hintergrund wählen) */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--pf-min,96px),1fr));gap:8px;margin-top:4px}
.preset-cell{padding:0;border:2px solid var(--line-c);border-radius:var(--r);overflow:hidden;cursor:pointer;
  background:var(--panel-2);aspect-ratio:var(--pf-ratio,1/1);display:grid;place-items:center;
  transition:border-color .12s,transform .1s,box-shadow .12s}
.preset-cell:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.preset-cell.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 30%,transparent)}
.preset-cell img{width:100%;height:100%;object-fit:cover;display:block}
.preset-cell.preset-none{color:var(--ink-3)}
.preset-cell.preset-none svg{width:22px;height:22px}
.preset-empty{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px dashed var(--line-c);border-radius:var(--r);background:var(--panel-2)}

/* Bilder präsenter (Beta-Feedback): Listen-Avatare und Mini-Karte größer */
.go-player .av{width:40px;height:40px}
.mini-banner{height:64px}
.mini-av{width:54px;height:54px}
.av-lg{width:56px;height:56px;font-size:15px}

/* ---------- Mitglieder als Miniprofil-Raster ---------- */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.filterbar input[type=text]{width:190px}
.filterbar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Suchleiste + Bild-Kachel-Filter */
.member-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.member-search input[type=text]{width:240px}
.member-search .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ftile-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ftile-h{font-family:var(--font-data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);width:52px;flex:none}
.ftile{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:1px solid var(--line-c);
  border-radius:999px;background:var(--panel);color:var(--ink-2);font-size:13px;font-weight:550;transition:all .12s}
.ftile:hover{border-color:var(--ink-3);color:var(--ink)}
.ftile.on{border-color:var(--tc);color:var(--ink);background:color-mix(in oklab,var(--tc) 13%,transparent);box-shadow:0 0 0 1px var(--tc) inset}
.ftile-ic{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:color-mix(in oklab,var(--tc) 22%,var(--panel-2))}
.ftile-ic img{width:100%;height:100%;object-fit:cover}
.ftile-in{font-family:var(--font-data);font-size:10px;font-weight:700;color:var(--tc)}
.ftile-lb{white-space:nowrap}

/* Mitglieder-Raster mit Miniprofil */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.member-cell{position:relative;display:flex}
.member-card{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:20px 14px 16px;border:1px solid var(--line-c);border-radius:var(--r-lg);background:var(--panel);
  color:var(--ink);position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s}
.member-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--pa);z-index:2}
.member-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(0,0,0,.5);border-color:var(--pa)}
/* Profilbanner als Kartenkopf — wird jetzt auch in der Mitgliederübersicht genutzt. */
.member-banner{position:absolute;top:0;left:0;right:0;height:92px;z-index:0;background-image:var(--pb);
  background-size:cover;background-position:center}
.member-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,
  color-mix(in oklab,var(--panel) 8%,transparent),var(--panel) 92%)}
.member-card.has-banner{padding-top:56px}
.member-card.has-banner .member-av{position:relative;z-index:1}
.member-av{width:108px;height:108px;border-radius:24px;overflow:hidden;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:34px;color:#fff;
  background:color-mix(in oklab,var(--pa) 40%,#222);border:3px solid var(--pa);margin-top:4px}
.member-av img{width:100%;height:100%;object-fit:cover}
.member-name{font-weight:700;font-size:16px;line-height:1.15}
.member-tag{font-size:12px}
.member-line{font-style:italic;margin-top:2px}
.member-edit,.member-del button{position:absolute;top:8px;z-index:3;width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-c);color:var(--ink-2);
  opacity:0;transition:opacity .12s,color .12s,border-color .12s;cursor:pointer}
.member-edit{right:8px}
.member-del{position:static}
.member-del button{right:44px}
.member-cell:hover .member-edit,.member-cell:hover .member-del button{opacity:1}
.member-edit:hover{color:var(--accent);border-color:var(--accent)}
.member-del button:hover{color:var(--bad);border-color:var(--bad)}
.member-edit svg,.member-del button svg{width:15px;height:15px}
/* Miniprofil-Block: Hauptspiel mit Logo, Ingame-Name, Rang */
.member-game{display:flex;align-items:center;gap:9px;width:100%;margin-top:8px;padding:8px 10px;
  border-radius:var(--r);background:var(--panel-2);border-left:3px solid var(--gc);text-align:left}
.member-game-logo{width:42px;height:42px;flex:none;object-fit:contain}
.member-game-logo--t{display:grid;place-items:center;border-radius:8px;background:var(--gc);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:16px}
.member-game-txt{flex:1;min-width:0}
.member-game-name{display:block;font-weight:650;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-game-sub{display:block;font-family:var(--font-data);font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-rank-ic{width:34px;height:34px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* ---------- News: bildbetonte Übersicht + Lese-Ansicht ---------- */
/* ---------- News / Magazin ---------- */
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.news-head h2{font-family:var(--font-head);font-size:23px;line-height:1}
.news-count{font-family:var(--font-data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* Kategorie-Filter */
.news-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip{border:1px solid var(--line-c);background:var(--panel);color:var(--ink-2);font-size:12.5px;font-weight:550;
  padding:6px 13px;border-radius:999px;cursor:pointer;transition:all .12s;white-space:nowrap}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* Kopfbereich: Hero + Seitenspalte „Neueste" */
.news-top{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:22px;align-items:stretch}
.news-hero{display:block;position:relative;min-height:340px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-c);color:#fff;background:#11151b center/cover no-repeat;
  transition:transform .14s,box-shadow .14s}
.news-hero:hover{transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.news-hero-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-head);
  font-weight:800;font-size:34px;letter-spacing:.04em;text-transform:uppercase;opacity:.28;
  background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 40%,#141920),#141920)}
.news-hero-body{position:absolute;left:0;right:0;bottom:0;padding:22px 24px}
.news-hero-body h3{font-family:var(--font-head);font-size:27px;line-height:1.1;margin:9px 0 7px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.news-hero-body p{margin:0 0 12px;opacity:.92;max-width:60ch;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.news-kicker{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pill.accent{background:var(--accent);color:#fff}

/* Seitenspalte */
.news-side{display:flex;flex-direction:column;border:1px solid var(--line-c);border-radius:var(--r-lg);
  background:var(--panel);overflow:hidden}
.news-side-h{font-family:var(--font-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:13px 15px 9px}
.news-row{display:flex;gap:11px;padding:11px 15px;border-top:1px solid var(--line-soft);align-items:center;
  color:var(--ink);transition:background .12s}
.news-row:hover{background:var(--panel-2)}
.news-row-img{width:56px;height:56px;flex:none;border-radius:var(--r);overflow:hidden;background-size:cover;background-position:center;
  display:grid;place-items:center;background-color:color-mix(in oklab,var(--accent) 18%,var(--panel-2))}
.news-row-img span{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--accent);opacity:.7}
.news-row-b{min-width:0}
.news-row-t{font-family:var(--font-head);font-weight:650;font-size:14px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-row-m{font-family:var(--font-data);font-size:10.5px;color:var(--ink-3);margin-top:3px}

/* Karten-Raster */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.news-card{display:flex;flex-direction:column;border:1px solid var(--line-c);border-radius:var(--r-lg);
  overflow:hidden;background:var(--panel);color:var(--ink);transition:transform .14s,box-shadow .14s}
.news-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.news-card-img{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 30%,#141920),#141920) center/cover no-repeat;display:grid;place-items:center}
.news-card-ph{font-family:var(--font-head);font-weight:800;font-size:18px;color:#fff;opacity:.65;text-transform:uppercase;letter-spacing:.05em}
.news-card-tag{position:absolute;top:9px;left:9px;background:rgba(8,10,14,.72);color:#fff;font-size:10.5px;
  font-weight:600;letter-spacing:.03em;padding:3px 8px;border-radius:999px;backdrop-filter:blur(3px)}
.news-card-b{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px}
.news-card-t{font-family:var(--font-head);font-weight:700;font-size:16.5px;line-height:1.22}
.news-card-x{font-size:13px;color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Byline mit Avatar (Hero, Karten) */
.byline{display:flex;align-items:center;gap:8px}
.by-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center}
.by-av img{width:100%;height:100%;object-fit:cover}
.by-av--i{background:color-mix(in oklab,var(--accent) 22%,var(--panel-2));color:var(--accent);
  font-family:var(--font-data);font-size:10px;font-weight:700}
.by-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.by-txt b{font-size:12.5px;font-weight:600}
.by-sub{font-family:var(--font-data);font-size:10.5px;opacity:.8}
.news-hero .by-txt b{color:#fff}
.news-hero .by-av--i{background:rgba(255,255,255,.18);color:#fff}
.news-empty-filter{padding:34px;text-align:center}

/* Einheitliches 3er-Raster, Vorschaubild 4:5 */
.news-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card3{display:flex;flex-direction:column;border:1px solid var(--line-c);border-radius:var(--r-lg);
  overflow:hidden;background:var(--panel);color:var(--ink);transition:transform .14s,box-shadow .14s}
.news-card3:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(0,0,0,.55)}
.news-card3-img{position:relative;aspect-ratio:4/5;display:grid;place-items:center;
  background:linear-gradient(150deg,color-mix(in oklab,var(--accent) 32%,#141920),#141920) center/cover no-repeat}
.news-card3-ph{font-family:var(--font-head);font-weight:800;font-size:24px;color:#fff;opacity:.55;text-transform:uppercase;letter-spacing:.05em}
.news-card3-tags{position:absolute;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 20px)}
.news-card3-tags .news-card-tag{position:static}
.news-card-tag.alt{background:color-mix(in oklab,var(--accent) 82%,#000)}
.news-counts{position:absolute;bottom:10px;right:10px;display:flex;gap:9px;font-size:12px;font-weight:600;color:#fff;
  background:rgba(8,10,14,.62);padding:3px 10px;border-radius:999px;backdrop-filter:blur(3px)}
.news-card3-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.news-card3-t{font-family:var(--font-head);font-weight:700;font-size:17.5px;line-height:1.2}
.news-card3-x{font-size:13px;color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:900px){ .news-grid3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  .news-top{grid-template-columns:1fr}
  .news-hero{min-height:250px}
}
@media (max-width:560px){ .news-grid3{grid-template-columns:1fr} }

.post-read{max-width:760px;margin:0 auto}
.post-hero{aspect-ratio:9/16;max-width:440px;width:100%;margin:0 auto 18px;border-radius:var(--r-lg);
  background:#11151b center/cover no-repeat;border:1px solid var(--line-c)}
.post-title{font-family:var(--font-head);font-size:32px;line-height:1.1;margin:8px 0 6px}
.post-meta{font-family:var(--font-data);font-size:12px;color:var(--ink-3);margin-bottom:16px}
.post-highlights{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.post-hl{border:1px solid var(--line-soft);border-radius:var(--r);padding:8px 12px;background:var(--panel-2)}
.post-hl b{display:block;font-family:var(--font-head);font-size:16px}
/* ---------- Match-Scoreboard ---------- */
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  border-radius:var(--r-lg);border:1px solid var(--line-c);padding:26px 22px;margin-bottom:14px;
  background:linear-gradient(135deg,color-mix(in oklab,var(--gc) 34%,var(--panel)),var(--panel));position:relative;overflow:hidden}
.scoreboard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gc)}
.sb-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.sb-logo{width:84px;height:84px;border-radius:20px;display:grid;place-items:center;overflow:hidden;
  background:var(--gc);color:#fff;font-family:var(--font-head);font-weight:800;font-size:26px;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.sb-logo img{width:78%;height:78%;object-fit:contain}
.sb-logo--opp{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-c)}
.sb-name{font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sb-sub{font-family:var(--font-data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sb-center{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px}
.sb-score{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:800;font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
.sb-score i{font-style:normal;opacity:.4;font-size:34px}
.sb-score span{color:var(--ink-3)}
.sb-score span.lead{color:var(--ink)}
.sb-vs{font-family:var(--font-head);font-weight:800;font-size:34px;color:var(--ink-3);letter-spacing:.05em}
.sb-result{font-size:13px;font-weight:600}
.sb-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.sb-win .sb-result{color:var(--ok)} .sb-win .sb-score span.lead{color:var(--ok)}
.sb-loss .sb-result{color:var(--bad)} .sb-loss .sb-score span.lead{color:var(--bad)}
.sb-draw .sb-result{color:var(--ink-2)}
.sb-planned .sb-result{color:var(--ink-3);font-weight:500}
@media (max-width:560px){ .scoreboard{padding:18px 12px} .sb-logo{width:60px;height:60px;font-size:18px} .sb-score{font-size:38px} .sb-name{font-size:14px} }
/* Live-Vorschau im Erstellen-Formular */
.sb-mini{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  margin:0 var(--pad) 4px;padding:14px;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--line-soft)}
.sb-mini-side{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.sb-mini-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:800;font-size:15px}
.sb-mini-badge.alt{background:var(--panel);color:var(--ink-2);border:1px solid var(--line-c)}
.sb-mini-name{font-size:12.5px;font-weight:600;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-mini-score{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:28px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sb-mini-score i{font-style:normal;opacity:.4;font-size:20px}
.sb-mini.sb-win .sb-mini-score{color:var(--ok)} .sb-mini.sb-loss .sb-mini-score{color:var(--bad)}

/* ---------- Team-interne Bereiche ---------- */
.team-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 14px}
.team-links a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:var(--r-lg);
  border:1px solid var(--line-c);background:var(--panel);color:var(--ink);font-weight:600;font-size:13.5px;transition:transform .12s,border-color .12s}
.team-links a:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}
.team-links .tl-ic{font-size:22px;line-height:1}
@media (max-width:620px){ .team-links{grid-template-columns:repeat(2,1fr)} }
.team-ev{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--line-soft);background:var(--panel-2);color:var(--ink)}
.team-ev:hover{border-color:var(--accent)}
.team-ev-t{font-family:var(--font-head);font-weight:650;font-size:15px}
.vote-list{display:flex;flex-direction:column;gap:10px}
.vote-opt{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--panel-2)}
.vote-when{flex:1;min-width:0}
.vote-when-t{font-weight:650;font-size:14px}
.vote-bar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--line-c);margin:6px 0 3px}
.vote-bar .y{background:var(--ok)} .vote-bar .n{background:var(--bad)}
.vote-pick{display:flex;gap:6px;flex:none}
.vote-yn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-c);cursor:pointer;font-size:12.5px;font-weight:600}
.vote-yn input{accent-color:var(--accent)}
.vote-yn.y:has(input:checked){border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.vote-yn.n:has(input:checked){border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}

/* ---------- Teams: Spiel-Banner + Abteilungs-2er-Grid ---------- */
.team-game{margin-bottom:26px}
.game-banner{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-lg);color:#fff;
  border:1px solid var(--line-c);margin-bottom:12px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,color-mix(in oklab,var(--gc) 60%,#0b0e13),#0b0e13)}
.game-banner[style*="--art"]::before{content:"";position:absolute;inset:0;z-index:0;opacity:.32;
  background:var(--art) center/cover no-repeat}
.game-banner > *{position:relative;z-index:1}
.game-banner-logo{width:84px;height:84px;flex:none;border-radius:18px;display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.12);font-family:var(--font-head);font-weight:800;font-size:28px}
.game-banner-logo img{width:78%;height:78%;object-fit:contain}
.game-banner-txt{min-width:0}
.game-banner-name{font-family:var(--font-head);font-weight:800;font-size:24px;line-height:1.1;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.game-banner-meta{font-size:13px;opacity:.9;margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.team-unit-h{font-family:var(--font-data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:12px 2px 8px}
.team2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:6px}
.team2{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:var(--r-lg);
  border:1px solid var(--line-c);background:var(--panel);color:var(--ink);border-left:4px solid var(--gc);
  transition:transform .12s,box-shadow .12s}
.team2:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
.team2.is-off{opacity:.6}
.team2-badge{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;overflow:hidden;
  background:color-mix(in oklab,var(--gc) 22%,var(--panel-2));color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:17px}
.team2-badge img{width:80%;height:80%;object-fit:contain}
.team2-b{flex:1;min-width:0}
.team2-name{font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.15}
.team2-sub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.team2-rec{flex:none;font-family:var(--font-data);font-weight:700;font-size:15px;color:var(--ink-2)}
@media (max-width:620px){ .team2-grid{grid-template-columns:1fr} }

/* ---------- Clips ---------- */
.clip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.clip{display:flex;flex-direction:column;border:1px solid var(--line-c);border-radius:var(--r-lg);
  overflow:hidden;background:var(--panel);min-width:0}
.clip-thumb{position:relative;display:block;aspect-ratio:16/9;background:#11151b center/cover no-repeat;
  display:grid;place-items:center;color:#fff;
  background-image:linear-gradient(135deg,color-mix(in oklab,var(--accent) 26%,#141920),#141920)}
.clip-ph{font-family:var(--font-head);font-weight:800;font-size:18px;opacity:.5;text-transform:uppercase;letter-spacing:.04em}
.clip-play{position:absolute;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,10,14,.55);backdrop-filter:blur(3px);transition:transform .12s,background .12s}
.clip-play svg{width:22px;height:22px;color:#fff;margin-left:2px}
.clip-thumb:hover .clip-play{transform:scale(1.1);background:var(--accent)}
.clip-game{position:absolute;top:8px;left:8px;background:rgba(8,10,14,.65);color:#fff;font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:999px;backdrop-filter:blur(3px)}
.clip-b{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px;min-width:0}
.clip-title{font-family:var(--font-head);font-weight:650;font-size:14.5px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clip-owner{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);min-width:0}
.clip-owner .by-av{width:22px;height:22px}
.clip-owner span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip-actions{display:flex;align-items:center;gap:6px;margin-top:1px}
.clip-actions form{margin:0}
.clip-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-c);background:var(--panel);
  color:var(--ink-2);font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer;transition:all .12s}
.clip-btn .ic{font-size:13px;line-height:1}
.clip-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.clip-btn.on[data-role="like"]{border-color:var(--accent);color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent)}
.clip-btn.on[data-role="fav"]{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.clip-btn.on:not([data-role]){border-color:var(--ok);color:var(--ok)}
.clip-btn.del{margin-left:auto;padding:4px 8px;font-size:15px;line-height:1}
.clip-btn.del:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
/* Swipe-Karussell (Dashboard / Profil) */
.clip-swipe-wrap{position:relative}
.clip-swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:2px 2px 6px;scrollbar-width:thin}
.clip-swipe .clip{flex:0 0 250px;scroll-snap-align:start}
.clip-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-c);background:var(--panel);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.4);opacity:.9}
.clip-nav:hover{border-color:var(--accent);color:var(--accent)}
.clip-nav.prev{left:-6px} .clip-nav.next{right:-6px}
@media (max-width:640px){ .clip-nav{display:none} }

/* ---------- Spielprofil-Karte (Faceit-Stil) ---------- */
.gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.gp{border:1px solid var(--line-c);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);border-top:4px solid var(--gc)}
.gp-head{display:flex;align-items:center;gap:14px;padding:16px 16px 12px}
.gp-logo{width:74px;height:74px;flex:none;border-radius:18px;display:grid;place-items:center;overflow:hidden;
  background:color-mix(in oklab,var(--gc) 24%,var(--panel-2));font-family:var(--font-head);font-weight:800;font-size:24px;color:#fff}
.gp-logo img{width:82%;height:82%;object-fit:contain}
.gp-head-txt{flex:1;min-width:0}
.gp-name{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.15}
.gp-name a{color:var(--ink)}
.gp-genre{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.gp-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;padding:0 16px 12px}
.gp-box{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:9px 11px;min-width:0}
.gp-box-lb{display:block;font-family:var(--font-data);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.gp-box b{font-size:14px}
.gp-trunc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-box--rank{border-left:3px solid var(--rc)}
.gp-rank{display:flex;align-items:center;gap:10px}
.gp-rank-ic{width:44px;height:44px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.gp-rank span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.gp-rank b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-rank small{color:var(--ink-3);font-size:11px}
.gp-mains{padding:0 16px 12px}
.gp-mains-lb{display:flex;align-items:center;gap:6px;font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.gp-mains-lb img{width:16px;height:16px;object-fit:contain}
.gp .go-chips{gap:7px}
.gp .go-chip img{width:24px;height:24px}
.gp .pp-taglist{padding:0 16px 14px;margin-top:0}

/* Dashboard-News-Liste */
.dash-news{display:flex;flex-direction:column}
.dash-news-row{display:flex;align-items:center;gap:12px;padding:11px var(--pad);border-bottom:1px solid var(--line-soft);color:var(--ink)}
.dash-news-row:last-child{border-bottom:0}
.dash-news-row:hover{background:var(--panel-2)}
.dash-news-thumb{width:60px;height:44px;flex:none;border-radius:var(--r);background-size:cover;background-position:center;
  display:grid;place-items:center;background-color:color-mix(in oklab,var(--accent) 16%,var(--panel-2))}
.dash-news-thumb span{font-family:var(--font-head);font-weight:800;color:var(--accent);opacity:.7}
.dash-news-b{flex:1;min-width:0}
.dash-news-t{display:block;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-news-m{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}

/* ---------- Persönliches Dashboard ---------- */
.dash-admin{margin-top:8px}
.post-kicker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.go-result-sub{display:block}
.dash-hello{font-family:var(--font-head);font-size:24px;margin:6px 0 14px}
.dash-events{display:flex;flex-direction:column}
.dash-event{display:flex;align-items:center;gap:12px;padding:12px var(--pad);border-bottom:1px solid var(--line-soft)}
.dash-event:last-child{border-bottom:0}
.dash-event-date{width:52px;flex:none;text-align:center;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--line-soft);padding:6px 0}
.dash-event-date .d{display:block;font-family:var(--font-head);font-weight:800;font-size:20px;line-height:1}
.dash-event-date .m{display:block;font-family:var(--font-data);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.dash-event-b{flex:1;min-width:0}
.dash-event-t{display:block;font-weight:650;font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-event-m{font-size:12px;color:var(--ink-3);margin-top:1px}
.dash-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r);color:var(--ink-2)}
.dash-item:hover{background:var(--panel-2);color:var(--ink)}
.dash-item-name{flex:1;min-width:0;font-weight:550;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dash-game{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line-soft);
  background:var(--panel-2);border-left:3px solid var(--gc);color:var(--ink)}
.dash-game:hover{border-color:var(--gc)}
.dash-game img{width:38px;height:38px;flex:none;object-fit:contain}
.dash-game-mark{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--gc);color:#fff;font-family:var(--font-head);font-weight:800;font-size:17px}
.dash-game-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.dash-game-txt .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.post-body{line-height:1.7;font-size:15.5px}
.post-actions{display:flex;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.react{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-c);background:var(--panel);
  color:var(--ink-2);font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.react:hover{border-color:var(--ink-3);color:var(--ink)}
.react.on{border-color:var(--accent);color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent)}
.react-ic{font-size:15px;line-height:1}
.react.ok{border-color:var(--ok);color:var(--ok)}

/* Kommentare */
.comments{max-width:760px;margin:26px auto 0}
.comments-h{font-family:var(--font-head);font-size:20px;margin-bottom:12px}
.comment-form{display:flex;gap:8px;align-items:flex-end;margin-bottom:18px}
.comment-form textarea{flex:1;min-height:44px}
.comment-list{display:flex;flex-direction:column;gap:14px}
.comment{display:flex;gap:11px;align-items:flex-start}
.comment .by-av{width:36px;height:36px;flex:none}
.comment-b{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:9px 12px}
.comment-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.comment-txt{line-height:1.5;font-size:14px;word-break:break-word}
.comment-del{border:0;background:transparent;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:var(--r)}
.comment-del:hover{color:var(--bad);background:var(--bad-bg)}

/* ---------- Rollen & Rechte (Matrix) ---------- */
.perm-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.perm-group{border:1px solid var(--line-soft);border-radius:var(--r);padding:10px 12px;background:var(--panel-2)}
.perm-group .check{margin-bottom:5px}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.badge{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:10px 6px;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2);opacity:.4;filter:grayscale(1)}
.badge.on{opacity:1;filter:none;border-color:color-mix(in oklab,var(--accent) 40%,var(--line-soft))}
.badge-em{font-size:24px;line-height:1}
.badge-lb{font-size:11px;color:var(--ink-2);font-weight:600}

.meter{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line-soft)}
.meter span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 55%,#7dd3a0))}
.meter-list{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px}
.meter-item{font-size:12.5px;color:var(--ink-3)}
.meter-item.done{color:var(--ok)}

.pp-socials{display:flex;flex-wrap:wrap;gap:8px}
.pp-social{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line-soft);background:var(--panel-2);color:var(--ink-2);font-size:13px}
.pp-social:hover{border-color:var(--accent);color:var(--ink)}
.pp-social svg{width:16px;height:16px}

/* Miniprofil (Hovercard) */
.mini{width:270px;background:var(--panel);border:1px solid var(--line-c);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 16px 40px -12px rgba(0,0,0,.55)}
.mini-banner{height:56px;background:linear-gradient(120deg,color-mix(in oklab,var(--pa) 55%,#0b0e13),#11151b);background-size:cover;background-position:center}
.mini-head{display:flex;align-items:flex-end;gap:10px;padding:0 12px;margin-top:-22px}
.mini-av{width:48px;height:48px;border-radius:10px;flex:none;overflow:hidden;display:grid;place-items:center;
  font-weight:800;color:#fff;background:color-mix(in oklab,var(--pa) 45%,#222);border:2px solid var(--panel)}
.mini-av img{width:100%;height:100%;object-fit:cover}
.mini-id{padding-bottom:4px;min-width:0}
.mini-name{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.1}
.mini-tag{padding:8px 12px 0;font-style:italic;color:var(--ink-2);font-size:12.5px}
.mini-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px 0}
.mini-main-name{font-weight:600;font-size:13px}
.mini-badges{display:flex;gap:6px;padding:8px 12px 0;font-size:16px}
.mini-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
#hovercard{position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
#hovercard.on{opacity:1;transform:none;pointer-events:auto}

/* ---------- Wettbewerbe: Spielplan / Turnierbaum ---------- */
.fx-groups{display:flex;flex-wrap:wrap;gap:14px;padding:14px var(--pad)}
.fx-group{flex:1 1 260px;min-width:240px}
.fx-head{font-family:var(--font-data);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:6px}
.fx{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--panel-2);margin-bottom:6px}
.fx-side{flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-side.fx-right{text-align:right}
.fx-win{color:var(--ok)}
.fx-vs{font-family:var(--font-data);font-size:12px;color:var(--ink-3);flex:none}
.fx-score{display:flex;align-items:center;gap:4px;flex:none}
.fx-score input{width:38px;text-align:center;padding:3px 4px}
.fx-score span{color:var(--ink-3)}

/* ---------- Vorschau-Band „Als Mitglied anschauen" ---------- */
.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:9px 14px;margin-bottom:12px;border-radius:var(--r);font-size:13px;
  background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in oklab,var(--warn) 32%,transparent)}
.preview-bar-txt{display:inline-flex;align-items:center;gap:8px}
.preview-bar-txt svg{width:16px;height:16px;flex:none}
.preview-bar b{color:var(--warn)}

.av.sm{width:30px;height:30px;font-size:11px;border-radius:9px}

/* Kein horizontaler Überlauf des Seitenkörpers — breite Inhalte scrollen in
   ihrem eigenen .tw/.codeblock-Container, nie die ganze Seite. `clip` statt
   `hidden`, damit die sticky Topbar weiter funktioniert. */
body{max-width:100%;overflow-x:clip}
.panel,.card,.preview{min-width:0}
.field > label,.flash,.note{overflow-wrap:anywhere}

@media (max-width:1180px){ .g5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr)} .g-2-1,.g3,.mods{grid-template-columns:1fr} }
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:252px;z-index:60;height:100dvh;
    transform:translateX(-100%);transition:transform .18s ease-out}
  .rail.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .burger{display:grid}
  .scroll{padding:14px;padding-bottom:78px}
  .g5,.g4,.g2{grid-template-columns:1fr}

  /* Größere Tap-Ziele auf dem Handy — Apple/Google empfehlen ~44px. */
  .btn,.btn-2{padding:10px 14px}
  .btn.sm,.btn-2.sm{padding:7px 11px;font-size:12.5px}
  .nav a{padding:10px 8px}
  .subnav a{padding:9px 12px}
  input,select,textarea{font-size:16px}  /* verhindert Auto-Zoom auf iOS */
  .check input{width:20px;height:20px}

  /* Edit-Aufklapper in Tabellen: nicht breiter als der Bildschirm. */
  details .panel-b{min-width:min(260px,78vw)!important}

  /* QA-Fixes Mobile: Editoren einspaltig, Suchfelder voll, Hovercard & Mini-Buttons. */
  form[data-dbe]{grid-template-columns:1fr!important}
  .filterbar input[type=text],.member-search input[type=text]{width:100%}
  .filterbar .right,.member-search .right{margin-left:0;width:100%}
  .mini{width:min(270px,92vw)}
  .we-lyr button,.pe-block-move .btn-2,.dsx-vt{min-height:36px}

  /* Karten (Login/Installer) mit weniger Innenabstand. */
  .card{padding:20px;border-radius:var(--r)}
  .card.wide{padding:18px}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--rail);
    border-top:1px solid var(--rail-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
    color:var(--rail-dim);font-size:10px}
  .tabbar svg{width:20px;height:20px}
  /* „Mein Profil" traegt das eigene Bild statt eines Symbols. Gleiche Hoehe
     wie die Symbole daneben, damit die Beschriftungen auf einer Linie sitzen. */
  .tabbar .tab-av{width:20px;height:20px;border-radius:50%;overflow:hidden;flex:none;
    display:grid;place-items:center;background:#2A3340;color:#DDE3EA;
    font-family:var(--font-data);font-size:8.5px;font-weight:700;line-height:1}
  .tabbar .tab-av img{width:100%;height:100%;object-fit:cover;display:block}
  .tabbar a[aria-current="page"] .tab-av{box-shadow:0 0 0 2px var(--accent)}
  .tabbar a[aria-current="page"]{color:#fff}
  .tabbar a[aria-current="page"] svg{color:var(--accent)}
  /* Das eigene Bild wandert in die Kopfzeile: die fünf Plätze der Tableiste
     gehören seit dem Umbau den Bereichen, nicht mehr einzelnen Seiten. */
  .topbar-me{display:block}

  /* „Menü": ALLE Bereiche mit ihren Überschriften — nicht mehr die flache
     Restekiste, in die vorher alles fiel, was in der Leiste keinen Platz
     hatte. Das Blatt geht deshalb fast über die volle Höhe: es ist die
     vollständige Navigation, nicht ein Überlauf. */
  .tabbar-more{flex:1;position:relative;list-style:none}
  .tabbar-more>summary{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
    color:var(--rail-dim);font-size:10px;list-style:none;cursor:pointer}
  .tabbar-more>summary::-webkit-details-marker{display:none}
  .tabbar-more[open]>summary{color:#fff}
  /* Fest zum Fenster, nicht zum „Menü"-Knopf: Das Blatt ist die vollständige
     Navigation und soll die Breite nutzen. `bottom` zählt deshalb ab dem
     unteren Fensterrand — die Leiste selbst ist rund 50 px hoch. */
  .tabbar-sheet{position:fixed;left:8px;right:8px;bottom:calc(58px + env(safe-area-inset-bottom));
    max-height:72dvh;overflow:auto;
    overscroll-behavior:contain;
    background:var(--rail);border:1px solid var(--rail-line);border-radius:14px;padding:8px;
    box-shadow:0 -8px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
  .tabbar-sheet a{flex-direction:row;justify-content:flex-start;gap:10px;padding:11px 12px;font-size:14px;color:var(--rail-ink)}
  .tabbar-sheet a[aria-current="page"]{background:color-mix(in oklab,var(--accent) 22%,transparent);border-radius:8px;color:#fff}
  .tabbar-sheet svg{width:18px;height:18px;flex:none}
  .tabbar-sheet .nav-sep{padding:14px 10px 4px}
  .tabbar-sheet .nav-sub{padding:8px 10px 2px 16px}
  .tabbar-sheet .me{padding:8px 10px 12px;border-bottom:1px solid var(--rail-line);margin-bottom:2px}
  .tabbar-sheet .legal-links{padding:12px 10px 4px}

  /* Bereichsseite am Handy: eine Spalte, größere Tap-Flächen. Sie IST hier
     das Menü — eine Bereichstaste führt hierher, von hier geht es weiter. */
  .hub-grid{grid-template-columns:1fr;gap:8px}
  .hub-card{padding:12px}
}

/* ---------- Spielbericht (Match-Präsentation) ---------- */
/* Lese-Ansicht der Match-Detailseite: Map-Karte, Berichtsfeld-Cards und
   Spieler-Karten. Präfix mr-* hält den Abschnitt klar abgegrenzt. */
.mr .panel-b{gap:16px}
.mr-top{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:14px;align-items:start}
.mr-top.no-map{grid-template-columns:1fr}

/* Map-Karte: Bild füllt, Name als Overlay-Verlauf unten — auch ohne Bild
   bleibt dieselbe Fläche stehen (aspect-ratio), damit nichts springt. */
.mr-map{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;
  background:var(--panel-2);border:1px solid var(--line-soft)}
.mr-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mr-map figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px;
  padding:22px 12px 9px;background:linear-gradient(180deg,transparent,rgba(6,9,13,.82));color:#fff}
.mr-map.no-img figcaption{background:none;color:var(--ink)}
.mr-map-k{font-family:var(--font-data);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;opacity:.78}
.mr-map-n{font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.15}

/* Berichtsfelder als Definition-Cards statt Rohtext. */
.mr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-content:start}
.mr-card{display:flex;flex-direction:column;gap:7px;min-width:0;padding:9px 11px;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2)}
.mr-card--wide{grid-column:1/-1}
.mr-k{font-family:var(--font-data);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.mr-v{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.mr-text{line-height:1.55;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.mr-entry{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.mr-entry img{width:30px;height:30px;flex:none;object-fit:contain;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line-soft)}
.mr-entry span{overflow-wrap:anywhere}
.mr-person{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);min-width:0}
.mr-person:hover .person-n{text-decoration:underline}

/* Spieler-Karten: Avatar + Name (Hovercard), Charakter-Chip, Wertezeilen. */
.mr-sec-h{font-family:var(--font-data);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:8px}
.mr-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mr-player{display:flex;flex-direction:column;gap:9px;padding:10px 12px;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2)}
.mr-p-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mr-p-head .av{width:34px;height:34px}
.mr-char{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--line-soft);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.mr-char img{width:22px;height:22px;object-fit:contain;border-radius:4px}
.mr-p-stats{display:flex;flex-wrap:wrap;gap:6px}
.mr-stat{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--line-soft);font-size:12.5px}
.mr-stat b{font-family:var(--font-data);font-weight:var(--num-weight,600);color:var(--ink)}
.mr-stat i{font-style:normal;color:var(--ink-3);font-size:11px}

/* Pflege auf Abruf: die Erfassungs-Formulare als Aufklapp-Blöcke — sichtbar
   nur für Bearbeiter, geöffnet nur solange es noch nichts zu lesen gibt. */
.mr-edit{border:1px dashed var(--line-c);border-radius:var(--r)}
.mr-edit[open]{border-style:solid}
.mr-edit>summary{display:flex;align-items:center;gap:7px;padding:9px 12px;cursor:pointer;user-select:none;
  list-style:none;font-weight:600;font-size:13px;color:var(--ink-2)}
.mr-edit>summary::-webkit-details-marker{display:none}
.mr-edit>summary::before{content:"▸";font-size:10px;color:var(--ink-3);transition:transform .12s}
.mr-edit[open]>summary::before{transform:rotate(90deg)}
.mr-edit>.panel{border:0;border-top:1px solid var(--line-soft);border-radius:0 0 var(--r) var(--r)}

@media (max-width:760px){ .mr-top{grid-template-columns:1fr} }

/* ---------- Seitenkopf ---------- */
/* Eine schlanke Zeile über dem Inhalt (Partial _page_head): links Zurück-Button
   und Info-Pills, rechts die Primär-/Sekundäraktionen. Kein eigenes h1 —
   den Seitentitel zeigt bereits die Topbar. */
.page-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.page-head-title{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-head-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- App-Dialog ---------- */
/* Modale Formulare (Öffnen via [data-dialog-open="#id"], Schließen via
   [data-dialog-close] oder Backdrop-Klick — siehe app.js). Panel-Optik,
   damit ein Dialog wie eine schwebende Karte des Designsystems wirkt. */
.app-dialog{border:1px solid var(--line-c);border-radius:var(--r-lg);padding:0;
  background:var(--panel);color:var(--ink);width:min(560px,94vw);max-width:94vw;
  max-height:88vh;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.app-dialog::backdrop{background:rgba(0,0,0,.55)}
.app-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px var(--pad);border-bottom:1px solid var(--line-soft)}
.app-dialog-head h2{font-size:14.5px}

/* ---------- Bestätigungsdialog ---------- */
/* Ersetzt window.confirm (app.js legt den Dialog einmalig ins DOM). Bei
   gefährlichen Aktionen wird „Fortfahren" rot und der Fokus startet auf
   „Abbrechen" — Enter aus Versehen richtet dann keinen Schaden an. */
.confirm-dialog{border:1px solid var(--line-c);border-radius:var(--r-lg);padding:0;
  background:var(--panel);color:var(--ink);width:min(420px,92vw);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.confirm-dialog::backdrop{background:rgba(0,0,0,.55)}
.confirm-text{padding:18px var(--pad) 4px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px var(--pad)}
.confirm-dialog .btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.confirm-dialog .btn.danger:hover{filter:brightness(1.1)}

/* ---------- Spiele-Detailseite: Beliebteste Picks & Rangleiter-Grid ---------- */
/* Picks: je Katalog eine Bild-Kachel mit kleiner Katalog-Überschrift. Das Bild
   ist die Fläche — die Katalog-Art bestimmt das Seitenverhältnis (Charaktere
   hochkant, Maps quer, Rest quadratisch). */
.go-picks{flex-direction:row;flex-wrap:wrap;gap:16px}
.go-pick-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.go-pick-cat{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.go-pick{width:136px;display:flex;flex-direction:column;gap:2px}
.go-pick-media{display:block;width:100%;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line-soft);margin-bottom:4px}
.go-pick-character .go-pick-media{aspect-ratio:3/4}
.go-pick-map .go-pick-media{aspect-ratio:16/9}
.go-pick-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Ohne Bild: gleiche Fläche, getönt in der Eintragsfarbe, mit Kürzel/Initialen */
.go-pick-fallback{width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--cc);
  background:color-mix(in oklab,var(--cc) 16%,transparent)}
.go-pick-name{font-weight:600;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.go-pick-count{font-size:11.5px;color:var(--ink-3);font-family:var(--font-data)}

/* Rangleiter als Grid: die Rang-Grafiken sind breite Banner und bekommen die
   volle Kachelbreite (contain, nicht beschnitten), darunter Name und Anzahl. */
.go-rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 10px;padding:var(--pad)}
.go-rank-cell{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.go-rank-media{width:100%;aspect-ratio:5/2;display:grid;place-items:center}
.go-rank-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
/* Ränge ohne Grafik: Farbbalken in der Rangfarbe als Platzhalter */
.go-rank-media-bar::after{content:"";width:72%;height:7px;border-radius:99px;background:var(--rc)}
.go-rank-cell-name{font-size:12px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.go-rank-cell-count{font-family:var(--font-data)}
/* Breakpoints folgen .g-2-1: bis 1080px steht das Panel in der schmalen
   Seitenspalte (4 Kacheln), danach volle Breite (wieder 5), mobil 3. */
@media (max-width:1240px){ .go-rank-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1080px){ .go-rank-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:560px){ .go-rank-grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- Profil-Layout: 12-Spalten-Stapelung (pl-grid-…) ---------- */
/* Spielerprofil: Spalten-Stapelung (Masonry) im 12er-Raster. Der JS-
   Positionierer (app.js, läuft auf jedem [data-plmasonry]) liest data-x/
   data-w der Zellen, setzt left/top/width inline und die Klasse .pl-pos am
   Container — jeder Block landet in DOM-Reihenfolge direkt unter dem bisher
   tiefsten Block seines Spaltenbereichs, neben hohen Blöcken bleibt die
   Nachbarspalte frei nutzbar (kein Zeilen-Grid mehr, keine Sperrflächen).
   Ohne JS (kein .pl-pos) und mobil <820px: normale Block-Stapelung in
   DOM-Reihenfolge, Breite aus --plw bzw. mobil volle Breite. */
.pl-grid{position:relative}
.pl-grid-cell{min-width:0;display:flex;flex-direction:column;gap:var(--gap);
  width:calc(var(--plw,12)*100%/12);margin:0 0 var(--gap)}
.pl-grid.pl-pos>.pl-grid-cell{position:absolute;margin:0}
@media (max-width:820px){
  .pl-grid-cell{width:100%}
}

/* LIVE-GRID-EDITOR (Einstellungen → Profil-Layout): die Vorschau IST das
   Profil-Raster — jede Kachel rendert das echte Block-Markup (Inhalte ohne
   pointer-events), darüber ein Overlay mit Blockname, An/Aus und Resize-
   Griff. Dezente Hilfslinien zeigen die 12 Spalten. */
.pl-editor{position:relative;padding:12px;min-height:220px;
  border:1px dashed var(--line-c);border-radius:var(--r-lg);background:var(--panel-2)}
.pl-editor-cols{position:absolute;inset:12px;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);pointer-events:none}
.pl-editor-cols i{border-left:1px dashed color-mix(in oklab,var(--line-c) 60%,transparent);
  border-right:1px dashed color-mix(in oklab,var(--line-c) 60%,transparent);border-radius:2px}
.pl-editor-cell{position:relative;z-index:1;min-height:72px;
  cursor:grab;user-select:none;touch-action:none}
.pl-editor-cell .pl-editor-content{pointer-events:none;min-width:0}
.pl-editor-cell.placing{opacity:.55;cursor:grabbing}
.pl-editor-cell.placing .pl-editor-ov{box-shadow:inset 0 0 0 2px var(--accent);
  background:color-mix(in oklab,var(--accent) 8%,transparent)}
.pl-editor-skel{display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:88px;
  padding:12px 14px;border:1px dashed var(--line-c);border-radius:var(--r);background:var(--panel)}
/* Overlay: liegt über dem Block-Inhalt, fängt alle Eingaben ab. */
.pl-editor-ov{position:absolute;inset:0;z-index:5;border-radius:var(--r)}
.pl-editor-cell:hover .pl-editor-ov{box-shadow:inset 0 0 0 1px var(--accent);
  background:color-mix(in oklab,var(--accent) 4%,transparent)}
.pl-editor-name{position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;gap:6px;
  max-width:calc(100% - 70px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  padding:3px 9px;border-radius:99px;border:1px solid var(--line-c);background:var(--panel);
  font-size:11px;font-weight:600}
.pl-editor-size{font-family:var(--font-data);font-weight:400;color:var(--ink-3)}
.pl-editor-onoff{position:absolute;top:6px;right:20px;margin:0;display:inline-flex;
  padding:4px 6px;border-radius:99px;border:1px solid var(--line-c);background:var(--panel)}
.pl-editor-onoff input{margin:0;cursor:pointer}
.pl-grid-resize{position:absolute;top:6px;bottom:6px;right:3px;width:12px;border-radius:6px;
  cursor:ew-resize;display:grid;place-items:center;touch-action:none}
.pl-grid-resize::after{content:"";width:3px;height:60%;max-height:26px;border-radius:99px;
  background:var(--line-c)}
.pl-grid-resize:hover::after{background:var(--accent)}
/* Klon, der beim Ziehen dem Zeiger folgt (die Kachel selbst bleibt als
   Platzhalter an der Snap-Position im Raster stehen). */
.pl-editor-fly{position:fixed;z-index:999;margin:0;pointer-events:none;opacity:.85;overflow:hidden;
  border-radius:var(--r);background:var(--panel);box-shadow:0 14px 34px rgba(0,0,0,.4)}
/* Ablage „Verfügbare Widgets": abgeschaltete Blöcke als kompakte Chips
   (Inhalt versteckt), per Drag ins Raster aktivierbar. */
.pl-editor-tray{display:flex;flex-wrap:wrap;gap:8px;min-height:54px}
.pl-editor-tray:empty::after{content:"Alle Widgets sind aktiv — Häkchen abwählen legt sie hier ab.";
  font-size:12px;color:var(--ink-3);align-self:center}
.pl-editor-tray .pl-editor-cell{min-height:0;width:auto;border:1px dashed var(--line-c);
  border-radius:var(--r);background:var(--panel-2)}
.pl-editor-tray .pl-editor-content{display:none}
.pl-editor-tray .pl-editor-ov{position:static;display:flex;align-items:center;gap:8px;
  padding:7px 10px}
.pl-editor-tray .pl-editor-name,.pl-editor-tray .pl-editor-onoff{position:static;max-width:none;
  border:0;background:transparent;padding:0}
.pl-editor-tray .pl-grid-resize{display:none}
/* Klon einer Ablage-Kachel sieht wie der Chip aus (Klone aus dem Raster
   zeigen dagegen das echte Widget). */
.pl-editor-fly.chip .pl-editor-content{display:none}
.pl-editor-fly.chip .pl-editor-ov{position:static;display:flex;align-items:center;gap:8px;padding:7px 10px}

/* ---------- Icons (Lucide-Formen, Bewegung per CSS) ----------
   Die Formen kommen aus Lucide — derselben Bibliothek, auf der auch die
   animierten Icons von Animate UI beruhen. Deren Motion-Laufzeit (React)
   passt nicht in diese Anwendung, die Mikro-Animationen macht deshalb CSS:
   sie springen beim Überfahren des umgebenden Links/Buttons an, laufen
   einmal durch und bleiben bezahlbar (nur transform/opacity).
   Größe und Farbe erben die Icons weiterhin aus ihrem Umfeld. */
.ic{transition:transform .18s cubic-bezier(.34,1.4,.64,1)}
.ic *{transform-box:fill-box;transform-origin:center;transition:transform .2s ease,opacity .2s ease}

/* Auslöser: das nächste interaktive Element. .ic-still schaltet es ab. */
:is(a,button,summary,label,.step-row,.dash-item):hover .ic:not(.ic-still){transform:translateY(-1px)}

/* Zahnrad dreht — die bekannteste Bewegung, hier für „Verwaltung". */
:is(a,button,summary,label):hover .ic-settings:not(.ic-still){transform:rotate(60deg)}
.ic-settings{transition:transform .45s cubic-bezier(.3,.8,.3,1)}

/* Rettungsring dreht sich wie eine Boje. */
:is(a,button,summary,label):hover .ic-life:not(.ic-still){transform:rotate(45deg)}
.ic-life{transition:transform .4s ease}

/* Pokal hebt und kippt leicht an. */
:is(a,button,summary,label):hover .ic-match:not(.ic-still){transform:translateY(-2px) rotate(-6deg)}

/* Gegner: die beiden Klingen fahren gegeneinander — Kreuzen, kein Drehen. */
.ic-opponent polyline:first-child,.ic-opponent line:nth-child(2),
.ic-opponent line:nth-child(3),.ic-opponent line:nth-child(4){transform-origin:top left}
.ic-opponent polyline:nth-child(5),.ic-opponent line:nth-child(6),
.ic-opponent line:nth-child(7),.ic-opponent line:nth-child(8){transform-origin:top right}
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) polyline:first-child,
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) line:nth-child(2),
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) line:nth-child(3),
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) line:nth-child(4){transform:rotate(-7deg)}
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) polyline:nth-child(5),
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) line:nth-child(6),
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) line:nth-child(7),
:is(a,button,summary,label):hover .ic-opponent:not(.ic-still) line:nth-child(8){transform:rotate(7deg)}

/* Balken wachsen von unten nach — gestaffelt. */
.ic-standings :is(path:nth-child(2),path:nth-child(3),path:nth-child(4)){transform-origin:bottom}
:is(a,button,summary,label):hover .ic-standings:not(.ic-still) path:nth-child(2){transform:scaleY(1.25)}
:is(a,button,summary,label):hover .ic-standings:not(.ic-still) path:nth-child(3){transform:scaleY(1.15);transition-delay:.04s}
:is(a,button,summary,label):hover .ic-standings:not(.ic-still) path:nth-child(4){transform:scaleY(1.35);transition-delay:.08s}

/* Kalender: die Tagespunkte blinken der Reihe nach auf. */
:is(a,button,summary,label):hover .ic-calendar:not(.ic-still) path:nth-child(n+4){opacity:.35}
:is(a,button,summary,label):hover .ic-calendar:not(.ic-still) path:nth-child(4),
:is(a,button,summary,label):hover .ic-calendar:not(.ic-still) path:nth-child(8){opacity:1;transform:scale(1.6)}
:is(a,button,summary,label):hover .ic-calendar:not(.ic-still) path:nth-child(6),
:is(a,button,summary,label):hover .ic-calendar:not(.ic-still) path:nth-child(10){opacity:1;transform:scale(1.6);transition-delay:.07s}

/* Organigramm: die drei Knoten pulsen versetzt. */
:is(a,button,summary,label):hover .ic-teams:not(.ic-still) rect:nth-child(3){transform:scale(1.12)}
:is(a,button,summary,label):hover .ic-teams:not(.ic-still) rect:nth-child(1){transform:scale(1.12);transition-delay:.06s}
:is(a,button,summary,label):hover .ic-teams:not(.ic-still) rect:nth-child(2){transform:scale(1.12);transition-delay:.12s}

/* Controller wackelt, Klappe der Filmklappe kippt auf. */
:is(a,button,summary,label):hover .ic-games:not(.ic-still){transform:rotate(-7deg) translateY(-1px)}
:is(a,button,summary,label):hover .ic-clip:not(.ic-still) path:nth-child(2){transform:rotate(-9deg) translateY(-.5px)}

/* Bild: die „Sonne" pocht. Auge: die Pupille weitet sich. */
:is(a,button,summary,label):hover .ic-media:not(.ic-still) circle{transform:scale(1.3)}
:is(a,button,summary,label):hover .ic-eye:not(.ic-still) circle{transform:scale(1.25)}

/* Köpfe hüpfen an. */
:is(a,button,summary,label):hover :is(.ic-people,.ic-user):not(.ic-still) circle:first-of-type{transform:translateY(-1.5px)}

/* Punkte laufen durch (Überlauf-Menü, Ziehgriff). */
:is(a,button,summary,label):hover .ic-more:not(.ic-still) circle:nth-child(3){transform:translateY(-2px)}
:is(a,button,summary,label):hover .ic-more:not(.ic-still) circle:nth-child(1){transform:translateY(-2px);transition-delay:.06s}
:is(a,button,summary,label):hover .ic-more:not(.ic-still) circle:nth-child(2){transform:translateY(-2px);transition-delay:.12s}

/* Menü: die mittlere Linie zieht sich zusammen. */
:is(a,button,summary,label):hover .ic-menu:not(.ic-still) path:nth-child(2){transform:scaleX(.65)}

/* Aktionen: Stift schreibt, Deckel klappt, Play schiebt an. */
:is(a,button,summary,label):hover .ic-edit:not(.ic-still){transform:translate(1px,-1px) rotate(-8deg)}
:is(a,button,summary,label):hover .ic-trash:not(.ic-still) path:nth-child(5){transform:rotate(-14deg) translateY(-1px)}
:is(a,button,summary,label):hover .ic-play:not(.ic-still){transform:translateX(1.5px) scale(1.06)}
:is(a,button,summary,label):hover :is(.ic-info,.ic-check):not(.ic-still){transform:scale(1.12)}
:is(a,button,summary,label):hover .ic-close:not(.ic-still){transform:rotate(90deg)}

/* Aktiver Navigationspunkt zeigt seine Bewegung dauerhaft (dezent). */
.rail a[aria-current="page"] .ic-settings{transform:rotate(30deg)}

@media (prefers-reduced-motion:reduce){
  .ic,.ic *{transition:none!important}
  :is(a,button,summary,label):hover .ic,
  :is(a,button,summary,label):hover .ic *{transform:none!important;opacity:1!important}
}

/* ============================================================
   Wettkampf: Partien-Editor (.mg-*), Serien-Präsentation (.sr-*)
   und Import-Vorschau (.imp-*).
   Ein Match ist eine Serie aus Partien; Sets tragen ihre Runden
   eingerückt darunter. Der Normalfall — eine flache Partie —
   soll dabei nicht schwerer aussehen als früher das eine Feld.
   ============================================================ */

/* --- Partien pflegen --- */
.mg-card{border:1px solid var(--line-c);border-radius:var(--r);padding:10px 12px;
  display:flex;flex-direction:column;gap:10px;background:var(--panel-2)}
/* Ein Set hebt sich ab: seine Zahlen sind gerechnet, nicht eingetippt. */
.mg-set{border-left:3px solid var(--accent)}
.mg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mg-head .right{margin-left:auto}
.mg-label{flex:1 1 160px;min-width:120px}
.mg-body{display:grid;grid-template-columns:minmax(200px,1.2fr) 2fr;gap:12px;align-items:start}
.mg-map .lbl{display:block;margin-bottom:4px}
.mg-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.mg-fields .field{margin:0}
/* Gerechnete Felder sind sichtbar gesperrt statt heimlich ignoriert. */
.mg-fields input[readonly]{opacity:.6;cursor:not-allowed}
.mg-kids{display:flex;flex-direction:column;gap:6px;padding-left:14px;
  border-left:2px dashed var(--line-c)}
.mg-kid{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mg-kid input[type=text]{flex:1 1 120px;min-width:100px}
.mg-kid i{font-style:normal;color:var(--ink-3)}
.mg-stats{border:1px solid var(--line-soft);border-radius:var(--r)}
.mg-stats>summary{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
  font-weight:600;font-size:13px;user-select:none}
.mg-stats>summary::-webkit-details-marker{display:none}
.mg-stats>summary::before{content:"▸";font-size:10px;color:var(--ink-3);transition:transform .12s}
.mg-stats[open]>summary::before{transform:rotate(90deg)}
.mg-stats .tw{padding:0 10px 10px}
.mg-opp-sep td{background:var(--panel-2)}

/* --- Serie lesen --- */
.sr-list{display:flex;flex-direction:column;gap:12px}
.sr-map{border:1px solid var(--line-c);border-radius:var(--r);overflow:hidden}
.sr-head{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel-2)}
.sr-thumb{position:relative;margin:0;flex:0 0 auto;width:104px;aspect-ratio:16/9;border-radius:6px;
  overflow:hidden;background:var(--panel-2);display:grid;place-items:center}
.sr-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sr-thumb.no-img span{font-family:var(--font-head);font-weight:700;color:var(--ink-3)}
.sr-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.sr-n{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.15;overflow-wrap:anywhere}
.sr-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sr-score{margin-left:auto;flex:0 0 auto}
/* Runden eines Sets: eingerückt, ohne eigenes Map-Bild. */
.sr-kids{display:flex;flex-direction:column;gap:6px;padding:8px 10px 8px 24px;
  border-left:2px dashed var(--line-c);margin:8px 10px}
.sr-kid{border-radius:6px}
.sr-kid .sr-head{padding:5px 8px;background:transparent}
.sr-boards{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px}
.sr-board{min-width:0}
.sr-board .mr-sec-h{margin-bottom:4px}
.sr-board .mr-char{margin-top:3px}

/* --- Import-Vorschau --- */
.imp-game{border:1px solid var(--line-c);border-radius:var(--r);padding:10px 12px;background:var(--panel-2)}
.imp .field{margin:0}

@media (max-width:900px){
  .mg-body{grid-template-columns:1fr}
  .sr-boards{grid-template-columns:1fr}
}

/* ============================================================
   Schwebender Speichern-Knopf
   ============================================================
   Ein Knopf für alle Formulare: app.js hängt ihn an <body>, sobald der
   Nutzer etwas ändert, und sendet genau das bearbeitete Formular ab.
   Lage, Optik, Icon und Aufschrift kommen aus dem Erscheinungsbild
   (data-savebar-* am <html>, siehe Theme::htmlAttributes()).
   z-index bleibt bewusst niedrig: unter Dialogen (eigene Ebene),
   Tableiste (50), Hovercard/Menü (60) und Editor-Overlay (999). */
.savebar{position:fixed;z-index:45;display:flex;align-items:center;gap:10px;
  bottom:calc(16px + env(safe-area-inset-bottom));right:16px;
  max-width:calc(100vw - 32px);padding:7px 9px;
  border:1px solid var(--line-c);border-radius:calc(var(--r) + 7px);
  background:color-mix(in oklab,var(--panel) 92%,transparent);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  animation:savebar-in .16s ease-out}
.savebar[data-pos="links"]{right:auto;left:calc(236px + 16px)}
.savebar[data-pos="mitte"]{right:auto;left:calc(50% + 118px);transform:translateX(-50%);
  animation-name:savebar-in-mid}
@keyframes savebar-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes savebar-in-mid{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.savebar{animation:none}}

/* Statuszeile: nennt den Abschnitt, wenn die Seite mehrere Formulare hat. */
.savebar-note{margin:0;padding-left:5px;font-size:12px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(38vw,240px)}

.savebar-btn{display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:10px 16px;border-radius:var(--r);border:1px solid var(--accent);
  background:var(--accent);color:#fff;font-size:13.5px;font-weight:600;line-height:1.2;
  transition:filter .13s,background .13s,color .13s,transform .06s}
.savebar-ic{display:inline-flex}
.savebar-btn svg{width:18px;height:18px;display:block}
.savebar-btn:hover{filter:brightness(1.08)}
.savebar-btn:active{transform:translateY(1px)}
.savebar-btn:disabled,.savebar-btn.busy{opacity:.6;cursor:progress}
.savebar[data-style="kontur"] .savebar-btn{background:transparent;color:var(--accent)}
.savebar[data-style="kontur"] .savebar-btn:hover{background:color-mix(in oklab,var(--accent) 12%,transparent);filter:none}
.savebar[data-style="dezent"] .savebar-btn{background:color-mix(in oklab,var(--accent) 16%,transparent);
  color:var(--accent);border-color:transparent}
.savebar[data-style="dezent"] .savebar-btn:hover{background:color-mix(in oklab,var(--accent) 26%,transparent);filter:none}

/* Auf dem Handy klebt die Tableiste unten (~70px + Safe-Area) — der Knopf
   setzt sich darüber, sonst verdeckt er die Navigation. */
@media (max-width:820px){
  .savebar{right:12px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}
  .savebar[data-pos="links"]{left:12px}
  .savebar[data-pos="mitte"]{left:50%}
  .savebar-note{max-width:min(44vw,180px)}
  .savebar-btn{padding:11px 16px}
}

/* Vorschau-Attrappe im Erscheinungsbild: gleiche Optik, aber im Fluss. */
.savebar--demo{position:static;transform:none;animation:none;max-width:none;
  box-shadow:none;background:var(--panel-2);justify-content:flex-end}
.savebar--demo[data-pos="links"]{left:auto;justify-content:flex-start}
.savebar--demo[data-pos="mitte"]{left:auto;transform:none;justify-content:center}
.savebar--demo.off{opacity:.4}

/* Icon-Auswahl als Raster (Erscheinungsbild → Speichern-Knopf). */
.savebar-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.savebar-ic-pick{position:relative;display:grid;place-items:center;height:44px;cursor:pointer;
  border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel);color:var(--ink-2)}
.savebar-ic-pick input{position:absolute;opacity:0;width:0;height:0}
.savebar-ic-pick svg{width:20px;height:20px}
.savebar-ic-pick:hover{border-color:var(--ink-3);color:var(--ink)}
.savebar-ic-pick:has(input:checked){border-color:var(--accent);color:var(--accent);
  background:color-mix(in oklab,var(--accent) 10%,transparent)}
.savebar-ic-pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.savebar-ic-none{font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Kleinigkeiten aus dem Wettbewerbs-Umbau ----------
   .panel-b stapelt (flex-direction:column). Wo ein Panel-Körper zugleich eine
   Zeile sein soll (Fortschrittsstreifen, Zuordnungs-Zeilen), musste das bisher
   je Stelle per style-Attribut übersteuert werden — das hier ersetzt sie. */
.panel-b.row{flex-direction:row}
/* Auswahlfeld in einer Listenzeile: klein genug, um neben Text zu stehen. */
select.inline-sm{font-size:12px;padding:3px 6px;height:auto}

/* ---------- E-Mail-Zentrale & Vorlagen-Editor ---------- */

/* Die Abschnitts-Sprungmarken nutzen die Reiter-Optik, sind aber echte Links. */
a.ap-tab{display:inline-block;text-decoration:none}

/* Gruppenüberschrift im Ereignis-Katalog (KONTO, INHALTE, …). */
.mail-grp{padding:9px var(--pad) 6px;font-family:var(--font-data);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:var(--panel-2);border-top:1px solid var(--line-soft)}

/* Eine Ereignis-Zeile: Text wächst, alles rechts bleibt in fester Reihenfolge. */
.mail-ev{display:flex;align-items:center;gap:12px;padding:10px var(--pad);
  border-top:1px solid var(--line-soft)}
.mail-ev.off{opacity:.55}
.mail-ev-t{flex:1;min-width:0}
.mail-ev-t b{display:block;font-size:13.5px}
.mail-ev-t small{display:block;color:var(--ink-3);font-size:12px;margin-top:1px}
.mail-ev-t .mono{display:block;font-size:11px;color:var(--ink-3);opacity:.75;margin-top:2px}
.mail-ev .switch{margin-left:0}
.mail-ev form{display:flex;align-items:center;margin:0}
@media (max-width:700px){
  .mail-ev{flex-wrap:wrap}
  .mail-ev-t{flex:1 0 100%}
}

/* Protokoll: der Fehlertext darf die Tabelle nicht sprengen. */
.mail-log td:last-child{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Werkzeugleiste über dem visuellen Inhalt. */
.mail-tools{display:flex;flex-wrap:wrap;gap:5px;padding:8px var(--pad);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.mail-tool{padding:4px 9px;min-width:30px;border:1px solid var(--line-c);border-radius:var(--r);
  background:var(--panel);color:var(--ink-2);font-size:12.5px;line-height:1.4;cursor:pointer;transition:all .12s}
.mail-tool:hover{border-color:var(--accent);color:var(--accent)}

/* Der bearbeitbare Inhaltsbereich — bewusst hell und schmal wie eine Mail. */
.mail-visual{min-height:300px;max-height:60vh;overflow:auto;padding:16px var(--pad);
  font-size:14px;line-height:1.6;outline:0}
.mail-visual:focus{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--accent) 45%,transparent)}
.mail-visual h2{font-size:19px;margin:0 0 10px}
.mail-visual p{margin:0 0 12px}
.mail-visual ul,.mail-visual ol{margin:0 0 12px;padding-left:22px}
.mail-visual a{color:var(--accent);text-decoration:underline}
.mail-visual:empty::before{content:"Inhalt der E-Mail …";color:var(--ink-3)}

/* HTML-Reiter: Quelltext, gleiche Höhe wie der visuelle Bereich. */
.mail-code{min-height:320px;font-family:var(--font-data);font-size:12px;line-height:1.55;white-space:pre}

/* Platzhalter: Chips zum Einfügen, darunter die Erklärung. */
.mail-phs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mail-phs .chip{padding:4px 10px;font-size:11.5px}
.mail-phlist{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:12.5px}
.mail-phlist dt{color:var(--ink-2);font-size:11.5px}
.mail-phlist dd{margin:0;color:var(--ink-3)}

/* Vorschau: Betreffzeile wie im Mailprogramm, darunter die fertige Mail. */
.mail-subject{padding:9px 12px;border:1px solid var(--line-c);border-radius:var(--r) var(--r) 0 0;
  background:var(--panel-2);border-bottom:0}
.mail-subject b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-frame{display:block;width:100%;height:min(62vh,620px);border:1px solid var(--line-c);
  border-radius:0 0 var(--r) var(--r);background:#fff}

/* ============================================================
   Globale Suche — Feld in der Kopfleiste, Palette per Strg+K
   ============================================================
   Das Feld ist ein gewöhnliches GET-Formular; die Palette liegt darüber und
   ist reine Beschleunigung. Auf schmalen Geräten weicht das Feld der Lupe,
   weil neben Burger und Seitentitel schlicht kein Platz für eine Eingabe ist. */
.topbar-actions{align-items:center}
/* Der Seitentitel muss neben dem Suchfeld schrumpfen dürfen, statt es wegzudrücken. */
.topbar h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* input[type=search] steht nicht in der Grundregel für Formularfelder — die
   drei Suchfelder dieses Pakets bekommen ihre Hülle deshalb hier. */
.topsearch input[type=search],.subnav-filter input[type=search],.qs-page input[type=search]{
  border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel);
  color:var(--ink);font:inherit;padding:7px 10px}

.topsearch{position:relative;display:flex;align-items:center;min-width:0}
.topsearch-ic{position:absolute;left:9px;width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.topsearch input[type=search]{width:210px;max-width:34vw;padding-left:29px;padding-top:5px;padding-bottom:5px;
  font-size:12.5px;transition:width .15s ease-out}
.topsearch input[type=search]:focus{width:290px;max-width:44vw}
.qs-page input[type=search]{width:100%;font-size:14px}

/* Lupe als Knopf: nur auf schmalen Geräten sichtbar (Regel weiter unten). */
.topsearch-btn{display:none;width:34px;height:34px;place-items:center;border-radius:var(--r);color:var(--ink-2)}
.topsearch-btn svg{width:19px;height:19px}
.topsearch-btn:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 7%,transparent)}

/* Die Palette selbst: <dialog> im Modalmodus, damit Fokusfang und Escape vom
   Browser kommen und nicht nachgebaut werden müssen. */
.qs{position:fixed;inset:0;border:0;padding:0;margin:0;background:transparent;
  width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}
.qs::backdrop{background:rgba(8,11,15,.55)}
.qs-box{position:fixed;left:50%;top:11vh;transform:translateX(-50%);width:min(620px,94vw);
  max-height:min(70vh,560px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-c);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.qs-head{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line-soft)}
.qs-head svg{width:17px;height:17px;flex:none;color:var(--ink-3)}
.qs-head input{flex:1;min-width:0;border:0;background:transparent;padding:0;font-size:15px;color:var(--ink);outline:0}
.qs-esc{flex:none;font-family:var(--font-data);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line-c);border-radius:4px;padding:2px 6px}
.qs-list{overflow-y:auto;padding:6px;flex:1}
.qs-group{font-family:var(--font-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 8px 4px}
.qs-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);cursor:pointer;
  color:var(--ink);text-decoration:none}
.qs-item:hover,.qs-item[aria-selected="true"]{background:color-mix(in oklab,var(--accent) 14%,transparent)}
.qs-item[aria-selected="true"]{outline:1px solid color-mix(in oklab,var(--accent) 45%,transparent)}
.qs-t{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-s{font-size:11.5px;color:var(--ink-3);margin-left:auto;padding-left:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48%;text-align:right}
.qs-note{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:13px}
.qs-foot{border-top:1px solid var(--line-soft);padding:8px 13px;font-size:11.5px;color:var(--ink-3);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qs-foot .mono{font-size:11px}

/* ---------- Filterfeld über den Admin-Reitern ----------
   Startet im HTML als hidden; app.js blendet es ein. Ohne JavaScript bleibt
   damit einfach die vollständige Reiterliste stehen — kein totes Feld. */
.subnav-filter{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.subnav-filter input[type=search]{width:min(360px,100%);padding-top:6px;padding-bottom:6px;font-size:13px}
/* [hidden] muss hier ausdrücklich gewinnen: eigene display-Regeln im
   Autoren-Stylesheet schlagen die UA-Regel [hidden]{display:none} sonst aus. */
.subnav-filter[hidden],.subnav-group[hidden],.subnav a[hidden]{display:none}

@media (max-width:820px){
  /* Auf dem Handy trägt die Topbar nur noch die Lupe — sie öffnet dieselbe
     Palette wie Strg+K und ist ohne JavaScript ein Link auf /suche. */
  .topsearch{display:none}
  .topsearch-btn{display:grid}
  .qs-box{top:6vh;width:96vw;max-height:80vh}
  .qs-s{display:none}   /* Zusatzzeile weglassen statt zweizeilig zu quetschen */
  .qs-head input{font-size:16px}   /* verhindert Auto-Zoom auf iOS */
  .subnav-filter input[type=search]{width:100%}

  /* Fünf Ziele + „Mehr" = sechs Felder. Bei 320 px bleiben je ~52 px; Symbol
     und Schrift schrumpfen, die Beschriftung kürzt ab statt umzubrechen.
     Die Antippfläche bleibt mit ~48 px Höhe über der 44-px-Empfehlung.
     Nur direkte Kinder ansprechen — das „Mehr"-Sheet behält seine Größe. */
  .tabbar--5>a,.tabbar--5>.tabbar-more>summary{font-size:9px;padding:6px 1px;gap:2px;letter-spacing:-.01em}
  .tabbar--5>a svg,.tabbar--5>.tabbar-more>summary svg{width:18px;height:18px}
  .tabbar--5>a>span,.tabbar--5>.tabbar-more>summary>span{display:block;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}
}

/* ---------- Sammelansicht aller Aufstellungen (views/rosters_overview.php) ----------
   UX-Audit 07.08.2026 (Björn): „alle Aufstellungen auf einen Blick". Zwei
   Spalten ab Tablet, eine auf dem Handy — mehr als zwei Kaderkarten
   nebeneinander werden schmaler als die Namen darin. Die Spiel-Überschrift
   spannt bewusst über die volle Breite, damit die Gruppierung trägt. */
.ro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.ro-game{grid-column:1/-1;margin:14px 0 0;font-size:15px;letter-spacing:.01em}
.ro-game:first-child{margin-top:0}
.ro-card{margin:0;border-left:3px solid var(--ro-accent,var(--line-c))}
.ro-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.ro-slot{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;padding:6px 2px;
  border-bottom:1px solid color-mix(in oklab,var(--line-c) 55%,transparent)}
.ro-slot:last-child{border-bottom:0}
.ro-slot--warn{background:color-mix(in oklab,var(--warn) 9%,transparent);
  border-radius:6px;padding-left:7px;padding-right:7px}

/* ---------- Ebenen-Leiste der Profil-Gestaltung (views/_editor_levels.php) ----------
   UX-Audit 07.08.2026, Maßnahme V14: Die drei Editoren waren nicht
   auseinanderzuhalten. Die Rangfolge steht deshalb als kurze Liste unter der
   Reiterleiste — sichtbar, nicht in einem Hilfetext versteckt. Die aktuelle
   Ebene ist hervorgehoben, damit man den eigenen Satz zuerst liest. */
.el-levels{margin-bottom:10px}
.el-rank{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--line-c);border-radius:var(--r);overflow:hidden;background:var(--line-soft)}
.el-rank li{margin:0;padding:9px 13px;background:var(--panel);font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.el-rank li b{color:var(--ink-2)}
.el-rank li.on{background:color-mix(in oklab,var(--accent) 7%,var(--panel));color:var(--ink-2);
  box-shadow:inset 3px 0 0 var(--accent)}
.el-rank li.on b{color:var(--ink)}

/* ---------- Stratbook-Board (views/team_notes.php) ----------
   UX-Audit 07.08.2026, Kai (Ex-Trello): „Stratbook sind reine Notizen —
   erwartet wurde ein Board mit Anhängen." Die Spalten sind die Katalog-
   Einträge des Spiels (Maps, Agenten, Charaktere), nicht frei angelegte
   Listen; das Warum steht in Core\Stratbook.

   ZWEI REGELN, die das Layout tragen:
   1. Waagerecht scrollt das BOARD, nie die Seite. Ein Board, bei dem der
      ganze Seitenkörper mitwandert, reißt Kopfleiste und Reiter aus dem
      Bild — genau das macht Trello-Nachbauten unbrauchbar.
   2. Auf dem Handy sind Spalten nebeneinander wertlos (300 px passen nicht
      in 360 px Fensterbreite, ohne dass alles gleichzeitig scrollt).
      Deshalb kippt dieselbe Auszeichnung per CSS in einen Stapel — es gibt
      KEINE zweite Ansicht, die man doppelt pflegen müsste. */
.sb-catnav{margin-bottom:12px}

.sb-board{display:flex;align-items:flex-start;gap:12px;
  overflow-x:auto;overflow-y:visible;padding-bottom:12px;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.sb-col{flex:0 0 min(300px,84vw);display:flex;flex-direction:column;gap:8px;
  scroll-snap-align:start;background:var(--line-soft);border:1px solid var(--line-c);
  border-radius:var(--r);padding:10px}
.sb-col-h{display:flex;align-items:center;gap:8px;min-height:26px;
  padding-left:8px;box-shadow:inset 3px 0 0 var(--sb-c,var(--line-c))}
.sb-col-h h2{margin:0;font-size:14px;line-height:1.25;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-col-ic{width:22px;height:22px;border-radius:4px;object-fit:cover;flex:none}
.sb-col-b{display:flex;flex-direction:column;gap:8px;min-height:34px}
.sb-col-empty{margin:0;padding:8px 2px;font-size:12px;color:var(--ink-3)}

/* ---- Karte ---- */
.sb-card{background:var(--panel);border:1px solid var(--line-c);border-radius:var(--r);
  overflow:hidden}
.sb-card.pinned{box-shadow:inset 0 2px 0 var(--accent)}
.sb-card>details>summary{list-style:none;cursor:pointer;padding:9px 10px;
  display:grid;grid-template-columns:auto 1fr;gap:2px 7px;align-items:start}
.sb-card>details>summary::-webkit-details-marker{display:none}
.sb-card>details>summary:hover{background:var(--panel-2)}
/* Der Griff steht in Zeile 1, alles Übrige fließt rechts daneben bzw.
   darunter — deshalb spannen die Folgezeilen über beide Spalten. */
.sb-grip{color:var(--ink-3);display:flex;touch-action:none;cursor:grab;padding-top:1px}
.sb-grip svg{width:15px;height:15px}
.sb-card-t{min-width:0;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.sb-card>details>summary>.pill,
.sb-card-x,.sb-card-m{grid-column:2}
.sb-card-x{font-size:12px;line-height:1.45;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-card-m{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sb-clip{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.sb-clip svg{width:12px;height:12px}

.sb-card-b{border-top:1px solid var(--line-c);padding:10px;display:flex;
  flex-direction:column;gap:10px;font-size:12.5px}
.sb-card-b>*{margin:0}
.sb-body{white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}
.sb-move{display:flex;flex-direction:column;gap:6px;padding:9px;
  background:var(--panel-2);border-radius:var(--r)}
.sb-move .field{margin:0}
.sb-edit>summary{cursor:pointer;font-size:12px;color:var(--ink-2);padding:3px 0}
.sb-edit>form{padding-top:6px}
.sb-del{padding-top:2px}

/* ---- Anhänge: Bilder als Vorschau, alles andere als benannter Download ---- */
.sb-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.sb-file{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.sb-file img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;
  border:1px solid var(--line-c);display:block}
.sb-dl{display:flex;align-items:center;gap:6px;padding:10px 8px;border-radius:6px;
  border:1px dashed var(--line-c);background:var(--panel-2);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-dl svg{width:16px;height:16px;flex:none}
.sb-file figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:11px;color:var(--ink-3);min-width:0}
.sb-file figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-attach .ep-grid{--ep-min:96px;max-height:340px;overflow-y:auto;padding:2px}
.sb-up-thumb{width:76px;height:56px;border:1px solid var(--line-c);border-radius:6px;
  display:grid;place-items:center;overflow:hidden}
.sb-up-thumb img{width:100%;height:100%;object-fit:cover}

/* ---- Neue Karte direkt in der Spalte ---- */
.sb-add{display:flex;gap:6px;align-items:center}
.sb-add input{flex:1;min-width:0;font-size:12.5px;padding:6px 8px}

/* ---- Ziehen (Aufsatz, siehe app.js) ---- */
.sb-fly{position:fixed;z-index:80;pointer-events:none;opacity:.9;
  box-shadow:0 10px 26px rgba(0,0,0,.28);border-radius:var(--r);
  background:var(--panel);border:1px solid var(--accent)}
.sb-fly details{pointer-events:none}
.sb-dragging{opacity:.35}
.sb-ph{border:2px dashed var(--accent);border-radius:var(--r);
  background:color-mix(in oklab,var(--accent) 8%,transparent)}
.sb-busy{user-select:none}

@media (max-width:720px){
  /* Nebeneinander unbrauchbar → untereinander, Spaltenüberschrift bleibt.
     Der Stapel ist dieselbe Auszeichnung, nur ohne die Flex-Reihe. */
  .sb-board{display:block;overflow-x:visible;padding-bottom:0}
  .sb-col{max-width:none;margin-bottom:12px}
}

/* --- Rechtstexte (Impressum, Datenschutz, Nutzungsbedingungen) -------------
   Fließtext statt Formularmaske: begrenzte Zeilenlänge, ruhige Abstände.
   Die Klasse trägt die Abstände selbst, weil .panel-b als Flex-Spalte mit
   festem gap sonst jede Überschrift gleich weit vom Absatz darüber wie vom
   Absatz darunter setzte — und damit die Gliederung unlesbar machte. */
.legal-prose{max-width:68ch;display:block}
.legal-prose h3{font-size:14px;margin:22px 0 6px;line-height:1.35}
.legal-prose h3:first-child{margin-top:0}
.legal-prose p{margin:0 0 10px;line-height:1.62}
.legal-prose ul{margin:0 0 10px;padding-left:20px;line-height:1.62}
.legal-prose li{margin-bottom:4px}
.legal-prose li:last-child{margin-bottom:0}

/* Fußzeile mit den Rechtslinks: in der Seitenleiste unter dem Namenszug,
   auf der Anmeldeseite unter der Karte. Beide Male dieselbe Zeile. */
.legal-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:12px;font-size:11.5px}
.legal-links a{color:var(--ink-3);text-decoration:none}
.legal-links a:hover{color:var(--ink-1);text-decoration:underline}
.rail-foot .legal-links{justify-content:flex-start;gap:8px;margin:6px 0 0;font-size:10.5px}

/* ============================================================
   UX-Audit Lauf 5 (07.08.2026) — P5a–c: Auswertung am Handy
   ------------------------------------------------------------
   Befund des Berichts: Der Geräteabstand hängt nicht am Aufgabentyp,
   sondern an der FORM. Clip-Ansicht, Profil und News verlieren mobil fast
   nichts, weil sie von Haus aus schmal gedacht sind (Swipe, Kartenspalte,
   Fließtext). Die übrigen Felder arbeiten mit Tabellen und Filterleisten
   — Desktop-Formen, die mobil bisher nur eingepackt, nicht umgedacht
   wurden. Die drei Blöcke hier packen nicht ein, sie ändern die Form:

     P5c  erste Spalte bleibt beim Querscrollen stehen   (16 Läufe)
     P5b  Filterleiste ist mobil ein Aufklapper          (14 Läufe)
     P5a  Mehrfachauswahl wird zu Umschaltern            (12 Läufe)

   Alles hängt an Klassen, nicht an Seiten. Die Auswertung ist nur der
   erste Ort — dieselben Klassen tragen an jeder Tabelle und jeder
   Filterleiste der App (S4 verliert mobil 0,94 Punkte, obwohl die
   Abläufe dort ausgereift sind; die Form ist das Problem, nicht der
   Ablauf).
   ============================================================ */

/* ---------- P5c · Erste Spalte fixieren ----------
   Ohne sie wischt man nach rechts und weiß nicht mehr, wessen Zahlen
   man liest. Zwei Dinge machen eine sticky-Zelle richtig:

   1. UNDURCHSICHTIGER HINTERGRUND. Sonst scrollen die übrigen Spalten
      sichtbar unter ihr durch. Die Flächenfarbe steht nicht als fester
      Wert in der Regel, sondern kommt über --tw-row-bg von der ZEILE.
      So reicht jede Zeile ihre eigene Farbe durch: der Hover, den jede
      Tabelle hat (tbody tr:hover), ist unten mitgeregelt — und ein
      späteres Zebra oder eine markierte Zeile setzt einfach --tw-row-bg
      mit, die fixierte Zelle folgt ohne weitere Regel hier.
   2. LINIEN ALS box-shadow, nicht als border. Bei border-collapse:collapse
      gehört die Rahmenlinie dem Tabellenraster, nicht der Zelle — sie
      wandert beim Querscrollen nicht mit. Trennkante rechts und
      Zeilenlinie unten werden deshalb als inset-Schatten nachgezeichnet,
      in genau den Farben, die th/td weiter oben als border führen.

   --tw-line / --tw-under / --tw-edge sind die drei Anteile des Schattens.
   Sonderfälle (letzte Zeile, gescrollter Zustand) tauschen je einen
   Anteil, statt die ganze Regel zu wiederholen. */
.tw-sticky{--tw-sticky-bg:var(--panel)}
.tw-sticky tr{--tw-row-bg:var(--tw-sticky-bg)}
.tw-sticky tbody tr:hover{--tw-row-bg:var(--panel-2)}

/* Nur dort einschalten, wo wirklich quer gescrollt wird. Auf breiten
   Schirmen passt die Tabelle ohnehin — sticky kostet dort nur Rechenzeit
   und lässt in einzelnen Engines die Kanten flackern. 1080px ist die
   Grenze, ab der der Inhaltsbereich neben der Leiste eng wird; dieselbe
   Schwelle nutzt das Raster weiter oben schon. */
@media (max-width:1080px){
  /* Waagerecht scrollt der Container, nicht die Seite dahinter. */
  .tw-sticky{overscroll-behavior-x:contain}

  .tw-sticky table>*>tr>:first-child,
  .tw-sticky.tw-sticky-2 table>*>tr>:nth-child(2){
    position:sticky;z-index:2;background:var(--tw-row-bg);
    --tw-line:inset -1px 0 0 var(--line-c);
    --tw-under:inset 0 -1px 0 var(--line-soft);
    --tw-edge:0 0 0 0 transparent;
    box-shadow:var(--tw-line),var(--tw-under),var(--tw-edge)}
  .tw-sticky table>*>tr>:first-child{left:0}
  /* Die Kopfzelle links oben liegt in beiden Richtungen oben auf. */
  .tw-sticky table>thead>tr>:first-child,
  .tw-sticky.tw-sticky-2 table>thead>tr>:nth-child(2){z-index:3}
  /* Letzte Zeile hat keine Trennlinie (tbody tr:last-child td, Zeile 282). */
  .tw-sticky table>tbody>tr:last-child>:first-child,
  .tw-sticky.tw-sticky-2 table>tbody>tr:last-child>:nth-child(2){
    --tw-under:0 0 0 0 transparent}
  /* Erst wenn tatsächlich nach rechts gescrollt ist, legt sich eine weiche
     Kante über die durchlaufenden Spalten — das macht sichtbar, dass
     dahinter gescrollt wird. Die Klasse setzt app.js. */
  .tw-sticky.is-xscroll table>*>tr>:first-child,
  .tw-sticky.is-xscroll.tw-sticky-2 table>*>tr>:nth-child(2){
    --tw-edge:9px 0 12px -9px rgba(0,0,0,.42)}

  /* Variante für Tabellen, deren erste Spalte nur ein Häkchen oder eine
     laufende Nummer ist (matches_index: Auswahlkästchen; members_index:
     „Nr."; competitions_show: „Seed"). Dann bleiben BEIDE Spalten stehen
     und die Trennkante sitzt hinter der zweiten — sonst fixierte man das
     Kästchen und ließe den Namen wegwischen. Den Versatz misst app.js und
     legt ihn als --tw-c1 an den Container; eine Spaltenbreite kann CSS
     nicht kennen. */
  .tw-sticky.tw-sticky-2 table>*>tr>:first-child{--tw-line:0 0 0 0 transparent}
  .tw-sticky.tw-sticky-2 table>*>tr>:nth-child(2){left:var(--tw-c1,0)}
}

/* ---------- P5b · Filterleiste einklappbar ----------
   Sieben Filterfelder standen mobil untereinander, bevor das erste
   Ergebnis sichtbar war (Suri E 3, Kim E 4). Mobil ist <details> ein ganz
   normaler Aufklapper; das <summary> fasst die aktiven Filter zusammen
   (Text kommt vom Server) und sieht wie ein Filterknopf aus, nicht wie
   ein Aufklapp-Dreieck.

   Absichtlich OHNE Außenabstände: Die Leiste steht in einem .panel-b bzw.
   .stack mit eigenem gap — eigene margins zählten dort doppelt. */
.filters>summary{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:8px 14px;max-width:100%;
  border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel);
  color:var(--ink-2);font-size:13px;font-weight:550;line-height:1.35;
  cursor:pointer;user-select:none;list-style:none;
  transition:border-color .13s,color .13s,background .13s}
.filters>summary::-webkit-details-marker{display:none}
.filters>summary::marker{content:""}
.filters>summary:hover{border-color:var(--ink-3);color:var(--ink)}
.filters>summary:active{transform:translateY(1px)}
/* Trichter statt Dreieck — reine Form, kein zusätzliches Markup nötig. */
.filters>summary::before{content:"";width:13px;height:13px;flex:none;
  background:currentColor;
  clip-path:polygon(0 8%,100% 8%,60% 48%,60% 100%,40% 84%,40% 48%)}
/* Kleiner Winkel rechts: der einzige Hinweis auf den Zustand, dezent. */
.filters>summary::after{content:"";width:6px;height:6px;flex:none;margin-left:4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s;opacity:.7}
.filters[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.filters[open]>summary{border-color:var(--ink-3);color:var(--ink)}
.filters>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Zahl der aktiven Filter, falls der Server eine Plakette mitgibt. */
.filters>summary .pill{margin-left:2px}

@media (max-width:820px){
  /* Volle Breite = größeres Ziel; darunter Luft zum Ergebnis. */
  .filters>summary{display:flex;width:100%}
  .filters[open]>:not(summary){margin-top:10px}
}

/* Am Desktop darf die Leiste NICHT einklappbar wirken: dort ist Platz,
   und ein zusätzlicher Klick wäre ein Rückschritt gegenüber heute. Also
   Knopf weg — und der Inhalt sichtbar, AUCH wenn `open` fehlt (der Server
   schließt die Leiste, sobald ein Filter greift).

   Warum das greift: Der Browser verbirgt den Inhalt eines geschlossenen
   <details> nicht an den Kindern, sondern am Pseudoelement
   ::details-content mit content-visibility:hidden. Diese Regel steht im
   Browser-Stylesheet — und Autoren-CSS gewinnt gegen das
   Browser-Stylesheet unabhängig von der Spezifität. Gegenprobe
   „<details class='filters'> ohne open bei 1400px": summary display:none,
   ::details-content wieder visible, Inhalt also sichtbar. Für Engines
   ohne ::details-content (vor Chrome 131 / Safari 18.4 / Firefox 139)
   setzt app.js zusätzlich `open` — zwei unabhängige Wege zum selben
   Ergebnis. */
@media (min-width:821px){
  .filters>summary{display:none}
  .filters::details-content{content-visibility:visible;block-size:auto;overflow:visible}
}

/* ---------- P5a · Umschalter statt <select multiple> ----------
   „Auf dem Touchscreen die unangenehmste aller Mehrfachauswahlen"
   (Ela E 4, Luca E 5). Ersatz: <label class="chip chip-toggle"> mit einer
   Checkbox darin. Kein JS nötig — der Zustand hängt allein am :checked
   des eigenen Feldes.

   Die Regeln stehen SPÄTER als .chip (Zeile ~780) und überschreiben
   dessen Polsterung bei gleicher Spezifität. */
.chip-toggles{display:flex;flex-wrap:wrap;gap:8px}
.chip-toggle{position:relative;display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-c);background:var(--panel);color:var(--ink-2);
  font-size:13px;font-weight:550;white-space:nowrap;cursor:pointer;user-select:none;
  transition:background .13s,border-color .13s,color .13s}

/* Das Kästchen wird unsichtbar, aber NICHT entfernt: display:none oder das
   hidden-Attribut nähmen es aus der Tab-Reihenfolge und aus dem
   Screenreader-Baum — die Auswahl wäre ohne Maus nicht mehr bedienbar.
   Deshalb 1px durchsichtig statt weg. `display:block` steht bewusst da:
   es setzt ein eventuell mitgeliefertes hidden-Attribut außer Kraft
   (_entry_picker nutzt heute hidden — genau das ist dort der Haken). */
.chip-toggle input{position:absolute;display:block;width:1px;height:1px;
  margin:0;padding:0;opacity:0;pointer-events:none}

/* Erkennbar OHNE Kästchen: Die Fläche färbt sich, zusätzlich erscheint ein
   Haken — zwei Signale, nicht nur Farbe. Der Haken steht immer im Fluss
   (nur opacity wechselt), damit die Reihe beim Umschalten nicht springt. */
.chip-toggle::before{content:"\2713";font-size:12px;font-weight:700;line-height:1;
  flex:none;opacity:0;transform:scale(.7);
  transition:opacity .13s,transform .13s}
.chip-toggle:hover{border-color:var(--ink-3);color:var(--ink)}
.chip-toggle:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.chip-toggle:has(input:checked)::before{opacity:1;transform:none}
.chip-toggle:has(input:checked):hover{color:#fff}
/* Der Fokus liegt auf dem unsichtbaren Feld — der Rahmen gehört sichtbar
   ans Etikett. Gleiches Muster wie .savebar-ic-pick weiter oben. */
.chip-toggle:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.chip-toggle:has(input:disabled){opacity:.5;cursor:default}

/* 44px Antippfläche überall, wo mit dem Finger bedient wird. Am
   Zeigergerät wäre ein 44px-Pillenband neben 34px-Schaltflächen unruhig —
   deshalb an den Zeigertyp gebunden, nicht an die Seitenbreite allein. */
@media (pointer:coarse),(max-width:820px){
  .chip-toggle{min-height:44px;padding:0 17px;font-size:13.5px}
}

/* ---------- Tabellen als Karten (schmale Schirme) ----------
   Befund aus den UX-Läufen 5 und 6: Die Auswertung ist mobil eine
   Tabellenwüste — sechs von acht Blöcken sind Tabellen, und der Rat aus
   Lauf 6 lautete wörtlich, „eine zweite, schmale Darstellungsform" zu
   bauen: Karten statt Tabellenzeilen. Waagerechtes Scrollen (.tw-sticky)
   rettet den Überblick über zwölf Spalten nicht; es verschiebt ihn nur.

   Diese Form ist deshalb keine Auswertungs-Sonderlocke, sondern hängt an
   der Klasse `.tw-cards` am Container. Jede Tabelle der App kann sie
   bekommen; die Beschriftung je Zelle setzt app.js aus dem <thead>, damit
   keine View ihre Spaltentitel doppelt pflegen muss.

   Die Schwelle liegt bei 760px und nicht bei den 1080px der Sticky-Regel:
   zwischen beiden Breiten ist Scrollen noch zumutbar, darunter nicht mehr. */
@media (max-width:760px){
  .tw-cards{overflow:visible;overscroll-behavior-x:auto}
  .tw-cards table,.tw-cards tbody,.tw-cards tfoot,.tw-cards tr,.tw-cards td{display:block;width:auto}
  /* Der Kopf verschwindet nicht per display:none — Screenreader lesen die
     Zuordnung sonst nicht mehr vor; er wird nur aus dem Bild geschoben. */
  .tw-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tw-cards tbody tr,.tw-cards tfoot tr{
    border:1px solid var(--line-c);border-radius:var(--r-lg);background:var(--panel-2);
    padding:10px 13px;margin:0 0 8px}
  .tw-cards tfoot tr{border-color:color-mix(in oklab,var(--accent) 45%,var(--line-c))}
  .tw-cards tbody tr:hover{background:var(--panel-2)}
  /* Die Sticky-Regel greift bis 1080px und würde hier eine Zelle über die
     Karte kleben. In der Kartenform gibt es keine Spalten mehr — also weg. */
  .tw-cards.tw-sticky table>*>tr>:first-child,
  .tw-cards.tw-sticky.tw-sticky-2 table>*>tr>:nth-child(2){
    position:static;box-shadow:none;background:transparent;left:auto}
  .tw-cards td{
    display:flex;gap:14px;align-items:baseline;justify-content:space-between;
    border:0;padding:4px 0;text-align:right;white-space:normal}
  .tw-cards td::before{
    content:attr(data-label);flex:0 1 auto;text-align:left;
    font-family:var(--font-data);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);line-height:1.5}
  /* Zellen ohne Beschriftung (Kopfspalte, verbundene Zellen, Aktionen)
     bekommen die volle Breite statt einer leeren linken Hälfte. */
  .tw-cards td:not([data-label])::before,
  .tw-cards td[data-label=""]::before{content:none}
  .tw-cards td:not([data-label]),
  .tw-cards td[data-label=""]{display:block;text-align:left}
  /* Die erste Zelle ist die Überschrift der Karte. */
  .tw-cards tbody tr>td:first-child,.tw-cards tfoot tr>td:first-child{
    font-size:14px;font-weight:650;padding:0 0 7px;margin-bottom:5px;
    border-bottom:1px solid var(--line-soft);display:block;text-align:left}
  .tw-cards tbody tr>td:first-child::before,.tw-cards tfoot tr>td:first-child::before{content:none}
  .tw-cards td.num{justify-content:space-between}
  /* Zahlenspalten sind in der Zeilenform rechtsbündig; als Karte steht der
     Wert schon rechts — die zusätzliche Ausrichtung würde ihn verdoppeln. */
  .tw-cards td.num,.tw-cards td.mono{text-align:right}
  .tw-cards td .meter{min-width:110px}
  /* Leere Zellen tragen in der Kartenform nichts bei und kosten eine Zeile. */
  .tw-cards td:empty{display:none}
}

/* Teilen-/Sprungleiste der Auswertung. Steht bewusst zwischen Kopfzahlen
   und erstem Block: am Handy ist sie damit ohne Scrollen erreichbar, am
   Schirm stört sie nicht, weil sie nur eine Zeile hoch ist. */
.an-share{gap:8px;align-items:center;flex-wrap:wrap;margin:2px 0 -4px}

/* ---------- Stellschrauben des Designers ----------
   Zwei Werte, die es als Variable noch nicht gab, weil sie überall fest
   eingetragen waren: die Rahmenstärke und die Dauer der Übergänge. Der
   Designer (Core\DesignTokens) kann beide setzen; hier stehen die
   Vorgaben und die Stellen, an denen sie greifen.

   Bewusst eine kurze Liste statt eines Universalselektors: `* {
   transition-duration }` würde auch Übergänge treffen, die aus gutem Grund
   eine eigene Dauer haben (Aufklapper, Fortschrittsbalken). */
:root{--bw:1px;--dur:130ms}
.panel,.field input,.field select,.field textarea,.btn,.btn-2,
.asst-sec,.asst-group,.tftp-panel,.tftp-card{border-width:var(--bw)}
.btn,.btn-2,.chip-toggle,.preset-cell,.dz-card,.asst-chev,.tftp-hex i.bg{transition-duration:var(--dur)}

/* ---------- Belohnungen: Rahmen und Bewegung ----------
   Der Rahmen ist ein transparentes Bild ÜBER dem Profilbild, kein Ersatz
   dafür: absolut positioniert, ohne Zeigerereignisse, damit er den Link
   darunter nicht abfängt. Er wird als Hintergrundbild gesetzt und nicht als
   <img>, weil `contain` hier genau das Richtige tut und ein leeres alt-Attribut
   entfällt — der Rahmen trägt keine Information, die vorgelesen werden müsste.

   Die Bewegungen sind eine geschlossene Liste (Core\Reward::ANIMATIONS). Sie
   laufen beim Überfahren, nicht dauerhaft: eine Karte, die ohne Zutun zappelt,
   ist in einer Mitgliederliste mit dreißig Einträgen unbenutzbar. Wer im
   Betriebssystem weniger Bewegung eingestellt hat, bekommt keine — das ist
   keine Höflichkeit, sondern eine Anforderung an bedienbare Oberflächen. */
.mini-av{position:relative}
.mini-frame{position:absolute;inset:-14%;display:block;pointer-events:none;
  background-size:contain;background-position:center;background-repeat:no-repeat}

@keyframes rw-puls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.82}}
@keyframes rw-funkeln{0%,100%{filter:none}45%{filter:brightness(1.5) saturate(1.3)}}
@keyframes rw-glanz{from{transform:translateX(-130%) rotate(18deg)}to{transform:translateX(230%) rotate(18deg)}}

.mini[data-anim]{transition:transform var(--dur,130ms) ease,box-shadow var(--dur,130ms) ease}
.mini[data-anim="schweben"]:hover{transform:translateY(-4px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.mini[data-anim="neigen"]:hover{transform:perspective(700px) rotateX(3deg) rotateY(-3deg)}
.mini[data-anim="zoom"]:hover .mini-av img{transform:scale(1.09)}
.mini[data-anim="zoom"] .mini-av img{transition:transform 320ms ease}
.mini[data-anim="puls"]:hover .mini-frame{animation:rw-puls 1.1s ease-in-out infinite}
.mini[data-anim="funkeln"]:hover .mini-frame{animation:rw-funkeln .9s ease-in-out 2}
/* „Glanz" braucht einen Streifen, den es sonst nirgends gibt — er entsteht
   als Pseudoelement und existiert nur, solange der Zeiger auf der Karte ist. */
.mini[data-anim="glanz"] .mini-av{overflow:hidden}
.mini[data-anim="glanz"]:hover .mini-av::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:rw-glanz .85s ease-out 1}

@media (prefers-reduced-motion:reduce){
  .mini[data-anim]:hover{transform:none}
  .mini[data-anim]:hover .mini-frame,
  .mini[data-anim]:hover .mini-av::after{animation:none}
  .mini[data-anim="zoom"]:hover .mini-av img{transform:none}
}

/* ============================================================
   Diagramme (Core\Chart) — serverseitig gezeichnetes Inline-SVG
   ============================================================
   Die Formen kommen fertig aus PHP; hier steht nur, wie sie im Layout
   sitzen. Bewusst KEINE festen Pixelbreiten: die SVGs tragen eine viewBox
   und skalieren mit ihrem Container — das ist der Unterschied zwischen
   „schmal gedacht" und „schmal gequetscht", den Lauf 5 als eigentliche
   Ursache des Geraeteabstands benannt hat. */
.chart{margin:0;display:flex;flex-direction:column;gap:8px}
.chart-h{font-size:13px;font-weight:600;color:var(--ink-2);display:flex;flex-direction:column;gap:2px}
.chart-h span{font-size:12px;font-weight:400;color:var(--ink-3);line-height:1.45;max-width:70ch}
.chart-svg{display:block;width:100%;height:auto;overflow:visible}
.chart-area{height:200px}
.chart-svg text{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.chart-rest{margin:2px 0 0;font-size:12px;color:var(--ink-3)}

/* Waagerechte Balken als HTML statt SVG: so bleibt der Text bei 375 px so
   gross, wie das Stylesheet ihn setzt, statt mit der viewBox zu schrumpfen.
   Genau daran ist die Auswertung in UX-Lauf 5 mobil gescheitert. */
.cbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cbars li{display:grid;grid-template-columns:minmax(96px,1.5fr) 3fr minmax(78px,auto);
  gap:12px;align-items:center}
.cbar-lbl{min-width:0;display:flex;flex-direction:column;gap:1px}
.cbar-lbl b{font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar-lbl span{font-size:11px;color:var(--ink-3);line-height:1.35}
.cbar-track{height:14px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.cbar-track i{display:block;height:100%;border-radius:4px}
.cbar-val{display:flex;align-items:baseline;gap:7px;justify-content:flex-end;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cbar-val b{font-size:13px;font-weight:var(--num-weight);color:var(--ink)}
.cbar-val em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
@media (max-width:560px){
  /* Schmal: Name ueber den Balken, Zahl daneben — drei Spalten waeren hier
     jeweils zu eng fuer sich. */
  .cbars li{grid-template-columns:1fr auto;grid-template-areas:"lbl val" "bar bar";gap:3px 10px}
  .cbar-lbl{grid-area:lbl}
  .cbar-val{grid-area:val}
  .cbar-track{grid-area:bar;margin-bottom:4px}
}

/* Ehrlicher Leerzustand statt leerem Rahmen: er sagt, WARUM nichts da ist. */
.chart-empty{border:1px dashed var(--line-c);border-radius:var(--r);padding:18px}
.chart-empty p{margin:0;font-size:13px;color:var(--ink-3)}

.chart-single{display:flex;flex-direction:column;gap:2px;padding:6px 0}
.chart-single b{font-size:30px;font-weight:700;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.chart-single span{font-size:13px;color:var(--ink-2)}
.chart-single em{font-style:normal;font-size:12px;color:var(--ink-3)}

/* Ring + Legende nebeneinander, ab schmal untereinander. Die Legende traegt
   Zahl UND Anteil als Text — im Ring selbst ist beides nicht lesbar, und ein
   Hover-Tooltip erreicht kein Touch-Geraet. */
.chart-donut{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.chart-donut>.chart-svg{width:160px;flex:none}
.chart-legend{list-style:none;margin:0;padding:0;flex:1;min-width:150px;display:flex;
  flex-direction:column;gap:5px}
.chart-legend li{display:grid;grid-template-columns:12px 1fr auto auto;gap:8px;align-items:center;
  font-size:12.5px;color:var(--ink-2)}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:block}
.chart-legend b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:var(--num-weight)}
.chart-legend em{font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}

.chart-spark{width:100%;height:26px;display:block}
.stat-spark{display:flex;flex-direction:column;gap:1px;margin-top:4px}

/* Diagramme als eigenes Raster: der Verlauf breit, Ringe schmal daneben. */
.chart-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.chart-panel{grid-column:span 8;min-width:0}
.chart-panel--narrow{grid-column:span 4}
@media (max-width:1080px){
  .chart-panel,.chart-panel--narrow{grid-column:span 12}
}
@media (max-width:820px){
  .chart-area{height:170px}
  .chart-donut>.chart-svg{width:132px}
  .chart-legend em{min-width:46px}
}

/* ============================================================
   Ablegeflächen für Dateien (views/_dropzone.php)
   ============================================================ */
.dropzone{border:1.5px dashed var(--line-c);border-radius:var(--r);padding:14px;
  margin:0 0 10px;transition:border-color .12s,background .12s}
.dropzone.is-over{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,transparent)}
.dropzone-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dropzone-in>svg{width:22px;height:22px;flex:none;color:var(--ink-3)}
.dropzone.is-over .dropzone-in>svg{color:var(--accent)}
.dropzone-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dropzone-txt b{font-size:13.5px;color:var(--ink)}
.dropzone-txt span{font-size:12px;color:var(--ink-3);line-height:1.45}
.dropzone-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.dropzone-list li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  padding:5px 8px;border-radius:6px;background:var(--panel-2)}
.dropzone-list b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropzone-list span{color:var(--ink-3);flex:none;font-variant-numeric:tabular-nums}
.dropzone-error{margin:8px 0 0;font-size:12.5px;color:var(--bad)}
.dsg-import{display:flex;flex-direction:column;gap:8px}
.dsg-import .dropzone{margin:0}
@media (max-width:820px){
  /* Auf dem Telefon gibt es kein Ziehen — dort ist die Fläche schlicht ein
     großer Knopf für den Dateidialog, und der Text sagt das auch. */
  .dropzone{padding:12px}
}

/* ============================================================
   Tekken-Erweiterung (plugins/tekken-ewgf)
   ============================================================
   Kennzahlen gross und zuerst, Charaktere als waagerechte Balken. Jeder Wert
   steht als Text im Bild — auf ewgf.gg liegt ein Teil davon im Hover, und auf
   einem Telefon ist das keine Feinheit, sondern eine fehlende Angabe. */
.tk-panel .panel-b{display:flex;flex-direction:column;gap:12px}
.tk-name{font-family:var(--font-data);font-size:15px;font-weight:700;color:var(--ink);
  letter-spacing:.02em}
.tk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.tk-kpi{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line-soft)}
.tk-kpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.tk-kpi b{font-family:var(--font-data);font-size:22px;font-weight:var(--num-weight);color:var(--ink);
  line-height:1.15}
.tk-kpi em{font-style:normal;font-size:11px;color:var(--ink-3)}
.tk-h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  font-weight:700;margin:4px 0 0}
.tk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-top:8px;border-top:1px solid var(--line-soft)}

/* Fusszeile einer Einstellungs-Karte: Knopf plus die Zeile, die sagt, was er
   wirklich tut. */
.ap-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line-soft)}
.ap-save .small{max-width:52ch;line-height:1.45}
/* Trennlinie mit Beschriftung INNERHALB einer Karte — sie haelt zusammen, was
   zusammengehoert, ohne dafuer eine zweite Karte aufzumachen. */
.ap-sep{display:flex;align-items:center;gap:10px;margin:6px 0 2px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700}
.ap-sep::after{content:"";flex:1;height:1px;background:var(--line-soft)}

/* ============================================================
   Auswertung: gesetzte Filter als Marken + dreistufiges Formular
   ============================================================ */

/* Die gesetzten Filter, immer sichtbar — auch wenn die Leiste zu ist. Jede
   Marke traegt ihr eigenes x, und das ist ein LINK auf dieselbe Seite ohne
   genau diesen Filter (kein JavaScript noetig). */
.fchips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:11px 13px;border-radius:var(--r);background:var(--panel-2);
  border:1px solid var(--line-soft)}
.fchips-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:700;margin-right:2px}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 10px;
  border-radius:999px;background:var(--panel);border:1px solid var(--line-c);
  font-size:12.5px;line-height:1.3;max-width:100%}
.fchip-k{color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.fchip b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Das x ist eine echte Tap-Flaeche, nicht ein Zeichen neben dem Text. */
.fchip-x{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-3);font-size:15px;line-height:1;text-decoration:none;
  transition:background .12s,color .12s}
.fchip-x:hover,.fchip-x:focus-visible{background:var(--bad-bg);color:var(--bad);text-decoration:none}
.fchips-reset{font-size:12px;color:var(--ink-3);margin-left:2px}

/* Schritte. OHNE JavaScript stehen alle drei untereinander offen — dann ist
   es schlicht ein gegliedertes Formular. app.js zeigt einen zur Zeit. */
.fsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fstep{border-left:2px solid var(--line-c);padding-left:14px}
.fstep-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.fstep-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--line-soft);color:var(--ink-2);font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.fstep-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.fstep-t b{font-size:14px;color:var(--ink)}
.fstep-t span{font-size:12px;color:var(--ink-3);line-height:1.4}
.fstep-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.fstep-nav button[hidden]{display:none}

/* Nur mit JavaScript: der aktive Schritt ist hervorgehoben, die anderen sind
   auf ihre Kopfzeile zusammengefaltet und per Klick anspringbar. */
.fsteps.is-stepped .fstep{border-left-color:transparent}
.fsteps.is-stepped .fstep.is-on{border-left-color:var(--accent)}
.fsteps.is-stepped .fstep.is-on .fstep-n{background:var(--accent);color:#fff}
.fsteps.is-stepped .fstep.is-done .fstep-n{background:color-mix(in oklab,var(--accent) 22%,transparent);
  color:var(--accent)}
.fsteps.is-stepped .fstep:not(.is-on) .fstep-b{display:none}
.fsteps.is-stepped .fstep:not(.is-on) .fstep-h{cursor:pointer;opacity:.72}
.fsteps.is-stepped .fstep:not(.is-on) .fstep-h:hover{opacity:1}
/* Was in einem zugeklappten Schritt schon gesetzt ist, steht in seiner
   Kopfzeile — sonst muesste man ihn aufklappen, um es zu sehen. */
.fstep-sum{font-size:11.5px;color:var(--accent);font-weight:600}

.fsteps-go{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.fsteps-go .small{max-width:46ch;line-height:1.45}

@media (max-width:640px){
  .fchips{padding:9px 10px}
  .fstep{padding-left:11px}
}

/* ------------------------------------------------------------------
   Nachtrag: Klasse .hint
   ------------------------------------------------------------------
   Sie wurde in Formularen benutzt (Auswertungs-Schritte, Tekken-Verwaltung),
   war aber nie definiert — der Text erschien dadurch in voller Groesse und
   dominierte das Feld, unter dem er stehen sollte. Kein Fehler, den ein
   Linter findet: eine unbekannte Klasse ist gueltiges HTML. */
.hint{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--ink-3);
  max-width:64ch}
.row > .hint{margin-top:0}

/* ------------------------------------------------------------------
   Nachtrag: lange, unumbrechbare Zeichenketten in Kennzahl-Kacheln
   ------------------------------------------------------------------
   `.field > label`, `.flash` und `.note` waren gegen Wortungetueme geschuetzt,
   die Kacheln nicht. Ein langer Gegnername, ein Dateipfad in einer Meldung
   oder eine ungewoehnliche Kennzahl-Beschriftung machte das Raster breiter als
   den Bildschirm — und weil der Koerper `overflow-x:clip` traegt, wurde rechts
   abgeschnitten statt scrollbar: Filter-Marken, Hinweistexte und das dritte
   Auswahlfeld eines Schritts waren dann nicht mehr zu sehen.

   `min-width:0` ist der eigentliche Hebel: ohne ihn darf ein Raster- oder
   Flex-Kind nicht unter seine Inhaltsbreite schrumpfen. */
.grid > *,.kpi{min-width:0}
.kpi-v,.kpi-m{overflow-wrap:anywhere}
.fchip{min-width:0}
.fchip b{max-width:22ch}
.fstep-b,.fstep-t{min-width:0}
.fstep-sum{overflow-wrap:anywhere}

/* Gemerkte Quell-Links eines Matches (views/_match_sync.php). Jeder Link
   gehoert zu genau EINEM Match — das setzt UNIQUE(source, ref) durch; hier
   steht der Weg zurueck. */
.msync-links{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.msync-links li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border-radius:var(--r);background:var(--panel-2);
  border:1px solid var(--line-soft)}
.msync-url{flex:1;min-width:0;font-size:12px;overflow-wrap:anywhere;color:var(--ink-2)}
.msync-links form{margin-left:auto}

/* ============================================================
   Match anlegen: Wegwahl
   ============================================================ */
.wegwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-bottom:14px}
.weg{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line-c);text-decoration:none;
  transition:border-color .12s,background .12s}
.weg:hover{border-color:var(--accent);text-decoration:none}
.weg.is-on{border-color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 45%,transparent)}
.weg--aus{opacity:.6}
.weg-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--accent)}
.weg-ic svg{width:18px;height:18px}
.weg-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.weg-txt b{font-size:14.5px;color:var(--ink)}
.weg-txt>span{font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* ============================================================
   Bento — das Raster fuer Uebersichtsseiten
   ============================================================
   Ein Raster aus 12 Spalten, in dem Kacheln verschieden gross sein duerfen.
   Der Zweck ist nicht Dekoration: Auf einer Uebersicht sind nicht alle Blöcke
   gleich wichtig, und ein Raster aus lauter gleich grossen Karten behauptet
   genau das. Die grosse Kachel ist die Antwort auf die Hauptfrage der Seite,
   die kleinen sind Beiwerk.

   Klassen: .bento > .bento-item mit .is-{1..12} fuer die Breite und
   optional .tall fuer doppelte Hoehe. Ohne Angabe: 4 Spalten. */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.bento-item{grid-column:span 4;min-width:0}
.bento-item.is-2{grid-column:span 2}
.bento-item.is-3{grid-column:span 3}
.bento-item.is-4{grid-column:span 4}
.bento-item.is-5{grid-column:span 5}
.bento-item.is-6{grid-column:span 6}
.bento-item.is-7{grid-column:span 7}
.bento-item.is-8{grid-column:span 8}
.bento-item.is-9{grid-column:span 9}
.bento-item.is-12{grid-column:span 12}
.bento-item>.panel{margin:0;height:100%}
.bento-item.tall>.panel{min-height:280px}

/* Zwei Stufen statt fuenf: bei mittlerer Breite werden Drittel zu Haelften,
   schmal wird alles zur vollen Breite. Mehr Stufen bringen nur mehr Stellen,
   an denen es falsch aussieht. */
@media (max-width:1080px){
  .bento-item.is-2,.bento-item.is-3,.bento-item.is-4{grid-column:span 6}
  .bento-item.is-5,.bento-item.is-7,.bento-item.is-8,.bento-item.is-9{grid-column:span 12}
}
@media (max-width:720px){
  .bento-item,.bento-item[class*="is-"]{grid-column:span 12}
}

/* Kompakte Kennzahl-Kachel fuer das Bento — kleiner als .kpi, damit mehrere
   nebeneinander passen, ohne dass die Seite zur Zahlenwand wird. */
.bkpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line-c);height:100%;min-width:0}
.bkpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.bkpi b{font-family:var(--font-data);font-size:26px;font-weight:var(--num-weight);
  color:var(--ink);line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
.bkpi em{font-style:normal;font-size:11.5px;color:var(--ink-3);line-height:1.4}

/* Spielerauswahl der Auswertung */
.pplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ppcard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line-c);text-decoration:none;
  transition:border-color .12s,transform .12s}
.ppcard:hover{border-color:var(--accent);transform:translateY(-1px);text-decoration:none}
.ppcard .av{flex:none}
.ppcard-txt{min-width:0;display:flex;flex-direction:column;gap:1px;flex:1}
.ppcard-txt b{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppcard-txt span{font-size:11.5px;color:var(--ink-3)}
.ppcard-num{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.ppcard-num b{display:block;font-size:15px;color:var(--ink);font-weight:var(--num-weight)}
.ppcard-num span{font-size:10.5px;color:var(--ink-3)}

/* Feste Schnellfilter der Spieler-Auswertung */
.qfilter{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qfilter-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:700;margin-right:2px}
.qfilter a{padding:5px 12px;border-radius:999px;font-size:12.5px;color:var(--ink-2);
  border:1px solid var(--line-c);background:var(--panel);text-decoration:none}
.qfilter a:hover{color:var(--ink);border-color:var(--ink-3);text-decoration:none}
.qfilter a[aria-current="true"]{color:#fff;background:var(--accent);border-color:var(--accent)}

/* Quellenangabe der Tekken-Erweiterung. Die API-Bedingungen von ewgf.gg
   verlangen eine klare Nennung bei jeder Anzeige — sie darf deshalb nicht
   wie ein beilaeufiges Etikett aussehen und nicht wegoptimiert werden. */
.tk-quelle{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  color:var(--ink-3);text-decoration:none;border-bottom:1px dotted var(--ink-3)}
.tk-quelle:hover{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none}

/* Kompakte Aufzaehlung in Panels. Ohne diese Regel erbt <ul> den Browser-
   Standard: 40px Einzug und volle Textgroesse mitten in einer Erklaerung. */
.tight{margin:0;padding-left:18px;display:grid;gap:5px;
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.tight li{margin:0}
.tight b{color:var(--ink)}

/* ====================================================================
   Saison-Statistik eines Teams
   ==================================================================== */

/* Nur fuer Hilfsmittel sichtbar. `display:none` waere falsch — Screenreader
   ueberspringen das, und dann hat das Auswahlfeld gar keine Beschriftung. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.season-pick{display:flex;gap:6px;align-items:center}
.season-pick select{height:30px;padding:0 26px 0 9px;font-size:12.5px;max-width:230px}
/* Hat JavaScript das Absenden uebernommen, ist der Knopf ueberfluessig. Ohne
   Skript bleibt er stehen — die Auswahl muss auch dann abschickbar sein. */
.season-pick.is-auto button{display:none}

/* Formstreifen: die letzten Ergebnisse, neuestes links. Buchstabe UND Farbe,
   nie Farbe allein — sonst ist der Streifen fuer rot-gruen-Blinde leer. */
.formstreak{display:flex;gap:3px;flex-wrap:wrap}
.formstreak i{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
  font-style:normal;font-size:11px;font-weight:700;font-family:var(--font-data);
  color:#fff;background:var(--ink-3)}
.formstreak i.w{background:var(--ok)}
.formstreak i.l{background:var(--bad)}
.formstreak i.d{background:var(--ink-3)}

/* Ausklappbare Nebensache in einem Panel. Der Pfeil dreht sich, damit der
   Zustand ohne Farbe erkennbar ist. */
.fold{border-top:1px solid var(--line-c);padding-top:9px}
.fold>summary{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  font-size:12.5px;color:var(--ink-2);list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"▸";font-size:10px;color:var(--ink-3);transition:transform .12s}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold>summary:hover{color:var(--ink)}

/* ====================================================================
   Zugehoerigkeits-Historie (Bereich und Aufstellung)
   ====================================================================
   Eine Zeile je Zeitraum. Zugeklappt liest sie sich wie eine Tabellenzeile,
   aufgeklappt steckt ein Formular darin — Tabellen koennen das nicht, ohne
   dass das Markup bricht. */
.mhist{display:flex;flex-direction:column;gap:6px}
.mhist-row{border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel-2,var(--panel));
  overflow:hidden}
.mhist-row.is-past{opacity:.72}
.mhist-row.is-past:hover,.mhist-row.is-past[open]{opacity:1}

.mhist-sum{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  user-select:none;list-style:none;flex-wrap:wrap}
.mhist-sum::-webkit-details-marker{display:none}
div.mhist-sum{cursor:default}
details.mhist-row>.mhist-sum::after{content:"▸";margin-left:auto;font-size:10px;color:var(--ink-3);
  transition:transform .12s;flex:none}
details.mhist-row[open]>.mhist-sum::after{transform:rotate(90deg)}
.mhist-sum:hover{background:var(--hover,rgba(255,255,255,.03))}
.mhist-sum .person{flex:1 1 190px;min-width:0}

.mhist-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mhist-note{padding:0 12px 9px 12px}
.mhist-body{padding:4px 12px 12px;border-top:1px solid var(--line-c);
  display:flex;flex-direction:column;gap:2px}
.mhist-body .field{margin-bottom:0}

/* Schmal rutscht die Bilanz unter den Namen, statt die Zeile zu sprengen. */
@media (max-width:560px){
  .mhist-sum{gap:6px}
  .mhist-sum .person{flex:1 1 100%}
  .mhist-body .grid.g2{grid-template-columns:1fr}
}

/* ====================================================================
   Zeitleiste
   ====================================================================
   Eine senkrechte Achse mit Punkten. Die Achse ist ein Rahmen am Listen-
   element, kein eigenes Element — so kann sie nie gegen die Eintraege
   verrutschen, egal wie hoch ein Eintrag wird. */
.tline{list-style:none;margin:0;padding:0 0 0 26px;position:relative;
  border-left:2px solid var(--line-c)}

/* Jahres-Trennzeile. Ohne sie liest sich eine Chronik ueber sechs Jahre wie
   eine ueber sechs Wochen — die Dauer wird sonst nirgends sichtbar. */
.tline-year{position:relative;margin:14px 0 8px;padding:0}
.tline-year:first-child{margin-top:0}
.tline-year span{display:inline-block;font-family:var(--font-data);font-size:11px;
  font-weight:700;letter-spacing:.06em;color:var(--ink-3);
  background:var(--panel);border:1px solid var(--line-c);border-radius:999px;
  padding:1px 9px}
.tline-year::before{content:"";position:absolute;left:-31px;top:50%;width:10px;height:2px;
  background:var(--line-c)}

.tline-item{position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:7px 0;min-width:0}
.tline-dot{position:absolute;left:-37px;top:6px;width:22px;height:22px;flex:none;
  display:grid;place-items:center;font-size:11px;line-height:1;
  border-radius:50%;background:var(--panel);border:2px solid var(--line-c)}
.tline-item.is-ok>.tline-dot{border-color:var(--ok)}
.tline-item.is-bad>.tline-dot{border-color:var(--bad)}
.tline-item.is-warn>.tline-dot{border-color:var(--warn)}
.tline-item.is-info>.tline-dot{border-color:var(--info,var(--accent))}
.tline-item.is-accent>.tline-dot{border-color:var(--accent)}

.tline-b{flex:1;min-width:0}
.tline-t{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.tline-t a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.tline-t a:hover{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none}
.tline-x{font-size:12px;color:var(--ink-3);margin-top:1px;overflow-wrap:anywhere}

.tline-d{display:flex;align-items:center;gap:6px;flex:none;
  font-family:var(--font-data);font-size:11.5px;color:var(--ink-3);padding-top:2px}
.tline-del{border:0;background:none;cursor:pointer;color:var(--ink-3);
  font-size:15px;line-height:1;padding:0 2px;border-radius:4px}
.tline-del:hover{color:var(--bad);background:var(--panel-2)}

@media (max-width:560px){
  /* Schmal rutscht das Datum unter den Text — nebeneinander bliebe fuer den
     Text kaum Platz, und abgeschnittene Titel sind schlechter als ein Umbruch. */
  .tline-item{flex-wrap:wrap}
  .tline-d{width:100%;padding-left:0;order:3}
}

/* Nachtrag zum Bento (siehe oben): Die schmalsten Kacheln bleiben auch auf dem
   Telefon zu zweit in einer Reihe. Sie tragen ausschliesslich .bkpi — eine
   Beschriftung, eine Zahl, eine Zeile Zusatz. Auf volle Breite gezogen wird aus
   fuenf Kennzahlen eine Bildschirmlaenge Scrollstrecke fuer Text, der in eine
   halbe Zeile passt. Breitere Kacheln (is-4 und groesser) bleiben voll. */
@media (max-width:720px){
  .bento-item.is-2,.bento-item.is-3{grid-column:span 6}
}

/* ====================================================================
   Match-Fakten (Bento auf der Match-Uebersicht)
   ==================================================================== */
.mf-win{color:var(--ok)}
.mf-loss{color:var(--bad)}
.mf-draw{color:var(--ink-2)}

/* Partien als Liste mit Map-Bild. Kein <table>: drei Angaben je Zeile, davon
   eine ein Bild — eine Tabelle braeuchte dafuer eine Kopfzeile, die nichts
   erklaert, was das Bild nicht schon zeigt. */
.mf-maps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mf-maps li{display:flex;align-items:center;gap:10px;min-width:0}
.mf-map-img{margin:0;width:52px;height:32px;flex:none;border-radius:6px;overflow:hidden;
  background:var(--panel-2);display:grid;place-items:center}
.mf-map-img img{width:100%;height:100%;object-fit:cover;display:block}
.mf-map-img.no-img span{font-family:var(--font-data);font-size:11px;color:var(--ink-3)}
.mf-map-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mf-map-n{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.mf-map-m{font-size:11.5px;color:var(--ink-3)}
.mf-maps .pill{flex:none}

/* Beteiligte als Beschreibungsliste — zwei Spalten, damit Frage und Antwort
   auf einer Zeile stehen. */
.mf-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
.mf-dl dt{color:var(--ink-3);font-size:11.5px;align-self:center}
.mf-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

.mf-notes{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);
  max-height:220px;overflow:auto;overflow-wrap:anywhere}

/* Eine Zeile des Erfassungsstands. Vorher ein .row mit margin-left:auto am
   Knopf — schmal schob der lange Erklaertext den Knopf aus dem Bild. */
.mf-step{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mf-step .small{flex:1 1 240px;min-width:0}
.mf-step .btn-2{margin-left:auto;flex:none}
@media (max-width:560px){
  .mf-step .btn-2{margin-left:0}
  .mf-dl{grid-template-columns:1fr;gap:2px 0}
  .mf-dl dd{margin-bottom:6px}
}

/* ====================================================================
   Blaettern (Core\Pager)
   ====================================================================
   Steht unter der Liste, nicht darueber: Wer blaettert, hat gelesen. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-c)}
.pager-info{font-size:12.5px;color:var(--ink-3)}
.pager-info b{color:var(--ink-2);font-family:var(--font-data)}
.pager-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pager-btn{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 10px;
  border-radius:var(--r);border:1px solid var(--line-c);background:var(--panel);
  font-size:12.5px;font-family:var(--font-data);color:var(--ink-2);text-decoration:none}
.pager-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pager-btn.is-now{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
/* Abgeschaltet, aber nicht entfernt: Sonst springt die Leiste bei jedem Klick,
   weil links ein Element fehlt. */
.pager-btn.is-off{opacity:.35;pointer-events:none}
.pager-luecke{padding:0 2px;color:var(--ink-3);font-size:12.5px}

@media (max-width:560px){
  .pager{justify-content:center}
  .pager-info{width:100%;text-align:center;order:2}
  /* Schmal bleiben nur Zurueck/Weiter und die aktuelle Seite — zwoelf
     Zahlenknoepfe nebeneinander sind auf einem Telefon nicht treffbar. */
  .pager-btn:not(.is-now):not([rel]){display:none}
  .pager-luecke{display:none}
}
@media print{ .pager{display:none} }

/* ====================================================================
   LERNEN — Guides, Steuerungstasten, Symbole, Tooltips
   ====================================================================
   Die Tasten sind der Grund, warum es diesen Abschnitt gibt: Sie stehen
   MITTEN IM FLIESSTEXT und muessen dort mitlaufen, ohne die Zeilenhoehe zu
   sprengen. Deshalb sind sie inline-flex mit fester Hoehe und einem eigenen
   Schriftgrad — nicht Bilder, nicht Emoji, nicht Hintergrundgrafiken. Ein
   Bild waere in Dunkel falsch, ein Emoji auf jedem System anders. */

/* Eine Taste. --ctl-c ist ihre Herstellerfarbe (PlayStation, Xbox); fehlt
   sie, uebernimmt der Text die Farbe der Oberflaeche. */
.ctl{display:inline-flex;align-items:center;justify-content:center;vertical-align:-2px;
  font-family:var(--font-data);font-weight:700;font-size:.82em;line-height:1;
  color:var(--ctl-c,var(--ink-2));border:1.5px solid currentColor;
  background:color-mix(in srgb,currentColor 10%,transparent);
  user-select:none;white-space:nowrap}
/* Aktionstaste: runde Flaeche. Der Kreis ist die Unterscheidung zur Richtung —
   in der Zahlen-Notation gibt es die 3 als Taste UND als Richtung. */
.ctl-flaeche{width:1.55em;height:1.55em;border-radius:50%}
.ctl-form{padding:.22em}
.ctl-form svg{width:100%;height:100%;display:block}
/* Schultertasten und System: laenglich, weil "Options" nicht in einen Kreis passt. */
.ctl-pille{height:1.5em;padding:0 .5em;border-radius:var(--r-pill)}
/* Richtungen stehen FREI — ohne Flaeche, ohne Rahmen. Siehe Core\Controls. */
.ctl-pfeil{border:0;background:none;font-size:1em;font-weight:700;padding:0 .1em;
  color:var(--ink-2)}
/* Tastatur: eine Tastenkappe. Sie wird nie uebersetzt und sieht deshalb
   bewusst anders aus als eine Pad-Taste. */
.ctl-key{display:inline-flex;align-items:center;height:1.6em;padding:0 .5em;
  font-family:var(--font-data);font-size:.8em;font-weight:700;line-height:1;
  border:1px solid var(--line-c);border-bottom-width:2px;border-radius:4px;
  background:var(--panel-2);color:var(--ink-2);vertical-align:-2px}
.ctl-plus{margin:0 .18em;color:var(--ink-3);font-size:.85em}

/* Strategie-Symbol als Schild aus Bild und Namen. */
.lg-sym{display:inline-flex;align-items:center;gap:.35em;vertical-align:-3px;
  padding:.12em .5em .12em .3em;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--sym-c,var(--accent)) 45%,transparent);
  background:color-mix(in srgb,var(--sym-c,var(--accent)) 12%,transparent);
  color:var(--ink-1);font-size:.9em;line-height:1.3;white-space:nowrap}
.lg-sym-i{display:inline-flex;width:1.15em;height:1.15em;color:var(--sym-c,var(--accent))}
.lg-sym-i svg,.lg-sym-i img{width:100%;height:100%;display:block;object-fit:contain}
.lg-sym-n{font-weight:600}
/* Geloeschtes Symbol: der Name bleibt, das Schild wird still. */
.lg-sym-weg{border-style:dashed;background:none;color:var(--ink-3)}

/* Tooltip auf einer Textstelle und am Symbol.
   Die Blase kommt aus CSS — mit JavaScript waere sie ohne Skript weg, und der
   title allein erscheint erst nach einer Sekunde Warten. Beides bleibt: title
   fuer Vorlesewerkzeuge, Blase fuers Auge. tabindex="0" steht im HTML, damit
   sie auch mit der Tastatur erreichbar ist. */
.lg-tip{border-bottom:1.5px dotted var(--accent);cursor:help;position:relative}
.lg-sym[data-tip]{position:relative;cursor:help}
.lg-tip::after,.lg-sym[data-tip]::after{content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);z-index:40;
  min-width:12ch;max-width:32ch;width:max-content;padding:7px 10px;
  border-radius:var(--r);border:1px solid var(--line-c);background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  font-size:12.5px;font-weight:400;line-height:1.45;color:var(--ink-2);
  white-space:normal;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur),transform var(--dur)}
.lg-tip:hover::after,.lg-tip:focus-visible::after,
.lg-sym[data-tip]:hover::after,.lg-sym[data-tip]:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* --- Uebersicht ---------------------------------------------------- */
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px}
.lg-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:190px;padding:12px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-c);background:var(--panel);color:var(--ink-1);text-decoration:none;
  transition:transform var(--dur),border-color var(--dur)}
.lg-card:hover{transform:translateY(-2px);border-color:var(--accent);text-decoration:none}
/* Das Bild liegt als Pseudoelement darunter, nicht als background der Karte:
   So laesst sich genau darueber ein Verlauf legen, ohne den Text mitzudimmen. */
.lg-card.has-bg::before{content:"";position:absolute;inset:0;background-image:var(--lg-bg);
  background-size:cover;background-position:center;opacity:.55}
.lg-card.has-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.05) 100%)}
.lg-card.has-bg .lg-card-top,.lg-card.has-bg .lg-card-b{position:relative;z-index:1}
.lg-card.has-bg .lg-card-t,.lg-card.has-bg .lg-card-x,
.lg-card.has-bg .lg-card-kick,.lg-card.has-bg .lg-card-f{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.lg-card-top{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.lg-card-b{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.lg-card-kick{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  display:flex;gap:4px;flex-wrap:wrap}
.lg-card-t{font-family:var(--font-head);font-size:16px;line-height:1.25}
.lg-card-x{font-size:12.5px;line-height:1.4;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lg-card-f{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink-3);margin-top:2px}
.lg-card-by{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.lg-r.on{color:var(--accent)}

/* Der Approved-Badge. Er ist absichtlich das auffaelligste Element der Karte:
   Er beantwortet die einzige Frage, die vor dem Lesen zaehlt — stimmt das? */
.lg-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  background:var(--ok-bg);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.lg-badge svg{width:13px;height:13px}
.lg-badge.sm{padding:1px 7px;font-size:10.5px}
.lg-badge--off{background:none;color:var(--ink-3);border-color:var(--line-c);font-weight:600}

/* Dynamische Tags. Sie sind Verweise auf echte Eintraege — deshalb tragen sie
   das Bild des Eintrags und sind anklickbar. */
.lg-tags{display:flex;gap:6px;flex-wrap:wrap}
.lg-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;
  border-radius:var(--r-pill);font-size:12px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--tag-c,var(--line-c)) 60%,transparent);
  background:color-mix(in srgb,var(--tag-c,var(--panel-2)) 14%,var(--panel-2));
  color:var(--ink-2)}
a.lg-tag:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.lg-tag img{width:18px;height:18px;border-radius:50%;object-fit:cover;display:block}
.lg-tag.mute{opacity:.7;padding-left:9px}

.lg-filter{margin-top:10px}
.lg-padwahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;
  padding:8px 12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2)}
.lg-padwahl label{font-size:12.5px;color:var(--ink-3);margin:0}
.lg-padwahl select{width:auto;min-width:14em}
.lg-padwahl.is-auto button{display:none}
.lg-padbeispiel{margin-left:auto;display:flex;align-items:center;gap:2px}

/* --- Leseansicht ---------------------------------------------------- */
.lg-read{position:relative;border:1px solid var(--line-c);border-radius:var(--r-lg);
  background:var(--panel);overflow:hidden}
.lg-read-h{position:relative;padding:20px 20px 16px}
.lg-read.has-bg .lg-read-h::before{content:"";position:absolute;inset:0;background-image:var(--lg-bg);
  background-size:cover;background-position:center;opacity:.32}
.lg-read.has-bg .lg-read-h::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.35),var(--panel))}
.lg-read.has-bg .lg-read-h > *{position:relative;z-index:1}
.lg-read-h h1{font-family:var(--font-head);font-size:26px;line-height:1.2;margin:0 0 8px}
.lg-approve{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lg-approve form{margin:0}
.lg-read-by{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);margin:0 0 8px}
.lg-read-sum{font-size:15px;line-height:1.55;color:var(--ink-2);margin:8px 0}
.lg-body{padding:0 20px 4px;font-size:15px;line-height:1.7;color:var(--ink-1)}
.lg-body > *:first-child{margin-top:0}
.lg-body p{margin:0 0 .9em}
.lg-body h3{font-family:var(--font-head);font-size:18px;margin:1.4em 0 .5em}
.lg-body h4{font-size:15px;margin:1.2em 0 .4em}
.lg-body ul,.lg-body ol{margin:0 0 .9em;padding-left:1.4em}
.lg-body li{margin:.25em 0}
.lg-body blockquote{margin:0 0 .9em;padding:.4em 0 .4em 1em;border-left:3px solid var(--accent);color:var(--ink-2)}
.lg-body pre{overflow-x:auto;padding:10px 12px;border-radius:var(--r);background:var(--panel-2)}
.lg-body code{font-family:var(--f-mono,var(--font-data));font-size:.92em}
.lg-read .post-actions{padding:0 20px 16px}
.lg-read .lg-padwahl{margin:0 20px 12px}

.lg-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:8px 20px 16px}
.lg-file{margin:0;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--panel-2)}
.lg-file img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.lg-file figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 8px;font-size:12px;color:var(--ink-3)}
.lg-file figcaption form{margin:0}
.lg-dl{display:flex;align-items:center;gap:6px;padding:12px;font-size:12.5px}

/* --- Editor --------------------------------------------------------- */
.lg-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:8px;border:1px solid var(--line-c);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;background:var(--panel-2)}
.lg-tools-sep{width:1px;height:20px;background:var(--line-c);margin:0 2px}
.lg-editor{min-height:260px;padding:14px 16px;border:1px solid var(--line-c);
  border-radius:0 0 var(--r) var(--r);
  background:var(--panel);font-size:15px;line-height:1.7;overflow-wrap:break-word}
.lg-editor:focus{outline:2px solid var(--accent);outline-offset:-2px}
.lg-editor p{margin:0 0 .8em}
.lg-editor:empty::before{content:attr(data-platzhalter);color:var(--ink-3)}

.lg-palette{margin-top:12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2)}
.lg-palette > summary{padding:9px 12px;cursor:pointer;font-size:13px;font-weight:600}
.lg-palette-b{padding:0 12px 12px}
.lg-palette-h{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin:12px 0 6px}
.lg-palette-g{display:flex;gap:6px;flex-wrap:wrap}
/* Eine Palettenzeile ist OHNE JavaScript eine Anleitung (Zeichen + Kurz-
   schreibweise) und MIT JavaScript ein Knopf. Deshalb sieht sie in beiden
   Faellen gleich aus und zeigt die Schreibweise immer mit. */
.lg-pal{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;
  border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel);
  font:inherit;color:var(--ink-2);cursor:pointer;text-align:left}
.lg-pal:hover{border-color:var(--accent)}
.lg-pal code{font-size:11px;color:var(--ink-3)}

.lg-tagset{border:1px solid var(--line-soft);border-radius:var(--r);padding:8px 12px 10px;margin:0 0 10px}
.lg-tagset legend{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:0 4px}
.lg-tagpick{display:inline-flex;margin-right:12px}
.lg-tagpick .check-txt{display:inline-flex;align-items:center;gap:6px}
.lg-tagpick img{width:20px;height:20px;border-radius:4px;object-fit:cover}
.lg-bgvorschau{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.lg-bgvorschau figure{margin:0;width:120px;border:2px solid transparent;border-radius:var(--r);
  overflow:hidden;background:var(--panel-2)}
.lg-bgvorschau figure.on{border-color:var(--accent)}
.lg-bgvorschau img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.lg-bgvorschau figcaption{padding:4px 6px;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Verwaltung: Symbole und Themenbereiche ------------------------- */
/* Zeilen statt Tabelle: Ein <form> darf nicht zwischen <tr> und <td> stehen —
   der Browser zieht es aus der Tabelle heraus und die Zeile faellt auseinander. */
.lg-admin-list{display:flex;flex-direction:column}
.lg-admin-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  padding:10px 0;border-top:1px solid var(--line-soft)}
.lg-admin-row .field{margin:0}
.lg-admin-pre{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;padding-bottom:2px}
.lg-admin-del{display:flex;align-items:center;gap:8px;padding:0 0 10px}
.lg-admin-bild{flex:0 0 auto}
.lg-admin-bild[open]{flex:1 1 260px}

@media (max-width:560px){
  .lg-grid{grid-template-columns:1fr}
  .lg-padbeispiel{margin-left:0;width:100%}
  .lg-body,.lg-read-h,.lg-files,.lg-read .post-actions{padding-left:14px;padding-right:14px}
  .lg-read .lg-padwahl{margin-left:14px;margin-right:14px}
  /* Am linken Rand wuerde die Blase sonst aus dem Bild laufen. */
  .lg-tip::after,.lg-sym[data-tip]::after{max-width:min(32ch,80vw)}
}
@media print{
  .lg-tools,.lg-palette,.lg-padwahl,.lg-read .post-actions,.comments{display:none}
  .lg-read.has-bg .lg-read-h::before{display:none}
}

/* ====================================================================
   SUCHE — Direktziel, dezente Hinweise, Anheften
   ====================================================================
   Die Suchergebnisse haben zwei Sorten: SACHEN (Menschen, Matches, Gegner)
   und WEGE (Menuepunkte, Einstellungen). Wer in ein Suchfeld tippt, sucht
   fast immer eine Sache. Die Wege stehen deshalb unten und kleiner — sie sind
   ein Fingerzeig, kein Fund. */

/* Ein eigener Suchbegriff dieser Organisation: die Antwort auf genau dieses
   Wort. Sie steht ueber allem und sieht anders aus als ein Treffer. */
.qs-direkt{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;
  border:1px solid var(--accent);border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));
  color:var(--ink-1);text-decoration:none}
.qs-direkt:hover{background:color-mix(in srgb,var(--accent) 14%,var(--panel));text-decoration:none}
.qs-direkt svg{width:18px;height:18px;color:var(--accent);flex:none}
.qs-direkt > span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.qs-direkt .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-item--direkt .qs-t{color:var(--accent);font-weight:700}

/* Die Wege. Bewusst kein Panel: ein Rahmen machte sie wieder gleichrangig. */
.qs-hinweise{margin:14px 0 0;padding:10px 2px 0;border-top:1px dashed var(--line-c)}
.qs-hinweise-h{display:flex;align-items:center;gap:6px;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:6px}
.qs-hinweise-h svg{width:14px;height:14px}
.qs-hinweise ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.qs-hinweise li{display:flex;gap:8px;align-items:baseline;font-size:12.5px;flex-wrap:wrap}
.qs-hinweise a{color:var(--ink-2)}
.qs-hinweise a:hover{color:var(--accent)}
.qs-hinweise .muted{font-size:11.5px}

.qs-verwaltung{margin-top:14px}
.qs-verwaltung > summary{padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}

/* Anheften in der Kopfzeile. Das <details> traegt das Blatt, damit es ohne
   JavaScript auf- und zugeht; position:relative liegt am Element, nicht an
   der Topbar — sonst haenge das Blatt am falschen Bezugspunkt. */
.toppin{position:relative}
.toppin > summary{list-style:none;cursor:pointer}
.toppin > summary::-webkit-details-marker{display:none}
.toppin[open] > summary{color:var(--accent);border-color:var(--accent)}
.toppin-b{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(320px,92vw);
  padding:14px;border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel);
  box-shadow:0 14px 40px rgba(0,0,0,.28)}
.toppin-b .field{margin-bottom:10px}
.toppin-b .mono{word-break:break-all}
@media (max-width:700px){
  /* Schmal ist rechts kein Platz mehr — das Blatt zentriert sich unter der
     Kopfzeile statt halb aus dem Bild zu ragen. */
  .toppin-b{position:fixed;left:8px;right:8px;width:auto;top:auto}
}
@media print{ .toppin,.qs-verwaltung{display:none} }

/* ====================================================================
   PROFIL BEARBEITEN — Hierarchie durch Symbol, Ueberbegriff, Zweck
   ====================================================================
   Vorher trug jeder Kasten nur ein Wort aus dem Datenmodell. Das Symbol ist
   der schnellste Weg zum richtigen Block (man erkennt es, ohne zu lesen), die
   Zweckzeile beantwortet die Frage, die danach kommt: wofuer ist das gut? */
.pe-h h2{display:flex;align-items:center;gap:8px}
.pe-h h2 svg{width:18px;height:18px;color:var(--accent);flex:none}
/* Der Zweck steht UNTER der Kopfzeile und nicht darin: In der Kopfzeile
   konkurrierte er mit dem Knopf rechts und brach auf schmalen Geraeten um. */
.pe-zweck{margin:0;padding:0 var(--pad) 10px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}

/* --- Schnittstellen -------------------------------------------------- */
.sn-gruppe{border:1px solid var(--line-soft);border-radius:var(--r);
  padding:8px 12px 4px;margin:0 0 12px}
.sn-gruppe legend{display:flex;align-items:center;gap:6px;padding:0 6px;
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.sn-gruppe legend svg{width:14px;height:14px;color:var(--accent)}
.sn-zeile{display:flex;gap:8px;align-items:center}
.sn-zeile input{flex:1;min-width:0}
.sn-zeile .btn-2{flex:none}
/* „Pflicht" steht am Feld und nicht nur als Sternchen: Ein Sternchen muss man
   kennen, dieses Wort nicht. */
.sn-pflicht{margin-left:6px;padding:1px 6px;border-radius:var(--r-pill);
  background:var(--warn-bg);color:var(--warn);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
@media (max-width:560px){
  .sn-zeile{flex-wrap:wrap}
  .sn-zeile .btn-2{margin-left:auto}
}

/* ====================================================================
   TAKTIKKARTE — eine Map im Text, mit gesetzten Symbolen
   ====================================================================
   Das Bild bestimmt die Hoehe, die Marken liegen prozentual darueber. Deshalb
   KEINE feste Hoehe und kein aspect-ratio: Maps sind quadratisch (CS2), breit
   (Rennstrecken) oder hoch — eine erzwungene Form wuerde jede zweite
   beschneiden, und beschnitten stimmt keine Position mehr. */
/* --karte-max ist die EINSTELLUNG je Spiel (games.guide_map_width). Sie ist
   eine Obergrenze, keine Groesse: Das Bild behaelt immer sein eigenes
   Seitenverhaeltnis, weil height AUTO bleibt. Eine feste Hoehe oder ein
   aspect-ratio wuerde jede Map verzerren, deren Format nicht zufaellig passt —
   und dann saessen auch alle prozentual gesetzten Marken falsch. */
.lg-karte{margin:1.2em 0;max-width:var(--karte-max,100%);
  border:1px solid var(--line-c);border-radius:var(--r-lg);
  overflow:hidden;background:var(--panel-2)}
.lg-karte-b{position:relative;line-height:0}
.lg-karte-b img{width:100%;height:auto;display:block}
.lg-karte figcaption{padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.lg-karte--weg{border-style:dashed}
.lg-karte--weg figcaption{color:var(--ink-3)}

/* Eine Marke. --mark-c ist die Farbe des Symbols; ohne sie der Akzent.
   translate(-50%,-50%) setzt den MITTELPUNKT auf die gespeicherte Stelle —
   sonst haenge die Marke mit ihrer linken oberen Ecke dort und saesse fuer
   jede Groesse woanders. */
.lg-mark{position:absolute;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--mark-c,var(--accent));
  background:color-mix(in srgb,var(--mark-c,var(--accent)) 24%,var(--panel));
  color:var(--mark-c,var(--accent));cursor:help;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.lg-mark:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lg-mark-i{display:inline-flex;width:17px;height:17px}
.lg-mark-i svg,.lg-mark-i img{width:100%;height:100%;display:block;object-fit:contain}
/* Die Nummer sitzt AUSSEN an der Marke, nicht darin: Innen konkurriert sie mit
   dem Symbol, und beides zusammen ist bei 30 Pixeln nicht mehr lesbar. */
.lg-mark-n{position:absolute;top:-7px;left:-7px;min-width:17px;height:17px;padding:0 3px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--mark-c,var(--accent));color:#fff;
  font-family:var(--font-data);font-size:10.5px;font-weight:700;line-height:1}
/* Ohne Symbol traegt die Marke nur ihre Nummer — dann gehoert die in die Mitte. */
.lg-mark:not(:has(.lg-mark-i)) .lg-mark-n{position:static;top:auto;left:auto}

/* Tooltip an der Marke: dieselbe Blase wie im Fliesstext. */
.lg-mark[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);z-index:40;
  min-width:10ch;max-width:26ch;width:max-content;padding:6px 9px;
  border-radius:var(--r);border:1px solid var(--line-c);background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  font-size:12px;font-weight:400;line-height:1.45;color:var(--ink-2);
  white-space:normal;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur),transform var(--dur)}
.lg-mark[data-tip]:hover::after,.lg-mark[data-tip]:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Die Legende. Sie ist der Grund, warum diese Karte auch ohne Maus, im
   Ausdruck und im Vorleseprogramm etwas aussagt. */
.lg-karte-legende{list-style:none;margin:8px 0 0;padding:0;
  display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.lg-karte-legende li{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.lg-karte-legende .lg-mark-n{position:static;flex:none}

/* --- Auswahl der Map im Editor -------------------------------------- */
.lg-kartenwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.lg-kartenknopf{display:flex;flex-direction:column;gap:4px;padding:5px;
  border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel);
  font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;text-align:left}
.lg-kartenknopf:hover{border-color:var(--accent)}
.lg-kartenknopf img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block}

/* --- Die Karte IM EDITOR: Werkzeugleiste und setzbare Marken --------- */
/* Im Editor bekommt dieselbe Figur eine Leiste und einen Fadenkreuz-Zeiger.
   Sie steckt in der Schreibflaeche und ist contenteditable=false — sonst
   liefe die Einfuegemarke hinein und man tippte in eine Landkarte. */
.lg-editor .lg-karte{position:relative}
.lg-kt-leiste{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:6px 8px;border-bottom:1px solid var(--line-c);background:var(--panel)}
.lg-kt-leiste .lg-kt-sym{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;
  border:1px solid var(--line-c);border-radius:var(--r-pill);background:var(--panel-2);
  font-size:11.5px;color:var(--ink-2);cursor:pointer}
.lg-kt-leiste .lg-kt-sym svg,.lg-kt-leiste .lg-kt-sym img{width:14px;height:14px}
.lg-kt-leiste .lg-kt-sym.is-on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.lg-kt-hinweis{font-size:11.5px;color:var(--ink-3);margin-left:auto}
/* Waehrend ein Symbol scharf ist, sagt der Zeiger, was ein Klick tut. */
.lg-karte.is-setzen .lg-karte-b{cursor:crosshair}
.lg-editor .lg-mark{cursor:grab}
.lg-editor .lg-mark:active{cursor:grabbing}

@media (max-width:560px){
  .lg-mark{width:26px;height:26px}
  .lg-mark-i{width:14px;height:14px}
  .lg-kartenwahl{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
}
@media print{
  /* Im Ausdruck gibt es keinen Hover — die Legende traegt dann alles. */
  .lg-kt-leiste{display:none}
}

/* --- Taktikkarte: Bedienung im Editor ------------------------------- */
/* Die Leiste ist eine WERKZEUGLEISTE und sieht auch so aus: links das, was man
   waehlt, rechts das, was die ganze Karte betrifft. Vorher standen beide
   Sorten Knoepfe nebeneinander und man musste raten, was wozu gehoert. */
.lg-kt-leiste{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:7px 9px;border-bottom:1px solid var(--line-c);background:var(--panel)}
.lg-kt-was{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.lg-kt-rechts{margin-left:auto;display:flex;gap:6px}
.lg-kt-sym{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  border:1px solid var(--line-c);border-radius:var(--r-pill);background:var(--panel-2);
  font:inherit;font-size:11.5px;color:var(--ink-2);cursor:pointer}
.lg-kt-sym svg,.lg-kt-sym img{width:15px;height:15px}
.lg-kt-sym:hover{border-color:var(--accent)}
/* Das gewaehlte Werkzeug ist deutlich markiert — nicht nur eine Nuance:
   Es entscheidet, was der naechste Klick auf die Karte tut. */
.lg-kt-sym.is-on{border-color:var(--accent);background:var(--accent);color:#fff}
.lg-kt-sym.is-on svg{color:#fff}
.lg-kt-nr{font-family:var(--font-data);font-weight:700}

/* Die Statuszeile sagt in Worten, was gerade gilt. Ein Fadenkreuz-Zeiger tut
   das auch — aber nur mit Maus. */
.lg-kt-status{margin:0;padding:6px 10px;font-size:12px;line-height:1.45;
  color:var(--ink-3);background:var(--panel-2);border-bottom:1px solid var(--line-soft)}
.lg-kt-status.is-aktiv{color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--panel-2))}
.lg-karte.is-setzen .lg-karte-b{cursor:crosshair}
.lg-kt-fehlt{margin:0;padding:28px 14px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.5}

.lg-editor .lg-mark{cursor:grab}
.lg-editor .lg-mark:active{cursor:grabbing}
.lg-mark.is-offen{outline:2px solid var(--accent);outline-offset:3px}

/* Das Feld an der Karte statt eines Systemfensters: sichtbar, ohne Vorwissen,
   und es zeigt zugleich, welche Marke gemeint ist. */
/* DAS FELD STEHT UNTER DER KARTE, NICHT DARIN.
   Es schwebte mitten auf dem Bild — mit Seitenwahl, Rolle, Spielerköpfen und
   Ausrüstung reichte es über den Rand hinaus und ließ sich nicht mehr zu Ende
   ausfüllen. Unten hat es die volle Breite und verdeckt nichts. */
.lg-kt-feld{border-top:1px solid var(--line-soft);padding:12px;
  background:color-mix(in srgb,var(--panel-2) 70%,transparent)}
.lg-kt-feld-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.lg-kt-feld-h b{font-size:13.5px}
.lg-kt-feld-h .muted{font-size:12px}
.lg-kt-feld-h .lg-kt-tag{margin-left:auto}
.lg-kt-hinw{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-3);
  padding-top:9px;border-top:1px dashed var(--line-soft)}
.lg-kt-feld .field{margin-bottom:10px}
/* Auf schmalen Schirmen bleiben Köpfe und Ausrüstung in ihrer eigenen Zeile,
   statt das Feld in die Breite zu ziehen. */
.lg-kt-feld .lg-kt-koepfe,.lg-kt-feld .lg-kt-eq{max-height:132px;overflow:auto}
.lg-kt-feld input[type=color]{width:38px;height:32px;padding:2px}

/* Die Liste unter der Karte: zweiter Weg zu jeder Marke, ohne Zielen — und
   die Vorschau der Legende, die der Leser spaeter sieht. */
.lg-kt-liste{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--line-soft);font-size:12.5px}
.lg-kt-liste li{display:flex;align-items:center;gap:8px}
.lg-kt-liste li > span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-kt-liste .lg-mark-n{position:static;flex:none}

@media (max-width:560px){
  .lg-kt-rechts{margin-left:0;width:100%}
  .lg-kt-sym span:last-child{display:none}   /* schmal reicht das Symbol */
  .lg-kt-sym{padding:6px 8px}
}

/* --- Taktikkarte: aufklappbar und linksbuendig ----------------------- */
/* LINKSBUENDIG, weil die Karte zum Text gehoert und nicht ueber ihm steht:
   Eine zentrierte Abbildung in einer linksbuendigen Textspalte zieht bei jeder
   Breite eine andere Kante — der Blick springt.

   AUFKLAPPBAR ueber <details>, offen als Voreinstellung. In einem Guide mit
   vier Karten scrollt man sonst an mehr Bild als Text vorbei. Zugeklappt
   bleibt die Zeile stehen und sagt, was darin steckt. */
.lg-karte-d > summary.lg-karte-s{list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 12px;font-size:13px;line-height:1.4;color:var(--ink-1);
  background:var(--panel);border-bottom:1px solid var(--line-soft)}
.lg-karte-d > summary::-webkit-details-marker{display:none}
/* Der Winkel sagt, dass hier etwas auf- und zugeht — ohne ihn sieht die Zeile
   aus wie eine Bildunterschrift, die zufaellig oben steht. */
.lg-karte-d > summary.lg-karte-s::before{content:"";flex:none;width:0;height:0;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  transform:rotate(0);transition:transform var(--dur);opacity:.65}
.lg-karte-d[open] > summary.lg-karte-s::before{transform:rotate(90deg)}
.lg-karte-d > summary.lg-karte-s:hover{color:var(--accent)}
.lg-karte-d[open] > summary.lg-karte-s{border-bottom-color:var(--line-c)}
/* Zugeklappt hat die Karte keinen Rahmen um nichts. */
.lg-karte-d:not([open]) > summary.lg-karte-s{border-bottom:0}
.lg-karte-d .lg-karte-legende{padding:8px 12px 10px;margin:0}
@media print{
  /* Im Ausdruck ist alles offen — ein zugeklappter Bereich waere auf Papier
     ein weisser Fleck ohne Weg, ihn zu oeffnen. */
  .lg-karte-d:not([open]) > *:not(summary){display:revert}
  .lg-karte-d > summary.lg-karte-s::before{display:none}
}

/* Overview-Ebenen am Katalog-Eintrag */
.lg-ebenen{border:1px solid var(--line-soft);border-radius:var(--r);padding:8px 10px;margin:0 0 10px}
.lg-ebenen legend{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:0 4px}
.lg-ebenen-liste{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:5px}
.lg-ebenen-liste li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.lg-ebenen-liste img{width:40px;height:40px;object-fit:cover;border-radius:4px;flex:none}

/* ====================================================================
   KOMMENTARE — dieselbe Ansicht ueberall, und endlich breit genug
   ====================================================================
   Vorher standen sie in der schmalen Spalte neben dem Inhalt: rund dreissig
   Zeichen Feldbreite. Ein Kommentarfeld, in das kein Satz passt, laedt zu
   keinem Satz ein. Der Bereich spannt jetzt ueber die volle Breite. */
.kommentare{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line-c)}
.km-h{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:17px;margin:0 0 12px}
.km-h svg{width:18px;height:18px;color:var(--accent)}

.km-form{display:block;margin:0 0 18px}
.km-form textarea{width:100%;min-height:76px;resize:vertical}
.km-form-f{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:8px}
/* „Antwortet auf …" erscheint nur, wenn es zutrifft — sonst waere es eine
   Zeile, die immer da ist und nie etwas sagt. */
.km-antwortet{margin:0 0 6px;font-size:12.5px;color:var(--accent);
  display:flex;align-items:center;gap:8px}
.km-antwortet button{background:none;border:0;color:var(--ink-3);cursor:pointer;
  font:inherit;font-size:12px;text-decoration:underline}

.km-liste{display:flex;flex-direction:column;gap:16px}
.km-strang{border-top:1px solid var(--line-soft);padding-top:14px}
.km-strang:first-child{border-top:0;padding-top:0}
.km{display:flex;gap:10px;align-items:flex-start}
.km-b{flex:1;min-width:0}
.km-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.km-txt{margin:3px 0 0;font-size:14px;line-height:1.6;overflow-wrap:break-word}
.km-fuss{display:flex;align-items:center;gap:12px;margin-top:5px}
.km-fuss form{margin:0}
.km-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px;
  color:var(--ink-3);text-decoration:underline}
.km-link:hover{color:var(--accent)}
.km-link--weg:hover{color:var(--bad)}

/* Antworten sind EINGERUECKT, aber nur einmal — die Begruendung fuer genau
   eine Ebene steht in Core\Comments. */
.km-antworten{margin:12px 0 0 34px;padding-left:14px;border-left:2px solid var(--line-c);
  display:flex;flex-direction:column;gap:12px}
.km-antwortform{margin:10px 0 0 34px}
.km-antwortform > summary{font-size:12px;color:var(--ink-3);cursor:pointer}
.km-antwortform textarea{width:100%;margin:6px 0}
/* Mit JavaScript uebernimmt das grosse Feld oben das Antworten — dann waere
   dieses hier ein zweiter Weg zum selben Ziel. */
.js-km .km-antwortform{display:none}

/* Erwaehnung: ein Name, der zum Menschen fuehrt. */
.mention{color:var(--accent);font-weight:600;text-decoration:none;
  padding:0 2px;border-radius:3px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mention:hover{text-decoration:underline}
.mention--weg{color:var(--ink-3);background:none;font-weight:400}

/* --- Clip auf eigener Seite ----------------------------------------- */
.clip-show{border:1px solid var(--line-c);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
/* Fester Rahmen fuers Video: Ein Player ohne feste Form springt beim Laden
   und schiebt den Text darunter weg. */
.clip-player{position:relative;aspect-ratio:16/9;background:#000}
.clip-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.clip-extern{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px}
.clip-extern img{width:180px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.clip-show-b{padding:16px}
.clip-show-b h1{font-family:var(--font-head);font-size:22px;line-height:1.25;margin:0 0 8px}
.clip-show-by{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 10px}
.clip-show-t{font-size:14px;line-height:1.6;margin:0 0 12px}
.clip-show .post-actions{padding:0}

@media (max-width:560px){
  .km-antworten,.km-antwortform{margin-left:0}
  .clip-extern img{width:100%}
}

/* ====================================================================
   ABSTIMMUNG — wer kann wann
   ====================================================================
   Vorher standen unter jedem Vorschlag nur Balken und Zahlen. „3 Zusagen"
   beantwortet aber nicht die Frage, wegen der man abstimmen laesst: WER kann.
   Deshalb Gesichter — sie sind schneller zu lesen als jede Liste. */
.wer-liste{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wer{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 2px;
  border-radius:var(--r-pill);border:1px solid var(--line-c);background:var(--panel-2);
  font-size:12px;line-height:1.3;color:var(--ink-2);max-width:100%}
.wer-av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;
  display:inline-grid;place-items:center;background:var(--panel);
  font-size:9.5px;font-weight:700;color:var(--ink-3)}
.wer-av img{width:100%;height:100%;object-fit:cover;display:block}
.wer-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14ch}

/* Vier Zustaende, vier Farben — und „offen" bleibt sichtbar, statt als Absage
   durchzugehen. Das war der stille Fehler der alten Ansicht: Wer nicht
   abgestimmt hatte, sah aus wie jemand, der abgesagt hat. */
.wer--yes{border-color:color-mix(in srgb,var(--ok) 55%,transparent);
  background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.wer--no{border-color:color-mix(in srgb,var(--bad) 45%,transparent);
  background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad)}
/* Abwesend ist eine ABLEITUNG, keine Aussage der Person — deshalb gestrichelt:
   Man sieht, dass hier niemand geklickt hat. */
.wer--abwesend{border-style:dashed;border-color:color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn)}
.wer--offen{opacity:.6}

/* Dritter Abschnitt im Balken: das Offene. */
.vote-bar .o{background:var(--line-c)}

/* --- Abwesenheitskalender -------------------------------------------- */
.abw-wirkung{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.abw-wirkung li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.abw-wirkung li.is-ab{color:var(--ink-2)}
.abw-wirkung .mono{flex:none}

@media (max-width:560px){
  .wer-n{max-width:9ch}
}


/* ====================================================================
   TAKTIKKARTE — Sequenzen, rechte Leiste, Präsentiermodus
   ==================================================================== */

/* --- Der Tag der Verknüpfung ---------------------------------------
   Er steht in der Zusammenfassung der Karte und damit auch dann, wenn sie
   zugeklappt ist. Ohne ihn müsste man vier Karten aufklappen, um zu sehen,
   welche zusammengehören. */
.lg-kt-tag{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;
  border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font-size:11.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.lg-kt-tag b{font-weight:700;opacity:.75}

/* Notiz unter der Karte — Sprechzettel, kein Fließtext. */
.lg-kt-notiz{margin:8px 0 0;padding:9px 12px;border-left:3px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:0 var(--r) var(--r) 0;
  font-size:13px;line-height:1.55;color:var(--ink-2)}
.lg-kt-notiz b{color:var(--warn);margin-right:6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}

/* --- Werkzeugleiste in zwei Reihen ---------------------------------- */
.lg-kt-leiste{display:flex;flex-direction:column;gap:0}
.lg-kt-reihe{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 9px}
.lg-kt-reihe + .lg-kt-reihe{border-top:1px solid var(--line-soft)}
.lg-kt-reihe--karte{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
.lg-kt-was{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  font-weight:700;flex:none;min-width:64px}
/* Die Symbole scrollen waagerecht statt die Leiste in fünf Zeilen zu brechen —
   bei zwanzig Symbolen wäre die Karte sonst hinter der Leiste versteckt. */
.lg-kt-werkzeuge{display:flex;gap:5px;overflow-x:auto;flex:1;padding-bottom:2px;
  scrollbar-width:thin}
.lg-kt-feldchen{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
.lg-kt-feldchen select{padding:3px 6px;font-size:12px}
.lg-kt-punkt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);
  vertical-align:middle;margin-left:5px}

.lg-kt-einst{padding:10px 12px;border-top:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--panel-2) 70%,transparent);display:flex;flex-direction:column;gap:8px}

/* Angesprungene Karte kurz hervorheben. */
.lg-karte.is-hier{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}

/* --- Die rechte Leiste ---------------------------------------------
   Ein Griff am Bildschirmrand, der beim Überfahren aufgeht. Fest
   eingeblendet nähme sie dem Text dauerhaft Platz für etwas, das man alle
   paar Minuten braucht. */
/* SCHREIBFLÄCHE UND ABFOLGE NEBENEINANDER.
   Die Abfolge war eine Schublade am Bildschirmrand, die beim Überfahren
   aufging. Das war zweimal falsch: Sie verdeckte den Text, an dem man gerade
   schrieb, und sie verschwand, sobald der Zeiger sie verließ — ausgerechnet
   beim Ziehen einer Marke. Jetzt ist sie eine Spalte neben dem Text, die
   klebt. */
.lg-arbeit{display:block}
.lg-arbeit.hat-abfolge{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.lg-arbeit-text{min-width:0}

.lg-rail{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 28px);
  display:flex;flex-direction:column;min-width:0}
/* Der Griff ist kein Griff mehr, sondern die Überschrift der Spalte. */
.lg-rail-griff{display:flex;align-items:center;gap:8px;padding:8px 11px;
  border:1px solid var(--line-c);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  background:var(--panel-2);color:var(--ink-2);cursor:pointer;font:inherit;text-align:left;width:100%}
.lg-rail-griff-t{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.lg-rail-griff-z{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--accent)}
.lg-rail-griff:hover{color:var(--ink);border-color:var(--accent)}

.lg-rail-b{flex:1;min-height:0;overflow:auto;border:1px solid var(--line-c);
  border-radius:0 0 var(--r) var(--r);background:var(--panel);display:block}
.lg-rail.is-fest .lg-rail-griff{border-color:var(--accent);color:var(--accent)}

.lg-rail-h{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--panel);z-index:1}
.lg-rail-h .muted{margin-right:auto;font-size:12px}
.lg-rail-hilfe{margin:0;padding:9px 12px;font-size:11.5px;line-height:1.5;color:var(--ink-3);
  border-bottom:1px solid var(--line-soft)}

.lg-rail-g{padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.lg-rail-g--frei{background:color-mix(in srgb,var(--panel-2) 45%,transparent)}
.lg-rail-gh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.lg-rail-gh .muted{font-size:11.5px}
.lg-rail-btns{display:inline-flex;gap:4px;margin-left:auto;flex:none}
.lg-rail-tempo{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);margin-bottom:8px}
.lg-rail-tempo input{flex:1;min-width:0}
.lg-rail-tempo output{font-variant-numeric:tabular-nums;min-width:42px;text-align:right;color:var(--ink-2)}

.lg-rail-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.lg-rail-z{display:grid;grid-template-columns:auto 40px 1fr auto;align-items:center;gap:7px;
  padding:5px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2)}
.lg-rail-z.is-hier{border-color:var(--accent)}
.lg-rail-nr{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--accent);color:#fff;font-size:10.5px;font-weight:700}
.lg-rail-z img{width:40px;height:28px;object-fit:cover;border-radius:var(--r);display:block}
.lg-rail-kein{width:40px;height:28px;border-radius:var(--r);background:var(--panel);display:block}
.lg-rail-n{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.35}
.lg-rail-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-rail-n .muted{font-size:10.5px}
/* Das Auswahlfeld liegt in einer eigenen Zeile über die volle Breite: In der
   Zeile daneben wäre es acht Zeichen breit und damit unlesbar. */
.lg-rail-wahl{grid-column:1/-1;width:100%;padding:3px 6px;font-size:11.5px}

.lg-rail-m{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line-soft)}
.lg-rail-m > b{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.lg-rail-m ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.lg-rail-m li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px}
.lg-rail-pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-rail-p{width:8px;height:8px;border-radius:50%;background:var(--line-c);flex:none}
.lg-rail-p.is-w{background:var(--ok)}
.lg-rail-bind{flex-basis:100%;padding:2px 5px;font-size:11px}

/* Schmale Schirme: die Leiste ist dort kein Randstreifen, sondern eine
   Schublade über die halbe Breite. Ein 340-Pixel-Panel neben einem
   360-Pixel-Bildschirm ist kein Panel, sondern eine Wand. */
/* Zwei Spalten sind auf einem schmalen Schirm keine zwei Spalten. Dort
   rutscht die Abfolge unter den Text und hört auf zu kleben — festgeklebt
   nähme sie die halbe Höhe weg, die man zum Schreiben braucht. */
@media (max-width:1100px){
  .lg-arbeit.hat-abfolge{grid-template-columns:minmax(0,1fr)}
  .lg-rail{position:static;max-height:none}
  .lg-rail-b{max-height:60vh}
}

/* ====================================================================
   PRÄSENTIERMODUS
   ====================================================================
   Bildschirmübertragung in einer Besprechung: Karte groß, Legende und
   Notiz daneben, sonst nichts. Der Fließtext des Guides stört hier — man
   scrollt an ihm vorbei und alle sehen dabei zu. */
body.lg-p-an{overflow:hidden}
.lg-p{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  background:var(--bg);color:var(--ink)}
.lg-p.is-auf{display:flex}

.lg-p-kopf{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--line-c);background:var(--panel);flex:none}
.lg-p-wo{display:flex;align-items:center;gap:8px;min-width:0}
.lg-p-wo b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-p-zahl{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:auto}
.lg-p-btns{display:flex;gap:5px;flex:none}

.lg-p-mitte{flex:1;display:flex;min-height:0}
.lg-p-buehne{flex:1;position:relative;display:grid;place-items:center;padding:14px;min-width:0;
  background:var(--bg)}
.lg-p-buehne.is-setzen{cursor:crosshair}
/* Das Bild bestimmt die Bühne, nicht umgekehrt: Die Marken liegen prozentual
   darauf, also muss der Rahmen genau so groß sein wie das Bild — sonst sitzt
   jede Marke daneben. */
.lg-p-bild{position:relative;max-width:100%;max-height:100%;line-height:0}
.lg-p-bild img{max-width:100%;max-height:calc(100vh - 210px);width:auto;height:auto;display:block;
  border-radius:var(--r);transition:opacity .18s ease}
.lg-p-bild.is-wechsel img{opacity:0}
.lg-p-marken,.lg-p-token{position:absolute;inset:0;pointer-events:none}
/* Der Rahmen umschliesst das Bild und sonst nichts — er ist der Bezug fuer
   jede Prozentangabe. `line-height:0` verhindert die Zeilenhoehe unter dem
   Bild, die den Rahmen sonst ein paar Pixel hoeher machte als das Bild. */
.lg-p-bild{display:block;font-size:0}
.lg-p-token{pointer-events:auto}

/* DIE BEWEGUNG. Genau hier steckt die ganze Animation: eine Transition auf
   left/top. Marken mit demselben Schlüssel behalten ihr Element und bekommen
   nur neue Koordinaten — der Browser zeichnet den Weg dazwischen. */
.lg-p-marken .lg-mark{position:absolute;pointer-events:auto;
  transition:left var(--p-t,0ms) cubic-bezier(.4,0,.2,1),
             top  var(--p-t,0ms) cubic-bezier(.4,0,.2,1),
             opacity .2s ease, transform .2s ease}
.lg-p-marken .lg-mark.is-neu{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.lg-p-marken .lg-mark.is-weg{opacity:0;transform:translate(-50%,-50%) scale(.6)}
@media (prefers-reduced-motion:reduce){
  .lg-p-marken .lg-mark{transition:opacity .2s ease}
}

.lg-p-seite{width:min(320px,34vw);flex:none;border-left:1px solid var(--line-c);
  background:var(--panel);overflow:auto;padding:12px;display:flex;flex-direction:column;gap:14px}
.lg-p.ohne-seite .lg-p-seite{display:none}
.lg-p-seite h3{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.lg-p-notiz p{margin:0;font-size:14px;line-height:1.6}
.lg-p-notiz{padding:10px 12px;border-left:3px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:0 var(--r) var(--r) 0}
.lg-p-legende{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.lg-p-legende li{display:flex;align-items:center;gap:7px}
.lg-p-fluechtig{margin:0 0 7px;font-size:11px;color:var(--ink-3);font-style:italic}

.lg-p-rollen{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.lg-rolle{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;
  border-radius:var(--r-pill);border:1px solid var(--line-c);background:var(--panel-2);
  color:var(--ink-2);font:inherit;font-size:11.5px;cursor:pointer}
.lg-rolle:hover{border-color:var(--accent);color:var(--ink)}
.lg-rolle.is-on{border-color:var(--rolle-c,var(--accent));color:var(--rolle-c,var(--accent));
  background:color-mix(in srgb,var(--rolle-c,var(--accent)) 14%,transparent)}
.lg-rolle-i{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;display:grid;
  place-items:center;background:var(--panel);font-size:9.5px;font-weight:700}
.lg-rolle-i img{width:100%;height:100%;object-fit:cover}

.lg-p-tok{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:2px;cursor:grab;touch-action:none;user-select:none}
.lg-p-tok img,.lg-p-tok b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  object-fit:cover;background:var(--panel);border:2px solid var(--accent);font-size:11px;color:var(--ink)}
.lg-p-tok.ist-person img,.lg-p-tok.ist-person b{border-color:var(--ok)}
.lg-p-tok span{font-size:10.5px;padding:1px 6px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--ink-2);white-space:nowrap}

.lg-p-hinweis{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;
  padding:5px 12px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:12px}

.lg-p-film{flex:none;display:flex;gap:6px;padding:8px 12px;overflow-x:auto;
  border-top:1px solid var(--line-c);background:var(--panel)}
.lg-p-mini{position:relative;flex:none;padding:0;border:2px solid transparent;border-radius:var(--r);
  background:none;cursor:pointer;line-height:0;opacity:.6}
.lg-p-mini img{width:74px;height:48px;object-fit:cover;border-radius:2px;display:block}
.lg-p-mini span{position:absolute;left:3px;top:3px;padding:0 5px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.6);color:#fff;font-size:10px;line-height:15px}
.lg-p-mini.is-on{border-color:var(--accent);opacity:1}
.lg-p-mini:hover{opacity:1}

@media (max-width:820px){
  .lg-p-seite{position:absolute;right:0;top:0;bottom:0;width:min(300px,80vw);z-index:2;
    box-shadow:0 18px 44px -16px rgba(0,0,0,.55)}
  .lg-p-bild img{max-height:calc(100vh - 240px)}
}

/* ====================================================================
   MARKEN ALS MENSCHEN — eigene Seite, Gegner, Rolle, Ausrüstung
   ====================================================================
   Eine Taktikkarte kennt zwei Sorten Punkt: eine SACHE (ein Rauch, ein
   Bombenplatz) und einen MENSCHEN. Und beim Menschen ist die eine Frage, ohne
   die eine Karte falsch gelesen wird: einer von uns oder einer von denen.
   Deshalb ist die Seite kein Beiwerk in der Legende, sondern die Farbe des
   Punktes selbst. */
.lg-mark--wir{--mark-c:var(--ok)}
.lg-mark--gegner{--mark-c:var(--bad)}

/* EIN MENSCH IST EIN GESICHT, KEIN SYMBOL IN EINEM KASTEN.
   Die Marke hatte den Hintergrund und die Innenabstände einer Symbolmarke —
   um ein Profilbild herum wurde daraus ein dunkler Rahmen, der das Bild auf
   die halbe Fläche schrumpfte. Bei einem Punkt von 30 Pixeln ist das der
   Unterschied zwischen „wer ist das" und „irgendwer". Deshalb: kein
   Hintergrund, kein Abstand, das Bild füllt den ganzen Kreis. Der farbige
   Ring bleibt — er ist die Seite und damit die wichtigste Information. */
.lg-mark--wir,.lg-mark--gegner{background:transparent;padding:0;overflow:visible}
.lg-mark--wir .lg-mark-i,.lg-mark--gegner .lg-mark-i{
  width:100%;height:100%;border:0;border-radius:50%;overflow:hidden;background:var(--panel);
  display:block}
.lg-mark--wir .lg-mark-i img,.lg-mark--gegner .lg-mark-i img{
  width:100%;height:100%;display:block;object-fit:cover}
.lg-mark--wir .lg-mark-i b,.lg-mark--gegner .lg-mark-i b{
  width:100%;height:100%;display:grid;place-items:center;font-size:10px;font-weight:800}
/* Der Ring macht den Unterschied auch dort sichtbar, wo Farbe nicht ankommt —
   Rot-Grün-Sehschwäche ist unter Spielern nicht selten, und ein Ausdruck ist
   oft grau. Durchgezogen = wir, gestrichelt = Gegner. Er sitzt jetzt an der
   MARKE statt am Bild, weil das Bild die ganze Fläche einnimmt. */
.lg-mark--gegner{border-style:dashed}

/* Die Ausrüstung hängt unter der Marke — dort, wo die Person steht, statt in
   einer Liste weiter unten. */
/* DIE AUSRÜSTUNG ERSCHEINT BEIM ÜBERFAHREN.
   Dauerhaft unter jeder Marke waren es bei fünf Spielern fünfzehn kleine
   Kästchen auf der Karte — sie verdeckten genau das, worum es geht: die
   Wege. Wer wissen will, wer die AWP trägt, fährt die Marke an; im
   Präsentiermodus steht dieselbe Angabe zusätzlich dauerhaft links. */
.lg-mark-eq{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-3px);
  display:flex;gap:2px;margin-top:4px;pointer-events:none;z-index:6;
  padding:2px;border-radius:var(--r);background:color-mix(in srgb,var(--bg) 82%,transparent);
  opacity:0;visibility:hidden;transition:opacity var(--dur),transform var(--dur)}
.lg-mark:hover .lg-mark-eq,.lg-mark:focus-visible .lg-mark-eq{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* In der Legende ist sie kein Überfahren-Detail, sondern Teil der Zeile. */
.lg-karte-legende .lg-mark-eq,.lg-p-legende .lg-mark-eq{
  opacity:1;visibility:visible;position:static;transform:none;background:none;padding:0}
.lg-eq{display:grid;place-items:center;width:16px;height:16px;border-radius:3px;flex:none;
  border:1px solid var(--eq-c,var(--line-c));background:var(--panel);
  color:var(--eq-c,var(--ink-2));font-size:8px;font-weight:700;line-height:1;overflow:hidden}
.lg-eq img{width:100%;height:100%;object-fit:contain}

/* --- Das Feld an einer angeklickten Marke --------------------------- */
.lg-kt-seite{display:flex;gap:4px;margin-bottom:10px}
.lg-kt-sw{flex:1;padding:6px 8px;border:1px solid var(--line-c);border-radius:var(--r);
  background:var(--panel-2);color:var(--ink-2);font:inherit;font-size:12px;cursor:pointer}
.lg-kt-sw:hover{border-color:var(--accent)}
.lg-kt-sw.is-on{border-color:var(--accent);background:var(--accent);color:#fff}
.lg-kt-sw.is-wir.is-on{border-color:var(--ok);background:var(--ok)}
.lg-kt-sw.is-gegner.is-on{border-color:var(--bad);background:var(--bad)}
.lg-kt-sym.is-wir .lg-kt-nr{color:var(--ok)}
.lg-kt-sym.is-on .lg-kt-nr{color:#fff}

/* Gesichter statt Auswahlfeld: In einer Liste von zwanzig Namen findet man
   das Gesicht schneller als die Schreibweise. Das <select> bleibt trotzdem
   stehen — es ist der Weg mit der Tastatur und mit Vorleseprogramm. */
.lg-kt-koepfe{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.lg-kt-kopf{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 2px;
  border:1px solid var(--line-c);border-radius:var(--r-pill);background:var(--panel-2);
  color:var(--ink-2);font:inherit;font-size:11.5px;cursor:pointer;max-width:100%}
.lg-kt-kopf img,.lg-kt-kopf b{width:22px;height:22px;border-radius:50%;flex:none;object-fit:cover;
  display:grid;place-items:center;background:var(--panel);font-size:9px}
.lg-kt-kopf span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12ch}
.lg-kt-kopf:hover{border-color:var(--accent);color:var(--ink)}
.lg-kt-kopf.is-on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}

.lg-kt-eq{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:5px}
.lg-kt-eqg{flex-basis:100%;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:700;margin-top:4px}
.lg-eqw{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;
  border:1px solid var(--line-c);border-radius:var(--r-pill);background:var(--panel-2);
  color:var(--ink-2);font:inherit;font-size:11.5px;cursor:pointer}
.lg-eqw img{width:18px;height:18px;object-fit:contain;flex:none}
.lg-eqw:hover{border-color:var(--accent);color:var(--ink)}
.lg-eqw.is-on{border-color:var(--eq-c,var(--accent));color:var(--eq-c,var(--accent));
  background:color-mix(in srgb,var(--eq-c,var(--accent)) 14%,transparent)}

/* In der Legende der Präsentation reicht ein Strich am Rand — dort steht
   schon der Name, die Farbe ordnet ihn nur einer Seite zu. */
.lg-p-legende li.ist-wir{border-left:3px solid var(--ok);padding-left:7px}
.lg-p-legende li.ist-gegner{border-left:3px solid var(--bad);padding-left:7px}
.lg-p-legende .lg-mark-eq{position:static;transform:none;margin:0 0 0 auto}

/* ====================================================================
   ANALYSE — aufgezeichnete Spiele je Kader
   ==================================================================== */
.an-z{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--panel-2);color:inherit;text-decoration:none;transition:border-color .12s}
.an-z:hover{border-color:var(--accent)}
/* Die Art als kurzes Kürzel und nicht als Wort: Sie steht in jeder Zeile und
   soll die Zeile nicht dominieren. */
.an-art{flex:none;font-family:var(--font-data);font-size:9.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 6px;border-radius:3px;background:var(--line-soft);color:var(--ink-3)}
.an-art.ist-demo{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.an-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.4}
.an-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-t .muted{font-size:11.5px}
.an-m{flex:none;font-size:11.5px;color:var(--ink-2);text-align:right}
.an-m b{font-family:var(--font-data);margin-left:5px}
.an-m--ohne{color:var(--ink-3);font-style:italic}
.an-art-wahl{display:flex;gap:12px;flex-wrap:wrap}

.an-show{display:flex;flex-direction:column;gap:16px}
.an-kopf h1{margin:0 0 4px;font-size:22px}
.an-notiz{margin-top:10px;padding:10px 12px;border-left:3px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:0 var(--r) var(--r) 0;
  font-size:13.5px;line-height:1.6}
.an-notiz b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--warn);margin-bottom:3px}

/* Der Kasten für das, was (noch) nicht im Browser läuft. Er sagt, was Sache
   ist, statt eine leere Fläche zu zeigen. */
.an-demo{display:flex;gap:14px;padding:16px;border:1px solid var(--line-c);border-radius:var(--r-lg);
  background:var(--panel);align-items:flex-start}
.an-demo-k{flex:none;width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--panel-2);color:var(--ink-3)}
.an-demo-k svg{width:22px;height:22px}
.an-demo-b{min-width:0;flex:1}
.an-demo-b h2{margin:0 0 6px;font-size:16px}
.an-cmd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.an-cmd code{padding:5px 10px;border-radius:var(--r);background:var(--panel-2);
  border:1px solid var(--line-soft);font-family:var(--font-data);font-size:13px}

/* Kompakt oben: die vier Angaben, wegen derer man hinsieht. */
.an-kurz{display:flex;flex-wrap:wrap;gap:18px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.an-kurz-z{display:flex;flex-direction:column;gap:2px;min-width:72px}
.an-kurz-z b{font-size:15px}
.an-score{font-family:var(--font-data);font-size:20px!important;font-weight:800}
.an-score.is-ok{color:var(--ok)}
.an-score.is-bad{color:var(--bad)}
.an-score.is-warn{color:var(--warn)}

/* Die eigene Zeile hervorgehoben — in einer Nachbesprechung sucht jeder
   zuerst sich selbst. */
.an-stats tbody tr.ist-ich{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.an-stats tbody tr.ist-ich td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.an-edit summary{list-style:none}
.an-edit summary::-webkit-details-marker{display:none}

/* --- TOT: der Punkt bleibt, die Person ist raus ---------------------
   Weder Entfernen noch Ausblenden: WO jemand gefallen ist, ist die
   Information — der Punkt steht deshalb weiter da, tritt aber zurück.
   Grau UND Kreuz, nicht nur grau: Ein blasser Punkt sieht auf einem hellen
   Radarbild aus wie ein Darstellungsfehler. */
/* DAS KREUZ LIEGT ÜBER DER GANZEN MARKE.
   Es hing am inneren Symbol und war damit so groß wie das Symbol — auf einem
   Profilbild ein Kringel im Gesicht statt einer Streichung. Jetzt spannt es
   über den vollen Kreis und ist das Erste, was man sieht. Grau allein reicht
   nicht: Ein blasser Punkt auf einem hellen Radarbild sieht aus wie ein
   Darstellungsfehler. */
.lg-mark.is-tot{filter:grayscale(1) brightness(.8);opacity:.85}
.lg-mark.is-tot::before,
.lg-mark.is-tot::after{
  content:"";position:absolute;left:50%;top:50%;width:132%;height:3px;
  background:var(--bad);border-radius:3px;z-index:5;pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.lg-mark.is-tot::before{transform:translate(-50%,-50%) rotate(45deg)}
.lg-mark.is-tot::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* Der Tooltip nutzt ::after im Fliesstext — an einer toten Marke gewinnt das
   Kreuz, sonst stünde die Blase quer über der Karte. */
.lg-mark.is-tot[data-tip]::after{content:""}
.lg-mark.is-tot .lg-mark-n{text-decoration:line-through;text-decoration-color:var(--bad)}

.lg-kt-zustand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lg-kt-tot{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--line-c);border-radius:var(--r-pill);background:var(--panel-2);
  color:var(--ink-2);font:inherit;font-size:12px;cursor:pointer;flex:none}
.lg-kt-tot:hover{border-color:var(--bad);color:var(--bad)}
.lg-kt-tot.is-on{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.lg-kt-x{font-weight:800;font-size:13px;line-height:1}
.lg-kt-zustand .small{flex:1;min-width:160px}

/* Rückmeldung in der rechten Leiste — auffallen, nicht aufhalten. */
.lg-rail-melde{margin:0;padding:8px 12px;font-size:11.5px;line-height:1.5;
  background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok);
  border-bottom:1px solid var(--line-soft)}

/* ====================================================================
   SICHTBARKEIT — drei Symbole neben der Überschrift
   ====================================================================
   Klein und zurückhaltend: Der Schalter wird selten benutzt und darf nicht
   aussehen wie das Wichtigste am Block. Die aktive Stufe ist trotzdem ohne
   Aufklappen zu erkennen — das war der Grund, warum es kein Auswahlfeld ist. */
.pv{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-soft);
  border-radius:var(--r-pill);background:var(--panel-2)}
.pv-f{display:contents}
.pv-b{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:0;
  border-radius:var(--r-pill);background:none;color:var(--ink-3);font:inherit;font-size:11px;
  cursor:pointer;line-height:1.4}
.pv-b svg{width:14px;height:14px;flex:none}
/* Die Beschriftung steht nur an der AKTIVEN Stufe. Drei Wörter nebeneinander
   wären eine Leiste; ein Wort ist eine Aussage. */
.pv-t{display:none}
.pv-b.is-on .pv-t{display:inline}
.pv-b:hover{color:var(--ink)}
.pv-b.is-on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.pv-b.pv-oeffentlich.is-on{color:var(--ok)}
.pv-b.pv-intern.is-on{color:var(--ink)}
.pv-b.pv-geschuetzt.is-on{color:var(--warn)}

/* Der abgesetzte Block mit den echten Personendaten. */
.pe-sub{margin:14px 0;padding:12px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:color-mix(in srgb,var(--panel-2) 55%,transparent)}
.pe-sub.ist-geschuetzt{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.pe-sub-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pe-sub-h b{display:inline-flex;align-items:center;gap:7px;font-size:13.5px}
.pe-sub-h b svg{width:16px;height:16px;color:var(--ink-3)}
.pe-sub-h .pv{margin-left:auto}

/* Der Disclaimer. Er darf auffallen — er nimmt jemandem eine Funktion weg,
   die er sonst für stärker hält, als sie ist. */
.pe-schutz{margin-top:12px;padding:11px 13px;border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.pe-schutz > b{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:12.5px;color:var(--warn)}
.pe-schutz > b svg{width:16px;height:16px;flex:none}
.pe-schutz ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px;
  font-size:12px;line-height:1.55;color:var(--ink-2)}
.pe-schutz li b{color:var(--ink)}

@media (max-width:560px){
  .pv-t{display:none!important}
  .pe-sub-h .pv{margin-left:0}
}

/* Marken, die es in der Abfolge schon gibt und auf dieser Karte fehlen.
   Ein Klick darauf, ein Klick auf die Karte — und die Marke ist dieselbe,
   nicht eine gleich benannte. Genau das war vorher die Handarbeit. */
.lg-kt-reihe--holen{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.lg-kt-holen{border-style:dashed}
.lg-kt-holen img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.lg-kt-holen.ist-wir{border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok)}
.lg-kt-holen.ist-gegner{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}
.lg-kt-holen.is-on{border-style:solid;background:var(--accent);color:#fff}
.lg-kt-holen.is-on svg{color:#fff}

/* ====================================================================
   FREIHAND IN DER PRÄSENTATION
   ====================================================================
   Die Leinwand deckt genau das Bild ab — dieselbe Regel wie bei den Marken.
   Sie nimmt nur dann Klicks, wenn der Stift an ist; sonst bliebe jede Marke
   und jede Rolle unter ihr unerreichbar. */
.lg-p-stift{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  touch-action:none;z-index:1}
.lg-p.zeichnet .lg-p-stift{pointer-events:auto;cursor:crosshair}
/* Beim Zeichnen treten Marken und Rollen zurück: Sie sind dann nicht das
   Thema, und ein versehentlich verschobener Token wäre ärgerlich. */
.lg-p.zeichnet .lg-p-marken,.lg-p.zeichnet .lg-p-token{pointer-events:none}

.lg-p-stiftleiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:7px 14px;border-bottom:1px solid var(--line-c);background:var(--panel-2)}
.lg-p-sl-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--ink-3)}
.lg-p-sl-r{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}

.lg-p-farben{display:flex;gap:5px}
.lg-p-farbe{width:22px;height:22px;border-radius:50%;border:2px solid transparent;
  background:var(--f);cursor:pointer;padding:0;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent) inset}
.lg-p-farbe:hover{transform:scale(1.12)}
.lg-p-farbe.is-on{border-color:var(--ink);transform:scale(1.12)}

.lg-p-staerken{display:flex;gap:4px}
.lg-p-staerke{width:34px;height:24px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line-c);border-radius:var(--r);background:var(--panel);cursor:pointer}
.lg-p-staerke span{display:block;width:20px;border-radius:9px;background:var(--ink-2)}
.lg-p-staerke:hover{border-color:var(--accent)}
.lg-p-staerke.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.lg-p-staerke.is-on span{background:var(--accent)}

@media (max-width:640px){
  .lg-p-stiftleiste{gap:9px;padding:6px 10px}
  .lg-p-sl-t{display:none}
  .lg-p-sl-r{margin-left:0;flex-basis:100%}
}

/* ====================================================================
   TRUPPENLISTE LINKS IM PRÄSENTIERMODUS
   ====================================================================
   „Wer steht wo" beantwortet die Karte. „Womit" stand nur an der Marke und
   nur beim Überfahren — in einer Bildschirmübertragung sieht das niemand
   außer dem, der die Maus hält. Hier steht es dauerhaft, je Karte mit dem
   Stand, der für DIESE Karte eingetragen ist. */
.lg-p-truppe{width:min(215px,26vw);flex:none;border-right:1px solid var(--line-c);
  background:var(--panel);overflow:auto;padding:12px 11px}
.lg-p-truppe h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.lg-p.ohne-seite .lg-p-truppe{display:none}

.lg-p-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.lg-p-tl li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;
  padding:5px 6px;border-radius:var(--r);background:var(--panel-2);
  border:1px solid transparent;border-left:3px solid var(--ok)}
.lg-p-tl li.ist-tot{border-left-color:var(--bad);opacity:.62;filter:grayscale(1)}
.lg-p-tl-b{width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--panel);
  display:grid;place-items:center;border:2px solid var(--ok)}
.lg-p-tl li.ist-tot .lg-p-tl-b{border-color:var(--bad)}
.lg-p-tl-b img{width:100%;height:100%;object-fit:cover;display:block}
.lg-p-tl-b svg{width:16px;height:16px}
.lg-p-tl-b b{font-size:10px;font-weight:800}
.lg-p-tl-n{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Die Ausrüstung steht unter dem Namen über beide Spalten — bei drei
   Gegenständen wäre sie neben einem Namen sonst abgeschnitten. */
.lg-p-tl-eq{grid-column:1/-1;display:flex;gap:3px;flex-wrap:wrap;
  opacity:1;visibility:visible;position:static;transform:none;background:none;padding:0}
.lg-p-tl-eq .lg-eq{width:20px;height:20px}
.lg-p-tl-leer{grid-column:1/-1;font-size:11px;color:var(--ink-3)}
.lg-p-tl li .pill{justify-self:end}

@media (max-width:900px){
  .lg-p-truppe{position:absolute;left:0;top:0;bottom:0;z-index:2;box-shadow:var(--sh-2,0 18px 44px -16px rgba(0,0,0,.55))}
  .lg-p.ohne-seite .lg-p-truppe{display:none}
}

/* ====================================================================
   DIE SPUR — woher eine Marke kam
   ====================================================================
   Sie liegt UNTER den Marken und nimmt keine Klicks: Sie ist eine Aussage
   über die Vergangenheit, kein Bedienelement. Gedimmt und ohne
   Beschriftung, damit sie die aktuelle Lage nie überstimmt. */
.lg-p-spur{position:absolute;inset:0;pointer-events:none;z-index:0}
.lg-p-spur .lg-mark{position:absolute;opacity:.28;filter:saturate(.5);
  box-shadow:none;pointer-events:none}
/* Die Nummer an der Spur wäre eine zweite, falsche Nummerierung. */
.lg-p-spur .lg-mark-n,.lg-p-spur .lg-mark-eq{display:none}
.lg-p-spur .lg-mark::before,.lg-p-spur .lg-mark::after{display:none}

/* Die Linie macht aus zwei Punkten eine Bewegung. Sie beginnt am alten Ort
   und ist waagerecht gezeichnet — gedreht wird sie per transform, mit dem
   Seitenverhältnis des Bildes im Winkel (siehe hoeheZuBreite in app.js). */
.lg-p-weg{position:absolute;height:2px;transform-origin:0 50%;
  background:linear-gradient(to right,
    color-mix(in srgb,var(--ink) 8%,transparent),
    color-mix(in srgb,var(--accent) 55%,transparent));
  border-radius:2px;opacity:.5;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .lg-p-spur{opacity:.4}
}


/* ============================================================
   DEMO-WIEDERGABE — die 2D-Ansicht einer CS2-Aufzeichnung
   ============================================================
   Die Karte ist DIESELBE Overview wie im Lernbereich (`.lg-karte`), nur
   ohne Marken und mit einer Leinwand darüber. Deshalb steht hier auch
   nichts über Farben von Ereignissen: Die kommen aus app.js, weil dort
   entschieden wird, was ein Rauch und was ein Kill ist — an zwei Stellen
   gepflegt liefen sie auseinander.

   Die Leinwand liegt ÜBER dem Bild und ist genau so groß wie es. Beide
   behalten ihr Seitenverhältnis; gerechnet wird in Prozent, damit dieselbe
   Stelle bei jeder Breite dieselbe bleibt. */
.dv-buehne{margin-top:12px}
.dv-buehne[hidden]{display:none}

.dv-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dv-leiste .dv-zeit{flex:1 1 180px;min-width:140px;accent-color:var(--accent)}
.dv-uhr{font-variant-numeric:tabular-nums;font-weight:600;min-width:104px;
  font-size:12px;color:var(--ink-2)}
.dv-tempo,.dv-karte{padding:4px 6px;font-size:12px}
.dv-karte{max-width:200px}

/* Die Rundenleiste ist die eigentliche Navigation. „Zeig mir Runde 14" ist
   die Ansage in jeder Besprechung — nicht „spul auf Minute 23". */
.dv-runden{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px}
.dv-runde{border:1px solid var(--line-c);background:var(--panel-2);color:var(--ink-2);
  border-radius:var(--r);padding:2px 7px;font-size:11px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums}
.dv-runde:hover{border-color:var(--accent);color:var(--ink)}
.dv-runde.ist-da{background:var(--accent);border-color:var(--accent);color:#fff}

.dv-haupt{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:start}
/* Die Platte ist QUADRATISCH gedeckelt, und beides hat einen Grund.

   `max-width`: Eine Overview ist ein großes Bild. Ohne Deckel füllt sie die
   ganze Spalte, und auf einem breiten Bildschirm wird aus der Karte ein
   Plakat, auf dem man einzelne Marken eher sucht als sieht. Dieselbe
   Überlegung und dieselbe Zahl wie bei den Taktikkarten im Lernbereich
   (Learn::KARTE_BREITE).

   `aspect-ratio`: Der Radar ist 1024×1024, und die Umrechnung Welt→Bild
   rechnet mit dieser einen Kante. Steht an der Ebene ein Bild mit anderem
   Seitenverhältnis, wird es jetzt eingepasst statt die Fläche zu verziehen —
   und der Player sagt oben dazu, dass es kein Radarbild ist. */
/* DER PLAYER PASST AUF DEN BILDSCHIRM — höchstens 95 vh, alles inklusive.

   Begrenzt wird die BREITE und nicht die Höhe, und das ist der Trick: Die
   Platte ist quadratisch, ihre Breite bestimmt also ihre Höhe. Eine
   `max-height` würde das Seitenverhältnis überstimmen, die Fläche wäre nicht
   mehr quadratisch — und genau daran hängt die Umrechnung Welt → Bild.

   `--dv-rest` ist der Platz, den der Rest der Bühne über und neben der Karte
   braucht: Bedienleiste, Rundenleiste, Panel-Kopf und -Polsterung. Lieber
   großzügig geschätzt: Zu klein gerechnet heißt, der Player ragt doch über
   den Rand — und dann scrollt man beim Abspielen. */
.dv-buehne{--dv-rest:210px}

/* Der harte Deckel für die ganze Sektion.
   Die Rechnung über `--dv-rest` deckt ab, was IMMER da ist (Kopf, Polsterung,
   Bedien- und Rundenleiste). Was sie nicht kennen kann, sind die Hinweise, die
   der Player unter die Bühne schreibt — „keine Kalibrierung", „kein
   Radarbild". Die kommen dazu, und dann wäre die Zusage gerissen.
   Deshalb außen ein Deckel, der im Normalfall nie greift. */
.md-player{max-height:95vh;overflow:auto}
.dv-platte{position:relative;line-height:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-c);background:var(--panel-2);
  max-width:min(720px, calc(95vh - var(--dv-rest)));aspect-ratio:1/1}
.dv-platte img{width:100%;height:100%;display:block;object-fit:contain}
.dv-platte canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Die Spalte daneben darf die Karte nicht überragen — sonst wäre die
   95-vh-Grenze durch die Ereignisliste wieder gerissen. Sie bekommt dieselbe
   Höhe wie die Platte; was nicht hineinpasst, scrollt in der Liste. */
.dv-seite{display:flex;flex-direction:column;gap:10px;min-width:0;
  max-height:min(720px, calc(95vh - var(--dv-rest)));overflow:hidden}
/* `max-height:none` ist nötig, weil die feste 320-Pixel-Grenze weiter unten
   sonst gewinnt und die Liste bei einem hohen Fenster kürzer bliebe als der
   Platz daneben. */
.dv-seite .dv-feed{flex:1 1 auto;min-height:0;max-height:none}

/* Die Legende ist zugleich der Filter: Wer nur die Rauche sehen will,
   klickt den Rest weg. Ein zweites Bedienelement dafür wäre dieselbe
   Aussage an einer zweiten Stelle. */
.dv-legende{display:flex;flex-direction:column;gap:2px}
.dv-leg{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;
  padding:2px 4px;border-radius:var(--r);color:var(--ink-2)}
.dv-leg:hover{background:var(--panel-2)}
.dv-leg.ist-aus{opacity:.45}
.dv-leg input{margin:0}
.dv-leg b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.dv-pkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}

.dv-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  max-height:320px;overflow:auto;font-size:11.5px}
.dv-feed li{display:flex;align-items:center;gap:6px;padding:3px 4px;
  border-radius:var(--r);color:var(--ink-2)}
.dv-feed li:nth-child(1){background:var(--panel-2);color:var(--ink)}
.dv-fz{font-variant-numeric:tabular-nums;color:var(--ink-3);flex:0 0 auto}
.dv-ft{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Schmal: Die Karte bleibt oben, die Liste rutscht darunter. Nebeneinander
   wäre beides zu schmal, um etwas zu erkennen. */
@media (max-width:900px){
  .dv-haupt{grid-template-columns:1fr}
  .dv-feed{max-height:180px}
  /* Untereinander teilen sich Karte und Liste die Höhe — die Karte bekommt
     den größeren Teil, weil sie der Grund ist, warum jemand hinsieht. */
  .dv-buehne{--dv-rest:340px}
  .dv-seite{max-height:none;overflow:visible}
  .dv-seite .dv-feed{max-height:180px}
}


/* Kalibrierung einer Overview-Ebene: erst die Datei, dann die drei Zahlen.
   Der Block sitzt in einem ohnehin engen Auswahlfeld — deshalb kompakt. */
.kal-quelle{padding:8px 9px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--panel-2)}
.kal-quelle input[type=file]{font-size:11.5px;max-width:100%}
.kal-text{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;line-height:1.45;resize:vertical}
.kal-echo{margin:6px 0 0;padding:5px 7px;border-radius:var(--r)}
.kal-echo.ist-ok{background:var(--ok-bg);color:var(--ok)}
.kal-echo.ist-warn{background:var(--warn-bg);color:var(--warn)}
.kal-echo.ist-bad{background:var(--bad-bg);color:var(--bad)}

/* Die gelesenen Maps als Zeilen: viele kurze Angaben, die man überfliegt. */
.vpk-liste{display:flex;flex-wrap:wrap;gap:4px}
.vpk-z{font-size:11px;padding:2px 7px;border:1px solid var(--line-soft);border-radius:var(--r-pill);
  background:var(--panel-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.vpk-z b{color:var(--ink)}

/* ============================================================
   IMPORT AUS DEN SPIELDATEIEN
   ============================================================
   Ein Arbeitsschritt in drei Zuständen: wählen, ansehen, laufen lassen.
   Die Vorschau ist keine Zierde — sie ist der Grund, warum man den Import
   beurteilen kann, ohne ihn erst gemacht zu haben. */
.imp-arten{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.imp-art{display:flex;align-items:center;gap:9px;padding:6px 9px;cursor:pointer;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2)}
.imp-art:hover{border-color:var(--accent)}
.imp-art input{margin:0}
.imp-art b{font-size:12.5px}
.imp-n{font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;font-variant-numeric:tabular-nums}
.imp-art .muted{margin-left:auto}

.imp-vorschau{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.imp-p{margin:0;width:104px;text-align:center}
.imp-p img{width:104px;height:78px;object-fit:contain;display:block;border-radius:var(--r);
  border:1px solid var(--line-soft);background:var(--panel-2)}
.imp-p figcaption{font-size:10px;color:var(--ink-3);margin-top:3px;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.imp-balken{height:5px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:10px}
.imp-balken i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.imp-log{margin-top:10px;max-height:150px;overflow:auto;font-size:11px;color:var(--ink-2);
  border-top:1px solid var(--line-soft);padding-top:8px}
.imp-log .ist-bad{color:var(--bad)}


/* ============================================================
   WETTKAMPF — Spielkacheln, Begegnungen, Import-Wege
   ============================================================ */

/* Stufe 1: welches Spiel. Das Banner trägt die Kachel, das Logo sitzt darauf. */
.sp-kacheln{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sp-k{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line-c);background:var(--panel);min-height:150px;
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.sp-k:hover{border-color:var(--sp-farbe,var(--accent));transform:translateY(-2px)}
.sp-k-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22}
.sp-k:hover .sp-k-bg{opacity:.3}
/* Der Verlauf ist kein Effekt, sondern Lesbarkeit: Text auf einem Screenshot
   ist ohne ihn Glückssache. */
.sp-k-in{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px;
  min-height:150px;justify-content:flex-end;
  background:linear-gradient(to top,var(--panel) 32%,color-mix(in srgb,var(--panel) 55%,transparent))}
.sp-k-logo{width:34px;height:34px;object-fit:contain;margin-bottom:4px}
.sp-k-name{font-size:16px;line-height:1.2}
.sp-k-zahl{font-size:11.5px;color:var(--ink-3)}
.sp-k-bilanz{display:flex;align-items:baseline;gap:3px;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:2px}
.sp-k-bilanz i{color:var(--ink-3);font-style:normal;font-weight:400}
.sp-k-bilanz .s{color:var(--ok)} .sp-k-bilanz .n{color:var(--bad)} .sp-k-bilanz .u{color:var(--ink-2)}
.sp-k-bilanz .muted{font-size:11px;font-weight:400;margin-left:5px}
.sp-k-zul{font-size:10.5px;color:var(--ink-3)}

/* Die Filterleiste: sichtbar, mitreisend, verlinkbar. */
.mf{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 10px}
.mf-f{display:flex;flex-direction:column;gap:3px}
.mf-f select{padding:5px 8px;font-size:12.5px}

/* Stufe 2: eine Begegnung. Zwei Wappen, ein Ergebnis, die Map dahinter. */
.mliste{display:flex;flex-direction:column;gap:8px}
.mrow{position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line-c);background:var(--panel)}
.mrow:hover{border-color:var(--accent)}
.mrow-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.13;filter:saturate(.6)}
.mrow.ist-s{border-left:3px solid var(--ok)}
.mrow.ist-n{border-left:3px solid var(--bad)}
.mrow.ist-u{border-left:3px solid var(--ink-3)}
.mrow.ist-offen{border-left:3px solid var(--info)}
.mrow-check{position:absolute;top:10px;left:10px;width:16px;height:16px;
  accent-color:var(--accent);z-index:2}
.mrow-in{position:relative;display:grid;align-items:center;gap:12px;padding:12px 14px 12px 34px;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto auto}
.mrow-team{display:flex;align-items:center;gap:9px;min-width:0}
.mrow-team img{width:34px;height:34px;object-fit:contain;flex:0 0 auto}
.mrow-team b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow-gegner{flex-direction:row-reverse;text-align:right}
.mrow-ini{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line-c);font-size:11px;font-weight:700;
  color:var(--ink-3)}
.mrow-score{text-align:center;min-width:96px}
.mrow-score b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1.1}
.mrow-score b i{font-style:normal;color:var(--ink-3);margin:0 3px;font-weight:400}
.mrow-score b.s{color:var(--ok)} .mrow-score b.n{color:var(--bad)}
.mrow-score b.u,.mrow-score b.offen{color:var(--ink-3)}
.mrow-karte{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.mrow-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--ink-2);
  text-align:right;white-space:nowrap}
.mrow-cta{flex:0 0 auto}

@media (max-width:820px){
  .mrow-in{grid-template-columns:1fr auto 1fr;grid-template-areas:
    "wir score gegner" "meta meta meta" "cta cta cta";gap:8px;padding:12px}
  .mrow-team:first-of-type{grid-area:wir} .mrow-score{grid-area:score}
  .mrow-gegner{grid-area:gegner} .mrow-meta{grid-area:meta;text-align:left;flex-direction:row;
    gap:8px;flex-wrap:wrap} .mrow-cta{grid-area:cta;text-align:center}
}

/* ── Der Import-Dialog ───────────────────────────────────────────────────
   Zwei Schritte, drei Wege. Die GRÖSSE der Kacheln ist die Aussage: oben die
   beiden, die alles mitbringen, darunter halb so hoch die Handeingabe. */
.imx-nr{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;margin-right:6px}
.imx-wege{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.imx-oben{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:760px){ .imx-oben{grid-template-columns:1fr} }

.imx-weg{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:16px;border-radius:var(--r-lg);border:1px solid var(--line-c);background:var(--panel);
  cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,transform .15s}
.imx-weg:hover:not(.ist-aus){border-color:var(--accent);transform:translateY(-2px)}
.imx-weg.ist-gewaehlt{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.imx-weg.ist-aus{opacity:.5;cursor:not-allowed}
.imx-weg b{font-size:15px}
.imx-weg span{font-size:12px;color:var(--ink-2);line-height:1.45}
.imx-gfx{display:block;width:100%;margin-bottom:4px}
.imx-svg{width:100%;height:82px;display:block}
.imx-weg--hand{flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
.imx-weg--hand b{font-size:13.5px}
.imx-weg--hand span{font-size:11.5px}

/* Die Drop-Zone atmet, wenn eine Datei darüber schwebt. */
.imx-weg--demo .imx-rahmen{transition:stroke-dashoffset .4s}
.imx-weg--demo:hover .imx-fall{animation:imx-fall 1.4s ease-in-out infinite}
@keyframes imx-fall{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* DIE WÜSTENPFLANZE. Sie rollt über die Handeingabe, weil hier nichts von
   selbst passiert — neun Felder, alles Handarbeit. Ein Scherz, ja; aber er
   sagt in einer halben Sekunde, was drei Sätze Erklärung sagen würden. */
.imx-wueste{position:relative;flex:0 0 auto;width:52px;height:34px;overflow:hidden;
  color:var(--warn);opacity:.75}
.imx-busch{position:absolute;top:4px;left:-24px;width:26px;height:26px;
  animation:imx-roll 4.5s linear infinite}
@keyframes imx-roll{
  0%{transform:translateX(0) rotate(0)}
  100%{transform:translateX(76px) rotate(540deg)}
}
.imx-weg--hand:hover .imx-busch{animation-duration:1.6s}
@media (prefers-reduced-motion:reduce){
  .imx-busch{animation:none;left:13px}
  .imx-weg--demo:hover .imx-fall{animation:none}
}

/* Die große Ablagefläche im Demo-Weg. */
.dz{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 18px;
  border:2px dashed var(--line-c);border-radius:var(--r-lg);background:var(--panel-2);
  cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.dz:hover,.dz:focus-visible{border-color:var(--accent)}
.dz.ist-drueber{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,transparent)}
.dz-ic{width:44px;height:44px;color:var(--ink-3)}
.dz-ic svg{width:100%;height:100%}
.dz.ist-drueber .dz-ic{color:var(--accent)}
.dz b{font-size:14px}

/* Der Zuordnungsschritt darunter: welche Fünf sind wir, wer ist wer.
   DIE EIGENE ZEILE IST HERVORGEHOBEN, weil das die einzige Frage ist, die
   dieser Schritt stellt — man soll auf einen Blick sehen, welche fünf der
   zehn Zeilen die eigenen sind, ohne die Seitenspalte zu lesen. */
.dz-seiten{margin:10px 0;padding:10px 12px;border:1px solid var(--line-c);
  border-radius:var(--r-md);background:var(--panel-2)}
.dz-tab tr.ist-wir{background:color-mix(in oklab,var(--accent) 7%,transparent)}
.dz-tab tr.ist-wir td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.dz-tab select.sm{max-width:170px}

/* Die Rundenleiste: eine Zahl je Runde, eingefärbt nach Ausgang. Sie ersetzt
   keinen Bericht — sie zeigt in einer Zeile, ob ein 13:4 ein Durchmarsch war
   oder ein Spiel mit zwei Hälften. */
.dz-rd{display:inline-block;min-width:20px;margin:0 2px 2px 0;padding:1px 4px;
  border-radius:var(--r-sm);text-align:center;font-size:11px;line-height:1.5;
  font-variant-numeric:tabular-nums}
.dz-rd.is-wir{background:color-mix(in oklab,var(--ok) 24%,transparent);color:var(--ink-1)}
.dz-rd.is-gegen{background:color-mix(in oklab,var(--bad) 22%,transparent);color:var(--ink-1)}
.dz-rd.is-offen{background:var(--panel-2);color:var(--ink-3)}

.dz-go{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}

/* Hinweise der 2D-Wiedergabe dort, wo es keinen Ergebnisblock gibt (die
   Match-Seite). Ohne sie bliebe eine leere Fläche stehen, und die liest sich
   wie ein Fehler statt wie „hier fehlt eine Kalibrierung". */
.dv-hinweis{margin-top:8px}

/* ── EINE ZAHL MIT IHRER BEZUGSGRÖSSE (Core\Kennzahl) ───────────────────────
   Drei Zeilen übereinander: oben klein der Schnitt, in der Mitte der Wert,
   unten die Differenz. Die Reihenfolge ist die Leserichtung — der WERT ist
   die Antwort und steht deshalb in der Mitte, wo der Blick zuerst hinfällt;
   der Vergleich rahmt ihn.

   DIE DIFFERENZ TRÄGT NIE ALLEIN DIE AUSSAGE. Sie steht als Zahl mit
   Vorzeichen da (+4, −1,2, ±0) und ist zusätzlich gefärbt. Wer Rot und Grün
   nicht unterscheidet, liest das Vorzeichen — die Farbe verstärkt, sie
   ersetzt nicht. */
.kz{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.15;
  font-variant-numeric:tabular-nums}
.kz-bez{font-size:10px;color:var(--ink-3);opacity:.85}
.kz-w{font-size:inherit}
.kz-d{font-size:10px;font-weight:600}
.kz-d.is-gut{color:var(--ok)}
.kz-d.is-schlecht{color:var(--bad)}
.kz-d.is-gleich{color:var(--ink-3);font-weight:400}
/* In einer Karten-Tabelle (mobil) steht die Zahl neben ihrer Beschriftung —
   dann darf der Block nicht rechtsbündig in die Ecke rutschen. */
@media (max-width:720px){ .tw-cards .kz{align-items:flex-end} }

/* ── Der Demo-Block der Match-Seite ─────────────────────────────────────── */
.md-tab tr.ist-gegner{opacity:.72}
.md-tab tr.ist-gegner td:first-child{box-shadow:inset 3px 0 0 var(--line-c)}
.md-chartgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.md-sp{border:1px solid var(--line-c);border-radius:var(--r-md);background:var(--panel-2)}
.md-sp>summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;cursor:pointer;list-style:none}
.md-sp>summary::-webkit-details-marker{display:none}
.md-sp>summary::before{content:"▸";color:var(--ink-3);font-size:11px}
.md-sp[open]>summary::before{content:"▾"}
.md-sp>summary .small{margin-left:auto;display:flex;gap:10px}

/* Die vierzig Werte je Spieler: so viele Spalten, wie die Breite hergibt.
   Eine feste Zahl wäre auf dem Handy eine Wand und auf dem Bildschirm eine
   sehr lange Spalte. */
.md-werte{display:grid;gap:4px 18px;padding:4px 12px 12px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.md-w{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:3px 0;border-bottom:1px solid color-mix(in oklab,var(--line-c) 55%,transparent)}
.md-w-l{font-size:12px;color:var(--ink-2)}