:root {
  --bg: #0b0d16;
  --panel: #131727;
  --panel2: #1a1f33;
  --rand: #2a3150;
  --text: #e8e6df;
  --dim: #9aa0b4;
  --akzent: #f2b544;
  --akzent2: #4fd1c5;
  --gefahr: #e05252;
  --ok: #5fc06a;
  --leiste-h: 190px;
  --werkzeug-h: 84px;
  --kopf-h: 42px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; overflow: hidden;
  -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#kopf { height: var(--kopf-h); display: flex; align-items: center; gap: 12px; padding: 0 10px;
  background: var(--panel); border-bottom: 1px solid var(--rand); flex: none; }
#kopf.aus { display: none; }
.kopf-level { font-weight: 600; letter-spacing: .02em; }
.kopf-zeit { font-variant-numeric: tabular-nums; color: var(--dim); min-width: 48px; }
.kopf-alarm { padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.kopf-alarm.alarm0 { background: #1f3a2a; color: var(--ok); }
.kopf-alarm.alarm1 { background: #3d3a1f; color: var(--akzent); }
.kopf-alarm.alarm2 { background: #4a2e1a; color: #f08a3c; }
.kopf-alarm.alarm3 { background: #4a1a1a; color: var(--gefahr); animation: puls .8s infinite alternate; }
@keyframes puls { from { opacity: .7; } to { opacity: 1; } }
.kopf-strom { font-size: 13px; color: var(--akzent2); }
.kopf-strom.aus { display: none; }
.kopf-polizei { font-size: 13px; color: var(--gefahr); font-weight: 600; }
.kopf-polizei.aus { display: none; }
.zuschauer-info { margin-left: auto; color: var(--dim); font-size: 13px; }
.zuschauer-info.aus { display: none; }

#buehne { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #07080f; }
#karte { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

.crewleiste { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 60%; }
.crewleiste.aus { display: none; }
.crewleiste button { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 18px;
  border: 2px solid var(--rand); background: rgba(19,23,39,.9); color: var(--text); cursor: pointer; }
.crewleiste button.aktiv { border-color: var(--akzent); background: rgba(242,181,68,.15); }
.crewleiste .punkt { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.crewleiste .rolle { color: var(--dim); font-size: 12px; }

.meldung { position: absolute; right: 8px; top: 8px; max-width: 46%; display: flex; flex-direction: column; gap: 4px;
  pointer-events: none; }
.meldung div { background: rgba(19,23,39,.92); border-left: 3px solid var(--akzent2); padding: 4px 10px;
  font-size: 13px; border-radius: 4px; animation: rein .25s ease-out; }
.meldung div.warn { border-left-color: var(--gefahr); }
.meldung div.gut { border-left-color: var(--ok); }
@keyframes rein { from { transform: translateX(20px); opacity: 0; } }

.hinweis { background: rgba(242,181,68,.08); border: 1px solid var(--akzent); border-radius: 8px; padding: 6px 10px;
  display: flex; gap: 12px; align-items: center; }
.hinweis.aus { display: none; }
.hinweis p { margin: 0; flex: 1; font-size: 14px; }

.werkzeug { flex: none; background: var(--panel); border-top: 1px solid var(--rand); padding: 6px 8px;
  display: flex; flex-direction: column; gap: 6px; }
.werkzeug.aus { display: none; }
.werkzeug-zeile { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.trenner { width: 1px; height: 24px; background: var(--rand); margin: 0 4px; }
.signalwahl { background: var(--panel2); color: var(--text); border: 1px solid var(--rand); border-radius: 6px; padding: 5px 6px; }
.aktionen { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; min-height: 30px; }
.aktionen .aktion { flex: none; padding: 3px 9px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--rand);
  font-size: 13px; cursor: pointer; white-space: nowrap; }
.aktionen .aktion.aktiv { border-color: var(--akzent); color: var(--akzent); }
.aktionen .aktion.kaputt { border-color: var(--gefahr); color: var(--gefahr); }
.aktionen .leer { color: var(--dim); font-size: 13px; padding: 4px; }

.leiste { flex: none; height: var(--leiste-h); background: var(--panel); border-top: 1px solid var(--rand); position: relative; }
.leiste.aus { display: none; }
#zeitleiste { width: 100%; height: 100%; display: block; touch-action: none; }
.laufsteuerung { position: absolute; left: 8px; bottom: 6px; display: flex; gap: 6px; align-items: center; }
.laufsteuerung.aus { display: none; }
.lauf-info { color: var(--dim); font-size: 13px; }

/* Schirme */
.schirm { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow: auto;
  background: rgba(7,8,15,.82); z-index: 10; padding: 16px; }
.schirm.aus { display: none; }
.mitte { margin: auto; max-width: 560px; width: 100%; text-align: center; }
.mitte.breit { max-width: 900px; text-align: left; }
h1 { font-size: clamp(40px, 9vw, 72px); margin: .2em 0 .1em; letter-spacing: .08em; color: var(--akzent);
  text-shadow: 0 0 30px rgba(242,181,68,.35); }
h2 { font-size: 28px; margin: .3em 0; }
h3 { font-size: 16px; color: var(--dim); margin: 1em 0 .4em; text-transform: uppercase; letter-spacing: .06em; }
.unter { color: var(--dim); }
.wer { margin: 8px 0 18px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.mitte.breit .knopfreihe { justify-content: flex-start; }
.btn { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rand); background: var(--panel2);
  color: var(--text); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--akzent); }
.btn.big { font-size: 18px; padding: 12px 24px; }
.btn.klein { padding: 4px 10px; font-size: 13px; }
.btn.primaer { background: var(--akzent); color: #1a1200; border-color: var(--akzent); font-weight: 600; }
.btn.gefahr { border-color: var(--gefahr); color: var(--gefahr); }
.btn.portal { border-style: dashed; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.aus { display: none; }
.sprachwahl { display: inline-flex; gap: 2px; margin-top: 12px; }
.sprachwahl button { padding: 4px 10px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit;
  font: inherit; cursor: pointer; opacity: .55; }
.sprachwahl button.aktiv { opacity: 1; border-color: currentColor; cursor: default; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 10px 0; }
.kachel { background: var(--panel2); border: 1px solid var(--rand); border-radius: 10px; padding: 12px; cursor: pointer;
  text-align: left; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.kachel:hover { border-color: var(--akzent); }
.kachel.gesperrt { opacity: .45; cursor: default; }
.kachel.gewaehlt { border-color: var(--akzent2); box-shadow: 0 0 0 1px var(--akzent2) inset; }
.kachel .titel { font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
.kachel .nr { color: var(--akzent); font-size: 13px; }
.kachel .info { color: var(--dim); font-size: 13px; }
.kachel .text { font-size: 13px; }
.kachel .marke { font-size: 12px; color: var(--ok); }
.kachel .marke.ghost { color: var(--akzent2); }
.kachel .kopfzeile { display: flex; align-items: center; gap: 8px; }
.kachel .punkt { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

.text p { margin: .5em 0; }
.text code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; }
.listen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.liste { padding-left: 1.4em; margin: 0; }
.liste li { padding: 3px 0; }
.liste .wert { color: var(--dim); font-variant-numeric: tabular-nums; }
.liste .ghost { color: var(--akzent2); font-size: 12px; }
.liste h4 { margin: .8em 0 .2em; font-size: 14px; color: var(--akzent); }
.liste ol { padding-left: 1.4em; margin: 0; }
.tabelle { margin: 12px auto; border-collapse: collapse; min-width: 260px; }
.tabelle td { padding: 4px 12px; text-align: left; border-bottom: 1px solid var(--rand); }
.tabelle td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle tr.summe td { font-weight: 700; color: var(--akzent); border-bottom: none; }
.rekord { color: var(--akzent2); font-weight: 700; }
.rekord.aus { display: none; }
#ergebnis h2.erfolg { color: var(--ok); }
#ergebnis h2.gescheitert { color: var(--gefahr); }
#ergebnis h2.ghost { color: var(--akzent2); }

@media (max-width: 720px) {
  :root { --leiste-h: 150px; }
  .listen { grid-template-columns: 1fr; }
  .werkzeug-zeile { gap: 4px; }
  .werkzeug .btn { padding: 6px 9px; font-size: 13px; }
  .crewleiste { max-width: 70%; }
  .meldung { max-width: 55%; }
  .kopf-level { font-size: 13px; }
}

.legende-knopf { margin-left: auto; }
.tooltip { position: absolute; pointer-events: none; background: rgba(19,23,39,.96); border: 1px solid var(--akzent);
  border-radius: 6px; padding: 5px 9px; font-size: 13px; max-width: 280px; z-index: 5; white-space: pre-line; }
.tooltip.aus { display: none; }
.legende-liste { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.legende-liste li { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--rand); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.legende-liste canvas { flex: none; width: 40px; height: 40px; }
.kachel.erk { flex-direction: row; align-items: center; justify-content: space-between; }
.kachel.erk .preis { color: var(--akzent); font-variant-numeric: tabular-nums; }
.kopf-nebel { border-color: var(--akzent); color: var(--akzent); border-style: dashed; }
.kopf-nebel.aus { display: none; }
.konfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
.tag-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: var(--panel2); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.tag-name { font-size: 20px; font-weight: 700; color: var(--akzent); }
.tag-uhr { text-align: right; color: var(--dim); font-size: 13px; }
.tag-uhr b { color: var(--text); font-variant-numeric: tabular-nums; font-size: 18px; display: block; }
.info { color: var(--dim); font-size: 13px; }