/*
 * Leitstand — Gestaltung.
 *
 * Grundgedanke: Der Blick soll auf dem Brett bleiben. Kopf- und Fußleiste
 * haben deshalb eine feste Höhe und ändern sie nie; Zahlen darin stehen in
 * Tabellenziffern, damit beim Hochzählen nichts wackelt. Kacheln behalten
 * ihren Platz im Raster, egal was in ihnen passiert — was sich ändert, ist
 * Farbe und Rand, nicht die Geometrie.
 */

:root {
  --grund: #0d1016;
  --flaeche: #151a22;
  --flaeche-2: #1c222c;
  --flaeche-3: #232b37;
  --rand: #273040;
  --rand-hell: #3a4557;
  --schrift: #dde5f0;
  --schrift-matt: #8d9aad;
  --schrift-still: #5f6b7d;

  --akzent: #7dd3fc;
  --gut: #4ade80;
  --warn: #fbbf24;
  --fehler: #f87171;
  --laeuft: #60a5fa;

  --kopf-hoehe: 52px;
  --band-hoehe: 30px;
  --fuss-hoehe: 76px;
  --lueck: 8px;

  --serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--serif);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  grid-template-rows: var(--kopf-hoehe) var(--band-hoehe) 1fr var(--fuss-hoehe);
  height: 100dvh;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- Kopfleiste */

.kopf {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 12px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  min-width: 0;
}

.marke {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--schrift);
  flex: none;
}
.marke-zeichen { width: 18px; height: 18px; fill: var(--akzent); }

.kontingente { display: flex; gap: 18px; flex: none; }

.kontingent {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--schrift-matt);
}
.kontingent-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--schrift-still); }

.balken {
  display: block;
  width: 84px;
  height: 6px;
  border-radius: 3px;
  background: var(--flaeche-3);
  overflow: hidden;
}
.balken > i {
  display: block;
  height: 100%;
  background: var(--gut);
  transition: width 0.4s ease, background-color 0.4s ease;
}
/* Ab 75 % gelb, ab 90 % rot — die Farbe soll vor der Zahl auffallen. */
.kontingent[data-stufe="warn"] .balken > i { background: var(--warn); }
.kontingent[data-stufe="kritisch"] .balken > i { background: var(--fehler); }

.k-wert { font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 34px; }
.k-reset { font-size: 11px; color: var(--schrift-still); font-variant-numeric: tabular-nums; }

.kopf-zahlen { display: flex; gap: 14px; margin-left: auto; flex: none; }
.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--schrift-matt);
}

.kopf-rechts { display: flex; align-items: center; gap: 8px; flex: none; }

.mikro-zustand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--schrift-still);
  padding: 4px 9px;
  border: 1px solid var(--rand);
  border-radius: 20px;
}
.mikro-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--schrift-still);
  transition: background-color 0.2s;
}
.mikro-zustand[data-an="ja"] { color: var(--fehler); border-color: color-mix(in oklab, var(--fehler) 45%, transparent); }
.mikro-zustand[data-an="ja"] .mikro-punkt { background: var(--fehler); animation: pochen 1.1s infinite; }
.mikro-zustand[data-an="bereit"] .mikro-punkt { background: var(--gut); }

@keyframes pochen { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ------------------------------------------------------------------ Knöpfe */

.knopf {
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 13px;
  transition: background-color 0.12s, border-color 0.12s;
}
.knopf:hover { background: var(--flaeche-3); border-color: var(--rand-hell); }
.knopf:active { transform: translateY(1px); }
.knopf-still { background: transparent; width: 30px; height: 28px; padding: 0; color: var(--schrift-matt); }
.knopf-gross { padding: 11px 22px; font-size: 15px; width: 100%; margin-top: 10px; }
.knopf:disabled { opacity: 0.4; cursor: not-allowed; }

/* -------------------------------------------------------------- Meldungsband */

.band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: var(--grund);
  border-bottom: 1px solid var(--rand);
  overflow: hidden;
  font-size: 12px;
  color: var(--schrift-matt);
  white-space: nowrap;
}

.meldung {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  animation: einblenden 0.25s ease;
}
.meldung .m-nr {
  font-family: var(--mono);
  font-size: 10px;
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border-radius: 3px;
  background: hsl(var(--hue) 45% 30%);
  color: hsl(var(--hue) 85% 88%);
}
.meldung .m-zeit { font-family: var(--mono); color: var(--schrift-still); font-size: 11px; }
.meldung[data-art="fertig"] { color: var(--gut); }
.meldung[data-art="wartet"] { color: var(--warn); }
.meldung[data-art="fehler"] { color: var(--fehler); }

@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } }

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

.brett {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--zeilen, 2), minmax(0, 1fr));
  gap: var(--lueck);
  padding: var(--lueck);
  min-height: 0;
  overflow: hidden;
}

/* Eine Kachel im Vollbild: das Raster wird für den Moment einspaltig. Der
   Platz der Kachel bleibt gespeichert, sie springt beim Zurückschalten
   exakt dorthin zurück. */
.brett[data-vollbild] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.brett[data-vollbild] .kachel:not(.vollbild) { display: none; }

/* ------------------------------------------------------------------ Kachel */

.kachel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 0;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kachel.ziel { border-color: hsl(var(--hue) 60% 55%); box-shadow: 0 0 0 1px hsl(var(--hue) 60% 55% / 0.5); }
.kachel[data-zustand="laeuft"] { border-color: color-mix(in oklab, var(--laeuft) 55%, var(--rand)); }
.kachel[data-zustand="fertig"] { border-color: color-mix(in oklab, var(--gut) 50%, var(--rand)); }
.kachel[data-zustand="fehler"] { border-color: var(--fehler); }
/* Wartet auf eine Entscheidung: das ist der einzige Zustand, der blinkt. */
.kachel[data-zustand="wartet"] {
  border-color: var(--warn);
  animation: warten 1.4s ease-in-out infinite;
}
@keyframes warten {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in oklab, var(--warn) 60%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--warn) 22%, transparent); }
}

/* Kopfzeile der Kachel */
.k-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: linear-gradient(hsl(var(--hue) 30% 18%), var(--flaeche-2));
  border-bottom: 1px solid var(--rand);
  min-width: 0;
}

.k-nr {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: hsl(var(--hue) 50% 34%);
  color: hsl(var(--hue) 90% 90%);
  flex: none;
}

.k-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.k-pfad {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--schrift-still);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.k-zustand {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  flex: none;
  color: var(--schrift-matt);
}
.k-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--schrift-still); flex: none; }
.kachel[data-zustand="laeuft"] .k-punkt { background: var(--laeuft); animation: pochen 1.1s infinite; }
.kachel[data-zustand="wartet"] .k-punkt { background: var(--warn); animation: pochen 0.7s infinite; }
.kachel[data-zustand="fertig"] .k-punkt { background: var(--gut); }
.kachel[data-zustand="fehler"] .k-punkt { background: var(--fehler); }
.kachel[data-zustand="bereit"] .k-punkt { background: var(--schrift-matt); }

/* Die Uhr. Läuft in Tabellenziffern, damit die Kopfzeile nicht zappelt. */
.k-uhr {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--schrift);
  flex: none;
}
.kachel[data-zustand="laeuft"] .k-uhr { color: var(--laeuft); }
.kachel[data-zustand="wartet"] .k-uhr { color: var(--warn); }

.k-werkzeuge { display: flex; gap: 3px; flex: none; }
.k-werkzeuge .knopf-still { width: 24px; height: 22px; font-size: 12px; }

/* Verlauf */
.k-lauf {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 9px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rand-hell) transparent;
  overscroll-behavior: contain;
}
.k-lauf::-webkit-scrollbar { width: 8px; }
.k-lauf::-webkit-scrollbar-thumb { background: var(--rand-hell); border-radius: 4px; }

/* Einträge im Verlauf */
.eintrag { margin-bottom: 9px; font-size: 13px; line-height: 1.5; }
.eintrag:last-child { margin-bottom: 0; }

.e-nutzer {
  background: var(--flaeche-3);
  border-left: 2px solid hsl(var(--hue) 55% 50%);
  padding: 6px 9px;
  border-radius: 0 5px 5px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.e-text { overflow-wrap: anywhere; }
.e-text > :first-child { margin-top: 0; }
.e-text > :last-child { margin-bottom: 0; }

.e-denken {
  color: var(--schrift-still);
  font-style: italic;
  font-size: 12px;
  border-left: 2px solid var(--rand);
  padding-left: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 5.4em;
  overflow: hidden;
  position: relative;
}
.e-denken.offen { max-height: none; }

/* Werkzeugkarte */
.e-werkzeug {
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche-2);
  overflow: hidden;
  font-size: 12px;
}
.w-kopf {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  background: var(--flaeche-3);
  cursor: pointer;
  min-width: 0;
}
.w-name { font-family: var(--mono); font-weight: 600; font-size: 11.5px; flex: none; }
.w-arg {
  font-family: var(--mono);
  color: var(--schrift-matt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
}
.w-dauer { font-family: var(--mono); font-size: 10.5px; color: var(--schrift-still); flex: none; }
.w-punkt { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--laeuft); animation: pochen 1s infinite; }
.e-werkzeug[data-ok="ja"] .w-punkt { background: var(--gut); animation: none; }
.e-werkzeug[data-ok="nein"] .w-punkt { background: var(--fehler); animation: none; }
.w-inhalt {
  display: none;
  padding: 7px 9px;
  border-top: 1px solid var(--rand);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow-y: auto;
  color: var(--schrift-matt);
}
.e-werkzeug.offen .w-inhalt { display: block; }

/* Freigabekarte — der lauteste Baustein der Oberfläche. */
.e-freigabe {
  border: 1px solid var(--warn);
  border-radius: 7px;
  background: color-mix(in oklab, var(--warn) 9%, var(--flaeche-2));
  padding: 9px;
}
.f-titel { font-weight: 650; margin-bottom: 5px; color: var(--warn); font-size: 13px; }
.f-befehl {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--grund);
  border-radius: 5px;
  padding: 6px 8px;
  margin-bottom: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 150px;
  overflow-y: auto;
}
.f-grund { font-size: 11.5px; color: var(--schrift-matt); margin-bottom: 8px; }
.f-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.f-knopf { border-radius: 5px; padding: 5px 10px; font-size: 12.5px; border: 1px solid var(--rand); background: var(--flaeche-3); }
.f-knopf .taste {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--grund);
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 5px;
  color: var(--schrift-matt);
}
.f-ja { border-color: color-mix(in oklab, var(--gut) 55%, transparent); color: var(--gut); }
.f-immer { border-color: color-mix(in oklab, var(--akzent) 55%, transparent); color: var(--akzent); }
.f-nein { border-color: color-mix(in oklab, var(--fehler) 55%, transparent); color: var(--fehler); }
.e-freigabe.erledigt { opacity: 0.45; border-color: var(--rand); background: var(--flaeche-2); }
.e-freigabe.erledigt .f-knoepfe { display: none; }

.e-hinweis { font-size: 11.5px; color: var(--schrift-still); font-family: var(--mono); }
.e-hinweis[data-stufe="warn"] { color: var(--warn); }
.e-hinweis[data-stufe="fehler"] { color: var(--fehler); }

/* Abschlusszeile eines Zuges */
.e-abschluss {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--schrift-still);
  border-top: 1px dashed var(--rand);
  padding-top: 6px;
}
.e-abschluss .gut { color: var(--gut); }

/* Fußzeile der Kachel: Zahlen, die immer sichtbar bleiben. */
.k-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 9px;
  border-top: 1px solid var(--rand);
  background: var(--flaeche-2);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--schrift-still);
  min-width: 0;
}
.k-fuss .weit { margin-left: auto; }
.k-fuss .modus { text-transform: uppercase; letter-spacing: 0.04em; }

/* Leerer Platz */
.leerplatz {
  display: grid;
  place-content: center;
  gap: 6px;
  justify-items: center;
  border: 1px dashed var(--rand);
  border-radius: 9px;
  color: var(--schrift-still);
  background: color-mix(in oklab, var(--flaeche) 40%, transparent);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.leerplatz:hover { border-color: var(--rand-hell); color: var(--schrift-matt); }
.leerplatz .lp-nr { font-family: var(--mono); font-size: 22px; opacity: 0.35; }
.leerplatz .lp-text { font-size: 12px; }

/* ---------------------------------------------------------------- Fußleiste */

.fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  min-width: 0;
}

.ziel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 7px;
  padding: 7px 11px;
  flex: none;
  max-width: 210px;
}
.ziel-nr {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: hsl(var(--hue, 210) 50% 34%);
  color: hsl(var(--hue, 210) 90% 90%);
  flex: none;
}
.ziel-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eingabe-huelle {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 7px;
  padding: 6px 10px;
  transition: border-color 0.15s;
}
.eingabe-huelle:focus-within { border-color: var(--akzent); }
.eingabe-huelle[data-hoert="ja"] { border-color: var(--fehler); }

.eingabe {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--schrift);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  max-height: 56px;
}
.eingabe::placeholder { color: var(--schrift-still); }

/* Vorläufiger Erkennungstext — blass, damit man Festes davon unterscheidet. */
.vorlaeufig {
  color: var(--schrift-still);
  font-style: italic;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  pointer-events: none;
}

.fuss-rechts { display: flex; align-items: center; gap: 7px; flex: none; }

.knopf-mikro {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 0;
}
.knopf-mikro svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; }
.knopf-mikro[data-an="ja"] { background: var(--fehler); border-color: var(--fehler); color: #fff; }
.knopf-senden { padding: 9px 17px; }

/* ------------------------------------------------------------ Überlagerungen */

.ueberlagerung {
  position: fixed;
  inset: 0;
  background: rgb(4 6 10 / 0.72);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 24px;
}
.ueberlagerung[hidden] { display: none; }

.dialog {
  background: var(--flaeche);
  border: 1px solid var(--rand-hell);
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 760px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 22px 60px rgb(0 0 0 / 0.55);
}
.dialog h2 { margin: 0 0 14px; font-size: 17px; }
.dialog h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--schrift-matt); }

.tastenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 5px 20px; }
.tastenzeile { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 2px 0; }
kbd {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--flaeche-3);
  border: 1px solid var(--rand-hell);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 22px;
  text-align: center;
  flex: none;
}
.tastenzeile span { color: var(--schrift-matt); }

.feld { display: grid; gap: 5px; margin-bottom: 14px; }
.feld label { font-size: 12px; color: var(--schrift-matt); }
.feld input, .feld select {
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--schrift);
  font-family: var(--serif);
  font-size: 14px;
  outline: none;
}
.feld input:focus, .feld select:focus { border-color: var(--akzent); }
.feld .hinweis { font-size: 11.5px; color: var(--schrift-still); }
.feld-reihe { display: flex; gap: 10px; }
.feld-reihe > * { flex: 1; }

.wahlliste { display: grid; gap: 3px; max-height: 46vh; overflow-y: auto; margin: -4px -6px; padding: 4px 6px; }
.wahl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  background: none;
  width: 100%;
}
.wahl:hover, .wahl.aktiv { background: var(--flaeche-2); border-color: var(--rand); }
.wahl .w-git { font-size: 10px; color: var(--gut); font-family: var(--mono); flex: none; }
.wahl .w-pfad { font-family: var(--mono); font-size: 11px; color: var(--schrift-still); margin-left: auto; flex: none; }

/* ---------------------------------------------------------------- Anmeldung */

.tor { position: fixed; inset: 0; background: var(--grund); display: grid; place-items: center; z-index: 100; }
.tor[hidden] { display: none; }
.tor-karte { width: min(370px, 90vw); text-align: center; }
.tor-karte h1 { font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }
.tor-text { color: var(--schrift-matt); font-size: 14px; margin: 0 0 6px; }
.tor-fehler { color: var(--fehler); font-size: 13px; margin-top: 12px; }

/* -------------------------------------------------------------- Markdown */

.e-text p { margin: 0 0 7px; }
.e-text ul, .e-text ol { margin: 0 0 7px; padding-left: 20px; }
.e-text li { margin-bottom: 2px; }
.e-text h1, .e-text h2, .e-text h3, .e-text h4 { margin: 11px 0 6px; font-size: 13.5px; font-weight: 650; }
.e-text h1 { font-size: 15px; }
.e-text code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--flaeche-3);
  padding: 1px 4px;
  border-radius: 3px;
}
.e-text pre {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 0 0 7px;
}
.e-text pre code { background: none; padding: 0; font-size: 11.5px; line-height: 1.45; }
.e-text a { color: var(--akzent); }
.e-text blockquote {
  margin: 0 0 7px;
  padding-left: 9px;
  border-left: 2px solid var(--rand-hell);
  color: var(--schrift-matt);
}
.e-text table { border-collapse: collapse; font-size: 12px; margin-bottom: 7px; }
.e-text th, .e-text td { border: 1px solid var(--rand); padding: 3px 7px; text-align: left; }
.e-text hr { border: none; border-top: 1px solid var(--rand); margin: 9px 0; }
.e-text strong { font-weight: 650; }

/* -------------------------------------------------------------- Schmalbild */

@media (max-width: 860px) {
  .brett { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(240px, 1fr); overflow-y: auto; }
  .kontingente { gap: 10px; }
  .balken { width: 46px; }
  .kopf-zahlen { display: none; }
  .marke span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}