/* ============================================================
   Wort-Wahrsager - styles.css
   ------------------------------------------------------------
   WELT: "WORT-FABRIK" - der Maschinensaal der Zaehlmaschine.

   Das Spiel ist KEINE Wahrsager-Bude: die Kinder fuettern eine
   winzige, echte Sprach-KI mit Satzstreifen, die Maschine zaehlt
   Wortpaare in ihren Zaehlwerken und schiebt vorn einen
   Vorhersage-Streifen aus dem Ausgabeschlitz. Darum: Blech und
   Messing, Gummivalzen, Papierstreifen, Skalenzeiger - kein
   Vorhang, keine Kristallkugel (AGENTS.md 3.13.6b).

   Aufbau der Datei:
     1. Grundflaeche + Kulisse (Tagesschicht / Nachtschicht)
     2. Seitenrahmen (Kopfzeile oben, Fusszeile unten - 3.13.2a)
     3. JUPI-Leiste als Messing-Konsole (3.13.2)
     4. Buehne = Gehaeuse der Maschine (3.13.6 Baustein 3)
     5. Steuerleiste, Knoepfe, Zaehlwerk, Futter, Ausgabeschlitz
     6. Runde/Aufgabe auf einem Futter-Etikett
     7. Karten, Dialoge, Hilfe (3.13.6 Baustein 4)
     8. Handy/Tablet, Dark Mode = Nachtschicht

   Alle Regeln haengen an body.jupi.wwa_body - die Paket-Kopie
   jupi.css bleibt unangetastet und wird nur ueberschrieben.
   ============================================================ */

body.jupi.wwa_body {
  /* Materialfarben (hell: Tagesschicht im Maschinensaal) */
  --wwa-ink: #2e2618;
  --wwa-ink-2: #5c4f38;
  --wwa-papier: #f6efdb;
  --wwa-papier-2: #ece2c8;
  --wwa-papier-rand: #d5c49e;
  --wwa-messing: #c9a35c;
  --wwa-messing-hell: #ecd196;
  --wwa-messing-dunkel: #8a6425;
  --wwa-blech: #cfc6b2;
  --wwa-blech-2: #b3a993;
  --wwa-bay: #332d24;
  --wwa-bay-2: #262119;
  --wwa-bay-rand: #6a6050;
  --wwa-hell: #f8f1de;
  --wwa-hell-2: #e6dcc4;
  --wwa-lampe: #ffcf7a;
  --wwa-gut: #3f6b33;
  --wwa-gut-hell: #d6e7c6;
  --wwa-schlecht: #98331f;
  --wwa-schlecht-hell: #f3cfc4;

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--wwa-ink);
  /* Kulisse: EINE gestreckte Szene (3.13.7 Weg A) + Lichtschleier davor */
  background-color: #6f6555;
  background-image:
    linear-gradient(180deg, rgba(255, 206, 138, .20) 0%, rgba(255, 206, 138, .04) 42%, rgba(40, 28, 15, .28) 100%),
    url("kulisse.svg");
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-attachment: fixed, fixed;
}

html[data-theme="dark"] body.jupi.wwa_body {
  --wwa-ink: #2a2318;
  --wwa-ink-2: #4a3f2c;
  --wwa-papier: #e8ddc3;
  --wwa-papier-2: #dcd0b2;
  --wwa-papier-rand: #c3b391;
  --wwa-messing: #b98f45;
  --wwa-messing-hell: #d7b173;
  --wwa-messing-dunkel: #7d5a20;
  --wwa-blech: #4a4438;
  --wwa-blech-2: #35302a;
  --wwa-bay: #241f1a;
  --wwa-bay-2: #1a1713;
  --wwa-bay-rand: #574f42;
  --wwa-hell: #f6ecd6;
  --wwa-hell-2: #d8ccb2;
  --wwa-lampe: #ffc670;
  --wwa-gut: #3c5f31;
  --wwa-gut-hell: #2c3d24;
  --wwa-schlecht: #8a2d1b;
  --wwa-schlecht-hell: #3c241d;

  background-color: #17130f;
  background-image:
    linear-gradient(180deg, rgba(10, 7, 4, .58) 0%, rgba(10, 7, 4, .70) 55%, rgba(6, 4, 3, .82) 100%),
    url("kulisse.svg");
}

/* ============================================================
   2. Seitenrahmen: Kopfzeile ganz oben, Fusszeile ganz unten
   ============================================================ */
body.jupi.wwa_body .jupi_container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100dvh;
  background: transparent;
  padding: 0;
}
body.jupi.wwa_body .jupi_main {
  flex: 1 0 auto;
  background: transparent;
  padding: .7rem .9rem .45rem;
  max-width: 74rem;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}
@media (min-width: 48rem) {
  body.jupi.wwa_body .jupi_main { padding: .9rem 1.4rem 1rem; }
}
/* Der Fuss klebt unten und traegt das Blech der Maschine */
body.jupi.wwa_body .jupi_container > .jupi_footer {
  margin: auto auto 0;
  background: linear-gradient(180deg, var(--wwa-blech) 0%, var(--wwa-blech-2) 100%);
  border-top: 2px solid var(--wwa-messing-dunkel);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 18px rgba(20, 14, 8, .28), 0 1px 0 rgba(255, 255, 255, .22) inset;
  max-width: 74rem;
  width: 100%;
  padding: .4rem 1rem .45rem;
  box-sizing: border-box;
}
body.jupi.wwa_body .jupi_footer_text {
  font-size: .78rem;
  color: var(--wwa-ink-2);
  text-align: center;
  margin: 0;
}
body.jupi.wwa_body .jupi_footer_text a { color: #6b4c14; font-weight: 700; }
body.jupi.wwa_body .jupi_footer_text a:hover { text-decoration: underline; }
body.jupi.wwa_body .jupi_footer_text p { margin: .1rem 0; }
html[data-theme="dark"] body.jupi.wwa_body .jupi_container > .jupi_footer {
  background: linear-gradient(180deg, #3a342b 0%, #2a251e 100%);
  border-top-color: #8a6a34;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 224, 168, .12) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .jupi_footer_text { color: var(--wwa-hell-2); }
html[data-theme="dark"] body.jupi.wwa_body .jupi_footer_text a { color: var(--wwa-messing-hell); }

/* ============================================================
   3. JUPI-Leiste = Messing-Konsole der Maschine (drei Zonen bleiben)
   ============================================================ */
body.jupi.wwa_body .wwa_header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: .5rem 1rem;
  border-bottom: 3px solid var(--wwa-messing-dunkel);
  border-radius: 0 0 14px 14px;
  color: var(--wwa-ink);
  /* Messingblech mit Sicken und zwei Nietreihen */
  background-color: #c2a05e;
  background-image:
    linear-gradient(180deg, #ddbd80 0%, #c8a664 46%, #ad8848 78%, #97742f 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 2px, rgba(90, 66, 24, .10) 2px 4px);
  box-shadow:
    0 6px 20px rgba(24, 17, 8, .35),
    0 1px 0 rgba(255, 244, 214, .55) inset,
    0 -1px 0 rgba(70, 50, 16, .35) inset;
}
body.jupi.wwa_body .wwa_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  pointer-events: none;
  background-image: radial-gradient(circle at 4px 3px, rgba(58, 42, 14, .5) 0 1.5px, transparent 2px);
  background-size: 44px 6px;
  background-repeat: repeat-x;
}
body.jupi.wwa_body .wwa_header .jupi_nav_back {
  justify-self: start;
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .95rem;
  border-radius: 999px;
  border: 1px solid #4b3a1c;
  background: linear-gradient(180deg, #4e3f22 0%, #352a16 100%);
  color: #f6e6c4;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(30, 20, 8, .35), 0 1px 0 rgba(255, 233, 186, .22) inset;
}
body.jupi.wwa_body .wwa_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #5c4b28 0%, #40321a 100%);
  transform: translateY(-1px);
}
body.jupi.wwa_body .wwa_brand {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .55rem;
}
body.jupi.wwa_body .wwa_brand img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #f7efd8;
  border: 2px solid var(--wwa-messing-dunkel);
  box-shadow: 0 1px 3px rgba(40, 28, 10, .4);
}
body.jupi.wwa_body .wwa_brand h1 {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
  color: #33260f;
  letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(255, 240, 205, .55);
}
body.jupi.wwa_body .wwa_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Sprachwahl auf Messing: dunkle Platte mit heller Schrift */
body.jupi.wwa_body .jupi_sprachen_select {
  min-height: 40px;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid #4b3a1c;
  background: rgba(40, 31, 17, .88);
  color: #f6e8c8;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 233, 186, .18) inset;
}
body.jupi.wwa_body .jupi_sprachen_select:hover { background: rgba(56, 43, 22, .95); }
body.jupi.wwa_body .jupi_sprachen_select option { color: #212121; background: #fff; }
body.jupi.wwa_body .jupi_sprachen_icon { font-size: 1rem; }
body.jupi.wwa_body .jupi_theme_switch {
  background: rgba(38, 29, 15, .85);
  border: 1px solid #4b3a1c;
  box-shadow: 0 1px 4px rgba(30, 20, 8, .4);
}
body.jupi.wwa_body .jupi_theme_switch:hover { background: rgba(54, 41, 21, .92); }
body.jupi.wwa_body .jupi_theme_switch .jts_thumb {
  background: radial-gradient(circle at 35% 30%, #ffeec4, #d6ac5f 70%);
  box-shadow: 0 1px 3px rgba(40, 28, 10, .5);
}

/* ============================================================
   4. Buehne = Gehaeuse der Zaehlmaschine
   ============================================================ */
body.jupi.wwa_body .wwa_buehne {
  position: relative;
  margin: 0 auto;
  max-width: 72rem;
  padding: .85rem .9rem .8rem;
  border-radius: 18px;
  border: 2px solid #8b7f68;
  /* Gebuerstetes Blech mit vier Eck-Schrauben */
  background-color: var(--wwa-blech);
  background-image:
    radial-gradient(circle at 14px 14px, #f0e7d2 0 3px, #a99c82 3px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #f0e7d2 0 3px, #a99c82 3px 4.5px, transparent 5px),
    radial-gradient(circle at 14px calc(100% - 14px), #f0e7d2 0 3px, #a99c82 3px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #f0e7d2 0 3px, #a99c82 3px 4.5px, transparent 5px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 2px, rgba(90, 80, 60, .07) 2px 4px),
    linear-gradient(176deg, #dbd3bf 0%, #c6bda7 45%, #b0a68f 100%);
  box-shadow:
    0 18px 40px rgba(18, 13, 7, .40),
    0 2px 0 rgba(255, 250, 235, .55) inset,
    0 -3px 0 rgba(88, 76, 56, .28) inset;
}
/* Schweissnaht-Kante: die Buehne ist ein Gehaeuse, kein Papierkasten */
body.jupi.wwa_body .wwa_buehne::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 13px;
  border: 1px dashed rgba(88, 74, 48, .35);
  pointer-events: none;
}
/* Firmenschild der Maschine */
body.jupi.wwa_body .wwa_marke {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: fit-content;
  max-width: 90%;
  margin: 0 auto .4rem;
  padding: .18rem 1.5rem;
  border-radius: 3px;
  border: 1px solid var(--wwa-messing-dunkel);
  background: linear-gradient(180deg, var(--wwa-messing-hell) 0%, var(--wwa-messing) 55%, #a9803c 100%);
  color: #3a2b10;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(40, 28, 10, .35), 0 1px 0 rgba(255, 246, 220, .6) inset;
}
body.jupi.wwa_body .wwa_marke::before,
body.jupi.wwa_body .wwa_marke::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3d4, #8a6a2c 75%);
  box-shadow: 0 0 0 1px rgba(70, 52, 20, .55);
}

/* ============================================================
   5a. Steuerleiste auf dem Gehaeuse
   ============================================================ */
body.jupi.wwa_body .wwa_leiste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .6rem;
  border-radius: 11px;
  border: 1px solid #7d7259;
  background: linear-gradient(180deg, #494134 0%, #352f26 100%);
  box-shadow: 0 2px 6px rgba(30, 22, 10, .35), 0 1px 0 rgba(255, 238, 200, .18) inset;
  margin-bottom: .6rem;
}
body.jupi.wwa_body .wwa_leiste_gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
body.jupi.wwa_body .wwa_leiste_label {
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wwa-hell-2);
}
/* Stufenwahl = Messing-Drucktasten */
body.jupi.wwa_body .wwa_stufe {
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  padding: .3rem .8rem;
  min-height: 40px;
  min-width: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid #6c6049;
  background: linear-gradient(180deg, #6a6150 0%, #4a4336 100%);
  color: #e6d9b9;
  cursor: pointer;
  box-shadow: 0 2px 0 #241f18, 0 1px 0 rgba(255, 240, 200, .2) inset;
}
body.jupi.wwa_body .wwa_stufe:hover { background: linear-gradient(180deg, #786d59 0%, #554c3d 100%); }
body.jupi.wwa_body .wwa_stufe.is_active {
  border-color: #7a5a1c;
  background: linear-gradient(180deg, #f3d493 0%, #d5a851 55%, #b98732 100%);
  color: #33260d;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(255, 197, 108, .55), 0 2px 0 #7a5a1c, 0 1px 0 rgba(255, 250, 232, .7) inset;
}
/* Zaehlwerk-Fenster: Punkte und Aufgabe wie auf einem mechanischen Zaehler */
body.jupi.wwa_body .wwa_stand {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .2rem .7rem;
  border-radius: 6px;
  border: 1px solid #6d5a34;
  background: linear-gradient(180deg, #1b1712 0%, #2a241b 100%);
  color: var(--wwa-lampe);
  font-family: "Consolas", "Courier New", monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(255, 190, 100, .55);
  box-shadow: 0 0 0 1px #100d09 inset, 0 2px 6px rgba(0, 0, 0, .35) inset;
}
/* Werkzeug-Knoepfe = runde Messing-Drehknöpfe */
body.jupi.wwa_body .wwa_icon_btn {
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  min-width: 40px;
  min-height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .2rem .5rem;
  border-radius: 50%;
  border: 1px solid #6b5a34;
  background: radial-gradient(circle at 34% 28%, #f2d69c 0%, #cda75c 55%, #9c7733 100%);
  color: #3a2b10;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(20, 14, 6, .45), 0 1px 0 rgba(255, 248, 226, .6) inset;
}
body.jupi.wwa_body .wwa_icon_btn:hover { filter: brightness(1.07); }
body.jupi.wwa_body .wwa_icon_btn[aria-pressed="true"] {
  background: radial-gradient(circle at 34% 28%, #ffe9b4 0%, #e8bd64 55%, #b8902f 100%);
  box-shadow: 0 0 12px rgba(255, 200, 110, .65), 0 1px 0 rgba(255, 252, 240, .7) inset;
}

/* ============================================================
   5b. Werkstatt: zwei eingelassene Kammern im Gehaeuse
   ============================================================ */
body.jupi.wwa_body .wwa_werkstatt {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(290px, 440px);
  gap: .85rem;
  align-items: start;
}
body.jupi.wwa_body .wwa_spalte_links,
body.jupi.wwa_body .wwa_spalte_rechts {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}
body.jupi.wwa_body .wwa_panel {
  position: relative;
  border-radius: 11px;
  padding: .5rem .65rem .6rem;
  border: 1px solid var(--wwa-bay-rand);
  background: linear-gradient(180deg, var(--wwa-bay) 0%, var(--wwa-bay-2) 100%);
  color: var(--wwa-hell);
  box-shadow:
    0 3px 0 rgba(255, 250, 235, .35),
    0 8px 18px rgba(24, 18, 10, .35),
    0 2px 8px rgba(0, 0, 0, .45) inset;
}
body.jupi.wwa_body .wwa_panel_auftrag {
  border-color: var(--wwa-messing-dunkel);
  border-top-width: 3px;
  background: linear-gradient(180deg, #332c22 0%, #221d17 100%);
}
body.jupi.wwa_body .wwa_panel_titel {
  margin: 0 0 .35rem;
  padding: 0 0 .25rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wwa-messing-hell);
  border-bottom: 1px solid rgba(201, 163, 92, .35);
}
body.jupi.wwa_body .wwa_panel_zusatz {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--wwa-hell-2);
}
body.jupi.wwa_body .wwa_mini_btn {
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  min-height: 40px;
  padding: .2rem .6rem;
  border-radius: 6px;
  border: 1px solid #6a5a34;
  background: linear-gradient(180deg, #5d5240 0%, #423a2d 100%);
  color: #ecdcb8;
  cursor: pointer;
}
body.jupi.wwa_body .wwa_mini_btn:hover { background: linear-gradient(180deg, #6b5e49 0%, #4b4234 100%); }
body.jupi.wwa_body .wwa_leer_text { color: var(--wwa-hell-2); font-size: .88rem; margin: .3rem 0; }
body.jupi.wwa_body .wwa_quellen_hinweis { font-size: .84rem; color: var(--wwa-hell-2); margin: 0 0 .45rem; }
body.jupi.wwa_body .wwa_quellen_hinweis b { color: var(--wwa-hell); }

/* Papierstreifen-Register: die Futter-Rutsche */
body.jupi.wwa_body .wwa_pool {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-height: min(21rem, 21vh);
  overflow-y: auto;
  padding: .3rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .2) 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5) inset;
}
/* Ein Satz = ein Papierstreifen mit Lochrand */
body.jupi.wwa_body .wwa_satz {
  font: inherit;
  width: 100%;
  text-align: left;
  font-size: .87rem;
  line-height: 1.3;
  padding: .42rem .55rem .42rem .95rem;
  border-radius: 3px;
  border: 1px solid var(--wwa-papier-rand);
  border-left: 4px solid #c8b58c;
  background-color: var(--wwa-papier);
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(120, 96, 52, .18) 4px 6px);
  background-size: 7px 100%;
  background-repeat: no-repeat;
  color: var(--wwa-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  box-shadow: 0 1px 2px rgba(20, 14, 6, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
body.jupi.wwa_body .wwa_satz:hover:not(:disabled) {
  transform: translateX(2px);
  border-color: var(--wwa-messing-dunkel);
  box-shadow: 0 2px 6px rgba(20, 14, 6, .45);
}
body.jupi.wwa_body .wwa_satz .wwa_satz_marke { flex: 0 0 auto; font-size: .8rem; opacity: .6; }
body.jupi.wwa_body .wwa_satz .wwa_quelle_badge {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: .74rem;
  line-height: 1;
  padding: .18rem .32rem;
  border-radius: 3px;
  background: #e6dabb;
  border: 1px solid #cbb98d;
  cursor: inherit;
}
body.jupi.wwa_body .wwa_satz.is_gefuettert {
  border-color: var(--wwa-messing-dunkel);
  border-left-color: var(--wwa-messing);
  background-color: #fdf3d8;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(201, 163, 92, .55), 0 2px 6px rgba(20, 14, 6, .4);
}
body.jupi.wwa_body .wwa_satz.is_gefuettert .wwa_satz_marke { opacity: 1; }
body.jupi.wwa_body .wwa_satz.is_gefuettert .wwa_quelle_badge { background: #e0cb9c; border-color: #b89a5e; }
body.jupi.wwa_body .wwa_satz:disabled { cursor: default; opacity: .78; }

/* Der Magen: gestapelte Streifen im Trichter */
body.jupi.wwa_body .wwa_topf {
  /* Lade: die gefuetterten Streifen liegen NEBENEINANDER (spart Bauhoehe) */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .3rem;
  max-height: min(17rem, 24vh);
  overflow-y: auto;
  align-content: flex-start;
}
body.jupi.wwa_body .wwa_topf_zeile_text {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--wwa-ink);
  background: var(--wwa-papier-2);
  border: 1px solid var(--wwa-papier-rand);
  border-left: 3px solid #b9a678;
  border-radius: 2px;
  padding: .28rem .5rem;
  flex: 0 1 auto;
  max-width: 100%;
}
body.jupi.wwa_body .wwa_topf_zeile_text.is_eigen { border-style: dashed; border-color: var(--wwa-messing-dunkel); background: #f8efd8; }
body.jupi.wwa_body .wwa_eigen_marke {
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b4c14;
  background: #e8d6ab;
  border: 1px solid #c8ad76;
  border-radius: 3px;
  padding: .1rem .32rem;
}
body.jupi.wwa_body .wwa_topf_text { flex: 1; min-width: 0; }
body.jupi.wwa_body .wwa_topf_x {
  font: inherit;
  font-size: .9rem;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid #a68c58;
  background: #efe2c2;
  color: #6b4c14;
  cursor: pointer;
}
body.jupi.wwa_body .wwa_topf_x:hover { background: var(--wwa-schlecht); border-color: #6e2416; color: #fff; }

/* Eigene Saetze: Einwurf-Schlitz mit Etikettenfeld */
body.jupi.wwa_body .wwa_eigen_zeile { display: flex; gap: .4rem; margin-top: .5rem; }
body.jupi.wwa_body .wwa_eigen_input {
  font: inherit;
  font-size: .89rem;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: .4rem .55rem;
  border-radius: 4px;
  border: 2px solid #6b5a34;
  background: var(--wwa-papier);
  color: var(--wwa-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4) inset;
}
body.jupi.wwa_body .wwa_eigen_input::placeholder { color: #8b7a58; }
body.jupi.wwa_body .wwa_eigen_input:focus { outline: 2px solid var(--wwa-messing-hell); border-color: var(--wwa-messing-dunkel); }
body.jupi.wwa_body .wwa_eigen_input:disabled { opacity: .5; }
body.jupi.wwa_body .wwa_eigen_hinweis { font-size: .79rem; line-height: 1.4; color: var(--wwa-hell-2); margin: .3rem 0 0; }
body.jupi.wwa_body .wwa_herkunft { display: block; font-size: .76rem; color: var(--wwa-hell-2); margin-top: .25rem; }

/* Mischung der Quellen: eine Skala mit Segmenten */
body.jupi.wwa_body .wwa_mischung {
  margin-top: .45rem;
  font-size: .8rem;
  color: var(--wwa-hell-2);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .7rem;
  align-items: center;
}
body.jupi.wwa_body .wwa_mischung b { color: var(--wwa-messing-hell); }
body.jupi.wwa_body .wwa_q_balken {
  display: flex;
  width: 100%;
  height: .8rem;
  border-radius: 2px;
  overflow: hidden;
  background: #14110d;
  border: 1px solid #5f5540;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6) inset;
}
body.jupi.wwa_body .wwa_q_balken span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  line-height: 1;
  color: #201a12;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
}
body.jupi.wwa_body .wwa_q_legend { display: flex; flex-wrap: wrap; gap: .2rem .7rem; width: 100%; font-size: .78rem; color: var(--wwa-hell-2); }
body.jupi.wwa_body .wwa_q_punkt { font-size: .88rem; }
body.jupi.wwa_body .wwa_misch_warn { color: #ff9a6b; font-weight: 800; }
body.jupi.wwa_body .wwa_q_farbe_maerchen { background: #c9a35c; }
body.jupi.wwa_body .wwa_q_farbe_nachricht { background: #7d9fb0; }
body.jupi.wwa_body .wwa_q_farbe_werbung { background: #c97f4e; }
body.jupi.wwa_body .wwa_q_farbe_schlagzeile { background: #918876; }
body.jupi.wwa_body .wwa_topf_zeile { margin-top: .45rem; display: flex; gap: .4rem; flex-wrap: wrap; }

/* ============================================================
   5c. Knoepfe der Maschine (Tasten mit Messingrand)
   ============================================================ */
body.jupi.wwa_body .wwa_btn {
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  min-height: 40px;
  padding: .5rem .95rem;
  border-radius: 8px;
  border: 1px solid #6b5a34;
  background: linear-gradient(180deg, #6a5f4a 0%, #4a4133 100%);
  color: #f2e6c8;
  cursor: pointer;
  box-shadow: 0 2px 0 #241f18, 0 1px 0 rgba(255, 244, 214, .22) inset;
}
body.jupi.wwa_body .wwa_btn:hover:not(:disabled) { filter: brightness(1.08); }
body.jupi.wwa_body .wwa_btn:disabled { opacity: .45; cursor: default; filter: none; }
/* Haupt-Taste: Messing, wie der Starthebel der Maschine */
body.jupi.wwa_body .wwa_btn_gruen {
  border-color: #7a5a1c;
  background: linear-gradient(180deg, #f4d693 0%, #d6a951 55%, #b98732 100%);
  color: #33260d;
  box-shadow: 0 2px 0 #7a5a1c, 0 1px 0 rgba(255, 252, 238, .7) inset;
}
/* Kupfer-Taste (Fuettern, Unsinn) */
body.jupi.wwa_body .wwa_btn_violett {
  border-color: #6e3618;
  background: linear-gradient(180deg, #c9793f 0%, #a95b2c 55%, #8d451f 100%);
  color: #fdeed9;
  box-shadow: 0 2px 0 #5e2c13, 0 1px 0 rgba(255, 232, 200, .35) inset;
}
/* Stahl-Taste (Zurueck, Satz bauen) */
body.jupi.wwa_body .wwa_btn_blau {
  border-color: #38525f;
  background: linear-gradient(180deg, #7d9fae 0%, #5a7c8b 55%, #44626f 100%);
  color: #f2f8fb;
  box-shadow: 0 2px 0 #2c414b, 0 1px 0 rgba(232, 246, 252, .35) inset;
}
/* Neutrale Taste */
body.jupi.wwa_body .wwa_btn_grau {
  border-color: #57503f;
  background: linear-gradient(180deg, #5f5645 0%, #413a2d 100%);
  color: #e8dbbd;
  font-weight: 700;
  box-shadow: 0 2px 0 #241f18, 0 1px 0 rgba(255, 244, 214, .18) inset;
}
body.jupi.wwa_body .wwa_btn_voll { width: 100%; }

/* ============================================================
   5d. Zaehlwerk (Kandidaten-Skalen) und Lesekopf
   ============================================================ */
body.jupi.wwa_body .wwa_test_zeile { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
body.jupi.wwa_body .wwa_chip {
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  min-height: 40px;
  padding: .2rem .65rem;
  border-radius: 5px;
  border: 1px solid #6b5a34;
  background: linear-gradient(180deg, #5f5645 0%, #443b2d 100%);
  color: #ecdfbf;
  cursor: pointer;
}
body.jupi.wwa_body .wwa_chip:hover { filter: brightness(1.1); }
/* Der Lesekopf: der Satz, den die Maschine gerade abtastet */
body.jupi.wwa_body .wwa_kontext {
  min-height: 2.1rem;
  font-size: 1rem;
  color: var(--wwa-ink);
  background-color: var(--wwa-papier);
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(120, 96, 52, .16) 4px 6px);
  background-size: 7px 100%;
  background-repeat: no-repeat;
  border: 2px solid #6b5a34;
  border-radius: 4px;
  padding: .4rem .55rem .4rem .8rem;
  margin-bottom: .45rem;
  line-height: 1.7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45) inset;
}
body.jupi.wwa_body .wwa_kontext:empty,
body.jupi.wwa_body .wwa_test_zeile:empty,
body.jupi.wwa_body .wwa_test_knoepfe:empty { display: none; }
body.jupi.wwa_body .wwa_wort_chip {
  display: inline-block;
  font-weight: 800;
  font-size: .9rem;
  padding: .05rem .45rem;
  margin: 0 .1rem .1rem 0;
  border-radius: 3px;
  background: #e6d8b4;
  border: 1px solid #c3ac7c;
  color: #33280f;
}
body.jupi.wwa_body .wwa_kontext_frage { color: var(--wwa-hell-2); font-size: .9rem; }
body.jupi.wwa_body .wwa_kontext .wwa_kontext_luecke {
  display: inline-block;
  min-width: 3.2rem;
  border-bottom: 3px solid var(--wwa-messing-dunkel);
  color: #7a5a1c;
  text-align: center;
  font-weight: 900;
  margin-left: .2rem;
}
/* Zaehlwerk-Skalen: Wort · Skala mit Teilstrichen · Ziffer */
body.jupi.wwa_body .wwa_balken { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .45rem; }
body.jupi.wwa_body .wwa_balken_zeile {
  /* eigener Knopf aus game.js: ohne diese Flaeche malt der Browser Grau */
  font: inherit;
  min-height: 40px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  padding: .2rem .4rem .2rem .45rem;
  border-radius: 4px;
  border: 1px solid rgba(201, 163, 92, .28);
  background: linear-gradient(180deg, rgba(255, 233, 186, .07) 0%, rgba(0, 0, 0, .26) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35) inset;
  display: grid;
  grid-template-columns: minmax(4.6rem, 8.5rem) 1fr auto;
  gap: .5rem;
  align-items: center;
  font-size: .84rem;
}
body.jupi.wwa_body .wwa_balken_zeile:hover {
  border-color: rgba(232, 195, 132, .6);
  background: linear-gradient(180deg, rgba(255, 233, 186, .13) 0%, rgba(0, 0, 0, .22) 100%);
}
body.jupi.wwa_body .wwa_balken_wort { font-weight: 800; color: var(--wwa-hell); overflow: hidden; text-overflow: ellipsis; }
body.jupi.wwa_body .wwa_balken_strecke {
  height: .85rem;
  border-radius: 2px;
  overflow: hidden;
  background-color: #14110d;
  background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 220, 160, .22) 9px 10px);
  border: 1px solid #5f5540;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6) inset;
}
body.jupi.wwa_body .wwa_balken_fuell {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #96692a 0%, #cf9f45 55%, #e8bd64 100%);
  box-shadow: 0 0 8px rgba(255, 200, 110, .45);
  transition: width .25s ease;
}
body.jupi.wwa_body .wwa_balken_wert {
  color: #f7e6bf;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  font-family: "Consolas", "Courier New", monospace;
  font-size: .76rem;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 190, 100, .4);
}
body.jupi.wwa_body .wwa_balken_leer { color: var(--wwa-hell-2); font-size: .86rem; }
body.jupi.wwa_body .wwa_test_knoepfe { margin-bottom: .35rem; }
body.jupi.wwa_body .wwa_sperr {
  font-size: .88rem;
  color: var(--wwa-hell);
  background: rgba(0, 0, 0, .3);
  border-radius: 4px;
  padding: .45rem .55rem;
  margin: 0;
}

/* Kleine Gravur-Labels im Gehaeuse (Zaehlwerk, Ausgabeschlitz) */
body.jupi.wwa_body .wwa_fach_label {
  display: block;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wwa-messing-hell);
  margin: .1rem 0 .25rem;
}
body.jupi.wwa_body .wwa_fach_label + .wwa_fach_label { margin-top: .5rem; }

/* ============================================================
   5e. Ausgabeschlitz: der Vorhersage-Streifen kommt heraus
   ============================================================ */
body.jupi.wwa_body .wwa_ausgabe {
  position: relative;
  margin-top: .1rem;
  padding: .7rem .65rem .5rem;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--wwa-ink);
  border-radius: 2px 2px 8px 8px;
  border: 1px solid var(--wwa-papier-rand);
  background: var(--wwa-papier);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
/* Die Schlitzlippe: dunkler Spalt, aus dem der Streifen faellt */
body.jupi.wwa_body .wwa_ausgabe::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -7px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(180deg, #100d09 0%, #3a332a 45%, #100d09 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
/* Leerer Schlitz: ein dunkler Spalt im Blech, kein weisser Kasten */
body.jupi.wwa_body .wwa_ausgabe:empty {
  display: block;
  height: 15px;
  min-height: 0;
  padding: 0;
  border-color: #5f5540;
  background: linear-gradient(180deg, #0f0c08 0%, #322b22 55%, #0f0c08 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .65) inset;
}
body.jupi.wwa_body .wwa_ausgabe .wwa_gen_wort { display: inline-block; animation: wwa_wort_pop .28s ease; }
body.jupi.wwa_body .wwa_ausgabe .wwa_gen_marke { display: block; font-size: .74rem; color: #7a6642; margin-top: .3rem; }
@keyframes wwa_wort_pop {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.jupi.wwa_body .wwa_ausgabe .wwa_gen_wort { animation: none; }
  body.jupi.wwa_body .wwa_balken_fuell { transition: none; }
  body.jupi.wwa_body .wwa_satz:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   6. Die Runde: Aufgabe auf einem Futter-Etikett
   ============================================================ */
body.jupi.wwa_body .wwa_auftrag_kopf {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin: 0 0 .45rem;
}
body.jupi.wwa_body .wwa_auftrag_nummer {
  font-family: "Consolas", "Courier New", monospace;
  font-size: .74rem;
  font-weight: 800;
  color: #7d6a42;
  text-transform: uppercase;
  letter-spacing: .1em;
}
body.jupi.wwa_body .wwa_typ_pille {
  font-size: .72rem;
  font-weight: 900;
  color: #33260d;
  background: linear-gradient(180deg, #ecd196 0%, #c9a35c 100%);
  border: 1px solid #8a6425;
  border-radius: 3px;
  padding: .16rem .5rem;
  letter-spacing: .04em;
}
body.jupi.wwa_body .wwa_auftrag {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .6rem .7rem .7rem;
  border-radius: 4px;
  border: 1px dashed #b6a37a;
  /* Futter-Etikett: helles Papier mit Lochnung oben */
  background-color: var(--wwa-papier);
  background-image: radial-gradient(circle at 50% 8px, #b9a678 0 4px, transparent 4.5px);
  background-repeat: no-repeat;
  color: var(--wwa-ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
body.jupi.wwa_body .wwa_auftrag_frage { font-size: .92rem; margin: 0 0 .3rem; color: var(--wwa-ink); }
body.jupi.wwa_body .wwa_auftrag_frage b { color: #5d4310; }
body.jupi.wwa_body .wwa_auftrag_satz {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wwa-ink);
  background: #fdf7e6;
  border-left: 4px solid var(--wwa-messing-dunkel);
  border-radius: 2px;
  padding: .4rem .55rem;
  margin: 0 0 .5rem;
  box-shadow: 0 1px 3px rgba(60, 44, 18, .18) inset;
}
body.jupi.wwa_body .wwa_wort_buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
/* Antworten = Schreibmaschinen-Tasten der Maschine */
body.jupi.wwa_body .wwa_wort_btn {
  font: inherit;
  font-size: .98rem;
  font-weight: 800;
  min-height: 44px;
  padding: .55rem .4rem;
  border-radius: 6px;
  border: 2px solid #b3904f;
  background: linear-gradient(180deg, #fbf3dd 0%, #eee0bd 100%);
  color: #33280f;
  cursor: pointer;
  box-shadow: 0 3px 0 #a8874a, 0 1px 0 rgba(255, 253, 244, .8) inset;
  transition: transform .1s ease, box-shadow .1s ease;
}
body.jupi.wwa_body .wwa_wort_btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #a8874a, 0 0 10px rgba(230, 178, 92, .5);
}
body.jupi.wwa_body .wwa_wort_btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #a8874a;
}
body.jupi.wwa_body .wwa_wort_btn:disabled { opacity: .5; cursor: default; }
body.jupi.wwa_body .wwa_wort_btn.is_richtig_gewaehlt {
  background: linear-gradient(180deg, #d9ead0 0%, #bcd8ae 100%);
  border-color: #4c7539;
  color: #2a4420;
  box-shadow: 0 3px 0 #4c7539;
}
body.jupi.wwa_body .wwa_wort_btn.is_falsch_gewaehlt {
  background: linear-gradient(180deg, #f6d9d1 0%, #e7b8aa 100%);
  border-color: #98331f;
  color: #6d2114;
  box-shadow: 0 3px 0 #98331f;
}
body.jupi.wwa_body .wwa_urteil_buttons { display: grid; gap: .4rem; }
/* Rueckmeldung = Protokollzettel der Maschine */
body.jupi.wwa_body .wwa_erg_karte {
  font-size: .9rem;
  border-radius: 3px;
  padding: .5rem .6rem;
  margin-top: .35rem;
  color: var(--wwa-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
body.jupi.wwa_body .wwa_erg_karte.is_richtig { background: #e6efdb; border: 1px solid #a7c194; }
body.jupi.wwa_body .wwa_erg_karte.is_falsch { background: #f8e7d2; border: 1px solid #d9b483; }
body.jupi.wwa_body .wwa_erg_big {
  font-size: 1rem;
  font-weight: 900;
  margin: 0 0 .25rem;
  letter-spacing: .01em;
}
body.jupi.wwa_body .wwa_erg_karte p { margin: .2rem 0; }
body.jupi.wwa_body .wwa_erg_karte b { color: #4b3510; }
body.jupi.wwa_body .wwa_erg_punkte { font-weight: 900; color: var(--wwa-gut); }
/* Tipp = gelber Merkzettel */
body.jupi.wwa_body .wwa_tipp {
  font-size: .85rem;
  color: #4a3a12;
  background: #fbf0c4;
  border-left: 3px solid #d5ad3f;
  border-radius: 2px;
  padding: .35rem .5rem;
  margin-top: .35rem;
}
body.jupi.wwa_body .wwa_erg_karte .wwa_tipp { color: #4a3a12; }
/* Zaehl-Tabelle: Rollen des Zaehlwerks */
body.jupi.wwa_body .wwa_zaehl_tabelle { margin: .35rem 0 0; font-size: .82rem; }
body.jupi.wwa_body .wwa_zaehl_zeile {
  display: grid;
  grid-template-columns: minmax(4.6rem, 8.5rem) 1fr auto;
  gap: .5rem;
  align-items: center;
  padding: .12rem 0;
  color: #4a3d24;
}
body.jupi.wwa_body .wwa_zaehl_zeile.is_beste .wwa_zaehl_wort { color: #6b4c14; font-weight: 900; }
body.jupi.wwa_body .wwa_zaehl_wort { overflow: hidden; text-overflow: ellipsis; }
body.jupi.wwa_body .wwa_zaehl_strecke { height: .5rem; background: #d9c9a2; border-radius: 1px; overflow: hidden; }
body.jupi.wwa_body .wwa_zaehl_fuell { display: block; height: 100%; background: #a87c33; }
body.jupi.wwa_body .wwa_zaehl_wert { color: #6b5a34; font-size: .76rem; }
body.jupi.wwa_body .wwa_erg_btns { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }

/* ============================================================
   7a. Hinweis: Messing-Schild, das kurz aufleuchtet
   ============================================================ */
body.jupi.wwa_body .wwa_hinweis {
  /* schwebendes Schild: kostet keine Bauhoehe (3.13.2a erlaubt das) */
  position: fixed;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(44rem, 92vw);
  margin: 0;
  z-index: 60;
  padding: .45rem .8rem;
  border-radius: 6px;
  border: 1px solid #8a6425;
  background: linear-gradient(180deg, #3a332a 0%, #241f19 100%);
  color: #ffe3ad;
  font-size: .88rem;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
body.jupi.wwa_body .wwa_hinweis.is_sichtbar { opacity: 1; }
body.jupi.wwa_body .wwa_hinweis.is_gut { background: linear-gradient(180deg, #33502a 0%, #22371c 100%); color: #e4f5d4; border-color: #4c7539; }
body.jupi.wwa_body .wwa_hinweis.is_warn { background: linear-gradient(180deg, #6d2a18 0%, #4a1c10 100%); color: #ffdcc9; border-color: #98331f; }

/* ============================================================
   7b. Karten: Betriebsanleitung, Protokoll, Rueckfrage
   ============================================================ */
body.jupi.wwa_body .wwa_overlay,
body.jupi.wwa_body .wwa_frage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 16px;
  z-index: 30;
  background: radial-gradient(circle at 50% 30%, rgba(30, 22, 12, .55) 0%, rgba(14, 10, 6, .82) 100%);
}
body.jupi.wwa_body .wwa_overlay[hidden],
body.jupi.wwa_body .wwa_frage[hidden] { display: none; }
/* Die Karte ist ein Blatt aus der Betriebsanleitung */
body.jupi.wwa_body .wwa_karte {
  position: relative;
  max-width: 30rem;
  max-height: 100%;
  overflow-y: auto;
  padding: 1.1rem 1.2rem 1.2rem;
  text-align: center;
  border-radius: 6px;
  border: 1px solid var(--wwa-papier-rand);
  border-top: 6px solid var(--wwa-messing);
  color: var(--wwa-ink);
  background-color: var(--wwa-papier);
  background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(120, 96, 52, .13) 25px 26px);
  box-shadow: 0 18px 44px rgba(10, 7, 4, .6), 0 1px 0 rgba(255, 255, 255, .5) inset;
}
body.jupi.wwa_body .wwa_karte h3 {
  margin: .4rem 0 .5rem;
  color: #33260f;
  font-size: 1.15rem;
  font-weight: 900;
}
body.jupi.wwa_body .wwa_karte p { font-size: .92rem; color: var(--wwa-ink-2); }
body.jupi.wwa_body .wwa_karte p b { color: #4b3510; }
body.jupi.wwa_body .wwa_karte_bild {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 10px;
  background: #fdf7e6;
  border: 2px solid var(--wwa-messing-dunkel);
  box-shadow: 0 2px 8px rgba(40, 28, 10, .3);
}
body.jupi.wwa_body .wwa_start_stufen { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin: .6rem 0 .3rem; }
body.jupi.wwa_body .wwa_stufe_start {
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  min-height: 40px;
  min-width: 44px;
  padding: .3rem .8rem;
  border-radius: 6px;
  border: 1px solid #b39a6c;
  background: linear-gradient(180deg, #f7efd9 0%, #e8dabd 100%);
  color: #5d4310;
  cursor: pointer;
}
body.jupi.wwa_body .wwa_stufe_start.is_active {
  border-color: #7a5a1c;
  background: linear-gradient(180deg, #f4d693 0%, #d6a951 55%, #b98732 100%);
  color: #33260d;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(230, 178, 92, .5);
}
body.jupi.wwa_body .wwa_start_tipp { font-size: .84rem; color: #6d5a34; min-height: 2.4em; margin: .3rem 0 .6rem; }
body.jupi.wwa_body .wwa_karte_btns { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
body.jupi.wwa_body .wwa_erg_sterne { font-size: 2rem; letter-spacing: .1em; color: #a87c33; }
body.jupi.wwa_body .wwa_frage_btns { display: flex; gap: .5rem; justify-content: center; margin-top: .6rem; }
/* Ergebnis-Bericht: Protokollzeilen der Maschine */
body.jupi.wwa_body #wwa_erg_text { font-family: "Consolas", "Courier New", monospace; font-size: .88rem; line-height: 1.6; }

/* ============================================================
   7c. Hilfe-/Wissens-Fenster: ein Blatt aus dem Handbuch
   ============================================================ */
body.jupi.wwa_body .wwa_modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(12, 9, 5, .72);
  backdrop-filter: blur(2px);
}
body.jupi.wwa_body .wwa_modal[hidden] { display: none !important; }
body.jupi.wwa_body .wwa_modal_inhalt {
  width: 100%;
  max-width: 36rem;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--wwa-papier-rand);
  border-top: 6px solid var(--wwa-messing);
  background: var(--wwa-papier);
  color: var(--wwa-ink);
  box-shadow: 0 20px 50px rgba(8, 6, 3, .62);
}
body.jupi.wwa_body .wwa_modal_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--wwa-papier-rand);
  background: linear-gradient(180deg, #f6ecd4 0%, #ecdfc0 100%);
}
body.jupi.wwa_body .wwa_modal_kopf h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: #33260f;
  letter-spacing: .01em;
}
body.jupi.wwa_body .wwa_modal_x {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #5d4310;
}
body.jupi.wwa_body .wwa_modal_x:hover { background: rgba(120, 96, 52, .16); }
body.jupi.wwa_body .wwa_modal_body {
  padding: .9rem 1.1rem;
  overflow-y: auto;
  font-size: .9rem;
  line-height: 1.55;
}
body.jupi.wwa_body .wwa_modal_body h4 {
  margin: .8rem 0 .3rem;
  font-size: .95rem;
  font-weight: 900;
  color: #6b4c14;
  letter-spacing: .01em;
}
body.jupi.wwa_body .wwa_modal_body h4:first-child { margin-top: 0; }
body.jupi.wwa_body .wwa_modal_body ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
body.jupi.wwa_body .wwa_modal_body li { margin: .25rem 0; }
body.jupi.wwa_body .wwa_modal_body b { color: #4b3510; }
body.jupi.wwa_body .wwa_lernziel {
  background: #f0e6cd;
  border-left: 4px solid var(--wwa-messing-dunkel);
  border-radius: 2px;
  padding: .5rem .7rem;
  margin-top: .5rem;
  color: #3d3117;
}
body.jupi.wwa_body .wwa_modal_fuss {
  display: flex;
  justify-content: flex-end;
  padding: .65rem 1.1rem;
  border-top: 1px solid var(--wwa-papier-rand);
  background: linear-gradient(180deg, #f2e7cd 0%, #e7d9b8 100%);
}

/* ============================================================
   8. Handy / Tablet
   ============================================================ */
@media (max-width: 960px) {
  body.jupi.wwa_body .wwa_werkstatt { grid-template-columns: 1fr; }
  body.jupi.wwa_body .wwa_overlay,
  body.jupi.wwa_body .wwa_frage { position: fixed; border-radius: 0; }
}
@media (max-width: 680px) {
  body.jupi.wwa_body .wwa_header {
    grid-template-columns: 1fr auto;
    gap: .4rem .5rem;
    padding: .45rem .6rem;
    border-radius: 0 0 10px 10px;
  }
  body.jupi.wwa_body .wwa_brand {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-content: center;
  }
  body.jupi.wwa_body .wwa_brand h1 { font-size: 1.1rem; }
  body.jupi.wwa_body .wwa_brand img { width: 30px; height: 30px; }
  body.jupi.wwa_body .wwa_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    font-size: .82rem;
    padding: .35rem .7rem;
  }
  body.jupi.wwa_body .wwa_header .jupi_werkzeuge {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
  }
  body.jupi.wwa_body .jupi_sprachen_select { font-size: .76rem; max-width: 9.5rem; }
  body.jupi.wwa_body .jupi_main { padding: .6rem .5rem .9rem; }
  body.jupi.wwa_body .wwa_buehne { padding: .55rem .5rem .7rem; border-radius: 12px; }
  body.jupi.wwa_body .wwa_leiste { justify-content: flex-start; }
  body.jupi.wwa_body .wwa_pool { max-height: 15rem; }
}
@media (max-height: 820px) {
  body.jupi.wwa_body .wwa_pool { max-height: 13rem; }
  body.jupi.wwa_body .wwa_karte_bild { width: 4rem; height: 4rem; }
}

/* ============================================================
   9. Nachtschicht (Dark Mode): dieselbe Maschine, nur dunkel.
   WICHTIG: html[data-theme="dark"] davor - sonst gewinnt die
   spezifischere Plattform-Regel in der Paket-Kopie jupi.css.
   ============================================================ */
html[data-theme="dark"] body.jupi.wwa_body .wwa_header {
  color: var(--wwa-ink);
  border-bottom-color: #6b4d18;
  background-color: #6b5836;
  background-image:
    linear-gradient(180deg, #8d7442 0%, #6f5a33 46%, #55431f 100%),
    repeating-linear-gradient(90deg, rgba(255, 226, 170, .10) 0 2px, rgba(20, 14, 6, .16) 2px 4px);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, .6),
    0 1px 0 rgba(255, 224, 160, .35) inset,
    0 -1px 0 rgba(0, 0, 0, .4) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_brand h1 {
  color: #2c2211;
  text-shadow: 0 1px 0 rgba(255, 226, 170, .35);
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_brand img {
  background: #e8dcc0;
  border-color: #6b4d18;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_header .jupi_nav_back {
  border-color: #2a2010;
  background: linear-gradient(180deg, #2f2718 0%, #1e1910 100%);
  color: #ffdca8;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #3b3120 0%, #262016 100%);
}
html[data-theme="dark"] body.jupi.wwa_body .jupi_sprachen_select {
  border-color: #2a2010;
  background: rgba(24, 19, 11, .9);
  color: #ffe3b4;
}
html[data-theme="dark"] body.jupi.wwa_body .jupi_theme_switch { border-color: #2a2010; }
html[data-theme="dark"] body.jupi.wwa_body .jupi_theme_switch .jts_thumb {
  background: radial-gradient(circle at 35% 30%, #ffe9bb, #c79a48 70%);
}

/* Gehaeuse bei Nacht: dunkles Blech, warme Kanten */
html[data-theme="dark"] body.jupi.wwa_body .wwa_buehne {
  border-color: #6a5c42;
  background-color: #3d372c;
  background-image:
    radial-gradient(circle at 14px 14px, #b3a486 0 3px, #14110c 3px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #b3a486 0 3px, #14110c 3px 4.5px, transparent 5px),
    radial-gradient(circle at 14px calc(100% - 14px), #b3a486 0 3px, #14110c 3px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #b3a486 0 3px, #14110c 3px 4.5px, transparent 5px),
    repeating-linear-gradient(180deg, rgba(255, 226, 170, .05) 0 2px, rgba(0, 0, 0, .12) 2px 4px),
    linear-gradient(176deg, #4c4536 0%, #363027 48%, #262119 100%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .72),
    0 2px 0 rgba(255, 226, 170, .18) inset,
    0 -3px 0 rgba(0, 0, 0, .45) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_buehne::before { border-color: rgba(255, 220, 160, .16); }
html[data-theme="dark"] body.jupi.wwa_body .wwa_marke {
  background: linear-gradient(180deg, #b08d4d 0%, #8a6a2f 55%, #6b4e1c 100%);
  color: #f3e2bd;
  border-color: #4a3614;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 240, 200, .3) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_leiste {
  border-color: #4f4636;
  background: linear-gradient(180deg, #322c22 0%, #221d16 100%);
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_stufe {
  border-color: #4b4335;
  background: linear-gradient(180deg, #4a4335 0%, #302b21 100%);
  color: #d6c8a8;
  box-shadow: 0 2px 0 #14110c, 0 1px 0 rgba(255, 240, 200, .12) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_stufe.is_active {
  background: linear-gradient(180deg, #f0cf8b 0%, #c99f4a 55%, #a47a29 100%);
  color: #2b1f0a;
  box-shadow: 0 0 14px rgba(255, 197, 108, .6), 0 2px 0 #6b4d18, 0 1px 0 rgba(255, 250, 232, .55) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_panel {
  border-color: #4a4235;
  background: linear-gradient(180deg, #221e18 0%, #17140f 100%);
  box-shadow:
    0 3px 0 rgba(255, 226, 170, .12),
    0 8px 20px rgba(0, 0, 0, .55),
    0 2px 8px rgba(0, 0, 0, .6) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_panel_auftrag {
  border-color: #6b4d18;
  background: linear-gradient(180deg, #262019 0%, #171410 100%);
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_panel_titel { color: #e8c384; border-bottom-color: rgba(201, 163, 92, .3); }
html[data-theme="dark"] body.jupi.wwa_body .wwa_mini_btn {
  border-color: #4f4636;
  background: linear-gradient(180deg, #43392c 0%, #2c2519 100%);
  color: #e8d6b0;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_satz {
  background-color: #e3d8bd;
  border-color: #b7a67e;
  border-left-color: #a38f61;
  color: #2a2318;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_satz:hover:not(:disabled) { border-color: #c9a35c; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_satz.is_gefuettert {
  background-color: #f4e9c9;
  border-color: #c9a35c;
  border-left-color: #e8c384;
  box-shadow: 0 0 0 2px rgba(232, 195, 132, .55), 0 2px 6px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_satz .wwa_quelle_badge { background: #d6c8a4; border-color: #b7a67e; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_topf_zeile_text {
  background: #dcd1b4;
  border-color: #b7a67e;
  border-left-color: #a38f61;
  color: #2a2318;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_topf_zeile_text.is_eigen { background: #e8dcc0; border-color: #c9a35c; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_eigen_marke { color: #4a3614; background: #d6c8a4; border-color: #b7a67e; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_topf_x { background: #d6c8a4; border-color: #a68c58; color: #4a3614; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_eigen_input {
  background: #e6dbc0;
  color: #2a2318;
  border-color: #6b5a34;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_kontext {
  background-color: #e6dbc0;
  color: #2a2318;
  border-color: #6b5a34;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_kontext_frage { color: var(--wwa-hell-2); }
html[data-theme="dark"] body.jupi.wwa_body .wwa_wort_chip { background: #d9cba8; border-color: #b7a67e; color: #2a2318; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_balken_wort { color: #eadfc4; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_balken_strecke { background-color: #0f0d09; border-color: #4a4235; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_ausgabe {
  background: #e6dbc0;
  border-color: #b7a67e;
  color: #2a2318;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_ausgabe .wwa_gen_marke { color: #6b5a34; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_chip {
  border-color: #4f4636;
  background: linear-gradient(180deg, #443b2d 0%, #2c2519 100%);
  color: #e8d6b0;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_btn_grau {
  border-color: #4b4335;
  background: linear-gradient(180deg, #443b2d 0%, #2a2419 100%);
  color: #e8d6b0;
  box-shadow: 0 2px 0 #14110c, 0 1px 0 rgba(255, 240, 200, .12) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_auftrag {
  background-color: #e8dcc0;
  background-image: radial-gradient(circle at 50% 8px, #b9a678 0 4px, transparent 4.5px);
  border-color: #b7a67e;
  color: #2a2318;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_auftrag_frage { color: #3a2f1a; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_auftrag_frage b { color: #55390c; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_auftrag_satz { background: #f2e7c9; color: #2a2318; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_auftrag_nummer { color: #6b5a34; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_typ_pille { background: linear-gradient(180deg, #e8c384 0%, #c9a35c 100%); color: #2b1f0a; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_wort_btn {
  border-color: #b3904f;
  background: linear-gradient(180deg, #f4ead0 0%, #e2d4b2 100%);
  color: #2a2318;
  box-shadow: 0 3px 0 #8a6a2c, 0 1px 0 rgba(255, 253, 244, .7) inset;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_wort_btn.is_richtig_gewaehlt {
  background: linear-gradient(180deg, #cfe3bd 0%, #aecb98 100%);
  border-color: #3f6b33;
  box-shadow: 0 3px 0 #3f6b33;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_wort_btn.is_falsch_gewaehlt {
  background: linear-gradient(180deg, #f0cbbf 0%, #dda998 100%);
  border-color: #8a2d1b;
  box-shadow: 0 3px 0 #8a2d1b;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_erg_karte.is_richtig { background: #dfeacd; border-color: #8fae7c; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_erg_karte.is_falsch { background: #f2dfc4; border-color: #c9a06a; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_zaehl_zeile { color: #4a3d24; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_zaehl_strecke { background: #cdbc94; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_karte {
  background-color: #e8dcc0;
  color: #2a2318;
  border-color: #b7a67e;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_karte h3 { color: #2b1f0a; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_karte p { color: #4a3f2c; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_stufe_start {
  border-color: #b7a67e;
  background: linear-gradient(180deg, #efe4c8 0%, #ddceac 100%);
  color: #4a3614;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_stufe_start.is_active {
  background: linear-gradient(180deg, #f0cf8b 0%, #c99f4a 55%, #a47a29 100%);
  color: #2b1f0a;
  border-color: #6b4d18;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_karte_bild { background: #f2e7c9; border-color: #6b4d18; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_modal_inhalt {
  background: #e8dcc0;
  color: #2a2318;
  border-color: #b7a67e;
  border-top-color: #b08d4d;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_modal_kopf {
  background: linear-gradient(180deg, #eee2c6 0%, #ddceac 100%);
  border-bottom-color: #c3b391;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_modal_kopf h3 { color: #2b1f0a; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_modal_body h4 { color: #6b4c14; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_modal_body b { color: #4b3510; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_lernziel { background: #ded0ae; color: #3d3117; }
html[data-theme="dark"] body.jupi.wwa_body .wwa_modal_fuss {
  background: linear-gradient(180deg, #e7d9b8 0%, #d6c6a2 100%);
  border-top-color: #c3b391;
}
html[data-theme="dark"] body.jupi.wwa_body .wwa_icon_btn {
  border-color: #4a3614;
  background: radial-gradient(circle at 34% 28%, #e2c187 0%, #b18c45 55%, #7d5f24 100%);
  color: #2b1f0a;
}