/* drucklabor/styles.css
   Eigene Styles der Drucklabor (Praefix gs_), gekettet an body.jupi.gs_body.

   WELT „DRUCKFARM" (Stil-Pass 28.10.2026): Die Seite ist die Werkstatt, in der
   das Kind G-Code schreibt und die Maschine ihn wirklich faehrt - Filamentrollen
   an der Wand (kulisse.svg), fertige Druckteile im Regal, Werkbank darunter.
   Die Leiste ist das Gehaeuse der Maschine (Graphit + Alukante + Filamentkante),
   die Buehne das Druckbett (dunkles PEI mit Alurahmen und vier Klemmen), die
   Panels sind Auftragsscheine aus Papier, der Editor ist die Maschinenkonsole.
   Der Dark Mode ist dieselbe Werkstatt bei Nacht.

   Aufbau der Datei:
     1. Welt, Seite, Grundflaechen
     2. Leiste (Gehaeusekonsole)
     3. Buehne (Druckbett) und HUD
     4. Auftrags- und Ergebniskarte (Papier)
     5. Werkbank-Leiste (Reiter)
     6. Panels, Badges, Merksatz, Auftragsknoepfe
     7. Editor-Konsole
     8. Lernkarten
     9. Freie Werkstatt
    10. Hilfe-Fenster
    11. Dark Mode (dieselbe Werkstatt bei Nacht)
    12. Handy und kleine Fenster
    13. 40-px-Bedienziele, reduzierte Bewegung
*/

/* ============================================================
   1. WELT, SEITE, GRUNDFLAECHEN
   ============================================================ */
body.jupi.gs_body {
  /* Farben der Welt - dieselben Namen wie in kulisse.svg und im Generator */
  --gs-tief: #0f1519;
  --gs-graphit: #1e262c;
  --gs-graphit-hell: #2b363e;
  --gs-graphit-tief: #151c21;
  --gs-alu: #9aa7b0;
  --gs-alu-hell: #ccd6dd;
  --gs-alu-tief: #5c6871;
  --gs-filament: #e8792b;
  --gs-filament-hell: #ffb066;
  --gs-filament-tief: #a94f13;
  --gs-bett: #121a1f;
  --gs-papier: #f5f0e6;
  --gs-papier-tief: #e6ddca;
  --gs-tinte: #222b32;
  --gs-tinte-hell: #5f6f79;
  --gs-ok: #3f9b62;
  --gs-warn: #b8791f;
  --gs-fehler: #b8392c;
  --gs-mono: "Consolas", "Menlo", "DejaVu Sans Mono", monospace;
  --gs-schatten: 0 0.35rem 1rem rgba(0, 0, 0, 0.3);

  /* Die Wand der Druckfarm: EINE gestreckte Szene (3.13.7) */
  background-image:
    radial-gradient(120% 55% at 50% 0%, rgba(255, 176, 102, 0.16), rgba(255, 176, 102, 0) 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 70%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  background-position: center top, center bottom, center center;
  background-attachment: fixed, fixed, fixed;
  background-color: var(--gs-tief);
  color: var(--gs-tinte);
}

/* Der Container dient nur noch als Spalte: Kopf oben, Fuss am Dokumentende
   (3.13.2a). Die alten Grid-Bereiche aus layout.css sind fuer dieses Spiel
   ohne Bedeutung - layout.css wird deshalb gar nicht mehr geladen. */
body.jupi.gs_body .jupi_container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: transparent;
}
body.jupi.gs_body .jupi_container > .jupi_main {
  flex: 1 0 auto;
  background: transparent;
}

/* Spielbreite: 62rem. Breiter wird die 3D-Buehne nicht besser, und links und
   rechts bleibt die Wand sichtbar (bei 1280 rund 160 px je Seite). */
body.jupi.gs_body .jupi_main {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem 1rem 1.4rem;
  box-sizing: border-box;
  color: var(--gs-tinte);
}

/* Fuss: Werkbank-Abschluss, volle Breite, am Dokumentende */
body.jupi.gs_body .jupi_container > .jupi_footer {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  width: 100%;
  border: 0;
  border-radius: 0;
  border-top: 3px solid var(--gs-alu);
  background: linear-gradient(180deg, var(--gs-graphit) 0%, var(--gs-graphit-tief) 100%);
  padding: 0.9rem 1rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}
body.jupi.gs_body .jupi_footer_text { color: #b9c4cc; font-size: 0.8rem; }
body.jupi.gs_body .jupi_footer_text a { color: var(--gs-filament-hell); font-weight: 600; }

/* ============================================================
   2. LEISTE - das Gehaeuse der Maschine
   ============================================================ */
body.jupi.gs_body .gs_kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.6rem;
  padding: 0.5rem 1rem 0.6rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, var(--gs-graphit-hell) 0%, var(--gs-graphit) 58%, #182027 100%);
  border-top: 4px solid var(--gs-alu);
  border-bottom: 4px solid var(--gs-filament);
  box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: sticky;
  top: 0;
  z-index: 50;
}

body.jupi.gs_body .gs_kopf .jupi_nav_back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: #172026;
  background: linear-gradient(180deg, #e6ecf1 0%, var(--gs-alu) 55%, #7e8b94 100%);
  border: 1px solid #6d7a84;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}
body.jupi.gs_body .gs_kopf .jupi_nav_back:hover {
  background: linear-gradient(180deg, #f2f6f9 0%, #b3bec6 55%, #8a97a0 100%);
}
body.jupi.gs_body .gs_kopf .jupi_nav_back:focus-visible {
  outline: 0.2rem solid var(--gs-filament-hell);
  outline-offset: 0.15rem;
}

/* Marke: Alu-Typenschild mit eingraviertem Namen */
body.jupi.gs_body .gs_marke {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.9rem 0.3rem 0.4rem;
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, #3b4750 0%, #2a343b 100%);
  border: 1px solid #4d5a64;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(0, 0, 0, 0.35);
}
body.jupi.gs_body .gs_marke img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 0.35rem;
  background: #f3f7f9;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
body.jupi.gs_body .gs_marke h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #eef4f8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
body.jupi.gs_body .gs_kopf .jupi_werkzeuge {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Dark-Schalter im Maschinenlook (Sonne/Mond bleiben vom Plattform-Skript) */
body.jupi.gs_body .gs_kopf .jupi_theme_switch {
  min-height: 40px;
  border: 1px solid #4d5a64;
  background: linear-gradient(180deg, #3b4750, #232c33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body.jupi.gs_body .gs_kopf .jupi_theme_switch .jts_thumb {
  background: linear-gradient(180deg, #f2f6f9, #b9c4cc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 🌐-Sprachwahl (3.13.2, rechts neben dem Dark-Schalter): das Plattform-CSS
   (css/jupi.css) liefert den Glas-Pillen-Stil - hier bekommt sie nur die
   40-px-Bedienhoehe und die Maschinen-Typo (3.13.5). */
body.jupi.gs_body .jupi_sprachen_wahl { min-height: 40px; }
body.jupi.gs_body .jupi_sprachen_select { min-height: 40px; }

/* ============================================================
   3. BUEHNE - das Druckbett
   ============================================================ */
body.jupi.gs_body .gs_buehne {
  position: relative;
  width: 100%;
  height: min(62vh, 28rem);
  min-height: 16rem;
  border-radius: 0.7rem;
  overflow: hidden;
  font-size: max(9px, min(1.05vw, 1.7vh));
  touch-action: none;
  /* Dunkles PEI-Bett mit leichter Waermeglut in der Mitte */
  background:
    radial-gradient(70% 60% at 50% 78%, rgba(232, 121, 43, 0.15), rgba(232, 121, 43, 0) 72%),
    radial-gradient(120% 90% at 50% 6%, #232e37 0%, #182129 48%, var(--gs-bett) 100%);
  /* Alu-Rahmen: Aussenkante hell, innen dunkel - liest sich als Blech */
  box-shadow:
    inset 0 0 0 3px var(--gs-alu),
    inset 0 0 0 4px #6d7a84,
    inset 0 0 0 12px rgba(0, 0, 0, 0.35),
    0 0.5rem 1.4rem rgba(0, 0, 0, 0.45);
}
/* Druckbett-Raster (10-mm-Felder) - dezent, damit die 3D-Szene ruhig bleibt */
body.jupi.gs_body .gs_buehne::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 0.4rem;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px);
  opacity: 0.45;
}
/* Vier Bettklemmen in Filament-Orange */
body.jupi.gs_body .gs_buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(135deg, var(--gs-filament) 0 50%, transparent 50%),
    linear-gradient(225deg, var(--gs-filament) 0 50%, transparent 50%),
    linear-gradient(45deg, var(--gs-filament) 0 50%, transparent 50%),
    linear-gradient(315deg, var(--gs-filament) 0 50%, transparent 50%);
  background-size: 26px 26px;
  background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  opacity: 0.9;
}
body.jupi.gs_body .gs_canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* HUD auf dem Bett: Knoepfe wie Maschinentasten */
body.jupi.gs_body .gs_ecke { position: absolute; z-index: 3; }
body.jupi.gs_body .gs_ecke_oben {
  top: 0.75em;
  right: 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
body.jupi.gs_body .gs_icon_btn {
  /* 2.5em der Buehne sind nur rund 34 px - Regel 3.13.5 verlangt 40 px */
  width: max(2.5em, 40px);
  height: max(2.5em, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #55636d;
  border-radius: 0.4em;
  background: linear-gradient(180deg, #37434c 0%, #1d252b 100%);
  color: #e8eef4;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s, background 0.12s, border-color 0.12s;
}
body.jupi.gs_body .gs_icon_btn:hover {
  background: linear-gradient(180deg, var(--gs-filament) 0%, var(--gs-filament-tief) 100%);
  border-color: var(--gs-filament-hell);
  transform: translateY(-1px);
}
body.jupi.gs_body .gs_icon_btn:focus-visible {
  outline: 0.2em solid var(--gs-filament-hell);
  outline-offset: 0.1em;
}

/* Anzeigen oben links: Maschinendisplay mit Bernsteinschrift */
body.jupi.gs_body .gs_ecke_links {
  top: 0.75em;
  left: 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  align-items: flex-start;
}
body.jupi.gs_body .gs_chip {
  padding: 0.25em 0.65em;
  border-radius: 0.35em;
  background: linear-gradient(180deg, rgba(14, 20, 25, 0.92), rgba(10, 16, 20, 0.92));
  border: 1px solid #4a5761;
  color: #cfe0ea;
  font-weight: 600;
  font-size: 0.85em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  max-width: 22em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.jupi.gs_body .gs_chip_maschine {
  background: linear-gradient(180deg, var(--gs-filament) 0%, var(--gs-filament-tief) 100%);
  border-color: var(--gs-filament-hell);
  color: #fff5ea;
}
body.jupi.gs_body .gs_balken {
  width: 9em;
  height: 0.6em;
  border-radius: 0.3em;
  background: rgba(8, 12, 16, 0.85);
  border: 1px solid #4a5761;
  overflow: hidden;
}
body.jupi.gs_body .gs_balken > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gs-filament-tief), var(--gs-filament), var(--gs-filament-hell));
  box-shadow: 0 0 0.4em rgba(255, 176, 102, 0.7);
  transition: width 0.2s linear;
}

/* Werte unten links: Werkzeug-Display */
body.jupi.gs_body .gs_ecke_werte {
  left: 0.75em;
  bottom: 0.75em;
  max-width: calc(100% - 2.2em);   /* am Handy umbrechen statt aus dem Bett laufen */
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.55em;
  padding: 0.35em 0.6em;
  border-radius: 0.35em;
  background: rgba(8, 13, 17, 0.9);
  border: 1px solid #45525b;
  color: var(--gs-alu-hell);
  font-family: var(--gs-mono);
  font-size: 0.85em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.jupi.gs_body .gs_wert b {
  color: var(--gs-filament-hell);
  margin-right: 0.3em;
  font-weight: 700;
}
body.jupi.gs_body .gs_wert > span { min-width: 2.6em; display: inline-block; }
body.jupi.gs_body .gs_wert.aktiv b { color: #7bd7a0; }

/* ============================================================
   4. AUFTRAGS- UND ERGEBNISKARTE (Papier)
   ============================================================ */
body.jupi.gs_body .gs_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  z-index: 6;
  background: rgba(6, 10, 13, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(4px);
}
body.jupi.gs_body .gs_overlay[hidden] { display: none; }
body.jupi.gs_body .gs_startkarte {
  max-width: 34em;
  max-height: 100%;
  overflow: auto;
  padding: 1.2rem 1.4rem 1.3rem;
  border-radius: 0.35rem;
  text-align: center;
  font-size: max(11px, min(1.05vw, 1.7vh));
  color: var(--gs-tinte);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.04)),
    linear-gradient(180deg, #faf6ee, var(--gs-papier-tief));
  border-top: 0.35rem solid var(--gs-filament);
  box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.jupi.gs_body .gs_startkarte h3 {
  margin: 0 0 0.4em;
  font-size: 1.35em;
  color: #1d2a33;
  letter-spacing: 0.01em;
}
body.jupi.gs_body .gs_startkarte p { margin: 0.3em 0 0.7em; line-height: 1.45; }
body.jupi.gs_body .gs_startwahl { display: flex; gap: 0.6em; flex-wrap: wrap; justify-content: center; }
body.jupi.gs_body .gs_startbtn {
  flex: 1 1 12em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  padding: 0.8em 0.6em;
  font-size: 1em;
  color: #1d2a33;
  background: linear-gradient(180deg, #ffffff, #f0ece2);
  border: 0.12em solid var(--gs-alu);
  border-bottom-width: 0.22em;
  border-radius: 0.4rem;
  cursor: pointer;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.14);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
body.jupi.gs_body .gs_startbtn:hover {
  transform: translateY(-0.15em);
  border-color: var(--gs-filament);
  box-shadow: 0 0.35em 0.8em rgba(232, 121, 43, 0.35);
}
body.jupi.gs_body .gs_startbtn b { font-size: 1.1em; }
body.jupi.gs_body .gs_startbtn span:last-child { font-size: 0.85em; color: var(--gs-tinte-hell); }
body.jupi.gs_body .gs_starticon { font-size: 1.8em; }
body.jupi.gs_body .gs_klein { font-size: 0.85em; color: var(--gs-tinte-hell); }

body.jupi.gs_body .gs_ergebniskarte { max-width: 30em; }
body.jupi.gs_body .gs_ergzeichen { font-size: 2.6em; line-height: 1; }
body.jupi.gs_body .gs_ergpunkte {
  font-weight: 800;
  color: var(--gs-filament-tief);
  font-size: 1.2em;
  margin: 0.3em 0 0.6em;
}
body.jupi.gs_body .gs_ergknopf { display: flex; gap: 0.5em; justify-content: center; flex-wrap: wrap; }
body.jupi.gs_body .gs_ergebniskarte.schlecht .gs_ergzeichen { filter: grayscale(0.5); }
body.jupi.gs_body .gs_ergebniskarte.schlecht h3 { color: var(--gs-fehler); }
body.jupi.gs_body .gs_ergebniskarte.gut h3 { color: #2c7d4f; }

/* ============================================================
   5. WERKBANK-LEISTE (Reiter)
   ============================================================ */
body.jupi.gs_body .gs_leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.7rem 0 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, var(--gs-graphit-hell), var(--gs-graphit) 70%, #182027);
  border: 1px solid #46535d;
  border-bottom: 3px solid var(--gs-alu);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--gs-schatten);
}
body.jupi.gs_body .gs_leiste_gruppe { display: flex; flex-wrap: wrap; gap: 0.35rem; }
body.jupi.gs_body .gs_tab {
  min-height: 40px;
  padding: 0.35rem 0.85rem;
  border-radius: 0.4rem;
  border: 1px solid #55636d;
  background: linear-gradient(180deg, #3a464f, #242d34);
  color: #cfdae2;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.jupi.gs_body .gs_tab:hover { border-color: var(--gs-filament-hell); color: #fff3e7; }
body.jupi.gs_body .gs_tab.is_active {
  background: linear-gradient(180deg, var(--gs-filament) 0%, var(--gs-filament-tief) 100%);
  border-color: var(--gs-filament-hell);
  color: #fff6ec;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(232, 121, 43, 0.35);
}
body.jupi.gs_body .gs_tab:focus-visible,
body.jupi.gs_body .gs_leiste :focus-visible {
  outline: 0.18rem solid var(--gs-filament-hell);
  outline-offset: 0.12rem;
}
body.jupi.gs_body .gs_punktegruppe {
  align-items: center;
  gap: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(8, 12, 16, 0.55);
  border: 1px solid #45525b;
}
body.jupi.gs_body .gs_punkte { font-weight: 600; color: #cfdae2; }
body.jupi.gs_body .gs_punkte b {
  color: var(--gs-filament-hell);
  font-size: 1.1em;
  font-variant-numeric: tabular-nums;
}
body.jupi.gs_body .gs_sterne { font-size: 1.3em; letter-spacing: 0.1em; color: #ffca6b; }

/* ============================================================
   6. PANELS, BADGES, MERKSATZ, AUFRAGSKNOEPFE
   ============================================================ */
body.jupi.gs_body .gs_spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.8rem;
  align-items: start;
}

/* Papierkarte: Auftragsschein mit Filamentkante */
body.jupi.gs_body .gs_panel {
  position: relative;
  padding: 0.9rem 1rem 1rem;
  border-radius: 0.3rem;
  color: var(--gs-tinte);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.03)),
    linear-gradient(180deg, #faf6ee, var(--gs-papier-tief));
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-top: 0.3rem solid var(--gs-filament);
  box-shadow: var(--gs-schatten), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
body.jupi.gs_body .gs_panel_titel {
  margin: 0 0 0.45em;
  font-size: 1.1em;
  color: #1d2a33;
  letter-spacing: 0.01em;
}
body.jupi.gs_body .gs_untertitel {
  margin: 0.9em 0 0.35em;
  font-size: 0.95em;
  color: var(--gs-filament-tief);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.jupi.gs_body .gs_badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5em; }
body.jupi.gs_body .gs_badge {
  padding: 0.15em 0.55em;
  border-radius: 0.25em;
  font-size: 0.72em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #e4dccb;
  color: #4a5a64;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
body.jupi.gs_body .gs_badge_typ { background: #d9e4ea; color: #2c4a5b; }
body.jupi.gs_body .gs_badge_ziel { background: #f6e3c9; color: #8a5312; }

body.jupi.gs_body .gs_lernziel { margin: 0 0 0.4em; font-weight: 700; color: #2a3a44; }
body.jupi.gs_body .gs_auftrag { margin: 0 0 0.55em; line-height: 1.45; }

/* Merksatz: gelber Merkzettel mit Filament-Streifen */
body.jupi.gs_body .gs_merksatz {
  margin-bottom: 0.6em;
  padding: 0.5em 0.65em;
  font-size: 0.9em;
  line-height: 1.4;
  background: linear-gradient(180deg, #fdf3cd, #f6e6b4);
  border-left: 0.28rem solid var(--gs-filament);
  border-radius: 0.2em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

body.jupi.gs_body .gs_kartenliste { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6em; }
body.jupi.gs_body .gs_aufgknopf {
  min-height: 34px;
  padding: 0.25em 0.6em;
  border-radius: 0.3em;
  border: 1px solid var(--gs-alu);
  background: linear-gradient(180deg, #ffffff, #f1ece1);
  color: #2a3a44;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
}
body.jupi.gs_body .gs_aufgknopf:hover { border-color: var(--gs-filament); }
body.jupi.gs_body .gs_aufgknopf.is_active {
  background: linear-gradient(180deg, var(--gs-filament), var(--gs-filament-tief));
  border-color: var(--gs-filament-tief);
  color: #fff6ec;
}
body.jupi.gs_body .gs_aufgknopf.gesetzt::after { content: " ✓"; color: #2c7d4f; font-weight: 800; }
body.jupi.gs_body .gs_aufgknopf.is_active.gesetzt::after { color: #ffe0c4; }

body.jupi.gs_body .gs_tippbtn {
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  border-radius: 2rem;
  border: 1px dashed var(--gs-warn);
  background: #fdf3cd;
  color: #8a5312;
  font-weight: 700;
  cursor: pointer;
}
body.jupi.gs_body .gs_tippbtn:hover { background: #fbe9b6; }
body.jupi.gs_body .gs_hinweisbox {
  margin-bottom: 0.5em;
  padding: 0.5em 0.7em;
  border-radius: 0.25em;
  background: #fdf3cd;
  border: 1px solid #e8cf95;
}
body.jupi.gs_body .gs_hinweisbox[hidden] { display: none; }
body.jupi.gs_body .gs_hinweis_titel { margin-bottom: 0.2em; font-weight: 800; color: #8a5312; }
body.jupi.gs_body .gs_hinweisbox p { margin: 0 0 0.4em; line-height: 1.4; }

/* ============================================================
   7. EDITOR - die Maschinenkonsole
   ============================================================ */
body.jupi.gs_body .gs_codepanel {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, var(--gs-graphit-hell), var(--gs-graphit) 60%, var(--gs-graphit-tief));
  border: 1px solid #46535d;
  border-top: 0.3rem solid var(--gs-alu);
  box-shadow: var(--gs-schatten), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.jupi.gs_body .gs_codepanel .gs_panel_titel { color: #dfe9ef; }
body.jupi.gs_body .gs_codepanel .gs_untertitel { color: var(--gs-filament-hell); }
body.jupi.gs_body .gs_codekopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
  justify-content: space-between;
}
body.jupi.gs_body .gs_codewerkzeug { display: flex; gap: 0.3em; flex-wrap: wrap; }
body.jupi.gs_body .gs_kleinbtn {
  min-height: 32px;
  padding: 0.2em 0.6em;
  border-radius: 0.3em;
  border: 1px solid #55636d;
  background: linear-gradient(180deg, #3a464f, #242d34);
  color: #cfdae2;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.jupi.gs_body .gs_kleinbtn:hover:not(:disabled) {
  border-color: var(--gs-filament-hell);
  color: #fff3e7;
}
body.jupi.gs_body .gs_kleinbtn:disabled { opacity: 0.42; cursor: default; }

body.jupi.gs_body .gs_editor {
  display: flex;
  margin-top: 0.45em;
  max-height: 22rem;
  min-height: 12rem;
  overflow: hidden;
  border-radius: 0.3em;
  border: 1px solid #4d5a64;
  background: #0b1216;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.65);
}
body.jupi.gs_body .gs_gutter {
  flex: 0 0 2.6em;
  padding: 0.5em 0.4em 0.5em 0;
  text-align: right;
  font-family: var(--gs-mono);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #61737f;
  background: #0a1014;
  border-right: 1px solid #1d262c;
  user-select: none;
  overflow: hidden;
}
body.jupi.gs_body .gs_gutter span { display: block; }
body.jupi.gs_body .gs_gutter span.aktiv { color: var(--gs-filament-hell); font-weight: 700; }
body.jupi.gs_body .gs_gutter span.fehler { color: #ef7061; font-weight: 700; }
body.jupi.gs_body .gs_code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5em;
  border: 0;
  font-family: var(--gs-mono);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #d6e6f0;
  background: #0b1216;
  resize: vertical;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
body.jupi.gs_body .gs_code:focus {
  outline: 0.15rem solid var(--gs-filament);
  outline-offset: -0.15rem;
}

body.jupi.gs_body .gs_meldung {
  min-height: 1.4em;
  margin-top: 0.45em;
  font-size: 0.9em;
  line-height: 1.4;
  color: #c6d3db;
}
body.jupi.gs_body .gs_meldung.ok { color: #7bd7a0; font-weight: 600; }
body.jupi.gs_body .gs_meldung.warn { color: var(--gs-filament-hell); }
body.jupi.gs_body .gs_meldung.fehler { color: #f08b7c; font-weight: 600; }
body.jupi.gs_body .gs_meldung ul { margin: 0.2em 0 0 1em; padding: 0; }
body.jupi.gs_body .gs_laufleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
  margin-top: 0.55em;
}

/* Der Plattform-Knopf (Start) wird zur Maschinentaste in Filament-Orange */
body.jupi.gs_body .gs_laufleiste .jupi_btn,
body.jupi.gs_body .gs_ergknopf .jupi_btn,
body.jupi.gs_body .gs_lernkartendetail .jupi_btn,
body.jupi.gs_body .gs_modal_fuss .jupi_btn {
  min-height: 40px;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--gs-filament-tief);
  border-bottom-width: 3px;
  border-radius: 0.4rem;
  background: linear-gradient(180deg, var(--gs-filament-hell), var(--gs-filament) 55%, var(--gs-filament-tief));
  color: #2a1405;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}
body.jupi.gs_body .gs_laufleiste .jupi_btn:hover,
body.jupi.gs_body .gs_ergknopf .jupi_btn:hover,
body.jupi.gs_body .gs_lernkartendetail .jupi_btn:hover,
body.jupi.gs_body .gs_modal_fuss .jupi_btn:hover {
  filter: brightness(1.08);
}

/* ============================================================
   8. LERNKARTEN - G-Code-Kaertchen mit Filamentstreifen
   ============================================================ */
body.jupi.gs_body .gs_karteinfos { margin: 0 0 0.7em; }
body.jupi.gs_body .gs_lernkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}
body.jupi.gs_body .gs_lernkarte {
  padding: 0.7em 0.4em;
  border-radius: 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-top: 0.28rem solid var(--gs-alu);
  background: linear-gradient(180deg, #ffffff, #f1ece1);
  color: #22323c;
  font-family: var(--gs-mono);
  font-size: 1.02em;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
body.jupi.gs_body .gs_lernkarte:hover {
  transform: translateY(-0.15em);
  border-top-color: var(--gs-filament);
  box-shadow: 0 0.35em 0.8em rgba(0, 0, 0, 0.22);
}
body.jupi.gs_body .gs_lernkarte[aria-pressed="true"] {
  border-top-color: var(--gs-filament);
  background: linear-gradient(180deg, #fff4e8, #f6e2cc);
}
body.jupi.gs_body .gs_lernkartendetail {
  margin-top: 0.85rem;
  padding: 0.85em 1em;
  border-radius: 0.3em;
  border: 1px solid #d8cdb8;
  border-left: 0.3rem solid var(--gs-filament);
  background: linear-gradient(180deg, #fdfaf3, #f3ece0);
}
body.jupi.gs_body .gs_lernkartendetail[hidden] { display: none; }
body.jupi.gs_body .gs_lernkartenkopf { display: flex; align-items: center; gap: 0.6em; }
body.jupi.gs_body .gs_lernzeichen {
  padding: 0.15em 0.5em;
  border-radius: 0.25em;
  font-family: var(--gs-mono);
  font-size: 1.05em;
  font-weight: 700;
  background: var(--gs-graphit);
  color: var(--gs-filament-hell);
  border: 1px solid #46535d;
}
body.jupi.gs_body .gs_lernkartenkopf h4 { margin: 0; font-size: 1.05em; color: #22323c; }
body.jupi.gs_body .gs_lernkartendetail p { margin: 0.5em 0; line-height: 1.45; }
body.jupi.gs_body .gs_lernbeispiel { margin: 0.55em 0; }
body.jupi.gs_body .gs_lernbeispiel_label {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gs-tinte-hell);
}
body.jupi.gs_body .gs_lernbeispiel code {
  display: block;
  margin-top: 0.25em;
  padding: 0.4em 0.55em;
  border-radius: 0.25em;
  font-family: var(--gs-mono);
  background: #0b1216;
  color: #9fe3a8;
  border: 1px solid #46535d;
}

/* ============================================================
   9. FREIE WERKSTATT
   ============================================================ */
body.jupi.gs_body .gs_maschinenwahl { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6em; }
body.jupi.gs_body .gs_stufe {
  min-height: 40px;
  padding: 0.3rem 0.85rem;
  border-radius: 0.4rem;
  border: 1px solid var(--gs-alu);
  background: linear-gradient(180deg, #ffffff, #f1ece1);
  color: #2a3a44;
  font-weight: 600;
  cursor: pointer;
}
body.jupi.gs_body .gs_stufe.is_active {
  background: linear-gradient(180deg, var(--gs-filament), var(--gs-filament-tief));
  border-color: var(--gs-filament-tief);
  color: #fff6ec;
}
body.jupi.gs_body .gs_musterliste { display: flex; flex-wrap: wrap; gap: 0.35rem; }
body.jupi.gs_body .gs_musterknopf {
  min-height: 34px;
  padding: 0.25em 0.65em;
  border-radius: 0.3em;
  border: 1px solid var(--gs-alu);
  background: linear-gradient(180deg, #ffffff, #f1ece1);
  color: #2a3a44;
  font-size: 0.85em;
  cursor: pointer;
}
body.jupi.gs_body .gs_musterknopf:hover { border-color: var(--gs-filament); }
body.jupi.gs_body .gs_lernfakten { display: flex; flex-direction: column; gap: 0.35em; }
body.jupi.gs_body .gs_lernfakt {
  padding: 0.45em 0.65em;
  border-radius: 0.25em;
  font-size: 0.9em;
  line-height: 1.4;
  background: #eee7d8;
  border-left: 0.25rem solid var(--gs-alu);
}
body.jupi.gs_body .gs_lernfakt b { color: var(--gs-filament-tief); }

/* ============================================================
   10. HILFE-FENSTER (Konsolenklappe mit Papier innen)
   ============================================================ */
body.jupi.gs_body dialog.gs_modal {
  width: 92%;
  max-width: 38rem;
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: linear-gradient(180deg, #fbf8f1, var(--gs-papier-tief));
  color: var(--gs-tinte);
  box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.55);
}
body.jupi.gs_body dialog.gs_modal::backdrop {
  background: rgba(4, 8, 11, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.jupi.gs_body .gs_modal_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(180deg, var(--gs-graphit-hell), var(--gs-graphit) 70%, var(--gs-graphit-tief));
  border-bottom: 3px solid var(--gs-filament);
  color: #eaf2f7;
}
body.jupi.gs_body .gs_modal_kopf h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #eef5f9;
}
body.jupi.gs_body .gs_modal_zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid #55636d;
  border-radius: 0.35rem;
  background: linear-gradient(180deg, #3a464f, #242d34);
  color: #dbe6ed;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}
body.jupi.gs_body .gs_modal_zu:hover { border-color: var(--gs-filament-hell); color: #fff; }
body.jupi.gs_body .gs_modal_body {
  max-height: calc(90vh - 120px);
  padding: 1.1rem 1.3rem;
  overflow-y: auto;
  line-height: 1.5;
}
body.jupi.gs_body .gs_modal_body h3 {
  margin: 0.85rem 0 0.4rem;
  font-size: 1.02rem;
  color: var(--gs-filament-tief);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.jupi.gs_body .gs_modal_body h3:first-child { margin-top: 0.2rem; }
body.jupi.gs_body .gs_modal_body ol,
body.jupi.gs_body .gs_modal_body ul { margin: 0.4rem 0 0.9rem; padding-left: 1.3rem; }
body.jupi.gs_body .gs_modal_body li { margin: 0.35rem 0; }
body.jupi.gs_body .gs_modal_body p { margin: 0.4rem 0 0.6rem; }
body.jupi.gs_body .gs_modal_body code {
  padding: 0 0.28em;
  border-radius: 0.2em;
  font-family: var(--gs-mono);
  background: #e7dfcf;
  color: #1d2a33;
}
body.jupi.gs_body .gs_lernsatz {
  margin: 0.9rem 0 0.4rem;
  padding: 0.8rem 1rem;
  border-radius: 0.25rem;
  border-left: 0.3rem solid var(--gs-filament);
  background: #fdf3cd;
  color: #4a3a12;
  font-weight: 600;
  font-size: 0.95rem;
}
body.jupi.gs_body .gs_modal_fuss {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1.2rem;
  background: #eee6d6;
  border-top: 1px solid #d8cdb8;
}
body.jupi.gs_body #gs_modal_ok { min-height: 40px; min-width: 100px; font-weight: 800; }

/* ============================================================
   11. DARK MODE - dieselbe Werkstatt bei Nacht
   ============================================================ */
html[data-theme="dark"] body.jupi.gs_body {
  /* Alle background-Teile neu setzen: die Plattform-Dark-Regel
     `html[data-theme="dark"] body.jupi` benutzt die Kurzform `background`
     und wuerde Groesse/Wiederholung sonst auf auto/repeat zuruecksetzen. */
  background-image:
    radial-gradient(110% 50% at 50% 0%, rgba(255, 152, 76, 0.1), rgba(255, 152, 76, 0) 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  background-position: center top, center bottom, center center;
  background-attachment: fixed, fixed, fixed;
  background-color: #0b1013;
  color: #cdd7de;
}

/* Die Konsole bleibt auch nachts eine Konsole (die Papier-Regel oben ist
   spezifischer als `.gs_codepanel`, darum hier ausdruecklich zurueckholen). */
html[data-theme="dark"] body.jupi.gs_body .gs_codepanel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3)),
    linear-gradient(180deg, #232d34, #161d22 60%, #10161a);
  border-color: #3a464f;
  border-top-color: var(--gs-alu);
}
html[data-theme="dark"] body.jupi.gs_body .jupi_main { color: #cdd7de; }
html[data-theme="dark"] body.jupi.gs_body .jupi_container > .jupi_footer {
  border-top-color: #4a5761;
  background: linear-gradient(180deg, #151d22, #0a0f12);
}
html[data-theme="dark"] body.jupi.gs_body .jupi_footer_text { color: #9fadb6; }

/* Papier bleibt Papier - nur eine Spur dunkler, damit es nicht blendet */
html[data-theme="dark"] body.jupi.gs_body .gs_panel:not(.gs_codepanel) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, #ece4d4, #dcd2be);
  border-color: rgba(0, 0, 0, 0.35);
  border-top-color: var(--gs-filament);
}
html[data-theme="dark"] body.jupi.gs_body .gs_panel_titel { color: #1f2c35; }
html[data-theme="dark"] body.jupi.gs_body .gs_lernziel { color: #2a3a44; }
html[data-theme="dark"] body.jupi.gs_body .gs_merksatz {
  background: linear-gradient(180deg, #3a3419, #302b14);
  color: #f0dfae;
  border-left-color: var(--gs-filament);
}
html[data-theme="dark"] body.jupi.gs_body .gs_tippbtn {
  background: #3a3419;
  color: #ffce8a;
  border-color: var(--gs-filament);
}
html[data-theme="dark"] body.jupi.gs_body .gs_hinweisbox {
  background: #3a3419;
  border-color: #6b5a24;
  color: #f0dfae;
}
html[data-theme="dark"] body.jupi.gs_body .gs_hinweis_titel { color: #ffce8a; }
html[data-theme="dark"] body.jupi.gs_body .gs_badge { background: #33404a; color: #c3d0d9; }
html[data-theme="dark"] body.jupi.gs_body .gs_badge_typ { background: #24363f; color: #a8cddf; }
html[data-theme="dark"] body.jupi.gs_body .gs_badge_ziel { background: #3b3222; color: #f2c98e; }
html[data-theme="dark"] body.jupi.gs_body .gs_aufgknopf {
  background: linear-gradient(180deg, #2a343c, #1d252b);
  border-color: #4d5a64;
  color: #d3dee5;
}
html[data-theme="dark"] body.jupi.gs_body .gs_aufgknopf.is_active {
  background: linear-gradient(180deg, var(--gs-filament), var(--gs-filament-tief));
  border-color: var(--gs-filament-hell);
  color: #fff6ec;
}
html[data-theme="dark"] body.jupi.gs_body .gs_aufgknopf.gesetzt::after { color: #9fe3a8; }

/* Lernkarten: nachts wird aus Papier eine Blechkarte */
html[data-theme="dark"] body.jupi.gs_body .gs_lernkarte {
  background: linear-gradient(180deg, #2b363e, #1d252b);
  border-color: #46535d;
  color: #dfe9ef;
}
html[data-theme="dark"] body.jupi.gs_body .gs_lernkarte[aria-pressed="true"] {
  background: linear-gradient(180deg, #3a2a1a, #2b2013);
  border-top-color: var(--gs-filament);
}
html[data-theme="dark"] body.jupi.gs_body .gs_lernkartendetail {
  background: linear-gradient(180deg, #26313a, #1c242a);
  border-color: #46535d;
  color: #d5e0e7;
}
html[data-theme="dark"] body.jupi.gs_body .gs_lernkartenkopf h4 { color: #e6eef3; }
html[data-theme="dark"] body.jupi.gs_body .gs_lernbeispiel_label { color: #9fadb6; }
html[data-theme="dark"] body.jupi.gs_body .gs_lernfakt { background: #26313a; color: #d5e0e7; }
html[data-theme="dark"] body.jupi.gs_body .gs_lernfakt b { color: var(--gs-filament-hell); }
html[data-theme="dark"] body.jupi.gs_body .gs_stufe {
  background: linear-gradient(180deg, #2a343c, #1d252b);
  border-color: #4d5a64;
  color: #d3dee5;
}
html[data-theme="dark"] body.jupi.gs_body .gs_musterknopf {
  background: linear-gradient(180deg, #2a343c, #1d252b);
  border-color: #4d5a64;
  color: #d3dee5;
}
html[data-theme="dark"] body.jupi.gs_body .gs_klein { color: #9fadb6; }

/* Start-/Ergebniskarte nachts: dunkles Gehaeuse statt weissem Papier */
html[data-theme="dark"] body.jupi.gs_body .gs_startkarte {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #34404a, #232b32);
  color: #e3ecf1;
  border-top-color: var(--gs-filament);
}
html[data-theme="dark"] body.jupi.gs_body .gs_startkarte h3 { color: #f0f6fa; }
html[data-theme="dark"] body.jupi.gs_body .gs_ergebniskarte.gut h3 { color: #7bd7a0; }
html[data-theme="dark"] body.jupi.gs_body .gs_ergebniskarte.schlecht h3 { color: #f08b7c; }
html[data-theme="dark"] body.jupi.gs_body .gs_startbtn {
  background: linear-gradient(180deg, #3a464f, #242d34);
  border-color: #55636d;
  color: #e6eef3;
}
html[data-theme="dark"] body.jupi.gs_body .gs_startbtn span:last-child { color: #a9b7c0; }
html[data-theme="dark"] body.jupi.gs_body .gs_startbtn:hover {
  border-color: var(--gs-filament);
  box-shadow: 0 0.35em 0.8em rgba(232, 121, 43, 0.4);
}
html[data-theme="dark"] body.jupi.gs_body .gs_ergpunkte { color: var(--gs-filament-hell); }
html[data-theme="dark"] body.jupi.gs_body dialog.gs_modal {
  background: linear-gradient(180deg, #2a343c, #1b2329);
  color: #dbe5eb;
}
html[data-theme="dark"] body.jupi.gs_body .gs_modal_body code {
  background: #1a2228;
  color: #ffce8a;
}
html[data-theme="dark"] body.jupi.gs_body .gs_lernsatz {
  background: #3a3419;
  color: #f2dfae;
}
html[data-theme="dark"] body.jupi.gs_body .gs_modal_fuss {
  background: #1a2228;
  border-top-color: #3a464f;
}
/* Konsole in beiden Themes dunkel: Titel, Hinweise und Knoepfe hell */
html[data-theme="dark"] body.jupi.gs_body .gs_codepanel .gs_panel_titel,
html[data-theme="dark"] body.jupi.gs_body .gs_codepanel .gs_untertitel { color: #e6eef3; }
html[data-theme="dark"] body.jupi.gs_body .gs_codepanel .gs_kleinbtn {
  background: linear-gradient(180deg, #3a464f, #242d34);
  border-color: #55636d;
  color: #cfdae2;
}
html[data-theme="dark"] body.jupi.gs_body .gs_codepanel .gs_meldung { color: #c6d3db; }

html[data-theme="dark"] body.jupi.gs_body .gs_buehne {
  background:
    radial-gradient(70% 60% at 50% 78%, rgba(232, 121, 43, 0.14), rgba(232, 121, 43, 0) 72%),
    radial-gradient(120% 90% at 50% 6%, #1b262e 0%, #131c22 45%, #0a1014 100%);
  box-shadow:
    inset 0 0 0 3px #6f7d87,
    inset 0 0 0 4px #3c4852,
    inset 0 0 0 12px rgba(0, 0, 0, 0.5),
    0 0.5rem 1.4rem rgba(0, 0, 0, 0.6);
}

/* ============================================================
   12. HANDY UND KLEINE FENSTER
   ============================================================ */
@media (max-width: 60rem) {
  body.jupi.gs_body .gs_spalten { grid-template-columns: minmax(0, 1fr); }
  body.jupi.gs_body .gs_buehne { height: min(52vh, 22rem); }
  body.jupi.gs_body .gs_editor { max-height: 15rem; }
}
/* Leiste bricht frueh um: Die Marke braucht die ganze Zeile, sonst quetschen
   Zurueck-Pille und Dark-Schalter den Namen (768-px-Falle). */
@media (max-width: 56rem) {
  body.jupi.gs_body .gs_kopf {
    grid-template-columns: 1fr auto;
    gap: 0.45rem 0.5rem;
    padding: 0.45rem 0.7rem 0.55rem;
  }
  body.jupi.gs_body .gs_marke {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
  }
  body.jupi.gs_body .gs_marke h1 { font-size: 1.12rem; }
  body.jupi.gs_body .gs_marke img { width: 32px; height: 32px; }
  body.jupi.gs_body .gs_kopf .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
  }
  body.jupi.gs_body .gs_kopf .jupi_werkzeuge {
    grid-row: 2;
    grid-column: 2;
    /* Platz fuer Sprachwahl + Dark-Schalter nebeneinander - sonst bricht die
       Zeile hart um (390-px-Falle). */
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
  }
  body.jupi.gs_body .jupi_sprachen_select { max-width: 9rem; }
}
@media (max-width: 34rem) {
  body.jupi.gs_body .jupi_main { padding: 0.6rem 0.55rem 1rem; }
  body.jupi.gs_body .gs_buehne { height: 42vh; min-height: 12rem; }
  body.jupi.gs_body .gs_tab { padding: 0.3rem 0.6rem; font-size: 0.85em; }
  body.jupi.gs_body .gs_ecke_werte { font-size: 0.75em; gap: 0.2em 0.4em; }
  body.jupi.gs_body .gs_leiste { justify-content: center; }
  body.jupi.gs_body .gs_panel { padding: 0.8rem 0.75rem 0.9rem; }
}

/* ============================================================
   13. BEDIENZIELE >= 40 px (3.13.5) UND REDUZIERTE BEWEGUNG
   ============================================================ */
body.jupi.gs_body .gs_tab,
body.jupi.gs_body .gs_stufe,
body.jupi.gs_body .gs_tippbtn,
body.jupi.gs_body .gs_icon_btn,
body.jupi.gs_body .gs_aufgknopf,
body.jupi.gs_body .gs_kleinbtn,
body.jupi.gs_body .gs_musterknopf,
body.jupi.gs_body .gs_modal_zu { min-height: 40px; }
body.jupi.gs_body .gs_aufgknopf,
body.jupi.gs_body .gs_kleinbtn,
body.jupi.gs_body .gs_musterknopf { padding-block: 0.3em; }

@media (prefers-reduced-motion: reduce) {
  body.jupi.gs_body .gs_balken > span { transition: none; }
  body.jupi.gs_body .gs_lernkarte:hover,
  body.jupi.gs_body .gs_startbtn:hover,
  body.jupi.gs_body .gs_icon_btn:hover { transform: none; }
}