/* Zentrales Terminal-Design. Schriften und alle Berechnungen bleiben auf dem eigenen Server. */
:root {
  --grund: #000; --grund-2: #000; --flaeche: #070707; --flaeche-hover: #111;
  --flaeche-stark: #101010; --rand: #292929; --rand-stark: #4b4b4b;
  --text: #f2f2f2; --text-2: #c5c5c5; --text-3: #999;
  --akzent: #00ff88; --akzent-tief: #00b861; --akzent-glanz: #00391e;
  --gut: #00ff88; --warn: #ffcb5c; --fehler: #ff7080; --violett: #b7a0ff;
  --radius: 0; --radius-klein: 0; --schatten: none;
  --schrift: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
body { background: #000; font-family: var(--schrift); font-size: 14px; letter-spacing: 0; }
body::before { display: none; }
h1, h2, h3 { letter-spacing: 0; overflow-wrap: anywhere; }
.kopf, .glas, .denkbox, .karte, .toast { background: #000; box-shadow: none; backdrop-filter: none; }
.marke span { background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
.glas, .denkbox, .karte { border: 1px solid var(--rand); }
.knopf, .knopf.klein, .feld, .reiter, .reiter button, .chip, .eintrag, .vorschau, .kennzahl,
.infobox, .fehlerbox, .szene, .szenen-eintrag, .szenen-eintrag video, .spieler, .denkbox,
.denk-text, .denk-block, .denkbox-zustand, .medium, .lage, .marke-info, .quelle, .toast,
.aufnahme-text, .aktualisierung, .lernkarte, .studio-karte, .glas { border-radius: 0; box-shadow: none; }
.knopf { min-height: 44px; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.knopf.haupt, .knopf.haupt:hover { background: var(--akzent); color: #000; box-shadow: none; border-color: var(--akzent); }
.knopf:hover, .chip:hover { background: #151515; border-color: var(--akzent); }
.chip.aktiv, .chip[aria-pressed="true"], .reiter button.aktiv { background: #002714; color: var(--akzent); border-color: var(--akzent); box-shadow: none; }
.eintrag.aktiv { background: #001c0f; border-color: var(--akzent); box-shadow: none; }
.kennzahl, .feld, .denk-text, .szene, .szenen-eintrag { background: #080808; }
.kennzahl::before, .denkbox::before { display: none; }
.kennzahl { min-width: 0; overflow-wrap: anywhere; }
.feld, select.feld option { background-color: #080808; }
.infobox { background: #151004; border-color: var(--warn); }
.fehlerbox { background: #190609; border-color: var(--fehler); }
.reiter { background: #080808; }
.rahmen { grid-template-columns: 280px minmax(0, 1fr); max-width: 2048px; }
.studio { grid-template-columns: minmax(0, 1fr); }
.studio-boxen { position: static; height: auto; min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.denkbox { max-height: 320px; }
.tafel { padding: clamp(16px,2vw,30px); min-width: 0; }
.detail { container: detail / inline-size; }
.detail a, .detail p, .beschreibungstext, code { overflow-wrap: anywhere; }
.schritt-zahl { border-radius: 0; }
.fertig-player .spieler { width: 100%; max-width: 400px; }
.fertig-player .spieler.quer { max-width: 100%; }
.fertig-raster { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; align-items: start; }
.detail-spieler, .detail-infos { min-width: 0; }
.detail-spieler { display: flex; justify-content: center; }
.spieler { display: block; width: 100%; height: auto; aspect-ratio: 9/16; max-width: 400px; max-height: none; object-fit: contain; background: #000; }
.spieler.quer { aspect-ratio: 16/9; max-width: 100%; }
.detail-infos .zeile { flex-wrap: wrap; align-items: stretch; }
.detail-infos .knopf { flex: 1 1 180px; min-width: 0; }
.detail-infos pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.kennzahlen { grid-template-columns: repeat(auto-fit,minmax(min(140px,100%),1fr)); }
@container detail (min-width: 760px) {
  .fertig-raster { grid-template-columns: minmax(260px, min(38%,400px)) minmax(0,1fr); }
  .fertig-raster.quer { grid-template-columns: minmax(0,1.25fr) minmax(280px,1fr); }
}
@media (max-width: 1000px) { .rahmen { grid-template-columns: 230px minmax(0,1fr); padding: 16px; } }
@media (max-width: 800px) { .rahmen { grid-template-columns: minmax(0,1fr); } .studio-boxen { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 480px) { .kopf { padding: 10px; } .rahmen { padding: 10px; } .tafel { padding: 14px; } .kennzahlen { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }