/* ==========================================================================
   NETZPLAN-TRAINER  -  alles unter .netzp gescoped
   ========================================================================== */
.netzp {
  /* breiter als die uebrigen Module: die Netzplaene sind bis zu 1362px breit,
     bei dieser Breite passen die meisten davon ohne Zoom hinein. */
  display: block; max-width: 1440px; margin: 0 auto; padding: 20px 22px 48px;
  --karte: rgba(20,20,31,.58);
  --karte-2: rgba(25,25,38,.55);
  --erhoben: rgba(29,29,44,.58);
  --line: #262637;
  --line-soft: #1e1e2c;
  --txt: #eef0f6;
  --dim: #a2a2ba;
  --faint: #6a6a86;
  --blue: #3da9ff;
  --green: #3ddc84;
  --amber: #ffb347;
  --violet: #b47bff;
  --red: #ff3b5c;
  --mono: 'FQ Ziffern', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --label: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--txt); font-family: var(--label);
}
@media (max-width: 700px) { .netzp { padding: 14px 12px 36px; } }

.netzp .np-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--karte); border: 1px solid var(--line); color: var(--txt);
  font-size: 13px; font-weight: 600; padding: 9px 15px;
  border-radius: 10px; cursor: pointer; margin-bottom: 16px;
}
.netzp .np-back:hover { border-color: var(--blue); color: var(--blue); }

.netzp .np-kopf { margin-bottom: 14px; }
.netzp .np-kopf-l h1 {
  margin: 0; font-family: 'Press Start 2P', monospace; font-size: 16px; line-height: 1.5;
  background: linear-gradient(90deg, var(--blue), var(--green));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.netzp .np-kopf-s { font-size: 12.5px; color: var(--dim); margin-top: 9px; }

/* ---------- Modus und Stufen ---------- */
.netzp .np-modebar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.netzp .np-modebtn {
  font-size: 12.5px; font-weight: 700; padding: 9px 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--karte); color: var(--dim);
}
.netzp .np-modebtn.on { border-color: var(--green); color: var(--green); background: rgba(61,220,132,.10); }

.netzp .np-stufen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.netzp .np-stufe {
  display: flex; align-items: center; gap: 8px;
  background: var(--karte); border: 1px solid var(--line); color: var(--dim);
  font-size: 12.5px; font-weight: 600; padding: 8px 13px 8px 8px; border-radius: 12px;
  cursor: pointer; transition: border-color .15s, color .15s, transform .1s;
}
.netzp .np-stufe:hover { color: var(--txt); border-color: #34344c; transform: translateY(-1px); }
.netzp .np-stufe .n {
  display: grid; place-items: center; min-width: 24px; height: 24px;
  border-radius: 8px; background: var(--erhoben); color: var(--faint);
  font-family: var(--mono); font-size: 11px;
}
.netzp .np-stufe.on { border-color: var(--blue); color: var(--txt); background: rgba(61,169,255,.10); }
.netzp .np-stufe.on .n { background: var(--blue); color: #04121f; }

/* ---------- Lernkarte ---------- */
.netzp .np-lern {
  background: var(--karte); border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 14px; margin-bottom: 14px; overflow: hidden;
}
.netzp .np-lern-kopf {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; padding: 14px 16px;
  color: var(--txt); font-family: var(--label); font-size: 14px; font-weight: 700;
}
.netzp .np-lern-kopf .ico { color: var(--violet); font-size: 12px; transition: transform .18s; }
.netzp .np-lern.offen .np-lern-kopf .ico { transform: rotate(90deg); }
.netzp .np-lern-kopf .t { flex: 1; }
.netzp .np-lern-kopf .s { font-size: 11px; font-weight: 500; color: var(--faint); }
.netzp .np-lern-body { padding: 0 18px 16px; }
.netzp .np-lern-body p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.68; color: var(--dim); }

.netzp .np-merke {
  background: rgba(255,179,71,.08); border: 1px solid rgba(255,179,71,.32);
  border-radius: 11px; padding: 12px 14px; margin: 12px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--txt);
}
.netzp .np-merke .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 6px;
}
.netzp .np-weg2 { margin-top: 12px; }
.netzp .np-weg2-t, .netzp .np-hilfe-t {
  display: none; margin-top: 10px; padding: 11px 14px; border-radius: 10px;
  background: rgba(180,123,255,.08); border: 1px solid rgba(180,123,255,.3);
  font-size: 13px; line-height: 1.62; color: var(--txt);
}
.netzp .np-weg2-t.show, .netzp .np-hilfe-t.show { display: block; }
.netzp .np-hilfe { margin-top: 12px; }
.netzp .np-hilfe-t { background: rgba(61,169,255,.08); border-color: rgba(61,169,255,.32); }
.netzp .np-hinweis-fest {
  margin-bottom: 12px; padding: 10px 13px; border-radius: 10px;
  background: rgba(61,169,255,.07); border-left: 3px solid rgba(61,169,255,.5);
  font-size: 12.5px; line-height: 1.6; color: var(--dim);
}

/* ---------- Der Netzplan ---------- */
.netzp .np-plan {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; margin: 8px 0 8px;
  overflow-x: auto; overflow-y: hidden;
}
/* Keine Skalierung: die Masse kommen aus dem JS, der Rahmen scrollt.
   Ein width:100% wuerde breite Plaene zusammenstauchen. */
/* Mittig, solange der Plan in den Rahmen passt. Laeuft er ueber, wird der
   auto-Rand zu 0 und das Scrollen verhaelt sich normal. */
.netzp .np-svg { display: block; margin: 0 auto; }

.netzp .np-rahmen { fill: rgba(15,15,24,.92); stroke: #3a3a58; stroke-width: 1.6; }
.netzp .np-linie { stroke: #2e2e46; stroke-width: 1; }
.netzp .np-knoten.krit .np-rahmen { stroke: var(--red); stroke-width: 2.4; }
.netzp .np-knoten.markiert .np-rahmen { stroke: var(--amber); stroke-width: 2.4; }
.netzp .np-knoten.klickbar { cursor: pointer; }
.netzp .np-knoten.klickbar:hover .np-rahmen { stroke: var(--amber); }

.netzp .np-name {
  fill: var(--txt); font-family: 'Inter', system-ui, sans-serif; font-size: 11px;
  font-weight: 700; text-anchor: middle;
}
.netzp .np-kurz {
  fill: var(--faint); font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
  text-anchor: middle;
}
.netzp .np-wert {
  /* SVG-Text nimmt die Ziffernschrift aus main.css */
  fill: var(--txt); font-family: 'JetBrains Mono', monospace; font-size: 15px;
  text-anchor: middle;
}
.netzp .np-wert.leer { fill: #3a3a55; }
.netzp .np-wert.frisch { fill: var(--green); }
.netzp .np-knoten.krit .np-wert { fill: #ffd0d8; }

.netzp .np-kante { fill: none; stroke: #3c3c5a; stroke-width: 1.8; }
.netzp .np-kante.krit { stroke: var(--red); stroke-width: 2.4; }
.netzp .np-sp { fill: #3c3c5a; }
.netzp .np-sp-krit { fill: var(--red); }

/* Eingabefelder im Knoten */
.netzp .np-in {
  /* Nur das Aussehen - Masse stehen weiter unten, getrennt nach Ort.
     Frueher standen hier feste Masse samt "margin: 0 auto". Das galt dann
     auch fuer das freistehende Projektdauer-Feld und hat in dessen
     Flex-Zeile den ganzen Platz aufgesogen: Beschriftung ganz links,
     Einheit ganz rechts. */
  box-sizing: border-box;
  background: rgba(61,169,255,.10); border: 1px solid rgba(61,169,255,.45);
  border-radius: 4px; color: var(--txt); text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13.5px; padding: 0 2px;
}
.netzp .np-in:focus { outline: none; border-color: var(--blue); background: rgba(61,169,255,.20); }
.netzp .np-in.ok { border-color: var(--green); background: rgba(61,220,132,.16); color: var(--green); }
.netzp .np-in.bad { border-color: var(--red); background: rgba(255,59,92,.16); color: #ff9db0; }
/* Felder im Knoten: feste Masse mit Spielraum im SVG-Container, damit der
   untere Rand nicht beschnitten wird. Waagerecht mittig in seiner Zelle. */
.netzp foreignObject .np-in {
  /* 44 statt 52 breit: vorher blieben nur 3px bis zur Trennlinie, die Felder
     klebten an den Zellengrenzen. Jetzt 7px Luft auf jeder Seite. */
  display: block; width: 44px; height: 24px; margin: 0 auto;
}

/* Freistehende Felder ausserhalb des Plans - kein auto-Rand, sonst zerreisst
   es die Zeile. */
.netzp .np-in.gross {
  display: inline-block; width: 92px; height: 38px; margin: 0;
  font-size: 15px; border-radius: 9px;
  background: var(--karte-2); border-color: var(--line);
}
.netzp .np-in.gross:focus { border-color: var(--blue); }

.netzp .np-legende {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 14px;
  font-size: 11px; color: var(--faint);
}
.netzp .np-legende b { color: var(--dim); font-family: var(--mono); margin-right: 4px; }

/* ---------- Vorgangstabelle ---------- */
.netzp .np-tabelle {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; margin-bottom: 14px;
}
.netzp .np-tz {
  display: grid; grid-template-columns: 70px 1fr 92px 110px; gap: 10px;
  padding: 9px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line-soft);
}
.netzp .np-tz:last-child { border-bottom: none; }
.netzp .np-tk {
  background: var(--erhoben); font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.netzp .np-tz .id { font-family: var(--mono); color: var(--blue); }
.netzp .np-tz .d { font-family: var(--mono); color: var(--txt); }
.netzp .np-tz .vg { font-family: var(--mono); color: var(--dim); }
@media (max-width: 620px) {
  .netzp .np-tz { grid-template-columns: 48px 1fr 66px 74px; gap: 6px; font-size: 11.5px; padding: 8px 10px; }
}

.netzp .np-lage {
  font-size: 13px; line-height: 1.6; color: var(--dim); margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(61,169,255,.08), transparent);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}

/* ---------- Aufgabenkarte ---------- */
.netzp .np-karte {
  background: var(--karte); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; margin-bottom: 14px;
}
.netzp .np-k-kopf {
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  padding: 15px 18px;
  background: linear-gradient(180deg, rgba(61,169,255,.07), transparent);
}
.netzp .np-k-nr { font-family: var(--mono); font-size: 12px; color: var(--blue); white-space: nowrap; }
.netzp .np-k-frage { flex: 1; min-width: 220px; font-size: 14.5px; line-height: 1.55; }
.netzp .np-k-xp {
  font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--green);
  border: 1px solid rgba(61,220,132,.35); padding: 4px 10px; border-radius: 8px;
}

.netzp .np-frage-zeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 4px; font-size: 13.5px;
}
.netzp .np-frage-zeile .l { color: var(--dim); }
.netzp .np-frage-zeile .e { color: var(--faint); font-size: 12.5px; }

/* ---------- Knoepfe ---------- */
.netzp .np-btnreihe { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.netzp .np-btn {
  background: linear-gradient(135deg, #2b6fd0, var(--blue)); border: none; color: #fff;
  font-size: 13px; font-weight: 700; padding: 11px 20px; border-radius: 11px; cursor: pointer;
}
.netzp .np-btn:hover:not(:disabled) { filter: brightness(1.1); }
.netzp .np-btn.geist {
  background: transparent; border: 1px solid var(--line); color: var(--dim); font-weight: 600;
}
.netzp .np-btn.geist:hover { border-color: var(--blue); color: var(--blue); filter: none; }
.netzp .np-btn.go {
  background: linear-gradient(135deg, #1f9e63, var(--green)); color: #04140a; margin-top: 12px;
}

.netzp .np-rueck {
  display: none; margin-top: 14px; padding: 12px 15px; border-radius: 11px;
  font-size: 13px; line-height: 1.6;
}
.netzp .np-rueck.show { display: block; }
.netzp .np-rueck.ok { background: rgba(61,220,132,.10); border: 1px solid var(--green); color: var(--green); }
.netzp .np-rueck.err { background: rgba(255,59,92,.09); border: 1px solid var(--red); color: #ff7d90; }

/* ---------- Demo ---------- */
.netzp .np-demo {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin: 6px 0 16px;
}
.netzp .np-demo-kopf { margin-bottom: 10px; }
.netzp .np-demo-kopf .t {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.netzp .np-demo-buehne { overflow-x: auto; }
.netzp .np-demo-plan { background: transparent; border: none; padding: 0; margin: 0; }

.netzp .np-schritt-text {
  margin-top: 12px; background: rgba(61,169,255,.07);
  border: 1px solid rgba(61,169,255,.28); border-radius: 11px; padding: 12px 14px;
  min-height: 74px;
}
.netzp .np-schritt-text .st {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--blue); margin-bottom: 6px;
}
.netzp .np-schritt-text .tx { font-size: 13px; line-height: 1.68; color: var(--txt); }

.netzp .np-punkte { display: flex; gap: 6px; justify-content: center; margin: 12px 0 10px; flex-wrap: wrap; }
.netzp .np-punkte .pk {
  width: 24px; height: 7px; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.12); border: none; padding: 0;
  transition: background .25s, transform .2s;
}
.netzp .np-punkte .pk:hover { transform: scaleY(1.6); }
.netzp .np-punkte .pk.done { background: rgba(61,220,132,.55); }
.netzp .np-punkte .pk.on { background: var(--blue); transform: scaleY(1.6); }

.netzp .np-steuer { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.netzp .np-demo-b {
  background: var(--erhoben); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--label); font-size: 12px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
}
.netzp .np-demo-b:hover:not(:disabled) { color: var(--txt); border-color: #3a3a58; }
.netzp .np-demo-b:disabled { opacity: .3; cursor: default; }
.netzp .np-demo-b.vor { border-color: rgba(61,169,255,.45); color: var(--blue); }
.netzp .np-demo-b.auto.on { border-color: var(--amber); color: var(--amber); }

/* ---------- Freier Modus ---------- */
.netzp .np-frei-info {
  font-size: 12.5px; line-height: 1.6; color: var(--dim); margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(61,220,132,.06), transparent);
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 12px; padding: 11px 14px;
}
.netzp .np-frei-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.netzp .np-frei-kopf .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.netzp .np-select {
  background: var(--karte-2); border: 1px solid var(--line); color: var(--txt);
  font-family: var(--label); font-size: 13px; padding: 9px 12px; border-radius: 10px;
}
.netzp .np-frei-kopf .np-btn { margin: 0; }

.netzp .np-kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 640px) { .netzp .np-kennzahlen { grid-template-columns: 1fr; } }
.netzp .np-kachel {
  background: var(--karte-2); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 12px 14px; text-align: center;
}
.netzp .np-kachel .v { font-family: var(--mono); font-size: 15px; color: var(--txt); word-break: break-word; }
.netzp .np-kachel .l { font-size: 10.5px; color: var(--faint); margin-top: 5px; }
.netzp .np-kachel.gross { border-color: rgba(61,220,132,.4); background: rgba(61,220,132,.08); }
.netzp .np-kachel.gross .v { color: var(--green); font-size: 19px; }

.netzp .np-regler { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.netzp .np-reg-z {
  display: flex; align-items: center; gap: 11px;
  background: var(--karte-2); border: 1px solid var(--line-soft); border-radius: 11px;
  padding: 9px 13px;
}
.netzp .np-reg-z.krit { border-color: rgba(255,59,92,.42); }
.netzp .np-reg-z .id {
  flex: none; width: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--blue);
}
.netzp .np-reg-z.krit .id { color: var(--red); }
.netzp .np-reg-z .nm { flex: none; width: 150px; font-size: 12.5px; color: var(--dim); }
.netzp .np-range { flex: 1; accent-color: #3da9ff; min-width: 90px; }
.netzp .np-reg-z .w {
  flex: none; width: 66px; text-align: right;
  font-family: var(--mono); font-size: 12px; color: var(--txt);
}
@media (max-width: 620px) {
  .netzp .np-reg-z .nm { width: 96px; font-size: 11.5px; }
  .netzp .np-reg-z .w { width: 56px; font-size: 11px; }
}

/* Beispielkasten in der Erklaerung */
.netzp .np-beispiel {
  background: rgba(61,169,255,.08); border: 1px solid rgba(61,169,255,.3);
  border-radius: 11px; padding: 12px 14px; margin: 12px 0 0;
  font-size: 13px; line-height: 1.65; color: var(--txt);
}
.netzp .np-beispiel .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 6px;
}

/* Kennung im Knoten (A, B, C ...) */
.netzp .np-kennung {
  fill: var(--blue); font-family: 'JetBrains Mono', monospace; font-size: 14px;
  font-weight: 700; text-anchor: middle;
}
.netzp .np-knoten.krit .np-kennung { fill: var(--red); }

/* ==========================================================================
   PRUEFUNGSMODUS
   ========================================================================== */
.netzp .np-pruefkopf {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 14px;
}
.netzp .np-pk { display: flex; flex-direction: column; gap: 4px; }
.netzp .np-pk .l {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.netzp .np-pk b { font-family: var(--mono); font-size: 15px; color: var(--txt); }
.netzp .np-pruefkopf .np-btn { margin-left: auto; }
@media (max-width: 560px) {
  .netzp .np-pruefkopf { gap: 10px; }
  .netzp .np-pruefkopf .np-btn { margin-left: 0; width: 100%; }
}

/* ---------- Auswertung ---------- */
.netzp .np-auswertung {
  display: none; margin-top: 16px;
  background: var(--karte); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
}
.netzp .np-auswertung.show { display: block; }
.netzp .np-aw-kopf {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.netzp .np-aw-kopf .p { font-family: var(--mono); font-size: 17px; color: var(--txt); }
.netzp .np-aw-kopf .pr { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.netzp .np-aw-kopf .no {
  margin-left: auto; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px;
}
.netzp .np-aw-kopf .n-ok { background: rgba(61,220,132,.14); color: var(--green); }
.netzp .np-aw-kopf .n-err { background: rgba(255,59,92,.14); color: #ff7d90; }

.netzp .np-aw-liste { display: flex; flex-direction: column; gap: 7px; }
.netzp .np-aw-z { display: flex; align-items: center; gap: 11px; }
.netzp .np-aw-z .n { flex: none; width: 148px; font-size: 12.5px; color: var(--dim); }
.netzp .np-aw-z .bar {
  flex: 1; height: 14px; border-radius: 5px; overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
}
.netzp .np-aw-z .bar i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #c04a5e, var(--amber));
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.netzp .np-aw-z.voll .bar i { background: linear-gradient(90deg, #1f9e63, var(--green)); }
.netzp .np-aw-z .w {
  flex: none; width: 78px; text-align: right;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
}
.netzp .np-aw-z.voll .w { color: var(--green); }
@media (max-width: 560px) {
  .netzp .np-aw-z .n { width: 104px; font-size: 11.5px; }
  .netzp .np-aw-z .w { width: 62px; font-size: 10.5px; }
}

.netzp .np-aw-rat {
  margin-top: 14px; background: rgba(255,179,71,.08);
  border: 1px solid rgba(255,179,71,.32); border-radius: 11px; padding: 12px 14px;
}
.netzp .np-aw-rat .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 8px;
}
.netzp .np-aw-rat p { margin: 0 0 8px; font-size: 13px; line-height: 1.62; color: var(--txt); }
.netzp .np-aw-rat p:last-child { margin-bottom: 0; }

/* ==========================================================================
   FELDBESCHRIFTUNG, MUSTERKNOTEN UND RECHENHILFE
   ========================================================================== */
/* Kuerzel klein oben in jeder Zelle */
.netzp .np-kuerzel {
  fill: #6b6b90; font-family: 'Inter', system-ui, sans-serif; font-size: 9px;
  font-weight: 700; letter-spacing: .1em; text-anchor: middle;
}
.netzp .np-knoten.krit .np-kuerzel { fill: rgba(255,125,144,.75); }

/* Musterknoten als Legende */
.netzp .np-muster {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 8px 0 14px;
}
.netzp .np-muster-svg { flex: none; }
.netzp .np-m-kurz {
  fill: var(--blue); font-family: 'Inter', system-ui, sans-serif; font-size: 11px;
  font-weight: 700; text-anchor: middle;
}
.netzp .np-muster-liste {
  flex: 1; min-width: 200px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 16px;
}
@media (max-width: 620px) { .netzp .np-muster-liste { grid-template-columns: 1fr; } }
.netzp .np-muster-liste .z { font-size: 12px; color: var(--dim); }
.netzp .np-muster-liste .z b {
  display: inline-block; min-width: 42px; color: var(--blue);
  font-family: var(--mono); font-size: 11.5px;
}

/* Rechenhilfe */
.netzp .np-rechenhilfe {
  background: var(--karte-2); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 12px;
  padding: 13px 15px; margin: 4px 0 14px; min-height: 66px;
}
.netzp .np-rechenhilfe .leer { font-size: 12.5px; color: var(--faint); line-height: 1.6; }
.netzp .np-rechenhilfe .inhalt { display: none; }
.netzp .np-rechenhilfe.aktiv .leer { display: none; }
.netzp .np-rechenhilfe.aktiv .inhalt { display: block; }
.netzp .np-rechenhilfe .wo {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.netzp .np-rechenhilfe .formel {
  font-family: var(--mono); font-size: 14.5px; color: var(--amber);
  line-height: 1.5; margin-bottom: 7px;
}
.netzp .np-rechenhilfe .erkl { font-size: 12.5px; line-height: 1.6; color: var(--dim); }

/* Die im Pruefungsbogen leere Zelle unten in der Mitte */
.netzp .np-leerzelle {
  fill: rgba(255,255,255,.018);
  stroke: none;
}

/* Hinweis, wenn der Plan breiter ist als der sichtbare Bereich */
.netzp .np-scrollhinweis {
  font-size: 11.5px; color: var(--faint); text-align: center;
  margin: -2px 0 12px; letter-spacing: .02em;
}

/* ---------- Zoomleiste ---------- */
.netzp .np-zoom {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 8px 0 6px;
}
.netzp .np-zoom .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-right: 3px;
}
.netzp .np-zoom-b {
  background: var(--karte-2); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--label); font-size: 12px; font-weight: 600;
  padding: 6px 13px; border-radius: 9px; cursor: pointer;
}
.netzp .np-zoom-b:hover { color: var(--txt); border-color: #34344c; }
.netzp .np-zoom-b.on { border-color: var(--blue); color: var(--blue); background: rgba(61,169,255,.10); }
.netzp .np-zoom-b.weit { border-style: dashed; }
.netzp .np-zoom .p {
  font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-left: auto;
}