/* ============================================================
   Krieg der Ewigen - Arm & Kern (TA-light RTS)
   Eigene Styles, Praefix .kde_  (kein Konflikt mit .ek_ Einheiten-Kueche)
   Basis: colors.css + jupi.css der Plattform
   ============================================================ */

/* ---------- Titelzeile + Buehne ---------- */

.kde_titel h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.kde_buehne {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.kde_spielfeld {
  position: relative;
  width: 100%;
  max-width: 960px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  background: #55683f;
  touch-action: none;           /* Fingerziehen = Kamera, nicht Scrollen */
}

.kde_spielfeld canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Vollbild: Canvas seitenverhaeltreu einpassen */
.kde_spielfeld:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  border-radius: 0;
  background: #141b10;
}

.kde_spielfeld:fullscreen canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ... aber die Minimap bleibt klein (ueberschreibt die Vollbild-Regel oben) */
.kde_spielfeld:fullscreen canvas.kde_minimap {
  width: 168px;
  height: 126px;
  object-fit: fill;
}

/* ---------- HUD (auf dem Spielfeld, Regel 3.13.8 / Brueckenbau-Muster) ---------- */

.kde_hud {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .55rem .7rem;
  pointer-events: none;         /* Klicks gehen ans Spielfeld durch ... */
}

.kde_hud_oben { top: 0; }

/* ... nur die Knöpfe selbst sind klickbar */
.kde_hud button,
.kde_hud select {
  pointer-events: auto;
}

.kde_chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Links oben: Fraktions-Chips UNTEReinander mit den Ressourcen (TA-Stil) */
.kde_hud_links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  pointer-events: none;
}

/* ---------- Ressourcen oben links (TA/SupCom-Vorbild) ---------- */

.kde_ress {
  display: flex;
  flex-direction: row;          /* nebeneinander statt untereinander */
  gap: .35rem;
}

.kde_ress[hidden] { display: none; }

.kde_res {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(12, 20, 12, .72);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .55rem;
  padding: .16rem .5rem;
  color: #fff;
  font-size: .8rem;
}

.kde_res img { display: block; }

.kde_res strong { font-size: .92rem; }

.kde_res small { opacity: .75; font-size: .6rem; white-space: nowrap; }

.kde_res_balken {
  display: block;
  width: 6.5rem;
  height: .62rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .3rem;
  overflow: hidden;
}

.kde_res_balken i {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(180deg, #d5e4ee, #8fa8ba);
  border-radius: .2rem;
  transition: width .25s linear;
}

.kde_res_balken_e i { background: linear-gradient(180deg, #ffe9a8, #d9a824); }

.kde_chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(12, 20, 12, .72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.kde_chip strong { font-size: 1rem; }

/* WICHTIG: display:inline-flex wuerde das hidden-Attribut schlagen -
   der Wafo-Chip bliebe sonst dauerhaft sichtbar (mit "0:00"). */
.kde_chip[hidden] { display: none; }

.kde_chip_arm { border-color: #6ba3dd; color: #bcd8f5; }
.kde_chip_kern { border-color: #d0685a; color: #f3c0b5; }

/* Ressourcen-Chips: Icon + Bestand + Zufluss */
.kde_chip_res { border-color: #d9c36a; color: #ffe9a8; }
.kde_chip_res img { display: block; }
.kde_chip_res small { font-size: .68rem; font-weight: 400; opacity: .85; }

/* ---------- SupCom-Leiste (unten): BAU-MENÜ LINKS | Auswahl rechts ---------- */

.kde_leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
  background: rgba(14, 19, 26, .92);
  border-top: 2px solid rgba(140, 190, 240, .55);
  padding: .45rem .6rem;
  /* Rechts bis zur Minimap freihalten (die sitzt in der Ecke UEBER der
     Leiste): 168px Minimap + Abstand = ~11.5rem Reserve */
  padding-right: 11.6rem;
  pointer-events: auto;
}

.kde_leiste[hidden] { display: none; }

/* Bau links (freie Fläche bis zur Auswahl - die Minimap bleibt rechts frei) */
.kde_leiste_bau {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;        /* Fabrik-Panel + Wartetext kürzen sich, statt in die Auswahl zu ragen */
}

/* Bau-Menue mit TABS (Wirtschaft | Schutz & Aufklärung | Fabriken): unten
   die Tab-Zeile, darunter NUR die Knoepfe des gewaehlten Tabs. Der Block
   bleibt KOMPAKT LINKS (schmaler als 1/3 der Leiste) und verdeckt das
   Geschehen nur am linken unteren Rand. */
.kde_leiste_bau #kde_bauleiste {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: .18rem;
}

/* Tab-Zeile UNTER den Kacheln (BAR: "Economy Z · Combat X · Build C"),
   aktiver Tab gelb umrandet, Shortcut-Buchstabe gelb */
.kde_bau_tabs { display: flex; gap: .2rem; }

.kde_bau_tab {
  background: rgba(10, 16, 24, .78);
  border: 1px solid rgba(140, 190, 240, .35);
  border-radius: .4rem;
  color: #cfe2f2;
  font-size: .62rem;
  font-weight: 700;
  padding: .14rem .5rem;
  cursor: pointer;
  white-space: nowrap;
}

.kde_bau_tab b { color: #ffd24a; font-weight: 800; margin-left: .12rem; }

.kde_bau_tab:hover { border-color: rgba(255, 210, 74, .55); color: #fff; }

.kde_bau_tab.kde_bau_tab_aktiv {
  background: rgba(80, 62, 14, .72);
  border-color: #ffd24a;
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 210, 74, .35);
}

/* Kacheln des aktiven Tabs im BAR-Stil: grosse quadratische Icon-Kacheln
   (die ic_*.svg fuellen die Kachel ganz), Kosten als dunkler Balken unten
   AUF der Kachel, kein Name im Button (Tooltip + Icon erklaeren es) */
.kde_bau_reihe {
  display: grid;
  grid-template-columns: repeat(5, 64px);
  gap: .22rem;
}

/* display:flex der ID-Regel ueberstuende sonst das hidden-Attribut:
   Bau-Block und Fabrik-Panel bleiben nie gleichzeitig sichtbar */
.kde_leiste_bau #kde_bauleiste[hidden] { display: none; }

/* BAR-Kachel: das Icon fuellt die ganze Kachel, Kosten-Overlay unten */
.kde_leiste_bau #kde_bauleiste .kde_bau_btn { min-width: 0; width: 100%; padding: 0; }

.kde_bau_btn .kde_btn_chip {
  width: 100%;
  height: auto;
  display: block;
  background: none;
  border: none;
  border-radius: 0;
}

.kde_bau_btn .kde_btn_chip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Kosten MIT Ressourcen-Icons direkt auf der Kachel (BAR-Stil) */
.kde_bau_btn .kde_kosten {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  background: rgba(6, 10, 16, .82);
  padding: .05rem .1rem;
  line-height: 1;
}

.kde_bau_btn .kde_kosten img { width: 12px; height: 12px; }

.kde_bau_btn .kde_kosten b {
  font-size: .56rem;
  font-weight: 700;
  color: #ffd76a;
}

.kde_bau_btn:hover { border-color: #cfe8ff; }

.kde_bau_btn.kde_bau_aktiv {
  border-color: #ffd24a;
  box-shadow: 0 0 10px rgba(255, 210, 74, .55);
}

/* Einheitlicher Icon-Chip: jedes Icon sitzt im gleichen dunklen Kaestchen */
.kde_btn_chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(8, 14, 20, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .38rem;
  flex-shrink: 0;
}

.kde_btn_chip img { width: 26px; height: 26px; object-fit: contain; }

/* Tech-2-Knopf: Goldrand + T2-Badge (nur die Tech-2-Fabrik) */
.kde_bau_btn { position: relative; }

.kde_bau_btn.kde_bau_btn_t2 { border-color: #e8a01f; }
.kde_bau_btn.kde_bau_btn_t2 .kde_btn_chip { border-color: rgba(232, 160, 31, .65); }

.kde_t2_badge {
  position: absolute;
  top: -.4rem;
  right: -.25rem;
  background: #e8a01f;
  color: #1d262c;
  font-size: .48rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  padding: .08rem .26rem;
  border-radius: .6rem;
  border: 1px solid rgba(255, 247, 221, .85);
}

/* Auswahl rechts (weg vom Bau-Menue und der Minimap darueber) */
.kde_leiste_auswahl {
  min-width: 0;
  max-width: 24rem;
  text-align: right;
  color: #cfe8ff;
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding: 0 .35rem 0 .6rem;
}

.kde_leiste_auswahl small {
  display: block;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .55;
}

.kde_leiste_auswahl span {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kde_bau_gruppe {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-wrap: nowrap;      /* Knöpfe bleiben in EINER Reihe - Vertikal-Quetschen verdeckt das Feld */
  justify-content: flex-end;
  max-width: 100%;
  flex-shrink: 0;
}

.kde_bau_gruppe[hidden] { display: none; }

/* Fabrik-Knöpfe dürfen schrumpfen (Name mit Ellipsis), statt das Panel hoch wachsen zu lassen */
.kde_bau_gruppe .kde_fabrik_btn { min-width: 0; }

.kde_fabrik_btn > span:not(.kde_btn_chip) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.kde_bau_hint {
  color: rgba(255, 255, 255, .6);
  font-size: .68rem;
  text-align: right;
  max-width: 11rem;
}

/* Fabrik-Knoepfe: wie Bau-Knoepfe als Spalte (Chip-Icon / Name / Kosten) -
   die Einheiten-Sprites sitzen im gleichen dunklen Icon-Chip */
.kde_fabrik_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  background: rgba(46, 68, 96, .65);
  border: 2px solid rgba(140, 190, 240, .6);
  border-radius: .55rem;
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.1;
  padding: .25rem .4rem;
  cursor: pointer;
  text-align: center;
  min-width: 3.6rem;
}

.kde_fabrik_btn .kde_btn_chip img { width: 28px; height: 28px; }

.kde_fabrik_btn span { white-space: nowrap; }

/* Kosten mit Icons am Fabrik-Knopf (Name bleibt darueber/daneben) */
.kde_fabrik_btn > span.kde_kosten_inline { overflow: visible; }

.kde_kosten_inline {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
}

.kde_kosten_inline img { width: 13px; height: 13px; }

.kde_kosten_inline b { font-size: .6rem; font-weight: 700; color: #ffd76a; }

.kde_fabrik_btn:hover { background: rgba(70, 100, 140, .8); }

.kde_fabrik_warte {
  color: #cfe8ff;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;      /* Warteschlangentext bleibt eine Zeile */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kde_fabrik_warte[hidden] { display: none; }

/* ---------- Hauptmenue: Titel mit Sprites + Fakten-Zeile ---------- */

.kde_haupt_titel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

.kde_haupt_sprite {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}

.kde_haupt_sprite_rechts { transform: scaleX(-1); }   /* blickt nach links */

.kde_haupt_fakten {
  display: block;
  margin: -.15rem 0 .35rem;
  color: #7fa8cc;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- Lobby: Links Teilnehmer | rechts oben Vorschau + Settings |
   rechts unten Kartenliste (3 Zonen) ---------- */

/* ID im Selektor: gewinnt gegen .kde_menue (max-width 33rem) */
#kde_skirmish .kde_menue_skirmish {
  max-width: 56rem;
  width: min(96%, 56rem);
  text-align: left;
}

.kde_menue_skirmish .kde_menue_titel { text-align: center; }

.kde_lobby_raster {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: 1rem;
  margin-top: .5rem;
  align-items: start;
}

.kde_lobby_links {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.kde_lobby_rechts {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}

.kde_lobby_top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}

.kde_lobby_vorschau { text-align: center; }

.kde_karten_vorschau {
  display: block;
  width: 15rem;
  border-radius: .6rem;
  border: 2px solid rgba(140, 190, 240, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

.kde_lobby_vorschau b { display: block; color: #eef4fa; font-size: 1rem; margin-top: .3rem; }

.kde_lobby_vorschau small { display: block; color: #8fb0cd; font-size: .64rem; }

/* Netz-Status-Chip in der Lobby-Titelzeile (nur bei bestehender Verbindung) */
.kde_lobby_mpchip {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  font-size: .62rem;
  font-weight: 700;
  color: #bfe6c3;
  background: rgba(30, 58, 34, .75);
  border: 1px solid #58a83c;
  border-radius: .7rem;
  padding: .12rem .55rem;
}
.kde_lobby_mpchip[hidden] { display: none; }

/* Settings: Label ueber den Segment-Knoepfen, kompakt neben der Vorschau */
.kde_lobby_settings .kde_regel {
  flex-direction: column;
  align-items: stretch;
  gap: .18rem;
}

.kde_lobby_settings .kde_regel > small { min-width: 0; }

.kde_lobby_settings .kde_segmente {
  display: flex;
  flex-wrap: wrap;
}

/* Kartenliste kompakt: eine Zeile je Karte (Chip, Name, Meta rechts) */
.kde_karten_liste_kompakt {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.kde_karten_zeile {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(18, 27, 38, .7);
  border: 2px solid #2c4258;
  border-radius: .5rem;
  padding: .3rem .6rem;
  cursor: pointer;
  text-align: left;
  color: #dbe7f3;
  transition: border-color .12s, box-shadow .12s;
}

.kde_karten_zeile:hover { border-color: #4d9be6; }

.kde_karten_zeile.kde_karten_aktiv {
  border-color: #4d9be6;
  background: #16273a;
  box-shadow: 0 0 10px rgba(77, 155, 230, .35);
}

.kde_karten_zeile b { font-size: .78rem; color: #eef4fa; }

.kde_karten_zeile small { color: #8fb0cd; font-size: .62rem; }

.kde_karten_chip {
  flex-shrink: 0;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
}

/* ---------- Kurze Hinweis-Meldung (z.B. Vorkommen noetig) ---------- */

.kde_meldung {
  position: absolute;
  left: 50%;
  bottom: 8.1rem;               /* ueber dem 2-reihigen Bau-Raster */
  transform: translateX(-50%);
  background: rgba(60, 30, 14, .92);
  border: 1px solid #e8a15a;
  color: #ffe2c2;
  border-radius: .7rem;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 700;
  pointer-events: none;
  max-width: calc(100% - 1.5rem);
  text-align: center;
}

.kde_meldung[hidden] { display: none; }

.kde_hud_rechts {
  display: flex;
  gap: .4rem;
}

.kde_iconbtn {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(12, 20, 12, .72);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}

.kde_iconbtn:hover { background: rgba(40, 60, 40, .85); }

/* ---------- Minimap (unten rechts, TA-Feel) ---------- */

/* Doppel-Klasse hoeher als ".kde_spielfeld canvas" (0,1,1), sonst staendige 100%-Breite */
.kde_spielfeld canvas.kde_minimap {
  display: block;
  width: 168px;                 /* intern je Karte Welt/8, per CSS passend skaliert */
  height: 126px;
  object-fit: fill;
  position: absolute;
  right: .55rem;
  bottom: .55rem;               /* fest in der Ecke unten rechts (RTS-Standard) */
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: .45rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  background: #16200f;
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}

/* ---------- Overlays (Start / Rundenende) ---------- */

.kde_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(10, 16, 24, .55);
  backdrop-filter: blur(3px);
  padding: 1rem;
  overflow-y: auto;
  z-index: 5;                   /* ueber Minimap + Leiste */
}

.kde_overlay[hidden] { display: none; }

.kde_overlay_karte {
  background: #fff;
  color: #223;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  border-top: 6px solid #43A047;
  max-width: 30rem;
  width: min(92%, 30rem);
  padding: 1.2rem 1.4rem;
  text-align: center;
  margin: auto;                 /* vertikal zentrieren, wenn es passt */
}

/* ---------- SupCom-Menue (dunkle Kommandozentrale) ---------- */

.kde_menue {
  background: linear-gradient(180deg, #1b2634, #0e141d);
  color: #dbe7f3;
  border: 1px solid #35516f;
  border-top: 3px solid #4d9be6;
  border-radius: 1rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(77, 155, 230, .18);
  max-width: 33rem;
  width: min(94%, 33rem);
  padding: 1.1rem 1.3rem 1.2rem;
  text-align: center;
  margin: auto;
}

.kde_menue_titel { margin: 0 0 .35rem; font-size: 1.35rem; color: #f0f6fc; }

.kde_menue_intro {
  margin: 0 auto .4rem;
  max-width: 27rem;
  font-size: .88rem;
  line-height: 1.45;
  color: #a9bdd2;
}

.kde_menue_fuss { margin-top: .7rem; }

.kde_start_btn { font-size: 1.05rem; padding: .45rem 1.6rem; }

/* Der Start-Knopf nennt die gewaehlte Karte mit (dezent, aber lesbar) */
.kde_start_btn small {
  font-size: .82rem;
  font-weight: 400;
  opacity: .9;
}

.kde_btn_dunkel {
  background: rgba(60, 88, 120, .55);
  border: 1px solid rgba(140, 190, 240, .5);
}

.kde_btn_dunkel:hover { background: rgba(80, 112, 150, .7); }

.kde_menue_ende p { color: #c4d4e4; text-align: left; line-height: 1.5; }

.kde_menue_ende #kde_runde_titel { color: #f0f6fc; }

/* Zurueck-Knopf oben links im Untermenue */
.kde_menue_zurueck {
  position: absolute;
  top: .7rem;
  left: .7rem;
  background: rgba(60, 88, 120, .4);
  border: 1px solid rgba(140, 190, 240, .4);
  border-radius: .5rem;
  color: #a9c4de;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .6rem;
  cursor: pointer;
}

.kde_menue_zurueck:hover { background: rgba(80, 112, 150, .6); color: #fff; }

.kde_menue { position: relative; }   /* Anker fuer den Zurueck-Knopf */

/* ---------- Hauptmenue: drei grosse Auswahl-Knoepfe ---------- */

.kde_haupt_knoepfe {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: .5rem auto 0;
  max-width: 21rem;
}

.kde_haupt_btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-align: left;
  background: linear-gradient(180deg, rgba(46, 68, 96, .55), rgba(28, 42, 60, .55));
  border: 2px solid rgba(77, 155, 230, .45);
  border-radius: .7rem;
  color: #eef4fa;
  padding: .55rem .8rem;
  cursor: pointer;
}

.kde_haupt_btn b { font-size: .98rem; }

.kde_haupt_btn small { color: #9db8d2; font-size: .74rem; }

.kde_haupt_btn:hover {
  border-color: #4d9be6;
  background: linear-gradient(180deg, rgba(60, 92, 130, .7), rgba(36, 54, 78, .7));
  box-shadow: 0 0 14px rgba(77, 155, 230, .25);
}

.kde_badge {
  position: absolute;
  top: .45rem;
  right: .55rem;
  font-style: normal;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #ffd8a8;
  background: rgba(122, 86, 30, .55);
  border: 1px solid rgba(232, 161, 31, .5);
  border-radius: 999px;
  padding: .1rem .5rem;
  text-transform: uppercase;
}

.kde_badge_gruen {
  color: #c9f0cd;
  background: rgba(46, 105, 56, .5);
  border-color: rgba(102, 187, 106, .55);
}

/* ---------- Regeln im Freie-Schlacht-Menue (Segment-Knoepfe) ---------- */

.kde_regeln {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: .55rem auto 0;
  max-width: 21rem;
}

.kde_regel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.kde_regel > small {
  color: #8fb0cd;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  min-width: 7.2rem;
  text-align: left;
}

.kde_segmente {
  display: flex;
  gap: .25rem;
  background: rgba(10, 15, 22, .6);
  border: 1px solid rgba(77, 155, 230, .25);
  border-radius: .55rem;
  padding: .18rem;
}

.kde_segmente button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: .4rem;
  color: #9db8d2;
  font-size: .72rem;
  font-weight: 700;
  padding: .22rem .55rem;
  cursor: pointer;
  white-space: nowrap;
}

.kde_segmente button:hover { color: #e6f1fb; }

.kde_segmente button.kde_seg_aktiv {
  background: rgba(77, 155, 230, .3);
  border-color: #4d9be6;
  color: #fff;
  box-shadow: 0 0 8px rgba(77, 155, 230, .35);
}

/* ---------- Mehrspieler (Lobby-Einladung + Beitreten-Panel) ---------- */

/* Einlade-Panel in der Lobby (aufklappbar, nur beim Gastgeber sichtbar) */
.kde_mp_einladen {
  margin-top: .45rem;
  background: rgba(14, 30, 44, .75);
  border: 1px solid #35516f;
  border-radius: .55rem;
  padding: .35rem .5rem .5rem;
}
/* display:block schlaegt sonst das hidden-Attribut (Muster in diesem Spiel) */
.kde_mp_einladen[hidden] { display: none; }

.kde_mp_einladen summary {
  cursor: pointer;
  color: #cfe2f2;
  font-size: .76rem;
  font-weight: 700;
}

.kde_mp_einladen[open] summary { margin-bottom: .35rem; }

.kde_mp_kurz {
  color: #9fbcd8;
  font-size: .68rem;
  line-height: 1.35;
  margin: .2rem 0 .4rem;
}

.kde_mp_schritt {
  color: #9fbcd8;
  font-size: .72rem;
  line-height: 1.4;
  margin: 0 0 .3rem;
}

.kde_mp_btn {
  font-size: .72rem;
  padding: .3rem .7rem;
  align-self: flex-start;
}

.kde_mp_slotinfo { color: #8fb0cd; font-size: .64rem; }

.kde_mp_liste {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  font-size: .7rem;
}
.kde_mp_liste:empty { margin: 0; }
.kde_mp_li_ok { color: #bfe6c3; }
.kde_mp_li_warten { color: #e8b878; }
.kde_mp_abbr {
  background: transparent;
  border: 1px solid #6b4a2a;
  border-radius: .3rem;
  color: #e8b878;
  font-size: .62rem;
  cursor: pointer;
  padding: .05rem .35rem;
}

.kde_mp_raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: .55rem auto 0;
  max-width: 30rem;
}

.kde_mp_box {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: rgba(18, 27, 38, .7);
  border: 1px solid #2c4258;
  border-radius: .6rem;
  padding: .6rem;
  text-align: left;
}

.kde_mp_box b { color: #eef4fa; font-size: .84rem; }

.kde_mp_platzhalter {
  color: #6d8aa6;
  font-family: monospace;
  font-size: .78rem;
  background: rgba(10, 15, 22, .7);
  border: 1px dashed #35516f;
  border-radius: .4rem;
  padding: .45rem .55rem;
  text-align: center;
}

.kde_mp_box button:disabled { opacity: .45; cursor: not-allowed; }

/* Code-Felder + Status (WebRTC-Prototyp) */
.kde_mp_code {
  width: 100%;
  min-height: 3.4rem;
  max-height: 7rem;
  resize: vertical;
  color: #cfe2f2;
  font-family: monospace;
  font-size: .7rem;
  line-height: 1.35;
  background: rgba(10, 15, 22, .75);
  border: 1px solid #35516f;
  border-radius: .4rem;
  padding: .4rem .5rem;
  box-sizing: border-box;
}
.kde_mp_code::placeholder { color: #5d7a96; }
.kde_mp_status {
  margin: .5rem auto 0;
  color: #9fbcd8;
  font-size: .8rem;
}
.kde_mp_nach_verbindung p { color: #bfe6c3; font-size: .82rem; margin: .5rem 0; }

/* Netz-Emotes in der Schlacht (nur Mehrspieler sichtbar) */
.kde_netz_emotes {
  position: absolute;
  right: .55rem;
  bottom: 7.9rem;
  display: flex;
  gap: .3rem;
  z-index: 5;
}
/* display:flex schlaegt sonst das hidden-Attribut (Muster Wafo-Chip-BUG) */
.kde_netz_emotes[hidden] { display: none; }
.kde_netz_emotes button {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: .5rem;
  border: 1px solid #2c4258;
  background: rgba(13, 21, 30, .8);
  cursor: pointer;
  padding: 0;
}
.kde_netz_emotes button:hover { border-color: #4d9be6; }

.kde_bald_hinweis {
  display: block;
  margin-top: .55rem;
  color: #e8b878;
  font-size: .74rem;
  font-style: normal;
}

/* ---------- Kampagne (Vorbereitung) ---------- */

.kde_missionen {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: .55rem auto 0;
  max-width: 24rem;
  max-height: 20rem;
  overflow-y: auto;            /* 4 Missionen: Liste scrollt intern, das
                                  Menue bleibt kompakt (kein Seitenscroll) */
  padding-right: .25rem;
  text-align: left;
}

.kde_missionen::-webkit-scrollbar { width: 6px; }

.kde_missionen::-webkit-scrollbar-thumb {
  background: #2c4258;
  border-radius: 3px;
}

.kde_mission {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  background: rgba(18, 27, 38, .7);
  border: 2px solid #2c4258;
  border-radius: .6rem;
  color: #dbe7f3;
  padding: .5rem .7rem;
  text-align: left;
  cursor: pointer;
}

.kde_mission:disabled { cursor: not-allowed; opacity: .55; }

.kde_mission:not(:disabled):hover { border-color: #4d9be6; }

.kde_mission.kde_mission_offen { border-color: rgba(102, 187, 106, .55); }

.kde_mission.kde_mission_offen:hover { border-color: #66bb6a; }

.kde_mission small {
  color: #7fa8cc;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.kde_mission b { color: #eef4fa; font-size: .9rem; }

.kde_mission span { color: #9db8d2; font-size: .74rem; line-height: 1.35; }

.kde_mission .kde_badge { top: .45rem; }

/* Kampagne: Ziel-Zeile (gold) + geschaffte Mission + Terrain-Chip in der
   Karten-Zeile. Hoehere Spezifitaet als ".kde_mission span" noetig! */
.kde_mission span.kde_mission_ziel { color: #ffe9a8; font-size: .72rem; }

.kde_mission.kde_mission_fertig { border-color: rgba(102, 187, 106, .85); }

.kde_mission small .kde_karten_chip {
  display: inline-block;
  vertical-align: -1px;
  margin-left: .3rem;
}

/* Wafo-Chip im HUD */
.kde_chip_wafo { border-color: #e8a15a; color: #ffe2c2; }

/* Missionsziel-Chip (Kampagne) - Gold wie die Ziel-Zone auf dem Feld */
.kde_chip_ziel { border-color: #d9c36a; color: #ffe9a8; }

/* Zuschauer-Chip: eigene Fraktion abgeschaltet, Schlacht laeuft weiter */
.kde_chip_zuschauer { border-color: #8a97a3; color: #dbe4ea; }

/* ---------- Optionen: Schnellzugriff + Einstellungs-Ansicht ---------- */

.kde_optionen_zeile {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .7rem;
  flex-wrap: wrap;
}

.kde_schnell_btn {
  background: rgba(60, 88, 120, .4);
  border: 1px solid rgba(140, 190, 240, .4);
  border-radius: .5rem;
  color: #cfe0f0;
  font-size: .74rem;
  font-weight: 700;
  padding: .32rem .7rem;
  cursor: pointer;
}

.kde_schnell_btn:hover {
  background: rgba(80, 112, 150, .6);
  color: #fff;
  border-color: rgba(140, 190, 240, .7);
}

.kde_opt_gruppe {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: .6rem auto .3rem;
  max-width: 24rem;
  text-align: left;
}

.kde_opt_zeile {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(18, 27, 38, .7);
  border: 1px solid #2c4258;
  border-radius: .6rem;
  padding: .5rem .7rem;
}

.kde_opt_zeile > small {
  color: #8fb0cd;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  min-width: 6.8rem;
}

.kde_opt_zeile .kde_segmente { flex-shrink: 0; }

.kde_opt_wert {
  color: #eef4fa;
  font-size: .78rem;
  font-weight: 700;
  min-width: 2.6rem;
  text-align: right;
}

/* Range-Slider im Menue-Farbschema */
.kde_opt_zeile input[type="range"] {
  flex: 1;
  min-width: 6rem;
  accent-color: #4d9be6;
  cursor: pointer;
}

/* ---------- Pause-Menue (ESC / ⏸ im HUD) ---------- */

.kde_pause_menue { max-width: 17rem; width: min(88%, 17rem); }

.kde_pause_knoepfe {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .55rem;
}

.kde_pause_knoepfe .jupi_btn { width: 100%; justify-content: center; }

.kde_pause_menue .kde_optionen_zeile { margin-top: .65rem; }

.kde_overlay_karte h3 {
  margin: .1rem 0 .5rem;
  font-size: 1.3rem;
}

.kde_briefing { text-align: left; font-size: .95rem; line-height: 1.45; }

.kde_arm_text { color: #2b62a8; }
.kde_kern_text { color: #b23327; }

.kde_overlay_btns {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}

/* ---------- Info- (blau) und Hilfe-Box (gruen) unter dem Spiel ---------- */

.kde_info,
.kde_hilfe {
  max-width: 960px;
  margin: .8rem auto 0;
  border-radius: .8rem;
  padding: .55rem .9rem;
  font-size: .95rem;
}

.kde_info {
  background: #e8f2fc;
  border: 1px solid #b9d4ee;
}
.dark .kde_info,
[data-theme="dark"] .kde_info {
  background: #1d2a38;
  border-color: #34506e;
}

.kde_hilfe {
  background: #e9f6e9;
  border: 1px solid #bcdcbc;
}
.dark .kde_hilfe,
[data-theme="dark"] .kde_hilfe {
  background: #1c2e1c;
  border-color: #35542f;
}

.kde_info summary,
.kde_hilfe summary {
  cursor: pointer;
  font-weight: 700;
}

.kde_info_inhalt p,
.kde_hilfe ul { margin: .6rem 0; }

.kde_lernziel {
  background: rgba(67, 160, 71, .12);
  border-left: 4px solid #43A047;
  border-radius: .4rem;
  padding: .5rem .7rem;
}

/* ---------- Lobby: bis zu 8 Slots (4x2-Raster) ---------- */

.kde_slots_titel {
  margin: .6rem 0 .3rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7fa8cc;
}

.kde_slots {
  display: grid;
  grid-template-columns: 1fr;   /* jede Fraktion eine ganze Zeile */
  gap: .35rem;
  max-width: none;
}

.kde_slot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  background: rgba(18, 27, 38, .7);
  border: 1px solid #2c4258;
  border-radius: .55rem;
  padding: .28rem .5rem;
}

.kde_slot_spieler { border-color: #58a83c; background: rgba(30, 58, 34, .6); }

/* Mitspieler-Platz (Mensch am anderen Gerät) - blauer Rand wie der Netz-Chip */
.kde_slot_mensch {
  border-color: #4d9be6;
  background: rgba(20, 42, 62, .68);
  box-shadow: inset 0 0 0 1px rgba(77, 155, 230, .25);
}

.kde_slot_leer { opacity: .5; }

/* Gesperrte Knöpfe (fremde Plätze eines Gastes) klar erkennbar machen */
.kde_slot button:disabled { opacity: .35; cursor: not-allowed; }

.kde_slot_bereit {
  background: rgba(30, 58, 34, .8);
  border: 1px solid #58a83c;
  border-radius: .4rem;
  color: #bfe6c3;
  font-size: .64rem;
  font-weight: 700;
  padding: .14rem .5rem;
  cursor: pointer;
}
.kde_slot_bereit.kde_seg_aktiv { background: rgba(88, 168, 60, .45); color: #fff; }

.kde_slot_nr {
  min-width: 2rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.kde_slot_gruppe {
  display: inline-flex;
  background: rgba(10, 15, 22, .6);
  border: 1px solid rgba(77, 155, 230, .25);
  border-radius: .4rem;
  padding: .06rem;
}

.kde_slot_gruppe button {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: .35rem;
  color: #9db8d2;
  font-size: .66rem;
  font-weight: 700;
  padding: .1rem .4rem;
  cursor: pointer;
  white-space: nowrap;
}

/* Mini-Sprites (Arm-Pikser / Kern-Stampfer) in den Architektur-Segmenten */
.kde_slot_gruppe button img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}

.kde_slot_gruppe button:hover { color: #e6f1fb; }

.kde_slot_gruppe button.kde_seg_aktiv {
  background: rgba(77, 155, 230, .3);
  border-color: #4d9be6;
  color: #fff;
}

.kde_slot_farbe {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .6);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, .4);
}

.kde_slot_du {
  font-size: .6rem;
  font-style: normal;
  font-weight: 700;
  color: #9fd8b4;
  white-space: nowrap;
}

.kde_slots_hinweis {
  display: block;
  margin: .45rem auto 0;
  max-width: none;
  color: #8fb0cd;
  font-size: .7rem;
  text-align: center;
}

/* ---------- Handy-Landscape (844x390): HUD + Leiste kompakt ---------- */

@media (max-height: 480px) {
  .kde_chip { font-size: .72rem; padding: .18rem .55rem; }
  .kde_chip strong { font-size: .85rem; }
  .kde_iconbtn { width: 2rem; height: 2rem; font-size: .9rem; }
  .kde_hud { padding: .35rem .5rem; }
  .kde_overlay_karte { padding: .8rem 1rem; }
  .kde_briefing { font-size: .8rem; }
  .kde_overlay_karte h3 { font-size: 1.05rem; }
  /* Karten-Wahl kompakt: schmales Liste+Detail-Grid bleibt, Vorschau flach */
  .kde_skirmish_raster { grid-template-columns: 8.6rem minmax(0, 1fr); gap: .45rem; }
  .kde_karten_zeile { padding: .22rem .4rem; }
  .kde_karten_zeile b { font-size: .64rem; }
  .kde_karten_zeile small { font-size: .55rem; }
  .kde_karten_vorschau { max-height: 6.2rem; object-fit: cover; }
  .kde_karten_info p { display: none; }
  .kde_haupt_sprite { width: 30px; height: 30px; }
  .kde_overlay_btns { margin-top: .5rem; }
  /* Menues kompakt */
  .kde_haupt_knoepfe { gap: .35rem; }
  .kde_haupt_btn b { font-size: .84rem; }
  .kde_haupt_btn small { font-size: .64rem; }
  .kde_regeln { gap: .3rem; }
  .kde_regel { flex-direction: column; align-items: stretch; gap: .2rem; }
  .kde_regel > small { min-width: 0; }
  .kde_segmente button { font-size: .62rem; padding: .16rem .4rem; }
  .kde_mp_raster { gap: .35rem; }
  .kde_mp_box b { font-size: .74rem; }
  .kde_mp_platzhalter { font-size: .66rem; padding: .3rem .4rem; }
  .kde_missionen { gap: .3rem; max-height: 9.5rem; }
  .kde_mission b { font-size: .78rem; }
  .kde_mission span { font-size: .64rem; }
  .kde_menue_titel { font-size: 1.05rem; }
  .kde_menue_intro { font-size: .74rem; }
  .kde_optionen_zeile { gap: .3rem; margin-top: .4rem; }
  .kde_schnell_btn { font-size: .64rem; padding: .22rem .5rem; }
  .kde_opt_zeile { flex-wrap: wrap; padding: .35rem .5rem; gap: .3rem; }
  .kde_opt_zeile > small { min-width: 100%; }
  .kde_opt_zeile input[type="range"] { min-width: 100%; }
  /* SupCom-Leiste + Ressourcen-HUD: eng - Auswahl weg, Knöpfe kompakt */
  .kde_leiste { padding: .25rem .4rem; padding-right: 7.5rem; gap: .3rem; }
  .kde_res { font-size: .6rem; padding: .08rem .3rem; gap: .25rem; }
  .kde_res strong { font-size: .7rem; }
  .kde_res_balken { width: 3.2rem; height: .38rem; }
  .kde_slots { grid-template-columns: 1fr; }
  .kde_slot_gruppe button { font-size: .55rem; padding: .08rem .25rem; }
  .kde_slot_gruppe button img { width: 12px; height: 12px; }
  /* Landscape-Handy: 2-Spalten-Lobby bleibt (kompakt), NICHT stapeln */
  .kde_lobby_raster { grid-template-columns: 10rem minmax(0, 1fr); gap: .5rem; }
  .kde_lobby_top { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
  /* Einlade-Panel kompakt: die Spalte ist hier nur 10rem breit */
  .kde_mp_einladen summary { font-size: .66rem; }
  .kde_mp_kurz { display: none; }                /* Erklaertext am Handy sparen */
  .kde_mp_code { min-height: 2.2rem; max-height: 4rem; font-size: .58rem; }
  .kde_mp_btn { font-size: .6rem; padding: .2rem .45rem; }
  .kde_mp_liste { font-size: .58rem; }
  .kde_mp_status { font-size: .62rem; }
  .kde_karten_vorschau { width: 6.5rem; margin: 0; }
  .kde_lobby_vorschau b { font-size: .78rem; }
  .kde_slots_titel { margin: .2rem 0 .25rem; }
  .kde_res strong { font-size: .78rem; }
  .kde_res small { font-size: .55rem; }
  .kde_res_balken { width: 4rem; height: .42rem; }
  .kde_leiste_auswahl { display: none; }
  /* Bau-Tabs + BAR-Kacheln kompakt: kleinere Kacheln (46px), Kosten
     bleiben sichtbar (BAR-Stil), Tabs mit Shortcut */
  .kde_leiste_bau #kde_bauleiste { gap: .12rem; }
  .kde_bau_tab { font-size: .52rem; padding: .1rem .35rem; }
  .kde_bau_reihe { grid-template-columns: repeat(5, 46px); gap: .16rem; }
  .kde_bau_btn .kde_kosten { gap: .18rem; padding: 0 .06rem; }
  .kde_bau_btn .kde_kosten img { width: 10px; height: 10px; }
  .kde_bau_btn .kde_kosten b { font-size: .48rem; }
  .kde_btn_chip { width: 24px; height: 24px; }
  .kde_btn_chip img { width: 21px; height: 21px; }
  .kde_bau_hint { display: none; }
  .kde_fabrik_btn { font-size: .68rem; padding: .18rem .45rem; }
  .kde_fabrik_btn .kde_kosten_inline img { width: 11px; height: 11px; }
  .kde_fabrik_btn .kde_kosten_inline b { font-size: .55rem; }
  .kde_fabrik_warte { font-size: .62rem; }
  .kde_meldung { bottom: 6rem; font-size: .75rem; }
  .kde_spielfeld canvas.kde_minimap { width: 108px; height: 81px; right: .4rem; bottom: .4rem; }
}

/* ---------- Hover-Tooltip Bau-/Fabrik-Knoepfe ---------- */
/* Ein fixes Panel fuer die ganze Leiste: Name, Kosten-Zeile, ausfuehrliche
   Beschreibung, Wirkungs-Werte und Bedien-Hinweis. pointer-events:none,
   damit es beim Darueberfahren nicht flackert. */
.kde_tooltip {
  position: fixed; z-index: 45; max-width: 19rem;
  padding: .55rem .7rem;
  background: rgba(13,19,15,.96);
  color: #e8f2e8;
  border: 1px solid rgba(140,180,120,.55);
  border-radius: .5rem;
  font-size: .78rem; line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: .28rem;
}
.kde_tooltip[hidden] { display: none; }   /* [hidden]-Guard gegen display:flex */
.kde_tt_kosten { color: #ffd24a; font-weight: 600; }
.kde_tt_text { color: #d3e2d3; }
.kde_tt_wirkung { color: #9fd0ff; }
.kde_tt_hinweis {
  color: #8faa8f; font-size: .68rem;
  border-top: 1px solid rgba(140,180,120,.25);
  padding-top: .25rem;
}
.kde_tt_t2 {
  color: #ffd24a; font-style: normal; font-weight: 700; font-size: .66rem;
  border: 1px solid #ffd24a; border-radius: .3rem; padding: 0 .28rem;
}

/* ---------- GUI-Skalierung (Slider in den Optionen) ---------- */
/* Die Steuerung (Leiste, Ressourcen, Chips, Meldungen, Menue-Panels)
   laesst sich per Slider verkleinern/vergroessern - gespeichert pro
   Geraet. Das SPIELFELD (Canvas) bleibt unveraendert. */
#kde_ress, .kde_chips, .kde_hud_rechts,
#kde_leiste, .kde_meldung, .kde_netz_emotes,
.kde_menue, #kde_tooltip {
  zoom: var(--kde-ui-skala, 1);
}

/* ============================================================================
   13. STIL-PASS 26.10.2026 - "ORBITALER LEITSTAND"

   Vorher hatte das Spiel KEINE eigene Optik (gemessen mit
   `.zcode/stil-audit.cjs`: "nichts - Einheits-Optik": gruene Plattform-Leiste,
   weisse Seite, kahler Rahmen). Krieg der Ewigen ist ein SCIENCE-FICTION-RTS:
   das Kind baut eine Basis (Metall/Energie), ruestet Roboter, liest Radar und
   Kriegsnebel und schickt Einheiten ueber die Karte. Genau das zeigt die neue
   Optik - die Seite ist der Leitstand dazu: dunkler Stahl, Instrumentenglas,
   Zyan-Lichtkanten, Holo-Projektionen, Warngestreifen.

   Vier Bausteine (AGENTS.md 3.13.6/3.13.7):

     13.1 Farben und Grundlage (Weltraum-Stahl, Glas, Zyan, Bernstein)
     13.2 Seitenkulisse: EIN gestrecktes Buehnenbild (kulisse.svg), keine Kachel
     13.3 Seitenbau: Leiste buendig oben, Fuss ganz unten (Regel 3.13.2a)
     13.4 Kopfleiste: die Leitstand-Konsole (drei Zonen, Zyankante)
     13.5 Titel: das Holo-Schild der Einsatzzentrale
     13.6 Buehne: das Schlachtfeld als Holo-Tisch mit Stahlrahmen
     13.7 HUD + Leiste im Spiel: Instrumentenglas mit Zyan
     13.8 Menues: die Lagebesprechung (Karten, Lobby, Kampagne, Optionen)
     13.9 Info/Hilfe: Datenblaetter im Glasgehaeuse
     13.10 Dark Mode = Nachtschicht auf der Bruecke
     13.11 Handy (390 px)
     13.12 Bedienziele >= 40 px (Regel 3.13.5)

   Alles haengt an `body.jupi.kde_body` bzw. an den vorhandenen .kde_*-Klassen.
   KEINE ID, Klasse, Mechanik, kein Speicher-Schluessel und kein i18n-Key wurde
   umbenannt - die Optik liegt nur ueber dem Bestand (Regel 3.13.6a).
   ========================================================================== */

/* ---------- 13.1 Farben ---------- */
:root {
  --kde-raum: #050b11;
  --kde-raum-2: #03070b;
  --kde-stahl: #1b2c37;
  --kde-stahl-2: #0d1820;
  --kde-cyan: #35c8ea;
  --kde-cyan-hell: #b4eefb;
  --kde-cyan-dunkel: #1b6a84;
  --kde-blau: #5b9fe0;          /* Fraktion ARM */
  --kde-rot: #e0554a;           /* Fraktion KERN */
  --kde-amber: #ffc247;         /* Warnung / aktives Werkzeug */
  --kde-text: #dff2fb;
  --kde-text-2: #93b4c6;
  --kde-linie: rgba(53, 200, 234, .38);
  --kde-kante: 3px;
}

/* ---------- 13.2 Seitenkulisse: EIN Buehnenbild ----------
   Der orbitale Leitstand (kulisse.svg, 1600 x 1000, Generator
   .zcode/krieg-der-ewigen-kulisse.cjs) wird EINMAL gestreckt eingesetzt:
   `cover` + `no-repeat`. Deshalb darf er an den Raendern anschneiden - er
   wiederholt sich nie (Regel 3.13.7: keine Kachel mit erkennbaren Motiven). */
body.jupi.kde_body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--kde-text);
  background-color: var(--kde-raum);
  background-image: url("kulisse.svg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
}
@supports (min-height: 100dvh) {
  body.jupi.kde_body { min-height: 100dvh; }
}

/* ---------- 13.3 Seitenbau: Leiste oben buendig, Fuss ganz unten ----------
   Regel 3.13.2a: Der Kopf klebt am oberen Fensterrand (top === 0), der Fuss
   sitzt am unteren. Dafuer ist der Container eine FLEX-Spalte: die frueheren
   10 px / 33,7 px Abstand kamen vom GRID-Stretch (align-content: stretch
   verteilte die 48-px-Mindesthoehe auf die vier auto-Zeilen). */
body.jupi.kde_body .jupi_container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  background: transparent;
}
body.jupi.kde_body .jupi_main {
  flex: 1 0 auto;
  background: transparent;          /* sonst legt jupi.css eine weisse Flaeche auf die Kulisse */
  min-width: 0;
  padding: 1.2rem 1.25rem 1.4rem;
}
body.jupi.kde_body .jupi_footer {
  margin-top: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: .5rem 1rem 1rem;
  max-width: none;
  width: 100%;
}
body.jupi.kde_body .jupi_footer_text {
  color: rgba(147, 180, 198, .8);
  font-size: .78rem;
}
body.jupi.kde_body .jupi_footer_text a {
  color: var(--kde-cyan-hell);
  font-weight: 700;
}
body.jupi.kde_body .jupi_footer_text a:hover { color: #fff; }

/* ---------- 13.4 Kopfleiste: die Leitstand-Konsole ----------
   Drei Zonen (Regel 3.13.2): links das Schul-Schild + "Alle Spiele", mittig
   das jupi-Logo mit Namen, rechts Sprache + Dark-Mode. Optik: dunkles
   Instrumentenblech mit Zyan-Lichtkante - dieselbe Sprache wie das Spiel
   (dort heisst die Bedienleiste schon "SupCom-Menue"). */
body.jupi.kde_body .jupi_header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .5rem 1rem;
  border-radius: 0;
  border-bottom: var(--kde-kante) solid var(--kde-cyan);
  background:
    linear-gradient(180deg, rgba(120, 230, 255, .13), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #1e3340 0%, #12222c 55%, #08131a 100%);
  color: var(--kde-text);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .62),
    0 0 20px rgba(53, 200, 234, .16),
    inset 0 1px 0 rgba(180, 238, 251, .2);
  backdrop-filter: none;
}
/* Die Lichtkante bekommt einen hellen Kern (Leuchtstreifen) */
body.jupi.kde_body .jupi_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--kde-cyan-dunkel) 0%, var(--kde-cyan-hell) 30%,
    var(--kde-cyan) 60%, var(--kde-cyan-dunkel) 100%);
  opacity: .9;
  pointer-events: none;
}
body.jupi.kde_body .jupi_school a {
  color: var(--kde-text);
  min-height: 40px;
}
body.jupi.kde_body .jupi_school a:hover { background: rgba(53, 200, 234, .16); }
body.jupi.kde_body .jupi_school span { font-size: .95rem; }
body.jupi.kde_body .jupi_school small {
  color: var(--kde-cyan-hell);
  opacity: .9;
  letter-spacing: .07em;
}
body.jupi.kde_body .jupi_school img {
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(53, 200, 234, .55));
  height: 2.2rem;
}
/* Links: "Alle Spiele" als Glasschalter mit Zyankante */
body.jupi.kde_body .jupi_nav { order: 1; flex: 0 0 auto; justify-content: flex-start; gap: .4rem; }
body.jupi.kde_body .jupi_nav_back {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: .45rem;
  border: 1px solid var(--kde-cyan);
  background: linear-gradient(180deg, rgba(27, 58, 74, .95), rgba(10, 24, 32, .95));
  color: var(--kde-cyan-hell);
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(53, 200, 234, .26), inset 0 0 12px rgba(53, 200, 234, .12);
  transition: transform .12s ease, box-shadow .15s ease;
}
body.jupi.kde_body .jupi_nav_back:hover {
  background: linear-gradient(180deg, rgba(40, 84, 104, .98), rgba(14, 34, 44, .98));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(53, 200, 234, .42), inset 0 0 12px rgba(53, 200, 234, .18);
}
/* Mitte: das Spiel selbst - Logo + Titel (Regel 3.13.2). Schul- und jupi-Logo
   stehen hier absichtlich NICHT: die Leiste gehoert dem Spiel. */
body.jupi.kde_body .kde_marke {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-left: auto;
  margin-right: auto;
  min-height: 40px;
  min-width: 0;
  padding: 0 .3rem;
}
body.jupi.kde_body .kde_marke_logo {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .45rem;
  filter: drop-shadow(0 0 10px rgba(53, 200, 234, .5));
}
body.jupi.kde_body .kde_marke_titel {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--kde-cyan-hell);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 14px rgba(53, 200, 234, .55), 0 2px 0 rgba(0, 0, 0, .5);
}
/* Rechts: Sprache + Dark-Mode (beides >= 40 px hoch) */
body.jupi.kde_body .jupi_sprachen_wahl { order: 3; gap: .35rem; }
body.jupi.kde_body .jupi_sprachen_icon { font-size: 1.05rem; }
body.jupi.kde_body .jupi_theme_switch { order: 4; }
body.jupi.kde_body .jupi_sprachen_select {
  min-height: 40px;
  max-width: 11rem;
  padding: 0 .75rem;
  border-radius: .45rem;
  border: 1px solid var(--kde-cyan);
  background: rgba(9, 21, 28, .92);
  color: var(--kde-text);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
body.jupi.kde_body .jupi_sprachen_select:hover { background: rgba(24, 52, 66, .96); }
body.jupi.kde_body .jupi_sprachen_select option { color: #06121a; background: #dff2fb; }
body.jupi.kde_body .jupi_theme_switch {
  width: 3.9rem;
  height: 2.5rem;
  border: 1px solid var(--kde-cyan);
  background: rgba(9, 21, 28, .92);
}
body.jupi.kde_body .jupi_theme_switch:hover { background: rgba(24, 52, 66, .96); }
body.jupi.kde_body .jupi_theme_switch .jts_thumb {
  top: .22rem;
  bottom: .22rem;
  left: .24rem;
  width: 1.75rem;
  background: linear-gradient(180deg, var(--kde-cyan-hell), var(--kde-cyan));
  box-shadow: 0 0 10px rgba(53, 200, 234, .7);
}
html[data-theme="dark"] body.jupi.kde_body .jupi_theme_switch .jts_thumb {
  left: calc(100% - 1.75rem - .24rem);
}
html[data-theme="dark"] body.jupi.kde_body .jupi_theme_switch {
  background: rgba(4, 11, 15, .94);
  border-color: var(--kde-cyan);
}

/* ---------- 13.5 Titel: das Holo-Schild ---------- */
body.jupi.kde_body .kde_titel {
  margin: .2rem auto 1rem;
  padding: .32rem 1.15rem .38rem;
  max-width: max-content;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .16), transparent 70%),
    linear-gradient(180deg, rgba(23, 42, 54, .95), rgba(7, 16, 22, .96));
  border: 1px solid var(--kde-linie);
  border-radius: .4rem;
  box-shadow:
    0 0 22px rgba(53, 200, 234, .22),
    inset 0 0 0 1px rgba(180, 238, 251, .1),
    inset 0 0 26px rgba(53, 200, 234, .1);
}
body.jupi.kde_body .kde_titel h2 {
  margin: 0;
  color: var(--kde-cyan-hell);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  letter-spacing: .04em;
  text-shadow: 0 0 14px rgba(53, 200, 234, .5);
}
body.jupi.kde_body .kde_titel .h2_icon {
  width: 2rem;
  height: 2rem;
  border-radius: .3rem;
  box-shadow: 0 0 0 1px var(--kde-cyan-dunkel), 0 0 10px rgba(53, 200, 234, .35);
}

/* ---------- 13.6 Buehne: das Schlachtfeld auf dem Holo-Tisch ----------
   Die Buehne ist ein GEGENSTAND: unter dem Spielfeld liegt eine Holo-Platte
   (Projektionsflaeche mit Gitter), das Feld selbst steckt in einem Stahlrahmen
   mit Zyan-Lichtkante - so steht das Spiel sichtbar auf dem Leitstand
   (Regel 3.13.6, Baustein 3). */
body.jupi.kde_body .kde_buehne {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1.15rem .4rem 1.35rem;
  /* Groesstmoegliche Spielfeldbreite (16:9 = 960x540 Canvas): breit, aber nie
     so hoch, dass Kopfleiste + Spielfeld + Fuss nicht mehr ins Fenster passen.
     Auf grossen Bildschirmen skaliert das Feld dadurch deutlich ueber die
     alten 960 px hinaus (Wunsch 27.10.2026). */
  --kde-feld-b: min(96vw, 1560px, calc((100vh - 210px) * 1.7778));
}
@supports (height: 100dvh) {
  body.jupi.kde_body .kde_buehne {
    --kde-feld-b: min(96vw, 1560px, calc((100dvh - 210px) * 1.7778));
  }
}
body.jupi.kde_body .kde_buehne::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(var(--kde-feld-b) + 1.6rem);
  max-width: 99%;
  height: calc(100% - 1.1rem);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(62% 55% at 50% 10%, rgba(53, 200, 234, .16), transparent 72%),
    repeating-linear-gradient(90deg, rgba(53, 200, 234, .07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(53, 200, 234, .07) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, #12232e 0%, #0a1720 55%, #061016 100%);
  border: 1px solid var(--kde-linie);
  border-radius: .4rem;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, .75),
    0 0 34px rgba(53, 200, 234, .18),
    inset 0 0 70px rgba(53, 200, 234, .1);
  pointer-events: none;
}
body.jupi.kde_body .kde_spielfeld {
  position: relative;
  z-index: 1;
  width: var(--kde-feld-b);
  max-width: none;
  aspect-ratio: 16 / 9;
  border-radius: .35rem;
  background: #16200f;
  box-shadow:
    0 0 0 9px #1b2c37,                  /* Stahlrahmen */
    0 0 0 11px var(--kde-cyan),          /* Lichtkante */
    0 0 0 13px #0a151c,
    0 0 30px rgba(53, 200, 234, .3),
    0 22px 48px rgba(0, 0, 0, .68),
    inset 0 0 0 2px rgba(180, 238, 251, .22);
}
body.jupi.kde_body .kde_spielfeld:fullscreen {
  border-radius: 0;
  box-shadow: none;
}
/* Die Minimap bekommt einen Zyan-Rahmen (Sensorfeld im Leitstand) */
body.jupi.kde_body .kde_spielfeld canvas.kde_minimap {
  border: 2px solid var(--kde-cyan-dunkel);
  border-radius: .3rem;
  box-shadow: 0 0 12px rgba(53, 200, 234, .3), inset 0 0 0 1px rgba(0, 0, 0, .7);
  background: #0a1418;
}

/* ---------- 13.7 HUD + Leiste: Instrumentenglas mit Zyan ----------
   Die Bedienelemente AUF dem Feld sind dunkles Geraeteglas mit Zyankante, die
   Zahlen stehen in Zyan bzw. Bernstein. So bleibt der Blick auf der Karte,
   aber die Instrumente gehoeren zur selben Bruecke. */
body.jupi.kde_body .kde_chip,
body.jupi.kde_body .kde_res {
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .14), transparent 68%),
    linear-gradient(180deg, rgba(23, 42, 54, .94), rgba(7, 16, 22, .95));
  border: 1px solid var(--kde-linie);
  color: var(--kde-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 0 12px rgba(53, 200, 234, .1);
}
body.jupi.kde_body .kde_chip strong,
body.jupi.kde_body .kde_res strong { color: var(--kde-cyan-hell); }
body.jupi.kde_body .kde_res small { color: rgba(180, 220, 235, .75); }
body.jupi.kde_body .kde_res_balken {
  background: rgba(0, 0, 0, .55);
  border-color: var(--kde-cyan-dunkel);
}
body.jupi.kde_body .kde_res_balken i { background: linear-gradient(180deg, #d5e4ee, #8fa8ba); }
body.jupi.kde_body .kde_res_balken_e i { background: linear-gradient(180deg, #ffe9a8, #d9a824); }
body.jupi.kde_body .kde_chip_arm { border-color: var(--kde-blau); color: #cfe3f8; }
body.jupi.kde_body .kde_chip_kern { border-color: var(--kde-rot); color: #f8cdc6; }
body.jupi.kde_body .kde_chip_res,
body.jupi.kde_body .kde_chip_ziel { border-color: var(--kde-amber); color: #ffe9a8; }
body.jupi.kde_body .kde_chip_wafo { border-color: #e8a15a; color: #ffe2c2; }
body.jupi.kde_body .kde_chip_zuschauer { border-color: #8a97a3; color: #dbe4ea; }
body.jupi.kde_body .kde_iconbtn {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .45rem;
  border: 1px solid var(--kde-linie);
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .16), transparent 62%),
    linear-gradient(180deg, rgba(23, 42, 54, .95), rgba(8, 18, 24, .96));
  color: var(--kde-cyan-hell);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
body.jupi.kde_body .kde_iconbtn:hover {
  background: linear-gradient(180deg, rgba(45, 96, 118, .98), rgba(12, 28, 36, .98));
  color: #fff;
  border-color: var(--kde-cyan);
}
/* Leiste unten = die Kommandokonsole (Glas, Zyankante oben) */
body.jupi.kde_body .kde_leiste {
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .16), transparent 42%),
    linear-gradient(180deg, rgba(19, 36, 46, .98), rgba(6, 14, 19, .98));
  border-top: 2px solid var(--kde-cyan);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .6), 0 0 16px rgba(53, 200, 234, .18);
}
body.jupi.kde_body .kde_bau_tab {
  background: rgba(8, 18, 24, .86);
  border-color: rgba(53, 200, 234, .4);
  color: var(--kde-text-2);
}
body.jupi.kde_body .kde_bau_tab:hover { border-color: var(--kde-cyan); color: #fff; }
body.jupi.kde_body .kde_bau_tab.kde_bau_tab_aktiv {
  background: linear-gradient(180deg, rgba(53, 200, 234, .34), rgba(16, 62, 78, .9));
  border-color: var(--kde-cyan);
  color: #fff;
  box-shadow: 0 0 10px rgba(53, 200, 234, .5);
}
body.jupi.kde_body .kde_bau_tab b { color: var(--kde-amber); }
body.jupi.kde_body .kde_bau_btn { border-radius: .3rem; }
body.jupi.kde_body .kde_bau_btn:hover { border-color: var(--kde-cyan-hell); }
body.jupi.kde_body .kde_bau_btn.kde_bau_aktiv {
  border-color: var(--kde-amber);
  box-shadow: 0 0 10px rgba(255, 194, 71, .6);
}
body.jupi.kde_body .kde_btn_chip {
  background: rgba(6, 15, 20, .82);
  border-color: rgba(53, 200, 234, .22);
  border-radius: .3rem;
}
body.jupi.kde_body .kde_fabrik_btn {
  background: rgba(20, 40, 52, .84);
  border-color: rgba(53, 200, 234, .5);
  color: var(--kde-text);
  border-radius: .35rem;
}
body.jupi.kde_body .kde_fabrik_btn:hover { background: rgba(34, 66, 84, .92); }
body.jupi.kde_body .kde_leiste_auswahl { color: var(--kde-text); border-left-color: var(--kde-linie); }
body.jupi.kde_body .kde_fabrik_warte { color: var(--kde-text); }
body.jupi.kde_body .kde_bau_hint { color: var(--kde-text-2); }
body.jupi.kde_body .kde_meldung {
  background: linear-gradient(180deg, rgba(74, 50, 16, .96), rgba(24, 16, 5, .97));
  border: 1px solid var(--kde-amber);
  color: #ffe9c4;
  box-shadow: 0 0 16px rgba(255, 194, 71, .25), 0 6px 18px rgba(0, 0, 0, .55);
}
body.jupi.kde_body .kde_netz_emotes button {
  background: rgba(9, 21, 28, .9);
  border-color: var(--kde-linie);
  color: var(--kde-text);
}
body.jupi.kde_body .kde_netz_emotes button:hover { border-color: var(--kde-cyan); }
/* Tooltip = Datenblatt im Glas */
body.jupi.kde_body .kde_tooltip {
  background: linear-gradient(180deg, rgba(16, 32, 42, .98), rgba(6, 14, 20, .99));
  color: var(--kde-text);
  border: 1px solid var(--kde-cyan);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .7), 0 0 16px rgba(53, 200, 234, .22);
}
body.jupi.kde_body .kde_tt_kosten { color: var(--kde-amber); }
body.jupi.kde_body .kde_tt_text { color: #cfe6f2; }
body.jupi.kde_body .kde_tt_wirkung { color: var(--kde-cyan-hell); }
body.jupi.kde_body .kde_tt_hinweis {
  color: var(--kde-text-2);
  border-top-color: rgba(53, 200, 234, .25);
}
body.jupi.kde_body .kde_tt_t2 { color: var(--kde-amber); border-color: var(--kde-amber); }

/* ---------- 13.8 Menues: die Lagebesprechung ----------
   Alle Overlays (Start, Lobby, Kampagne, Optionen, Pause, Rundenende) sind
   dunkles Instrumentenglas mit Zyankante - dieselbe Welt wie Leiste und
   Holo-Tisch. Die Mechanik (IDs, Klassen, Knoepfe) bleibt unveraendert. */
body.jupi.kde_body .kde_overlay {
  background: rgba(4, 11, 16, .66);
  backdrop-filter: blur(2px) saturate(.95);
}
body.jupi.kde_body .kde_menue,
body.jupi.kde_body .kde_overlay_karte {
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .1), transparent 46%),
    repeating-linear-gradient(90deg, rgba(53, 200, 234, .05) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, #162834 0%, #08131a 100%);
  color: var(--kde-text);
  border: 1px solid var(--kde-linie);
  border-top: 3px solid var(--kde-cyan);
  border-radius: .5rem;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .7),
    0 0 26px rgba(53, 200, 234, .16),
    inset 0 0 0 1px rgba(180, 238, 251, .08);
}
body.jupi.kde_body .kde_menue_titel,
body.jupi.kde_body .kde_overlay_karte h3 {
  color: var(--kde-cyan-hell);
  letter-spacing: .02em;
}
body.jupi.kde_body .kde_menue_intro { color: #b9d5e3; }
body.jupi.kde_body .kde_haupt_fakten { color: var(--kde-text-2); }
body.jupi.kde_body .kde_arm_text { color: #8cc0f2; }
body.jupi.kde_body .kde_kern_text { color: #f0907f; }
body.jupi.kde_body .kde_menue_ende p { color: #b9d5e3; }
body.jupi.kde_body .kde_menue_ende #kde_runde_titel { color: var(--kde-cyan-hell); }
body.jupi.kde_body .kde_haupt_btn {
  min-height: 44px;
  background: linear-gradient(180deg, rgba(30, 62, 78, .9), rgba(10, 24, 32, .92));
  border: 2px solid rgba(53, 200, 234, .45);
  border-radius: .45rem;
  color: var(--kde-text);
}
body.jupi.kde_body .kde_haupt_btn b { color: #eaf8ff; }
body.jupi.kde_body .kde_haupt_btn small { color: var(--kde-text-2); }
body.jupi.kde_body .kde_haupt_btn:hover {
  border-color: var(--kde-cyan);
  background: linear-gradient(180deg, rgba(44, 88, 108, .95), rgba(14, 34, 44, .95));
  box-shadow: 0 0 16px rgba(53, 200, 234, .3);
}
body.jupi.kde_body .kde_schnell_btn {
  min-height: 40px;
  background: rgba(18, 38, 48, .8);
  border: 1px solid rgba(53, 200, 234, .4);
  border-radius: .4rem;
  color: var(--kde-text);
}
body.jupi.kde_body .kde_schnell_btn:hover {
  background: rgba(32, 66, 84, .9);
  border-color: var(--kde-cyan);
  color: #fff;
}
body.jupi.kde_body .kde_menue_zurueck {
  background: rgba(18, 38, 48, .8);
  border: 1px solid rgba(53, 200, 234, .4);
  border-radius: .4rem;
  color: var(--kde-text-2);
}
body.jupi.kde_body .kde_menue_zurueck:hover { background: rgba(32, 66, 84, .9); color: #fff; }
body.jupi.kde_body .kde_segmente {
  background: rgba(6, 14, 19, .7);
  border: 1px solid rgba(53, 200, 234, .3);
  border-radius: .4rem;
}
body.jupi.kde_body .kde_segmente button { color: var(--kde-text-2); }
body.jupi.kde_body .kde_segmente button:hover { color: #fff; }
body.jupi.kde_body .kde_segmente button.kde_seg_aktiv {
  background: linear-gradient(180deg, rgba(53, 200, 234, .38), rgba(16, 62, 78, .9));
  border-color: var(--kde-cyan);
  color: #fff;
  box-shadow: 0 0 10px rgba(53, 200, 234, .45);
}
body.jupi.kde_body .kde_regel > small { color: var(--kde-text-2); }
body.jupi.kde_body .kde_karten_zeile {
  background: rgba(14, 30, 38, .85);
  border: 2px solid rgba(53, 200, 234, .28);
  color: var(--kde-text);
  border-radius: .35rem;
}
body.jupi.kde_body .kde_karten_zeile:hover { border-color: var(--kde-cyan); }
body.jupi.kde_body .kde_karten_zeile.kde_karten_aktiv {
  border-color: var(--kde-cyan);
  background: #16303c;
  box-shadow: 0 0 12px rgba(53, 200, 234, .35);
}
body.jupi.kde_body .kde_karten_zeile b { color: #eaf8ff; }
body.jupi.kde_body .kde_karten_zeile small { color: var(--kde-text-2); }
body.jupi.kde_body .kde_mission {
  background: rgba(14, 30, 38, .85);
  border: 2px solid rgba(53, 200, 234, .28);
  color: var(--kde-text);
  border-radius: .4rem;
}
body.jupi.kde_body .kde_mission:not(:disabled):hover { border-color: var(--kde-cyan); }
body.jupi.kde_body .kde_mission small { color: var(--kde-text-2); }
body.jupi.kde_body .kde_mission b { color: #eaf8ff; }
body.jupi.kde_body .kde_mission span { color: #b9d5e3; }
body.jupi.kde_body .kde_mission.kde_mission_offen { border-color: rgba(102, 187, 106, .6); }
body.jupi.kde_body .kde_mission span.kde_mission_ziel { color: #ffe9a8; }
body.jupi.kde_body .kde_slot {
  background: rgba(14, 30, 38, .82);
  border: 1px solid rgba(53, 200, 234, .3);
}
body.jupi.kde_body .kde_slot_spieler {
  border-color: #6fae63;
  background: rgba(24, 56, 34, .7);
}
body.jupi.kde_body .kde_slot_mensch {
  border-color: var(--kde-cyan);
  background: rgba(18, 44, 58, .82);
}
body.jupi.kde_body .kde_slot_gruppe {
  background: rgba(6, 14, 19, .7);
  border: 1px solid rgba(53, 200, 234, .28);
}
body.jupi.kde_body .kde_slot_gruppe button { color: var(--kde-text-2); }
body.jupi.kde_body .kde_slot_gruppe button.kde_seg_aktiv {
  background: linear-gradient(180deg, rgba(53, 200, 234, .38), rgba(16, 62, 78, .9));
  border-color: var(--kde-cyan);
  color: #fff;
}
body.jupi.kde_body .kde_slot_bereit {
  background: rgba(28, 66, 38, .88);
  border-color: #6fae63;
  color: #d7ecc0;
}
body.jupi.kde_body .kde_slots_titel { color: var(--kde-text-2); }
body.jupi.kde_body .kde_slots_hinweis { color: var(--kde-text-2); }
body.jupi.kde_body .kde_opt_zeile {
  background: rgba(14, 30, 38, .82);
  border: 1px solid rgba(53, 200, 234, .28);
}
body.jupi.kde_body .kde_opt_zeile > small { color: var(--kde-text-2); }
body.jupi.kde_body .kde_opt_wert { color: #eaf8ff; }
body.jupi.kde_body .kde_opt_zeile input[type="range"] { accent-color: var(--kde-cyan); }
body.jupi.kde_body .kde_mp_einladen {
  background: rgba(10, 22, 30, .88);
  border: 1px solid rgba(53, 200, 234, .3);
}
body.jupi.kde_body .kde_mp_einladen summary { color: var(--kde-text); }
body.jupi.kde_body .kde_mp_kurz,
body.jupi.kde_body .kde_mp_schritt,
body.jupi.kde_body .kde_mp_status { color: var(--kde-text-2); }
body.jupi.kde_body .kde_mp_box {
  background: rgba(14, 30, 38, .82);
  border: 1px solid rgba(53, 200, 234, .28);
}
body.jupi.kde_body .kde_mp_box b { color: #eaf8ff; }
body.jupi.kde_body .kde_mp_platzhalter {
  background: rgba(6, 14, 19, .8);
  border-color: rgba(53, 200, 234, .35);
  color: #7f9dad;
}
body.jupi.kde_body .kde_mp_code {
  background: rgba(6, 14, 19, .85);
  border: 1px solid rgba(53, 200, 234, .35);
  color: var(--kde-text);
}
body.jupi.kde_body .kde_mp_code::placeholder { color: #7f9dad; }
body.jupi.kde_body .kde_mp_slotinfo { color: var(--kde-text-2); }
body.jupi.kde_body .kde_mp_li_ok { color: #c4e0a4; }
body.jupi.kde_body .kde_mp_li_warten { color: #f0c584; }
body.jupi.kde_body .kde_lobby_mpchip {
  background: rgba(28, 66, 38, .85);
  border-color: #6fae63;
  color: #d7ecc0;
}
body.jupi.kde_body .kde_lobby_vorschau b { color: #eaf8ff; }
body.jupi.kde_body .kde_lobby_vorschau small { color: var(--kde-text-2); }
body.jupi.kde_body .kde_karten_vorschau {
  border-color: var(--kde-linie);
  border-radius: .35rem;
}
body.jupi.kde_body .kde_badge {
  color: #ffe9c4;
  background: rgba(122, 86, 30, .6);
  border-color: rgba(255, 194, 71, .6);
}
body.jupi.kde_body .kde_badge_gruen {
  color: #d7ecc0;
  background: rgba(28, 66, 38, .6);
  border-color: rgba(111, 174, 99, .7);
}
body.jupi.kde_body .kde_bald_hinweis { color: #e0b978; }
body.jupi.kde_body .kde_start_btn,
body.jupi.kde_body .kde_btn_dunkel {
  background: rgba(18, 38, 48, .85);
  border: 1px solid rgba(53, 200, 234, .45);
  color: var(--kde-text);
}
body.jupi.kde_body .kde_btn_dunkel:hover { background: rgba(32, 66, 84, .92); }

/* ---------- 13.9 Info/Hilfe: Datenblaetter im Glasgehaeuse ----------
   Statt blauer und gruener Plattform-Kaesten liegen hier zwei Datenblaetter
   auf dem Leitstand: dunkles Glas, Zyankante, helle Schrift. */
body.jupi.kde_body .kde_info,
body.jupi.kde_body .kde_hilfe {
  max-width: 960px;
  margin: .9rem auto 0;
  border-radius: .4rem;
  padding: .5rem .9rem .7rem;
  color: var(--kde-text);
  border: 1px solid var(--kde-linie);
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .1), transparent 48%),
    linear-gradient(180deg, rgba(20, 38, 48, .96), rgba(7, 16, 22, .97));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), inset 0 0 24px rgba(53, 200, 234, .07);
}
body.jupi.kde_body .kde_info summary,
body.jupi.kde_body .kde_hilfe summary {
  color: var(--kde-cyan-hell);
  font-weight: 800;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: .35rem;
}
body.jupi.kde_body .kde_info summary::marker,
body.jupi.kde_body .kde_hilfe summary::marker { color: var(--kde-cyan); }
body.jupi.kde_body .kde_info_inhalt,
body.jupi.kde_body .kde_hilfe ul { color: #cfe6f2; }
body.jupi.kde_body .kde_info_inhalt b,
body.jupi.kde_body .kde_hilfe b { color: #a9ecfb; }
body.jupi.kde_body .kde_info_inhalt a,
body.jupi.kde_body .kde_hilfe a { color: var(--kde-cyan-hell); }
body.jupi.kde_body .kde_lernziel {
  background: rgba(53, 200, 234, .12);
  border-left: 4px solid var(--kde-cyan);
  color: #d9eef8;
  border-radius: .3rem;
}
/* Die beiden Datenblaetter stehen IM Startmenue (Regel 3.13.4: keine Infobox
   unter dem Spielfeld). Dort sind sie schmal - also randlos, linksbuendig,
   etwas kleinere Schrift, und das Menue darf dafuer breiter werden. */
body.jupi.kde_body .kde_hauptmenue {
  max-width: 46rem;
  width: min(96%, 46rem);
}
body.jupi.kde_body .kde_menue .kde_info,
body.jupi.kde_body .kde_menue .kde_hilfe {
  max-width: none;
  width: 100%;
  margin: .7rem 0 0;
  text-align: left;
  font-size: .84rem;
  padding: .4rem .7rem .6rem;
}
body.jupi.kde_body .kde_menue .kde_info summary,
body.jupi.kde_body .kde_menue .kde_hilfe summary { min-height: 40px; font-size: .92rem; }
body.jupi.kde_body .kde_menue .kde_hilfe ul { margin: .5rem 0; padding-left: 1.1rem; }
body.jupi.kde_body .kde_menue .kde_hilfe li { margin: .25rem 0; line-height: 1.4; }

/* ---------- 13.10 Dark Mode = Nachtschicht auf der Bruecke ----------
   Gleiche Welt im Nachtbetrieb: die Anzeigen gluehen, die Stahlflaechen sinken
   ins Schwarze. Die Szene bleibt dieselbe, nur gedaempft und blauer. */
html[data-theme="dark"] body.jupi.kde_body {
  background-color: var(--kde-raum-2);
  background-image:
    linear-gradient(rgba(2, 6, 9, .42), rgba(1, 4, 6, .6)),
    url("kulisse.svg");
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
html[data-theme="dark"] body.jupi.kde_body .jupi_header {
  background:
    linear-gradient(180deg, rgba(120, 230, 255, .08), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #14242e 0%, #0a1720 60%, #050b10 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .72), 0 0 18px rgba(53, 200, 234, .12);
}
html[data-theme="dark"] body.jupi.kde_body .kde_menue,
html[data-theme="dark"] body.jupi.kde_body .kde_overlay_karte {
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .07), transparent 46%),
    repeating-linear-gradient(90deg, rgba(53, 200, 234, .04) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, #10202a 0%, #050d12 100%);
  border-top-color: var(--kde-cyan-hell);
}
html[data-theme="dark"] body.jupi.kde_body .kde_info,
html[data-theme="dark"] body.jupi.kde_body .kde_hilfe {
  background: linear-gradient(180deg, rgba(16, 32, 42, .97), rgba(4, 10, 14, .98));
  border-color: rgba(53, 200, 234, .3);
}
html[data-theme="dark"] body.jupi.kde_body .kde_buehne::before {
  background:
    radial-gradient(62% 55% at 50% 10%, rgba(53, 200, 234, .12), transparent 72%),
    repeating-linear-gradient(90deg, rgba(53, 200, 234, .05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(53, 200, 234, .05) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, #0c1a22 0%, #060f15 55%, #030a0e 100%);
}
html[data-theme="dark"] body.jupi.kde_body .kde_spielfeld {
  box-shadow:
    0 0 0 9px #12202a,
    0 0 0 11px var(--kde-cyan),
    0 0 0 13px #050d12,
    0 0 34px rgba(53, 200, 234, .26),
    0 22px 48px rgba(0, 0, 0, .78),
    inset 0 0 0 2px rgba(180, 238, 251, .16);
}
html[data-theme="dark"] body.jupi.kde_body .kde_titel {
  background:
    linear-gradient(180deg, rgba(53, 200, 234, .1), transparent 70%),
    linear-gradient(180deg, rgba(16, 32, 42, .96), rgba(4, 10, 14, .97));
}
html[data-theme="dark"] body.jupi.kde_body .jupi_footer_text { color: rgba(147, 180, 198, .62); }
html[data-theme="dark"] body.jupi.kde_body .jupi_footer {
  background: transparent;
  border: 0;
}

/* ---------- 13.11 Handy (390 px) ---------- */
@media (max-width: 720px) {
  body.jupi.kde_body .jupi_header {
    gap: .4rem .6rem;
    padding: .45rem .6rem .5rem;
  }
  body.jupi.kde_body .jupi_school span { font-size: .85rem; }
  body.jupi.kde_body .jupi_school img { height: 1.9rem; }
  body.jupi.kde_body .kde_marke_logo { width: 2rem; height: 2rem; }
  body.jupi.kde_body .kde_marke_titel { font-size: .98rem; }
  body.jupi.kde_body .jupi_nav_back { min-height: 40px; font-size: .82rem; padding: 0 .8rem; }
  body.jupi.kde_body .jupi_sprachen_select { min-height: 40px; max-width: 9rem; font-size: .78rem; }
  body.jupi.kde_body .jupi_main { padding: .7rem .6rem 1rem; }
  body.jupi.kde_body .kde_titel { padding: .24rem .8rem .3rem; }
  body.jupi.kde_body .kde_titel h2 { font-size: 1.05rem; }
  body.jupi.kde_body .kde_buehne { padding: .8rem .2rem 1rem; }
  body.jupi.kde_body .kde_spielfeld {
    box-shadow:
      0 0 0 6px #16242e,
      0 0 0 8px var(--kde-cyan),
      0 0 0 9px #0a151c,
      0 0 18px rgba(53, 200, 234, .26),
      0 14px 30px rgba(0, 0, 0, .66),
      inset 0 0 0 2px rgba(180, 238, 251, .2);
  }
  body.jupi.kde_body .kde_info,
  body.jupi.kde_body .kde_hilfe { font-size: .9rem; }
}

/* ---------- 13.12 Bedienziele >= 40 px (Regel 3.13.5) ----------
   Nur die Knoepfe, die man wirklich trifft: Kopfleiste, Primaerknoepfe der
   Menues und die Hilfekoepfe. Die dichten RTS-Kacheln auf dem Feld bleiben
   in ihrer Groesse (64 px Baukacheln, 46 px am Handy). */
body.jupi.kde_body .jupi_btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.jupi.kde_body .kde_mp_btn,
body.jupi.kde_body .kde_menue_zurueck { min-height: 36px; }
body.jupi.kde_body .kde_info summary,
body.jupi.kde_body .kde_hilfe summary { min-height: 40px; }
body.jupi.kde_body .kde_haupt_knoepfe .kde_haupt_btn { min-height: 52px; }