/* Netzwerk-Notfall - "Netzwerk-Leitstand" (GUI-Neuaufbau 26.10.2026)
   Alle Styles mit Praefix nn_ (Jupi Minispiellabor), Zukunftsstandard
   AGENTS.md 3.13 (GUI Typ 4) + 6.1 (eigenes PWA-Paket).

   Aufbau (von aussen nach innen):
     1. Farben und Grundregeln (Stahl, Cyan, Signalgruen, Papier)
     2. Seitenkulisse: der Leitstand (assets/kulisse.svg) hinter allem
     3. JUPI-Leiste als Konsolen-Blende
     4. Auftragsstreifen: Level, Einsatzauftrag (Papierkarte), Tarif
     5. Layout-Raster: Werkzeugpalette links, Plan in der Mitte, Instrumente rechts
     6. Plan-Panel: der Grundriss als Bauplan in der Konsole
     7. Statuszeile (LCD) und Ring-Legende
     8. Instrumente (Raeume / Geraete / Hinweise)
     9. Werkzeugtasten, Budget-Anzeige, Aktionen
     10. Dialoge: Hilfe, Ergebnis, Bestaetigung
     11. Startmenue (Boot-Bildschirm mit Radar)
     12. Vollbild
     13. Handy
     14. Dark Mode (Nachtbetrieb)
     15. Bedienziele >= 40 x 40 px (Regel 3.13.5) - STEHT AM ENDE, sonst
         gewinnt die spaetere Grundregel aus jupi.css.

   Die .nn_*-Regeln tragen die Optik im Paket, nicht mehr im
   Plattform-Stylesheet (Zukunftsstandard AGENTS.md 3.10). */

/* ---------- 1. Farben ---------- */
:root {
  --nn-tief: #0b1f2b;             /* Seitenhintergrund (Tagbetrieb) */
  --nn-stahl: #102b39;           /* Panel */
  --nn-stahl-hell: #16394b;      /* Panel-Kante */
  --nn-kante: #1f5470;           /* Rahmen und Trennlinien */
  --nn-kante-hell: #2f83a8;      /* leuchtende Rahmenkante */
  --nn-cyan: #4fd6ee;            /* Leitstand-Akzent */
  --nn-cyan-tief: #1d8fae;
  --nn-gruen: #6ee38f;           /* Signal sehr gut / alles ok */
  --nn-gelb: #f5c344;            /* Signal gut */
  --nn-orange: #ff8a4c;          /* Signal brauchbar */
  --nn-rot: #ff6b6b;             /* Fehler / Warnung */
  --nn-text: #d7ecf4;
  --nn-text-matt: #93b6c5;
  --nn-papier: #f4e7ca;          /* Auftragskarte */
  --nn-papier-kante: #c2a26a;
  --nn-tinte: #43351f;           /* Tinte auf der Papierkarte */
  --nn-schrift: "Segoe UI", system-ui, -apple-system, sans-serif;
  --nn-mono: Consolas, "SF Mono", "Roboto Mono", "Courier New", monospace;
}

/* ---------- 2. Seitenkulisse: der Leitstand ---------- */
/* Der Seitenhintergrund traegt die Technik-Optik des Spiels: offenes Meer
   aus Raster, Leiterbahnen, Radar-Ringen und Status-LEDs (kulisse.svg,
   Generator .zcode/netzwerk-notfall-kulisse.cjs). Muster: Schatzkarte
   (Piraten-Meer), Sternenfusion (Weltraum), Bruch-Pizza (Pizzeria).
   Alle Regeln haengen an body.jupi.nn_body, damit sie die Grundregeln aus
   jupi.css in BEIDEN Themes schlagen. */
body.jupi.nn_body {
  min-height: 100vh;
  font-family: var(--nn-schrift);
  background-repeat: no-repeat;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(79, 214, 238, .16) 0%, transparent 62%),
    radial-gradient(820px 520px at 100% 4%, rgba(110, 227, 143, .08) 0%, transparent 58%),
    radial-gradient(1200px 560px at 0% 104%, rgba(0, 0, 0, .55) 0%, transparent 64%),
    url("assets/kulisse.svg") repeat,
    var(--nn-tief);
}
/* Die weisse Plattform-Karte darf den Leitstand nicht zudecken. */
body.jupi.nn_body .jupi_container > .jupi_main { background: transparent; }
/* Der Fuss klebt unten auf dem Leitstand - die Hauptzeile (1fr) schluckt
   den Platzueberfluss, die Kopfzeile bleibt oben schlank (Muster
   Rechen-Raumschiff). */
body.jupi.nn_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.nn_body .jupi_container { min-height: 100dvh; }
}
body.jupi.nn_body .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
  margin-top: 1.2rem;
  padding: 1rem;
}
body.jupi.nn_body .jupi_footer_text { color: var(--nn-text-matt); }
body.jupi.nn_body .jupi_footer_text a { color: var(--nn-cyan); }
body.jupi.nn_body .jupi_footer_text a:hover { color: #8ee9f8; }
/* Der Sprung-zum-Inhalt-Knopf (nur fuer Screenreader sichtbar) soll nicht
   als weisser Kasten aufblitzen. */
body.jupi.nn_body .bypass a { color: var(--nn-cyan); }

/* ---------- 3. JUPI-Leiste als Konsolen-Blende ---------- */
/* Struktur bleibt die Pflicht: links Zurück-Pille, mittig Paket-Logo +
   Name, rechts Sprache + Dark Mode (Regel 3.13.2). Nur die Oberflaeche
   bekommt die Leitstand-Optik - dunkler Stahl mit Cyan-Kante. */
.nn_header,
header.jupi_header.nn_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  border-bottom: 3px solid var(--nn-kante);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(120, 220, 240, .16);
  background:
    radial-gradient(circle at 14% 28%, rgba(79, 214, 238, .12) 0 10%, transparent 11%),
    radial-gradient(circle at 84% 72%, rgba(0, 0, 0, .38) 0 9%, transparent 10%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .24) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #17405a 0%, #102c3d 52%, #0a1d29 100%);
}
.nn_brand { display: flex; align-items: center; justify-self: center; gap: .6rem; min-width: 0; }
.nn_brand img {
  display: block; flex: none; width: 40px; height: 40px; object-fit: contain; aspect-ratio: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.nn_brand h1 {
  margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: .01em;
  color: #eafaff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 14px rgba(79, 214, 238, .55), 0 2px 0 rgba(0, 0, 0, .45);
}
.nn_header .jupi_werkzeuge { justify-self: end; display: inline-flex; align-items: center; gap: .4rem; }
.nn_header #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.nn_header .jupi_sprachen_select {
  background: rgba(3, 18, 26, .8); color: var(--nn-cyan);
  border: 2px solid var(--nn-kante); font-weight: 700; border-radius: .6rem;
  max-width: 13rem; min-height: 40px;
}
.nn_header .jupi_sprachen_select option { background: #0b1f2b; color: var(--nn-text); }
/* Dark-Mode-Pill 74 x 40 px (GUI 3.13.2) - die Plattform-Pill ist nur
   56 x 30 px und bliebe als einziges Bedienteil in der Leiste unter dem
   40-px-Ziel. */
.nn_header .jupi_theme_switch {
  width: 74px; height: 40px; min-width: 74px; padding: 0;
  background: rgba(3, 18, 26, .8); border: 2px solid var(--nn-kante-hell);
}
.nn_header .jupi_theme_switch:hover { background: rgba(15, 55, 72, .9); }
.nn_header .jts_thumb { top: 3px; bottom: auto; left: 4px; width: 32px; height: 32px; border-radius: 50%; }
html[data-theme="dark"] .nn_header .jts_thumb { left: calc(100% - 36px); }
.nn_header .jts_sun { left: 9px; }
.nn_header .jts_moon { right: 9px; }
.nn_header .jupi_nav_back {
  position: static; justify-self: start;   /* sonst dehnt das Grid-Element die Spalte */
  display: inline-flex; align-items: center;
  min-height: 40px; padding: .4rem .85rem;
  border-radius: 999px; font-size: .88rem; font-weight: 800; text-decoration: none;
  white-space: nowrap;
  color: #04222d; background: linear-gradient(180deg, #8ee9f8 0%, #35b9d6 100%);
  border: 2px solid #a6f0fb;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.nn_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #a6f0fb 0%, #4ccbe6 100%);
  transform: translateY(-1px);
}

/* ---------- 4. Auftragsstreifen ---------- */
/* Links der Level-Waehler, mittig der Einsatzauftrag als Papierkarte,
   rechts Tarif-Anzeige und Bedienknoepfe. */
.nn_kopf {
  grid-area: kopf;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem;
  background: linear-gradient(180deg, #12303f, #0c2330);
  border: 2px solid var(--nn-kante); border-radius: .9rem;
  padding: .55rem .7rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(120, 220, 240, .12);
}
.nn_levelwahl {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 800; color: var(--nn-cyan); flex: 0 1 auto;
}
.nn_levelwahl_mark { font-size: 1.15rem; line-height: 1; }
.nn_levelwahl select {
  min-height: 40px; max-width: 15rem;
  background: rgba(3, 18, 26, .85); color: var(--nn-text);
  border: 2px solid var(--nn-kante-hell); border-radius: .55rem;
  font-weight: 700; padding: .35rem .6rem;
}
.nn_levelwahl select option { background: #0b1f2b; color: var(--nn-text); }
/* Der Einsatzauftrag haengt als Papierkarte an der Konsole - die warme
   Farbe sticht bewusst gegen das kalte Cyan der Instrumente. */
.nn_auftrag {
  position: relative; flex: 1 1 22rem; min-width: 0;
  display: flex; align-items: center;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .5) 0 18%, transparent 19%),
    linear-gradient(180deg, var(--nn-papier), #e5d3ab);
  border: 1px solid var(--nn-papier-kante);
  border-radius: .35rem;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
  padding: .4rem .8rem;
}
/* Der Reiter am oberen Rand sieht aus wie eine Befestigungsklammer. */
.nn_auftrag_was {
  position: absolute; top: -7px; left: 1.2rem; width: 3.2rem; height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #9fd8e6, #4f9cb4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.nn_aufgabe {
  margin: 0; font-size: .92rem; line-height: 1.45; color: var(--nn-tinte);
  overflow-wrap: anywhere;
}
.nn_aufgabe strong { color: #7a4a12; }
.nn_kopf_rechts { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.nn_box {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(3, 18, 26, .8); border: 2px solid var(--nn-kante-hell);
  border-radius: .5rem; padding: .2rem .55rem; font-weight: 800; color: var(--nn-cyan);
}
.nn_box_label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nn-text-matt); }
#nn_tarif { white-space: nowrap; }
.nn_iconbtn {
  background: linear-gradient(180deg, #1a4155, #102b39);
  border: 2px solid var(--nn-kante-hell); border-radius: .5rem;
  color: var(--nn-text); font-size: 1.1rem; padding: .2rem .5rem; cursor: pointer;
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.nn_iconbtn:hover { background: linear-gradient(180deg, #22536b, #16394b); color: #fff; }
.nn_iconbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }

/* ---------- 5. Layout-Raster ---------- */
/* Drei Zonen: links die Werkzeugpalette, mittig der Plan, rechts die
   Instrumente - darunter die Aktionsleiste (Budget + Test).
   Die Palette steht LINKS neben dem Plan (wie in einem Planungswerkzeug) -
   so bleibt der Bauplan breit und der "Test starten"-Knopf liegt sichtbar
   in der Aktionsleiste statt unterhalb des Bildschirmrands. */
.nn_main {
  max-width: 1560px; margin: 0 auto; padding: .7rem 1rem 1.4rem;
  display: grid; gap: .7rem;
  grid-template-columns: 15.5rem minmax(0, 1fr) 17rem;
  grid-template-areas:
    "kopf kopf   kopf"
    "werk buehne instr"
    "hud  hud    hud";
  align-items: start;
}
/* Die Palette und die Aktionsleiste teilen sich den Bereich .nn_leiste,
   sitzen aber an verschiedenen Stellen im Raster. */
.nn_leiste { display: contents; }
.nn_werkzeuge { grid-area: werk; }
.nn_hud { grid-area: hud; }
.nn_buehne_wrap { grid-area: buehne; min-width: 0; }
.nn_seite { grid-area: instr; }

/* ---------- 6. Plan-Panel: der Grundriss in der Konsole ---------- */
.nn_buehne {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: .75rem .8rem .8rem;
  border: 2px solid var(--nn-kante); border-radius: .9rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(79, 214, 238, .10) 0%, transparent 62%),
    repeating-linear-gradient(0deg, rgba(79, 214, 238, .05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(79, 214, 238, .05) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #0e2532, #0a1c27);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(120, 220, 240, .12);
}
.nn_feld { width: 100%; display: flex; justify-content: center; min-width: 0; }
/* Der Plan liegt wie eine Landkarte hinter Glas im Rahmen. */
.nn_plan {
  position: relative; max-width: 100%;
  padding: .3rem; border-radius: .5rem;
  background: linear-gradient(180deg, #17394b, #0d2431);
  border: 2px solid var(--nn-kante-hell);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .45);
}
/* Eckenwinkel wie auf einem Zielgeraet. */
.nn_plan::before, .nn_plan::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
}
.nn_plan::before {
  top: -3px; left: -3px;
  border-top: 3px solid var(--nn-cyan); border-left: 3px solid var(--nn-cyan);
  border-radius: .5rem 0 0 0;
}
.nn_plan::after {
  bottom: -3px; right: -3px;
  border-bottom: 3px solid var(--nn-cyan); border-right: 3px solid var(--nn-cyan);
  border-radius: 0 0 .5rem 0;
}
#nn_canvas {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: .3rem; border: 1px solid rgba(0, 0, 0, .45);
  background: #f7f5ef;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  touch-action: manipulation; cursor: crosshair;
}

/* ---------- 7. Statuszeile (LCD) und Ring-Legende ---------- */
.nn_tip {
  margin: 0; width: 100%;
  font-family: var(--nn-mono); font-size: .86rem; font-weight: 600; line-height: 1.4;
  color: var(--nn-cyan); text-align: center;
  background: linear-gradient(180deg, rgba(2, 14, 20, .96), rgba(2, 10, 15, .96));
  border: 1px solid var(--nn-kante); border-radius: .4rem;
  padding: .4rem .7rem; min-height: 1.4em;
  box-shadow: inset 0 0 16px rgba(79, 214, 238, .13);
  text-shadow: 0 0 9px rgba(79, 214, 238, .4);
}
.nn_legende {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; justify-content: center;
  align-items: center; font-size: .76rem; color: var(--nn-text-matt); font-weight: 700;
}
/* Die Legende zeigt die drei Zonen der Waermekarte als Farbfelder -
   so entspricht sie dem, was der Plan wirklich zeigt. */
.nn_leg { display: inline-flex; align-items: center; gap: .35rem; }
.nn_leg i { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; }
.nn_punkt_gruen {
  background: rgba(46, 125, 50, .55); border: 1.5px solid var(--nn-gruen);
  box-shadow: 0 0 8px rgba(110, 227, 143, .55);
}
.nn_punkt_gelb {
  background: rgba(249, 168, 37, .45); border: 1.5px solid var(--nn-gelb);
  box-shadow: 0 0 8px rgba(245, 195, 68, .55);
}
.nn_punkt_orange {
  background: rgba(239, 108, 0, .38); border: 1.5px dashed var(--nn-orange);
  box-shadow: 0 0 8px rgba(255, 138, 76, .45);
}
.nn_leg_hinweis { font-weight: 600; color: var(--nn-text-matt); opacity: .85; }

/* ---------- 8. Instrumente (Raeume / Geraete / Hinweise) ---------- */
.nn_seite {
  background: linear-gradient(180deg, #11303e, #0b2029);
  border: 2px solid var(--nn-kante); border-radius: .9rem;
  padding: .6rem .7rem .8rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(120, 220, 240, .10);
  max-height: 46rem; overflow: auto;
}
.nn_seite h2 {
  font-size: .7rem; margin: .8rem 0 .4rem; color: var(--nn-cyan);
  text-transform: uppercase; letter-spacing: .12em;
  padding-bottom: .25rem; border-bottom: 1px solid var(--nn-kante);
}
.nn_seite h2:first-child { margin-top: .1rem; }
.nn_liste { display: flex; flex-direction: column; gap: .3rem; }
.nn_zeile {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid var(--nn-kante);
  border-radius: .4rem; padding: .3rem .5rem;
  font-size: .82rem; color: var(--nn-text);
}
.nn_zeile.nn_ok { border-left-color: var(--nn-gruen); background: rgba(110, 227, 143, .10); }
.nn_zeile.nn_schlecht { border-left-color: var(--nn-rot); background: rgba(255, 107, 107, .10); }
.nn_zeile.nn_aktiv { outline: 2px solid var(--nn-cyan); outline-offset: 1px; }
.nn_zeile_wert { font-weight: 700; white-space: nowrap; }
.nn_zeile small { font-weight: 600; opacity: .75; }
.nn_mini {
  background: linear-gradient(180deg, #1a4155, #102b39);
  border: 1.5px solid var(--nn-kante-hell); border-radius: .35rem;
  color: var(--nn-text); font-size: .72rem; font-weight: 800;
  padding: .1rem .35rem; cursor: pointer;
  min-width: 40px; min-height: 40px;
}
.nn_mini:hover { background: linear-gradient(180deg, #22536b, #16394b); }
.nn_mini_rot { border-color: rgba(255, 107, 107, .6); color: #ffb3b3; }
.nn_mini_rot:hover { background: rgba(255, 107, 107, .18); }
.nn_leer { font-size: .82rem; color: var(--nn-text-matt); margin: .25rem 0; }
.nn_hinweise { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--nn-text); }
.nn_hinweise li { margin: .2rem 0; }
.nn_hinweise li.nn_leer { list-style: none; margin-left: -1.1rem; }

/* ---------- 9. Werkzeugpalette, Budget, Aktionen ---------- */
/* Die Palette ist ein eigenes Panel in der linken Spalte. */
.nn_werkzeuge {
  display: flex; flex-direction: column; gap: .3rem;
  background: linear-gradient(180deg, #11303e, #0b2029);
  border: 2px solid var(--nn-kante); border-radius: .9rem;
  padding: .6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(120, 220, 240, .10);
}
/* Jede Zeile der Palette ist ein Tastenbrett-Knopf mit Status-LED links.
   Die LED leuchtet nur, wenn das Werkzeug aktiv ist - so sieht man auf
   einen Blick, welches Werkzeug gerade scharf ist. */
.nn_werkzeug {
  position: relative;
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: linear-gradient(180deg, #173b4d, #0e2a38);
  border: 1.5px solid var(--nn-kante); border-radius: .5rem;
  padding: .38rem .6rem .38rem .8rem;
  font-size: .8rem; font-weight: 700; color: var(--nn-text);
  cursor: pointer; min-height: 40px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(140, 220, 240, .10);
  transition: background .15s, transform .1s, box-shadow .1s;
}
/* Die Status-LED: kleine runde Leuchte am linken Rand */
.nn_werkzeug::before {
  content: ""; flex: 0 0 auto;
  width: .5rem; height: .5rem; border-radius: 999px;
  background: #0a2534;
  border: 1.5px solid #35627a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6);
}
.nn_werkzeug:hover { background: linear-gradient(180deg, #1e4c63, #123444); transform: translateY(-1px); }
.nn_werkzeug:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
/* Das aktive Werkzeug leuchtet - wie ein aktives Relais auf der Konsole. */
.nn_werkzeug.is_aktiv {
  background: linear-gradient(180deg, #2ba9cc, #147a99);
  border-color: var(--nn-cyan); color: #04222d;
  box-shadow: 0 3px 0 #0a3b4b, 0 0 16px rgba(79, 214, 238, .45);
}
.nn_werkzeug.is_aktiv::before {
  background: #b9ffd8;
  border-color: #eafff5;
  box-shadow: 0 0 8px rgba(150, 255, 200, .95), inset 0 0 3px rgba(255, 255, 255, .9);
}
/* Geraeteknoepfe tragen ihre Eigenfarbe an der LED - so ist auf einen
   Blick erkennbar, welche Geraete es im Werkzeugkasten gibt. */
.nn_werkzeug[data-werkzeug="router"]::before { border-color: #7cc98f; }
.nn_werkzeug[data-werkzeug="ap"]::before { border-color: #4fc3c7; }
.nn_werkzeug[data-werkzeug="switch"]::before { border-color: #90a4ae; }
.nn_werkzeug[data-werkzeug="repeater"]::before { border-color: #ffb74d; }
.nn_werkzeug[data-werkzeug="lan"]::before { border-color: #a1887f; }
.nn_werkzeug.nn_gefahr { color: #ffb3b3; border-color: rgba(255, 107, 107, .45); }
.nn_werkzeug.nn_gefahr:hover { background: linear-gradient(180deg, #5a2530, #3d1a22); color: #ffd7d7; }
.nn_werkzeug.nn_gefahr::before { border-color: #b3575f; }
/* Der Text der Palette steht in einem eigenen Span - der Preis ist ein
   Chip mit eigener Farbe, damit die Ausgaben schnell scanbar sind. */
.nn_werkzeug > span { flex: 1 1 auto; min-width: 0; }
.nn_trenner {
  width: 100%; height: 1px; margin: .2rem 0;
  background: repeating-linear-gradient(90deg, var(--nn-kante) 0 6px, transparent 6px 13px);
}

/* Die Aktionsleiste liegt unter dem Plan: Budget links, die Aktionen
   rechtsbuendig. */
.nn_hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
  background: linear-gradient(180deg, #11303e, #0b2029);
  border: 2px solid var(--nn-kante); border-radius: .9rem;
  padding: .5rem .6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(120, 220, 240, .10);
}
.nn_hud .jupi_btn,
.nn_start_knoepfe .jupi_btn,
.nn_knopfzeile .jupi_btn {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
/* Knoepfe der Konsole: leuchtende Hauptaktion, stille Nebenaktion. */
.nn_hud .jupi_btn,
.nn_start_knoepfe .jupi_btn,
.nn_knopfzeile .jupi_btn {
  border-radius: .5rem; font-size: .86rem; font-weight: 800;
  background: linear-gradient(180deg, #2ba9cc, #147a99);
  color: #04222d; border: 2px solid var(--nn-cyan);
  box-shadow: 0 3px 0 #0a3b4b;
}
.nn_hud .jupi_btn:hover,
.nn_start_knoepfe .jupi_btn:hover,
.nn_knopfzeile .jupi_btn:hover { background: linear-gradient(180deg, #45c3e4, #1a8bad); transform: translateY(-1px); }
.nn_hud .jupi_btn.jupi_btn_alt,
.nn_start_knoepfe .jupi_btn.jupi_btn_alt,
.nn_knopfzeile .jupi_btn.jupi_btn_alt {
  background: linear-gradient(180deg, #1a4155, #102b39);
  color: var(--nn-cyan); border-color: var(--nn-kante-hell);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.nn_hud .jupi_btn.jupi_btn_alt:hover,
.nn_start_knoepfe .jupi_btn.jupi_btn_alt:hover,
.nn_knopfzeile .jupi_btn.jupi_btn_alt:hover { background: linear-gradient(180deg, #22536b, #16394b); }
.nn_hud .jupi_btn.is_aktiv {
  background: linear-gradient(180deg, #2ba9cc, #147a99);
  color: #04222d; border-color: var(--nn-cyan);
}
/* Die Aktionsgruppe sitzt rechtsbuendig neben der Budget-Anzeige. */
.nn_hud > #nn_karte { margin-left: auto; }
/* Wichtig: die Aktions-Knoepfe bekommen display:inline-flex - das gewinnt
   gegen die [hidden]-Regel des Browsers. Ohne diese Zeile stuenden
   "Test starten" und "Test beenden" gleichzeitig in der Leiste. */
.nn_hud .jupi_btn[hidden] { display: none; }
.nn_hud #nn_sim_start {
  background: linear-gradient(180deg, #56d98a, #23a35c);
  border-color: var(--nn-gruen); color: #052515;
  box-shadow: 0 3px 0 #0d4b2a, 0 0 16px rgba(110, 227, 143, .35);
}
.nn_hud #nn_sim_start:hover { background: linear-gradient(180deg, #6fe89c, #2bb96a); }
.nn_hud #nn_sim_stop {
  background: linear-gradient(180deg, #ff8a8a, #c23b3b);
  border-color: #ff9a9a; color: #2b0606;
  box-shadow: 0 3px 0 #6d1f1f;
}
.nn_budget { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem .4rem;
             flex: 1 1 16rem; max-width: 30rem; }
.nn_budget .nn_box_label { grid-column: 1; grid-row: 1; }
#nn_budget_text { grid-column: 2; grid-row: 1; font-weight: 800; font-size: .82rem; color: var(--nn-text); white-space: nowrap; }
.nn_budgetleiste {
  grid-column: 1 / -1; grid-row: 2;
  width: 100%; height: .9rem; border-radius: 999px; overflow: hidden;
  background: rgba(2, 12, 18, .9);
  border: 1.5px solid var(--nn-kante-hell);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#nn_budget_fuellung {
  height: 100%; width: 0; transition: width .3s;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, #23a35c, var(--nn-gruen));
}
#nn_budget_fuellung.nn_balken_gelb {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, #c9971f, var(--nn-gelb));
}
#nn_budget_fuellung.nn_balken_rot {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, #b63a3a, #ff8a8a);
}

/* ---------- 10. Dialoge ---------- */
.nn_modal {
  position: fixed; inset: 0; background: rgba(3, 12, 18, .72); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  backdrop-filter: blur(3px);
}
.nn_modal[hidden] { display: none; }
.nn_dialog {
  background: linear-gradient(180deg, #14344a, #0a1e2a);
  color: var(--nn-text);
  border: 2px solid var(--nn-kante-hell); border-radius: .9rem;
  padding: 1.1rem 1.2rem;
  max-width: 34rem; width: 100%; max-height: 88vh; overflow: auto; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(120, 220, 240, .16);
}
.nn_dialog.nn_dialog_wide { max-width: 44rem; text-align: left; }
.nn_dialog h2 { margin: 0 0 .5rem; color: var(--nn-cyan); text-shadow: 0 0 12px rgba(79, 214, 238, .35); }
.nn_dialog h3 { margin: .9rem 0 .35rem; font-size: .95rem; color: var(--nn-cyan); }
.nn_sterne { font-size: 2.1rem; color: var(--nn-gelb); letter-spacing: .15em; margin: .2rem 0; text-shadow: 0 0 16px rgba(245, 195, 68, .5); }
.nn_ende_liste { display: flex; flex-direction: column; gap: .3rem; text-align: left; }
.nn_knopfzeile { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .9rem; }
.nn_knopfzeile button[hidden] { display: none; }

/* ❓-Hilfe-Fenster (natives <dialog>) */
.nn_hilfe_inhalt { font-size: .9rem; color: var(--nn-text); max-height: 62vh; overflow: auto; }
.nn_hilfe_inhalt h4 {
  margin: .8rem 0 .3rem; color: var(--nn-cyan);
  text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
  border-bottom: 1px solid var(--nn-kante); padding-bottom: .2rem;
}
.nn_hilfe_inhalt ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
.nn_hilfe_inhalt li { margin: .22rem 0; line-height: 1.5; }
.nn_hilfe_inhalt strong { color: #ffe9ab; }
.nn_hinweis_klein { font-size: .82rem; color: var(--nn-text-matt); }
#nn_hilfe_modal::backdrop { background: rgba(3, 12, 18, .74); }

/* ---------- 11. Startmenue (Boot-Bildschirm) ---------- */
.nn_start { z-index: 70; }
.nn_start_panel {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(79, 214, 238, .18) 0%, transparent 60%),
    linear-gradient(180deg, #14344a, #091c26);
  color: var(--nn-text);
  border: 2px solid var(--nn-kante-hell); border-radius: 1rem;
  padding: 1.4rem 1.5rem; max-width: 36rem; width: 100%; max-height: 90vh;
  overflow: auto; text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(120, 220, 240, .18);
}
/* Radar-Schweif hinter dem Logo (reine Dekoration). */
.nn_start_radar {
  position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%);
  width: 9.5rem; height: 9.5rem; border-radius: 50%; pointer-events: none; z-index: 0;
  background:
    conic-gradient(from 0deg, rgba(79, 214, 238, .22) 0deg 14deg, transparent 14deg 360deg),
    repeating-radial-gradient(circle at 50% 50%, rgba(79, 214, 238, .20) 0 1.5px, transparent 1.5px 15px);
  -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 70%);
  mask-image: radial-gradient(circle, #000 48%, transparent 70%);
}
.nn_start_panel > div { position: relative; z-index: 1; }
.nn_start_logo {
  position: relative; z-index: 1;
  width: 5.2rem; height: 5.2rem; display: block; margin: 0 auto .3rem;
  filter: drop-shadow(0 0 16px rgba(79, 214, 238, .5));
}
.nn_start_panel h2 {
  margin: .1rem 0 .3rem; font-size: 1.55rem; color: #eafaff;
  text-shadow: 0 0 18px rgba(79, 214, 238, .5);
}
.nn_start_unter { font-weight: 700; color: var(--nn-text-matt); margin: 0 0 .7rem; }
.nn_start_lern {
  background: rgba(79, 214, 238, .10);
  border: 1px solid var(--nn-kante-hell); border-left: 4px solid var(--nn-cyan);
  color: #d9f4fb; border-radius: .5rem; padding: .5rem .75rem;
  font-size: .9rem; margin: 0; text-align: left;
}
.nn_start_knoepfe { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
.nn_start_knoepfe .jupi_btn { width: 100%; }
.nn_start_schalter { display: flex; flex-wrap: wrap; gap: .5rem; }
.nn_start_schalter .jupi_btn { flex: 1 1 10rem; }
.nn_start_spielen {
  font-size: 1.15rem; padding: .7rem 1rem;
  background: linear-gradient(180deg, #56d98a, #23a35c) !important;
  border-color: var(--nn-gruen) !important; color: #052515 !important;
  box-shadow: 0 4px 0 #0d4b2a, 0 0 22px rgba(110, 227, 143, .35) !important;
}
.nn_start_spielen:hover { background: linear-gradient(180deg, #6fe89c, #2bb96a) !important; }
.nn_start_best { margin: .9rem 0 0; font-weight: 800; color: var(--nn-gelb); }
.nn_start_infoansicht { text-align: left; }
.nn_start_infoansicht h3 { margin: .2rem 0 .5rem; color: var(--nn-cyan); }
.nn_start_info_text { font-size: .93rem; color: var(--nn-text); line-height: 1.55; }
.nn_start_infoansicht .nn_start_lern { margin-top: .7rem; }
.nn_start_zurueck { margin-top: .9rem; }

/* ---------- 12. Vollbild ---------- */
#nn_buehne:fullscreen {
  padding: .5rem; background: #08161e; justify-content: center;
}
#nn_buehne:fullscreen .nn_feld { flex: 1 1 auto; align-items: center; }
#nn_buehne:fullscreen .nn_plan { max-width: min(96vw, 1200px); }
#nn_buehne:fullscreen #nn_canvas { max-height: 76vh; width: auto; max-width: 96vw; }

/* ---------- 13. Handy ---------- */
@media (max-width: 1240px) {
  /* Die Instrumente wandern unter den Plan (die Palette bleibt links). */
  .nn_main {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    grid-template-areas:
      "kopf  kopf"
      "werk  buehne"
      "werk  instr"
      "hud   hud";
  }
  .nn_seite { max-height: none; }
}
@media (max-width: 980px) {
  /* Eine Spalte: erst der Plan, dann die Palette, dann die Instrumente,
     zuletzt die Aktionsleiste. */
  .nn_main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "buehne" "werk" "instr" "hud";
  }
  .nn_werkzeuge { flex-direction: row; flex-wrap: wrap; }
  .nn_werkzeug { width: auto; }
  .nn_trenner { width: 1px; height: 1.3rem; margin: 0 .15rem; background: var(--nn-kante); }
  .nn_hud > #nn_karte { margin-left: 0; }
  .nn_aufgabe { font-size: .88rem; }
}
@media (max-width: 800px) {
  .nn_header,
  header.jupi_header.nn_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem; padding: .45rem .6rem;
  }
  .nn_brand { grid-row: 1; grid-column: 1 / -1; }
  .nn_brand img { width: 36px; height: 36px; }
  .nn_brand h1 { font-size: 1.05rem; }
  .nn_header .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: .85rem; }
  .nn_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  .nn_header .jupi_sprachen_select { max-width: 9rem; }
}
@media (max-width: 620px) {
  .nn_main { padding: .5rem .5rem 1.2rem; }
  .nn_kopf { padding: .5rem; gap: .45rem; }
  .nn_auftrag { flex: 1 1 100%; }
  .nn_kopf_rechts { flex: 1 1 100%; justify-content: space-between; }
  .nn_levelwahl select { max-width: 100%; }
  /* Tarif-Box kompakt, damit sie neben den drei Knoepfen Platz hat. */
  .nn_box { padding: .15rem .4rem; font-size: .82rem; gap: .3rem; }
  .nn_box_label { font-size: .58rem; letter-spacing: .05em; }
  .nn_buehne { padding: .55rem .5rem .65rem; }
  .nn_tip { font-size: .8rem; }
  .nn_legende { font-size: .72rem; }
  .nn_werkzeug { font-size: .78rem; padding: .3rem .5rem; }
  .nn_start_panel { padding: 1.1rem .9rem; }
}

/* ---------- 14. Dark Mode (Nachtbetrieb) ---------- */
/* Der Leitstand ist in beiden Themes dunkel; im Dark Mode sinkt er noch
   tiefer, die Cyan-Kanten leuchten dann stärker. */
html[data-theme="dark"] {
  --nn-tief: #071620;
  --nn-stahl: #0d2431;
  --nn-kante: #1a4a63;
  --nn-kante-hell: #2b7c9e;
}
html[data-theme="dark"] body.jupi.nn_body {
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(79, 214, 238, .13) 0%, transparent 62%),
    radial-gradient(1200px 560px at 0% 104%, rgba(0, 0, 0, .62) 0%, transparent 64%),
    url("assets/kulisse.svg") repeat,
    var(--nn-tief);
}
html[data-theme="dark"] .nn_header,
header.jupi_header.nn_header {
  background:
    radial-gradient(circle at 14% 28%, rgba(79, 214, 238, .10) 0 10%, transparent 11%),
    radial-gradient(circle at 84% 72%, rgba(0, 0, 0, .5) 0 9%, transparent 10%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #0f2c3b 0%, #0a1e2a 52%, #061219 100%);
}
html[data-theme="dark"] .nn_kopf,
html[data-theme="dark"] .nn_leiste,
html[data-theme="dark"] .nn_seite,
html[data-theme="dark"] .nn_buehne {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(79, 214, 238, .07) 0%, transparent 60%),
    linear-gradient(180deg, #0d2532, #071820);
}
html[data-theme="dark"] .nn_buehne {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(79, 214, 238, .09) 0%, transparent 62%),
    repeating-linear-gradient(0deg, rgba(79, 214, 238, .045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(79, 214, 238, .045) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #0a1e29, #06141c);
}
html[data-theme="dark"] .nn_header .jupi_nav_back {
  /* Die Plattform-Regel 3.13.2 faerbt die Zurueck-Pille im Dark Mode orange -
     im Leitstand bleibt sie cyan (hoehere Spezifitaet). */
  color: #04222d;
  background: linear-gradient(180deg, #8ee9f8 0%, #35b9d6 100%);
  border-color: #a6f0fb;
}
html[data-theme="dark"] .nn_header .jupi_nav_back:hover { background: linear-gradient(180deg, #a6f0fb 0%, #4ccbe6 100%); }
/* Achtung: Diese Dunkel-Regeln sind spezifischer als .nn_werkzeug.is_aktiv
   und .nn_zeile.nn_ok - deshalb schliessen sie die Zustandsfarben aus
   (:not), sonst verliert das aktive Werkzeug sein Leuchten. */
html[data-theme="dark"] .nn_werkzeug:not(.is_aktiv) { background: linear-gradient(180deg, #123141, #0a1f2b); }
html[data-theme="dark"] .nn_werkzeug:not(.is_aktiv):hover { background: linear-gradient(180deg, #173d51, #0d2734); }
html[data-theme="dark"] .nn_zeile:not(.nn_ok):not(.nn_schlecht) { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .nn_dialog,
html[data-theme="dark"] .nn_start_panel { background: linear-gradient(180deg, #0d2836, #06131b); }
html[data-theme="dark"] .nn_start_radar { opacity: .8; }

/* ---------- 15. Bedienziele >= 40 x 40 px (Regel 3.13.5) ----------
   STEHT AM ENDE, sonst gewinnt die spaetere Grundregel aus jupi.css. */
.nn_werkzeug,
.nn_iconbtn,
.nn_mini,
.nn_hud .jupi_btn,
.nn_start_knoepfe .jupi_btn,
.nn_knopfzeile .jupi_btn,
.nn_levelwahl select,
.nn_header .jupi_nav_back { min-height: 40px; }
.nn_iconbtn, .nn_mini { min-width: 40px; }