/* ============================================================================
   woistdiekatze/styles.css - KATZENZIMMER / WOHNWAND (Stil-Pass 26.10.2026)

   Idee: Das Zimmer mit der Katze haengt wie ein grosses Bild in einem warmen
   Wohnzimmer. Die Seite IST dieses Wohnzimmer - die Kulisse ist die Wand.

   Aufbau von aussen nach innen:
     1.  Grundregeln des Pakets (Leisten-Gitter, Dialog, Groessen)
     2.  Seitenkulisse: die Wohnwand (kulisse.svg, EIN Bild, cover/no-repeat)
     3.  Leisten-Grundriss: drei Zonen, Handy zweizeilig (Regel 3.13.2)
     4.  Hinweise-Dialog: Grundgroessen (Material folgt in Abschnitt 8)
     5.  Werte-Brett: Messing-Etiketten und Papier-Bedienung (HUD)
     6.  Buehne: das Zimmer im dicken Holzrahmen mit Passepartout
     7.  Antwort-Kaertchen mit Klammer, Meldung als Zettel, Rundenende
     8.  Hilfe-Fenster im selben Material (natives <dialog>)
     9.  Dark Mode = dieselbe Wohnung bei Nacht - das Zimmer-Bild bleibt hell
     10. Handy / Tablet
     11. Bedienziele >= 40 px (Regel 3.13.5) - steht bewusst am ENDE

   Alles haengt an body.jupi.wk_body: die Optik liegt im Spielpaket (AGENTS.md
   3.10), die Plattform-Grundregeln aus jupi.css bleiben unangetastet.
   ========================================================================== */

/* ---------- 1a. Farben der Wohnung ---------- */
:root {
  --wk-tapete: #f3e4cd;
  --wk-holz: #8a5c32;
  --wk-holz-mittel: #6f4623;
  --wk-holz-dunkel: #4a2c11;
  --wk-holz-hell: #c9a374;
  --wk-messing: #c9a75a;
  --wk-messing-hell: #f0dca2;
  --wk-messing-dunkel: #7a5c22;
  --wk-creme: #f8ecd4;
  --wk-papier: #fbf4e4;
  --wk-papier-kante: #ddc9a5;
  --wk-tinte: #3a2a12;
  --wk-ok: #2f6b34;
  --wk-fehler: #a53127;
}

/* ---------- 2. Seitenkulisse: die Wohnwand ----------
   EIN Buehnenbild (1600 x 1000, Generator .zcode/woistdiekatze-kulisse.cjs),
   einmal eingesetzt: KEIN repeat, deshalb darf es an den Raendern
   anschneiden. Die Mitte ist ruhig - dort haengt das Zimmer-Bild. */
body.jupi.wk_body {
  margin: 0;
  min-height: 100vh;
  color: var(--wk-tinte);
  background-color: var(--wk-tapete);
  background-image: url("kulisse.svg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}
@supports (min-height: 100dvh) {
  body.jupi.wk_body { min-height: 100dvh; }
}

/* Buehne und Leiste liegen ueber der Kulisse, aber das Brett der Plattform
   (weisse Flaeche hinter .jupi_main) wuerde die Wand verdecken.
   Kein eigener Aussenabstand: der Container ist voll breit, und der Fuss soll
   bündig am Fensterrand enden (Regel 3.13.2a). */
body.jupi.wk_body .container.jupi_container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background: transparent;
}
@supports (min-height: 100dvh) {
  body.jupi.wk_body .container.jupi_container { min-height: 100dvh; }
}
body.jupi.wk_body .jupi_container > .jupi_main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* ---------- 3. Leisten-Grundriss (Holz folgt in 3b) ---------- */
body.jupi.wk_body .neu_header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  gap: .5rem;
  align-items: center;
  padding: .35rem 1rem !important;
  min-height: 54px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  color: var(--wk-creme);
  /* Wohnzimmer-Regal: warmes Holz mit feiner Maserung, Messingkante unten */
  background-color: var(--wk-holz-mittel);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 246, 224, .045) 0 2px, rgba(40, 22, 6, .05) 2px 6px),
    linear-gradient(180deg, #8e5f34 0%, #6f4623 55%, #56351a 100%);
  border-bottom: 2px solid var(--wk-messing);
  box-shadow:
    0 1px 0 rgba(255, 240, 205, .28) inset,
    0 -8px 16px rgba(0, 0, 0, .22) inset,
    0 6px 18px rgba(61, 36, 16, .35);
}
body.jupi.wk_body .neu_header .jupi_nav_back {
  justify-self: start;
  min-height: 40px;
  box-sizing: border-box;
  padding: .55rem .85rem;
  border-radius: 9px;
  border: 1px solid #b98e57;
  text-decoration: none;
  font-weight: 800;
  font-size: .9rem;
  display: flex;
  align-items: center;
  /* helles Holzschild, wie an die Wand genagelt */
  background-image: linear-gradient(180deg, #f7e7c6 0%, #e6cc9f 60%, #dcc08f 100%);
  color: #5a3819;
  box-shadow: 0 2px 0 #96703d, 0 3px 8px rgba(30, 17, 6, .28), 0 1px 0 #fffdf5 inset;
}
body.jupi.wk_body .neu_header .jupi_nav_back:hover {
  background-image: linear-gradient(180deg, #fdf1d7 0%, #eed6ac 60%, #e4c99b 100%);
}
body.jupi.wk_body .neu_marke {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  font-size: 1.15rem;
  text-align: center;
  color: var(--wk-creme);
}
body.jupi.wk_body .neu_marke img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain;
  flex: none;
  border-radius: 7px;
  /* Messing-Ringlein um das Spiel-Logo */
  box-shadow: 0 0 0 2px rgba(201, 167, 90, .85), 0 2px 6px rgba(30, 17, 6, .4);
}
body.jupi.wk_body .neu_marke h1 {
  font-size: inherit;
  line-height: 1.2;
  margin: 0;
  color: #fbeed3;
  text-shadow: 0 1px 2px rgba(40, 22, 6, .55);
}
body.jupi.wk_body .neu_header .jupi_werkzeuge {
  justify-self: end;
  display: flex;
  gap: .4rem;
  align-items: center;
  min-width: 0;
}
body.jupi.wk_body .jupi_sprachen_wahl {
  display: flex;
  align-items: center;
  gap: .35rem;
}
body.jupi.wk_body .jupi_sprachen_select {
  width: 10rem;
  max-width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box;
  padding: .4rem .65rem;
  border: 1px solid var(--wk-messing);
  border-radius: 9px;
  font: inherit;
  font-size: .85rem;
  /* Sprachwahl als Papier-Etikett auf dem Holzregal */
  background-image: linear-gradient(180deg, #fbf3e0, #f0e0c2);
  color: #4a3016;
  box-shadow: 0 1px 0 rgba(255, 253, 245, .7) inset, 0 2px 5px rgba(30, 17, 6, .3);
}
body.jupi.wk_body .jupi_sprachen_select option {
  color: #2b1c0e;
  background: #fdf7ea;
}
body.jupi.wk_body .neu_header #jupi_theme_toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: none;
  width: 74px !important;
  height: 40px !important;
  min-width: 74px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 9px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--wk-messing) !important;
  border-radius: 24px !important;
  /* Messing-Fassung mit dunklem Leder - dieselbe Pille in beiden Themes */
  background: #3e2811 !important;
  box-shadow: 0 1px 0 rgba(255, 240, 205, .25) inset, 0 2px 6px rgba(20, 11, 4, .45) !important;
}
body.jupi.wk_body .neu_header .jts_icon {
  font-size: 12px !important;
  line-height: 1 !important;
  z-index: 1;
}
body.jupi.wk_body .neu_header .jts_thumb {
  position: absolute !important;
  left: 4px !important;
  top: 3px !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  background-image: linear-gradient(180deg, #f6e3b4, #dfc07c) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 250, 232, .8) inset !important;
  transition: transform .15s;
}
body.jupi.wk_body .neu_header [aria-checked="true"] .jts_thumb {
  transform: translateX(32px) !important;
}

/* ---------- 4. Dialog-Grundgroessen (Material in Abschnitt 8) ---------- */
body.jupi.wk_body .neu_dialog {
  box-sizing: border-box;
  width: min(48rem, calc(100vw - 24px));
  max-height: 88dvh;
  overflow: auto;
  padding: 1rem;
  line-height: 1.55;
}
body.jupi.wk_body .neu_dialog::backdrop { background: #180e06a6; }
body.jupi.wk_body .neu_schliessen { display: flex; justify-content: flex-end; margin: 0; }
body.jupi.wk_body .neu_schliessen button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: .3rem;
  border-radius: 50%;
  cursor: pointer;
}
body.jupi.wk_body .neu_dialog h2 { margin: .3rem 0 1rem; }
body.jupi.wk_body .neu_dialog li { margin: .5rem 0; }
body.jupi.wk_body .neu_menu { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
body.jupi.wk_body .neu_menu button { min-width: 40px; min-height: 40px; }

@media (max-width: 800px) {
  body.jupi.wk_body .neu_header {
    grid-template-columns: 1fr 1fr;
    padding: .3rem .5rem !important;
  }
  body.jupi.wk_body .neu_marke { grid-column: 1 / -1; grid-row: 1; justify-self: center; font-size: 1rem; }
  body.jupi.wk_body .neu_header .jupi_nav_back { grid-row: 2; grid-column: 1; }
  body.jupi.wk_body .neu_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  body.jupi.wk_body .jupi_sprachen_select { width: 7rem; }
  body.jupi.wk_body .neu_marke img { width: 36px !important; height: 36px !important; }
}
@media (max-width: 360px) {
  body.jupi.wk_body .neu_header .jupi_nav_back { grid-column: 1 / -1; justify-self: center; }
  body.jupi.wk_body .neu_header .jupi_werkzeuge { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  body.jupi.wk_body .neu_header .jts_thumb { transition: none; }
}

/* ---------- 5. Werte-Brett: Messing-Etiketten auf Holz ---------- */
body.jupi.wk_body .katze_panel {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.1rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto 1rem;
  padding: .65rem 1rem .7rem;
  border-radius: 10px 10px 5px 5px;
  color: var(--wk-creme);
  /* dasselbe Holz wie die Leiste - das Regal unter der Wand */
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 246, 224, .04) 0 2px, rgba(40, 22, 6, .04) 2px 6px),
    linear-gradient(180deg, #7f5229 0%, #5f3a1a 100%);
  box-shadow:
    0 2px 0 var(--wk-messing) inset,
    0 -10px 18px rgba(0, 0, 0, .2) inset,
    0 10px 22px rgba(61, 36, 16, .28);
}
body.jupi.wk_body .katze_stat {
  display: flex;
  flex-direction: column;
  min-width: 4.3rem;
  padding: .16rem .6rem .2rem;
  border-radius: 5px;
  border: 1px solid var(--wk-messing-dunkel);
  /* Messing-Etikett mit eingravierten Zahlen */
  background-image: linear-gradient(170deg, #f4e0a6 0%, #dcb970 48%, #c39a4c 100%);
  box-shadow: 0 2px 0 #6f5320, 0 3px 7px rgba(20, 11, 4, .35), 0 1px 0 #fff5d4 inset;
}
body.jupi.wk_body .katze_stat label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c451b;
  text-shadow: 0 1px 0 rgba(255, 246, 214, .8);
}
body.jupi.wk_body .katze_stat span {
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 800;
  color: #2f2109;
  text-shadow: 0 1px 0 rgba(255, 246, 214, .6);
}
body.jupi.wk_body .katze_controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  align-items: center;
  margin-left: auto;
}
body.jupi.wk_body .katze_controls label {
  font-size: .82rem;
  font-weight: 700;
  color: #f2e2be;
  text-shadow: 0 1px 1px rgba(30, 17, 6, .5);
}
body.jupi.wk_body .katze_controls select {
  border: 1px solid #b98e57;
  border-radius: 8px;
  padding: .4rem .7rem;
  background-image: linear-gradient(180deg, #fdf7ea, #f2e4c8);
  color: var(--wk-tinte);
  box-shadow: 0 1px 0 rgba(255, 253, 245, .8) inset, 0 2px 0 rgba(20, 11, 4, .25);
}

/* ---------- 5b. Knoepfe: Papier, helles Holz und Messing ---------- */
body.jupi.wk_body .jupi_btn {
  color: #35260f;
  border: 1px solid #8a6a2a;
  border-radius: 8px;
  background-image: linear-gradient(180deg, #f3dda4 0%, #dcb970 52%, #c39a4c 100%);
  box-shadow: 0 2px 0 #7a5c22, 0 4px 10px rgba(20, 11, 4, .3), 0 1px 0 #fff5d4 inset;
  text-shadow: 0 1px 0 rgba(255, 248, 222, .6);
}
body.jupi.wk_body .jupi_btn:hover {
  background-image: linear-gradient(180deg, #fbe9bd 0%, #e6c884 52%, #cda657 100%);
  box-shadow: 0 3px 0 #7a5c22, 0 7px 14px rgba(20, 11, 4, .32), 0 1px 0 #fff9e4 inset;
}
body.jupi.wk_body .jupi_btn_alt {
  color: #57351a;
  border: 1px solid #b98e57;
  background-image: linear-gradient(180deg, #f8ead0 0%, #e9d3ac 55%, #ddc094 100%);
  box-shadow: 0 2px 0 #96703d, 0 4px 10px rgba(20, 11, 4, .26), 0 1px 0 #fffdf5 inset;
}
body.jupi.wk_body .jupi_btn_alt:hover {
  background-image: linear-gradient(180deg, #fdf4e2 0%, #f0dcbb 55%, #e4cba3 100%);
}

/* ---------- 6. Buehne: das Zimmer-Bild an der Wand ----------
   Der Holzrahmen ist das Padding von .katze_szene, das Passepartout liegt als
   Ring um das SVG (box-shadow, kostet keinen Platz). Das Zimmer selbst bleibt
   in BEIDEN Themes hell - es ist ein beleuchtetes Bild. */
body.jupi.wk_body .katze_stage {
  width: 100%;
  max-width: 72rem;
  /* margin-block:auto haengt das Bild in der freien Wandflaeche mittig
     (Flex-Spalte in .jupi_main); bei Platzmangel faellt der Rand auf 0.
     width:100% ist noetig - ohne sie schrumpft das Grid auf Fit-Content. */
  margin-block: auto;
  margin-inline: auto;
  padding: .15rem 0 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
body.jupi.wk_body .katze_stage[hidden] { display: none; }

body.jupi.wk_body .katze_frage {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: .1rem auto .95rem;
  padding: .42rem 1.1rem .46rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  color: #2f2109;
  /* Messing-Schild: die Aufgabe haengt unter der Leiste */
  background-image: linear-gradient(170deg, #f5e2aa 0%, #dcb970 50%, #c39a4c 100%);
  border: 1px solid #8a6a2a;
  border-radius: 8px;
  box-shadow: 0 3px 0 #7a5c22, 0 8px 16px rgba(61, 36, 16, .26), 0 1px 0 #fff5d4 inset;
  text-shadow: 0 1px 0 rgba(255, 248, 222, .75);
}
body.jupi.wk_body .katze_szene {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 10px;
  /* dicker Nussbaum-Rahmen */
  background-image:
    repeating-linear-gradient(94deg, rgba(255, 246, 224, .05) 0 3px, rgba(30, 17, 6, .06) 3px 9px),
    linear-gradient(155deg, #8a5a30 0%, #663f1e 46%, #4d2d12 100%);
  box-shadow:
    0 0 0 2px var(--wk-messing),
    0 16px 34px rgba(45, 26, 10, .42),
    0 2px 0 rgba(255, 240, 205, .22) inset,
    0 -8px 16px rgba(0, 0, 0, .26) inset;
}
body.jupi.wk_body .katze_szene svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: #f7efdf;
  /* Passepartout (14 px Creme) + 1 px Kante + 3 px Falz.
     Reihenfolge wichtig: der ERSTE Schatten liegt oben - also von innen nach
     aussen listen, sonst deckt der breiteste den Passepartout zu. */
  box-shadow:
    0 0 0 16px #fffaf0,
    0 0 0 17px #d9c6a4,
    0 0 0 20px #3f2510,
    0 10px 24px rgba(30, 17, 6, .45);
}
/* Eck-Schatten: das Bild liegt hinter Glas, die Ecken fallen ab.
   pointer-events:none, damit die klickbaren Stellen im Setz-Modus erreichbar
   bleiben. */
body.jupi.wk_body .katze_szene::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 2px;
  box-shadow: inset 0 0 26px rgba(60, 35, 12, .2), inset 0 2px 6px rgba(60, 35, 12, .18);
  pointer-events: none;
}
body.jupi.wk_body .katze_btns_row {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: .85rem 0 .7rem;
}

/* Klickbare Stellen im Setz-Modus: gestrichelte Silhouetten im Zimmer.
   Die Fuellung/Strichfarbe kommt aus game.js; hier nur die Zustaende. */
.katze_spot { cursor: pointer; }
.katze_spot:hover ellipse,
.katze_spot:hover circle { stroke: #b98e57; }
.katze_spot_err ellipse,
.katze_spot_err circle {
  stroke: #a53127;
  fill: rgba(165, 49, 39, .22);
}
.katze_spot_richtig ellipse,
.katze_spot_richtig circle { stroke: #2f6b34; }
.katze_spot:focus { outline: none; }
.katze_spot:focus-visible ellipse { stroke: #2f2109; stroke-width: 4; }

/* ---------- 7. Antworten: Papier-Kaertchen mit Klammer ---------- */
body.jupi.wk_body .katze_antworten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem .8rem;
  max-width: 640px;
  margin: 0 auto;
  padding-top: .3rem;
}
body.jupi.wk_body .katze_antworten[hidden] { display: none; }
body.jupi.wk_body .katze_satz {
  position: relative;
  padding: .72rem .85rem .68rem;
  border: 1px solid var(--wk-papier-kante);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wk-tinte);
  cursor: pointer;
  text-align: center;
  background-image: linear-gradient(180deg, #fdf8ec 0%, #f5e9d2 100%);
  box-shadow: 0 2px 5px rgba(61, 36, 16, .2), 0 1px 0 #fffdf5 inset;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* die Klammer, die das Kaertchen an die Wand heftet */
body.jupi.wk_body .katze_satz::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  width: 34px;
  height: 17px;
  border-radius: 5px 5px 3px 3px;
  background-image: linear-gradient(180deg, #eef0f3 0%, #aab0b8 58%, #7c838c 100%);
  box-shadow: 0 1px 2px rgba(20, 11, 4, .4), 0 1px 0 #fff inset;
  pointer-events: none;
}
body.jupi.wk_body .katze_satz::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  width: 14px;
  height: 7px;
  border-radius: 2px;
  background: #6f757d;
  pointer-events: none;
}
body.jupi.wk_body .katze_satz:hover:not(:disabled) {
  border-color: #a97f4a;
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(61, 36, 16, .26), 0 1px 0 #fffdf5 inset;
}
body.jupi.wk_body .katze_satz:disabled { cursor: default; opacity: .75; }
body.jupi.wk_body .katze_satz_ok {
  border-color: #2f6b34;
  background-image: linear-gradient(180deg, #f2f8e9 0%, #dcecd1 100%);
  color: #24421f;
  box-shadow: 0 0 0 2px rgba(47, 107, 52, .35), 0 2px 5px rgba(61, 36, 16, .18);
}
body.jupi.wk_body .katze_satz_err {
  border-color: var(--wk-fehler);
  background-image: linear-gradient(180deg, #fbeae5 0%, #f3d8d1 100%);
  color: #7d241c;
  box-shadow: 0 0 0 2px rgba(165, 49, 39, .22), 0 2px 5px rgba(61, 36, 16, .18);
}

/* Meldung als Zettel unter dem Bild */
body.jupi.wk_body .katze_msg {
  min-height: 1.6em;
  max-width: 640px;
  margin: .9rem auto 0;
  padding: .45rem .9rem .5rem;
  border: 1px solid var(--wk-papier-kante);
  border-radius: 3px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #4a3a20;
  background-image: linear-gradient(180deg, #fdf8ec, #f6ecd8);
  box-shadow: 0 1px 4px rgba(61, 36, 16, .16);
}
body.jupi.wk_body .katze_msg:empty {
  border-color: transparent;
  background-image: none;
  box-shadow: none;
}
body.jupi.wk_body .katze_msg_ok { color: var(--wk-ok); }
body.jupi.wk_body .katze_msg_err { color: var(--wk-fehler); }

/* ---------- 7b. Rundenende: der Zettel mit den Saetzen ---------- */
body.jupi.wk_body .katze_done {
  position: relative;
  max-width: 640px;
  margin: 1rem auto 0;
  padding: 1.2rem 1.1rem 1.1rem;
  border: 1px solid var(--wk-papier-kante);
  border-radius: 5px;
  text-align: center;
  color: var(--wk-tinte);
  background-image: linear-gradient(180deg, #fdf8ec 0%, #f3e6cb 100%);
  box-shadow: 0 14px 30px rgba(61, 36, 16, .3), 0 1px 0 #fffdf5 inset;
}
body.jupi.wk_body .katze_done h3 { margin: .1rem 0 .3rem; color: #4a2c11; }
body.jupi.wk_body .katze_done h4 { margin: 1rem 0 .2rem; color: #5a3a19; }
/* zwei Klebestreifen halten den Zettel an der Wand */
body.jupi.wk_body .katze_done::before,
body.jupi.wk_body .katze_done::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 66px;
  height: 20px;
  background: rgba(226, 205, 160, .8);
  box-shadow: 0 1px 3px rgba(61, 36, 16, .22);
  pointer-events: none;
}
body.jupi.wk_body .katze_done::before { left: 12%; transform: rotate(-4deg); }
body.jupi.wk_body .katze_done::after { right: 12%; transform: rotate(3deg); }
body.jupi.wk_body .katze_sterne {
  font-size: 2.3rem;
  letter-spacing: .18em;
  margin: .3rem 0;
  color: #b8862c;
  text-shadow: 0 1px 0 #fff5d4;
}
body.jupi.wk_body .katze_chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin: .7rem 0 1rem;
}
body.jupi.wk_body .katze_chip {
  padding: .3rem .7rem;
  border: 1px solid var(--wk-papier-kante);
  border-radius: 3px;
  font-size: .85rem;
  font-weight: 600;
  color: #4a3a20;
  background: var(--wk-papier);
  box-shadow: 0 1px 3px rgba(61, 36, 16, .18);
}
body.jupi.wk_body .katze_chip_err {
  color: #7d241c;
  border-color: #d9a89f;
  background: #fbeae5;
}

/* Die alten Aufklapp-Kaesten unter dem Spiel sind ersatzlos weg (3.13.4);
   die Regel bleibt, falls eine alte Kopie noch ein <details> mitbringt. */
body.jupi.wk_body .katze_hilfe { display: none; }

/* ---------- 8. Hilfe-Fenster: das Blatt im Holzrahmen ---------- */
body.jupi.wk_body .neu_dialog {
  border: 2px solid #b98e57;
  border-radius: 10px;
  color: var(--wk-tinte);
  background-image: linear-gradient(180deg, #fdf8ec 0%, #f5e9d2 100%);
  box-shadow:
    0 22px 50px rgba(16, 9, 3, .55),
    0 0 0 6px #6f4623,
    0 0 0 7px var(--wk-messing);
}
body.jupi.wk_body .neu_dialog::backdrop {
  background: rgba(24, 14, 6, .64);
}
body.jupi.wk_body .neu_dialog h2 { color: #4a2c11; }
body.jupi.wk_body .neu_dialog li::marker { color: #a97f4a; }
body.jupi.wk_body .neu_dialog b { color: #8a4d16; }
body.jupi.wk_body .neu_dialog i { color: #3f4a2c; }
body.jupi.wk_body .neu_schliessen button {
  border: 1px solid #b98e57;
  color: #4a2c11;
  background-image: linear-gradient(180deg, #f8ead0, #e6cfaa);
  box-shadow: 0 2px 0 #96703d, 0 1px 0 #fffdf5 inset;
  cursor: pointer;
}
body.jupi.wk_body .ec_lernsatz {
  padding: .7rem .95rem;
  border-radius: 6px;
  border-left: 5px solid #7a9c52;
  background: #f0f6e4;
  color: #33421f;
  font-weight: 600;
}

/* ---------- 8b. Fuss: die Sockelleiste der Wohnung ---------- */
body.jupi.wk_body .jupi_footer {
  margin: 0;
  padding: .85rem 1rem;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border-top: 2px solid var(--wk-messing);
  background-image: linear-gradient(180deg, #6f4623 0%, #4a2c11 100%);
  box-shadow: 0 -6px 16px rgba(30, 17, 6, .26), 0 1px 0 rgba(255, 240, 205, .2) inset;
}
body.jupi.wk_body .jupi_footer p {
  margin: 0;
  font-size: .85rem;
  text-align: center;
  color: #f2e4c6;
}
body.jupi.wk_body .jupi_footer a {
  color: #ffd9a0;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 217, 160, .45);
}
body.jupi.wk_body .jupi_footer a:hover { color: #fff3d6; }

/* ---------- 9. Dark Mode = dieselbe Wohnung bei Nacht ----------
   Die Wand wird gedimmt und von einer Lampe gewaermt; Leiste, Regal und Fuss
   bleiben dunkles Holz. Das Zimmer-Bild bleibt hell (3.13.6: Bilder und
   Papiere duerfen hell bleiben) - es ist die beleuchtete Bildwand. */
html[data-theme="dark"] body.jupi.wk_body {
  color: #f0e2c8;
  background-color: #1c1409;
  background-image:
    /* Lampe ueber dem Bild - der einzige warme Lichtkreis im dunklen Zimmer */
    radial-gradient(880px 520px at 40% 46%, rgba(255, 191, 100, .22), rgba(255, 191, 100, 0) 70%),
    /* kuehles Fensterlicht von oben, damit die Nacht nicht braun wird */
    radial-gradient(1200px 700px at 50% 0%, rgba(96, 126, 190, .16), rgba(96, 126, 190, 0) 66%),
    linear-gradient(rgba(26, 22, 34, .74), rgba(10, 9, 16, .88)),
    url("kulisse.svg");
  background-position: center top, center top, center top, center top;
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}
html[data-theme="dark"] .jupi_container > .jupi_main { background: transparent; }
html[data-theme="dark"] body.jupi.wk_body .neu_header {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 246, 224, .035) 0 2px, rgba(0, 0, 0, .07) 2px 6px),
    linear-gradient(180deg, #4b3018 0%, #38220f 55%, #291708 100%);
  box-shadow:
    0 1px 0 rgba(255, 240, 205, .18) inset,
    0 -8px 16px rgba(0, 0, 0, .35) inset,
    0 6px 18px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] body.jupi.wk_body .neu_marke h1 {
  color: #f4e2bb;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] body.jupi.wk_body .katze_panel {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 246, 224, .03) 0 2px, rgba(0, 0, 0, .06) 2px 6px),
    linear-gradient(180deg, #4a2f16 0%, #33200d 100%);
  box-shadow:
    0 2px 0 var(--wk-messing) inset,
    0 -10px 18px rgba(0, 0, 0, .3) inset,
    0 10px 22px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] body.jupi.wk_body .katze_szene {
  background-image:
    repeating-linear-gradient(94deg, rgba(255, 246, 224, .04) 0 3px, rgba(0, 0, 0, .09) 3px 9px),
    linear-gradient(155deg, #4f3218 0%, #39220f 46%, #281706 100%);
  box-shadow:
    0 0 0 2px var(--wk-messing),
    0 18px 38px rgba(0, 0, 0, .55),
    0 2px 0 rgba(255, 240, 205, .16) inset,
    0 -8px 16px rgba(0, 0, 0, .4) inset;
}
/* Im Dunkeln keine durchsichtigen Karten: Papier bleibt Papier, nur gedaempft
   (sonst mischt sich die Wand durch und die Karte wird grau). */
html[data-theme="dark"] body.jupi.wk_body .katze_satz:disabled {
  opacity: 1;
  color: #6b5b3f;
  border-color: #cbb894;
  background-image: linear-gradient(180deg, #f2e7d0 0%, #e4d5b8 100%);
}
html[data-theme="dark"] body.jupi.wk_body .katze_szene svg {
  box-shadow:
    0 0 0 16px #f3ecdc,
    0 0 0 17px #b9a482,
    0 0 0 20px #24150a,
    0 10px 24px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] body.jupi.wk_body .jupi_footer {
  background-image: linear-gradient(180deg, #3d2510 0%, #24150a 100%);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 240, 205, .14) inset;
}

/* ---------- 10. Handy / Tablet ---------- */
/* Eine Spalte: Bild oben, Aufgabe und Antworten darunter. */
@media (max-width: 1080px) {
  body.jupi.wk_body .katze_szene { max-width: 560px; }
}
@media (max-width: 640px) {
  body.jupi.wk_body .katze_antworten { grid-template-columns: 1fr; }
  body.jupi.wk_body .katze_frage { font-size: 1.1rem; padding: .38rem .8rem .4rem; }
  body.jupi.wk_body .katze_controls { margin-left: 0; }
  body.jupi.wk_body .katze_szene { padding: 16px; }
  body.jupi.wk_body .katze_szene svg {
    box-shadow:
      0 0 0 11px #fffaf0,
      0 0 0 12px #d9c6a4,
      0 0 0 14px #3f2510,
      0 6px 16px rgba(30, 17, 6, .45);
  }
  body.jupi.wk_body .katze_szene::after { inset: 16px; }
  body.jupi.wk_body .katze_msg { font-size: .92rem; }
}

/* Ab hier steht das Bild LINKS, Aufgabe und Antworten rechts daneben - so
   bleibt der Holzrahmen gross UND die Seite scrollt auf 1280 x 900 nicht. */
@media (min-width: 1081px) {
  body.jupi.wk_body .katze_stage {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(18rem, .72fr);
    grid-template-areas:
      "bild frage"
      "bild knoepfe"
      "bild antworten"
      "bild meldung";
    column-gap: 1.6rem;
    row-gap: .5rem;
    align-content: start;
    align-items: start;
  }
  body.jupi.wk_body .katze_frage {
    grid-area: frage;
    justify-self: stretch;
    width: auto;
    margin: 0 0 .3rem;
    font-size: 1.15rem;
  }
  body.jupi.wk_body .katze_szene {
    grid-area: bild;
    margin: 0;
    max-width: none;
  }
  body.jupi.wk_body .katze_btns_row {
    grid-area: knoepfe;
    justify-content: flex-start;
    margin: .1rem 0 .2rem;
  }
  body.jupi.wk_body .katze_antworten {
    grid-area: antworten;
    grid-template-columns: 1fr;
    max-width: none;
    margin: 0;
  }
  body.jupi.wk_body .katze_msg {
    grid-area: meldung;
    max-width: none;
    margin: .35rem 0 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .katze_pop { animation: none; }
}
.katze_pop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: katze_pop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes katze_pop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- 11. Bedienziele >= 40 px (Regel 3.13.5) ---------- */
body.jupi.wk_body .katze_controls .jupi_btn,
body.jupi.wk_body .katze_controls select,
body.jupi.wk_body .katze_btns_row .jupi_btn,
body.jupi.wk_body .katze_satz { min-height: 40px; }