/* ==========================================================================
   Kleiderschrank - GUI "GARDEROBE / SCHRANKWAND" (Stil-Pass 26.10.2026)

   Die Idee: der Schueler oeffnet den Kleiderschrank. Die Seite ist eine warme
   Schrankwand aus hellem Holz (kulisse.svg, EINE gestreckte Szene nach
   AGENTS.md 3.13.7 - keine Kachel), oben sitzt die Garderoben-Konsole mit
   Messing-Kleiderstange, und das Spiel selbst liegt in einem beleuchteten,
   offenen Schrankfach. Die Kleidungsstuecke haengen dort an einer Kleiderstange
   auf Waesche-Etiketten, die Werte sind Messing-Etiketten, das Rundenende ist
   ein Pflegeetikett/Bon und die Hilfe ein Papierbogen im Holzrahmen.

   Die vier Bausteine (3.13.6):
     1. Seitenkulisse .... Schrankwand (kulisse.svg, cover, no-repeat)
     2. JUPI-Leiste ..... Holz-Konsole mit Messingstange, drei Zonen bleiben
     3. Buehne ........... offenes, beleuchtetes Schrankfach (hell in BEIDEN Themes)
     4. HUD/Karten ....... Waesche-Etiketten, Messing-Etiketten, Pflegeetikett

   Nichts davon aendert IDs, Klassen, Mechanik, Speicher-Schluessel oder
   i18n-Keys. Alle neuen Regeln haengen an body.jupi.kds_body; die Grundregeln
   dieser Datei gelten weiterhin auch ohne die Klasse.

   Aufbau der Datei:
     0. Farben & Grundlagen (unveraendert)
     1. Seitenaufbau: Fusszeile ganz unten (3.13.2a) + Schrankwand
     2. JUPI-Leiste: Garderoben-Konsole
     3. Buehne: das beleuchtete Schrankfach
     4. Steuerzeile und Werte (Messing-Etiketten)
     5. Outfit-Spiegel und Auftrag
     6. Antworten: Waesche-Etiketten an der Kleiderstange
     7. Meldung, Knoepfe, Rundenende (Pflegeetikett/Bon)
     8. Hilfe: Papierbogen im Holzrahmen
     9. Fuss: Sockelblende
    10. Schmale Ansicht / Handy
    11. Dark Mode: dieselbe Garderobe bei Nacht
    12. Bedienziele mindestens 40 px (Regel 3.13.5) - MUSS am Ende stehen
   ========================================================================== */

/* ---------- 0. Farben & Grundlagen ---------- */
:root{color-scheme:light;--bg:#f6f5ef;--panel:#fff;--text:#233c34;--muted:#627369;
  --line:#dce5d9;--green:#2f7d32;--soft:#edf5e8;--wood:#eadcc4;--bad:#a53b31;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#161e1b;--panel:#222d27;--text:#edf3e9;
  --muted:#b6c4b8;--line:#415047;--green:#80c989;--soft:#2c3d30;--wood:#394036;--bad:#ffb8ac}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}
button,select{font:inherit}button,select,summary,a{touch-action:manipulation}
button,select{min-height:44px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--text);padding:9px 14px}
button{cursor:pointer;font-weight:650}button:hover:not(:disabled){border-color:var(--green);
  background:var(--soft)}button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}a{color:inherit}
.ks-main{max-width:1080px;padding:0 20px;margin:22px auto}
/* Werkzeuge der Steuerzeile: gebuendelt rechts (GUI 3.13.3, Typ 2). */
.ks-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.ks-tools button{font-size:.85rem;padding:9px 12px}
#mute{font-size:1.05rem;padding:8px 12px;min-width:44px}
/* Der Dark-Mode-Pill im Leisten-Hintergrund braucht helle Zeichen. */
.neu_header #jupi_theme_toggle{color:#fff}
.ks-game{border:1px solid var(--line);border-radius:22px;background:var(--panel);overflow:hidden;
  box-shadow:0 10px 32px #243e3210}.ks-toolbar{display:flex;align-items:center;flex-wrap:wrap;
  gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ks-toolbar label{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:650}
#best{margin-left:auto;color:var(--muted);font-size:.8rem}.ks-progress{display:flex;
  align-items:center;gap:16px;padding:16px 22px;font-size:.85rem}
.ks-track{height:7px;flex:1;background:var(--soft);border-radius:12px;overflow:hidden}
#progress{height:100%;background:var(--green);width:0;border-radius:12px}
.ks-play{display:grid;grid-template-columns:300px minmax(0,1fr);padding:0 22px 22px;gap:24px}
.ks-scene{min-width:0;position:relative;border-radius:18px;background:var(--wood);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;
  background-image:linear-gradient(90deg,transparent 49.5%,#806c4110 50%,transparent 50.5%)}
.ks-scene-label{padding:16px 12px 0;font-weight:750;font-size:.85rem;color:var(--text)}
.ks-avatar{width:250px;aspect-ratio:3/5;position:relative;max-width:100%}
.ks-body{position:absolute;width:100%;height:100%}#outfit img{position:absolute}
.ks-scene-note{font-size:.72rem;color:var(--muted);padding:0 12px 14px;text-align:center}
.ks-challenge{min-width:0;padding:10px 0 0}.ks-eyebrow{text-transform:uppercase;
  letter-spacing:1.6px;font-size:.7rem;font-weight:800;color:var(--green);margin:0 0 8px}
.ks-order{display:flex;align-items:center;justify-content:space-between;gap:10px}
h2{font-size:1.65rem;line-height:1.25;letter-spacing:-.4px;margin:0;overflow-wrap:break-word}
#speak{display:flex;align-items:center;gap:5px;flex-shrink:0;font-size:.78rem;padding:9px}
#speak img{filter:none}.ks-instruction{color:var(--muted);font-size:.9rem;margin:12px 0 20px}
.ks-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ks-choice{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:132px;padding:16px;background:var(--bg);border:2px solid var(--line)}
.ks-choice img{width:100%;height:100px;object-fit:contain;pointer-events:none}
.ks-number{position:absolute;left:8px;top:6px;font-size:.68rem;color:var(--muted)}
.ks-choice.ks-correct{border-color:var(--green);background:var(--soft);opacity:1}
.ks-choice.ks-wrong{border-color:var(--bad);opacity:.4}.ks-feedback{min-height:58px;
  display:flex;align-items:center;font-size:.88rem;line-height:1.45;margin:10px 0;color:var(--muted)}
.ks-feedback[data-kind=correct]{color:var(--green);font-weight:700}
.ks-feedback[data-kind=retry],.ks-feedback[data-kind=solution]{color:var(--bad)}
.ks-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ks-actions button{font-size:.85rem}.ks-primary{background:#2f7d32;color:white;border-color:#2f7d32}
.ks-primary:hover:not(:disabled){background:#246627;color:white}
/* Hilfe-Dialog (Goldene Negativ-Regel 3.13.4): Merksaetze + Lernsatz statt Aufklapp-Boxen. */
:root[data-theme=dark] .neu_dialog{background:var(--panel);color:var(--text);border-color:var(--line)}
.ks-lernsatz{margin-top:14px;font-size:.9rem;line-height:1.6;color:var(--muted)}
.ks-footer{max-width:1080px;margin:24px auto;text-align:center;color:var(--muted);
  font-size:.72rem;line-height:1.8;padding:0 16px}
.ks-footer a{color:inherit}
.ks-stars{display:flex;gap:8px;margin:20px 0}.ks-stars img{width:42px;height:42px}
.ks-star-empty{opacity:.2}.ks-summary{font-size:1.3rem;font-weight:800;margin:10px 0}
#review{margin:16px 0;font-size:.85rem}#review ul{padding-left:20px;line-height:1.7}
[hidden]{display:none!important}

/* ==========================================================================
   1. Seitenaufbau: Fusszeile ganz unten (Regel 3.13.2a) + Schrankwand
   ========================================================================== */
/* Die Seite ist eine Spalte ueber die ganze Fensterhoehe: dadurch klebt der
   Fuss am unteren Rand, auch wenn das Spiel kurz ist (behobener Mangel:
   Fuss-Luecke 93-273 px). Kopfzeile und Fuss haben KEINEN Aussenabstand. */
body.jupi.kds_body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  /* Warme Schrankwand: EINE gestreckte Szene (3.13.7, Weg A) - niemals kacheln. */
  background-color:#e2c69c;
  background-image:url("kulisse.svg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body.jupi.kds_body main,
body.jupi.kds_body .ks-main{flex:1 0 auto}
/* Der Fuss wird nach unten gedrueckt - ohne margin-bottom, damit keine Luecke
   zwischen Fuss und Fensterrand entsteht (das war der gemessene Mangel). */
body.jupi.kds_body footer,
body.jupi.kds_body .ks-footer{margin-top:auto;margin-bottom:0}

/* ==========================================================================
   2. JUPI-Leiste: Garderoben-Konsole aus Holz mit Messing-Kleiderstange
   Die drei Zonen bleiben: links "Alle Spiele", mittig Logo + Name,
   rechts Sprache + Dark-Mode. Alles bleibt ueber 40 px hoch.
   ========================================================================== */
body.jupi.kds_body .neu_header{
  position:sticky;
  top:0;
  z-index:40;
  /* Platz unten fuer die Kleiderstange */
  padding:.5rem 1rem .95rem!important;
  background:
    repeating-linear-gradient(90deg,rgba(255,246,225,.10) 0 2px,rgba(96,62,26,.12) 2px 8px),
    linear-gradient(180deg,#c69457 0%,#ac7c46 46%,#8d6034 100%);
  color:#fff6e2;
  box-shadow:0 8px 22px rgba(48,28,8,.42),inset 0 1px 0 rgba(255,246,220,.42);
}
/* Die Messing-Kleiderstange als Unterkante der Konsole. */
body.jupi.kds_body .neu_header::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:11px;
  background:linear-gradient(180deg,#fdf3cd 0%,#e7c667 26%,#d0a63e 55%,#9d7a20 82%,#7a5c17 100%);
  box-shadow:0 3px 8px rgba(40,24,6,.45),inset 0 1px 0 rgba(255,253,238,.85);
}
/* Kleiderbuegel-Andeutung: kleine Messing-Oesen, die an der Stange haengen.
   z-index 1, damit sie VOR der Stange liegen (sonst unsichtbar). */
body.jupi.kds_body .neu_header::before{
  content:"";position:absolute;left:12%;bottom:7px;width:10px;height:10px;border-radius:50%;
  z-index:1;
  background:radial-gradient(circle at 40% 34%,#fff8dc 0 40%,#d0a63e 62%,#7a5c17 100%);
  box-shadow:96px 0 0 0 #b3892f,192px 0 0 0 #b3892f,288px 0 0 0 #b3892f,
    384px 0 0 0 #b3892f,480px 0 0 0 #b3892f,576px 0 0 0 #b3892f,672px 0 0 0 #b3892f,
    768px 0 0 0 #b3892f,864px 0 0 0 #b3892f,960px 0 0 0 #b3892f,1056px 0 0 0 #b3892f,
    1152px 0 0 0 #b3892f,1248px 0 0 0 #b3892f,1344px 0 0 0 #b3892f,1440px 0 0 0 #b3892f;
  opacity:.85;pointer-events:none;
}
/* Zurueck-Pille als Messing-Schild */
body.jupi.kds_body .neu_header .jupi_nav_back{
  border-radius:7px;
  padding:.5rem .9rem;
  min-height:40px;
  background:linear-gradient(180deg,#fbeeb8 0%,#e2bd5b 46%,#c49a30 100%);
  color:#3f2e0b;
  border:1px solid #8a6a1e;
  box-shadow:inset 0 1px 0 #fffbe8,0 2px 0 #6d5027,0 4px 10px rgba(40,24,6,.32);
  font-weight:800;
}
body.jupi.kds_body .neu_header .jupi_nav_back:hover{
  background:linear-gradient(180deg,#fff6cf 0%,#eccb6c 46%,#cea436 100%);
  border-color:#6d5027;
}
/* Marke: Logo im Messingrahmen, Name in Creme */
body.jupi.kds_body .neu_marke{color:#fff6e2;font-weight:800}
body.jupi.kds_body .neu_marke strong{
  color:#fff6e2;
  text-shadow:0 1px 0 rgba(88,56,22,.6),0 0 14px rgba(255,240,200,.28);
}
body.jupi.kds_body .neu_marke img{
  background:#fff8e6;
  border-radius:10px;
  padding:2px;
  box-shadow:0 0 0 2px #8a6a1e,0 2px 6px rgba(30,18,4,.45),inset 0 0 0 1px #fff;
}
/* Sprachwahl auf Papier */
body.jupi.kds_body .jupi_sprachen_select{
  background:rgba(255,249,234,.94);
  color:#43310c;
  border:1px solid #8a6a1e;
  border-radius:8px;
  box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(40,24,6,.3);
}
body.jupi.kds_body .jupi_sprachen_select option{background:#fff9ea;color:#43310c}
/* Dark-Mode-Pille: 74 x 40, helles Papier mit Messingrand */
body.jupi.kds_body .neu_header #jupi_theme_toggle{
  background:rgba(255,249,234,.94)!important;
  border:1px solid #8a6a1e!important;
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(40,24,6,.3)!important;
}
body.jupi.kds_body .neu_header .jts_thumb{
  background:linear-gradient(180deg,#ffffff,#e8d8b6)!important;
  box-shadow:0 1px 3px rgba(80,50,20,.5),inset 0 0 0 1px #cbb083!important;
}
body.jupi.kds_body .neu_header .jts_icon{filter:grayscale(.15)}

/* ==========================================================================
   3. Buehne: das beleuchtete, offene Schrankfach
   Der Kasten bleibt in BEIDEN Themes hell (wie ein Fach mit Licht), nur der
   Holzrahmen und das Umfeld folgen dem Theme.
   ========================================================================== */
body.jupi.kds_body .ks-main{margin:14px auto 0;padding:0 20px}
body.jupi.kds_body .ks-game{
  position:relative;
  display:flex;
  flex-direction:column;
  border:12px solid #a9763f;
  border-radius:10px;
  /* Farben IM Fach: hell, egal welches Theme draussen gilt. */
  --bg:#fbf3e1;
  --panel:#fffdf6;
  --text:#3b2b16;
  --muted:#7c6644;
  --line:#dcc9a2;
  --soft:#f3e7cd;
  --green:#2f6b3a;
  --bad:#a53b31;
  color:#3b2b16;
  background:
    radial-gradient(120% 70% at 50% -6%,rgba(255,255,255,.95),rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#fffaf0 0%,#f8eeda 55%,#f1e4ca 100%);
  box-shadow:
    0 20px 46px rgba(52,32,10,.45),
    inset 0 0 0 2px #8a5a2b,
    inset 0 2px 0 rgba(255,246,222,.6),
    inset 0 -3px 10px rgba(120,85,40,.18);
  overflow:hidden;
}

/* ==========================================================================
   4. Steuerzeile und Werte: Messing-Etiketten auf hellem Holz
   ========================================================================== */
body.jupi.kds_body .ks-toolbar{
  border-bottom:1px solid #d8c39a;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 3px,rgba(212,189,152,.22) 3px 9px),
    linear-gradient(180deg,#f8ecd2,#eddcba);
  padding:12px 18px;
}
body.jupi.kds_body .ks-toolbar label{color:#5a4526}
body.jupi.kds_body .ks-toolbar select{
  background:#fffdf5;
  color:#3b2b16;
  border:1px solid #b79a67;
  border-radius:7px;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(90,60,25,.18);
  font-weight:650;
}
/* Bestwert: Messing-Etikett */
body.jupi.kds_body #best{
  color:#3f2f10;
  background:linear-gradient(180deg,#fbeeb8,#e0ba58 52%,#c39b32);
  border:1px solid #8a6a1e;
  border-radius:5px;
  padding:6px 10px;
  font-weight:750;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 #fffbe8,0 2px 0 #7a5c17,0 2px 5px rgba(60,40,10,.25);
}
body.jupi.kds_body .ks-tools button{
  background:linear-gradient(180deg,#fdf4e0,#eedfc0);
  color:#43310c;
  border:1px solid #b79a67;
  border-radius:7px;
  box-shadow:inset 0 1px 0 #fff6e2,0 2px 0 rgba(122,92,23,.4);
}
body.jupi.kds_body .ks-tools button:hover:not(:disabled){
  background:linear-gradient(180deg,#fff9ea,#f4e7ca);
  border-color:#8a6a1e;
}
body.jupi.kds_body .ks-progress{
  background:linear-gradient(180deg,#f5e8ce,#efdfbd);
  border-bottom:1px solid #d8c39a;
  padding:12px 22px;
  color:#5a4526;
}
body.jupi.kds_body #round{font-weight:700}
/* Punkte: Messing-Etikett */
body.jupi.kds_body #score{
  color:#3f2f10;
  background:linear-gradient(180deg,#fbeeb8,#e0ba58 52%,#c39b32);
  border:1px solid #8a6a1e;
  border-radius:5px;
  padding:4px 10px;
  font-size:.82rem;
  box-shadow:inset 0 1px 0 #fffbe8,0 1px 3px rgba(60,40,10,.28);
}
/* Fortschritt als Messingstange mit warmem Band */
body.jupi.kds_body .ks-track{
  height:9px;
  border-radius:6px;
  background:linear-gradient(180deg,#c9a67a,#e6cfa9);
  box-shadow:inset 0 1px 3px rgba(90,62,26,.45),0 1px 0 rgba(255,246,226,.75);
}
body.jupi.kds_body #progress{
  border-radius:6px;
  background:linear-gradient(90deg,#b98a52,#e7c464 60%,#d9b04a);
  box-shadow:0 0 7px rgba(217,176,74,.65);
}

/* ==========================================================================
   5. Outfit-Spiegel und Auftrag
   ========================================================================== */
body.jupi.kds_body .ks-play{padding:0 22px 22px;gap:24px}
/* Linkes Fach: ein Spiegel mit Messingrahmen, davor die Figur. */
body.jupi.kds_body .ks-scene{
  border:1px solid #cbb183;
  border-radius:12px;
  background:
    radial-gradient(120% 80% at 50% 12%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#f7edd9,#eadfc5 100%);
  box-shadow:inset 0 0 42px rgba(140,105,55,.2),0 2px 6px rgba(90,60,25,.14);
  overflow:hidden;
}
body.jupi.kds_body .ks-scene::before{
  content:"";position:absolute;left:50%;top:54px;bottom:46px;width:min(214px,82%);
  transform:translateX(-50%);
  border-radius:50% 50% 47% 47% / 45% 45% 55% 55%;
  background:radial-gradient(70% 62% at 38% 26%,#ffffff 0%,#e7efee 46%,#ccd9d8 100%);
  box-shadow:
    0 0 0 6px #dcb64f,
    0 0 0 8px #a37d22,
    inset 0 6px 20px rgba(70,92,90,.2),
    0 6px 16px rgba(90,62,26,.22);
  pointer-events:none;
}
body.jupi.kds_body .ks-scene-label{color:#4a3418;position:relative;z-index:1}
body.jupi.kds_body .ks-avatar{position:relative;z-index:1}
body.jupi.kds_body .ks-scene-note{color:#7c6644;position:relative;z-index:1}
/* Der Auftrag: eingenaehtes Pflegeetikett mit Webkante. */
body.jupi.kds_body .ks-challenge{padding:12px 0 0}
body.jupi.kds_body .ks-eyebrow{color:#8a6a1e;letter-spacing:1.8px}
body.jupi.kds_body .ks-order{
  background:linear-gradient(180deg,#fffdf4,#f6ecd4);
  border:1px solid #d9c49a;
  border-radius:5px;
  padding:12px 14px;
  box-shadow:0 2px 0 rgba(120,90,45,.2),inset 0 0 0 1px rgba(255,255,255,.75);
}
body.jupi.kds_body .ks-order h2{color:#33240e}
body.jupi.kds_body #speak{
  background:#fffdf5;
  color:#43310c;
  border:1px solid #b79a67;
  border-radius:7px;
  box-shadow:inset 0 1px 0 #fff6e2,0 2px 0 rgba(122,92,23,.35);
}
body.jupi.kds_body #speak:hover:not(:disabled){background:#fff9ea;border-color:#8a6a1e}
body.jupi.kds_body .ks-instruction{color:#7c6644}

/* ==========================================================================
   6. Antworten: Waesche-Etiketten an der Kleiderstange
   Zwei Reihen = zwei Messingstangen (die Reihen haben feste Hoehen, damit die
   Stangen genau ueber den Etiketten sitzen).
   ========================================================================== */
body.jupi.kds_body .ks-choices{
  position:relative;
  grid-auto-rows:154px;
  row-gap:14px;
  column-gap:12px;
  padding-top:28px;
}
body.jupi.kds_body .ks-choices::before,
body.jupi.kds_body .ks-choices::after{
  content:"";position:absolute;left:-6px;right:-6px;height:9px;border-radius:5px;
  background:linear-gradient(180deg,#fdf3cd 0%,#e7c667 30%,#d0a63e 60%,#9d7a20 100%);
  box-shadow:0 2px 5px rgba(80,52,14,.38),inset 0 1px 0 #fffbe8;
}
body.jupi.kds_body .ks-choices::before{top:5px}
body.jupi.kds_body .ks-choices::after{top:173px}
/* Das Etikett selbst: Papier mit Loch, Faden und Webkante. */
body.jupi.kds_body .ks-choice{
  border:1px solid #d7c39a;
  border-radius:5px;
  padding:26px 12px 12px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 2px,rgba(226,208,175,.28) 2px 4px),
    linear-gradient(180deg,#fffdf6,#f7eedb);
  color:#3b2b16;
  box-shadow:0 3px 7px rgba(90,62,26,.2),inset 0 0 0 1px rgba(255,255,255,.8);
}
/* Faden zur Stange: reicht bis in die Oese hinein */
body.jupi.kds_body .ks-choice::before{
  content:"";position:absolute;left:50%;top:-6px;width:2px;height:16px;margin-left:-1px;
  background:linear-gradient(180deg,#e6d69f,#c9a227);
  pointer-events:none;
}
/* Oese im Papier */
body.jupi.kds_body .ks-choice::after{
  content:"";position:absolute;left:50%;top:9px;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f6ead0,#ddcaa2);
  box-shadow:inset 0 1px 2px rgba(90,62,26,.5),0 0 0 1px #c3a878;
  pointer-events:none;
}
body.jupi.kds_body .ks-choice:hover:not(:disabled){
  border-color:#b08a4a;
  background:linear-gradient(180deg,#fffefa,#f9f1e0);
}
body.jupi.kds_body .ks-choice img{height:96px}
body.jupi.kds_body .ks-number{
  left:7px;top:7px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg,#fbeeb8,#dcb654);
  border:1px solid #8a6a1e;
  color:#43310c;font-size:.66rem;font-weight:800;
  box-shadow:inset 0 1px 0 #fffbe8;
}
/* Richtig: gruener Stempel, Papier bleibt Papier */
body.jupi.kds_body .ks-choice.ks-correct{
  border-color:#2f6b3a;
  background:linear-gradient(180deg,#f6fbf0,#e5f0d9);
  box-shadow:0 0 0 2px rgba(47,107,58,.35),inset 0 0 0 1px rgba(255,255,255,.8),0 3px 7px rgba(90,62,26,.2);
}
body.jupi.kds_body .ks-choice.ks-correct .ks-number{
  background:linear-gradient(180deg,#c9e6a8,#7fb356);border-color:#2f6b3a;color:#20380f;
}
/* Falsch: aussortiert, mit Schraegstrich-Muster */
body.jupi.kds_body .ks-choice.ks-wrong{
  opacity:.42;
  border-color:#a53b31;
  background:repeating-linear-gradient(45deg,#f8ece7 0 9px,#f1e0d9 9px 18px);
}

/* ==========================================================================
   7. Meldung, Knoepfe, Rundenende (Pflegeetikett/Bon)
   ========================================================================== */
body.jupi.kds_body .ks-feedback{
  min-height:54px;
  padding:9px 12px;
  border:1px solid #ddc9a4;
  border-left:4px solid #c9a227;
  border-radius:4px;
  background:linear-gradient(180deg,#fffdf5,#f8f0dd);
  color:#5a4526;
  box-shadow:0 1px 2px rgba(90,62,26,.16);
}
body.jupi.kds_body .ks-feedback[data-kind=correct]{
  border-left-color:#2f6b3a;background:linear-gradient(180deg,#f8fdf2,#eaf3df);color:#265a31;
}
body.jupi.kds_body .ks-feedback[data-kind=retry],
body.jupi.kds_body .ks-feedback[data-kind=solution]{
  border-left-color:#a53b31;background:linear-gradient(180deg,#fdf6f3,#f7e6e0);color:#8d3227;
}
body.jupi.kds_body .ks-actions{gap:12px}
body.jupi.kds_body .ks-actions button{border-radius:7px}
body.jupi.kds_body #hint{
  background:linear-gradient(180deg,#fffdf5,#f5ead3);
  color:#43310c;
  border:1px solid #b79a67;
  box-shadow:inset 0 1px 0 #fff6e2,0 2px 0 rgba(122,92,23,.32);
}
body.jupi.kds_body #hint:hover:not(:disabled){background:#fff9ea;border-color:#8a6a1e}
/* Weiter / Noch eine Runde: Messing-Plakette */
body.jupi.kds_body .ks-primary{
  background:linear-gradient(180deg,#fbeeb8,#e0ba58 52%,#c39b32);
  color:#3a2a0a;
  border:1px solid #8a6a1e;
  font-weight:800;
  box-shadow:inset 0 1px 0 #fffbe8,0 3px 0 #7a5c17,0 3px 8px rgba(60,40,10,.28);
}
body.jupi.kds_body .ks-primary:hover:not(:disabled){
  background:linear-gradient(180deg,#fff6cf,#eccb6c 52%,#cea436);
  color:#3a2a0a;
  border-color:#6d5027;
}
body.jupi.kds_body .ks-primary:disabled{
  background:linear-gradient(180deg,#f0e6cd,#ddd0b2);
  color:#7c6644;border-color:#c3ae88;box-shadow:none;
}
/* Rundenende: Pflegeetikett / Bon mit abgerissener Zickzack-Kante */
body.jupi.kds_body #result{
  position:relative;
  background:linear-gradient(180deg,#fffdf6,#faf2e0);
  border:1px solid #d9c49a;
  border-radius:3px;
  padding:18px 20px 26px;
  box-shadow:0 6px 18px rgba(90,62,26,.22);
}
body.jupi.kds_body #result::before{
  /* Webkante oben: kurze Steppstiche */
  content:"";position:absolute;left:14px;right:14px;top:8px;height:3px;
  background:repeating-linear-gradient(90deg,#c9a227 0 10px,transparent 10px 18px);
  opacity:.55;
}
body.jupi.kds_body #result::after{
  /* Zickzack-Unterkante wie ein abgerissener Bon */
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:
    linear-gradient(-45deg,#faf2e0 6px,transparent 0) 0 0/12px 12px repeat-x,
    linear-gradient(45deg,#faf2e0 6px,transparent 0) 0 0/12px 12px repeat-x;
  pointer-events:none;
}
body.jupi.kds_body #result .ks-eyebrow{color:#8a6a1e}
body.jupi.kds_body #result h2{color:#33240e}
body.jupi.kds_body .ks-summary{color:#3f2f10}
body.jupi.kds_body #result-message{color:#5a4526}
body.jupi.kds_body .ks-stars img{filter:drop-shadow(0 2px 2px rgba(90,62,26,.35))}
body.jupi.kds_body #review{color:#5a4526}
body.jupi.kds_body #review li{padding:2px 0}
body.jupi.kds_body #review ul{padding-left:22px}

/* ==========================================================================
   8. Hilfe: Papierbogen im Holzrahmen (bleibt nativer <dialog>)
   ========================================================================== */
body.jupi.kds_body .neu_dialog{
  border:12px solid #a9763f;
  border-radius:8px;
  background:linear-gradient(180deg,#fffdf6,#f8efdb);
  color:#3b2b16;
  padding:1rem 1.2rem 1.2rem;
  box-shadow:0 24px 54px rgba(24,14,4,.6),inset 0 0 0 2px #8a5a2b;
}
body.jupi.kds_body .neu_dialog::backdrop{background:rgba(28,17,6,.64)}
body.jupi.kds_body .neu_dialog h2{color:#5a3f18}
body.jupi.kds_body .neu_dialog li::marker{color:#8a6a1e}
body.jupi.kds_body .neu_dialog .neu_schliessen button{
  background:linear-gradient(180deg,#fbeeb8,#dcb654);
  color:#43310c;border:1px solid #8a6a1e;
  box-shadow:inset 0 1px 0 #fffbe8,0 2px 0 #7a5c17;
}
body.jupi.kds_body .ks-lernsatz{
  background:#f5e9cf;
  border-left:4px solid #c9a227;
  border-radius:4px;
  padding:10px 12px;
  color:#5a4526;
}

/* ==========================================================================
   9. Fuss: Sockelblende der Schrankwand
   ========================================================================== */
body.jupi.kds_body .ks-footer{
  width:100%;
  max-width:none;
  padding:.9rem 16px 1.1rem;
  text-align:center;
  color:#4a3418;
  font-size:.74rem;
  line-height:1.8;
  text-shadow:0 1px 0 rgba(255,246,226,.45);
  background:linear-gradient(180deg,rgba(120,80,35,.06),rgba(84,54,22,.3));
  border-top:1px solid rgba(255,246,226,.4);
  box-shadow:inset 0 1px 0 rgba(255,246,226,.3);
}
body.jupi.kds_body .ks-footer a{color:#4a2c08;font-weight:650}
body.jupi.kds_body .ks-footer a:hover{color:#2f1d05}

/* ==========================================================================
   10. Schmale Ansicht / Handy
   ========================================================================== */
@media(max-width:800px){
  body.jupi.kds_body .ks-play{grid-template-columns:220px minmax(0,1fr);gap:18px}
  body.jupi.kds_body .ks-avatar{width:205px}
  body.jupi.kds_body .ks-order{align-items:flex-start;flex-direction:column}
  body.jupi.kds_body h2{font-size:1.4rem}
  body.jupi.kds_body .ks-choices{grid-auto-rows:132px;row-gap:14px;padding-top:28px}
  body.jupi.kds_body .ks-choices::before{top:5px}
  body.jupi.kds_body .ks-choices::after{top:151px}
  body.jupi.kds_body .ks-choice{padding:22px 10px 10px}
  body.jupi.kds_body .ks-choice img{height:82px}
  body.jupi.kds_body .ks-scene::before{top:46px;bottom:38px;width:min(176px,80%)}
}
@media(max-width:580px){
  body.jupi.kds_body .neu_header{padding:.35rem .55rem .8rem!important}
  body.jupi.kds_body .neu_header::before{display:none}
  body.jupi.kds_body .ks-main{padding:0 12px;margin:10px auto 0}
  body.jupi.kds_body .ks-toolbar{padding:10px 12px;gap:8px}
  body.jupi.kds_body .ks-toolbar label{flex:1 1 100%;justify-content:space-between}
  body.jupi.kds_body #best{font-size:.7rem;padding:5px 8px}
  body.jupi.kds_body .ks-tools{gap:8px}
  body.jupi.kds_body .ks-tools button{font-size:.8rem;padding:9px 11px}
  body.jupi.kds_body .ks-progress{padding:10px 12px;gap:10px;font-size:.76rem}
  body.jupi.kds_body .ks-play{display:flex;flex-direction:column;padding:0 12px 16px;gap:14px}
  body.jupi.kds_body .ks-scene{height:174px;flex-direction:row;justify-content:space-evenly}
  body.jupi.kds_body .ks-scene::before{display:none}
  body.jupi.kds_body .ks-avatar{width:102px;flex:0 0 102px;height:170px}
  body.jupi.kds_body .ks-scene-label{padding:0 0 0 12px;max-width:85px}
  body.jupi.kds_body .ks-scene-note{max-width:105px;font-size:.7rem;padding:0 12px 0 0}
  body.jupi.kds_body .ks-challenge{padding:0}
  body.jupi.kds_body .ks-order{flex-direction:row;align-items:center;gap:8px;padding:10px}
  body.jupi.kds_body h2{font-size:1.3rem}
  body.jupi.kds_body #speak{font-size:0;padding:8px}
  body.jupi.kds_body #speak img{width:24px;height:24px}
  body.jupi.kds_body .ks-instruction{margin:10px 0 14px;font-size:.83rem}
  body.jupi.kds_body .ks-choices{grid-auto-rows:120px;row-gap:12px;column-gap:8px;padding-top:24px}
  body.jupi.kds_body .ks-choices::before{top:2px}
  body.jupi.kds_body .ks-choices::after{top:142px}
  body.jupi.kds_body .ks-choice{min-height:0;padding:20px 9px 8px}
  body.jupi.kds_body .ks-choice img{height:74px}
  body.jupi.kds_body .ks-number{width:17px;height:17px;left:5px;top:5px}
  body.jupi.kds_body .ks-actions button{font-size:.76rem;padding:10px}
  body.jupi.kds_body .ks-feedback{min-height:52px;font-size:.83rem;padding:8px 10px}
  body.jupi.kds_body .ks-footer{font-size:.7rem;padding:.75rem 12px 1rem}
  body.jupi.kds_body .neu_dialog{border-width:8px;padding:.8rem .9rem 1rem}
}
@media(prefers-reduced-motion:no-preference){
  .ks-choice{transition:background .12s,border-color .12s}
}

/* ==========================================================================
   11. Dark Mode: dieselbe Garderobe bei Nacht
   Die Schrankwand wird gedaempft (dunkler Schleier ueber derselben Szene),
   die Konsole wird dunkles Holz, die Buehne bleibt das beleuchtete Fach.
   ========================================================================== */
:root[data-theme=dark] body.jupi.kds_body{
  background-color:#170f06;
  background-image:
    linear-gradient(rgba(26,17,8,.62),rgba(12,7,3,.8)),
    url("kulisse.svg");
  background-size:cover,cover;
  background-position:center top,center top;
  background-repeat:no-repeat,no-repeat;
  background-attachment:fixed,fixed;
  color:#f0e4cb;
}
:root[data-theme=dark] body.jupi.kds_body .neu_header{
  background:
    repeating-linear-gradient(90deg,rgba(255,226,180,.06) 0 2px,rgba(0,0,0,.14) 2px 8px),
    linear-gradient(180deg,#4a3520 0%,#382612 48%,#241809 100%);
  color:#f4e7cb;
  box-shadow:0 8px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,226,180,.18);
}
:root[data-theme=dark] body.jupi.kds_body .neu_header::after{
  background:linear-gradient(180deg,#f4e6b6 0%,#c9a44a 30%,#9d7a20 65%,#5f4710 100%);
}
:root[data-theme=dark] body.jupi.kds_body .neu_marke strong,
:root[data-theme=dark] body.jupi.kds_body .neu_marke{color:#f7ecd6}
:root[data-theme=dark] body.jupi.kds_body .ks-footer{
  color:#e9d9b8;
  background:linear-gradient(180deg,rgba(10,6,2,.35),rgba(8,5,2,.72));
  border-top-color:rgba(240,222,180,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
:root[data-theme=dark] body.jupi.kds_body .ks-footer a{color:#f7e3b0}
:root[data-theme=dark] body.jupi.kds_body .ks-footer a:hover{color:#fff3d0}
/* Die Buehne bleibt hell - nur der Holzrahmen wird dunkler Nussbaum. */
:root[data-theme=dark] body.jupi.kds_body .ks-game{
  border-color:#553a1e;
  box-shadow:0 20px 50px rgba(0,0,0,.66),inset 0 0 0 2px #2f1f0d,
    inset 0 2px 0 rgba(255,238,200,.35),0 0 70px rgba(255,222,150,.14);
}
/* Hilfe-Bogen bleibt Papier (Regel 3.13.6: Papiere duerfen hell bleiben). */
:root[data-theme=dark] body.jupi.kds_body .neu_dialog{
  background:linear-gradient(180deg,#fffdf6,#f6ecd6);
  color:#3b2b16;
  border-color:#553a1e;
}
:root[data-theme=dark] body.jupi.kds_body .neu_dialog h2{color:#5a3f18}
:root[data-theme=dark] body.jupi.kds_body .ks-lernsatz{background:#f2e5c8;color:#5a4526}

/* ==========================================================================
   12. Bedienziele mindestens 40 px (Regel 3.13.5) - MUSS am Ende stehen
   ========================================================================== */
.ks-tools button,.ks-actions button,#speak,#mute,.ks-primary,
body.jupi.kds_body .ks-toolbar select{min-height:40px}
#mute{min-width:40px}
.ks-choice:focus-visible,
.ks-tools button:focus-visible,
.ks-actions button:focus-visible,
#speak:focus-visible,
.jupi_nav_back:focus-visible,
.neu_dialog .neu_schliessen button:focus-visible,
body.jupi.kds_body .ks-toolbar select:focus-visible{
  outline:3px solid #8a6a1e;outline-offset:2px;
}
/* Im Schrankfach ist der Fokusring Messing statt Plattform-Gruen. */
body.jupi.kds_body .ks-game button:focus-visible,
body.jupi.kds_body .ks-game select:focus-visible{outline-color:#8a6a1e}