/* DigitalKaJe – Oberfläche */
:root {
  --bg: #0a0e13;
  --bg-2: #0e131a;
  --surface: #121922;
  --surface-2: #17202b;
  --surface-3: #1d2834;
  --border: #222d3a;
  --border-strong: #2e3b4b;
  --text: #e8edf3;
  --text-2: #b4c0ce;
  --muted: #7d8b9c;
  --accent: #4c8dff;
  --accent-2: #2f6fe0;
  --accent-soft: rgba(76, 141, 255, .14);
  --ok: #2ecc8a;
  --ok-soft: rgba(46, 204, 138, .14);
  --warn: #f2b23a;
  --warn-soft: rgba(242, 178, 58, .14);
  --danger: #f05252;
  --danger-soft: rgba(240, 82, 82, .14);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 12px; }

/* --- Formulare und Buttons --- */
label.field { display: block; }
label.field > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); padding: 0; }
input[type=range] { padding: 0; accent-color: var(--accent); background: none; border: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font: 500 13.5px var(--font); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-2); }
.btn.danger { background: var(--danger-soft); border-color: rgba(240,82,82,.35); color: #ff9c9c; }
.btn.danger:hover { background: rgba(240,82,82,.22); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.icon { width: 36px; padding: 0; }
.btn.sm.icon { width: 30px; }
.btn.block { width: 100%; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--text-2); }
.check input { margin-top: 2px; }

/* --- Schalter --- */
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 22px; cursor: pointer; transition: .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: .2s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); background: #fff; }

/* --- Anmeldung --- */
.auth-wrap { min-height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero {
  position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(1200px 600px at -10% -20%, rgba(76,141,255,.22), transparent 60%),
              radial-gradient(800px 500px at 110% 120%, rgba(46,204,138,.12), transparent 60%), var(--bg-2);
  border-right: 1px solid var(--border);
}
.auth-hero .grid-bg { position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%); }
.auth-hero > * { position: relative; }
.auth-hero h1 { font-size: 38px; line-height: 1.15; max-width: 460px; letter-spacing: -.02em; }
.auth-hero p { color: var(--text-2); max-width: 440px; font-size: 15px; }
.auth-feats { display: grid; gap: 14px; max-width: 420px; }
.auth-feats div { display: flex; gap: 12px; align-items: center; color: var(--text-2); }
.auth-feats svg { color: var(--accent); }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 32px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { font-size: 22px; margin-bottom: 4px; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin: 22px 0; }
.tabs button { flex: 1; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 500 13px var(--font); cursor: pointer; }
.tabs button.on { background: var(--surface-3); color: var(--text); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #6c5cff); color: #fff; box-shadow: 0 4px 14px rgba(76,141,255,.35); }
.brand-mark svg { width: 17px; height: 17px; stroke-width: 2.2; }
.legal-links { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.legal-links a { color: var(--muted); }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }

/* --- App-Gerüst --- */
.shell { display: grid; grid-template-columns: 248px 1fr; height: 100%; }
.side { background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; gap: 6px; overflow-y: auto; }
.side .brand { padding: 4px 8px 14px; }
.side-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 10px 6px; font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-weight: 500; text-decoration: none; }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.on { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.nav a .badge { margin-left: auto; }
.base-switch { margin: 4px 0 6px; }
.base-switch select { background: var(--surface); font-weight: 500; }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-weight: 600; font-size: 12.5px; color: var(--text-2); flex: none; }
.main { overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 18px 28px; border-bottom: 1px solid var(--border); background: rgba(10,14,19,.8); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; min-height: 72px; }
.topbar .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.content { padding: 24px 28px 40px; }
.content.full { padding: 0; flex: 1; display: flex; min-height: 0; }
.admin-banner { display: flex; gap: 10px; align-items: center; padding: 9px 28px; background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid rgba(242,178,58,.25); font-size: 13px; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .side { display: none; } .content { padding: 18px 16px; } .topbar { padding: 14px 16px; } }

/* --- Karten, Kennzahlen, Tabellen --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-b { padding: 18px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g-main { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.kpi { padding: 16px 18px; }
.kpi .lbl { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.kpi .val { font-size: 28px; font-weight: 600; margin-top: 6px; letter-spacing: -.02em; }
.kpi .hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.danger .val { color: var(--danger); }
.kpi.warn .val { color: var(--warn); }
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.t td { padding: 12px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tr.click { cursor: pointer; }
.t tr.click:hover td { background: var(--surface-2); }
.table-wrap { overflow-x: auto; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); animation: pulse 1.2s infinite; }
.dot.warn { background: var(--warn); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(240,82,82,0); } }
.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty > svg { width: 34px; height: 34px; color: var(--border-strong); margin-bottom: 8px; }

/* --- Ereignisliste --- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.feed li:last-child { border-bottom: 0; }
.feed .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.feed .ic svg { width: 15px; height: 15px; }
.feed .ic.danger { background: var(--danger-soft); color: var(--danger); }
.feed .ic.ok { background: var(--ok-soft); color: var(--ok); }
.feed .ic.warn { background: var(--warn-soft); color: var(--warn); }
.feed .ic.accent { background: var(--accent-soft); color: var(--accent); }
.feed .msg { font-weight: 500; }
.feed .meta { color: var(--muted); font-size: 12px; }

/* --- Status-Karte / Modus --- */
.status-hero { padding: 22px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.shield { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; flex: none; }
.shield svg { width: 30px; height: 30px; stroke-width: 1.8; }
.shield.disarmed { background: var(--surface-3); color: var(--text-2); }
.shield.armed { background: var(--ok-soft); color: var(--ok); }
.shield.alarm { background: var(--danger-soft); color: var(--danger); animation: alarmglow 1s infinite; }
@keyframes alarmglow { 50% { box-shadow: 0 0 0 10px rgba(240,82,82,.08); } }
.status-hero .state { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { height: 36px; padding: 0 16px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: 500 13.5px var(--font); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.seg button:hover { color: var(--text); background: var(--surface-2); }
.seg button.on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.25); }
.seg button.on.armed { background: var(--ok-soft); color: var(--ok); }
.alarm-strip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(90deg, rgba(240,82,82,.22), rgba(240,82,82,.08)); border: 1px solid rgba(240,82,82,.4); border-radius: var(--radius); color: #ffb4b4; font-weight: 600; margin-bottom: 16px; }

/* --- Grundriss --- */
.plan-wrap { position: relative; background: var(--bg-2); border-radius: var(--radius); overflow: hidden; }
.plan-svg { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; }
.plan-svg .floor-base { fill: #121922; pointer-events: none; }
.plan-svg .room { stroke: none; cursor: pointer; transition: fill-opacity .25s; }
.plan-svg .room.occ { fill-opacity: .24; }
.plan-svg .floor-tex { pointer-events: none; }
.plan-svg .walls polygon { fill: none; stroke: #d3dce7; stroke-linejoin: miter; pointer-events: none; }
.plan-svg .walls.inner polygon { stroke: #c3cddb; }
.plan-svg .room-sel { fill: none; stroke: var(--accent); pointer-events: none; }
.plan-svg .room-label { fill: var(--text); font-weight: 650; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(10,14,19,.55); stroke-width: .06px; }
.plan-svg .room-sub { fill: var(--muted); text-anchor: middle; pointer-events: none; }
.plan-svg .vtx { fill: var(--bg); stroke: var(--accent); stroke-width: .06; cursor: grab; }
.plan-svg .vtx:hover { fill: var(--accent); }
.plan-svg .mid { fill: var(--accent); opacity: .45; cursor: copy; }
.plan-svg .mid:hover { opacity: 1; }
/* Türen und Fenster */
.plan-svg .opening .hit { fill: transparent; pointer-events: all; cursor: pointer; }
.plan-svg .opening .jamb { stroke: #d3dce7; stroke-linecap: square; }
.plan-svg .opening .swing { fill: rgba(200,212,226,.06); stroke: rgba(200,212,226,.35); stroke-dasharray: .06 .05; pointer-events: none; transition: fill .3s; }
.plan-svg .opening .leaf { transform-box: view-box; transition: transform .7s cubic-bezier(.3,1.3,.5,1); pointer-events: none; }
.plan-svg .opening .leaf line { stroke: #e6edf5; stroke-linecap: round; }
.plan-svg .opening.closed .leaf { transform: rotate(var(--closed)); }
.plan-svg .opening.closed .swing { fill: transparent; stroke: rgba(200,212,226,.18); }
.plan-svg .opening.open .leaf line { stroke: var(--warn); }
.plan-svg .opening.open .swing { fill: rgba(242,178,58,.16); stroke: rgba(242,178,58,.6); }
.plan-svg .opening .glass { fill: rgba(120,190,255,.28); stroke: #9fd0ff; pointer-events: none; transition: fill .3s; }
.plan-svg .opening .pane { stroke: #cfe6ff; pointer-events: none; }
.plan-svg .opening.open .glass { fill: rgba(242,178,58,.45); stroke: var(--warn); }
.plan-svg .opening .slider { transition: transform .7s ease; pointer-events: none; }
.plan-svg .opening.open .slider { transform: translate(var(--sx), var(--sy)); }
.plan-svg .opening .arrow { fill: none; stroke: rgba(200,212,226,.45); pointer-events: none; }
.plan-svg .opening .gate { stroke: #c3cddb; pointer-events: none; }
.plan-svg .opening.open .gate { stroke: var(--warn); }
.plan-svg .opening.sel .jamb, .plan-svg .opening.sel .leaf line, .plan-svg .opening.sel .gate { stroke: var(--accent); }
.plan-svg .opening.sel .glass { stroke: var(--accent); }
.plan-svg .ohandle { fill: var(--bg); stroke: var(--accent); stroke-width: .05; cursor: ew-resize; }
.plan-svg .ghost-open { stroke: var(--accent); stroke-linecap: butt; opacity: .7; pointer-events: none; }
/* Ausblend-Bereiche */
.plan-svg .fzone polygon { stroke: var(--warn); cursor: pointer; }
.plan-svg .fzone.sel polygon { stroke: var(--accent); }
.plan-svg .fzone text { fill: var(--warn); font-weight: 600; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(10,14,19,.8); stroke-width: .05px; }
/* Geräte */
.plan-svg .dev { cursor: pointer; }
.plan-svg .dev circle.bg { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: .04; }
.plan-svg .dev.sel circle.bg { stroke: var(--accent); stroke-width: .07; }
.plan-svg .dev.calibrated circle.bg { stroke: rgba(46,204,138,.7); }
.plan-svg .dev.trig circle.bg { fill: #3b1a1d; stroke: var(--danger); }
.plan-svg .rbadge { opacity: 0; transition: opacity .3s; pointer-events: none; }
.plan-svg .rbadge.show { opacity: 1; }
.plan-svg .rbadge rect { fill: var(--ok); }
.plan-svg .rbadge text { fill: #06281a; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.plan-svg .fov { stroke: rgba(76,141,255,.28); stroke-width: .02; pointer-events: none; opacity: .75; transition: opacity .2s; }
.plan-svg .fov.sel { opacity: 1; stroke: rgba(76,141,255,.7); }
.plan-svg .person { transition: transform .5s linear; }
.plan-svg .fov.ceiling { stroke: rgba(123,92,255,.35); stroke-dasharray: .15 .1; }
.plan-svg .pring .ring { fill: rgba(46,230,166,.08); stroke: var(--ok); transition: r .6s ease; animation: pring 2.4s ease-in-out infinite; }
.plan-svg .pring .core { fill: var(--ok); opacity: .7; }
.plan-svg .pring .rlabel { fill: #b7f5df; font-weight: 600; paint-order: stroke; stroke: rgba(7,11,20,.8); stroke-width: .06px; }
@keyframes pring { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.plan-svg .person .core { fill: var(--ok); }
.plan-svg .person .dot { fill: #eafff6; }
.plan-svg .person .halo { fill: var(--ok); opacity: .25; animation: halo 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
.plan-svg .draft { fill: rgba(76,141,255,.12); stroke: var(--accent); stroke-width: .06; stroke-dasharray: .2 .12; }
.plan-svg .draft.zone { fill: rgba(242,178,58,.14); stroke: var(--warn); }
.plan-svg .draft.bad { fill: rgba(255,59,107,.12); stroke: var(--danger); }
/* Anbauen und Einrasten: Außenwand hervorheben, Fangpunkt, Fluchtlinie */
.plan-svg .wall-hl { stroke: #ffd166; stroke-linecap: round; opacity: .9; pointer-events: none; }
.plan-svg .snap-ring { fill: none; stroke: #ffd166; pointer-events: none; }
.plan-svg .snap-wall { stroke: #ffd166; stroke-linecap: round; opacity: .55; pointer-events: none; }
.plan-svg .snap-guide { stroke: #ffd166; opacity: .8; pointer-events: none; }
.plan-svg .edge-hit { stroke: transparent; pointer-events: stroke; cursor: move; }
.plan-svg .edge-hit:hover { stroke: rgba(34,211,238,.22); }
.plan-svg .dim.edit { cursor: text; text-decoration: underline dotted; }
.plan-svg .dim.edit:hover { fill: #ffd166; }
.plan-svg .dim { fill: var(--accent); font-weight: 600; }
/* Kalibrier-Punkte */
.plan-svg .pin { cursor: grab; }
.plan-svg .pin .ring { fill: rgba(76,141,255,.15); stroke: var(--accent); }
.plan-svg .pin .cdot { fill: var(--accent); }
.plan-svg .pin text { fill: var(--text); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(10,14,19,.85); stroke-width: .06px; }
.plan-svg .pin.done .ring { fill: rgba(46,204,138,.2); stroke: var(--ok); }
.plan-svg .pin.done .cdot { fill: var(--ok); }
.plan-svg .pin.cur .ring { fill: rgba(76,141,255,.3); }
.plan-svg .pin .pulse { fill: none; stroke: var(--accent); stroke-width: .04; animation: halo 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.plan-svg .calib-ghost { fill: rgba(242,178,58,.35); stroke: var(--warn); stroke-width: .03; pointer-events: none; }
/* Kompass */
.plan-compass { position: absolute; right: 12px; top: 12px; width: 52px; height: 52px; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: rgba(14,19,26,.85); backdrop-filter: blur(6px); cursor: default; box-shadow: var(--shadow); }
.plan-compass.editable { cursor: pointer; }
.plan-compass.editable:hover { border-color: var(--accent); }
.plan-compass svg { width: 100%; height: 100%; display: block; }
.plan-compass .ring { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.plan-compass .rose { transition: transform .4s; }
.plan-compass .n { fill: var(--danger); }
.plan-compass .s { fill: #c3cddb; }
.plan-compass .lbl { fill: var(--text); font: 700 7px var(--font); text-anchor: middle; }
.plan-hud { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 8px; align-items: center; }
.plan-hud .chip { background: rgba(14,19,26,.9); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--text-2); }
.plan-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.plan-legend { position: absolute; left: 14px; top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Editor */
.editor { display: grid; grid-template-columns: 1fr 320px; flex: 1; min-height: 0; }
.editor-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.editor-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); flex-wrap: wrap; }
.floor-tabs { display: flex; gap: 4px; }
.floor-tabs button { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); font: 500 13px var(--font); cursor: pointer; }
.floor-tabs button.on { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.tools { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.tools button { height: 30px; min-width: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font: 500 12.5px var(--font); }
.tools button:hover { background: var(--surface-2); color: var(--text); }
.tools button.on { background: var(--accent-soft); color: var(--accent); }
.tools kbd { font: 10px var(--mono); color: var(--text-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }   /* --muted war bei 10px zu kontrastarm (WCAG 4,5:1) */
.editor-canvas { position: relative; flex: 1; min-height: 0; }
.editor-canvas .plan-wrap { position: absolute; inset: 0; border-radius: 0; }
.first-floor { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 5; }
.first-floor-card { width: min(420px, 100%); padding: 20px; display: grid; gap: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.first-floor-card h3 { margin: 0; font-size: 17px; }
.chip-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.sheet { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); }
.sheet-bar { display: none; }
.inspector { background: var(--bg-2); overflow-y: auto; flex: 1; min-height: 0; }
.insp-sec { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.insp-sec h3 { margin-bottom: 12px; }
.insp-sec .stack > * + * { margin-top: 12px; }
.palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.palette button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 500 11.5px var(--font); cursor: pointer; }
.palette button:hover { border-color: var(--border-strong); color: var(--text); }
.palette button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tray { display: flex; flex-direction: column; gap: 6px; }
.tray button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--border-strong); background: none; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; text-align: left; }
.tray button:hover, .tray button.on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.room-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: 500 13px var(--font); cursor: pointer; text-align: left; }
.room-list button:hover { background: var(--surface); color: var(--text); }
.swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; }
@media (max-width: 1100px) and (min-width: 901px) { .editor { grid-template-columns: 1fr; } .sheet { border-left: 0; border-top: 1px solid var(--border); max-height: 45vh; } }

/* --- Modal, Toast --- */
.modal-bg { position: fixed; inset: 0; background: rgba(4,7,10,.65); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .15s; }
.modal { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow); animation: pop .18s ease-out; max-height: 90vh; overflow-y: auto; }
.modal.wide { max-width: 720px; }
.modal-h { padding: 18px 22px 0; display: flex; align-items: center; gap: 10px; }
.modal-b { padding: 16px 22px; }
.modal-f { padding: 14px 22px 18px; display: flex; gap: 10px; justify-content: flex-end; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-weight: 500; animation: pop .2s; max-width: 380px; }
.toast.ok svg { color: var(--ok); }
.toast.err svg { color: var(--danger); }
.secret { font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; word-break: break-all; }
.note { padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: #b9d0ff; font-size: 13px; display: flex; gap: 10px; }
.note.warn { background: var(--warn-soft); color: #f7cf85; }
.note.danger { background: var(--danger-soft); color: #ffb0b0; }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; height: 16px; }
.search input { padding-left: 34px; }
.drawer-bg { position: fixed; inset: 0; background: rgba(4,7,10,.5); z-index: 40; animation: fade .15s; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(520px, 100%); background: var(--surface); border-left: 1px solid var(--border-strong); z-index: 41; overflow-y: auto; box-shadow: var(--shadow); animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

/* --- Rechtstexte --- */
.legal { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; color: var(--text-2); }
.legal h1 { color: var(--text); font-size: 30px; margin: 18px 0 6px; }
.legal h2 { color: var(--text); font-size: 18px; margin: 34px 0 10px; }
.legal h3 { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); margin: 20px 0 6px; }
.legal p, .legal li { line-height: 1.7; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.legal td, .legal th { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--surface); color: var(--text); }
@media (max-width: 720px) { .legal table { display: block; overflow-x: auto; } }   /* breite Tabellen scrollen seitlich statt abgeschnitten zu werden */
.legal .ph { background: var(--warn-soft); color: var(--warn); padding: 1px 6px; border-radius: 4px; }

/* --- Anlagen-Kacheln (Leitstelle) --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, background .15s; }
.tile:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }
.tile-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.tile-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-state { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tile.armed .tile-ic { background: var(--ok-soft); color: var(--ok); }
.tile.armed .tile-state { color: var(--ok); }
.tile.alarm { border-color: rgba(240,82,82,.5); background: linear-gradient(90deg, rgba(240,82,82,.14), transparent 70%); }
.tile.alarm .tile-ic { background: var(--danger); color: #fff; animation: alarmglow 1s infinite; }
.tile.alarm .tile-state { color: var(--danger); }
.tile.idle .tile-ic { background: var(--accent-soft); color: var(--accent); }
.tile.off { opacity: .65; }

/* Grundriss-Editor: Türen, Fenster, Ausblenden, Kompass, Kalibrierung */
.tools .tsep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.seg.block { display: flex; width: 100%; }
.seg.block button { flex: 1; justify-content: center; padding: 0 6px; font-size: 12.5px; height: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; }
.chip-btn:hover { border-color: var(--accent); color: var(--text); }
.btn.lg { height: 48px; font-size: 15px; }
.compass-big { width: 170px; height: 170px; margin: 4px auto 14px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--surface-3), var(--bg-2)); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); }
.compass-big svg { width: 100%; height: 100%; }
.compass-big .ring { fill: none; stroke: var(--border-strong); stroke-width: 1.2; }
.compass-big .cl { fill: var(--muted); font: 700 9px var(--font); text-anchor: middle; dominant-baseline: middle; }
.compass-big .n { fill: var(--danger); }
.compass-big .s { fill: #c3cddb; }
.compass-big .rose { transition: transform .25s; }
.calib-intro .ci-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calib-intro .ci-steps > div { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.calib-intro .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.calib-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cstep { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 13px; }
.cstep > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 11.5px; font-weight: 700; }
.cstep > span svg { width: 13px; height: 13px; }
.cstep.cur { border-color: var(--accent); color: var(--text); }
.cstep.cur > span { background: var(--accent); color: #fff; }
.cstep.done > span { background: var(--ok); color: #06281a; }
.calib-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 13px; }
.calib-status.ok { background: var(--ok-soft); color: var(--ok); }
.calib-status.warn { background: var(--warn-soft); color: var(--warn); }
.calib-status.danger { background: var(--danger-soft); color: var(--danger); }
.calib-status .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.calib-result { text-align: center; padding: 22px; border-radius: 14px; }
.calib-result.ok { background: linear-gradient(160deg, rgba(46,204,138,.18), rgba(46,204,138,.04)); color: var(--ok); }
.calib-result.warn { background: linear-gradient(160deg, rgba(242,178,58,.18), rgba(242,178,58,.04)); color: var(--warn); }
.calib-result .big { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 760px) { .calib-intro .ci-steps { grid-template-columns: 1fr; } }
.cstep .cdir { margin-left: auto; width: auto !important; height: auto !important; background: none !important; color: var(--muted) !important; font-size: 11px !important; }
.plan-svg.calibrating .room-label, .plan-svg.calibrating .room-sub { opacity: .25; }

.mfa-qr { display: flex; justify-content: center; }
.mfa-qr svg { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 0; box-shadow: 0 4px 18px rgba(0,0,0,.35); }

/* --- Systemübersicht (Betreiber) --- */
.status-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.status-bar > svg { width: 20px; height: 20px; flex: none; }
.status-bar.ok > svg { color: var(--ok); }
.status-bar.ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.status-bar.warn > svg { color: var(--warn); }
.status-bar.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: var(--warn-soft); }
.status-bar.danger > svg { color: var(--danger); }
.status-bar.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: var(--danger-soft); }
.feed .meta .badge { font-size: 11px; padding: 1px 7px; margin-right: 4px; }
.mini-kpis { margin-bottom: 14px; gap: 10px; }
.mini-kpis .v { font-size: 20px; font-weight: 600; margin-top: 2px; }
.chart { position: relative; }
.chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .bar { fill: var(--accent); transition: opacity .12s; }
.chart:has(.hit.on) .bar { opacity: .45; }
.chart .hit.on .bar { opacity: 1; }
.chart .hit.on rect { fill: rgba(255,255,255,.03); }
.chart-tip { position: absolute; top: -6px; transform: translateY(-100%); pointer-events: none; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12.5px; white-space: nowrap; box-shadow: var(--shadow); z-index: 2; }
.chart-table { margin-top: 8px; }
.chart-table summary { cursor: pointer; }
.chart-table table { margin-top: 8px; }
.meters { display: grid; gap: 7px; }
.meter-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.meter-row b { min-width: 28px; text-align: right; font-weight: 600; }
.meter { display: inline-block; width: 38%; max-width: 180px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.meter.inline { width: 70px; vertical-align: middle; margin-left: 6px; }
.meter.danger > i { background: var(--danger); }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.grid > * { min-width: 0; }
.feed .meta { overflow-wrap: anywhere; }
@media (max-width: 700px) { .mini-kpis { grid-template-columns: 1fr 1fr; } .hide-sm { display: none; } }

/* =====================================================================
   HUD-Design (v0.8): dunkles Sicherheits-HUD mit Cyan-Leuchten,
   Eckwinkeln, Raster und Radar-Sweep. Überschreibt die Grundwerte oben.
   ===================================================================== */
:root {
  --bg: #03070b;
  --bg-2: #050b11;
  --surface: rgba(8, 19, 27, .78);
  --surface-2: #0a1822;
  --surface-3: #0f212d;
  --border: rgba(56, 200, 240, .13);
  --border-strong: rgba(56, 200, 240, .3);
  --text: #e4f6ff;
  --text-2: #a3bccb;
  --muted: #6a8698;
  --accent: #22d3ee;
  --accent-2: #06b6d4;
  --accent-soft: rgba(34, 211, 238, .12);
  --glow: 0 0 18px rgba(34, 211, 238, .35);
  --ok: #34f5a4;
  --ok-soft: rgba(52, 245, 164, .12);
  --warn: #ffb547;
  --warn-soft: rgba(255, 181, 71, .13);
  --danger: #ff3b6b;
  --danger-soft: rgba(255, 59, 107, .14);
  --violet: #a78bfa;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --hud: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --mono: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --chamfer: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  color-scheme: dark;
}
html { background: var(--bg); }
body {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(34, 211, 238, .13), transparent 60%),
    radial-gradient(900px 600px at 105% 110%, rgba(167, 139, 250, .09), transparent 60%),
    linear-gradient(rgba(34, 211, 238, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(34, 211, 238, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg);
  background-attachment: fixed;
}
/* feine Bildschirm-Zeilen und Randabdunklung */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45) 100%);
}
::selection { background: rgba(34, 211, 238, .35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(34, 211, 238, .3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, .25); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, .brand, .kpi .val, .status-hero .state, .tile-name, .calib-result .big, .mini-kpis .v {
  font-family: var(--hud); font-weight: 600; letter-spacing: .02em;
}
h1 { font-size: 24px; text-transform: uppercase; letter-spacing: .06em; }
h3 { font-family: var(--hud); letter-spacing: .14em; color: var(--accent); opacity: .85; font-size: 11.5px; }
a { color: var(--accent); }
.mono, code { font-family: var(--mono); }

/* --- Karten mit Eckwinkeln --- */
.card, .modal, .auth-card.hud, .status-bar, .drawer {
  background: linear-gradient(180deg, rgba(12, 28, 39, .82), rgba(5, 13, 19, .82));
  border: 1px solid var(--border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(120, 230, 255, .05), 0 10px 30px rgba(0, 0, 0, .35);
}
.card, .modal, .auth-card.hud, .status-bar { position: relative; }
.card::before, .modal::before, .auth-card.hud::before, .status-bar::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 1;
  --c: rgba(34, 211, 238, .75); --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l) no-repeat;
}
.status-bar.danger::before, .card.alarm::before { --c: rgba(255, 59, 107, .9); }
.status-bar.warn::before { --c: rgba(255, 181, 71, .85); }
.status-bar.ok::before { --c: rgba(52, 245, 164, .8); }
.card-h { border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(34, 211, 238, .06), transparent 60%); }
.card-h h2 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .14em; display: flex; align-items: center; gap: 10px; }
.card-h h2::before { content: ""; width: 6px; height: 6px; background: var(--accent); box-shadow: var(--glow); flex: none; }
.card-h > svg.i { color: var(--accent); }

/* Einblenden beim Seitenwechsel */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.content > .card, .content > .grid > *, .content > .grid > .stack > .card, .content > div > .card { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.content > .grid > *:nth-child(2) { animation-delay: .06s; }
.content > .grid > *:nth-child(3) { animation-delay: .12s; }
.content > .grid > *:nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* --- Kennzahlen --- */
.kpi .lbl { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-family: var(--hud); }
.kpi .lbl svg { color: var(--accent); }
.kpi .val { font-size: 36px; color: #f0fbff; text-shadow: 0 0 22px rgba(34, 211, 238, .35); font-variant-numeric: tabular-nums; }
.kpi .hint { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }
.kpi.danger .val { color: var(--danger); text-shadow: 0 0 22px rgba(255, 59, 107, .5); }
.kpi.warn .val { color: var(--warn); text-shadow: 0 0 22px rgba(255, 181, 71, .4); }
.kpi::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .5; }

/* --- Formulare und Buttons --- */
input, select, textarea { background: rgba(2, 8, 12, .75); border-color: var(--border-strong); border-radius: var(--radius-sm); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15), 0 0 16px rgba(34, 211, 238, .2); }
label.field > span { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-family: var(--hud); color: var(--muted); }
.btn { background: rgba(8, 22, 31, .7); border-color: var(--border-strong); border-radius: var(--radius-sm); letter-spacing: .02em; }
.btn:hover { background: rgba(34, 211, 238, .1); border-color: var(--accent); box-shadow: 0 0 14px rgba(34, 211, 238, .18); }
.btn.primary {
  background: linear-gradient(90deg, #0891b2, #22d3ee); border: 0; color: #021219; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; font-family: var(--hud); font-size: 13.5px;
  clip-path: var(--chamfer); box-shadow: none; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .35));
}
.btn.primary:hover { background: linear-gradient(90deg, #22d3ee, #67e8f9); filter: drop-shadow(0 0 16px rgba(34, 211, 238, .55)); }
.btn.danger { clip-path: var(--chamfer); border-color: rgba(255, 59, 107, .5); color: #ff9db5; }
.btn.danger:hover { background: rgba(255, 59, 107, .2); box-shadow: 0 0 16px rgba(255, 59, 107, .3); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { box-shadow: none; }
.switch span { background: rgba(2, 8, 12, .8); }
.switch input:checked + span { background: rgba(34, 211, 238, .25); border-color: var(--accent); box-shadow: 0 0 12px rgba(34, 211, 238, .35); }
.switch input:checked + span::after { background: var(--accent); }
.tabs { background: rgba(2, 8, 12, .6); border-color: var(--border); border-radius: var(--radius-sm); }
.tabs button { border-radius: 3px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--hud); font-size: 12.5px; }
.tabs button.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

/* --- Abzeichen, Punkte --- */
.badge { border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-family: var(--hud); border: 1px solid rgba(160, 200, 220, .15); background: rgba(160, 200, 220, .06); }
.badge.ok { border-color: rgba(52, 245, 164, .35); }
.badge.warn { border-color: rgba(255, 181, 71, .4); }
.badge.danger { border-color: rgba(255, 59, 107, .45); color: #ff7a96; }   /* etwas heller: kleine rote Schrift erreicht so 4,5:1 */
.badge.accent { border-color: rgba(34, 211, 238, .4); }
.dot.ok { box-shadow: 0 0 0 3px var(--ok-soft), 0 0 10px var(--ok); }
.dot.warn { box-shadow: 0 0 8px var(--warn); }

/* --- Gerüst: Seitenleiste und Kopfzeile --- */
.side { background: linear-gradient(180deg, rgba(4, 12, 18, .92), rgba(2, 6, 10, .95)); border-right: 1px solid var(--border); box-shadow: inset -1px 0 0 rgba(34, 211, 238, .05); }
.side-label { font-family: var(--hud); letter-spacing: .18em; color: rgba(34, 211, 238, .55); font-size: 10.5px; }
.side-label::before { content: "// "; opacity: .6; }
.nav a { border-radius: 3px; position: relative; transition: background .15s, color .15s; }
.nav a:hover { background: rgba(34, 211, 238, .06); }
.nav a.on { background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(34, 211, 238, 0)); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.nav a.on svg { color: var(--accent); filter: drop-shadow(0 0 6px rgba(34, 211, 238, .7)); }
.brand { font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
.brand b { color: var(--accent); font-weight: 600; text-shadow: var(--glow); }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .18), rgba(2, 8, 12, .9) 70%); border: 1px solid rgba(34, 211, 238, .5); box-shadow: 0 0 16px rgba(34, 211, 238, .3); overflow: hidden; color: var(--accent); }
.brand-mark svg { width: 100%; height: 100%; stroke-width: 1; }
.radar-mini .sweep { transform-origin: 12px 12px; animation: spin 3s linear infinite; }
.radar-mini .blip { animation: blip 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 30% { opacity: 0; } 34% { opacity: 1; } 80%, 100% { opacity: 0; } }
.avatar { border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-family: var(--hud); border: 1px solid rgba(34, 211, 238, .3); }
.topbar { background: rgba(3, 8, 12, .72); backdrop-filter: blur(12px); border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(34, 211, 238, .45) 30%, rgba(34, 211, 238, .45) 70%, transparent) 1; }
.topbar h1 { text-shadow: 0 0 24px rgba(34, 211, 238, .25); }
.hud-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); background: rgba(2, 8, 12, .6);
  font: 600 11px var(--hud); letter-spacing: .16em; color: var(--ok); clip-path: var(--chamfer); }
.hud-chip b { font: 500 12px var(--mono); color: var(--text-2); letter-spacing: .04em; }
.admin-banner { font-family: var(--hud); letter-spacing: .06em; }

/* --- Tabellen, Listen --- */
.t th { background: rgba(34, 211, 238, .04); color: rgba(34, 211, 238, .7); font-family: var(--hud); letter-spacing: .14em; font-size: 10.5px; }
.t td { border-bottom-color: rgba(56, 200, 240, .07); }
.t tr.click:hover td, .t tbody tr:hover td { background: rgba(34, 211, 238, .04); }
.feed li { border-bottom-color: rgba(56, 200, 240, .07); transition: background .15s; }
.feed li:hover { background: rgba(34, 211, 238, .03); }
.feed .ic { border-radius: 3px; border: 1px solid rgba(160, 200, 220, .12); }
.feed .ic.ok { border-color: rgba(52, 245, 164, .35); box-shadow: 0 0 10px rgba(52, 245, 164, .12); }
.feed .ic.danger { border-color: rgba(255, 59, 107, .45); box-shadow: 0 0 10px rgba(255, 59, 107, .2); }
.feed .ic.warn { border-color: rgba(255, 181, 71, .4); }
.feed .ic.accent { border-color: rgba(34, 211, 238, .4); }
.feed .meta { font-family: var(--mono); font-size: 11.5px; }

/* --- Status-Ring (Kundenübersicht) --- */
.status-hero { padding: 26px; gap: 26px; }
.shield { width: 96px; height: 96px; border-radius: 50%; position: relative; background: radial-gradient(circle, rgba(160, 200, 220, .1), transparent 70%) !important; border: 1px solid rgba(160, 200, 220, .25); }
.shield svg { width: 36px; height: 36px; position: relative; z-index: 1; }
.shield::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed currentColor; opacity: .45; animation: spin 14s linear infinite; }
.shield::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid currentColor; opacity: .15; border-top-color: transparent; border-bottom-color: transparent; animation: spin 6s linear infinite reverse; }
.shield.armed { color: var(--ok); border-color: rgba(52, 245, 164, .55); box-shadow: 0 0 30px rgba(52, 245, 164, .25), inset 0 0 22px rgba(52, 245, 164, .15); }
.shield.armed svg { filter: drop-shadow(0 0 8px rgba(52, 245, 164, .8)); }
.shield.alarm { color: var(--danger); border-color: var(--danger); animation: alarmring 1s ease-in-out infinite; }
.shield.alarm::before { animation-duration: 2s; opacity: .8; }
@keyframes alarmring { 50% { box-shadow: 0 0 40px rgba(255, 59, 107, .6), inset 0 0 30px rgba(255, 59, 107, .35); } }
.shield.disarmed { color: var(--text-2); }
.status-hero .state { font-size: 30px; text-transform: uppercase; letter-spacing: .08em; }
.status-hero .grow { min-width: 240px; }   /* sonst schiebt sich der Status unter die Modus-Tasten, statt dass sie umbrechen */
.status-hero:has(.shield.armed) .state { color: var(--ok); text-shadow: 0 0 20px rgba(52, 245, 164, .45); }
.status-hero:has(.shield.alarm) .state { color: var(--danger); text-shadow: 0 0 20px rgba(255, 59, 107, .6); }
.seg { background: rgba(2, 8, 12, .7); border-color: var(--border-strong); border-radius: var(--radius-sm); }
.seg button { border-radius: 3px; text-transform: uppercase; letter-spacing: .1em; font: 600 12.5px var(--hud); }
.seg button.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .5), 0 0 16px rgba(34, 211, 238, .2); }
.seg button.on.armed { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(52, 245, 164, .5), 0 0 16px rgba(52, 245, 164, .25); }
.alarm-strip { background: repeating-linear-gradient(-45deg, rgba(255, 59, 107, .22) 0 14px, rgba(255, 59, 107, .1) 14px 28px); border-color: var(--danger); color: #ffd0db;
  font-family: var(--hud); letter-spacing: .06em; text-transform: uppercase; animation: alarmstrip 1s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes alarmstrip { 50% { box-shadow: 0 0 30px rgba(255, 59, 107, .45); } }

/* --- Grundriss --- */
.plan-wrap { background: radial-gradient(ellipse at 50% 40%, rgba(34, 211, 238, .06), transparent 70%), #02070b; }
.plan-svg .floor-base { fill: #06121a; }
.plan-svg .walls polygon { stroke: #8fdcf0; filter: drop-shadow(0 0 .025px rgba(34, 211, 238, .8)); }
.plan-svg .walls.inner polygon { stroke: #7fcfe6; }
.plan-svg .room-label { font-family: var(--hud); letter-spacing: .04em; stroke: rgba(2, 7, 11, .8); }
.plan-svg .fov { stroke: rgba(34, 211, 238, .4); }
.plan-svg .fov.sel { stroke: rgba(34, 211, 238, .9); }
.plan-svg .fov.ceiling { stroke: rgba(167, 139, 250, .5); }
.plan-svg .dev circle.bg { fill: #071822; stroke: rgba(34, 211, 238, .45); }
.plan-svg .person .core { filter: drop-shadow(0 0 .15px var(--ok)); }
.plan-compass, .plan-hud .chip { background: rgba(2, 8, 12, .85); border-color: var(--border-strong); }
.plan-hud .chip { font-family: var(--mono); border-radius: 3px; }
.editor-bar, .inspector { background: rgba(3, 9, 14, .9); }
.tools { background: rgba(2, 8, 12, .7); border-radius: var(--radius-sm); }
.tools button.on { box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .45); }
.palette button, .tray button, .floor-tabs button, .chip-btn { border-radius: 3px; }
.palette button.on { box-shadow: 0 0 14px rgba(34, 211, 238, .2); }
.floor-tabs button.on { background: var(--accent-soft); color: var(--accent); border-color: rgba(34, 211, 238, .4); }

/* --- Modal, Toast, Hinweise --- */
.modal-bg { background: rgba(1, 4, 7, .75); backdrop-filter: blur(6px); }
.modal::before { inset: 0; }   /* sonst ragen die Eckmarken 1 px heraus und erzeugen Rollbalken */
.modal { border-color: var(--border-strong); border-radius: var(--radius); }
.modal-h h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 16px; }
.toast { background: rgba(6, 16, 23, .95); border-color: var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }
.note { border: 1px solid rgba(34, 211, 238, .25); border-radius: var(--radius-sm); color: #bdeefa; }
.note.warn { border-color: rgba(255, 181, 71, .35); }
.note.danger { border-color: rgba(255, 59, 107, .4); }
.secret { background: rgba(2, 8, 12, .8); border-color: var(--border-strong); color: var(--accent); }

/* --- Systemübersicht --- */
.chart .bar { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(34, 211, 238, .55)); }
.chart .grid { stroke: rgba(56, 200, 240, .1); }
.chart .ax { font-family: var(--mono); font-size: 10.5px; }
.chart-tip { background: rgba(4, 12, 18, .96); border-color: var(--accent); border-radius: 3px; font-family: var(--mono); }
.meter { background: rgba(160, 200, 220, .08); border-radius: 0; height: 4px; }
.meter > i { border-radius: 0; box-shadow: 0 0 8px rgba(34, 211, 238, .6); }
.status-bar { font-family: var(--hud); letter-spacing: .06em; border-radius: var(--radius-sm); }
.status-bar b { text-transform: uppercase; letter-spacing: .1em; }
.status-bar.ok { color: var(--ok); }
.status-bar .muted { font-family: var(--mono); letter-spacing: 0; }

/* --- Anmeldung: Radarschirm --- */
.auth-hero { background: radial-gradient(900px 600px at 30% 40%, rgba(34, 211, 238, .1), transparent 65%), rgba(2, 6, 10, .6); border-right: 1px solid var(--border); }
.auth-hero .grid-bg { display: none; }
.auth-hero h1 { font-size: 46px; line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; max-width: 520px; }
.auth-hero h1 em { font-style: normal; color: var(--accent); text-shadow: 0 0 28px rgba(34, 211, 238, .55); }
.auth-kicker { font: 600 12px var(--hud); letter-spacing: .28em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.auth-kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); box-shadow: var(--glow); }
.auth-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.auth-stats div { display: flex; flex-direction: column; gap: 2px; }
.auth-stats b { font: 600 26px var(--hud); color: #fff; text-shadow: var(--glow); }
.auth-stats span { font: 500 10.5px var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.scope { position: absolute; right: -140px; top: 50%; width: 620px; height: 620px; transform: translateY(-50%); opacity: .9; pointer-events: none; }
.scope svg { width: 100%; height: 100%; overflow: visible; }
.scope .ring { fill: none; stroke: rgba(34, 211, 238, .22); stroke-width: 1; }
.scope .ring.dash { stroke-dasharray: 2 6; }
.scope .axis { stroke: rgba(34, 211, 238, .14); stroke-width: 1; }
.scope .sweep { transform-origin: 310px 310px; animation: spin 4s linear infinite; }
.scope .blip { fill: var(--ok); filter: drop-shadow(0 0 6px var(--ok)); animation: blip 4s linear infinite; }
.scope .blip.b2 { animation-delay: -1.3s; }
.scope .blip.b3 { animation-delay: -2.6s; fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.scope .tick { fill: rgba(34, 211, 238, .5); font: 10px var(--mono); }
.auth-card.hud { padding: 30px 28px; }
.auth-card h2 { font-size: 24px; text-transform: uppercase; letter-spacing: .08em; }
.auth-panel { background: radial-gradient(600px 400px at 50% 50%, rgba(34, 211, 238, .05), transparent 70%); }
@media (max-width: 1100px) { .scope { opacity: .35; } }
.brand-mark svg.i { width: 18px; height: 18px; stroke-width: 2; }
.side .brand { font-size: 16px; letter-spacing: .1em; flex-wrap: wrap; row-gap: 4px; }
.side .brand .badge { margin-left: 0 !important; }
@media (max-width: 700px) {
  .hud-chip.hide-sm { display: none; }
  .topbar { flex-wrap: wrap; min-height: 0; gap: 10px; padding: 12px 16px; }
  .topbar h1 { font-size: 18px; letter-spacing: .05em; }
  .topbar .sub { font-size: 12px; }
  .admin-banner { padding: 8px 16px; font-size: 12px; }
  .status-hero { padding: 20px; gap: 20px; }
  .shield { width: 72px; height: 72px; }
  .status-hero .state { font-size: 22px; }
  .seg { width: 100%; }
  .seg button { flex: 1; justify-content: center; padding: 0 8px; font-size: 11.5px; }
  .alarm-strip { flex-wrap: wrap; font-size: 13px; }
  .card-h h2 { letter-spacing: .08em; font-size: 12.5px; }
  .kpi .val { font-size: 30px; }
  .auth-hero h1 { font-size: 32px; }
}
.topbar, .admin-banner { flex-shrink: 0; }
@media (max-width: 700px) { .seg { flex-wrap: nowrap; } .seg button { gap: 5px; padding: 0 4px; letter-spacing: .04em; } .seg button svg { width: 15px; height: 15px; } }

/* --- Made in Germany / Datenschutz-Versprechen --- */
.de-flag { width: 20px; height: 12px; flex: none; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.trust { max-width: 470px; padding: 16px 18px; border: 1px solid var(--border); background: rgba(2, 8, 12, .55); position: relative; }
.trust::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: linear-gradient(#000 33%, #dd0000 33% 66%, #ffce00 66%); }
.trust-h { display: flex; align-items: center; gap: 10px; font: 600 12px var(--hud); letter-spacing: .24em; text-transform: uppercase; color: var(--text); margin-bottom: 10px; }
.trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trust li { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13.5px; }
.trust li svg { color: var(--accent); width: 16px; height: 16px; }
.trust li b { color: var(--text); font-weight: 600; }
.trust-line { display: flex; align-items: center; gap: 8px; margin-top: 22px; font: 500 11px var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trust-line .de-flag { width: 16px; height: 10px; }
.side-trust { margin: 0 0 4px; padding: 0 8px; font-size: 10px; letter-spacing: .1em; }
.promise { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--border-strong); background: rgba(34, 211, 238, .05); }
.promise h2 { margin: 0 0 10px !important; display: flex; align-items: center; gap: 10px; }
.promise ul { margin: 0; padding-left: 18px; }
@media (max-height: 820px) and (min-width: 861px) { .auth-hero .auth-stats { display: none; } }

/* --- Möbel im Grundriss --- */
.plan-svg .furn { fill: none; stroke: rgba(170, 220, 235, .62); stroke-width: var(--sw, .025px); stroke-linejoin: round; stroke-linecap: round; }
.plan-svg .furn .fb { fill: rgba(150, 205, 225, .07); }
.plan-svg .furn .fa { stroke: var(--accent); }
.plan-svg .furn .furn-hit { fill: transparent; stroke: none; cursor: move; }
.plan-svg .furn.sel { stroke: var(--accent); filter: drop-shadow(0 0 .04px rgba(34, 211, 238, .9)); }
.plan-svg .furn.sel .fb { fill: rgba(34, 211, 238, .1); }
.plan-svg .furn.ghost { opacity: .55; stroke: var(--accent); pointer-events: none; }
.plan-svg .furn-box { fill: none; stroke: var(--accent); pointer-events: none; }
.plan-svg .furn-stem { stroke: var(--accent); pointer-events: none; }
.plan-svg .fh { fill: var(--bg); stroke: var(--accent); cursor: grab; }
.plan-svg .fh:hover { fill: var(--accent); }
.furn-prev { width: 34px; height: 34px; display: block; }
.furn-prev .furn { fill: none; stroke: currentColor; stroke-width: var(--sw); stroke-linejoin: round; }
.furn-prev .furn .fb { fill: rgba(150, 205, 225, .08); }
.palette.furn-pal button { padding: 8px 4px; }
.furn-group { font: 600 10.5px var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.insp-sec.hl { background: rgba(34, 211, 238, .05); box-shadow: inset 2px 0 0 var(--accent); }

/* --- Handy: Menü als Schublade, Editor mit Einstellungs-Blatt --- */
.menu-btn { display: none; }
.nav-backdrop { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; margin-left: -6px; }
  .shell .side { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 84vw); z-index: 60;
    transform: translateX(-102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
  .shell.nav-open .side { transform: none; }
  .shell.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(1, 4, 7, .6); backdrop-filter: blur(2px); }
  .nav a { padding: 11px 10px; }

  .content.full { display: block; }
  .editor { display: block; }
  .editor-main { height: calc(100dvh - 128px); min-height: 380px; }
  .editor-bar { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; gap: 6px; scrollbar-width: none; }
  .editor-bar::-webkit-scrollbar { display: none; }
  .editor-bar .spacer { display: none; }
  .floor-tabs { flex: none; }
  .tools { flex: none; }
  .tools button { height: 38px; padding: 0 10px; }
  .tools kbd { display: none; }
  .editor-bar .btn.sm { height: 38px; flex: none; }
  .plan-hud { right: 60px; flex-wrap: wrap; }
  .plan-hud .chip { font-size: 10.5px; padding: 4px 8px; }
  .plan-hud .chip:first-child:not(:only-child) { display: none; }
  .plan-zoom .btn.sm.icon { width: 40px; height: 40px; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; border: 1px solid var(--border-strong); border-bottom: 0;
    background: rgba(3, 9, 14, .97); backdrop-filter: blur(12px); max-height: 52px; transition: max-height .28s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .55); padding-bottom: env(safe-area-inset-bottom); }
  .sheet.open { max-height: 62dvh; }
  .sheet-bar { display: flex; align-items: center; gap: 10px; height: 52px; flex: none; padding: 0 16px; border: 0; background: none; color: var(--text);
    font: 600 12px var(--hud); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; position: relative; }
  .sheet-bar .grip { position: absolute; left: 50%; top: 6px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--border-strong); }
  .sheet-bar span:not(.grip) { flex: 1; text-align: left; }
  .sheet-bar svg { transition: transform .25s; color: var(--accent); }
  .sheet.open .sheet-bar svg { transform: rotate(180deg); }
  .sheet .inspector { border: 0; }
  .palette button { min-height: 64px; }
  input, select, textarea { font-size: 16px; }   /* iOS zoomt sonst beim Antippen ins Feld */
}
@media (max-width: 700px) { .topbar .sub { font-size: 11.5px; } .topbar > .btn:not(.menu-btn) { height: 34px; padding: 0 10px; font-size: 12.5px; } }

/* --- In der App eingebettet --- */
.embed .side, .embed .menu-btn, .embed .hud-chip, .embed .topbar > a.btn, .embed .admin-banner .btn { display: none !important; }
.embed .shell { grid-template-columns: 1fr; }
.embed .topbar { min-height: 0; padding: 10px 14px; }
.embed .topbar h1 { font-size: 16px; }
.embed .topbar .sub { display: none; }
.embed .editor-main { height: calc(100dvh - 54px); }

/* Eingangsverzögerung: pulsierender Countdown im Status-Ring */
.shield.entry { color: var(--warn); border-color: var(--warn); animation: entryring .9s ease-in-out infinite; }
.shield.entry::before { animation-duration: 3s; opacity: .8; }
.shield-count { position: relative; z-index: 1; font: 700 34px var(--mono); color: var(--warn); text-shadow: 0 0 16px rgba(255, 181, 71, .7); }
@keyframes entryring { 50% { box-shadow: 0 0 36px rgba(255, 181, 71, .55), inset 0 0 26px rgba(255, 181, 71, .3); } }
.status-hero:has(.shield.entry) .state { color: var(--warn); text-shadow: 0 0 18px rgba(255, 181, 71, .5); }

/* ===== v0.17: Lage auf einen Blick, Zeitstrahl, Feinschliff ===== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn { transition: transform .12s, box-shadow .2s, background .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.card { transition: border-color .25s, box-shadow .25s; }
.card:hover { border-color: rgba(56, 200, 240, .24); }
.kpi { transition: transform .2s, box-shadow .25s, border-color .25s; }
.kpi:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(120, 230, 255, .08), 0 14px 34px rgba(0, 0, 0, .45); }
.kpi.skeleton { min-height: 118px; }
.skeleton { position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(34, 211, 238, .07) 50%, transparent 70%); animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.link-btn { background: none; border: 0; padding: 4px; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.link-btn:hover { color: var(--accent); }

/* Kennzahl-Kacheln */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-tile { position: relative; display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-width: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(14, 34, 46, .78), rgba(5, 13, 19, .82)); border: 1px solid var(--border); border-radius: var(--radius);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); --tone: var(--accent); transition: transform .2s, border-color .25s, box-shadow .25s; animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.stat-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 40%, transparent); }
.stat-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--tone), transparent 75%); opacity: .75; }
.stat-tile.ok { --tone: var(--ok); } .stat-tile.warn { --tone: var(--warn); } .stat-tile.danger { --tone: var(--danger); } .stat-tile.live { --tone: var(--ok); }
.st-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--tone) 18%, transparent); }
.st-ic svg { width: 20px; height: 20px; }
.st-b { min-width: 0; }
.st-v { font: 600 26px/1.1 var(--hud); color: #f0fbff; font-variant-numeric: tabular-nums; }
.stat-tile.warn .st-v { color: var(--warn); } .stat-tile.danger .st-v { color: var(--danger); }
.st-l { font: 600 10.5px var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-top: 3px; }
.st-h { font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile.live .st-ic { animation: tilepulse 2.4s ease-in-out infinite; }
@keyframes tilepulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone) 8%, transparent), 0 0 22px color-mix(in srgb, var(--tone) 30%, transparent); } }
@media (max-width: 1100px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-row { gap: 10px; } .stat-tile { padding: 12px; gap: 10px; } .st-ic { width: 34px; height: 34px; } .st-v { font-size: 21px; } }

/* Grundriss */
.plan-svg .room-label { fill: #eafaff; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.plan-svg .room-sub { fill: rgba(163, 188, 203, .8); font-family: var(--mono); }
.plan-svg .room.occ { fill-opacity: .3; filter: drop-shadow(0 0 .12px rgba(52, 245, 164, .35)); }
.plan-svg .walls polygon { stroke: #1d6a80; }
.plan-svg .walls.inner polygon { stroke: #8fe6f7; filter: drop-shadow(0 0 .05px rgba(34, 211, 238, .9)); }   /* Neonröhre: heller Kern, dunkler Mantel */
.plan-svg .fov { opacity: .55; }
.plan-svg .fov.sel { opacity: .9; }
.plan-svg .scan { fill: none; stroke: rgba(34, 211, 238, .55); transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: radarscan 3.5s cubic-bezier(.3, .6, .4, 1) infinite; }
@keyframes radarscan { 0% { transform: scale(.05); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@media (min-width: 1201px) { .plan-card { position: sticky; top: 16px; } }   /* nur neben der Raumliste, sonst legt er sich beim Scrollen über sie */
.plan-svg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.plan-svg .room.holding { fill-opacity: .5; transition: fill-opacity .6s linear; }
.plan-svg .room.armed { fill: var(--warn); fill-opacity: .2; }
.plan-svg .room.armed.pending { animation: armpending 1.4s ease-in-out infinite; }
@keyframes armpending { 50% { fill-opacity: .07; } }
.plan-svg .room-armed { fill: var(--warn); font-family: var(--hud); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.shield.partial { color: var(--warn); border-color: rgba(255, 181, 71, .55); box-shadow: 0 0 30px rgba(255, 181, 71, .22), inset 0 0 22px rgba(255, 181, 71, .13); }
.status-hero:has(.shield.partial) .state { color: var(--warn); text-shadow: 0 0 18px rgba(255, 181, 71, .45); }
.plan-svg .person .halo.late { animation-delay: -.8s; }
.plan-svg .dev.trig circle.bg { animation: devalert 1.2s ease-in-out infinite; }
@keyframes devalert { 50% { stroke-width: .1; } }

/* Geräte */
.dev-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 4px; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(34, 211, 238, .22); }
.dev-ic svg { width: 16px; height: 16px; }
.t .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; display: inline-block; margin-right: 5px; }
.batt-cell { white-space: nowrap; }
.batt { position: relative; display: inline-block; width: 44px; height: 12px; vertical-align: -2px; border: 1px solid rgba(160, 200, 220, .35); border-radius: 2px; padding: 1px; margin-right: 8px; }
.batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; background: rgba(160, 200, 220, .35); }
.batt i { display: block; height: 100%; background: var(--ok); box-shadow: 0 0 6px rgba(52, 245, 164, .5); }
.batt.warn i { background: var(--warn); box-shadow: 0 0 6px rgba(255, 181, 71, .5); }
.batt.danger i { background: var(--danger); box-shadow: 0 0 6px rgba(255, 59, 107, .6); }
.batt-v { font-family: var(--mono); font-size: 12px; }
@media (max-width: 700px) {
  table.t.cards thead { display: none; }
  table.t.cards, table.t.cards tbody { display: block; }
  table.t.cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  table.t.cards td { display: block; padding: 0; border: 0; min-width: 0; }
  table.t.cards td:first-child { grid-column: 1 / -1; }
  table.t.cards td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 600 10px var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
}

/* Ereignisse */
.card-b { padding: 14px 18px; }
.ev-tools { flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--border); background: rgba(2, 8, 12, .5); color: var(--text-2); border-radius: 999px; padding: 5px 12px; font: 600 11px var(--hud); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
.chips button:hover { border-color: var(--border-strong); color: var(--text); }
.chips button.on { background: var(--accent-soft); border-color: rgba(34, 211, 238, .5); color: var(--accent); box-shadow: 0 0 14px rgba(34, 211, 238, .15); }
.ev-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; padding: 9px 18px; margin: 0; background: rgba(4, 12, 18, .94); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 31.5px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(34, 211, 238, .28), rgba(34, 211, 238, .06)); }
.timeline li { border-bottom: 0; padding-top: 8px; padding-bottom: 8px; position: relative; }
.timeline .ic { position: relative; z-index: 1; background: #071822; }
.timeline .ic.danger { background: #2a0e18; } .timeline .ic.ok { background: #06231c; } .timeline .ic.warn { background: #2a1f0c; } .timeline .ic.accent { background: #07222c; }
.legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: #0a9dc0; }
.legend i.alarm { background: #ff3b6b; }
.day-chart svg { height: 132px; }
.day-chart .bar { fill: #0a9dc0; filter: none; }
.day-chart .bar.alarm { fill: #ff3b6b; }
.day-chart:has(.hit.on) .hit:not(.on) .bar { opacity: .4; }
.chart-tip { min-width: 120px; }

/* =====================================================================
   v0.25: Ruhiger und freundlicher. „Digital kann jeder“ heißt: normale
   Schreibweise statt Großbuchstaben, runde Formen statt Eckwinkel,
   Radarwellen aus dem Logo statt Kontrollzentrum. Überschreibt das HUD.
   ===================================================================== */
:root { --radius: 14px; --radius-sm: 10px; --chamfer: none; }
body { background: radial-gradient(1100px 700px at 8% -10%, rgba(34, 211, 238, .12), transparent 60%), radial-gradient(900px 600px at 105% 110%, rgba(52, 245, 164, .05), transparent 60%), var(--bg); background-attachment: fixed; }
body::after { background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .3) 100%); }
h1 { font-size: 26px; text-transform: none; letter-spacing: 0; }
.card, .modal, .auth-card.hud, .status-bar, .drawer, .stat-tile { border-radius: var(--radius); }
.card::before, .modal::before, .auth-card.hud::before, .status-bar::before { display: none; }
.card { overflow: hidden; }
.card-h { background: none; }
.card-h h2 { font-size: 16px; text-transform: none; letter-spacing: 0; }
.card-h h2::before { display: none; }
label.field > span { text-transform: none; letter-spacing: 0; font: 500 13.5px var(--font); color: var(--text-2); }
input, select, textarea { border-radius: var(--radius-sm); }
.btn { border-radius: var(--radius-sm); }
.btn.primary { clip-path: none; text-transform: none; letter-spacing: .005em; font: 600 15px var(--font); border-radius: var(--radius-sm); }
.btn.danger { clip-path: none; }
.tabs { border-radius: 12px; }
.tabs button, .seg button { text-transform: none; letter-spacing: 0; font: 600 14px var(--font); border-radius: 9px; }
.seg { border-radius: 12px; }
.badge { text-transform: none; letter-spacing: 0; font: 600 11.5px var(--font); border-radius: 999px; }
.side-label { font: 600 12.5px var(--font); letter-spacing: 0; color: var(--muted); }
.side-label::before { display: none; }
.nav a { border-radius: 10px; }
.nav a.on { background: rgba(34, 211, 238, .12); box-shadow: none; }
.brand { display: block; text-transform: none; letter-spacing: 0; }
.brand-logo { display: block; height: 30px; width: auto; }
.side .brand { padding: 6px 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.side .brand .brand-logo { height: 28px; }
.user-chip .avatar, .avatar { border-radius: 50%; }
.topbar { border-image: none; border-bottom: 1px solid var(--border); }
.topbar h1 { text-shadow: none; }
.hud-chip { clip-path: none; border-radius: 999px; letter-spacing: .04em; }
.modal-h h2 { text-transform: none; letter-spacing: 0; font-size: 18px; }
.modal { overflow: hidden; display: flex; flex-direction: column; }
.modal-b { overflow-y: auto; min-height: 0; flex: 1 1 auto; }   /* langer Inhalt scrollt, Kopf und Knöpfe bleiben sichtbar */
.alarm-strip { text-transform: none; letter-spacing: 0; font-family: var(--font); font-weight: 600; }
.status-bar { font-family: var(--font); letter-spacing: 0; }
.status-bar b { text-transform: none; letter-spacing: 0; }
.st-l { text-transform: none; letter-spacing: 0; font: 600 12.5px var(--font); }
.t th { font-family: var(--font); letter-spacing: 0; font-size: 12px; text-transform: none; }
.chips button { text-transform: none; letter-spacing: 0; font: 600 12.5px var(--font); }
.kpi .lbl { text-transform: none; letter-spacing: 0; font: 600 12.5px var(--font); }
.trust-line { text-transform: none; letter-spacing: 0; font: 500 12px var(--font); }
.side-trust { font-size: 11.5px; letter-spacing: 0; }
.plan-svg .room-label { text-transform: none; letter-spacing: 0; }
.plan-svg .fov { opacity: .2; }        /* Radarfelder sollen den Grundriss nicht überdecken */
.plan-svg .fov.sel { opacity: .6; }
table.t.cards td[data-l]::before { text-transform: none; letter-spacing: 0; font: 600 11.5px var(--font); }
.sheet-bar { text-transform: none; letter-spacing: 0; font: 600 14px var(--font); }
.furn-group { text-transform: none; letter-spacing: 0; font: 600 12.5px var(--font); }

/* Das Zeichen: In der Mitte der Startansicht und im Anmeldebild, die Farbe kommt vom Zustand */
.k-mark { display: block; overflow: visible; }
.k-mark .kk { fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.k-mark .kw { fill: none; stroke: currentColor; stroke-width: 6.5; stroke-linecap: round; opacity: .35; animation: kwave 2.6s ease-in-out infinite; }
.k-mark .kw2 { animation-delay: .35s; }
.k-mark .kd { fill: var(--ok); filter: drop-shadow(0 0 6px rgba(52, 245, 164, .75)); animation: kdot 2.6s ease-in-out infinite; animation-delay: .7s; }
@keyframes kwave { 0%, 100% { opacity: .22; } 35% { opacity: 1; } }
@keyframes kdot { 0%, 100% { opacity: .55; } 35% { opacity: 1; } }

.shield { width: 104px; height: 104px; flex: none; color: var(--accent); background: radial-gradient(circle, color-mix(in srgb, currentColor 16%, transparent), transparent 70%) !important; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); box-shadow: none; }
.shield .k-mark { width: 58px; height: 58px; transform: translateX(2px); position: relative; z-index: 1; }
.shield svg.i { width: 40px; height: 40px; }
.shield::before, .shield::after { inset: 0; border: 1px solid currentColor; opacity: 0; border-radius: 50%; animation: ripple 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
.shield::after { animation-delay: 1.6s; border-top-color: currentColor; border-bottom-color: currentColor; }
@keyframes ripple { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.75); opacity: 0; } }
.shield.disarmed { color: var(--accent); }
.shield.armed { color: var(--ok); box-shadow: 0 0 30px rgba(52, 245, 164, .16); }
.shield.armed .k-mark .kd { fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); }
.shield.alarm::before, .shield.alarm::after { animation-duration: 1.2s; }
.shield.alarm::after { animation-delay: .6s; }
.shield.entry::before { animation-duration: 1.6s; }
.status-hero { position: relative; }
.status-hello { color: var(--text-2); font-size: 15px; margin-bottom: 2px; }
.status-hero .state { font-size: 34px; line-height: 1.15; text-transform: none; letter-spacing: 0; }
.status-hero .muted.small { font-size: 14px; margin-top: 4px; }
@media (max-width: 700px) {
  .shield { width: 80px; height: 80px; }
  .shield .k-mark { width: 44px; height: 44px; }
  .status-hero .state { font-size: 25px; }
  .status-hero .grow { min-width: 0; flex-basis: calc(100% - 110px); }
  .seg button { letter-spacing: 0; font-size: 13px; }
  .topbar h1 { font-size: 20px; letter-spacing: 0; }
}

/* Anmeldung */
.auth-hero { padding: 44px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; overflow: hidden; position: relative; background: radial-gradient(760px 560px at 74% 56%, rgba(34, 211, 238, .13), transparent 66%), rgba(2, 6, 10, .55); border-right: 1px solid var(--border); }
.auth-hero .brand-logo { height: 38px; position: relative; }
.auth-copy { position: relative; }
.auth-hero h1 { font-size: clamp(42px, 4.6vw, 64px); line-height: 1.06; text-transform: none; letter-spacing: -.01em; max-width: 560px; margin: 0 0 18px; }
.auth-hero h1 em { text-shadow: none; }
.auth-hero p { font-size: 18px; line-height: 1.55; max-width: 480px; margin: 0; }
.auth-promises { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--text-2); font-size: 15px; }
.auth-promises li { display: flex; align-items: center; gap: 12px; }
.auth-promises svg.i { width: 19px; height: 19px; color: var(--accent); flex: none; }
.auth-radar { position: absolute; right: -60px; top: 50%; width: 440px; height: 440px; transform: translateY(-50%); display: grid; place-items: center; color: var(--accent); pointer-events: none; opacity: .92; }
.auth-radar .k-mark { width: 210px; height: 210px; transform: translateX(10px); }
.auth-radar i { position: absolute; inset: 40px; border-radius: 50%; border: 1px solid rgba(34, 211, 238, .4); opacity: 0; animation: ripple 6s cubic-bezier(.2, .6, .3, 1) infinite; }
.auth-radar i:nth-child(2) { animation-delay: 1.5s; } .auth-radar i:nth-child(3) { animation-delay: 3s; } .auth-radar i:nth-child(4) { animation-delay: 4.5s; }
.auth-card h2 { font-size: 28px; text-transform: none; letter-spacing: 0; margin-top: 0; }
.auth-card.hud { padding: 34px 32px; background: linear-gradient(180deg, rgba(14, 32, 44, .78), rgba(6, 15, 22, .84)); }
.auth-small-logo { display: none; margin-bottom: 26px; }
.auth-small-logo .brand-logo { height: 34px; }
@media (max-width: 1240px) { .auth-radar { opacity: .4; right: -130px; } }
@media (max-width: 860px) {
  .auth-hero { display: none; }
  .auth-small-logo { display: block; }
  .auth-panel { padding: 24px 16px; min-height: 100dvh; align-items: flex-start; }
  .auth-card.hud { padding: 28px 22px; margin-top: 6vh; }
}
@media (max-height: 700px) and (min-width: 861px) { .auth-promises { display: none; } }
@media (prefers-reduced-motion: reduce) { .auth-radar i { display: none; } }