.mode-switch{
  display:flex;background:var(--steel);border:1px solid var(--line);border-radius:999px;padding:3px;
}
.mode-switch button{
  appearance:none;border:none;background:transparent;color:var(--muted);
  font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;
  transition:background .15s,color .15s;
}
.mode-switch button.active{background:var(--feuerrot);color:#fff;}
.mode-switch button:focus-visible{outline:2px solid var(--hivis);outline-offset:2px;}

.dash{
  display:flex;align-items:stretch;gap:0;
  background:var(--steel);border:1px solid var(--line);border-radius:var(--radius);
  margin-top:22px;overflow:hidden;flex-wrap:wrap;
}
.dash.hidden{display:none;}
.stat{
  flex:1 1 110px;padding:12px 16px;border-right:1px solid var(--line-soft);min-width:96px;
}
.stat:last-child{border-right:none;}
.stat .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.stat .val{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--paper);margin-top:3px;}
.stat.ok .val{color:var(--ok);}
.stat.warn .val{color:var(--warn);}
.stat.bad .val{color:var(--bad);}
.stat.hidden{display:none;}

.stat.progress{flex:2 1 200px;display:flex;flex-direction:column;justify-content:center;}
.progress-bar{
  height:8px;background:var(--line-soft);border-radius:6px;overflow:hidden;margin-top:8px;
}
.progress-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--feuerrot),var(--amber));
  width:0%;transition:width .3s ease;}

.ampel-cell{
  flex:0 0 64px;display:flex;align-items:center;justify-content:center;gap:0;
}
.ampel{
  width:22px;height:22px;border-radius:50%;background:#222a31;border:2px solid var(--line);
  box-shadow:inset 0 0 6px #000;transition:background .15s, box-shadow .15s;
}
.ampel.gruen{background:var(--ok);box-shadow:0 0 14px 3px var(--ok-glow);}
.ampel.gelb{background:var(--warn);box-shadow:0 0 14px 3px var(--warn-glow);}
.ampel.rot{background:var(--bad);box-shadow:0 0 14px 3px var(--bad-glow);}

.lern-banner{
  margin-top:22px;padding:13px 16px;background:var(--steel);border:1px solid var(--line);
  border-radius:var(--radius);font-size:13.5px;color:var(--muted);display:flex;gap:10px;align-items:center;
}
.lern-banner b{color:var(--hivis);}
.lern-banner.hidden{display:none;}

.viewbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;flex-wrap:wrap;
}
.tabs{display:flex;gap:6px;}
.tabs button{
  appearance:none;border:1px solid var(--line);background:var(--steel);color:var(--muted);
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;
  padding:9px 18px;border-radius:8px 8px 0 0;cursor:pointer;border-bottom:none;
  position:relative;top:1px;transition:color .15s,background .15s;
}
.tabs button.active{color:var(--paper);background:var(--steel-2);border-color:var(--line);}
.tabs button.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--hivis);
}
.tabs button:focus-visible{outline:2px solid var(--hivis);outline-offset:2px;}

.roll-btn{
  appearance:none;border:1px solid var(--line);background:var(--steel);color:var(--paper);
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:border-color .15s;
}
.roll-btn:hover{border-color:var(--amber);}
.roll-btn:focus-visible{outline:2px solid var(--hivis);outline-offset:2px;}
.roll-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2);}
.roll-btn.open .dot{background:var(--amber);box-shadow:0 0 8px 2px var(--amber);}
.roll-btn.hidden{display:none;}

.viewport{
  background:var(--steel-2);border:1px solid var(--line);border-radius:0 var(--radius) var(--radius) var(--radius);
  padding:18px;position:relative;
}
.viewport svg{width:100%;height:auto;display:block;}
.viewport svg.heck-view{max-width:55%;margin:0 auto;}

.room-box{fill:rgba(0,0,0,.06);stroke:rgba(255,255,255,.4);stroke-width:1.4;stroke-dasharray:4 3;}
.room-num{
  font-family:var(--mono);font-size:12px;font-weight:700;fill:var(--hivis);
  paint-order:stroke fill;stroke:rgba(0,0,0,.85);stroke-width:3px;stroke-linejoin:round;
}
.door{cursor:pointer;outline:none;}
.door rect{
  fill:rgba(0,0,0,.15);stroke:rgba(255,255,255,.6);stroke-width:1.6;
  transition:fill .15s, stroke .15s;
}
.door:hover rect, .door:focus-visible rect{fill:rgba(212,225,87,.32);stroke:var(--hivis);stroke-width:2.2;}
.door.shut rect{fill:rgba(0,0,0,.32);}
.door-num{
  font-family:var(--mono);font-weight:700;font-size:13px;fill:var(--paper);
  pointer-events:none;
  paint-order:stroke fill;stroke:rgba(0,0,0,.85);stroke-width:3px;stroke-linejoin:round;
}
.door.shut .door-num{fill:rgba(237,239,242,.55);}
.door-hatch{stroke:rgba(255,255,255,.08);stroke-width:1;pointer-events:none;}

.door.flash-gruen rect{animation:flashGruen .9s ease-out;}
.door.flash-gelb rect{animation:flashGelb .9s ease-out;}
.door.flash-rot rect{animation:flashRot .9s ease-out;}
@keyframes flashGruen{0%{fill:var(--ok);stroke:var(--ok);}100%{fill:rgba(0,0,0,.15);stroke:rgba(255,255,255,.6);}}
@keyframes flashGelb{0%{fill:var(--warn);stroke:var(--warn);}100%{fill:rgba(0,0,0,.15);stroke:rgba(255,255,255,.6);}}
@keyframes flashRot{0%{fill:var(--bad);stroke:var(--bad);}100%{fill:rgba(0,0,0,.15);stroke:rgba(255,255,255,.6);}}

.tip{
  position:absolute;max-width:260px;background:#0C0F12;border:1px solid var(--hivis);
  border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.45;color:var(--paper);
  box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;z-index:30;opacity:0;
  transition:opacity .12s;
}
.tip.show{opacity:1;}
.tip .tip-head{font-family:var(--mono);font-size:10.5px;color:var(--hivis);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:4px;}
.tip ul{margin:0;padding-left:16px;}
.tip li{margin:1px 0;}

.question{
  margin-top:22px;background:linear-gradient(180deg,var(--steel),var(--steel-2));
  border:1px solid var(--line);border-left:4px solid var(--feuerrot);border-radius:var(--radius);
  padding:22px 24px;
}
.question .eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.question .text{
  font-family:var(--display);font-weight:700;font-size:clamp(20px,3.4vw,30px);margin-top:6px;color:var(--paper);
  min-height:1.3em;
}
.question .text .hl{color:var(--hivis);}

.lb-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px;}
.lb-table th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  padding:6px 8px;border-bottom:1px solid var(--line);
}
.lb-table td{padding:7px 8px;border-bottom:1px solid var(--line-soft);color:var(--paper);}
.lb-table td.mono{font-family:var(--mono);}
.lb-table tr.lb-me{background:rgba(215,38,61,.14);}
.lb-empty{font-size:13px;color:var(--muted);margin:14px 0;}

.field-row{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap;}
.text-input{
  flex:1 1 160px;background:var(--steel-2);border:1px solid var(--line);border-radius:8px;
  color:var(--paper);font-size:14px;padding:10px 12px;font-family:inherit;
}
.text-input:focus-visible{outline:2px solid var(--hivis);outline-offset:1px;}

.modal .legend{display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.legend-row{display:flex;align-items:center;gap:10px;font-size:13.5px;}
.legend-row .ampel{flex:none;}
.modal .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0;}
.modal .stat-grid .box{background:var(--steel-2);border:1px solid var(--line);border-radius:8px;padding:12px;}
.modal .stat-grid .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.modal .stat-grid .val{font-family:var(--mono);font-weight:700;font-size:21px;margin-top:3px;}

@media (max-width:640px){
  .brand .mark{font-size:24px;}
  .stat{flex:1 1 45%;}
  .stat.progress{flex:1 1 100%;}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}