/* woistdiemaus/styles.css - KÜCHE / VORRATSSCHRANK (GUI-Neubau 26.10.2026)

   Die Welt: Die Maus wohnt in einer Küche, der Schüler schaut durch das
   Küchenfenster hinein (AGENTS.md 3.13.6/3.13.7).

   Aufbau (von aussen nach innen):
     1. Farben der Küche (Eiche, Creme, Schiefer, Kupfer, Fliesenblau)
     1b. Seitenkulisse: EINE gestreckte Küchenszene (kulisse.svg, cover)
     1c. Rahmen: Kopfleiste bündig oben, Fußzeile bündig unten (3.13.2a)
     2. Die Theken-Konsole (JUPI-Leiste im Spielmaterial, 3.13.2)
     3. Die Kreidetafel: Aufgabe/Punkte/Best + Steuerung
     4. Die Bühne: das Küchenfenster (Holzrahmen + Fensterbank)
     5. Antworten: Kühlschrank-Magnete auf der Stahltür
     6. Meldung + Aktionsknöpfe
     7. Rundenende: Einkaufszettel
     8. Hilfe-Fenster: Rezeptkarte (natives <dialog>)
     9. Dark Mode: dieselbe Küche bei Nacht (Fenster bleibt hell)
    10. Handy
    11. Flache Fenster (Schul-Laptops)
    12. Bedienziele >= 40 x 40 px (Regel 3.13.5) - STEHT AM ENDE
    13. Weniger Bewegung

   Alle Regeln hängen an body.jupi.wm_body (bzw. mit html[data-theme] davor
   für den Dunkelmodus), damit sie die Plattform-Grundregeln aus jupi.css in
   BEIDEN Themes schlagen - sonst färbt jupi.css Leiste, Knöpfe und Fuß hart
   um (Lehre aus Zeitmeister/Schatzkarte). */

/* ---------- 1. Farben ---------- */
:root {
  --wm-eiche: #c99b62;
  --wm-eiche-hell: #e2bd85;
  --wm-eiche-tief: #8a5f33;
  --wm-eiche-dunkel: #6d4a26;
  --wm-milch: #fffdf6;
  --wm-milch-2: #f3ead6;
  --wm-fuge: #2e2620;
  --wm-tinte: #43301f;
  --wm-tinte-soft: #7d6550;
  --wm-kupfer: #b3763f;
  --wm-kupfer-hell: #d9a163;
  --wm-schiefer: #33404a;
  --wm-schiefer-2: #222a31;
  --wm-kreide: #f4f2e6;
  --wm-kreide-soft: #b9c6ce;
  --wm-gruen: #3f7d5f;
  --wm-gruen-hell: #56a37c;
  --wm-rot: #b4472f;
  --wm-stahl: #dfe5e9;
  --wm-mono: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace;
}

/* ---------- 1b. Seitenkulisse: die Küchenwand ----------
   EIN gestrecktes Bild (1600x1000, Generator .zcode/woistdiemaus-kulisse.cjs):
   hellblau/weiße Fliesenwand, oben ein offenes Vorratsregal mit Gläsern und
   Dosen, links/rechts ein angeschnittenes Hängeschrank-Eck, unten die
   Arbeitsplatte. Die Mitte bleibt ruhig - dort liegt das Fenster.
   Technik nach Regel 3.13.7 (Weg A): cover, no-repeat, center top. */
body.jupi.wm_body {
  background-color: #e7f1f6;
  background-image:
    radial-gradient(1100px 520px at 50% -12%, rgba(255, 255, 255, .65) 0%, transparent 62%),
    radial-gradient(900px 460px at 50% 108%, rgba(60, 90, 100, .10) 0%, transparent 60%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center bottom, center top;
  background-size: cover, cover, cover;
  background-attachment: fixed, fixed, fixed;
}

/* ---------- 1c. Leisten-Lage: Kopf oben, Fuß unten (3.13.2a) ----------
   Der Footer klebte bisher 124 px über dem Fensterrand, weil der Container
   zwar 100dvh hoch war, seinen Inhalt aber nicht verteilte (display:block).
   Jetzt: Body und Container sind eine Spalte, main nimmt den freien Platz,
   der Fuß sitzt per margin-top:auto am unteren Rand. */
body.jupi.wm_body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.jupi.wm_body .jupi_container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  background: transparent;
}
body.jupi.wm_body .jupi_main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: .55rem 1rem 1rem !important;
  background: transparent;
}
body.jupi.wm_body .jupi_container > .jupi_footer {
  margin-top: auto;
  margin-bottom: 0;
  max-width: 100%;
  width: 100%;
  border-radius: 0;
  border-top: 0;
  background: transparent;
  box-shadow: none;
  padding: .5rem 1rem .6rem !important;
}
body.jupi.wm_body .jupi_footer,
body.jupi.wm_body .jupi_footer p { color: #5c6f7a; font-size: .82rem; text-align: center; }
body.jupi.wm_body .jupi_footer a { color: #2f6b57; font-weight: 700; text-decoration: none; }
body.jupi.wm_body .jupi_footer a:hover { text-decoration: underline; }

/* ---------- 2. Die Theken-Konsole (JUPI-Leiste) ----------
   Warmes Weiß auf Eiche mit dunkler Fuge - passt zum hellen Küchenbild.
   Drei Zonen bleiben: zurück links, Logo + Name mittig, Sprache + Theme
   rechts; der Dark-Mode-Schalter ist die 74x40-Pille aus rahmen.css. */
body.jupi.wm_body .jupi_header,
body.jupi.wm_body .jupi_header.neu_header {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 60px !important;
  padding: .4rem 1rem .45rem !important;
  border-bottom: 4px solid var(--wm-fuge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #fffdf8 0%, #f9f2e1 44%, #eddfbe 80%, #e2cfa6 100%);
  color: var(--wm-tinte);
  box-shadow:
    0 10px 22px -14px rgba(46, 38, 32, .6),
    inset 0 -7px 0 -4px var(--wm-eiche-dunkel),
    inset 0 1px 0 #ffffff;
}
/* Zurück-Pille: dunkles Nussholz mit Creme-Schrift (kontrastreich) */
body.jupi.wm_body .jupi_header .jupi_nav_back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: .42rem .95rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  color: #fdf4e2;
  background: linear-gradient(180deg, #5b3f26 0%, #42301c 60%, #35250f 100%);
  border: 1px solid #2b1d10;
  box-shadow: 0 3px 0 #241708, 0 6px 12px -8px rgba(0, 0, 0, .55);
  transition: transform .12s, background .12s;
}
body.jupi.wm_body .jupi_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #6d4c2e 0%, #503a22 60%, #3f2c15 100%);
  color: #fff8e6;
  transform: translateY(-1px);
}
/* Marke: Logo + Name dunkel auf hellem Material */
body.jupi.wm_body .jupi_header .neu_marke {
  justify-self: center;
  gap: .55rem;
  min-width: 0;
}
body.jupi.wm_body .jupi_header .neu_marke img {
  width: 40px !important;
  height: 40px !important;
  filter: drop-shadow(0 2px 2px rgba(74, 53, 36, .35));
}
body.jupi.wm_body .jupi_header .neu_marke strong {
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--wm-tinte);
  text-shadow: 0 1px 0 #ffffff;
}
body.jupi.wm_body .jupi_header .jupi_werkzeuge { justify-self: end; gap: .55rem; }
/* Sprachwahl: Papier-Pille, damit sie auf Creme lesbar bleibt (die
   Plattform legt hier eine durchsichtige weiße Pille auf Grün). */
body.jupi.wm_body .jupi_header .jupi_sprachen_select,
html[data-theme="dark"] body.jupi.wm_body .jupi_header .jupi_sprachen_select {
  width: 9.5rem;
  max-width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid #c6ab84 !important;
  border-radius: .55rem !important;
  background: linear-gradient(180deg, #fffdf6, #f2e8d4) !important;
  color: #43301f !important;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff;
}

/* Dark-Mode-Pille (74x40 aus rahmen.css): auf der hellen Theke braucht sie
   eine sichtbare Fassung, sonst verschwindet das durchsichtige Weiß.
   Beide Themes bekommen eine EIGENE Regel - eine Grundregel plus
   [data-theme]-Regel mischt sich sonst in den background-Longhands. */
html[data-theme="dark"] body.jupi.wm_body .jupi_header #jupi_theme_toggle {
  background: rgba(0, 0, 0, .34) !important;
  border-color: rgba(179, 118, 63, .85) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6) !important;
}
html[data-theme="light"] body.jupi.wm_body .jupi_header #jupi_theme_toggle {
  background: linear-gradient(180deg, rgba(90, 60, 30, .5), rgba(58, 38, 18, .42)) !important;
  border-color: #a9835a !important;
  box-shadow: inset 0 1px 2px rgba(40, 26, 12, .45) !important;
}

/* ---------- 3. Die Kreidetafel (Anzeigen + Steuerung) ----------
   3.13.3 Typ 2: Anzeigen links, Bedienknöpfe rechts oben im Spielbereich.
   Werte als Kreidezeile auf Schiefer, Rahmen aus Eiche. */
body.jupi.wm_body .maus_panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  max-width: 58rem;
  margin: 0 auto .7rem;
  padding: .45rem .8rem .5rem;
  border: 6px solid var(--wm-eiche);
  border-radius: .55rem;
  background:
    radial-gradient(130% 130% at 18% 0%, rgba(255, 255, 255, .1) 0%, transparent 58%),
    repeating-linear-gradient(114deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, var(--wm-schiefer) 0%, #2b343c 58%, var(--wm-schiefer-2) 100%);
  box-shadow:
    0 12px 24px -16px rgba(30, 24, 18, .8),
    inset 0 0 0 2px var(--wm-eiche-tief),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  color: var(--wm-kreide);
}
body.jupi.wm_body .maus_stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 4.1rem;
  padding: .1rem .1rem .15rem;
}
body.jupi.wm_body .maus_stat label {
  font: 700 .62rem/1.3 var(--wm-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wm-kreide-soft);
}
body.jupi.wm_body .maus_stat span {
  font-size: 1.32rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--wm-kreide);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 7px rgba(244, 242, 230, .35);
}
body.jupi.wm_body .maus_controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body.jupi.wm_body .maus_controls label {
  font: 700 .7rem/1 var(--wm-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wm-kreide-soft);
}
/* Modus/Stufe als Papier-Etiketten (in BEIDEN Themes hell - die Plattform
   färbt Selects im Dunkelmodus orange). */
body.jupi.wm_body .maus_controls .jupi_select,
html[data-theme="dark"] body.jupi.wm_body .maus_controls .jupi_select {
  min-height: 40px;
  padding: .3rem .55rem;
  border-radius: .45rem;
  font-weight: 700;
  font-size: .86rem;
  color: #3f2d1d;
  background: linear-gradient(180deg, #fffdf6, #f1e6cf);
  border: 1px solid #c9ae86;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b89e78;
  cursor: pointer;
}
/* ❓ und 🔊 als runde Knöpfe im Tafelrahmen */
body.jupi.wm_body .maus_controls .jupi_btn,
body.jupi.wm_body .maus_controls .jupi_btn_alt,
html[data-theme="dark"] body.jupi.wm_body .maus_controls .jupi_btn_alt {
  min-height: 40px;
  padding: .35rem .7rem;
  border-radius: .45rem;
  font-weight: 800;
  font-size: .88rem;
  color: #43301f;
  background: linear-gradient(180deg, #fffdf6, #f0e5ce);
  border: 1px solid #c9ae86;
  box-shadow: 0 2px 0 #b89e78, inset 0 1px 0 #fff;
}
body.jupi.wm_body .maus_controls .jupi_btn:hover,
body.jupi.wm_body .maus_controls .jupi_btn_alt:hover {
  background: linear-gradient(180deg, #ffffff, #f8efdb);
  color: #2f2113;
  transform: translateY(-1px);
}
body.jupi.wm_body .maus_controls .jupi_btn:active,
body.jupi.wm_body .maus_controls .jupi_btn_alt:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #b89e78;
}

/* ---------- 4. Die Bühne: das Küchenfenster ----------
   Die Szene liegt wie hinter Glasscheiben: Eichenrahmen mit Glasglanz und
   eine Fensterbank darunter. Das Fenster bleibt in BEIDEN Themes hell -
   draußen ist es Nacht, drinnen brennt das Küchenlicht. */
body.jupi.wm_body .maus_stage {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
/* Aufgaben-Etikett: Küchenzettel, mit Kupfernagel an der Wand befestigt */
body.jupi.wm_body .maus_frage {
  position: relative;
  display: inline-block;
  max-width: min(46rem, 100%);
  margin: .15rem auto .85rem;
  padding: .45rem 1.1rem .5rem;
  border: 1px solid #cdb692;
  border-left: 5px solid var(--wm-kupfer);
  border-radius: .35rem;
  background: linear-gradient(180deg, #fffdf4, #f5ecd8);
  color: #42301f;
  font-size: 1.14rem;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: 0 6px 14px -12px rgba(40, 30, 18, .85), inset 0 1px 0 #fff;
}
body.jupi.wm_body .maus_frage::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f0c088, #b3763f 52%, #7a4d24 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
/* Der Fensterrahmen */
body.jupi.wm_body .maus_szene {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 13px;
  border: 1px solid var(--wm-eiche-dunkel);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .12) 60%),
    repeating-linear-gradient(91deg, rgba(120, 80, 40, .12) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #d3a76f 0%, #bb8c54 55%, #9c6e3c 100%);
  box-shadow:
    0 18px 32px -20px rgba(30, 22, 14, .85),
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(0, 0, 0, .35);
  overflow: visible;
}
/* Glasglanz über der Szene (nur Optik, Klicks gehen durch) */
body.jupi.wm_body .maus_szene::before {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: 2;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(124deg,
    rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 24%,
    rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, .12) 100%);
}
/* Fensterbank: steht links und rechts über den Rahmen hinaus */
body.jupi.wm_body .maus_szene::after {
  content: "";
  position: absolute;
  left: -15px;
  right: -15px;
  bottom: -17px;
  height: 17px;
  border: 1px solid var(--wm-eiche-dunkel);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #e4bd8a 0%, #c79a62 45%, #a97c48 100%);
  box-shadow: 0 9px 16px -9px rgba(30, 22, 14, .8), inset 0 2px 0 rgba(255, 255, 255, .35);
}
body.jupi.wm_body .maus_szene svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #7a5528;
  background: #f7efe2;
}

/* ---------- 5. Antworten: Kühlschrank-Magnete ----------
   Die Antworten kleben als emaillierte Magnete auf einem Stahlfeld
   (Kühlschranktür). Richtig = grüner Magnet, falsch = roter mit Rütteln. */
body.jupi.wm_body .maus_antworten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px;
  border: 2px solid #9aa5ad;
  border-radius: .6rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #e2e8ed 0%, #c9d3da 55%, #b4c0c8 100%);
  box-shadow: 0 12px 26px -18px rgba(28, 40, 50, .9), inset 0 1px 0 #fff;
}
body.jupi.wm_body .maus_antworten[hidden] { display: none; }
body.jupi.wm_body .maus_satz {
  position: relative;
  min-height: 54px;
  padding: .62rem .85rem .62rem 1.55rem;
  border: 2px solid #b9c2c9;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffef9 0%, #f7f1e3 100%);
  color: #3b2c1e;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 #b8a98f, 0 9px 16px -13px rgba(20, 30, 40, .95);
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
/* der kleine Magnet-Dom in der linken Gutter-Spalte */
body.jupi.wm_body .maus_satz::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, #bcc7cf 46%, #7d8a94 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .65);
}
/* Jeder Magnet hat eine andere Randfarbe - wie aus der Magnetschachtel.
   Bewusst KEIN Rot: Rot ist im Spiel die Farbe für "falsch". */
body.jupi.wm_body .maus_satz:nth-child(1) { border-color: #7fa88c; }
body.jupi.wm_body .maus_satz:nth-child(2) { border-color: #8fa9c4; }
body.jupi.wm_body .maus_satz:nth-child(3) { border-color: #c4a86a; }
body.jupi.wm_body .maus_satz:nth-child(4) { border-color: #9c8fb0; }
body.jupi.wm_body .maus_satz:hover:not(:disabled) {
  transform: translateY(-2px) rotate(-.35deg);
  background: linear-gradient(180deg, #ffffff, #fdf7ea);
  box-shadow: 0 5px 0 #b8a98f, 0 12px 20px -14px rgba(20, 30, 40, .95);
}
body.jupi.wm_body .maus_satz:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #b8a98f;
}
body.jupi.wm_body .maus_satz:focus-visible {
  outline: 3px solid var(--wm-kupfer);
  outline-offset: 2px;
}
body.jupi.wm_body .maus_satz:disabled { cursor: default; opacity: .6; }
body.jupi.wm_body .maus_satz_ok {
  border-color: #2f7a52;
  background: linear-gradient(180deg, #eaf8ee 0%, #cfe9d8 100%);
  color: #1d5235;
  opacity: 1;
  box-shadow: 0 3px 0 #2f7a52, 0 0 0 3px rgba(63, 139, 95, .28);
}
body.jupi.wm_body .maus_satz_err {
  border-color: var(--wm-rot);
  background: linear-gradient(180deg, #fcebe5 0%, #f3d4ca 100%);
  color: #8a2f1c;
  opacity: 1;
  animation: wm_ruetteln .32s;
}
@keyframes wm_ruetteln {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-6px); }
  70% { transform: translateX(6px); }
}
/* Richtig/falsch bleiben auch nach dem Sperren deutlich farbig - die
   Grundregel .maus_satz:disabled (opacity .6) würde sie sonst ausbleichen. */
body.jupi.wm_body .maus_satz_ok:disabled { opacity: 1; }
body.jupi.wm_body .maus_satz_err:disabled { opacity: .92; }

/* ---------- 6. Meldung + Aktionsknöpfe ---------- */
body.jupi.wm_body .maus_msg {
  display: block;
  max-width: 640px;
  min-height: 2.1rem;
  margin: .8rem auto 0;
  padding: .45rem .8rem;
  border-left: 4px solid var(--wm-kupfer);
  border-radius: .35rem;
  background: rgba(34, 42, 49, .93);
  color: #f2efe2;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 16px -14px rgba(0, 0, 0, .95);
}
/* leere Meldung: kein dunkler Balken auf der Fliesenwand */
body.jupi.wm_body .maus_msg:empty {
  background: none;
  border-left: 0;
  box-shadow: none;
}
body.jupi.wm_body .maus_msg_ok {
  background: rgba(31, 78, 55, .94);
  border-left-color: #6fbf92;
  color: #eafaee;
}
body.jupi.wm_body .maus_msg_err {
  background: rgba(84, 34, 25, .94);
  border-left-color: #e08d78;
  color: #fdeee9;
}
body.jupi.wm_body .maus_btns_row {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: .9rem 0 .75rem;
}
body.jupi.wm_body .maus_btns_row .jupi_btn,
html[data-theme="dark"] body.jupi.wm_body .maus_btns_row .jupi_btn_alt {
  min-height: 44px;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 800;
  color: #43301f;
  background: linear-gradient(180deg, #fffdf6, #f0e5ce);
  border: 1px solid #b99e78;
  box-shadow: 0 3px 0 #c2ab88, inset 0 1px 0 #fff;
  cursor: pointer;
}
/* "Weiter" ist der Hauptknopf: Küchengrün */
body.jupi.wm_body .maus_btns_row .jupi_btn:not(.jupi_btn_alt),
html[data-theme="dark"] body.jupi.wm_body .maus_btns_row .jupi_btn:not(.jupi_btn_alt) {
  color: #f4fbf6;
  background: linear-gradient(180deg, #4f8f6b, #3a7052);
  border-color: #2f5b43;
  box-shadow: 0 3px 0 #2a5139, inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.jupi.wm_body .maus_btns_row .jupi_btn:hover:not(:disabled) { transform: translateY(-1px); }
body.jupi.wm_body .maus_btns_row .jupi_btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #c2ab88;
}
body.jupi.wm_body .maus_btns_row .jupi_btn[hidden] { display: none; }

/* Klickbare Stellen im Setz-Modus */
body.jupi.wm_body .maus_spot { cursor: pointer; }
body.jupi.wm_body .maus_spot:hover ellipse,
body.jupi.wm_body .maus_spot:hover circle { stroke: var(--wm-kupfer); }
body.jupi.wm_body .maus_spot:focus-visible ellipse,
body.jupi.wm_body .maus_spot:focus-visible circle {
  stroke: var(--wm-kupfer);
  stroke-width: 4;
}
body.jupi.wm_body .maus_spot_err ellipse,
body.jupi.wm_body .maus_spot_err circle {
  stroke: var(--wm-rot);
  fill: rgba(180, 71, 47, .22);
}
body.jupi.wm_body .maus_spot_richtig ellipse,
body.jupi.wm_body .maus_spot_richtig circle { stroke: var(--wm-gruen-hell); }

/* Animation der auftauchenden Maus */
body.jupi.wm_body .maus_pop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: wm_pop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes wm_pop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- 7. Rundenende: Einkaufszettel ----------
   Liniertes Papier mit roter Randlinie, Sternen und den Sätzen als
   abhakbare Zeilen. */
body.jupi.wm_body .maus_done {
  position: relative;
  max-width: 46rem;
  margin: .5rem auto 0;
  padding: 1.3rem 1.2rem 1.2rem 2.7rem;
  border: 1px solid #d6c7a6;
  border-radius: .35rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, #e7dcc2 27px 28px),
    linear-gradient(180deg, #fffdf4 0%, #f7f0dd 100%);
  box-shadow: 0 18px 36px -26px rgba(30, 24, 16, .9), inset 0 1px 0 #fff;
  text-align: center;
  color: #3f2d1d;
}
body.jupi.wm_body .maus_done::before {
  content: "";
  position: absolute;
  left: 2.05rem;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #d99a8a;
  opacity: .8;
}
body.jupi.wm_body .maus_done h3 {
  margin: .1rem 0 .35rem;
  font-size: 1.4rem;
  color: #2f5b43;
}
body.jupi.wm_body .maus_done h4 {
  margin: .9rem 0 .3rem;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wm-tinte-soft);
}
body.jupi.wm_body .maus_done p { margin: .3rem 0 .7rem; font-size: .98rem; line-height: 1.5; }
body.jupi.wm_body .maus_sterne {
  margin: .2rem 0 .5rem;
  font-size: 2.1rem;
  letter-spacing: .18rem;
  color: #e0a63c;
  text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(120, 80, 20, .3);
}
body.jupi.wm_body .maus_chips {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: .4rem 0 .9rem;
  text-align: left;
}
body.jupi.wm_body .maus_chip {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .26rem 0;
  border-bottom: 1px dashed #cbbea1;
  border-radius: 0;
  background: none;
  color: #3b2c1e;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.4;
}
body.jupi.wm_body .maus_chip::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid #6f8f79;
  border-radius: 2px;
  background: #f4fbf5;
  transform: translateY(1px);
}
body.jupi.wm_body .maus_chip_err { color: #8a2f1c; }
body.jupi.wm_body .maus_chip_err::before { border-color: var(--wm-rot); background: #fbe6df; }

/* ---------- 8. Hilfe-Fenster: Rezeptkarte ----------
   Bleibt ein natives <dialog> (Merksätze + Lernsatz unverändert). */
body.jupi.wm_body dialog.maus_hilfe,
html[data-theme="dark"] body.jupi.wm_body dialog.maus_hilfe {
  position: relative;
  box-sizing: border-box;
  width: min(46rem, calc(100vw - 24px));
  max-height: 88dvh;
  overflow: auto;
  margin: auto;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid #b99e78;
  border-top: 7px solid var(--wm-schiefer);
  border-radius: .5rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, #e9e0c9 25px 26px),
    linear-gradient(180deg, #fffdf5 0%, #f6efdd 100%);
  color: #42301f;
  line-height: 1.55;
  box-shadow: 0 26px 60px -22px rgba(20, 15, 10, .75);
}
body.jupi.wm_body dialog.maus_hilfe::backdrop {
  background: rgba(12, 20, 26, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.jupi.wm_body .maus_hilfe .neu_schliessen {
  position: absolute;
  top: .55rem;
  right: .55rem;
  margin: 0;
}
body.jupi.wm_body .maus_hilfe .neu_schliessen button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #b99e78;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffdf6, #efe4cd);
  color: #5a4128;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #c2ab88;
}
body.jupi.wm_body .maus_hilfe .neu_schliessen button:hover { background: #fffdf6; color: #2f2113; }
body.jupi.wm_body .maus_hilfe h2 {
  margin: .1rem 2.6rem .7rem 0;
  padding-bottom: .4rem;
  border-bottom: 2px solid #dccdaa;
  font-size: 1.22rem;
  color: #2f2113;
}
body.jupi.wm_body .maus_hilfe h2 + p { margin-top: .2rem; }
body.jupi.wm_body .maus_hilfe p { margin: .42rem 0 .55rem; font-size: .95rem; }
body.jupi.wm_body .maus_hilfe ul { margin: .5rem 0 .7rem; padding-left: 1.25rem; }
body.jupi.wm_body .maus_hilfe li { margin: .3rem 0; font-size: .95rem; }
body.jupi.wm_body .maus_hilfe b { color: #2f5b43; }
body.jupi.wm_body .maus_hilfe i { color: #5c4326; }
body.jupi.wm_body .maus_lernsatz {
  margin: .9rem 0 .2rem;
  padding: .6rem .85rem;
  border-left: 4px solid var(--wm-gruen);
  border-radius: .35rem;
  background: #eef5e7;
  font-size: .93rem;
}
body.jupi.wm_body .maus_lernsatz strong { color: #27503a; }

/* Was per hidden-Attribut verschwindet, MUSS display schlagen
   (die eigene display-Regel gewinnt sonst - jupi-Klassiker). */
body.jupi.wm_body .maus_stage[hidden],
body.jupi.wm_body .maus_done[hidden],
body.jupi.wm_body .maus_antworten[hidden],
body.jupi.wm_body .maus_panel[hidden] { display: none !important; }

/* ---------- 9. Dark Mode: dieselbe Küche bei Nacht ----------
   Die Wand sinkt ins Nachtblau, oben brennt eine warme Lampe. Das Fenster
   bleibt HELL - drinnen ist Licht an, wie in einer echten Küche bei Nacht.
   Magnete und Zettel bleiben Papier (nur gedämpft). */
html[data-theme="dark"] body.jupi.wm_body {
  background-color: #0b1720;
  background-image:
    linear-gradient(rgba(7, 17, 24, .84), rgba(4, 10, 16, .92)),
    radial-gradient(900px 460px at 50% 0%, rgba(255, 194, 118, .16) 0%, transparent 64%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center top, center top;
  background-size: cover, cover, cover;
  background-attachment: fixed, fixed, fixed;
}
html[data-theme="dark"] body.jupi.wm_body .jupi_footer,
html[data-theme="dark"] body.jupi.wm_body .jupi_footer p { color: #9fadb6; }
html[data-theme="dark"] body.jupi.wm_body .jupi_footer a { color: var(--wm-eiche-hell); }
/* Konsole bei Nacht: Anthrazit mit Kupferkante */
html[data-theme="dark"] body.jupi.wm_body .jupi_header,
html[data-theme="dark"] body.jupi.wm_body .jupi_header.neu_header {
  border-bottom-color: var(--wm-kupfer);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18) 60%),
    linear-gradient(180deg, #2b3036 0%, #23282d 60%, #1a1e22 100%);
  color: #f3ead8;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .85), inset 0 -7px 0 -4px rgba(179, 118, 63, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
}
html[data-theme="dark"] body.jupi.wm_body .jupi_header .neu_marke strong {
  color: #f6eddb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] body.jupi.wm_body .jupi_header .neu_marke img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
html[data-theme="dark"] body.jupi.wm_body .jupi_header .jupi_nav_back {
  color: #f2c894;
  background: linear-gradient(180deg, #3a2a1c, #251a10);
  border: 1px solid var(--wm-kupfer);
  box-shadow: 0 3px 0 #170f08, 0 6px 12px -8px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] body.jupi.wm_body .jupi_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #4a3623, #2f2215);
  color: #ffddaa;
}
html[data-theme="dark"] body.jupi.wm_body .jupi_sprachen_select,
html[data-theme="dark"] body.jupi.wm_body .jupi_header .jupi_sprachen_select {
  border-color: rgba(179, 118, 63, .8) !important;
  background: linear-gradient(180deg, #2f353b, #232a30) !important;
  color: #f1e6d0 !important;
}
html[data-theme="dark"] body.jupi.wm_body .jupi_sprachen_select option {
  background: #232a30;
  color: #f1e6d0;
}
/* Tafel bei Nacht: dieselbe Kreidetafel, nur wärmer angeleuchtet */
html[data-theme="dark"] body.jupi.wm_body .maus_panel {
  border-color: #8a5f33;
  background:
    radial-gradient(130% 130% at 18% 0%, rgba(255, 205, 140, .12) 0%, transparent 60%),
    repeating-linear-gradient(114deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #303a43 0%, #262e35 58%, #1d242a 100%);
  box-shadow: 0 12px 24px -16px #000, inset 0 0 0 2px #7a5528;
}
/* Aufgaben-Etikett bleibt Papier, nur gedämpft */
html[data-theme="dark"] body.jupi.wm_body .maus_frage {
  border-color: #8f7a58;
  border-left-color: var(--wm-kupfer);
  background: linear-gradient(180deg, #f7eeda, #eadfc6);
  color: #3a2a1a;
  box-shadow: 0 6px 14px -12px #000, inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* Fenster: Rahmen dunkler, Glas bleibt hell (Licht in der Küche) */
html[data-theme="dark"] body.jupi.wm_body .maus_szene {
  border-color: #4b3520;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .3) 60%),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #6f4f2e 0%, #5a3f24 55%, #452f1a 100%);
  box-shadow: 0 18px 34px -18px #000, 0 0 34px -8px rgba(255, 196, 120, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
}
html[data-theme="dark"] body.jupi.wm_body .maus_szene::after {
  border-color: #4b3520;
  background: linear-gradient(180deg, #8a6537 0%, #6f4f2a 45%, #553c1e 100%);
  box-shadow: 0 9px 16px -9px #000, inset 0 2px 0 rgba(255, 255, 255, .18);
}
html[data-theme="dark"] body.jupi.wm_body .maus_szene svg {
  box-shadow: 0 0 0 2px #3a2716;
  filter: brightness(1.04) saturate(1.02);
}
/* Die Szene im Fenster bleibt HELL - auch bei Nacht. Die alten Nacht-Zimmer-
   Regeln aus jupi.css färben .maus_wand/.maus_boden/.maus_fenster im
   Dunkelmodus um; hier holen wir die Küchenfarben zurück (das Fenster ist
   ein echtes Fenster: drinnen brennt Licht). */
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_wand { fill: #faf1de; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_boden { fill: #dfae7f; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_leiste { fill: #cda97c; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_parkett { stroke: #b9835a; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_bild { fill: #c99b62; stroke: #6b4a2b; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_bild_huegel { fill: #d9b46a; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_bild_sonne { fill: #d9a163; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_fenster { fill: #e2f1f8; stroke: #6b4a2b; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_fenster_kreuz { stroke: #6b4a2b; }
html[data-theme="dark"] body.jupi.wm_body .maus_szene .maus_fenster_sonne { fill: #f2ece0; }
/* Kühlschranktür + Magnete bei Nacht (Papier bleibt Papier) */
html[data-theme="dark"] body.jupi.wm_body .maus_antworten {
  border-color: #4d5a63;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #3a464f 0%, #313b43 55%, #28323a 100%);
  box-shadow: 0 12px 26px -18px #000, inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-theme="dark"] body.jupi.wm_body .maus_satz {
  color: #33261a;
  background: linear-gradient(180deg, #f6efdd 0%, #e9dfc6 100%);
  border-color: #8f8a71;
  box-shadow: 0 3px 0 #6c6650, 0 9px 16px -13px #000;
}
html[data-theme="dark"] body.jupi.wm_body .maus_satz:hover:not(:disabled) {
  background: linear-gradient(180deg, #fdf7e7, #efe6cf);
  box-shadow: 0 5px 0 #6c6650, 0 12px 20px -14px #000;
}
html[data-theme="dark"] body.jupi.wm_body .maus_satz_ok {
  border-color: #6fd39c;
  background: linear-gradient(180deg, #e2f7e7 0%, #c2e9cf 100%);
  color: #17472e;
  box-shadow: 0 3px 0 #2f7a52, 0 0 0 3px rgba(111, 211, 156, .3);
}
html[data-theme="dark"] body.jupi.wm_body .maus_satz_err {
  border-color: #e08d78;
  background: linear-gradient(180deg, #f6ddd5 0%, #e9c3b8 100%);
  color: #7d2b19;
}
html[data-theme="dark"] body.jupi.wm_body .maus_msg { color: #e9e5d6; }
html[data-theme="dark"] body.jupi.wm_body .maus_msg_ok { color: #d8f4e2; }
html[data-theme="dark"] body.jupi.wm_body .maus_msg_err { color: #ffd9cd; }
html[data-theme="dark"] body.jupi.wm_body .maus_done {
  border-color: #6f6146;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, #554a35 27px 28px),
    linear-gradient(180deg, #efe6d0 0%, #e2d7bc 100%);
  color: #33261a;
  box-shadow: 0 18px 36px -26px #000, inset 0 1px 0 rgba(255, 255, 255, .5);
}
html[data-theme="dark"] body.jupi.wm_body .maus_done h3 { color: #27503a; }
html[data-theme="dark"] body.jupi.wm_body .maus_done h4 { color: #7a6549; }
html[data-theme="dark"] body.jupi.wm_body .maus_chip { color: #3a2c1e; border-bottom-color: #b6a888; }
html[data-theme="dark"] body.jupi.wm_body .maus_chip_err { color: #8a2f1c; }
html[data-theme="dark"] body.jupi.wm_body .maus_lernsatz { background: #e7eedd; }

/* ---------- 10. Handy ---------- */
@media (max-width: 700px) {
  body.jupi.wm_body .jupi_main { padding: .5rem .6rem .8rem !important; }
  body.jupi.wm_body .jupi_header,
  body.jupi.wm_body .jupi_header.neu_header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: .3rem .5rem !important;
    padding: .35rem .6rem .4rem !important;
  }
  /* Marke in der ersten Zeile, darunter zurück + Werkzeuge: sonst quetscht
     die breite Sprachwahl die Zurück-Pille zu einem Kreis zusammen. */
  body.jupi.wm_body .jupi_header .neu_marke {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
  }
  body.jupi.wm_body .jupi_header .neu_marke strong { font-size: 1.08rem; }
  body.jupi.wm_body .jupi_header .neu_marke img { width: 34px !important; height: 34px !important; }
  body.jupi.wm_body .jupi_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
    white-space: nowrap;
    padding: .35rem .65rem;
    font-size: .8rem;
  }
  body.jupi.wm_body .jupi_header .jupi_werkzeuge {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    gap: .35rem;
  }
  body.jupi.wm_body .jupi_header .jupi_sprachen_select,
  html[data-theme="dark"] body.jupi.wm_body .jupi_header .jupi_sprachen_select {
    width: 7.6rem !important;
    font-size: .8rem;
    padding: .25rem .4rem;
  }
  body.jupi.wm_body .maus_panel { padding: .4rem .55rem .45rem; border-width: 5px; gap: .3rem .6rem; }
  /* Anzeigen einzeilig (Beschriftung neben dem Wert) - spart am Handy
     eine ganze Zeile Höhe, damit die Antworten im Blick bleiben. */
  body.jupi.wm_body .maus_stat {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: baseline;
    gap: .3rem;
    min-width: 0;
    padding: 0;
  }
  body.jupi.wm_body .maus_stat label { font-size: .58rem; letter-spacing: .1em; }
  body.jupi.wm_body .maus_stat span { font-size: 1.05rem; }
  body.jupi.wm_body .maus_frage { font-size: 1.02rem; padding: .4rem .8rem .44rem; margin-bottom: .55rem; }
  /* Modus über die volle Breite (sonst steht nur "Wo i" im Feld),
     darunter Stufe, ❓ und 🔊. */
  body.jupi.wm_body .maus_controls {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .35rem;
  }
  body.jupi.wm_body .maus_controls label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  body.jupi.wm_body .maus_controls .jupi_select:first-of-type { grid-column: 1 / -1; }
  body.jupi.wm_body .maus_controls .jupi_select { width: 100%; min-width: 0; font-size: .82rem; }
  body.jupi.wm_body .maus_controls .jupi_btn { font-size: .82rem; padding: .35rem .55rem; }
  body.jupi.wm_body .maus_frage { font-size: 1.02rem; padding: .4rem .8rem .44rem; margin-bottom: .55rem; }
  /* Am Handy EINE Spalte: die Sätze sind zu lang für zwei. */
  body.jupi.wm_body .maus_antworten { grid-template-columns: 1fr; padding: 10px; gap: .45rem; }
  body.jupi.wm_body .maus_satz { min-height: 48px; font-size: .93rem; padding: .5rem .7rem .5rem 1.45rem; }
  body.jupi.wm_body .maus_btns_row { margin: .65rem 0 .55rem; }
  /* Am Handy wandert die Meldung VOR die Antworten: sonst steht die
     Rückmeldung unter vier Sätzen und damit ausserhalb des Bildes. */
  body.jupi.wm_body .maus_stage {
    display: flex;
    flex-direction: column;
  }
  body.jupi.wm_body .maus_frage { order: 0; align-self: center; }
  /* width:100% gegen die auto-Ränder: in einer Flex-Spalte schrumpfen
     Grid-Kinder sonst auf ihre Inhaltsbreite. */
  body.jupi.wm_body .maus_szene { order: 1; width: 100%; }
  body.jupi.wm_body .maus_btns_row { order: 2; }
  body.jupi.wm_body .maus_msg { order: 3; width: 100%; }
  body.jupi.wm_body .maus_antworten { order: 4; width: 100%; }
  body.jupi.wm_body .maus_done { padding: 1.1rem .9rem 1rem 2.2rem; }
  body.jupi.wm_body .maus_done::before { left: 1.6rem; }
  body.jupi.wm_body dialog.maus_hilfe { padding: 1rem .9rem 1.1rem; }
}
@media (max-width: 400px) {
  body.jupi.wm_body .jupi_header .neu_marke strong { font-size: .98rem; }
  body.jupi.wm_body .maus_frage { font-size: .96rem; }
}

/* ---------- 11. Flache Fenster (Schul-Laptops) ----------
   Das Fenster wird kleiner, damit Aufgabe, Antworten und Meldung ohne
   Scrollen im Blick sind (Muster Zelllabor). */
@media (max-height: 950px) {
  body.jupi.wm_body .maus_szene { max-width: 500px; margin-bottom: 20px; }
  body.jupi.wm_body .maus_antworten,
  body.jupi.wm_body .maus_msg { max-width: 520px; }
}
@media (max-height: 830px) {
  body.jupi.wm_body .maus_frage { margin-bottom: .6rem; padding: .35rem .9rem .4rem; font-size: 1.05rem; }
  body.jupi.wm_body .maus_szene { max-width: 430px; margin-bottom: 20px; }
  body.jupi.wm_body .maus_antworten,
  body.jupi.wm_body .maus_msg { max-width: 520px; }
  body.jupi.wm_body .maus_btns_row { margin: .6rem 0 .5rem; }
  body.jupi.wm_body .maus_satz { min-height: 48px; padding-top: .45rem; padding-bottom: .45rem; }
  body.jupi.wm_body .maus_msg { margin-top: .6rem; }
}
@media (max-height: 700px) {
  body.jupi.wm_body .maus_szene { max-width: 340px; }
  body.jupi.wm_body .maus_antworten,
  body.jupi.wm_body .maus_msg { max-width: 460px; }
}
/* Schmale Fenster (Handy hochkant): das Fenster bleibt klein, damit die
   Antworten und die Meldung ohne Scrollen erreichbar sind. Steht NACH den
   Höhen-Regeln, sonst überschreiben die 430 px diese Grenze. */
@media (max-width: 480px) {
  body.jupi.wm_body .maus_szene { max-width: 330px; }
}

/* ---------- 12. Bedienziele >= 40 x 40 px (Regel 3.13.5) ---------- */
body.jupi.wm_body button,
body.jupi.wm_body select { min-height: 40px; min-width: 40px; box-sizing: border-box; }
body.jupi.wm_body button { max-width: 100%; overflow-wrap: anywhere; }
body.jupi.wm_body .maus_satz { min-height: 50px; }
body.jupi.wm_body .maus_satz:focus-visible,
body.jupi.wm_body .maus_btns_row .jupi_btn:focus-visible,
body.jupi.wm_body .maus_controls .jupi_btn:focus-visible,
body.jupi.wm_body .maus_controls .jupi_select:focus-visible,
body.jupi.wm_body .jupi_nav_back:focus-visible,
body.jupi.wm_body .maus_hilfe .neu_schliessen button:focus-visible,
body.jupi.wm_body .jupi_sprachen_select:focus-visible {
  outline: 3px solid var(--wm-kupfer);
  outline-offset: 2px;
}

/* ---------- 13. Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  body.jupi.wm_body .maus_pop,
  body.jupi.wm_body .maus_satz_err { animation: none; }
  body.jupi.wm_body .maus_satz,
  body.jupi.wm_body .jupi_nav_back { transition: none; }
}