/* ============================================================
   Zufalls-Arena - styles.css   (GUI-Neubau 26.10.2026)
   Welt: VERSUCHSSTADION - Flutlicht-Arena fuer Zufallsexperimente
   Praefix: .za_  (nur fuer dieses Spiel, ergaenzt jupi.css)
   ------------------------------------------------------------
   Der Stil des Spiels, von aussen nach innen:
     1.  Farben und Grundlagen (Nachtblau, Tartan-Rot, Flutlicht-Weiss,
         LED-Gruen, Gelb) - alle Regeln haengen an body.jupi.za_body
     1b. Seitenkulisse: EIN Stadion-Buehnenbild (kulisse.svg hell /
         kulisse-nacht.svg dunkel), cover + no-repeat + fixed
     2.  Anzeigetafel-Konsole (Kopfzeile): dunkles Blech, LED-Punkte,
         Fachzeile aus Bernstein-LEDs, helle Zurueck-Pille
     3.  Wettzettel (Steuerleiste): cremes Ticket mit Perforation
     4.  Arena (Buehne): Spielfeld mit Tartanrand, weisser Linie, Raster
     5.  Experimentierfeld: Podest + Anzeigetafel-Zahl + Stadion-Tasten
     6.  Haeufigkeiten: Diagramm auf hellem Papier (Chart-Farben unveraendert)
     7.  Quiz: Frage und Antworten auf der Anzeigetafel
     8.  Overlays: Eintrittskarte (Start) und Stadionordnung (Hilfe)
     9.  Dark Mode: Nachtspiel - fast schwarzes Stadion, LED glueht,
         Papier bleibt hell
    10.  Handy / Tablet
    11.  Animationen (nur transform/opacity)

   WICHTIG (Kulissen-Regel): Der Seitenhintergrund ist EINE randlose
   Szene, keine Kachel - Generator .zcode/zufallsarena-kulisse.cjs,
   feste Saat 20261026, keine externen Bilder.
   ============================================================ */

/* ---------- 1. Farben und Grundlagen ---------------------------------- */
body.jupi.za_body {
  /* Welt-Palette (Vorgabe) */
  --za-nacht: #14213a;         /* Nachtblau */
  --za-nacht-tief: #0a1120;    /* fast schwarz */
  --za-tartan: #b4452f;        /* Tartan-Rot */
  --za-tartan-tief: #8a3323;
  --za-licht: #f7f3e8;         /* Flutlicht-Weiss / Papier */
  --za-led: #7ee08a;           /* LED-Gruen */
  --za-led-tief: #1f6b34;
  --za-gelb: #f2c200;          /* Gelb */
  /* Abgeleitete Toene */
  --za-blech: #1b2b45;
  --za-blech-hell: #2b4162;
  --za-blech-tief: #0b1421;
  --za-linie: rgba(247, 243, 232, .16);
  --za-papier: #fdf9ee;
  --za-papier-tief: #f2e8d3;
  --za-papier-kante: #cfc2a6;
  --za-tinte: #1b2a3d;
  --za-schrift: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --za-zahl: "Consolas", "SFMono-Regular", ui-monospace, "Courier New", monospace;
  --za-breite: 68rem;

  min-height: 100vh;
  padding: 0;
  margin: 0;
  color: var(--za-licht);
  font-family: var(--za-schrift);
  /* Kulisse: EIN Buehnenbild, randlos, mittig, fest */
  background-color: #0c1728;
  background-image: url("kulisse.svg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Die weisse Plattform-Karte und der helle Fuss wuerden die Szene zudecken. */
body.jupi.za_body .jupi_container {
  background: transparent;
  min-height: 100vh;
  /* Zeilen ausdruecklich: die main-Zeile (1fr) schluckt den Platzueberschuss,
     damit die Fussleiste wirklich am unteren Fensterrand klebt (Designregel). */
  grid-template-rows: auto auto 1fr auto;
}
@supports (height: 100dvh) {
  body.jupi.za_body .jupi_container { min-height: 100dvh; }
}
body.jupi.za_body .jupi_main { min-height: 0; }
body.jupi.za_body .jupi_container > .jupi_main { background: transparent; }
body.jupi.za_body .jupi_main {
  padding: 1rem 1rem 1.4rem;
  max-width: 96rem;
}
@media (min-width: 48rem) {
  body.jupi.za_body .jupi_main { padding: 1.15rem 1.5rem 1.6rem; }
}
/* Fuss = LED-Kante des Stadions, keine weisse Plattform-Karte. */
body.jupi.za_body .jupi_container > .jupi_footer {
  margin: .6rem auto 0;
  border: 0;
  border-top: 2px solid rgba(126, 224, 138, .30);
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(8, 14, 24, .82), rgba(4, 8, 14, .94));
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .45);
  max-width: var(--za-breite);
}
body.jupi.za_body .jupi_footer_text { color: #c3d2e2; }
body.jupi.za_body .jupi_footer_text a { color: #a9f0b6; }
body.jupi.za_body .jupi_footer_text a:hover { color: #d6ffde; }

/* ---------- 1b. Seitenkulisse: Nachtspiel (Dark Mode) ----------------- */
html[data-theme="dark"] body.jupi.za_body {
  background-color: #03060b;
  background-image: url("kulisse-nacht.svg");
  color: #eef4f8;
}

/* ---------- 2. Anzeigetafel-Konsole (Kopfzeile) ---------------------- */
body.jupi.za_body .za_kopf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.1rem 1.15rem;
  border-bottom: 3px solid #05090f;
  border-radius: 0 0 16px 16px;
  background:
    radial-gradient(120% 150% at 50% -40%, rgba(126, 224, 138, .12), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #2a3d59 0%, #182740 55%, #0b1421 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 24px rgba(0, 0, 0, .55);
  color: var(--za-licht);
}
/* LED-Punktreihe an der Oberkante des Gehaeuses */
body.jupi.za_body .za_kopf_led {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  border-radius: 0 0 3px 3px;
  background-image: radial-gradient(circle at 50% 50%,
    var(--za-led) 0 1.5px, rgba(126, 224, 138, 0) 2.1px);
  background-size: 13px 9px;
  background-repeat: repeat-x;
  background-position: 5px 0;
  opacity: .7;
  pointer-events: none;
}
/* Fachzeile am unteren Rand: eingelassene Leiste mit Bernstein-LEDs */
body.jupi.za_body .za_fachzeile {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 11px;
  border-radius: 3px;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(242, 194, 0, .85) 0 1.3px, transparent 1.9px),
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .28));
  background-size: 22px 11px, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 3px 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  opacity: .8;
  pointer-events: none;
}
/* Helle Zurueck-Pille (Marke des Spiels: Papier auf Blech) */
body.jupi.za_body .za_kopf .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--za-papier-kante);
  background: var(--za-licht);
  color: #17324b;
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .38), 0 8px 16px rgba(0, 0, 0, .3);
  transition: transform .15s ease, background .15s ease;
}
body.jupi.za_body .za_kopf .jupi_nav_back:hover {
  background: #fffdf4;
  color: #0f2537;
  transform: translateY(-1px);
  text-decoration: none;
}
body.jupi.za_body .za_kopf_marke {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
/* Logo im dunklen Rahmen = kleiner Monitor der Anzeigetafel */
body.jupi.za_body .za_kopf_marke img {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 2px;
  border-radius: 10px;
  border: 2px solid rgba(126, 224, 138, .55);
  background: #0b1421;
  box-shadow: 0 0 14px rgba(126, 224, 138, .3), inset 0 0 10px rgba(0, 0, 0, .6);
}
body.jupi.za_body .za_kopf_marke h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--za-licht);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 18px rgba(126, 224, 138, .25);
}
body.jupi.za_body .za_kopf_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Sprachwahl und Theme-Schalter sitzen IM Gehaeuse (eingelassene Faecher). */
body.jupi.za_body .za_kopf .jupi_sprachen_wahl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 40px;
  padding: 0 .45rem;
  border-radius: 9px;
  background: var(--za-blech-tief);
  border: 1px solid #33506f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -6px 12px rgba(0, 0, 0, .35);
}
body.jupi.za_body .za_kopf .jupi_sprachen_icon { font-size: .95rem; line-height: 1; }
body.jupi.za_body .za_kopf .jupi_sprachen_select {
  min-height: 40px;
  max-width: 10.5rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e6eff8;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  box-shadow: none;
}
body.jupi.za_body .za_kopf .jupi_sprachen_select:hover { background: rgba(255, 255, 255, .10); }
body.jupi.za_body .za_kopf .jupi_sprachen_select:focus-visible {
  outline: 2px solid var(--za-led);
  outline-offset: 2px;
}
body.jupi.za_body .za_kopf .jupi_sprachen_select option { color: #16202e; background: #fdf9ee; }
body.jupi.za_body .za_kopf #jupi_theme_toggle {
  width: 62px;
  min-width: 62px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #33506f;
  background: var(--za-blech-tief);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -6px 12px rgba(0, 0, 0, .35);
}
body.jupi.za_body .za_kopf #jupi_theme_toggle:hover { background: #16283c; }
body.jupi.za_body .za_kopf .jts_thumb {
  top: 6px;
  bottom: auto;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--za-led);
  box-shadow: 0 0 6px rgba(126, 224, 138, .45);
}
html[data-theme="dark"] body.jupi.za_body .za_kopf .jts_thumb {
  left: calc(100% - 32px);
  background: var(--za-gelb);
  box-shadow: 0 0 6px rgba(242, 194, 0, .45);
}
body.jupi.za_body .za_kopf .jts_sun { left: 9px; }
body.jupi.za_body .za_kopf .jts_moon { right: 9px; }

/* [hidden] muss gewinnen: #za_forschen hat display:grid (Spezifitaet schlaegt
   sonst die UA-Regel [hidden]{display:none}) - bekannte Falle. */
body.jupi.za_body #za_forschen[hidden],
body.jupi.za_body #za_quiz[hidden] { display: none; }

/* ---------- 3. Wettzettel (Steuerleiste) ----------------------------- */
body.jupi.za_body .za_steuer {
  max-width: var(--za-breite);
  margin: 0 auto .9rem;
}
body.jupi.za_body .za_leiste {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .55rem .9rem;
  padding: .55rem 1.15rem .6rem;
  border: 1px solid var(--za-papier-kante);
  border-radius: 9px;
  color: var(--za-tinte);
  background:
    linear-gradient(180deg, var(--za-papier) 0%, var(--za-papier-tief) 70%, #ece0c7 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
}
/* Perforation links und rechts (Lochreihe = Ticketoptik) */
body.jupi.za_body .za_leiste::before,
body.jupi.za_body .za_leiste::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 9px;
  background-image: radial-gradient(circle at 50% 50%,
    rgba(20, 33, 58, .32) 0 2.3px, rgba(20, 33, 58, 0) 2.8px);
  background-size: 9px 15px;
  background-repeat: repeat-y;
  pointer-events: none;
}
body.jupi.za_body .za_leiste::before { left: 3px; }
body.jupi.za_body .za_leiste::after { right: 3px; }
body.jupi.za_body .za_leiste_gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
/* Abrisskante zwischen Modus und Stufe */
body.jupi.za_body .za_leiste_gruppe + .za_leiste_gruppe {
  padding-left: .9rem;
  border-left: 2px dashed #c8b998;
}
body.jupi.za_body .za_leiste .za_leiste_label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7a6444;
}
/* Stadion-Tasten: dunkle Kappen mit gruenem Leuchten, wenn aktiv */
body.jupi.za_body .za_tab,
body.jupi.za_body .za_stufe,
body.jupi.za_body .za_icon_btn {
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  min-height: 40px;
  padding: .35rem .85rem;
  border: 1px solid #2c3f58;
  border-radius: 9px;
  background: linear-gradient(180deg, #2a3d59 0%, #182740 60%, #101b2d 100%);
  color: #eaf1f8;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 0 #0a1320;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
body.jupi.za_body .za_tab:hover,
body.jupi.za_body .za_stufe:hover,
body.jupi.za_body .za_icon_btn:hover {
  background: linear-gradient(180deg, #35507a 0%, #1e3150 100%);
  transform: translateY(-1px);
}
body.jupi.za_body .za_tab:active,
body.jupi.za_body .za_stufe:active,
body.jupi.za_body .za_icon_btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 0 #0a1320; }
body.jupi.za_body .za_tab.is_active,
body.jupi.za_body .za_stufe.is_active {
  border-color: #b8f7c6;
  background: linear-gradient(180deg, #63d980 0%, #2f9a4e 60%, #237a3e 100%);
  color: #06240f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 16px rgba(126, 224, 138, .5), 0 3px 0 #0e5227;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
body.jupi.za_body .za_icon_btn { min-width: 44px; padding: .3rem .7rem; }

/* ---------- 4. Arena (Buehne) --------------------------------------- */
body.jupi.za_body .za_buehne {
  position: relative;
  max-width: var(--za-breite);
  margin: 0 auto 1.2rem;
  padding: .95rem;
  border: 12px solid var(--za-tartan);
  border-radius: 18px;
  background-color: #16243a;
  background-image:
    /* Labor-Messraster auf dem Spielfeld */
    repeating-linear-gradient(90deg, rgba(247, 243, 232, .045) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(247, 243, 232, .04) 0 1px, transparent 1px 74px),
    radial-gradient(120% 90% at 50% 0%, rgba(126, 224, 138, .10), transparent 62%),
    linear-gradient(180deg, #1a2b45 0%, #111d30 55%, #0c1626 100%);
  /* weisse Linie innen hinter dem Tartanrand */
  box-shadow:
    inset 0 0 0 3px rgba(247, 243, 232, .82),
    inset 0 0 60px rgba(0, 0, 0, .55),
    0 18px 44px rgba(0, 0, 0, .55);
}
/* Die vier Eckpunkte der Arena (weisse Linien-Enden) */
body.jupi.za_body .za_buehne::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 10px;
  border: 1px solid rgba(247, 243, 232, .22);
  pointer-events: none;
}

/* ---------- 5. Experimentierfeld ------------------------------------ */
body.jupi.za_body .za_panel {
  position: relative;
  border-radius: 14px;
  padding: .85rem 1rem;
  margin: 0 0 .8rem;
}
body.jupi.za_body .za_panel:last-child { margin-bottom: 0; }

body.jupi.za_body .za_feld {
  border: 1px solid #2f5177;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(126, 224, 138, .10), transparent 62%),
    linear-gradient(180deg, #1b2b45 0%, #101a2b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 34px rgba(0, 0, 0, .45),
    0 8px 22px rgba(0, 0, 0, .4);
  color: var(--za-licht);
  overflow: hidden;
}
/* LED-Kante oben am Geraet */
body.jupi.za_body .za_feld::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(126, 224, 138, .75), transparent);
  pointer-events: none;
}
body.jupi.za_body .za_feld h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #e4f8e8;
  text-shadow: 0 0 12px rgba(126, 224, 138, .28);
}
body.jupi.za_body .za_feld h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--za-led);
  box-shadow: 0 0 9px rgba(126, 224, 138, .85);
  flex: 0 0 auto;
}

/* Anzeigetafel-Fenster: das Geraet steht auf einem Podest */
body.jupi.za_body .za_anzeige {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .9rem;
  min-height: 152px;
  padding: .6rem .6rem 2.85rem;
  border: 1px solid rgba(126, 224, 138, .22);
  border-radius: 10px;
  background:
    radial-gradient(70% 96% at 50% 100%, rgba(126, 224, 138, .18), transparent 72%),
    radial-gradient(120% 80% at 50% 0%, rgba(126, 224, 138, .07), transparent 60%),
    linear-gradient(180deg, rgba(4, 9, 16, .72), rgba(4, 9, 16, .22));
  box-shadow: inset 0 0 28px rgba(126, 224, 138, .07), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Podest unter dem Experiment: helle Deckplatte (Flutlicht), dunkler Korpus */
body.jupi.za_body .za_anzeige::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  width: min(72%, 320px);
  height: 30px;
  border-radius: 2px;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, #e9eef5 0 3px, #4c6d94 3px 6px, #2a405d 6px 100%);
  box-shadow: 0 -12px 26px rgba(126, 224, 138, .22);
}
body.jupi.za_body .za_anzeige svg {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6));
}
/* Ergebnis als Anzeigetafel-Zahl (LED-Ziffern) */
body.jupi.za_body .za_summe {
  position: relative;
  z-index: 1;
  font-family: var(--za-zahl);
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--za-led);
  text-shadow: 0 0 10px rgba(126, 224, 138, .8), 0 0 30px rgba(126, 224, 138, .35);
  align-self: center;
  padding-bottom: .55rem;
}

/* Podeste der Experimente (+ Schicksalsurne als Requisite) */
body.jupi.za_body .za_podeste {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .5rem;
  margin: .15rem 0 .6rem;
}
body.jupi.za_body .za_podest {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 3.4rem;
  height: 2.55rem;
  padding-bottom: .62rem;
  color: rgba(247, 243, 232, .40);
}
/* Podestkoerper: schmaler Sockel mit heller Deckplatte */
body.jupi.za_body .za_podest::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: .62rem;
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #9fb2c8 0 2px, #3a5679 2px 100%);
  box-shadow: 0 -6px 14px rgba(0, 0, 0, .35);
}
body.jupi.za_body .za_podest svg { position: relative; z-index: 1; }
/* Die Urne ist Requisite des Versuchsstadions - sie leuchtet nicht mit. */
body.jupi.za_body .za_podest_urne { color: rgba(242, 194, 0, .55); }
/* Die gewaehlte Stufe bringt ihr Podest zum Leuchten - reines CSS (:has),
   die Knoepfe selbst bleiben unveraendert. */
body.jupi.za_body:has(.za_stufe[data-stufe="leicht"].is_active) .za_podest_muenze,
body.jupi.za_body:has(.za_stufe[data-stufe="mittel"].is_active) .za_podest_wuerfel,
body.jupi.za_body:has(.za_stufe[data-stufe="schwer"].is_active) .za_podest_doppel {
  color: #eafff0;
  filter: drop-shadow(0 0 10px rgba(126, 224, 138, .85));
}
body.jupi.za_body:has(.za_stufe[data-stufe="leicht"].is_active) .za_podest_muenze::before,
body.jupi.za_body:has(.za_stufe[data-stufe="mittel"].is_active) .za_podest_wuerfel::before,
body.jupi.za_body:has(.za_stufe[data-stufe="schwer"].is_active) .za_podest_doppel::before {
  background: linear-gradient(180deg, #eaffef 0 2px, #51c774 2px 100%);
  box-shadow: 0 0 16px rgba(126, 224, 138, .7);
}

/* Wurf-Knoepfe = Stadion-Tasten (gruen), Neu = rote Taste */
body.jupi.za_body .za_wurf_btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: .15rem 0 .05rem;
}
body.jupi.za_body .za_wurf_btns .jupi_btn {
  min-width: 4.3rem;
  min-height: 46px;
  padding: .5rem .8rem;
  border: 1px solid #9df5ab;
  border-radius: 10px;
  background: linear-gradient(180deg, #45b869 0%, #23803f 58%, #186133 100%);
  color: #f2fff4;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 4px 0 #0b3a1d, 0 8px 16px rgba(0, 0, 0, .4);
  transition: transform .1s ease, box-shadow .1s ease, background .12s ease;
}
body.jupi.za_body .za_wurf_btns .jupi_btn:hover {
  background: linear-gradient(180deg, #57cb7b 0%, #2b9450 58%, #1d7440 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 5px 0 #0b3a1d, 0 10px 20px rgba(0, 0, 0, .45);
}
body.jupi.za_body .za_wurf_btns .jupi_btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 #0b3a1d;
}
/* die rote Taste: Neu / Tipp (jupi_btn_alt) */
body.jupi.za_body .za_wurf_btns .jupi_btn_alt,
body.jupi.za_body .za_quiz_btns .jupi_btn_alt {
  border-color: #ffb3a3;
  background: linear-gradient(180deg, #c9553d 0%, #9d3624 58%, #7d2718 100%);
  color: #fff2ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #4d150c, 0 8px 16px rgba(0, 0, 0, .4);
}
body.jupi.za_body .za_wurf_btns .jupi_btn_alt:hover,
body.jupi.za_body .za_quiz_btns .jupi_btn_alt:hover {
  background: linear-gradient(180deg, #dc6248 0%, #ad3d29 58%, #8a2c1b 100%);
}
/* die Turbo-Taste (+1000) traegt den gelben Ring */
body.jupi.za_body #za_f_p1000 {
  border-color: var(--za-gelb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 0 0 3px rgba(242, 194, 0, .22), 0 4px 0 #0b3a1d, 0 8px 16px rgba(0, 0, 0, .4);
}

/* ---------- 6. Haeufigkeiten: Diagramm auf Papier -------------------- */
body.jupi.za_body .za_papier {
  border: 1px solid var(--za-papier-kante);
  color: var(--za-tinte);
  background:
    linear-gradient(180deg, #fffdf7 0%, #faf3e3 55%, #f2e8d3 100%);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .4),
    inset 0 1px 0 #fff,
    inset 0 -18px 26px rgba(140, 116, 74, .08);
}
/* Papierkante oben: feine Linie wie bei einem Formblatt */
body.jupi.za_body .za_papier::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--za-tartan-tief) 0 26px, transparent 26px 34px);
  opacity: .55;
  pointer-events: none;
}
body.jupi.za_body .za_papier h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem .6rem;
  margin: .15rem 0 .55rem;
  font-size: 1rem;
  font-weight: 800;
  color: #17324b;
}
body.jupi.za_body .za_papier .za_leiste_label {
  font-family: var(--za-zahl);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: #1c4a2c;
  background: rgba(126, 224, 138, .22);
  border: 1px solid rgba(31, 107, 52, .3);
  border-radius: 6px;
  padding: .05rem .45rem;
}

/* ---------- 7. Quiz auf der Anzeigetafel ---------------------------- */
body.jupi.za_body .za_tafel {
  border: 1px solid #2f5177;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(126, 224, 138, .09), transparent 60%),
    linear-gradient(180deg, #1a2a44 0%, #0d1727 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 34px rgba(0, 0, 0, .45),
    0 12px 26px rgba(0, 0, 0, .45);
  color: var(--za-licht);
}
body.jupi.za_body .za_tafel h3 { color: #e4f8e8; }

/* Kopfzeile des Quiz: schmale Konsole mit LED-Zahlen */
body.jupi.za_body .za_tafel_kopf {
  border: 1px solid #2b4767;
  background: linear-gradient(180deg, #22344f 0%, #131f33 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .35);
  color: #dbe7f2;
}
body.jupi.za_body .za_stat_zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  font-size: .88rem;
}
body.jupi.za_body .za_stat_zeile > span { color: #b9c9da; }
body.jupi.za_body .za_stat_zeile b {
  font-family: var(--za-zahl);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--za-led);
  text-shadow: 0 0 9px rgba(126, 224, 138, .55);
  margin-left: .15rem;
}
body.jupi.za_body .za_stat_zeile .za_icon_btn {
  margin-left: auto;
  font-size: 1rem;
  padding: .3rem .6rem;
  background: linear-gradient(180deg, #2b4162, #16243a);
  border-color: #3b5a7d;
}

/* Die Frage: LED-Schirm im Gehaeuse */
body.jupi.za_body .za_frage {
  margin: .1rem 0 .1rem;
  padding: .8rem 1rem;
  border: 1px solid #2f4d6b;
  border-radius: 10px;
  background: linear-gradient(180deg, #060d18 0%, #0a1524 100%);
  color: #e9fff0;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.45;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(126, 224, 138, .32);
  box-shadow: inset 0 0 26px rgba(126, 224, 138, .10), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.jupi.za_body .za_antworten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .7rem;
}
/* Antworten sind Reihen-Tasten der Anzeigetafel */
body.jupi.za_body .za_antwort {
  font: inherit;
  font-size: .97rem;
  font-weight: 700;
  min-height: 48px;
  padding: .55rem .75rem;
  border: 1px solid #35586f;
  border-radius: 10px;
  background: linear-gradient(180deg, #243a56 0%, #16253c 100%);
  color: #eef6ff;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 #0a1320;
  transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease;
}
body.jupi.za_body .za_antwort:hover:not(:disabled) {
  border-color: var(--za-led);
  color: #f2fff5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 16px rgba(126, 224, 138, .35), 0 3px 0 #0a1320;
}
body.jupi.za_body .za_antwort:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 0 #0a1320; }
body.jupi.za_body .za_antwort:disabled { cursor: default; }
body.jupi.za_body .za_antwort_richtig {
  border-color: #9df5ab;
  background: linear-gradient(180deg, #59cf76 0%, #2f8f4a 100%);
  color: #06210f;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 22px rgba(126, 224, 138, .55);
}
body.jupi.za_body .za_antwort_falsch {
  border-color: #e08b78;
  background: linear-gradient(180deg, #a94432 0%, #7c2a1c 100%);
  color: #ffe9e4;
  text-decoration: line-through;
}
body.jupi.za_body .za_quiz_btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
}
body.jupi.za_body .za_quiz_btns .jupi_btn {
  min-height: 44px;
  border: 1px solid #9df5ab;
  border-radius: 10px;
  background: linear-gradient(180deg, #45b869 0%, #23803f 58%, #186133 100%);
  color: #f2fff4;
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  padding: .5rem .95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 #0b3a1d;
}
body.jupi.za_body .za_quiz_btns .jupi_btn:hover { background: linear-gradient(180deg, #57cb7b 0%, #2b9450 100%); transform: translateY(-1px); }
/* Der Tipp ist die ROTE Taste - sie muss die gruene Grundregel schlagen
   (gleiche Spezifitaet, darum steht sie hier NACH der gruenen Regel). */
body.jupi.za_body .za_quiz_btns .jupi_btn_alt,
body.jupi.za_body .za_quiz_btns .jupi_btn_alt:hover {
  border-color: #ffb3a3;
  background: linear-gradient(180deg, #c9553d 0%, #9d3624 58%, #7d2718 100%);
  color: #fff2ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #4d150c, 0 8px 16px rgba(0, 0, 0, .4);
}
body.jupi.za_body .za_msg {
  margin-top: .6rem;
  font-size: .95rem;
  color: #cfdcea;
  min-height: 0;
}
body.jupi.za_body .za_msg_ok {
  color: #a9f0b6;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(126, 224, 138, .35);
}
body.jupi.za_body .za_msg_err { color: #ffb4a4; font-weight: 700; }
/* Rechenweg = Notizzettel auf dem Geraet (Papier bleibt hell) */
body.jupi.za_body .za_weg {
  margin-top: .55rem;
  padding: .6rem .8rem;
  border: 1px solid var(--za-papier-kante);
  border-radius: 10px;
  background: linear-gradient(180deg, #fdf8ec 0%, #efe5d0 100%);
  color: #22303f;
  font-size: .93rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .32), inset 0 1px 0 #fff;
}
body.jupi.za_body .za_weg[hidden] { display: none; }

/* Rundenende: Ergebnistafel auf dem Geraet */
body.jupi.za_body .za_done {
  position: relative;
  overflow: hidden;
  text-align: center;
}
body.jupi.za_body .za_done p { color: #dbe7f2; margin: .45rem 0 .8rem; font-size: .95rem; }
body.jupi.za_body .za_sterne {
  margin: .35rem 0;
  font-size: 2.05rem;
  letter-spacing: .18rem;
  filter: drop-shadow(0 0 12px rgba(242, 194, 0, .5));
}
body.jupi.za_body .za_sterne:empty { display: none; }

/* Konfetti-Regen (Kammer = .za_done, nur transform/opacity) */
body.jupi.za_body .za_konfi_box { position: absolute; inset: 0; pointer-events: none; }
body.jupi.za_body .za_konfi {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: za_konfi 1.6s ease-in forwards;
}

/* ---------- 8. Overlays: Eintrittskarte + Stadionordnung ------------- */
/* Startkarte und Stadionordnung liegen ueber der ganzen Seite (fixed): so kann
   die Karte nie aus der Buehne herausragen - auch am Handy mit wenig Hoehe.
   Der Kopf bleibt sichtbar, weil .jupi_header mit z-index 50 darueber liegt. */
body.jupi.za_body .za_overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0;
  background: radial-gradient(90% 120% at 50% 40%, rgba(6, 12, 22, .62), rgba(3, 7, 13, .86));
  overflow: auto;
}
body.jupi.za_body .za_overlay[hidden] { display: none; }
/* Karten sind Papier: bleibt in beiden Themes hell */
body.jupi.za_body .za_karte {
  position: relative;
  flex: 0 1 auto;
  margin: auto;
  width: 100%;
  max-width: 27rem;
  min-width: 0;
  max-height: none;
  padding: 1rem 1.25rem 1.1rem 1.45rem;
  border: 1px solid var(--za-papier-kante);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fffdf7 0%, #f8f0dd 62%, #f0e5cd 100%);
  color: var(--za-tinte);
  text-align: center;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .6), inset 0 1px 0 #fff;
}
/* Perforation der Eintrittskarte */
body.jupi.za_body .za_karte::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 9px;
  background-image: radial-gradient(circle at 50% 50%,
    rgba(20, 33, 58, .28) 0 2.3px, rgba(20, 33, 58, 0) 2.8px);
  background-size: 9px 15px;
  background-repeat: repeat-y;
  pointer-events: none;
}
body.jupi.za_body .za_karte h3 { margin: .1rem 0 .3rem; color: #17324b; font-size: 1.12rem; }
body.jupi.za_body .za_karte p { margin: .35rem 0; font-size: .9rem; color: #2b3c4e; }
/* Logo im dunklen Rahmen = kleiner Monitor */
body.jupi.za_body .za_karte_bild {
  width: 66px;
  height: 66px;
  padding: 3px;
  border-radius: 14px;
  border: 2px solid rgba(20, 33, 58, .35);
  background: var(--za-nacht);
  box-shadow: 0 0 18px rgba(0, 0, 0, .28);
}
body.jupi.za_body .za_start_stufen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin: .5rem 0 .6rem;
}
body.jupi.za_body .za_stufe_start {
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  min-height: 40px;
  padding: .4rem .8rem;
  border: 1px solid #2c3f58;
  border-radius: 9px;
  background: linear-gradient(180deg, #2a3d59 0%, #182740 100%);
  color: #eaf1f8;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 0 #0a1320;
}
body.jupi.za_body .za_stufe_start:hover { background: linear-gradient(180deg, #35507a, #1e3150); }
body.jupi.za_body .za_stufe_start.is_active {
  border-color: #b8f7c6;
  background: linear-gradient(180deg, #63d980 0%, #2f9a4e 60%, #237a3e 100%);
  color: #06240f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 16px rgba(126, 224, 138, .5), 0 3px 0 #0e5227;
}
/* Hauptknopf = gruene Stadion-Taste */
body.jupi.za_body .za_btn {
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  min-height: 46px;
  padding: .55rem 1.35rem;
  border: 1px solid #9df5ab;
  border-radius: 12px;
  background: linear-gradient(180deg, #45b869 0%, #23803f 58%, #186133 100%);
  color: #f2fff4;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 4px 0 #0b3a1d, 0 10px 20px rgba(0, 0, 0, .35);
  transition: transform .1s ease, box-shadow .1s ease;
}
body.jupi.za_body .za_btn:hover { transform: translateY(-1px); }
body.jupi.za_body .za_btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 #0b3a1d; }
body.jupi.za_body .za_btn_grau {
  border-color: #cfc2a6;
  background: linear-gradient(180deg, #8fa0b3, #5f7288);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #3a4757;
}

/* ❓-Hilfe-Modal (Regel 3.13.3, Typ 2) = Stadionordnung auf Papier */
body.jupi.za_body .za_modal_karte {
  max-width: 34rem;
  max-height: min(86%, 36rem);
  overflow: auto;
  text-align: left;
  padding: 1.1rem 1.35rem 1.2rem 1.6rem;
}
body.jupi.za_body .za_modal_karte h3 { font-size: 1.05rem; }
body.jupi.za_body .za_modal_karte h4 {
  margin: .85rem 0 .3rem;
  color: var(--za-tartan-tief);
  font-size: .98rem;
}
body.jupi.za_body .za_modal_karte p { margin: .45rem 0; font-size: .93rem; }
body.jupi.za_body .za_modal_karte ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; }
body.jupi.za_body .za_modal_karte li { margin: .3rem 0; font-size: .93rem; }
body.jupi.za_body .za_lernziel {
  background: rgba(126, 224, 138, .22);
  border: 1px solid rgba(31, 107, 52, .35);
  border-radius: 8px;
  padding: .5rem .75rem;
}

/* ---------- 9. Dark Mode = Nachtspiel -------------------------------- */
html[data-theme="dark"] body.jupi.za_body .za_kopf {
  background:
    radial-gradient(120% 150% at 50% -40%, rgba(126, 224, 138, .10), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #16243a 0%, #0b1524 55%, #04070d 100%);
}
html[data-theme="dark"] body.jupi.za_body .za_kopf_led { opacity: .92; }
html[data-theme="dark"] body.jupi.za_body .za_fachzeile { opacity: 1; }
html[data-theme="dark"] body.jupi.za_body .za_buehne {
  border-color: #7e2f22;
  background-color: #0a1220;
  background-image:
    repeating-linear-gradient(90deg, rgba(247, 243, 232, .035) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(247, 243, 232, .03) 0 1px, transparent 1px 74px),
    radial-gradient(120% 90% at 50% 0%, rgba(126, 224, 138, .08), transparent 62%),
    linear-gradient(180deg, #0d1727 0%, #070e18 55%, #04070d 100%);
  box-shadow:
    inset 0 0 0 3px rgba(247, 243, 232, .55),
    inset 0 0 70px rgba(0, 0, 0, .7),
    0 18px 44px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] body.jupi.za_body .za_feld,
html[data-theme="dark"] body.jupi.za_body .za_tafel {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(126, 224, 138, .13), transparent 64%),
    linear-gradient(180deg, #0f1a2b 0%, #060c15 100%);
  border-color: #34567c;
}
html[data-theme="dark"] body.jupi.za_body .za_tafel_kopf {
  background: linear-gradient(180deg, #142138 0%, #080f1a 100%);
  border-color: #2b4767;
}
html[data-theme="dark"] body.jupi.za_body .za_summe,
html[data-theme="dark"] body.jupi.za_body .za_stat_zeile b {
  text-shadow: 0 0 12px rgba(126, 224, 138, .95), 0 0 34px rgba(126, 224, 138, .45);
}
html[data-theme="dark"] body.jupi.za_body .za_frage {
  background: linear-gradient(180deg, #02060c 0%, #050b14 100%);
  border-color: #2b4a68;
  box-shadow: inset 0 0 30px rgba(126, 224, 138, .16), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="dark"] body.jupi.za_body .za_antwort {
  background: linear-gradient(180deg, #182741 0%, #0c1626 100%);
  border-color: #2f4d6b;
}
html[data-theme="dark"] body.jupi.za_body .za_antwort:hover:not(:disabled) { border-color: var(--za-led); }
/* Papier bleibt hell - auch im Nachtspiel (Tickets, Diagramm, Zettel) */
html[data-theme="dark"] body.jupi.za_body .za_papier,
html[data-theme="dark"] body.jupi.za_body .za_karte,
html[data-theme="dark"] body.jupi.za_body .za_weg { box-shadow: 0 14px 30px rgba(0, 0, 0, .7), inset 0 1px 0 #fff; }
html[data-theme="dark"] body.jupi.za_body .za_leiste { box-shadow: 0 12px 26px rgba(0, 0, 0, .7), inset 0 1px 0 #fff; }
html[data-theme="dark"] body.jupi.za_body .za_overlay {
  background: radial-gradient(90% 120% at 50% 40%, rgba(2, 5, 10, .6), rgba(1, 3, 6, .88));
}

/* ---------- 10. Handy / Tablet -------------------------------------- */
/* Forschen steht auf breiten Fenstern zweispaltig: links das
   Experimentierfeld, rechts das Diagramm-Blatt. */
body.jupi.za_body #za_forschen {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: .8rem;
  align-items: start;
}
body.jupi.za_body #za_forschen > .za_panel { margin-bottom: 0; }
@media (max-width: 52rem) {
  body.jupi.za_body #za_forschen { display: block; }
  body.jupi.za_body #za_forschen > .za_panel { margin-bottom: .7rem; }
  body.jupi.za_body #za_forschen > .za_panel:last-child { margin-bottom: 0; }
}

@media (max-width: 700px) {
  body.jupi.za_body .za_main { padding: .8rem .7rem 1.2rem; }
  body.jupi.za_body .za_buehne { border-width: 8px; padding: .7rem; border-radius: 14px; }
  body.jupi.za_body .za_panel { padding: .7rem .75rem; border-radius: 12px; }
  body.jupi.za_body .za_karte { padding: .95rem 1rem 1.05rem 1.3rem; }
  body.jupi.za_body .za_antworten { grid-template-columns: 1fr; }
  body.jupi.za_body .za_anzeige { min-height: 118px; }
  body.jupi.za_body .za_anzeige svg { width: 60px; height: 60px; }
  body.jupi.za_body .za_summe { font-size: 1.7rem; }
  /* Langer Balken-Text ("512× · 51,2 % (Soll 50,0 %)") passt so in die Bahn */
  body.jupi.za_body .za_balken_text { font-size: .72rem; }
  body.jupi.za_body .za_balken_zeile { grid-template-columns: 2.4rem 1fr; }
  body.jupi.za_body .za_podest { width: 2.9rem; height: 2.2rem; }
  /* Tasten am Handy als 3er-Raster: +1 +10 +100 / +1000 Neu */
  body.jupi.za_body .za_wurf_btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }
  body.jupi.za_body .za_wurf_btns .jupi_btn { min-width: 0; width: 100%; }
}
/* Kopfzeile am Handy: Marke oben, darunter Zurueck + Werkzeuge */
@media (max-width: 680px) {
  body.jupi.za_body .za_kopf {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    padding: .65rem .7rem 1.05rem;
  }
  body.jupi.za_body .za_kopf_marke {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-content: center;
  }
  body.jupi.za_body .za_kopf_marke img { width: 34px; height: 34px; }
  body.jupi.za_body .za_kopf_marke h1 { font-size: 1.12rem; }
  body.jupi.za_body .za_kopf .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
    font-size: .84rem;
    padding: .35rem .75rem;
  }
  body.jupi.za_body .za_kopf_werkzeuge { grid-row: 2; grid-column: 2; gap: .35rem; }
  body.jupi.za_body .za_kopf .jupi_sprachen_select { max-width: 6.6rem; font-size: .8rem; }
  body.jupi.za_body .za_leiste { padding: .45rem .8rem .5rem; }
  body.jupi.za_body .za_leiste_gruppe { gap: .35rem; }
  body.jupi.za_body .za_tab,
  body.jupi.za_body .za_stufe,
  body.jupi.za_body .za_icon_btn { font-size: .85rem; padding: .3rem .7rem; }
  body.jupi.za_body .za_stat_zeile .za_icon_btn { margin-left: 0; }
  body.jupi.za_body .za_leiste_gruppe + .za_leiste_gruppe {
    padding-left: 0;
    border-left: 0;
    border-top: 2px dashed #c8b998;
    padding-top: .45rem;
    width: 100%;
  }
  body.jupi.za_body .za_leiste_gruppe:last-child { justify-content: flex-start; }
}

/* ---------- Reihenfolge der Panels im Quiz -------------------------- */
body.jupi.za_body .za_done .za_btn { margin-top: .2rem; }

/* ---------- 11. Animationen (nur transform/opacity - billig auch auf
   Schul-PCs; wer Blaettert-Effekte ausgeschaltet hat
   (prefers-reduced-motion), sieht alles sofort und still) ---------- */
@keyframes za_wackel {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-14deg) scale(1.06); }
  50% { transform: rotate(10deg) scale(1.1); }
  75% { transform: rotate(-6deg) scale(1.04); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes za_flip {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(.12); }
  100% { transform: scaleX(1); }
}
@keyframes za_pop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes za_schuetter {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes za_rein {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes za_stern {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  70% { transform: scale(1.4) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes za_puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes za_konfi {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(150px) rotate(480deg); opacity: 0; }
}
/* Wuerfel wackeln beim Rollen, Muenz-Flip als scaleX-Trick */
body.jupi.za_body .za_rollt svg { animation: za_wackel .18s ease-in-out infinite; }
body.jupi.za_body .za_flippt svg { animation: za_flip .22s ease-in-out infinite; }
/* Quiz-Feedback + Buehnen-Effekte (einmalig, per Klasse angestossen) */
body.jupi.za_body .za_pop_ein { animation: za_pop .3s ease both; }
body.jupi.za_body .za_schuetter { animation: za_schuetter .35s ease; }
body.jupi.za_body .za_frage_ein { animation: za_rein .3s ease both; }
body.jupi.za_body .za_karte_ein { animation: za_pop .35s ease both; }
body.jupi.za_body .za_stern { display: inline-block; animation: za_stern .45s ease both; }
/* Weiter-Knopf pocht sanft, bis man klickt */
body.jupi.za_body .za_weiter_puls { animation: za_puls 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  body.jupi.za_body .za_rollt svg,
  body.jupi.za_body .za_flippt svg,
  body.jupi.za_body .za_pop_ein,
  body.jupi.za_body .za_schuetter,
  body.jupi.za_body .za_frage_ein,
  body.jupi.za_body .za_karte_ein,
  body.jupi.za_body .za_stern,
  body.jupi.za_body .za_weiter_puls { animation: none !important; }
  body.jupi.za_body .za_konfi { animation: none !important; opacity: 0 !important; }
}

/* ---------- Diagramm-Balken: Farben des Spiels bleiben unveraendert ---
   (Chart wird nur gerahmt - Bahn, Fuellung und Soll-Strich wie bisher) */
body.jupi.za_body .za_balken { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
body.jupi.za_body .za_balken_zeile {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: .5rem;
  align-items: center;
}
body.jupi.za_body .za_balken_name { font-weight: 700; color: #45607a; font-size: .9rem; text-align: right; }
body.jupi.za_body .za_balken_bahn {
  position: relative;
  height: 1.9rem;
  background: #eef3f6;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(23, 73, 127, .16);
}
body.jupi.za_body .za_balken_fuellung {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(180deg, #66bb6a, #43a047);
  border-radius: .5rem;
  transition: width .35s ease;
}
body.jupi.za_body .za_balken_soll {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: #e53935;
  opacity: .85;
}
body.jupi.za_body .za_balken_text {
  position: absolute;
  left: .5rem;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: .82rem;
  font-weight: 700;
  color: #17497f;
  white-space: nowrap;
}
/* Kennzahlen = kleines LED-Ablesegeraet am Fuss des Papiers */
body.jupi.za_body .za_kenn {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
  margin-top: .6rem;
  padding: .4rem .65rem;
  border-radius: 8px;
  border: 1px solid #2b4767;
  background: linear-gradient(180deg, #22344f 0%, #131f33 100%);
  color: #b9c9da;
  font-size: .84rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.jupi.za_body .za_kenn b {
  font-family: var(--za-zahl);
  font-size: 1rem;
  color: var(--za-led);
  text-shadow: 0 0 8px rgba(126, 224, 138, .55);
}
/* Aha-Satz = Notizzettel auf dem Papier */
body.jupi.za_body .za_aha {
  margin-top: .55rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(31, 107, 52, .35);
  border-left: 4px solid var(--za-led-tief);
  border-radius: 8px;
  background: rgba(126, 224, 138, .16);
  color: #1c3a26;
  font-size: .9rem;
}
body.jupi.za_body .za_aha[hidden] { display: none; }