/* Typ 2: direkte Spielkonsole, alle Erklärungen im Hilfe-Dialog. */
[hidden] { display:none !important; }
.ks_header { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; padding:.8rem 1rem; }
.ks_header .jupi_nav_back { justify-self:start; position:static; display:flex; align-items:center; padding:.4rem .7rem; border-radius:999px; text-decoration:none; }
.ks_brand { display:flex; align-items:center; gap:.6rem; }
.ks_brand img { width:48px; height:48px; }
.ks_brand h1 { font-size:1.4rem; margin:0; color:white; }
.ks_header .jupi_werkzeuge { position:static; justify-self:end; }
.jupi_main { padding:.7rem 1rem 0; margin:0; }
.ks_panel { margin-bottom:.5rem; gap:.5rem 1rem; padding:.6rem 1rem; }
.ks_controls { margin-left:auto; justify-content:flex-end; }
.ks_controls label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
button,select,.jupi_nav_back { min-height:40px; min-width:40px; }
.ks_stage { padding:.6rem .8rem; }
.ks_angabe { margin-bottom:.4rem; }
.ks_canvas { width:min(100%,calc((100dvh - 390px)*1.25)); max-width:760px; height:auto; aspect-ratio:5/4; }
.ks_fortschritt { margin-top:.5rem; }
.ks_btns_row { margin-top:.4rem; }
.ks_msg { max-width:52rem; margin:.4rem auto 0; line-height:1.35; }
.ks_hilfe { color:var(--text-color, #24412b); width:min(38rem,calc(100% - 2rem)); max-height:85dvh; box-sizing:border-box; margin:auto; overflow:auto; }
.ks_hilfe::backdrop { background:rgba(0,0,0,.55); }
.ks_hilfe li { margin:.6rem 0; line-height:1.5; }
.ks_close { display:block; margin-left:auto; }
html[data-theme="dark"] .ks_hilfe { background:#17251f; color:#e5f0e8; }
.ks_done:not([hidden]) { position:fixed; z-index:20; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(32rem,85vw); margin:0; border:2px solid var(--link-color); }
@media(max-width:680px) {
  .ks_header { grid-template-columns:1fr auto; gap:.5rem; padding:.6rem; }
  .ks_brand { grid-row:1; grid-column:1 / -1; justify-content:center; }
  .ks_header .jupi_werkzeuge { grid-row:2; grid-column:2; }
  .ks_header .jupi_nav_back { grid-row:2; grid-column:1; font-size:.85rem; }
  .ks_panel { gap:.4rem .8rem; }
  .ks_controls { width:100%; margin-left:0; gap:.4rem; }
  .ks_controls .jupi_btn { padding:.45rem .65rem; }
  .ks_canvas { width:min(100%,calc((100dvh - 405px)*1.25)); }
  .ks_msg { font-size:.85rem; }
}
@media(max-height:550px) {
  .ks_canvas { width:min(100%,480px); }
}

/* JUPI-Leiste: feste Proportionen und runder Schieber, auch mit 40-px-Zielen. */
.jupi_container { grid-template-rows:0 auto 1fr auto; }
.ks_header { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; padding:.55rem 1rem; }
.ks_brand { justify-self:center; min-width:0; }
.ks_brand img { display:block; flex:none; width:40px; height:40px; aspect-ratio:1; object-fit:contain; }
.ks_brand h1 { font-size:1.25rem; line-height:1.2; }
.ks_header .jupi_nav_back { border-radius:999px; font-size:.88rem; line-height:1.2; }
.ks_header .jupi_theme_switch { width:74px; height:40px; min-width:74px; padding:0; }
.ks_header .jupi_theme_switch .jts_thumb { top:3px; bottom:auto; left:4px; width:32px; height:32px; border-radius:50%; }
html[data-theme="dark"] .ks_header .jupi_theme_switch .jts_thumb { left:calc(100% - 36px); }
.ks_header .jupi_theme_switch .jts_sun { left:9px; }
.ks_header .jupi_theme_switch .jts_moon { right:9px; }
.ks_header #jupi_sprachen_wahl { display:inline-flex; align-items:center; gap:.3rem; }
@media(max-width:800px) {
 .ks_header { grid-template-columns:minmax(0,1fr) auto; gap:.4rem; padding:.5rem; }
 .ks_brand { grid-row:1; grid-column:1 / -1; justify-content:center; }
 .ks_brand img { width:36px; height:36px; }
 .ks_brand h1 { font-size:1.15rem; }
 .ks_header .jupi_nav_back { grid-row:2; grid-column:1; font-size:.85rem; padding:.35rem .65rem; }
 .ks_header .jupi_werkzeuge { grid-row:2; grid-column:2; gap:.4rem; }
 .ks_header .jupi_sprachen_select { max-width:7rem; }
}
@media(max-width:360px) {
 .ks_header .jupi_nav_back { grid-row:2; grid-column:1 / -1; justify-self:center; }
 .ks_header .jupi_werkzeuge { grid-row:3; grid-column:1 / -1; justify-self:center; }
}

/* ============================================================
   PLOTTER-WERKSTATT - eigene Spieloptik fuer Kurven-Spur
   (Stil-Pass 26.10.2026, AGENTS.md 3.13.6 / 3.13.7)
   ------------------------------------------------------------
   Der Schueler sitzt am Zeichenbrett eines Plotter-Raums. Die vier
   Bausteine der Regel:
     1. Seitenkulisse = Millimeterpapier-Wand (kulisse.svg, EINE gestreckte
        Szene 1600x1000, cover / no-repeat - keine Kachel). Generator:
        .zcode/kurvenspur-kulisse.cjs
     2. JUPI-Leiste   = dunkle Stahl-/Tinten-Konsole mit Plotter-Orange,
        drei Zonen und beide Werkzeuge bleiben (>= 40 px).
     3. Buehne        = aufgeheftetes Zeichenblatt (Papier, Lineal-Kante,
        Eckmarken), das Canvas liegt wie ein Plot darauf.
     4. HUD/Karten    = Instrumentenbrett aus Geraeteglas, Zahlen als
        Anzeigen, Fortschritt als Messing-Reihe, Ergebnis als Pruefprotokoll.
   Alles haengt an body.jupi.ks_body, damit es die Plattform-Regeln aus
   jupi.css sicher schlaegt. Das Zeichenblatt (Canvas) bleibt in BEIDEN
   Themes hell - nur so bleibt die Kurve lesbar.
   ============================================================ */

/* ---------- 0. Farben und Schrift der Werkstatt ---------- */
body.jupi.ks_body {
  --ks-orange: #f0862a;        /* Plotter-Orange (Akzent) */
  --ks-orange-hell: #ffb066;
  --ks-orange-tief: #a8531a;
  --ks-anthrazit: #232a30;     /* Stahl-Konsole */
  --ks-anthrazit-2: #2f363c;
  --ks-anthrazit-tief: #14191d;
  --ks-glas: #1b2228;          /* Geraeteglas des HUD */
  --ks-stahl: #8b9aa5;
  --ks-papier: #fdfaf0;        /* Zeichenblatt (warm - hebt sich von der kuehlen Wand) */
  --ks-papier-2: #f3eddb;
  --ks-papier-kante: #cdc5ad;
  --ks-tinte: #1b2b33;         /* Text auf Papier */
  --ks-tinte-soft: #536a76;
  --ks-ecke: rgba(176, 140, 74, .55);   /* Eckmarken / Anlagewinkel */
  --ks-messing: #c49a55;
  --ks-messing-hell: #e8c887;
  --ks-messing-tief: #8a6a2c;
  --ks-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas,
             "Courier New", monospace;
}

/* ---------- 1. Seitenkulisse: die Millimeterpapier-Wand ----------
   EINE Szene, gestreckt (cover), kein Muster mit Einzelmotiven. Die zweite
   Ebene ist nur Licht (Vignette), damit die Mitte - dort liegt das
   Zeichenblatt - nach vorn kommt. Beide Ebenen: cover + no-repeat.
   Die Wand ist kuehl (Blaupausen-Papier), das Zeichenblatt warm: daran
   erkennt das Auge die Buehne sofort, auch im hellen Modus. */
body.jupi.ks_body {
  min-height: 100vh;
  background-color: #dbe6ef;
  background-image:
    radial-gradient(1200px 620px at 50% -8%, rgba(255, 255, 255, .82) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(84, 122, 150, .24) 100%),
    url("kulisse.svg");
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center top, center top;
  background-attachment: fixed, fixed, fixed;
  color: #16232b;
}
/* Dunkel = dieselbe Werkstatt bei Nacht: die Wand wird gedimmt (nicht
   ausgeloescht), ueber dem Zeichenbrett brennt die Plotter-Lampe. Die
   Konsole bleibt, das Blatt bleibt Papier - im Lampenlicht etwas waermer. */
html[data-theme="dark"] body.jupi.ks_body {
  --ks-papier: #f8f2e3;
  --ks-papier-2: #ece5d2;
  --ks-papier-kante: #b9b09a;
  background-color: #0b1216;
  background-image:
    linear-gradient(rgba(9, 20, 27, .64) 0%, rgba(4, 10, 15, .78) 100%),
    radial-gradient(1100px 560px at 50% -6%, rgba(240, 134, 42, .16) 0%, transparent 62%),
    url("kulisse.svg");
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center top, center top;
  background-attachment: fixed, fixed, fixed;
  color: #e6edf2;
}

/* ---------- 2. Grundflaeche: die Wand bleibt sichtbar ---------- */
/* Die weisse Plattform-Karte darf die Wand nicht zudecken. */
body.jupi.ks_body .jupi_container > .jupi_main { background: transparent; }
body.jupi.ks_body .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  margin: .3rem auto 0;
  padding: .7rem 1rem;
}
body.jupi.ks_body .jupi_footer {
  color: #3f5a68;
  text-align: center;
}
body.jupi.ks_body .jupi_footer a { color: #1d4a63; font-weight: 700; text-decoration: none; }
body.jupi.ks_body .jupi_footer a:hover { text-decoration: underline; }
html[data-theme="dark"] body.jupi.ks_body .jupi_footer { color: #a6bac6; }
html[data-theme="dark"] body.jupi.ks_body .jupi_footer a { color: var(--ks-orange-hell); }
/* Der Fuss klebt unten: ausdrueckliche Zeilen, sonst verteilt das Grid die
   freie Hoehe auf implizite auto-Zeilen. */
body.jupi.ks_body .jupi_container {
  align-content: start;
  grid-template-rows: 0 auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.ks_body .jupi_container { min-height: 100dvh; }
}
body.jupi.ks_body .jupi_main {
  max-width: 74rem;
  padding: .8rem 1.1rem 0;
  margin: 0 auto;
}

/* ---------- 3. JUPI-Leiste: Stahl-/Tinten-Konsole ----------
   Links zurueck, mittig Logo + Name, rechts Sprache und Dark-Schalter.
   Anthrazit mit Plotter-Orange als Akzent (AGENTS.md 3.13.2a + 3.13.6). */
body.jupi.ks_body .ks_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  padding: .45rem 1rem .5rem;
  border-bottom: 3px solid var(--ks-orange-tief);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .22)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px),
    linear-gradient(140deg, #2f363c 0%, #232a30 55%, #171c20 100%);
  /* Feste Farbe zusaetzlich zum Verlauf: Pruefwerkzeuge, die den Kontrast
     ueber backgroundColor messen, sehen sonst "transparent" (Lehre aus
     Geo-Koerper/Zelllabor). */
  background-color: #232a30;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .85),
              inset 0 1px 0 rgba(255, 255, 255, .10);
  color: #eef3f6;
}
/* Zurueck: dunkle Pille mit Orange-Rand (Muster Rechen-Raumschiff-Dark) */
body.jupi.ks_body .ks_header .jupi_nav_back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .35rem .95rem;
  border: 2px solid var(--ks-orange);
  border-radius: .5rem;
  background: linear-gradient(180deg, #343b42 0%, #1c2126 100%);
  color: var(--ks-orange-hell);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 2px 0 rgba(0, 0, 0, .45);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
body.jupi.ks_body .ks_header .jupi_nav_back:hover {
  border-color: var(--ks-orange-hell);
  color: #fff3e2;
  background: linear-gradient(180deg, #3c444c 0%, #242a30 100%);
  transform: translateY(-1px);
}
/* Marke in der Mitte: Logo unverzerrt 40 px, Name weiss */
body.jupi.ks_body .ks_brand { justify-self: center; min-width: 0; gap: .6rem; }
body.jupi.ks_body .ks_brand img {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
body.jupi.ks_body .ks_brand h1 {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .01em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
/* rechtes Werkzeugfeld */
body.jupi.ks_body .ks_header .jupi_werkzeuge { justify-self: end; gap: .45rem; }
body.jupi.ks_body .ks_header .jupi_sprachen_select {
  min-height: 40px;
  padding: .3rem .5rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .45rem;
  background: rgba(255, 255, 255, .07);
  color: #eaf1f5;
  font-weight: 600;
  font-size: .82rem;
}
body.jupi.ks_body .ks_header .jupi_sprachen_select:hover {
  background: rgba(255, 255, 255, .13);
  border-color: var(--ks-orange);
}
body.jupi.ks_body .ks_header .jupi_sprachen_select option { color: #16232b; background: #f7f9fb; }
/* Dark-Mode-Pille 74 x 40 - nur das Material wechselt, die Geometrie bleibt
   (Regel: der Schalter bleibt genau so gross wie auf der Plattform). */
body.jupi.ks_body .ks_header .jupi_theme_switch {
  background: linear-gradient(180deg, #171c20, #0b0f12);
  border: 1px solid rgba(240, 134, 42, .45);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .8);
}
body.jupi.ks_body .ks_header .jupi_theme_switch:hover { border-color: var(--ks-orange); }
body.jupi.ks_body .ks_header .jupi_theme_switch .jts_thumb {
  background: linear-gradient(180deg, #eef3f6 0%, #a9b6bf 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- 4. HUD: Instrumentenbrett aus dunklem Geraeteglas ----------
   In BEIDEN Themes dunkel - die Konsole ist das Geraet, nicht das Papier. */
body.jupi.ks_body .ks_panel {
  position: relative;
  gap: .55rem 1.1rem;
  padding: .6rem .9rem .68rem;
  /* Gleiche Breite wie das Zeichenblatt darunter: HUD und Buehne bilden
     eine Spalte, der Rand der Werkstatt bleibt frei. */
  max-width: 56rem;
  margin: 0 auto .7rem;
  border: 1px solid #0a0f12;
  border-radius: .55rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .16)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #2a323a 0%, #1d242a 55%, #151a1e 100%);
  /* feste Farbe fuer Kontrast-Messungen (siehe Kopfleiste) */
  background-color: #1d242a;
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .12),
              inset 0 0 0 1px rgba(240, 134, 42, .14);
  color: #e8eef2;
}
/* zwei Schrauben an den Enden (Deko, pointer-events: none) */
body.jupi.ks_body .ks_panel::before,
body.jupi.ks_body .ks_panel::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ccd6de, #6d7a85 60%, #39424a 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  pointer-events: none;
}
body.jupi.ks_body .ks_panel::before { left: .3rem; }
body.jupi.ks_body .ks_panel::after { right: .3rem; }
/* Zahlen als Anzeigen: dunkler Schacht mit Orange-Ziffern (Leuchtziffer) */
body.jupi.ks_body .ks_stat {
  min-width: 5.2rem;
  gap: .05rem;
  padding: .18rem .55rem .22rem;
  border: 1px solid #05080a;
  border-radius: .35rem;
  background: linear-gradient(180deg, #070d11, #0e171d 55%, #0a1116);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .08);
}
body.jupi.ks_body .ks_stat label {
  color: #8fa2ae;
  font-size: .64rem;
  letter-spacing: .13em;
}
body.jupi.ks_body .ks_stat span {
  font-family: var(--ks-mono);
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ks-orange-hell);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(240, 134, 42, .55);
}
body.jupi.ks_body .ks_controls { gap: .45rem; }
body.jupi.ks_body .ks_panel .jupi_select {
  min-height: 40px;
  padding: .35rem .5rem;
  border: 1px solid rgba(240, 134, 42, .5);
  border-radius: .4rem;
  background: linear-gradient(180deg, #333b43, #222930);
  color: #f3f7fa;
  font-weight: 600;
}
body.jupi.ks_body .ks_panel .jupi_select:hover { border-color: var(--ks-orange-hell); }
body.jupi.ks_body .ks_panel .jupi_select option { color: #16232b; background: #f7f9fb; }

/* ---------- 5. Knoepfe: Orange = Befehl, Stahl = Nebenweg ---------- */
body.jupi.ks_body .jupi_btn {
  min-height: 42px;
  padding: .45rem 1rem;
  border: 2px solid var(--ks-orange-tief);
  border-radius: .45rem;
  background: linear-gradient(180deg, #ffb066 0%, var(--ks-orange) 55%, #cf6d16 100%);
  color: #1d1206;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .01em;
  text-shadow: none;
  box-shadow: 0 2px 0 #8f4a12, inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.jupi.ks_body .jupi_btn:hover {
  background: linear-gradient(180deg, #ffc487 0%, #f7902f 55%, #d9771c 100%);
  box-shadow: 0 3px 0 #8f4a12, inset 0 1px 0 rgba(255, 255, 255, .5);
  transform: translateY(-1px);
}
body.jupi.ks_body .jupi_btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #8f4a12; }
body.jupi.ks_body .jupi_btn_alt {
  border: 2px solid rgba(240, 134, 42, .55);
  background: linear-gradient(180deg, #39424a 0%, #262d33 55%, #1b2126 100%);
  color: #f2f6f9;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.jupi.ks_body .jupi_btn_alt:hover {
  background: linear-gradient(180deg, #434d56 0%, #2d353c 55%, #20262c 100%);
  border-color: var(--ks-orange);
  transform: translateY(-1px);
}

/* ---------- 6. Buehne: das aufgeheftete Zeichenblatt ----------
   Papier in beiden Themes (darauf liegt der Plot), Messing-Anlagewinkel in
   den Ecken, Stahl-Lineal an der Oberkante, Bueroklammer oben mittig. */
body.jupi.ks_body .ks_stage {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.45rem 1.15rem .95rem;
  border: 1px solid var(--ks-papier-kante);
  border-radius: .3rem .3rem .45rem .45rem;
  background-color: var(--ks-papier);
  background-image:
    /* Eckmarken (Anlagewinkel): je zwei kurze Striche pro Ecke */
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    linear-gradient(var(--ks-ecke), var(--ks-ecke)),
    /* Millimeter-Raster des Blattes */
    repeating-linear-gradient(0deg, rgba(47, 111, 150, 0) 0 23px, rgba(47, 111, 150, .07) 23px 24px),
    repeating-linear-gradient(90deg, rgba(47, 111, 150, 0) 0 23px, rgba(47, 111, 150, .07) 23px 24px),
    linear-gradient(180deg, var(--ks-papier) 0%, var(--ks-papier-2) 100%);
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px,
                   auto, auto, auto;
  background-position:
    11px 11px, 11px 11px,
    calc(100% - 11px) 11px, calc(100% - 11px) 11px,
    11px calc(100% - 11px), 11px calc(100% - 11px),
    calc(100% - 11px) calc(100% - 11px), calc(100% - 11px) calc(100% - 11px),
    center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
                     no-repeat, no-repeat, no-repeat, no-repeat,
                     repeat, repeat, no-repeat;
  box-shadow: 0 18px 34px -20px rgba(8, 22, 30, .85),
              0 2px 0 rgba(255, 255, 255, .85) inset,
              0 0 0 1px rgba(139, 106, 44, .16) inset;
  color: var(--ks-tinte);
}
/* Stahl-Lineal an der Oberkante des Blattes (reine Deko) */
body.jupi.ks_body .ks_stage::before {
  content: "";
  position: absolute;
  top: .5rem;
  left: 1.15rem;
  right: 1.15rem;
  height: .6rem;
  border-radius: 2px;
  background:
    radial-gradient(circle at 5px 50%, rgba(255, 255, 255, .85) 0 1.4px, transparent 1.5px) 0 0 / 46px 100% repeat-x,
    repeating-linear-gradient(90deg, rgba(28, 44, 54, .55) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #eef3f6 0%, #b9c6cf 48%, #8d9ca7 100%);
  box-shadow: 0 1px 3px rgba(6, 18, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .85);
  pointer-events: none;
}
/* Bueroklammer oben mittig - "aufgeheftet" */
body.jupi.ks_body .ks_stage::after {
  content: "";
  position: absolute;
  top: -.2rem;
  left: 50%;
  width: 1.1rem;
  height: 2rem;
  transform: translateX(-50%) rotate(3deg);
  border: 2px solid #9aa7b1;
  border-bottom-color: transparent;
  border-radius: .55rem .55rem .4rem .4rem;
  box-shadow: 0 1px 2px rgba(6, 18, 24, .35);
  pointer-events: none;
}
/* Aufgabe: Schild auf dem Blatt, Orange als Rand (Messing-Rahmen) */
body.jupi.ks_body .ks_angabe {
  gap: .2rem .7rem;
  align-items: center;
  justify-content: center;
  max-width: 40rem;
  margin: 0 auto .6rem;
}
body.jupi.ks_body .ks_angabe_label {
  color: #7a6a4a;
  font-size: .68rem;
  letter-spacing: .14em;
}
body.jupi.ks_body .ks_angabe strong {
  font-family: var(--ks-mono);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 700;
  color: #153a4a;
  background: linear-gradient(180deg, #fdfbf4, #f1ecda);
  border: 1px solid #d3c9ab;
  border-left: 4px solid var(--ks-orange);
  border-radius: .2rem;
  padding: .08rem .8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- 7. Canvas: der Plot auf dem Zeichenblatt ----------
   Das Papier im Canvas malt game.js - in beiden Themes dieselbe helle
   Papierfarbe. Hier kommt nur der Rahmen drumherum (Plot-Kante). */
body.jupi.ks_body .ks_canvas {
  width: min(100%, calc((100dvh - 405px) * 1.25));
  max-width: 760px;
  height: auto;
  aspect-ratio: 5 / 4;
  display: block;
  margin: 0 auto;
  border: 1px solid #b6c5cf;
  border-radius: 2px;
  background-color: #fcfaf2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9),
              0 2px 8px -4px rgba(8, 22, 30, .45);
}

/* ---------- 8. Fortschritt: Messing-Reihe auf dem Blatt ---------- */
body.jupi.ks_body .ks_fortschritt { gap: .45rem; margin-top: .55rem; }
body.jupi.ks_body .ks_fort_punkt {
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid #7a5b23;
  background: radial-gradient(circle at 34% 28%, #f6e6c2, #cda762 55%, #8f6c2c 100%);
  box-shadow: inset 0 -1px 2px rgba(60, 40, 8, .45), 0 1px 2px rgba(8, 22, 30, .28);
}
body.jupi.ks_body .ks_fort_aktuell {
  border-color: #8f430c;
  background: radial-gradient(circle at 34% 28%, #ffd9a8, var(--ks-orange) 55%, #b9570f 100%);
  box-shadow: 0 0 8px rgba(240, 134, 42, .75), inset 0 -1px 2px rgba(90, 40, 0, .4);
}
body.jupi.ks_body .ks_fort_gruen {
  border-color: #175a1c;
  background: radial-gradient(circle at 34% 28%, #b6e2b8, #4ca851 55%, #1f6b24 100%);
}
body.jupi.ks_body .ks_fort_gelb {
  border-color: #9c7d18;
  background: radial-gradient(circle at 34% 28%, #fff3ae, #fdd835 55%, #c9a413 100%);
}
body.jupi.ks_body .ks_fort_rot {
  border-color: #8a1f1a;
  background: radial-gradient(circle at 34% 28%, #f3b4b0, #e05252 55%, #a11f1f 100%);
}

/* ---------- 9. Meldungen und Knoepfe auf dem Blatt ---------- */
body.jupi.ks_body .ks_msg {
  margin-top: .5rem;
  min-height: 1.6rem;
  color: #2b3d47;
  font-size: .95rem;
  font-weight: 700;
}
body.jupi.ks_body .ks_msg_ok { color: #1f6b24; }
body.jupi.ks_body .ks_msg_err { color: #a02620; }
body.jupi.ks_body .ks_btns_row { margin-top: .5rem; }

/* ---------- 10. Ergebnis: das Pruefprotokoll ----------
   Ergebnis-Karte als abgestempeltes Protokollblatt (Stempel = reine Grafik,
   kein Text - der Text kommt weiter aus i18n). */
body.jupi.ks_body .ks_done:not([hidden]) {
  width: min(30rem, 86vw);
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--ks-papier-kante);
  border-top: 5px solid var(--ks-orange);
  border-radius: .3rem;
  background-color: var(--ks-papier);
  background-image:
    repeating-linear-gradient(0deg, rgba(47, 111, 150, 0) 0 23px, rgba(47, 111, 150, .06) 23px 24px),
    repeating-linear-gradient(90deg, rgba(47, 111, 150, 0) 0 23px, rgba(47, 111, 150, .06) 23px 24px),
    linear-gradient(180deg, var(--ks-papier) 0%, var(--ks-papier-2) 100%);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--ks-tinte);
  text-align: center;
}
body.jupi.ks_body .ks_done::after {
  content: "✓";                 /* Stempel-Abdruck: Symbol, kein Text (sprachneutral) */
  display: grid;
  place-items: center;
  position: absolute;
  right: .9rem;
  bottom: .8rem;
  width: 6.4rem;
  height: 2.3rem;
  border: 3px double rgba(184, 58, 38, .42);
  border-radius: .25rem;
  box-shadow: inset 0 0 0 2px rgba(184, 58, 38, .16);
  color: rgba(184, 58, 38, .5);
  font: 700 1.35rem/1 var(--ks-mono);
  transform: rotate(-11deg);
  pointer-events: none;
}
body.jupi.ks_body .ks_done h3 {
  margin: .1rem 0 .4rem;
  font-family: var(--ks-mono);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #153a4a;
}
body.jupi.ks_body .ks_done_zei { font-size: 2.1rem; line-height: 1; margin: .1rem 0 .3rem; }
body.jupi.ks_body .ks_done p {
  margin: .3rem 0 .7rem;
  font-size: .98rem;
  line-height: 1.45;
  color: #36474f;
}
body.jupi.ks_body .ks_done_text { font-family: var(--ks-mono); }
body.jupi.ks_body .ks_sterne { font-size: 1.9rem; margin-bottom: .6rem; letter-spacing: .1em; }

/* ---------- 11. Hilfe: Formblatt aus demselben Material ----------
   Weiterhin ein nativer <dialog>. Kopf in Tinte, Seiten aus Papier; in beiden
   Themes gleich, damit die Hilfe immer wie ein Blatt der Werkstatt aussieht. */
body.jupi.ks_body .ks_hilfe {
  width: min(40rem, calc(100% - 2rem));
  max-height: 86dvh;
  padding: .9rem 1.15rem 1rem;
  border: 1px solid var(--ks-papier-kante);
  border-top: 5px solid var(--ks-orange);
  border-radius: .3rem;
  background-color: var(--ks-papier);
  background-image:
    repeating-linear-gradient(0deg, rgba(47, 111, 150, 0) 0 23px, rgba(47, 111, 150, .05) 23px 24px),
    linear-gradient(180deg, var(--ks-papier) 0%, var(--ks-papier-2) 100%);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--ks-tinte);
}
body.jupi.ks_body .ks_hilfe::backdrop {
  background: rgba(6, 14, 19, .72);
  backdrop-filter: blur(2px);
}
body.jupi.ks_body .ks_hilfe h3 {
  margin: .1rem 0 .55rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid rgba(240, 134, 42, .45);
  font-family: var(--ks-mono);
  font-size: 1.02rem;
  font-weight: 800;
  color: #153a4a;
}
body.jupi.ks_body .ks_hilfe ul { margin: .3rem 0 .5rem; padding-inline-start: 1.3rem; }
body.jupi.ks_body .ks_hilfe li { margin: .45rem 0; line-height: 1.55; }
body.jupi.ks_body .ks_hilfe .ks_info_inhalt p { color: #4a5c66; }
body.jupi.ks_body .ks_hilfe .ks_lernziel {
  border-left: 4px solid var(--ks-orange);
  border-radius: .2rem;
  background: #f3eddb;
  color: #3b4a52;
  padding: .5rem .7rem;
}
body.jupi.ks_body .ks_hilfe .ks_close { margin-bottom: .35rem; }

/* ---------- 12. Kleine Fenster ---------- */
@media(max-width:800px) {
  body.jupi.ks_body .ks_header {
    /* Zwei Spalten, die ihre Breite selbst bestimmen: links die Zurueck-Pille,
       rechts Sprache + Dark-Schalter. Mit "1fr auto" bekam die Pillen-Spalte
       zu wenig Platz und die Pille schob sich unter die Sprachwahl. */
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    justify-content: space-between;
    min-height: 0;
    padding: .45rem .6rem .5rem;
  }
  body.jupi.ks_body .ks_header .jupi_nav_back {
    padding: .3rem .6rem;
    font-size: .8rem;
  }
  body.jupi.ks_body .ks_header .jupi_werkzeuge { min-width: 0; }
  body.jupi.ks_body .ks_header .jupi_sprachen_select { max-width: 6.2rem; }
  body.jupi.ks_body .ks_brand h1 { font-size: 1.08rem; }
  body.jupi.ks_body .ks_brand img { width: 36px; height: 36px; }
  body.jupi.ks_body .jupi_main { padding: .6rem .6rem 0; }
  body.jupi.ks_body .ks_panel { gap: .45rem .8rem; padding: .55rem .8rem .6rem; }
  body.jupi.ks_body .ks_stat { min-width: 4.4rem; }
  body.jupi.ks_body .ks_stage { padding: 1.3rem .7rem .8rem; }
  body.jupi.ks_body .ks_canvas { width: min(100%, calc((100dvh - 420px) * 1.25)); }
  body.jupi.ks_body .ks_angabe strong { font-size: 1.12rem; }
  body.jupi.ks_body .ks_hilfe { padding: .8rem .9rem .9rem; }
  body.jupi.ks_body .ks_done:not([hidden]) { width: min(26rem, 90vw); padding: 1.1rem 1rem 1.3rem; }
}
@media(max-height:560px) {
  body.jupi.ks_body .ks_canvas { width: min(100%, 470px); }
}
/* Sehr schmale Fenster (320 px): Zurueck-Pille und Werkzeuge bleiben in EINER
   Zeile. Die alte Regel aus dem Plattform-Teil schickte sie in zwei Zeilen -
   das kostet rund 50 px Hoehe, die dem Zeichenblatt fehlen, und ist mit der
   neuen dunklen Orange-Pille nicht mehr noetig. */
@media(max-width:360px) {
  body.jupi.ks_body .ks_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
  }
  body.jupi.ks_body .ks_header .jupi_werkzeuge {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
  }
  body.jupi.ks_body .ks_header .jupi_sprachen_select { max-width: 5.6rem; }
}
/* Bedienziele bleiben >= 40 px (Regel 3.13.2) - am Ende, sonst gewinnt die
   spaetere Grundregel aus jupi.css. */
body.jupi.ks_body button,
body.jupi.ks_body select,
body.jupi.ks_body .jupi_nav_back,
body.jupi.ks_body .jupi_btn,
body.jupi.ks_body .jupi_theme_switch { min-height: 40px; min-width: 40px; }