/* zeitmaschine-gui-v2 - Zeitmaschine, eigenes Stylesheet des PWA-Pakets.
   THEMA: UHRWERK- & PORTAL-HALLE (AGENTS.md 3.13.6 / 3.13.6b).
   Die Kinder schicken englische Saetze durch DREI TORBOEGEN (Gestern / Heute /
   Morgen). Darum ist die Buehne ein Portal-Pult aus Stein und Messing, die
   Antworten sind Portal-Kaertchen mit Zeit-Rune, die Punkte stehen auf einem
   Uhrwerk-Zifferblatt und das Ergebnis ist eine Zeitstempel-Karte.
   Alles haengt an body.jupi.zm_body - die Plattform-Dateien (jupi.css, i18n.js)
   bleiben unveraendert und werden hier nur ueberschrieben.

   Merksatz (Muster Rechen-Raumschiff): ALLES, was das Layout traegt, steht hier.
   Wer eine Regel aendert, misst danach (node .zcode/leisten-pruef.cjs), statt den
   Quelltext zu lesen. */

/* ---------- 0) Grundlagen ---------- */
[hidden] { display:none !important; }

body.jupi.zm_body {
  /* Material der Halle */
  --zm-stein:#6a6153;
  --zm-stein-d:#4b4438;
  --zm-nacht:#211d17;
  --zm-nacht-2:#2b251d;
  --zm-messing:#c9a45c;
  --zm-messing-l:#f0d9a0;
  --zm-messing-d:#8a6b2f;
  --zm-kreide:#f5ecd8;
  --zm-kreide-d:#d9cbb0;
  --zm-tinte:#2a2110;
  --zm-pergament:#f8f0dd;
  --zm-pergament-d:#e7d8b6;
  --zm-gut:#9fdcae;
  --zm-schlecht:#f0938a;
  color-scheme: dark light;

  /* EINE gestreckte Szene, kein Kachelmuster (3.13.7 Weg A) */
  background-color:#2f2a22;
  background-image:
    radial-gradient(120% 92% at 50% 32%, rgba(255,214,150,.10) 0%, rgba(0,0,0,.10) 58%, rgba(0,0,0,.40) 100%),
    url("kulisse.svg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--zm-kreide);
}
/* Dark Mode = dieselbe Halle bei Nacht: Kulisse gedaempft, Portalglut waermer */
html[data-theme="dark"] body.jupi.zm_body {
  background-image:
    radial-gradient(120% 92% at 50% 32%, rgba(255,168,74,.20) 0%, rgba(12,9,6,.34) 55%, rgba(8,6,4,.72) 100%),
    linear-gradient(rgba(10,8,6,.34), rgba(10,8,6,.46)),
    url("kulisse.svg");
  background-size: cover, cover, cover;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}

/* Leiste buendig oben, Fuss buendig unten (3.13.2a) */
body.jupi.zm_body { min-height:100dvh; }
.jupi_container { grid-template-rows:0 auto 1fr auto; min-height:100dvh; }
.jupi_main { grid-area:main; margin:0 auto; padding:.7rem 1rem 0; max-width:100%; width:100%; box-sizing:border-box; }
/* jupi.css faerbt .jupi_main und .jupi_footer weiss - hier muss die Halle durchscheinen */
body.jupi.zm_body .jupi_main,
body.jupi.zm_body .jupi_container { background:transparent; }
body.jupi.zm_body > .jupi_container { display:grid; }
body.jupi.zm_body .jupi_footer { margin-top:auto; }

/* ---------- 1) JUPI-Leiste in Stein und Messing ---------- */
.zm_header {
  position:sticky; top:0; z-index:60; margin:0;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:1rem; padding:.5rem 1rem;
  background:linear-gradient(180deg,#6f6657 0%, #574e42 52%, #453d33 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  color:var(--zm-kreide);
}
/* Messingkante als unterer Abschluss der Steinkonsole */
.zm_header::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,#7a5c24,#e8cf94 20%,#a8823c 50%,#e8cf94 80%,#7a5c24);
  opacity:.9;
}
.zm_brand { display:flex; align-items:center; justify-self:center; gap:.65rem; min-width:0; }
.zm_brand img {
  display:block; flex:none; width:40px; height:40px; object-fit:contain; aspect-ratio:1;
  border-radius:12px; box-shadow:0 0 0 2px rgba(240,217,160,.55), 0 3px 8px rgba(0,0,0,.45);
}
.zm_brand h1 {
  margin:0; color:#fbf3e2; font-family:Georgia,"Times New Roman",serif;
  font-size:1.3rem; line-height:1.15; letter-spacing:.04em;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.zm_brand_unter {
  display:block; margin-top:.15rem; font-size:.63rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#e8cf94;
}
.zm_header .jupi_nav_back {
  position:static; justify-self:start; display:flex; align-items:center;
  border-radius:999px; padding:.4rem .8rem; line-height:1.2; font-size:.88rem;
  background:linear-gradient(180deg,#f7e6bd,#dcbd80);
  color:#3a2c12; border:1px solid #8a6b2f; font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
.zm_header .jupi_nav_back:hover { background:linear-gradient(180deg,#fff5dc,#e8cf94); color:#2a2110; }
.zm_header .jupi_werkzeuge { position:static; justify-self:end; display:flex; align-items:center; gap:.4rem; }
.zm_header #jupi_sprachen_wahl { display:inline-flex; align-items:center; gap:.3rem; }
.zm_header .jupi_sprachen_select {
  min-height:40px; color:#f7ecd4; border-radius:999px;
  background:rgba(24,19,13,.55); border:1px solid rgba(240,217,160,.5);
}
.zm_header .jupi_sprachen_select:hover { background:rgba(24,19,13,.75); }
.zm_header .jupi_sprachen_select option { color:#212121; background:#fff; }
.zm_header .jupi_theme_switch {
  width:74px; height:40px; min-width:74px; padding:0;
  background:rgba(24,19,13,.55); border:1px solid rgba(240,217,160,.5);
}
.zm_header .jts_thumb { top:3px; bottom:auto; left:4px; width:32px; height:32px; border-radius:50%; }
html[data-theme="dark"] .zm_header .jts_thumb { left:calc(100% - 36px); }
.zm_header .jts_sun { left:9px; } .zm_header .jts_moon { right:9px; }
html[data-theme="dark"] .zm_header {
  background:linear-gradient(180deg,#2f2a22 0%, #241f19 55%, #171310 100%);
}

/* ---------- 2) Die Konsole: Portal-Pult aus Stein und Messing ---------- */
.zm_konsole {
  position:relative; max-width:62rem; margin:0 auto;
  padding:.85rem 1rem 1.1rem; border-radius:1.1rem;
  background:linear-gradient(180deg, rgba(58,50,40,.97) 0%, rgba(34,29,23,.98) 100%);
  border:1px solid rgba(240,217,160,.30);
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09),
             inset 0 0 0 3px rgba(0,0,0,.28);
}
.zm_konsole::before {
  content:""; position:absolute; left:1.1rem; right:1.1rem; top:.34rem; height:3px;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,#7a5c24 10%,#f0d9a0 50%,#7a5c24 90%,transparent);
  opacity:.75;
}

/* HUD oben rechts: Messing-Instrumente */
.zm_setup {
  display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; align-items:flex-end;
  justify-content:flex-end; padding:0 0 .6rem; margin:0 0 .1rem;
  border-bottom:1px solid rgba(240,217,160,.22);
}
.zm_setup .zm_stat { text-align:left; }
.zm_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.zm_stat label {
  font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#c0a878;
}
.zm_stat span { font-size:1.3rem; font-weight:800; color:#f5ecd8; font-family:Georgia,serif; }
/* Punkte auf einem Uhrwerk-Zifferblatt */
.zm_stat_uhr span {
  display:grid; place-items:center; width:3.05rem; height:3.05rem; border-radius:50%;
  margin-top:.15rem; font-size:1.05rem; color:#f0d9a0;
  background:
    repeating-conic-gradient(from -90deg, rgba(240,217,160,.55) 0deg 1.5deg, transparent 1.5deg 30deg),
    radial-gradient(circle at 50% 38%, #3a3227 0%, #1b1712 72%);
  box-shadow:inset 0 0 0 2px #a8823c, inset 0 0 12px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45);
}
.zm_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.zm_controls label { font-weight:700; font-size:.9rem; color:var(--zm-kreide-d); }
/* Das Wort "Schwierigkeit" ist fuer Screenreader da, im Bild stoert es nur. */
.zm_sr_only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.zm_werkzeug {
  min-width:40px; min-height:40px; font-size:1.1rem; line-height:1; cursor:pointer;
  border-radius:.6rem; color:#f7ecd4;
  background:linear-gradient(180deg,#4b4134,#2b251d);
  border:1px solid rgba(240,217,160,.42);
  box-shadow:0 2px 0 #171310, inset 0 1px 0 rgba(255,255,255,.12);
}
.zm_werkzeug:hover { border-color:#f0d9a0; background:linear-gradient(180deg,#5b4f3e,#333027); }
.zm_werkzeug:focus-visible { outline:3px solid #f0d9a0; outline-offset:2px; }
.zm_setup .jupi_select {
  min-height:40px; border-radius:.6rem; color:#f7ecd4;
  background:linear-gradient(180deg,#4b4134,#2b251d);
  border:1px solid rgba(240,217,160,.42); font-weight:700;
}
.zm_setup .jupi_select option { color:#212121; background:#fff; }

/* ---------- 3) Die Buehne: das Portal-Pult ---------- */
.zm_buehne {
  /* Portal-Farben (Bedeutung, keine Themenfarbe): Vergangenheit / Gegenwart / Zukunft */
  --zm-gestern:#7b86d6;
  --zm-heute:#5fae86;
  --zm-morgen:#e0913f;
  position:relative; margin:.55rem 0 1rem; padding:.9rem .95rem 1rem;
  border-radius:.9rem;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(240,217,160,.10), transparent 62%),
    linear-gradient(180deg,#2b251d 0%, #1e1a14 72%, #17130e 100%);
  box-shadow:inset 0 0 0 2px rgba(240,217,160,.18), inset 0 14px 34px rgba(0,0,0,.55),
             0 2px 0 rgba(255,255,255,.05);
}
/* Messingkante unten am Pult */
.zm_buehne::after {
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,#8a6b2f,#f0d9a0 50%,#8a6b2f,transparent);
  opacity:.55; pointer-events:none;
}
/* Eingraviertes Schild am Pult */
.zm_pult_schild {
  display:block; width:max-content; max-width:100%; margin:.1rem auto .85rem;
  padding:.2rem 1.1rem; border-radius:.35rem; text-align:center;
  font-family:Georgia,"Times New Roman",serif; font-size:.74rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:#2c2110;
  background:linear-gradient(180deg,#f7e6bd,#c9a45c 55%,#a8823c);
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Drei Torbogen - die Zeitleiste IST die Antwort */
.zm_zeitleiste {
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:.7rem; padding-top:2.6rem; margin:0 0 1rem;
}
.zm_schiene {
  position:absolute; left:12%; right:12%; top:1.4rem; height:5px; border-radius:3px;
  background:linear-gradient(90deg,var(--zm-gestern) 0%, var(--zm-heute) 50%, var(--zm-morgen) 100%);
  opacity:.5; box-shadow:0 0 12px rgba(240,217,160,.22); z-index:0;
}
.zm_marker {
  position:absolute; top:.1rem; left:50%; transform:translateX(-50%);
  z-index:2; pointer-events:none; transition:left .4s ease;
}
.zm_marker_uhr { font-size:1.5rem; display:block; filter:drop-shadow(0 0 8px rgba(255,200,120,.85)); }

.zm_station {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.1rem; width:min(100%,13.5rem); margin-inline:auto;
  min-height:8.2rem; padding:1.4rem .5rem .9rem; text-align:center;
  border:0; border-radius:9rem 9rem .6rem .6rem;
  color:#f7ecd4; font-family:inherit;
  background:
    radial-gradient(95% 72% at 50% 104%, var(--zm-glas, rgba(240,217,160,.34)) 0%, transparent 66%),
    linear-gradient(180deg,#3b3428 0%, #241f18 100%);
  box-shadow:inset 0 0 0 3px var(--zm-ring, #8a6b2f),
             inset 0 0 0 5px rgba(0,0,0,.5),
             inset 0 10px 22px rgba(0,0,0,.55),
             0 6px 16px rgba(0,0,0,.45);
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}
.zm_station::before { /* Schluesselstein am Bogenscheitel */
  content:""; position:absolute; top:.3rem; left:50%; transform:translateX(-50%);
  width:1.25rem; height:.5rem; border-radius:1px 1px 2px 2px;
  background:linear-gradient(180deg,#f7e6bd,#a8823c);
  box-shadow:0 1px 3px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.6);
}
.zm_station[data-zeit="gestern"] { --zm-ring:var(--zm-gestern); --zm-glas:rgba(123,134,214,.42); }
.zm_station[data-zeit="heute"]   { --zm-ring:var(--zm-heute);   --zm-glas:rgba(95,174,134,.42); }
.zm_station[data-zeit="morgen"]  { --zm-ring:var(--zm-morgen);  --zm-glas:rgba(224,145,63,.42); }
.zm_station_name {
  font-family:Georgia,"Times New Roman",serif; font-weight:800; font-size:1.05rem;
  letter-spacing:.03em;
}
.zm_station_wort {
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,236,216,.62); font-family:ui-monospace,"Consolas",monospace;
}
/* Als Antwort dient das Tor als grosser Tap-Knopf */
.zm_station_button { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.zm_station_button:hover:not(:disabled) { transform:translateY(-3px); filter:brightness(1.12); }
.zm_station_button:focus-visible { outline:3px solid #f0d9a0; outline-offset:3px; }
.zm_station_button:disabled { cursor:default; }
/* Nur Anzeige (Luecke-/Strahl-Aufgabe): ruhiger, nicht wie ein toter Knopf */
.zm_station:not(.zm_station_button) { filter:saturate(.8) brightness(.94); }
.zm_station_richtig {
  box-shadow:inset 0 0 0 3px var(--zm-gut), inset 0 0 0 5px rgba(0,0,0,.45),
             0 0 24px rgba(159,220,174,.5), 0 6px 16px rgba(0,0,0,.45);
  filter:none;
}
.zm_station_falsch {
  box-shadow:inset 0 0 0 3px var(--zm-schlecht), inset 0 0 0 5px rgba(0,0,0,.45),
             0 0 20px rgba(240,147,138,.45), 0 6px 16px rgba(0,0,0,.45);
  animation:zm_shake .32s;
}

/* ---------- 4) Aufgabe, Satz, Luecke ---------- */
.zm_auftrag {
  margin:0 0 .7rem; font-weight:700; font-size:1rem; text-align:center;
  color:#e8cf94; letter-spacing:.01em;
}
.zm_satz {
  margin:.2rem 0 1rem; text-align:center; font-size:1.45rem; line-height:1.7;
  font-weight:700; color:#fbf3e2;
}
/* Satz im Portal-Fenster (Portal-Aufgaben) */
.zm_satz_portal {
  margin:.2rem 0 1rem; padding:.85rem 1rem; font-size:1.5rem;
  border-radius:.7rem; background:rgba(10,8,6,.5);
  box-shadow:inset 0 0 0 2px rgba(240,217,160,.28), inset 0 0 30px rgba(0,0,0,.6);
}
.zm_luecke {
  display:inline-block; min-width:5.6rem; padding:.05rem .7rem; margin:0 .25rem;
  border-radius:.45rem; background:linear-gradient(180deg,#6fbe94,#3f8f6a);
  color:#08211a; font-weight:800; text-align:center;
  box-shadow:0 0 0 3px rgba(95,174,134,.28), 0 0 16px rgba(95,174,134,.45);
}
.zm_luecke_loesung {
  background:linear-gradient(180deg,#f7e6bd,#c9a45c); color:#2a2110;
  box-shadow:0 0 0 3px rgba(240,217,160,.35);
}

/* ---------- 5) Antworten: Portal-Kaertchen mit Zeit-Rune ---------- */
.zm_chips { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.zm_chip {
  position:relative; font-family:inherit; font-size:1.15rem; font-weight:800;
  padding:.78rem 1.35rem .78rem 2.7rem; border-radius:.5rem; cursor:pointer;
  color:#f7ecd4; background:linear-gradient(180deg,#4b4134,#2b251d);
  border:1px solid rgba(240,217,160,.38);
  box-shadow:0 3px 0 #16120e, 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.zm_chip::before { /* Zeit-Rune: Messing-Raute */
  content:""; position:absolute; left:1rem; top:50%; width:.72rem; height:.72rem;
  transform:translateY(-50%) rotate(45deg);
  border:2px solid var(--zm-messing); box-shadow:0 0 8px rgba(201,164,92,.55);
}
.zm_chip:hover:not(:disabled) { transform:translateY(-2px); border-color:#f0d9a0; }
.zm_chip:focus-visible { outline:3px solid #f0d9a0; outline-offset:2px; }
.zm_chip.gewaehlt {
  background:linear-gradient(180deg,#f7e6bd,#c9a45c); color:#2a2110;
  border-color:#f0d9a0; box-shadow:0 0 0 2px #f0d9a0, 0 0 20px rgba(240,217,160,.5);
  transform:translateY(-2px);
}
.zm_chip.gewaehlt::before { border-color:#3a2c12; box-shadow:none; }
.zm_chip_falsch {
  background:linear-gradient(180deg,#8e3a34,#5a221e); color:#ffe9e6;
  border-color:var(--zm-schlecht); animation:zm_shake .32s;
}
.zm_chip:disabled { cursor:default; opacity:1; }
@keyframes zm_shake {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-7px); }
  75% { transform:translateX(7px); }
}

/* Zeitstrahl-Aufgabe: drei Saetze in eine Messing-Ablage sortieren */
.zm_strahl_zeile {
  display:flex; flex-direction:column; gap:.5rem; margin:0 0 1rem;
  border:2px dashed rgba(240,217,160,.35); border-radius:.7rem; padding:.8rem;
  min-height:7rem; align-items:stretch; background:rgba(0,0,0,.22);
}
.zm_strahl_zeile:empty::after {
  content:"1 \203A 2 \203A 3"; align-self:center; margin:auto;
  color:rgba(240,217,160,.42); font-size:1.05rem; font-weight:800; letter-spacing:.1em;
}
.zm_strahl_kacheln { display:flex; flex-direction:column; gap:.5rem; }
.zm_strahl_kachel, .zm_strahl_antwort {
  font-family:inherit; text-align:left; cursor:pointer;
  font-size:1.02rem; line-height:1.5; font-weight:600; border-radius:.55rem;
  padding:.7rem .9rem;
}
.zm_strahl_kachel {
  color:#f7ecd4; background:linear-gradient(180deg,#4b4134,#2b251d);
  border:1px solid rgba(240,217,160,.38);
  box-shadow:0 3px 0 #16120e, 0 5px 12px rgba(0,0,0,.4);
  transition:transform .12s ease, border-color .12s ease;
}
.zm_strahl_kachel:hover:not(:disabled) { border-color:#f0d9a0; transform:translateY(-2px); }
.zm_strahl_antwort {
  position:relative; padding-left:3rem; color:#fbf3e2;
  background:linear-gradient(180deg,#3d3a2a,#252218);
  border:1px solid var(--zm-messing);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.4);
}
.zm_strahl_kachel:focus-visible, .zm_strahl_antwort:focus-visible {
  outline:3px solid #f0d9a0; outline-offset:2px;
}
.zm_strahl_kachel:disabled, .zm_strahl_antwort:disabled { cursor:default; opacity:1; }
.zm_strahl_nr {
  position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border-radius:50%; color:#2a2110;
  font-size:.9rem; font-weight:800;
  background:linear-gradient(180deg,#f7e6bd,#a8823c);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ---------- 6) Werkzeugleiste, Meldungen, Uebersetzung ---------- */
.zm_btns { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin:1.1rem 0 0; }
.zm_konsole .jupi_btn {
  border-radius:.55rem; font-weight:800; padding:.6rem 1.1rem;
  border:1px solid rgba(240,217,160,.4);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.zm_konsole .jupi_btn_primary {
  color:#2a2110; border-color:#8a6b2f;
  background:linear-gradient(180deg,#f7e6bd,#c9a45c);
  box-shadow:0 3px 0 #6b5122, 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.65);
}
.zm_konsole .jupi_btn_primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.zm_konsole .jupi_btn_alt {
  color:#f7ecd4; background:linear-gradient(180deg,#4b4134,#2b251d);
  box-shadow:0 3px 0 #16120e, 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.zm_konsole .jupi_btn_alt:hover { filter:brightness(1.15); transform:translateY(-1px); }
.zm_konsole .jupi_btn:focus-visible { outline:3px solid #f0d9a0; outline-offset:2px; }

/* Die deutsche Uebersetzung liegt wie ein Zettel auf dem Pult (darf hell bleiben) */
.zm_de {
  margin:.9rem 0 0; padding:.7rem .9rem; border-radius:.5rem;
  background:linear-gradient(180deg,#fbf5e6,#eee0c2); color:var(--zm-tinte);
  border:1px solid #c9a45c; font-size:1rem; line-height:1.55;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.zm_translation { color:var(--zm-tinte); border-style:dashed; }
.zm_msg { min-height:1.7rem; margin-top:.8rem; font-weight:800; text-align:center; }
.zm_msg_richtig { color:var(--zm-gut); }
.zm_msg_falsch  { color:#ffa9a1; }
.zm_msg_tipp    { color:var(--zm-kreide-d); }
.zm_loesung_knopf { border-color:#8e3a34; color:#ffb4ad; }

/* ---------- 7) Ergebnis: Zeitstempel-Karte ---------- */
.zm_ende {
  position:relative; max-width:62rem; margin:0 auto 1rem; padding:1.2rem 1.1rem 1.3rem;
  text-align:center; border-radius:.8rem; color:var(--zm-tinte);
  background:
    repeating-linear-gradient(180deg, rgba(160,130,80,.07) 0 1px, transparent 1px 22px),
    linear-gradient(180deg,var(--zm-pergament),var(--zm-pergament-d));
  border:2px solid #c9a45c;
  box-shadow:0 16px 34px rgba(0,0,0,.5), inset 0 0 0 6px rgba(201,164,92,.16);
}
.zm_ende h3 { margin:.1rem 0 .5rem; font-family:Georgia,"Times New Roman",serif; color:#3a2c12; }
.zm_stempel {
  display:inline-block; margin:0 0 .4rem; padding:.15rem 1rem;
  border:3px double #8a6b2f; border-radius:.35rem; transform:rotate(-4deg);
  font-family:Georgia,serif; font-size:.72rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase; color:#8a6b2f; opacity:.85;
}
.zm_sterne { font-size:2.3rem; letter-spacing:.12rem; line-height:1.2; }
.zm_stern { color:#bdb097; }
.zm_stern_an { color:#b8860b; }
.zm_sterne_label {
  display:block; font-size:.76rem; letter-spacing:.06em; color:#7a5c24;
  font-weight:800; margin-bottom:.2rem;
}
.zm_ende_bestzeile { margin:.5rem 0 0; font-weight:800; color:#7a5c24; }
.zm_ende_punkte { margin:.4rem 0 .9rem; font-size:1.1rem; }
.zm_ende_btns { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
/* Knoepfe auf der Zeitstempel-Karte: Papier + Messing */
.zm_ende .jupi_btn_primary {
  color:#2a2110; border:1px solid #8a6b2f;
  background:linear-gradient(180deg,#f7e6bd,#c9a45c);
  box-shadow:0 3px 0 #6b5122, 0 6px 14px rgba(0,0,0,.3);
}
.zm_ende .jupi_btn_alt {
  color:#f7ecd4; background:linear-gradient(180deg,#4b4134,#2b251d);
  border:1px solid rgba(240,217,160,.4); box-shadow:0 3px 0 #16120e;
}

/* ---------- 8) Start-Overlay: Schild ueber dem Pult ---------- */
.jupi_startoverlay.zm_startoverlay {
  border-radius:.8rem; padding:1.2rem;
  background:radial-gradient(120% 100% at 50% 0%, rgba(46,38,29,.82), rgba(14,11,8,.91));
  backdrop-filter:blur(3px); color:var(--zm-kreide);
  box-shadow:inset 0 0 0 2px rgba(240,217,160,.45), inset 0 0 60px rgba(0,0,0,.7);
  overflow:auto;
}
.zm_startoverlay { text-align:center; }
.zm_startoverlay h3 {
  margin:.1rem 0 .5rem; font-family:Georgia,"Times New Roman",serif; color:#fbf3e2;
}
.zm_startoverlay p { max-width:34rem; margin:0 auto 1.1rem; line-height:1.6; color:var(--zm-kreide-d); }

/* ---------- 9) ❓-Hilfe: Pergament-Blatt mit Messingrahmen ---------- */
.zm_dialog {
  width:min(46rem,calc(100% - 2rem)); max-height:85dvh; overflow:auto;
  padding:1rem 1.1rem 1.2rem; border-radius:.8rem;
  color:var(--zm-tinte);
  background:linear-gradient(180deg,#fbf5e6,#eee0c2);
  border:3px solid #c9a45c;
  box-shadow:0 22px 50px rgba(0,0,0,.6), inset 0 0 0 6px rgba(201,164,92,.16);
}
.zm_dialog::backdrop { background:rgba(6,5,4,.68); }
.zm_dialog form { display:flex; justify-content:flex-end; }
.zm_dialog .jupi_btn {
  color:#f7ecd4; background:linear-gradient(180deg,#4b4134,#2b251d);
  border:1px solid rgba(240,217,160,.4); border-radius:.55rem; font-weight:800;
}
.zm_dialog h2 { margin:.5rem 0; font-family:Georgia,"Times New Roman",serif; color:#3a2c12; }
.zm_merksaetze { margin:.2rem 0; padding-left:1.2rem; }
.zm_merksaetze li { margin:.6rem 0; line-height:1.55; }
/* "Ueber das Spiel" im Hilfe-Dialog */
.zm_ueber { margin:.4rem 0 .6rem; }
.zm_ueber summary {
  cursor:pointer; font-weight:700; padding:.4rem .7rem; border-radius:.5rem;
  background:rgba(201,164,92,.3); color:#3a2c12; border:1px solid rgba(138,107,47,.45);
}
.zm_ueber p { margin:.5rem .2rem 0; line-height:1.65; }
.zm_lernziel {
  margin:.9rem 0 0; padding:.7rem .9rem; border-radius:.5rem;
  background:rgba(201,164,92,.2); border-left:5px solid #a8823c; color:#2a2110;
}

/* Alle Bedienziele sind mindestens 40 x 40 px (Regel 3.13.5) */
button, select, .jupi_nav_back, input[type="range"] { min-width:40px; min-height:40px; }

/* Die Plattform faerbt Knoepfe im Dark Mode orange (html[data-theme="dark"] .jupi_btn_primary
   ist spezifischer) - auf dem Pult bleibt es Messing. */
html[data-theme="dark"] .zm_konsole .jupi_btn_primary,
html[data-theme="dark"] .zm_ende .jupi_btn_primary {
  background:linear-gradient(180deg,#f7e6bd,#c9a45c); color:#2a2110;
  box-shadow:0 3px 0 #6b5122, 0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-theme="dark"] .zm_konsole .jupi_btn_alt,
html[data-theme="dark"] .zm_ende .jupi_btn_alt,
html[data-theme="dark"] .zm_dialog .jupi_btn {
  background:linear-gradient(180deg,#4b4134,#2b251d); color:#f7ecd4;
  box-shadow:0 3px 0 #16120e, 0 6px 16px rgba(0,0,0,.4);
}
html[data-theme="dark"] .zm_konsole .jupi_btn:hover,
html[data-theme="dark"] .zm_ende .jupi_btn:hover { filter:brightness(1.1); }
html[data-theme="dark"] .zm_setup .jupi_select {
  background:linear-gradient(180deg,#4b4134,#2b251d); color:#f7ecd4;
  border-color:rgba(240,217,160,.42);
}

/* ---------- 10) Fusszeile: Steinsockel mit Messingkante ---------- */
body.jupi.zm_body .jupi_footer {
  margin-top:auto; border-radius:.7rem .7rem 0 0;
  background:linear-gradient(180deg,#3a332a,#211d17);
  border-top:3px solid #a8823c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 -6px 18px rgba(0,0,0,.4);
  color:var(--zm-kreide-d);
}
body.jupi.zm_body .jupi_footer p { margin:.45rem 0; font-size:.82rem; text-align:center; color:var(--zm-kreide-d); }
body.jupi.zm_body .jupi_footer a { color:#e8cf94; font-weight:700; text-decoration:none; }
body.jupi.zm_body .jupi_footer a:hover { text-decoration:underline; }

/* ---------- 11) Handy: alles untereinander, groessere Tap-Ziele ---------- */
@media (max-width:800px){
  .zm_header { grid-template-columns:minmax(0,1fr) auto; gap:.4rem; padding:.5rem .6rem; }
  .zm_brand { grid-row:1; grid-column:1 / -1; }
  .zm_brand img { width:34px; height:34px; }
  .zm_brand h1 { font-size:1.14rem; }
  .zm_header .jupi_nav_back { grid-row:2; grid-column:1; font-size:.85rem; }
  .zm_header .jupi_werkzeuge { grid-row:2; grid-column:2; }
  .zm_header .jupi_sprachen_select { max-width:7rem; }
}
@media (max-width:600px){
  .jupi_main { padding:.5rem .55rem 0; }
  .zm_konsole { padding:.75rem .65rem .85rem; border-radius:.85rem; }
  .zm_konsole::before { left:.7rem; right:.7rem; top:.26rem; }
  .zm_setup { gap:.45rem .8rem; justify-content:space-between; }
  .zm_stat { min-width:3.6rem; }
  .zm_buehne { padding:.75rem .55rem .85rem; }
  .zm_pult_schild { font-size:.66rem; letter-spacing:.16em; padding:.18rem .7rem; }
  .zm_zeitleiste { gap:.45rem; padding-top:2.2rem; }
  .zm_station { min-height:5.3rem; padding:.95rem .25rem .6rem; }
  .zm_station_name { font-size:.92rem; }
  .zm_station_wort { font-size:.6rem; letter-spacing:.1em; }
  .zm_marker_uhr { font-size:1.3rem; }
  .zm_auftrag { font-size:.92rem; }
  .zm_satz { font-size:1.2rem; }
  .zm_satz_portal { font-size:1.22rem; padding:.7rem .6rem; }
  .zm_chip { font-size:1.05rem; padding:.65rem 1rem .65rem 2.35rem; }
  .zm_chip::before { left:.85rem; width:.6rem; height:.6rem; }
  .zm_strahl_kachel, .zm_strahl_antwort { font-size:.95rem; }
  .zm_konsole .jupi_btn { padding:.55rem .85rem; font-size:.9rem; }
  .zm_stempel { font-size:.66rem; letter-spacing:.16em; }
}
@media (max-width:360px){
  .zm_header .jupi_nav_back { grid-row:2; grid-column:1 / -1; justify-self:center; }
  .zm_header .jupi_werkzeuge { grid-row:3; grid-column:1 / -1; justify-self:center; }
}

/* ---------- 12) Bewegungsreduktion (Regel 3.13.5) ---------- */
@media (prefers-reduced-motion:reduce){
  .zm_chip, .zm_strahl_kachel, .zm_station_button, .zm_marker,
  .zm_konsole .jupi_btn { transition:none !important; }
  .zm_chip_falsch, .zm_station_falsch { animation:none !important; }
}