/* patchfeld – Modernist-Stil. Keine Inline-Styles (CSP): Klassen hier, dynamische Farben (VLAN) per CSSOM. */

@font-face { font-family:"Archivo"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-weight:600; font-style:normal; font-display:swap; src:url("/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-weight:800; font-style:normal; font-display:swap; src:url("/fonts/archivo-latin-800-normal.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root {
  --bg:#f3f2f2; --surface:#eae9e9; --fg:#201e1d; --divider:color-mix(in srgb,#201e1d 40%,transparent);
  --muted:color-mix(in srgb,var(--fg) 70%,transparent);
  --accent:#ec3013; --accent-600:#dd2b0f; --accent-700:#ae1800; --accent-800:#7c1405; --accent-100:#fff2ef;
  --n300:#d7d3d3; --n400:#bab6b6; --n500:#9b9797;
  --ok:#1a7f37; --accent-text:#ae1800; /* Rot als Schriftfarbe (Links, Fehler, Löschen) */
  --tag-neutral-bg:#f8f4f4; --tag-neutral-fg:#444141;
  --shadow-md:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);
  --font:"Archivo",system-ui,sans-serif;
  /* Rack bleibt dunkel, in beiden Modi */
  --jack:#2a2f38; --plate:#3a404b; --rackbg:#12151a; --free:#7b8494; --used:#2fbf5b; --pend:#a855f7;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#201e1d; --surface:#2d2b2b; --fg:#f3f2f2; --divider:color-mix(in srgb,#f3f2f2 35%,transparent); --n300:#444141;
  --accent-100:#3a1a14; --accent-800:#ffb4a6; --ok:#4ac26b; --accent-text:#ff8a75; --tag-neutral-bg:#3a3737; --tag-neutral-fg:#f3f2f2;
  color-scheme:dark;
} }

/* ---- Grundstil ---- */
* { box-sizing:border-box; border-radius:0; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 15px/1.55 var(--font); -webkit-text-size-adjust:100%; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
h1 { font:800 36px/1.1 var(--font); margin:0; }
h2 { font:800 20px/1.2 var(--font); margin:0 0 10px; }
h2.page-title { font-size:32px; margin:0; }
h4 { font:800 22px/1.2 var(--font); margin:0; }
h5 { font:800 16px/1.3 var(--font); margin:0; }
h6, .h6 { font:600 13px/1.3 var(--font); text-transform:uppercase; letter-spacing:.08em; margin:0 0 8px; }
.kicker { font:600 11px/1.2 var(--font); text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
a { color:var(--accent-text); }
main { max-width:1200px; margin:0 auto; padding:16px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row.end { justify-content:flex-end; }
.grow { flex:1; }
.muted { color:var(--muted); font-size:13px; }
.empty { color:var(--muted); font-style:italic; }
.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.m0{margin:0}.my12{margin:12px 0}.breakall{word-break:break-all}
.login { max-width:380px; margin:40px auto; }
.printonly { display:none; }
svg.icon { width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em; }

/* ---- Kopfzeile (wird je Seite weiter ausgebaut) ---- */
header.top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-bottom:2px solid var(--divider); background:var(--bg); color:var(--fg); }
header.top h1 { font:800 15px/1.2 var(--font); flex:1; }
header.top small { display:block; font-weight:400; color:var(--muted); font-size:13px; }

/* ---- Karten, Tabellen ---- */
.card { background:var(--surface); padding:16px; border:0; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:8px 6px; font:600 11px/1.3 var(--font); text-transform:uppercase; letter-spacing:.08em; opacity:.6; border-bottom:2px solid var(--divider); vertical-align:bottom; }
td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--divider); vertical-align:top; word-break:break-word; }
@media (hover:hover) { tbody tr:hover { background:color-mix(in srgb,var(--fg) 4%,transparent); } }
tr.port, tr.hit { cursor:pointer; }
td.num { width:3.2rem; font-variant-numeric:tabular-nums; color:var(--muted); }
td.nowrap { white-space:nowrap; }
@media (max-width:640px) { th.hide-sm, td.hide-sm { display:none; } }

/* ---- Bedienelemente ---- */
button, .btn { display:inline-flex; align-items:center; gap:6px; justify-content:flex-start; text-align:left; padding:8px 14px; font:800 14px/1.2 var(--font); border:1px solid var(--divider); background:transparent; color:var(--fg); cursor:pointer; text-decoration:none; }
@media (hover:hover) { button:hover, .btn:hover { background:color-mix(in srgb,var(--fg) 7%,transparent); } }
button:active, .btn:active { background:color-mix(in srgb,var(--fg) 14%,transparent); }
button.primary, .btn.primary, button.ok { background:var(--accent); color:#fff; border-color:var(--accent); }
@media (hover:hover) { button.primary:hover, button.ok:hover { background:var(--accent-600); } }
button.primary:active, button.ok:active { background:var(--accent-700); }
button.ghost, .btn.ghost { border-color:transparent; color:var(--accent); }
@media (hover:hover) { button.ghost:hover { background:color-mix(in srgb,var(--accent) 10%,transparent); } }
button.danger, .btn.danger { color:var(--accent-text); }
button.small, .btn.small { padding:4px 9px; font-size:13px; }
a.btn { color:var(--fg); }
a.btn.primary { color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
input, textarea, select { width:100%; min-height:36px; padding:6px 10px; background:var(--surface); color:var(--fg); border:1px solid var(--divider); font:400 14px/1.4 var(--font); caret-color:var(--accent); }
input:focus, textarea:focus, select:focus { border-color:var(--accent); outline:none; }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; accent-color:var(--accent); }
input[type=color] { padding:2px; min-height:36px; }
label { display:block; font:400 13px/1.3 var(--font); color:var(--muted); margin:10px 0 3px; }

/* Segment-Umschalter (.tabs bleibt als Alias, bis alle Ansichten umgestellt sind) */
.seg, .tabs { display:inline-flex; flex-wrap:wrap; border:1px solid var(--divider); margin-bottom:14px; }
.seg > button, .tabs > button { border:0; border-right:1px solid var(--divider); padding:7px 12px; font:400 13px/1.2 var(--font); }
.seg > button:last-child, .tabs > button:last-child { border-right:0; }
.seg > button.active, .tabs > button.active { background:var(--accent); color:#fff; font-weight:600; }
.seg.full { display:flex; } .seg.full > button { flex:1; justify-content:center; min-height:44px; }

/* Tags und Badges */
.tag, .badge { display:inline-block; font:400 11px/1.4 var(--font); padding:3px 10px; letter-spacing:.02em; margin-right:4px; background:var(--tag-neutral-bg); color:var(--tag-neutral-fg); }
.tag.accent { background:var(--accent-100); color:var(--accent-800); }
.tag.neutral { background:var(--tag-neutral-bg); color:var(--tag-neutral-fg); }
.tag.outline, .badge.rejected { background:transparent; border:1px solid var(--accent); color:var(--accent); }
.tag.pending, .badge.pending { background:var(--pend); color:#fff; }
.badge.approved { background:var(--tag-neutral-bg); color:var(--ok); }
.kind { font:600 11px/1.4 var(--font); padding:2px 8px; background:#2f4a6b; color:#fff; vertical-align:middle; letter-spacing:.04em; text-transform:uppercase; }
.kind.srv { background:#7a5a3a; }
.wire-label { color:#9a6700; font-size:12px; font-weight:600; }
@media (prefers-color-scheme: dark) { .wire-label { color:#e3b341; } }
.vlan { display:inline-block; padding:2px 8px; font:600 11px/1.4 var(--font); background:#2f4a6b; color:#fff; margin-right:4px; }
.vlan.inherited { box-shadow:0 0 0 1px rgba(0,0,0,.35) inset; border:1px dashed rgba(255,255,255,.7); }
.poe { display:inline-block; padding:2px 8px; background:#f2d000; color:#000; font:600 11px/1.4 var(--font); margin-right:4px; }
.tag.sfp { background:#c9ced8; color:#000; } .tag.wan { border:1.5px dashed #12b5cb; background:transparent; } .tag.fiber { background:#7dd3fc; color:#000; }

/* Meldungen, Diff */
.msg { padding:10px 12px; margin:10px 0; background:var(--surface); border-left:2px solid var(--divider); }
.msg.err { color:var(--accent-text); border-left-color:var(--accent); } .msg.ok { color:var(--ok); border-left-color:var(--ok); }
.diff { font-size:14px; } .diff del { color:var(--accent-text); } .diff ins { color:var(--fg); text-decoration:none; font-weight:800; }

/* ---- Dialoge ---- */
dialog { border:2px solid var(--fg); background:var(--bg); color:var(--fg); width:min(520px,100vw); max-height:94dvh; padding:20px; box-shadow:var(--shadow-lg); }
dialog::backdrop { background:rgba(0,0,0,.5); }
.combo-list { list-style:none; margin:4px 0 0; padding:0; max-height:240px; overflow:auto; border:1px solid var(--divider); background:var(--bg); }
.combo-item { padding:9px 10px; cursor:pointer; border-bottom:1px solid var(--divider); } .combo-item:last-child { border-bottom:0; }
@media (hover:hover) { .combo-item.active, .combo-item:hover { background:var(--accent-100); box-shadow:inset 3px 0 0 var(--accent); } }
.combo-head { padding:6px 10px; font-size:12px; color:var(--muted); background:var(--surface); position:sticky; top:0; }
.combo-state { min-height:1.2em; }
.vlan-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.vchip { border:2px solid transparent; font-size:12px; padding:4px 10px; opacity:.55; } .vchip.on { opacity:1; border-color:var(--fg); font-weight:800; }
.swatch { display:inline-block; width:12px; height:12px; vertical-align:middle; } .swatch.wan { background:transparent; border:2px dashed #4fd1ff; } .swatch.ring { background:transparent; border:2px solid var(--used); }
.vlan-ip { display:block; font:400 13px/1.3 var(--mono, ui-monospace, monospace); color:var(--muted); }
.vlan-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--divider); } .vlan-row .swatch { width:22px; height:22px; }
.qr { width:220px; height:220px; background:#fff; padding:6px; }

/* ---- Visualisierung (Rack bleibt dunkel) ---- */
.viz { overflow-x:auto; } svg.rack { width:100%; min-width:760px; height:auto; display:block; } svg.flow { width:100%; min-width:640px; height:auto; display:block; }
.rack-frame { fill:var(--rackbg); stroke:#000; stroke-width:2; }
.plate { fill:var(--plate); stroke:#555d6b; } .plate.switch { fill:#2f4a6b; stroke:#5b86b8; } .plate.server { fill:#5b4636; stroke:#a8845f; }
.plate-name { fill:#fff; font:800 13px "Archivo",system-ui,sans-serif; } .plate-sub { fill:#aab2c0; font:400 11px "Archivo",system-ui,sans-serif; } .plate-sub.wiring { fill:#e3b341; }
.jack { fill:var(--jack); stroke:#0b0d10; stroke-width:1; } .jack.used { stroke:var(--used); stroke-width:2; } .jack.pending { stroke:var(--pend); stroke-width:2; }
.jack-hole { fill:#000; } .jack-num { fill:#c7cdd8; font:400 10px "Archivo",system-ui,sans-serif; text-anchor:middle; }
.led.free { fill:var(--free); } .led.used { fill:var(--used); } .led.pending { fill:var(--pend); }
.port-g { cursor:pointer; outline:none; transition:opacity .2s; } @media (hover:hover) { .port-g:hover .jack, .port-g:focus .jack { fill:#4a5260; stroke:#fff; } }
.port-g.dim { opacity:.28; }
@keyframes blink { 50% { opacity:.25; } } .led.pending { animation:blink 1.2s infinite; }
.vstripe { pointer-events:none; } .sfp-mod { fill:#c9ced8; stroke:#6b7280; stroke-width:.6; } .sfp-latch { fill:#e8710a; }
.wan-ring { fill:none; stroke:#4fd1ff; stroke-width:2; stroke-dasharray:3 2; pointer-events:none; }
.poe-mark { font:400 9px "Archivo",system-ui,sans-serif; text-anchor:middle; fill:#f2d000; pointer-events:none; }
.duplex-clip { fill:#4b5563; stroke:#1f2937; stroke-width:.6; pointer-events:none; } .ferrule { fill:#cfd6e4; stroke:#111827; stroke-width:.6; pointer-events:none; } .ferrule.set { fill:#7dd3fc; }
.ferrule-letter { fill:#111827; font:800 6.5px "Archivo",system-ui,sans-serif; text-anchor:middle; pointer-events:none; }
.ext-link { fill:#4fd1ff; font:800 13px "Archivo",system-ui,sans-serif; pointer-events:none; }
.cable { fill:none; stroke-width:2.6; stroke-linecap:round; opacity:.9; pointer-events:none; transition:opacity .2s; } .cable.back { stroke-dasharray:6 4; } .cable.cross { stroke-width:2.2; opacity:.95; }
.cable-end { stroke:#000; stroke-width:.8; pointer-events:none; }
.c0 { stroke:#e6194b; } .c1 { stroke:#3cb44b; } .c2 { stroke:#4363d8; } .c3 { stroke:#f58231; } .c4 { stroke:#911eb4; } .c5 { stroke:#00a6a6; } .c6 { stroke:#c9a400; } .c7 { stroke:#f032e6; }
.cable-end.c0 { fill:#e6194b; } .cable-end.c1 { fill:#3cb44b; } .cable-end.c2 { fill:#4363d8; } .cable-end.c3 { fill:#f58231; } .cable-end.c4 { fill:#911eb4; } .cable-end.c5 { fill:#00a6a6; } .cable-end.c6 { fill:#c9a400; } .cable-end.c7 { fill:#f032e6; }
.link { fill:none; stroke-width:2.2; opacity:.65; } @media (hover:hover) { .flow-g:hover .link { opacity:1; stroke-width:3.5; } } .flow-g { cursor:pointer; outline:none; }
.node-port { fill:var(--bg); stroke:var(--fg); stroke-width:1.2; } .node-port.pending { stroke:var(--pend); stroke-width:2.4; }
.node-text, .end-text { fill:var(--fg); font:400 12px "Archivo",system-ui,sans-serif; } .node-text { text-anchor:middle; font-weight:600; } .end-text.left { text-anchor:end; }
.col-head { fill:var(--fg); opacity:.6; font:600 10px "Archivo",system-ui,sans-serif; letter-spacing:.08em; } .col-head.mid { text-anchor:middle; } .col-head.right { text-anchor:end; }
.grip { fill:transparent; cursor:grab; touch-action:none; } @media (hover:hover) { .grip:hover { fill:rgba(255,255,255,.08); } } .grip-dots { fill:#aab2c0; font:18px system-ui,sans-serif; text-anchor:end; pointer-events:none; }
.panel-g.dragging { opacity:.85; } .panel-g.dragging .grip { cursor:grabbing; } .drop-line { fill:var(--used); pointer-events:none; }
.grip-handle { cursor:grab; touch-action:none; user-select:none; padding:2px 8px; } .dragging-card { opacity:.6; outline:2px dashed var(--accent); }
.edit-g { cursor:pointer; outline:none; } .edit-hit { fill:rgba(255,255,255,.10); stroke:#aab2c0; stroke-width:.8; } @media (hover:hover) { .edit-g:hover .edit-hit, .edit-g:focus .edit-hit { fill:rgba(255,255,255,.28); } } .edit-glyph { fill:#fff; font:14px system-ui,sans-serif; text-anchor:middle; pointer-events:none; }
svg.rack.wall { min-width:900px; } .wall-head { cursor:pointer; outline:none; } .cab-title { fill:#fff; font:800 17px "Archivo",system-ui,sans-serif; } .cab-sub { fill:#aab2c0; font:400 13px "Archivo",system-ui,sans-serif; }
@media (hover:hover) { .wall-head:hover .cab-title, .wall-head:focus .cab-title { fill:#7dd3fc; text-decoration:underline; } }

/* Legende */
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 10px; font-size:13px; color:var(--muted); } .legend > span { white-space:nowrap; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50% !important; vertical-align:middle; }
.dot.used { background:var(--used); } .dot.free { background:var(--free); } .dot.pending { background:var(--pend); }

/* ---- Übersicht ---- */
.stats { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; } .stat { background:var(--surface); padding:8px 14px; min-width:120px; } .stat b { display:block; font:800 22px/1.2 var(--font); } .stat span { color:var(--muted); font-size:13px; }
.overview-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; margin-bottom:16px; } .cab-card { margin:0; cursor:pointer; border-top:2px solid var(--fg); } @media (hover:hover) { .cab-card:hover { box-shadow:inset 0 0 0 2px var(--accent); } }
.mini-dev { margin-top:10px; } .mini-name { display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:3px; } .mini-name .muted { white-space:nowrap; } .mini-name .kind { margin-left:6px; }
svg.mini { width:100%; height:auto; display:block; max-height:80px; } .mini-port { stroke:#0b0d10; stroke-width:.6; } .mini-port.free { fill:var(--n300); } .mini-port.used { fill:var(--used); } .mini-port.pending { fill:var(--pend); }
.search-row { margin-bottom:14px; }

/* ---- Server & Verbindungen ---- */
.chain-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--divider); } .chain-row:first-of-type { border-top:0; }
.chain { display:flex; align-items:center; gap:4px; flex-wrap:wrap; flex:1; }
.chain-chip { padding:3px 10px; font-size:13px; border:1px solid var(--divider); background:var(--bg); }
.chain-chip.nic { background:#5b4636; color:#fff; border-color:#7a5a3a; font-weight:800; } .chain-chip.srv { background:#7a5a3a; color:#fff; } .chain-chip.sw { background:#2f4a6b; color:#fff; } .chain-chip.pp { background:#3a404b; color:#fff; }
.chain-chip.text { border-style:dashed; } .chain-chip.none { color:var(--muted); border-style:dotted; font-style:italic; }
.chain-arrow { color:var(--muted); font-size:15px; display:inline-flex; flex-direction:column; align-items:center; line-height:1; } .chain-arrow small { font-size:10px; }
.inline-check { gap:6px; white-space:nowrap; font-size:14px; color:var(--muted); margin:0; } .inline-check input { width:auto; }

/* ---- Druck ---- */
@media print {
  body { background:#fff; color:#000; } header.top, .noprint, .tabs, .seg { display:none !important; }
  .printonly { display:block; text-align:center; } .printonly .qr { width:11cm; height:11cm; }
}

/* ---- Techniker-Seite ---- */
header.tech-top { gap:10px; flex-wrap:nowrap; }
header.tech-top .logo { height:30px; width:auto; }
header.tech-top b { flex:1; font:800 15px/1.2 var(--font); }
.tech-title { padding:8px 0 14px; border-bottom:2px solid var(--divider); margin-bottom:14px; }
.tech-title h1 { font:800 28px/1.1 var(--font); margin:4px 0; letter-spacing:-.01em; }
.scanned { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; font-size:13px; }
.scanned .tag { margin:0; }
.searchbox { position:relative; margin-bottom:12px; }
.searchbox .icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; }
.searchbox input { min-height:46px; padding-left:40px; font-size:16px; }
.small { font-size:13px; }

/* Port-Blatt (unten einfahrendes Blatt) */
dialog.sheet { position:fixed; inset:auto 0 0 0; margin:0; width:100%; max-width:640px; margin-inline:auto; max-height:85dvh; overflow:auto; padding:0; border-width:2px 0 0; }
dialog.sheet .sheet-head { display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px; border-bottom:2px solid var(--divider); }
dialog.sheet .sheet-head h2 { flex:1; font:800 20px/1.2 var(--font); margin:0; }
dialog.sheet .sheet-body { padding:14px 16px; display:grid; gap:12px; }
dialog.sheet .sheet-foot { padding:12px 16px 18px; border-top:2px solid var(--divider); display:grid; gap:8px; }
dialog.sheet .sheet-foot button { min-height:48px; justify-content:center; }
.sheet dl { display:grid; grid-template-columns:7.5rem 1fr; gap:6px 12px; margin:0; font-size:14px; }
.sheet dt { color:var(--muted); } .sheet dd { margin:0; word-break:break-word; }
.way { list-style:none; margin:0; padding:0; border-left:2px solid var(--fg); }
.way li { padding:6px 0 6px 14px; position:relative; font-size:14px; }
.way li::before { content:''; position:absolute; left:-6px; top:14px; width:10px; height:10px; background:var(--bg); border:2px solid var(--fg); }
.way li:last-child::before { background:var(--accent); border-color:var(--accent); }
.way li small { display:block; color:var(--muted); }
@media (max-width:640px) { dialog:not(.sheet) { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-width:0; } }
svg.rack.compact { min-width:0; }
.tabs, .seg { margin-bottom:12px; }
@media (max-width:640px) {
  dialog:not(.sheet) form { display:flex; flex-direction:column; min-height:calc(100dvh - 40px); }
  .dlg-actions { position:sticky; bottom:-20px; margin:auto -20px -20px; padding:12px 20px 16px; background:var(--bg); border-top:2px solid var(--fg); flex-wrap:nowrap; }
  .dlg-actions button { flex:1; min-height:48px; justify-content:center; }
  .dlg-actions button.primary { flex:2; }
}

/* ---- Admin-Kopfzeile ---- */
header.admin-top { display:flex; align-items:center; gap:28px; height:60px; padding:0 24px; border-bottom:2px solid var(--divider); background:var(--bg); }
.admin-top .brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; white-space:nowrap; }
.admin-top .logo { height:34px; width:auto; }
.admin-top .brand b { font:800 17px/1 var(--font); }
.admin-nav { display:flex; align-self:stretch; gap:22px; flex:1; overflow-x:auto; }
.admin-nav a { display:flex; align-items:center; gap:6px; color:var(--fg); text-decoration:none; font:400 14px/1 var(--font); white-space:nowrap; }
@media (hover:hover) { .admin-nav a:hover { color:var(--accent-text); } }
.admin-nav a.active { color:var(--accent-text); font-weight:600; box-shadow:inset 0 -3px 0 var(--accent); }
.admin-nav .count { background:var(--accent); color:#fff; font:700 11px/1.4 var(--font); padding:1px 6px; }
.admin-tools { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.admin-tools .btn { min-width:200px; }
kbd { margin-left:auto; font:600 11px/1 var(--font); padding:2px 6px; border:1px solid var(--divider); color:var(--muted); }
@media (max-width:900px) { header.admin-top { gap:14px; padding:0 12px; } .admin-top .brand b, #who, .admin-tools .btn kbd { display:none; } .admin-tools .btn { min-width:0; } }
dialog.cmdk { position:fixed; top:12vh; margin:0 auto; width:min(640px,94vw); padding:0; }
dialog.cmdk input { min-height:52px; border:0; border-bottom:2px solid var(--fg); font-size:17px; }
.cmdk-list { max-height:56vh; overflow:auto; display:flex; flex-direction:column; }
.cmdk-list button { border:0; border-bottom:1px solid var(--divider); padding:10px 16px; font-weight:400; }
.cmdk-list button:first-child { box-shadow:inset 4px 0 0 var(--accent); background:var(--surface); }
.cmdk-list .tag { min-width:3.8rem; text-align:center; }

/* ---- Anträge: Posteingang ---- */
.inbox { display:grid; grid-template-columns:380px minmax(0,1fr); margin:-16px; min-height:calc(100dvh - 62px); }
.inbox-list { border-right:2px solid var(--divider); }
.inbox-head { padding:16px 20px; border-bottom:2px solid var(--divider); display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.inbox-head h3 { font:800 20px/1 var(--font); margin:0; } .inbox-head .seg { margin:0; }
.inbox-row { display:grid; grid-template-columns:1fr auto; gap:8px; width:100%; padding:12px 20px; border:0; border-bottom:1px solid var(--divider); background:transparent; font-weight:400; align-items:start; }
.inbox-row b { display:block; font-weight:800; } .inbox-row small { display:block; font-size:12px; color:var(--muted); }
.inbox-row.sel { background:var(--surface); box-shadow:inset 4px 0 0 var(--accent); }
.inbox-meta { text-align:right; } .inbox-meta small { font-size:11px; }
.pad { padding:16px 20px; }
.inbox-detail { padding:20px 28px; min-width:0; }
.inbox-title { font:800 26px/1.15 var(--font); margin:4px 0 8px; }
.inbox-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; margin-top:20px; }
.h6-gap { margin-top:20px; }
.difftable { width:100%; border-collapse:collapse; } .difftable th { width:150px; font-weight:600; font-size:13px; text-align:left; padding:8px 6px; border-bottom:1px solid var(--divider); vertical-align:top; }
.difftable td { padding:8px 6px; border-bottom:1px solid var(--divider); } .difftable del { color:var(--accent-700); }
.effects { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.effects li { display:grid; grid-template-columns:20px 1fr; gap:8px; font-size:14px; }
.fx-warn svg { color:var(--accent-text); } .fx-ok svg { color:var(--ok); }
.who { font:800 18px/1.2 var(--font); }
.reason { border-left:2px solid var(--fg); padding-left:10px; margin-top:12px; } 
.actions { display:grid; gap:8px; margin-top:12px; } .actions button, .actions a { justify-content:flex-start; } .actions button kbd { margin-left:auto; color:inherit; border-color:currentColor; opacity:.8; }
.actions .primary { min-height:46px; }
.port-g.dim { opacity:.28; } .port-g.hl .jack { stroke:var(--accent); stroke-width:3; }
@media (max-width:900px) { .inbox { grid-template-columns:1fr; margin:-16px; } .inbox-list { border-right:0; border-bottom:2px solid var(--divider); } .inbox-grid { grid-template-columns:1fr; } .inbox-detail { padding:16px; } }

/* ---- Schrank mit Inspektor ---- */
.cab-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-bottom:16px; margin-bottom:16px; border-bottom:2px solid var(--divider); }
.crumbs { font-size:12px; color:var(--muted); } .crumbs a { color:var(--muted); }
.cab-head h2 { font:800 28px/1.15 var(--font); } .cab-head .loc { font:400 18px/1 var(--font); margin-left:12px; }
.menu-wrap { position:relative; } .menu { position:absolute; right:0; top:calc(100% + 4px); z-index:20; background:var(--bg); border:2px solid var(--fg); display:grid; min-width:160px; }
.menu button { border:0; border-bottom:1px solid var(--divider); } .menu button:last-child { border-bottom:0; }
.cab-grid { display:block; } .cab-grid.with-insp { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:0; }
.cab-grid.with-insp .cab-main { padding-right:24px; }
.cab-grid:not(.with-insp) .inspector { display:none; }
.inspector { border-left:2px solid var(--divider); padding-left:20px; align-self:start; position:sticky; top:12px; max-height:calc(100dvh - 24px); overflow:auto; }
.insp-head { display:flex; gap:6px; align-items:flex-start; padding-bottom:10px; } .insp-head h3 { font:800 26px/1.1 var(--font); margin:2px 0 0; }
button.sq { width:36px; height:36px; padding:0; justify-content:center; }
.inspector section { border-top:2px solid var(--fg); padding-top:2px; margin-top:12px; } .inspector h6 { margin:10px 0 8px; }
.inspector .way li { font-size:13px; }
.insp-form label { display:block; margin-top:10px; font-size:13px; font-weight:600; } .insp-form .muted { font-size:11px; }
.insp-hist { display:grid; gap:6px; font-size:12px; } .hrow { display:grid; grid-template-columns:70px 1fr; gap:8px; }
.switch-label { font-size:13px; display:flex; align-items:center; gap:6px; }
.port-g.sel .jack { stroke:var(--accent); stroke-width:3; }
dialog.qr-dialog { width:min(420px,100vw); } dialog.qr-dialog img.qr { width:220px; height:220px; display:block; }
@media (max-width:899px) { .cab-grid.with-insp { display:block; } .inspector { display:none; } }
main#main { max-width:1600px; padding:16px 24px; }

/* ---- Server & Verbindungen: Wege ---- */
.srv-sec { border-top:2px solid var(--fg); margin-top:24px; padding-top:12px; }
.path-row { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:16px; border-top:1px solid var(--divider); padding:14px 0 12px; align-items:center; }
.stations { display:flex; align-items:flex-start; overflow-x:auto; padding-bottom:2px; }
.station { display:flex; gap:8px; align-items:flex-start; flex:none; max-width:210px; }
.station b { display:block; font:600 13px/1.3 var(--font); } .station small { display:block; font-size:11px; color:var(--muted); }
.station.nic b, .station.sw b { font-weight:800; }
.sq14 { flex:none; width:14px; height:14px; margin-top:2px; border:2px solid var(--fg); background:transparent; }
.station.nic .sq14 { background:var(--accent); border-color:var(--accent); } .station.sw .sq14 { background:var(--fg); }
.station.txt .sq14 { border-style:dashed; } .station.none .sq14 { border-style:dotted; border-color:var(--muted); }
.path-wire { flex:1; min-width:40px; padding:0 8px; text-align:center; }
.path-wire .wire-line { display:block; height:4px; background:var(--fg); margin-top:6px; }
.path-wire small { font:400 10px/1.6 var(--font); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.path-row.off .path-wire .wire-line { background:var(--divider); }
.path-side { font:600 12px/1.5 var(--font); display:grid; gap:4px; justify-items:start; }
.st-ok { color:var(--ok); } .st-bad { color:var(--accent-700); }
@media (max-width:900px) { .path-row { grid-template-columns:1fr; } }

/* ---- Übersicht ---- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border-top:2px solid var(--fg); border-bottom:2px solid var(--divider); margin-bottom:20px; }
.kpi { padding:16px 20px 18px 0; margin-right:20px; border-right:1px solid var(--divider); } .kpi:last-child { border-right:0; margin-right:0; }
.kpi.link { cursor:pointer; }
.kpi-l { display:block; font:600 11px/1.2 var(--font); text-transform:uppercase; letter-spacing:.08em; }
.kpi b { display:block; font:800 44px/1 var(--font); margin:8px 0 6px; } .kpi b.accent { color:var(--accent-text); } .kpi b.good { color:var(--ok); }
.kpi small { font-size:12px; color:var(--muted); }
input.big-search { min-height:54px; font-size:18px; margin-bottom:6px; }
.ov-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; margin-top:20px; align-items:start; }
.cab-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cab-card2 { background:var(--surface); padding:16px; cursor:pointer; display:flex; flex-direction:column; gap:10px; }
.cab-card2 h4 { font:800 20px/1.2 var(--font); }
.util { display:flex; align-items:center; gap:10px; } .bar { flex:1; height:6px; background:var(--divider); } .bar-fill { display:block; height:100%; background:var(--fg); }
.card-foot { display:flex; justify-content:space-between; border-top:1px solid var(--divider); padding-top:8px; margin-top:auto; } .go { color:var(--accent-text); }
.tidy-row { display:grid; grid-template-columns:20px 1fr auto; gap:10px; padding:10px 0; border-top:1px solid var(--divider); align-items:start; } .tidy-row svg { color:var(--accent-text); margin-top:2px; }
.cross-row { display:grid; gap:2px; padding:8px 0; border-top:1px solid var(--divider); font-size:13px; cursor:pointer; }
h5 { font:800 16px/1.2 var(--font); }
@media (max-width:900px) { .ov-grid, .cab-cards { grid-template-columns:1fr; } }

/* ---- History ---- */
.hist-filter { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.hist-filter input.hist-search { width:280px; } .hist-filter select { width:auto; min-width:180px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font:400 13px/1.2 var(--font); padding:6px 10px; border:1px solid var(--divider); background:transparent; }
.chip.on { background:var(--surface); border-color:var(--fg); font-weight:600; }
.day-head { display:flex; align-items:baseline; gap:12px; border-top:2px solid var(--fg); padding:10px 0 6px; margin-top:16px; }
.hist-row { display:grid; grid-template-columns:52px 28px 1fr; gap:10px; padding:8px 0; align-items:start; }
.hist-row .time { font-size:13px; }
.hist-ico { width:24px; height:24px; display:grid; place-items:center; background:var(--surface); color:var(--fg); }
.hist-ico.requests { background:var(--accent-100); color:var(--accent-800); } .hist-ico.approved { background:var(--fg); color:var(--bg); } .hist-ico.rejected { background:var(--accent); color:#fff; }
.chip-diff { background:var(--surface); font-size:12px; padding:2px 8px; } .chip-diff del { color:var(--muted); }
.hist-row .chips { margin-top:4px; }

/* ---- Antrag: Kacheln, Meine Meldungen ---- */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
.tile { flex-direction:column; align-items:flex-start; gap:10px; padding:14px; min-height:84px; border:2px solid var(--divider); font-weight:400; }
.tile svg { width:22px; height:22px; } .tile.on { border-color:var(--accent); background:var(--accent-100); color:var(--accent-800); }
.mine { margin-top:20px; border-top:2px solid var(--fg); }
.mine-row { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--divider); }
.mine-row small { display:block; color:var(--muted); font-size:12px; }
.hist-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
.travel { border-left:2px solid var(--divider); padding-left:20px; position:sticky; top:12px; } .travel h3 { font:800 22px/1.2 var(--font); margin:4px 0 12px; }
.travel input[type=range] { accent-color:var(--accent); padding:0; min-height:28px; border:0; background:transparent; }
@media (max-width:900px) { .hist-grid { grid-template-columns:1fr; } .travel { border-left:0; padding-left:0; position:static; } }
.mine-row .badge { align-self:flex-start; }

/* ---- Mobil (Admin) ---- */
[hidden] { display:none !important; }
@media (max-width:900px) {
  header.admin-top { flex-wrap:wrap; height:auto; gap:0 12px; padding:8px 12px 0; }
  .admin-top .brand { order:1; flex:1; } .admin-top .brand b { display:inline; font-size:15px; }
  .admin-tools { order:2; gap:6px; }
  .admin-tools .btn { padding:8px; } .admin-tools .btn .cmdk-text { display:none; }
  .admin-nav { order:3; width:100%; flex:none; gap:18px; margin:6px -12px 0; padding:0 12px; height:44px; border-top:1px solid var(--divider); }
  main#main { padding:12px 12px 24px; }
  .cab-head { gap:6px; } .cab-head > .grow { flex-basis:100%; }
  .cab-head h2 { font-size:22px; } .cab-head .loc { display:block; margin:2px 0 0; font-size:14px; }
  .cab-head > button, .cab-head > a.btn, .cab-head .menu-wrap > button { padding:8px 10px; font-size:13px; }
  .menu { left:0; right:auto; }
  .kpi b { font-size:32px; }
  .stats { gap:8px; }
  .inbox { margin:-12px; }
  .hist-filter input.hist-search, .hist-filter select { width:100%; }
  .row { flex-wrap:wrap; }
  .path-row .stations { padding-bottom:6px; }
  .cmdk-list button { text-align:left; }
}
@media (max-width:900px) {
  .inbox-detail { overflow-x:hidden; }
  .inbox-grid > * { min-width:0; }
  .difftable { table-layout:fixed; } .difftable th { width:90px; } .difftable td { word-break:break-word; }
  .effects li span { min-width:0; word-break:break-word; }
  .kpi { margin-right:0; padding:12px 12px 14px 0; }
  .kpi:nth-child(even) { padding-left:12px; border-right:0; }
}

/* ---- Hamburger-Menü (mobil) ---- */
.burger, .admin-nav .nav-logout, .admin-nav .nav-account { display:none; }
@media (max-width:1340px) { /* acht Reiter: das Hamburger-Menü früher */
  header.admin-top { position:relative; flex-wrap:nowrap; height:56px; padding:0 12px; gap:8px; align-items:center; }
  .admin-top .brand { flex:1; min-width:0; } .admin-top .brand b { font-size:15px; overflow:hidden; text-overflow:ellipsis; }
  .admin-tools { order:2; } #who, #logout { display:none; }
  .burger { display:inline-flex; padding:8px; } .burger .icon { width:22px; height:22px; }
  .admin-nav { display:none; position:absolute; z-index:30; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; height:auto; margin:0; padding:0; background:var(--bg); border-top:0; border-bottom:2px solid var(--fg); box-shadow:var(--shadow-lg); overflow:visible; }
  header.admin-top.open .admin-nav { display:flex; }
  .admin-nav a { padding:16px 16px; font-size:16px; border-bottom:1px solid var(--divider); box-shadow:none; justify-content:space-between; }
  .admin-nav a.active { box-shadow:inset 4px 0 0 var(--accent); background:var(--surface); }
  .admin-nav .nav-account { display:flex; }
  .admin-nav .nav-logout { display:flex; color:var(--accent-text); font-weight:600; border-bottom:0; }
}

/* ---- Antrag-Dialog (Entwurf 1b) ---- */
dialog.req-dialog { padding:0; width:min(560px,100vw); }
dialog.req-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
.req-form, dialog:not(.sheet) form.req-form { display:flex; flex-direction:column; min-height:0; flex:1; }
.req-head { display:flex; gap:12px; align-items:flex-start; padding:16px 20px 12px; border-bottom:2px solid var(--divider); }
.req-head h2 { font:800 26px/1.15 var(--font); margin:0 0 2px; }
.req-body { overflow:auto; flex:1; padding:16px 20px 20px; }
.req-body h6 { margin:18px 0 10px; } .req-body > h6:first-child { margin-top:0; }
.req-foot { border-top:2px solid var(--fg); padding:12px 20px 16px; background:var(--bg); }
.req-preview { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; margin-bottom:12px; }
.req-preview del { color:var(--muted); }
button.primary.send { width:100%; min-height:52px; font-size:16px; justify-content:flex-start; }
button.primary.send .icon { margin-left:auto; width:22px; height:22px; }
.fine { font-size:11px; margin:10px 0 0; }
.req-sect { margin-top:4px; }
.more-btn { width:100%; min-height:48px; margin:16px 0 4px; justify-content:space-between; font-weight:600; }
.req-more { padding-top:4px; }
.fld { margin-bottom:6px; } .fld > label { display:block; margin:12px 0 4px; font-size:13px; font-weight:600; }
.req-who { display:flex; gap:12px; align-items:center; padding:12px 0; margin-top:14px; border-top:1px solid var(--divider); }
.req-who .icon { width:22px; height:22px; }
.req-ident label { display:block; margin:12px 0 4px; font-size:13px; font-weight:600; }
.bc-was { font-size:13px; margin-bottom:6px; } .bc-was del { color:var(--accent-700); }
.bc-input { position:relative; } .bc-input .icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); }
.bc-input input { min-height:44px; font-size:17px; }
.bc-head { font-size:12px; color:var(--muted); margin:10px 0 4px; }
.bc-list { display:flex; flex-direction:column; border-top:1px solid var(--divider); }
.bc-row { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; width:100%; min-height:56px; padding:10px 8px; border:0; border-bottom:1px solid var(--divider); background:transparent; font-weight:400; }
.bc-row .icon { width:22px; height:22px; margin-top:2px; color:var(--muted); } .bc-row b { display:block; font:600 15px/1.3 var(--font); } .bc-row small { display:block; font-size:12px; color:var(--muted); }
.bc-row.on { background:var(--accent-100); } .bc-row.on .icon { color:var(--accent); }
.bc-row.busy { opacity:.55; cursor:not-allowed; }
@media (max-width:640px) { dialog.req-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-width:0; } }

/* ---- Port-Blatt (Nacharbeit), Karten ohne linke Beschriftung ---- */
.sheet-grip { width:40px; height:4px; background:var(--divider); margin:8px auto 0; }
dialog.sheet .sheet-foot { grid-template-columns:1fr auto; }
dialog.sheet .sheet-foot button { justify-content:flex-start; }
dialog.sheet .sheet-foot button.primary .icon { margin-left:auto; }
dialog.sheet .sheet-foot button.primary { padding-right:14px; min-width:0; }
.tags { display:flex; flex-wrap:wrap; gap:6px; } .tags .tag { margin:0; }
.dev-card { padding-top:12px; } .dev-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .dev-head h5 { font:800 16px/1.2 var(--font); margin:0; }
.dev-meta { margin:2px 0 8px; }
dialog.confirm-dlg { width:min(420px,94vw); }
dialog.confirm-dlg h2 { font:800 22px/1.2 var(--font); margin:0 0 8px; }
.bc-row .warn, .req-displace .warn { color:var(--accent-text); }
.req-displace { margin-top:6px; } .req-displace .msg { margin:6px 0 10px; font-size:13px; }

/* ---- Gestell-Ansicht (HE) ---- */
svg.rack-u { min-width:560px; }
.plate.router { fill:#4a3a6b; stroke:#8a76b8; }
.u-empty { fill:#1b2029; stroke:#2c3342; } .u-empty.clickable { cursor:pointer; } @media (hover:hover) { .u-empty.clickable:hover { fill:#232a37; stroke:var(--accent); } }
.u-num { fill:#8b94a3; font:10px "Archivo",system-ui,sans-serif; }
.u-dev { cursor:pointer; outline:none; } @media (hover:hover) { .u-dev:hover .plate, .u-dev:focus .plate { stroke:var(--accent); stroke-width:2; } }
.schuko { fill:#e8e6e1; stroke:#8a8782; stroke-width:1.2; } .schuko-pin { fill:#1c1c1c; } .schuko-earth { fill:#9a9791; }
.blocked-cover { stroke:#d92d20; stroke-width:1.6; stroke-dasharray:4 3; pointer-events:none; }
.mini-port.blocked { stroke:#d92d20; stroke-width:1; stroke-dasharray:2 1.5; }
.swatch.blocked { background:repeating-linear-gradient(45deg,#d92d20 0 3px,#161616 3px 6px); border:1px dashed #d92d20; }
.tag.blocked { background:repeating-linear-gradient(45deg,#d92d20 0 4px,#161616 4px 8px); color:#fff; border:1px dashed #d92d20; font-weight:700; text-shadow:0 0 3px #000, 0 0 3px #000; }
.kind.rt { background:#4a3a6b; } .kind.ups { background:#7a3b2e; } .kind.pdu { background:#2f5d4a; } .kind.blank { background:#4b5563; }
.plate.ups { fill:#7a3b2e; stroke:#c0715f; } .plate.pdu { fill:#2f5d4a; stroke:#6ba58b; } .plate.blank { fill:#2a2d33; stroke:#4b5563; }
.chain-chip.rt { background:#4a3a6b; color:#fff; }

svg.rack-u { max-width:760px; }
svg.rack-u.compact { min-width:0; }

/* ---- Sammelantrag (Techniker) ---- */
.draftbar { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; gap:10px; align-items:center; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--bg); border-top:2px solid var(--accent); box-shadow:var(--shadow-lg); }
.draftbar .draft-text { flex:1; min-width:0; } .draftbar small { display:block; color:var(--muted); font-size:12px; }
.draftbar button.primary { min-height:46px; }
body.has-draftbar main { padding-bottom:96px; }
.foot-actions { display:grid; gap:8px; margin-bottom:6px; }
.draft-btn { width:100%; min-height:46px; justify-content:center; }
.draft-item { border-bottom:1px solid var(--divider); padding:12px 0; } .draft-item .req-preview { margin:8px 0 0; }
.draft-n { display:inline-grid; place-items:center; width:22px; height:22px; background:var(--accent); color:#fff; font:700 12px/1 var(--font); }
@media (min-width:700px) { .foot-actions { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .draftbar { flex-wrap:wrap; } .draftbar .draft-text { flex-basis:100%; } .draftbar button.primary { flex:1; justify-content:center; } }

.batch-item { border-top:2px solid var(--fg); padding:12px 0 8px; margin-top:12px; } .batch-item .row { gap:10px; margin-bottom:8px; } .batch-item .difftable { margin-bottom:8px; }
.batch-item input[type=checkbox] { width:20px; height:20px; accent-color:var(--accent); }

/* ---- QR-Aushang (A4 hoch, eine Seite je Schrank); nur im Druck sichtbar ---- */
#qa-root { display:none; }
@page qa { size:A4 portrait; margin:0; }
@media print {
  body.printing-qa > *:not(#qa-root) { display:none !important; }
  body.printing-qa #qa-root { display:block; }
  body.printing-qa { background:#fff; }
}
.qa-page { page:qa; display:flex; flex-direction:column; box-sizing:border-box; width:210mm; height:297mm; padding:13mm 15mm 11mm; background:#fff; color:#201e1d; font-family:var(--font); overflow:hidden; break-after:page; }
.qa-page:last-child { break-after:auto; }
.qa-page, .qa-page * { -webkit-print-color-adjust:exact; print-color-adjust:exact; } /* sonst fehlen im Druck alle Hintergründe (Badge, Ziffern, B-Feld) */
.qa-head { display:flex; align-items:center; gap:5mm; padding-bottom:4mm; border-bottom:2px solid #201e1d; }
.qa-head img { height:15mm; width:auto; display:block; }
.qa-org { flex:1; display:flex; flex-direction:column; gap:1mm; } .qa-name { font:800 17pt/1.1 var(--font); } .qa-sub { font:400 10.5pt/1.2 var(--font); color:#555150; }
.qa-badge { background:#ec3013; color:#fff; font:800 9pt/1 var(--font); letter-spacing:.1em; text-transform:uppercase; padding:2.2mm 3mm; }
.qa-main { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9mm; align-items:start; padding:8mm 0 7mm; border-bottom:1px solid #9b9797; }
.qa-qr { display:flex; flex-direction:column; gap:2.5mm; align-items:center; }
.qa-qrbox { border:2px solid #201e1d; padding:3mm; background:#fff; } .qa-qrbox img { width:72mm; height:72mm; display:block; image-rendering:pixelated; }
.qa-url { font:400 8.5pt/1.3 var(--font); color:#555150; max-width:78mm; text-align:center; word-break:break-all; }
.qa-text { display:flex; flex-direction:column; gap:4mm; padding-top:2mm; }
.qa-kicker { font:600 9pt/1.2 var(--font); letter-spacing:.1em; text-transform:uppercase; color:#ec3013; } .qa-kicker.dark { color:#ae1800; }
.qa-text h1 { font:800 30pt/1.05 var(--font); margin:0; letter-spacing:-.01em; text-wrap:balance; word-break:break-word; }
.qa-text p { font:400 12pt/1.45 var(--font); margin:0; text-wrap:pretty; }
.qa-note { display:flex; align-items:center; gap:3mm; margin-top:2mm; padding:3mm 4mm; background:#f3f2f2; } .qa-note i { width:3mm; height:3mm; background:#ec3013; flex:none; } .qa-note span { font:600 10pt/1.35 var(--font); }
.qa-steps { padding-top:6mm; } .qa-steps h2 { font:600 10pt/1.2 var(--font); letter-spacing:.08em; text-transform:uppercase; margin:0 0 4mm; }
.qa-steps ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5mm 8mm; }
.qa-steps li { display:grid; grid-template-columns:8mm 1fr; gap:3mm; }
.qa-n { width:8mm; height:8mm; display:grid; place-items:center; background:#201e1d; color:#fff; font:800 12pt/1 var(--font); }
.qa-steps li b { display:block; font:800 11.5pt/1.3 var(--font); } .qa-steps li span:not(.qa-n) { font:400 10pt/1.4 var(--font); color:#3d3a39; }
.qa-multi { margin-top:7mm; border:2px solid #ec3013; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6mm; padding:5mm 6mm; align-items:center; }
.qa-multi > div:first-child { display:flex; flex-direction:column; gap:2mm; } .qa-multi b { font:800 13pt/1.25 var(--font); } .qa-multi span:not(.qa-kicker) { font:400 10pt/1.45 var(--font); color:#3d3a39; text-wrap:pretty; }
.qa-ab { display:flex; align-items:center; gap:2.5mm; } .qa-multi .qa-ab span { width:13mm; height:13mm; display:grid; place-items:center; font:800 14pt/1 var(--font); color:#201e1d; }
.qa-multi .qa-ab .a { border:2px solid #201e1d; } .qa-multi .qa-ab .b { background:#201e1d; color:#fff; } .qa-multi .qa-ab .arrow { width:auto; height:auto; color:#ec3013; font-size:24pt; line-height:1; }
.qa-fill { flex:1; }
.qa-foot { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:2px solid #201e1d; }
.qa-foot > div { display:flex; flex-direction:column; gap:1.5mm; padding:3.5mm 0 0 6mm; } .qa-foot > div:first-child { padding:3.5mm 6mm 0 0; border-right:1px solid #9b9797; }
.qa-label { font:600 8pt/1.2 var(--font); letter-spacing:.1em; text-transform:uppercase; color:#555150; }
.qa-foot span:not(.qa-label) { font:400 9.5pt/1.4 var(--font); text-wrap:pretty; } .qa-foot .strong { font-weight:600; word-break:break-word; }

table.port-cfg { width:100%; border-collapse:collapse; font-size:13px; margin:6px 0 10px; } table.port-cfg th { text-align:left; font:600 11px/1.2 var(--font); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:4px 6px; border-bottom:1px solid var(--divider); } table.port-cfg td { padding:5px 6px; border-bottom:1px solid var(--divider); vertical-align:top; word-break:break-word; }

/* ---- Gerät anlegen (Techniker) ---- */
.addpanel { width:100%; min-height:48px; justify-content:center; margin:4px 0 12px; }
.pd-fields .fld, .pd-fields label { display:block; } .pd-fields > label { margin:12px 0 4px; font-size:13px; font-weight:600; }
.pc-details { margin-top:16px; border-top:2px solid var(--fg); padding-top:10px; } .pc-details summary { font:800 15px/1.3 var(--font); cursor:pointer; padding:6px 0; }
.pc-tool { display:grid; gap:8px; background:var(--surface); padding:12px; margin:10px 0; } .pc-tool-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pc-list { display:grid; gap:10px; }
.pc-row { display:grid; grid-template-columns:2rem 1fr; gap:6px 10px; padding:10px 0; border-top:1px solid var(--divider); align-items:center; }
.pc-row .pc-n { grid-row:span 5; align-self:start; padding-top:8px; } .pc-row input[type=text] { grid-column:2; } .pc-poe { grid-column:2; font-size:13px; display:flex; gap:6px; align-items:center; }

/* Admin-Liste: mobil als gestapelte Karten statt gequetschter Tabelle */
@media (max-width:640px) {
  .admins-table thead { display:none; }
  .admins-table, .admins-table tbody, .admins-table tr, .admins-table td { display:block; width:100%; }
  .admins-table tr { padding:12px 0; border-bottom:1px solid var(--divider); }
  .admins-table td { padding:2px 0; border:0; word-break:break-word; }
  .admins-table td.nowrap { white-space:normal; display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
}

/* Endgeräte */
.ep-card { margin-bottom:12px; } .ep-way summary { cursor:pointer; margin-top:8px; color:var(--accent-text); font-weight:600; } .ep-way .way { margin-top:8px; }
.way-ep { font-weight:600; } .way-ep small { display:block; font-weight:400; color:var(--muted); } .ep-search { max-width:420px; margin-bottom:12px; }
.warn { color:var(--accent-text); }

/* Aufräumen: Verbindung ins Leere */
dialog.deadend .deadend-body { padding:4px 2px; } .way li.way-open { color:var(--accent-text); } .way li.way-open b { display:block; }
.way li.way-open .primary { margin-top:6px; } .way li.way-open::before { background:var(--accent); border-color:var(--accent); }
.end-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .way li.way-open.accepted { color:var(--muted); } .way li.way-open.accepted::before { background:var(--bg); border-color:var(--muted); }
.tidy-actions { display:flex; flex-direction:column; gap:6px; }

.cable.xside { stroke-dasharray:9 3 2 3; }
label.check { display:flex; align-items:center; gap:8px; font-weight:600; margin-top:10px; } label.check input { width:auto; min-height:0; }

/* iPad/iPhone: Taps sofort als Klick behandeln (kein Doppeltipp-Zoom), keine graue Tipp-Markierung */
.port-g, tr.port, tr.hit, .flow-g, .edit-g, button, .btn, .combo-item, .bc-row { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

.jumps { display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:6px 0 10px; } .jumps .jump { justify-content:flex-start; } .jumps .jump .icon { margin-right:4px; }

.way li.way-self { font-weight:700; } .way li.way-self small { font-weight:400; }
.stat.click{cursor:pointer}.stat.click:hover{background:var(--surface-2,#3a3736)}
.todo-text{text-decoration:line-through;color:var(--muted,#8a8685)}
.todo-done{opacity:.8}
.plate.todo { stroke:#ff2d2d; stroke-width:3.5; }
.todo-ring { fill:none; stroke:#ff2d2d; stroke-width:3.5; pointer-events:none; }
.mini-port.todo { stroke:#ff2d2d; stroke-width:2; }
.todo-dev { color:#ff4d4d; font-weight:800; }