:root{
  --bg:#09101f;
  --panel:#121d33;
  --panel2:#17243d;
  --line:#283a5a;
  --text:#eff5ff;
  --muted:#8da2c2;
  --accent:#61e2bd;
  --accent2:#68a8ff;
  --warn:#f2b84b;
  --danger:#ff7185;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 75% -10%,rgba(68,126,225,.12),transparent 34rem),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid var(--line);
  background:rgba(9,16,31,.92);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:18px}
.brandmark{
  width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#07111e;font-size:12px;font-weight:950;
}
.version{color:var(--muted);font-size:12px}
.page{max-width:1540px;margin:0 auto;padding:30px}
.back{color:var(--muted);font-size:12px}
.hero{padding:34px 0 24px}
.hero.compact{padding:22px 0}
.eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--accent);
  font-weight:900;
}
h1{font-size:38px;line-height:1.05;margin:7px 0 9px}
h2{font-size:17px;margin:0}
h3{font-size:13px;margin:0 0 12px}
p{color:var(--muted);margin:0}
.card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:15px
}
.card-sub{font-size:11px;margin-top:4px}
.stats{
  display:grid;gap:12px;margin-bottom:20px
}
.stats-six{grid-template-columns:repeat(6,1fr)}
.stat{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:14px;padding:17px;
}
.stat span{font-size:28px;font-weight:900;display:block}
.stat small{font-size:12px;color:var(--muted)}
.grid.two{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
.site-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.site-list,.room-list,.device-index,.connection-list{
  display:flex;flex-direction:column;gap:9px
}
.site-row,.room-row,.device-index-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;border:1px solid var(--line);border-radius:11px;background:#0c1628;
  transition:.15s ease;
}
.site-row:hover,.room-row:hover,.device-index-row:hover{
  border-color:#49658f;transform:translateY(-1px)
}
.site-row strong,.device-index-row strong{display:block;font-size:13px}
.site-row span,.device-index-row span{font-size:11px;color:var(--muted)}
.row-pills{display:flex;gap:6px}
.pill{
  border:1px solid var(--line);background:#14223a;color:#b8c7dc;
  padding:5px 8px;border-radius:999px;font-size:10px;white-space:nowrap;
}
.form{display:flex;flex-direction:column;gap:12px}
.form label{font-size:11px;color:var(--muted);font-weight:750}
.form input,.form select{
  margin-top:6px;width:100%;padding:11px 12px;border-radius:9px;
  border:1px solid var(--line);background:#091426;color:var(--text);outline:none;
}
.form input:focus,.form select:focus{border-color:var(--accent2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button{
  border:0;border-radius:9px;padding:11px 14px;font-weight:850;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101d;
}
button.secondary{
  background:#172844;border:1px solid #385477;color:#e5efff;
}
button.danger{
  background:#35151e;border:1px solid #7e2a3b;color:#ffa3b1;
}
.empty{padding:14px 0;color:var(--muted);font-size:12px}
.subsection{margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}
.sticky{position:sticky;top:84px}
.side-stack{display:flex;flex-direction:column;gap:14px}
details summary{
  cursor:pointer;font-weight:850;font-size:13px;list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";float:right;color:var(--muted)}
details[open] summary:after{content:"–"}
.details-form{margin-top:15px}

/* Räume */
.room-row{justify-content:flex-start}
.room-icon{
  width:34px;height:34px;border-radius:9px;background:#162947;
  display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--accent2)
}
.room-copy{flex:1}
.room-copy strong{display:block;font-size:13px}
.room-copy span{font-size:11px;color:var(--muted)}
.chevron{font-size:22px;color:#607596}
.room-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start
}
.outlet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.outlet-card{
  background:#0c1628;border:1px solid var(--line);border-radius:12px;padding:14px
}
.outlet-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.outlet-symbol{
  width:34px;height:34px;border-radius:8px;border:1px solid #405879;
  display:grid;place-items:center;color:var(--accent)
}
.outlet-head strong{display:block;font-size:13px}
.outlet-head span{font-size:11px;color:var(--muted)}
.compact-form{gap:8px}
.outlet-linked{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:11px;
}
.outlet-linked span{display:block;color:var(--muted);margin-bottom:5px}
.outlet-linked a{display:block;color:var(--accent2);font-weight:750}

/* Rack */
.rack-layout-v3{
  display:grid;grid-template-columns:minmax(760px,1fr) 340px;
  gap:22px;align-items:start
}
.rack-wide{width:min(1050px,100%);margin:0 auto 30px}
.rack-shell{
  background:#070d17;border:7px solid #263247;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.32),inset 0 0 0 1px #4a5870
}
.rack-title{
  display:flex;justify-content:space-between;padding:10px 16px;
  color:#8797b1;font-size:10px;font-weight:900;letter-spacing:.14em
}
.rack-body{padding:0 10px 12px}
.rack-row{
  min-height:34px;display:grid;grid-template-columns:42px 1fr;align-items:stretch
}
.u-label{
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid #29364a;color:#657794;font-size:9px
}
.empty-u{
  min-height:34px;border-top:1px solid #1c293b;
  background:linear-gradient(180deg,#09111e,#0b1422);
}
.device-face{
  min-height:32px;margin:1px 3px;padding:4px 10px;
  border:1px solid #475d7b;border-radius:5px;
  background:linear-gradient(180deg,#263a54,#17253a);
  display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center;
}
.device.switch .device-face{background:linear-gradient(180deg,#24483f,#17332e)}
.device.patchpanel .device-face{background:linear-gradient(180deg,#393e49,#252932)}
.device.server .device-face{background:linear-gradient(180deg,#323d53,#202a3c)}
.device.usv .device-face{background:linear-gradient(180deg,#44384e,#2a2432)}
.device-click:hover{border-color:var(--accent2)}
.device-name{font-size:12px;font-weight:900}
.device-sub{font-size:9px;color:#9eafc7;margin-top:2px}
.rack-ports{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}
.rack-port{
  width:25px;height:21px;border:1px solid #50627b;background:#080e18;
  border-radius:3px;display:grid;place-items:center;color:#6f819d;
}
.rack-port b{font-size:7px;font-weight:750}
.rack-port.connected{
  border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent);
  color:#e3fff7
}
.device-meta{text-align:right;color:var(--muted);font-size:10px}
.device-index-row{padding:10px}
.connection-card{
  padding:10px;border:1px solid var(--line);border-radius:10px;background:#0b1526;
  font-size:10px
}
.connection-card strong{font-size:10px}
.connection-card small{display:block;color:var(--muted);margin-top:4px}
.cable-arrow{color:var(--warn);margin:0 5px}

/* Device / Ports */
.device-workspace{
  display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start
}
.ports-panel{min-height:380px}
.port-switchboard{
  display:grid;
  grid-template-columns:repeat(8,minmax(68px,1fr));
  gap:8px
}
.port-tile{
  min-height:78px;padding:9px 7px;border:1px solid var(--line);
  border-radius:9px;background:#0a1425;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:.13s ease;
}
.port-tile:hover{border-color:#5275a5;transform:translateY(-1px)}
.port-tile.selected{
  border-color:var(--accent2);
  box-shadow:0 0 0 2px rgba(104,168,255,.12);
  background:#10203a
}
.port-tile.connected .port-jack{border-color:var(--accent)}
.port-tile.connected .port-jack:after{background:var(--accent)}
.port-jack{
  width:28px;height:19px;border:2px solid #53647f;border-radius:4px;position:relative;
}
.port-jack:after{
  content:"";position:absolute;left:5px;right:5px;bottom:3px;height:3px;background:#2e3d54;
}
.port-tile b{font-size:11px}
.port-tile small{
  max-width:100%;font-size:8px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.inspector h2{margin-top:3px}
.status{
  padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900
}
.status.connected{background:rgba(97,226,189,.12);color:var(--accent)}
.status.free{background:rgba(141,162,194,.10);color:var(--muted)}
.direct-link,.connect-box{
  margin-top:15px;padding-top:14px;border-top:1px solid var(--line)
}
.direct-link>span{display:block;color:var(--muted);font-size:10px}
.direct-link>strong{display:block;margin:5px 0;font-size:12px}
.direct-link>small{display:block;color:var(--muted);font-size:10px;margin-bottom:10px}
.path-timeline{position:relative;padding-left:8px}
.timeline-step{
  position:relative;display:flex;gap:12px;padding:0 0 18px 0;
}
.timeline-step:not(:last-child):before{
  content:"";position:absolute;left:6px;top:13px;bottom:0;width:2px;background:#304563
}
.timeline-dot{
  width:14px;height:14px;border-radius:50%;background:#53647e;
  border:3px solid #142039;flex:0 0 auto;z-index:1
}
.timeline-step.type-port .timeline-dot{background:var(--accent)}
.timeline-step.type-cable .timeline-dot{background:var(--warn)}
.timeline-step.type-outlet .timeline-dot{background:var(--accent2)}
.timeline-step.type-room .timeline-dot{background:#a984ff}
.timeline-step.type-endpoint .timeline-dot{background:#ff7c9b}
.timeline-step strong{display:block;font-size:11px}
.timeline-step small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.danger-zone p{font-size:11px;margin:12px 0}

/* Responsive */
@media(max-width:1280px){
  .rack-layout-v3,.device-workspace,.room-layout{grid-template-columns:1fr}
  .sticky{position:static}
  .port-switchboard{grid-template-columns:repeat(6,minmax(66px,1fr))}
}
@media(max-width:1050px){
  .stats-six{grid-template-columns:repeat(3,1fr)}
  .site-columns,.grid.two{grid-template-columns:1fr}
  .outlet-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .page{padding:18px}
  h1{font-size:30px}
  .stats-six{grid-template-columns:repeat(2,1fr)}
  .port-switchboard{grid-template-columns:repeat(4,minmax(58px,1fr))}
  .rack-layout-v3{display:block}
  .rack-wide{overflow:auto}
  .device-face{grid-template-columns:130px 1fr}
  .rack-ports{display:none}
}


/* ==========================================================
   OpenInfra v0.4 - Rack Editor
   ========================================================== */

.rack-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding:22px 0 18px;
}
.rack-page-head h1{margin-bottom:6px}
.rack-actions{display:flex;align-items:center;gap:10px}
.view-tabs{
  display:flex;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b1527;
}
.view-tabs a{
  padding:9px 15px;
  border-radius:7px;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
}
.view-tabs a.active{
  background:#1b66db;
  color:white;
  box-shadow:0 5px 18px rgba(27,102,219,.26);
}
.ghost-button{
  background:#101d31;
  border:1px solid var(--line);
  color:#d8e4f7;
  font-size:11px;
  padding:10px 13px;
}

.rack-v4-layout{
  display:grid;
  grid-template-columns:minmax(760px,1fr) 360px;
  gap:20px;
  align-items:start;
}
.rack-stage-card{
  min-width:0;
  background:linear-gradient(180deg,#111d31,#0c1628);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.rack-stage-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 4px 12px;
}
.rack-stage-toolbar span{
  font-size:10px;
  color:var(--accent);
  font-weight:900;
  letter-spacing:.14em;
}
.rack-stage-toolbar small{font-size:10px;color:var(--muted)}
.rack-canvas-wrap{
  display:flex;
  justify-content:center;
  overflow:auto;
  padding:3px;
}
.rack-shell-v4{
  position:relative;
  width:min(1080px,100%);
  min-width:740px;
  background:#070c14;
  border:9px solid #263246;
  border-radius:12px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.35),
    inset 0 0 0 1px #516078;
  overflow:hidden;
}
.rack-cap,.rack-base{
  height:30px;
  background:linear-gradient(180deg,#202c3f,#131d2b);
  border-bottom:1px solid #34445c;
}
.rack-cap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
  color:#8ea0bc;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.rack-base{
  border-top:1px solid #34445c;
  border-bottom:0;
}
.rack-body-v4{
  position:relative;
  z-index:2;
}
.rack-unit-row{
  min-height:38px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 22px;
  align-items:stretch;
  position:relative;
}
.rack-unit-row.device-row{
  min-height:calc(38px * var(--span));
}
.rail{
  position:relative;
  background:#111927;
  border-right:1px solid #303c50;
}
.rail-right{
  border-right:0;
  border-left:1px solid #303c50;
}
.rail span{
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  text-align:right;
  color:#687a96;
  font-size:8px;
  font-variant-numeric:tabular-nums;
}
.rail i{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:#46546b;
  top:50%;right:5px;
  transform:translateY(-50%);
  box-shadow:0 0 0 1px #0a101b;
}
.rail-right i{right:auto;left:5px}
.drop-area{
  position:relative;
  border-top:1px solid #1e2a3b;
  background:linear-gradient(180deg,#09111e,#0b1421);
  padding:1px 2px;
}
.empty-drop{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#34445c;
  font-size:8px;
}
.rack-unit-row.drop-ok .drop-area{
  background:rgba(97,226,189,.11);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.rack-unit-row.drop-bad .drop-area{
  background:rgba(255,113,133,.10);
  box-shadow:inset 0 0 0 1px var(--danger);
}
.rack-device{
  height:100%;
  min-height:36px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  border:1px solid #53657e;
  border-radius:5px;
  background:linear-gradient(180deg,#2a3648,#1b2534);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.5);
  overflow:hidden;
  cursor:grab;
}
.rack-device:active{cursor:grabbing}
.rack-device.dragging{
  opacity:.38;
  outline:2px dashed var(--accent2);
}
.device-main-link{
  min-width:0;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  align-items:center;
}
.device-brand-zone{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 12px;
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.08);
}
.device-brand-zone strong{font-size:11px}
.device-brand-zone small{
  font-size:8px;
  color:#9babc2;
  margin-top:2px;
}
.device-brand-zone em{
  font-style:normal;
  font-size:8px;
  color:#6f87a8;
  margin-top:2px;
}
.device-face-zone{
  padding:3px 10px;
  min-width:0;
}
.drag-handle{
  display:grid;
  place-items:center;
  color:#637590;
  border-left:1px solid rgba(255,255,255,.08);
  font-size:11px;
  letter-spacing:-4px;
  user-select:none;
}
.rack-device-switch{
  background:linear-gradient(180deg,#244c42,#17352f);
}
.rack-device-patchpanel{
  background:linear-gradient(180deg,#383d46,#262a30);
}
.rack-device-server{
  background:linear-gradient(180deg,#343d4b,#222b37);
}
.rack-device-nas{
  background:linear-gradient(180deg,#333e4d,#222c39);
}
.rack-device-firewall{
  background:linear-gradient(180deg,#493c31,#30281f);
}
.rack-device-usv{
  background:linear-gradient(180deg,#40364b,#292330);
}

/* echte Fronten */
.front-ports{
  display:grid;
  grid-template-columns:repeat(24,minmax(18px,1fr));
  gap:3px;
  align-items:center;
}
.front-port{
  height:27px;
  min-width:18px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#74849b;
  font-size:6px;
}
.front-port b{
  font-size:6px;
  font-weight:700;
  line-height:1;
  margin-bottom:2px;
}
.front-port i{
  width:16px;
  height:12px;
  border:1px solid #758398;
  border-radius:2px;
  background:#05090e;
  position:relative;
}
.front-port i:before{
  content:"";
  position:absolute;
  left:3px;right:3px;top:2px;
  height:2px;
  background:#243140;
}
.front-port.connected i{
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(97,226,189,.24);
}
.front-port.connected i:after{
  content:"";
  position:absolute;
  right:1px;bottom:1px;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--accent);
}
.switch-front{
  grid-template-columns:repeat(24,minmax(17px,1fr));
}
.switch-port i{border-color:#566a76}
.patch-front i{border-color:#7a858d}

.server-front{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.drive-grid{
  display:grid;
  grid-template-columns:repeat(4,56px);
  gap:4px;
}
.drive-grid span,.nas-front span{
  height:24px;
  border:1px solid #4b5869;
  border-radius:2px;
  background:#111820;
  position:relative;
}
.drive-grid span i,.nas-front span i{
  position:absolute;
  width:3px;height:3px;
  right:3px;top:3px;
  border-radius:50%;
  background:#58d799;
}
.server-status{display:flex;gap:4px}
.server-status i{
  width:5px;height:5px;border-radius:50%;background:#5ae4b9
}
.nas-front{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
}
.firewall-front{
  display:flex;
  gap:7px;
  justify-content:flex-end;
}
.firewall-front span{
  width:30px;height:18px;
  border:1px solid #63725f;
  border-radius:2px;
  background:#101610;
  position:relative;
}
.firewall-front span i{
  position:absolute;
  width:3px;height:3px;
  bottom:2px;right:2px;
  border-radius:50%;
  background:#63e6be;
}
.ups-front{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.ups-display{
  background:#aeb7ad;
  color:#17211d;
  font-family:monospace;
  padding:4px 13px;
  border-radius:3px;
  font-size:15px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.35);
}
.power-ring{
  width:18px;height:18px;
  border:2px solid #5f7669;
  border-radius:50%;
  box-shadow:inset 0 0 0 4px #18231d;
}
.generic-front{display:flex;gap:7px;justify-content:flex-end}
.generic-front span{
  width:38px;height:18px;border:1px solid #4b5b70;border-radius:3px;background:#111a26
}

/* SVG Kabel */
.cable-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:8;
  overflow:visible;
}
.rack-cable{
  fill:none;
  stroke:#f2b84b;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(242,184,75,.3));
  opacity:.92;
}
.rack-cable.cable-1{stroke:#68a8ff}
.rack-cable.cable-2{stroke:#61e2bd}
.rack-cable.cable-3{stroke:#b887ff}
.rack-cable.cable-4{stroke:#ff7d8f}

.rack-side-v4{
  position:sticky;
  top:84px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.connection-card-v4{
  display:grid;
  grid-template-columns:1fr 48px 1fr;
  gap:6px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b1526;
}
.connection-node strong{
  display:block;
  font-size:10px;
}
.connection-node span,.connection-node em{
  display:block;
  font-size:8px;
  color:var(--muted);
  font-style:normal;
  margin-top:2px;
}
.connection-mid{text-align:center}
.connection-mid i{
  display:block;
  height:2px;
  background:var(--warn);
  margin-bottom:4px;
}
.connection-mid small{
  display:block;
  color:var(--muted);
  font-size:7px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rack-legend{
  display:flex;
  gap:18px;
  padding:12px 5px 1px;
  color:var(--muted);
  font-size:9px;
}
.rack-legend span{display:flex;align-items:center;gap:6px}
.rack-legend i{
  width:10px;height:10px;border-radius:3px;display:inline-block
}
.legend-connected{background:var(--accent)}
.legend-cable{background:var(--warn)}
.legend-free{background:#34445c}
.rear-note p{margin-top:8px;font-size:11px;line-height:1.5}

@media(max-width:1250px){
  .rack-v4-layout{grid-template-columns:1fr}
  .rack-side-v4{position:static}
}
@media(max-width:850px){
  .rack-page-head{align-items:flex-start;flex-direction:column}
  .device-main-link{grid-template-columns:145px minmax(0,1fr)}
  .front-ports{grid-template-columns:repeat(12,minmax(18px,1fr))}
}


/* ==========================================================
   OpenInfra v0.5 - Übersicht & fokussierter Kabelweg
   ========================================================== */

.rack-filterbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 180px auto;
  gap:8px;
  align-items:center;
  padding:0 4px 12px;
}
.rack-filterbar input,.rack-filterbar select{
  min-height:36px;
  padding:8px 10px;
  font-size:10px;
}
.rack-filterbar span{
  color:var(--muted);
  font-size:9px;
  text-align:right;
  white-space:nowrap;
}
.rack-unit-row.filtered-out{
  opacity:.12;
  filter:grayscale(1);
}
.front-port{
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.front-port:hover{
  transform:translateY(-1px) scale(1.08);
  z-index:12;
}
.front-port.selected i{
  border-color:#fff !important;
  box-shadow:0 0 0 2px #1f73e8,0 0 13px rgba(104,168,255,.7) !important;
}
.rack-cable{
  opacity:.28;
  stroke-width:1.4;
}
.rack-cable.focused{
  opacity:1;
  stroke-width:3.2;
  filter:drop-shadow(0 0 5px currentColor);
}
.rack-cable.muted{
  opacity:.22;
}
.port-inspector-empty{
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
  padding:8px 2px 2px;
}
.port-focus-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:4px 0 10px;
}
.port-focus-head strong{font-size:11px}
.port-focus-head span{
  color:var(--muted);
  font-size:9px;
  text-align:right;
}
.path-compact{
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr;
  gap:4px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0a1424;
}
.path-compact div{text-align:center;min-width:0}
.path-compact b,.path-compact span{display:block}
.path-compact b{
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.path-compact span{font-size:8px;color:var(--muted);margin-top:2px}
.path-compact i{
  color:var(--accent);
  font-style:normal;
  text-align:center;
}
.path-destination{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:8px;
}
.path-destination span{
  padding:8px;
  border-radius:8px;
  background:#0b1729;
  border:1px solid var(--line);
}
.path-destination small,.path-destination b{display:block}
.path-destination small{
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.path-destination b{font-size:9px;margin-top:3px}
.port-free-note{
  border:1px dashed #34445c;
  border-radius:9px;
  padding:10px;
  color:var(--muted);
  font-size:9px;
}
.connection-card-v4{
  opacity:.72;
  transition:opacity .15s ease,border-color .15s ease,background .15s ease;
}
.connection-card-v4.selected-connection{
  opacity:1;
  border-color:var(--accent2);
  background:#10213b;
  box-shadow:0 0 0 1px rgba(104,168,255,.16);
}

/* kompakte Rackdarstellung */
.rack-shell-v4.rack-compact .rack-unit-row{
  min-height:25px;
}
.rack-shell-v4.rack-compact .rack-unit-row.device-row{
  min-height:calc(25px * var(--span));
}
.rack-shell-v4.rack-compact .rack-device{
  min-height:23px;
}
.rack-shell-v4.rack-compact .device-brand-zone{
  padding-top:2px;
  padding-bottom:2px;
}
.rack-shell-v4.rack-compact .device-brand-zone small,
.rack-shell-v4.rack-compact .device-brand-zone em{
  display:none;
}
.rack-shell-v4.rack-compact .front-port{
  height:20px;
}
.rack-shell-v4.rack-compact .front-port i{
  height:9px;
}
.rack-shell-v4.rack-compact .empty-drop span{
  display:none;
}
.rack-shell-v4.rack-compact .rail span{
  font-size:7px;
}
@media(max-width:900px){
  .rack-filterbar{grid-template-columns:1fr}
  .rack-filterbar span{text-align:left}
}


/* ==========================================================
   OpenInfra v0.6 - Port Drawer & Direct Patching
   ========================================================== */

.port-inspector{
  cursor:pointer;
}
.port-inspector:after{
  content:"Doppelklick auf Port oder Klick hier: bearbeiten / verbinden";
  display:block;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid var(--line);
  color:#6fa8ff;
  font-size:8px;
}
.drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,7,15,.56);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:90;
}
.drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.port-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(470px,94vw);
  height:100vh;
  z-index:100;
  background:#0d1728;
  border-left:1px solid #2a3b55;
  box-shadow:-28px 0 70px rgba(0,0,0,.42);
  transform:translateX(102%);
  transition:transform .2s ease;
  overflow:auto;
}
.port-drawer.open{
  transform:translateX(0);
}
.drawer-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:20px;
  background:rgba(13,23,40,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.drawer-head h2{
  margin:4px 0 0;
  font-size:20px;
}
.drawer-close{
  width:34px;
  height:34px;
  padding:0;
  border-radius:9px;
  background:#15233a;
  border:1px solid var(--line);
  color:#dce8fa;
  font-size:22px;
  line-height:1;
}
.drawer-body{
  padding:18px;
}
.drawer-section{
  padding:15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#111e33;
  margin-bottom:14px;
}
.drawer-section h3{
  margin:0 0 12px;
  font-size:12px;
}
.drawer-section textarea{
  resize:vertical;
  min-height:70px;
}
.drawer-current-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(97,226,189,.3);
  border-radius:9px;
  background:rgba(97,226,189,.06);
}
.drawer-current-link small,
.drawer-current-link strong,
.drawer-current-link span{
  display:block;
}
.drawer-current-link small{
  color:var(--muted);
  font-size:8px;
}
.drawer-current-link strong{
  font-size:10px;
  margin-top:2px;
}
.drawer-current-link span{
  color:var(--accent);
  font-size:8px;
  margin-top:2px;
}
.compact-danger{
  width:auto !important;
  padding:8px 10px !important;
  font-size:8px !important;
}
.drawer-no-link{
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px;
  border:1px dashed #3b4b62;
  border-radius:9px;
  color:var(--muted);
  font-size:9px;
}
.status-dot-free{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#65758d;
}
.drawer-destination{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:8px;
}
.drawer-destination span{
  padding:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0a1424;
}
.drawer-destination small,.drawer-destination b{display:block}
.drawer-destination small{
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
}
.drawer-destination b{
  margin-top:3px;
  font-size:9px;
}
.drawer-connect-form{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.drawer-loading,.drawer-error{
  color:var(--muted);
  font-size:9px;
  padding:8px 0;
}
.drawer-error{color:#ff8a9a}
.hidden{display:none !important}

/* In v0.6 wirkt die Rackansicht standardmäßig etwas dichter */
.rack-shell-v4 .rack-unit-row{
  min-height:32px;
}
.rack-shell-v4 .rack-unit-row.device-row{
  min-height:calc(32px * var(--span));
}
.rack-shell-v4 .rack-device{
  min-height:30px;
}


/* ==========================================================
   OpenInfra v0.7 - Drawer/UI cleanup
   ========================================================== */

.port-drawer{
  width:min(520px,96vw);
  background:#0b1525;
}
.drawer-head{
  padding:18px 20px;
  min-height:78px;
}
.drawer-head > div{
  min-width:0;
}
.drawer-head h2{
  font-size:18px;
  line-height:1.2;
}
.drawer-head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:9px;
}
.drawer-close{
  flex:0 0 34px;
}
.drawer-body{
  padding:14px;
}
.drawer-section{
  padding:14px;
  margin-bottom:12px;
  background:#111e33;
  border-radius:12px;
}
.drawer-section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
}
.drawer-section-title > div{
  display:flex;
  align-items:center;
  gap:8px;
}
.drawer-section-title h3{
  margin:0;
  font-size:11px;
}
.drawer-step{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:6px;
  background:#18345b;
  color:#78b1ff;
  font-size:9px;
  font-weight:900;
}
.drawer-section-hint{
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.drawer-section-hint.state-connected{
  color:#69e2bd;
  border-color:rgba(97,226,189,.3);
  background:rgba(97,226,189,.06);
}
.drawer-section-hint.state-free{
  color:#9aabc3;
}
.drawer-form{
  display:grid;
  gap:10px;
}
.drawer-form label,
.drawer-connect-form label{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
  width:100% !important;
  margin:0 !important;
}
.drawer-form input,
.drawer-form textarea,
.drawer-form select,
.drawer-connect-form input,
.drawer-connect-form select{
  display:block;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0;
}
.drawer-form textarea{
  min-height:78px;
  resize:vertical;
  padding:10px;
  background:#091322;
  border:1px solid #2a3b55;
  border-radius:8px;
  color:#e6eefb;
  font:inherit;
  font-size:10px;
  line-height:1.45;
}
.drawer-form textarea::placeholder{
  color:#65758d;
}
.primary-action{
  min-height:38px;
  margin-top:2px;
  border-radius:8px;
  font-size:9px;
}
.drawer-current-link{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  padding:10px;
}
.drawer-link-icon{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:8px;
  background:rgba(97,226,189,.11);
  color:#61e2bd;
  font-size:14px;
}
.drawer-link-copy{
  min-width:0;
}
.drawer-link-copy strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.drawer-no-link{
  min-height:42px;
}
.drawer-no-link div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.drawer-no-link strong{
  color:#c7d5e9;
  font-size:9px;
}
.drawer-no-link small{
  color:var(--muted);
  font-size:8px;
}
.drawer-destination{
  grid-template-columns:1fr 1fr;
}
.drawer-destination span.wide{
  grid-column:1 / -1;
}
.drawer-connect-form{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.drawer-help{
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid #23334b;
  border-radius:10px;
  background:#0d192b;
  color:var(--muted);
  font-size:8px;
  line-height:1.45;
}
.drawer-help strong{
  color:#78b1ff;
  flex:0 0 auto;
}

/* etwas klarerer Hintergrund bei geöffnetem Drawer */
.drawer-backdrop{
  background:rgba(2,7,15,.68);
}

/* Rack bleibt sichtbar, aber visuell ruhiger */
.drawer-backdrop.open ~ .port-drawer{
  box-shadow:-18px 0 55px rgba(0,0,0,.5);
}

@media(max-width:600px){
  .port-drawer{
    width:100vw;
  }
  .drawer-body{
    padding:10px;
  }
  .drawer-section{
    border-radius:10px;
  }
}


/* ==========================================================
   OpenInfra v0.7.1 HOTFIX
   Fix: globale .form-Regeln haben Drawer-Felder verschoben.
   ========================================================== */

#portDrawer .drawer-section form.drawer-form,
#portDrawer .drawer-section form.drawer-connect-form {
  display: block !important;
}

#portDrawer .drawer-section form.drawer-form > label,
#portDrawer .drawer-section form.drawer-connect-form > label {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  position: static !important;
  float: none !important;
}

#portDrawer .drawer-section form.drawer-form > label > input,
#portDrawer .drawer-section form.drawer-form > label > textarea,
#portDrawer .drawer-section form.drawer-form > label > select,
#portDrawer .drawer-section form.drawer-connect-form > label > input,
#portDrawer .drawer-section form.drawer-connect-form > label > textarea,
#portDrawer .drawer-section form.drawer-connect-form > label > select {
  display: block !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 6px 0 0 0 !important;
}

#portDrawer #drawerNotes {
  width: 100% !important;
  max-width: none !important;
  min-height: 92px !important;
  height: 92px;
  padding: 10px 12px !important;
  background: #091322 !important;
  color: #e6eefb !important;
  border: 1px solid #2a3b55 !important;
  border-radius: 8px !important;
  resize: vertical !important;
  font-family: inherit !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

#portDrawer .drawer-section-title {
  margin-bottom: 14px !important;
}

#portDrawer .drawer-section-title > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

#portDrawer .drawer-section-title h3 {
  display: block !important;
  margin: 0 !important;
}

#portDrawer .primary-action {
  display: block !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}

#portDrawer .drawer-help {
  margin-top: 2px !important;
}


/* ==========================================================
   OpenInfra v0.8 - Full Trace & Dark Mode
   ========================================================== */

.rack-filterbar input,
.rack-filterbar select{
  background:#091426 !important;
  color:#e8f0fc !important;
  border:1px solid #2a3b55 !important;
  box-shadow:none !important;
  color-scheme:dark;
}
.rack-filterbar input::placeholder{color:#65758d !important}
.rack-filterbar select option{background:#0b1525;color:#e8f0fc}

.rack-trace-full,.drawer-trace{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.trace-list{display:flex;flex-direction:column}
.trace-node{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 16px;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid #263954;
  border-radius:9px;
  background:#0a1526;
  transition:.12s ease;
}
a.trace-node:hover{
  border-color:#4c75aa;
  background:#10213a;
  transform:translateX(2px);
}
.trace-icon{
  width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;
  background:#182844;color:#9cb7dc;
  font-size:9px;font-weight:900;
}
.trace-icon.type-port{color:#65e4bd;background:rgba(97,226,189,.10)}
.trace-icon.type-cable{color:#f2b84b;background:rgba(242,184,75,.10)}
.trace-icon.type-outlet{color:#68a8ff;background:rgba(104,168,255,.10)}
.trace-icon.type-room{color:#b58cff;background:rgba(181,140,255,.10)}
.trace-icon.type-endpoint{color:#ff8fa2;background:rgba(255,143,162,.10)}
.trace-copy{min-width:0}
.trace-copy b,.trace-copy small{display:block}
.trace-copy b{
  color:#e8f1ff;font-size:9px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.trace-copy small{margin-top:2px;color:#7f94b3;font-size:7px}
.trace-open{color:#6b82a2;font-size:18px;line-height:1}
.trace-connector{width:2px;height:9px;margin-left:21px;background:#344c6d}
.trace-empty,.trace-loading,.drawer-trace-empty{
  padding:8px 0;color:#7185a3;font-size:8px
}

/* direkte Kurzansicht aus v0.5 reduzieren; darunter steht jetzt der vollständige Trace */
.port-inspector .path-compact,
.port-inspector .path-destination{display:none}


/* ==========================================================
   OpenInfra v0.8.1 - Trace hotfix
   ========================================================== */

.trace-icon.type-end{
  color:#93a7c2;
  background:rgba(147,167,194,.09);
}


/* ==========================================================
   OpenInfra v0.9 - Räume, Dosen, frei benannte Anschlüsse
   ========================================================== */

.room-layout-v9{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:20px;
  align-items:start;
}
.room-main-v9{min-width:0}
.socket-list-v9{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.socket-card-v9{
  border:1px solid var(--line);
  border-radius:13px;
  background:#0c1628;
  overflow:hidden;
}
.socket-head-v9{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  background:#101d31;
}
.socket-icon-v9{
  width:34px;height:34px;
  border-radius:9px;
  display:grid;place-items:center;
  background:#172a46;
  color:var(--accent2);
}
.socket-title-v9{flex:1;min-width:0}
.socket-title-v9 strong,
.socket-title-v9 span{display:block}
.socket-title-v9 strong{font-size:13px}
.socket-title-v9 span{font-size:9px;color:var(--muted);margin-top:2px}

.socket-port-list-v9{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.socket-port-row-v9{
  display:grid;
  grid-template-columns:minmax(170px,.8fr) minmax(210px,1fr) auto;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #22334c;
  border-radius:9px;
  background:#091426;
}
.socket-port-label-v9{
  display:flex;align-items:center;gap:9px;min-width:0
}
.socket-port-label-v9 strong,
.socket-port-label-v9 span{display:block}
.socket-port-label-v9 strong{font-size:10px}
.socket-port-label-v9 span{
  font-size:8px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.socket-jack-v9{
  width:25px;height:20px;
  border:2px solid #58708f;
  border-radius:4px;
  background:#060b12;
  position:relative;
  flex:0 0 auto;
}
.socket-jack-v9:after{
  content:"";
  position:absolute;left:5px;right:5px;bottom:3px;
  height:3px;background:#2a3c52;
}
.socket-path-v9{
  min-width:0;
}
.path-chip-v9{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:6px 8px;
  border-radius:7px;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.path-chip-v9.connected{
  color:#68a8ff;
  background:rgba(104,168,255,.08);
  border:1px solid rgba(104,168,255,.22);
}
.path-chip-v9.free{
  color:#8294ae;
  background:#101a2a;
  border:1px dashed #30425c;
}
.socket-edit-v9{
  position:relative;
}
.socket-edit-v9 > summary,
.add-socket-port-v9 > summary{
  color:#8ca3c3;
  font-size:8px;
  font-weight:800;
}
.socket-edit-v9 > summary:after,
.add-socket-port-v9 > summary:after{display:none}
.socket-edit-form-v9{
  position:absolute;
  right:0;
  top:28px;
  width:280px;
  padding:12px;
  border:1px solid #314664;
  border-radius:10px;
  background:#111e33;
  box-shadow:0 18px 45px rgba(0,0,0,.42);
  z-index:20;
}
.socket-delete-v9{
  position:absolute;
  right:12px;
  bottom:-42px;
  width:280px;
  z-index:20;
}
.add-socket-port-v9{
  border-top:1px solid var(--line);
  padding:11px 14px;
  background:#0d182a;
}
.add-socket-port-v9 .details-form{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:8px;
  align-items:end;
}
.add-socket-port-v9 .details-form label{margin:0}
.add-socket-port-v9 .details-form button{
  height:37px;
  white-space:nowrap;
}
.room-help-v9 h2{margin-bottom:12px}
.mini-trace-v9{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center;
}
.mini-trace-v9 span{
  border:1px solid var(--line);
  background:#0a1526;
  border-radius:8px;
  padding:7px;
  font-size:8px;
  color:#b9c8dc;
}
.mini-trace-v9 i{
  font-style:normal;
  color:#567498;
  font-size:10px;
}

@media(max-width:1100px){
  .room-layout-v9{grid-template-columns:1fr}
  .socket-port-row-v9{grid-template-columns:1fr}
  .socket-edit-form-v9,.socket-delete-v9{
    position:static;
    width:100%;
    margin-top:10px;
  }
  .add-socket-port-v9 .details-form{
    grid-template-columns:1fr;
  }
}

/* OpenInfra v0.9.1 - flaches Modell Raum -> Anschluss -> Panel -> Switch */
.room-layout-v91{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.network-port-list-v91{display:flex;flex-direction:column;gap:7px}
.network-port-v91{display:grid;grid-template-columns:170px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 11px;border:1px solid #233550;border-radius:10px;background:#0a1526}
.network-port-id-v91{display:flex;align-items:center;gap:10px}
.network-port-id-v91 strong{display:block;font-size:15px;color:#e8f1ff}.network-port-id-v91 small{display:block;color:#7489a7;font-size:8px}
.network-jack-v91{width:31px;height:25px;border:2px solid #5c7598;border-radius:5px;background:#050b13;position:relative;flex:0 0 auto}
.network-jack-v91:after{content:"";position:absolute;left:7px;right:7px;bottom:4px;height:3px;background:#293c55}
.network-route-v91{display:flex;align-items:center;gap:7px;min-width:0}.route-step-v91{display:flex;flex-direction:column;min-width:160px;padding:7px 9px;border:1px solid rgba(104,168,255,.24);border-radius:8px;background:rgba(104,168,255,.07)}
.route-step-v91 small{color:#7087a7;font-size:7px;text-transform:uppercase}.route-step-v91 strong{margin-top:2px;color:#a8caff;font-size:9px}.route-step-v91.incomplete{border-style:dashed;border-color:#34465e;background:#101a29}.route-step-v91.incomplete strong{color:#8596ad}.route-step-v91.endpoint{border-color:rgba(97,226,189,.22);background:rgba(97,226,189,.06)}.route-step-v91.endpoint strong{color:#75dfc1}.route-arrow-v91{color:#557497}
.network-edit-v91{position:relative}.network-edit-v91>summary{color:#8298b6;font-size:8px;font-weight:800}.network-edit-v91>summary:after{display:none}.network-edit-panel-v91{position:absolute;right:0;top:27px;z-index:25;width:290px;padding:12px;border:1px solid #314765;border-radius:10px;background:#111e33;box-shadow:0 18px 45px rgba(0,0,0,.44)}.network-edit-panel-v91 .danger{width:100%;margin-top:8px}
.mini-trace-v91{display:flex;flex-direction:column;gap:4px;text-align:center}.mini-trace-v91 span{padding:7px;border:1px solid var(--line);border-radius:8px;background:#0a1526;color:#b8c8dd;font-size:8px}.mini-trace-v91 i{font-style:normal;color:#58779c;font-size:10px}
@media(max-width:1100px){.room-layout-v91{grid-template-columns:1fr}.network-port-v91{grid-template-columns:1fr}.network-route-v91{flex-wrap:wrap}.network-edit-panel-v91{position:static;width:100%;margin-top:10px}}


/* ==========================================================
   OpenInfra v0.10.0 - Rack Hardware / echte Gerätefronten
   ========================================================== */
.model-front {
  position: relative; width: 100%; height: 100%; min-height: 42px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #080b0e; border-radius: 3px;
}
.model-front img {
  width: 100%; height: 100%; object-fit: fill; display: block;
  filter: brightness(.88) contrast(1.05);
}
.model-port-overlay { position: absolute; inset: 0; pointer-events: none; }
.model-hotspot {
  position: absolute; pointer-events: auto; z-index: 4;
  width: 2.2%; height: 42%; min-width: 9px; min-height: 14px;
  border: 1px solid transparent; background: transparent;
  opacity: .10; border-radius: 2px;
}
.model-hotspot:hover, .model-hotspot.connected {
  opacity: 1; border-color: #62e5c3; box-shadow: 0 0 0 1px rgba(98,229,195,.25);
  background: rgba(98,229,195,.12);
}
.model-hotspot b {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  font-size: 7px; color: #d8e7ff; opacity: 0;
}
.model-hotspot:hover b { opacity: 1; }

/* Die Hotspots bilden die Portreihen der jeweiligen Front grob nach.
   Die sichtbare Hardware bleibt das echte Gerätefoto. */
.model-front-netgear-gs324tp .model-hotspot:nth-child(odd),
.model-front-tplink-tl-sg3424p .model-hotspot:nth-child(odd) {
  top: 22%; left: calc(31% + (var(--port-index) / 2) * 2.65%);
}
.model-front-netgear-gs324tp .model-hotspot:nth-child(even),
.model-front-tplink-tl-sg3424p .model-hotspot:nth-child(even) {
  top: 57%; left: calc(31% + ((var(--port-index) - 1) / 2) * 2.65%);
}
.model-front-netgear-gs348t .model-hotspot:nth-child(odd),
.model-front-tplink-tl-sg1048 .model-hotspot:nth-child(odd) {
  top: 18%; left: calc(15% + (var(--port-index) / 2) * 3.05%);
}
.model-front-netgear-gs348t .model-hotspot:nth-child(even),
.model-front-tplink-tl-sg1048 .model-hotspot:nth-child(even) {
  top: 55%; left: calc(15% + ((var(--port-index) - 1) / 2) * 3.05%);
}

.rack-device-kabelführung .device-brand-zone { min-width: 150px; }
.cable-manager-front {
  height: 100%; min-height: 42px; width: 100%;
  display: flex; align-items: center; justify-content: space-around;
  background: linear-gradient(#1a1d20,#080a0c 48%,#15181b);
  border: 1px solid #343a40; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.cable-loop {
  width: 8%; height: 72%; border: 4px solid #171a1d; border-top-width: 7px;
  border-radius: 5px; box-shadow: inset 0 0 0 1px #454b50, 0 1px 2px #000;
  position: relative;
}
.cable-loop:before,.cable-loop:after {
  content:""; position:absolute; width:5px; height:5px; border-radius:50%;
  background:#5a6167; top:50%; transform:translateY(-50%);
}
.cable-loop:before{left:-8px}.cable-loop:after{right:-8px}

/* OpenInfra v0.10.1 – native Hardwarefronten */
.native-switch-front{height:100%;min-height:46px;width:100%;display:grid;grid-template-columns:26% minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:4px;background:linear-gradient(180deg,#30363b,#20262b 46%,#151a1e 53%,#252b30);border:1px solid #4b555d;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 #080a0c}
.native-switch-status{position:relative;padding:5px 8px;border-right:1px solid #4a535b;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 55%),#20262b;min-width:0}
.native-brand{display:block;font-size:8px;line-height:1;font-weight:900;letter-spacing:.06em;color:#e8edf2}.native-model{display:block;margin-top:3px;color:#91a4b7;font-size:6px;font-weight:800}
.native-switch-status small{position:absolute;left:8px;bottom:4px;color:#718397;font-size:5px;white-space:nowrap}
.status-led-bank{display:flex;gap:3px;margin-top:6px}.status-led-bank i{width:4px;height:4px;border-radius:50%;background:#34434d}.status-led-bank i.on{background:#62e5c3;box-shadow:0 0 4px rgba(98,229,195,.6)}
.native-port-area{min-width:0;height:100%;padding:4px 6px;display:flex;align-items:center;gap:7px}
.native-rj45-grid{flex:1;display:grid;grid-template-rows:repeat(2,1fr);grid-auto-flow:column;gap:3px 2px;align-content:center;height:calc(100% - 2px)}
.native-rj45-grid.cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.native-rj45-grid.cols-24{grid-template-columns:repeat(24,minmax(0,1fr));gap:3px 1px}
.native-rj45{position:relative!important;width:auto!important;min-width:0!important;height:auto!important;min-height:15px!important;display:block;background:#05090c!important;border:1px solid #71808a!important;border-radius:2px;opacity:1!important;box-shadow:inset 0 2px 2px rgba(0,0,0,.9);cursor:pointer}
.native-rj45:before{content:"";position:absolute;left:22%;right:22%;top:18%;height:32%;border-radius:1px;background:#121b20;border-bottom:1px solid #283940}.native-rj45:after{content:"";position:absolute;left:28%;right:28%;bottom:12%;height:16%;background:repeating-linear-gradient(90deg,#9b8853 0 1px,transparent 1px 3px);opacity:.65}
.native-rj45 b{position:absolute!important;top:-7px!important;left:50%!important;transform:translateX(-50%)!important;color:#8195a9!important;font-size:5px!important;opacity:1!important;line-height:1}.native-rj45.connected{border-color:#62e5c3!important;box-shadow:0 0 5px rgba(98,229,195,.55)!important}.native-rj45:hover{border-color:#75b7ff!important;box-shadow:0 0 0 1px #75b7ff,0 0 7px rgba(117,183,255,.45)!important;transform:none!important}
.native-uplink-area{flex:0 0 auto;height:100%;display:flex;align-items:center;gap:4px;padding-left:4px;border-left:1px solid rgba(255,255,255,.08)}
.native-sfp{position:relative!important;width:23px!important;height:28px!important;min-width:23px!important;min-height:28px!important;display:block;background:#080c0f!important;border:1px solid #697781!important;border-radius:2px;opacity:1!important;cursor:pointer;box-shadow:inset 0 0 0 2px #171e22}.native-sfp:after{content:"";position:absolute;inset:5px 4px;border:1px solid #343f47;background:#0b1115}.native-sfp b{position:absolute!important;top:-8px!important;left:50%!important;transform:translateX(-50%)!important;color:#879bad!important;font-size:5px!important;opacity:1!important;z-index:2}.native-sfp.connected{border-color:#62e5c3!important;box-shadow:0 0 5px rgba(98,229,195,.6)!important}
.native-console{display:grid;place-items:center;width:24px;height:22px;border:1px solid #54636e;background:#071016;color:#698194;font-size:5px;font-weight:800;border-radius:2px}
.native-netgear-gs348t{grid-template-columns:18% minmax(0,1fr)}.native-tplink-tl-sg1048{grid-template-columns:18% minmax(0,1fr)}.native-tplink-tl-sg3424p{grid-template-columns:30% minmax(0,1fr)}
.native-netgear-gs324tp .native-port-area,.native-netgear-gs348t .native-port-area{background:#252b2f}.native-tplink-tl-sg1048 .native-port-area,.native-tplink-tl-sg3424p .native-port-area{background:#2b3136}
.cable-manager-front{min-height:46px!important;border-radius:4px!important;background:linear-gradient(180deg,#292e32,#111518 52%,#23282c)!important;border:1px solid #465059!important}.cable-loop{border-color:#0c0f11!important;background:#15191c;box-shadow:inset 0 0 0 1px #434b51,0 2px 3px rgba(0,0,0,.65)!important}
.model-front{display:none!important}


/* ==========================================================
   OpenInfra v0.10.2 - 24-Port Patchpanels
   ========================================================== */

.native-patchpanel-front{
  position:relative;
  width:100%;
  height:100%;
  min-height:46px;
  display:grid;
  grid-template-columns:18% minmax(0,1fr);
  gap:7px;
  align-items:center;
  padding:4px 7px;
  box-sizing:border-box;
  border:1px solid #4c555d;
  border-radius:4px;
  background:
    linear-gradient(180deg,#30363b 0%,#22282d 48%,#161b1f 52%,#252b30 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.7);
}

.patchpanel-label-area{
  min-width:0;
  padding-left:4px;
}
.patchpanel-label-area strong{
  display:block;
  color:#e4ebf2;
  font-size:7px;
  letter-spacing:.06em;
}
.patchpanel-label-area small{
  display:block;
  margin-top:3px;
  color:#70879a;
  font-size:5px;
}

.native-patch-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(2,1fr);
  grid-auto-flow:column;
  gap:4px 3px;
  height:35px;
  align-content:center;
}

.native-patch-port{
  position:relative !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:14px !important;
  display:block;
  opacity:1 !important;
  background:#05090c !important;
  border:1px solid #6c7881 !important;
  border-radius:2px;
  cursor:pointer;
  box-shadow:inset 0 2px 2px rgba(0,0,0,.9);
}
.native-patch-port:before{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  top:18%;
  height:34%;
  background:#111a1f;
  border-bottom:1px solid #28373e;
}
.native-patch-port:after{
  content:"";
  position:absolute;
  left:28%;
  right:28%;
  bottom:12%;
  height:15%;
  background:repeating-linear-gradient(90deg,#9b8853 0 1px,transparent 1px 3px);
  opacity:.55;
}
.native-patch-port b{
  position:absolute !important;
  top:-7px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  color:#8296aa !important;
  font-size:5px !important;
  opacity:1 !important;
  line-height:1;
}
.native-patch-port.connected{
  border-color:#62e5c3 !important;
  box-shadow:0 0 5px rgba(98,229,195,.5) !important;
}
.native-patch-port:hover{
  border-color:#75b7ff !important;
  box-shadow:0 0 0 1px #75b7ff,0 0 7px rgba(117,183,255,.42) !important;
  transform:none !important;
}

.native-patchpanel-front.legacy-patchpanel{
  border-color:#8a6e3c;
}
.native-patch-grid.legacy-ports{
  grid-template-columns:repeat(24,minmax(0,1fr));
  gap:3px 1px;
}
.legacy-patch-warning{
  position:absolute;
  top:3px;
  right:5px;
  padding:2px 4px;
  border-radius:999px;
  font-size:5px;
  font-weight:900;
  color:#f0c66d;
  background:rgba(240,198,109,.09);
  border:1px solid rgba(240,198,109,.28);
}

.patchpanel-normalize-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  border-color:rgba(240,198,109,.28);
}
.patchpanel-normalize-card strong,
.patchpanel-normalize-card span{
  display:block;
}
.patchpanel-normalize-card span{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}


/* OpenInfra v0.10.3 - Netgear ProSafe GS752TPP */
.native-netgear-gs752tpp{
  grid-template-columns:19% minmax(0,1fr);
  border-color:#525b61;
}
.native-netgear-gs752tpp .native-switch-status{
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 58%),
    linear-gradient(180deg,#30363a,#20262a);
}
.native-netgear-gs752tpp .native-port-area{background:#272d31}
.native-netgear-gs752tpp .native-brand{color:#edf2f5}
.native-netgear-gs752tpp .native-model{color:#9eabb6}
.native-netgear-gs752tpp .native-rj45:after{
  background:repeating-linear-gradient(90deg,#b39445 0 1px,transparent 1px 3px);
  opacity:.75;
}
.native-netgear-gs752tpp .native-rj45{
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.9),
    inset 0 -2px 0 rgba(214,177,62,.12);
}
.native-netgear-gs752tpp .native-rj45.connected{
  border-color:#62e5c3 !important;
  box-shadow:
    0 0 5px rgba(98,229,195,.55),
    inset 0 -2px 0 rgba(214,177,62,.2) !important;
}


/* ==========================================================
   OpenInfra v0.10.4 – Server & USV Gerätebibliothek
   ========================================================== */

.native-server-front,
.native-ups-front{
  width:100%;
  height:100%;
  min-height:46px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  border-radius:4px;
  border:1px solid #4b555d;
  background:linear-gradient(180deg,#343a3f,#1b2024 50%,#282e33);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 #090b0d;
}

.server-control-zone{
  width:22%;
  min-width:105px;
  position:relative;
  padding:7px 8px;
  box-sizing:border-box;
  border-right:1px solid #4a535b;
  background:#20262b;
}
.server-control-zone.ibm{background:#151b20}

.server-brand{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  color:#e9eef3;
}
.server-model{
  display:block;
  margin-top:3px;
  color:#8ca0b3;
  font-size:6px;
  font-weight:700;
}
.server-leds{
  display:flex;
  gap:3px;
  position:absolute;
  left:8px;
  bottom:7px;
}
.server-leds i{
  width:4px;height:4px;border-radius:50%;background:#35434c;
}
.server-leds i.on{
  background:#62e5c3;box-shadow:0 0 4px rgba(98,229,195,.55);
}
.server-usb{
  position:relative;
  display:inline-block;
  width:12px;height:5px;
  margin:7px 3px 0 0;
  border:1px solid #5c6972;
  background:#080c0f;
}
.server-lcd{
  margin-top:6px;
  width:28px;height:11px;
  display:grid;place-items:center;
  border:1px solid #52606a;
  background:#07151b;
  color:#63d8b8;
  font-size:5px;
}

.server-bays{
  display:grid;
  align-content:center;
  gap:4px;
  padding:5px 7px;
  background:#171c20;
  border-right:1px solid #40484e;
}
.r330-bays{width:42%;grid-template-columns:repeat(4,1fr)}
.r710-bays{width:48%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.x3650-bays{width:48%;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}

.server-drive{
  position:relative;
  min-width:25px;
  min-height:25px;
  border:1px solid #525d64;
  border-radius:2px;
  background:linear-gradient(90deg,#252b30,#101417);
  box-shadow:inset 0 0 0 2px #0d1114;
}
.server-drive.large{min-height:30px}
.server-drive.slim{min-height:23px}
.server-drive:before{
  content:"";
  position:absolute;
  left:4px;top:4px;bottom:4px;width:5px;
  background:#30383e;
  border:1px solid #59636a;
}
.server-drive i{
  position:absolute;
  right:5px;top:5px;
  width:4px;height:4px;border-radius:50%;
  background:#345248;
}
.server-drive b{
  position:absolute;
  left:13px;right:4px;bottom:5px;height:2px;
  background:#222c31;
}

.server-optical{
  flex:1;
  margin:6px;
  border:1px solid #40484d;
  background:#111619;
  position:relative;
}
.server-optical:after{
  content:"";
  position:absolute;
  left:8%;right:8%;top:50%;
  height:1px;background:#343c41;
}
.server-optical span{
  position:absolute;right:6px;bottom:4px;
  color:#687884;font-size:5px;
}

.server-vent-zone{
  flex:1;
  padding:6px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  background:#111619;
}
.server-vent-zone.wide{grid-template-columns:repeat(8,1fr)}
.server-vent-zone i{
  border-radius:2px;
  background:
    radial-gradient(circle,#050708 0 28%,transparent 31%) 0 0/5px 5px,
    #20262a;
  border:1px solid #30383d;
}

.server-r710,
.server-x3650{
  min-height:92px;
}

.server-r710 .server-control-zone,
.server-x3650 .server-control-zone{
  width:18%;
}

.native-ups-front.ups-md1500rt{
  min-height:92px;
  background:linear-gradient(180deg,#272d31,#121719 52%,#24292d);
}

.ups-brand-zone{
  width:27%;
  padding:11px 12px;
  box-sizing:border-box;
  border-right:1px solid #454e54;
}
.ups-brand{
  display:block;
  color:#ecf1f3;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.ups-model{
  display:block;
  color:#9aadb9;
  font-size:8px;
  font-weight:800;
  margin-top:4px;
}
.ups-brand-zone small{
  display:block;
  color:#657985;
  font-size:5px;
  margin-top:5px;
}

.ups-control-panel{
  width:30%;
  margin:9px;
  padding:7px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #414b52;
  background:#090e11;
  border-radius:3px;
}
.ups-led-column{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ups-led-column i{
  width:5px;height:5px;border-radius:50%;background:#39464c;
}
.ups-led-column i.green{
  background:#62e5c3;box-shadow:0 0 4px rgba(98,229,195,.55);
}
.ups-lcd-native{
  flex:1;height:38px;
  display:grid;place-items:center;
  position:relative;
  border:1px solid #44606b;
  background:linear-gradient(180deg,#102831,#07171c);
  color:#91d9df;
}
.ups-lcd-native span{font-size:15px;font-weight:800}
.ups-lcd-native small{position:absolute;right:3px;bottom:2px;font-size:5px;color:#5d9399}
.ups-buttons{
  display:flex;flex-direction:column;gap:4px;
}
.ups-buttons i{
  width:8px;height:8px;border-radius:50%;
  border:1px solid #58656c;background:#20272b;
}
.ups-vent{
  flex:1;
  padding:9px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:4px;
}
.ups-vent i{
  background:#090d0f;
  border:1px solid #343c41;
  border-radius:2px;
}

/* v0.10.5 - recognizable native hardware fronts */
.detaildev{width:100%;height:100%;min-height:46px;display:flex;overflow:hidden;box-sizing:border-box;border:1px solid #4b555b;border-radius:3px;background:linear-gradient(#30363a,#151a1d 55%,#272d31)}.r710,.x3650,.md1500{min-height:92px}.dear{width:20px;flex:0 0 20px;background:#171c1f;border-left:1px solid #3b4449;border-right:1px solid #3b4449;position:relative}.dear:after{content:"";position:absolute;width:7px;height:7px;border:1px solid #68777f;border-radius:50%;left:5px;top:50%;transform:translateY(-50%)}.dear.blue:before,.dear.ibmear:before{content:"";position:absolute;left:3px;right:3px;bottom:8px;height:5px;background:#286aa5;border-radius:0 0 6px 6px}.dpwr{width:9px;height:9px;border:1px solid #74828a;border-radius:50%;background:#101518}.dvga{width:20px;height:9px;border:1px solid #81919b;border-radius:2px;background:repeating-linear-gradient(90deg,#253b48 0 2px,#121d24 2px 4px)}.ibmvga{background:#2863a3}.dusb{width:11px;height:5px;border:1px solid #69777f;background:#050809}.dlcd{height:10px;min-width:26px;border:1px solid #416d78;background:#071b21;color:#6dc4d0;font-size:5px;font-style:normal;display:grid;place-items:center}.greenled{width:4px;height:4px;border-radius:50%;background:#58d9a9;box-shadow:0 0 3px #58d9a9}
.r330ctrl,.r710ctrl{width:25%;min-width:125px;padding:7px;display:flex;align-items:center;gap:6px;background:#1b2023;position:relative;box-sizing:border-box}.r330ctrl b,.r710ctrl b{font-size:9px;color:#eef2f4}.r330ctrl small,.r710ctrl small{position:absolute;right:6px;top:5px;font-size:5px;color:#aab5ba}.r330bays{width:46%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;background:#0f1416}.d35,.d25{position:relative;border:1px solid #4c575d;background:#090d0f;box-shadow:inset 0 0 0 2px #171d20}.d35:before,.d25:before{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:7px;border:1px solid #536068;background:#222a2e}.d35 em,.d25 em{position:absolute;right:3px;top:2px;font-size:4px;font-style:normal;color:#929da3}.ddvd{flex:1;margin:8px;border:1px solid #3b4449;background:#080b0d;color:#68777e;font-size:5px;padding:4px}.dmesh{width:13%;margin:6px;background:radial-gradient(circle,#050708 0 28%,transparent 31%) 0 0/5px 5px}.r710ctrl{width:23%}.r710bays{width:50%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:7px;background:#0e1214}
.x3650{background:#15191c}.ibmbays{width:65%;display:grid;grid-template-columns:repeat(16,1fr);gap:2px;padding:7px 3px;background:#0e1214}.ibmdisk{position:relative;border:1px solid #414b50;background:#080b0d}.ibmdisk:before{content:"";position:absolute;left:2px;right:2px;top:9px;bottom:12px;background:radial-gradient(circle,#050708 0 28%,transparent 31%) 0 0/5px 5px}.ibmdisk em{position:absolute;top:1px;left:50%;transform:translateX(-50%);font-size:4px;font-style:normal;color:#b6bec2}.ibmdisk b{position:absolute;left:3px;right:3px;bottom:4px;height:4px;background:#2b3439;border-bottom:2px solid #a85e21}.ibmctrl{flex:1;display:grid;grid-template-rows:27% 28% 45%;background:#171b1e;border-left:1px solid #3d464b}.ibmctrl>div{display:flex;align-items:center;gap:6px;padding:5px}.ibmctrl strong{margin-left:auto;font-size:6px;color:#d5dbde}.ibmdvd{margin:3px 7px;border:1px solid #394247;background:#080b0d;color:#69777f;font-size:5px;padding:5px;position:relative}.ibmdvd i{position:absolute;right:8px;top:50%;width:12px;height:3px;background:#347bd7}.ibmblank{margin:0 7px 7px;border:1px solid #333b40;background:#080b0d;padding:5px}.ibmlogo{font-size:6px;color:#edf1f3;font-style:normal;padding-top:7px;text-align:center}
.md1500{background:#202529}.mdbrand{width:16%;padding:12px;display:flex;flex-direction:column;justify-content:center}.mdbrand b{font-size:9px;color:#f0f3f4;font-style:italic}.mdbrand small{font-size:7px;color:#aab5ba;margin-top:4px}.mdbrand em{font-size:5px;color:#68777f;font-style:normal;margin-top:3px}.mdvent{width:18%;margin:10px 6px;background:repeating-linear-gradient(0deg,#080b0d 0 3px,#2d3539 3px 5px)}.mdpanel{width:25%;padding:8px;display:flex;flex-direction:column;justify-content:center;gap:4px}.mdpanel>div{height:42px;border:1px solid #477c9a;background:linear-gradient(#18527f,#0a2a45);color:#afe4ff;display:flex;align-items:center;justify-content:center;gap:4px;position:relative}.mdpanel>div b{font-size:15px}.mdpanel>div small{font-size:5px}.mdpanel>div em{position:absolute;left:4px;bottom:2px;font-size:4px;font-style:normal}.mdpanel>span{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.mdpanel>span i{font-style:normal;text-align:center;font-size:4px;border:1px solid #515b61;background:#121719;color:#aeb7bc;padding:2px}.mdstatus{width:11%;display:flex;flex-direction:column;justify-content:center;gap:4px}.mdstatus span{font-size:5px;color:#a5afb4}.mdstatus span:first-child{color:#63df7f}.mdpower{align-self:center;width:20px;height:20px;border:1px solid #768289;border-radius:50%;display:grid;place-items:center;color:#dce1e3;font-size:11px;margin:8px;font-style:normal}

/* v0.10.6 Dell R330/R710 */
.dellface{width:100%;height:100%;display:flex;overflow:hidden;border:1px solid #4b555b;border-radius:3px;background:#15191c;box-sizing:border-box}
.dellface .ear{width:22px;flex:0 0 22px;background:#171c1f;border-left:1px solid #3c4449;border-right:1px solid #3c4449;position:relative}
.dellface .ear:after{content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;border:1px solid #6d7980;border-radius:50%;transform:translateY(-50%)}
.dellface .ear.blue:before{content:"";position:absolute;left:4px;right:4px;bottom:8px;height:5px;background:#2c70b2;border-radius:0 0 6px 6px}
.dellface .ear.intel:before{content:"";position:absolute;right:3px;bottom:5px;width:11px;height:13px;border:1px solid #6f9abd;background:linear-gradient(#447eac,#214e70)}
.r330x{min-height:46px}.r330-top{width:44%;min-width:260px;padding:5px 7px;display:flex;align-items:center;gap:5px;background:#1b2023;position:relative;box-sizing:border-box}
.r330-top>b{font-size:8px;color:#eef2f4}.pwr{width:9px;height:9px;border:1px solid #707d84;border-radius:50%;background:#101716}.vga{width:22px;height:9px;border:1px solid #7f8c95;background:repeating-linear-gradient(90deg,#273d49 0 2px,#132129 2px 4px)}.nav{width:10px;height:9px;border:1px solid #4b555b;background:#151a1d;color:#8f9ba2;font-style:normal;font-size:6px;display:grid;place-items:center}.usb{width:12px;height:6px;border:1px solid #66737a;background:#050809}.lcd{height:18px;min-width:70px;padding:2px 4px;border:1px solid #3e6781;background:linear-gradient(#174f7d,#0d2b47);display:flex;flex-direction:column;justify-content:center}.lcd strong{font-size:5px;color:#b3e0ff}.lcd small{font-size:4px;color:#d8efff}.dvd{margin-left:auto;width:52px;height:17px;border:1px solid #3c4449;background:#080b0d;color:#68757c;font-size:4px;display:flex;align-items:flex-end;justify-content:flex-end;padding:2px;box-sizing:border-box}
.r330-bays{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;background:#0f1416}.r330-bay{position:relative;border:1px solid #4b565c;background:#090d0f;box-shadow:inset 0 0 0 2px #171d20}.r330-bay:before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:12px;border:1px solid #5b666c;background:#262d31}.r330-bay em{position:absolute;right:4px;top:3px;font-size:4px;font-style:normal;color:#8d989e}.r330-bay i{position:absolute;left:22px;right:5px;top:5px;bottom:5px;background:radial-gradient(circle,#050708 0 28%,transparent 31%) 0 0/5px 5px}.r330-bay b{position:absolute;left:7px;bottom:6px;width:5px;height:3px;background:#b46625}
.r710x{min-height:92px}.r710-left{width:25%;min-width:155px;padding:9px;display:flex;align-items:center;align-content:flex-start;gap:6px;flex-wrap:wrap;background:#181d20;box-sizing:border-box}.r710-left>b{font-size:10px;color:#eef2f4}.r710-left .lcd{min-width:76px;height:14px;color:#77c5d0;background:#081c22;display:grid;place-items:center;font-size:5px}.ventmini{width:100%;height:27px;background:radial-gradient(circle,#050708 0 28%,transparent 31%) 0 0/5px 5px}
.r710-bays{width:52%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:5px;padding:8px;background:#0f1315;box-sizing:border-box}.r710-bay{position:relative;border:1px solid #465157;background:#090d0f}.r710-bay:before{content:"";position:absolute;right:4px;top:5px;bottom:5px;width:12px;border:1px solid #5c676d;background:#252c30}.r710-bay i{position:absolute;left:7px;right:21px;top:8px;bottom:6px;background:radial-gradient(circle,#050708 0 28%,transparent 31%) 0 0/5px 5px}.r710-bay em{position:absolute;left:4px;top:2px;font-size:4px;font-style:normal;color:#8a969c}.r710-bay b{position:absolute;right:7px;bottom:8px;width:5px;height:3px;background:#b46625}
.r710-vent{flex:1;margin:8px 6px;background:radial-gradient(circle,#050708 0 28%,transparent 31%) 0 0/5px 5px}


/* ==========================================================
   OpenInfra v0.10.7 - detailed Netgear switch fronts
   GS324TP / GS348T / GS752TPP
   ========================================================== */

.switchface{
  width:100%;
  height:100%;
  min-height:46px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid #555d62;
  border-radius:3px;
  background:linear-gradient(#33383b,#1c2124 52%,#2a3033);
  box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -1px #07090a;
}

.ng-left{
  width:26%;
  min-width:155px;
  padding:6px 9px;
  box-sizing:border-box;
  position:relative;
  background:linear-gradient(#303538,#202427);
  border-right:1px solid #4a5155;
}
.ng-left.compact{width:15%;min-width:100px}
.ng-left.prosafe{width:17%;min-width:115px}

.ng-left strong{
  display:block;
  color:#f0f2f3;
  font-size:8px;
  letter-spacing:.06em;
}
.ng-left small{
  display:block;
  margin-top:1px;
  color:#a0aaaf;
  font-size:5px;
}
.ng-model{
  position:absolute;
  left:9px;
  bottom:5px;
  color:#c3c9cc;
  font-size:6px;
  font-weight:800;
}
.ng-led-labels{
  position:absolute;
  left:9px;
  top:22px;
  display:grid;
  grid-template-columns:auto 5px;
  gap:2px 5px;
  align-items:center;
}
.ng-led-labels.small{top:21px}
.ng-led-labels span{
  color:#78858c;
  font-size:4px;
}
.ng-led-labels i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#354047;
}
.ng-led-labels i.on{
  background:#6ddf83;
  box-shadow:0 0 3px rgba(109,223,131,.55);
}
.ng-reset{
  position:absolute;
  right:8px;
  bottom:5px;
  color:#6f7d84;
  font-size:4px;
}
.ng-poe-note{
  position:absolute;
  right:7px;
  bottom:5px;
  color:#bda84d;
  font-size:4px;
}

.ng-port-zone{
  flex:1;
  min-width:0;
  padding:5px 6px 7px;
  box-sizing:border-box;
  position:relative;
  background:#262b2e;
}
.ng-port-zone.wide{padding-left:4px;padding-right:4px}
.ng-port-zone.poe48{background:#292d2f}

.ng-port-grid{
  height:100%;
  display:grid;
  grid-template-rows:repeat(2,1fr);
  grid-auto-flow:column;
  align-content:center;
  gap:3px 2px;
}
.ng-port-grid.cols12{grid-template-columns:repeat(12,minmax(0,1fr))}
.ng-port-grid.cols24{grid-template-columns:repeat(24,minmax(0,1fr));gap:3px 1px}

.ng-rj45{
  position:relative !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:15px !important;
  display:block;
  opacity:1 !important;
  background:#050809 !important;
  border:1px solid #b4b7b6 !important;
  border-radius:1px;
  cursor:pointer;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.02);
}
.ng-rj45:before{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  top:12%;
  height:42%;
  background:#11171a;
  border-bottom:1px solid #273238;
}
.ng-rj45:after{
  content:"";
  position:absolute;
  left:25%;
  right:25%;
  bottom:10%;
  height:16%;
  background:repeating-linear-gradient(90deg,#b29b55 0 1px,transparent 1px 3px);
  opacity:.8;
}
.ng-rj45 b{
  position:absolute !important;
  top:-7px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  color:#c7ced1 !important;
  font-size:4px !important;
  opacity:1 !important;
  z-index:3;
}
.ng-rj45.connected{
  border-color:#62e5c3 !important;
  box-shadow:0 0 5px rgba(98,229,195,.6) !important;
}
.ng-rj45:hover{
  border-color:#75b7ff !important;
  box-shadow:0 0 0 1px #75b7ff,0 0 6px rgba(117,183,255,.5) !important;
  transform:none !important;
}

.poe-stripe{
  position:absolute;
  left:6px;
  right:6px;
  bottom:1px;
  height:3px;
  color:#b9a345;
  border-bottom:2px solid #b39a2a;
  font-size:3px;
  text-align:center;
  line-height:3px;
}
.poe-stripe.long{border-bottom-color:#c0a629}

.ng-sfp-zone{
  width:10%;
  min-width:64px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  align-items:center;
  gap:4px;
  padding:6px;
  box-sizing:border-box;
  background:#22272a;
  border-left:1px solid #4a5155;
}
.ng-sfp-zone.four{
  width:12%;
  grid-template-columns:repeat(2,1fr);
}

.ng-sfp{
  position:relative !important;
  width:auto !important;
  height:28px !important;
  min-width:0 !important;
  min-height:28px !important;
  display:block;
  opacity:1 !important;
  background:#070a0c !important;
  border:1px solid #8d969b !important;
  border-radius:2px;
  cursor:pointer;
}
.ng-sfp:after{
  content:"";
  position:absolute;
  inset:5px 4px;
  border:1px solid #343d42;
  background:#0c1114;
}
.ng-sfp b{
  position:absolute !important;
  left:50% !important;
  top:-8px !important;
  transform:translateX(-50%) !important;
  color:#aab4b9 !important;
  font-size:4px !important;
  opacity:1 !important;
  z-index:3;
}
.ng-sfp.connected{
  border-color:#62e5c3 !important;
  box-shadow:0 0 5px rgba(98,229,195,.55) !important;
}

/* model character */
.gs324tp{background:linear-gradient(#34393c,#1e2326)}
.gs324tp .ng-left{background:linear-gradient(#353a3d,#22272a)}
.gs324tp .ng-port-zone{background:#292e31}

.gs348t .ng-left{background:#1f2427}
.gs348t .ng-port-zone{background:#292d30}
.gs348t .ng-rj45{border-color:#d3d4d2 !important}

.gs752tpp{background:linear-gradient(#33383a,#1f2426)}
.gs752tpp .ng-port-zone{background:#2a2f31}
.gs752tpp .ng-rj45{border-color:#c9cbca !important}
.gs752tpp .ng-rj45:after{background:repeating-linear-gradient(90deg,#c1a23a 0 1px,transparent 1px 3px)}


/* ==========================================================
   OpenInfra v0.10.8
   RJ45-Buchsen quadratischer / realistischer
   ========================================================== */

/*
   Vorher wurden die Ports durch die Grid-Höhe zu flach gezogen.
   Jetzt haben sie eine feste, nahezu quadratische RJ45-Form.
*/

/* Netgear native switch ports */
.ng-port-grid{
  align-items:center;
  justify-items:center;
}

.ng-rj45{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  justify-self:center;
  align-self:center;
  box-sizing:border-box;
  border-radius:2px !important;
}

/* 48-Port-Modelle etwas kompakter, damit 24 Ports pro Reihe sauber passen */
.ng-port-grid.cols24 .ng-rj45{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  max-width:16px !important;
  max-height:16px !important;
}

/* Innenform einer RJ45-Buchse */
.ng-rj45:before{
  left:15% !important;
  right:15% !important;
  top:12% !important;
  height:48% !important;
  border-radius:1px 1px 2px 2px;
}

.ng-rj45:after{
  left:20% !important;
  right:20% !important;
  bottom:10% !important;
  height:17% !important;
}

/* Portnummer etwas oberhalb, nicht in die Buchse quetschen */
.ng-rj45 b{
  top:-7px !important;
  font-size:4px !important;
}

/* Generische native Switchports ebenfalls korrigieren */
.native-rj45{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  justify-self:center;
  align-self:center;
  box-sizing:border-box;
}

.native-rj45-grid.cols-24 .native-rj45{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  max-width:16px !important;
  max-height:16px !important;
}

/* Patchpanel: gleiche RJ45-Optik */
.native-patch-grid{
  align-items:center;
  justify-items:center;
}

.native-patch-port{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  justify-self:center;
  align-self:center;
  box-sizing:border-box;
  border-radius:2px !important;
}

.native-patch-port:before{
  left:15% !important;
  right:15% !important;
  top:12% !important;
  height:48% !important;
}

.native-patch-port:after{
  left:20% !important;
  right:20% !important;
  bottom:10% !important;
  height:17% !important;
}

/* Altbestand mit 48-Port-Patchpanels weiterhin kompakt anzeigen */
.native-patch-grid.legacy-ports .native-patch-port{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  max-width:14px !important;
  max-height:14px !important;
}


/* ==========================================================
   OpenInfra v0.10.9
   24-Port Patchpanel: alle Buchsen in einer Reihe
   ========================================================== */

.native-patchpanel-front{
  grid-template-columns:14% minmax(0,1fr);
  gap:8px;
  padding:4px 8px;
}

.native-patch-grid{
  display:grid !important;
  grid-template-columns:repeat(24,minmax(0,1fr)) !important;
  grid-template-rows:1fr !important;
  grid-auto-flow:column !important;
  gap:2px !important;
  height:28px !important;
  align-items:center !important;
  justify-items:center !important;
  align-content:center !important;
}

/* etwas schmaler, damit alle 24 Ports sauber in eine HE passen */
.native-patch-port{
  width:16px !important;
  height:18px !important;
  min-width:16px !important;
  min-height:18px !important;
  max-width:16px !important;
  max-height:18px !important;
}

/* Nummern sauber oberhalb der einzelnen Buchsen */
.native-patch-port b{
  top:-7px !important;
  font-size:4px !important;
}

/* Die alte 48-Port-Kompatibilitätsansicht darf weiterhin zweireihig bleiben */
.native-patch-grid.legacy-ports{
  grid-template-columns:repeat(24,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,1fr) !important;
  grid-auto-flow:column !important;
  gap:2px 1px !important;
  height:34px !important;
}

.native-patch-grid.legacy-ports .native-patch-port{
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  min-height:13px !important;
  max-width:13px !important;
  max-height:13px !important;
}

/* Front optisch stärker wie ein klassisches 24-Port-Patchfeld */
.patchpanel-label-area{
  padding-left:2px;
}

.patchpanel-label-area strong{
  font-size:6px;
}

.patchpanel-label-area small{
  font-size:4px;
}


/* ==========================================================
   OpenInfra v0.11.0 - Räume bearbeiten
   ========================================================== */
.room-edit-wrap{
  margin:14px 0 18px;
}
.room-edit-card{
  border:1px solid var(--line, #263b5a);
  background:var(--panel, #152238);
  border-radius:14px;
  overflow:hidden;
}
.room-edit-card > summary{
  cursor:pointer;
  list-style:none;
  padding:13px 16px;
  font-weight:700;
  color:#eef5ff;
  user-select:none;
}
.room-edit-card > summary::-webkit-details-marker{display:none}
.room-edit-card > summary::after{
  content:"+";
  float:right;
  color:#7fb5ff;
}
.room-edit-card[open] > summary::after{content:"−"}
.room-edit-form{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  padding:0 16px 16px;
  border-top:1px solid rgba(110,145,190,.18);
  padding-top:15px;
}
.room-edit-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:650;
  color:#91afd4;
}
.room-edit-form label:nth-child(3){
  grid-column:1 / -1;
}
.room-edit-form input,
.room-edit-form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #2a4163;
  background:#091526;
  color:#eef5ff;
  border-radius:9px;
  padding:10px 12px;
  font:inherit;
  resize:vertical;
}
.room-edit-form button{
  grid-column:1 / -1;
  border:0;
  border-radius:9px;
  padding:11px 14px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(90deg,#62ddc5,#69a7ff);
  color:#06121f;
}
@media (max-width:800px){
  .room-edit-form{grid-template-columns:1fr}
  .room-edit-form label:nth-child(3),
  .room-edit-form button{grid-column:auto}
}


/* ==========================================================
   OpenInfra v1.5.0 - Standort- & Gebäudeverwaltung
   ========================================================== */
.site-hero-v15{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}
.manage-popover{
  min-width:220px;
  position:relative;
}
.manage-popover > summary,
.building-edit > summary{
  cursor:pointer;
  list-style:none;
  border:1px solid #2a4163;
  border-radius:9px;
  padding:9px 12px;
  color:#a9c6eb;
  background:#0d192a;
  font-size:10px;
  font-weight:750;
}
.manage-popover > summary::-webkit-details-marker,
.building-edit > summary::-webkit-details-marker{display:none}
.manage-form{
  margin-top:8px;
  padding:12px;
  border:1px solid #2b4161;
  border-radius:11px;
  background:#142138;
}

.buildings-card{margin-top:18px}
.building-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.building-card{
  border:1px solid #263b5a;
  border-radius:13px;
  background:#0c1829;
  overflow:hidden;
}
.building-head{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:13px;
  background:linear-gradient(180deg,#16253d,#111e32);
  border-bottom:1px solid #263b5a;
}
.building-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:9px;
  background:#17345d;
  color:#75b5ff;
  font-weight:900;
}
.building-head h3{margin:0;color:#f2f6fb;font-size:14px}
.building-head p{margin:3px 0 0;color:#7f95b2;font-size:8px}
.building-counts{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:right;
}
.building-counts span{
  color:#7f98b8;
  font-size:7px;
  white-space:nowrap;
}
.building-edit{padding:9px 12px 0}
.compact-form{
  margin-top:8px;
  padding:10px;
  border:1px solid #243a59;
  border-radius:9px;
  background:#101d30;
}
.subtle-danger{margin-top:7px;width:100%}
.delete-note{font-size:7px;color:#768aa5;margin:7px 2px}
.building-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px;
}
.mini-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
  color:#dbe8f8;
  font-size:9px;
}
.mini-head span{
  min-width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:999px;
  border:1px solid #294263;
  color:#8dacd2;
  font-size:7px;
}
.building-list{display:flex;flex-direction:column;gap:5px}
.building-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid #213753;
  border-radius:8px;
  background:#091526;
}
.building-row strong{display:block;color:#e6effb;font-size:9px}
.building-row small{display:block;margin-top:2px;color:#7188a7;font-size:7px}
.building-row > span{color:#5797dc;font-size:14px}
.mini-empty{padding:12px;font-size:8px}
.building-create{margin-top:14px}
.inline-building-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:10px;
  align-items:end;
}
.inline-building-form button{height:38px}
.site-create-columns{margin-top:18px}

.room-edit-form select{
  width:100%;
  box-sizing:border-box;
  border:1px solid #2a4163;
  background:#091526;
  color:#eef5ff;
  border-radius:9px;
  padding:10px 12px;
  font:inherit;
}

@media(max-width:1000px){
  .building-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .site-hero-v15{display:block}
  .manage-popover{margin-top:12px}
  .building-content{grid-template-columns:1fr}
  .inline-building-form{grid-template-columns:1fr}
}


/* ==========================================================
   OpenInfra v0.12.0 - Lesbarkeit / Typografie
   ========================================================== */

/* Kleine Metadaten nicht mehr mikroskopisch */
.card-sub,
.hero p,
.building-head p,
.building-counts span,
.building-row small,
.mini-empty,
.delete-note,
.patchpanel-label-area small,
.native-switch-status small,
.ng-left small,
.ng-model,
.ng-led-labels span,
.ng-reset,
.ng-poe-note,
.server-model,
.server-control-zone small,
.ups-brand-zone small,
.room-copy span,
.site-row span,
.room-row span,
.back {
  font-size: 12px !important;
  line-height: 1.35;
}

/* Labels und sekundäre Bedieninformationen */
.form label,
.room-edit-form label,
.compact-form label,
.manage-form label,
.inline-building-form label,
.mini-head,
.eyebrow {
  font-size: 13px !important;
  line-height: 1.3;
}

/* Karteninhalte */
.building-row strong,
.room-copy strong,
.site-row strong,
.building-head h3 {
  font-size: 14px !important;
  line-height: 1.25;
}

/* Zähler/Pills */
.pill,
.building-counts span,
.mini-head span {
  font-size: 12px !important;
}

/* Buttons/Inputs angenehmer lesbar */
.form input,
.form select,
.form textarea,
.room-edit-form input,
.room-edit-form select,
.room-edit-form textarea,
button,
.manage-popover > summary,
.building-edit > summary {
  font-size: 14px !important;
}

/* Gebäudeübersicht etwas luftiger */
.building-head {
  padding: 16px !important;
}

.building-content {
  gap: 16px !important;
  padding: 16px !important;
}

.building-row {
  padding: 11px 12px !important;
}

.building-list {
  gap: 8px !important;
}

.mini-head {
  margin-bottom: 9px !important;
}

/* Standortkopf */
.site-hero-v15 h1 {
  font-size: clamp(34px, 3.2vw, 48px);
}

.site-hero-v15 p {
  margin-top: 6px;
}

/* Formularfelder etwas höher */
.form input,
.form select,
.form textarea,
.room-edit-form input,
.room-edit-form select,
.room-edit-form textarea {
  min-height: 42px;
}

/* Buttons ebenfalls etwas größer */
button,
.form button,
.room-edit-form button {
  min-height: 42px;
  padding: 10px 14px !important;
}

/* Kleine Hilfstexte mindestens lesbar */
.empty {
  font-size: 13px !important;
  line-height: 1.4;
}

/* Rack-Grafik selbst bleibt kompakt; dort Portnummern bewusst klein lassen. */


/* ==========================================================
   OpenInfra v0.12.1
   Rackansicht wieder kompakt
   ========================================================== */

/*
   v0.12.0 hat kleine UI-Schriften global vergrößert.
   Das war für Standort/Gebäude/Räume gut, aber für die dichte
   Rackansicht zu groß. Die folgenden Regeln gelten nur im Rack.
*/

/* Rack-Hauptbereich kompakt */
.rack-layout,
.rack-page,
.rack-shell,
.rack-view,
.rack-wrapper,
.rack-main,
.rack-canvas,
.rack-frame,
.rack-board {
  --rack-font: 8px;
  --rack-font-small: 6px;
  --rack-font-tiny: 5px;
}

/* Gerätekarten im Rack */
.rack-device,
.rack-device *,
.rack-slot,
.rack-slot *,
.rack-frame,
.rack-frame * {
  line-height: 1.15;
}

/* Gerätename / Hersteller / Modell */
.rack-device .device-name,
.rack-device .device-title,
.rack-device .device-brand-zone strong,
.rack-device .device-brand-zone b,
.rack-device .device-meta,
.rack-device .device-brand-zone span,
.rack-device .device-brand-zone small {
  font-size: 7px !important;
}

/* Rack-interne Metadaten bewusst klein */
.rack-device small,
.rack-device em,
.rack-device .native-model,
.rack-device .native-brand,
.rack-device .ng-left strong,
.rack-device .ng-left small,
.rack-device .ng-model,
.rack-device .ng-led-labels span,
.rack-device .ng-reset,
.rack-device .ng-poe-note,
.rack-device .patchpanel-label-area strong,
.rack-device .patchpanel-label-area small,
.rack-device .server-model,
.rack-device .server-control-zone small,
.rack-device .ups-brand-zone small {
  font-size: 5px !important;
}

/* Portnummern klein lassen */
.rack-device .ng-rj45 b,
.rack-device .native-rj45 b,
.rack-device .native-patch-port b,
.rack-device .ng-sfp b,
.rack-device .native-sfp b {
  font-size: 4px !important;
}

/* Rechte Seitenleiste: wieder kompakter */
.rack-sidebar,
.rack-side,
.rack-aside,
.side-stack,
.side-stack * {
  line-height: 1.2;
}

.rack-sidebar .card h2,
.rack-side .card h2,
.rack-aside .card h2,
.side-stack .card h2 {
  font-size: 13px !important;
}

.rack-sidebar .card strong,
.rack-side .card strong,
.rack-aside .card strong,
.side-stack .card strong,
.rack-sidebar .site-row strong,
.rack-side .site-row strong,
.rack-aside .site-row strong,
.side-stack .site-row strong {
  font-size: 9px !important;
}

.rack-sidebar .card small,
.rack-side .card small,
.rack-aside .card small,
.side-stack .card small,
.rack-sidebar .pill,
.rack-side .pill,
.rack-aside .pill,
.side-stack .pill,
.rack-sidebar .site-row span,
.rack-side .site-row span,
.rack-aside .site-row span,
.side-stack .site-row span {
  font-size: 7px !important;
}

/* Rechte Geräteliste nicht unnötig hoch */
.rack-sidebar .site-row,
.rack-side .site-row,
.rack-aside .site-row,
.side-stack .site-row {
  padding: 8px 9px !important;
}

/* Rack-Toolbar kompakt */
.rack-toolbar,
.rack-toolbar *,
.rack-controls,
.rack-controls *,
.rack-actions,
.rack-actions * {
  font-size: 9px !important;
}

.rack-toolbar button,
.rack-controls button,
.rack-actions button {
  min-height: 30px !important;
  padding: 6px 10px !important;
}

/* Suche/Filter im Rack wieder klein */
.rack-toolbar input,
.rack-toolbar select,
.rack-controls input,
.rack-controls select,
.rack-search input,
.rack-search select {
  min-height: 30px !important;
  font-size: 9px !important;
  padding: 5px 8px !important;
}

/* Allgemeine Formulare im Rack kompakt,
   außerhalb des Racks bleiben die größeren v0.12.0-Werte erhalten */
.rack-layout .form label,
.rack-page .form label,
.rack-wrapper .form label,
.rack-main .form label {
  font-size: 9px !important;
}

.rack-layout .form input,
.rack-layout .form select,
.rack-layout .form textarea,
.rack-page .form input,
.rack-page .form select,
.rack-page .form textarea,
.rack-wrapper .form input,
.rack-wrapper .form select,
.rack-wrapper .form textarea,
.rack-main .form input,
.rack-main .form select,
.rack-main .form textarea {
  min-height: 32px !important;
  font-size: 10px !important;
}

/* HE-Beschriftungen */
.rack-unit,
.rack-unit-label,
.rack-u-label,
.he-label {
  font-size: 6px !important;
}

/* Header der Rackansicht bleibt lesbar, aber nicht übergroß */
.rack-header h1,
.rack-hero h1 {
  font-size: 24px !important;
}

.rack-header p,
.rack-hero p,
.rack-header .eyebrow,
.rack-hero .eyebrow {
  font-size: 9px !important;
}

/* Fallback: falls die Template-Klassen anders heißen,
   nur innerhalb der bekannten Rackansicht-Komponenten reduzieren */
.front-view *,
.rack-view-panel *,
.rack-cabinet *,
.rack-grid * {
  line-height: 1.15;
}

.front-view .card-sub,
.rack-view-panel .card-sub,
.rack-cabinet .card-sub,
.rack-grid .card-sub {
  font-size: 7px !important;
}


/* ==========================================================
   OpenInfra v0.12.2
   Beschriftung links neben Rack-Geräten besser lesbar
   ========================================================== */

/*
   Nur der linke Informationsblock wird vergrößert.
   Ports, Gerätefronten, LEDs und Portnummern bleiben kompakt.
*/

.rack-device .device-brand-zone{
  min-width:165px !important;
  padding:6px 9px !important;
}

/* Gerätename */
.rack-device .device-brand-zone strong,
.rack-device .device-brand-zone > b,
.rack-device .device-title,
.rack-device .device-name{
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  color:#f0f5fb !important;
}

/* Hersteller / Modell / Typ unter dem Namen */
.rack-device .device-brand-zone span,
.rack-device .device-brand-zone small,
.rack-device .device-meta{
  font-size:8px !important;
  line-height:1.3 !important;
  color:#8fa6c3 !important;
}

/* Gerätetyp nicht mit der extrem kleinen Hardware-Schrift überschreiben */
.rack-device .device-brand-zone .muted,
.rack-device .device-brand-zone .device-type{
  font-size:8px !important;
}

/* Falls der Gerätename direkt im allgemeinen Rack-Device-Block liegt */
.rack-device > strong:first-child{
  font-size:11px !important;
}

/* 1 HE bleibt kompakt genug */
.rack-device[style*="--device-height: 1"] .device-brand-zone,
.rack-device[data-height="1"] .device-brand-zone{
  padding-top:4px !important;
  padding-bottom:4px !important;
}

/* lange Namen nicht über die Hardware laufen lassen */
.rack-device .device-brand-zone strong,
.rack-device .device-brand-zone span,
.rack-device .device-brand-zone small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Rest der Rack-Hardware bewusst unverändert klein */
.rack-device .ng-rj45 b,
.rack-device .native-rj45 b,
.rack-device .native-patch-port b,
.rack-device .ng-sfp b,
.rack-device .native-sfp b{
  font-size:4px !important;
}


/* ==========================================================
   OpenInfra v0.12.4
   Edelstrom-USV Front näher am realen oberen Rackmodul
   ========================================================== */

.edelstrom-real-front{
  width:100%;
  height:100%;
  min-height:92px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 150px minmax(0,1fr) 22px;
  align-items:stretch;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid #444b50;
  border-radius:3px;
  background:linear-gradient(180deg,#1d2022,#0d1012 52%,#171a1c);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 #050607;
}

.edelstrom-ear{
  background:linear-gradient(90deg,#15181a,#090b0c);
  border-left:1px solid #33383c;
  border-right:1px solid #33383c;
  position:relative;
}
.edelstrom-ear:after{
  content:"";
  position:absolute;
  left:7px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  transform:translateY(-50%);
  border:1px solid #596268;
  background:#080a0b;
}

.edelstrom-vent{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:12px 16px;
  box-sizing:border-box;
  background:#111416;
}
.edelstrom-vent span{
  display:block;
  height:4px;
  border-radius:2px;
  background:linear-gradient(180deg,#050607,#1a1d1f);
  border-top:1px solid #292e31;
}
.edelstrom-vent strong{
  position:absolute;
  left:16px;
  bottom:8px;
  color:#eceff1;
  font-size:9px;
  font-weight:900;
  letter-spacing:.035em;
}
.edelstrom-vent em{
  position:absolute;
  right:14px;
  bottom:8px;
  color:#d7dadd;
  font-size:8px;
  font-style:italic;
}

.edelstrom-console{
  align-self:center;
  height:78%;
  margin:0 5px;
  padding:7px 8px 6px;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:16px minmax(0,1fr) 18px;
  gap:4px;
  border:2px solid #b4b8ba;
  border-radius:4px;
  background:linear-gradient(180deg,#d0d2d3,#9ea3a6);
  box-shadow:
    inset 0 0 0 1px #646b6f,
    0 0 0 1px #050607;
}

.edelstrom-console-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.edelstrom-model{
  color:#13181b;
  font-size:7px;
  font-weight:800;
}
.edelstrom-leds{
  display:flex;
  gap:4px;
}
.edelstrom-leds i{
  width:5px;
  height:9px;
  border-radius:1px;
  background:#3d4448;
}
.edelstrom-leds i.green{
  background:#75df1c;
  box-shadow:0 0 4px rgba(117,223,28,.65);
}

.edelstrom-lcd{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  overflow:hidden;
  border:1px solid #4d5660;
  border-radius:2px;
  background:linear-gradient(180deg,#706cff,#5a50e8 45%,#4539c7);
  box-shadow:
    inset 0 0 12px rgba(30,14,99,.7),
    0 0 5px rgba(92,77,255,.25);
  color:#edf0ff;
}

.ups-diagram{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:4px;
  align-items:center;
}
.ups-diagram i{
  display:block;
  height:8px;
  border:1px solid rgba(245,247,255,.75);
  position:relative;
}
.ups-diagram i:after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  width:5px;
  height:1px;
  background:rgba(245,247,255,.75);
}

.ups-values{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-end;
  align-items:flex-end;
  gap:2px;
}
.ups-values b{
  font-size:18px;
  line-height:1;
  color:#fff;
}
.ups-values small{
  font-size:5px;
  margin-bottom:2px;
}
.ups-values span{
  width:100%;
  text-align:right;
  font-size:6px;
  color:#f4f5ff;
}

.edelstrom-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
  align-items:center;
}
.edelstrom-buttons span{
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid #5e6467;
  background:linear-gradient(#686d70,#34393c);
  box-shadow:inset 0 1px rgba(255,255,255,.15);
}

/* Die frühere generische Edelstrom-Front nicht mehr verwenden */
.hw-md1500,
.md1500,
.native-ups-front.ups-md1500rt{
  display:none !important;
}


/* ==========================================================
   OpenInfra v0.12.5
   Kabelführung aus Kunststoff + Kabelpfad toggelbar
   ========================================================== */

/* ---------------- Kunststoff-Kabelführung ---------------- */

.plastic-cable-manager{
  width:100%;
  height:100%;
  min-height:46px;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid #40484d;
  border-radius:4px;
  background:
    linear-gradient(180deg,#202529 0%,#111517 45%,#080b0c 52%,#181d20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 0 rgba(0,0,0,.7);
}

.cable-manager-rail{
  position:absolute;
  left:3%;
  right:3%;
  top:50%;
  height:10px;
  transform:translateY(-50%);
  border-radius:5px;
  background:linear-gradient(180deg,#171c1f,#080a0b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 4px rgba(0,0,0,.65);
}

.plastic-loop-row{
  position:absolute;
  inset:5px 4%;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
  align-items:center;
  z-index:2;
}

.plastic-loop{
  position:relative;
  height:32px;
  display:block;
}

.plastic-loop .loop-left,
.plastic-loop .loop-right{
  position:absolute;
  top:4px;
  width:8px;
  height:24px;
  border-radius:5px 5px 3px 3px;
  background:
    linear-gradient(90deg,#0a0d0e,#242a2e 45%,#0b0e0f);
  border:1px solid #30383d;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.04),
    0 2px 4px rgba(0,0,0,.65);
}

.plastic-loop .loop-left{left:8px}
.plastic-loop .loop-right{right:8px}

.plastic-loop .loop-bar{
  position:absolute;
  left:11px;
  right:11px;
  top:6px;
  height:8px;
  border-radius:5px;
  background:
    linear-gradient(180deg,#2d3438,#111517 60%,#07090a);
  border:1px solid #353d42;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 3px 5px rgba(0,0,0,.7);
}

.plastic-loop:after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:4px;
  border-radius:3px;
  background:#07090a;
  box-shadow:0 1px 2px rgba(0,0,0,.7);
}

.cable-manager-shadow{
  position:absolute;
  left:5%;
  right:5%;
  bottom:3px;
  height:5px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  filter:blur(3px);
}

/* alte Darstellung deaktivieren */
.cable-manager-front,
.cable-loop{
  display:none !important;
}

/* ---------------- Kabelpfad Toggle ---------------- */

/* ausgewählter Port */
.front-port.selected,
.switch-port.selected,
.native-patch-port.selected,
.ng-rj45.selected,
.ng-sfp.selected{
  outline:2px solid #75b7ff !important;
  outline-offset:1px;
  box-shadow:
    0 0 0 1px #75b7ff,
    0 0 9px rgba(117,183,255,.65) !important;
}

/* aktiver Kabelpfad */
body.cable-path-active .cable-path.active,
body.cable-path-active .cable-line.active,
body.cable-path-active .connection-path.active,
body.cable-path-active .rack-cable.active,
body.cable-path-active svg.cables path.active,
body.cable-path-active .cable-overlay path.active{
  opacity:1 !important;
  visibility:visible !important;
}

/* Wenn kein Pfad aktiv ist, keine Rest-Hervorhebung erzwingen */
body:not(.cable-path-active) .cable-path.highlighted,
body:not(.cable-path-active) .cable-line.highlighted,
body:not(.cable-path-active) .connection-path.highlighted,
body:not(.cable-path-active) .rack-cable.highlighted{
  opacity:0 !important;
}


/* ==========================================================
   OpenInfra v0.13.0 - Verwaltung
   ========================================================== */

.rack-admin-card{
  margin:12px 0 14px;
  border:1px solid #263b5a;
  border-radius:11px;
  background:#111e31;
  overflow:hidden;
}
.rack-admin-card > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 13px;
  font-size:12px;
  font-weight:800;
  color:#bad3f2;
}
.rack-admin-card > summary::-webkit-details-marker{display:none}
.rack-admin-card > summary::after{
  content:"+";
  float:right;
  color:#6aa7ef;
}
.rack-admin-card[open] > summary::after{content:"−"}

.rack-admin-body{
  padding:13px;
  border-top:1px solid #263b5a;
}
.rack-admin-form{
  display:grid;
  grid-template-columns:1fr 1fr 180px auto;
  gap:10px;
  align-items:end;
}
.rack-admin-form label{
  font-size:11px !important;
}
.rack-admin-form input,
.rack-admin-form select{
  min-height:36px !important;
  font-size:12px !important;
}
.rack-admin-form button{
  min-height:36px !important;
}
.rack-delete-button{
  margin-top:10px;
}
.admin-note{
  margin:9px 0 0;
  font-size:11px !important;
  line-height:1.35;
  color:#859bb8;
}
.room-delete-form{
  padding:0 16px 16px;
}
.room-delete-form button{
  width:100%;
}
.room-delete-note{
  margin:0;
  padding:0 16px 16px;
}
@media(max-width:900px){
  .rack-admin-form{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   OpenInfra v0.14.0 - automatische Dosen-/Panelzuordnung
   ========================================================== */
.auto-panel-notice{
  margin:12px 0 14px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-radius:10px;
  border:1px solid #2c486b;
  background:#102039;
}
.auto-panel-notice strong{
  font-size:13px;
}
.auto-panel-notice span{
  font-size:12px;
  line-height:1.4;
}
.auto-panel-notice.success{
  border-color:rgba(93,218,164,.45);
  background:rgba(32,105,80,.16);
}
.auto-panel-notice.success strong{
  color:#65dfae;
}
.auto-panel-notice.warning{
  border-color:rgba(230,180,86,.42);
  background:rgba(114,79,23,.16);
}
.auto-panel-notice.warning strong{
  color:#e4bb68;
}
.auto-outlet-card textarea{
  min-height:135px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:14px !important;
  line-height:1.45;
}
.auto-rule{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid #263d5c;
  border-radius:8px;
  background:#091526;
  font-size:11px;
}
.auto-rule code{
  padding:4px 7px;
  border-radius:5px;
  background:#132845;
  color:#7eb8fa;
  font-size:12px;
}
.auto-rule span{color:#617996}
.auto-rule strong{color:#c9d9ec}
.field-hint{
  display:block;
  margin-top:4px;
  color:#778ca7;
  font-size:10px !important;
  line-height:1.35;
}


/* ==========================================================
   OpenInfra v0.14.1
   bestehende Netzwerkdosen automatisch nachträglich zuordnen
   ========================================================== */

.auto-existing-card{
  border-color:#2a4163;
}

.auto-existing-rule{
  margin:-2px 0 12px;
  padding:9px 10px;
  border:1px solid rgba(102,167,235,.20);
  border-radius:8px;
  background:#0a1728;
  color:#8da8c8;
  font-size:11px;
  line-height:1.35;
}

.auto-existing-card form button{
  width:100%;
}


/* ==========================================================
   OpenInfra v0.14.2 - Verbindungsfarben + PoE
   ========================================================== */

/* Neutral: Patchpanel-Port nur zur Dose dokumentiert = keine Sonderfarbe */
.native-patch-port{
  --connection-color: transparent;
}

/* Tatsächlich per Patchkabel mit einem anderen Port verbunden */
.front-port.patched-port{
  border-color:var(--connection-color) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--connection-color) 70%, transparent),
    0 0 5px color-mix(in srgb, var(--connection-color) 45%, transparent) !important;
}

/* Schwarze PoE-Verbindung: Port braucht trotzdem sichtbaren Rand */
.front-port.patched-port.poe-port{
  border-color:#101417 !important;
  outline:1px solid #66717a;
  outline-offset:1px;
}

/* PoE-Kennzeichen ausschließlich am PoE-Switchport */
.front-port.poe-port:after{
  content:"⚡";
  position:absolute !important;
  right:-5px !important;
  top:-7px !important;
  left:auto !important;
  bottom:auto !important;
  width:8px !important;
  height:8px !important;
  display:grid !important;
  place-items:center;
  border-radius:50%;
  background:#11161a !important;
  border:1px solid #9a8441;
  color:#e6c957;
  font-size:5px;
  font-weight:900;
  line-height:1;
  opacity:1 !important;
  z-index:8;
}

/* Der Kontakt-Look der RJ45-Buchse bleibt über ::before erhalten.
   Für PoE verwenden wir deshalb ::after als Badge statt Kontaktgrafik. */
.ng-rj45.poe-port:before{
  box-shadow:inset 0 -2px 0 rgba(226,197,83,.28);
}

/* GS752TPP als PoE-Gerät klar, aber dezent markieren */
.poe-device-badge{
  position:absolute;
  right:6px;
  top:5px;
  padding:2px 5px;
  border-radius:999px;
  border:1px solid rgba(221,190,75,.45);
  background:rgba(105,84,18,.20);
  color:#e2c552;
  font-size:5px;
  font-weight:900;
}

/* SVG */
.rack-cable{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.rack-cable.cable-outline{
  fill:none;
  pointer-events:none;
}
.rack-cable.poe-cable{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.15));
}
.rack-cable.focused{
  opacity:1;
}
.rack-cable.muted{
  opacity:.58;
}

/* Formular */
.poe-check-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
}
.poe-check-row input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  min-height:18px !important;
  margin:0;
}
.poe-check-row strong{
  font-size:11px;
  color:#b8cbe1;
}


/* ==========================================================
   OpenInfra v0.14.3 - Dokumentationsstatus
   ========================================================== */

/* Standard: reine Raumdosen-Zuordnung bleibt optisch neutral. */
.front-port.room-linked-port:not(.patched-port){
  border-color:inherit;
}

/* Erfassungsmodus: bereits einer Raumdose zugeordnete Panelports grün. */
body.show-documentation-status .front-port.room-linked-port:not(.patched-port){
  border-color:#56c98c !important;
  outline:1px solid rgba(86,201,140,.55);
  outline-offset:1px;
  box-shadow:0 0 0 1px rgba(86,201,140,.22),0 0 6px rgba(86,201,140,.35) !important;
}

body.show-documentation-status .front-port.room-linked-port:not(.patched-port)::after{
  content:"";
  position:absolute !important;
  right:-3px !important;
  top:-3px !important;
  left:auto !important;
  bottom:auto !important;
  width:5px !important;
  height:5px !important;
  border-radius:50%;
  background:#56c98c !important;
  border:1px solid #0b1511;
  opacity:1 !important;
  z-index:7;
}

/* Echte Switch-Patchung hat Vorrang vor dem Erfassungsstatus. */
body.show-documentation-status .front-port.patched-port{
  border-color:var(--connection-color) !important;
}

#toggleDocumentationStatus.active{
  border-color:rgba(86,201,140,.65);
  background:rgba(42,112,78,.28);
  color:#79dda8;
}


/* ==========================================================
   OpenInfra v0.14.4 - klarer Erfassungsstatus
   ========================================================== */

/*
   Statusfarben der PORTS:
   GRÜN = Patchpanel-Port ist einer Raumdose zugeordnet
   BLAU = Patchpanel-/Switch-Port ist tatsächlich gepatcht
   PoE  = zusätzlicher Blitz, unabhängig von der Statusfarbe
*/

/* Echte Rack-Patchverbindung: immer BLAU am Port. */
.front-port.patched-port{
  border-color:#4d9cff !important;
  outline:1px solid rgba(77,156,255,.60) !important;
  outline-offset:1px;
  box-shadow:
    0 0 0 1px rgba(77,156,255,.20),
    0 0 6px rgba(77,156,255,.38) !important;
}

/* Raumdosen-Zuordnung wird nur im Erfassungsstatus GRÜN. */
body.show-documentation-status
.front-port.room-linked-port:not(.patched-port){
  border-color:#55c98b !important;
  outline:1px solid rgba(85,201,139,.65) !important;
  outline-offset:1px;
  box-shadow:
    0 0 0 1px rgba(85,201,139,.20),
    0 0 6px rgba(85,201,139,.40) !important;
}

/* Kein grüner Punkt mehr: die komplette Buchse ist eindeutig grün. */
body.show-documentation-status
.front-port.room-linked-port:not(.patched-port)::after{
  content:none !important;
}

/* Gepatcht hat immer Vorrang: BLAU, auch im Erfassungsmodus. */
body.show-documentation-status .front-port.patched-port{
  border-color:#4d9cff !important;
  outline-color:rgba(77,156,255,.60) !important;
}

/* PoE bleibt als technische Zusatzinfo sichtbar. */
.front-port.patched-port.poe-port{
  border-color:#4d9cff !important;
  outline-color:rgba(77,156,255,.60) !important;
}

/* Button klar sichtbar schaltbar */
#toggleDocumentationStatus{
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
#toggleDocumentationStatus.active{
  border-color:#55c98b !important;
  background:rgba(42,112,78,.32) !important;
  color:#7ce0aa !important;
}


/* ==========================================================
   OpenInfra v0.15.0 - Globale Suche
   ========================================================== */

.topbar{
  gap:14px;
}
.global-search{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:min(440px,38vw);
}
.global-search input{
  width:100%;
  min-height:34px;
  border:1px solid #263d5e;
  border-radius:8px;
  background:#081426;
  color:#eef5ff;
  padding:7px 10px;
  font-size:12px;
}
.global-search input::placeholder{
  color:#667e9d;
}
.global-search button{
  min-height:34px !important;
  padding:6px 10px !important;
  border:1px solid #31517b;
  border-radius:8px;
  background:#132944;
  color:#a9c9ef;
  font-size:11px !important;
  cursor:pointer;
}
.global-search button:hover{
  background:#193656;
}

.search-hero h1{
  word-break:break-word;
}
.search-results-card,
.search-start-card{
  margin-top:18px;
}
.search-result-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.search-result-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 24px;
  gap:13px;
  align-items:center;
  padding:12px 13px;
  border:1px solid #223958;
  border-radius:10px;
  background:#091526;
  text-decoration:none;
}
.search-result-row:hover{
  border-color:#3c6797;
  background:#0d1c30;
}
.search-type{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid #2f4c70;
  background:#112642;
  color:#88b9f3;
  font-size:9px;
  font-weight:800;
}
.search-result-copy{
  min-width:0;
}
.search-result-copy strong{
  display:block;
  color:#eff5fd;
  font-size:14px;
  line-height:1.25;
}
.search-result-copy span{
  display:block;
  margin-top:2px;
  color:#99aec9;
  font-size:12px;
  line-height:1.3;
}
.search-result-copy small{
  display:block;
  margin-top:4px;
  color:#69819f;
  font-size:11px !important;
  line-height:1.3;
}
.search-open{
  color:#5a99df;
  font-size:20px;
  text-align:right;
}
.search-empty{
  padding:30px 15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#8199b7;
}
.search-empty strong{
  color:#d7e4f4;
}
.search-page-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
}
.search-page-form input{
  min-height:46px;
  border:1px solid #2b4569;
  border-radius:10px;
  background:#081426;
  color:#eef5ff;
  padding:9px 13px;
  font-size:14px;
}
.search-page-form button{
  min-height:46px;
}
.search-examples{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:12px;
  color:#7890ae;
  font-size:11px;
}
.search-examples code{
  padding:4px 7px;
  border-radius:5px;
  background:#10243e;
  color:#8fc2fb;
}

/* v0.15.0: Erfassungsmodus entfernt */
#toggleDocumentationStatus{
  display:none !important;
}
body.show-documentation-status .front-port.room-linked-port:not(.patched-port),
.front-port.room-linked-port:not(.patched-port){
  border-color:inherit !important;
  outline:none !important;
  box-shadow:inherit !important;
}
body.show-documentation-status .front-port.room-linked-port:not(.patched-port)::after{
  content:none !important;
}

/* Status im Rack:
   echte Patchung = blau, PoE weiterhin separat */
.front-port.patched-port{
  border-color:#4d9cff !important;
  outline:1px solid rgba(77,156,255,.60) !important;
  outline-offset:1px;
  box-shadow:0 0 0 1px rgba(77,156,255,.20),0 0 6px rgba(77,156,255,.38) !important;
}

@media(max-width:780px){
  .topbar{
    flex-wrap:wrap;
  }
  .global-search{
    order:3;
    min-width:100%;
    width:100%;
  }
  .search-result-row{
    grid-template-columns:1fr 20px;
  }
  .search-type{
    grid-column:1 / -1;
  }
}


/* ==========================================================
   OpenInfra v0.15.1 - UI-Fixes Suche + Schnellerfassung
   ========================================================== */

/* ---------- Topbar-Suche ---------- */

.topbar{
  display:flex;
  align-items:center;
}

.global-search{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  width:min(520px,42vw);
  min-width:320px;
}

.global-search input[type="search"]{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:38px;
  min-height:38px !important;
  box-sizing:border-box;
  border:1px solid #28415f !important;
  border-radius:9px !important;
  background:#091526 !important;
  color:#eaf2fb !important;
  padding:0 12px !important;
  font-size:13px !important;
  line-height:38px !important;
  outline:none !important;
  box-shadow:none !important;
}

.global-search input[type="search"]::placeholder{
  color:#7289a6 !important;
  opacity:1;
}

.global-search input[type="search"]:focus{
  border-color:#4c83bd !important;
  box-shadow:0 0 0 2px rgba(76,131,189,.14) !important;
}

.global-search input[type="search"]::-webkit-search-cancel-button{
  filter:invert(1);
  opacity:.55;
}

.global-search button{
  height:38px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border:1px solid #34577f !important;
  border-radius:9px !important;
  background:linear-gradient(90deg,#60d8c0,#68a6f5) !important;
  color:#08111d !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:38px !important;
  cursor:pointer;
  box-shadow:none !important;
}

.global-search button:hover{
  filter:brightness(1.04);
}

.topbar .version{
  margin-left:14px;
  white-space:nowrap;
}

/* ---------- Dosen schnell anlegen ---------- */

.auto-outlet-card .form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bulk-outlet-label{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:7px !important;
  width:100%;
  margin:0 !important;
  color:#9db3cf;
  font-size:12px !important;
  font-weight:700;
}

.bulk-outlet-label > span{
  display:block;
  width:100%;
}

.auto-outlet-card textarea[name="outlets_text"]{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  min-height:145px !important;
  box-sizing:border-box;
  resize:vertical;
  margin:0 !important;
  padding:11px 12px !important;
  border:1px solid #2a4163 !important;
  border-radius:9px !important;
  background:#091526 !important;
  color:#edf4fc !important;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace !important;
  font-size:13px !important;
  line-height:1.5 !important;
  outline:none !important;
  box-shadow:none !important;
}

.auto-outlet-card textarea[name="outlets_text"]::placeholder{
  color:#6e85a2 !important;
  opacity:1;
}

.auto-outlet-card textarea[name="outlets_text"]:focus{
  border-color:#4c83bd !important;
  box-shadow:0 0 0 2px rgba(76,131,189,.14) !important;
}

.auto-outlet-card .auto-rule{
  width:100%;
  box-sizing:border-box;
}

.auto-outlet-card button{
  width:100%;
}

/* Auch andere Textareas im Room-Bereich sollen nicht auf Browser-Weiß zurückfallen. */
.side-stack textarea,
.room-layout textarea,
.card textarea{
  background:#091526;
  color:#edf4fc;
  border:1px solid #2a4163;
  border-radius:9px;
}

/* Responsive Topbar */
@media(max-width:900px){
  .global-search{
    width:46vw;
    min-width:250px;
  }
}

@media(max-width:700px){
  .topbar{
    flex-wrap:wrap;
    gap:10px;
  }

  .global-search{
    order:3;
    width:100%;
    min-width:100%;
    margin-left:0;
  }

  .topbar .version{
    margin-left:auto;
  }
}


/* ==========================================================
   OpenInfra v0.16.0 - Kabelverwaltung
   ========================================================== */

.cable-admin-list{display:flex;flex-direction:column;gap:8px}
.cable-admin-item{border:1px solid #243a58;border-radius:9px;background:#091526;overflow:hidden}
.cable-admin-item>summary{cursor:pointer;list-style:none}
.cable-admin-item>summary::-webkit-details-marker{display:none}
.cable-admin-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,.8fr) minmax(0,1fr);align-items:center;gap:10px;padding:10px 11px}
.cable-endpoint strong{display:block;color:#e7f0fb;font-size:11px}
.cable-endpoint small{display:block;margin-top:2px;color:#748aa6;font-size:8px!important}
.cable-endpoint.right{text-align:right}
.cable-admin-line{display:flex;align-items:center;justify-content:center;gap:6px;color:#7188a5}
.cable-admin-line i{display:block;flex:1;height:2px;border-radius:2px;background:#4d9cff}
.cable-admin-line b{font-size:8px;font-weight:700;white-space:nowrap}
.cable-admin-body{padding:11px;border-top:1px solid #243a58;background:#0e1b2e}
.cable-edit-form{display:grid;grid-template-columns:1fr 130px 130px 1fr auto;gap:8px;align-items:end}
.cable-edit-form label{font-size:10px!important}
.cable-edit-form input,.cable-edit-form select{min-height:34px!important;font-size:11px!important}
.cable-edit-form button{min-height:34px!important}
.cable-delete-button{width:100%;margin-top:9px}

@media(max-width:980px){
  .cable-edit-form{grid-template-columns:1fr 1fr}
  .cable-edit-form button{grid-column:1/-1}
}
@media(max-width:650px){
  .cable-admin-summary{grid-template-columns:1fr}
  .cable-endpoint.right{text-align:left}
  .cable-edit-form{grid-template-columns:1fr}
}


/* ==========================================================
   OpenInfra v0.16.1 - Kabeldokumentation im Portdrawer
   ========================================================== */

.drawer-cable-documentation[hidden]{
  display:none !important;
}

.drawer-cable-documentation{
  margin:12px 0;
  padding:12px;
  border:1px solid #28506a;
  border-radius:10px;
  background:rgba(22,72,78,.14);
}

.drawer-cable-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:10px;
}

.drawer-cable-title strong{
  color:#72ddc5;
  font-size:12px;
}

.drawer-cable-title span{
  color:#7890ac;
  font-size:9px;
}

.drawer-cable-form{
  display:flex !important;
  flex-direction:column;
  gap:9px;
}

.drawer-cable-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.drawer-cable-form label{
  font-size:10px !important;
}

.drawer-cable-form input,
.drawer-cable-form select,
.drawer-cable-form textarea{
  width:100%;
  box-sizing:border-box;
  min-height:36px !important;
  background:#091526 !important;
  color:#edf4fc !important;
  border:1px solid #2a4163 !important;
  border-radius:8px !important;
  font-size:11px !important;
}

.drawer-cable-form textarea{
  min-height:64px !important;
  resize:vertical;
}

.drawer-cable-form button{
  width:100%;
}

/* v0.16.0: Die allgemeine Formular-Gridbreite war für die schmale
   rechte Rack-Spalte zu breit. Dort jetzt bewusst kompakt. */
.rack-side-v4 .cable-edit-form{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}

.rack-side-v4 .cable-edit-form label{
  min-width:0;
}

.rack-side-v4 .cable-edit-form label:nth-child(1),
.rack-side-v4 .cable-edit-form label:nth-child(4),
.rack-side-v4 .cable-edit-form button{
  grid-column:1 / -1;
}

.rack-side-v4 .cable-edit-form input,
.rack-side-v4 .cable-edit-form select{
  width:100%;
  box-sizing:border-box;
}

.rack-side-v4 .cable-edit-form button{
  display:block !important;
  width:100% !important;
  margin-top:2px;
}

.rack-side-v4 .cable-delete-button{
  display:block !important;
  width:100% !important;
}

@media(max-width:520px){
  .drawer-cable-grid{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   OpenInfra v0.17.0 - Portdetails aufgeräumt
   ========================================================== */

.drawer-create-connection[hidden]{
  display:none !important;
}

.drawer-create-connection{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #243a58;
}

.drawer-create-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:9px;
}

.drawer-create-title strong{
  color:#b9cbe1;
  font-size:11px;
}

.drawer-create-title span{
  color:#6f86a2;
  font-size:8px;
}

.drawer-cable-documentation{
  margin:10px 0 8px !important;
  padding:10px !important;
}

.drawer-cable-title{
  margin-bottom:8px !important;
}

.drawer-cable-form{
  gap:7px !important;
}

.drawer-cable-form label{
  gap:4px !important;
}

.drawer-cable-form input,
.drawer-cable-form select{
  min-height:34px !important;
  height:34px !important;
}

.drawer-cable-form textarea{
  min-height:54px !important;
  height:54px;
  padding-top:8px !important;
  padding-bottom:8px !important;
}

.drawer-cable-form .primary-action{
  min-height:38px !important;
  height:38px !important;
}

.drawer-trace{
  margin-top:10px !important;
  padding-top:10px !important;
  border-top:1px solid #243a58;
}

.port-drawer .drawer-body{
  padding-bottom:14px !important;
}

.drawer-section{
  padding-bottom:12px !important;
}

.drawer-current-link{
  margin-bottom:8px;
}

@media(max-width:520px){
  .drawer-cable-grid{
    grid-template-columns:1fr !important;
  }
}


/* OpenInfra v0.17.0
   Kleine Marker/Striche oberhalb der RJ45-Ports ausblenden.
   Die eigentliche Statusfarbe des Ports bleibt erhalten. */
.port-jack::before,
.port-jack::after,
.switch-port::before,
.switch-port::after,
.patch-port::before,
.patch-port::after,
.device-port::before,
.device-port::after,
.rj45-port::before,
.rj45-port::after {
    display: none !important;
    content: none !important;
}

.native-patch-port::before,
.native-patch-port::after,
.ng-rj45::before,
.ng-rj45::after,
.native-rj45::before,
.native-rj45::after {
    content: none !important;
    display: none !important;
}

.openinfra-csv-tools{margin-bottom:14px}
.csv-import-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:10px}
.csv-import-form input{min-height:38px;padding:7px 9px;border:1px solid #2a4163;border-radius:8px;background:#091526;color:#b9cbe1}
.csv-export-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border:1px solid #31517b;border-radius:8px;background:#132944;color:#a9c9ef;text-decoration:none;font-weight:800}
.csv-format{margin-top:9px;padding:8px 10px;border:1px solid #243a58;border-radius:8px;background:#091526;color:#7890ad;font-size:11px}


/* ==========================================================
   OpenInfra v0.17.1
   Port-Marker endgültig entfernt
   ========================================================== */

.native-patch-port > i,
.ng-rj45 > i,
.native-rj45 > i,
.switch-port > i,
.front-port > i{
  display:none !important;
}


/* ==========================================================
   OpenInfra v0.17.3
   Portstatus ohne Haken, Animation wiederhergestellt
   ========================================================== */

/* Alte künstliche Haken/Innenstriche bleiben entfernt. */
.native-patch-port::before,
.native-patch-port::after,
.ng-rj45::before,
.ng-rj45::after,
.native-rj45::before,
.native-rj45::after{
  content:none !important;
  display:none !important;
}

/* Neuer eigener Statuspunkt - keine Hakenform. */
.port-status-dot{
  position:absolute;
  right:2px;
  top:2px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:transparent;
  opacity:0;
  pointer-events:none;
  z-index:6;
}

/* Tatsächlich gepatchte Ports: blau mit dezenter Pulse-Animation. */
.front-port.patched-port .port-status-dot,
.front-port.connected.patched-port .port-status-dot{
  background:#4d9cff;
  opacity:1;
  box-shadow:0 0 4px rgba(77,156,255,.85);
  animation:openinfra-port-pulse 1.8s ease-in-out infinite;
}

/* Mit Raumdose verbundene Panelports bleiben grün.
   Keine Umfärbung durch den neuen Statuspunkt. */
.native-patch-port.connected:not(.patched-port){
  border-color:#55c98b !important;
  box-shadow:0 0 5px rgba(85,201,139,.40) !important;
}

.native-patch-port.connected:not(.patched-port) .port-status-dot{
  background:#55c98b;
  opacity:1;
  box-shadow:0 0 3px rgba(85,201,139,.65);
  animation:none;
}

/* PoE bleibt eine eigene Zusatzkennzeichnung. */
.front-port.poe-port .port-status-dot{
  animation:openinfra-port-pulse 1.8s ease-in-out infinite;
}

@keyframes openinfra-port-pulse{
  0%,100%{
    opacity:.45;
    transform:scale(.85);
    box-shadow:0 0 2px rgba(77,156,255,.45);
  }
  50%{
    opacity:1;
    transform:scale(1.25);
    box-shadow:0 0 7px rgba(77,156,255,.95);
  }
}


/* ==========================================================
   OpenInfra v0.17.4
   Portstatus nur noch über animierten Rahmen
   ========================================================== */

/* Statuspunkte vollständig deaktivieren */
.port-status-dot{
  display:none !important;
}

/* Alte Haken / Innenmarker bleiben entfernt */
.native-patch-port::before,
.native-patch-port::after,
.ng-rj45::before,
.ng-rj45::after,
.native-rj45::before,
.native-rj45::after{
  content:none !important;
  display:none !important;
}

/* Blaue Ports = echte Patchverbindung */
.front-port.patched-port,
.front-port.connected.patched-port{
  border-color:#3f91ff !important;
  outline:1px solid rgba(63,145,255,.55) !important;
  outline-offset:1px;
  animation:openinfra-blue-border 1.8s ease-in-out infinite !important;
}

/* Grüne Ports = mit Raumdose verbunden */
.native-patch-port.connected:not(.patched-port){
  border-color:#4fd69a !important;
  outline:1px solid rgba(79,214,154,.48) !important;
  outline-offset:1px;
  animation:openinfra-green-border 1.8s ease-in-out infinite !important;
}

/* PoE darf die Statusfarbe des Rahmens nicht überschreiben */
.front-port.poe-port.patched-port{
  border-color:#3f91ff !important;
}

/* Nur Rahmen / Glow ändert sich, kein Punkt, kein Größenwechsel */
@keyframes openinfra-blue-border{
  0%,100%{
    border-color:#2f78d5;
    outline-color:rgba(47,120,213,.35);
    box-shadow:
      0 0 0 1px rgba(47,120,213,.14),
      0 0 3px rgba(47,120,213,.22);
  }
  50%{
    border-color:#62adff;
    outline-color:rgba(98,173,255,.78);
    box-shadow:
      0 0 0 1px rgba(98,173,255,.32),
      0 0 8px rgba(98,173,255,.62);
  }
}

@keyframes openinfra-green-border{
  0%,100%{
    border-color:#37a974;
    outline-color:rgba(55,169,116,.32);
    box-shadow:
      0 0 0 1px rgba(55,169,116,.12),
      0 0 3px rgba(55,169,116,.20);
  }
  50%{
    border-color:#67e7ad;
    outline-color:rgba(103,231,173,.75);
    box-shadow:
      0 0 0 1px rgba(103,231,173,.28),
      0 0 8px rgba(103,231,173,.55);
  }
}


/* ==========================================================
   OpenInfra v0.18.0 - Endgeräte
   ========================================================== */
.endpoint-summary-v180 span{
  display:block;
  margin-top:3px;
  color:#8fb1d8;
  font-size:.78rem;
}
.endpoint-manager-v180{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #29425f;
}
.endpoint-manager-v180 h3{
  margin:0 0 10px;
}
.endpoint-card-v180,
.endpoint-add-v180{
  margin:8px 0;
  border:1px solid #294967;
  border-radius:10px;
  background:#0a1728;
  overflow:hidden;
}
.endpoint-card-v180 > summary,
.endpoint-add-v180 > summary{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:11px 13px;
  cursor:pointer;
  color:#dcecff;
}
.endpoint-card-v180 summary span:first-child{
  display:flex;
  flex-direction:column;
}
.endpoint-card-v180 summary small{
  margin-top:3px;
  color:#82a7cf;
}
.endpoint-form-v180{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px;
  border-top:1px solid #213b58;
}
.endpoint-form-v180 label{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.endpoint-form-v180 .wide,
.endpoint-form-v180 button{
  grid-column:1 / -1;
}
.endpoint-card-v180 > form:last-child{
  padding:0 12px 12px;
}
@media (max-width:900px){
  .endpoint-form-v180{grid-template-columns:1fr}
}


/* ==========================================================
   OpenInfra v0.18.1 - Endgeräteformular in schmaler Spalte
   ========================================================== */

.endpoint-manager-v180,
.endpoint-card-v180,
.endpoint-add-v180,
.endpoint-form-v180{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.room-layout .side-stack .endpoint-form-v180,
.room-layout .room-side .endpoint-form-v180,
.room-layout aside .endpoint-form-v180,
.outlet-edit-panel .endpoint-form-v180,
.endpoint-form-v180{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:9px !important;
}

.endpoint-form-v180{
  overflow:hidden;
}

.endpoint-form-v180 label,
.endpoint-form-v180 .wide{
  grid-column:1 / -1 !important;
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box;
}

.endpoint-form-v180 input,
.endpoint-form-v180 select,
.endpoint-form-v180 textarea{
  display:block;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  background:#091526 !important;
  color:#edf4fc !important;
  border:1px solid #2a4163 !important;
  border-radius:8px !important;
}

.endpoint-form-v180 input,
.endpoint-form-v180 select{
  min-height:38px !important;
  padding:8px 10px !important;
}

.endpoint-form-v180 textarea{
  min-height:72px !important;
  padding:9px 10px !important;
  resize:vertical;
}

.endpoint-form-v180 button{
  grid-column:1 / -1 !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  min-height:40px !important;
  margin:2px 0 0 !important;
}

.endpoint-add-v180 > summary,
.endpoint-card-v180 > summary{
  box-sizing:border-box;
  width:100%;
  min-width:0;
}

.endpoint-card-v180 summary span:first-child{
  min-width:0;
}

.endpoint-card-v180 summary strong,
.endpoint-card-v180 summary small{
  overflow-wrap:anywhere;
}

.endpoint-manager-v180{
  margin-top:14px;
}

.endpoint-add-v180{
  margin-bottom:10px;
}


/* ==========================================================
   OpenInfra v0.19.0 - Übersicht & Plausibilitätschecks
   ========================================================== */
.diagnostics-nav-v190{
  color:#9bb7d8;
  text-decoration:none;
  font-weight:700;
  font-size:.84rem;
  margin-left:auto;
  margin-right:18px;
}
.diagnostics-nav-v190:hover{color:#66dfc6}

.diagnostics-v190{
  max-width:1380px;
  margin:0 auto;
  padding:28px 24px 60px;
}
.diag-head-v190{margin-bottom:20px}
.diag-head-v190 h1{margin:4px 0 6px;font-size:2rem}
.diag-head-v190 p{margin:0;color:#8faaca}

.diag-stats-v190{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.diag-stat-v190{
  border:1px solid #29425f;
  border-radius:14px;
  background:#13233b;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
}
.diag-stat-v190 small{color:#8eabd0;font-weight:700}
.diag-stat-v190 strong{font-size:2rem;margin:4px 0;color:#f3f7fc}
.diag-stat-v190 span{color:#86a5c9;font-size:.84rem}
.diag-stat-v190.ok{border-color:#276a5d}
.diag-stat-v190.warn{border-color:#80672c}

.diag-grid-v190{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.diag-card-v190{
  background:#13233b;
  border:1px solid #29425f;
  border-radius:14px;
  padding:16px;
  min-width:0;
}
.diag-card-v190.wide{grid-column:1/-1}
.diag-title-v190{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.diag-title-v190 h2{font-size:1.05rem;margin:0}
.diag-title-v190 > span{
  border:1px solid #315071;
  border-radius:999px;
  padding:3px 9px;
  color:#9db9d8;
  font-size:.78rem;
}
.diag-row-v190{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:10px 11px;
  margin-top:7px;
  border-radius:9px;
  background:#091727;
  border:1px solid #203a56;
}
.diag-row-v190 span{color:#b2c7df}
.diag-row-v190 strong{font-size:1rem}
.diag-row-v190.ok strong{color:#63dfb5}
.diag-row-v190.warn strong{color:#f0bd5d}
.diag-row-v190.muted strong{color:#86a3c3}

.diag-problem-v190{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 11px;
  margin-top:7px;
  border:1px solid #73582b;
  background:#1d1a16;
  border-radius:9px;
}
.diag-problem-v190 strong{color:#f2c76d}
.diag-problem-v190 span{color:#aebed1;font-size:.84rem}
.diag-empty-v190{
  padding:13px;
  border:1px solid #245b52;
  background:#0b201e;
  color:#7ed9bf;
  border-radius:9px;
}

@media(max-width:900px){
  .diag-stats-v190,
  .diag-grid-v190{grid-template-columns:1fr}
  .diag-card-v190.wide{grid-column:auto}
}


/* ==========================================================
   OpenInfra v0.20.0 - Portübersicht
   ========================================================== */
.ports-v200{max-width:1500px;margin:0 auto;padding:28px 24px 60px}
.ports-head-v200{margin-bottom:18px}
.ports-head-v200 h1{margin:4px 0 6px;font-size:2rem}
.ports-head-v200 p{margin:0;color:#8faaca}

.ports-stats-v200{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.ports-stats-v200 > div{
  background:#13233b;
  border:1px solid #29425f;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
}
.ports-stats-v200 small{color:#8ea9ca}
.ports-stats-v200 strong{font-size:1.45rem;margin-top:3px;color:#f3f7fc}

.ports-filter-card-v200{margin-bottom:14px}
.ports-filter-v200{
  display:grid;
  grid-template-columns:2fr repeat(4,minmax(135px,1fr)) auto auto;
  gap:10px;
  align-items:end;
}
.ports-filter-v200 label{display:flex;flex-direction:column;gap:5px;color:#9db3cf;font-size:.78rem;font-weight:700}
.ports-filter-v200 input,
.ports-filter-v200 select{
  min-height:38px;
  box-sizing:border-box;
  width:100%;
  border:1px solid #2a4163;
  border-radius:8px;
  background:#091526;
  color:#edf4fc;
  padding:7px 9px;
}
.ports-filter-v200 button{min-height:38px}
.ports-reset-v200{
  min-height:38px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #31517b;
  border-radius:8px;
  background:#132944;
  color:#a9c9ef;
  text-decoration:none;
  padding:0 11px;
  font-size:.8rem;
  font-weight:700;
}

.ports-table-wrap-v200{overflow:auto}
.ports-table-v200{width:100%;border-collapse:separate;border-spacing:0;min-width:1100px}
.ports-table-v200 th{
  position:sticky;
  top:0;
  z-index:2;
  background:#101f35;
  color:#8faaca;
  text-align:left;
  padding:10px;
  font-size:.73rem;
  border-bottom:1px solid #315071;
}
.ports-table-v200 td{
  padding:10px;
  border-bottom:1px solid #203650;
  vertical-align:middle;
  color:#dce8f6;
}
.ports-table-v200 tbody tr:hover{background:#0d1b2d}
.ports-table-v200 tbody tr.is-free{opacity:.72}
.ports-table-v200 td a{color:#dcecff;text-decoration:none}
.ports-table-v200 td a:hover{color:#73b8ff}
.ports-table-v200 td strong{display:block;font-size:.86rem}
.ports-table-v200 td small{display:block;margin-top:3px;color:#7894b5;font-size:.7rem}
.ports-table-v200 code{color:#8fc2fb;background:#0b1727;padding:3px 5px;border-radius:5px}

.port-pill-v200,
.poe-pill-v200,
.status-pill-v200{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  white-space:nowrap;
  font-size:.7rem;
  font-weight:800;
}
.port-pill-v200{padding:4px 7px;border:1px solid #355c85;background:#112944;color:#9ac9fa}
.poe-pill-v200{padding:4px 7px;border:1px solid #806b2e;background:#2a2313;color:#f0cd62}
.status-pill-v200{padding:4px 7px}
.status-pill-v200.free{border:1px solid #42556d;color:#8ea5bf}
.status-pill-v200.connected{border:1px solid #315f8f;background:#102944;color:#7ebcff}
.status-pill-v200.room{border:1px solid #34725e;background:#102b24;color:#6edbad}
.status-pill-v200.complete{border:1px solid #2b7766;background:#0e3028;color:#70e1ba}
.ports-muted-v200{color:#536a85}
.ports-empty-v200{text-align:center!important;padding:30px!important;color:#7f98b6!important}

@media(max-width:1200px){
  .ports-stats-v200{grid-template-columns:repeat(3,1fr)}
  .ports-filter-v200{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:700px){
  .ports-stats-v200{grid-template-columns:repeat(2,1fr)}
  .ports-filter-v200{grid-template-columns:1fr}
}


/* ==========================================================
   OpenInfra v0.21.0 - Dokumentationsgrad + Portdetails
   ========================================================== */

.ports-stats-v210{
  grid-template-columns:repeat(7,minmax(0,1fr));
}

.documentation-stat-v210{
  grid-column:span 1;
}

.documentation-stat-v210 span{
  color:#86a5c9;
  font-size:.72rem;
  margin-bottom:7px;
}

.documentation-bar-v210{
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background:#091526;
  border:1px solid #243b56;
}

.documentation-bar-v210 i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#55d7bf,#5c9fff);
}

.port-row-v210{
  cursor:pointer;
}

.port-row-v210:focus{
  outline:2px solid rgba(92,159,255,.7);
  outline-offset:-2px;
}

.port-detail-modal-v210[hidden]{
  display:none !important;
}

.port-detail-modal-v210{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.port-detail-backdrop-v210{
  position:absolute;
  inset:0;
  background:rgba(2,8,18,.76);
  backdrop-filter:blur(3px);
}

.port-detail-panel-v210{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  background:#101f35;
  border:1px solid #34506f;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}

.port-detail-head-v210{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding:18px 20px 15px;
  border-bottom:1px solid #29425f;
}

.port-detail-head-v210 h2{
  margin:4px 0 3px;
  font-size:1.35rem;
}

.port-detail-head-v210 p{
  margin:0;
  color:#819dbc;
  font-size:.82rem;
}

.port-detail-close-v210{
  width:38px;
  height:38px;
  min-height:38px !important;
  padding:0 !important;
  border-radius:9px;
  border:1px solid #34506f;
  background:#142740;
  color:#dcecff;
  font-size:1.25rem;
}

.port-detail-summary-v210{
  display:flex;
  gap:8px;
  padding:13px 20px 0;
}

.detail-status-v210,
.detail-poe-v210{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
}

.detail-status-v210.connected{
  border:1px solid #2f7968;
  background:#0f3029;
  color:#72dfba;
}

.detail-status-v210.free{
  border:1px solid #42556d;
  background:#152131;
  color:#9db0c8;
}

.detail-poe-v210{
  border:1px solid #806b2e;
  background:#2a2313;
  color:#f0cd62;
}

.port-detail-path-v210{
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.detail-path-node-v210{
  padding:10px 12px;
  border:1px solid #2d4867;
  border-radius:9px;
  background:#091727;
}

.detail-path-node-v210 small{
  display:block;
  color:#7897b9;
  font-size:.7rem;
  margin-bottom:2px;
}

.detail-path-node-v210 strong{
  display:block;
  color:#edf5ff;
}

.detail-path-node-v210.type-endpoint{
  border-color:#2d725f;
  background:#0d2722;
}

.detail-path-node-v210.type-outlet{
  border-color:#376083;
}

.detail-path-arrow-v210{
  align-self:center;
  padding:4px 0;
  color:#4e82bb;
  font-size:.9rem;
}

.port-detail-grid-v210{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 20px 20px;
}

.port-detail-grid-v210 > div{
  min-width:0;
  padding:10px 11px;
  background:#091727;
  border:1px solid #243c58;
  border-radius:9px;
}

.port-detail-grid-v210 small{
  display:block;
  color:#7895b6;
  font-size:.68rem;
  margin-bottom:3px;
}

.port-detail-grid-v210 strong{
  display:block;
  overflow-wrap:anywhere;
  color:#e8f1fc;
  font-size:.84rem;
}

.port-modal-open-v210{
  overflow:hidden;
}

@media(max-width:1200px){
  .ports-stats-v210{
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:700px){
  .ports-stats-v210{
    grid-template-columns:repeat(2,1fr);
  }

  .documentation-stat-v210{
    grid-column:1/-1;
  }

  .port-detail-grid-v210{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   OpenInfra v0.21.1 - Portdetails echtes Modal
   ========================================================== */

#portDetailModalV210[hidden]{
  display:none !important;
}

#portDetailModalV210{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:24px !important;
  box-sizing:border-box !important;
  background:transparent !important;
}

#portDetailModalV210 .port-detail-backdrop-v210{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:rgba(2,8,18,.82) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

#portDetailModalV210 .port-detail-panel-v210{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:min(640px, calc(100vw - 48px)) !important;
  max-width:640px !important;
  max-height:calc(100vh - 48px) !important;
  margin:0 !important;
  overflow:auto !important;
  box-sizing:border-box !important;
  background:#101f35 !important;
  border:1px solid #365575 !important;
  border-radius:16px !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(90,145,205,.08) !important;
}

#portDetailModalV210 .port-detail-head-v210{
  position:sticky;
  top:0;
  z-index:3;
  background:#101f35;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:18px 20px 15px !important;
  border-bottom:1px solid #29425f !important;
}

#portDetailModalV210 .port-detail-close-v210{
  flex:0 0 auto !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #365575 !important;
  border-radius:9px !important;
  background:#142740 !important;
  color:#e7f2ff !important;
  font-size:20px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

#portDetailModalV210 .port-detail-summary-v210{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  padding:13px 20px 0 !important;
}

#portDetailModalV210 .port-detail-path-v210{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:16px 20px !important;
}

#portDetailModalV210 .detail-path-node-v210{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:10px 12px !important;
  border:1px solid #2d4867 !important;
  border-radius:9px !important;
  background:#091727 !important;
}

#portDetailModalV210 .detail-path-node-v210 strong,
#portDetailModalV210 .detail-path-node-v210 small{
  display:block !important;
}

#portDetailModalV210 .detail-path-node-v210 small{
  margin-bottom:3px !important;
  color:#7897b9 !important;
  font-size:.72rem !important;
}

#portDetailModalV210 .detail-path-arrow-v210{
  align-self:center !important;
  padding:5px 0 !important;
  color:#5a8ec7 !important;
  line-height:1 !important;
}

#portDetailModalV210 .port-detail-grid-v210{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  padding:0 20px 20px !important;
}

#portDetailModalV210 .port-detail-grid-v210 > div{
  display:block !important;
  min-width:0 !important;
  padding:10px 11px !important;
  border:1px solid #243c58 !important;
  border-radius:9px !important;
  background:#091727 !important;
}

#portDetailModalV210 .port-detail-grid-v210 small,
#portDetailModalV210 .port-detail-grid-v210 strong{
  display:block !important;
}

body.port-modal-open-v210{
  overflow:hidden !important;
}

@media(max-width:700px){
  #portDetailModalV210{
    padding:12px !important;
  }

  #portDetailModalV210 .port-detail-panel-v210{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 24px) !important;
  }

  #portDetailModalV210 .port-detail-grid-v210{
    grid-template-columns:1fr !important;
  }
}


/* ==========================================================
   OpenInfra v0.22.0 - End-to-End Portdetail
   ========================================================== */

#portDetailModalV210 .detail-path-node-v210{
  text-decoration:none !important;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}

#portDetailModalV210 a.detail-path-node-v210:hover{
  border-color:#4d7dad !important;
  background:#0d2036 !important;
  transform:translateY(-1px);
}

.port-detail-break-v220[hidden]{
  display:none !important;
}

.port-detail-break-v220{
  margin:0 20px 16px;
  padding:11px 12px;
  border:1px solid #7e602c;
  border-radius:9px;
  background:#241d12;
}

.port-detail-break-v220 small{
  display:block;
  margin-bottom:3px;
  color:#d4a74f;
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.port-detail-break-v220 strong{
  display:block;
  color:#f2cf84;
  font-size:.84rem;
}

.port-detail-actions-v220{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 20px 20px;
}

.port-detail-actions-v220 .secondary-link-button{
  min-height:36px;
}

#portDetailModalV210 .detail-path-node-v210.type-room,
#portDetailModalV210 .detail-path-node-v210.type-outlet{
  border-color:#315b7e !important;
}

#portDetailModalV210 .detail-path-node-v210.type-endpoint{
  border-color:#2d725f !important;
  background:#0d2722 !important;
}


/* ==========================================================
   OpenInfra v0.23.0 - VLANs
   ========================================================== */

.vlans-v230{
  max-width:1300px;
  margin:0 auto;
  padding:28px 24px 60px;
}
.vlans-head-v230{margin-bottom:18px}
.vlans-head-v230 h1{margin:4px 0 6px;font-size:2rem}
.vlans-head-v230 p{margin:0;color:#8faaca}

.vlan-create-v230{margin-bottom:14px}
.vlan-form-v230{
  display:grid;
  grid-template-columns:120px 1fr 1fr 1fr;
  gap:10px;
  align-items:end;
}
.vlan-form-v230 label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#9db3cf;
  font-size:.78rem;
  font-weight:700;
}
.vlan-form-v230 .wide{grid-column:1/-2}
.vlan-form-v230 input{
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  border:1px solid #2a4163;
  border-radius:8px;
  background:#091526;
  color:#edf4fc;
  padding:7px 9px;
}

.vlan-grid-v230{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.vlan-card-v230{padding:0!important;overflow:hidden}
.vlan-card-v230 > summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
}
.vlan-card-v230 > summary::-webkit-details-marker{display:none}
.vlan-badge-v230{
  border:1px solid #3773a5;
  background:#102a45;
  color:#8cc7ff;
  border-radius:8px;
  padding:7px 9px;
  font-weight:900;
  font-size:.78rem;
}
.vlan-summary-v230{display:flex;flex-direction:column;min-width:0}
.vlan-summary-v230 strong{color:#e8f1fc}
.vlan-summary-v230 small{margin-top:3px;color:#7f9dbe}
.vlan-count-v230{color:#85a5c7;font-size:.78rem}
.vlan-card-body-v230{padding:14px;border-top:1px solid #29425f}
.vlan-delete-v230{width:100%;margin-top:10px}
.vlan-empty-v230{grid-column:1/-1;color:#849fbe}

.vlan-pill-v230{
  display:inline-flex;
  align-items:center;
  border:1px solid #6454a2;
  background:#201a38;
  color:#b9a8ff;
  border-radius:999px;
  padding:4px 7px;
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap;
}

.port-vlan-editor-v230{
  margin:0 20px 16px;
  padding:12px;
  border:1px solid #3a416e;
  border-radius:10px;
  background:#11182b;
}
.port-vlan-editor-head-v230{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:10px;
}
.port-vlan-editor-head-v230 strong{color:#bfb0ff}
.port-vlan-editor-head-v230 span{color:#788eae;font-size:.72rem}
.port-vlan-form-v230{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:9px;
}
.port-vlan-form-v230 label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#9db3cf;
  font-size:.72rem;
  font-weight:700;
}
.port-vlan-form-v230 .wide,
.port-vlan-form-v230 button{grid-column:1/-1}
.port-vlan-form-v230 select,
.port-vlan-form-v230 input{
  width:100%;
  min-height:36px;
  box-sizing:border-box;
  border:1px solid #2f4563;
  border-radius:8px;
  background:#091526;
  color:#edf4fc;
  padding:6px 8px;
}

@media(max-width:900px){
  .vlan-grid-v230{grid-template-columns:1fr}
  .vlan-form-v230{grid-template-columns:1fr 1fr}
  .vlan-form-v230 .wide{grid-column:1/-1}
}
@media(max-width:600px){
  .vlan-form-v230,
  .port-vlan-form-v230{grid-template-columns:1fr}
  .port-vlan-form-v230 .wide,
  .port-vlan-form-v230 button{grid-column:auto}
}


/* ==========================================================
   OpenInfra v0.24.0 - IPAM
   ========================================================== */

.ipam-v240{
  max-width:1500px;
  margin:0 auto;
  padding:28px 24px 60px;
}
.ipam-head-v240{margin-bottom:18px}
.ipam-head-v240 h1{margin:4px 0 6px;font-size:2rem}
.ipam-head-v240 p{margin:0;color:#8faaca}

.ipam-stats-v240{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.ipam-stats-v240 > div{
  background:#13233b;
  border:1px solid #29425f;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
}
.ipam-stats-v240 > div.warn{border-color:#80672c}
.ipam-stats-v240 small{color:#8ea9ca}
.ipam-stats-v240 strong{font-size:1.45rem;margin-top:3px;color:#f3f7fc}

.ipam-filter-card-v240{margin-bottom:14px}
.ipam-filter-v240{
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto auto;
  gap:10px;
  align-items:end;
}
.ipam-filter-v240 label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#9db3cf;
  font-size:.78rem;
  font-weight:700;
}
.ipam-filter-v240 input,
.ipam-filter-v240 select{
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  border:1px solid #2a4163;
  border-radius:8px;
  background:#091526;
  color:#edf4fc;
  padding:7px 9px;
}

.ipam-vlan-grid-v240{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.ipam-vlan-card-v240{min-width:0}
.ipam-vlan-title-v240{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.ipam-vlan-title-v240 > div{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.ipam-vlan-title-v240 strong{color:#eef5ff}
.ipam-vlan-title-v240 > span{color:#89a6c6;font-size:.78rem}

.ipam-vlan-meta-v240{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.ipam-vlan-meta-v240 > div{
  min-width:0;
  padding:8px 9px;
  border:1px solid #243d59;
  border-radius:8px;
  background:#091727;
}
.ipam-vlan-meta-v240 small{
  display:block;
  color:#7794b5;
  font-size:.66rem;
  margin-bottom:2px;
}
.ipam-vlan-meta-v240 strong{
  display:block;
  color:#e4eef9;
  font-size:.8rem;
  overflow-wrap:anywhere;
}
.warn-text-v240{color:#efbd65!important}

.ipam-util-v240{margin-top:10px}
.ipam-util-v240 > div:first-child{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.72rem;
  color:#8da7c5;
  margin-bottom:5px;
}
.ipam-util-bar-v240{
  height:6px;
  overflow:hidden;
  border:1px solid #283d57;
  border-radius:999px;
  background:#081422;
}
.ipam-util-bar-v240 i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#61d9ba,#6c9eff);
}
.ipam-subnet-warning-v240{
  margin-top:10px;
  padding:8px 9px;
  border:1px solid #795b2a;
  border-radius:8px;
  background:#221b11;
  color:#e6ba67;
  font-size:.74rem;
}

.ipam-duplicates-v240{margin-bottom:14px}
.ipam-duplicate-row-v240{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  margin-top:7px;
  border:1px solid #73582b;
  border-radius:8px;
  background:#1d1a16;
}
.ipam-duplicate-row-v240 code{color:#f2c76d}
.ipam-duplicate-row-v240 span{color:#b9c8d9;font-size:.8rem}

.ipam-table-v240 td a{
  color:#dcecff;
  text-decoration:none;
}
.ipam-status-v240{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 7px;
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap;
}
.ipam-status-v240.ok{
  border:1px solid #2c725f;
  background:#0f2b24;
  color:#73ddb8;
}
.ipam-status-v240.warn{
  border:1px solid #766026;
  background:#262013;
  color:#e7bd62;
}
.ipam-status-v240.bad{
  border:1px solid #83404a;
  background:#2c1519;
  color:#ef8492;
}
.ipam-status-v240.muted{
  border:1px solid #40536a;
  background:#131f2e;
  color:#91a6bf;
}

@media(max-width:1200px){
  .ipam-stats-v240{grid-template-columns:repeat(3,1fr)}
  .ipam-vlan-grid-v240{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .ipam-filter-v240{grid-template-columns:1fr}
  .ipam-vlan-grid-v240{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ipam-stats-v240{grid-template-columns:repeat(2,1fr)}
}


/* OpenInfra v0.26.0 */
.ipam-vlan-source-v260{
  display:block;
  margin-top:4px;
  color:#8ea7c7;
  font-size:.66rem;
}
.ipam-status-v240.inferred{
  border:1px solid #5265a6;
  background:#181d3a;
  color:#b1baff;
}


/* OpenInfra v0.27.0 - IPAM Subnetzdetail */
.ipam-vlan-open-v270{
  display:inline-flex;
  margin:10px 0 2px;
  padding:7px 11px;
  border:1px solid #2f4664;
  border-radius:8px;
  background:#101b28;
  color:#b9d5f5;
  text-decoration:none;
  font-size:.76rem;
  font-weight:700;
}
.ipam-vlan-open-v270:hover{border-color:#5379a7;background:#142437}
.ipam-message-v270{margin-bottom:16px}
.ipam-message-v270 p{margin:7px 0 0;color:#9fb0c3}
.ipam-subnet-stats-v270{margin-bottom:16px}
.ipam-address-toolbar-v270{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px
}
.ipam-address-filters-v270{display:flex;gap:6px;flex-wrap:wrap}
.ipam-address-filters-v270 a{
  padding:7px 10px;border:1px solid #29394d;border-radius:8px;
  color:#aab8c8;text-decoration:none;font-size:.75rem
}
.ipam-address-filters-v270 a:hover,
.ipam-address-filters-v270 a.active{
  color:#eaf4ff;border-color:#4d78a6;background:#14283d
}
.ipam-address-search-v270{display:flex;gap:7px}
.ipam-address-search-v270 input{min-width:260px}
.ipam-status-v240.gateway-v270{
  border:1px solid #6a5a2e;background:#29230f;color:#e9cf75
}
.ipam-duplicate-address-v270{background:rgba(125,45,45,.10)}
@media(max-width:900px){
  .ipam-address-search-v270{width:100%}
  .ipam-address-search-v270 input{min-width:0;flex:1}
}

/* OpenInfra v0.27.1 */
.ipam-subnet-head-v271{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.ipam-subnet-head-v271 h1{margin-bottom:4px}.ipam-subnet-head-v271 p{margin-bottom:0}
.ipam-back-v271{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:36px;padding:0 13px;border:1px solid #2d4969;border-radius:9px;background:#102033;color:#9fc9f3;text-decoration:none;font-size:.78rem;font-weight:700;white-space:nowrap}
.ipam-back-v271:hover{background:#152b43;border-color:#4c78a7;color:#d9ecff}
.ipam-subnet-stats-v270{gap:10px;margin-bottom:14px}.ipam-subnet-stats-v270>div{min-height:68px;padding:12px 14px}
.ipam-address-toolbar-v270{padding:2px 0 12px;margin-bottom:0;border-bottom:1px solid #263b54}
.ipam-address-filters-v270 a{min-height:34px;display:inline-flex;align-items:center;padding:0 11px}
.ipam-address-search-v271{display:flex;align-items:center;gap:8px;margin-left:auto}
.ipam-address-searchbox-v271{position:relative;display:flex;align-items:center;width:min(390px,34vw);min-width:290px;height:40px;border:1px solid #314a68;border-radius:9px;background:#091727;transition:.15s}
.ipam-address-searchbox-v271:focus-within{border-color:#5b9bd5;background:#0b1b2d;box-shadow:0 0 0 3px rgba(91,155,213,.10)}
.ipam-search-icon-v271{display:flex;align-items:center;justify-content:center;width:38px;flex:0 0 38px;color:#6f91b4;font-size:1.15rem}
.ipam-address-searchbox-v271 input{width:100%;height:100%;min-width:0;padding:0 36px 0 0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:#e9f3ff;font:inherit;font-size:.82rem}
.ipam-address-searchbox-v271 input::placeholder{color:#6f839b;opacity:1}.ipam-address-searchbox-v271 input::-webkit-search-cancel-button{display:none}
.ipam-search-clear-v271{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;color:#7895b4;text-decoration:none;font-size:1.1rem}
.ipam-search-clear-v271:hover{background:#172b41;color:#d9ecff}
.ipam-search-button-v271{height:40px;padding:0 17px;border:0;border-radius:9px;background:linear-gradient(100deg,#61d8c2,#64a9f5);color:#06121f;font-weight:800;cursor:pointer}
.ipam-search-button-v271:hover{filter:brightness(1.06)}
.ipam-address-table-v270 thead th{position:sticky;top:0;z-index:2;background:#102039}
.ipam-address-table-v270 tbody td{padding-top:9px;padding-bottom:9px}
@media(max-width:900px){.ipam-subnet-head-v271{align-items:flex-start;flex-direction:column}.ipam-address-search-v271{width:100%;margin-left:0}.ipam-address-searchbox-v271{width:100%;min-width:0}}


/* ==========================================================
   OpenInfra v0.28.0 - Geräteübersicht
   ========================================================== */
.devices-v280{
  max-width:1550px;
  margin:0 auto;
  padding:28px 24px 60px;
}
.devices-head-v280{margin-bottom:18px}
.devices-head-v280 h1{margin:4px 0 6px;font-size:2rem}
.devices-head-v280 p{margin:0;color:#8faaca}

.devices-stats-v280{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.devices-stats-v280>div{
  background:#13233b;
  border:1px solid #29425f;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
}
.devices-stats-v280>div.warn{border-color:#80672c}
.devices-stats-v280 small{color:#8ea9ca}
.devices-stats-v280 strong{font-size:1.45rem;margin-top:3px;color:#f3f7fc}

.devices-filter-card-v280{margin-bottom:14px}
.devices-filter-v280{
  display:grid;
  grid-template-columns:2.1fr repeat(5,minmax(130px,1fr)) auto auto;
  gap:9px;
  align-items:end;
}
.devices-filter-v280 label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#9db3cf;
  font-size:.75rem;
  font-weight:700;
}
.devices-filter-v280 input,
.devices-filter-v280 select{
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  border:1px solid #2a4163;
  border-radius:8px;
  background:#091526;
  color:#edf4fc;
  padding:7px 9px;
}
.devices-filter-v280 input:focus,
.devices-filter-v280 select:focus{
  border-color:#558ac2;
  outline:none;
  box-shadow:0 0 0 3px rgba(85,138,194,.10);
}

.devices-table-v280 td{
  vertical-align:middle;
}
.devices-table-v280 td a{
  color:#dcecff;
  text-decoration:none;
}
.devices-table-v280 td a:hover{
  color:#78baff;
}
.devices-table-v280 td strong{
  display:block;
  font-size:.84rem;
}
.devices-table-v280 td small{
  display:block;
  margin-top:3px;
  color:#7895b6;
  font-size:.69rem;
}
.devices-table-v280 thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#102039;
}

@media(max-width:1300px){
  .devices-filter-v280{grid-template-columns:repeat(3,1fr)}
  .devices-search-v280{grid-column:span 2}
  .devices-stats-v280{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:750px){
  .devices-filter-v280{grid-template-columns:1fr}
  .devices-search-v280{grid-column:auto}
  .devices-stats-v280{grid-template-columns:repeat(2,1fr)}
}


/* ==========================================================
   OpenInfra v0.29.0 - Topologie & Dokumentationsqualität
   ========================================================== */
.topology-v290{max-width:1550px;margin:0 auto;padding:28px 24px 60px}
.topology-head-v290{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}
.topology-head-v290 h1{margin:4px 0 6px;font-size:2rem}.topology-head-v290 p{margin:0;color:#8faaca}
.quality-badge-v290{width:220px;padding:12px 14px;border:1px solid #315071;border-radius:12px;background:#13233b}
.quality-badge-v290 small{display:block;color:#8ea9ca}.quality-badge-v290 strong{display:block;font-size:1.55rem;margin:2px 0 7px}
.quality-badge-v290>div{height:6px;border-radius:999px;background:#081422;overflow:hidden}.quality-badge-v290 i{display:block;height:100%;background:linear-gradient(90deg,#62d7be,#68a3f5)}

.topology-stats-v290{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.topology-stats-v290>div{padding:12px 14px;border:1px solid #29425f;border-radius:12px;background:#13233b;display:flex;flex-direction:column}
.topology-stats-v290>div.warn{border-color:#80672c}.topology-stats-v290 small{color:#8ea9ca}.topology-stats-v290 strong{font-size:1.45rem;margin-top:3px}

.topology-filter-v290{margin-bottom:14px}.topology-filter-v290 form{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end}
.topology-filter-v290 label{display:flex;flex-direction:column;gap:5px;color:#9db3cf;font-size:.75rem;font-weight:700}
.topology-filter-v290 select{min-height:38px;border:1px solid #2a4163;border-radius:8px;background:#091526;color:#edf4fc;padding:7px 9px}

.topology-layout-v290{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:14px;align-items:start}
.topology-tree-v290{display:flex;flex-direction:column;gap:14px}
.topology-site-v290{padding:0!important;overflow:hidden}
.topology-site-head-v290{display:flex;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid #29425f;background:#13243b}
.topology-site-head-v290 small{color:#65d6bd;font-size:.68rem;font-weight:800;letter-spacing:.08em}.topology-site-head-v290 h2{margin:3px 0 0}.topology-site-head-v290>span{color:#7f9bbb;font-size:.75rem}

.topology-racks-v290{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
.topology-rack-v290{border:1px solid #29425f;border-radius:10px;background:#0b1727;overflow:hidden}
.topology-rack-head-v290{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:10px 12px;background:#102039;text-decoration:none;color:#e9f3ff;border-bottom:1px solid #29425f}
.topology-rack-head-v290 span{font-size:.63rem;color:#6bd8c0;font-weight:900}.topology-rack-head-v290 small{color:#7898ba}
.topology-device-list-v290{display:flex;flex-direction:column}
.topology-device-v290{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;border-bottom:1px solid #1f334b;text-decoration:none;color:#e0ecf8}
.topology-device-v290:last-child{border-bottom:0}.topology-device-v290:hover{background:#102035}
.topology-device-v290 strong{display:block;font-size:.78rem}.topology-device-v290 small{display:block;margin-top:2px;color:#7592b1;font-size:.65rem}
.topology-device-meta-v290{display:flex;align-items:center;gap:6px}.topology-device-meta-v290 code{font-size:.68rem;color:#8fc3fb}
.topology-dot-v290{width:8px;height:8px;border-radius:50%}.topology-dot-v290.connected{background:#55d7b3;box-shadow:0 0 0 3px rgba(85,215,179,.10)}.topology-dot-v290.missing{background:#d19d3c}

.topology-rooms-v290{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 14px 14px}
.topology-room-v290{padding:10px 11px;border:1px solid #29425f;border-radius:9px;background:#0b1727;color:#e4eef9;text-decoration:none}
.topology-room-v290:hover{border-color:#4673a0;background:#102035}.topology-room-v290 span{font-size:.62rem;color:#68d7bf;font-weight:900}.topology-room-v290 strong{display:block;margin-top:2px}.topology-room-v290 small{color:#7895b6;font-size:.67rem}
.topology-room-devices-v290{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.topology-room-devices-v290 span{padding:3px 6px;border-radius:999px;background:#14283d;color:#98b9dc;font-size:.62rem;font-weight:700}

.quality-panel-v290{position:sticky;top:76px;padding:0!important;overflow:hidden}
.quality-panel-head-v290{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;border-bottom:1px solid #29425f;background:#13243b}
.quality-panel-head-v290 small{font-size:.64rem;color:#67d5be;font-weight:900;letter-spacing:.06em}.quality-panel-head-v290 h2{margin:3px 0 0}.quality-panel-head-v290>span{display:flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:999px;background:#172b43;color:#9bbce0;font-weight:800}
.quality-list-v290{max-height:70vh;overflow:auto}.quality-item-v290{display:grid;grid-template-columns:10px 1fr;gap:9px;padding:10px 12px;border-bottom:1px solid #20344b;color:#e5effa;text-decoration:none}.quality-item-v290:hover{background:#102035}
.quality-mark-v290{width:8px;height:8px;margin-top:5px;border-radius:50%}.quality-item-v290.warn .quality-mark-v290{background:#d3a33f}.quality-item-v290.info .quality-mark-v290{background:#5b93c9}.quality-item-v290.bad .quality-mark-v290{background:#d96170}
.quality-item-v290 strong{display:block;font-size:.74rem}.quality-item-v290 span{display:block;margin-top:2px;font-size:.72rem}.quality-item-v290 small{display:block;margin-top:2px;color:#7895b6;font-size:.64rem}
.quality-empty-v290{padding:22px;text-align:center;color:#7f9bbb}

@media(max-width:1200px){.topology-layout-v290{grid-template-columns:1fr}.quality-panel-v290{position:static}.topology-racks-v290{grid-template-columns:1fr}.topology-rooms-v290{grid-template-columns:repeat(2,1fr)}.topology-stats-v290{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.topology-head-v290{align-items:flex-start;flex-direction:column}.quality-badge-v290{width:100%;box-sizing:border-box}.topology-filter-v290 form{grid-template-columns:1fr}.topology-rooms-v290{grid-template-columns:1fr}.topology-stats-v290{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================
   OpenInfra v0.30.0 - Qualitätslogik & gruppierte Hinweise
   ========================================================== */
.topology-v300 .quality-badge-v290{min-width:220px}
.quality-list-v300{max-height:70vh;overflow:auto}
.quality-group-v300{border-bottom:1px solid #20344b;background:#0d1a2b}
.quality-group-v300>summary{display:grid;grid-template-columns:10px 1fr auto;gap:9px;align-items:center;padding:11px 12px;cursor:pointer;list-style:none;color:#e5effa}
.quality-group-v300>summary::-webkit-details-marker{display:none}
.quality-group-v300>summary:hover{background:#102035}
.quality-group-v300>summary strong{display:block;font-size:.75rem}
.quality-group-v300>summary small{display:block;margin-top:2px;color:#7895b6;font-size:.64rem}
.quality-group-v300>summary b{display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 7px;border-radius:999px;background:#172b43;color:#9bbce0;font-size:.68rem}
.quality-group-v300.warn>summary .quality-mark-v290{background:#d3a33f}
.quality-group-v300.info>summary .quality-mark-v290{background:#5b93c9}
.quality-group-v300.bad>summary .quality-mark-v290{background:#d96170}
.quality-group-v300[open]>summary{background:#102035;border-bottom:1px solid #20344b}
.quality-group-items-v300{padding:5px 8px 8px;background:#091522}
.quality-group-items-v300 a{display:flex;justify-content:space-between;gap:10px;padding:7px 8px;border-radius:7px;color:#dceafa;text-decoration:none;font-size:.69rem}
.quality-group-items-v300 a:hover{background:#12263a}
.quality-group-items-v300 a small{color:#7895b6;white-space:nowrap}


/* ==========================================================
   OpenInfra v0.31.0 - System, Backup/Restore, Fehlerseiten
   ========================================================== */
.system-v310{max-width:1350px;margin:0 auto;padding:28px 24px 60px}
.system-head-v310{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.system-head-v310 h1{margin:4px 0 6px;font-size:2rem}.system-head-v310 p{margin:0;color:#8faaca}
.system-version-v310{min-width:150px;padding:12px 14px;border:1px solid #315071;border-radius:12px;background:#13233b}
.system-version-v310 small{display:block;color:#69d6bf;font-size:.66rem;font-weight:900;letter-spacing:.08em}
.system-version-v310 strong{display:block;font-size:1.25rem;margin-top:2px}.system-version-v310 span{display:block;color:#7895b6;font-size:.7rem;margin-top:2px}

.system-success-v310{display:flex;gap:10px;align-items:center;margin-bottom:14px;padding:11px 14px;border:1px solid #367864;border-radius:10px;background:#102a24;color:#7de0bd}
.system-success-v310 span{color:#a9cfc1;font-size:.78rem}

.system-counts-v310{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;margin-bottom:14px}
.system-counts-v310>div{padding:11px 12px;border:1px solid #29425f;border-radius:10px;background:#13233b}
.system-counts-v310 small{display:block;color:#88a4c3;font-size:.68rem}.system-counts-v310 strong{display:block;margin-top:2px;font-size:1.25rem}

.system-grid-v310{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.system-card-v310{display:flex;flex-direction:column;gap:13px;min-height:320px}
.system-card-v310 h2{margin:3px 0 6px}.system-card-v310 p{margin:0;color:#91a9c4;line-height:1.55}
.system-card-icon-v310{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #355879;border-radius:11px;background:#10243a;color:#6fd9c1;font-size:1.25rem;font-weight:900}
.system-primary-v310,.system-restore-form-v310 button{display:flex;align-items:center;justify-content:center;min-height:42px;border:0;border-radius:9px;background:linear-gradient(100deg,#61d8c2,#64a9f5);color:#06121f;text-decoration:none;font-weight:850;cursor:pointer}
.system-note-v310{color:#6f8aa8;font-size:.69rem}

.system-restore-form-v310{display:grid;gap:10px}
.system-restore-form-v310 label{display:flex;flex-direction:column;gap:5px;color:#9db3cf;font-size:.73rem;font-weight:700}
.system-restore-form-v310 input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 10px;border:1px solid #2d4665;border-radius:8px;background:#091526;color:#edf4fc}
.system-warning-v310{display:flex;flex-direction:column;gap:2px;padding:10px 11px;border:1px solid #765d2c;border-radius:8px;background:#231e13}
.system-warning-v310 strong{color:#edbd62;font-size:.74rem}.system-warning-v310 span{color:#c6ad7e;font-size:.69rem}

.system-info-v310{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.system-info-v310>div{padding:11px;border:1px solid #233b57;border-radius:9px;background:#0b1828}
.system-info-v310 strong{display:block;font-size:.76rem}.system-info-v310 span{display:block;margin-top:4px;color:#7e9ab9;font-size:.7rem;line-height:1.45}

.error-page-v310{max-width:680px;margin:10vh auto 0;padding:34px;border:1px solid #2b4666;border-radius:16px;background:#122139;text-align:center}
.error-code-v310{font-size:4.5rem;font-weight:900;line-height:1;color:#2f5377;letter-spacing:-.05em}
.error-page-v310 h1{margin:8px 0}.error-page-v310 p{max-width:520px;margin:0 auto;color:#91a9c4;line-height:1.55}
.error-actions-v310{display:flex;justify-content:center;gap:8px;margin-top:20px}
.error-actions-v310 a{padding:9px 13px;border:1px solid #345779;border-radius:8px;background:#10243a;color:#b9d8f7;text-decoration:none;font-weight:750;font-size:.76rem}
.error-page-v310>small{display:block;margin-top:17px;color:#617d9d;font-size:.68rem}

@media(max-width:1050px){
  .system-counts-v310{grid-template-columns:repeat(4,1fr)}
  .system-grid-v310{grid-template-columns:1fr}
}
@media(max-width:700px){
  .system-head-v310{align-items:flex-start;flex-direction:column}
  .system-counts-v310{grid-template-columns:repeat(2,1fr)}
  .system-info-v310{grid-template-columns:1fr}
}


/* OpenInfra v1.0.0 */
.system-health-v100{margin-bottom:14px}
.system-health-title-v100{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.system-health-title-v100 h2{margin:3px 0 0}
.system-health-ok-v100{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 10px;border:1px solid #2f7a63;border-radius:999px;background:#102c24;color:#73ddb8;font-size:.72rem;font-weight:900}
.system-health-links-v100{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.system-health-links-v100 a{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border:1px solid #29425f;border-radius:9px;background:#0b1828;color:#e8f2fc;text-decoration:none}
.system-health-links-v100 a:hover{border-color:#4b759e;background:#102035}
.system-health-links-v100 strong{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.78rem}
.system-health-links-v100 span{color:#7f9bbb;font-size:.68rem}
@media(max-width:650px){.system-health-links-v100{grid-template-columns:1fr}}


/* ==========================================================
   OpenInfra v1.1.0 - WAN & VPN
   ========================================================== */
.wan-v110{max-width:1500px;margin:0 auto;padding:28px 24px 60px}
.wan-head-v110{margin-bottom:18px}.wan-head-v110 h1{margin:4px 0 6px;font-size:2rem}.wan-head-v110 p{margin:0;color:#8faaca}
.wan-stats-v110{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.wan-stats-v110>div{padding:12px 14px;border:1px solid #29425f;border-radius:12px;background:#13233b}
.wan-stats-v110>div.warn{border-color:#7c4b31}.wan-stats-v110 small{display:block;color:#8ea9ca}.wan-stats-v110 strong{display:block;margin-top:2px;font-size:1.4rem}

.wan-filter-v110{margin-bottom:14px}.wan-filter-v110 form{display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:9px;align-items:end}
.wan-filter-v110 label,.wan-form-v110 label{display:flex;flex-direction:column;gap:5px;color:#9db3cf;font-size:.72rem;font-weight:750}
.wan-filter-v110 select,.wan-form-v110 input,.wan-form-v110 select,.wan-form-v110 textarea{width:100%;box-sizing:border-box;min-height:39px;padding:8px 9px;border:1px solid #2b4463;border-radius:8px;background:#091526;color:#edf4fc}
.wan-form-v110 textarea{min-height:75px;resize:vertical}
.wan-filter-v110 select:focus,.wan-form-v110 input:focus,.wan-form-v110 select:focus,.wan-form-v110 textarea:focus{outline:none;border-color:#5387bc;box-shadow:0 0 0 3px rgba(83,135,188,.10)}

.wan-layout-v110{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:14px;align-items:start}
.wan-list-v110{display:flex;flex-direction:column;gap:12px}
.wan-card-v110{overflow:hidden}.wan-card-head-v110{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wan-card-head-v110 h2{margin:4px 0 0}.wan-type-v110{color:#62d8be;font-size:.67rem;font-weight:900;letter-spacing:.06em}
.wan-status-v110{padding:4px 8px;border-radius:999px;font-size:.66rem;font-weight:900;border:1px solid #40546d;background:#101c2b;color:#9cb1c8}
.wan-status-v110.active{border-color:#2f795f;background:#102a23;color:#70ddb8}.wan-status-v110.planned{border-color:#516393;background:#171d36;color:#abb8ef}.wan-status-v110.problem{border-color:#87414b;background:#2d171b;color:#ef8793}.wan-status-v110.inactive{opacity:.7}

.wan-path-v110{display:grid;grid-template-columns:1fr 180px 1fr;align-items:center;gap:12px;margin:16px 0;padding:14px;border:1px solid #29425f;border-radius:10px;background:#091727}
.wan-endpoint-v110{min-width:0}.wan-endpoint-v110.target{text-align:right}.wan-endpoint-v110 small{display:block;color:#6886a5;font-size:.62rem;font-weight:900}.wan-endpoint-v110 strong{display:block;margin-top:3px;font-size:.95rem}.wan-endpoint-v110 span,.wan-endpoint-v110 code,.wan-endpoint-v110 p{display:block;margin:3px 0 0;color:#83a3c4;font-size:.7rem;overflow-wrap:anywhere}
.wan-tunnel-v110{display:flex;align-items:center;gap:7px;color:#65d7bf}.wan-tunnel-v110 span{height:1px;background:#3d7591;flex:1}.wan-tunnel-v110 b{font-size:.62rem;letter-spacing:.08em}

.wan-meta-v110{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.wan-meta-v110>div{padding:8px 9px;border:1px solid #243c58;border-radius:8px;background:#0a1727}.wan-meta-v110 small{display:block;color:#6f8dab;font-size:.62rem}.wan-meta-v110 strong{display:block;margin-top:3px;font-size:.73rem;overflow-wrap:anywhere}
.wan-notes-v110{margin-top:9px;padding:9px 10px;border-left:3px solid #315777;background:#0b1828;color:#91a9c4;font-size:.72rem;line-height:1.5}
.wan-edit-v110{margin-top:12px;border-top:1px solid #29425f;padding-top:10px}.wan-edit-v110 summary{cursor:pointer;color:#91bde8;font-size:.72rem;font-weight:800}
.wan-form-v110{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.wan-form-v110 .wide{grid-column:1/-1}.wan-form-v110 button{min-height:42px;border:0;border-radius:8px;background:linear-gradient(100deg,#61d8c2,#64a9f5);color:#06121f;font-weight:850;cursor:pointer}
.wan-delete-v110{margin-top:10px}.wan-delete-v110 button{width:100%;min-height:38px;border:1px solid #7b3541;border-radius:8px;background:#35161c;color:#ef9aa4;font-weight:800;cursor:pointer}
.wan-create-v110{position:sticky;top:76px}.wan-create-v110 h2{margin:4px 0 5px}.wan-create-v110>p{margin:0;color:#859fbb;font-size:.73rem;line-height:1.45}
.wan-empty-v110{padding:24px;text-align:center;color:#7f9bbb}

.topology-wan-v110{margin-bottom:14px}
.topology-wan-head-v110{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.topology-wan-head-v110 h2{margin:3px 0 0}.topology-wan-head-v110>a{padding:6px 9px;border:1px solid #31506e;border-radius:7px;color:#9cc7ee;text-decoration:none;font-size:.68rem;font-weight:800}
.topology-wan-grid-v110{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.topology-wan-link-v110{display:grid;grid-template-columns:1fr 160px 1fr;grid-template-rows:auto auto;align-items:center;gap:6px 10px;padding:11px;border:1px solid #29425f;border-radius:9px;background:#091727;color:#e4eef9;text-decoration:none}
.topology-wan-link-v110>strong:last-of-type{text-align:right}.topology-wan-link-v110>small{grid-column:1/-1;text-align:center;color:#7897b8;font-size:.63rem}.topology-wan-link-v110.problem{border-color:#733b45}
.topology-wan-line-v110{display:flex;align-items:center;gap:5px;color:#66d8c0}.topology-wan-line-v110 i{height:1px;flex:1;background:#3e748e}.topology-wan-line-v110 b{font-size:.58rem;text-align:center}

@media(max-width:1100px){.wan-layout-v110{grid-template-columns:1fr}.wan-create-v110{position:static}.topology-wan-grid-v110{grid-template-columns:1fr}}
@media(max-width:750px){.wan-stats-v110{grid-template-columns:repeat(2,1fr)}.wan-filter-v110 form{grid-template-columns:1fr}.wan-path-v110{grid-template-columns:1fr}.wan-endpoint-v110.target{text-align:left}.wan-tunnel-v110{padding:6px 0}.wan-meta-v110{grid-template-columns:1fr}.wan-form-v110{grid-template-columns:1fr}.wan-form-v110 .wide{grid-column:auto}.topology-wan-link-v110{grid-template-columns:1fr}.topology-wan-link-v110>strong:last-of-type{text-align:left}.topology-wan-link-v110>small{grid-column:auto;text-align:left}}

.field-help{display:block;margin:3px 0 7px;color:#7895b8;font-size:.72rem;font-weight:500;line-height:1.35}


/* OpenInfra v1.2.1 - WAN/VPN UI Cleanup */
.field-help{display:none!important}

.field-tip-v121{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:5px;
  border:1px solid #365a7c;
  border-radius:50%;
  background:#102238;
  color:#8fc5f3;
  font-size:.62rem;
  font-weight:900;
  line-height:1;
  cursor:help;
  vertical-align:middle;
  outline:none;
}
.field-tip-v121:hover,.field-tip-v121:focus{
  border-color:#68a8df;
  background:#16304b;
  color:#d9efff;
}
.field-tip-v121::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(3px);
  z-index:80;
  width:max-content;
  max-width:280px;
  padding:8px 10px;
  border:1px solid #36597c;
  border-radius:8px;
  background:#081522;
  color:#c8dbef;
  font-size:.68rem;
  font-weight:500;
  line-height:1.4;
  white-space:normal;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.field-tip-v121:hover::after,.field-tip-v121:focus::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.wan-layout-v110{
  grid-template-columns:minmax(0,1fr) 390px;
}
.wan-create-v110{
  padding:14px!important;
}
.wan-create-v110>p{
  margin-bottom:8px;
}
.wan-form-compact-v121{
  gap:7px 8px;
  margin-top:9px;
}
.wan-form-compact-v121 label{
  gap:4px;
  min-width:0;
  font-size:.69rem;
}
.wan-form-compact-v121 input,
.wan-form-compact-v121 select{
  min-height:36px;
  padding:6px 8px;
}
.wan-form-compact-v121 textarea{
  min-height:58px;
  padding:7px 8px;
}
.wan-form-compact-v121 button{
  min-height:39px;
}
.wan-card-v110{
  padding:13px!important;
}
.wan-path-v110{
  margin:12px 0;
  padding:11px;
}
.wan-meta-v110{
  gap:6px;
}
.wan-meta-v110>div{
  padding:7px 8px;
}
header,.topbar,.site-header,.app-header{
  z-index:200;
}

@media(max-width:1100px){
  .wan-layout-v110{grid-template-columns:1fr}
  .wan-create-v110{max-width:none}
}
@media(max-width:750px){
  .wan-form-compact-v121{grid-template-columns:1fr}
  .wan-form-compact-v121 .wide{grid-column:auto}
  .field-tip-v121::after{
    left:auto;
    right:-8px;
    transform:translateY(3px);
    max-width:230px;
  }
  .field-tip-v121:hover::after,.field-tip-v121:focus::after{
    transform:translateY(0);
  }
}


/* ==========================================================
   OpenInfra v1.2.2 - Tooltip direkt hinter Feldtitel
   ========================================================== */

.wan-form-compact-v121 label{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.field-label-v122{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  color:#9db3cf;
  font-size:.69rem;
  font-weight:750;
  line-height:1.2;
}

.field-label-v122 .field-tip-v121{
  flex:0 0 15px;
  width:15px;
  height:15px;
  margin-left:0;
  transform:none;
}

.field-tip-v121{
  margin-left:0 !important;
  vertical-align:baseline;
}

.field-tip-v121::after{
  left:50%;
  bottom:calc(100% + 8px);
}

.wan-filter-v110 label .field-label-v122{
  font-size:.72rem;
}

.wan-create-v110 .field-label-v122{
  color:#9db3cf;
}

@media(max-width:750px){
  .field-label-v122{
    width:auto;
  }
}

.wan-section-title-v123{
  grid-column:1/-1;
  margin:8px 0 0;
  padding:9px 0 5px;
  border-bottom:1px solid rgba(104,154,201,.22);
  color:#63e6c5;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.wan-section-title-v123:first-child{margin-top:0}


/* ==========================================================
   OpenInfra v1.3.0 - WAN/VPN Topologie
   ========================================================== */

.topology-wan-v130{
  margin-bottom:14px;
  padding:0 !important;
  overflow:hidden;
}

.topology-wan-head-v130{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:15px 16px 13px;
  border-bottom:1px solid #29425f;
  background:#13243b;
}

.topology-wan-head-v130 h2{
  margin:3px 0 3px;
}

.topology-wan-head-v130 p{
  margin:0;
  color:#7897b8;
  font-size:.72rem;
}

.topology-wan-head-v130 > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 11px;
  border:1px solid #315574;
  border-radius:8px;
  background:#10243a;
  color:#a9d0f4;
  text-decoration:none;
  font-size:.69rem;
  font-weight:800;
  white-space:nowrap;
}

.topology-wan-stats-v130{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  padding:12px 14px 0;
}

.topology-wan-stats-v130 > div{
  padding:8px 10px;
  border:1px solid #263f5b;
  border-radius:8px;
  background:#0b1828;
}

.topology-wan-stats-v130 > div.warn{
  border-color:#744650;
}

.topology-wan-stats-v130 small{
  display:block;
  color:#718fac;
  font-size:.62rem;
}

.topology-wan-stats-v130 strong{
  display:block;
  margin-top:2px;
  font-size:1rem;
}

.topology-wan-map-v130{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:12px 14px 14px;
}

.topology-wan-connection-v130{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:stretch;
  gap:0 10px;
  padding:11px;
  border:1px solid #2a4563;
  border-radius:11px;
  background:#091727;
}

.topology-wan-connection-v130.problem{
  border-color:#75404a;
}

.topology-wan-connection-v130.planned{
  border-style:dashed;
}

.topology-wan-node-v130{
  min-width:0;
  padding:10px 11px;
  border:1px solid #29435f;
  border-radius:9px;
  background:#0d1c2d;
}

.topology-wan-node-v130.external{
  border-color:#425078;
  background:#111b31;
}

.topology-wan-node-type-v130{
  color:#62d7be;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.09em;
}

.topology-wan-node-v130 strong{
  display:block;
  margin-top:3px;
  color:#edf5fd;
  font-size:.82rem;
  overflow-wrap:anywhere;
}

.topology-wan-node-v130 code{
  display:block;
  margin-top:5px;
  color:#83bcf2;
  font-size:.65rem;
}

.topology-wan-node-v130 small{
  display:block;
  margin-top:4px;
  color:#7694b2;
  font-size:.64rem;
  overflow-wrap:anywhere;
}

.topology-wan-device-v130{
  display:inline-flex;
  margin-top:6px;
  padding:3px 6px;
  border-radius:999px;
  background:#142a3e;
  color:#9fc4e7;
  font-size:.61rem;
  font-weight:700;
}

.topology-wan-linkline-v130{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.topology-wan-status-v130{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 7px;
  border:1px solid #3a526a;
  border-radius:999px;
  background:#101e2e;
  color:#95acc3;
  font-size:.57rem;
  font-weight:900;
}

.topology-wan-status-v130.active{
  border-color:#327860;
  background:#102a23;
  color:#70dcb8;
}

.topology-wan-status-v130.problem{
  border-color:#84414c;
  background:#2c171c;
  color:#ed8793;
}

.topology-wan-status-v130.planned{
  border-color:#53628d;
  color:#b0bced;
}

.topology-wan-wire-v130{
  width:100%;
  display:flex;
  align-items:center;
  gap:6px;
  margin:8px 0 5px;
}

.topology-wan-wire-v130 > i{
  height:2px;
  flex:1;
  border-radius:99px;
  background:#357a92;
}

.topology-wan-wire-v130 > div{
  max-width:110px;
  text-align:center;
}

.topology-wan-wire-v130 strong{
  display:block;
  color:#66d8c0;
  font-size:.62rem;
  line-height:1.2;
}

.topology-wan-wire-v130 small{
  display:block;
  margin-top:2px;
  color:#7ca6c4;
  font-size:.58rem;
}

.topology-wan-provider-v130{
  color:#6585a3;
  font-size:.58rem;
  text-align:center;
}

.topology-wan-actions-v130{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #20374f;
}

.topology-wan-actions-v130 span{
  color:#7897b6;
  font-size:.64rem;
}

.topology-wan-actions-v130 a{
  color:#8fc9f5;
  text-decoration:none;
  font-size:.64rem;
  font-weight:800;
}

.wan-meta-v130{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

@media(max-width:1350px){
  .topology-wan-map-v130{
    grid-template-columns:1fr;
  }
}

@media(max-width:850px){
  .topology-wan-stats-v130{
    grid-template-columns:repeat(2,1fr);
  }

  .topology-wan-connection-v130{
    grid-template-columns:1fr;
    gap:8px;
  }

  .topology-wan-linkline-v130{
    padding:4px 0;
  }

  .topology-wan-actions-v130{
    grid-column:auto;
  }

  .wan-meta-v130{
    grid-template-columns:1fr 1fr;
  }
}

/* OpenInfra v1.4.0 - VLANs & Subnetze */
.vlans-v140{max-width:1220px;margin:0 auto}
.vlans-head-v140{margin-bottom:14px}
.vlans-head-v140 h1{margin:3px 0}
.vlan-stats-v140{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.vlan-stats-v140>div{padding:11px 13px;border:1px solid #29435f;border-radius:10px;background:#142640}
.vlan-stats-v140 small{display:block;color:#7fa0c0;font-size:.68rem}
.vlan-stats-v140 strong{display:block;margin-top:2px;font-size:1.18rem}
.vlan-filter-v140{padding:11px 13px;margin-bottom:12px}
.vlan-filter-v140 form{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:9px;align-items:end}
.vlan-filter-v140 label{font-size:.68rem;font-weight:800;color:#8eacd0}
.vlan-filter-v140 select{width:100%;margin-top:5px}
.vlan-filter-v140 a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border:1px solid #315574;border-radius:8px;text-decoration:none;color:#9fc6e8;font-weight:800;font-size:.7rem}
.vlan-create-v140{padding:14px;margin-bottom:12px}
.vlan-form-v140{display:grid;grid-template-columns:120px 1.1fr 1fr 1.2fr 1fr;gap:9px;align-items:end}
.vlan-form-v140 label{font-size:.68rem;font-weight:800;color:#8eacd0}
.vlan-form-v140 input,.vlan-form-v140 select{width:100%;margin-top:5px}
.vlan-form-v140 .wide{grid-column:1/-2}
.vlan-grid-v140{display:grid;gap:9px}
.vlan-card-v140{padding:0!important;overflow:hidden}
.vlan-card-v140>summary{display:grid;grid-template-columns:100px minmax(220px,1.5fr) minmax(180px,1fr) 90px 70px;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.vlan-card-v140>summary::-webkit-details-marker{display:none}
.vlan-badge-v140{display:inline-flex;width:max-content;padding:4px 8px;border-radius:999px;background:#281d50;border:1px solid #6651a0;color:#c7b9ff;font-size:.68rem;font-weight:900}
.vlan-summary-v140 strong,.vlan-site-v140 strong{display:block}
.vlan-summary-v140 small,.vlan-site-v140 small{display:block;color:#7594b3;font-size:.63rem;margin-top:2px}
.vlan-site-v140>small{color:#5fd9bd;font-weight:900;letter-spacing:.06em}
.vlan-count-v140{color:#9ab8d4;font-size:.68rem;text-align:right}
.vlan-ipam-v140{display:flex;align-items:center;justify-content:center;padding:6px 8px;border:1px solid #315574;border-radius:7px;color:#8fd0f5;text-decoration:none;font-size:.65rem;font-weight:900}
.vlan-card-body-v140{padding:12px 14px;border-top:1px solid #29435f}
@media(max-width:900px){.vlan-stats-v140{grid-template-columns:1fr 1fr}.vlan-form-v140{grid-template-columns:1fr 1fr}.vlan-form-v140 .wide{grid-column:1/-1}.vlan-card-v140>summary{grid-template-columns:1fr}.vlan-count-v140{text-align:left}.vlan-filter-v140 form{grid-template-columns:1fr}}
\n\n/* OpenInfra v1.5.0 - automatischer logischer Netzplan */\n.network-map-v150{margin-top:16px;padding:0;overflow:hidden}.network-map-head-v150{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:18px 20px;border-bottom:1px solid var(--line,#294563)}.network-map-head-v150 h2{margin:2px 0 4px}.network-map-head-v150 p{margin:0;color:var(--muted,#83a7ca)}.network-map-head-v150>span{font-size:12px;border:1px solid #31577a;border-radius:8px;padding:5px 8px;color:#78cfff}.network-map-sites-v150{padding:14px;display:grid;gap:14px}.network-map-site-v150{background:#0c1c2d;border:1px solid #284968;border-radius:12px;overflow:hidden}.network-map-site-title-v150{padding:12px 14px;border-bottom:1px solid #24415d;display:flex;align-items:baseline;gap:10px}.network-map-site-title-v150 small,.network-map-node-v150>small{font-size:10px;font-weight:800;letter-spacing:.08em;color:#55e5c4}.network-map-site-title-v150 strong{font-size:17px}.network-map-flow-v150{padding:14px;display:grid;grid-template-columns:minmax(150px,1fr) 28px minmax(150px,1fr) 28px minmax(150px,1fr) 28px minmax(190px,1.25fr);align-items:stretch;gap:6px}.network-map-node-v150{min-height:110px;border:1px solid #315574;background:#091827;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:5px}.network-map-node-v150 strong{font-size:14px}.network-map-node-v150 span,.network-map-node-v150 a{font-size:11px;color:#8eb4d5;text-decoration:none}.network-map-node-v150 a:hover{color:#66e7d1}.network-map-node-v150 code{display:block;margin-top:2px;color:#66c8ff}.network-map-node-v150.vlans a{display:flex;flex-direction:column;border-top:1px solid #17334b;padding-top:5px}.network-map-node-v150.vlans a:first-of-type{border-top:0}.network-map-node-v150.vlans b{color:#d7e9fa}.network-map-arrow-v150{align-self:center;text-align:center;color:#55e5c4;font-style:normal;font-size:20px}@media(max-width:1100px){.network-map-flow-v150{grid-template-columns:1fr}.network-map-arrow-v150{transform:rotate(90deg);height:20px}.network-map-node-v150{min-height:0}}\n
/* OpenInfra v1.6.0 - Netzwerkrollen */
.network-role-v160{
  display:inline-flex !important;
  width:max-content;
  margin-top:4px;
  padding:2px 6px;
  border:1px solid #315a72;
  border-radius:999px;
  background:#0e2735;
  color:#67d9bf !important;
  font-size:.61rem !important;
  font-weight:800;
}

/* OpenInfra v1.7.0 - Gerätebeziehungen / Uplinks */
.device-relations-v170 .card-head{align-items:flex-start}
.device-relations-list-v170{display:grid;gap:7px;margin-top:10px}
.device-relation-row-v170{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 10px;border:1px solid #29435f;border-radius:8px;background:#0b1928
}
.device-relation-row-v170 small{display:block;color:#62d9bd;font-size:.61rem;font-weight:900;text-transform:uppercase}
.device-relation-row-v170 strong{display:block;margin-top:2px}
.device-relation-row-v170 strong a{color:#d9edff;text-decoration:none}
.device-relation-row-v170 span{display:block;margin-top:2px;color:#7897b5;font-size:.64rem}
.device-relation-add-v170{margin-top:10px;padding-top:9px;border-top:1px solid #29435f}
.device-relation-add-v170>summary{cursor:pointer;color:#8fc8f2;font-weight:800;font-size:.72rem}
.network-relations-v170{
  margin-top:9px;padding-top:9px;border-top:1px solid #25425c
}
.network-relations-title-v170{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px
}
.network-relations-title-v170 small{color:#62d9bd;font-size:.59rem;font-weight:900;letter-spacing:.07em}
.network-relations-title-v170 strong{color:#8faac5;font-size:.63rem}
.network-relations-list-v170{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.network-relation-v170{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;
  gap:5px;padding:6px 7px;border:1px solid #223c54;border-radius:7px;background:#091827;font-size:.61rem
}
.network-relation-v170 a{color:#a6cff0;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.network-relation-v170>span{color:#57d4bb}
.network-relation-v170 b{
  padding:2px 5px;border-radius:999px;background:#122c37;color:#64d7bd;font-size:.56rem
}
.network-relation-v170 small{grid-column:1/-1;color:#6687a5}
.network-relation-more-v170{padding:5px 7px;color:#7896b2;font-size:.61rem}
@media(max-width:850px){
  .network-relations-list-v170{grid-template-columns:1fr}
  .network-relation-v170{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .network-relation-v170 b{grid-column:1/-1;width:max-content}
}

/* OpenInfra v1.8.0 - erweiterte Netzwerkchecks */
.diagnostics-v180{max-width:1220px;margin:0 auto}
.diag-head-v190{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.diag-version-v180{
  display:inline-flex;padding:5px 9px;border:1px solid #315574;border-radius:8px;
  color:#6edfc5;background:#10243a;font-size:.65rem;font-weight:900
}
.diag-problem-v190 a{color:#9ccdf2;text-decoration:none}
.muted-problem-v180{border-color:#33485b!important;background:#101b29!important}
.diag-stats-v180{grid-template-columns:repeat(4,1fr)}
@media(max-width:850px){.diag-stats-v180{grid-template-columns:1fr 1fr}}


/* ==========================================================
   OpenInfra 2.0 - Authentifizierung & Netzplan
   ========================================================== */
.user-nav-v200{
  max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#aee6d7;text-decoration:none;font-size:.68rem;font-weight:800
}
.logout-form-v200{margin:0}
.logout-form-v200 button{
  min-height:30px;padding:0 8px;border:1px solid #34516a;border-radius:7px;
  background:#102136;color:#9db8d0;font-size:.65rem
}

.login-body-v200{
  min-height:100vh;margin:0;background:#06111d;color:#e7f0f9;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.login-shell-v200{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card-v200{
  width:min(420px,100%);padding:28px;border:1px solid #2b4662;border-radius:15px;
  background:#0d1c2e;box-shadow:0 28px 70px rgba(0,0,0,.35)
}
.login-card-v200 h1{margin:5px 0 5px;font-size:1.65rem}
.login-card-v200 p{color:#7e9dbc;font-size:.78rem;line-height:1.5}
.login-brand-v200{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.login-brand-v200 span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:#132d42;border:1px solid #37627a;color:#67dec3;font-weight:950
}
.login-brand-v200 strong{font-size:1rem}
.login-error-v200,.account-success-v200{
  padding:9px 10px;margin:10px 0;border:1px solid #71404a;border-radius:8px;
  background:#29161b;color:#f0a1aa;font-size:.72rem
}
.account-success-v200{border-color:#326b5a;background:#102720;color:#78dabd}

.account-v200,.users-v200,.network-plan-v200{max-width:1320px;margin:0 auto}
.account-card-v200{max-width:520px;margin-top:14px;padding:15px}
.user-create-v200{padding:14px;margin:13px 0}
.user-form-v200{
  display:grid;grid-template-columns:1fr 1fr 180px 1fr auto;gap:8px;align-items:end
}
.user-form-v200 label{font-size:.68rem;font-weight:800;color:#8eabc7}
.user-form-v200 input,.user-form-v200 select{width:100%;margin-top:4px}
.user-list-v200{display:grid;gap:8px}
.user-card-v200{padding:0!important;overflow:hidden}
.user-card-v200>summary{
  display:grid;grid-template-columns:minmax(200px,1.5fr) 120px 100px minmax(150px,1fr);
  gap:10px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none
}
.user-card-v200>summary::-webkit-details-marker{display:none}
.user-card-v200 summary div strong,.user-card-v200 summary div small{display:block}
.user-card-v200 summary div small{color:#748fac;font-size:.64rem;margin-top:2px}
.user-role-v200,.user-state-v200{
  display:inline-flex;width:max-content;padding:3px 7px;border-radius:999px;font-size:.61rem;font-weight:900
}
.user-role-v200.admin{background:#2b2148;color:#c9b7ff;border:1px solid #67549b}
.user-role-v200.user{background:#102b36;color:#72dbc0;border:1px solid #356a63}
.user-state-v200.active{color:#6dd9b8}.user-state-v200.inactive{color:#dd8390}
.user-detail-v200{padding:12px 14px;border-top:1px solid #29435f}
.user-reset-v200{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin-top:10px}
.user-reset-v200 label{font-size:.68rem;font-weight:800;color:#8eabc7}
.user-active-v200{display:flex!important;align-items:center;gap:8px}
.user-active-v200 input{width:auto!important;margin:0!important}

.network-plan-head-v200{margin-bottom:13px}
.network-plan-filter-v200{padding:10px 12px;margin-bottom:12px}
.network-plan-filter-v200 form{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px;align-items:end}
.network-plan-filter-v200 label{font-size:.67rem;font-weight:800;color:#8daac7}
.network-plan-filter-v200 select{width:100%;margin-top:4px}
.network-plan-filter-v200 a{
  display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 10px;
  border:1px solid #315574;border-radius:8px;color:#9fc7e7;text-decoration:none;font-size:.68rem;font-weight:800
}
.network-plan-site-v200{padding:0!important;margin-bottom:13px;overflow:hidden}
.network-plan-site-head-v200{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:13px 15px;
  background:#12243a;border-bottom:1px solid #29445e
}
.network-plan-site-head-v200 small{color:#60d8bd;font-size:.6rem;font-weight:900;letter-spacing:.08em}
.network-plan-site-head-v200 h2{margin:2px 0 0}
.network-plan-site-stats-v200{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.network-plan-site-stats-v200 span{
  padding:4px 7px;border:1px solid #31506c;border-radius:999px;color:#8dabca;font-size:.6rem
}
.network-graph-v200{position:relative;min-height:310px;padding:15px;overflow:auto;background:#081522}
.network-graph-lines-v200{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.network-graph-columns-v200{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));
  gap:34px;min-width:1120px
}
.network-graph-column-v200{display:flex;flex-direction:column;gap:8px}
.network-graph-column-title-v200{
  padding-bottom:6px;border-bottom:1px solid #29465e;color:#64d9bf;font-size:.61rem;
  font-weight:900;letter-spacing:.07em;text-transform:uppercase
}
.network-node-v200{
  display:block;padding:9px 10px;border:1px solid #2c4963;border-radius:9px;
  background:#102034;color:#e8f1fa;text-decoration:none;box-shadow:0 5px 15px rgba(0,0,0,.14)
}
.network-node-v200:hover{border-color:#5685a9;background:#132840}
.network-node-v200 strong{display:block;font-size:.7rem;overflow-wrap:anywhere}
.network-node-v200 small{display:block;margin-top:3px;color:#7695b3;font-size:.6rem;line-height:1.35}
.network-node-v200.wan{border-color:#386676}.network-node-v200.vlan{border-color:#594c82}
.network-node-empty-v200{padding:9px;color:#586f86;font-size:.62rem;border:1px dashed #263b50;border-radius:8px}
.network-edge-v200{fill:none;stroke:#3e8193;stroke-width:2;opacity:.72}
.network-edge-v200.logical{stroke:#755fa7;stroke-dasharray:5 4}
.network-edge-v200.wan{stroke:#53a3b2;stroke-width:2.4}
.network-edge-v200.vlan{stroke:#7766a7;stroke-dasharray:3 3}
.network-edge-label-v200{
  fill:#7899b8;font-size:9px;text-anchor:middle;paint-order:stroke;
  stroke:#081522;stroke-width:4;stroke-linejoin:round
}
.network-links-v200{padding:10px 14px;border-top:1px solid #29445e}
.network-links-v200>summary{cursor:pointer;color:#91c7ec;font-size:.69rem;font-weight:800}
.network-links-grid-v200{display:grid;gap:6px;margin-top:9px}
.network-link-row-v200{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center;
  padding:7px 8px;border:1px solid #243e56;border-radius:7px;background:#0a1725;font-size:.62rem
}
.network-link-row-v200>span{color:#5ad4b9}.network-link-row-v200>small{grid-column:1/-1;color:#718fae}
.network-link-row-v200.logical{border-style:dashed}

@media(max-width:900px){
  .user-form-v200{grid-template-columns:1fr 1fr}
  .user-form-v200 button{grid-column:1/-1}
  .user-card-v200>summary{grid-template-columns:1fr 1fr}
  .network-plan-filter-v200 form{grid-template-columns:1fr}
}


/* ==========================================================
   OpenInfra v2.0.1 - Konto, Benutzer, Rack-Netzplan
   ========================================================== */
.account-menu-v201{
  position:relative;
  flex:0 0 auto;
}
.account-menu-v201>summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:3px 8px 3px 4px;
  border:1px solid #294760;
  border-radius:9px;
  background:#0c1a2b;
  cursor:pointer;
  color:#d7e8f7;
  font-size:.68rem;
  font-weight:800;
  white-space:nowrap;
}
.account-menu-v201>summary::-webkit-details-marker{display:none}
.account-avatar-v201{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:7px;
  background:linear-gradient(135deg,#5fd7bd,#64a9f2);
  color:#07131e;
  font-weight:950;
}
.account-name-v201{max-width:80px;overflow:hidden;text-overflow:ellipsis}
.account-chevron-v201{color:#6687a6;font-size:.62rem}
.account-dropdown-v201{
  position:absolute;
  z-index:200;
  top:calc(100% + 7px);
  right:0;
  width:220px;
  padding:7px;
  border:1px solid #2c4c68;
  border-radius:10px;
  background:#0c1a2b;
  box-shadow:0 18px 45px rgba(0,0,0,.38);
}
.account-dropdown-head-v201{
  padding:7px 8px 9px;
  margin-bottom:5px;
  border-bottom:1px solid #253d55;
}
.account-dropdown-head-v201 strong,
.account-dropdown-head-v201 small{display:block}
.account-dropdown-head-v201 strong{font-size:.72rem;color:#e7f1fa}
.account-dropdown-head-v201 small{margin-top:2px;color:#728faa;font-size:.59rem}
.account-dropdown-v201>a,
.account-dropdown-v201 form button{
  display:flex;
  width:100%;
  box-sizing:border-box;
  align-items:center;
  min-height:34px;
  padding:0 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#a9c9e5;
  text-decoration:none;
  font:inherit;
  font-size:.67rem;
  font-weight:800;
  cursor:pointer;
}
.account-dropdown-v201>a:hover,
.account-dropdown-v201 form button:hover{background:#13283d;color:#e5f3ff}
.account-dropdown-v201 form{margin:2px 0 0;border-top:1px solid #20374c;padding-top:3px}

/* Benutzerverwaltung */
.users-v200{max-width:1180px}
.user-create-v200{padding:16px}
.user-form-v201{
  display:grid;
  grid-template-columns:1.1fr 1.2fr .75fr 1.2fr auto;
  gap:10px;
  align-items:end;
  margin-top:12px;
}
.user-form-v201 label,
.user-form-edit-v201 label,
.user-reset-v201 label{
  display:flex!important;
  flex-direction:column;
  gap:5px;
  min-width:0;
  margin:0!important;
  color:#89a8c6!important;
  font-size:.66rem!important;
  font-weight:850!important;
}
.user-form-v201 label>span,
.user-form-edit-v201 label>span,
.user-reset-v201 label>span{
  display:block;
}
.user-form-v201 input,
.user-form-v201 select,
.user-form-edit-v201 input,
.user-form-edit-v201 select,
.user-reset-v201 input{
  box-sizing:border-box;
  width:100%!important;
  min-height:38px;
  margin:0!important;
  padding:0 10px;
  border:1px solid #31506c!important;
  border-radius:8px!important;
  outline:none;
  background:#081827!important;
  color:#e6f0f8!important;
  font:inherit;
}
.user-form-v201 input:focus,
.user-form-v201 select:focus,
.user-form-edit-v201 input:focus,
.user-form-edit-v201 select:focus,
.user-reset-v201 input:focus{border-color:#64b9d8!important}
.user-form-v201 button{
  min-height:38px;
  padding:0 15px;
  white-space:nowrap;
}
.user-card-v200>summary{
  grid-template-columns:minmax(220px,1.5fr) 130px 100px minmax(170px,1fr);
}
.user-detail-v200{display:grid;gap:12px}
.user-form-edit-v201{
  display:grid;
  grid-template-columns:minmax(240px,1fr) 180px 100px auto;
  gap:10px;
  align-items:end;
}
.user-active-v201{
  align-items:flex-start!important;
  justify-content:flex-end;
}
.user-active-v201 input{
  width:20px!important;
  min-height:20px!important;
  margin-top:4px!important;
  accent-color:#5fd7bd;
}
.user-reset-v201{
  display:grid;
  grid-template-columns:minmax(280px,1fr) auto;
  gap:10px;
  align-items:end;
  padding-top:11px;
  border-top:1px solid #243d54;
}

/* Rack-Netzplan */
.rack-network-plan-v201{
  margin:12px 0 14px;
  padding:0!important;
  overflow:hidden;
}
.rack-network-plan-head-v201{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:13px 15px;
  border-bottom:1px solid #29455e;
  background:#12243a;
}
.rack-network-plan-head-v201 h2{margin:3px 0}
.rack-network-plan-head-v201 p{
  margin:3px 0 0;
  max-width:800px;
  color:#7796b5;
  font-size:.68rem;
}
.rack-network-plan-head-v201>a{
  display:flex;
  min-height:34px;
  align-items:center;
  padding:0 10px;
  border:1px solid #315775;
  border-radius:8px;
  color:#9dcbed;
  text-decoration:none;
  font-size:.65rem;
  font-weight:850;
  white-space:nowrap;
}
.rack-network-links-v201{
  display:grid;
  gap:8px;
  padding:12px;
}
.rack-network-link-v201{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(180px,.72fr) minmax(220px,1fr);
  gap:9px;
  align-items:stretch;
}
.rack-network-node-v201{
  display:block;
  padding:9px 10px;
  border:1px solid #2c4a65;
  border-radius:9px;
  background:#0a1929;
  color:#e6f0f8;
  text-decoration:none;
}
.rack-network-node-v201.external{border-style:dashed;background:#101a2b}
.rack-network-node-v201 small{
  display:block;
  color:#5fd8bd;
  font-size:.57rem;
  font-weight:900;
  text-transform:uppercase;
}
.rack-network-node-v201 strong{display:block;margin-top:2px;font-size:.72rem}
.rack-network-node-v201 span{display:block;margin-top:3px;color:#7f9ebb;font-size:.62rem}
.rack-network-wire-v201{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
}
.rack-network-wire-v201>i{
  flex:1;
  height:2px;
  background:#428899;
  border-radius:99px;
}
.rack-network-wire-v201>div{text-align:center;min-width:92px}
.rack-network-wire-v201 strong{
  display:block;
  color:#65d8bf;
  font-size:.63rem;
}
.rack-network-wire-v201 span,
.rack-network-wire-v201 small{
  display:block;
  margin-top:2px;
  color:#7896b5;
  font-size:.56rem;
}
.rack-network-empty-v201{
  padding:18px;
  color:#718eaa;
  font-size:.68rem;
}

@media(max-width:1050px){
  .user-form-v201{grid-template-columns:1fr 1fr}
  .user-form-v201 button{grid-column:1/-1}
  .user-form-edit-v201{grid-template-columns:1fr 1fr}
  .user-reset-v201{grid-template-columns:1fr}
}
@media(max-width:800px){
  .rack-network-link-v201{grid-template-columns:1fr}
  .rack-network-wire-v201{min-height:42px}
  .user-card-v200>summary{grid-template-columns:1fr 1fr}
}

/* OpenInfra 2.1.0 - feste IPs */
.ip-fixed-create-v210,.ip-fixed-list-v210{padding:15px;margin:12px 0}
.ip-fixed-form-v210,.ip-fixed-edit-v210{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:9px;align-items:end}
.ip-fixed-form-v210 label,.ip-fixed-edit-v210 label{display:flex;flex-direction:column;gap:5px;color:#89a8c6;font-size:.64rem;font-weight:850}
.ip-fixed-form-v210 input,.ip-fixed-form-v210 select,.ip-fixed-edit-v210 input,.ip-fixed-edit-v210 select{width:100%;box-sizing:border-box;min-height:38px;margin:0;padding:0 9px;border:1px solid #31506c;border-radius:8px;background:#081827;color:#e6f0f8}
.ip-fixed-form-v210 .wide,.ip-fixed-edit-v210 .wide{grid-column:span 2}
.ip-fixed-summary-v210{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.ip-fixed-summary-v210>*{padding:10px 12px;border:1px solid #294760;border-radius:9px;background:#0c1b2c;text-decoration:none}
.ip-fixed-summary-v210 small,.ip-fixed-summary-v210 strong{display:block}.ip-fixed-summary-v210 small{color:#7999b7;font-size:.6rem}.ip-fixed-summary-v210 strong{margin-top:2px;color:#e8f1fa;font-size:1.1rem}
.ip-fixed-items-v210{display:grid;gap:7px;margin-top:10px}
.ip-fixed-item-v210{border:1px solid #29445e;border-radius:8px;background:#0a1827}
.ip-fixed-item-v210>summary{display:grid;grid-template-columns:150px 1fr 100px 110px;gap:8px;align-items:center;padding:10px 11px;cursor:pointer;list-style:none}
.ip-fixed-item-v210>summary::-webkit-details-marker{display:none}.ip-fixed-item-v210>summary small{color:#7895b2}
.ip-fixed-edit-wrap-v210{padding:11px;border-top:1px solid #263f56}.ip-fixed-edit-wrap-v210>form:last-child{margin-top:9px}
.ip-allocation-v210{display:inline-flex;padding:3px 6px;border:1px solid #34556f;border-radius:999px;font-size:.58rem;font-weight:900}
.ip-allocation-v210.static{color:#68d9bd;border-color:#34695f}.ip-allocation-v210.reserved{color:#c9b5ff;border-color:#63528e}.ip-allocation-v210.dhcp{color:#82bdec}.ip-allocation-v210.free{color:#7c93aa}
.device-ip-banner-v210{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;margin-bottom:11px}.device-ip-banner-v210 small,.device-ip-banner-v210 strong{display:block}.device-ip-banner-v210 small{color:#5fd7bd;font-size:.57rem;font-weight:900}.device-ip-banner-v210 strong{margin-top:2px;font-family:monospace;font-size:.85rem}.device-ip-banner-v210 a{color:#9bc9eb;font-size:.65rem;font-weight:800;text-decoration:none}
@media(max-width:950px){.ip-fixed-form-v210,.ip-fixed-edit-v210{grid-template-columns:1fr 1fr}.ip-fixed-item-v210>summary{grid-template-columns:1fr 1fr}}

/* OpenInfra 2.1.1 - WAN/IPAM */
.wan-public-ip-v211{display:flex;align-items:center;justify-content:center;gap:5px;margin:5px 0}.wan-public-ip-v211 small{color:#6688a6;font-size:.52rem}.wan-public-ip-v211 code{color:#69d9bd;font-weight:900}.wan-public-ip-v211 a{padding:2px 5px;border:1px solid #31536e;border-radius:999px;color:#91c6ea;text-decoration:none;font-size:.5rem;font-weight:900}.wan-meta-v130{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}