@font-face { font-family: "Fraktur"; src: url(/static/fonts/fraktur.woff2) format("woff2"); font-display: swap; }

/* ═════════ Theme-Tokens ═════════
   rack  = Schaltzentrale schwarz (Standard) · light = hell minimal · dark = dunkel minimal · steam = Steampunk */
:root, :root[data-theme="rack"] {
  --font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-head: "Arial Narrow", "Helvetica Neue", "Roboto Condensed", Arial, sans-serif;
  --head-ls: .24em; --head-tt: uppercase;
  --bg: #111316;
  --bg-img: repeating-linear-gradient(45deg, #ffffff05 0 2px, transparent 2px 6px), radial-gradient(120% 80% at 50% -10%, #272c32, #111316 60%);
  --ink: #d9dee3; --dim: #8a939c; --faint: #5a626b;
  --green: #3ee06f; --amber: #ffb02e; --red: #ff5040; --cyan: #52d6ff; --violet: #b48cff;
  --line: #000; --hi: #4a525b;
  --head-bg: linear-gradient(#2f343a, #1d2024); --head-bd: 0 1px 0 var(--hi);
  --mod-bg: linear-gradient(#2a2f35, #212529); --mod-sh: inset 0 1px 0 var(--hi), inset 0 -1px 0 #14171a, 0 8px 16px #0007;
  --mod-r: 6px; --mod-pad: 30px 14px 14px; --mod-bd: #000;
  --screw: radial-gradient(circle at 35% 30%, #9aa1a8, #3b4046 65%, #1c1f22); --screw-op: 1;
  --mhead: #aab2ba; --mhead-sh: 0 -1px 0 #000, 0 1px 0 #ffffff14; --mhead-accent: var(--amber);
  --ins: #0e1012; --ins2: #16181b; --ins-bd: #000; --ins-sh: inset 0 2px 4px #000, 0 1px 0 var(--hi); --ins-ink: var(--lcd);
  --btn: linear-gradient(#454b52, #2c3035); --btn-bd: #000; --btn-sh: inset 0 1px 0 #6a727a, 0 2px 0 #000; --btn-ink: var(--ink);
  --go: linear-gradient(#2c8c4a, #1b5d30); --danger: linear-gradient(#a03a30, #6a2119); --btn-r: 4px;
  --tabs-bg: #17191c; --tab: linear-gradient(#34393f, #24282c); --tab-on: linear-gradient(#41474e, #2a2e33); --tab-bd: #000;
  --row-alt: #ffffff05; --row-hover: #ffffff0d; --row-line: #00000066; --head-row: #1b1e22;
  --lcd-bg: #0a110b; --lcd: #7dff92; --lcd-amber: #ffc04d; --lcd-cyan: #52d6ff; --lcd-glow: 0 0 6px #4cff6a88; --lcd-bd: #000; --lcd-sh: inset 0 2px 6px #000, 0 1px 0 var(--hi); --scan: .27;
  --led-glow: 7px; --led-off: #3a3e42; --led-hl-mix: 45%; --led-dk-mix: 55%; --led-ring: #000;
  --seg-on: 5px; --seg-pitch: 7px;
  --plate: linear-gradient(#cfd3d7, #8c9298); --plate-ink: #1a1d20; --plate-sh: inset 0 1px 0 #fff9, 0 2px 4px #0009; --plate-pad: 5px 12px; --logo-ink: #1a1d20; --logo-sh: 0 1px 0 #fff8;
  --ann-bg: #0b0d0f; --ann-sh: inset 0 1px 3px #000, 0 1px 0 var(--hi); --ann-bd: #000;
  --gauge-bg: radial-gradient(120% 100% at 50% 100%, #3a3322, #1c1912 70%); --gauge-bd: #000; --gauge-sh: inset 0 0 16px #000, 0 1px 0 var(--hi);
  --g-tick: #8a7f5e; --g-tick5: #e8d9a6; --g-lbl: #cbbd8a; --g-title: #e8d9a6; --g-needle: #ff4d2e; --g-hub: #2a2a2a; --g-hub2: #777; --g-arc: #5a5030;
  --scope-bg: #07100a; --scope-grid: #18401f; --scope-down: #3ee06f; --scope-up: #ffb02e; --scope-txt: #7dff92; --spark: #3ee06f; --scope-glow: 6;
  --topo-bg: #0e1012; --topo-grid: #ffffff08; --node: #2a2f35; --node-bd: #000; --tag-bg: #000;
  --port: #0c0e10; --port-sh: inset 0 0 0 2px #2b3036, inset 0 3px 6px #000; --port-bd: #000;
  --alarm-ink: var(--ink); --note-bg: #101214; --banner-bg: #2b1d10; --banner-err: #2c1512;
  --drawer-bg: #000a; --tog-knob: linear-gradient(#8d949b, #4b5157);
}

:root[data-theme="light"] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font); --head-ls: .08em; --head-tt: uppercase;
  --bg: #f4f5f7; --bg-img: none;
  --ink: #1c2229; --dim: #667085; --faint: #98a2b3;
  --green: #16a34a; --amber: #d97706; --red: #dc2626; --cyan: #0284c7; --violet: #7c3aed;
  --line: #e3e6eb; --hi: #fff;
  --head-bg: #fff; --head-bd: 0 1px 0 #e3e6eb;
  --mod-bg: #fff; --mod-sh: 0 1px 2px #1018280d, 0 1px 3px #1018281a; --mod-r: 10px; --mod-pad: 38px 16px 16px; --mod-bd: #e3e6eb;
  --screw-op: 0; --mhead: #667085; --mhead-sh: none; --mhead-accent: var(--amber);
  --ins: #f4f5f7; --ins2: #f8f9fb; --ins-bd: #e3e6eb; --ins-sh: none; --ins-ink: var(--ink);
  --btn: #fff; --btn-bd: #d0d5dd; --btn-sh: 0 1px 2px #1018280d; --btn-ink: var(--ink);
  --go: #16a34a; --danger: #dc2626; --btn-r: 7px;
  --tabs-bg: #fff; --tab: transparent; --tab-on: #f4f5f7; --tab-bd: transparent;
  --row-alt: #f9fafb; --row-hover: #f1f3f6; --row-line: #eef0f3; --head-row: #fff;
  --lcd-bg: transparent; --lcd: var(--ink); --lcd-amber: var(--amber); --lcd-cyan: var(--cyan); --lcd-glow: none; --lcd-bd: transparent; --lcd-sh: none; --scan: 0;
  --led-glow: 0px; --led-off: #d0d5dd; --led-hl-mix: 100%; --led-dk-mix: 100%; --led-ring: transparent;
  --seg-on: 100px; --seg-pitch: 100px;
  --plate: transparent; --plate-ink: var(--ink); --plate-sh: none; --plate-pad: 0; --logo-ink: #1c2229; --logo-sh: none;
  --ann-bg: #f4f5f7; --ann-sh: none; --ann-bd: #e3e6eb;
  --gauge-bg: #f4f5f7; --gauge-bd: #e3e6eb; --gauge-sh: none;
  --g-tick: #c4cad3; --g-tick5: #667085; --g-lbl: #667085; --g-title: #1c2229; --g-needle: #dc2626; --g-hub: #1c2229; --g-hub2: #fff; --g-arc: #d0d5dd;
  --scope-bg: #f8f9fb; --scope-grid: #e8ebef; --scope-down: #0284c7; --scope-up: #d97706; --scope-txt: #667085; --spark: #0284c7; --scope-glow: 0;
  --topo-bg: #f8f9fb; --topo-grid: #1018280a; --node: #fff; --node-bd: #d0d5dd; --tag-bg: #fff;
  --port: #f4f5f7; --port-sh: none; --port-bd: #d0d5dd;
  --note-bg: #f1f8fd; --banner-bg: #fff7e6; --banner-err: #fdecec; --drawer-bg: #10182855; --tog-knob: #fff;
}

:root[data-theme="dark"] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font); --head-ls: .08em; --head-tt: uppercase;
  --bg: #0e1014; --bg-img: none;
  --ink: #e6e9ee; --dim: #8b93a1; --faint: #5b6270;
  --green: #4ade80; --amber: #fbbf24; --red: #f87171; --cyan: #38bdf8; --violet: #a78bfa;
  --line: #262b33; --hi: #2f3540;
  --head-bg: #14171c; --head-bd: 0 1px 0 #262b33;
  --mod-bg: #161a20; --mod-sh: none; --mod-r: 10px; --mod-pad: 38px 16px 16px; --mod-bd: #262b33;
  --screw-op: 0; --mhead: #8b93a1; --mhead-sh: none; --mhead-accent: var(--amber);
  --ins: #0e1115; --ins2: #12161b; --ins-bd: #262b33; --ins-sh: none; --ins-ink: var(--ink);
  --btn: #1e232b; --btn-bd: #323946; --btn-sh: none; --btn-ink: var(--ink);
  --go: #15803d; --danger: #b91c1c; --btn-r: 7px;
  --tabs-bg: #14171c; --tab: transparent; --tab-on: #1e232b; --tab-bd: transparent;
  --row-alt: #ffffff05; --row-hover: #ffffff0a; --row-line: #1f242b; --head-row: #161a20;
  --lcd-bg: transparent; --lcd: var(--ink); --lcd-amber: var(--amber); --lcd-cyan: var(--cyan); --lcd-glow: none; --lcd-bd: transparent; --lcd-sh: none; --scan: 0;
  --led-glow: 0px; --led-off: #323946; --led-hl-mix: 100%; --led-dk-mix: 100%; --led-ring: transparent;
  --seg-on: 100px; --seg-pitch: 100px;
  --plate: transparent; --plate-ink: var(--ink); --plate-sh: none; --plate-pad: 0; --logo-ink: #e6e9ee; --logo-sh: none;
  --ann-bg: #1a1e25; --ann-sh: none; --ann-bd: #262b33;
  --gauge-bg: #12161b; --gauge-bd: #262b33; --gauge-sh: none;
  --g-tick: #3a4250; --g-tick5: #8b93a1; --g-lbl: #8b93a1; --g-title: #e6e9ee; --g-needle: #f87171; --g-hub: #e6e9ee; --g-hub2: #161a20; --g-arc: #323946;
  --scope-bg: #0e1115; --scope-grid: #1c2129; --scope-down: #38bdf8; --scope-up: #fbbf24; --scope-txt: #8b93a1; --spark: #38bdf8; --scope-glow: 0;
  --topo-bg: #0e1115; --topo-grid: #ffffff07; --node: #1a1e25; --node-bd: #323946; --tag-bg: #12161b;
  --port: #12161b; --port-sh: none; --port-bd: #323946;
  --note-bg: #12161b; --banner-bg: #2a2111; --banner-err: #2b1515; --drawer-bg: #000a; --tog-knob: #e6e9ee;
}

:root[data-theme="steam"] {
  --font: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-head: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --head-ls: .2em; --head-tt: uppercase;
  --bg: #1b120b;
  --bg-img: repeating-linear-gradient(0deg, #00000022 0 1px, transparent 1px 3px), radial-gradient(130% 90% at 50% -10%, #4a3320, #1b120b 65%);
  --ink: #f1e2c1; --dim: #b9a17a; --faint: #7d6a4c;
  --green: #9bd66f; --amber: #f2a93b; --red: #e8583f; --cyan: #6fcfc4; --violet: #cf9fe0;
  --line: #120b06; --hi: #c9a25a;
  --head-bg: linear-gradient(#5a3d24, #34210f); --head-bd: 0 2px 0 #b08d4a, 0 4px 0 #120b06;
  --mod-bg: linear-gradient(145deg, #4b3320, #33210f 70%); --mod-sh: inset 0 0 0 2px #b08d4a, inset 0 0 0 4px #1c1209, inset 0 0 22px #00000099, 0 8px 16px #000a;
  --mod-r: 8px; --mod-pad: 36px 18px 18px; --mod-bd: #120b06;
  --screw: radial-gradient(circle at 35% 30%, #f5dc9a, #b08d4a 55%, #6b4f1f); --screw-op: 1;
  --mhead: #e2c27a; --mhead-sh: 0 -1px 0 #000, 0 1px 0 #ffffff18; --mhead-accent: #ffd58a;
  --ins: #21160c; --ins2: #271a0e; --ins-bd: #7a5c2b; --ins-sh: inset 0 2px 8px #000c, 0 1px 0 #ffffff14; --ins-ink: #ffd58a;
  --btn: linear-gradient(#c79a4a, #8a6428); --btn-bd: #2a1b08; --btn-sh: inset 0 1px 0 #f3d48e, 0 2px 0 #1a1005; --btn-ink: #2a1a07;
  --go: linear-gradient(#6aa14a, #3d6a26); --danger: linear-gradient(#b4452f, #7a2417); --btn-r: 6px;
  --tabs-bg: #261909; --tab: linear-gradient(#7a5530, #4f3519); --tab-on: linear-gradient(#c79a4a, #8a6428); --tab-bd: #120b06;
  --row-alt: #ffffff06; --row-hover: #ffffff10; --row-line: #00000066; --head-row: #2d1e10;
  --lcd-bg: #170d05; --lcd: #ffb64d; --lcd-amber: #ffd27a; --lcd-cyan: #7fe0d4; --lcd-glow: 0 0 8px #ff9a2e99; --lcd-bd: #7a5c2b; --lcd-sh: inset 0 2px 8px #000, 0 1px 0 #ffffff18; --scan: .18;
  --led-glow: 8px; --led-off: #4a3a26; --led-hl-mix: 50%; --led-dk-mix: 50%; --led-ring: #2a1b08;
  --seg-on: 5px; --seg-pitch: 7px;
  --plate: linear-gradient(#d9b567, #a2772f); --plate-ink: #2a1a07; --plate-sh: inset 0 1px 0 #fbe5a5, inset 0 0 0 2px #6b4f1f, 0 2px 4px #000a; --plate-pad: 4px 16px; --logo-ink: #2a1a07; --logo-sh: 0 1px 0 #f7de9c;
  --ann-bg: #170d05; --ann-sh: inset 0 1px 4px #000, 0 0 0 1px #7a5c2b; --ann-bd: #120b06;
  --gauge-bg: radial-gradient(120% 110% at 50% 100%, #f5e8c1, #c9b072 85%); --gauge-bd: #8a6428; --gauge-sh: inset 0 0 0 3px #d9b567, inset 0 0 0 5px #5b4015, inset 0 0 18px #4a360f99;
  --g-tick: #6b5428; --g-tick5: #2a1a07; --g-lbl: #3d2a0c; --g-title: #3d2a0c; --g-needle: #8f1d10; --g-hub: #5b4015; --g-hub2: #e2c27a; --g-arc: #8a6a30;
  --scope-bg: #0f0a04; --scope-grid: #4a3512; --scope-down: #9bd66f; --scope-up: #ffb64d; --scope-txt: #ffd58a; --spark: #ffb64d; --scope-glow: 5;
  --topo-bg: #21160c; --topo-grid: #c9a25a12; --node: #4b3320; --node-bd: #b08d4a; --tag-bg: #170d05;
  --port: #170d05; --port-sh: inset 0 0 0 2px #7a5c2b, inset 0 3px 6px #000; --port-bd: #120b06;
  --note-bg: #21160c; --banner-bg: #3a2711; --banner-err: #3d1a12; --drawer-bg: #000b; --tog-knob: linear-gradient(#e2c27a, #8a6428);
}

/* ═════════ Basis ═════════ */
:root { --gut: 16px; --mono: var(--font); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 14px/1.4 var(--font); min-height: 100vh; background: var(--bg-img), var(--bg); background-attachment: fixed; padding-bottom: 80px; }
button, input, select { font: inherit; color: inherit; }
b { font-weight: 700; }
.dim { color: var(--dim); } .faint { color: var(--faint); }
.g { color: var(--green); } .a { color: var(--amber); } .r { color: var(--red); } .c { color: var(--cyan); }
a { color: var(--cyan); }
.hd, .mhead, .sub, label.f, .tabs button, .btn, .chips button, .ann, .tag, .crow.head, .num small, .gauge small, .devhead h3, .brand small { font-family: var(--font-head); }

/* ── Kopf */
.head { display: flex; align-items: center; gap: 14px; padding: 10px var(--gut); background: var(--head-bg); border-bottom: 2px solid var(--line); box-shadow: var(--head-bd); position: sticky; top: 0; z-index: 30; }
:root[data-theme="light"] .head, :root[data-theme="dark"] .head { border-bottom-width: 1px; }
.plate { background: var(--plate); color: var(--plate-ink); border-radius: 4px; padding: var(--plate-pad); box-shadow: var(--plate-sh); display: flex; gap: 10px; align-items: center; }
.brand { flex-direction: column; align-items: flex-start; gap: 0; }
.brand b { font: 400 32px/1 "Fraktur", "UnifrakturMaguntia", "Old English Text MT", serif; letter-spacing: .01em; color: var(--logo-ink); text-shadow: var(--logo-sh); display: block; }
.brand small { font: 700 9px var(--font-head); letter-spacing: .3em; text-transform: uppercase; opacity: .65; margin-top: 1px; }
.annun { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; justify-content: center; }
.ann { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--ann-bg); border: 1px solid var(--ann-bd); border-radius: 3px; box-shadow: var(--ann-sh); font: 700 10px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
:root[data-theme="light"] .ann, :root[data-theme="dark"] .ann { border-radius: 99px; padding: 3px 10px; }
.clock { font-size: 15px; padding: 4px 10px; white-space: nowrap; }
.themes { display: flex; gap: 6px; padding: 4px 6px; background: var(--ann-bg); border: 1px solid var(--ann-bd); border-radius: 99px; box-shadow: var(--ann-sh); }
.themes button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px #0008; }
.themes button.on { border-color: var(--cyan); }
.themes [data-theme="rack"] { background: linear-gradient(135deg, #2a2f35 50%, #3ee06f 50%); }
.themes [data-theme="light"] { background: linear-gradient(135deg, #fff 50%, #0284c7 50%); box-shadow: 0 0 0 1px #98a2b3; }
.themes [data-theme="dark"] { background: linear-gradient(135deg, #161a20 50%, #38bdf8 50%); box-shadow: 0 0 0 1px #5b6270; }
.themes [data-theme="steam"] { background: linear-gradient(135deg, #8a6428 50%, #ffb64d 50%); }

/* ── LED / LCD */
.led { --c: var(--led-off); --glow: 0px; display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) var(--led-hl-mix), #fff), var(--c) 45%, color-mix(in srgb, var(--c) var(--led-dk-mix), #000));
  box-shadow: 0 0 var(--glow) 1px color-mix(in srgb, var(--c) 75%, transparent), 0 0 0 1px var(--led-ring); }
.led.g { --c: var(--green); --glow: var(--led-glow); } .led.a { --c: var(--amber); --glow: var(--led-glow); } .led.r { --c: var(--red); --glow: var(--led-glow); } .led.c { --c: var(--cyan); --glow: var(--led-glow); }
.led.blink { animation: blink 1s steps(2) infinite; } .led.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } } @keyframes pulse { 50% { opacity: .45; } }
.lcd { background: var(--lcd-bg); color: var(--lcd); border: 1px solid var(--lcd-bd); border-radius: 3px; box-shadow: var(--lcd-sh); text-shadow: var(--lcd-glow); font-variant-numeric: tabular-nums; position: relative; overflow: hidden; }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--scan); background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 3px); }
.lcd.amber { color: var(--lcd-amber); } .lcd.cyan { color: var(--lcd-cyan); }
:root[data-theme="steam"] .lcd { font-family: "Courier New", Courier, monospace; font-weight: 700; }

/* ── Tabs */
.tabs { display: flex; gap: 4px; padding: 8px var(--gut) 0; overflow-x: auto; scrollbar-width: none; background: var(--tabs-bg); border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 13px 9px; background: var(--tab); border: 1px solid var(--tab-bd); border-bottom: 0; border-radius: 6px 6px 0 0; cursor: pointer; font: 700 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); position: relative; top: 1px; }
.tabs button.on { color: var(--ink); background: var(--tab-on); }
.tabs button.on .led { --c: var(--green); --glow: var(--led-glow); }
:root[data-theme="steam"] .tabs button { color: #e8d3a3; } :root[data-theme="steam"] .tabs button.on { color: #2a1a07; }
:root[data-theme="light"] .tabs button.on, :root[data-theme="dark"] .tabs button.on { border-bottom: 2px solid var(--cyan); border-radius: 0; }
:root[data-theme="light"] .tabs button, :root[data-theme="dark"] .tabs button { border-radius: 0; top: 0; }
.tabs em { font-style: normal; background: var(--amber); color: #000; border-radius: 8px; padding: 0 5px; font-size: 10px; }
.tabs em:empty { display: none; }

.banner { margin: 10px var(--gut) 0; padding: 8px 12px; background: var(--banner-bg); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 3px; font-size: 12px; }
.banner.err { background: var(--banner-err); border-left-color: var(--red); }

main { padding: 14px var(--gut); max-width: 1500px; margin: 0 auto; }
.tab { display: none; } .tab.on { display: block; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.span4 { grid-column: span 4; } .span5 { grid-column: span 5; } .span6 { grid-column: span 6; } .span7 { grid-column: span 7; } .span8 { grid-column: span 8; } .span12 { grid-column: span 12; }
@media (max-width: 1000px) { .grid > * { grid-column: span 12 !important; } }

/* ── Modul */
.module { position: relative; background: var(--mod-bg); border: 1px solid var(--mod-bd); border-radius: var(--mod-r); padding: var(--mod-pad); box-shadow: var(--mod-sh); min-width: 0; }
.module::before, .module::after { content: ""; position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--screw); opacity: var(--screw-op); box-shadow: 0 0 0 1px #000; }
.module::before { left: 8px; } .module::after { right: 8px; }
.mhead { position: absolute; top: 6px; left: 28px; right: 28px; display: flex; justify-content: space-between; font: 700 11px var(--font-head); letter-spacing: var(--head-ls); text-transform: var(--head-tt); color: var(--mhead); text-shadow: var(--mhead-sh); }
:root[data-theme="light"] .mhead, :root[data-theme="dark"] .mhead { left: 16px; right: 16px; top: 13px; }
.mhead .count { color: var(--mhead-accent); letter-spacing: .1em; }
:root[data-theme="steam"] .mhead { font-size: 12px; font-style: italic; text-transform: none; letter-spacing: .12em; font-variant: small-caps; }
.sub { font: 700 10px var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin: 14px 0 6px; }
.sub:first-child { margin-top: 0; }

.btn { background: var(--btn); border: 1px solid var(--btn-bd); border-radius: var(--btn-r); padding: 7px 14px; cursor: pointer; box-shadow: var(--btn-sh); font: 700 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--btn-ink); }
.btn:active { transform: translateY(1px); filter: brightness(.9); }
.btn.go { background: var(--go); color: #fff; } .btn.danger { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: .5; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chips button { background: var(--ins); border: 1px solid var(--ins-bd); border-radius: 3px; padding: 5px 10px 5px 22px; position: relative; cursor: pointer; font: 700 10px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); box-shadow: var(--ins-sh); }
.chips button::before { content: ""; position: absolute; left: 8px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--led-off); }
.chips button.on { color: var(--ink); } .chips button.on::before { background: var(--green); box-shadow: 0 0 calc(var(--led-glow) - 1px) var(--green); }
input[type=text], input[type=search], input[type=password], input[type=number], input[type=url], select { background: var(--ins); border: 1px solid var(--ins-bd); border-radius: 3px; padding: 8px 10px; box-shadow: var(--ins-sh); color: var(--ins-ink); width: 100%; min-width: 0; }
:root[data-theme="light"] input, :root[data-theme="dark"] input, :root[data-theme="light"] select, :root[data-theme="dark"] select { border-radius: 7px; }
input:focus, select:focus { outline: 1px solid var(--cyan); }
select { color: var(--ink); width: auto; }
label.f { display: block; font: 700 10px var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 4px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.toolbar input { flex: 1 1 240px; }

/* ── Instrumente */
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gauge { background: var(--gauge-bg); border: 1px solid var(--gauge-bd); border-radius: 6px; box-shadow: var(--gauge-sh); padding: 6px 6px 8px; text-align: center; }
:root[data-theme="steam"] .gauge { border-radius: 50% 50% 8px 8px / 38% 38% 8px 8px; }
.gauge svg { width: 100%; display: block; }
.gauge .needle { transform-origin: 100px 100px; transition: transform 1.1s cubic-bezier(.3, 1.6, .5, 1); }
.gauge .lcd { display: inline-block; padding: 2px 10px; font-size: 18px; margin-top: 2px; }
.g-t { stroke: var(--g-tick); stroke-width: 1; } .g-T { stroke: var(--g-tick5); stroke-width: 2; } .g-arc0 { fill: none; stroke: var(--g-arc); stroke-width: 1; }
.g-l { fill: var(--g-lbl); } .g-ti { fill: var(--g-title); } .g-n { stroke: var(--g-needle); stroke-width: 2.2; stroke-linecap: round; }
.g-h { fill: var(--g-hub); stroke: #000; } .g-h2 { fill: var(--g-hub2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.scope { width: 100%; height: 130px; display: block; background: var(--scope-bg); border: 1px solid var(--ins-bd); border-radius: 4px; box-shadow: var(--ins-sh); }

.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.num { text-align: center; padding: 8px 4px 6px; cursor: pointer; }
.num .lcd { font-size: 30px; padding: 2px 4px; display: block; }
.num small { display: block; margin-top: 5px; font: 700 9px var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

.vu { display: grid; grid-template-columns: minmax(80px, 1.1fr) 3fr auto; gap: 8px; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 1px dashed var(--row-line); cursor: pointer; }
.vu:last-child { border: 0; }
.vu .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 10px; background: var(--ins); border: 1px solid var(--ins-bd); border-radius: 2px; box-shadow: var(--ins-sh); position: relative; overflow: hidden; }
.bar > i { --bc: var(--green); position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--bc) 0 var(--seg-on), transparent var(--seg-on) var(--seg-pitch)); transition: width .8s; }
.bar > i.a { --bc: var(--amber); } .bar > i.r { --bc: var(--red); } .bar > i.c { --bc: var(--cyan); }

.alarms { display: grid; gap: 6px; }
.alarm { display: flex; gap: 10px; align-items: flex-start; padding: 7px 9px; background: var(--ins); border: 1px solid var(--ins-bd); border-radius: 3px; box-shadow: var(--ins-sh); font-size: 12px; cursor: pointer; }
.alarm .led { margin-top: 3px; }
.ticker { display: grid; gap: 4px; font-size: 12px; }
.ev { display: grid; grid-template-columns: 54px 56px 1fr; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--row-line); }
.ev:last-child { border: 0; }
.ev time { color: var(--dim); font-size: 11px; } .ev .tx { color: var(--dim); }

/* ── Clients */
.clist { display: grid; gap: 0; }
.crow { display: grid; grid-template-columns: 22px 120px minmax(120px, 1.4fr) minmax(130px, 1.5fr) minmax(90px, 1fr) 96px 92px 92px 86px; gap: 10px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--row-line); cursor: pointer; font-size: 12px; }
.crow:nth-child(even) { background: var(--row-alt); } .crow:hover { background: var(--row-hover); }
.crow.head { cursor: default; font: 700 10px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); position: sticky; top: 56px; background: var(--head-row); z-index: 2; }
.crow.head:hover { background: var(--head-row); }
.crow .nm { overflow: hidden; } .crow .nm b, .crow .nm small, .crow .where small, .crow .where b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow small { color: var(--dim); font-size: 11px; } .crow .rt { text-align: right; }
.tag { display: inline-block; padding: 0 6px; border-radius: 2px; font: 700 9px var(--font-head); letter-spacing: .12em; text-transform: uppercase; background: var(--tag-bg); border: 1px solid currentColor; vertical-align: 1px; color: var(--dim); }
.tag.a { color: var(--amber); } .tag.c { color: var(--cyan); } .tag.g { color: var(--green); } .tag.r { color: var(--red); } .tag.v { color: var(--violet); }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; vertical-align: middle; margin-right: 6px; }
.sig i { width: 4px; background: var(--led-off); border-radius: 1px; } .sig i:nth-child(1) { height: 25%; } .sig i:nth-child(2) { height: 50%; } .sig i:nth-child(3) { height: 75%; } .sig i:nth-child(4) { height: 100%; }
.sig.s1 i:nth-child(-n+1), .sig.s2 i:nth-child(-n+2), .sig.s3 i:nth-child(-n+3), .sig.s4 i { background: var(--green); }
.sig.s1 i:nth-child(-n+1) { background: var(--red); } .sig.s2 i:nth-child(-n+2) { background: var(--amber); }
@media (max-width: 1100px) {
  .crow.head { display: none; }
  .crow { grid-template-columns: 22px 1fr 1fr; grid-template-areas: "led nm sig" "led where where" "led stat stat"; row-gap: 3px; padding: 10px 6px; }
  .crow > :nth-child(1) { grid-area: led; align-self: start; padding-top: 4px; }
  .crow > :nth-child(2) { display: none; }
  .crow > :nth-child(3) { grid-area: nm; } .crow > :nth-child(4) { grid-area: where; } .crow > :nth-child(5) { grid-area: sig; text-align: right; }
  .crow > :nth-child(n+6) { grid-area: stat; display: inline; text-align: left; }
  .crow .stat { display: flex; gap: 12px; flex-wrap: wrap; grid-area: stat; color: var(--dim); font-size: 11px; }
}
@media (min-width: 1101px) { .crow .stat { display: contents; } .crow .mob { display: none; } }

/* ── Karten */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background: var(--ins2); border: 1px solid var(--ins-bd); border-radius: 5px; padding: 11px 12px; box-shadow: var(--ins-sh); cursor: pointer; min-width: 0; }
.card h4 { margin: 0 0 2px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.card h4 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta { color: var(--dim); font-size: 11px; overflow-wrap: anywhere; }
.card .row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: 6px; flex-wrap: wrap; }
.spark { width: 100%; height: 44px; display: block; margin-top: 8px; background: var(--scope-bg); border-radius: 3px; box-shadow: var(--ins-sh); }
.note { font-size: 12px; color: var(--dim); background: var(--note-bg); border-left: 3px solid var(--cyan); padding: 6px 9px; margin-top: 8px; border-radius: 0 3px 3px 0; }
.empty { color: var(--dim); padding: 24px; text-align: center; font-size: 12px; letter-spacing: .1em; }

/* ── Topologie */
.topo-wrap { overflow: auto; background-color: var(--topo-bg); border: 1px solid var(--ins-bd); border-radius: 5px; box-shadow: var(--ins-sh); background-image: linear-gradient(var(--topo-grid) 1px, transparent 1px), linear-gradient(90deg, var(--topo-grid) 1px, transparent 1px); background-size: 24px 24px; }
.topo-wrap svg { display: block; margin: 0 auto; }
.topo-wrap text { font-family: var(--font); fill: var(--ink); }
.topo-wrap text.d { fill: var(--dim); } .topo-wrap text.cy { fill: var(--cyan); } .topo-wrap text.am { fill: var(--amber); }
.node { cursor: pointer; }
.node rect.body { fill: var(--node); stroke: var(--node-bd); stroke-width: 1.5; }
.node.sel rect.body { stroke: var(--cyan); stroke-width: 2.5; }
.node.off rect.body { fill: color-mix(in srgb, var(--red) 18%, var(--node)); }
.t-lbl { fill: var(--ins); } .t-dev { fill: var(--ink); stroke: var(--dim); } .t-ant { stroke: var(--dim); stroke-width: 2; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--dim); margin: 10px 0 0; }
.legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 5px; }

/* ── Geräte */
.ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 7px; margin: 6px 0; }
.port { aspect-ratio: 1.1; background: var(--port); border: 2px solid var(--port-bd); border-radius: 3px; box-shadow: var(--port-sh); position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--dim); }
.port .led { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; }
.port.up b { color: var(--ink); }
.port.sel { border-color: var(--cyan); }
.port small { font-size: 9px; } .port .ico { position: absolute; left: 3px; top: 1px; font-size: 10px; color: var(--amber); }
.port .ic2 { position: absolute; left: 3px; bottom: 1px; font-size: 10px; color: var(--red); }
.detail { margin-top: 10px; background: var(--ins); border: 1px solid var(--ins-bd); border-radius: 4px; padding: 10px 12px; box-shadow: var(--ins-sh); font-size: 12px; }
.devhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.devhead h3 { margin: 0; font: 800 16px var(--font-head); letter-spacing: .12em; text-transform: uppercase; }
:root[data-theme="steam"] .devhead h3 { text-transform: none; font-variant: small-caps; font-weight: 700; }

.loglist { margin-top: 10px; }
.loglist .ev { grid-template-columns: 120px 64px 1fr; }
@media (max-width: 600px) { .loglist .ev { grid-template-columns: 1fr; gap: 0; } }

/* ── Setup */
.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.swrow { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px dashed var(--row-line); }
.swrow .acts { display: flex; gap: 6px; }
@media (max-width: 700px) { .swrow { grid-template-columns: 1fr 1fr; } }
.testres { font-size: 12px; margin-top: 8px; min-height: 18px; }
.toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12px; }
.toggle input { appearance: none; width: 38px; height: 20px; border-radius: 10px; background: var(--ins); border: 1px solid var(--ins-bd); box-shadow: var(--ins-sh); position: relative; flex: none; cursor: pointer; padding: 0; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--tog-knob); transition: left .15s; }
.toggle input:checked::after { left: 20px; background: var(--green); box-shadow: 0 0 calc(var(--led-glow) + 1px) var(--green); }
.help { font-size: 11px; color: var(--dim); margin-top: 6px; }

/* ── Schublade */
.drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.drawer[hidden] { display: none; }
.drawer-bg { position: absolute; inset: 0; background: var(--drawer-bg); }
.drawer-panel { position: relative; width: min(560px, 100%); height: 100%; overflow-y: auto; border-radius: 0; padding-top: 38px; animation: slide .18s ease-out; background: var(--mod-bg), var(--bg); background-color: var(--bg); }
.drawer-panel .x { position: absolute; top: 4px; right: 22px; padding: 2px 10px; z-index: 2; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer h2 { margin: 0 0 2px; font-size: 18px; overflow-wrap: anywhere; }

/* ── Mobil */
@media (max-width: 720px) {
  :root { --gut: 12px; }
  body { padding-bottom: 76px; }
  .head { padding: 8px var(--gut); gap: 8px; flex-wrap: wrap; }
  .annun { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .brand small { display: none; } .brand b { font-size: 28px; }
  .themes { margin-left: auto; }
  .tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); border-bottom: 0; box-shadow: 0 -4px 12px #0006; }
  .tabs button, :root[data-theme] .tabs button { border: 1px solid var(--tab-bd); border-radius: 6px; top: 0; padding: 7px 10px; flex-direction: column; gap: 4px; min-width: 62px; }
  :root[data-theme="light"] .tabs button.on, :root[data-theme="dark"] .tabs button.on { border: 1px solid var(--cyan); }
  .tabs button span { font-size: 10px; letter-spacing: .08em; }
  .tabs em { position: absolute; top: 1px; right: 2px; }
  .crow.head { top: 0; } .num .lcd { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Benutzer / Konto */
.who { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.who .btn { padding: 4px 10px; }
.urow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--row-line); }
.urow .un small { display: block; font-size: 11px; }
.urow .acts { display: flex; gap: 6px; }
.urow .pwbox { grid-column: 1 / -1; display: flex; gap: 8px; } .urow .pwbox[hidden] { display: none; }
.urow .testres { grid-column: 1 / -1; margin: 0; min-height: 0; }
.tabs [hidden] { display: none; }
@media (max-width: 720px) { .who { order: 2; margin-left: auto; } .who b { display: none; } .urow { grid-template-columns: 1fr 1fr; } .urow .acts { grid-column: 1 / -1; } }