/* mittelalter.css - Neumark 1400: Oberflächen-Stil "Pergament, Holz & Messing"
   Wird NACH styles.css geladen und überschreibt nur Optik, keine Layouts.
   ========================================================================= */

html, body.nm_body {
  --nm-serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;
  --nm-bg: #2a1c10;
  --nm-pergament: #efe2c0;
  --nm-pergament-hell: #f6ecd2;
  --nm-pergament-dunkel: #dfcd9f;
  --nm-surface: rgba(240, 226, 190, 0.96);
  --nm-surface-strong: #f5ead0;
  --nm-border: #7a5530;
  --nm-text: #2e1d0e;
  --nm-muted: #6b5233;
  --nm-accent: #5d7a2e;
  --nm-accent-hover: #4a6423;
  --nm-gold: #b8862b;
  --nm-messing: #c9983a;
  --nm-warn: #9c2b1f;
  --nm-holz: #4a2f19;
  --nm-holz-hell: #6a4526;
  --nm-holz-dunkel: #2f1d0e;
  --nm-tinte: #3a2410;
  --nm-korn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.08  0 0 0 0.16 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  --nm-maserung: repeating-linear-gradient(91deg, transparent 0 9px, rgba(17,8,2,0.11) 10px, rgba(255,220,160,0.035) 11px, transparent 13px 23px);
  font-family: var(--nm-serif);
}

html[data-theme="dark"] body.nm_body {
  --nm-bg: #14100c;
  --nm-pergament: #3a2e20;
  --nm-pergament-hell: #46382a;
  --nm-pergament-dunkel: #2e2418;
  --nm-surface: rgba(52, 40, 28, 0.96);
  --nm-surface-strong: #3d3022;
  --nm-border: #a97c45;
  --nm-text: #f0e3c6;
  --nm-muted: #c9b48c;
  --nm-accent: #8fae4c;
  --nm-accent-hover: #a2c35a;
  --nm-gold: #e0b050;
  --nm-warn: #e0624f;
  --nm-holz: #2a1b0f;
  --nm-holz-hell: #3d2815;
  --nm-holz-dunkel: #170e07;
  --nm-tinte: #f0e3c6;
}

body.nm_body button, body.nm_body input, body.nm_body select {
  font-family: var(--nm-serif);
}

/* ---------- Kopfzeile: Holzbalken mit Messingleiste ---------- */
.nm_leiste, html[data-theme="dark"] .nm_leiste {
  background:
    var(--nm-maserung),
    linear-gradient(180deg, var(--nm-holz-hell) 0%, var(--nm-holz) 55%, var(--nm-holz-dunkel) 100%);
  border-bottom: 3px solid var(--nm-messing);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 220, 160, 0.18) inset, 0 -4px 0 rgba(0,0,0,0.35) inset;
  color: #f3e3bd;
}

.nm_titel {
  font-family: var(--nm-serif);
  font-variant: small-caps;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.14em;
  color: #f4dca0;
  text-shadow: 0 2px 0 #1c1008, 0 0 12px rgba(230, 170, 60, 0.35);
}

.nm_marke::before, .nm_marke::after {
  content: "\2766";
  color: var(--nm-messing);
  font-size: 1.1rem;
  opacity: 0.85;
}
.nm_marke::after { transform: scaleX(-1); }

.nm_vermerk {
  background: linear-gradient(180deg, #a52f22, #7c2016);
  color: #f7e6c2;
  border: 1px solid #d2a14a;
  border-radius: 3px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.nm_leiste .jupi_nav_back.nm_zurueck,
html[data-theme="dark"] .nm_leiste .jupi_nav_back.nm_zurueck {
  background: linear-gradient(180deg, #d9b25a, #a67a24);
  color: #2a1a08;
  border: 1px solid #5c3d12;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 235, 180, 0.5);
  box-shadow: 0 1px 0 rgba(255, 240, 200, 0.5) inset, 0 2px 4px rgba(0, 0, 0, 0.5);
}
.nm_leiste .jupi_nav_back.nm_zurueck:hover { background: linear-gradient(180deg, #e8c670, #b98a2c); }

.nm_leiste .jupi_theme_switch { border-radius: 4px; border: 1px solid #5c3d12; background: #3a2412; }

/* ---------- Gemeinsame Optik: Holztafel-Schaltflächen ---------- */
.nm_res_chip, .nm_hud_btn, .nm_tempo_gruppe, .nm_mini_btn, .nm_kat_tab, .nm_werkzeug_btn,
.nm_menue_btn, .nm_btn_sek, .nm_dialog_x, .nm_select, .nm_input {
  border-radius: 4px;
}

.nm_res_chip {
  background: var(--nm-korn), linear-gradient(180deg, var(--nm-pergament-hell), var(--nm-pergament-dunkel));
  border: 2px solid var(--nm-holz);
  outline: 1px solid var(--nm-messing);
  outline-offset: -4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255,255,255,0.5) inset;
  color: var(--nm-tinte);
}
.nm_res_chip:hover { border-color: var(--nm-messing); }
.nm_res_label { font-variant: small-caps; letter-spacing: 0.04em; color: var(--nm-muted); font-size: 0.74rem; }
.nm_res_chip b { font-family: var(--nm-serif); font-weight: 700; }

.nm_tempo_gruppe {
  background: linear-gradient(180deg, var(--nm-holz-hell), var(--nm-holz));
  border: 2px solid var(--nm-holz-dunkel);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 220, 160, 0.25) inset;
}
.nm_tempo_btn { color: #f1deb0; border-radius: 3px; font-family: var(--nm-serif); }
.nm_tempo_btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #d9b25a, #a67a24);
  color: #2a1a08;
  box-shadow: 0 1px 0 rgba(255,240,200,0.5) inset, 0 0 0 1px #5c3d12;
}

.nm_hud_btn, .nm_kat_tab, .nm_werkzeug_btn, .nm_mini_btn {
  background: linear-gradient(180deg, var(--nm-holz-hell), var(--nm-holz));
  color: #f1deb0;
  border: 2px solid var(--nm-holz-dunkel);
  box-shadow: 0 1px 0 rgba(255, 220, 160, 0.28) inset, 0 3px 5px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.nm_hud_btn:hover, .nm_kat_tab:hover, .nm_werkzeug_btn:hover, .nm_mini_btn:hover {
  background: linear-gradient(180deg, #8a5d33, #5e3c1d);
  color: #fff3cf;
  border-color: var(--nm-messing);
}
.nm_hud_btn:active, .nm_kat_tab:active, .nm_werkzeug_btn:active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) inset;
  transform: translateY(1px);
}
.nm_kat_tab[aria-pressed="true"], .nm_werkzeug_btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #d9b25a, #a67a24);
  color: #2a1a08;
  border-color: #5c3d12;
  text-shadow: 0 1px 0 rgba(255, 235, 180, 0.5);
}

/* ---------- Pergament-Tafeln (Karten, Inspektor, Dock, Dialoge) ---------- */
.nm_karte_hud, .nm_inspektor, .nm_bau_dock, .nm_start_karte, .nm_dialog_karte {
  background: var(--nm-korn), linear-gradient(170deg, var(--nm-pergament-hell), var(--nm-pergament) 55%, var(--nm-pergament-dunkel));
  color: var(--nm-text);
  border: 3px solid var(--nm-holz);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px var(--nm-messing),
    0 8px 22px rgba(0, 0, 0, 0.55),
    inset 0 0 22px rgba(110, 70, 25, 0.28),
    inset 0 0 0 4px rgba(244, 226, 175, 0.35);
}
html[data-theme="dark"] .nm_karte_hud, html[data-theme="dark"] .nm_inspektor,
html[data-theme="dark"] .nm_bau_dock, html[data-theme="dark"] .nm_start_karte,
html[data-theme="dark"] .nm_dialog_karte {
  background: var(--nm-korn), linear-gradient(170deg, var(--nm-pergament-hell), var(--nm-pergament) 60%, var(--nm-pergament-dunkel));
  box-shadow: 0 0 0 1px var(--nm-messing), 0 8px 22px rgba(0,0,0,0.7), inset 0 0 22px rgba(0,0,0,0.45);
}

.nm_karte_hud { border-left: 3px solid var(--nm-holz); }
.nm_karte_hud strong, .nm_karte_hud_kopf { font-variant: small-caps; letter-spacing: 0.05em; font-size: 0.95rem; }
.nm_tutorial_karte { border-left-color: var(--nm-holz); }

.nm_inspektor_kopf, .nm_dialog_kopf, .nm_start_hero, .nm_dialog_fuss {
  border-color: var(--nm-border);
  border-style: solid;
  border-width: 0 0 2px 0;
  border-image: linear-gradient(90deg, transparent, var(--nm-messing) 12%, var(--nm-messing) 88%, transparent) 1;
}
.nm_dialog_fuss { border-width: 2px 0 0 0; }

.nm_inspektor_titel, .nm_dialog_kopf h2, .nm_start_titel, .nm_start_spalte h3,
.nm_kachel h3, .nm_auswahl_karte h3 {
  font-family: var(--nm-serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--nm-tinte);
}
.nm_start_titel { font-size: 2.1rem; letter-spacing: 0.12em; text-shadow: 0 1px 0 rgba(255, 245, 215, 0.7); }
.nm_inspektor_block h4 { font-variant: small-caps; letter-spacing: 0.06em; color: #7a2b1e; font-size: 0.86rem; }
html[data-theme="dark"] .nm_inspektor_block h4 { color: var(--nm-gold); }

.nm_eyebrow { color: #8a2f20; letter-spacing: 0.16em; }
html[data-theme="dark"] .nm_eyebrow { color: var(--nm-gold); }

.nm_inspektor_block, .nm_kachel, .nm_auswahl_karte, .nm_ware_kachel, .nm_kette_knoten, .nm_kette_schritt {
  background: rgba(255, 248, 225, 0.45);
  border: 1px solid var(--nm-border);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
html[data-theme="dark"] .nm_inspektor_block, html[data-theme="dark"] .nm_kachel,
html[data-theme="dark"] .nm_auswahl_karte, html[data-theme="dark"] .nm_ware_kachel,
html[data-theme="dark"] .nm_kette_knoten, html[data-theme="dark"] .nm_kette_schritt {
  background: rgba(0, 0, 0, 0.22);
}

.nm_lernsatz {
  background: rgba(150, 100, 40, 0.14);
  border-left: 4px solid #8a2f20;
  border-radius: 2px;
  font-style: italic;
}

/* Missions-Haken als Wachssiegel */
.nm_ziel_haken {
  background: radial-gradient(circle at 35% 30%, #c04a37, #7c1f14 70%);
  color: #f7e6c2;
  border: 1px solid #4a0f08;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-family: var(--nm-serif);
}
/* Erfülltes Ziel: dunkleres Grün, damit es auf Pergament deutlich über 4,5 : 1
   liegt (vorher 4,45 : 1 – zu knapp für Projektor und Klassenzimmer). */
.nm_ziel_item.erfuellt { color: #37501a; }
html[data-theme="dark"] .nm_ziel_item.erfuellt { color: var(--nm-accent); }
.nm_ziel_item.erfuellt .nm_ziel_haken {
  background: radial-gradient(circle at 35% 30%, #4f7a2a, #2b4410 70%);
  border-color: #1d2d0b;
}

/* Fortschrittsbalken: Messing in Holzrinne */
.nm_fortschritt_balken {
  background: #3a2412;
  border: 1px solid #1f1208;
  border-radius: 2px;
  height: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
}
.nm_fortschritt_fuellung { background: linear-gradient(180deg, #e0bb62, #a67a24); border-radius: 1px; }

/* Primär-/Sekundärknöpfe in Menüs */
.nm_haupt_btn, .nm_btn_klein {
  /* Dunkleres Gruen: Creme-Schrift erreicht damit auch am hellen Verlaufsrand
     mindestens 4,5 : 1 (vorher 3,4 : 1 - zu wenig fuer die Klassenzimmer-Projektion). */
  background: linear-gradient(180deg, #3a7a2f, #2f5f20);
  color: #f7f0d2;
  border: 2px solid #2e4012;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 220, 0.35) inset, 0 3px 5px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.03em;
}
.nm_haupt_btn:hover {
  border-color: #d9b25a;
  box-shadow: 0 0 0 1px rgba(217, 178, 90, 0.85), 0 0 14px rgba(224, 176, 80, 0.45),
    0 1px 0 rgba(255, 255, 220, 0.35) inset, 0 3px 5px rgba(0, 0, 0, 0.4);
}
.nm_btn_gefahr {
  background: linear-gradient(180deg, #b23a2a, #7c1f14);
  border: 2px solid #4a0f08;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 220, 200, 0.3) inset, 0 3px 5px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
.nm_menue_btn, .nm_btn_sek {
  background: linear-gradient(180deg, #f8eecf, #e2d09f);
  color: var(--nm-tinte);
  border: 2px solid var(--nm-holz-hell);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 4px rgba(0,0,0,0.3);
}
.nm_menue_btn:hover, .nm_btn_sek:hover { border-color: var(--nm-messing); background: linear-gradient(180deg, #fff6d9, #ead8a6); }
html[data-theme="dark"] .nm_menue_btn, html[data-theme="dark"] .nm_btn_sek {
  background: linear-gradient(180deg, #54402a, #3d2e1c);
}
.nm_select, .nm_input {
  background: #fbf3da;
  color: var(--nm-tinte);
  border: 2px solid var(--nm-holz-hell);
  box-shadow: 0 1px 3px rgba(80, 50, 20, 0.35) inset;
}
html[data-theme="dark"] .nm_select, html[data-theme="dark"] .nm_input { background: #2a1f14; color: var(--nm-text); }

.nm_dialog_x {
  background: linear-gradient(180deg, #b23a2a, #7c1f14);
  color: #f7e6c2;
  border: 2px solid #4a0f08;
  font-weight: 800;
}

/* ---------- Bau-Dock: Holzleiste mit Pergamentkarten ---------- */
.nm_bau_dock {
  background: var(--nm-maserung), linear-gradient(180deg, var(--nm-holz-hell), var(--nm-holz) 40%, var(--nm-holz-dunkel));
  border: 3px solid var(--nm-holz-dunkel);
  border-top: 3px solid var(--nm-messing);
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 -2px 0 rgba(0,0,0,0.35), 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 160, 0.25);
  color: #f1deb0;
}
html[data-theme="dark"] .nm_bau_dock {
  background: var(--nm-maserung), linear-gradient(180deg, var(--nm-holz-hell), var(--nm-holz) 40%, var(--nm-holz-dunkel));
}

.nm_bau_karte {
  background: var(--nm-korn), linear-gradient(170deg, var(--nm-pergament-hell), var(--nm-pergament-dunkel));
  border: 2px solid #20130a;
  outline: 1px solid var(--nm-messing);
  outline-offset: -4px;
  border-radius: 3px;
  color: var(--nm-tinte);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  position: relative;
}
/* Baukarte: KEINE Dunkelmodus-Sonderfarbe mehr. Der feste Tintenwert #2e1d0e
   machte im Dunkelmodus Name und Kosten der Karten unsichtbar (Kontrast
   1,3 : 1). Die Grundregel oben setzt schon color: var(--nm-tinte); die ist im
   Dunkelmodus hell. Der gewaehlte Zustand ([aria-pressed="true"], goldener
   Grund) setzt weiterhin seine eigene dunkle Schrift. */
.nm_bau_karte:hover { border-color: var(--nm-messing); transform: translateY(-2px); }
.nm_bau_karte[aria-pressed="true"] {
  background: linear-gradient(170deg, #e8c670, #b98a2c);
  color: #2a1a08;
  border-color: #5c3d12;
  outline-color: #fff2c8;
}
.nm_bau_karte_name, .nm_bau_name { font-variant: small-caps; letter-spacing: 0.04em; font-size: 0.88rem; }
.nm_bau_karte_kosten, .nm_bau_kosten { opacity: 0.82; font-style: italic; }
.nm_bau_farbpunkt { border: 1px solid rgba(0,0,0,0.5); border-radius: 2px; transform: rotate(45deg); }
.nm_bau_statuszeile { color: #dcc592; font-style: italic; text-shadow: 0 1px 1px rgba(0,0,0,0.6); }

/* ---------- Toast & Engpässe ---------- */
/* Toast als dunkle Holztafel mit Messingrand (wie die Kopfleiste): liegt über
   der hellen 3D-Wiese und bleibt in beiden Themes gleich gut lesbar. */
.nm_toast {
  background: var(--nm-korn), linear-gradient(180deg, #4a3220, #2b1c0f);
  border: 2px solid var(--nm-messing);
  border-radius: 6px;
  color: #f8ecd0;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: min(34rem, calc(100vw - 2rem));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.nm_engpass_chip, .nm_engpass_pill {
  background: linear-gradient(180deg, #a83a2b, #7c1f14);
  border: 1px solid #4a0f08;
  border-left: 5px solid #e0b050;
  border-radius: 2px 6px 6px 2px;
  font-style: italic;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

/* ---------- Tabellen & Ketten ---------- */
.nm_tabelle th {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: #7a2b1e;
  border-bottom: 2px solid var(--nm-holz-hell);
}
html[data-theme="dark"] .nm_tabelle th { color: var(--nm-gold); }
.nm_kette_pfeil { color: #8a2f20; }

/* ---------- Ladeanzeige (Muster Stadt im Wandel / EcoSphere) ----------
   Steht schon im ersten Bild da (index.html) und deckt den Start ab, bis das
   Startmenü steht: Pergament-Karte auf dunklem Holz, Messing-Rahmen, Balken in
   Messing/Gold. Der Grund ist in beiden Themes dunkel (wie der Startbildschirm),
   die Karte bleibt Pergament - deshalb KEINE fest verdrahtete Schriftfarbe auf
   wechselndem Grund (Regel aus Abschnitt 3 dieser Datei). */
.nm_laden {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(ellipse at 50% 30%, #3a2614 0%, #24160b 55%, #130b05 100%);
  color: #f3e3bd;
  transition: opacity 0.35s ease;
}
.nm_laden[hidden] { display: none; }
.nm_laden_weg { opacity: 0; pointer-events: none; }

.nm_laden_karte {
  width: min(26rem, 92vw);
  padding: 1.5rem 1.6rem 1.25rem;
  text-align: center;
  background: var(--nm-surface-strong);
  color: var(--nm-tinte);
  border: 4px solid var(--nm-messing);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(0, 0, 0, 0.35) inset;
}

.nm_laden_logo {
  display: block;
  margin: 0 auto 0.55rem;
  border-radius: 50%;
  border: 3px solid var(--nm-messing);
  background: var(--nm-holz);
}

.nm_laden_karte h2 {
  margin: 0 0 0.35rem;
  font-family: var(--nm-serif);
  font-variant: small-caps;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--nm-tinte);
}

/* Die Phase wechselt, deshalb eine feste Mindesthöhe: sonst springt die Karte
   bei jedem neuen Satz ein Stück und der Balken wandert mit. */
.nm_laden_phase {
  margin: 0 0 0.85rem;
  min-height: 2.5em;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--nm-muted);
}

.nm_laden_schiene {
  height: 12px;
  border-radius: 999px;
  background: rgba(58, 36, 16, 0.22);
  box-shadow: 0 1px 0 rgba(255, 245, 215, 0.5) inset;
  overflow: hidden;
}

.nm_ladebalken {
  height: 100%;
  /* Der Balken behält die VOLLE Breite der Schiene, sichtbar ist nur der linke
     Teil (clip-path). So läuft der Farbverlauf einmal über die ganze Schiene
     und wird beim Laden aufgedeckt.
     Zwei Versuche davor waren falsch: `scaleX` staucht den Verlauf, und
     `width: 27%` staucht ihn genauso, weil ein prozentualer Verlauf sich auf
     die EIGENE Breite bezieht - das Grün stand so schon bei 27 % da. */
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7a5a22, var(--nm-gold) 45%, #d8b45a 78%, #8fae4c);
  box-shadow: 0 0 8px rgba(216, 180, 90, 0.6);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.25s ease-out;
}

.nm_laden_prozent {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--nm-muted);
}

/* Schmale Fenster: kleinere Karte und Logo, damit sie neben der Kopfzeile Platz hat */
@media (max-width: 480px) {
  .nm_laden_karte { width: min(22rem, 94vw); padding: 1.15rem 1.1rem 1rem; }
  .nm_laden_karte h2 { font-size: 1.15rem; }
  .nm_laden_logo { width: 60px; height: 60px; }
}

/* Wer Bewegung reduziert haben will, bekommt keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
  .nm_laden, .nm_ladebalken { transition: none; }
}

/* ---------- Startmenü ---------- */
.nm_start_overlay {
  background: radial-gradient(ellipse at center, rgba(40, 25, 12, 0.55), rgba(10, 6, 3, 0.9));
  backdrop-filter: blur(3px) sepia(0.5);
}
.nm_start_karte { border-radius: 8px; border-width: 4px; }
.nm_start_logo { border-radius: 50%; border: 3px solid var(--nm-messing); box-shadow: 0 3px 8px rgba(0,0,0,0.5); background: var(--nm-holz); }
.nm_dialog::backdrop { background: rgba(14, 8, 3, 0.74); }

/* ---------- Fuß ---------- */
.nm_footer {
  background: linear-gradient(180deg, var(--nm-holz), var(--nm-holz-dunkel));
  border-top: 2px solid var(--nm-messing);
}
.nm_footer .jupi_footer_text, html[data-theme="dark"] .nm_footer .jupi_footer_text { color: #cdb88a; }
.nm_footer .jupi_footer_text a, html[data-theme="dark"] .nm_footer .jupi_footer_text a { color: #f0c870; }

/* ---------- Minikarte & Gebietsmarken ---------- */
.nm_minikarte {
  background: linear-gradient(180deg, var(--nm-holz-hell), var(--nm-holz-dunkel));
  border: 3px solid var(--nm-holz-dunkel);
  outline: 1px solid var(--nm-messing);
  border-radius: 4px;
  padding: 0.3rem;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6);
}
.nm_minikarte canvas { border-radius: 1px; border: 1px solid #1f1208; }
.nm_gebiet_label {
  font-family: var(--nm-serif);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #e8c670, #b98a2c);
  color: #2a1a08;
  border: 2px solid #5c3d12;
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 245, 210, 0.6) inset;
}
.nm_gebiet_label.nm_gebiet_teuer { background: linear-gradient(180deg, #c8b78d, #9c8a5c); color: #4a3c1f; }
.nm_gebiet_label.nm_gebiet_gewaehlt { outline: 3px solid #fff2c8; }

/* ---------- Scrollleisten ---------- */
.nm_bau_karten, .nm_inspektor, .nm_dialog_inhalt, .nm_start_karte { scrollbar-color: #8a5d33 rgba(0, 0, 0, 0.2); }

@media (max-width: 800px) {
  .nm_titel { font-size: 1.2rem; letter-spacing: 0.1em; }
  .nm_start_titel { font-size: 1.6rem; }
}

/* ==========================================================================
   Kompakte Oberfläche (Schul-Laptops ~1366×768). Touch-Ziele bleiben ≥ 40 px.
   ========================================================================== */
.nm_bau_dock { padding: 0.25rem 0.45rem 0.2rem; gap: 0.2rem; }
.nm_bau_karten { gap: 0.3rem; padding: 0.05rem 0.05rem 0.15rem; }
.nm_bau_karte { flex: 0 0 5.2rem; width: 5.2rem; height: 7rem; padding: 0.2rem 0.2rem 0.25rem; gap: 0.05rem; }
.nm_bau_icon { width: 48px; height: 48px; }
.nm_bau_karte .nm_bau_name { font-size: 0.64rem; line-height: 1.1; min-height: 1.6em; }
.nm_bau_karte .nm_bau_kosten { font-size: 0.56rem; line-height: 1.12; }
.nm_bau_statuszeile { font-size: 0.68rem; line-height: 1.2; }
.nm_bau_tabs { gap: 0.2rem; }
.nm_kat_tab, .nm_werkzeug_btn { font-size: 0.76rem; padding: 0.15rem 0.55rem; }
.nm_res_chip { min-height: 40px; padding: 0.15rem 0.45rem; font-size: 0.78rem; gap: 0.25rem; }
.nm_karte_hud { padding: 0.35rem 0.55rem; font-size: 0.76rem; }
.nm_karte_hud strong, .nm_karte_hud_kopf { font-size: 0.85rem; }
.nm_missions_unter, .nm_tutorial_text { margin: 0.15rem 0 0.25rem; line-height: 1.25; }
/* Die Aufgabenliste scrollt: unten Platz lassen und weich in das eigene
   Pergament ausblenden (kein abgeschnittener Buchstabe am Kartenrand – das fiel
   im Kontrasttest als 1,6 : 1 auf). Der Verlauf liegt als sticky Element IN der
   Liste und deckt den Rand mit der Kartenfarbe ab, nicht mit der Wiese. */
#nm_missions_box {
  max-width: 17rem;
  max-height: 14rem;
  overflow-y: auto;
}
#nm_missions_box.nm_ueberlauf,
.nm_dialog_inhalt.nm_ueberlauf,
.nm_inspektor.nm_ueberlauf {
  padding-bottom: 1.5rem;
  scroll-padding-bottom: 1.5rem;
}
#nm_missions_box.nm_ueberlauf::after,
.nm_dialog_inhalt.nm_ueberlauf::after,
.nm_inspektor.nm_ueberlauf::after {
  content: "";
  display: block;
  position: sticky;
  bottom: 0;
  height: 1.5rem;
  margin-top: -1.5rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 238, 220, 0) 0%, var(--nm-pergament-dunkel) 92%);
}
html[data-theme="dark"] #nm_missions_box.nm_ueberlauf::after,
html[data-theme="dark"] .nm_dialog_inhalt.nm_ueberlauf::after,
html[data-theme="dark"] .nm_inspektor.nm_ueberlauf::after {
  background: linear-gradient(180deg, rgba(46, 36, 24, 0) 0%, var(--nm-pergament-dunkel) 92%);
}
.nm_minikarte canvas { width: 132px; height: 132px; }
.nm_inspektor { width: 17rem; padding: 0.45rem 0.6rem; max-height: calc(100% - 12rem); }
.nm_inspektor_kopf { padding-bottom: 0.25rem; margin-bottom: 0.35rem; }
.nm_inspektor_titel { font-size: 0.92rem; }
.nm_inspektor_inhalt { font-size: 0.78rem; gap: 0.35rem; }
.nm_inspektor_block { padding: 0.3rem 0.5rem; gap: 0.15rem; }
.nm_inspektor_block h4 { font-size: 0.78rem; }
.nm_inspektor_block p { font-size: 0.72rem !important; line-height: 1.3; }

/* Bedingungs-Checkliste (Wohnhaus-Aufstieg, Ausbau-Freischaltung) */
.nm_bed_liste { list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.nm_bed_liste li { display: flex; gap: 0.35rem; align-items: baseline; line-height: 1.25; }
.nm_bed_liste li::before { content: "✗"; color: #a8322b; font-weight: 800; flex: 0 0 auto; }
.nm_bed_liste li.nm_bed_ok::before { content: "✓"; color: #3f7d34; }
.nm_bed_liste li.nm_bed_ok { opacity: 0.8; }
.nm_bed_warn { color: #a8322b; font-weight: 700; }
.nm_schalter_zeile { display: flex; align-items: center; gap: 0.45rem; min-height: 40px; cursor: pointer; }
.nm_schalter_zeile input { width: 20px; height: 20px; accent-color: #7a2b1e; }

/* Ausgegraut, aber lesbar: keine Opazität mehr (die blendet die helle Schrift in
   den hellen Untergrund und fiel im Kontrast auf 2,7 : 1). Stattdessen ein
   eigener gedämpfter Holzton mit cremefarbener Schrift (≈ 6 : 1). */
.nm_hud_btn[aria-disabled="true"],
.nm_hud_btn[disabled],
.nm_btn_sek[disabled],
.nm_btn_klein[disabled],
.nm_menue_btn[disabled] {
  background: linear-gradient(180deg, #6b5a45, #4b3d2d);
  color: #f2e6c9;
  border-color: #362a1e;
  text-shadow: none;
  box-shadow: 0 1px 0 rgba(255, 240, 210, 0.18) inset;
  opacity: 1;
  filter: saturate(0.55);
  cursor: not-allowed;
}

/* Einzelne Ressourcen-Chips: nur Symbol + Zahl, Name im Tooltip / für Screenreader */
.nm_nur_sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nm_res_einzeln { min-width: 40px; padding: 0.15rem 0.4rem; gap: 0.2rem; }
.nm_res_einzeln b { min-width: 1.6em; text-align: right; }
.nm_res_einzeln .nm_res_ico svg { width: 20px; height: 20px; }
.nm_res_knapp { border-color: #a8322b !important; box-shadow: 0 0 0 2px rgba(168, 50, 43, 0.55) !important; }

/* ==========================================================================
   Obere Leiste: durchgehender Holzbalken von links bis rechts,
   Ressourcen als helle Pillen, Tempo + Optionen rechts (rechteckig)
   ========================================================================== */
.nm_topbar {
  top: 0; left: 0; right: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.6rem;
  background:
    var(--nm-maserung),
    linear-gradient(180deg, var(--nm-holz) 0%, var(--nm-holz-dunkel) 100%);
  border: 0;
  border-bottom: 2px solid var(--nm-messing);
  border-radius: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 220, 160, 0.15) inset;
  pointer-events: auto;
}
.nm_ressourcen_leiste { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 0.3rem; }
.nm_topbar .nm_res_chip {
  min-height: 34px;
  padding: 0.1rem 0.6rem 0.1rem 0.45rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf0 0%, #f3e6c8 100%);
  border: 1px solid #c9a96a;
  outline: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
  color: #3a2410;
}
.nm_topbar .nm_res_chip:hover { border-color: #e2b85a; background: linear-gradient(180deg, #fffdf6 0%, #f7ecd2 100%); }
.nm_topbar .nm_res_chip b { font-size: 0.82rem; }
.nm_topbar .nm_chip_zeit { padding: 0.1rem 0.75rem; }
.nm_topbar .nm_chip_zeit .nm_res_label { color: #6b5232; }
.nm_topbar .nm_res_knapp { border-color: #a8322b !important; box-shadow: 0 0 0 2px rgba(168, 50, 43, 0.6) !important; }
/* Rechts: Tempo + Optionen in der Leiste, rechteckig */
.nm_topbar .nm_hud_aktionen { display: flex; align-items: center; gap: 0.4rem; }
.nm_topbar .nm_tempo_gruppe { border-radius: 4px; box-shadow: 0 1px 0 rgba(255, 220, 160, 0.2) inset; border: 1px solid #2e1c0b; }
.nm_topbar .nm_tempo_btn { min-height: 34px; }
.nm_topbar .nm_hud_btn { border-radius: 4px; min-height: 40px; box-shadow: none; }
/* Panels rücken unter die schmalere Leiste */
.nm_links_stapel, .nm_toast, .nm_inspektor, .nm_seiten_griff { top: 3.6rem; }
.nm_inspektor { max-height: calc(100% - 3.6rem - var(--nm-dock-h, 9rem) - 1.4rem); }

/* ==========================================================================
   Touch-Bauen: Bestätigungsleiste (Tippen wählt Platz, ✓ baut)
   ========================================================================== */
.nm_bau_leiste {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nm-dock-h, 0rem) + 3rem);
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100% - 1rem);
  padding: 0.35rem 0.4rem 0.35rem 0.75rem;
  background: var(--nm-maserung), linear-gradient(180deg, var(--nm-holz) 0%, var(--nm-holz-dunkel) 100%);
  border: 2px solid var(--nm-messing);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  color: #fdf3dc;
  pointer-events: auto;
}
.nm_bau_leiste[hidden] { display: none; }
.nm_bl_text { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; line-height: 1.2; }
.nm_bau_leiste[data-status="ok"] .nm_bl_text { color: #c9f0b0; }
.nm_bau_leiste[data-status="fehler"] .nm_bl_text { color: #ffc2b8; }
.nm_bau_leiste[data-status="warn"] .nm_bl_text { color: #ffe08a; }
.nm_bl_knoepfe { display: flex; gap: 0.35rem; flex: 0 0 auto; }
.nm_bl_btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.7rem;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid #2e1c0b;
  background: linear-gradient(180deg, #fffaf0 0%, #f3e6c8 100%);
  color: #3a2410;
  cursor: pointer;
  touch-action: manipulation;
}
.nm_bl_btn[hidden] { display: none; }
.nm_bl_ok { background: linear-gradient(180deg, #5fae4a 0%, #2e7d32 100%); color: #fff; padding: 0 1rem; }
.nm_bl_ok:disabled {
  /* Ausgegraut statt ausgeblendet: dunkler Ton mit heller Schrift (≈ 7 : 1).
     Vorher #e4dccb auf #8a8170 mit opacity 0,75 – nur 2,9 : 1. */
  background: linear-gradient(180deg, #5d5346, #3c352b);
  color: #f3e8d2;
  border-color: #2a241b;
  cursor: not-allowed;
  opacity: 1;
}
.nm_bau_leiste[data-status="warn"] .nm_bl_ok { background: linear-gradient(180deg, #c8553f 0%, #8e2a1c 100%); }
.nm_bl_abbr { background: linear-gradient(180deg, #f3e1d6 0%, #dcc0ae 100%); }
@media (max-width: 560px) {
  .nm_bau_leiste { flex-wrap: wrap; justify-content: flex-end; width: calc(100% - 1rem); bottom: calc(var(--nm-dock-h, 0rem) + 2.8rem); }
  .nm_bl_text { flex-basis: 100%; }
}

/* Panels hängen an der tatsächlichen Höhe der Kopfleiste (--nm-top-h, per JS gesetzt) */
.nm_links_stapel, .nm_toast, .nm_inspektor, .nm_seiten_griff { top: calc(var(--nm-top-h, 3.1rem) + 0.5rem); }
.nm_inspektor { max-height: calc(100% - var(--nm-top-h, 3.1rem) - var(--nm-dock-h, 9rem) - 1.9rem); }

/* Kurzfassung der Aufgabenkarte und Blatt-Griff gibt es nur am Handy */
.nm_missions_kompakt, .nm_blatt_griff { display: none; }

/* ==========================================================================
   Handy (Hochformat bis 640 px): zweizeilige Kopfleiste, wischbare Leisten
   ========================================================================== */
@media (max-width: 640px) {
  /* Plattform-Kopfzeile einzeilig, Spieltitel steht im Startmenü */
  .nm_leiste { grid-template-columns: auto 1fr; grid-template-areas: "links rechts"; padding: 0.2rem 0.5rem; }
  .nm_leiste .nm_marke { display: none; }
  .nm_werkzeuge { justify-self: end; }

  .nm_topbar { flex-wrap: wrap; gap: 0.3rem; padding: 0.25rem 0.4rem; }
  .nm_topbar .nm_hud_aktionen { order: 1; width: 100%; justify-content: flex-end; }
  .nm_ressourcen_leiste {
    order: 2;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .nm_ressourcen_leiste::-webkit-scrollbar { display: none; }
  .nm_topbar .nm_res_chip { flex: 0 0 auto; min-height: 36px; }

  .nm_links_stapel { width: min(15rem, calc(100% - 3.6rem)); }
  .nm_buehne:not(.nm_links_zu) .nm_seiten_griff { left: calc(min(15rem, calc(100% - 3.6rem)) + 0.55rem); }

  /* Aufgabenkarte darf am Handy ihre Ziele zeigen, statt sie abzuschneiden
     (14rem waren 30-40px zu wenig: die letzte Zeile lag halb auf dem Rand). */
  #nm_missions_box { max-height: min(17.5rem, 40vh); }
  /* Eingeklappt bleibt eine Zeile mit der Kurzfassung ("2/3") stehen. */
  .nm_missions_kompakt {
    display: inline-block;
    margin-left: auto;
    padding: 0 0.4rem;
    font-family: var(--nm-serif);
    font-weight: 700;
    font-size: 0.82rem;
    color: #37501a;
    background: rgba(63, 90, 28, 0.14);
    border: 1px solid rgba(63, 90, 28, 0.35);
    border-radius: 999px;
    line-height: 1.5;
  }
  /* Im Dunkelmodus kein Grün auf Grün: nur Rand, Schrift in Akzentgrün. */
  html[data-theme="dark"] .nm_missions_kompakt {
    color: var(--nm-accent);
    background: transparent;
    border-color: rgba(143, 174, 76, 0.45);
  }
  .nm_missions_kompakt[hidden] { display: none; }

  /* Inspektor als Blatt über dem Baumenü */
  .nm_inspektor {
    top: auto;
    left: 0.4rem;
    right: 0.4rem;
    width: auto;
    bottom: calc(var(--nm-dock-h, 0rem) + 2.9rem);
    max-height: min(46vh, calc(100% - var(--nm-top-h, 5rem) - var(--nm-dock-h, 9rem) - 3.6rem));
  }
  /* Griff: antippen klappt um, ziehen setzt die Höhe */
  .nm_blatt_griff {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin: -0.45rem -0.4rem 0.1rem;
    cursor: grab;
    touch-action: none;
  }
  .nm_blatt_griff span {
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: var(--nm-holz-hell);
    box-shadow: 0 1px 0 rgba(255, 240, 210, 0.35) inset;
    opacity: 0.85;
  }
  .nm_inspektor.nm_blatt_zieht .nm_blatt_griff { cursor: grabbing; }
  .nm_inspektor.nm_blatt_zu .nm_blatt_griff { margin-bottom: 0.2rem; }
  .nm_inspektor.nm_blatt_zu .nm_inspektor_inhalt { display: none; }
  .nm_inspektor.nm_blatt_zu .nm_inspektor_kopf { border-bottom: 0; margin-bottom: 0; }

  /* Baumenü: Kategorien als eine wischbare Zeile */
  .nm_bau_tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .nm_bau_tabs::-webkit-scrollbar { display: none; }
  .nm_bau_tabs .nm_kat_tab, .nm_bau_werkzeuge .nm_werkzeug_btn { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  .nm_bau_werkzeuge { flex: 0 0 auto; flex-wrap: nowrap; margin-left: 0; }
  .nm_bau_karte { flex-basis: 5.2rem; width: 5.2rem; height: 7.2rem; }
  .nm_bau_icon { width: 46px; height: 46px; }
  .nm_minikarte canvas { width: 96px; height: 96px; }
  html.nm_bauleiste_an .nm_minikarte { display: none; }
  html.nm_bauleiste_an .nm_bau_statuszeile { display: none; }

  /* Toast darf am Handy weder Aufgabenkarte noch Inspektor-Blatt überdecken:
     solange er sichtbar ist, rücken beide unter die gemessene Toasthöhe. */
  html.nm_toast_an .nm_links_stapel {
    top: calc(var(--nm-top-h, 5rem) + var(--nm-toast-h, 3rem) + 1.1rem);
  }
  html.nm_toast_an .nm_inspektor {
    max-height: min(38vh, calc(100% - var(--nm-top-h, 5rem) - var(--nm-dock-h, 9rem) - var(--nm-toast-h, 3rem) - 4.2rem));
  }
}
/* Auf Touch-Geräten ersetzt die Bestätigungsleiste den Drehen-Knopf */
@media (pointer: coarse) {
  #nm_btn_drehen { display: none; }
}

/* Handy quer (wenig Höhe): Plattformleisten wie im Vollbild ausblenden, Baumenü flacher */
@media (max-height: 500px) and (pointer: coarse) {
  .nm_leiste, .nm_footer { display: none !important; }
  .nm_bau_karte { height: 6.2rem; }
  .nm_bau_icon { width: 40px; height: 40px; }
  .nm_bau_statuszeile { display: none; }
  .nm_minikarte canvas { width: 88px; height: 88px; }
  .nm_bau_leiste { bottom: calc(var(--nm-dock-h, 0rem) + 2.6rem); }
  .nm_ressourcen_leiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .nm_ressourcen_leiste::-webkit-scrollbar { display: none; }
  .nm_topbar .nm_res_chip { flex: 0 0 auto; }
  html.nm_bauleiste_an .nm_minikarte { display: none; }
}

/* ---------- Referenz-Feinschliff: poliertes Holz, Gold und gefasste Karten ----------
   Die vorhandenen HUD-Zonen und Bedienwege bleiben bestehen. Die festen hellen
   Goldflächen haben eigene Tinte; Pergament folgt weiterhin dem gewählten Theme. */
body.nm_body {
  --nm-goldknopf: linear-gradient(180deg, #ffe497 0%, #edbf4c 48%, #d49a25 100%);
  --nm-goldkante: #c89b4d;
}

.nm_leiste, html[data-theme="dark"] .nm_leiste {
  border-top: 1px solid #aa7940;
  border-bottom: 2px solid var(--nm-goldkante);
  box-shadow: inset 0 2px 0 #f3d39333, inset 0 -3px 5px #160a07a6, 0 3px 8px #0008;
}
.nm_titel { letter-spacing: 0.075em; text-shadow: 0 2px 2px #160c04; }
.nm_marke::before, .nm_marke::after { content: none; }
.nm_marke img { border: 1px solid #d6b775; box-shadow: 0 1px 3px #0009; }
.nm_vermerk { border-radius: 5px; box-shadow: inset 0 0 0 2px #57140c, 0 2px 3px #0006; padding: 0.2rem 0.55rem; }

.nm_leiste .jupi_nav_back.nm_zurueck,
html[data-theme="dark"] .nm_leiste .jupi_nav_back.nm_zurueck {
  background: var(--nm-goldknopf);
  border: 2px solid #70501f;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 #fff1bb, inset 0 -2px 0 #ad761a, 0 2px 4px #0009;
}
.nm_werkzeuge .jupi_sprachen_select {
  color: #fff0d2;
  background: linear-gradient(180deg, #62452d, #382414);
  border: 1px solid var(--nm-goldkante);
  box-shadow: inset 0 0 0 2px #26170d, 0 2px 3px #0005;
}
.nm_werkzeuge .jupi_sprachen_select option { background: #382414; color: #fff0d2; }
.nm_leiste .jupi_theme_switch { border-radius: 999px; border-color: var(--nm-goldkante); }

.nm_topbar {
  border-bottom: 2px solid var(--nm-goldkante);
  box-shadow: inset 0 2px 0 #eac78333, inset 0 -2px 4px #150b05a6, 0 3px 7px #0006;
}
.nm_topbar .nm_res_chip {
  border: 1px solid #a57b41;
  background: linear-gradient(180deg, #fff8e8, #efddba);
  box-shadow: inset 0 1px 0 #fffdf3, inset 0 -2px 0 #d7bc86, 0 2px 3px #160c0873;
  font-variant-numeric: tabular-nums;
}
.nm_topbar .nm_res_chip b { font-size: 0.88rem; }
.nm_topbar .nm_res_chip .nm_res_label { color: #6b5232; }
.nm_topbar .nm_tempo_gruppe { border-color: var(--nm-goldkante); border-radius: 7px; overflow: hidden; }
.nm_topbar .nm_tempo_btn { min-height: 36px; }
.nm_tempo_btn[aria-pressed="true"] { background: var(--nm-goldknopf); }
.nm_topbar .nm_hud_btn { border: 1px solid var(--nm-goldkante); border-radius: 7px; }

.nm_bau_dock, html[data-theme="dark"] .nm_bau_dock {
  border: 2px solid var(--nm-goldkante);
  border-radius: 15px 15px 10px 10px;
  padding: 0.55rem 0.7rem 0.3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  row-gap: 0.15rem;
  box-shadow: 0 0 0 2px #26170d, inset 0 0 0 3px #20120980, inset 0 5px 12px #e0b56c22, 0 -3px 14px #0007;
}
.nm_bau_tabs {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0.6rem;
  width: min(65rem, calc(100% - 10rem));
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  overflow: visible;
}
.nm_bau_tabs .nm_kat_tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border: 2px solid #d2a45c;
  border-bottom-color: #422810;
  border-radius: 14px 14px 0 0;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: 0 0 0 2px #36200e, inset 0 2px 0 #ffe3a480, inset 0 0 0 3px #25140873, 0 -2px 6px #0005;
}
.nm_bau_tabs .nm_kat_tab::before, .nm_bau_werkzeuge .nm_werkzeug_btn::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background: currentColor;
  mask: var(--nm-symbol) center / contain no-repeat;
}
.nm_kat_tab[data-kat="grund"] { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 15 16 3l14 12-3 3-2-2v13h-7V19h-5v10H6V16l-2 2z'/%3E%3C/svg%3E"); }
.nm_kat_tab[data-kat="land"] { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m4 29 2 2L25 9l-2-2zM19 13C10 14 9 7 11 4c6 0 9 3 8 9m-5 6C5 20 4 13 6 10c6 0 9 3 8 9m10-12C18 6 21 0 26 0c4 3 2 8-2 7m-4 9c-1-8 6-9 10-7 0 6-4 9-10 7m-5 6c-1-8 6-9 10-7 0 6-4 9-10 7'/%3E%3C/svg%3E"); }
.nm_kat_tab[data-kat="handwerk"] { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 7h28v4c-3 4-7 4-10 4v5l7 4v4H6v-4l7-4v-5C6 15 2 12 2 7'/%3E%3C/svg%3E"); }
.nm_kat_tab[data-kat="stadt"] { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M1 9 16 2l15 7v3H1zM4 14h5v12H4zm10 0h5v12h-5zm10 0h5v12h-5zM1 28h30v3H1z'/%3E%3C/svg%3E"); }
.nm_kat_tab[data-kat="ausbau"] { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 3h5v5h4V3h5v5h4V3h5v5h4V3h2v27H2zm6 11v5h4v-5zm13 0v5h4v-5zM14 22v8h6v-8z'/%3E%3C/svg%3E"); }
.nm_bau_werkzeuge #nm_btn_drehen { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 7V1L0 9l9 7v-6a9 9 0 1 1-2 13l-4 2A14 14 0 1 0 9 7'/%3E%3C/svg%3E"); }
.nm_bau_werkzeuge #nm_btn_abriss { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m5 2 11 10L27 2l4 4-11 10 11 11-4 4-11-11L5 31l-4-4 11-11L1 6z'/%3E%3C/svg%3E"); }
.nm_bau_werkzeuge #nm_btn_auswahl_frei { --nm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m5 1 23 17-12 1-6 12z'/%3E%3C/svg%3E"); }
.nm_bau_werkzeuge .nm_werkzeug_btn::before { width: 30px; height: 30px; }
.nm_kat_tab[aria-pressed="true"], .nm_werkzeug_btn[aria-pressed="true"] {
  background: var(--nm-goldknopf);
  color: #2a1a08;
  border-color: #916224;
  text-shadow: 0 1px 0 #fff0b6;
}
.nm_bau_werkzeuge {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0 0.15rem 0 0.65rem;
  border-left: 1px solid #c99a4b70;
}
.nm_bau_werkzeuge .nm_werkzeug_btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  width: 5.5rem;
  min-height: 5.5rem;
  padding: 0.45rem 0.25rem;
  border: 2px solid #d2a45c;
  border-radius: 12px;
  font-size: 0.88rem;
  box-shadow: 0 0 0 2px #28190d, inset 0 2px 0 #ffe3a480, inset 0 0 0 3px #25140873, 0 4px 5px #0008;
}
.nm_bau_werkzeuge #nm_btn_auswahl_frei {
  background: var(--nm-goldknopf);
  color: #2a1a08;
  text-shadow: 0 1px 0 #fff0b6;
}
.nm_bau_karten { grid-column: 1; grid-row: 1; min-width: 0; gap: 0.25rem; padding: 0.15rem 0.1rem 0.25rem; }
.nm_bau_karte {
  flex-basis: 6.2rem;
  width: 6.2rem;
  height: 7.7rem;
  background: var(--nm-korn), linear-gradient(160deg, #fff2d3, #e7cb91);
  color: #30200e;
  border-radius: 10px;
  outline: none;
  border: 2px solid #50351c;
  padding: 0.25rem 0.25rem 0.3rem;
  gap: 0.12rem;
  box-shadow: inset 0 0 0 1px #c99e56, inset 0 2px 0 #fff7dc80, 0 2px 4px #0008;
}
.nm_bau_icon { width: 60px; height: 54px; }
.nm_bau_karte .nm_bau_name { font-size: 0.8rem; font-variant: normal; min-height: 1.2em; line-height: 1.12; }
.nm_bau_karte .nm_bau_kosten { font-size: 0.72rem; line-height: 1.15; opacity: 1; }
.nm_bau_karte:hover { border-color: #f2cc75; }
.nm_bau_karte[aria-pressed="true"] { background: var(--nm-goldknopf); box-shadow: inset 0 0 0 1px #fff3c6, 0 0 0 1px #d6a33d, 0 2px 4px #0008; }
.nm_bau_statuszeile { grid-column: 1 / -1; padding: 0.1rem 0.15rem 0; font-size: 0.72rem; }
#nm_bau_hinweis { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nm_dock_griff {
  background: linear-gradient(180deg, #fff1ce, #d9bb7d);
  color: #34200e;
  border: 1px solid #a77d3e;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 #fff8df, 0 -2px 5px #0004;
}

.nm_minikarte {
  border: 2px solid var(--nm-goldkante);
  border-radius: 15px;
  padding: 0.4rem;
  box-shadow: 0 0 0 2px #30200f, inset 0 0 0 2px #765128, 0 4px 10px #0009;
}
.nm_minikarte::before {
  content: "N";
  position: absolute;
  top: -1.3rem;
  left: calc(50% - 1.15rem);
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 2px solid #d2a45c;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #76532d, #2e1a0c);
  color: #ffe0a0;
  font: bold 1.5rem var(--nm-serif);
  text-shadow: 0 2px 1px #160c04;
  box-shadow: 0 0 0 2px #35200e, inset 0 0 0 2px #8a632f, 0 3px 4px #0008;
  pointer-events: none;
}
.nm_dock_griff { top: -2rem; height: 2rem; right: 0.8rem; min-width: 8rem; border-radius: 15px 15px 0 0; }
.nm_bau_dock.nm_zu .nm_bau_tabs { visibility: hidden; }
.nm_minikarte canvas { border-radius: 7px; }
.nm_karte_hud, .nm_inspektor, .nm_dialog_karte, .nm_start_karte { border-radius: 10px; }
.nm_buehne.nm_links_zu .nm_links_stapel { visibility: hidden; }
.nm_optionen_menue {
  background: var(--nm-maserung), linear-gradient(180deg, var(--nm-holz-hell), var(--nm-holz-dunkel));
  border: 1px solid var(--nm-goldkante);
  padding: 0.5rem;
}

/* ---------- Lautstärke-Regler (Optionen-Menü & Startmenü) ----------
   EIN Gesamtbügel für Arbeitsklänge UND Siedlermusik. Die goldene Füllung
   links der Daumenstellung kommt aus --fuell (spiel.js setzt sie mit). */
.nm_pegel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
}
.nm_pegel_text {
  font-family: var(--nm-serif, Georgia, serif);
  font-size: 0.82rem;
  color: var(--nm-text, #2e1d0e);
  white-space: nowrap;
}
.nm_pegel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 6.5rem;
  height: 6px;
  border-radius: 3px;
  border: 1px solid var(--nm-border, #7a5530);
  background: linear-gradient(to right,
    var(--nm-gold, #b8862b) var(--fuell, 80%),
    var(--nm-pergament-dunkel, #dfcd9f) var(--fuell, 80%));
  cursor: pointer;
}
.nm_pegel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nm-messing, #c9983a);
  border: 2px solid var(--nm-border, #7a5530);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.nm_pegel input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nm-messing, #c9983a);
  border: 2px solid var(--nm-border, #7a5530);
}
.nm_pegel_wert {
  font-size: 0.78rem;
  color: var(--nm-muted, #6b5233);
  min-width: 2.7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nm_pegel_start { padding: 0.45rem 0.2rem 0.1rem; }
html[data-theme="dark"] .nm_pegel input[type="range"] {
  border-color: rgba(255, 231, 176, 0.5);
  background: linear-gradient(to right,
    var(--nm-gold, #b8862b) var(--fuell, 80%),
    rgba(255, 255, 255, 0.16) var(--fuell, 80%));
}
html[data-theme="dark"] .nm_pegel_text { color: #f0e2c0; }
html[data-theme="dark"] .nm_pegel_wert { color: #cbb38a; }
body.nm_body :is(button, a, select, input):focus-visible { outline: 3px solid #ffe1a0; outline-offset: 2px; }

@media (max-width: 800px) {
  .nm_bau_tabs .nm_kat_tab::before { display: none; }
  .nm_bau_tabs .nm_kat_tab { font-size: 0.8rem; padding-inline: 0.55rem; }
  .nm_bau_karte { flex-basis: 5.6rem; width: 5.6rem; }
  .nm_bau_werkzeuge { gap: 0.35rem; padding-left: 0.35rem; }
  .nm_bau_werkzeuge .nm_werkzeug_btn { width: 4.5rem; font-size: 0.76rem; }
  .nm_bau_tabs { width: calc(100% - 1.2rem); }
  .nm_dock_griff { top: -4.8rem; }
}
@media (max-width: 640px) {
  .nm_leiste { column-gap: 0.3rem; }
  .nm_werkzeuge { gap: 0.3rem; min-width: 0; }
  .nm_werkzeuge .jupi_sprachen_select { width: clamp(5rem, 27vw, 8rem); min-width: 0; }
  .nm_leiste .jupi_nav_back.nm_zurueck { font-size: 0.82rem; padding-inline: 0.55rem; }
  .nm_bau_dock { padding: 0.25rem 0.35rem; border-radius: 10px; }
  .nm_bau_tabs { left: 0.2rem; width: calc(100% - 0.4rem); overflow-x: auto; overflow-y: hidden; padding: 3px 2px 0; }
  .nm_bau_tabs .nm_kat_tab { flex: 0 0 auto; }
  .nm_bau_werkzeuge { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; border: 0; }
  .nm_bau_werkzeuge .nm_werkzeug_btn { width: auto; min-width: 5.5rem; min-height: 40px; flex-direction: row; gap: 0.3rem; font-size: 0.76rem; }
  .nm_bau_werkzeuge .nm_werkzeug_btn::before { width: 18px; height: 18px; }
  .nm_bau_statuszeile { grid-row: 3; }
  .nm_bau_karte { height: 7.2rem; }
  .nm_bau_karte .nm_bau_name { font-size: 0.72rem; }
  .nm_bau_karte .nm_bau_kosten { font-size: 0.66rem; }
  .nm_bau_tabs .nm_bau_werkzeuge { padding-left: 0.25rem; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .nm_bau_karte { height: 6.2rem; }
}