/* ==========================================================================
   RACKPLAN — DCIM Rack-Planer · Styles
   Design-System: ServBen. Nur :root-Variablen, eckig, DM-Fonts (self-hosted
   über das ServBen-Theme, same-origin — kein CDN).
   ========================================================================== */

/* ---- Fonts: identisch zum ServBen-Theme, same-origin referenziert -------- */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-mono-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-mono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-mono-500-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-sans-300.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-sans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-sans-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://servben.com/wp-content/themes/servben/assets/fonts/dm-serif-display-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Design-Tokens ------------------------------------------------------- */
:root{
  --white:#FAFAF8; --nude-light:#F4EFE9; --nude:#EDE8E1; --nude-dark:#D9D1C7;
  --sand:#C4B9AC; --ink:#1C1C1A; --ink-soft:#3D3D3A; --ink-mute:#67655F;
  --line:#938B81;        /* Rahmen von Bedienelementen — 3:1 auf Weiß (WCAG 1.4.11) */
  --red-txt:#A8452A;     /* Rot als SCHRIFT bzw. hinter weißer Schrift — 4,5:1 */
  --red-on-dark:#D4795C; /* Rot als Schrift auf dem dunklen Chassis — dort braucht es einen HELLEREN Ton */
  --green:#2D6A4F; --red:#C45E3E; --blue:#3A6FB0;
  --chassis:#26251f; --chassis-hi:#2f2d25; --chassis-line:#3a382f;
  --glyph:#8f897d; --glyph-2:#6f6a60;
  --u-cell:30px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#e7e2da;color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  padding:0;overflow:hidden}
.mono{font-family:'DM Mono',ui-monospace,monospace}
input,select,button{font-family:inherit}
/* Selects als Dropdown erkennbar: eigenes Chevron rechts (nativer Pfeil ist entfernt).
   !important, da die .input/.selbox-Klassen background als Shorthand setzen (überschreibt sonst das Icon). */
select{-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%237A7873' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 9px center!important;background-size:10px!important;
  padding-right:26px!important}
select:hover{border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%231C1C1A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
button{border:none;background:none;padding:0;margin:0;cursor:pointer;color:inherit;text-align:left}

/* ---- wiederkehrende Muster ---------------------------------------------- */
.eyebrow{font:500 9.5px 'DM Mono',monospace;letter-spacing:.14em;color:var(--ink)}
.flabel{font:400 9px 'DM Mono',monospace;letter-spacing:.1em;color:var(--ink-mute)}
.input{width:100%;height:34px;border:1px solid var(--line);background:var(--white);
  font:400 12px 'DM Sans';color:var(--ink);padding:0 10px;outline:none}
.input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.input.mono{font-family:'DM Mono',monospace}
.btn-primary{font:500 11px 'DM Mono',monospace;letter-spacing:.08em;color:var(--white);
  background:var(--ink);padding:11px 22px;cursor:pointer;transition:background .2s ease}
.btn-primary:hover{background:var(--ink-soft)}
.btn-outline{font:500 11px 'DM Mono',monospace;letter-spacing:.08em;color:var(--ink);
  border:1px solid var(--line);padding:10px 18px;cursor:pointer;background:transparent}
.btn-outline:hover{border-color:var(--ink)}
.tag-btn{font:400 9px 'DM Mono',monospace;color:var(--ink);border:1px solid var(--ink);
  padding:3px 7px;cursor:pointer;background:transparent}
.tag-btn:hover{background:var(--ink);color:var(--white)}
/* Segmented control */
.seg-wrap{display:grid;border:1px solid var(--line)}
.seg{font:500 10px 'DM Mono',monospace;letter-spacing:.06em;padding:9px 8px;text-align:center;
  cursor:pointer;background:var(--white);color:var(--ink-mute)}
.seg.on{background:var(--ink);color:var(--white)}
.seg + .seg{border-left:1px solid var(--line)}
.row{display:flex;gap:12px}
.grow{flex:1}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ==========================================================================
   APP-RAHMEN
   ========================================================================== */
.page{display:flex;flex-direction:column;height:100vh;height:100dvh}
.app{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--white);position:relative;overflow:hidden}

/* ---- Topbar ---- */
.topbar{flex:none;min-height:56px;flex-wrap:wrap;row-gap:8px;padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;background:var(--white);position:relative;z-index:20}
.logo-link{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
.logo-link:hover .logo-word{color:var(--red-txt)}
/* Signet ist mehrfarbig (Rack-Icon) — es wird beim Hover nicht umgefärbt, nur leicht angehoben */
.logo-link:hover .logo-mark{opacity:.82}
.logo-mark{width:22px;height:22px;flex:none;display:block}
.logo-word{font:500 14px 'DM Mono',monospace;letter-spacing:.16em}
.badge-free{font:500 9px 'DM Mono',monospace;letter-spacing:.12em;color:var(--ink);
  background:var(--sand);padding:3px 6px}
.badge-beta{font:500 9px 'DM Mono',monospace;letter-spacing:.12em;color:var(--white);
  background:var(--red-txt);padding:3px 7px}
.menu-item{font:500 11px 'DM Mono',monospace;letter-spacing:.1em;padding:7px 12px;cursor:pointer;color:var(--ink-mute)}
.menu-item.on{color:var(--ink);background:var(--nude)}
.menu-item:hover{color:var(--ink)}
/* Hervorgehobener Navbar-Button „Neues Rack" */
.nav-cta{font:500 11px 'DM Mono',monospace;letter-spacing:.1em;color:var(--ink);border:1px solid var(--ink);
  padding:6px 12px;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-cta:hover{background:var(--ink);color:var(--white)}
/* Sprach-Umschalter DE / EN */
.lang-toggle{display:inline-flex;border:1px solid var(--line)}
.lang-toggle button{font:500 10px 'DM Mono',monospace;letter-spacing:.08em;padding:6px 9px;cursor:pointer;color:var(--ink-mute);background:transparent}
.lang-toggle button.on{background:var(--ink);color:var(--white)}
.lang-toggle button:not(.on):hover{color:var(--ink)}
/* Hinweis neben „Speichern" */
.save-hint{font:400 10px 'DM Mono',monospace;letter-spacing:.03em;color:var(--ink-mute);max-width:210px;line-height:1.35;text-align:right}
/* Globale Suche (Topbar) */
.gsearch{position:relative;display:flex;align-items:center;gap:6px;height:32px;border:1px solid var(--line);
  background:var(--white);padding:0 10px;flex:0 1 260px;min-width:150px;max-width:280px}
.gsearch .gs-ico{color:var(--ink-mute);font-size:12px;flex:none}
.gsearch input{border:none;outline:none;background:transparent;flex:1;min-width:0;font:400 12px 'DM Sans';color:var(--ink)}
.gsearch input::placeholder{color:var(--ink-mute)}
#gsearch-pop{position:absolute;left:-1px;right:-1px;top:calc(100% + 3px);z-index:60;background:var(--white);
  border:1px solid var(--ink);box-shadow:0 8px 24px rgba(28,28,26,.18);max-height:340px;overflow-y:auto}
#gsearch-pop:empty{display:none}
.gsr{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:transparent;border:none;
  border-bottom:1px solid var(--nude);padding:8px 12px;cursor:pointer}
.gsr:last-child{border-bottom:none}
.gsr:hover{background:var(--nude-light)}
.gsr-name{font:500 11px 'DM Mono',monospace;letter-spacing:.03em;color:var(--ink)}
.gsr-meta{font:400 10px 'DM Sans';color:var(--ink-mute)}
.gsr-empty{padding:10px 12px;font:400 11px 'DM Sans';color:var(--ink-mute)}
.rack-col.searching .dev:not(.search-hit){opacity:.35}
.dev.search-hit{outline:2px solid var(--red);outline-offset:-2px}

/* ---- 3-Spalten-Grid ---- */
.studio{display:grid;grid-template-columns:246px minmax(0,1fr) 336px;flex:1;min-height:0}

/* KATALOG links */
.catalog{border-right:1px solid var(--line);background:var(--nude-light);
  display:flex;flex-direction:column;min-height:0}
.search{height:34px;border:1px solid var(--line);background:var(--white);display:flex;
  align-items:center;padding:0 11px;gap:8px}
.search input{flex:1;border:none;outline:none;background:transparent;font:400 12px 'DM Sans';color:var(--ink)}
.cat-body{flex:1;overflow-y:auto;padding:0 16px 16px}
.cat-group{font:500 9.5px 'DM Mono',monospace;letter-spacing:.14em;color:var(--ink);
  margin:8px 0;display:flex;justify-content:space-between}

.cat-new{width:100%;margin-top:12px;font:500 11px 'DM Mono',monospace;letter-spacing:.08em;
  color:var(--white);background:var(--ink);border:1px solid var(--ink);padding:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s ease}
.cat-new:hover{background:var(--ink-soft)}
.cat-io-row{display:flex;gap:8px;margin-top:8px}
.cat-io{flex:1;font:500 10px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--white);border:1px solid var(--line);padding:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:border-color .15s ease,background .15s ease}
.cat-io:hover{border-color:var(--ink);background:var(--nude-light)}
.cat-io .mono{font-size:12px}
/* Katalog-Karte mit 3 Aktionen */
.cat-card{background:var(--white);border:1px solid var(--line);margin-bottom:6px}
.cat-card:hover{border-color:var(--sand)}
.cat-card-top{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;gap:8px}
.cat-card .nm{font:400 11.5px 'DM Sans';color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-card .u{font:500 9px 'DM Mono',monospace;color:var(--ink-mute);letter-spacing:.08em;flex:none}
.cat-actions{display:flex;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.cat-actions button{background:var(--white);cursor:pointer;padding:6px 4px;
  font:500 9px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:4px}
.cat-actions .cat-add{flex:1}
.cat-actions .cat-add:hover{background:var(--ink);color:var(--white)}
.cat-actions .cat-edit,.cat-actions .cat-del{width:30px;flex:none}
.cat-actions .cat-edit:hover{background:var(--nude)}
.cat-actions .cat-dup{width:30px;flex:none;color:var(--ink)}
.cat-actions .cat-dup:hover{background:var(--nude)}
.dup-ico{position:relative;display:inline-block;width:12px;height:11px}
.dup-ico::before,.dup-ico::after{content:'';position:absolute;width:7px;height:8px;border:1px solid currentColor;background:transparent}
.dup-ico::before{left:0;top:0}
.dup-ico::after{right:0;bottom:0}
.cat-actions .cat-del{color:var(--red-txt)}
.cat-actions .cat-del:hover{background:var(--red-txt);color:var(--white)}
/* Inspektor-Aktionszeile */
.insp-actions{display:flex;gap:8px;margin-top:12px}
.insp-actions .mini-btn{flex:1;justify-content:center;text-align:center;display:flex;align-items:center}
/* Rack-Titel mit Stift */
.rack-title-row{display:flex;align-items:center;gap:8px}
.pencil{font:400 12px 'DM Mono',monospace;color:var(--ink-mute);cursor:pointer;background:transparent;padding:2px 5px;line-height:1}
.pencil:hover{color:var(--ink)}

/* RACK Mitte */
.rack{background:var(--nude);
  background-image:linear-gradient(#1c1c1a0a 1px,transparent 1px),
                   linear-gradient(90deg,#1c1c1a0a 1px,transparent 1px);
  background-size:32px 32px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.rack-tabs{display:flex;align-items:stretch;flex-wrap:wrap;gap:2px;padding:0 12px;background:var(--white);
  border-bottom:1px solid var(--line)}
.rack-tab{display:flex;align-items:center;gap:8px;padding:9px 12px 7px;border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;position:relative}
.rack-tab:hover{background:var(--nude-light)}
.rack-tab.on{border-bottom-color:var(--red)}
.rack-tab .rt-name{font:500 11px 'DM Mono',monospace;letter-spacing:.04em;color:var(--ink-mute)}
.rack-tab.on .rt-name{color:var(--ink)}
.rack-tab .rt-u{font:400 8.5px 'DM Mono',monospace;color:var(--ink-mute)}
.rt-menu{font-size:13px;line-height:1;color:var(--ink-mute);cursor:pointer;padding:0 2px}
.rt-menu:hover{color:var(--ink)}
.rt-pop{position:absolute;left:8px;top:calc(100% + 2px);z-index:30;min-width:150px;background:var(--white);
  border:1px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.rt-pop button{display:block;width:100%;text-align:left;background:transparent;border:none;padding:8px 12px;
  font:400 11px 'DM Sans';color:var(--ink);cursor:pointer;border-bottom:1px solid var(--nude)}
.rt-pop button:last-child{border-bottom:none}
.rt-pop button:hover{background:var(--nude-light)}
.rt-pop button.danger{color:var(--red-txt)}
.rack-add{margin-left:6px;align-self:center;font:500 10px 'DM Mono',monospace;letter-spacing:.08em;
  color:var(--ink-mute);border:1px solid var(--line);background:var(--white);padding:5px 10px;cursor:pointer}
.rack-add:hover{border-color:var(--ink);color:var(--ink)}
/* Geteiltes-Rack-Vorschau-Banner */
.share-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;background:var(--ink);color:var(--white);flex-wrap:wrap}
.share-banner .sb-txt{display:flex;align-items:center;gap:9px;font:400 11px 'DM Mono',monospace;letter-spacing:.03em}
.share-banner .sb-txt b{font-weight:500}
.sb-dot{width:8px;height:8px;border-radius:50%;background:var(--sand);flex:none}
.sb-actions{display:flex;gap:8px;flex:none}
.sb-adopt{padding:6px 12px;background:var(--white);color:var(--ink);border:none;font:500 9px 'DM Mono',monospace;letter-spacing:.06em;cursor:pointer}
.sb-adopt:hover{background:var(--nude)}
.sb-discard{padding:6px 10px;background:transparent;color:var(--sand);border:1px solid #55534c;font:500 9px 'DM Mono',monospace;letter-spacing:.06em;cursor:pointer}
.sb-discard:hover{color:var(--white);border-color:var(--sand)}
.rack-head{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);background:rgba(250,250,248,.72)}
.rack-title{font:500 15px 'DM Sans';color:var(--ink)}
.rack-sub{font:400 10px 'DM Mono',monospace;letter-spacing:.1em;color:var(--ink-mute);margin-top:3px}
.viewtoggle{display:flex;border:1px solid var(--ink)}
.viewtoggle button{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;padding:8px 16px;cursor:pointer}
.viewtoggle .on{background:var(--ink);color:var(--white)}
.viewtoggle .off{background:var(--white);color:var(--ink)}
/* Ansicht-Dropdown neben FRONT/BACK */
.rack-viewctrls{display:flex;align-items:center;gap:10px}
.viewmenu{position:relative}
.viewmenu-btn{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;padding:8px 13px;cursor:pointer;
  background:var(--white);color:var(--ink);border:1px solid var(--ink);display:inline-flex;align-items:center;gap:6px}
.viewmenu-btn.open{background:var(--ink);color:var(--white)}
.viewmenu-btn .vm-caret{font-size:8px;line-height:1}
.viewmenu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:180px;
  background:var(--white);border:1px solid var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.14)}
.viewmenu-sec{font:400 9px 'DM Mono',monospace;letter-spacing:.14em;color:var(--ink-mute);padding:9px 12px 5px}
.viewopt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:none;padding:7px 12px;font:400 11px 'DM Sans';color:var(--ink)}
.viewopt:last-child{padding-bottom:10px}
.viewopt:hover{background:var(--nude-light)}
.vopt-box{width:14px;height:14px;flex:none;border:1px solid var(--sand);background:var(--white);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--white)}
.vopt-box.on{background:var(--ink);border-color:var(--ink)}
/* Kabel-Verbindungs-Modus */
.conn-btn{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;padding:8px 13px;cursor:pointer;
  background:var(--white);color:var(--ink);border:1px solid var(--ink)}
.conn-btn.on{background:var(--red-txt);color:var(--white);border-color:var(--red)}
.hist-ctrl{display:flex;border:1px solid var(--line)}
.hist-ctrl button{color:var(--ink);background:var(--white);border:none;width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s}
.hist-ctrl button svg{width:17px;height:17px;display:block}
.hist-ctrl button+button{border-left:1px solid var(--line)}
.hist-ctrl button:hover:not(:disabled){background:var(--ink);color:var(--white)}
.hist-ctrl button:disabled{color:var(--nude-dark);cursor:default}
.conn-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 20px;
  background:rgba(196,94,62,.1);border-bottom:1px solid #E3C6BC;
  font:500 10px 'DM Mono',monospace;letter-spacing:.06em;color:var(--red-txt)}
.conn-bar>span{display:flex;align-items:center;gap:8px}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;animation:connPulse 1.1s ease-in-out infinite}
@keyframes connPulse{0%,100%{opacity:1}50%{opacity:.35}}
.conn-cancel{font:500 9px 'DM Mono',monospace;letter-spacing:.08em;color:var(--red-txt);border:1px solid #E3C6BC;
  background:var(--white);padding:4px 8px;cursor:pointer}
.conn-cancel:hover{background:var(--red-txt);color:var(--white);border-color:var(--red)}
.conn-a{outline:2px solid var(--red);outline-offset:1px;z-index:3}
body.connecting .rp-panel span[data-cell="port"],body.connecting .dev .glyphs span[data-cell="port"]{cursor:crosshair}
.rack-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;gap:12px;padding:16px;position:relative}
.rack-frame{display:flex;align-items:stretch;box-shadow:0 8px 28px rgba(28,28,26,.14);transform-origin:center center}
/* Verkabelungs-Overlay */
.rack-cables{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:4}
.rack-cables .rc-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}
.rack-cables .rc-line{fill:none;stroke-width:2.2;stroke-linecap:round;pointer-events:none;opacity:.92}
.rack-cables .rc-line.sel{stroke-width:3.4;opacity:1}
.rack-cables .rc-line.dim{opacity:.15}
.rack-cables .rc-dot{stroke:#FAFAF8;stroke-width:1}
.rack-cables .rc-lbl rect{fill:#1C1C1A}
.rack-cables .rc-lbl text{fill:#FAFAF8;font:500 9px 'DM Mono',ui-monospace,monospace}
/* Zoom-Steuerung */
.zoom-ctrl{position:absolute;right:14px;bottom:14px;z-index:6;display:flex;border:1px solid var(--line);
  background:var(--white);box-shadow:0 2px 10px rgba(28,28,26,.12)}
.zoom-ctrl button{font:500 13px 'DM Mono',monospace;color:var(--ink);background:var(--white);border:none;
  cursor:pointer;width:30px;height:28px;display:flex;align-items:center;justify-content:center}
.zoom-ctrl button.zoom-pct{width:48px;font-size:10px;letter-spacing:.02em;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.zoom-ctrl button:hover{background:var(--nude-light)}
body.panning{cursor:grabbing;user-select:none}
body.panning .rack-stage,body.panning .rack-stage *{cursor:grabbing}
.u-scale{width:30px;background:var(--ink);color:var(--sand);display:flex;flex-direction:column}
.u-scale div{height:var(--u-cell);display:flex;align-items:center;justify-content:center;
  font:400 9.5px 'DM Mono',monospace;border-bottom:1px solid #ffffff10}
.u-scale div:last-child{border-bottom:none}
.rack-col{width:392px;background:var(--chassis);padding:0 8px;display:flex;flex-direction:column}
.rail{width:30px;background:var(--ink)}
.hint{font:400 9px 'DM Mono',monospace;letter-spacing:.08em;color:var(--ink-mute);text-align:center}

/* Geräte-Zeilen */
.dev{position:relative;display:flex;align-items:center;gap:8px;padding:0 8px 0 2px}
.dev.dark{background:var(--chassis);border-top:1px solid var(--chassis-line)}
.dev.light{background:var(--nude-dark);border-top:1px solid #c7bfb2}
.dev.shelf{background:var(--nude);border-top:1px solid #c7bfb2}
.dev.mesh{border-top:1px solid var(--chassis-line);
  background:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.5px) 0 0/6px 6px, var(--chassis)}
.dev[draggable="true"]{cursor:grab}
.dev.locked{cursor:pointer}
.dev.dragging{opacity:.35}
.dev .label{flex:1;font:500 8px 'DM Mono',monospace;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev .glyphs{display:flex;gap:3px;align-items:center;flex:none}
/* BEIDE-Ansicht: zwei separate Rack-Spalten (Front | Back) */
.rack-scale{transform-origin:center center;display:inline-block}
.rack-both{display:flex;gap:22px;align-items:flex-start}
.rack-one{display:flex;flex-direction:column;align-items:center}
.rf-head{font:600 10px 'DM Mono',monospace;letter-spacing:.16em;color:var(--ink);margin-bottom:6px;text-align:center}
.rack-both .rack-col{width:280px}
.rack-both .dev .label{max-width:80px}
.dev .ext-mark{flex:none;font:500 11px 'DM Mono',monospace;line-height:1;margin:0 5px 0 2px;opacity:.9}
.dev .flip-mark{flex:none;font:500 11px 'DM Mono',monospace;line-height:1;margin:0 3px 0 2px;opacity:.9}
.dev .zone-bar{position:absolute;left:0;top:0;bottom:0;width:4px;z-index:3;pointer-events:none}
.dev.selected .selring{position:absolute;inset:0;outline:2px solid var(--red);outline-offset:-2px;pointer-events:none;z-index:4}
.dropover::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--red);z-index:6;pointer-events:none}
.grip-ctrl{width:16px;height:100%;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.grip{display:grid;grid-template-columns:2px 2px;grid-auto-rows:2px;gap:2px}
.grip span{width:2px;height:2px}
.lock{position:relative;width:11px;height:12px;display:inline-block}
.lock .body{position:absolute;bottom:0;left:1px;width:9px;height:7px;background:var(--red);border-radius:1px}
.lock .shackle{position:absolute;top:0;left:3px;width:5px;height:6px;border:1.4px solid var(--red);
  border-bottom:none;border-radius:3px 3px 0 0}
.blank{height:var(--u-cell);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font:400 8px 'DM Mono',monospace;letter-spacing:.14em;color:var(--ink-mute);
  background:repeating-linear-gradient(45deg,#EDE8E1,#EDE8E1 5px,#EAE4DB 5px,#EAE4DB 10px)}
/* Glyph-Bausteine */
.g-sq{width:6px;height:9px;background:var(--glyph)}
.g-wg{width:12px;height:9px;background:var(--green)}
.g-wgr{width:12px;height:9px;background:var(--glyph)}
.g-gap{width:5px}
.g-circ{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--red);background:#3a382f}
.g-bay{width:9px;height:24px;background:var(--white);border:1px solid #b8b0a2}
.g-box{width:30px;height:16px;background:var(--chassis-hi);border:1px solid var(--chassis-line)}
.g-sand{width:40px;height:18px;background:var(--sand)}
.g-punch{width:5px;height:12px;background:var(--glyph-2)}
.g-plug{width:14px;height:12px;background:var(--red)}
/* Rack-Mini-Panel (maßstäblich aus dem Grid) */
.rp-panel{position:relative;display:inline-block;flex:none;align-self:center}
.rp-panel span{position:absolute}
.rp-bay{background:#fff;border:1px solid #b8b0a2}
.rp-net{background:var(--glyph)}
.rp-fiber{background:var(--green)}
.rp-power{border-radius:50%;border:1.5px solid var(--red);background:#3a382f}
.rp-wifi{border-radius:50%;border:1.5px solid var(--blue);background:#3a382f}
.rp-wifi.occ{background:var(--blue)}
/* Belegung: belegte Ports/Schächte in voller Stärke, freie treten leicht zurück.
   Nur echte Ports/Schächte betroffen — dekoratives Chassis-Chrome bleibt unberührt. */
.rp-panel span[data-tip]{cursor:pointer}
.rp-net:not(.occ),.rp-fiber:not(.occ),.rp-power:not(.occ),.rp-bay:not(.occ){opacity:.5}
.rp-net.occ,.rp-fiber.occ{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65)}
.rp-power.occ{background:var(--red)}
.rp-bay.occ{background:var(--sand);border-color:#8a8073}
.rp-bay.occ.ssd{background:var(--green);border-color:#1f4d39}
/* Belegung im flachen Glyphen-Streifen (kuratierte Seed-Geräte) */
.dev .glyphs span[data-tip]{cursor:pointer}
.g-sq:not(.g-occ),.g-wg:not(.g-occ),.g-wgr:not(.g-occ),.g-circ:not(.g-occ),.g-punch:not(.g-occ),.g-bay:not(.g-occ){opacity:.5}
.g-sq.g-occ,.g-wgr.g-occ,.g-punch.g-occ{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.g-wg.g-occ{box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.g-circ.g-occ{background:var(--red)}
.g-wifi{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--blue);background:#3a382f}
.g-wifi.g-occ{background:var(--blue)}
.g-bay.g-occ{background:var(--sand);border-color:#8a8073}
.g-bay.g-occ.ssd{background:var(--green);border-color:#1f4d39}

/* Rack-Hover-Tooltip */
.rp-tip{position:fixed;z-index:200;display:none;pointer-events:none;max-width:240px;
  background:var(--ink);color:var(--white);border:1px solid #000;padding:8px 10px;
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.rp-tip-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.rp-tip-t{font:500 11px 'DM Mono',monospace;letter-spacing:.04em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.rp-tip-b{font:400 9px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink);
  background:var(--sand);padding:1px 5px;flex:none}
.rp-tip-s{font:500 8.5px 'DM Mono',monospace;letter-spacing:.12em;margin-bottom:5px;
  display:flex;align-items:center;gap:5px}
.rp-tip-s::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.rp-tip-s.used{color:#E0A38C}
.rp-tip-s.free{color:#9AA79E}
.rp-tip-l{font:400 11px 'DM Sans',sans-serif;color:#E8E4DC;line-height:1.4}
.rp-tip-l + .rp-tip-l{margin-top:1px}

/* INSPEKTOR rechts */
.inspector{border-left:1px solid var(--line);background:var(--white);display:flex;
  flex-direction:column;min-height:0}
.insp-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;
  font:400 11px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink-mute)}
.insp-head{padding:16px 18px 14px;border-bottom:1px solid var(--line)}
.insp-name{font:500 16px 'DM Sans';color:var(--ink);line-height:1.25}
.insp-meta{font:400 10px 'DM Mono',monospace;letter-spacing:.1em;color:var(--ink-mute);margin-top:4px}
.sel-lock{font:500 9px 'DM Mono',monospace;letter-spacing:.08em;padding:5px 9px;cursor:pointer;
  color:var(--ink-mute);background:var(--nude)}
.sel-lock.on{color:var(--white);background:var(--red)}
.hostbox{display:flex;align-items:center;justify-content:space-between;height:32px;
  border:1px solid var(--line);background:var(--nude-light);padding:0 4px 0 10px}
.hostbox input{flex:1;border:none;outline:none;background:transparent;
  font:400 12px 'DM Mono',monospace;color:var(--ink);padding:0}
.insp-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:18px}
.sec-title{font:500 9.5px 'DM Mono',monospace;letter-spacing:.14em;color:var(--ink);
  margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sec-title .r{display:flex;gap:10px;align-items:center;color:var(--ink-mute)}
/* Haarlinien-Grid */
.hair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.hair .cell{background:var(--white);padding:8px 10px}
.hair .k{font:400 9px 'DM Mono',monospace;letter-spacing:.08em;color:var(--ink-mute)}
.hair .v{font:400 12px 'DM Sans';color:var(--ink);margin-top:2px}
.list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.port-row{width:100%;background:var(--white);padding:7px 10px;display:flex;flex-direction:column;gap:6px;
  border:none;border-bottom:1px solid var(--nude);cursor:pointer;text-align:left}
.port-row:hover{background:var(--nude-light)}
.port-row.open{background:var(--nude-light)}
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pr-name{display:flex;align-items:center;gap:8px;min-width:0}
.pr-tags{display:flex;flex-wrap:wrap;gap:6px;padding-left:22px}
.port-row .sw{width:14px;height:11px;display:inline-block;flex:none}
.port-row .nm{font:400 11px 'DM Sans';color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.port-row .side{font:400 9px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink-mute);flex:none;white-space:nowrap}
.port-vlan{font:500 8.5px 'DM Mono',monospace;letter-spacing:.04em;color:var(--ink-soft);
  background:var(--nude);border:1px solid var(--line);padding:1px 5px;flex:none;white-space:nowrap}
.port-ip{font:500 8.5px 'DM Mono',monospace;letter-spacing:.04em;color:var(--blue);
  border:1px solid var(--blue);padding:1px 5px;flex:none;white-space:nowrap}
.port-speed{font:500 8.5px 'DM Mono',monospace;letter-spacing:.04em;color:var(--green);
  border:1px solid var(--green);padding:1px 5px;flex:none;white-space:nowrap}
.port-detail{background:var(--nude-light);border-bottom:1px solid var(--line);padding:9px 10px 11px}
.pd-lbl{font:400 9px 'DM Mono',monospace;letter-spacing:.1em;color:var(--ink-mute);margin:0 0 4px}
.port-detail input{margin-bottom:9px}
.port-ipopts{display:flex;flex-direction:column;gap:4px}
.port-ipopt{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);
  padding:5px 8px;cursor:pointer;font:400 11px 'DM Sans';color:var(--ink);text-align:left}
.port-ipopt:hover{border-color:var(--ink)}
/* IP-Adressen (Inspektor) */
.ip-row{display:flex;align-items:stretch;gap:6px}
.ip-addr{flex:1;min-width:0;height:32px;border:1px solid var(--line);background:var(--white);
  font:400 12px 'DM Mono',monospace;color:var(--ink);padding:0 9px;outline:none}
.ip-addr::placeholder{color:var(--ink-mute)}
.ip-addr:focus{border-color:var(--ink)}
.ip-port{width:108px;flex:none;height:32px;margin:0;border:1px solid var(--line);
  background:var(--white);color:var(--ink);font:400 11px 'DM Sans';padding:0 6px;outline:none;cursor:pointer}
.ip-port:focus{border-color:var(--ink)}
.ip-del{flex:none;width:32px;height:32px;border:1px solid var(--line);background:var(--white);
  color:var(--red-txt);cursor:pointer;font:400 15px 'DM Mono',monospace;line-height:1;
  display:flex;align-items:center;justify-content:center}
.ip-del:hover{background:var(--red);color:var(--white);border-color:var(--red)}
.notes-area{width:100%;min-height:64px;resize:vertical;border:1px solid var(--line);background:var(--white);
  font:400 12px 'DM Sans';color:var(--ink);padding:8px 10px;outline:none;line-height:1.5;display:block}
.notes-area::placeholder{color:var(--ink-mute)}
.notes-area:focus{border-color:var(--ink)}
/* Datenträger */
.drive-hd{padding:8px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--white);width:100%}
.bay-badge{font:500 8.5px 'DM Mono',monospace;color:var(--ink);background:var(--nude);
  border:1px solid var(--line);padding:3px 6px;flex:none}
.bay-badge.on{color:var(--white);background:var(--ink);border-color:var(--ink)}
.ff-badge{font:500 8px 'DM Mono',monospace;color:var(--ink);border:1px solid var(--sand);padding:3px 5px;flex:none}
.drive-hd .m{font:400 11px 'DM Sans';color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drive-hd .ty{font:400 9px 'DM Mono',monospace;flex:none}
.drive-detail{border-top:1px dashed var(--line);padding:9px 10px;display:grid;
  grid-template-columns:1fr 1fr;gap:8px 12px;background:var(--nude-light)}
.drive-detail .k{font:400 8px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink-mute)}
.drive-detail .v{font:400 11px 'DM Sans';color:var(--ink);margin-top:1px}
.drive-detail .v.mono{font-family:'DM Mono',monospace;font-size:10.5px}
.drive-empty{background:repeating-linear-gradient(45deg,#F4EFE9,#F4EFE9 6px,#EDE8E1 6px,#EDE8E1 12px);
  padding:9px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;width:100%}
.mini-btn{font:400 9px 'DM Mono',monospace;color:var(--ink);border:1px solid var(--line);padding:4px 9px;cursor:pointer;background:transparent}
.mini-btn:hover{border-color:var(--ink)}
.mini-btn.danger{color:var(--red-txt);border-color:#E3C6BC}
.mini-btn.solid{border-color:var(--ink)}
.mini-btn.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.zone-pick{display:flex;gap:6px;flex-wrap:wrap}
.zsw{width:22px;height:22px;border:1px solid var(--line);border-radius:3px;cursor:pointer;padding:0;position:relative}
.zsw:hover{border-color:var(--ink)}
.zsw.on{outline:2px solid var(--ink);outline-offset:1px}
.zsw.none{background:transparent;color:var(--ink-mute);font:400 12px 'DM Mono',monospace;line-height:20px;text-align:center}
.zone-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:6px 12px}
.zone-legend .zl-lbl{font:500 9px 'DM Mono',monospace;letter-spacing:.14em;color:var(--ink-mute)}
.zone-tag{display:inline-flex;align-items:center;gap:6px;font:400 10px 'DM Sans';color:var(--ink)}
.zone-tag .zt-dot{width:10px;height:10px;border-radius:2px;flex:none}

/* ---- Netzwerktopologie (#3) ---- */
.rt-toggle{margin-left:2px}
.tp-filters{display:flex;border:1px solid var(--line)}
.tp-filt{font:500 9px 'DM Mono',monospace;letter-spacing:.06em;display:flex;align-items:center;gap:6px;padding:8px 11px;background:var(--white);color:var(--ink);border:none;border-right:1px solid var(--line);cursor:pointer}
.tp-filt:last-child{border-right:none}
.tp-filt:hover{background:var(--nude-light)}
.tp-filt.on{background:var(--ink);color:var(--white)}
.tp-filt .tp-k{width:14px;height:3px;flex:none}
.topo-stage{position:relative;padding:0}
.topo-svg{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
.topo-svg.panning{cursor:grabbing}
.topo-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 12px 'DM Mono',monospace;color:var(--ink-mute);text-align:center;padding:0 40px;pointer-events:none}
.tsnap{stroke:var(--blue);stroke-width:1;stroke-dasharray:4 3;opacity:.7;pointer-events:none}
.tedge{fill:none;transition:opacity .15s}
.te-net{stroke:var(--ink-soft);stroke-width:1.6}
.te-fiber{stroke:var(--green);stroke-width:1.8}
.te-power{stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 4}
.te-wifi{stroke:var(--blue);stroke-width:1.5;stroke-dasharray:2 3}
.telbl{font:500 8.5px 'DM Mono',monospace;fill:var(--ink-soft)}
.telbl-bg{fill:var(--white);opacity:.86}
.topo-svg.tp-f-data .te-power{opacity:.07;pointer-events:none}
.topo-svg.tp-f-power .te-net,.topo-svg.tp-f-power .te-fiber,.topo-svg.tp-f-power .te-wifi{opacity:.12}
.topo-svg.dim .tnode{opacity:.28}
.topo-svg.dim .tedge,.topo-svg.dim .telbl,.topo-svg.dim .telbl-bg{opacity:.08}
.tnode.hl{opacity:1!important}
.tedge.hl,.telbl.hl,.telbl-bg.hl{opacity:1!important}
.tnode{cursor:grab}
.tnode .tcard{fill:var(--white);stroke:var(--line);stroke-width:1}
.tnode.core .tcard{stroke:var(--red);stroke-width:1.6}
.tnode.ext .tcard{fill:var(--nude);stroke:var(--ink-mute);stroke-dasharray:4 3}
.tnode.extdev .tcard{fill:var(--nude-light);stroke:var(--ink-mute);stroke-dasharray:3 2}
.tnode.sel .tcard{stroke:var(--ink);stroke-width:1.7}
.tnode .tnm{font:500 10px 'DM Mono',monospace;fill:var(--ink);letter-spacing:.02em}
.tnode .tmeta{font:400 8.5px 'DM Sans';fill:var(--ink-mute)}
.tnode .tmeta.mono{font-family:'DM Mono',monospace;fill:var(--ink-soft)}
.tnode .tsvc-pill{fill:var(--nude-light);stroke:var(--line);stroke-width:.7}
.tnode .tsvc-txt{font:400 8px 'DM Sans';fill:var(--ink-soft)}
.tnode .tha rect{fill:var(--red)}
.tnode .tha text{font:600 7px 'DM Mono',monospace;fill:#fff;letter-spacing:.04em}
.tp-export{display:flex;align-items:center;gap:0;border:1px solid var(--line)}
.tp-export .tp-exp-lbl{font:500 8px 'DM Mono',monospace;letter-spacing:.12em;color:var(--ink-mute);padding:0 8px}
.tp-export button{font:500 10px 'DM Mono',monospace;letter-spacing:.06em;padding:8px 11px;background:var(--white);color:var(--ink);border:none;border-left:1px solid var(--line);cursor:pointer}
.tp-export button:hover{background:var(--nude-light)}
.cat-card-top .cat-ico{width:16px;height:16px;flex:none;display:inline-flex;align-items:center}
.cat-card-top .cat-ico svg{width:16px;height:16px}

/* ---- Geräte-Typ / Icon-Picker (#7) ---- */
.icon-pick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.ipk{position:relative;width:38px;height:38px;border:1px solid var(--line);background:var(--white);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.ipk svg{width:22px;height:22px}
.ipk:hover{border-color:var(--ink)}
.ipk.on{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.ipk.auto .ipk-a{position:absolute;right:2px;bottom:1px;font:600 7px 'DM Mono',monospace;color:var(--ink-mute)}
.icustom-row{display:flex;align-items:center;gap:8px}
.icustom{width:34px;height:34px;border:1px solid var(--line);background:var(--white);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.icustom img{max-width:100%;max-height:100%;object-fit:contain}
.chip{font:400 10px 'DM Mono',monospace;letter-spacing:.06em;color:var(--white);background:var(--ink);padding:5px 9px;display:inline-flex;align-items:center;gap:6px}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none}
.chip.add{color:var(--ink-mute);background:var(--nude);border:1px dashed var(--sand);cursor:pointer}
.cable-row{display:flex;align-items:center;gap:9px;padding:7px 10px;background:var(--nude-light);
  border:1px solid var(--line);cursor:pointer;width:100%}
.cable-row:hover{border-color:var(--ink)}
.cable-no{font:500 9px 'DM Mono',monospace;color:var(--white);padding:3px 5px;flex:none}
.cable-txt{font:400 11px 'DM Sans';color:var(--ink);flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cable-conn{font:400 9px 'DM Mono',monospace;color:var(--ink-mute);flex:none}
.cable-conn.wl{color:var(--blue)}
.wl-conn{height:34px;display:flex;align-items:center;padding:0 10px;font:500 11px 'DM Mono',monospace;letter-spacing:.06em;color:var(--blue);background:var(--nude);border:1px dashed var(--blue)}
.ext-badge{font:500 8px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink-mute);border:1px solid var(--sand);padding:2px 5px;flex:none;white-space:nowrap}
.empty-hint{font:400 10px 'DM Sans';color:var(--ink-mute);padding:2px}

/* ==========================================================================
   DIALOGE (Modals)
   ========================================================================== */
.overlay{position:fixed;inset:0;background:rgba(28,28,26,.45);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:30px}
/* Welcome-Ebene: durchklickbar (Navbar/Footer bleiben nutzbar), nur das Studio wird gedimmt */
.welcome-layer{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:30px;pointer-events:none}
.welcome-layer .dialog{pointer-events:auto;animation:dlgIn .22s cubic-bezier(.2,0,0,1)}
body.welcome-open .studio{visibility:hidden}   /* Rack/Studio im Welcome komplett ausblenden (Layout bleibt erhalten) */
.dialog{background:var(--white);border:1px solid var(--ink);box-shadow:0 24px 60px rgba(28,28,26,.35);
  max-height:100%;display:flex;flex-direction:column}
/* Einblende-Animation nur beim ersten Öffnen (nicht bei jedem Dialog-Update → sonst „Flackern") */
.dialog.dlg-anim{animation:dlgIn .22s cubic-bezier(.2,0,0,1)}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.dlg-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 22px;
  border-bottom:1px solid var(--line);flex:none}
.dlg-title{font:500 16px 'DM Sans';color:var(--ink)}
.dlg-sub{font:400 10px 'DM Mono',monospace;letter-spacing:.08em;color:var(--ink-mute);margin-top:3px}
.dlg-x{font:400 16px 'DM Mono',monospace;color:var(--ink-mute);cursor:pointer;line-height:1;padding:2px 6px}
.dlg-body{padding:20px 22px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.dlg-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 22px;
  border-top:1px solid var(--line);background:var(--nude-light);flex:none}
.dlg-foot.space{justify-content:space-between}
/* Willkommens-/Start-Fenster */
.start-opt{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--white);padding:14px 16px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.start-opt:hover{border-color:var(--ink);background:var(--nude-light)}
.start-opt.primary{border-color:var(--ink)}
.start-opt .t{font:500 13px 'DM Sans';color:var(--ink)}
.start-opt .d{font:400 11px 'DM Sans';color:var(--ink-mute);line-height:1.35}
.abx{border:1px solid var(--line);background:var(--nude-light);padding:12px}
.abx .t{font:500 9px 'DM Mono',monospace;letter-spacing:.12em;color:var(--ink);margin-bottom:10px}
.mini{font:400 8.5px 'DM Mono',monospace;color:var(--ink-mute);margin-bottom:4px}
.selbox{width:100%;height:32px;border:1px solid var(--line);background:var(--white);
  font:400 11.5px 'DM Sans';color:var(--ink);padding:0 8px;outline:none;margin-bottom:9px}
.selbox:last-child{margin-bottom:0}
.swatch{width:22px;height:22px;display:inline-block;cursor:pointer;border:1px solid var(--line)}
.swatch.sm{width:16px;height:16px}
.swatch.on{outline:2px solid var(--ink);outline-offset:2px}
.legend-note{font:400 9.5px 'DM Sans';color:var(--ink-mute);display:flex;align-items:center;gap:7px}
.fb-attach{display:flex;align-items:center;gap:8px;font:400 11px 'DM Sans';color:var(--ink);cursor:pointer;user-select:none}
.fb-attach input{width:15px;height:15px;accent-color:var(--ink);cursor:pointer}
.legend-note .bar{width:22px;height:2.4px;display:inline-block}
.fb-size{margin-left:auto;font:500 9.5px 'DM Mono',monospace;color:var(--ink-mute);border:1px solid var(--line);padding:2px 6px;white-space:nowrap}
.fb-size.over{color:var(--white);background:var(--red);border-color:var(--red)}
.fb-attach input:disabled{opacity:.5;cursor:not-allowed}
.legend-note.fb-warn{color:var(--red-txt);font-weight:500}
.stepper{display:flex;align-items:stretch;border:1px solid var(--line);height:36px}
.stepper button{width:34px;display:flex;align-items:center;justify-content:center;
  font:500 14px 'DM Mono',monospace;color:var(--ink);cursor:pointer}
.stepper button:first-child{border-right:1px solid var(--line)}
.stepper button:last-child{border-left:1px solid var(--line)}
.stepper .val{width:66px;display:flex;align-items:center;justify-content:center;font:500 12px 'DM Mono',monospace;color:var(--ink)}
.svc-lib{max-height:250px;overflow-y:auto}
.svc-list{border:1px solid var(--line);display:flex;flex-direction:column;gap:1px;background:var(--line)}
.svc-row{background:var(--white);padding:8px 11px;display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}
.svc-row:hover{background:var(--nude-light)}
.svc-box{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--sand);background:var(--white)}
.svc-box.on{border-color:var(--ink);background:var(--ink)}
.svc-box.on::after{content:'\2713';color:var(--white);font:700 10px 'DM Sans';line-height:1}
.svc-dot{width:9px;height:9px;border-radius:50%;flex:none}
.svc-row .nm{font:400 12px 'DM Sans';color:var(--ink);flex:1;text-align:left}
.svc-row .cat{font:400 9px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink-mute)}
.svc-row .port{font:400 9.5px 'DM Mono',monospace;color:var(--ink-mute);width:44px;text-align:right}

/* ---- Grid-Editor (Front/Back-Layout) ---- */
.pg-palette{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pg-pal{font:500 9px 'DM Mono',monospace;letter-spacing:.05em;color:var(--ink);border:1px solid var(--line);background:var(--white);padding:6px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pg-pal:hover{border-color:var(--ink)}
.pg-d{width:10px;height:11px;flex:none}
.pg-d-net{background:var(--glyph)}
.pg-d-fiber{background:var(--green)}
.pg-d-power{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--red)}
.pg-d-wifi{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--blue)}
.pg-d-bay{width:8px;height:12px;background:#fff;border:1px solid #b8b0a2}
.pg-d-bay.sm{height:9px}
.pg-d-bay.xs{height:6px}
.pg-wrap{display:inline-flex;max-width:100%;overflow:auto;background:var(--chassis);padding:10px}
.pgrid{position:relative;background-color:#201f19;
  background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);
  outline:1px solid #ffffff14}
.pgel{position:absolute;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;font:500 8px 'DM Mono',monospace;overflow:hidden}
.pgel.dragging{opacity:.4}
.pgel.port{background:#2f2d25;border:1px solid #46433a;color:var(--sand)}
.pgel.bay{background:#f3efe8;border:1px solid #b8b0a2;color:var(--ink-soft);flex-direction:column;gap:1px}
.pgel.bay.h{flex-direction:row}
.pgel.sel{outline:2px solid var(--red);outline-offset:-2px;z-index:3}
.pgel .pgp{flex:none}
.pgp.pg-net{width:7px;height:10px;background:var(--glyph)}
.pgp.pg-fiber{width:12px;height:8px;background:var(--green)}
.pgp.pg-power{width:11px;height:11px;border-radius:50%;border:2px solid var(--red)}
.pgp.pg-wifi{width:11px;height:11px;border-radius:50%;border:2px solid var(--blue)}
.pgel .pgx{position:absolute;top:0;right:2px;color:var(--red-txt);font:400 11px 'DM Mono',monospace;cursor:pointer;opacity:0;line-height:1.1}
.pgel .pgrot{position:absolute;top:0;left:2px;color:var(--ink-mute);font:400 10px 'DM Mono',monospace;cursor:pointer;opacity:0;line-height:1.2}
.pgel:hover .pgx,.pgel:hover .pgrot{opacity:1}
.pgrid-hi{position:absolute;pointer-events:none;border:2px solid var(--green);background:rgba(45,106,79,.14);z-index:5}
.pg-detail{display:flex;align-items:center;gap:8px;min-height:34px;margin-top:10px}
.pgd-lbl{font:400 9px 'DM Mono',monospace;letter-spacing:.08em;color:var(--ink-mute)}
/* Port-Liste (alle Ports schnell bearbeiten) */
.pl-wrap{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.pl-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pl-head-row .t{font:500 11px 'DM Mono',monospace;color:var(--ink)}
.pl-count{font:400 9px 'DM Mono',monospace;color:var(--ink-mute)}
.pl{width:100%;border-collapse:collapse;table-layout:fixed}
.pl th{font:500 8px 'DM Mono',monospace;letter-spacing:.08em;color:var(--ink-mute);text-align:left;padding:0 5px 5px;text-transform:uppercase}
.pl td{padding:2px 5px;border-top:1px solid var(--nude-light);vertical-align:middle}
.pl col{}
.pl th:nth-child(1),.pl td:nth-child(1){width:22px}
.pl th:nth-child(3),.pl td:nth-child(3){width:58px}
.pl th:nth-child(4),.pl td:nth-child(4){width:118px}
.pl th:nth-child(5),.pl td:nth-child(5){width:84px}
.pl th:nth-child(6),.pl td:nth-child(6){width:120px}
.pl th:nth-child(7),.pl td:nth-child(7){width:24px}
.pl-row.sel td{background:var(--nude-light)}
.pl-in,.pl-sel{width:100%;height:28px;border:1px solid var(--line);background:var(--white);font:400 11px 'DM Sans';color:var(--ink);padding:0 6px;outline:none}
.pl-in.mono{font-family:'DM Mono',monospace}
.pl-in:focus,.pl-sel:focus{outline:2px solid var(--ink);outline-offset:-1px}

.pl-trunk{text-align:center;font:400 9.5px 'DM Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-bmute{color:var(--ink-mute)}
.pl-chk{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pl-chk input{width:15px;height:15px;accent-cursor:pointer;margin:0}
.pl-loc{cursor:pointer;text-align:center}
.pl-dot{width:9px;height:9px;display:inline-block;vertical-align:middle;border-radius:1px}
.pl-x{border:0;background:transparent;color:var(--ink-mute);font:400 15px 'DM Mono',monospace;cursor:pointer;line-height:1;padding:0}
.pl-x:hover{color:var(--red-txt)}
/* Interne Durchgangs-Verdrahtung (Trunk) */
.tk-btns{display:flex;gap:6px}
.pl.tk{table-layout:auto}
.pl.tk th,.pl.tk td{width:auto!important}
.pl.tk td:nth-child(2),.pl.tk th:nth-child(2){width:24px!important;text-align:center;color:var(--ink-mute)}
.tk-f{font:400 11px 'DM Sans';color:var(--ink)}
.port-trunk{font:400 8px 'DM Mono',monospace;color:var(--blue);border:1px solid var(--line);padding:1px 4px}

/* ---- Toast ---- */
#toast-root{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:60;pointer-events:none}
.toast{background:var(--ink);color:var(--white);font:400 12px 'DM Sans';padding:11px 20px;
  box-shadow:0 12px 32px rgba(28,28,26,.28);animation:toastIn .25s cubic-bezier(.2,0,0,1);white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   SITE-FOOTER (minimalistisch, wie servben.com) — full-bleed
   ========================================================================== */
.site-footer{background:var(--ink);border-top:1px solid rgba(250,250,248,.08);flex:none}
.site-footer .inner{max-width:none;margin:0;padding:18px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap}
.site-footer .copy{font:400 11px 'DM Mono',monospace;letter-spacing:.06em;color:#8f897d}
.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}
.site-footer a{font:400 12px 'DM Sans';color:#8f897d;text-decoration:none;transition:color .2s ease}
.site-footer a:hover{color:var(--sand)}

/* Geräte-Typ-Icon in der Rack-Zeile */
.dev .dev-ico{flex:none;display:inline-flex;align-items:center;margin:0 2px 0 1px}
.dev .dev-ico svg{width:13px;height:13px;stroke:currentColor}
.dev .dev-ico img{width:13px;height:13px;object-fit:contain}
/* Hilfe / FAQ */
.help-intro{font:400 12px 'DM Sans';color:var(--ink-mute);line-height:1.5}
.faq-item{border:1px solid var(--line);background:var(--white);margin-top:8px}
.faq-item summary{list-style:none;cursor:pointer;padding:11px 13px;font:500 12px 'DM Sans';color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font:400 15px 'DM Mono',monospace;color:var(--ink-mute);flex:none;line-height:1}
.faq-item[open] summary::after{content:'\2212'}
.faq-item summary:hover{background:var(--nude-light)}
/* Hilfe-Seite */

.help-sec-t{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
  margin:20px 0 8px;border-top:1px solid var(--nude);padding-top:14px}
.help-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.help-steps li{font:400 12px 'DM Sans';color:var(--ink);line-height:1.5;padding-left:2px}
.help-scs{display:flex;flex-direction:column;gap:7px}
.help-sc{display:flex;align-items:center;gap:11px;font:400 12px 'DM Sans';color:var(--ink-soft)}
.help-sc kbd{font:500 10px 'DM Mono',monospace;background:var(--white);border:1px solid var(--line);
  border-bottom-width:2px;padding:2px 8px;min-width:30px;text-align:center;color:var(--ink)}
/* dezenter Inline-Hilfe-Link (leeres Rack / leerer Inspektor) */
.linklike{background:none;border:none;padding:0;margin:0;cursor:pointer;pointer-events:auto;
  font:inherit;color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.linklike:hover{color:var(--ink)}
.rack-empty .linklike{pointer-events:auto;letter-spacing:.04em}
.insp-empty .linklike{display:inline-block;margin-top:10px}
/* App-Banner (Speicherfehler / Export-Nudge) */
#app-banners:empty{display:none}
.app-banner{display:flex;align-items:center;gap:12px;padding:8px 16px;font:400 12px 'DM Sans';
  background:var(--nude);border-bottom:1px solid var(--line);color:var(--ink-soft)}
.app-banner.err{background:#F6E3DC;border-bottom-color:var(--red);color:var(--ink)}
.app-banner .ab-msg{flex:1;line-height:1.4}
.app-banner .ab-actions{display:flex;align-items:center;gap:6px;flex:none}
.app-banner .ab-btn{font:500 10px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);background:var(--ink);border:1px solid var(--ink);padding:6px 12px;cursor:pointer}
.app-banner.err .ab-btn{background:var(--red);border-color:var(--red)}
.app-banner .ab-btn:hover{opacity:.88}
.app-banner .ab-x{background:none;border:none;color:var(--ink-mute);font-size:17px;line-height:1;cursor:pointer;padding:0 4px}
.app-banner .ab-x:hover{color:var(--ink)}
.faq-a{padding:0 13px 12px;font:400 12px 'DM Sans';color:var(--ink-soft);line-height:1.55}
/* Hilfe-Doku: sticky Suchleiste + Themen-Karten + Live-Filter */
.help-search{position:sticky;top:-20px;z-index:3;margin:-20px -22px 0;padding:16px 22px 12px;
  background:var(--white);border-bottom:1px solid var(--line)}
.doc-group{display:flex;flex-direction:column}
.doc-empty{font:400 12px 'DM Sans';color:var(--ink-mute);text-align:center;padding:16px 2px}
.help-hidden{display:none!important}
.help-searching .hs-hide{display:none}
/* Rack-Statistik-/Health-Leiste (Kapazität + Leistungsbudget) */
.rack-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:7px 20px;border-bottom:1px solid var(--line);background:rgba(250,250,248,.72)}
.rs-item{display:flex;align-items:center;gap:7px}
.rs-k{font:500 8.5px 'DM Mono',monospace;letter-spacing:.1em;color:var(--ink-mute);text-transform:uppercase}
.rs-v{font:500 11px 'DM Mono',monospace;color:var(--ink)}
.rs-power{gap:8px}
.rs-bar{width:54px;height:6px;background:var(--nude-dark);position:relative;overflow:hidden;flex:none}
.rs-bar>span{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.rs-power.over .rs-v{color:var(--red-txt)}
.rs-power.over .rs-bar>span{background:var(--red)}
/* Leeres Rack: Hinweis */
.rack-empty{max-width:520px;text-align:center;margin:0 0 16px;padding:10px 16px;background:var(--nude-light);border:1px solid var(--line);pointer-events:none;font:400 12px 'DM Mono',monospace;letter-spacing:.04em;color:var(--ink-soft);line-height:1.6}

/* Umgebungs-Leiste: externe Geräte (Drucker/PC/WLAN …) unter dem Rack */
.env-bar{border-top:1px solid var(--line);background:var(--nude-light);padding:12px 20px 14px;flex:none}
.env-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.env-head .env-t{font:500 9.5px 'DM Mono',monospace;letter-spacing:.14em;color:var(--ink)}
.env-head .env-c{font:400 9px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink-mute)}
.env-addwrap{position:relative;margin-left:auto}
.env-add{font:500 9.5px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink);border:1px solid var(--line);background:var(--white);padding:7px 12px;cursor:pointer}
.env-add:hover,.env-add.open{border-color:var(--ink)}
.env-menu{position:absolute;right:0;bottom:calc(100% + 4px);top:auto;z-index:30;background:var(--white);border:1px solid var(--ink);box-shadow:0 -6px 18px rgba(28,28,26,.14);min-width:190px;max-height:min(320px,50vh);overflow-y:auto;padding:4px}
.env-mi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:400 11px 'DM Sans';color:var(--ink);background:transparent;border:0;padding:8px 9px;cursor:pointer}
.env-mi:hover{background:var(--nude-light)}
.env-mi .emi-ico{width:18px;height:18px;display:inline-flex;flex:none}
.env-mi .emi-ico svg{width:16px;height:16px;stroke:var(--ink-soft);fill:none}
.env-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;max-height:30vh;overflow-y:auto}
.env-empty{font:400 11px 'DM Sans';color:var(--ink-mute)}
.env-tile{position:relative;text-align:left;height:100%;width:100%;border:1px solid var(--line);background:var(--white);padding:11px 11px 10px;cursor:pointer;transition:border-color .12s,box-shadow .12s;display:block}
.env-tile:hover{border-color:var(--ink);box-shadow:0 2px 0 var(--nude-dark)}
.env-tile.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.env-tile .et-tag{position:absolute;top:9px;right:9px;font:400 7.5px 'DM Mono',monospace;letter-spacing:.06em;color:var(--ink-mute);border:1px solid var(--line);padding:1px 4px;text-transform:uppercase}
.env-cell{position:relative}
.env-cell .et-del{position:absolute;bottom:9px;right:8px;font:400 13px 'DM Mono',monospace;line-height:1;color:var(--ink-mute);opacity:0;transition:opacity .12s;padding:2px 4px;z-index:2}
.env-cell:hover .et-del,.et-del:focus-visible{opacity:1}
.env-cell .et-del:hover{color:var(--red-txt)}
.env-tile .et-ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--nude-light);margin-bottom:9px}
.env-tile .et-ico svg{width:20px;height:20px;stroke:var(--ink-soft);fill:none}
.env-tile .et-ico img{width:20px;height:20px;object-fit:contain}
.env-tile .et-nm{display:block;font:500 11px 'DM Sans';color:var(--ink);line-height:1.2;padding-right:44px}
.env-tile .et-mt{display:block;font:400 9px 'DM Mono',monospace;color:var(--ink-mute);margin-top:3px;letter-spacing:.02em}
.env-tile .et-conn{display:inline-block;margin-top:8px;font:400 8px 'DM Mono',monospace;letter-spacing:.03em;color:var(--ink-soft);background:var(--nude);padding:2px 5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.env-tile .et-conn.none{color:var(--ink-mute);background:transparent;padding-left:0}

/* Mittlere Breiten: schmalere Seitenspalten */
@media (max-width:1100px){
  .studio{grid-template-columns:212px minmax(0,1fr) 300px}
}
/* Schmal / Tablet-Hochkant / Handy: Spalten stapeln, Seite scrollt */
@media (max-width:860px){
  body{overflow:auto}
  .page{height:auto;min-height:100vh;min-height:100dvh}
  .app{overflow:visible}
  .studio{display:flex;flex-direction:column;flex:none}
  .topbar{flex-wrap:wrap;height:auto;padding:8px 12px;gap:6px 10px}
  .catalog{border-right:none;border-bottom:1px solid var(--line)}
  .cat-body{max-height:280px}
  .rack{min-height:60vh}
  .inspector{border-left:none;border-top:1px solid var(--line)}
  .insp-body{overflow:visible}
  /* Rack-Kopfzeile darf umbrechen statt abgeschnitten zu werden */
  .rack-head{flex-wrap:wrap;gap:10px 12px}
  .rack-viewctrls{flex-wrap:wrap}
}
/* Handy: Topbar sauber vertikal stapeln, Bedienelemente vollflächig, größere Tap-Ziele */
@media (max-width:600px){
  .topbar{flex-direction:column;align-items:stretch;gap:9px;padding:10px 12px}
  .topbar > div{width:100%}
  .topbar > div:first-child{flex-wrap:wrap;gap:10px 14px !important}
  .gsearch{flex:1 1 auto;max-width:none;min-width:0;width:100%;height:38px}
  .topbar > div:last-child{justify-content:space-between}
  .save-hint{display:none}                      /* Platz sparen — SPEICHERN bleibt sichtbar */
  .menu-item,.nav-cta,.lang-toggle button{padding:9px 12px}
  .btn-primary{padding:12px 20px}
  /* Rack-Kopf: Titel oben, Steuerleiste komplett auf eigene Zeile(n) — nichts wird beschnitten */
  .rack-head{padding:12px 14px}
  .rack-viewctrls{flex:1 1 100%;justify-content:flex-start;gap:8px}
  .viewtoggle button,.viewmenu-btn,.conn-btn,.tp-filt{padding:9px 12px}
  .hist-ctrl button{width:38px;height:38px}
  .rack-tab{padding:10px 12px 8px}
  .cat-body{max-height:220px}
  /* Dialoge volle Breite nutzen */
  .overlay,.welcome-layer{padding:12px}
  .dlg-head{padding:16px}
  .dlg-body{padding:16px}
  .help-search{top:-16px;margin:-16px -16px 0;padding:14px 16px 10px}
}

/* ---- Faceplate / Port-Matrix (Modal) ---- */
.face-body{gap:14px}
.face-ctrls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.face-linkbtn{display:inline-flex;align-items:center;gap:7px;font:500 10px 'DM Mono',monospace;letter-spacing:.06em;
  color:var(--ink-soft);border:1px solid var(--line);background:var(--white);padding:7px 11px;cursor:pointer;text-transform:uppercase}
.face-linkbtn.on{border-color:var(--ink)}
.face-linkbtn .fl-box{width:13px;height:13px;border:1px solid var(--sand);display:grid;place-items:center;font-size:9px}
.face-linkbtn.on .fl-box{background:var(--ink);color:var(--white);border-color:var(--ink)}
.face-ctrls{justify-content:center}
.face-main{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.face-boardcol{flex:0 1 auto;min-width:0;display:flex;flex-direction:column}
.face-scroll{overflow-x:auto;border:1px solid var(--line);background:var(--nude-light);padding:16px 18px;
  width:max-content;max-width:100%;margin:0 auto}
.face-board{position:relative}
.face-links{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.face-jack{position:absolute;width:28px;height:28px;border:1.5px solid var(--sand);background:var(--white);padding:0;
  cursor:pointer;display:grid;place-items:center;transition:transform .08s ease}
.face-jack:hover{transform:translateY(-1px);z-index:4}
.face-jack.occ{border-color:var(--ink)}
.face-jack.free{opacity:.5}
.face-jack.sel{outline:2px solid var(--ink);outline-offset:2px;z-index:6}
.face-jack.partner{outline:2px solid var(--blue);outline-offset:2px;z-index:6}
.face-jack .fj-pin{width:13px;height:9px;border:1px solid rgba(0,0,0,.3);border-bottom:none;pointer-events:none}
.face-num{position:absolute;width:34px;text-align:center;font:500 8.5px 'DM Mono',monospace;color:var(--ink-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.face-cap{position:absolute;font:500 8px 'DM Mono',monospace;letter-spacing:.08em;color:var(--ink);text-transform:uppercase;pointer-events:none;white-space:nowrap}
.face-legend{display:flex;flex-wrap:wrap;gap:9px 15px;margin-top:12px}
.face-lg{display:inline-flex;align-items:center;gap:6px;font:400 10px 'DM Mono',monospace;color:var(--ink-soft)}
.face-lg .sw{width:12px;height:12px;border:1.5px solid var(--sand);flex:none}
.face-detail{flex:0 0 258px;border:1px solid var(--line);background:var(--white);padding:14px;align-self:stretch;max-width:100%}
.face-empty{color:var(--ink-mute);font-size:12px;line-height:1.5}
.face-dhead{display:flex;align-items:baseline;gap:9px;border-bottom:1px solid var(--nude);padding-bottom:9px;margin-bottom:10px}
.face-dport{font:600 15px 'DM Mono',monospace}
.face-dside{font:500 8px 'DM Mono',monospace;letter-spacing:.1em;color:var(--white);background:var(--ink);padding:2px 6px;text-transform:uppercase}
.face-drow{display:grid;grid-template-columns:66px 1fr;gap:5px 10px;font-size:12px;margin:8px 0;align-items:center}
.face-drow .k{font:400 9px 'DM Mono',monospace;color:var(--ink-mute);letter-spacing:.05em;text-transform:uppercase}
.face-chip{display:inline-flex;align-items:center;gap:5px;font:500 10px 'DM Mono',monospace;padding:2px 7px;
  border:1px solid var(--line);background:var(--nude-light);margin:0 4px 4px 0}
.face-chip .dot,.face-cab .dot{width:9px;height:9px;flex:none;display:inline-block}
.face-mute{color:var(--ink-mute);font-size:11px}
.face-x{font:600 8px 'DM Mono',monospace;color:var(--white);background:var(--red);padding:1px 5px;margin-left:4px;text-transform:uppercase}
.face-cab{display:flex;align-items:center;gap:6px;font:400 11px 'DM Mono',monospace;margin:3px 0}
.face-trace{border:1px solid var(--line);background:var(--nude-light);padding:10px 11px;margin-top:12px}
.face-trace .ft-t{font:500 8px 'DM Mono',monospace;letter-spacing:.1em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:8px}
.face-trace .ft-p{font:400 10.5px 'DM Mono',monospace;line-height:1.9}
.face-trace .ft-n{background:var(--white);border:1px solid var(--line);padding:2px 5px;white-space:nowrap}
.face-trace .ft-n.mid{border-color:var(--ink);font-weight:500}
.face-trace .ft-l{color:var(--ink-mute)}
.matrix-btn{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;
  font:500 11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--ink);background:var(--white);padding:10px;cursor:pointer;transition:background .15s ease,color .15s ease}
.matrix-btn:hover{background:var(--ink);color:var(--white)}
@media (max-width:600px){ .face-detail{flex:1 1 100%} .face-scroll{width:100%} }

/* ==========================================================================
   v=83 — Audit-Fixes B20–B29 (Fokus, Touch, Umbruch) + neue Elemente
   ========================================================================== */

/* --- B29: Fokus-Ring dort, wo outline:none ihn geschluckt hat.
       Die betroffenen Felder liegen in Containern mit eigener Rahmenoptik → :focus-within am Container. --- */
.gsearch:focus-within,.search:focus-within,.hostbox:focus-within{outline:2px solid var(--ink);outline-offset:1px}
.selbox:focus-visible,.selbox:focus{outline:2px solid var(--ink);outline-offset:-1px}
.ip-addr:focus-visible,.ip-port:focus-visible,.notes-area:focus-visible{outline:2px solid var(--ink);outline-offset:-1px}
/* Fokus muss auch auf dunklen Flächen und SVG-Pfaden sichtbar sein */
.dev :focus-visible,.rp-panel :focus-visible,.glyphs :focus-visible{outline:2px solid var(--white);outline-offset:1px}
.rc-hit:focus-visible{outline:none;stroke:var(--ink);stroke-width:9;opacity:.35}

/* --- Neue Elemente aus dieser Runde --- */
.rt-main{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;text-align:left}
.rt-menu{border:0;background:transparent;font-size:13px;line-height:1;color:var(--ink-mute);cursor:pointer;padding:0 2px}
.pl-locbtn{border:0;background:transparent;padding:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cat-none{padding:18px 16px;font:400 11px 'DM Sans';color:var(--ink-mute);text-align:center}
.pl-in.pl-dup{border-color:var(--red);background:#FBF1ED}
.toast.err{background:var(--red)}
.et-del{border:0;background:transparent;cursor:pointer;line-height:1}
.grip-ctrl{border:0;background:transparent;padding:0}

/* --- B21: Touch-Gesten nicht an den Browser verlieren.
       Ohne touch-action wird der Ein-Finger-Drag im Diagramm zum Seiten-Scroll (pointercancel lässt den
       Knoten an einer Zufallsposition liegen) und Pinch zoomt Seite UND Diagramm gleichzeitig. --- */
.topo-stage,.topo-svg{touch-action:none}
.rack-stage{touch-action:pan-y}

/* --- B25: Toasts brechen jetzt um und bleiben im Viewport (gemessen 590 px bei 375 px Breite) --- */
.toast{white-space:normal;max-width:calc(100vw - 24px);text-align:center;line-height:1.45}
#toast-root{max-width:100vw}

/* --- B23/B24/B26: Touch-Bedienung. Nur für grobe Zeiger — Maus-Layout bleibt unverändert dicht. --- */
@media (pointer:coarse){
  /* Hover-only-Steuerelemente sind auf Touch sonst gar nicht erreichbar */
  .pgx,.pgrot,.et-del{opacity:1 !important;visibility:visible !important}
  /* Mindestgröße für alles, was man treffen können muss */
  .pl-x,.pl-locbtn,.ip-del,.rt-menu,.dlg-x,.ab-x,.cat-edit,.cat-dup,.cat-del,.mini-btn,.pgx,.pgrot,.et-del{
    min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .pl-in,.pl-sel{height:38px}
  .hist-ctrl button{width:40px;height:40px}
  /* Port-Zellen im Faceplate sind die tastbare Variante der winzigen Rack-Zellen */
  .face-jack{min-width:34px;min-height:34px}
  .zoom-ctrl button{width:40px;height:40px}
}
@media (max-width:600px){
  /* iOS Safari zoomt bei Fokus in jedes Feld unter 16px — im fixierten Dialog kommt man da schlecht wieder raus */
  .input,.selbox,.notes-area,.ip-addr,.ip-port,.pl-in,.pl-sel,.gsearch input,.search input,.hostbox input{font-size:16px}
  .input,.selbox{height:40px}
  .ip-addr,.ip-port{height:38px}
  .pl-in,.pl-sel{height:38px}
}

/* --- C14: Bewegung respektieren. Der pulsierende Verkabelungs-Punkt lief bisher ungebremst durch. --- */
@media (prefers-reduced-motion: reduce){
  .conn-dot{animation:none}
  .dialog.dlg-anim,.welcome-layer .dialog{animation:none}
  .toast{animation:none}
  *{scroll-behavior:auto !important}
}

/* --- C15/C20: Dokumentstruktur. Die h1 trägt den Namen für Screenreader, ohne das Layout anzufassen. --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.noscript-note{margin:40px auto;max-width:560px;padding:20px 22px;border:1px solid var(--line);
  background:var(--nude-light);font:400 13px 'DM Sans';color:var(--ink);line-height:1.6}
.noscript-note strong{display:block;margin-bottom:6px;font:500 13px 'DM Mono',monospace;letter-spacing:.04em}