/* ════════════════════════════════════════════════════════════════
   Netzplan – Aussehen
   Farben und Schriften wie im NetLab (Baukasten "Netzwerk-Werkstatt"),
   Akzent grün. Hell und dunkel, die Wahl merkt sich der Browser.
   ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg:       #f3f4f1;
  --flaeche:  #ffffff;
  --tief:     #e9ebe7;
  --linie:    #d5d9d3;
  --linie-2:  #b9c0b9;
  --text:     #18212b;
  --leise:    #55626f;
  --akzent:   #1f8a52;
  --akzent-t: #ffffff;
  --gut:      #1f8a52;
  --warn:     #a86a00;
  --schlecht: #c2372e;
  --blau:     #1f66c9;
  --raster:   rgba(24, 33, 43, 0.07);
  --sans:     "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --kopf:     "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono:     "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --schatten: 0 1px 2px rgba(24, 33, 43, 0.06), 0 8px 24px rgba(24, 33, 43, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:       #11161c;
    --flaeche:  #1a2129;
    --tief:     #0d1116;
    --linie:    #2b3540;
    --linie-2:  #3d4a58;
    --text:     #e6ebf0;
    --leise:    #94a3b3;
    --akzent:   #4cc088;
    --akzent-t: #0d1116;
    --gut:      #4cc088;
    --warn:     #e2b04a;
    --schlecht: #f07068;
    --blau:     #6aa8f5;
    --raster:   rgba(230, 235, 240, 0.06);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:       #11161c;
  --flaeche:  #1a2129;
  --tief:     #0d1116;
  --linie:    #2b3540;
  --linie-2:  #3d4a58;
  --text:     #e6ebf0;
  --leise:    #94a3b3;
  --akzent:   #4cc088;
  --akzent-t: #0d1116;
  --gut:      #4cc088;
  --warn:     #e2b04a;
  --schlecht: #f07068;
  --blau:     #6aa8f5;
  --raster:   rgba(230, 235, 240, 0.06);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  display:        flex;
  flex-direction: column;
  margin:         0;
  background:     var(--bg);
  color:          var(--text);
  font-family:    var(--sans);
  font-size:      0.9375rem;
  line-height:    1.45;
}
h2,
h3,
h4 {
  margin:      0;
  font-family: var(--kopf);
}
h2 {
  font-size: 1.0625rem;
}
h3 {
  font-size: 1rem;
}
h4 {
  margin-top:     16px;
  color:          var(--leise);
  font-size:      0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
a {
  color: var(--akzent);
}

/* ─── Knöpfe und Felder ────────────────────────────────────────── */
.bx-btn {
  min-height:    34px;
  padding:       6px 12px;
  background:    var(--flaeche);
  border:        1px solid var(--linie-2);
  border-radius: 6px;
  color:         var(--text);
  font:          inherit;
  font-weight:   600;
  font-size:     0.875rem;
  cursor:        pointer;
  white-space:   nowrap;
}
.bx-btn:hover {
  border-color: var(--akzent);
}
.bx-btn.is-primary {
  background:   var(--akzent);
  border-color: var(--akzent);
  color:        var(--akzent-t);
}
.bx-btn.is-icon {
  width:   34px;
  padding: 0;
}
.bx-btn.neu {
  border-style: dashed;
}
.bx-btn:focus-visible,
.bx-field:focus-visible,
.np-geraet:focus-visible {
  outline:        2px solid var(--akzent);
  outline-offset: 2px;
}
.bx-field {
  width:         100%;
  min-height:    34px;
  padding:       6px 9px;
  background:    var(--tief);
  border:        1px solid var(--linie);
  border-radius: 6px;
  color:         var(--text);
  font:          inherit;
  font-size:     0.875rem;
}
.bx-field.falsch {
  border-color: var(--schlecht);
}

/* ─── Kopf ─────────────────────────────────────────────────────── */
.kopf {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           10px 18px;
  padding:       10px 16px;
  background:    var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.marke {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--kopf);
  font-size:   1.25rem;
  font-weight: 600;
  white-space: nowrap;
}
.marke svg {
  width:  30px;
  height: 30px;
}
.marke rect {
  fill: var(--akzent);
}
.marke path,
.marke circle {
  fill:            var(--akzent);
  stroke:          var(--akzent-t);
  stroke-width:    2;
  stroke-linejoin: round;
}
.marke path {
  fill: none;
}
.marke small {
  color:       var(--leise);
  font-family: var(--sans);
  font-size:   0.8125rem;
  font-weight: 400;
}
.leiste {
  display:   flex;
  flex:      1;
  flex-wrap: wrap;
  gap:       8px 16px;
}
.gruppe {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         6px;
}
.gruppe .bx-field {
  width: auto;
}
.rechts {
  display: flex;
  gap:     6px;
}

/* ─── Arbeitsbereich ───────────────────────────────────────────── */
.arbeit {
  display:               grid;
  flex:                  1;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap:                   14px;
  min-height:            0;
  padding:               14px 16px;
}
.flaeche-huelle {
  position:      relative;
  min-height:    320px;
  background:
    linear-gradient(var(--raster) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--raster) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--flaeche);
  border:        1px solid var(--linie);
  border-radius: 12px;
  box-shadow:    var(--schatten);
  overflow:      hidden;
}
.np-flaeche {
  display:      block;
  width:        100%;
  height:       100%;
  touch-action: none;
  user-select:  none;
}
.np-flaeche.werkzeug-kabel .np-geraet,
.np-flaeche.werkzeug-weg .np-geraet,
.np-flaeche.werkzeug-weg .np-kabel {
  cursor: crosshair;
}
.np-leer,
.np-meldung {
  position:       absolute;
  left:           0;
  right:          0;
  margin:         0;
  padding:        0 16px;
  color:          var(--leise);
  text-align:     center;
  pointer-events: none;
}
.np-leer {
  top: 45%;
}
.np-meldung {
  bottom:    10px;
  font-size: 0.8125rem;
}

/* Kabel */
.np-kabel {
  stroke:         var(--linie-2);
  stroke-width:   3;
  stroke-linecap: round;
}
.np-flaeche.werkzeug-weg .np-kabel {
  stroke-width: 6;
}
.np-kabel.aktiv {
  stroke: var(--akzent);
}
.np-port {
  fill:           var(--leise);
  font-family:    var(--mono);
  font-size:      9px;
  text-anchor:    middle;
  paint-order:    stroke;
  stroke:         var(--flaeche);
  stroke-width:   3px;
  pointer-events: none;
}

/* Geräte */
.np-geraet {
  cursor: grab;
}
.np-kachel {
  fill:         var(--flaeche);
  stroke:       var(--linie-2);
  stroke-width: 1.5;
  filter:       drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14));
}
.np-symbol {
  fill:            none;
  stroke:          var(--text);
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  pointer-events:  none;
}
.np-switch .np-symbol {
  stroke: var(--blau);
}
.np-router .np-symbol {
  stroke: var(--warn);
}
.np-server .np-symbol {
  stroke: var(--akzent);
}
.np-geraet:hover .np-kachel {
  stroke: var(--akzent);
}
.np-geraet.gewaehlt .np-kachel {
  stroke:       var(--akzent);
  stroke-width: 2.5;
}
.np-geraet.kabelstart .np-kachel {
  stroke:           var(--warn);
  stroke-width:     2.5;
  stroke-dasharray: 5 4;
}
.np-geraet.stoerung .np-kachel {
  stroke:       var(--schlecht);
  stroke-width: 2.5;
}
.np-name,
.np-ip {
  text-anchor:    middle;
  paint-order:    stroke;
  stroke:         var(--flaeche);
  stroke-width:   4px;
  pointer-events: none;
}
.np-name {
  fill:        var(--text);
  font-size:   12px;
  font-weight: 600;
}
.np-ip {
  fill:        var(--leise);
  font-family: var(--mono);
  font-size:   10px;
}

/* Pakete */
.np-paket rect {
  stroke:       var(--tief);
  stroke-width: 1.5;
}
.np-paket path {
  fill:         none;
  stroke:       var(--tief);
  stroke-width: 1.5;
}
.np-paket.arp rect {
  fill: var(--warn);
}
.np-paket.frage rect {
  fill: var(--blau);
}
.np-paket.antwort rect {
  fill: var(--gut);
}

/* ─── Seitenleiste ─────────────────────────────────────────────── */
.seite {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  min-height:     0;
  overflow-y:     auto;
}
.karte {
  padding:       14px;
  background:    var(--flaeche);
  border:        1px solid var(--linie);
  border-radius: 12px;
  box-shadow:    var(--schatten);
}
.ping {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
  margin-top:            10px;
}
.ping .bx-btn {
  grid-column: 1 / -1;
}
.np-feld {
  display:   block;
  min-width: 0;
}
.np-feld > span {
  display:       block;
  margin-bottom: 3px;
  color:         var(--leise);
  font-size:     0.75rem;
}
#np-eigenschaften > .np-feld {
  margin-top: 10px;
}
.np-zeile {
  display:               grid;
  grid-template-columns: 1.4fr 1fr;
  gap:                   6px;
  margin-top:            8px;
}
.np-zeile.np-route {
  grid-template-columns: 1.2fr 0.9fr 1.2fr auto;
  align-items:           end;
}
.np-mini {
  width:   34px;
  padding: 0;
}
.np-leise {
  margin:    8px 0 0;
  color:     var(--leise);
  font-size: 0.8125rem;
}
.np-gefahr {
  margin-top:   16px;
  border-color: var(--schlecht);
  color:        var(--schlecht);
}
#np-eigenschaften > .bx-btn:not(.np-gefahr) {
  margin-top: 8px;
}
.np-tabelle {
  width:           100%;
  margin-top:      6px;
  border-collapse: collapse;
  font-size:       0.8125rem;
}
.np-tabelle th,
.np-tabelle td {
  padding:       4px 6px;
  border-bottom: 1px solid var(--linie);
  text-align:    left;
}
.np-tabelle th {
  color:       var(--leise);
  font-weight: 600;
}
.np-tabelle td {
  font-family: var(--mono);
}
.np-vlan {
  width:      68px;
  min-height: 28px;
  padding:    2px 6px;
}

.np-ergebnis {
  margin:        12px 0 0;
  padding:       8px 10px;
  border-radius: 8px;
  font-weight:   600;
  font-size:     0.875rem;
}
.np-ergebnis.gut {
  background: color-mix(in srgb, var(--gut) 16%, var(--flaeche));
  color:      var(--gut);
}
.np-ergebnis.schlecht {
  background: color-mix(in srgb, var(--schlecht) 14%, var(--flaeche));
  color:      var(--schlecht);
}
.steuerung {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 10px;
}
.ereignisse {
  max-height: 300px;
  margin:     10px 0 0;
  padding:    0;
  overflow-y: auto;
  list-style: none;
}
.ereignisse li {
  padding:       8px 10px;
  border-left:   3px solid var(--linie);
  border-radius: 0 6px 6px 0;
  cursor:        pointer;
}
.ereignisse li + li {
  margin-top: 4px;
}
.ereignisse li:hover {
  background: var(--tief);
}
.ereignisse li.aktiv {
  background:   color-mix(in srgb, var(--akzent) 12%, var(--flaeche));
  border-color: var(--akzent);
}
.ereignisse b {
  font-size: 0.8125rem;
}
.ereignisse p {
  margin:    3px 0 0;
  color:     var(--leise);
  font-size: 0.8125rem;
}
.ereignisse li.aktiv p {
  color: var(--text);
}
.ereignisse .np-hinweis.gut {
  color: var(--gut);
}
.ereignisse .np-hinweis.schlecht {
  color: var(--schlecht);
}
.legende {
  display:    flex;
  flex-wrap:  wrap;
  gap:        12px;
  margin-top: 10px;
  color:      var(--leise);
  font-size:  0.75rem;
}
.legende span::before {
  content:        "";
  display:        inline-block;
  width:          12px;
  height:         8px;
  margin-right:   5px;
  border-radius:  2px;
  vertical-align: middle;
}
.legende .arp::before {
  background: var(--warn);
}
.legende .frage::before {
  background: var(--blau);
}
.legende .antwort::before {
  background: var(--gut);
}

.fuss {
  padding:    8px 16px 12px;
  color:      var(--leise);
  font-size:  0.8125rem;
  text-align: center;
}

/* ─── Schmal: Leiste unter die Fläche ──────────────────────────── */
@media (max-width: 980px) {
  body {
    height: auto;
  }
  .arbeit {
    grid-template-columns: minmax(0, 1fr);
  }
  .flaeche-huelle {
    aspect-ratio: 16 / 10;
  }
  .seite {
    overflow: visible;
  }
}