/* ============================================================
   Zahlen-Echo - Oberflaeche im Klassenzimmer-Look
   Holz-Leiste, gruene Tafel, dicke Antwortkacheln auf dem Tisch.
    Vorlage: Referenzbild "Schulbank mit Tafel".
   Alle Regeln stehen ueber den Plattform-Styles, damit der
   Paketbau (node .zcode/daz-paar-bauen.cjs) nichts zurueckstellt.
   ============================================================ */

/* ---------- 1. Klassenzimmer als Hintergrund ---------- */
/* Seitenkulisse = EINE gemalte Szene (raum.svg, 1440x900) mit cover und
   no-repeat - keine Kachel, keine sichtbare Wiederholung (Regel 3.13.7). */
body.zahlen_raum{
  background:#e0c49a;
  color:#3a2a19;
  /* Leisten-Regel 3.13.2a: Seite als Spalte, damit der Fuss unten klebt. */
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.zahlen_raum_bild{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("raum.svg") center center/cover no-repeat;
}
body.zahlen_raum .jupi_container{
  position:relative;z-index:1;background:transparent;
  /* Die Leiste oben verankern (Nutzer-Meldung 26.10.2026): das Plattform-Raster
     hat nur auto-Reihen, align-content:stretch verteilt deshalb den
     Ueberschuss hoher Fenster AUF ALLE Reihen - die Leiste rutschte nach
     unten und wurde dicker (gemessen 30 px bei 900, 75 px bei 1080 Hoehe).
     Die Hauptreihe (1fr) frisst den Ueberschuss jetzt selbst, Leiste und
     Fuss bleiben an ihren Enden. Zeile 1 ist die leere bypass-Flaeche des
     Plattform-Rasters. */
  grid-template-rows:auto auto 1fr auto;
  /* Fuss-Regel 3.13.2a: der Container fuellt das Fenster (vorher stand hier
     die Plattform-Hoehe calc(100vh - 3rem) - daher blieb unten eine Luecke
     von 24-48 px, in der der Fuss "schwebte"). */
  flex:1 0 auto;
  min-height:100dvh;
}
body.zahlen_raum .jupi_container > .jupi_main{
  background:transparent;padding:.7rem .8rem 1.2rem!important;max-width:96rem;
  /* main{flex:1 0 auto}: im Raster erledigt das die 1fr-Reihe oben. */
  flex:1 0 auto;
}
body.zahlen_raum .jupi_container > .jupi_footer{
  background:rgba(74,45,20,.78); color:#f7e8cb; border-top:3px solid #4b2c12;
  /* footer{margin-top:auto}: kein Abstand mehr unter dem Fuss (vorher
     margin:1rem auto 0 - der Fuss schwebte 16 px ueber dem Rand). */
  border-radius:0; margin:auto auto 0; padding:.6rem 1rem!important; font-size:.85rem;
  /* justify-self:stretch + 96rem-Deckel = Fuss klebte auf breiten Fenstern
     links; zentriert wie der Hauptbereich. */
  justify-self:center;width:100%;
}
body.zahlen_raum .jupi_footer a{color:#ffdf9e}

/* ---------- 2. Holz-Leiste ---------- */
body.zahlen_raum .neu_header{
  background:linear-gradient(100deg,#5b3418 0%,#8a5a30 46%,#a9723c 100%);
  color:#fff8ea;
  box-shadow:0 4px 18px rgba(60,32,10,.35);
  border-bottom:3px solid #4b2c12;
}
body.zahlen_raum .neu_header .jupi_nav_back{
  background:#3e2411; color:#ffd979; border:2px solid #2f1a0b; font-weight:800;
}
body.zahlen_raum .neu_header .jupi_nav_back:hover{background:#57341a;color:#ffe49a}
body.zahlen_raum .neu_marke strong{color:#fff8ea;text-shadow:0 2px 5px rgba(0,0,0,.4)}
body.zahlen_raum .neu_marke img{background:#fff8ea;border-radius:.6rem;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
body.zahlen_raum .jupi_sprachen_select{background:#fff3dc;color:#3a2a19;border-color:#d9b483}
body.zahlen_raum .jupi_sprachen_select option{color:#222;background:#fff}
body.zahlen_raum .neu_header #jupi_theme_toggle{background:#3e2411!important;border-color:#ffd979!important}
body.zahlen_raum .neu_header .jupi_nav_back,
body.zahlen_raum .jupi_sprachen_select{min-height:40px}

/* ---------- 3. Anzeigen an der Wand ---------- */
/* Raster: Punkte | Schwierigkeit | Werkzeuge - auf dem Handy zwei Zeilen. */
.zahlen_hud{
  display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:stretch;
  margin-bottom:.85rem;
}
.zahlen_brett{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:.5rem .85rem;border-radius:.75rem;
  background:linear-gradient(180deg,#f7e5c1,#e6cb9b);
  border:3px solid #9d6a33;
  box-shadow:0 4px 0 rgba(94,58,24,.4),0 10px 22px rgba(60,32,10,.28);
  color:#3a2a19;
}
.zahlen_brett .zahlen_stat{display:flex;align-items:center;gap:.45rem;min-width:0}
.zahlen_brett .zahlen_stat + .zahlen_stat{border-left:2px solid rgba(120,80,40,.3);padding-left:.75rem}
.zahlen_brett .zahlen_stat_icon{font-size:1.65rem;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.zahlen_brett .zahlen_stat_text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.zahlen_brett .zahlen_stat_text label{
  font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:#7a5730;white-space:nowrap;
}
.zahlen_brett .zahlen_stat_text > span{font-size:1.45rem;font-weight:900;color:#4a2c12;white-space:nowrap}
.zahlen_brett_stufe{gap:.5rem}
.zahlen_brett_stufe label{font-weight:800;font-size:.95rem;color:#5b3d1c}
.zahlen_brett_stufe .jupi_select{
  background:#fffdf7;color:#3a2a19;font-weight:800;font-size:.95rem;
  border:2px solid #b9895a;border-radius:.55rem;min-height:40px;padding:.3rem .6rem;
}
.zahlen_brett_werkzeug{gap:.5rem;padding:.45rem .6rem}
.zahlen_wkz{
  width:46px;height:46px;min-width:46px;min-height:46px;border-radius:.7rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#5d3c1f,#3a2310);color:#ffe6b0;font-size:1.3rem;
  border:2px solid #2b1809;box-shadow:0 3px 0 #2b1809;cursor:pointer;padding:0;
}
.zahlen_wkz:hover{filter:brightness(1.15)}
.zahlen_wkz:active{transform:translateY(2px);box-shadow:0 1px 0 #2b1809}

/* ---------- 4. Grüne Tafel ---------- */
/* Die Plattform setzt auf .zahlen_stage eine weisse Kachel - im
   Klassenzimmer liegt die Tafel direkt auf der Wand, also ohne Kasten. */
.zahlen_stage{display:block;padding:0;background:transparent;border-radius:0;box-shadow:none}
.zahlen_tafel{
  position:relative;margin:0 auto;max-width:46rem;text-align:center;
  background:linear-gradient(180deg,#31604e,#22463a);
  border:12px solid #8a5a30;border-radius:1.1rem;
  box-shadow:0 16px 32px rgba(48,24,8,.45),inset 0 0 70px rgba(0,0,0,.3);
  padding:1.1rem 1.2rem 1.35rem;color:#f4f8f1;
}
.zahlen_task_label{
  margin:0;font-weight:800;font-size:1.2rem;line-height:1.35;color:#f4f8f1;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
}
.zahlen_karte{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:1rem}
/* Die Plattform faerbt die Karte bei Treffer und Fehler ein - hier faerbt nur
   der Ring um den Play-Knopf, die Tafel selbst bleibt gruen. */
.zahlen_card_ok,.zahlen_card_err,.zahlen_card_spielt{background:transparent;border:0;animation:none}
html[data-theme="dark"] .zahlen_card_ok,html[data-theme="dark"] .zahlen_card_err{background:transparent;border:0}
.zahlen_spielen{
  position:relative;width:108px;height:108px;min-width:108px;min-height:108px;
  border:0;border-radius:50%;cursor:pointer;padding:0 0 0 .3rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:2.7rem;line-height:1;color:#fff;
  background:radial-gradient(circle at 34% 26%,#ffc65c 0%,#f79322 56%,#dd7a12 100%);
  box-shadow:0 0 0 9px #f8e3ab,0 9px 0 #b8630c,0 16px 28px rgba(0,0,0,.4);
}
.zahlen_spielen:hover{filter:brightness(1.07)}
.zahlen_spielen:active{transform:translateY(4px);box-shadow:0 0 0 9px #f8e3ab,0 5px 0 #b8630c,0 10px 18px rgba(0,0,0,.4)}
.zahlen_spielen:focus-visible{outline:4px solid #ffe9a8;outline-offset:6px}
.zahlen_spielen::before,
.zahlen_spielen::after{
  content:"";position:absolute;top:50%;width:16px;height:32px;margin-top:-16px;
  border:4px solid rgba(233,241,231,.6);border-radius:50%;
}
.zahlen_spielen::before{left:-30px;border-right-color:transparent}
.zahlen_spielen::after{right:-30px;border-left-color:transparent}
.zahlen_card_text{font-size:1.3rem;font-weight:800;letter-spacing:.02em;color:#f4f8f1;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.zahlen_card_spielt .zahlen_spielen{animation:zahlen_puls 1s ease-out infinite}
@keyframes zahlen_puls{
  0%{box-shadow:0 0 0 9px #f8e3ab,0 9px 0 #b8630c,0 0 0 0 rgba(255,226,150,.75)}
  100%{box-shadow:0 0 0 9px #f8e3ab,0 9px 0 #b8630c,0 0 0 26px rgba(255,226,150,0)}
}
.zahlen_card_ok .zahlen_spielen{box-shadow:0 0 0 9px #c9f0a8,0 9px 0 #4f8a2c,0 16px 28px rgba(0,0,0,.4)}
.zahlen_card_err .zahlen_spielen{box-shadow:0 0 0 9px #f6b8ae,0 9px 0 #a13526,0 16px 28px rgba(0,0,0,.4)}

/* ---------- 5. Antwortkacheln auf dem Tisch ---------- */
.zahlen_btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;max-width:46rem;margin:1.1rem auto 0}
.zahlen_btn{
  min-width:0;min-height:88px;border:0;border-radius:1rem;cursor:pointer;
  font-size:2.5rem;font-weight:900;line-height:1;color:#fff;
  transition:transform .12s ease,filter .12s ease;
}
.zahlen_btn:nth-child(1){background:linear-gradient(180deg,#59a8e6,#2f7fc4);box-shadow:0 8px 0 #1f5f95,0 12px 22px rgba(40,20,5,.3)}
.zahlen_btn:nth-child(2){background:linear-gradient(180deg,#e2695a,#c63f31);box-shadow:0 8px 0 #93291e,0 12px 22px rgba(40,20,5,.3)}
.zahlen_btn:nth-child(3){background:linear-gradient(180deg,#f9ae37,#dd8410);box-shadow:0 8px 0 #a85f06,0 12px 22px rgba(40,20,5,.3)}
.zahlen_btn:nth-child(4){background:linear-gradient(180deg,#fae46a,#eeca2f);color:#2f4a7a;box-shadow:0 8px 0 #b0920f,0 12px 22px rgba(40,20,5,.3)}
.zahlen_btn:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.06)}
.zahlen_btn:active:not(:disabled){transform:translateY(4px)}
.zahlen_btn:focus-visible{outline:4px solid #fff2c4;outline-offset:3px}
.zahlen_btn:disabled{cursor:default}
.zahlen_btn_right{outline:5px solid #2f7a1f;outline-offset:3px}
.zahlen_btn_wrong{opacity:.5;animation:artikel_shake .35s}

/* ---------- 6. Untere Leiste: Langsam, Weiter, Rückmeldung ---------- */
.zahlen_unten{max-width:46rem;margin:.95rem auto 0;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.zahlen_unten_knöpfe{display:flex;flex-wrap:wrap;gap:.6rem}
.zahlen_langsam{
  min-height:44px;padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;
  font-size:1rem;font-weight:800;color:#ffe7bd;
  background:linear-gradient(180deg,#6b4522,#452a12);border:2px solid #33200e;
  box-shadow:0 4px 0 #2b1a0a;
}
.zahlen_langsam:hover{filter:brightness(1.12)}
.zahlen_langsam:active{transform:translateY(3px);box-shadow:0 1px 0 #2b1a0a}
.zahlen_weiter{
  min-height:44px;padding:.5rem 1.2rem;border-radius:999px;cursor:pointer;
  font-size:1rem;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#57b25a,#2f7d38);border:2px solid #235c2a;
  box-shadow:0 4px 0 #1c4a22;
}
.zahlen_weiter:hover{filter:brightness(1.08)}
.zahlen_weiter:active{transform:translateY(3px);box-shadow:0 1px 0 #1c4a22}
.zahlen_msg{
  min-height:1.5rem;margin:0;font-weight:800;font-size:1.05rem;color:#3a2a19;
  text-shadow:0 1px 0 rgba(255,255,255,.4);overflow-wrap:anywhere;
}
.zahlen_msg_ok{color:#1b5e20}
.zahlen_msg_err{color:#a5231a}

/* ---------- 7. Rundenende ---------- */
.zahlen_done{
  max-width:46rem;margin:1rem auto 0;padding:1.1rem 1.2rem;border-radius:1rem;
  background:linear-gradient(180deg,#fbf0d8,#efd9b4);border:4px solid #9d6a33;
  box-shadow:0 12px 26px rgba(48,24,8,.35);text-align:center;color:#3a2a19;
}
.zahlen_done h3{margin:.2rem 0 .4rem;font-size:1.6rem;color:#8a5a30}
.zahlen_done h4{margin:.5rem 0 .3rem;font-size:1.05rem;color:#6b4a24}
.zahlen_done p{margin:.3rem 0 .8rem;font-size:1.05rem}
.daz_stars{font-size:2rem;color:#e0a318;letter-spacing:.15em}
.zahlen_fangliste{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:.4rem 0 1rem}
.zahlen_chip{
  display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;
  background:#fff8e8;border:2px solid #c39a63;font-weight:700;font-size:.95rem;color:#4a2c12;
}
.zahlen_chip_err{background:#fde8e4;border-color:#c0392b}
.zahlen_done .jupi_btn{
  background:linear-gradient(180deg,#57b25a,#2f7d38);color:#fff;border:2px solid #235c2a;
  box-shadow:0 4px 0 #1c4a22;min-height:44px;font-size:1rem;font-weight:800;
}

/* ---------- 8. Hilfe-Fenster: Blatt auf dem Tisch ---------- */
body.zahlen_raum .neu_dialog{
  background:linear-gradient(180deg,#fdf6e6,#f2e4c6);color:#3a2a19;
  border:4px solid #9d6a33;box-shadow:0 18px 40px rgba(40,20,5,.45);
}
body.zahlen_raum .neu_dialog h2{color:#8a5a30}
body.zahlen_raum .neu_dialog .neu_schliessen button{background:#efe0c0;border:2px solid #b9895a;color:#5b3d1c}

/* ---------- 9. Dunkelmodus: Kerzenlicht am Schreibtisch ---------- */
html[data-theme="dark"] body.zahlen_raum{background:#1d130a;color:#f0e2ca}
html[data-theme="dark"] .zahlen_raum_bild{filter:brightness(.42) saturate(.72) contrast(1.04)}
html[data-theme="dark"] body.zahlen_raum .neu_header{
  background:linear-gradient(100deg,#2b1a0d 0%,#4a2f18 55%,#5c3a1d 100%);
  border-bottom-color:#7a4d22;
}
html[data-theme="dark"] body.zahlen_raum .neu_header .jupi_nav_back{background:#1d1209;color:#ffce6a;border-color:#6b4522}
html[data-theme="dark"] body.zahlen_raum .jupi_sprachen_select{background:#f3e6cd;color:#2b1c0d;border-color:#7a4d22}
html[data-theme="dark"] .zahlen_brett{background:linear-gradient(180deg,#43301c,#2c1d10);border-color:#7a4d22;color:#f3e3c8}
html[data-theme="dark"] .zahlen_stat_text label{color:#d0ae7c}
html[data-theme="dark"] .zahlen_stat_text > span{color:#ffe9c2}
html[data-theme="dark"] .zahlen_brett_stufe label{color:#e6cda2}
html[data-theme="dark"] .zahlen_brett_stufe .jupi_select{background:#f7ecd6;color:#2b1c0d;border-color:#7a4d22}
html[data-theme="dark"] .zahlen_tafel{background:linear-gradient(180deg,#1e3d33,#152a23);border-color:#7a4d22}
html[data-theme="dark"] .zahlen_msg{color:#f2e4cd;text-shadow:none}
html[data-theme="dark"] .zahlen_msg_ok{color:#8fdc8a}
html[data-theme="dark"] .zahlen_msg_err{color:#ff9e8f}
html[data-theme="dark"] .zahlen_done{background:linear-gradient(180deg,#3d2a19,#2b1c10);border-color:#7a4d22;color:#f3e3c8}
html[data-theme="dark"] .zahlen_done h3{color:#f0c574}
html[data-theme="dark"] .zahlen_done h4{color:#d9bd8e}
html[data-theme="dark"] .zahlen_chip{background:#4a3520;border-color:#8a6236;color:#f3e3c8}
html[data-theme="dark"] .zahlen_chip_err{background:#4a2320;border-color:#c0392b}
html[data-theme="dark"] body.zahlen_raum .neu_dialog{background:#2f2113;color:#f3e6d2;border-color:#7a4d22}
html[data-theme="dark"] body.zahlen_raum .neu_dialog h2{color:#f0c574}

/* ---------- 10. Handy und kleines Fenster ---------- */
@media(max-width:760px){
  .zahlen_hud{gap:.45rem;grid-template-columns:1fr auto}
  /* Punktezeile oben ueber beide Spalten, darunter Stufe und Werkzeuge. */
  .zahlen_brett{padding:.45rem .6rem;gap:.4rem}
  .zahlen_brett:first-child{grid-column:1/-1}
  .zahlen_brett_stufe{flex-wrap:nowrap;justify-content:flex-start;gap:.35rem;padding:.4rem .55rem;min-width:0}
  .zahlen_brett_stufe .jupi_select{flex:1 1 auto;min-width:0}
  .zahlen_brett_werkzeug{justify-content:flex-end;padding:.35rem .45rem}
  .zahlen_brett .zahlen_stat + .zahlen_stat{padding-left:.5rem}
  .zahlen_stat_icon{font-size:1.35rem}
  .zahlen_stat_text label{font-size:.68rem}
  .zahlen_stat_text > span{font-size:1.15rem}
  .zahlen_tafel{border-width:8px;padding:.85rem .8rem 1rem}
  .zahlen_task_label{font-size:1rem}
  .zahlen_spielen{width:88px;height:88px;min-width:88px;min-height:88px;font-size:2.2rem}
  .zahlen_spielen::before{left:-24px}
  .zahlen_spielen::after{right:-24px}
  .zahlen_card_text{font-size:1.05rem}
  .zahlen_btns{gap:.6rem}
  .zahlen_btn{min-height:66px;font-size:1.8rem;border-radius:.8rem}
  .zahlen_msg{font-size:.95rem}
}
@media(max-width:430px){
  .zahlen_brett .zahlen_stat{gap:.3rem}
  .zahlen_stat_icon{font-size:1.15rem}
  .zahlen_stat_text > span{font-size:1rem}
  /* Auf sehr schmalen Fenstern waere die Zeile "Schwierigkeit + Auswahl +
     zwei Werkzeugknoepfe" zu breit. Das Wort bleibt fuer Screenreader da,
     sichtbar arbeitet die Auswahl mit ihrem Text ("Leicht (0-20)"). */
  .zahlen_brett_stufe label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .zahlen_brett_stufe{min-width:0}
  .zahlen_brett_stufe .jupi_select{font-size:.85rem;padding:.3rem .4rem;max-width:9rem;min-width:0}
  .zahlen_btn{min-height:58px;font-size:1.5rem}
}

/* ---------- 11. Grundregeln (Bedienziele, Sicherheit) ---------- */
/* [hidden] muss auch bei eigenen display-Angaben greifen - sonst bleibt
   die Tafel nach dem Rundenende sichtbar. */
[hidden]{display:none!important}
body.zahlen_raum button,body.zahlen_raum select{min-height:40px;min-width:40px;box-sizing:border-box}
body.zahlen_raum button{max-width:100%;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}