/* CS2-Clips -- "Marker uebers Replay" (seit 22.09.2026)

   Die Seite ist das Replay selbst, auf das ein Kumpel mit Marker malt. Clips
   laufen randlos und gross; Anmerkungen zeichnen sich darueber. Darunter die
   ruhigeren Werkzeuge in derselben Grammatik.

   Welt:   Replay-Schwarz als Grund, Flaechen als flach uebereinandergelegte
           Ebenen -- Tiefe nur durch Ueberlagerung, nie durch Schatten oder Glas.
   Tinte:  weisser Marker ist die einzige Zeichenfarbe. Textmarker-Baender nur
           in den vier Clipart-Toenen (helfer.js, TONE) -- sie bedeuten ueberall
           dasselbe wie auf der Karte.
   Schrift: Permanent Marker fuer Namen, Anmerkungen, grosse Woerter; Archivo
           fuer Text, Archivo Schmal fuer Zahlen und Werkzeug.
   Richtungsvertrag: .impeccable/surfaces/site-cs2-index-html.md (nicht ausgeliefert). */

:root {
  --schwarz:  #0b0c0e;
  --ebene-1:  #121418;
  --ebene-2:  #1a1d22;
  --ebene-3:  #23272d;
  --haar:     #2b3037;
  --marker:   #f6f3ea;

  /* Alte Namen, auf die der Abspieler-Teil weiter unten baut -- dieselbe Welt. */
  --ink:      var(--schwarz);
  --ink-2:    #0f1114;
  --panel:    var(--ebene-1);
  --panel-hi: var(--ebene-2);
  --rule:     var(--haar);
  --rule-soft:#20242a;
  --video:    #000;

  --text:     #e9e6de;
  --dim:      #aaa59a;   /* 8,1:1 auf Schwarz */
  --dimmer:   #908b81;   /* 5,6:1 auf Schwarz, 5,2:1 auf Ebene 1 */

  --ct:       #7fb1de;   /* Opening Pick -- und CT, wo Teams gemeint sind */
  --t:        #e5ac44;   /* Multikill -- und T */
  --hot:      #e35b40;   /* Clutch, Ninja */
  --cool:     #57b79b;   /* Koennen: Rauch, Wallbang, Blind, Utility */

  --pad:      clamp(1rem, 4vw, 3rem);
  --maxw:     1680px;
  --radius:   3px;
  --kurve:    cubic-bezier(.16, 1, .3, 1);

  --hand:  "Permanent Marker", "Segoe Print", cursive;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:  "Archivo Schmal", "Archivo", "Segoe UI", sans-serif;

  caret-color: transparent;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--ebene-3) var(--schwarz);
  background: var(--schwarz);
}

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

::selection { background: var(--marker); color: var(--schwarz); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--schwarz); }
::-webkit-scrollbar-thumb { background: var(--ebene-3); border: 3px solid var(--schwarz); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4048; }

h1, h2, h3 { margin: 0; line-height: 1.05; font-weight: 400; }

a { color: var(--marker); }

button, select, input, textarea { font: inherit; color: inherit; }

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

[hidden] { display: none !important; }

input, textarea, select, [contenteditable] { caret-color: var(--marker); }
button, .btn, .knopf, .tabs__tab, summary, .kopf__weg { user-select: none; -webkit-user-select: none; }

.tabular { font-variant-numeric: tabular-nums; }

.unsichtbar {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Rueckmeldung auf jeden Klick (Vault: webseiten.md). Marker-Weiss statt Amber:
   Amber ist in dieser Welt fuer Multikills vergeben. */
@keyframes aufleuchten {
  0%   { box-shadow: 0 0 0 0 rgb(246 243 234 / .8); }
  100% { box-shadow: 0 0 0 8px rgb(246 243 234 / 0); }
}
.geklickt { animation: aufleuchten .45s ease-out !important; }


/* ==========================================================================
   Marker -- Grundbausteine (marker.js zeichnet, hier steht die Kurve)
   ========================================================================== */

.marker { display: block; overflow: visible; pointer-events: none; }

.marker__strich {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--dicke, 3.2);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marker__flaeche { fill: currentColor; opacity: .5; }

/* Ein Marker-Zug: schneller Anfang, auslaufendes Ende -- wie eine Hand. */
.marker.zeichnet .marker__strich {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: zeichnen var(--dauer, 300ms) cubic-bezier(.35, .7, .2, 1) var(--verz, 0ms) both;
}
/* Unsichtbar bis zum Einsatz: Ein runder Linienanfang zeigt sonst schon als Punkt. */
@keyframes zeichnen {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  2%   { opacity: 1; }
  100% { stroke-dashoffset: 0; }
}

/* Gezeichnete Masken fuer Elemente, die hundertfach vorkommen. */
/* .tm = Textmarker. Nicht .band: so heissen die Highlight-Baender der Zeitleiste. */
.tm {
  -webkit-mask: url("striche/band-0.svg") center / 100% 100% no-repeat;
          mask: url("striche/band-0.svg") center / 100% 100% no-repeat;
  background: currentColor;
}
.tm--1 { -webkit-mask-image: url("striche/band-1.svg"); mask-image: url("striche/band-1.svg"); }
.tm--2 { -webkit-mask-image: url("striche/band-2.svg"); mask-image: url("striche/band-2.svg"); }

/* Kuerzel: Initialen in einer festen Form, je Spieler. */
.kuerzel { width: 2.2em; height: 2.2em; flex: none; color: var(--marker); }
.kuerzel .marker__strich { --dicke: 3.6; }
.kuerzel__text { font-family: var(--hand); font-size: 23px; fill: currentColor; }
.kuerzel--klein { width: 1.7em; height: 1.7em; }
.kuerzel--board { width: 2.5rem; height: 2.5rem; }
.kuerzel--kopf  { width: .95em; height: .95em; margin-right: .12em; }
.kuerzel--gross { width: clamp(3rem, 6vw, 5.4rem); height: clamp(3rem, 6vw, 5.4rem); }


/* ==========================================================================
   Kopf: Wege, Reiter, Zahlen
   ========================================================================== */

.kopf { position: relative; isolation: isolate; }

.kopf__leiste {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(1rem, 3vw, 2.5rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(.8rem, 2vw, 1.3rem) var(--pad);
}

/* Die Leiste steht auf eigenem Grund ueber dem Film: Oben im Bild sitzt die
   Teamleiste des Spiel-HUDs, Reiter darauf waeren unlesbar (gemessen 22.09.2026). */
.kopf--buehne .kopf__leiste { max-width: none; }

.kopf__wege { display: flex; gap: 1.1rem; }
.kopf__weg {
  color: var(--dim);
  font: 500 .95rem/1 var(--cond);
  letter-spacing: .02em;
  text-decoration: none;
}
.kopf__weg:hover { color: var(--marker); text-decoration: underline; }

.tabs { display: flex; flex-wrap: wrap; gap: .2rem clamp(.6rem, 2vw, 1.8rem); flex: 1 1 auto; }

.tabs__tab {
  position: relative;
  padding: .45rem .55rem;
  color: rgb(246 243 234 / .74);
  font: 400 clamp(1.15rem, 1.6vw, 1.45rem)/1 var(--hand);
  text-decoration: none;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--marker); }
.tabs__tab--rand { font-size: clamp(.95rem, 1.2vw, 1.1rem); opacity: .8; }

/* Aktiver Reiter: eingekreist -- Form, nicht Farbe. */
.tabs__tab[aria-current="page"] { color: var(--marker); }
.tabs__tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: -.35rem -.55rem -.4rem -.6rem;
  background: currentColor;
  -webkit-mask: url("striche/kreis-0.svg") center / 100% 100% no-repeat;
          mask: url("striche/kreis-0.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  animation: kreis-auf .5s var(--kurve) both;
}
@keyframes kreis-auf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.tabs__n {
  margin-left: .2rem;
  font: 600 .78rem/1 var(--cond);
  color: var(--dim);
  vertical-align: .35em;
}
.tabs__n.hat-neu { color: var(--marker); }
.tabs__n.hat-neu::after { content: " neu"; font-weight: 700; }

/* Frueher: Kennzahlen im Kopf. Entfernt 22.09.2026 (Richtungsvertrag). */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  margin: 0;
  font: 500 .92rem/1.2 var(--cond);
  color: var(--dim);
}
.tally > div { display: flex; gap: .3rem; align-items: baseline; }
.tally dd { margin: 0; color: var(--marker); font-weight: 700; font-variant-numeric: tabular-nums; }
.tally dt { order: 2; }


/* ---------- Kopf der uebrigen Reiter: Map-Foto, Name in Marker ------------- */

.kopf__titel {
  position: relative;
  height: clamp(210px, 34vh, 360px);
  margin-top: -.2rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad) clamp(1.2rem, 3vw, 2.4rem);
}
.kopf--buehne .kopf__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }

.kopf__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .42;
  filter: saturate(.8);
}
.kopf__foto:not([src]) { display: none; }
.kopf__titel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--schwarz) 2%, rgb(11 12 14 / .35) 60%, rgb(11 12 14 / .65));
}

.wordmark {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  font: 400 clamp(3rem, 9vw, 7.2rem)/.95 var(--hand);
  color: var(--marker);
  letter-spacing: -.01em;
}
.wordmark::after {
  content: "";
  display: block;
  width: min(9ch, 100%);
  height: .16em;
  margin-top: .08em;
  background: currentColor;
  -webkit-mask: url("striche/strich-0.svg") center / 100% 100% no-repeat;
          mask: url("striche/strich-0.svg") center / 100% 100% no-repeat;
}


/* ==========================================================================
   Buehne: die beste Szene der letzten Nacht
   ========================================================================== */

.buehne {
  position: relative;
  height: clamp(440px, calc(100svh - 6.9rem), 60vw);
  min-height: 440px;
  overflow: hidden;
  background: #000;
  color: var(--marker);
}

.buehne__bild { position: absolute; inset: 0; }

.buehne__foto, .buehne__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;          /* oben nie beschneiden: dort sitzen Teamleiste und Killfeed */
}
.buehne__foto { filter: saturate(.85) brightness(.8); }
.buehne__foto:not([src]) { display: none; }

/* Der Film blendet erst ein, wenn er laeuft -- bis dahin steht das Map-Foto. */
.buehne__film { opacity: 0; transition: opacity .6s var(--kurve); }
.buehne.film-laeuft .buehne__film { opacity: 1; }

.buehne__zeichnung { position: absolute; inset: 0; pointer-events: none; }
.buehne__zeichnung > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne__kreis { --dicke: 4.2; }          /* am SVG, damit buehne.js es fuers Handy duenner setzen kann */
/* Der alte Kreis geht ganz: Die Killfeed-Zeilen ruecken nach oben, er stuende sonst auf leerer Wand. */
.buehne__kreis.verblasst { opacity: 0; transition: opacity .4s ease; }
.buehne__pfeil .marker__strich { --dicke: 4; }
.buehne__schrift-svg {
  font-family: var(--hand);
  font-size: clamp(26px, 3.3vw, 52px);
  fill: var(--marker);
  paint-order: stroke;
  stroke: rgb(0 0 0 / .55);
  stroke-width: 6px;
  stroke-linejoin: round;
}

/* Lesehilfe unten links fuer den Namen -- hart ueber hellen Maps wie Mirage. */
.buehne::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 64%;
  background: linear-gradient(to top, rgb(11 12 14 / .97), rgb(11 12 14 / .8) 22%, rgb(11 12 14 / .45) 55%, transparent);
  pointer-events: none;
}

.buehne__schrift {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(1.6rem, 5vh, 3rem);
  max-width: min(62rem, 62%);
}

.buehne__wer { display: flex; align-items: center; gap: .1em .3em; flex-wrap: wrap; margin: 0; }

.buehne__name {
  position: relative;
  font: 400 clamp(3.2rem, 9.4vw, 8.6rem)/.92 var(--hand);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  z-index: 0;
}
/* Textmarker in der Farbe der Clipart, schraeg hinter dem Namen. */
.buehne__name::before {
  content: "";
  position: absolute;
  inset: .44em -.18em .02em -.12em;
  z-index: -1;
  background: var(--ton, var(--t));
  opacity: .62;
  -webkit-mask: url("striche/band-1.svg") center / 100% 100% no-repeat;
          mask: url("striche/band-1.svg") center / 100% 100% no-repeat;
  transform: rotate(-1.4deg);
  animation: band-auf .7s var(--kurve) .15s both;
}
@keyframes band-auf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.buehne__striche { width: auto; height: clamp(2.4rem, 5vw, 3.8rem); margin-left: .5em; transform: skewX(-14deg); }
.buehne__striche .marker__strich { --dicke: 6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.buehne__striche .marker__strich--jetzt { opacity: 1; animation: zeichnen .26s cubic-bezier(.35, .7, .2, 1) both; }

.buehne__szene {
  margin: .6rem 0 0;
  font: 500 clamp(1.05rem, 1.7vw, 1.45rem)/1.3 var(--cond);
  letter-spacing: .01em;
  color: rgb(246 243 234 / .88);
}
.buehne__notiz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.buehne__knoepfe {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem;
}

.knopf {
  padding: .7rem 1.25rem;
  border: 1.5px solid rgb(246 243 234 / .55);
  border-radius: var(--radius);
  background: rgb(11 12 14 / .86);
  color: var(--marker);
  font: 600 1rem/1 var(--cond);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.knopf:hover { border-color: var(--marker); background: rgb(11 12 14 / .8); }
.knopf--voll { background: var(--marker); border-color: var(--marker); color: var(--schwarz); }
.knopf--voll:hover { background: #fff; color: var(--schwarz); }
/* Leise heisst: ohne Rahmen -- aber mit eigenem Grund, sonst laeuft die Waffenschrift des
   HUDs durch die Zeile (Finish-Review 22.09.2026). */
.knopf--leise { border-color: transparent; background: rgb(11 12 14 / .86); color: rgb(246 243 234 / .85); text-decoration: underline; text-underline-offset: 5px; }
.knopf--leise:hover { background: rgb(11 12 14 / .95); color: var(--marker); }


/* ---------- Linie der Nacht ---------------------------------------------- */

.nacht {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1rem, 2vw, 1.6rem);
}

.nacht__titel {
  text-wrap: balance;
  padding: 0 var(--pad);
  margin-bottom: 1rem;
  font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--hand);
  color: var(--marker);
}

.nacht__spur {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding: .9rem var(--pad) 1.2rem;
}
.nacht__linie {
  position: absolute; top: 0; left: 0;
  color: rgb(246 243 234 / .55);
}
.nacht__linie .marker__strich { --dicke: 2.4; }

.nacht__liste {
  position: relative;
  display: flex;
  gap: clamp(1rem, 2.2vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
}

.nacht__punkt { position: relative; width: clamp(170px, 15vw, 230px); scroll-snap-align: start; }

.nacht__knopf {
  position: relative;
  display: grid;
  gap: .15rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.nacht__bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ebene-1);
  margin-bottom: 1.9rem;           /* Platz fuer die Linie darunter */
}
.nacht__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--kurve), filter .35s ease; filter: brightness(.82); }
.nacht__knopf:hover .nacht__bild img, .nacht__knopf[aria-current="true"] .nacht__bild img { filter: none; }
.nacht__knopf:hover .nacht__bild img { transform: scale(1.04); }

.nacht__kreis { position: absolute; inset: -4px; width: calc(100% + 8px); height: auto; aspect-ratio: 16 / 9; color: currentColor; }
.nacht__kreis .marker__strich { --dicke: 3.4; }

.nacht__runde {
  position: absolute;
  top: .35rem; left: .5rem;
  font: 400 1.25rem/1 var(--hand);
  color: var(--marker);
  paint-order: stroke;
  text-shadow: 0 1px 2px rgb(0 0 0 / .9);
}

.nacht__wer { display: flex; align-items: center; gap: .35rem; font: 400 1.05rem/1.1 var(--hand); color: var(--marker); }
.nacht__was { font: 500 .88rem/1.3 var(--cond); color: var(--dim); }
.nacht__knopf[aria-current="true"] .nacht__was { color: currentColor; }


/* ==========================================================================
   Die Truppe (Scoreboard)
   ========================================================================== */

.roster {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3.2rem) var(--pad) clamp(1.4rem, 3vw, 2.4rem);
}

.roster__titel {
  margin-bottom: 1.1rem;
  font: 400 clamp(1.8rem, 3.2vw, 2.7rem)/1 var(--hand);
  color: var(--marker);
}

.roster__scroll { overflow-x: auto; }

.board { width: 100%; border-collapse: collapse; }

.board th {
  padding: 0 .9rem .55rem;
  font: 600 .82rem/1 var(--cond);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dimmer);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--haar);
  cursor: pointer;
}
.board th:hover { color: var(--marker); }
.board th.board__name { text-align: left; cursor: default; }
.board th[aria-sort] { color: var(--marker); }
.board th[aria-sort]::after {
  content: "";
  display: inline-block;
  width: .95em; height: .95em;
  margin-left: .2em;
  vertical-align: -.15em;
  background: currentColor;
  -webkit-mask: url("striche/pfeil-u.svg") center / contain no-repeat;
          mask: url("striche/pfeil-u.svg") center / contain no-repeat;
}
.board th[aria-sort="ascending"]::after { -webkit-mask-image: url("striche/pfeil-o.svg"); mask-image: url("striche/pfeil-o.svg"); }

/* Bestwert jeder Spalte: mit Marker eingekreist (app.js, renderBoard). */
.board td.ist-spitze { position: relative; color: var(--marker); }
.board td.ist-spitze::after {
  content: "";
  position: absolute;
  top: .05rem; bottom: .05rem;
  right: .2rem;
  width: 3.6em;
  background: currentColor;
  -webkit-mask: url("striche/kreis-0.svg") center / 100% 100% no-repeat;
          mask: url("striche/kreis-0.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.board td {
  padding: .3rem .9rem;
  text-align: right;
  font: 600 1.12rem/1 var(--cond);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--text);
}
.board td.is-zero { color: var(--dimmer); font-weight: 400; }
.board td:first-child { padding-left: 0; text-align: left; width: 44%; }

.board__player {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .35rem .5rem .35rem 0;
  border: 0;
  background: none;
  color: var(--marker);
  text-align: left;
  cursor: pointer;
}
.board__name-text { position: relative; z-index: 1; font: 400 1.5rem/1.1 var(--hand); }

/* Anteil an allen Clips als Textmarker-Strich unter dem Namen. */
.board__bar {
  position: absolute;
  left: 3.1rem;
  bottom: .15rem;
  height: .7rem;
  max-width: calc(100% - 3.4rem);
  color: rgb(246 243 234 / .16);
  transition: color .15s ease;
}
.board tr:hover .board__bar { color: rgb(246 243 234 / .28); }

.board tr.is-on .board__bar { color: rgb(246 243 234 / .5); }
.board tr.is-on .board__name-text::after {
  content: "";
  display: inline-block;
  width: .8em; height: .8em;
  margin-left: .3em;
  background: currentColor;
  -webkit-mask: url("striche/haken.svg") center / contain no-repeat;
          mask: url("striche/haken.svg") center / contain no-repeat;
}
.board tr:hover td { background: rgb(246 243 234 / .025); }


/* ==========================================================================
   Filterleiste
   ========================================================================== */

.controls {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(11 12 14 / .96);
  border-block: 1px solid var(--haar);
}

.controls__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .75rem var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .65rem 1rem;
}

.controls__count {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) .6rem;
  font: 500 .88rem/1.2 var(--cond);
  color: var(--dimmer);
  font-variant-numeric: tabular-nums;
}

/* Segmente: auf der Seite als Woerter mit Marker-Unterstrich. Im Abspieler
   (weiter unten) als dichte Knopfreihe -- dort zaehlt jeder Millimeter. */
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--haar); border-radius: var(--radius); overflow: hidden; }

.seg__btn {
  position: relative;
  padding: .45rem .85rem;
  background: none;
  border: 0;
  border-right: 1px solid var(--haar);
  color: var(--dim);
  font: 600 .98rem/1.1 var(--cond);
  letter-spacing: .01em;
  cursor: pointer;
}
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover { color: var(--marker); background: var(--ebene-1); }
.seg__btn.is-on, .seg__btn[aria-pressed="true"] { color: var(--schwarz); background: var(--marker); }

.controls .seg { border: 0; gap: .15rem .4rem; overflow: visible; }
.controls .seg__btn {
  padding: .45rem .5rem .6rem;
  border: 0;
  font: 400 1.18rem/1 var(--hand);
  color: rgb(246 243 234 / .62);
}
.controls .seg__btn:hover { background: none; color: var(--marker); }
.controls .seg__btn.is-on { background: none; color: var(--marker); }
.controls .seg__btn.is-on::after {
  content: "";
  position: absolute;
  left: .2rem; right: .1rem; bottom: .05rem;
  height: .5rem;
  background: currentColor;
  -webkit-mask: url("striche/strich-0.svg") center / 100% 100% no-repeat;
          mask: url("striche/strich-0.svg") center / 100% 100% no-repeat;
  animation: kreis-auf .35s var(--kurve) both;
}

.field { display: flex; flex-direction: column; gap: .25rem; }
.field--grow { flex: 1 1 13rem; min-width: 10rem; }
.field > span { font: 600 .74rem/1 var(--cond); color: var(--dimmer); letter-spacing: .07em; text-transform: uppercase; }

.field select, .field input {
  padding: .45rem .6rem;
  background: var(--ebene-1);
  border: 1px solid var(--haar);
  border-radius: var(--radius);
  color: var(--text);
  min-width: 8.5rem;
  font: 500 .98rem/1.2 var(--sans);
}
.field input { width: 100%; min-width: 0; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background: var(--ebene-1) url("striche/pfeil-u.svg") right .55rem center / 1.1rem no-repeat;
  cursor: pointer;
}
.field select option { background: var(--ebene-1); color: var(--text); }
.field input::placeholder { color: var(--dimmer); }
.field select:hover, .field input:hover { border-color: #444b55; }
.field select:focus-visible, .field input:focus-visible { border-color: var(--marker); outline-offset: 1px; }

.reset {
  padding: .5rem .8rem;
  background: none;
  border: 1px solid var(--haar);
  border-radius: var(--radius);
  color: var(--dim);
  font: 600 .95rem/1 var(--cond);
  letter-spacing: .02em;
  cursor: pointer;
}
.reset:hover { color: var(--marker); border-color: var(--marker); }
.reset--fest { align-self: flex-end; }
.reset[aria-pressed="true"] { color: var(--schwarz); background: var(--marker); border-color: var(--marker); }
.reset:disabled { opacity: .4; cursor: default; }
.reset:disabled:hover { color: var(--dim); border-color: var(--haar); }


/* ==========================================================================
   Katalog
   ========================================================================== */

.catalog {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--pad) 4rem;
}

.group + .group { margin-top: clamp(3rem, 6vw, 5rem); }

.group__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  margin-bottom: 1.2rem;
}

.group__name {
  display: flex;
  align-items: center;
  gap: .3rem;
  font: 400 clamp(2.1rem, 4.4vw, 3.6rem)/1 var(--hand);
  color: var(--marker);
  overflow-wrap: anywhere;
}
.group__stat { margin: 0; font: 500 .95rem/1.2 var(--cond); color: var(--dim); }

/* Nach Map: der Kopf ist ein Map-Foto aus CS2, der Name steht darauf. */
.group__head--foto {
  align-items: flex-end;
  min-height: clamp(150px, 20vw, 260px);
  padding: 1rem clamp(1rem, 2.5vw, 1.8rem);
  border-radius: var(--radius);
  overflow: hidden;
}
.group__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(.62) saturate(.9);
  transition: filter .5s ease, transform 1.2s var(--kurve);
}
.group__head--foto:hover .group__foto { filter: brightness(.75) saturate(1); transform: scale(1.02); }
.group__head--foto .group__name { font-size: clamp(2.6rem, 6vw, 5rem); text-shadow: 0 2px 10px rgb(0 0 0 / .5); }
.group__head--foto .group__stat { color: var(--marker); }
.group__head--foto { isolation: isolate; }

.sub + .sub { margin-top: 2rem; }

.sub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1rem;
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.sub__title { display: flex; align-items: center; gap: .55rem; font: 400 1.35rem/1.1 var(--hand); color: var(--marker); }
.sub__date { font: 500 .95rem/1 var(--cond); color: var(--dim); }
.sub__count { margin-left: auto; font: 500 .9rem/1 var(--cond); color: var(--dimmer); }

.mapchip { width: 48px; height: 27px; object-fit: cover; border-radius: 2px; flex: none; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: clamp(1.2rem, 2vw, 1.8rem) clamp(.9rem, 1.6vw, 1.4rem);
}
.grid--breit { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }


/* ---------- Kachel: Vorschaubild, Striche, Textmarker ----------------------
   Kein Kasten um die Kachel: Das Bild ist der Inhalt, darunter steht die
   Beschriftung. Farbe der Clipart = Textmarker unter dem Titel (currentColor). */

.card {
  position: relative;
  display: grid;
  gap: .55rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t);
  text-align: left;
  cursor: pointer;
}

.card__shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ebene-1);
}
.card__shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--kurve), filter .3s ease; }

/* Gezeichneter Rahmen beim Zeigen -- in der Farbe der Clipart. */
.card__shot::after {
  content: "";
  position: absolute; inset: 3px;
  z-index: 3;
  background: currentColor;
  -webkit-mask: url("striche/rahmen-0.svg") center / 100% 100% no-repeat;
          mask: url("striche/rahmen-0.svg") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path .38s var(--kurve);
  pointer-events: none;
}
.card:hover .card__shot::after,
.card:focus-visible .card__shot::after { clip-path: inset(0 0 0 0); }
.card:hover .card__shot img,
.card:focus-visible .card__shot img { transform: scale(1.035); }
.card:focus-visible { outline: none; }
.card:focus-visible .card__shot { outline: 2px solid var(--marker); outline-offset: 3px; }

.card__round {
  position: absolute;
  z-index: 2;
  top: .3rem; left: .5rem;
  font: 400 1.3rem/1 var(--hand);
  color: var(--marker);
  text-shadow: 0 1px 3px rgb(0 0 0 / .95), 0 0 8px rgb(0 0 0 / .6);
}
.card__rang { font-size: 1.6rem; }

.card__kills {
  position: absolute;
  z-index: 2;
  left: .35rem; bottom: .2rem;
  color: var(--marker);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .9)) drop-shadow(0 0 3px rgb(0 0 0 / .6));
}
.card__striche { height: 1.9rem; width: auto; }
.card__striche .marker__strich { --dicke: 3.6; }

.card__time {
  position: absolute;
  z-index: 2;
  right: .45rem; bottom: .4rem;
  padding: .12rem .35rem;
  border-radius: 2px;
  background: rgb(0 0 0 / .72);
  font: 600 .8rem/1 var(--cond);
  color: var(--marker);
}

.card__marken { position: absolute; z-index: 2; top: .4rem; right: .4rem; display: flex; gap: .25rem; }
.marke {
  padding: .1rem .4rem;
  border-radius: 2px;
  background: rgb(0 0 0 / .72);
  font: 700 .8rem/1.3 var(--cond);
  color: var(--marker);
}
.marke--neu { background: var(--marker); color: var(--schwarz); letter-spacing: .04em; text-transform: uppercase; }

.card__body { display: grid; gap: .15rem; min-width: 0; }

.card__label { position: relative; justify-self: start; max-width: 100%; }
.card__label-text {
  position: relative;
  z-index: 1;
  font: 650 1.08rem/1.25 var(--sans);
  color: var(--marker);
}
.card__band {
  position: absolute;
  z-index: 0;
  left: -.25rem; right: -.35rem;
  top: .5em; bottom: -.08em;
  opacity: .62;
  transition: opacity .2s ease, top .25s var(--kurve);
}
.card:hover .card__band, .card:focus-visible .card__band { opacity: .75; top: .15em; }

.card__who { font: 400 1.05rem/1.2 var(--hand); color: var(--dim); }
.card__meta { font: 500 .88rem/1.35 var(--cond); color: var(--dimmer); letter-spacing: .01em; }

.card--reel .card__band { color: var(--dim); }
.card--fertig .card__shot img { filter: saturate(.4) brightness(.6); }
.card--fertig:hover .card__shot img, .card--fertig:focus-visible .card__shot img { filter: none; }

/* Hover-Vorschau (app.js): liegt ueber dem Standbild, blendet ein, wenn das erste Bild da ist. */
.card__vorschau {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.card__vorschau.sichtbar { opacity: 1; }


/* ---------- Leer, Fuss, Legende --------------------------------------------- */

.empty {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem var(--pad);
  font: 400 1.5rem/1.3 var(--hand);
  color: var(--dim);
}

.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem var(--pad) 3.5rem;
  border-top: 1px solid var(--haar);
  display: grid;
  gap: 1.2rem;
  color: var(--dimmer);
  font: 500 .9rem/1.45 var(--cond);
}
.foot p { margin: 0; max-width: 80ch; }

.legende { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; }
.legende__titel { margin: 0; font: 400 1.2rem/1 var(--hand); color: var(--marker); }
.legende__liste { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.legende__liste li { position: relative; display: flex; align-items: center; gap: .5rem; }
.legende__strich {
  width: 2.6rem; height: .9rem;
  background: currentColor;
  opacity: .7;
  -webkit-mask: url("striche/band-2.svg") center / 100% 100% no-repeat;
          mask: url("striche/band-2.svg") center / 100% 100% no-repeat;
}
.legende__wofuer { color: var(--text); font-weight: 600; }


/* ==========================================================================
   Filmischer Wisch beim Reiterwechsel (View Transitions)
   ========================================================================== */

::view-transition-old(root) { animation: .28s cubic-bezier(.4, 0, .6, 1) both wisch-raus; }
::view-transition-new(root) { animation: .56s var(--kurve) both wisch-rein; }
@keyframes wisch-rein { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes wisch-raus { to { opacity: .35; transform: translateX(-2.5%); } }


/* ==========================================================================
   Klein
   ========================================================================== */

@media (max-width: 760px) {
  .tabs { order: 3; width: 100%; }
  .tally { display: none; }
  .buehne { height: auto; min-height: 0; display: flex; flex-direction: column; background: var(--schwarz); }
  .buehne__bild { position: relative; aspect-ratio: 16 / 10; }
  .buehne::after { display: none; }
  .buehne__schrift { position: relative; left: auto; right: auto; bottom: auto; max-width: none; padding: 1rem var(--pad) 0; }
  .buehne__knoepfe { position: relative; left: auto; bottom: auto; padding: 1rem var(--pad) .5rem; }
  .buehne__name { font-size: clamp(2.8rem, 13vw, 4.4rem); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 1rem .7rem; }
  .card__label-text { font-size: .95rem; }
  .card__round { font-size: 1.05rem; }
  .board td:first-child { width: auto; }
  .board__name-text { font-size: 1.2rem; }
  .controls__inner { gap: .5rem .6rem; }
  .controls .seg__btn { font-size: 1.02rem; }
}


/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; }
  .marker.zeichnet .marker__strich, .buehne__striche .marker__strich--jetzt { stroke-dashoffset: 0; opacity: 1; animation: none !important; }
  .card:hover .card__shot img, .card:focus-visible .card__shot img, .nacht__knopf:hover .nacht__bild img { transform: none; }
  .card__vorschau { display: none; }
  /* Das Aufleuchten ist kein Bewegungsreiz und bleibt (Vault: webseiten.md). */
  .geklickt { animation-duration: .45s !important; }
}


/* ==========================================================================
   Abspieler, Lernumgebung, Taktikkarte, Zeitleiste -- Mechanik aus dem Stand
   vor dem Umbau (bis 22.09.2026), Farben und Schriften kommen aus :root oben.
   ========================================================================== */

/* ---------- Abspieler ----------------------------------------------------- */

.viewer {
  width: min(1180px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--text);
  overflow: hidden;
}

.viewer::backdrop { background: rgba(6, 10, 14, .88); }

/* Der Abspieler ist der Moment, auf den die ganze Seite zulaeuft - er soll
   ankommen, nicht erscheinen. Ein Zug von unten, weich auslaufend; der Grund
   dahinter blendet mit. Genau ein Auftritt, sonst nirgends auf der Seite. */
.viewer[open] { animation: viewer-auf .34s cubic-bezier(.16, 1, .3, 1); }
.viewer[open]::backdrop { animation: viewer-grund .34s ease-out; }

@keyframes viewer-auf {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes viewer-grund { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .viewer[open], .viewer[open]::backdrop { animation: none; }
}

.viewer__stage { position: relative; background: var(--ink-2); }

/* Das Video bestimmt seine Form selbst. Bis 21.09.2026 stand hier width:100%
   mit einer festen max-height: auf breiten Schirmen war die Schachtel breiter
   als 16:9, und der Browser legte links und rechts schwarze Balken hinein
   (object-fit von <video> ist contain). Jetzt richtet sich die Schachtel nach
   dem Bild - kein Balken, egal wie das Fenster steht. */
.viewer__stage video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--videohoehe, 64vh);
  margin-inline: auto;
  background: var(--ink-2);
}

/* "Fuellen": das Bild deckt die ganze Flaeche, oben und unten wird beschnitten.
   Auch hier bleibt kein Balken uebrig - nur eben durch Zuschneiden statt durch
   Anpassen der Schachtel. */
.viewer--bild-fuellen .viewer__stage video {
  width: 100%;
  height: var(--videohoehe, 64vh);
  max-height: none;
  object-fit: cover;
}

.viewer__nav,
.viewer__close {
  position: absolute;
  background: rgba(10, 16, 22, .6);
  border: 1px solid rgba(160, 185, 205, .22);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}

.viewer__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 3.4rem;
  font-size: 2rem;
}

.viewer__nav--prev { left: .5rem; }
.viewer__nav--next { right: .5rem; }
.viewer__close { top: .5rem; right: .5rem; width: 2.1rem; height: 2.1rem; font-size: 1.35rem; }

.viewer__nav:hover, .viewer__close:hover { background: var(--t); color: var(--ink); border-color: var(--t); }
.viewer__nav[disabled] { opacity: .25; cursor: default; }
.viewer__nav[disabled]:hover { background: rgba(10, 16, 22, .6); color: var(--text); }

/* Liegt ueber dem Video, wenn es nicht laedt. Die Meldung des Browsers
   ("Kein Video mit unterstuetztem Format und MIME-Typ gefunden") nennt weder
   den Grund noch den naechsten Schritt. */
.viewer__error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .45rem;
  margin: 0;
  padding: 2rem;
  text-align: center;
  background: rgba(8, 13, 18, .93);
}

.viewer__error[hidden] { display: none; }

.viewer__error b {
  display: block;
  font-family: var(--cond);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--t);
}

.viewer__error span { color: var(--dim); font-size: .92rem; max-width: 42ch; }

.viewer__panel { padding: 1rem clamp(1rem, 3vw, 1.6rem) 1.2rem; }

.viewer__crumb {
  margin: 0;
  font-family: var(--cond);
  font-size: 1rem;
  color: var(--dim);
}

.viewer__crumb b { color: currentColor; font-weight: 600; }

.viewer__title { margin: .1rem 0 .8rem; font-size: 1.75rem; font-weight: 700; }

.viewer__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: .7rem 1.1rem;
  margin: 0 0 1rem;
  padding: .8rem 0 0;
  border-top: 1px solid var(--rule);
}

.viewer__meta div { display: flex; flex-direction: column-reverse; gap: .1rem; }
.viewer__meta dt { font-size: .74rem; color: var(--dimmer); letter-spacing: .03em; }
.viewer__meta dd {
  margin: 0;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.viewer__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }

.btn {
  padding: .4rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
}

.btn:hover { border-color: var(--t); color: var(--t); }

.viewer__keys { font-size: .8rem; color: var(--dimmer); }


/* ---------- Lernumgebung -------------------------------------------------- */

.lern {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--pad) .5rem;
}

.lern__fortschritt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .4rem 1.25rem;
  margin-bottom: 1.75rem;
}

.lern__zahl { font-family: var(--cond); font-size: 1.15rem; color: var(--dim); }
.lern__zahl b { font-size: 1.9rem; font-weight: 700; color: var(--text); }

.lern__leiste {
  height: .6rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Ueber transform statt width: Eine animierte Breite laesst den Browser in
   jedem Bild neu rechnen, scaleX laeuft auf dem Compositor. */
.lern__leiste span {
  display: block; height: 100%; width: 100%;
  background: var(--cool);
  transform-origin: 0 50%;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.lern__fakten { grid-column: 1 / -1; margin: 0; color: var(--dim); font-size: .92rem; }

.lern__auswertung h2 { font-size: 1.5rem; margin-bottom: .9rem; }

.lern__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem 2.5rem;
}

.lern__liste h3 {
  margin-bottom: .45rem;
  font-size: .78rem;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--dimmer);
}
.lern__liste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.lern__eintrag {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .32rem .55rem;
  background: none;
  border: 0;
  border-radius: 2px;
  color: var(--text);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.lern__eintrag:hover { color: #fff; }
.lern__bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--hot);
  opacity: .2;
}
.lern__eintrag:hover .lern__bar { opacity: .34; }
.lern__name, .lern__n { position: relative; }
.lern__name { overflow-wrap: anywhere; }
.lern__n { color: var(--dim); }

.lern__sicherung { margin-top: 1.5rem; color: var(--dim); font-size: .9rem; }
.lern__sicherung summary { cursor: pointer; color: var(--dimmer); width: fit-content; }
.lern__sicherung summary:hover { color: var(--text); }
.lern__sicherung p { max-width: 62ch; margin: .5rem 0 .7rem; }
.lern__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }

button.btn { background: none; cursor: pointer; font: inherit; font-size: .9rem; }
.btn[aria-pressed="true"] { border-color: var(--t); color: var(--t); }
.btn:disabled { opacity: .5; cursor: default; }



/* ---------- Abspieler: Werkzeugleiste, Notiz ------------------------------ */

/* Der Dialog ist mit Werkzeugleiste und Notiz hoeher geworden als 92vh auf
   kleinen Schirmen -- er rollt jetzt selbst, statt unten abzuschneiden. */
.viewer { overflow-y: auto; --videohoehe: 58vh; }

.werkzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .55rem clamp(1rem, 3vw, 1.6rem);
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.werkzeug .seg__btn { padding: .28rem .7rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.werkzeug__status { color: var(--t); font-size: .88rem; }
.werkzeug__pos { margin-left: auto; color: var(--dimmer); font-size: .88rem; }

.notiz { display: block; margin: 0 0 1rem; }
.notiz > span { display: block; margin-bottom: .25rem; font-size: .75rem; color: var(--dimmer); letter-spacing: .03em; }
.notiz small { margin-left: .5rem; color: var(--cool); font-size: inherit; }
.notiz textarea {
  width: 100%;
  padding: .5rem .6rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}
.notiz textarea:hover { border-color: #3a5063; }

.viewer__status { color: var(--cool); font-size: .88rem; }
.viewer__linkfeld {
  flex: 1 1 18rem;
  padding: .38rem .55rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .85rem;
}

.viewer__tasten { margin-top: .9rem; font-size: .82rem; color: var(--dimmer); }
.viewer__tasten summary { cursor: pointer; width: fit-content; }
.viewer__tasten summary:hover { color: var(--text); }
.viewer__tasten p { margin: .5rem 0 0; line-height: 2; }
kbd {
  padding: .08rem .38rem;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--panel);
  color: var(--text);
  font: 600 .8rem var(--sans);
}


/* ---------- Qualitaetstest ------------------------------------------------ */

.test {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad) 3rem;
}
.test h2 { font-size: 1.9rem; margin-bottom: 1rem; }

.test__messung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-bottom: 1.5rem;
  min-height: 2.2rem;
  color: var(--dim);
}

/* Vier Fassungen: zwei mal zwei, auf sehr breiten Schirmen in einer Reihe.
   auto-fit wuerde bei 1440 px drei plus eine ergeben. */
.test__reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.test__figur {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.test__figur.ist-gewaehlt { border-color: var(--t); }
.test__figur video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.test__figur figcaption { display: grid; gap: .15rem; padding: .7rem .9rem .8rem; }
.test__figur b { font-family: var(--cond); font-size: 1.25rem; }
.test__figur.ist-gewaehlt b::after { content: "  \25C2  aktuell"; color: var(--t); font-size: .85rem; font-weight: 600; }
.test__zahl { color: var(--t); font-size: .92rem; }
.test__hinweis { color: var(--dim); font-size: .88rem; }
.test__verworfen { min-height: 1.3em; color: var(--cool); font-size: .85rem; }
.test__verworfen.ist-schlecht { color: var(--hot); }
.test__verworfen.ist-schlecht::before { content: "\26A0  "; }

.test__erklaerung { margin-top: 2rem; max-width: 72ch; color: var(--dim); }
.test__erklaerung summary { cursor: pointer; color: var(--dimmer); width: fit-content; }
.test__erklaerung summary:hover { color: var(--text); }


@media (max-width: 640px) {
  .tabs { gap: 0; }
  .tabs__tab { padding: .5rem .65rem .55rem; font-size: 1rem; }
  .tabs__tab--rand { margin-left: 0; }
  .viewer { --videohoehe: 42vh; }
  .werkzeug__pos { margin-left: 0; }
  .test__reihe { grid-template-columns: 1fr; }
  .lern__fortschritt { grid-template-columns: 1fr; }
}

@media (min-width: 1800px) { .test__reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* ==========================================================================
   Taktikkarte im Abspieler (20.09.2026) -- minimap.js, zeichnen.js
   ========================================================================== */

/* Video samt Blaetterknoepfen in einer eigenen Schachtel: neben ihr steht die
   Karte, und "naechster Clip" soll am Video kleben, nicht an der Karte. */
/* Der Grund war bis 21.09.2026 #000. Seit das Video seine Schachtel nicht mehr
   ausfuellt, waere genau das wieder ein schwarzer Balken - er kaeme nur vom
   Elternelement statt vom Browser. Der Rest bleibt deshalb der Flaechenton des
   Dialogs, und das Bild steht mittig darin. */
.viewer__bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: var(--ink-2);
}

.viewer--karte-neben { width: min(1760px, 97vw); }

.viewer--karte-neben .viewer__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 33%);
  align-items: stretch;
}

.karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ink);
  border-left: 1px solid var(--rule);
}
.karte[hidden] { display: none; }

/* Runde, Stand, Ueberlebende. Rechts Platz fuer den Schliessen-Knopf. */
.karte__stand {
  min-height: 2.1rem;
  margin: 0;
  padding: .5rem 3.2rem .45rem .85rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--text);
  font-family: var(--cond);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.karte__flaeche {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
}

.karte canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.karte canvas.zieht { cursor: grabbing; }
.karte canvas.zeichnet { cursor: crosshair; }
.karte canvas:focus-visible { outline-offset: -3px; }

.karte__hinweis {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1rem;
  color: var(--dim);
  font-size: .92rem;
  text-align: center;
  pointer-events: none;
}
.karte__hinweis[hidden] { display: none; }

/* "im Video": wie das Radar einer Uebertragung oben links -- dort liegt im
   Clip ohnehin das Radar des Spiels, das hier mehr zeigt. */
/* Seit 22.09.2026 liegen Video und Karte in derselben Rasterzelle, die so breit ist
   wie das Video: Die Karte klebt an der Bildkante statt am Dialogrand. Kein
   Schatten -- Tiefe nur durch Ueberlagerung (Richtungsvertrag). */
.viewer--karte-bild .viewer__stage { position: relative; display: grid; justify-content: center; }
.viewer--karte-bild .viewer__bild { grid-area: 1 / 1; }
.viewer--karte-bild .karte {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  margin: .6rem;
  position: relative;
  z-index: 2;
  width: clamp(200px, 26%, 340px);
  border: 1px solid var(--haar);
  border-radius: var(--radius);
  overflow: hidden;
}
.viewer--karte-bild .karte__flaeche { min-height: 0; aspect-ratio: 1; }
.viewer--karte-bild .karte__stand { padding-right: .85rem; font-size: .88rem; min-height: 0; }
/* Die Blaetterknoepfe weichen der Karte nach unten aus. */
.viewer--karte-bild .viewer__nav { top: auto; bottom: 4.2rem; transform: none; }

.werkzeug--karte { border-top: 1px solid var(--rule-soft); }
.werkzeug--karte[hidden] { display: none; }
.werkzeug--karte .seg__btn:disabled { opacity: .38; cursor: default; }
.werkzeug--karte .seg__btn:disabled:hover { color: var(--dim); background: none; }

.farben { display: flex; align-items: center; gap: .35rem; }
.farbe {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule);
  cursor: pointer;
}
/* Gewaehlt = heller Ring. Der Zustand haengt damit an der Form, nicht am Farbton. */
.farbe[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.farbe:hover { box-shadow: 0 0 0 2px var(--dim); }
.farbe--0 { background: #f2f5f8; }
.farbe--1 { background: #e5ac44; }
.farbe--2 { background: #7fb1de; }
.farbe--3 { background: #e35b40; }
.farbe--4 { background: #57b79b; }

@media (max-width: 980px) {
  .viewer--karte-neben .viewer__stage { grid-template-columns: minmax(0, 1fr); }
  .viewer--karte-neben .karte { border-left: 0; border-top: 1px solid var(--rule); }
  .viewer--karte-neben .karte__flaeche { min-height: 0; aspect-ratio: 1; max-height: 70vh; }
  .viewer--karte-neben .karte__stand { padding-right: .85rem; }
}

@media (max-width: 640px) {
  .viewer--karte-neben { width: 100vw; }
  /* Sechs Zeichenwerkzeuge passen nicht in eine Zeile -- die Gruppe bricht um,
     statt den Radierer abzuschneiden. */
  .werkzeug--karte .seg { flex-wrap: wrap; }
  /* Auf dem Handy waere die Karte im Video eine Briefmarke -- sie steht darunter. */
  .viewer--karte-bild .viewer__stage { display: block; }
  .viewer--karte-bild .karte { position: static; width: auto; margin: 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
  .viewer--karte-bild .karte__flaeche { max-height: 70vh; }
  .viewer--karte-bild .viewer__nav { top: 50%; bottom: auto; transform: translateY(-50%); }
}



/* ==========================================================================
   Auswertung im Abspieler (20.09.2026) -- auswertung.js
   Ereignisleiste unter dem Video, darunter vier Reiter. Gleiche Bausteine wie
   der Rest der Seite (.seg, .btn, --ink, --t, --ct); keine neue Optik.
   ========================================================================== */

/* Der Dialog rollt seit der Karte oefter -- der helle Standard-Rollbalken fiel
   aus dem Bild. Gilt auch fuer die Liste der Auswertung. */
.viewer, .auswertung__inhalt { scrollbar-width: thin; scrollbar-color: var(--rule) var(--ink-2); }

/* Schwarz statt Dialogton: die Leiste soll sichtbar zum Video gehoeren und nicht
   zur Werkzeugleiste darunter, die denselben Ton traegt wie der Dialog. */
.zeitleiste { padding: .7rem clamp(1rem, 3vw, 1.6rem); background: var(--video); }
.zeitleiste[hidden] { display: none; }

/* Die Spur ist ein Kasten, kein Unterstrich: So ist zu sehen, wie weit der Clip
   reicht, und der Strich laeuft sichtbar darin entlang. */
.zeitleiste__spur {
  position: relative;
  height: 2.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Der Strich zeigt die Stelle im Video. Er endet oben und unten genau auf den
   Kastenraendern -- daher -1px, die Breite des Rahmens. */
.zeitleiste__kopf {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--text);
  pointer-events: none;
}

/* Eine Marke traegt immer einen Buchstaben: K Kill, x Tod, F Flash, S Smoke,
   H HE, M Molotov, B/D/E Bombe, ! der Moment. Die Farbe sagt nur zusaetzlich,
   welches Team -- gefuellt heisst: betrifft den Fokus-Spieler. */
.marke {
  position: absolute;
  /* Mittig im Kasten: seit die Spur ein Kasten ist, klebten die Marken sonst
     unten und liessen darueber eine leere Flaeche. */
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .22rem;
  border: 1px solid var(--dimmer);
  border-radius: 2px;
  background: var(--panel);
  color: var(--text);
  font: 700 .74rem/1 var(--cond);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.marke:hover, .marke:focus-visible { z-index: 2; border-color: var(--text); }
.marke--ct { border-color: var(--ct); color: var(--ct); }
.marke--t { border-color: var(--t); color: var(--t); }
.marke--meins { height: 1.45rem; min-width: 1.45rem; color: var(--ink); background: var(--dim); border-color: var(--dim); }
.marke--meins.marke--ct { background: var(--ct); border-color: var(--ct); }
.marke--meins.marke--t { background: var(--t); border-color: var(--t); }
.marke--tod, .marke--tod.marke--meins { background: var(--hot); border-color: var(--hot); color: #fff; }
.marke--moment, .marke--moment.marke--meins { background: var(--text); border-color: var(--text); color: var(--ink); }
/* In der Liste steht dieselbe Marke still neben dem Text. */
.marke--fest { position: static; transform: none; display: inline-grid; place-items: center; flex: none; cursor: inherit; }

/* Icon-Marken: statt eines Buchstabens ein CS2-Original-SVG (Granaten, C4) bzw. ein
   gezeichnetes Zeichen (Kill = Fadenkreuz, Tod = Totenkopf). Das Symbol wird per mask
   in der aktuellen Textfarbe eingefaerbt -- so bleiben Teamfarbe (ct/t) und die
   gefuellten Marken (--meins, --tod) erhalten, ohne eigenes Bild je Farbe. */
.marke--kill, .marke--tod, .marke--flash, .marke--he,
.marke--smoke, .marke--feuer, .marke--bombe {
  display: inline-grid; place-items: center; padding: 0;
}
.marke--kill::before, .marke--tod::before, .marke--flash::before, .marke--he::before,
.marke--smoke::before, .marke--feuer::before, .marke--bombe::before {
  content: "";
  width: 88%; height: 88%;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat var(--marke-icon);
  mask: center / contain no-repeat var(--marke-icon);
}
.marke--kill  { --marke-icon: url(marke-kill.svg); }
.marke--tod   { --marke-icon: url(marke-tod.svg); }
.marke--flash { --marke-icon: url(icons/flashbang.svg); }
.marke--he    { --marke-icon: url(icons/hegrenade.svg); }
.marke--smoke { --marke-icon: url(icons/smokegrenade.svg); }
.marke--feuer { --marke-icon: url(icons/molotov.svg); }
.marke--bombe { --marke-icon: url(icons/c4.svg); }

/* Filter-Leiste unten: nur noch das Icon, kein Wort mehr daneben. */
.seg__btn--icon { padding: .3rem .5rem; }
.seg__btn--icon .marke--fest { margin: 0; }

.auswertung {
  padding: .65rem clamp(1rem, 3vw, 1.6rem) .85rem;
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.auswertung[hidden] { display: none; }

.auswertung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.auswertung__kopf .seg__btn { padding: .28rem .7rem; font-size: .95rem; }
.auswertung__fokus { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--dim); font-size: .88rem; }
.auswertung__fokus[hidden] { display: none; }
.auswertung__zurueck { padding: .15rem .55rem; font-size: .82rem; }
.auswertung__inhalt { margin-top: .65rem; max-height: 17.5rem; overflow: auto; }
.auswertung__inhalt[hidden] { display: none; }
.auswertung__leer { margin: .2rem 0; color: var(--dim); font-size: .92rem; }
.auswertung__titel { margin: 1rem 0 .45rem; font-family: var(--cond); font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; color: var(--dim); }

/* ---------- Ereignisse ---------- */
.ereignisse { margin: 0; padding: 0; list-style: none; columns: 3 23rem; column-gap: 1.6rem; }
.ereignisse li { break-inside: avoid; }
.ereignis {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .2rem .4rem;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: .9rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.ereignis:hover { background: var(--panel); color: var(--text); }
.ereignis--meins { color: var(--text); }
.ereignis__zeit { flex: none; min-width: 2.9rem; color: var(--dim); font-size: .84rem; }
.ereignis__text { overflow-wrap: anywhere; }
/* Gerade eben passiert: Flaeche und helle Zeit -- kein Seitenstreifen. */
.ereignis.ist-aktuell { background: var(--panel-hi); color: var(--text); }
.ereignis.ist-aktuell .ereignis__zeit { color: var(--t); }

/* ---------- Teams ---------- */
.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); gap: .9rem 2rem; }
.team__kopf { margin: 0 0 .3rem; font-family: var(--cond); font-size: 1rem; font-weight: 600; letter-spacing: .03em; }
.teamblock--ct .team__kopf { color: var(--ct); }
.teamblock--t .team__kopf { color: var(--t); }

.team, .schaden { width: 100%; border-collapse: collapse; font-size: .88rem; }
.team th, .team td, .schaden th, .schaden td { padding: .22rem .5rem .22rem 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule-soft); }
.team thead th, .schaden thead th { color: var(--dim); font-size: .74rem; font-weight: 500; letter-spacing: .03em; }
.team tbody th, .schaden tbody th, .schaden tfoot th { font-weight: 500; }

.team__name {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .05rem .2rem;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.team__name:hover { color: var(--t); }

/* Kreis = CT, Raute = T -- wie auf der Karte. */
.form { flex: none; width: .55rem; height: .55rem; }
.form--ct { border-radius: 50%; background: var(--ct); }
.form--t { transform: rotate(45deg); background: var(--t); }

.team__hp { display: flex; align-items: center; gap: .45rem; min-width: 6.2rem; }
.team__balken { flex: none; width: 3.4rem; height: .32rem; background: var(--rule-soft); }
.team__balken span { display: block; height: 100%; background: var(--text); }
.team__balken span.ist-knapp { background: var(--hot); }
.team__granaten { font-family: var(--cond); font-weight: 600; letter-spacing: .08em; }
.team__geld { text-align: right; }
/* Tot: durchgestrichen und das Wort "tot" -- die Farbe bleibt lesbar (Kontrast 4,5:1). */
.team tr.ist-tot th, .team tr.ist-tot td { color: var(--dim); }
.team tr.ist-tot .team__name { color: var(--dim); text-decoration: line-through; }
.team tr.ist-fokus th, .team tr.ist-fokus td { background: var(--panel); }
.team tr.ist-fokus .team__name { font-weight: 600; }

/* ---------- Schaden ---------- */
.schaden__zahl { width: 4.5rem; font-weight: 600; }
.schaden__zonen { color: var(--dim); }
.schaden tfoot th, .schaden tfoot td { border-bottom: 0; color: var(--dim); }
.schuesse { margin-top: .8rem; }
.schuesse__satz { margin: 0 0 .4rem; font-size: .92rem; }
.schuesse__liste { display: flex; flex-wrap: wrap; gap: .35rem; }
.schuesse__sprung { padding: .15rem .5rem; font-size: .82rem; background: none; cursor: pointer; }

/* ---------- Runden ---------- */
.runden__satz { margin: 0 0 .45rem; color: var(--dim); font-size: .9rem; }
.runden { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.runde {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--dimmer);
  border-radius: 2px;
  color: var(--dim);
  font: 600 .78rem/1 var(--cond);
  font-variant-numeric: tabular-nums;
}
/* Gewonnen = gefuellt, verloren = nur umrandet: lesbar ohne Farbe. */
.runde--gewonnen { background: var(--text); border-color: var(--text); color: var(--ink); }
.runde--offen { border-style: dashed; }
.runde--wechsel { margin-left: .9rem; }
.runde.ist-aktuell { outline: 2px solid var(--t); outline-offset: 2px; }
.kennzahlen { margin-bottom: 0; }

/* ---------- Karte gross: Karte zwei Drittel, Video ein Drittel ---------- */
.viewer--karte-gross { width: min(1760px, 97vw); }
.viewer--karte-gross .viewer__stage {
  display: grid;
  grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
  align-items: stretch;
}
.viewer--karte-gross .karte__flaeche { min-height: min(68vh, 780px); }

@media (max-width: 980px) {
  .viewer--karte-gross .viewer__stage { grid-template-columns: minmax(0, 1fr); }
  .viewer--karte-gross .karte { border-left: 0; border-top: 1px solid var(--rule); }
  .viewer--karte-gross .karte__flaeche { min-height: 0; aspect-ratio: 1; max-height: 80vh; }
  .viewer--karte-gross .karte__stand { padding-right: .85rem; }
}

@media (max-width: 640px) {
  .viewer--karte-gross { width: 100vw; }
  .teams { grid-template-columns: minmax(0, 1fr); }
  .team thead { display: none; }
  .team__geld, .team td:nth-child(3) { display: none; }      /* Ruestung und Geld weichen auf dem Handy */
  .auswertung__kopf .seg { flex-wrap: wrap; }
  .auswertung__inhalt { max-height: 22rem; }
}

/* Der Dialog traegt die Tonfarbe des Clips (dlg.style.color) -- fuer Titel und
   Brotkrume gewollt, in Tabellen und Listen schlecht lesbar. */
.auswertung, .zeitleiste { color: var(--text); }
.team td, .schaden td { color: var(--text); }
.team tr.ist-tot td { color: var(--dim); }
.team td.team__granaten { color: var(--dim); }
.schaden td.schaden__zonen { color: var(--dim); }

@media (max-width: 640px) {
  /* Der Browser gibt <dialog> eine max-width von 100% minus Rand mit -- ohne diese
     Zeile blieb der Abspieler auf dem Handy schmaler als der Bildschirm. */
  .viewer { max-width: 100vw; }
  .teamblock { overflow-x: auto; }
  .team__balken { display: none; }
  .team__hp { min-width: 0; }
  .team__name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ereignisse { columns: 1; }
}


/* ---------- Optionen in Faechern (21.09.2026) -------------------------------
   Jede Gruppe der Werkzeugleisten steckt in einem Fach mit Pfeil. Eingeklappt
   bleibt nur der Kopf stehen; "Optionen" klappt alle auf einmal. Der Inhalt
   laeuft in derselben Zeile weiter, damit die Leiste die Breite nutzt. */

.fach { display: flex; align-items: flex-start; gap: .4rem .5rem; min-width: 0; }
.fach__inhalt { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; min-width: 0; }
.fach__kopf { margin-top: .08rem; }

.fach__kopf, .fach__alle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .55rem .28rem .45rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--dimmer);
  font: 600 .8rem/1.2 var(--cond);
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}
.fach__kopf:hover, .fach__alle:hover { color: var(--text); border-color: var(--rule); }
.fach__kopf[aria-expanded="false"] { border-color: var(--rule); color: var(--dim); }
.fach__alle { border-color: var(--rule); color: var(--text); }

/* Pinsel-Symbol statt Wort "Zeichnen" -- als Maske in der Kopffarbe, kein Fremdbild. */
.fach__pinsel {
  width: 1.05rem; height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat url(pinsel.svg);
  mask: center / contain no-repeat url(pinsel.svg);
}

/* Der Pfeil: zu = nach rechts, offen = nach unten. Form, nicht Farbe. */
.fach__kopf::before, .fach__alle::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: .28rem 0 .28rem .42rem;
  border-color: transparent transparent transparent currentColor;
  transition: transform .12s ease-out;
}
.fach__kopf[aria-expanded="true"]::before, .fach__alle[aria-expanded="true"]::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .fach__kopf::before, .fach__alle::before { transition: none; } }

/* Zwischen zwei offenen Faechern ein feiner Strich -- sonst verschwimmen die Gruppen. */
.werkzeug .fach + .fach { padding-left: .6rem; border-left: 1px solid var(--rule-soft); }

.seg__btn .marke--fest { margin-right: .3rem; vertical-align: -.12em; pointer-events: none; }
.seg__btn[aria-pressed="false"] .marke--fest { opacity: .45; }
.seg__btn[aria-pressed="true"] .marke--fest { background: var(--ink); color: var(--t); border-color: var(--ink); }
.werkzeug .seg__btn:disabled { opacity: .38; cursor: default; }

.regler { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; color: var(--dim); font: 600 .95rem/1.2 var(--cond); }
.regler output { min-width: 2.2ch; color: var(--t); text-align: right; }
.regler input[type="range"] { width: clamp(8rem, 16vw, 15rem); accent-color: var(--marker); cursor: pointer; }


/* ---------- Zeitleiste: Bahn, Baender, Runden, Strecken ---------------------
   Die Spur ist der Kasten, die Bahn liegt darin und wird beim Strecken breiter
   als die Spur. Alles auf der Bahn sitzt in Prozent und wandert von selbst mit. */

.zeitleiste__spur { height: auto; }
.zeitleiste__bahn { position: relative; height: 2.3rem; min-width: 100%; }
.zeitleiste__spur.ist-gestreckt {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) var(--video);
}
/* Gestreckt schneidet die Spur ab -- der Strich darf dann nicht mehr ueber den Rand ragen. */
.zeitleiste__spur.ist-gestreckt .zeitleiste__kopf { top: 0; bottom: 0; }
.zeitleiste__kopf { z-index: 3; }

/* Ein Highlight: Breite = Dauer, Hoehe = Score. Steht am Boden der Bahn, die Marken
   liegen mittig darueber. Der Ton ist der der Clipart (helfer.js KINDS). */
.band {
  position: absolute;
  bottom: 0;
  min-width: 4px;
  padding: 0;
  border: 0;
  border-top: 2px solid currentColor;
  border-radius: 2px 2px 0 0;
  border-bottom: 3px solid currentColor;
  background: color-mix(in srgb, currentColor 34%, transparent);
  color: var(--dim);
  cursor: pointer;
}
.band:hover, .band:focus-visible { background: color-mix(in srgb, currentColor 48%, transparent); z-index: 1; }
.band--t { color: var(--t); }
.band--ct { color: var(--ct); }
.band--hot { color: var(--hot); }
.band--cool { color: var(--cool); }

/* Mit Highlights wird die Bahn zweistoeckig: oben die Marken, unten ragen die Baender heraus --
   sonst verdecken bei einer ganzen Demo hunderte Marken genau das, was man sucht. */
.zeitleiste__bahn.hat-highlights { height: 3.6rem; }
.zeitleiste__bahn.hat-highlights .marke { top: 30%; }

.rundenmarke {
  position: absolute;
  top: 0; bottom: 0;
  padding: 0 0 0 .2rem;
  border: 0;
  border-left: 1px solid var(--rule);
  background: none;
  color: var(--dimmer);
  font: 600 .66rem/1.15 var(--cond);
  text-align: left;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}
.rundenmarke:hover, .rundenmarke:focus-visible { color: var(--text); border-left-color: var(--text); }
.marke { z-index: 2; }

/* Auf Fingerbedienung sind die Marken der Zeitleiste sonst 19 px hoch -
   gemessen am 21.09.2026 und kaum zu treffen. Der sichtbare Kasten bleibt,
   die Trefferflaeche waechst darueber hinaus. */
@media (pointer: coarse) {
  .marke { min-width: 1.6rem; height: 1.6rem; }
  .marke::after { content: ""; position: absolute; inset: -6px -3px; }
}
.marke:hover, .marke:focus-visible { z-index: 4; }


/* ---------- Taktikkarte abgeheftet ------------------------------------------
   karte.html: ein Fenster, das nur die Karte traegt. Der Abspieler haengt seinen
   Kartenknoten hier ein (minimap.js, ziehUm). */

body.ab {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
}
.ab__kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .7rem;
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.ab__kopf:active { cursor: grabbing; }
.ab__griff { color: var(--dimmer); font-size: 1.1rem; line-height: 1; }
.ab__titel { flex: 1 1 auto; color: var(--dim); font: 600 .8rem/1.2 var(--cond); letter-spacing: .07em; text-transform: uppercase; }
.ab .karte { flex: 1 1 auto; min-height: 0; border: 0; }
.ab .karte__flaeche { min-height: 0; }
.ab .karte__stand { padding-right: .85rem; }
.ab__leer { display: none; flex: 1 1 auto; place-items: center; margin: 0; padding: 1.5rem; color: var(--dim); text-align: center; }
.ab .karte[hidden] + .ab__leer, .ab > .ab__leer:first-child { display: grid; }

/* Andockflaeche im Abspieler -- nur sichtbar, waehrend die Karte hereingezogen wird. */
.andocken {
  position: absolute;
  inset: .6rem;
  z-index: 5;
  display: grid;
  place-items: center;
  margin: 0;
  border: 2px dashed var(--t);
  border-radius: var(--radius);
  background: rgb(15 23 30 / .86);
  color: var(--t);
  font: 600 1.15rem/1.3 var(--cond);
  letter-spacing: .04em;
  pointer-events: none;
}

@media (max-width: 640px) {
  .werkzeug .fach + .fach { padding-left: 0; border-left: 0; }
  .fach { flex-wrap: wrap; }
  .fach, .fach__inhalt { width: 100%; }
  .fach__inhalt .seg { flex-wrap: wrap; }
  /* Ein zweites Fenster gibt es auf dem Handy nicht. */
  #k-ab-gruppe { display: none; }
}

/* Der Strich der Abspielstelle wandert per transform (auswertung.js, takt) -- left bleibt 0. */
.zeitleiste__kopf { left: 0; will-change: transform; }
/* Bahn und Ereignisliste tragen bei einer ganzen Demo ueber tausend Knoepfe. contain haelt
   deren Layout und Malen vom Rest des Dialogs fern, der sich mit jedem Videobild aendert. */
.zeitleiste__bahn { contain: layout style; }
.auswertung__inhalt { contain: layout paint style; }


/* ==========================================================================
   Marker-Welt im Abspieler und in der Lernumgebung (22.09.2026)
   Die Mechanik oben bleibt unveraendert; hier nur Schrift, Flaechen, Zustaende.
   ========================================================================== */

.viewer { background: var(--ink-2); border-color: var(--haar); }
.viewer::backdrop { background: rgb(5 6 7 / .9); }

.viewer__title {
  font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.05 var(--hand);
  color: var(--marker);
}
.viewer__crumb { font: 500 .92rem/1.3 var(--cond); color: var(--dim); letter-spacing: .02em; }
.viewer__meta dt { font-family: var(--cond); letter-spacing: .05em; text-transform: uppercase; font-size: .72rem; color: var(--dimmer); }
.viewer__meta dd { font-family: var(--cond); font-weight: 600; }

.btn {
  border: 1px solid var(--haar);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--cond);
  font-weight: 600;
  letter-spacing: .02em;
}
.btn:hover { border-color: var(--marker); color: var(--marker); }
.btn[aria-pressed="true"] { border-color: var(--marker); color: var(--schwarz); background: var(--marker); }

.fach__kopf { font-family: var(--cond); letter-spacing: .04em; }
.fach__alle { font-family: var(--cond); }

.notiz textarea {
  background: var(--ebene-1);
  border-color: var(--haar);
  font-family: var(--sans);
}
.notiz textarea:focus-visible { border-color: var(--marker); }

.viewer__tasten summary { font-family: var(--cond); letter-spacing: .03em; }
kbd {
  padding: .05rem .35rem;
  border: 1px solid var(--haar);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--ebene-1);
  font: 600 .82rem/1.3 var(--cond);
  color: var(--marker);
}

/* Lernumgebung: Zahl gross in Marker, Anteile als Textmarker-Striche. */
.lern__zahl b { font: 400 2.2rem/1 var(--hand); color: var(--marker); }
.lern__zahl { font-family: var(--cond); }
.lern__leiste { background: var(--ebene-1); border-color: var(--haar); }
.lern__auswertung h2 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--hand); color: var(--marker); }
.lern__liste h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .07em; }
.lern__eintrag { font-family: var(--cond); }
.lern__bar {
  background: var(--hot);
  opacity: .32;
  -webkit-mask: url("striche/band-0.svg") center / 100% 100% no-repeat;
          mask: url("striche/band-0.svg") center / 100% 100% no-repeat;
}
.lern__eintrag:hover .lern__bar { opacity: .5; }

.test h2 { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--hand); color: var(--marker); }
.card__shot img.ist-ersatz { filter: brightness(.55) saturate(.7); }


/* ---------- Gezeichnete Symbole (cs2/striche/*.svg) -------------------------
   Statt Schriftzeichen (★ ✓ ‹ › ×): eine Maske, eingefaerbt mit currentColor. */
.ic {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  flex: none;
  vertical-align: -.18em;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}
.ic + *, * + .ic { margin-inline: .12em; }
.ic--stern      { --ic: url("striche/stern.svg"); }
.ic--stern-voll { --ic: url("striche/stern-voll.svg"); }
.ic--haken      { --ic: url("striche/haken.svg"); }
.ic--stift      { --ic: url("striche/stift.svg"); }
.ic--pfeil-l    { --ic: url("striche/pfeil-l.svg"); }
.ic--pfeil-r    { --ic: url("striche/pfeil-r.svg"); }
.ic--kreuz      { --ic: url("striche/kreuz.svg"); }
.kopf__weg .ic { margin-right: .2em; }
.reset .ic { margin-right: .3em; }
.reset[aria-pressed="true"] .ic { --ic: url("striche/stern-voll.svg"); }
.viewer__nav .ic, .viewer__close .ic { width: 1.4em; height: 1.4em; }
.marke .ic { width: .95em; height: .95em; vertical-align: -.12em; }

.nacht__zahl {
  display: inline-block;
  margin-left: .7em;
  font: 500 .6em/1 var(--cond);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
  vertical-align: .25em;
}

@media (max-width: 760px) {
  /* Die Truppe rollt seitlich -- der Name bleibt stehen. */
  .board td:first-child, .board th.board__name {
    position: sticky; left: 0; z-index: 1;
    background: var(--schwarz);
  }
  .board td:first-child { min-width: 11rem; }
  .buehne__knoepfe { right: auto; justify-content: flex-start; }
  .buehne__schrift { max-width: none; }
}

/* ---------- Highlight der Woche: Marker-Notiz oben links im Bild --------------- */
.buehne__woche {
  position: absolute;
  z-index: 3;
  top: clamp(1.2rem, 5vh, 2.6rem);
  left: var(--pad);
  margin: 0;
  transform: rotate(-4deg);
  transform-origin: left top;
  pointer-events: none;
}
.buehne__woche-text {
  position: relative;
  display: inline-block;
  padding: .2em .5em .15em;
  font: 400 clamp(1.5rem, 2.8vw, 2.5rem)/1 var(--hand);
  color: var(--schwarz);
  animation: band-auf .6s var(--kurve) .2s both;
}
/* Textmarker-Weiss als Grund: wie ein Aufkleber auf dem Bild. */
.buehne__woche-text::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--marker);
  -webkit-mask: url("striche/band-2.svg") center / 100% 100% no-repeat;
          mask: url("striche/band-2.svg") center / 100% 100% no-repeat;
}
.buehne__woche-pfeil {
  position: absolute;
  left: 1.2em;
  top: 100%;
  width: clamp(70px, 7vw, 120px);
  height: auto;
  color: var(--marker);
}
.buehne__woche-pfeil .marker__strich { --dicke: 3.4; }
@media (max-width: 760px) {
  .buehne__woche { top: .6rem; left: .7rem; }
  .buehne__woche-text { font-size: 1.1rem; }
  .buehne__woche-pfeil { display: none; }
  /* Am Handy rechtsbuendig beschneiden: Der Killfeed sitzt am rechten Bildrand. */
  .buehne__foto, .buehne__film { object-position: 100% 0; }
}