/* Farben nur hier (Vertrag 9, Hell/Dunkel): :root ist die dunkle CCTV-Optik, [data-theme="hell"] die helle Fassung.
   Ohne Wahl (localStorage leitstand.design = system) entscheidet prefers-color-scheme. Regeln unten kennen keine
   festen Farbwerte -- auch app.js liest diese Variablen zur Laufzeit für die Canvas-Zeichnungen (Karte, Zeitleiste). */
:root {
  color-scheme: dark;
  --bg: #07080b;
  --panel: #0e1015;
  --feld: #151923;          /* Eingabefelder, Knöpfe, Inventarfelder */
  --hover: #12161e;
  --rand: #232833;
  --text: #d7dbe3;
  --dünn: #7b8494;
  --grün: #59d38a;
  --amber: #ffb347;
  --rot: #ff4d4d;
  --cyan: #5cc8ff;
  --an-text: #05130b;       /* Schrift auf grünem/cyanem "an"-Knopf */
  --wand: #000000;          /* Monitorfläche hinter den Kacheln */
  --kachel: #05060a;        /* Grund einer Karten-/leeren Kachel */
  --kachel-rand: #1a1f29;
  --sicht-rand: #1f3a2c;
  --live-rand: #3a2a2a;
  --zl-bg: #0a0c11;         /* Zeitleisten-Canvas */
  --sperre: rgba(5, 6, 9, .94);
  --schatten: rgba(0, 0, 0, .6);
  --scan: rgba(0, 0, 0, .08);
  --glas: rgba(14, 16, 21, .85);   /* halbdurchsichtige Werkzeugleisten über dem Bild */
  --ecke: rgba(89, 211, 138, .7);
  /* HUD-Text liegt über dem Weltbild (Himmel, Blöcke, Karte), nicht über der Seite -- deshalb in beiden Fassungen
     hell mit dunklem Schatten, wie ein Namensschild im Spiel. */
  --hud-text: #ffffff;
  --hud-text2: #cfd5df;
  --hud-schatten: #000000;
  /* Karten-/leere Kacheln zeigen keinen Himmel, sondern die Seite (Kachelgrund) -- ihr HUD folgt der Fassung */
  --karte-text: #ffffff;
  --karte-text2: #cfd5df;
  --karte-schatten: #000000;
  /* Ereignisarten (Chips, Listenrand, Karten-Marken, Zeitleiste) */
  --er-abbau: #8a7a55; --er-setzen: #a89060; --er-behaelter: #ffb347; --er-entnommen: #ffb347; --er-eingelegt: #ffd280;
  --er-schaden: #ff4d4d; --er-tod: #ff2222; --er-kill: #ff7a5c; --er-chat: #5cc8ff; --er-befehl: #8fd9ff;
  --er-aufheben: #9aa5b5; --er-ablegen: #c4ccd8; --er-verbrauch: #c9a0ff; --er-teleport: #59d38a; --er-beitritt: #59d38a;
  --er-abmeldung: #3a9a63; --er-wechsel: #59d38a;
  /* Sicht-Index (Vertrag 13.2): Ereignisse aus den Aufnahmen -- nur in der Suche, deshalb eigene, ruhigere Töne */
  --er-treffer: #ff8c5c; --er-glocke: #e6c76a; --er-truhe: #d9a85a; --er-shulker: #c98ed6; --er-kolben: #9aa5b5;
  --marke-andere: rgba(200, 205, 215, .85);   /* andere Spieler auf der Karte */
  /* Spielerblick-HUD: Spieloptik (Herzen, Keulen, XP), in beiden Fassungen gleich -- das ist das Spiel, nicht die Seite */
  --mc-text: #ffffff; --mc-schatten: #000000; --mc-tippt: #e8e8a0;
  --mc-herz: #ff3b3b; --mc-herz-leer: #3a2020;
  --mc-keule: #d9903a; --mc-keule-halb: #8a5a22; --mc-keule-leer: #33261a;
  --mc-xp: #7fe33a;
  --mc-schirm: rgba(0, 0, 0, .55); --mc-schirm-rand: rgba(255, 255, 255, .35);
  --mc-zeile: rgba(0, 0, 0, .5); --mc-slot-rand: rgba(255, 255, 255, .12); --mc-leiste: rgba(0, 0, 0, .6); --mc-leiste-rand: rgba(0, 0, 0, .8);
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, monospace;
}
/* Helle Fassung: heller Grund, dunkle Schrift, dieselben Akzente abgedunkelt -- so weit, dass sie auch auf dem Kachelgrund
   (--kachel, Karten-HUD) noch 4,5:1 halten, nicht nur auf dem Panel. */
:root[data-theme="hell"] {
  color-scheme: light;
  --bg: #e9ecf1;
  --panel: #f7f8fa;
  --feld: #ffffff;
  --hover: #e4e8ee;
  --rand: #c9cfd9;
  --text: #1c2028;
  --dünn: #566070;
  --grün: #17703d;
  --amber: #8f5200;
  --rot: #c41c1c;
  --cyan: #08639a;
  --an-text: #ffffff;
  --wand: #d5d9e0;
  --kachel: #e1e4ea;
  --kachel-rand: #bfc5d0;
  --sicht-rand: #9ccfb2;
  --live-rand: #d8b4b4;
  --zl-bg: #ffffff;
  --sperre: rgba(233, 236, 241, .94);
  --schatten: rgba(20, 24, 32, .2);
  --scan: rgba(0, 0, 0, .025);
  --glas: rgba(247, 248, 250, .88);
  --ecke: rgba(23, 112, 61, .7);
  --karte-text: #1c2028;
  --karte-text2: #2e3542;
  --karte-schatten: #ffffff;
  --er-abbau: #765f33; --er-setzen: #7e6526; --er-behaelter: #8f5200; --er-entnommen: #8f5200; --er-eingelegt: #b87200;
  --er-schaden: #c41c1c; --er-tod: #9e0e0e; --er-kill: #bf3c17; --er-chat: #08639a; --er-befehl: #1878b3;
  --er-aufheben: #566070; --er-ablegen: #444c5a; --er-verbrauch: #7136bf; --er-teleport: #17703d; --er-beitritt: #17703d;
  --er-abmeldung: #27643f; --er-wechsel: #17703d;
  --er-treffer: #b8461c; --er-glocke: #7a5e00; --er-truhe: #7d4e0c; --er-shulker: #6b3d8a; --er-kolben: #566070;
  --marke-andere: rgba(40, 46, 58, .85);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dunkel"]) {
    color-scheme: light;
    --bg: #e9ecf1;
    --panel: #f7f8fa;
    --feld: #ffffff;
    --hover: #e4e8ee;
    --rand: #c9cfd9;
    --text: #1c2028;
    --dünn: #566070;
    --grün: #17703d;
    --amber: #8f5200;
    --rot: #c41c1c;
    --cyan: #08639a;
    --an-text: #ffffff;
    --wand: #d5d9e0;
    --kachel: #e1e4ea;
    --kachel-rand: #bfc5d0;
    --sicht-rand: #9ccfb2;
    --live-rand: #d8b4b4;
    --zl-bg: #ffffff;
    --sperre: rgba(233, 236, 241, .94);
    --schatten: rgba(20, 24, 32, .2);
    --scan: rgba(0, 0, 0, .025);
    --glas: rgba(247, 248, 250, .88);
    --ecke: rgba(23, 112, 61, .7);
    --karte-text: #1c2028;
    --karte-text2: #2e3542;
    --karte-schatten: #ffffff;
    --er-abbau: #765f33; --er-setzen: #7e6526; --er-behaelter: #8f5200; --er-entnommen: #8f5200; --er-eingelegt: #b87200;
    --er-schaden: #c41c1c; --er-tod: #9e0e0e; --er-kill: #bf3c17; --er-chat: #08639a; --er-befehl: #1878b3;
    --er-aufheben: #566070; --er-ablegen: #444c5a; --er-verbrauch: #7136bf; --er-teleport: #17703d; --er-beitritt: #17703d;
    --er-abmeldung: #27643f; --er-wechsel: #17703d;
    --er-treffer: #b8461c; --er-glocke: #7a5e00; --er-truhe: #7d4e0c; --er-shulker: #6b3d8a; --er-kolben: #566070;
    --marke-andere: rgba(40, 46, 58, .85);
  }
}
* { box-sizing: border-box; }
/* Ein eigenes display (flex, block) würde das hidden-Attribut sonst überstimmen -- das
   hat schon einmal die Zutrittssperre unsichtbar-klickblockierend gemacht. */
[hidden] { display: none !important; }
/* Owner-Abschnitte (Vertrag 9): app.js setzt body.owner nach /api/ich; bis dahin und ohne das Recht bleiben sie weg */
body:not(.owner) .nur-owner { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 var(--mono); }
button, input, select { font: inherit; color: inherit; background: var(--feld); border: 1px solid var(--rand); border-radius: 3px; padding: 3px 8px; }
button { cursor: pointer; }
button:hover { border-color: var(--grün); }
button:disabled { cursor: default; opacity: .5; }
button.an { background: var(--grün); color: var(--an-text); border-color: var(--grün); font-weight: 700; }
a { color: var(--cyan); text-decoration: none; }
.dünn { color: var(--dünn); font-weight: 400; }
.zahl { color: var(--amber); }

#sperre { position: fixed; inset: 0; background: var(--sperre); display: flex; align-items: center; justify-content: center; z-index: 50; }
#sperre[hidden], #zeitleiste[hidden] { display: none; }
.sperre-karte { border: 1px solid var(--rand); padding: 28px 36px; background: var(--panel); text-align: center; }
.sperre-titel { color: var(--rot); letter-spacing: .3em; margin-bottom: 12px; }

#kopf { height: 44px; display: flex; align-items: center; gap: 22px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--rand); }
.marke { font-weight: 700; letter-spacing: .25em; display: flex; align-items: center; gap: 8px; }
.marke .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 8px var(--rot); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.modus button, .raster button { min-width: 32px; }
.raster .beschr { color: var(--dünn); margin-right: 4px; }
.uhr { margin-left: auto; color: var(--grün); letter-spacing: .1em; }
.ich a { margin-left: 8px; }
#design { min-width: 34px; padding: 3px 6px; }
#design.system::after { content: "·A"; font-size: 10px; color: var(--dünn); }

#buehne { display: grid; grid-template-columns: 240px 1fr 320px; height: calc(100% - 44px); }
aside { background: var(--panel); overflow: auto; padding: 8px; }
#links { border-right: 1px solid var(--rand); }
#rechts { border-left: 1px solid var(--rand); }
.block { margin-bottom: 14px; }
.block h3 { margin: 4px 0 6px; font-size: 11px; letter-spacing: .2em; color: var(--dünn); text-transform: uppercase; }
.block h4 { margin: 8px 0 4px; font-size: 11px; color: var(--dünn); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 4px 6px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
.liste li:hover { border-color: var(--rand); background: var(--hover); }
.liste li .dünn { font-size: 11px; }
.liste.ereignisse li { cursor: default; display: block; font-size: 12px; border-left: 3px solid var(--rand); border-radius: 0; margin-bottom: 2px; }
.liste.ereignisse li .z { color: var(--dünn); margin-right: 6px; }
.liste.ereignisse li.abbau { border-left-color: var(--er-abbau); }
.liste.ereignisse li.setzen { border-left-color: var(--er-setzen); }
.liste.ereignisse li.behaelter { border-left-color: var(--er-behaelter); }
.liste.ereignisse li.entnommen { border-left-color: var(--er-entnommen); }
.liste.ereignisse li.eingelegt { border-left-color: var(--er-eingelegt); }
.liste.ereignisse li.schaden { border-left-color: var(--er-schaden); }
.liste.ereignisse li.tod { border-left-color: var(--er-tod); }
.liste.ereignisse li.kill { border-left-color: var(--er-kill); }
.liste.ereignisse li.chat { border-left-color: var(--er-chat); }
.liste.ereignisse li.befehl { border-left-color: var(--er-befehl); }
.liste.ereignisse li.aufheben { border-left-color: var(--er-aufheben); }
.liste.ereignisse li.ablegen { border-left-color: var(--er-ablegen); }
.liste.ereignisse li.verbrauch { border-left-color: var(--er-verbrauch); }
.liste.ereignisse li.teleport { border-left-color: var(--er-teleport); }
.liste.ereignisse li.beitritt { border-left-color: var(--er-beitritt); }
.liste.ereignisse li.abmeldung { border-left-color: var(--er-abmeldung); }
.liste.ereignisse li.wechsel { border-left-color: var(--er-wechsel); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chips button { padding: 1px 6px; font-size: 11px; }
#suche { width: 100%; margin-bottom: 6px; }

/* Kontextspalte "Kamera" (S10): Schlüssel/Wert-Zeilen, Radius-Wahl, Durchsicht-Schalter, Kamera-Knöpfe */
.kb-zeilen { margin-bottom: 6px; }
.kb-zeile { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; }
.kb-k { flex: 0 0 72px; color: var(--dünn); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.kb-w { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kb-zeile select { flex: 1; }
.kb-knoepfe { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.kb-knoepfe button.gefahr:hover { border-color: var(--rot); }
.kamera .werkzeuge select { padding: 2px 4px; font-size: 11px; background: var(--glas); }
.kamera .werkzeuge button.durchsicht.an { background: var(--cyan); color: var(--an-text); }
#erFilterTitel { margin-top: 0; }

#monitor { display: flex; flex-direction: column; min-width: 0; background: var(--wand); }
/* Die Sicht (WebGL) liegt als EIN Canvas hinter dem Raster; Sicht-Kacheln sind durchsichtige
   Rasterzellen, jede ein Scissor-Bereich des Canvas. Karten-Kacheln bleiben eigene 2D-Canvases darüber. */
#wandRahmen { position: relative; flex: 1; display: flex; min-height: 0; }
#sichtCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#wand { position: relative; z-index: 1; flex: 1; display: grid; gap: 3px; padding: 3px; min-height: 0; }
#wand.raster-1 { grid-template-columns: 1fr; }
#wand.raster-2 { grid-template-columns: 1fr 1fr; }
#wand.raster-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
#wand.raster-6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
#wand.raster-9 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.kamera { position: relative; background: var(--kachel); border: 1px solid var(--kachel-rand); overflow: hidden; min-height: 0; }
.kamera.gewaehlt { border-color: var(--grün); box-shadow: inset 0 0 0 1px var(--grün); }
.kamera canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: grab; }
.kamera .hud { position: absolute; inset: 0; pointer-events: none; font-size: 12px; text-shadow: 0 0 3px var(--karte-schatten), 0 0 6px var(--karte-schatten); }
.kamera .hud .ol { position: absolute; left: 8px; top: 6px; color: var(--karte-text); }
.kamera .hud .ol .cam { color: var(--amber); font-weight: 700; letter-spacing: .15em; }
.kamera .hud .or { position: absolute; right: 8px; top: 6px; text-align: right; color: var(--grün); }
.kamera .hud .ul { position: absolute; left: 8px; bottom: 6px; color: var(--karte-text2); }
.kamera .hud .ur { position: absolute; right: 8px; bottom: 6px; text-align: right; color: var(--karte-text2); }
/* Sicht- und Live-Kachel: das HUD liegt über Himmel und Blöcken, in beiden Fassungen hell mit dunklem Schatten */
.kamera.sicht .hud, .kamera.live-kamera .hud { text-shadow: 0 0 3px var(--hud-schatten), 0 0 6px var(--hud-schatten); }
.kamera.sicht .hud .ol, .kamera.live-kamera .hud .ol { color: var(--hud-text); }
.kamera.sicht .hud .ul, .kamera.sicht .hud .ur, .kamera.live-kamera .hud .ul, .kamera.live-kamera .hud .ur { color: var(--hud-text2); }
.kamera .hud .rec { color: var(--rot); animation: blink 1.2s infinite; }
.kamera .hud .ecke { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ecke); }
.kamera .hud .ecke.a { left: 3px; top: 3px; border-right: 0; border-bottom: 0; }
.kamera .hud .ecke.b { right: 3px; top: 3px; border-left: 0; border-bottom: 0; }
.kamera .hud .ecke.c { left: 3px; bottom: 3px; border-right: 0; border-top: 0; }
.kamera .hud .ecke.d { right: 3px; bottom: 3px; border-left: 0; border-top: 0; }
.kamera .leer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dünn); letter-spacing: .3em; }
.kamera .werkzeuge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; opacity: 0; transition: opacity .15s; }
.kamera:hover .werkzeuge { opacity: 1; }
.kamera .werkzeuge button { padding: 2px 6px; font-size: 11px; background: var(--glas); }
.kamera .werkzeuge button.an { background: var(--grün); color: var(--an-text); }

/* Sicht-Kacheln: durchsichtig, das WebGL-Bild darunter scheint durch */
.kamera.sicht { background: transparent; border-color: var(--sicht-rand); user-select: none; }
.kamera.sicht.drehbar { cursor: grab; }
.kamera.sicht.zieht { cursor: grabbing; }
/* A-CS1 (W3, Vertrag 11.1): freie Kamera -- Fadenkreuz lädt zum Klick (Pointer Lock) ein, im Lock ist der Zeiger weg und der Rahmen
   sagt, welche Kachel die Tasten bekommt; --akzent gibt es (noch) nicht, darum der Rückfall auf --cyan */
.kamera.sicht.frei { cursor: crosshair; }
.kamera.sicht.gelockt { cursor: none; outline: 1px solid var(--akzent, var(--cyan)); }
.werkzeuge button.frei[hidden] { display: none; }
.kamera.sicht .laden { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--glas); border: 1px solid var(--rand); padding: 10px 14px; z-index: 2; }
.kamera.sicht .laden button.an { background: var(--grün); color: var(--an-text); }
#kmenue { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--rand); padding: 4px; display: flex; flex-direction: column; min-width: 180px; max-width: 420px; box-shadow: 0 4px 16px var(--schatten); }
#kmenue .dünn { padding: 2px 6px 6px; border-bottom: 1px solid var(--rand); margin-bottom: 4px; }
#kmenue button { text-align: left; border-color: transparent; }
#kmenue button:hover { border-color: var(--grün); background: var(--hover); }
#kmenue button:disabled:hover { border-color: transparent; background: transparent; }
#kmenue button.gefahr:hover { border-color: var(--rot); }
/* Beleg-Auswahl (Vertrag 9): Ticket-/Sanktionsliste im selben Menü, mit Filterfeld; Einträge sind Fremdtext */
#kmenue input { margin: 2px 0 4px; }
#kmenue .wahl { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; }
#kmenue .wahl button { white-space: normal; font-size: 12px; }
#kmenue .wahl button .dünn { display: inline; padding: 0; border: 0; margin: 0 0 0 4px; }

/* Spielerblick-HUD (sicht.js baut das DOM): Hotbar unten mittig wie im Spiel, Herzen/Hunger darüber,
   Luft und XP dazwischen; --s = GUI-Skala in px (1..3). Die Gegenstände zeichnet WebGL in die Felder. */
.spielerhud { position: absolute; inset: 0; pointer-events: none; --s: 1px; font-family: var(--mono); text-shadow: 0 0 2px var(--mc-schatten), 1px 1px 0 var(--mc-schatten); }
.spielerhud .sh-schirm { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); padding: calc(3 * var(--s)) calc(8 * var(--s)); background: var(--mc-schirm); border: 1px solid var(--mc-schirm-rand); color: var(--mc-text); font-size: calc(9 * var(--s)); letter-spacing: .2em; }
.spielerhud .sh-zeilen { position: absolute; left: calc(4 * var(--s)); bottom: calc(52 * var(--s)); display: flex; flex-direction: column; gap: calc(2 * var(--s)); max-width: 60%; }
.spielerhud .sh-zeilen > div { background: var(--mc-zeile); color: var(--mc-text); font-size: calc(8 * var(--s)); padding: calc(2 * var(--s)) calc(4 * var(--s)); white-space: pre-wrap; word-break: break-word; }
.spielerhud .sh-tippt { color: var(--mc-tippt); }
.spielerhud .sh-mitte { position: absolute; left: 50%; bottom: calc(2 * var(--s)); transform: translateX(-50%); width: calc(182 * var(--s)); display: flex; flex-direction: column; align-items: stretch; }
.spielerhud .sh-leisten { display: flex; justify-content: space-between; font-size: calc(9 * var(--s)); line-height: 1; margin-bottom: calc(2 * var(--s)); }
.spielerhud .sh-herzen span, .spielerhud .sh-hunger span, .spielerhud .sh-luft span { display: inline-block; width: calc(8 * var(--s)); text-align: center; }
.spielerhud .sh-herz.st-voll { color: var(--mc-herz); }
.spielerhud .sh-herz.st-halb { background: linear-gradient(90deg, var(--mc-herz) 50%, var(--mc-herz-leer) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.spielerhud .sh-herz.st-leer { color: var(--mc-herz-leer); }
.spielerhud .sh-hunger { direction: rtl; }
.spielerhud .sh-keule.st-voll { color: var(--mc-keule); }
.spielerhud .sh-keule.st-halb { color: var(--mc-keule-halb); }
.spielerhud .sh-keule.st-leer { color: var(--mc-keule-leer); }
.spielerhud .sh-luft { text-align: right; font-size: calc(9 * var(--s)); line-height: 1; margin-bottom: calc(2 * var(--s)); }
.spielerhud .sh-blase.st-voll { color: var(--cyan); }
.spielerhud .sh-blase.st-leer { color: transparent; text-shadow: none; }
.spielerhud .sh-xp { position: relative; height: calc(5 * var(--s)); background: var(--mc-leiste); border: 1px solid var(--mc-leiste-rand); margin-bottom: calc(3 * var(--s)); }
.spielerhud .sh-xpfuell { height: 100%; background: var(--mc-xp); width: 0; }
.spielerhud .sh-xpstufe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); color: var(--mc-xp); font-size: calc(9 * var(--s)); font-weight: 700; }
.spielerhud .sh-hotbar { display: grid; grid-template-columns: repeat(9, 1fr); height: calc(22 * var(--s)); background: var(--mc-schirm); border: 1px solid var(--mc-schirm-rand); padding: 1px; gap: 0; }
.spielerhud .sh-slot { position: relative; border: 1px solid var(--mc-slot-rand); }
.spielerhud .sh-slot.gewaehlt { border: calc(2 * var(--s)) solid var(--mc-text); box-shadow: 0 0 0 1px var(--mc-schatten) inset; }
.spielerhud .sh-anzahl { position: absolute; right: 1px; bottom: 0; color: var(--mc-text); font-size: calc(8 * var(--s)); font-weight: 700; }
.kamera.sicht .hud .stat.live { color: var(--rot); animation: blink 1.2s infinite; }
.kamera.sicht .hud .stat.wartet { color: var(--amber); }
.kamera.sicht .hud .stat.fehler { color: var(--rot); }
.kamera.sicht .werkzeuge { z-index: 2; }
.liste li .knopf.auge:hover { border-color: var(--grün); }
/* Aufnahmen (S13): Wiedergabe-Kacheln blinken nicht wie LIVE, sie laufen in Amber; ● REC an aufnehmenden Kameras */
.kamera.sicht .hud .stat.aufnahme { color: var(--amber); animation: none; }
.liste li .rec, .kb-w .rec { color: var(--rot); font-size: 10px; letter-spacing: .1em; animation: blink 1.2s infinite; }
.liste.aufnahmen li.gruppe { margin-top: 4px; font-weight: 700; }
.liste.aufnahmen li.datei { padding-left: 18px; }
.liste.ereignisse li .knopf.sicht { float: right; padding: 0 5px; font-size: 10px; line-height: 1.4; }
.liste.ereignisse li .knopf.sicht:hover { border-color: var(--amber); }
#kbFigurHinweis { margin: 4px 0; font-size: 11px; }
#kameraBlock [data-kb="aufnehmen"].an { background: var(--rot); border-color: var(--rot); color: var(--hud-text); }
/* Clips mit Beleg (Vertrag 9): 🎫 Ticket / ⚖ Sanktion mit Nummer; ⋯ öffnet das Clip-Menü */
.liste li .beleg { color: var(--amber); font-size: 11px; margin-left: 4px; white-space: nowrap; }
.liste li .knopf.menue { padding: 0 4px; }
.liste li .knopf.menue:hover { border-color: var(--grün); }

/* Die Live-Kamera: echtes Bild aus dem Spiel statt Karte */
.kamera.live-kamera { border-color: var(--live-rand); }
.kamera .video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--wand); }
.kamera .video[hidden] { display: none; }
.kamera .signal { background: var(--mc-schirm); color: var(--rot); flex-direction: column; gap: 6px; text-align: center; padding: 20px; }
.kamera .signal small { color: var(--dünn); letter-spacing: 0; }
.kamera .hud .rec { color: var(--rot); animation: blink 1.2s infinite; }
.kamera .hud .aus { color: var(--dünn); animation: none; }
.kameraschalter button.an { background: var(--rot); border-color: var(--rot); color: var(--hud-text); }
.liste li .knopf { padding: 0 5px; font-size: 11px; line-height: 1.4; }
.liste li .knopf:hover { border-color: var(--rot); }

#zeitleiste { border-top: 1px solid var(--rand); background: var(--panel); padding: 6px 8px; }
.zl-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.zl-zeit { color: var(--amber); min-width: 210px; letter-spacing: .05em; }
.zl-bereich { display: flex; align-items: center; gap: 4px; }
.zl-clip { margin-left: auto; display: flex; gap: 4px; }
#zlCanvas { width: 100%; height: 64px; display: block; background: var(--zl-bg); border: 1px solid var(--rand); cursor: ew-resize; }

.inv-raster { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
.inv-raster.klein { grid-template-columns: repeat(5, 1fr); margin-top: 4px; }
.inv-raster .slot { aspect-ratio: 1; background: var(--feld); border: 1px solid var(--rand); font-size: 9px; position: relative; overflow: hidden; padding: 2px; line-height: 1.1; }
.inv-raster .slot .m { position: absolute; right: 2px; bottom: 1px; color: var(--amber); font-weight: 700; }
.inv-raster .slot.leer { opacity: .35; }
.inv-raster .slot[title] { cursor: help; }
.liste.diff li { cursor: default; font-size: 12px; }
.liste.diff .plus { color: var(--grün); }
.liste.diff .minus { color: var(--rot); }

/* Owner-Abschnitte (Vertrag 9): Zugriffsprotokoll als Tabelle, Einstellungen als Formular */
.pt-zeile { display: flex; gap: 4px; margin-bottom: 6px; }
.pt-zeile input { flex: 1; min-width: 0; }
/* Die Spalte ist schmal (240 px): Zeit/Wer/Aktion bleiben einzeilig und kurz, das Ziel darf umbrechen */
.pt-tabelle { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.pt-tabelle col.z { width: 40px; } .pt-tabelle col.w { width: 58px; } .pt-tabelle col.a { width: 54px; }
.pt-tabelle th { text-align: left; color: var(--dünn); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; padding: 2px 3px; border-bottom: 1px solid var(--rand); }
.pt-tabelle td { padding: 2px 3px; border-bottom: 1px solid var(--rand); vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tabelle td.z { color: var(--dünn); }
.pt-tabelle td.a { color: var(--cyan); }
.pt-tabelle td.t { white-space: normal; overflow-wrap: break-word; }
.pt-tabelle tr:hover td { background: var(--hover); }
.pt-tabelle .leer td { color: var(--dünn); white-space: normal; }
/* Einstellungen: Titel links, Feld rechts; reicht die Breite nicht, rutscht das Feld unter den Titel (rechtsbündig) */
.es-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--rand); }
.es-zeile label { flex: 1 1 110px; min-width: 0; }
.es-zeile label small { display: block; color: var(--dünn); font-size: 10px; overflow-wrap: anywhere; }
.es-zeile .es-feld { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.es-zeile input, .es-zeile select { width: 76px; text-align: right; }
.es-zeile input.anders, .es-zeile select.anders { border-color: var(--amber); }
.es-knoepfe { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.es-stand { font-size: 11px; }
.es-stand.ok { color: var(--grün); }
.es-stand.fehler { color: var(--rot); }

#scanlines { pointer-events: none; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; z-index: 40; }
@media (max-width: 1100px) { #buehne { grid-template-columns: 200px 1fr 260px; } }
@media (max-width: 800px) { #buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } aside { max-height: 30vh; } }
/* Toast-Stapel (Vertrag 13.4): ersetzt das eine #hinweis-Element -- höchstens drei übereinander, jeder mit ✕ und
   wahlweise einem Knopf („Kamera dorthin"). Unten mittig wie der alte Hinweis, damit er nicht über der Wand hängt. */
#toasts { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 45; max-width: 70vw; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--feld); border: 1px solid var(--amber); color: var(--text); padding: 8px 10px 8px 14px; box-shadow: 0 4px 16px var(--schatten); }
.toast.ticket { border-color: var(--cyan); }
.toast .t-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast button { padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.toast button.zu { padding: 2px 6px; border-color: transparent; color: var(--dünn); }
.toast button.zu:hover { border-color: var(--rot); color: var(--text); }

/* Warn-Badge (Vertrag 13.3): amber zwischen Kameraschalter und Uhr, nur bei aktiven Warnungen */
#warnBadge { color: var(--amber); border-color: var(--amber); font-weight: 700; padding: 3px 8px; }
#warnBadge:hover { background: var(--amber); color: var(--an-text); }
#kmenue .warnung { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 6px; border-bottom: 1px solid var(--rand); font-size: 12px; }
#kmenue .warnung:last-child { border-bottom: 0; }
#kmenue .warnung .w-server { color: var(--amber); font-weight: 700; letter-spacing: .1em; }
#kmenue .warnung .w-text { flex: 1 1 100%; overflow-wrap: anywhere; }
#kmenue .warnung .w-art, #kmenue .warnung .w-seit { color: var(--dünn); font-size: 11px; }
#kmenue .warnung button { border-color: var(--rand); font-size: 11px; padding: 0 6px; margin-left: auto; }
#kmenue .warnung button:hover { border-color: var(--grün); }
#kmenue .w-leer { padding: 6px; color: var(--dünn); }

/* Ereignissuche (Vertrag 13.2): Formular in der Kontextspalte, Treffer in der Ereignisliste mit Server-Spalte */
.su-auf { padding: 1px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.su-auf.an { background: var(--amber); border-color: var(--amber); }
.su-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.su-form input, .su-form select { width: 100%; min-width: 0; }
.su-form .chips { margin-bottom: 0; }
.su-zeit { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dünn); }
.su-zeit input { flex: 1; font-size: 11px; padding: 2px 4px; }
.su-knoepfe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#suStand { font-size: 11px; }
#suStand.fehler { color: var(--rot); }
.liste.ereignisse li .server { color: var(--cyan); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.liste.ereignisse li.mehr { text-align: center; border-left-color: transparent; }
.liste.ereignisse li.mehr button { font-size: 11px; padding: 1px 10px; }
.liste.ereignisse li.treffer { border-left-color: var(--er-treffer); }
.liste.ereignisse li.glocke { border-left-color: var(--er-glocke); }
.liste.ereignisse li.truhe { border-left-color: var(--er-truhe); }
.liste.ereignisse li.shulker { border-left-color: var(--er-shulker); }
.liste.ereignisse li.kolben { border-left-color: var(--er-kolben); }