/* Fenster 3D – Vollbild-Szene, Bedienleiste schwebt unten links */
:root{
  --ink:#0d1320; --panel:rgba(16,23,38,.86); --line:#2a3550;
  --fg:#e9edf5; --muted:#8e9ab3; --accent:#ffb347; --ok:#5fd39a; --warn:#ff7a6b;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
html,body{margin:0;height:100%;background:var(--ink);color:var(--fg);overflow:hidden;font:14px/1.45 var(--display)}
/* Breite/Höhe explizit: ohne sie hätte das Canvas sein intrinsisches 300×150-Maß und getBoundingClientRect() liefe ins Leere */
canvas#scene{position:fixed;inset:0;display:block;width:100%;height:100%}
.hud{position:fixed;left:16px;bottom:16px;width:min(340px,calc(100vw - 32px));background:var(--panel);
     border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px;backdrop-filter:blur(8px)}
.hud h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.hud p{margin:0;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button{font:500 14px var(--display);background:var(--accent);color:#1a1206;border:0;border-radius:7px;padding:8px 14px;cursor:pointer}
button.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.status{font:12px var(--mono);color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.busy{background:var(--accent)}
label{font:12px var(--mono);color:var(--muted);display:grid;gap:4px}
input[type=range]{width:100%;accent-color:var(--accent)}
select{font:500 14px var(--display);background:var(--ink);color:var(--fg);border:1px solid var(--line);
       border-radius:7px;padding:7px 10px;width:100%;cursor:pointer}
select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.cam{position:fixed;right:16px;bottom:16px;width:180px;border-radius:8px;border:1px solid var(--line);background:#000}
.cam canvas{display:block;width:100%;border-radius:8px}
.hide{display:none!important}
.readout{font:11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:520px){.cam{width:120px;top:16px;bottom:auto}}

/* Fußzeile im HUD: Impressum & Datenschutz, dezent */
.hud .fuss{font:11px var(--mono);color:var(--muted)}
.hud .fuss a{color:var(--muted);text-decoration:none}
.hud .fuss a:hover,.hud .fuss a:focus-visible{color:var(--fg);text-decoration:underline}

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
html.textseite,html.textseite body{height:auto;min-height:100%;overflow:auto}
.text{max-width:680px;margin:0 auto;padding:32px 16px 48px;font-size:15px;line-height:1.6}
.text .zurueck{font:12px var(--mono);color:var(--muted);text-decoration:none}
.text .zurueck:hover,.text .zurueck:focus-visible{color:var(--accent)}
.text h1{font-size:28px;font-weight:700;letter-spacing:-.01em;margin:16px 0 8px}
.text h2{font-size:17px;font-weight:700;margin:28px 0 6px}
.text p,.text li{color:#c9d1e2}
.text p{margin:0 0 12px}
.text ul{margin:0 0 12px;padding-left:20px}
.text a{color:var(--accent)}
.text a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.text code{font:13px var(--mono);color:var(--fg)}
.text .sub{color:var(--muted)}
.text .klein{font:12px var(--mono);color:var(--muted);margin-top:32px}
.text footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font:12px var(--mono);color:var(--muted)}
.text footer a{color:var(--muted)}