/* ===== jupi - Minispiellabor der MS St. Andrä - Modern 2026 ===== */
@import "colors.css";

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x:hidden; }
body.jupi {
  background: #f0f7f0;
  background: radial-gradient(1200px 600px at 10% -10%, #d9ecd9 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, #e8f5e9 0%, transparent 55%),
              var(--green100-color);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x:hidden;
}

/* ---------- Header - sticky, blurred ---------- */
.jupi_header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(135deg, #2e7d32 0%, var(--link-color) 55%, #66bb6a 100%);
  color: var(--bt-f-color);
  box-shadow: 0 4px 20px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.15) inset;
  backdrop-filter: blur(8px);
}

.jupi_school { display:flex; align-items:center; gap:.55rem; }
.jupi_school a {
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--bt-f-color);
  padding:.3rem .6rem; border-radius:999px;
  transition: background .15s;
}
.jupi_school a:hover { background: rgba(255,255,255,.18); }
.jupi_school img { height:2.4rem; width:auto; filter: brightness(0) invert(1); }
.jupi_school span { font-weight:800; font-size:1rem; line-height:1.15; letter-spacing:-.01em; }
.jupi_school small { font-weight:600; font-size:.7rem; opacity:.9; letter-spacing:.04em; text-transform:uppercase; }

/* - Nav - single back link (header now minimal) */
.jupi_nav {
  display:flex; flex-wrap:wrap; gap:.38rem;
  align-items:center;
  flex:1;
  justify-content:center;
}
.jupi_nav_single { flex:1; justify-content:center; }
.jupi_nav_opt {
  color: var(--bt-f-color);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  padding: .42rem .9rem;
  border-radius: 999px;
  text-decoration:none;
  font-size:.88rem; font-weight:600;
  letter-spacing:.01em;
  transition: all .16s ease;
  display:inline-flex; align-items:center; gap:.4rem;
  backdrop-filter: blur(6px);
}
.logo_icon { width:1.05rem; height:1.05rem; border-radius:.2rem; }
.jupi_nav_opt:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
.jupi_nav_opt.is_active {
  background:#fff; color:var(--link-color); font-weight:800;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  border-color:#fff;
}
.jupi_nav_back {
  background:#fff;
  color:var(--link-color);
  font-weight:800;
  border-color:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.jupi_nav_back:hover { background:#f1f8e9; transform: translateY(-1px); }

.jupi_logo_link { display:inline-block; position:relative; transition: transform .16s; flex-shrink:0; }
.jupi_logo_link:hover { transform: scale(1.04) rotate(-1deg); }
.jupi_logo_link img {
  height:3rem; width:auto;
}
/* BETA-Sticker am jupi-Logo: die Plattform ist noch in der Erprobung */
.jupi_logo_beta {
  position:absolute; right:-.7rem; bottom:-.3rem;
  font-size:.58rem; font-weight:800; letter-spacing:.12em;
  background:var(--yellow600-color); color:#5d4300;
  padding:.12rem .42rem; border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transform:rotate(8deg);
  pointer-events:none;
}

/* - Dark-Mode-Schalter (Pill-Switch) -
   Thumb links = Light, Thumb rechts = Dark.
   Sichtbar ist immer das Icon des Modus, zu dem gewechselt wird:
   Light -> Mond rechts, Dark -> Sonne links. Kein Ueberlappen. */
.jupi_theme_switch {
  position:relative; flex-shrink:0;
  width:3.5rem; height:1.9rem;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  cursor:pointer;
  transition: background .15s;
}
.jupi_theme_switch:hover { background: rgba(255,255,255,.32); }
.jupi_theme_switch .jts_icon {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:.82rem; line-height:1;
  transition: opacity .2s;
}
.jupi_theme_switch .jts_sun { left:.5rem; }
.jupi_theme_switch .jts_moon { right:.5rem; }
html[data-theme="light"] .jupi_theme_switch .jts_sun { opacity:0; }
html[data-theme="dark"] .jupi_theme_switch .jts_moon { opacity:0; }
.jupi_theme_switch .jts_thumb {
  position:absolute; z-index:2; pointer-events:none;
  top:.16rem; bottom:.16rem; left:.18rem;
  width:1.5rem;
  background:#fff; border-radius:999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: left .2s ease;
}
html[data-theme="dark"] .jupi_theme_switch .jts_thumb {
  left: calc(100% - 1.5rem - .18rem);
}
html[data-theme="dark"] .jupi_theme_switch {
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.25);
}

/* - Legacy hamburger (kept hidden, header is now minimal) - */
.jupi_nav_toggle { display:none !important; }
.jupi_nav_hamburger { display:none !important; }

/* ---------- Footer ---------- */
.jupi_footer {
  grid-area:footer;
  background: #fafafa;
  border-top:1px solid var(--grey300-color);
  padding:1.1rem 1rem;
}
.jupi_footer_text { text-align:center; font-size:.82rem; color:var(--grey600-color); line-height:1.6; }
.jupi_footer_text a { color:var(--link-color); font-weight:600; text-decoration:none; }
.jupi_footer_text a:hover { text-decoration:underline; }

/* ---------- Container ---------- */
.jupi_container {
  background: transparent;
  min-height: calc(100vh - 3rem);
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto;
  grid-template-areas:"bypass" "header" "main" "footer";
}
.jupi_container > .jupi_main,
.jupi_container > .jupi_footer { background: var(--ct-color); }
.jupi_container > .jupi_footer { border-radius: 1.2rem 1.2rem 0 0; margin: 1rem auto 0; max-width:96rem; width:100%; box-sizing:border-box; }

@media (orientation: landscape) and (min-width: 50rem), (min-width: 62.5rem) {
  .jupi_container { grid-template-columns:1fr; max-width:100%; }
}

.jupi_main {
  grid-area:main;
  padding: 1.6rem 1.25rem 2rem;
  max-width: 96rem;
  margin:0 auto;
  width:100%;
  box-sizing:border-box;
  /* WICHTIG: .jupi_container ist ein Grid, und ein Grid-Item hat von Natur aus
     min-width:auto - es waechst also auf die BREITESTE Zeile, statt sich auf
     die Container-Breite zu beschaenken. Ein Spiel mit breiter Canvas (z. B.
     Drucklabor) blies dadurch die ganze Seite auf dem Handy auf.
     Dieselbe Falle wie im jp-simulator, hier einmal zentral abgesichert. */
  min-width:0;
}
@media (min-width: 48rem) { .jupi_main { padding: 2rem 2rem 2.5rem; } }

/* ---------- Intro ---------- */
.jupi_intro {
  text-align:center;
  margin: .4rem auto 1.8rem;
  max-width:44rem;
  padding: 1.4rem 1rem 0;
}
.jupi_intro h1 {
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .4rem;
  color: #1b5e20;
  line-height:1.2;
}
.jupi_intro h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight:800;
  letter-spacing:-.015em;
  margin:0 0 .35rem;
  color: #1b5e20;
}
.jupi_intro p {
  color: var(--grey600-color);
  max-width:40rem;
  margin:0 auto;
  font-size: .98rem;
  line-height:1.6;
}
.h2_icon {
  display:inline-block; width:1.8rem; height:1.8rem;
  vertical-align:-.35rem; margin-right:.35rem;
  border-radius:.4rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
/* ---------- Spiel-Karten ---------- */
.jupi_games {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media (min-width: 38rem) { .jupi_games { grid-template-columns: repeat(2,1fr); gap:1.1rem; } }
@media (min-width: 64rem) { .jupi_games { grid-template-columns: repeat(3,1fr); gap:1.25rem; } }

.jupi_game_card {
  display:flex; flex-direction:column; gap:.55rem;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:1.15rem;
  padding:1.15rem 1.15rem .95rem;
  text-decoration:none; color:#1a1a1a;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 20px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative; overflow:hidden;
}
.jupi_game_card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--link-color), #81c784);
  opacity:0; transition: opacity .18s;
}
.jupi_game_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.11);
  border-color: #c8e6c9;
}
.jupi_game_card:hover::before { opacity:1; }
.jupi_game_card .card_icon { font-size:2.2rem; line-height:1; }
.jupi_game_card .card_icon img {
  width:3.2rem; height:3.2rem;
  border-radius:.85rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  background:#f1f8e9;
  padding:.25rem;
}
.jupi_game_card h2 { font-size:1.08rem; margin:0; font-weight:800; letter-spacing:-.01em; }
.jupi_game_card p { font-size:.88rem; margin:0; color:var(--grey600-color); flex:1; line-height:1.55; }
/* Kompetenz-Zeile auf den Spielkarten (Startseite) */
.jupi_game_card .card_kompetenz {
  flex:none;
  font-size:.78rem; line-height:1.5;
  color:var(--grey600-color);
  background:#f1f8e9;
  border-radius:.6rem;
  padding:.35rem .6rem;
}
.jupi_game_card .card_kompetenz strong { color:var(--link-color); }
.jupi_game_card .card_play {
  font-weight:700; color:var(--link-color); font-size:.9rem;
  display:inline-flex; align-items:center; gap:.2rem;
  margin-top:.15rem;
}
/* Kategorie-Mini-Tags auf den Karten (von JS aus data-kat eingesetzt) */
.jupi_game_card .card_kat { display:flex; flex-wrap:wrap; gap:.28rem; }
.jupi_game_card .card_kat span {
  font-size:.64rem; font-weight:800; letter-spacing:.02em;
  padding:.14rem .5rem; border-radius:999px;
  background:#f0f4f1; color:#51635a; border:1px solid #e2eae4;
}
.jupi_game_card .card_kat span[data-kat-chip="lernen"] { background:#f1f8e9; color:#33691e; border-color:#dcedc8; }
.jupi_game_card .card_kat span[data-kat-chip="gesellschaft"] { background:#e8f1fb; color:#17497f; border-color:#cfe0f2; }
.jupi_game_card .card_kat span[data-kat-chip="strategie"] { background:#f3e9f7; color:#6a1b9a; border-color:#e1ccee; }
.jupi_game_card .card_kat span[data-kat-chip="aufbau"] { background:#fff3e0; color:#b35a00; border-color:#ffe0b2; }
.jupi_game_card .card_kat span[data-kat-chip="abenteuer"] { background:#efe7dc; color:#6d4c2f; border-color:#e0d2bd; }
.jupi_game_card .card_kat span[data-kat-chip="aktion"] { background:#fde7e6; color:#b71c1c; border-color:#f8d0ce; }
.jupi_game_card .card_kat span[data-kat-chip="sport"] { background:#e2f5e0; color:#2e7d32; border-color:#a5d6a7; }
.jupi_game_card .card_kat span[data-kat-chip="sandbox"] { background:#e0f2f1; color:#00695c; border-color:#b2dfdb; }
.jupi_game_card .card_kat span[data-kat-chip="werkzeuge"] { background:#e8eaf6; color:#283593; border-color:#c5cae9; }
/* Status-Badge oben rechts auf den Spielkarten (BETA / ALPHA) */
.jupi_game_card .card_status {
  position:absolute; top:.8rem; right:.8rem;
  font-size:.62rem; font-weight:800; letter-spacing:.1em;
  padding:.16rem .5rem; border-radius:999px;
  text-transform:uppercase;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.jupi_game_card .card_status_beta { background:#FFF3C4; color:#7a5c00; border:1px solid #FDD835; }
.jupi_game_card .card_status_alpha { background:#FDE7E6; color:#B71C1C; border:1px solid #E53935; }
.jupi_game_card .card_status_prealpha { background:#EEEEEE; color:#555555; border:1px solid #BDBDBD; }
.jupi_game_card .card_status_geplant { background:#E8F1FB; color:#17497f; border:1px dashed #7EA6D0; }

/* Geplante Spiele: Platzhalter-Karten OHNE Link (Spiel noch nicht gebaut) */
.jupi_game_card_geplant { border-style:dashed; background:#fbfcfd; }
.jupi_game_card_geplant:hover {
  transform:none;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 20px rgba(0,0,0,.06);
  border-color:#cfe0d4;
}
.jupi_game_card_geplant:hover::before { opacity:0; }
.jupi_game_card_geplant h2 { color:#45607a; }
.jupi_game_card_geplant .card_icon_geplant {
  display:grid; place-items:center;
  width:3.2rem; height:3.2rem; font-size:1.7rem;
  border-radius:.85rem; background:#eef4f8;
  box-shadow: inset 0 0 0 1px #dbe6ee;
}
.jupi_game_card_geplant .card_play { color:#7a8b99; }

/* ---------- Shared: Buttons & Selects ---------- */
.jupi_btn {
  font-size:.95rem; font-weight:700;
  padding:.58rem 1.15rem;
  border:none; border-radius:999px;
  cursor:pointer;
  background: var(--link-color); color:#fff;
  box-shadow: 0 2px 10px rgba(67,160,71,.3);
  transition: transform .12s, box-shadow .12s, background .12s;
  letter-spacing:.01em;
}
.jupi_btn:hover { background:#2e7d32; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(67,160,71,.35); }
.jupi_btn:active { transform: translateY(0); }
.jupi_btn_alt { background:#9e9e9e; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.jupi_btn_alt:hover { background:#757575; }

.jupi_select {
  font-size:.92rem; font-weight:600;
  padding:.5rem .9rem;
  border:1.5px solid var(--grey300-color);
  border-radius:999px;
  background: var(--ct-color); color:#1a1a1a;
  transition: border-color .12s;
}
.jupi_select:focus { outline:none; border-color:var(--link-color); box-shadow: 0 0 0 3px rgba(67,160,71,.15); }

/* ---------- Panels (unified) ---------- */
.vm_panel, .rr_controls, .ww_panel {
  background:#fff;
  border:1px solid #ececec;
  border-radius:1rem;
  padding:.75rem .9rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  align-items:center;
  margin-bottom:.9rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 4px 14px rgba(0,0,0,.05);
}

/* mobile: stack panels */
@media (max-width: 38rem) {
  .vm_panel, .rr_controls, .ww_panel {
    padding:.7rem .75rem;
    gap:.6rem .7rem;
  }
  .ww_date { margin-left:0; width:100%; }
}

/* Tipp-Test: die .tiptest_*- und .key-Regeln sind am 09.10.2026 in das
   eigenstaendige PWA-Paket tippetest/styles.css umgezogen (AGENTS.md 3.10). */

/* ---------- Rätselrakete ---------- */
.rr_controls { gap:.7rem 1rem; }
.rr_topicwrap { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.rr_topicwrap label { font-weight:700; color:var(--grey600-color); font-size:.88rem; }
.rr_stage {
  position:relative; overflow:hidden;
  background: radial-gradient(800px 400px at 50% 0%, #1a2a4a 0%, #0b1426 60%), linear-gradient(180deg, #08101f, #10203a);
  border-radius:1.1rem;
  padding:1.1rem .8rem 1.2rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  margin-bottom:.9rem; color:#e3f2fd;
  border:1px solid #1b2f4d;
}
@media (min-width:48rem){ .rr_stage{ padding:1.4rem 1.5rem 1.6rem; } }
.rr_stars { display:flex; gap:.4rem; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.rr_star { color:#2c3e5c; transition: color .2s, transform .2s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.rr_star.on { color:var(--yellow600-color); text-shadow: 0 0 14px rgba(253,216,53,.55); }
.rr_rocketwrap { position:relative; height:96px; width:72px; }
@media (min-width:48rem){ .rr_rocketwrap{ height:120px; width:90px; } }
#rr_rocket { width:100%; height:100%; position:absolute; bottom:0; left:0; transition: transform 1.2s ease-in, opacity 1.2s ease-in; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.rr_rocketwrap.launch #rr_rocket { transform: translateY(-420px); opacity:0; }
.rr_rocketwrap.crash #rr_rocket { transform: rotate(32deg) scale(.9); }
.rr_word { display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem; font-family:"JetBrains Mono",Consolas,monospace; }
.rr_slot {
  display:inline-flex; align-items:center; justify-content:center;
  width: clamp(1.65rem, 7vw, 2.15rem); height: clamp(2.2rem, 9vw, 2.75rem);
  background:#1c2c47; border:1.5px solid #2c3e5c; border-radius:.45rem;
  font-size: clamp(1.1rem, 4.5vw, 1.55rem); font-weight:700;
}
.rr_slot.good { border-color:var(--green400-color); background:#14304a; color:#b2ffb8; }
.rr_msg { min-height:1.5rem; font-size:.95rem; text-align:center; color:#cfe1f5; padding:0 .5rem; }
.rr_keys { display:flex; flex-direction:column; align-items:center; gap:.32rem; width:100%; }
.rr_keyrow { display:flex; gap:.28rem; flex-wrap:wrap; justify-content:center; }
.rr_key {
  min-width:2.55rem; min-height:2.55rem;
  padding:.35rem .1rem;
  background:#23344f; border:1.5px solid #34506f; border-radius:.5rem;
  color:#e3f2fd; font-size:.95rem; font-weight:700;
  cursor:pointer; transition: all .14s;
  touch-action: manipulation;
}
.rr_key:hover { background:#2f4568; }
.rr_key:active { transform: scale(.94); }
.rr_key.good { background:var(--green600-color); border-color:var(--green400-color); }
.rr_key.bad { background:#5c1f1f; border-color:#8b3a3a; color:#ffb3b3; }
.rr_overlay {
  position:absolute; inset:0;
  background: rgba(8,16,31,.92);
  backdrop-filter: blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; color:#fff; padding:1.5rem;
}
.rr_overlay.hidden { display:none; }
.rr_overlay h3 { font-size: clamp(1.3rem, 4vw, 1.9rem); margin:0; }
.rr_overlay_text { max-width:32rem; margin:0; color:#cfe1f5; font-size:.95rem; }

/* ---------- Vokabel-Memory ---------- */
.vm_board {
  display:grid; grid-template-columns: repeat(var(--vm-cols,4),1fr);
  gap:.5rem; margin:0 auto .9rem; max-width:44rem;
}
@media (max-width: 26rem){ .vm_board{ gap:.4rem; } }
.vm_card {
  position:relative; aspect-ratio: 1/1;
  background:transparent; border:none; padding:0;
  cursor:pointer; perspective:800px;
  min-height:0;
}
.vm_card:disabled{ cursor:default; }
.vm_inner { position:relative; width:100%; height:100%; transition: transform .42s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; }
.vm_card.turned .vm_inner, .vm_card.matched .vm_inner { transform: rotateY(180deg); }
.vm_face {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:.75rem; font-size: clamp(.78rem, 2.4vw, 1.05rem); font-weight:700;
  text-align:center; padding:.4rem; word-break:break-word; hyphens:auto;
}
.vm_cover {
  background: linear-gradient(135deg, var(--link-color), #66bb6a);
  color:#fff; font-size: clamp(1.3rem, 4vw, 1.9rem);
  border:1.5px solid #43a047;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.vm_word.long { font-size: clamp(.6rem, 1.9vw, .78rem); padding:1.1rem .25rem .25rem; }
.vm_word { transform: rotateY(180deg); background:#fff; border:1.5px solid #e0e0e0; color:#1a1a1a; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.vm_de { border-top: 3px solid var(--lightblue600-color); }
.vm_de::before { content:"DE"; position:absolute; top:.3rem; left:.45rem; font-size:.58rem; color:var(--lightblue600-color); font-weight:800; letter-spacing:.04em; }
.vm_en { border-top: 3px solid var(--green400-color); }
.vm_en::before { content:"EN"; position:absolute; top:.3rem; left:.45rem; font-size:.58rem; color:var(--green400-color); font-weight:800; letter-spacing:.04em; }
.vm_card.matched { outline:2px solid var(--yellow600-color); outline-offset:2px; }
.vm_card.matched .vm_word { background:#fffde7; }
/* Statusleiste oben im Root&Route-Stil (wie Sternen-Fusion) */
.vm_topbar{
  position:sticky; top:.5rem; z-index:20;
  background:rgba(255,255,255,.92); border:1.5px solid #e0e0e0;
  border-radius:1rem; padding:.5rem .7rem;
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center;
  margin-bottom:.6rem; box-shadow:0 10px 30px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  min-width:0; max-width:44rem; margin-left:auto; margin-right:auto;
  box-sizing:border-box;
}
.vm_topbar .fu_stat, .vm_topbar .fu_actions{ min-width:0; }
/* Auswahlzeile: Schwierigkeit + Thema + Hilfe */
.vm_controls{
  display:flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:center;
  justify-content:center; max-width:44rem; margin:0 auto .7rem;
}
.vm_controls label{ font-size:.82rem; font-weight:700; color:var(--grey600-color); }
/* Spielfeld mit Toasts und Modals darüber */
.vm_boardwrap{ position:relative; max-width:44rem; margin:0 auto; }
#vm_toasts{
  position:absolute; top:.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.4rem; align-items:center;
  z-index:5; pointer-events:none; width:max-content; max-width:92%;
}
/* Sternebewertung im Ergebnis */
.vm_stars{
  font-size:1.9rem; letter-spacing:.3rem; margin:.1rem 0 .3rem;
  color:#F9A825; text-shadow:0 1px 0 rgba(0,0,0,.1);
}
.vm_stars .off{ color:#d5d5d5; text-shadow:none; }
#vm_bestnote{ font-weight:800; color:var(--link-color); }
@media (max-width:30rem){
  .vm_topbar{ gap:.45rem .6rem; padding:.45rem .6rem; border-radius:.8rem; }
  .vm_topbar .fu_stat{ min-width:0; }
  .vm_topbar .fu_stat label{ display:none; }
  .vm_topbar .fu_stat span{ font-size:1.05rem; }
  .vm_controls .jupi_select{ flex:1 1 8rem; }
}


/* ---------- Wortwunder ---------- */
.ww_panel { gap:.55rem .6rem; }
.ww_label { font-weight:700; color:var(--grey600-color); font-size:.88rem; }
.ww_catbtn {
  font-size:.88rem; font-weight:700;
  padding:.45rem .9rem;
  border:1.5px solid #e0e0e0; border-radius:999px;
  background:#fff; color:#1a1a1a; cursor:pointer;
  transition: all .14s;
}
.ww_catbtn:hover{ border-color:var(--link-color); transform: translateY(-1px); }
.ww_catbtn.is_active{ background:var(--link-color); border-color:var(--link-color); color:#fff; box-shadow: 0 2px 8px rgba(67,160,71,.3); }
.ww_date { margin-left:auto; font-weight:700; color:var(--grey600-color); font-size:.85rem; }
@media (max-width:38rem){ .ww_date{ width:100%; margin-left:0; } }
.ww_stage {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.9rem;
  background:#fff; border:1.5px solid #c8e6c9; border-radius:1rem;
  padding:1.15rem .7rem; margin-bottom:.9rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 4px 14px rgba(0,0,0,.05);
}
@media (min-width:48rem){ .ww_stage{ padding:1.3rem 1rem; } }
.ww_grid { display:flex; flex-direction:column; gap:.38rem; }
.ww_row { display:flex; gap:.38rem; }
.ww_tile {
  width: clamp(2.4rem, 11vw, 3.15rem); height: clamp(2.4rem, 11vw, 3.15rem);
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid #e0e0e0; border-radius:.5rem;
  background:#fff;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size: clamp(1.15rem, 4.5vw, 1.75rem); font-weight:800;
  text-transform:uppercase; color:#1a1a1a; user-select:none;
  transition: transform .12s, background .12s;
}
.ww_tile.filled{ border-color:#bdbdbd; }
.ww_tile.good{ background:var(--green400-color); border-color:var(--green400-color); color:#fff; transform: scale(1.02); }
.ww_tile.present{ background:var(--yellow600-color); border-color:var(--yellow600-color); color:#111; }
.ww_tile.absent{ background:#bdbdbd; border-color:#bdbdbd; color:#fff; }
.ww_row.shake{ animation: ww_shake .42s ease; }
@keyframes ww_shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.ww_msg { min-height:1.4rem; font-size:.95rem; font-weight:700; color:var(--grey600-color); text-align:center; padding:0 .5rem; }
.ww_overlay {
  position:absolute; inset:0;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-radius:.95rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; padding:1.5rem; z-index:5;
}
.ww_overlay.hidden{ display:none; }
.ww_overlay h3{ font-size: clamp(1.3rem, 4vw, 1.85rem); margin:0; color:var(--link-color); }
.ww_overlay_text{ max-width:30rem; margin:0; font-size:.94rem; }
.ww_overlay_word{ font-family:"JetBrains Mono",Consolas,monospace; font-size: clamp(1.3rem, 5vw, 1.7rem); font-weight:800; letter-spacing:.3em; margin:0; color:var(--link-color); }
.ww_keys { display:flex; flex-direction:column; align-items:center; gap:.32rem; width:100%; max-width:100%; overflow-x:auto; padding-bottom:.15rem; }
.ww_keyrow { display:flex; gap:.28rem; justify-content:center; }
.ww_key {
  min-width: clamp(1.85rem, 8vw, 2.75rem); min-height: 2.5rem;
  padding:.5rem .22rem;
  border:1.5px solid #e0e0e0; border-radius:.5rem;
  background:#fff; color:#1a1a1a;
  font-size: clamp(.72rem, 2.6vw, .95rem); font-weight:700;
  cursor:pointer; transition: all .12s;
  touch-action: manipulation;
}
.ww_key:hover{ border-color:var(--link-color); }
.ww_key:active{ transform: scale(.94); }
.ww_key_wide{ min-width: clamp(3.2rem, 14vw, 4.4rem); font-size:.78rem; }
.ww_key.good{ background:var(--green400-color); border-color:var(--green400-color); color:#fff; }
.ww_key.present{ background:var(--yellow600-color); border-color:var(--yellow600-color); }
.ww_key.absent{ background:#e0e0e0; border-color:#e0e0e0; color:var(--grey600-color); }

/* ---------- Mobile header: minimal (no hamburger) ---------- */
@media (max-width: 52rem) {
  .jupi_header {
    padding:.5rem .75rem;
    gap:.5rem .75rem;
  }
  .jupi_logo_link img { height:2.5rem; }
  .jupi_nav { flex:1; justify-content:center; }
  .jupi_nav_opt { padding:.5rem .85rem; font-size:.88rem; }
}

/* ---------- Flappy Logic ---------- */
.flappy_hud{
  background:#fff; border:1.5px solid #e0e0e0; border-radius:1rem;
  padding:.6rem .75rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center;
  margin-bottom:.7rem; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.flappy_hud_box{ display:flex; flex-direction:column; min-width:4.5rem; }
.flappy_hud_box label{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--grey600-color); }
.flappy_hud_box span{ font-size:1.25rem; font-weight:800; color:var(--link-color); }
.flappy_topic{ margin-left:auto; display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.flappy_topic label{ font-size:.82rem; font-weight:700; color:var(--grey600-color); }
/* Pause-Knopf in der HUD-Leiste (wie fu_iconbtn-Stil, aber als Textknopf) */
.flappy_hud_btns{ margin-left:auto; display:flex; gap:.4rem; align-items:center; }
.flappy_topic + .flappy_hud_btns{ margin-left:0; }
.flappy_pause{ padding:.5rem 1rem; font-size:.88rem; }
.flappy_canvaswrap{
  position:relative; border-radius:1rem; overflow:hidden;
  background: linear-gradient(180deg,#87CEEB 0%, #E3F2FD 65%, #C8E6C9 65%, #A5D6A7 100%);
  border:1.5px solid #c5d9f0; box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:flex; justify-content:center; align-items:center; padding:0;
  margin-bottom:.6rem;
  /* Handy: kein Scrollen/Zoomen beim Flattern, kein Markieren */
  touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
}
#flappy_canvas{
  display:block; width:100%; height:auto; aspect-ratio:900/540; max-width:900px;
  /* Handy: Spielfeld füllt die sichtbare Höhe (dvh = mobile Browserleiste eingerechnet) */
  max-height:min(68vh,540px); max-height:min(68dvh,540px);
  touch-action:none;
}
/* Großer Flatter-Knopf für Daumen (Vorbild: Snake-D-Pad) */
.flappy_flap{
  display:block; width:100%; max-width:900px; margin:0 auto .6rem;
  padding:1rem; font-size:1.2rem; font-weight:800;
  border:none; border-radius:1rem; cursor:pointer;
  background:var(--link-color); color:#fff;
  box-shadow:0 4px 14px rgba(67,160,71,.35);
  touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition:transform .08s, background .12s;
}
.flappy_flap:hover{ background:#2e7d32; }
.flappy_flap:active{ transform:scale(.98); }
/* Querformat-Hinweis: nur im Hochformat auf schmalen Bildschirmen */
.flappy_rotate{
  display:none; position:absolute; bottom:.4rem; left:50%; transform:translateX(-50%);
  margin:0; padding:.25rem .7rem; border-radius:999px;
  background:rgba(0,0,0,.45); color:#fff; font-size:.72rem; font-weight:600;
  pointer-events:none; white-space:nowrap;
}
@media (orientation:portrait) and (max-width:38rem){
  .flappy_rotate{ display:block; }
}
.flappy_overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; padding:1.2rem; background:rgba(255,255,255,.88); backdrop-filter:blur(6px);
}
.flappy_overlay.hidden{ display:none; }
.flappy_overlay h3{ font-size:clamp(1.25rem,4vw,1.7rem); margin:0; color:#1b5e20; }
.flappy_overlay p{ max-width:30rem; margin:0; color:var(--grey600-color); font-size:.92rem; line-height:1.5; }
.flappy_pipe_label{ font-size:.78rem; font-weight:800; letter-spacing:.01em; }
@media (max-width:30rem){
  .flappy_topic{ width:auto; margin-left:0; }
  .flappy_topic .jupi_select{ flex:1 1 6rem; padding:.55rem .8rem; }
  .flappy_hud{ gap:.5rem .6rem; }
  .flappy_hud_box{ min-width:3.6rem; }
  .flappy_hud_box span{ font-size:1.05rem; }
  .flappy_hud_btns{ width:100%; }
  .flappy_pause{ flex:1; padding:.6rem 1rem; }
  .flappy_flap{ padding:1.05rem; font-size:1.25rem; border-radius:.9rem; }
}
@media (max-width: 52rem){
  .jupi_school span { font-size:.9rem; max-width:10rem; }
  .jupi_school img { height:2rem; }
}
@media (max-width: 22rem) {
  .jupi_header { padding:.45rem .6rem; }
  .jupi_nav_opt { font-size:.86rem; }
}

/* ---------- Sternen-Fusion (Suika) ---------- */
.fusion_page{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  justify-items:center;
  align-items:start;
}
.fusion_page .jupi_intro{
  width:100%;
  max-width:44rem;
  grid-column:1 / -1;
  justify-self:center;
}
.fusion_game{
  width:100%;
  max-width:520px;
  min-width:0;
  justify-self:center;
  position:relative;
}
.fusion_sidebar{
  width:100%;
  max-width:520px;
  min-width:0;
  justify-self:center;
  background:#fff;
  border:1.5px solid #e0e0e0;
  border-radius:1rem;
  padding:.75rem .7rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  box-sizing:border-box;
}
@media (min-width: 60rem){
  .fusion_page{
    grid-template-columns: minmax(0,520px) 340px;
    justify-content:center;
    align-items:start;
    column-gap:1.2rem;
  }
  .fusion_game{ justify-self:end; }
  .fusion_sidebar{
    justify-self:start;
    position:sticky;
    top:5.2rem;
    margin:0;
  }
}
.fusion_sidebar h3{ margin:.1rem 0 .5rem; font-size:.95rem; font-weight:800; color:#1A237E; display:flex; align-items:center; gap:.35rem; }
.fu_topbar{
  position:sticky; top:.5rem; z-index:20;
  background:rgba(255,255,255,.92); border:1.5px solid #e0e0e0;
  border-radius:1rem; padding:.5rem .7rem;
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center;
  margin-bottom:.6rem; box-shadow:0 10px 30px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  min-width:0; max-width:100%; box-sizing:border-box;
}
.fu_stat, .fusion_next, .fu_actions{ min-width:0; }
.fu_stat{ display:flex; flex-direction:column; min-width:4.2rem; }
.fu_stat label{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--grey600-color); }
.fu_stat span{ font-size:1.25rem; font-weight:800; color:var(--link-color); line-height:1.1; font-variant-numeric:tabular-nums; }
.fusion_next{ display:flex; align-items:center; gap:.45rem; margin-left:auto; }
.fusion_next_label{ font-size:.78rem; font-weight:700; color:var(--grey600-color); }
.fusion_next_dot{
  width:2rem; height:2rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:800; border:2px solid #e0e0e0; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.fusion_canvaswrap{
  position:relative; border-radius:1rem; overflow:hidden;
  background: radial-gradient(700px 400px at 50% 0%, #1A237E 0%, #0D1B4A 45%, #1A237E 100%);
  border:1.5px solid #283593; box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:flex; justify-content:center; align-items:center; padding:0;
  margin-bottom:.5rem; touch-action:none; user-select:none;
  width:100%; max-width:min(480px,100%); min-width:0;
  margin-left:auto; margin-right:auto; box-sizing:border-box;
}
#fusion_canvas{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:auto;
  aspect-ratio:480/720;
}
@media (max-width:60rem){
  /* Am Handy: Canvas passt in Breite UND Höhe (kein Scrollen nötig) */
  .fusion_canvaswrap{ max-width:min(480px,100%); }
  #fusion_canvas{
    width:min(100%, calc((100vh - 17rem) * 0.6667));
    width:min(100%, calc((100dvh - 17rem) * 0.6667));
  }
}
.fusion_recipe{ display:flex; align-items:center; gap:.45rem; padding:.4rem .35rem; border-radius:.6rem; border:1px solid transparent; }
.fusion_recipe.is_next{ background:#E8F5E9; border-color:#C8E6C9; }
.fusion_recipe_dot{
  width:1.9rem; height:1.9rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800; color:#fff; flex:0 0 1.9rem; border:1.5px solid rgba(0,0,0,.08);
}
.fusion_recipe_arrow{ color:var(--grey400-color); font-weight:700; }
.fusion_recipe_text{ font-size:.78rem; line-height:1.3; color:#1a1a1a; }
.fusion_recipe_text small{ display:block; color:var(--grey600-color); font-size:.72rem; }
.fusion_legend{ font-size:.75rem; color:var(--grey600-color); margin-top:.5rem; line-height:1.45; }
@media (max-width:60rem){ .fusion_sidebar{ position:static; } }

/* ---------- Sternen-Fusion: Aktionen, Toasts, Menü (Root&Route-Stil) ---------- */
.fu_actions{ display:flex; gap:.35rem; margin-left:auto; align-items:center; }
.fu_iconbtn{
  background:rgba(67,160,71,.1); color:#2e7d32;
  border:1px solid rgba(67,160,71,.25); border-radius:.7rem;
  width:2.1rem; height:2.1rem; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer;
  transition:background .12s, transform .1s;
}
.fu_iconbtn:hover{ background:rgba(67,160,71,.2); }
.fu_iconbtn:active{ transform:scale(.94); }
.fu_iconbtn svg{ width:1rem; height:1rem; }
/* Ton aus: Wellen weg, Strich her */
#fu_sound[aria-pressed="false"] .fu_snd_waves{ display:none; }
#fu_sound[aria-pressed="false"] .fu_snd_off{ display:inline !important; }
/* Toasts über dem Spielfeld */
#fu_toasts{
  position:absolute; top:.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.4rem; align-items:center;
  z-index:5; pointer-events:none; width:max-content; max-width:92%;
}
.fu_toast{
  background:rgba(22,30,23,.94); color:#eef3ea;
  border:1px solid rgba(255,255,255,.12); border-left:4px solid #43A047;
  border-radius:.7rem; padding:.45rem .9rem;
  font-size:.82rem; font-weight:700; white-space:nowrap;
  opacity:0; transform:translateY(-8px);
  transition:opacity .3s, transform .3s;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.fu_toast.show{ opacity:1; transform:translateY(0); }
.fu_intro_hint{ font-size:.82rem; color:var(--grey600-color); margin:.3rem 0 0; }
/* Zwei Buttons im Start-Overlay nebeneinander */
.fu_overlay_btns{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
/* Pausenmenü als Modal */
.fu_modal{
  position:absolute; inset:0; z-index:6;
  background:rgba(8,12,9,.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  border-radius:1rem;
}
.fu_modal.hidden{ display:none; }
.fu_modal_box{
  width:min(300px,86%); background:rgba(22,30,23,.95);
  border:1px solid rgba(255,255,255,.12); border-radius:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:1.1rem; display:flex; flex-direction:column; gap:.6rem;
}
.fu_modal_box h3{ margin:0 0 .2rem; color:#fff; text-align:center; }
/* Hilfe liegt über dem Pausenmenü */
.fu_help_layer{ z-index:7; }
.fu_help_box{ width:min(360px,90%); max-height:88%; overflow-y:auto; }
.fu_help_box ul{
  margin:.2rem 0 .4rem; padding-left:1.1rem;
  font-size:.82rem; line-height:1.5; color:#dfe7df;
}
.fu_help_box li{ margin-bottom:.35rem; }
.fu_help_box li strong{ color:#ffe27a; }
/* Fortschritt als Checkliste */
.fu_progress{
  background:#f7faf7; border:1px solid #e3efe3; border-radius:.7rem;
  padding:.5rem .6rem; margin-bottom:.55rem;
}
.fu_prog_head{
  font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:#2e7d32; margin-bottom:.25rem;
}
#fu_prog{ list-style:none; margin:0; padding:0; }
#fu_prog li{
  display:flex; gap:.45rem; align-items:center;
  font-size:.76rem; line-height:1.4; color:#435043; padding:.1rem 0;
}
.fu_prog_mark{
  flex:0 0 auto; width:.8rem; height:.8rem;
  border-radius:.25rem; border:2px solid #9db09d; background:transparent;
}
#fu_prog li.done{ color:#8fa88f; text-decoration:line-through; }
#fu_prog li.done .fu_prog_mark{
  border-color:#43A047; background:#43A047;
}
/* Rezept-Tooltip */
#fu_tip{
  display:none; margin:.4rem 0 0; padding:.5rem .6rem;
  background:#26302a; color:#eef3ea; border-radius:.6rem;
  font-size:.74rem; line-height:1.45;
}
#fu_tip.show{ display:block; }
#fu_tip b{ color:#ffe27a; }
/* Rezept ausgewählt = grüner Rand wie Baumenü */
.fusion_recipe.is_next{
  background:#E8F5E9; border-color:#43A047;
  box-shadow:0 0 0 1px #43A047;
}
/* Mobile: Rezepte als horizontale Palette */
@media (max-width:60rem){
  .fusion_recipes{
    display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.35rem;
    scroll-snap-type:x mandatory;
  }
  .fusion_recipes .fusion_recipe{
    flex:0 0 9.5rem; scroll-snap-align:start;
    flex-direction:column; text-align:center; align-items:center;
    background:#f7faf7; border-color:#e3efe3;
  }
  .fusion_recipes .fusion_recipe_arrow{ display:none; }
}
/* Kleine Bildschirme: Topbar kompakt wie Root&Route */
@media (max-width:30rem){
  .fu_topbar{ gap:.45rem .6rem; padding:.45rem .6rem; }
  .fu_stat{ min-width:0; }
  .fu_stat label, .fusion_next_label{ display:none; }
  .fu_stat span{ font-size:1.05rem; }
}

/* ---------- Wissens-Snake ---------- */
.snake_hud{
  background:#fff; border:1.5px solid #e0e0e0; border-radius:1rem;
  padding:.6rem .75rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center;
  margin-bottom:.6rem; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.snake_hud_box{ display:flex; flex-direction:column; min-width:4.2rem; }
.snake_hud_box label{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--grey600-color); }
.snake_hud_box span{ font-size:1.2rem; font-weight:800; color:var(--link-color); line-height:1.1; }
.snake_q{ font-size:1.02rem !important; color:#1B5E20 !important; line-height:1.25 !important; white-space:normal; }
.snake_qbar{
  text-align:center; margin:0 auto .6rem; max-width:min(900px,95vw);
  background:#fff; border:2px solid #2E7D32; border-radius:.9rem;
  padding:.6rem .9rem; box-shadow:0 4px 14px rgba(0,0,0,.08);
  min-height:3rem; display:flex; align-items:center; justify-content:center;
}
.snake_qbar .snake_q{ max-width:none; font-size:1.18rem !important; }
.snake_topic{ margin-left:auto; display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.snake_topic label{ font-size:.82rem; font-weight:700; color:var(--grey600-color); }
.snake_canvaswrap{
  position:relative; border-radius:1rem; overflow:hidden;
  background:#fff; border:2.5px solid #2E7D32; box-shadow:0 8px 24px rgba(0,0,0,.18), 0 0 0 3px rgba(67,160,71,0.18);
  display:flex; justify-content:center; align-items:center; padding:0;
  margin-bottom:.6rem; touch-action:none; user-select:none;
}
#snake_canvas{ display:block; width:100%; height:auto; aspect-ratio:600/450; max-width:min(900px,95vw); max-height:min(78vh,680px); background:#fff; }
.snake_controls{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin:.4rem 0 .2rem; }
.snake_dpad_row{ display:flex; gap:.35rem; }
.snake_dpad{
  width:3.2rem; height:3.2rem; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid #e0e0e0; border-radius:.7rem;
  font-size:1.2rem; font-weight:800; color:var(--grey600-color);
  box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:pointer; touch-action:manipulation;
}
.snake_dpad:active{ background:#e8f5e9; border-color:#66BB6A; transform:scale(.96); }
@media (max-width:30rem){
  .snake_topic{ width:100%; margin-left:0; }
  .snake_q{ font-size:.92rem !important; }
}

/* ---------- Mobile polish - 480px and below ---------- */
@media (max-width: 30rem) {
  .jupi_main { padding:.75rem .6rem 1.2rem; }
  .jupi_intro { padding:.6rem .3rem 0; margin-bottom:1.2rem; }
  .jupi_intro p { font-size:.9rem; }
  .jupi_games { gap:.75rem; }
  .jupi_game_card { padding:.9rem; border-radius:1rem; }
  .rr_stage { padding:.8rem .55rem .9rem; gap:.75rem; }
  .rr_key { min-width:2.35rem; min-height:2.35rem; font-size:.88rem; }
  .rr_slot { border-radius:.35rem; }
  .vm_board { gap:.35rem; }
  .vm_face { border-radius:.6rem; }
  .ww_stage { padding:.85rem .45rem; }
  .ww_tile { border-radius:.4rem; }
  .fu_topbar { border-radius:.8rem; }
  .fusion_canvaswrap { border-radius:.8rem; }
}
@media (max-width: 20rem) {
  .ww_key { min-width:1.65rem; }
  .rr_keyrow { gap:.22rem; }
}

/* ---------- Hilfe-Modal (geteilt, Vorbild: Wissens-Snake) ----------
   Fester Kopf mit ×, Text scrollt darunter. Nutzung:
   <div class="jupi_modal" id="xx_help" hidden role="dialog" aria-label="Anleitung"> ... */
.jupi_modal { position:fixed; inset:0; z-index:300; background:rgba(20,30,20,.5); display:flex; align-items:center; justify-content:center; padding:1rem; }
.jupi_modal[hidden]{ display:none; }
.jupi_modal_card { background:#fff; border-radius:1rem; max-width:38rem; width:100%; max-height:min(84dvh,44rem); display:flex; flex-direction:column; box-shadow:0 18px 50px rgba(0,0,0,.4); overflow:hidden; }
.jupi_modal_head { display:flex; align-items:center; gap:.55rem; padding:.7rem 1rem; background:linear-gradient(135deg,#e8f5e9,#fff); border-bottom:2px solid #c8e6c9; color:#1b5e20; }
.jupi_modal_head img { width:1.8rem; height:1.8rem; border-radius:.4rem; }
.jupi_modal_head h2 { margin:0; font-size:1.05rem; }
.jupi_modal_close { margin-left:auto; border:none; background:#e0e0e0; color:#333; min-width:1.9rem; height:1.9rem; border-radius:.5rem; font-weight:800; cursor:pointer; }
.jupi_modal_close:hover { background:#cfcfcf; }
.jupi_modal_body { overflow-y:auto; padding:.9rem 1.15rem 1.2rem; font-size:.92rem; line-height:1.55; color:#2e2e2e; }
.jupi_modal_body h3 { margin:1rem 0 .3rem; font-size:.95rem; color:#2e7d32; }
.jupi_modal_body ul { margin:.25rem 0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.3rem; }
.jupi_modal_intro { margin-top:0; }
.jupi_modal_foot { margin:1.1rem 0 0; padding-top:.6rem; border-top:1px solid #e0e0e0; font-size:.8rem; color:var(--grey600-color); }

/* ---------- Small helpers ---------- */
.bypass { clip: rect(0 0 0 0); clip-path: inset(100%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }

/* ---------- Dark Mode (html[data-theme="dark"]) ----------
   Akzentfarbe: Material Orange (siehe colors.css).
   Hier werden nur hart codierte Light-Farben ueberschrieben,
   alles andere laeuft ueber die CSS-Variablen. */
html[data-theme="dark"] body.jupi {
  background: radial-gradient(1200px 600px at 10% -10%, #2a2118 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, #1e1e1e 0%, transparent 55%),
              #121212;
  color: #E0E0E0;
}
html[data-theme="dark"] .jupi_header {
  background: linear-gradient(135deg, #1a1a1a 0%, #262626 55%, #4a2f0a 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.08) inset;
}
html[data-theme="dark"] .jupi_nav_back {
  background:#1E1E1E; color:#FB8C00; border-color:#FB8C00;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
html[data-theme="dark"] .jupi_nav_back:hover { background:#2a2118; }
html[data-theme="dark"] .jupi_nav_opt.is_active {
  background:#1E1E1E; color:#FB8C00; border-color:#FB8C00;
}
html[data-theme="dark"] .jupi_footer {
  background:#1A1A1A; border-top:1px solid #333;
}
html[data-theme="dark"] .jupi_container > .jupi_main,
html[data-theme="dark"] .jupi_container > .jupi_footer { background: var(--ct-color); }

/* Intro + Karten */
html[data-theme="dark"] .jupi_intro h1,
html[data-theme="dark"] .jupi_intro h2 { color:#FFB74D; }
html[data-theme="dark"] .jupi_game_card {
  background:#1E1E1E; border-color:#333; color:#E0E0E0;
}
html[data-theme="dark"] .jupi_game_card::before {
  background: linear-gradient(90deg, #FB8C00, #FFB74D);
}
html[data-theme="dark"] .jupi_game_card:hover { border-color:#FB8C00; }
html[data-theme="dark"] .jupi_game_card .card_icon img { background:#2a2118; }
html[data-theme="dark"] .jupi_game_card .card_play { color:#FB8C00; }
html[data-theme="dark"] .jupi_game_card .card_kompetenz { background:#2a2118; color:#E0E0E0; }
html[data-theme="dark"] .jupi_game_card .card_kompetenz strong { color:#FFB74D; }
html[data-theme="dark"] .jupi_game_card .card_status_beta { background:#3a2f10; color:#FFE082; border-color:#F9A825; }
html[data-theme="dark"] .jupi_game_card .card_status_alpha { background:#3d1a18; color:#FF8A80; border-color:#E57373; }
html[data-theme="dark"] .jupi_game_card .card_status_prealpha { background:#333333; color:#CCCCCC; border-color:#757575; }
html[data-theme="dark"] .jupi_game_card .card_status_geplant { background:#1b2f45; color:#9cc7f0; border-color:#4a6a8a; }
html[data-theme="dark"] .jupi_game_card_geplant { background:#1c2732; border-color:#3a4a58; }
html[data-theme="dark"] .jupi_game_card_geplant .card_icon_geplant { background:#243444; box-shadow: inset 0 0 0 1px #33475b; }
html[data-theme="dark"] .jupi_game_card_geplant h2 { color:#b9c9d6; }

/* Buttons, Selects, Panels */
html[data-theme="dark"] .jupi_btn {
  background:#FB8C00; color:#1a1a1a;
  box-shadow: 0 2px 10px rgba(251,140,0,.35);
}
html[data-theme="dark"] .jupi_btn:hover {
  background:#FFA726; box-shadow: 0 6px 16px rgba(251,140,0,.4);
}
html[data-theme="dark"] .jupi_btn_alt { background:#424242; color:#E0E0E0; }
html[data-theme="dark"] .jupi_btn_alt:hover { background:#616161; }
html[data-theme="dark"] .jupi_select {
  background:#1E1E1E; color:#E0E0E0; border-color:#424242;
}
html[data-theme="dark"] .vm_panel,
html[data-theme="dark"] .rr_controls,
html[data-theme="dark"] .ww_panel,
html[data-theme="dark"] .flappy_hud, html[data-theme="dark"] .fu_topbar,
html[data-theme="dark"] .snake_hud, html[data-theme="dark"] .fusion_sidebar {
  background:#1E1E1E; border-color:#333;
}

/* Wortwunder */
html[data-theme="dark"] .ww_catbtn { background:#1E1E1E; border-color:#424242; color:#E0E0E0; }
html[data-theme="dark"] .ww_catbtn.is_active { background:#FB8C00; border-color:#FB8C00; color:#1a1a1a; }
html[data-theme="dark"] .ww_stage { background:#1E1E1E; border-color:#4a3520; }
html[data-theme="dark"] .ww_tile { background:#262626; border-color:#424242; color:#E0E0E0; }
html[data-theme="dark"] .ww_tile.filled { border-color:#757575; }
html[data-theme="dark"] .ww_key { background:#262626; border-color:#424242; color:#E0E0E0; }
html[data-theme="dark"] .ww_key.absent { background:#303030; border-color:#303030; color:#757575; }
/* Farb-Hinweise: hoehere Spezifitaet als die Dark-Basis-Kachel darueber, sonst
   bleibt alles grau. Festes Gruen/Gelb statt Variable - die Gruen-Variable wird
   im Dark-Theme orange, der Hilfe-Text sagt aber "Gruen = richtig". */
html[data-theme="dark"] .ww_tile.good { background:#66BB6A; border-color:#66BB6A; color:#fff; }
html[data-theme="dark"] .ww_tile.present { background:#FDD835; border-color:#FDD835; color:#111; }
html[data-theme="dark"] .ww_tile.absent { background:#424242; border-color:#424242; color:#BDBDBD; }
html[data-theme="dark"] .ww_key.good { background:#66BB6A; border-color:#66BB6A; color:#fff; }
html[data-theme="dark"] .ww_key.present { background:#FDD835; border-color:#FDD835; color:#111; }
html[data-theme="dark"] .ww_overlay { background: rgba(18,18,18,.94); }
html[data-theme="dark"] .ww_overlay h3,
html[data-theme="dark"] .ww_overlay_word { color:#FB8C00; }

/* Vokabel-Memory */
html[data-theme="dark"] .vm_word {
  background:#1E1E1E; border-color:#424242; color:#E0E0E0;
}
html[data-theme="dark"] .vm_card.matched .vm_word { background:#3a2f10; }
html[data-theme="dark"] .vm_cover { border-color:#FB8C00; }
html[data-theme="dark"] .vm_topbar { background:rgba(30,30,30,.92); border-color:#333; }
html[data-theme="dark"] .vm_stars .off { color:#616161; }
html[data-theme="dark"] #vm_bestnote { color:#A5D6A7; }

/* Wissens-Snake */
html[data-theme="dark"] .snake_q { color:#FFB74D !important; }
html[data-theme="dark"] .snake_qbar { background:#1E1E1E; border-color:#FB8C00; }
html[data-theme="dark"] .snake_canvaswrap {
  border-color:#FB8C00;
  box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 0 3px rgba(251,140,0,.18);
}
html[data-theme="dark"] .snake_dpad { background:#1E1E1E; border-color:#424242; color:#BDBDBD; }
html[data-theme="dark"] .snake_dpad:active { background:#2a2118; border-color:#FB8C00; }

/* Hilfe-Modal (geteilt) auf dunkel */
html[data-theme="dark"] .jupi_modal { background:rgba(0,0,0,.65); }
html[data-theme="dark"] .jupi_modal_card { background:#1E1E1E; }
html[data-theme="dark"] .jupi_modal_head { background:#262626; border-color:#4a3520; color:#FFB74D; }
html[data-theme="dark"] .jupi_modal_body { color:#E0E0E0; }
html[data-theme="dark"] .jupi_modal_body h3 { color:#FB8C00; }
html[data-theme="dark"] .jupi_modal_close { background:#424242; color:#E0E0E0; }
html[data-theme="dark"] .jupi_modal_foot { border-color:#333; color:#9E9E9E; }

/* Flappy + Fusion: Overlays auf dunkel, Canvas bleibt hell */
html[data-theme="dark"] .flappy_overlay { background: rgba(18,18,18,.9); }
html[data-theme="dark"] .flappy_overlay h3 { color:#FFB74D; }
html[data-theme="dark"] .fusion_sidebar h3 { color:#FFB74D; }
html[data-theme="dark"] .fusion_next_dot { background:#1E1E1E; border-color:#424242; }
html[data-theme="dark"] .fusion_recipe.is_next { background:#2a2118; border-color:#4a3520; }
html[data-theme="dark"] .fusion_recipe_text { color:#E0E0E0; }
html[data-theme="dark"] .fu_iconbtn {
  background:rgba(102,187,106,.14); border-color:rgba(102,187,106,.35);
  color:#A5D6A7;
}
html[data-theme="dark"] .fu_progress {
  background:#1a231b; border-color:#333;
}
html[data-theme="dark"] #fu_prog li { color:#B0BEC5; }
html[data-theme="dark"] #fu_prog li.done { color:#6b7a6b; }
html[data-theme="dark"] .fusion_recipes .fusion_recipe {
  background:#1a231b; border-color:#333;
}

/* ---------- Bruch-Pizza - eigene Styles (nur bruch_-Praefix) ---------- */
.bruch_hud {
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem;
  align-items:center; justify-content:center;
  background:var(--ct-color);
  border:1px solid #ececec; border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  max-width:56rem; margin:0 auto 1rem; padding:.9rem 1rem;
}
.bruch_stat { display:flex; flex-direction:column; align-items:center; min-width:4.4rem; }
.bruch_stat label {
  font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grey600-color);
}
.bruch_stat span { font-size:1.3rem; font-weight:800; color:#1b5e20; line-height:1.2; }
.bruch_wahl {
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  justify-content:center; width:100%;
  border-top:1px dashed var(--grey200-color); padding-top:.7rem;
}
.bruch_wahl label { font-size:.85rem; font-weight:600; color:var(--grey600-color); }

.bruch_spielfeld {
  background:var(--ct-color);
  border:1px solid #ececec; border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  max-width:56rem; margin:0 auto; padding:1.2rem 1rem 1.3rem;
  text-align:center;
}
.bruch_aufgabe {
  font-size:1.18rem; font-weight:700; color:var(--blk-color);
  margin:0 0 .9rem; min-height:1.7em; line-height:1.5;
}
.bruch_klein { font-size:.82rem; font-weight:600; color:var(--grey600-color); }

/* Pizza-Zeichnung (inline SVG, vom JS gebaut) */
.bruch_pizza_svg {
  width:min(76vw, 320px); height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.16));
}
.bruch_kruste { fill:#c9803a; stroke:#a4611f; stroke-width:3; }
.bruch_teig { fill:#ffd45f; }
.bruch_stueck { fill:#ffdf85; stroke:#dc9c2e; stroke-width:1.6; transition:fill .12s; }
.bruch_stueck.bruch_aktiv { fill:#e8503a; stroke:#b93321; }
.bruch_klick { cursor:pointer; }
.bruch_klick:hover { fill:#fff0bd; }
.bruch_klick.bruch_aktiv:hover { fill:#f2603f; }

/* Buttons unter dem Spielfeld - gross genug fuer Touch (min. ~44px) */
.bruch_aktionen { display:flex; gap:.7rem; justify-content:center; margin:.7rem 0 .3rem; }
.bruch_aktionen .jupi_btn { min-height:46px; min-width:120px; }
.bruch_versteckt { display:none !important; }
.bruch_msg {
  min-height:1.6em; max-width:36rem; margin:.4rem auto 0;
  font-size:1rem; font-weight:600; line-height:1.55;
}
.bruch_msg.bruch_ok { color:#1b5e20; }
.bruch_msg.bruch_falsch { color:#b3261e; }

/* Bruch als gestapelte Zahl: Zaehler ueber Strich ueber Nenner */
.bruch_zahl {
  display:inline-flex; flex-direction:column; align-items:center;
  line-height:1.08; font-weight:800; vertical-align:middle;
}
.bruch_oben { padding:0 .3em .12em; }
.bruch_unten { padding:.12em .3em 0; border-top:.085em solid currentColor; }

/* Modus Vergleichen: Antwort-Karten fuer die Brueche */
.bruch_vergleich {
  display:flex; flex-wrap:wrap; gap:.8rem;
  justify-content:center; margin:.5rem 0 .3rem;
}
.bruch_kauf {
  font-family:inherit; font-size:1.45rem;
  display:flex; align-items:center; justify-content:center;
  min-width:6.5rem; min-height:64px; padding:.4rem 1rem;
  background:var(--ct-color); color:var(--blk-color);
  border:2.5px solid var(--link-color); border-radius:1rem;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .1s, box-shadow .12s, background .12s;
}
.bruch_kauf:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(67,160,71,.25);
  background:var(--green50-color);
}
.bruch_kauf_gleich { font-size:1.02rem; font-weight:700; }
.bruch_kauf_falsch {
  border-color:var(--red600-color) !important;
  background:#fdecea !important;
  opacity:.7; transform:none !important; cursor:default;
}

/* Mini-Pizzen in der Erklaerung (kommen erst NACH richtiger Antwort) */
.bruch_mini { display:flex; gap:1.4rem; justify-content:center; margin:.7rem 0 .2rem; }
.bruch_mini_box {
  display:flex; flex-direction:column; align-items:center;
  gap:.15rem; font-weight:700;
}
.bruch_mini_box .bruch_pizza_svg {
  width:min(24vw, 108px);
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.14));
}

/* Modus Passendes Paar: Bruch vorgeben, richtige Pizza finden */
.bruch_paar_geber {
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  font-size:2.1rem; margin:.2rem 0 .9rem;
}
.bruch_paar_geber .bruch_pizza_svg { width:112px; }
.bruch_paar_wahl {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:.8rem;
  max-width:32rem; margin:0 auto;
}
.bruch_karte {
  font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.55rem .35rem .45rem;
  background:var(--ct-color);
  border:2.5px solid var(--grey300-color); border-radius:1rem;
  cursor:pointer; transition:transform .1s, border-color .12s, box-shadow .12s;
}
.bruch_karte:hover {
  transform:translateY(-2px); border-color:var(--link-color);
  box-shadow:0 6px 14px rgba(67,160,71,.2);
}
.bruch_karte .bruch_pizza_svg { width:100%; max-width:118px; }
.bruch_karte_name { font-size:.78rem; font-weight:700; color:var(--grey600-color); }
.bruch_karte_richtig { border-color:#2e7d32 !important; background:#e8f5e9 !important; }
.bruch_karte_falsch { border-color:var(--red600-color) !important; opacity:.7; cursor:default; }

@media (max-width:30rem) {
  .bruch_aufgabe { font-size:1.05rem; }
  .bruch_kauf { font-size:1.25rem; min-width:5.6rem; }
  .bruch_paar_geber { font-size:1.7rem; }
}

/* Dark Mode Bruch-Pizza */
html[data-theme="dark"] .bruch_hud,
html[data-theme="dark"] .bruch_spielfeld { border-color:#3a3a3a; box-shadow:none; }
html[data-theme="dark"] .bruch_stat span { color:#FFB74D; }
html[data-theme="dark"] .bruch_wahl { border-top-color:#3a3a3a; }
html[data-theme="dark"] .bruch_msg.bruch_ok { color:#a5d6a7; }
html[data-theme="dark"] .bruch_msg.bruch_falsch { color:#ef9a9a; }
html[data-theme="dark"] .bruch_kauf:hover { background:var(--green100-color); }
html[data-theme="dark"] .bruch_kauf_falsch { background:#3a201e !important; }
html[data-theme="dark"] .bruch_karte_richtig { background:#243524 !important; }
html[data-theme="dark"] .bruch_kruste { fill:#a86430; stroke:#7c471c; }
html[data-theme="dark"] .bruch_stueck { fill:#e8c56a; }
html[data-theme="dark"] .bruch_stueck.bruch_aktiv { fill:#c0392b; stroke:#8f2318; }

/* ---------- Satz-Baukasten - alle Styles mit Praefix satzbau_ ---------- */
.satzbau_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.satzbau_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.satzbau_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.satzbau_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.satzbau_controls { margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; }
.satzbau_controls label { font-weight:700; font-size:.9rem; }

/* Spielfeld: Satzstreifen (Baulinie) oben, Kachel-Pool unten */
.satzbau_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.satzbau_task_label { margin:0 0 .6rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }
.satzbau_line {
  min-height:8rem; padding:.75rem; border-radius:.9rem;
  border:.18rem dashed var(--green400-color); background:var(--green50-color);
  display:flex; flex-wrap:wrap; gap:.55rem;
  align-content:flex-start; align-items:flex-start;
  transition:border-color .2s, background .2s;
}
.satzbau_line:empty::before {
  content:"Tippe unten auf die Wörter - sie landen hier in den Satzstreifen.";
  color:var(--grey600-color); font-size:.95rem;
  align-self:center; margin:auto; padding:.5rem; text-align:center;
}
.satzbau_pool {
  min-height:4.6rem; display:flex; flex-wrap:wrap; gap:.55rem;
  padding:.9rem .1rem .1rem; align-content:flex-start;
}
/* Wort-Kacheln - groß und touchfreundlich (min. 48px hoch) */
.satzbau_tile {
  font:inherit; font-weight:700; font-size:1.08rem; line-height:1.2;
  min-height:48px; padding:.55rem 1rem; border-radius:.7rem;
  border:.14rem solid var(--green600-color);
  background:var(--div-color); color:var(--blk-color);
  box-shadow:0 3px 0 rgba(46,125,50,.35); cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .15s;
}
.satzbau_tile:hover { transform:translateY(-2px); background:var(--green50-color); }
.satzbau_tile:active { transform:scale(.95); box-shadow:0 1px 0 rgba(46,125,50,.35); }
.satzbau_tile:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.satzbau_tile:disabled { cursor:default; }
/* Kachel an der ersten falschen Position: rot umrandet + kurzes Zittern */
.satzbau_tile_err {
  border-color:var(--red600-color); color:var(--red600-color);
  box-shadow:0 0 0 .2rem rgba(229,57,53,.25);
  animation:satzbau_shake .3s;
}
/* gelöste Kacheln (nach "Lösung zeigen"): gefüllt, nicht klickbar */
.satzbau_tile_ok {
  background:var(--green600-color); border-color:var(--link-h-color);
  color:#fff; box-shadow:none;
}
/* Satzzeichen kommt automatisch ans Ende des Streifens */
.satzbau_punct {
  font-weight:800; font-size:1.3rem; color:var(--green600-color);
  align-self:center; padding:0 .15rem;
}
.satzbau_line_win {
  border-style:solid; border-color:var(--green600-color);
  background:var(--green100-color); animation:satzbau_pop .5s;
}
@keyframes satzbau_shake {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-5px); }
  75% { transform:translateX(5px); }
}
@keyframes satzbau_pop {
  0% { transform:scale(1); }
  40% { transform:scale(1.015); }
  100% { transform:scale(1); }
}

/* Aktions-Buttons, Übersetzung, Rückmeldung */
.satzbau_btns { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.satzbau_de {
  margin-top:.6rem; padding:.55rem .85rem; border-radius:.6rem;
  background:var(--green100-color); font-size:1rem;
}
.satzbau_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.satzbau_msg_ok { color:var(--link-color); }
.satzbau_msg_err { color:var(--red600-color); }

/* Zwischenbilanz nach 10 Sätzen */
.satzbau_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.satzbau_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.satzbau_done p { margin:.3rem 0 1rem; font-size:1.05rem; }

/* Handy: kompakteres Panel, Kacheln bleiben 48px hoch */
@media (max-width:600px) {
  .satzbau_panel { padding:.7rem .8rem; }
  .satzbau_controls { margin-left:0; }
  .satzbau_stage { padding:.8rem .7rem 1rem; }
  .satzbau_tile { font-size:1rem; min-height:48px; padding:.5rem .8rem; }
  .satzbau_line { min-height:7rem; }
}

/* Dark Mode Satz-Baukasten: Farben kommen großteils aus colors.css */
html[data-theme="dark"] .satzbau_tile {
  background:var(--alt-div-hover-color); box-shadow:0 3px 0 rgba(0,0,0,.45);
}
html[data-theme="dark"] .satzbau_tile:hover { background:var(--grey300-color); }
html[data-theme="dark"] .satzbau_tile_err { color:#FF8A80; border-color:#FF8A80; }
html[data-theme="dark"] .satzbau_msg_err { color:#FF8A80; }
html[data-theme="dark"] .satzbau_punct { color:var(--bt-color); }

/* ---------- Artikel-Faenger - alle Styles mit Praefix artikel_ ---------- */
/* Farbcodes wie in der Schule ueblich (Montessori): der = blau, die = rot, das = gruen */
.artikel_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.artikel_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.artikel_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.artikel_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.artikel_controls { margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; }
.artikel_controls label { font-weight:700; font-size:.9rem; }

/* Spielfeld: grosse Wort-Karte mit drei Artikel-Knoepfen darunter */
.artikel_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.artikel_task_label { margin:0 0 .6rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }
.artikel_card {
  min-height:6.5rem; display:flex; align-items:center; justify-content:center;
  background:var(--grey50-color); border:3px dashed var(--grey400-color);
  border-radius:1rem; padding:1rem .8rem; text-align:center;
  font-size:2.4rem; font-weight:800;
}
.artikel_card_ok {
  border-color:var(--link-color); background:var(--green50-color);
  animation:artikel_pop .5s;
}
.artikel_card_err {
  border-color:var(--red600-color); background:#FDECEA;
  animation:artikel_shake .35s;
}
/* Artikel farbig auf der Karte - Abstand statt Leerzeichen (kollabiert sonst) */
.artikel_art { margin-right:.38rem; }
.artikel_art_der, .artikel_farbe_der { color:var(--lightblue600-color); }
.artikel_art_die, .artikel_farbe_die { color:var(--red600-color); }
.artikel_art_das, .artikel_farbe_das { color:var(--link-color); }

/* Drei grosse Artikel-Knoepfe */
.artikel_btns { display:flex; gap:.8rem; margin-top:1rem; }
.artikel_btn {
  flex:1; min-height:64px; font-size:1.5rem; font-weight:800;
  border:none; border-radius:1rem; color:#FFFFFF; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.28); transition:transform .1s, filter .1s;
}
.artikel_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.artikel_btn:active:not(:disabled) { transform:translateY(1px);
  box-shadow:0 2px 0 rgba(0,0,0,.28); }
.artikel_btn:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.artikel_btn:disabled { cursor:default; opacity:.85; }
.artikel_btn_der { background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD; }
.artikel_btn_die { background:var(--red600-color); box-shadow:0 4px 0 #C62828; }
.artikel_btn_das { background:var(--green600-color); box-shadow:0 4px 0 #2E7D32; }
.artikel_btn_right { outline:4px solid var(--yellow600-color); outline-offset:3px; }
.artikel_btn_wrong { opacity:.55; animation:artikel_shake .35s; }

.artikel_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.artikel_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.artikel_msg_ok { color:var(--link-color); }
.artikel_msg_err { color:var(--red600-color); }

/* Zwischenbilanz mit Fangliste (alle Woerter der Runde mit richtigem Artikel) */
.artikel_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.artikel_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.artikel_done h4 { margin:.4rem 0 .3rem; color:var(--grey600-color); }
.artikel_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.artikel_fangliste { display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:center; margin:.3rem 0 1.1rem; }
.artikel_chip {
  border-radius:999px; padding:.35rem .8rem; font-weight:700; font-size:.95rem;
  background:var(--grey50-color); border:2px solid var(--grey300-color);
}
.artikel_chip_der { border-color:var(--lightblue600-color); }
.artikel_chip_die { border-color:var(--red600-color); }
.artikel_chip_das { border-color:var(--link-color); }
.artikel_chip_err { background:#FDECEA; border-style:dashed; }

@keyframes artikel_pop {
  0% { transform:scale(1); }
  40% { transform:scale(1.06); }
  100% { transform:scale(1); }
}
@keyframes artikel_shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  75% { transform:translateX(6px); }
}

/* Handy: kompaktere Karte und Knoepfe */
@media (max-width:600px) {
  .artikel_panel { padding:.7rem .8rem; }
  .artikel_controls { margin-left:0; }
  .artikel_stage { padding:.8rem .7rem 1rem; }
  .artikel_card { font-size:1.8rem; min-height:5rem; }
  .artikel_btn { min-height:60px; font-size:1.3rem; }
}

/* Dark Mode Artikel-Faenger: Farben kommen grossteils aus colors.css */
html[data-theme="dark"] .artikel_card { background:var(--alt-div-color);
  border-color:var(--grey400-color); }
html[data-theme="dark"] .artikel_card_ok { background:var(--green100-color); }
html[data-theme="dark"] .artikel_card_err { background:#3a201e; }
html[data-theme="dark"] .artikel_chip { background:var(--alt-div-color); }
html[data-theme="dark"] .artikel_chip_err { background:#3a201e; }
html[data-theme="dark"] .artikel_msg_err { color:#FF8A80; }

/* ---------- Gegenteil-Blitz - alle Styles mit Praefix gb_ ---------- */
/* Vierer-Auswahl im 2x2-Raster, Wort-Karte mit Emoji */
.gb_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.gb_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.gb_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.gb_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.gb_controls { margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; }
.gb_controls label { font-weight:700; font-size:.9rem; }

/* Spielfeld: grosse Wort-Karte mit Blitz-Raster darunter */
.gb_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.gb_task_label { margin:0 0 .6rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }
.gb_card {
  min-height:6.5rem; display:flex; align-items:center; justify-content:center;
  gap:.6rem; background:var(--grey50-color); border:3px dashed var(--grey400-color);
  border-radius:1rem; padding:1rem .8rem; text-align:center;
  font-size:2.2rem; font-weight:800; flex-wrap:wrap;
}
.gb_emoji { font-size:2.6rem; }
.gb_flash { color:var(--yellow600-color); }
.gb_answer { color:var(--link-color); }
.gb_card_ok {
  border-color:var(--link-color); background:var(--green50-color);
  animation:gb_pop .5s;
}
.gb_card_err {
  border-color:var(--red600-color); background:#FDECEA;
  animation:gb_shake .35s;
}

/* Vier grosse Antwort-Knoepfe im 2x2-Raster */
.gb_btns { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1rem; }
.gb_btn {
  display:flex; align-items:center; gap:.6rem;
  min-height:60px; font-size:1.25rem; font-weight:800;
  border:none; border-radius:1rem; color:#FFFFFF; cursor:pointer;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  padding:.6rem .9rem; transition:transform .1s, filter .1s;
  text-align:left;
}
.gb_btn:nth-child(2) { background:var(--green600-color); box-shadow:0 4px 0 #2E7D32; }
.gb_btn:nth-child(3) { background:#FB8C00; box-shadow:0 4px 0 #EF6C00; }
.gb_btn:nth-child(4) { background:#8E24AA; box-shadow:0 4px 0 #6A1B9A; }
.gb_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.gb_btn:active:not(:disabled) { transform:translateY(1px);
  box-shadow:0 2px 0 rgba(0,0,0,.28); }
.gb_btn:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.gb_btn:disabled { cursor:default; }
.gb_key {
  flex-shrink:0; width:1.9rem; height:1.9rem; display:inline-flex;
  align-items:center; justify-content:center; border-radius:.55rem;
  background:rgba(255,255,255,.28); font-size:1rem;
}
.gb_btn_right { outline:4px solid var(--yellow600-color); outline-offset:3px; }
.gb_btn_wrong { opacity:.55; animation:gb_shake .35s; }

.gb_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.gb_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.gb_msg_ok { color:var(--link-color); }
.gb_msg_err { color:var(--red600-color); }

/* Zwischenbilanz mit Paarliste (alle Paare der Runde mit Gegenteil) */
.gb_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.gb_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.gb_done h4 { margin:.4rem 0 .3rem; color:var(--grey600-color); }
.gb_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.gb_paarliste { display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:center; margin:.3rem 0 1.1rem; }
.gb_chip {
  border-radius:999px; padding:.35rem .8rem; font-weight:700; font-size:.95rem;
  background:var(--grey50-color); border:2px solid var(--link-color);
}
.gb_chip_err { background:#FDECEA; border-style:dashed; border-color:var(--red600-color); }

@keyframes gb_pop {
  0% { transform:scale(1); }
  40% { transform:scale(1.06); }
  100% { transform:scale(1); }
}
@keyframes gb_shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  75% { transform:translateX(6px); }
}

/* Handy: einspaltige Knoepfe, kompaktere Karte */
@media (max-width:600px) {
  .gb_panel { padding:.7rem .8rem; }
  .gb_controls { margin-left:0; }
  .gb_stage { padding:.8rem .7rem 1rem; }
  .gb_card { font-size:1.6rem; min-height:5rem; }
  .gb_emoji { font-size:2rem; }
  .gb_btns { grid-template-columns:1fr; }
  .gb_btn { min-height:56px; font-size:1.15rem; }
}

/* Dark Mode Gegenteil-Blitz */
html[data-theme="dark"] .gb_card { background:var(--alt-div-color);
  border-color:var(--grey400-color); }
html[data-theme="dark"] .gb_card_ok { background:var(--green100-color); }
html[data-theme="dark"] .gb_card_err { background:#3a201e; }
html[data-theme="dark"] .gb_chip { background:var(--alt-div-color); }
html[data-theme="dark"] .gb_chip_err { background:#3a201e; }
html[data-theme="dark"] .gb_msg_err { color:#FF8A80; }

/* ---------- Komparativ-Treppe - alle Styles mit Praefix kt_ ---------- */
/* 3 Stufen-Slots (aufsteigend) + Pool mit 4 Kacheln (3 richtig + 1 Falle) */
.kt_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.kt_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.kt_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.kt_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.kt_controls { margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; }
.kt_controls label { font-weight:700; font-size:.9rem; }

.kt_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.kt_task_label { margin:0 0 .6rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }

/* Treppen-Ansicht: Beste (Stufe 3) steht oben, Stufen rechtsbuendig aufsteigend */
.kt_steps { display:flex; flex-direction:column; gap:.5rem; margin:.4rem 0 .2rem; }
.kt_step { display:flex; align-items:center; gap:.6rem;
  width:100%; margin-left:auto; }
.kt_step1 { max-width:38rem; }
.kt_step2 { max-width:32rem; }
.kt_step3 { max-width:26rem; }
.kt_stufenlabel {
  flex-shrink:0; width:11rem; font-size:.8rem; font-weight:700;
  color:var(--grey600-color); text-align:right;
}
.kt_slot {
  flex:1; min-height:3.2rem; display:flex; align-items:center; justify-content:center;
  background:var(--grey50-color); border:3px dashed var(--grey400-color);
  border-radius:.9rem; padding:.3rem .5rem;
}
.kt_slot:empty::after { content:"…"; color:var(--grey400-color); font-weight:800; }
.kt_slot_ok { border-style:solid; border-color:var(--link-color);
  background:var(--green50-color); }
.kt_slot_err { border-color:var(--red600-color); background:#FDECEA;
  animation:kt_shake .35s; }

/* Schwer: Lueckensatz mit Slots direkt im Satz */
.kt_sentence { font-size:1.25rem; font-weight:700; line-height:2.6; margin:.2rem 0; }
.kt_slot_inline {
  display:inline-flex; min-width:7rem; min-height:2.4rem; padding:.1rem .6rem;
  vertical-align:baseline;
}

/* Pool mit den 4 Kacheln */
.kt_pool { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem;
  min-height:3.2rem; }
.kt_tile {
  flex:1 1 10rem; min-height:3.2rem; font-size:1.2rem; font-weight:800;
  border:3px solid var(--lightblue600-color); border-radius:.9rem;
  background:#fff; color:#1a1a1a; cursor:grab;
  box-shadow:0 3px 0 rgba(0,0,0,.15); transition:transform .1s, background .1s;
  padding:.4rem .8rem;
}
.kt_tile:hover:not(:disabled) { transform:translateY(-2px); background:#E3F2FD; }
.kt_tile:active:not(:disabled) { cursor:grabbing; }
.kt_tile:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.kt_slot .kt_tile, .kt_slot_inline.kt_slot .kt_tile { flex:1; width:100%; }
.kt_tile_ok { border-color:var(--link-color); background:var(--green50-color);
  cursor:default; }
.kt_tile_err { border-color:var(--red600-color); color:var(--red600-color); }
.kt_tile:disabled { cursor:default; opacity:.95; }
.kt_tile_drag { opacity:.45; }
.kt_slot_drop { outline:3px solid var(--yellow600-color); outline-offset:2px;
  background:#FFF8E1; }
.kt_pool_drop { outline:3px dashed var(--yellow600-color); outline-offset:3px;
  border-radius:.9rem; }

.kt_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.kt_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.kt_msg_ok { color:var(--link-color); }
.kt_msg_err { color:var(--red600-color); }

/* Zwischenbilanz mit Treppenliste */
.kt_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.kt_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.kt_done h4 { margin:.4rem 0 .3rem; color:var(--grey600-color); }
.kt_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.kt_treppenliste { display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:center; margin:.3rem 0 1.1rem; }
.kt_chip {
  border-radius:999px; padding:.35rem .8rem; font-weight:700; font-size:.95rem;
  background:var(--grey50-color); border:2px solid var(--link-color);
}
.kt_chip_err { background:#FDECEA; border-style:dashed; border-color:var(--red600-color); }

@keyframes kt_shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  75% { transform:translateX(6px); }
}

/* Handy: Stufenlabels ueber die Slots, Kacheln untereinander */
@media (max-width:600px) {
  .kt_panel { padding:.7rem .8rem; }
  .kt_controls { margin-left:0; }
  .kt_stage { padding:.8rem .7rem 1rem; }
  .kt_step, .kt_step1, .kt_step2, .kt_step3 { max-width:none; margin-left:0;
    flex-direction:column; align-items:stretch; gap:.2rem; }
  .kt_stufenlabel { width:auto; text-align:left; }
  .kt_tile { flex:1 1 100%; font-size:1.1rem; }
  .kt_sentence { font-size:1.05rem; }
  .kt_slot_inline { min-width:5.5rem; }
}

/* Dark Mode Komparativ-Treppe */
html[data-theme="dark"] .kt_slot { background:var(--alt-div-color);
  border-color:var(--grey400-color); }
html[data-theme="dark"] .kt_slot_ok { background:var(--green100-color); }
html[data-theme="dark"] .kt_slot_drop { background:#3a2f10; }
html[data-theme="dark"] .kt_slot_err { background:#3a201e; }
html[data-theme="dark"] .kt_tile { background:var(--alt-div-color); color:#E0E0E0; }
html[data-theme="dark"] .kt_tile:hover:not(:disabled) { background:#2c2c2c; }
html[data-theme="dark"] .kt_tile_ok { background:var(--green100-color); }
html[data-theme="dark"] .kt_chip { background:var(--alt-div-color); }
html[data-theme="dark"] .kt_chip_err { background:#3a201e; }
html[data-theme="dark"] .kt_msg_err, html[data-theme="dark"] .kt_tile_err { color:#FF8A80; }

/* ---------- Startseite: Filter + Suche (Fach, Kompetenz) ---------- */
.jupi_filter {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.jupi_search { display:flex; gap:.6rem; align-items:center; }
.jupi_search_icon { font-size:1.2rem; }
#jupi_q {
  flex:1; font-size:1rem; padding:.55rem 1rem; border-radius:999px;
  border:2px solid var(--grey300-color); background:#fff; color:#1a1a1a;
}
#jupi_q:focus { outline:3px solid var(--yellow600-color); border-color:var(--link-color); }
.jupi_chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.65rem;
  align-items:center; }
.jupi_filterlabel { font-weight:800; font-size:.85rem;
  color:var(--grey600-color); margin-right:.15rem; }
.jupi_tag {
  border:2px solid var(--grey300-color); background:#fff; color:#1a1a1a;
  border-radius:999px; padding:.32rem .8rem; font-size:.88rem; font-weight:700;
  cursor:pointer; transition:background .12s, transform .12s;
}
.jupi_tag:hover { transform:translateY(-1px); border-color:var(--link-color); }
.jupi_tag:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.jupi_tag.is_active { background:var(--link-color);
  border-color:var(--link-color); color:#fff; }
.jupi_count { margin:.6rem 0 0; font-size:.88rem;
  color:var(--grey600-color); font-weight:600; }
.jupi_empty {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem; margin:0 0 1.1rem;
}
.jupi_empty p { font-size:1.05rem; margin:.2rem 0 .9rem; }
/* Ausgeblendete Karten: Attribut-Selektor schlaegt die Karten-Anzeige */
.jupi_game_card[hidden] { display:none; }

/* Handy: Suche ueber die volle Breite */
@media (max-width:600px) {
  .jupi_search { flex-wrap:wrap; }
  #jupi_q { flex:1 1 100%; }
}

/* Dark Mode Filter */
html[data-theme="dark"] .jupi_tag { background:var(--alt-div-color); color:#E0E0E0; }
html[data-theme="dark"] #jupi_q { background:var(--alt-div-color); color:#E0E0E0; }

/* ---------- Startseite: Kategorien-Tabs ---------- */
.jupi_tabs { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.jupi_tab, .jupi_lucky {
  display:inline-flex; align-items:center; gap:.35rem;
  border:2px solid var(--grey300-color); background:#fff; color:#1a1a1a;
  border-radius:999px; padding:.4rem .85rem; font-size:.9rem; font-weight:800;
  cursor:pointer; transition:background .12s, transform .12s, border-color .12s;
}
.jupi_tab:hover, .jupi_lucky:hover { transform:translateY(-1px); border-color:var(--link-color); }
.jupi_tab:focus-visible, .jupi_lucky:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.jupi_tab.is_active { background:var(--link-color); border-color:var(--link-color); color:#fff; }
.jupi_tab_zaehler {
  font-size:.72rem; font-weight:800; line-height:1;
  background:rgba(0,0,0,.08); border-radius:999px; padding:.18rem .45rem;
}
.jupi_tab.is_active .jupi_tab_zaehler { background:rgba(255,255,255,.28); }
/* 🍀 Ueberrasch-mich: Pillen-Look wie die Tabs, steht rechts im Suchfeld-Block */
.jupi_lucky {
  border-color:var(--yellow600-color);
  background:#FFF6D9;
  color:#6b5200;
  white-space:nowrap;
}
.jupi_lucky:hover { border-color:#F9A825; background:#FFF3C4; }
/* Startseiten-Intro: kurzer Text, darum kompaktere Abstaende als im Standard.
   3-Spalten-Raster: Ueberschrift/Text bleiben mittig (Spalte 2), rechts in
   Spalte 3 sitzt der Lab-Link am Rand. Links balancing ein unsichtbarer
   Platzhalter (::before) in Chip-Breite - ohne ihn wandert der mittlere Text
   um die halbe Chip-Breite nach rechts. */
.jupi_intro.jupi_intro_start {
  margin-bottom:1.1rem; padding:1rem 0 0;
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,12rem) minmax(0,44rem) auto;
  justify-content:space-between;
  column-gap:1rem;
  align-items:center;
}
.jupi_intro_start::before {
  content:"";
  grid-column:1; grid-row:1;
  width:12rem;
}
.jupi_intro_start h1 { grid-column:2; grid-row:1; }
.jupi_intro_start p { grid-column:2; grid-row:2; }

/* ---------- Startseite: Lab-Link (Mehr Experimente) ---------- */
/* Pill-Verweis auf die Schwester-Seite lab.msandrae.at (Icon + zweizeiliger
   Text wie im lab-Kopfzeilen-Stil); im Raster oben rechts, mittig zum Text. */
.jupi_lab_link {
  grid-column:3; grid-row:1 / span 2;
  align-self:center;
  display:flex; align-items:center; gap:.55rem;
  padding:.4rem .85rem .4rem .45rem;
  background:var(--ct-color);
  border:2px solid var(--green100-color);
  border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.jupi_lab_link:hover { transform:translateY(-2px); box-shadow:0 5px 14px rgba(0,0,0,.14); }
.jupi_lab_link img { width:2.3rem; height:2.3rem; border-radius:.6rem; display:block; }
.jupi_lab_text { display:flex; flex-direction:column; text-align:left; line-height:1.2; }
.jupi_lab_text strong { color:#1b5e20; font-size:.92rem; }
.jupi_lab_text small { color:var(--grey600-color); font-size:.72rem; }
/* Handy: normale Spalte wiederherstellen, Chip zentriert unter den Text */
@media (max-width:47.99rem) {
  .jupi_intro.jupi_intro_start { display:block; padding:1rem 1rem 0; }
  .jupi_intro_start::before { display:none; }
  .jupi_lab_link { margin:.8rem auto 0; width:max-content; }
}

/* ---------- Startseite: Spiel-Vorschau (Hover) ---------- */
/* Schwebendes Live-Fenster: zeigt das Spiel beim Hover ueber eine Karte in
   einem kleinen Rahmen (960x540 auf halbe Groesse). Reine Anzeige - der
   Mauszeiger faellt auf die Karten durch, nichts ist klickbar. */
.jupi_vorschau {
  position:fixed; z-index:60;           /* ueber dem Sticky-Header (50) */
  width:500px; max-width:calc(100vw - 1rem);
  padding:.5rem;
  background:var(--ct-color);
  border:2px solid var(--green100-color);
  border-radius:.9rem;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  pointer-events:none;
  opacity:0;
  transform:translateY(6px) scale(.98);
  transition:opacity .15s ease, transform .15s ease;
}
.jupi_vorschau[hidden] { display:none; }
.jupi_vorschau.jupi_vorschau_offen { opacity:1; transform:none; }
.jupi_vorschau_kopf { display:flex; align-items:baseline; gap:.5rem; padding:.1rem .25rem .4rem; }
.jupi_vorschau_titel { font-weight:800; font-size:.95rem; color:#1b5e20; }
.jupi_vorschau_hinweis {
  margin-left:auto; font-size:.66rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--grey600-color);
}
/* Der Rahmen: 960x540 px werden auf 480x270 halbiert - man sieht das Spiel
   in der Desktop-Ansicht, nicht in einer gequetschten Handy-Ansicht */
.jupi_vorschau_fenster { position:relative; height:270px; border-radius:.55rem; overflow:hidden; background:#e8f2e8; }
.jupi_vorschau_rahmen {
  position:absolute; top:0; left:0;
  width:960px; height:540px;
  border:0; transform:scale(.5); transform-origin:0 0;
  pointer-events:none;
}
/* Warteschleife, bis das Spiel im Rahmen geladen ist */
.jupi_vorschau_fenster.jupi_vorschau_laedt iframe { visibility:hidden; }
.jupi_vorschau_fenster.jupi_vorschau_laedt::after {
  content:"🎮 Lädt …";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--grey600-color);
  background:#e8f2e8;
  animation:vorschau_puls 1.2s ease-in-out infinite;
}
@keyframes vorschau_puls { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .jupi_vorschau { transition:none; }
  .jupi_vorschau_fenster.jupi_vorschau_laedt::after { animation:none; }
}
/* Touch-Geraete haben kein Hover - Vorschau dort gar nicht erst anbieten */
@media (hover:none) { .jupi_vorschau { display:none; } }

/* Dark Mode: Vorschau-Fenster */
html[data-theme="dark"] .jupi_vorschau { border-color:#2e7d32; box-shadow:0 12px 32px rgba(0,0,0,.6); }
html[data-theme="dark"] .jupi_vorschau_titel { color:#aed581; }
html[data-theme="dark"] .jupi_vorschau_fenster,
html[data-theme="dark"] .jupi_vorschau_fenster.jupi_vorschau_laedt::after { background:#26323a; }

/* ---------- Startseite: Spiele des Tages ---------- */
.jupi_tagesauswahl { margin:0 0 1.1rem; }
.jupi_tagesauswahl h2 {
  font-size:1.15rem; margin:0 0 .55rem;
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
}
.jupi_tages_datum { font-size:.85rem; font-weight:700; color:var(--grey600-color); }
.jupi_tages_grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:38rem) { .jupi_tages_grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem) { .jupi_tages_grid { grid-template-columns:repeat(4,1fr); gap:1.1rem; } }
/* Tages-Karten: gruener Ring als "heute besonders"-Hinweis */
.jupi_tages_grid .jupi_game_card {
  border:2px solid #a5d6a7;
  box-shadow: 0 6px 20px rgba(67,160,71,.16);
}

/* Dark Mode: Tabs + Spiele des Tages + Karten-Chips */
html[data-theme="dark"] .jupi_tab, html[data-theme="dark"] .jupi_lucky { background:var(--alt-div-color); color:#E0E0E0; }
html[data-theme="dark"] .jupi_lucky { background:#3a2f10; color:#FFE082; border-color:#F9A825; }
html[data-theme="dark"] .jupi_tab_zaehler { background:rgba(255,255,255,.14); }
html[data-theme="dark"] .jupi_game_card .card_kat span { background:#26323a; border-color:#37474f; color:#b0bec5; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="lernen"] { color:#aed581; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="gesellschaft"] { color:#90caf9; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="strategie"] { color:#ce93d8; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="aufbau"] { color:#ffcc80; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="abenteuer"] { color:#d7b899; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="aktion"] { color:#ff8a80; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="sport"] { color:#81c784; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="sandbox"] { color:#80cbc4; }
html[data-theme="dark"] .jupi_game_card .card_kat span[data-kat-chip="werkzeuge"] { color:#9fa8da; }
html[data-theme="dark"] .jupi_tages_datum { color:#b9c9d6; }
html[data-theme="dark"] .jupi_tages_grid .jupi_game_card { border-color:#2e7d32; }
html[data-theme="dark"] .jupi_lab_link { border-color:#2e7d32; box-shadow:0 2px 10px rgba(0,0,0,.4); }
html[data-theme="dark"] .jupi_lab_text strong { color:#aed581; }
html[data-theme="dark"] .jupi_lab_text small { color:#b0bec5; }

/* ---------- Zahlen-Echo - alle Styles mit Praefix zahlen_ ---------- */
/* Zahlen hoeren (Sprachausgabe) und die passende Ziffer antippen */
.zahlen_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.zahlen_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.zahlen_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.zahlen_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.zahlen_controls { margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; }
.zahlen_controls label { font-weight:700; font-size:.9rem; }

/* Spielfeld: grosse Hoer-Karte mit ▶-Knopf, darunter 4 Zahlen-Kacheln */
.zahlen_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.zahlen_task_label { margin:0 0 .6rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }
.zahlen_card {
  min-height:6.5rem; display:flex; align-items:center; justify-content:center;
  gap:1rem; background:var(--grey50-color); border:3px dashed var(--grey400-color);
  border-radius:1rem; padding:1rem .8rem; text-align:center;
}
.zahlen_card_ok {
  border-color:var(--link-color); background:var(--green50-color);
  animation:artikel_pop .5s;
}
.zahlen_card_err { border-color:var(--red600-color); background:#FDECEA;
  animation:artikel_shake .35s; }
.zahlen_spielen {
  width:4.6rem; height:4.6rem; border:none; border-radius:999px;
  background:var(--green600-color); color:#FFFFFF; font-size:1.9rem;
  cursor:pointer; box-shadow:0 4px 0 #2E7D32;
  display:flex; align-items:center; justify-content:center; padding-left:.3rem;
}
.zahlen_spielen:hover { filter:brightness(1.08); }
.zahlen_spielen:active { transform:translateY(1px); box-shadow:0 2px 0 #2E7D32; }
.zahlen_spielen:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.zahlen_card_text { font-size:1.5rem; font-weight:800; color:var(--grey600-color); }
/* Karte pulsiert, solange die Sprachausgabe spricht */
.zahlen_card_spielt { border-color:var(--link-color); animation:zahlen_pulse .9s ease-out infinite; }
@keyframes zahlen_pulse {
  0% { box-shadow:0 0 0 0 rgba(67,160,71,.45); }
  100% { box-shadow:0 0 0 1.4rem rgba(67,160,71,0); }
}

/* Vier Antwort-Kacheln in 2x2 - grosse Touchflaechen */
.zahlen_btns { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.zahlen_btn {
  flex:1 1 calc(50% - .35rem); min-height:64px; font-size:1.6rem; font-weight:800;
  border:none; border-radius:1rem; color:#FFFFFF; cursor:pointer;
  background:var(--green600-color); box-shadow:0 4px 0 #2E7D32;
  transition:transform .1s, filter .1s;
}
.zahlen_btn:nth-child(1) { background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD; }
.zahlen_btn:nth-child(2) { background:var(--red600-color); box-shadow:0 4px 0 #C62828; }
.zahlen_btn:nth-child(3) { background:var(--green600-color); box-shadow:0 4px 0 #2E7D32; }
.zahlen_btn:nth-child(4) { background:var(--yellow600-color); color:#17497f;
  box-shadow:0 4px 0 #c9a416; }
.zahlen_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.zahlen_btn:active:not(:disabled) { transform:translateY(1px); }
.zahlen_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.zahlen_btn:disabled { cursor:default; opacity:.85; }
.zahlen_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.zahlen_btn_wrong { opacity:.55; animation:artikel_shake .35s; }

.zahlen_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.zahlen_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.zahlen_msg_ok { color:var(--link-color); }
.zahlen_msg_err { color:var(--red600-color); }

/* Zwischenbilanz mit Zahlen-Liste (Ziffer = Zahlwort, Fehler markiert) */
.zahlen_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.zahlen_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.zahlen_done h4 { margin:.4rem 0 .3rem; color:var(--grey600-color); }
.zahlen_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.zahlen_fangliste { display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:center; margin:.3rem 0 1.1rem; }
.zahlen_chip {
  border-radius:999px; padding:.35rem .8rem; font-weight:700; font-size:.95rem;
  background:var(--grey50-color); border:2px solid var(--green600-color);
}
.zahlen_chip_err { background:#FDECEA; border-color:var(--red600-color);
  border-style:dashed; }

/* Handy: kompaktere Karte und Kacheln */
@media (max-width:600px) {
  .zahlen_panel { padding:.7rem .8rem; }
  .zahlen_controls { margin-left:0; }
  .zahlen_stage { padding:.8rem .7rem 1rem; }
  .zahlen_card { min-height:5rem; }
  .zahlen_spielen { width:3.8rem; height:3.8rem; font-size:1.6rem; }
  .zahlen_card_text { font-size:1.2rem; }
  .zahlen_btn { min-height:60px; font-size:1.4rem; }
}

/* Dark Mode Zahlen-Echo: Farben kommen grossteils aus colors.css */
html[data-theme="dark"] .zahlen_card { background:var(--alt-div-color);
  border-color:var(--grey400-color); }
html[data-theme="dark"] .zahlen_card_ok { background:var(--green100-color); }
html[data-theme="dark"] .zahlen_card_err { background:#3a201e; }
html[data-theme="dark"] .zahlen_chip { background:var(--alt-div-color); }
html[data-theme="dark"] .zahlen_chip_err { background:#3a201e; }
html[data-theme="dark"] .zahlen_msg_err { color:#FF8A80; }

/* ---------- Prozent-Rallye - alle Styles mit Praefix prozent_ ---------- */
/* Prozentrechnen: Rallye-Strecke mit Auto + Eingabe-Aufgaben (Rabatt, MwSt, Grundwert) */
.prozent_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.prozent_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.prozent_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.prozent_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.prozent_controls { margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; }
.prozent_controls label { font-weight:700; font-size:.9rem; }

/* Rallye-Strecke: Auto ruckt mit dem Fortschrittsbalken ins Ziel */
.prozent_strecke {
  position:relative; margin:0 0 1.1rem; padding:0 .6rem .5rem;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding-top:.5rem;
}
.prozent_auto {
  position:absolute; bottom:1.7rem; left:0; font-size:2.1rem; z-index:2;
  transition:left .6s ease; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.prozent_bahn {
  position:relative; height:14px; border-radius:999px;
  background:var(--grey50-color); border:2px solid var(--grey400-color);
  overflow:hidden;
}
.prozent_balken {
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, #66bb6a, #43A047); transition:width .6s ease;
}
.prozent_ziel { position:absolute; right:.9rem; bottom:1.45rem; font-size:1.7rem; }

/* Aufgaben-Karte mit Szene aus dem echten Leben */
.prozent_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.prozent_task_label { margin:0 0 .6rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }
.prozent_aufgabe {
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--grey50-color); border:3px dashed var(--grey400-color);
  border-radius:1rem; padding:1rem .9rem; font-size:1.12rem; line-height:1.5;
}
.prozent_emoji { font-size:2rem; line-height:1.2; }
.prozent_zeile { display:flex; gap:.6rem; align-items:center; margin-top:1rem; flex-wrap:wrap; }
.prozent_eingabe {
  flex:1 1 10rem; min-width:8rem; font-size:1.3rem; font-weight:700;
  padding:.55rem .8rem; border:3px solid var(--grey400-color); border-radius:.8rem;
  background:var(--ct-color); color:inherit;
}
.prozent_eingabe:focus-visible { outline:3px solid var(--link-color); outline-offset:1px; }
.prozent_einheit { font-size:1.4rem; font-weight:800; color:var(--grey600-color); }
.prozent_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.prozent_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.prozent_msg_ok { color:var(--link-color); }
.prozent_msg_err { color:var(--red600-color); }

/* Ziel-Bilanz mit Sternen */
.prozent_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.prozent_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.prozent_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.prozent_sterne { font-size:2rem; margin-bottom:1rem; }

/* Handy: kompakter */
@media (max-width:600px) {
  .prozent_panel { padding:.7rem .8rem; }
  .prozent_controls { margin-left:0; }
  .prozent_aufgabe { font-size:1.02rem; padding:.85rem .7rem; }
}

/* Dark Mode Prozent-Rallye */
html[data-theme="dark"] .prozent_aufgabe { background:var(--alt-div-color);
  border-color:var(--grey400-color); }
html[data-theme="dark"] .prozent_bahn { background:var(--alt-div-color); }
html[data-theme="dark"] .prozent_msg_err { color:#FF8A80; }

/* ---------- Phishing-Detektiv - alle Styles mit Praefix phish_ ---------- */
/* Posteingang mit erfundenen Mails: seriös oder Abzocke? */
.phish_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.phish_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.phish_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.phish_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.phish_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.phish_controls label { font-weight:700; font-size:.9rem; }

/* Die "Mail" im Postfach-Look */
.phish_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.phish_task_label { margin:0 0 .7rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }
.phish_mail {
  background:#FFFFFF; border:2px solid var(--grey400-color); border-radius:1rem;
  padding:1rem 1rem 1.1rem;
}
.phish_kanal {
  display:inline-block; margin-bottom:.6rem; padding:.25rem .7rem;
  border-radius:999px; background:var(--green100-color); color:#1B5E20;
  font-weight:700; font-size:.85rem;
}
.phish_kopf {
  border-bottom:2px solid var(--grey400-color); padding-bottom:.6rem;
  margin-bottom:.7rem; display:flex; flex-direction:column; gap:.2rem;
}
.phish_zeile { font-size:.95rem; word-break:break-word; }
.phish_fett { font-weight:700; color:var(--grey600-color); }
.phish_text { white-space:pre-line; font-size:1.05rem; line-height:1.5; }

/* Attrapper-Knopf im Brief: bewusst NICHT klickbar (Vorschau) */
.phish_button {
  display:inline-block; margin-top:.9rem; padding:.55rem 1.2rem;
  border-radius:.6rem; background:var(--lightblue600-color); color:#FFFFFF;
  font-weight:700; box-shadow:0 3px 0 #0277BD; cursor:default; user-select:none;
}
.phish_linkbereich { margin-top:.8rem; }
.phish_linkziel {
  margin-top:.5rem; font-family:monospace; font-size:.95rem;
  background:#FDECEA; border:2px dashed var(--red600-color); border-radius:.6rem;
  padding:.5rem .7rem; color:var(--red600-color); word-break:break-word;
}

/* Urteils-Knoepfe: Seriös vs. Abzocke */
.phish_urteil_btns { display:flex; gap:.8rem; margin-top:1.1rem; flex-wrap:wrap; }
.phish_urteil {
  flex:1 1 10rem; min-height:60px; font-size:1.3rem; font-weight:800;
  border:none; border-radius:1rem; cursor:pointer; color:#FFFFFF;
  transition:transform .1s, filter .1s;
}
.phish_urteil_sicher { background:var(--green600-color); box-shadow:0 4px 0 #2E7D32; }
.phish_urteil_abzocke { background:var(--red600-color); box-shadow:0 4px 0 #C62828; }
.phish_urteil:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.phish_urteil:active:not(:disabled) { transform:translateY(1px); }
.phish_urteil:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.phish_urteil:disabled { cursor:default; opacity:.7; }

/* Aufloesung mit Merkmals-Karten */
.phish_aufloesung {
  margin-top:1rem; background:var(--grey50-color);
  border:3px dashed var(--grey400-color); border-radius:1rem; padding:1rem;
}
.phish_urteil_text { font-weight:700; font-size:1.08rem; margin:0 0 .5rem; }
.phish_urteil_ok { color:var(--link-color); }
.phish_urteil_err { color:var(--red600-color); }
.phish_merkmale { display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem; }
.phish_chip {
  background:#FDECEA; border-left:5px solid var(--red600-color);
  border-radius:.6rem; padding:.55rem .8rem; font-size:.95rem;
}
.phish_chip strong { display:block; margin-bottom:.1rem; }
.phish_chip_ok { background:var(--green50-color); border-left-color:var(--green600-color); }
.phish_tun { font-weight:600; margin-top:.7rem; font-size:.98rem; }
.phish_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }

/* Rundenende mit Detektiv-Handbuch */
.phish_done {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.phish_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.phish_done h4 { margin:.4rem 0 .4rem; color:var(--grey600-color); }
.phish_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.phish_sterne { font-size:2rem; margin-bottom:.8rem; }
.phish_handbuch { display:flex; flex-direction:column; gap:.5rem; margin:.3rem 0 1.1rem; }
.phish_handbuch_eintrag {
  background:var(--grey50-color); border-left:5px solid var(--yellow600-color);
  border-radius:.6rem; padding:.55rem .8rem; font-size:.95rem; text-align:left;
}
.phish_handbuch_eintrag strong { display:block; margin-bottom:.1rem; }

/* Handy */
@media (max-width:600px) {
  .phish_panel { padding:.7rem .8rem; }
  .phish_controls { margin-left:0; }
  .phish_mail { padding:.8rem .75rem .9rem; }
  .phish_urteil { flex:1 1 100%; }
}

/* Dark Mode Phishing-Detektiv */
html[data-theme="dark"] .phish_mail { background:var(--alt-div-color); }
html[data-theme="dark"] .phish_aufloesung { background:var(--alt-div-color);
  border-color:var(--grey400-color); }
html[data-theme="dark"] .phish_chip { background:#3a201e; }
html[data-theme="dark"] .phish_chip_ok { background:var(--green100-color); }
html[data-theme="dark"] .phish_linkziel { background:#3a201e; color:#FF8A80; }
html[data-theme="dark"] .phish_handbuch_eintrag { background:var(--alt-div-color); }
html[data-theme="dark"] .phish_urteil_err { color:#FF8A80; }

/* ---------- Zeitmeister - alle Styles mit Praefix uhr_ ---------- */
/* Analoge Uhr lesen: Zifferblatt-SVG, Antwort-Knoepfe, Stellen-Modus */
.uhr_antworten[hidden], .uhr_steller[hidden] { display:none; }
.uhr_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.uhr_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.uhr_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.uhr_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.uhr_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.uhr_controls label { font-weight:700; font-size:.9rem; }

/* Hilfe-Kasten mit Merksaetzen */
.uhr_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.uhr_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.uhr_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.uhr_hilfe li { margin:.25rem 0; }

/* Buehne mit der Uhr */
.uhr_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.uhr_task_label { margin:0 0 .7rem; font-weight:700; color:var(--grey600-color);
  font-size:1rem; text-align:center; }
.uhr_uhr_box { text-align:center; }
.uhr_uhr_box svg { width:100%; max-width:260px; height:auto; }

/* Antwort-Knoepfe: Uhrzeit gross, Worte klein darunter */
.uhr_antworten { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.uhr_btn {
  flex:1 1 calc(50% - .35rem); min-height:64px; cursor:pointer;
  border:none; border-radius:1rem; color:#FFFFFF;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  transition:transform .1s, filter .1s;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1rem; padding:.5rem;
}
.uhr_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.uhr_btn:active:not(:disabled) { transform:translateY(1px); }
.uhr_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.uhr_btn:disabled { cursor:default; opacity:.85; }
.uhr_btn_zeit { font-size:1.5rem; font-weight:800; line-height:1.1; }
.uhr_btn_worte { font-size:.85rem; font-weight:600; opacity:.92; }
.uhr_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.uhr_btn_wrong { opacity:.55; animation:artikel_shake .35s; }

/* Stellen-Modus: zwei Schritt-Schalter + Pruefen */
.uhr_steller { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem;
  align-items:stretch; justify-content:center; }
.uhr_stepper {
  flex:1 1 12rem; background:var(--grey50-color);
  border:2px solid var(--grey300-color); border-radius:1rem; padding:.6rem .8rem;
  text-align:center;
}
.uhr_stepper_titel { font-weight:800; font-size:.85rem; color:var(--grey600-color);
  text-transform:uppercase; letter-spacing:.05em; }
.uhr_stepper_row { display:flex; align-items:center; justify-content:space-between;
  gap:.4rem; margin-top:.3rem; }
.uhr_stepper_row button {
  width:3rem; height:3rem; font-size:1.6rem; font-weight:800; cursor:pointer;
  border:none; border-radius:.8rem; color:#FFFFFF;
  background:var(--green600-color); box-shadow:0 3px 0 #2E7D32;
  transition:transform .1s, filter .1s;
}
.uhr_stepper_row button:hover { filter:brightness(1.1); }
.uhr_stepper_row button:active { transform:translateY(1px); }
.uhr_stepper_row button:focus-visible {
  outline:3px solid var(--yellow600-color); outline-offset:2px;
}
.uhr_stepper_row span { font-size:2rem; font-weight:800; min-width:3.5rem; }
.uhr_steller .jupi_btn { align-self:center; }

.uhr_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.uhr_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }
.uhr_msg_ok { color:var(--link-color); }
.uhr_msg_err { color:var(--red600-color); }

/* Rundenende */
.uhr_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.uhr_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.uhr_done_uhr { font-size:3rem; margin:.2rem 0; }
.uhr_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.uhr_sterne { font-size:2rem; margin-bottom:.8rem; }

/* Handy */
@media (max-width:600px) {
  .uhr_panel { padding:.7rem .8rem; }
  .uhr_controls { margin-left:0; }
  .uhr_btn { flex:1 1 100%; }
}

/* Dark Mode Zeitmeister: Zifferblatt bleibt weiss (wie ein Bild) */
html[data-theme="dark"] .uhr_stepper { background:var(--alt-div-color); }
html[data-theme="dark"] .uhr_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .uhr_msg_err { color:#FF8A80; }

/* ---------- Brücken-Bau - alle Styles mit Praefix bruecke_ ---------- */
/* Statik-Spiel: Brücke bauen (Budget), dann Lastwagen-Probefahrt mit Physik.
   Alle Bedienelemente liegen als HUD direkt auf dem Spielfeld (Overlays),
   damit das Spiel auch im Vollbild gut bedienbar ist. */
.bruecke_panel {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}

/* Spielfläche mit Canvas + HUD; im Vollbild zentriert und 16:9-groß.
   Der HUD nutzt em-Einheiten: font-size am spielfeld skaliert alles mit. */
.bruecke_buehne { position:relative; }
.bruecke_spielfeld { position:relative; font-size:1rem; }
.bruecke_buehne:fullscreen {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; background:#123840;
}
.bruecke_buehne:fullscreen .bruecke_spielfeld {
  width:min(100vw, calc(100vh * 1.7778));
  font-size:1.4rem;          /* HUD wächst im Vollbild mit */
}
.bruecke_buehne canvas {
  width:100%; height:auto; display:block; border-radius:.8rem;
  touch-action:none; cursor:crosshair;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.bruecke_buehne:fullscreen canvas { border-radius:0; box-shadow:none; }

/* HUD-Zeilen über dem Canvas - Zeilen selbst durchlässig fürs Zeichnen */
.bruecke_hud {
  position:absolute; left:0; right:0; display:flex; gap:.4em;
  align-items:flex-start; justify-content:space-between;
  padding:0 .55em; pointer-events:none;
}
.bruecke_hud > * { pointer-events:auto; }
.bruecke_hud_oben { top:.55em; }
.bruecke_hud_unten { bottom:.55em; align-items:flex-end; flex-wrap:wrap; }
.bruecke_hud_gruppe { display:flex; gap:.4em; align-items:center; }

/* Pillen-Optik für alle HUD-Elemente auf dem Canvas */
.bruecke_levelwahl, .bruecke_fahrzeugwahl, .bruecke_iconbtn,
.bruecke_werkzeug, .bruecke_budget, .bruecke_last, .bruecke_hinweis {
  background:rgba(255,255,255,.93); border:2px solid var(--grey400-color);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.bruecke_levelwahl, .bruecke_fahrzeugwahl {
  display:flex; align-items:center; gap:.35em;
  border-radius:.7em; padding:.22em .5em; font-weight:700; cursor:pointer;
}
.bruecke_levelwahl .jupi_select,
.bruecke_fahrzeugwahl .jupi_select {
  border:none; background:transparent; box-shadow:none;
  font-weight:700; padding:.15em .1em; max-width:16em;
}
.bruecke_iconbtn {
  border-radius:.7em; padding:.28em .55em; cursor:pointer;
  font-size:1.05em; line-height:1; font-weight:700; color:#17497f;
}
.bruecke_iconbtn:hover { border-color:var(--green600-color); }

/* Material-Werkzeuge (unten links) */
.bruecke_werkzeuge { display:flex; gap:.35em; flex-wrap:wrap; }
.bruecke_werkzeug {
  display:flex; align-items:center; gap:.3em;
  border-radius:.7em; padding:.32em .6em; font-weight:700; font-size:.92em;
  cursor:pointer; transition:transform .1s, border-color .1s;
}
.bruecke_werkzeug:hover:not(:disabled) { transform:translateY(-1px); }
.bruecke_werkzeug.is_aktiv {
  border-color:var(--green600-color); background:var(--green100-color);
}
.bruecke_werkzeug:disabled { opacity:.45; cursor:default; }
.bruecke_punkt {
  display:inline-block; width:.85rem; height:.85rem; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}

/* Budget-Pille (unten rechts) */
.bruecke_budget {
  display:flex; align-items:center; gap:.4em;
  border-radius:.7em; padding:.32em .55em; min-width:9.5em;
}
.bruecke_budgetleiste {
  flex:1 1 3.5em; height:.7em; border-radius:999px; overflow:hidden;
  background:var(--grey400-color);
}
.bruecke_budgetleiste div {
  height:100%; width:0; border-radius:999px;
  background:var(--green600-color); transition:width .25s, background .25s;
}
.bruecke_budget span {
  font-size:.88em; font-weight:700; color:var(--green600-color); white-space:nowrap;
}

/* Spannungsanzeige (nur während der Probefahrt sichtbar) */
.bruecke_last {
  border-radius:999px; padding:.3em .75em;
  font-weight:800; font-size:.95em; pointer-events:none;
  background:rgba(255,255,255,.85);
}

/* Kurzer Tipp-Text, liegt über dem Himmel unter der Kopfzeile */
.bruecke_hinweis {
  position:absolute; left:.6em; top:3.4em; max-width:62%;
  margin:0; border-radius:.6em; padding:.3em .7em;
  font-weight:600; font-size:.95em; pointer-events:none;
}

/* Gewinn-/Verloren-Karte über dem Spielfeld */
.bruecke_overlay {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(23,73,127,.38); border-radius:.8rem;
  padding:1rem;
}
.bruecke_overlay[hidden] { display:none; }
.bruecke_karte {
  background:var(--ct-color); border-radius:1rem; padding:1.3rem 1.5rem;
  text-align:center; max-width:26rem; box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.bruecke_karte h3 { margin:.1rem 0 .5rem; font-size:1.4rem; color:var(--link-color); }
.bruecke_karte p { margin:.35rem 0; font-size:1rem; }
.bruecke_sterne { font-size:2.1rem; margin:.3rem 0; }
.bruecke_tipp {
  font-size:.92rem !important; color:var(--grey600-color);
  background:var(--grey50-color); border-radius:.6rem; padding:.5rem .7rem;
}
.bruecke_knopfzeile { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:.8rem; }

/* Im Testmodus bleiben nur Probefahrt-Exit, Spannung und Vollbild sichtbar
   (visibility statt display, damit nichts springt) */
.bruecke_ist_test .bruecke_werkzeuge,
.bruecke_ist_test .bruecke_budget,
.bruecke_ist_test .bruecke_fahrzeugwahl,
.bruecke_ist_test .bruecke_neu,
.bruecke_ist_test .bruecke_levelwahl { visibility:hidden; }

/* Hilfe-Aufklapper mit Physik-Tipps */
.bruecke_hilfe { margin-top:1rem; }
.bruecke_hilfe summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:var(--green100-color); border-radius:.7rem; color:#1B5E20;
}
.bruecke_hilfe_inhalt { padding:.7rem .9rem .2rem; }
.bruecke_hilfe_inhalt h4 { margin:.8rem 0 .3rem; color:var(--grey600-color); }
.bruecke_hilfe_inhalt ul { margin:.2rem 0 .4rem 1.2rem; }
.bruecke_hilfe_inhalt li { margin:.25rem 0; }

/* Spiel im Mittelpunkt (Regel AGENTS.md 3.13.8): schlanke Titelzeile über
   dem Spielfeld, Erklärtext in der aufklappbaren Info-Box darunter. Der
   blaue Akzent unterscheidet die ℹ️-Info von der grünen ❓-Hilfe. */
.jupi_intro.bruecke_titel { margin:.2rem auto .9rem; padding:.4rem 1rem 0; }
.bruecke_info { margin-top:1rem; }
.bruecke_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.bruecke_info_inhalt { padding:.7rem .9rem .2rem; }
.bruecke_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.bruecke_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}

/* Handy: HUD kompakt */
@media (max-width:600px) {
  .bruecke_panel { padding:.7rem .8rem .9rem; }
  .bruecke_spielfeld { font-size:.82rem; }
  .bruecke_hinweis { max-width:85%; }
}

/* Dark Mode Bruecken-Bau: HUD-Pillen dunkel (der Canvas-Himmel bleibt hell) */
html[data-theme="dark"] .bruecke_karte { background:var(--alt-div-color); }
html[data-theme="dark"] .bruecke_tipp { background:var(--alt-div-color); }
html[data-theme="dark"] .bruecke_levelwahl,
html[data-theme="dark"] .bruecke_fahrzeugwahl,
html[data-theme="dark"] .bruecke_iconbtn,
html[data-theme="dark"] .bruecke_werkzeug,
html[data-theme="dark"] .bruecke_budget,
html[data-theme="dark"] .bruecke_hinweis { background:rgba(38,50,56,.94); }
html[data-theme="dark"] .bruecke_iconbtn { color:#c8e6c9; }
html[data-theme="dark"] .bruecke_werkzeug.is_aktiv { background:var(--green100-color); }
/* Dunkel-Mode der Standard-Hilfe (?): --green100-color kippt im Dunkeltheme
   auf ein dunkles Oliv, die helle Zeilenfarbe #1B5E20 blieb aber stehen -
   gemessen 1,64:1, der Aufklapp-Knopf war praktisch unlesbar (gilt fuer
   brueckenbau, holzwerk, zelllabor). Gleiche Logik wie die
   Info-Box darunter: eigene dunkle Flaeche + helle Schrift. */
html[data-theme="dark"] .bruecke_hilfe summary { background:#14261C; color:#C8E6C9; }
html[data-theme="dark"] .bruecke_hilfe_inhalt h4 { color:#B0BEC5; }
html[data-theme="dark"] .bruecke_info summary { background:#102631; color:#81D4FA; }

/* ---------- Diagramm-Detektiv - alle Styles mit Praefix dg_ ---------- */
/* Balken, Kreis und Linie lesen, Diagramm zur Tabelle waehlen,
   falsche Tabellen-Zeile finden (Fehler-Modus) */
.dg_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.dg_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.dg_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.dg_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.dg_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.dg_controls label { font-weight:700; font-size:.9rem; }

/* Hilfe-Kasten mit Merksaetzen */
.dg_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.dg_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.dg_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.dg_hilfe li { margin:.25rem 0; }

/* Buehne mit Diagramm */
.dg_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
/* Die Frage ist das wichtigste Element - gross und kontraststark.
   var(--blk-color) ist im Light Mode Schwarz und im Dark Mode Weiss. */
.dg_task_label { margin:0 0 .7rem; font-weight:800; color:var(--blk-color);
  font-size:1.25rem; line-height:1.4; text-align:center; }
.dg_diagramm_box { text-align:center; }
.dg_diagramm_box svg { width:100%; max-width:380px; height:auto; }
/* Diagramm bleibt immer "Papier" (weiss wie ein Bild) - lesbar in beiden Modi */
.dg_diagramm_box svg { background:#FFFFFF; border-radius:1rem; padding:.4rem; }

/* Tabelle im Waehl-Modus */
.dg_tabelle_wrap { display:flex; justify-content:center; margin:.4rem 0 .2rem; }
.dg_tabelle_wrap[hidden] { display:none; }
.dg_tabelle { border-collapse:collapse; background:var(--grey50-color);
  border-radius:.8rem; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.08); }
.dg_tabelle caption { font-weight:800; padding:.5rem; color:var(--grey600-color); }
.dg_tabelle th, .dg_tabelle td { padding:.45rem 1.1rem; text-align:left;
  border-bottom:2px solid var(--grey300-color); }
.dg_tabelle thead th { background:var(--green100-color); font-size:.85rem;
  text-transform:uppercase; letter-spacing:.04em; }
.dg_tabelle tbody tr:last-child td { border-bottom:none; }
.dg_tabelle td:last-child { font-weight:800; text-align:right; }

/* Antwort-Knöpfe und Mini-Diagramme */
.dg_antworten { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.dg_btn {
  flex:1 1 calc(50% - .35rem); min-height:56px; cursor:pointer;
  border:none; border-radius:1rem; color:#FFFFFF;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  font-size:1.2rem; font-weight:800;
  transition:transform .1s, filter .1s; padding:.5rem;
}
.dg_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.dg_btn:active:not(:disabled) { transform:translateY(1px); }
.dg_btn:focus-visible, .dg_mini:focus-visible {
  outline:3px solid var(--link-color); outline-offset:2px; }
.dg_btn:disabled, .dg_mini:disabled { cursor:default; opacity:.85; }
.dg_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.dg_btn_wrong { animation:artikel_shake .35s; }
/* Falsch gewaehlter Knopf bleibt rot sichtbar (2. Versuch ist noch moeglich),
   richtig getroffener Knopf laesst sich nicht mehr wegdunkeln */
.dg_btn.dg_btn_wrong {
  background:var(--red600-color); box-shadow:0 4px 0 #B71C1C;
}
.dg_mini.dg_btn_wrong { border-color:var(--red600-color); }
.dg_btn_wrong:disabled, .dg_mini.dg_btn_wrong:disabled { opacity:.8; }
.dg_btn_right:disabled, .dg_mini.dg_btn_right:disabled { opacity:1; }
.dg_mini {
  flex:1 1 calc(50% - .35rem); cursor:pointer;
  border:3px solid var(--grey300-color); border-radius:1rem;
  background:#FFFFFF; padding:.4rem;
  transition:transform .1s, border-color .1s;
}
.dg_mini:hover:not(:disabled) { transform:translateY(-2px);
  border-color:var(--lightblue600-color); }
.dg_mini svg { width:100%; height:auto; display:block; }
.dg_mini.dg_btn_right { border-color:var(--link-color); }

.dg_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.dg_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }
.dg_msg_ok { color:var(--link-color); }
.dg_msg_err { color:var(--red600-color); }

/* Rundenende (position:relative + overflow:hidden fuer den Konfetti-Regen) */
.dg_done {
  position:relative; overflow:hidden;
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.dg_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.dg_done_icon { font-size:3rem; margin:.2rem 0; }
.dg_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.dg_sterne { font-size:2rem; margin-bottom:.8rem; }
.dg_konfetti { position:absolute; inset:0; pointer-events:none; }
.dg_konfetti i {
  position:absolute; top:-16px; width:9px; height:14px; border-radius:2px;
  opacity:0; animation:dg_konfetti_fall 2.8s linear forwards;
}
@keyframes dg_konfetti_fall {
  0% { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(380px) rotate(560deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .dg_konfetti { display:none; }
}

/* Handy */
@media (max-width:600px) {
  .dg_panel { padding:.7rem .8rem; }
  .dg_controls { margin-left:0; }
  .dg_btn, .dg_mini { flex:1 1 100%; }
  .dg_task_label { font-size:1.15rem; }
}

/* Dark Mode Diagramm-Detektiv: Balken bleiben bunt (wie ein Bild) */
html[data-theme="dark"] .dg_mini { background:#FFFFFF; }
html[data-theme="dark"] .dg_tabelle { background:var(--alt-div-color); }
html[data-theme="dark"] .dg_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .dg_msg_err { color:#FF8A80; }

/* ---------- Waagen-Meister - alle Styles mit Praefix waage_ ---------- */
/* Gleichungen loesen an der animierten Balkenwaage: sie kippt bei falschen
   Antworten mit dem geratenen Wert, wackelt vor Freude bei richtigen. */
.waage_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.waage_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.waage_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.waage_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.waage_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.waage_controls label { font-weight:700; font-size:.9rem; }

/* Hilfe-Kasten mit Merksaetzen */
.waage_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.waage_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.waage_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.waage_hilfe li { margin:.25rem 0; }

/* Buehne: Aufgabensatz, Gleichung, Waage, Antworten, Konfetti */
.waage_stage {
  position:relative; overflow:hidden;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.waage_task_label { margin:0 0 .2rem; font-weight:700; color:var(--grey600-color);
  font-size:1rem; text-align:center; }
.waage_gleichung { margin:0 0 .5rem; font-weight:800; font-size:1.35rem;
  text-align:center; color:#17497f; }
.waage_buehne { text-align:center; }
.waage_buehne svg { width:100%; max-width:600px; height:auto; display:block;
  margin:0 auto; }

/* Die Wippe kippt sanft mit Feder-Effekt um den Drehpunkt (320,92) */
.waage_wippe {
  transform-box: view-box; transform-origin: 320px 92px;
  transition: transform 1s cubic-bezier(.34,1.35,.6,1);
}
.waage_wippe.waage_wobble { animation: waage_wobble 1.05s ease; }

/* Kisten: Deckel klappt auf, Korper wird gruen, sobald x bekannt ist */
.waage_deckel {
  transform-box: fill-box; transform-origin: 10% 90%;
  transition: transform .7s cubic-bezier(.34,1.56,.64,1);
}
.waage_kiste.waage_is_offen .waage_deckel { transform: rotate(-72deg); }
.waage_kiste.waage_is_offen .waage_kiste_koerper { fill:#A5D6A7; }

/* Gegenstaende fallen beim Aufgabenstart einzeln auf die Schalen */
.waage_drop { animation: waage_drop .55s cubic-bezier(.3,1.4,.6,1) both; }

/* Zahl in der Kiste plopp */
.waage_kiste_text, .waage_pop {
  transform-box: fill-box; transform-origin: center;
}
.waage_pop { animation: waage_pop .4s cubic-bezier(.34,1.56,.64,1); }

/* Antwort-Kacheln (Muster: Diagramm-Detektiv) */
.waage_antworten { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.9rem; }
.waage_btn {
  flex:1 1 calc(50% - .35rem); min-height:56px; cursor:pointer;
  border:none; border-radius:1rem; color:#FFFFFF;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  font-size:1.35rem; font-weight:800;
  transition:transform .1s, filter .1s; padding:.5rem;
}
.waage_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.waage_btn:active:not(:disabled) { transform:translateY(1px); }
.waage_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.waage_btn:disabled { cursor:default; opacity:.85; }
.waage_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.waage_btn_wrong { opacity:.55; animation:artikel_shake .35s; }

.waage_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.waage_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }
.waage_msg_ok { color:var(--link-color); }
.waage_msg_err { color:var(--red600-color); }

/* Fortschrittspunkte: gruen = 1. Versuch, gelb = spaeter, rot = aufgeloest */
.waage_fortschritt { display:flex; gap:.45rem; justify-content:center;
  margin-top:.9rem; }
.waage_fortschritt_punkt {
  width:13px; height:13px; border-radius:50%;
  background:var(--grey300-color); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.waage_fortschritt_punkt.is_ok { background:var(--green600-color); }
.waage_fortschritt_punkt.is_teil { background:var(--yellow600-color); }
.waage_fortschritt_punkt.is_miss { background:var(--red600-color); }
.waage_fortschritt_punkt.is_aktuell { animation:waage_puls 1.1s ease-in-out infinite; }

/* Konfetti-Regen nach richtigen Antworten */
.waage_konfetti_box { position:absolute; inset:0; pointer-events:none;
  overflow:hidden; }
.waage_konfetti {
  position:absolute; top:-18px; width:9px; height:14px; border-radius:2px;
  animation: waage_konfetti_fall 1.4s ease-in forwards;
}

/* Rundenende */
.waage_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.waage_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.waage_done_icon { font-size:3rem; margin:.2rem 0; }
.waage_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.waage_sterne { font-size:2rem; margin-bottom:.8rem; }

@keyframes waage_drop {
  0% { opacity:0; transform:translateY(-64px); }
  55% { opacity:1; transform:translateY(0); }
  72% { transform:translateY(-9px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes waage_wobble {
  0% { transform:rotate(0deg); }
  25% { transform:rotate(4deg); }
  50% { transform:rotate(-3.5deg); }
  72% { transform:rotate(2deg); }
  100% { transform:rotate(0deg); }
}
@keyframes waage_pop {
  0% { transform:scale(.3); }
  60% { transform:scale(1.3); }
  100% { transform:scale(1); }
}
@keyframes waage_puls {
  0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(67,160,71,.5); }
  50% { transform:scale(1.25); box-shadow:0 0 0 4px rgba(67,160,71,.25); }
}
@keyframes waage_konfetti_fall {
  0% { transform:translate(0,0) rotate(0deg); opacity:1; }
  100% { transform:translate(var(--waa_dx, 0px), var(--waa_fall, 380px))
         rotate(560deg); opacity:.85; }
}

/* Handy */
@media (max-width:600px) {
  .waage_panel { padding:.7rem .8rem; }
  .waage_controls { margin-left:0; }
  .waage_btn { flex:1 1 100%; font-size:1.2rem; }
  .waage_gleichung { font-size:1.15rem; }
}

/* Dark Mode Waagen-Meister: Waage bleibt bunt (wie ein Bild) */
html[data-theme="dark"] .waage_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .waage_gleichung { color:#90CAF9; }
html[data-theme="dark"] .waage_msg_err { color:#FF8A80; }


/* ---------- Europa-Puzzle - alle Styles mit Praefix ep_ ---------- */
/* Laender, Hauptstaedte und Flaggen Europas - Karte aus echten
   (vereinfachten) Laender-Umrissen, siehe laenderpuzzle/europa.js */
.ep_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.ep_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.ep_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.ep_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.ep_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.ep_controls label { font-weight:700; font-size:.9rem; }

/* Hilfe-Kasten mit Merksaetzen */
.ep_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.ep_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.ep_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.ep_hilfe li { margin:.25rem 0; }

/* Buehne mit Karte */
.ep_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
/* Die Frage ist das wichtigste Element - gross und kontraststark in beiden Modi */
.ep_task_label { margin:0 0 .7rem; font-weight:800; color:var(--blk-color);
  font-size:1.25rem; line-height:1.4; text-align:center; }
.ep_flagge_wrap { display:flex; flex-direction:column; align-items:center; margin:0 0 .7rem; }
.ep_flagge_wrap[hidden] { display:none; }
.ep_flagge_hinweis { margin:.2rem 0 0; font-size:.78rem; font-weight:700; color:var(--grey600-color); }
.ep_flagge_svg { display:block; width:132px; height:auto; background:#FFFFFF;
  border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.18); }

/* Die Karte: Meer + Laender (Farben unten im Dark-Mode-Block) */
.ep_karte_wrap { text-align:center; }
.ep_karte_wrap svg { width:100%; max-width:760px; height:auto; display:block;
  margin:0 auto; border-radius:1rem; }
.ep_meer { fill:#CFE8F7; }
.ep_land {
  fill:#CFD8DC; stroke:#FFFFFF; stroke-width:1.4; stroke-linejoin:round;
  cursor:pointer; transition:fill .15s;
}
.ep_land:hover { filter:brightness(.92); }
/* Puzzle-Modus: ungesetzte Laender als stille Landmasse OHNE Grenzen.
   Der breite Rand in der eigenen Fuellfarbe uebermalt auch die Haarlinien,
   wo Meer durch Mini-Luecken zwischen Nachbar-Umrissen schimmert -
   nur die Kuestenlinie aussen bleibt sichtbar. */
.ep_land.ep_verdeckt { fill:#ECEFF1; stroke:#ECEFF1; stroke-width:3; }
.ep_land.ep_verdeckt:hover { filter:none; }
.ep_land.ep_neu { animation:ep_pop .45s ease-out; }
@keyframes ep_pop { from { opacity:0; } }
.ep_land.ep_puls { animation:ep_puls 1.2s ease-in-out infinite; }
.ep_land.ep_wackelt { fill:#E57373; animation:ep_shake .45s; }

/* Puzzleteile-Leiste */
.ep_teile_wrap {
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:.9rem;
}
.ep_teile_wrap[hidden] { display:none; }
.ep_stueck {
  flex:0 1 108px; cursor:grab; display:flex; flex-direction:column;
  align-items:center; gap:.2rem; background:#FFFFFF;
  border:3px solid var(--grey300-color); border-radius:.8rem; padding:.35rem .3rem;
  font-size:.78rem; font-weight:700; color:var(--grey600-color);
  transition:transform .1s, border-color .1s;
  /* Ziehen per Finger/Maus: kein Scrollen, kein Markieren ab dem Teil */
  touch-action:none; user-select:none; -webkit-user-select:none;
}
/* Schwebende Kopie beim Ziehen (wird per JS ans body-Ende gehaengt) */
.ep_geist {
  position:fixed; left:0; top:0; z-index:60; pointer-events:none;
  width:110px; opacity:.93; transform:translate(-50%,-65%);
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));
}
.ep_geist svg { width:100%; height:auto; display:block; }
.ep_geist svg path { fill:#81D4FA; stroke:#0277BD; stroke-width:3;
  vector-effect:non-scaling-stroke; }
/* Herkunfts-Teil waehrend des Zugs */
.ep_stueck.ep_quelle { opacity:.35; }
.ep_stueck:hover:not(:disabled) { transform:translateY(-2px);
  border-color:var(--lightblue600-color); }
.ep_stueck svg { width:100%; height:44px; }
.ep_stueck svg path { fill:#B0BEC5; stroke:#78909C; stroke-width:2; }
.ep_stueck.ep_aktiv { border-color:var(--lightblue600-color);
  box-shadow:0 0 0 2px var(--lightblue600-color) inset; }
.ep_stueck.ep_aktiv svg path { fill:#81D4FA; stroke:#0277BD; }
.ep_stueck.ep_platziert { cursor:default; opacity:.55; }
.ep_stueck.ep_platziert svg path { fill:#66BB6A; stroke:#2E7D32; }

/* Antwort-Knoepfe (Hauptstaedte + Flaggen) */
.ep_antworten { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.ep_btn {
  flex:1 1 calc(50% - .35rem); min-height:56px; cursor:pointer;
  border:none; border-radius:1rem; color:#FFFFFF;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  font-size:1.2rem; font-weight:800;
  transition:transform .1s, filter .1s; padding:.5rem;
}
.ep_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.ep_btn:active:not(:disabled) { transform:translateY(1px); }
.ep_btn:focus-visible, .ep_stueck:focus-visible {
  outline:3px solid var(--link-color); outline-offset:2px; }
.ep_btn:disabled { cursor:default; opacity:.85; }
.ep_btn.ep_richtig { outline:4px solid var(--link-color); outline-offset:3px; }
.ep_btn.ep_falsch { background:var(--red600-color); box-shadow:0 4px 0 #B71C1C; }

.ep_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.ep_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }
.ep_msg_ok { color:var(--link-color); }
.ep_msg_err { color:var(--red600-color); }

/* Rundenende (position:relative + overflow:hidden fuer den Konfetti-Regen) */
.ep_done {
  position:relative; overflow:hidden;
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.ep_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.ep_done_icon { font-size:3rem; margin:.2rem 0; }
.ep_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.ep_sterne { font-size:2rem; margin-bottom:.8rem; }
.ep_konfetti { position:absolute; inset:0; pointer-events:none; }
.ep_konfetti i {
  position:absolute; top:-16px; width:9px; height:14px; border-radius:2px;
  opacity:0; animation:ep_konfetti_fall 2.8s linear forwards;
}
@keyframes ep_konfetti_fall {
  0% { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(380px) rotate(560deg); opacity:0; }
}
@keyframes ep_shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-4px); }
  75% { transform:translateX(4px); }
}
@keyframes ep_puls {
  0%, 100% { stroke-width:1.4; }
  50% { stroke:#0277BD; stroke-width:5; }
}
@media (prefers-reduced-motion: reduce) {
  .ep_konfetti { display:none; }
  .ep_land.ep_puls { animation:none; stroke-width:3; stroke:#0277BD; }
}

/* Handy */
@media (max-width:600px) {
  .ep_panel { padding:.7rem .8rem; }
  .ep_controls { margin-left:0; }
  .ep_btn { flex:1 1 100%; }
  .ep_stueck { flex:1 1 calc(50% - .3rem); }
  .ep_task_label { font-size:1.15rem; }
}

/* Dark Mode Europa-Puzzle: Meer dunkel, unentdeckte Laender graublau,
   Region-Farben und Puzzleteile bleiben bunt bzw. weiss (wie ein Bild) */
html[data-theme="dark"] .ep_meer { fill:#16293C; }
html[data-theme="dark"] .ep_land { fill:#546E7A; stroke:#1E1E1E; }
html[data-theme="dark"] .ep_land.ep_verdeckt { fill:#37474F; stroke:#37474F; stroke-width:3; }
html[data-theme="dark"] .ep_land.ep_wackelt { fill:#E57373; }
html[data-theme="dark"] .ep_stueck { background:#FFFFFF; }
html[data-theme="dark"] .ep_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .ep_msg_err { color:#FF8A80; }

/* ---------- Einheiten-Kueche - alle Styles mit Praefix ek_ ---------- */
/* Groessen umrechnen, Einheiten finden, Mengen vergleichen (Kuechen-Thema) */
/* hidden muss trotz display:flex wirken: */
.ek_btns[hidden] { display:none; }
.ek_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.ek_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.ek_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.ek_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.ek_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.ek_controls label { font-weight:700; font-size:.9rem; }

/* Die Rezept-Karte (Papier-Look) mit dampfendem Topf */
.ek_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.ek_task_label { margin:0 0 .7rem; font-weight:700; color:var(--grey600-color);
  font-size:.92rem; }
.ek_rezept {
  display:flex; gap:1rem; align-items:flex-start;
  background:#FFFDF5; border:2px solid #D9B77E; border-radius:1rem;
  padding:1.1rem 1.2rem; margin:0 auto; max-width:36rem;
  /* Papier bleibt im Dark Mode hell - der Text hier immer dunkel */
  color:#3E2723;
}
.ek_topf { flex:0 0 auto; padding-top:.2rem; }
.ek_dampf { animation:ek_dampf_wabern 2.2s ease-in-out infinite; }
.ek_dampf2 { animation-delay:1.1s; }
@keyframes ek_dampf_wabern {
  0%, 100% { opacity:.25; transform:translateY(2px); }
  50% { opacity:.9; transform:translateY(-2px); }
}
.ek_rezept_inhalt { flex:1 1 auto; min-width:0; }
.ek_rezept_kopf {
  font-weight:800; color:#C62828; border-bottom:2px dashed #D9B77E;
  padding-bottom:.35rem; margin-bottom:.6rem;
}
.ek_zeile { font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.ek_aufgabe { font-size:1.6rem; font-weight:800; }
.ek_input {
  font-size:1.6rem; font-weight:800; width:7.5ch; text-align:center;
  border:3px solid #B79A67; border-radius:.8rem; padding:.2rem .4rem;
  background:#FFFFFF; color:#263238;
}
.ek_input:focus { outline:3px solid var(--link-color); outline-offset:2px; }
.ek_input_right { border-color:var(--green600-color); background:#E8F5E9; }
.ek_input_wrong { border-color:var(--red600-color); background:#FDECEA; }
.ek_kessel_leiste { display:flex; gap:1rem; flex-wrap:wrap; }
.ek_kessel {
  flex:1 1 10rem; text-align:center; font-weight:700;
  background:var(--grey50-color); border:2px solid var(--grey400-color);
  border-radius:1rem; padding:.8rem .6rem;
  display:flex; flex-direction:column; gap:.3rem; align-items:center;
}
.ek_kessel_emoji { font-size:2rem; }
.ek_kessel b { font-size:1.5rem; font-weight:800; }

/* Fuchs... Koch-Sprechblase */
.ek_bubble {
  position:relative; margin:1rem auto 0; max-width:34rem;
  background:var(--grey50-color); border:2px solid var(--grey400-color);
  border-radius:1rem; padding:.7rem 1rem; font-weight:600; text-align:left;
}
.ek_btns { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.ek_btn {
  flex:1 1 calc(50% - .35rem); min-height:56px; font-size:1.35rem; font-weight:800;
  border:none; border-radius:1rem; color:#FFFFFF; cursor:pointer;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  transition:transform .1s, filter .1s;
}
.ek_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.ek_btn:active:not(:disabled) { transform:translateY(1px); }
.ek_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.ek_btn:disabled { cursor:default; opacity:.85; }
.ek_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.ek_btn_wrong { opacity:.55; animation:artikel_shake .35s; }
.ek_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.ek_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.ek_msg_ok { color:var(--link-color); }
.ek_msg_err { color:var(--red600-color); }

/* Merkwissen-Aufklapper */
.ek_hilfe {
  margin-top:1rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem; padding:.8rem 1rem;
}
.ek_hilfe summary { cursor:pointer; font-weight:700; }
.ek_hilfe ul { margin:.6rem 0 .3rem; padding-left:1.3rem; }
.ek_hilfe li { margin:.25rem 0; }
.ek_hilfe p { margin:.5rem 0 0; font-size:.95rem; }

/* Rundenende */
.ek_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.ek_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.ek_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.ek_sterne { font-size:2rem; margin-bottom:.8rem; }

/* Handy */
@media (max-width:600px) {
  .ek_panel { padding:.7rem .8rem; }
  .ek_controls { margin-left:0; }
  .ek_btn { flex:1 1 100%; }
  .ek_rezept { padding:.8rem; }
  .ek_aufgabe { font-size:1.35rem; }
}

/* Dark Mode Einheiten-Kueche: die Rezeptkarte bleibt Papier (wie ein Bild) */
html[data-theme="dark"] .ek_bubble { background:var(--alt-div-color); }
html[data-theme="dark"] .ek_hilfe { background:var(--alt-div-color); }
html[data-theme="dark"] .ek_msg_err { color:#FF8A80; }

/* Einheiten-Kueche Verschchoenerung: Fortschritt, Stempel, Konfetti, Falt-Ecke */
/* 8 Punkte zeigen den Runden-Fortschritt */
.ek_fortschritt { display:flex; gap:.45rem; justify-content:center; margin:0 0 .8rem; }
.ek_dot {
  width:.75rem; height:.75rem; border-radius:50%;
  background:var(--grey400-color); opacity:.6;
}
.ek_dot_fertig { background:var(--green600-color); opacity:1; }
.ek_dot_aktuell { background:var(--yellow600-color); opacity:1;
  animation:ek_dot_puls 1.2s ease-in-out infinite; }
@keyframes ek_dot_puls {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.35); }
}

/* "Stimmt!"-Stempel schlaegt mittig auf die Rezeptkarte (leicht gedreht) */
.ek_rezept_inhalt { position:relative; }
.ek_stempel {
  position:absolute; top:50%; left:50%;
  font-size:1.6rem; font-weight:900; color:#2E7D32;
  border:4px solid #2E7D32; border-radius:.6rem; padding:.15rem .9rem;
  background:rgba(255,255,255,.82); pointer-events:none; white-space:nowrap;
  animation:ek_stempel_aufschlag .45s cubic-bezier(.2,2,.4,1) both;
}
.ek_stempel_nein { color:#C62828; border-color:#C62828; }
@keyframes ek_stempel_aufschlag {
  from { transform:translate(-50%,-50%) rotate(-12deg) scale(2.6); opacity:0; }
  to { transform:translate(-50%,-50%) rotate(-12deg) scale(1); opacity:1; }
}

/* Konfetti-Regen am Rundenende */
.ek_konfetti {
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50;
}
.ek_konfetti i {
  position:absolute; top:-16px; display:block; border-radius:2px; opacity:.95;
  animation:ek_konfetti_fall 2.8s ease-in forwards;
}
@keyframes ek_konfetti_fall {
  to { transform:translateY(108vh) rotate(720deg); opacity:.6; }
}

/* Sterne ploppen beim Rundenende auf */
.ek_sterne_pop { animation:ek_sterne_pop .55s cubic-bezier(.2,2,.4,1) both; }
@keyframes ek_sterne_pop {
  0% { transform:scale(0); }
  70% { transform:scale(1.25); }
  100% { transform:scale(1); }
}

/* Gefaltete Papier-Ecke oben rechts auf der Rezeptkarte */
.ek_rezept { position:relative; overflow:hidden; }
.ek_rezept::before {
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-top:26px solid #F0E6CC;   /* Rueckseite des Papiers */
  border-left:26px solid transparent;
}
.ek_rezept::after {
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-bottom:26px solid var(--ct-color); border-left:26px solid transparent;
}

/* ---------- Körperlabor - alle Styles mit Praefix organ_ ---------- */
/* Organe in den Koerper einsetzen (Drag & Drop), benennen, Systeme zuordnen */
.organ_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.organ_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.organ_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.organ_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.organ_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.organ_controls label { font-weight:700; font-size:.9rem; }

.organ_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.organ_task_label { margin:0 0 .7rem; font-weight:800; color:var(--blk-color);
  font-size:1.2rem; line-height:1.35; text-align:center; }

/* Buehne: Koerper-SVG + Seitenkarte (Ablage/Frage) nebeneinander */
.organ_split { display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap;
  justify-content:center; }
.organ_body_wrap { flex:0 1 360px; }
.organ_body_wrap svg { width:100%; height:auto; display:block; touch-action:none;
  user-select:none; -webkit-user-select:none; }
.organ_seite { flex:0 1 250px; }

/* Ablage-Karte ("In der Hand") mit geknickter Papier-Ecke */
.organ_tray {
  position:relative; overflow:hidden;
  background:var(--grey50-color); border:2px solid var(--grey300-color);
  border-radius:1rem; padding:.9rem 1rem; text-align:center;
}
.organ_tray::before {
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-top:24px solid var(--grey300-color);
  border-left:24px solid transparent;
}
.organ_tray::after {
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-bottom:24px solid var(--ct-color); border-left:24px solid transparent;
}
.organ_tray_titel {
  margin:0; font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.organ_tray_name { margin:.15rem 0 .4rem; font-size:1.5rem; font-weight:800;
  color:var(--link-color); }
.organ_tray_bild { display:flex; justify-content:center; padding:.4rem 0;
  touch-action:none; }
.organ_tray_bild svg { cursor:grab; }
.organ_tray_hint { margin:.3rem 0 0; font-size:.85rem; color:var(--grey600-color); }

/* Die Schablonen (Ablageplaetze) im Koerper: echte Organ-Konturen,
   gestrichelt - CSS uebersteuert Fuellung und Strich der Organgrafik */
.organ_slot { opacity:.9; }
.organ_slot * { fill:none !important; stroke:#B39A85 !important;
  stroke-width:2.5 !important; stroke-dasharray:7 6 !important; }
.organ_slot.organ_slot_hot { opacity:1;
  filter:drop-shadow(0 0 5px rgba(67,160,71,.85)); }
.organ_slot.organ_slot_hot * { stroke:var(--link-color) !important;
  stroke-width:4 !important; }

/* Eingesetzte Organe: innere Gruppe traegt die Animationen */
.organ_organ > g { transform-box:fill-box; transform-origin:center; }
.organ_puls { animation:organ_puls 1.1s ease-in-out infinite; }
@keyframes organ_puls { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.organ_pop > g { animation:organ_pop .45s cubic-bezier(.2,2,.4,1); }
@keyframes organ_pop { 0% { transform:scale(.55); } 100% { transform:scale(1); } }
.organ_falsch > g { animation:organ_shake .45s; }
@keyframes organ_shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  75% { transform:translateX(6px); }
}
.organ_richtig { filter:drop-shadow(0 0 7px rgba(67,160,71,.95)); }
.organ_wackelt { animation:organ_shake .45s; }

/* Der Geist, der beim Ziehen am Zeiger haengt */
.organ_ghost {
  position:fixed; z-index:9999; pointer-events:none; opacity:.92;
  transform:translate(-50%,-50%); filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
}

.organ_bubble {
  position:relative; margin:1rem auto 0; max-width:34rem;
  background:var(--grey50-color); border:2px solid var(--grey400-color);
  border-radius:1rem; padding:.7rem 1rem; font-weight:600; text-align:left;
}
.organ_btns[hidden] { display:none; }
.organ_btns { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.organ_btn {
  flex:1 1 calc(50% - .35rem); min-height:56px; font-size:1.25rem; font-weight:800;
  border:none; border-radius:1rem; color:#FFFFFF; cursor:pointer;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  transition:transform .1s, filter .1s; padding:.5rem;
}
.organ_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.organ_btn:active:not(:disabled) { transform:translateY(1px); }
.organ_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.organ_btn:disabled { cursor:default; opacity:.85; }
.organ_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.organ_btn_wrong { opacity:.55; animation:organ_shake .35s; }
.organ_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.organ_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }
.organ_msg_ok { color:var(--link-color); }
.organ_msg_err { color:var(--red600-color); }

.organ_hilfe {
  margin-top:1rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem; padding:.8rem 1rem;
}
.organ_hilfe summary { cursor:pointer; font-weight:700; }
.organ_hilfe ul { margin:.6rem 0 .3rem; padding-left:1.3rem; }
.organ_hilfe li { margin:.25rem 0; }
.organ_hilfe p { margin:.5rem 0 0; font-size:.95rem; }

.organ_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.organ_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.organ_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.organ_sterne { font-size:2rem; margin-bottom:.8rem; }

@media (max-width:600px) {
  .organ_panel { padding:.7rem .8rem; }
  .organ_controls { margin-left:0; }
  .organ_btn { flex:1 1 100%; font-size:1.1rem; }
  .organ_split { flex-direction:column; align-items:center; }
  .organ_body_wrap { flex:1 1 auto; width:100%; max-width:340px; }
  .organ_seite { flex:1 1 auto; width:100%; }
}

/* Dark Mode Körperlabor: das Koerper-Plakat bleibt hell (wie ein Bild) */
html[data-theme="dark"] .organ_bubble { background:var(--alt-div-color); }
html[data-theme="dark"] .organ_hilfe { background:var(--alt-div-color); }
html[data-theme="dark"] .organ_tray { background:var(--alt-div-color); }
html[data-theme="dark"] .organ_msg_err { color:#FF8A80; }

/* ---------- Farben-Meister - alle Styles mit Praefix farbe_ ---------- */
/* Farben nachmischen (Malfarben/Licht), Farbwissen-Quiz mit Farbkreis */
.farbe_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.farbe_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.farbe_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.farbe_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.farbe_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.farbe_controls label { font-weight:700; font-size:.9rem; }

.farbe_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.farbe_task_label { margin:0 0 .8rem; font-weight:800; color:var(--blk-color);
  font-size:1.2rem; line-height:1.35; text-align:center; }

/* Misch-Buehne: Zielkarte + Farbklecks/Licht nebeneinander */
.farbe_mix_wrap { display:flex; gap:1.2rem; align-items:flex-start;
  justify-content:center; flex-wrap:wrap; }
.farbe_ziel {
  position:relative;
  flex:0 1 190px; background:var(--grey50-color); border:2px solid var(--grey300-color);
  border-radius:1rem; padding:.8rem; text-align:center;
}
/* Klebeband oben auf dem Malkarton */
.farbe_ziel::before {
  content:""; position:absolute; top:-11px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:66px; height:20px; border-radius:3px;
  background:rgba(255,232,130,.8); border:1px solid rgba(0,0,0,.08);
}
.farbe_ziel_titel {
  margin:0 0 .5rem; font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.farbe_sw_gross {
  width:100%; height:110px; border-radius:.9rem; border:3px solid #FFFFFF;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.farbe_ziel_name { margin:.55rem 0 0; font-weight:800; font-size:1.05rem; }
.farbe_klecks { flex:0 1 360px; display:flex; justify-content:center; }
.farbe_klecks svg { width:100%; max-width:360px; height:auto; }

/* Fragen-Karte (z. B. grosse Farbprobe bei warm/kalt) */
.farbe_frage { display:flex; justify-content:center; margin:0 0 .8rem; }
.farbe_frage .farbe_sw_gross { width:min(240px, 60%); height:96px; }
.farbe_kreis_box { display:flex; justify-content:center; margin:0 0 .8rem; }
.farbe_kreis_box svg { filter:drop-shadow(0 3px 8px rgba(0,0,0,.2)); }

/* Regler-Zeile (hidden muss trotz display:flex wirken) */
.farbe_regler[hidden] { display:none; }
.farbe_regler { display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap;
  margin-top:.9rem; }
.farbe_regler_ein { flex:1 1 160px; max-width:240px; }
.farbe_regler_ein label {
  display:flex; align-items:center; gap:.4rem; font-weight:800; font-size:1rem;
  margin-bottom:.25rem;
}
.farbe_punkt { width:1rem; height:1rem; border-radius:50%; display:inline-block;
  border:2px solid rgba(0,0,0,.25); }
.farbe_regler_ein input[type="range"] { width:100%; height:2rem; cursor:pointer; }
.farbe_regler_ein output { color:var(--link-color); }

.farbe_bubble {
  position:relative; margin:1rem auto 0; max-width:34rem;
  background:var(--grey50-color); border:2px solid var(--grey400-color);
  border-radius:1rem; padding:.7rem 1rem; font-weight:600; text-align:left;
}
.farbe_btns[hidden] { display:none; }
.farbe_btns { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.farbe_btn {
  flex:1 1 calc(50% - .35rem); min-height:60px; font-size:1.15rem; font-weight:800;
  border:none; border-radius:1rem; color:#FFFFFF; cursor:pointer;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  transition:transform .1s, filter .1s; padding:.5rem;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.farbe_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.farbe_btn:active:not(:disabled) { transform:translateY(1px); }
.farbe_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.farbe_btn:disabled { cursor:default; opacity:.9; }
.farbe_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.farbe_btn_wrong { opacity:.55; animation:farbe_shake .35s; }
@keyframes farbe_shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-5px); }
  75% { transform:translateX(5px); }
}
/* Farb-Kacheln in den Antwortbuttons */
.farbe_sw { width:1.9rem; height:1.9rem; border-radius:.45rem; flex:0 0 auto;
  border:2px solid rgba(0,0,0,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }

.farbe_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.farbe_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }
.farbe_msg_ok { color:var(--link-color); }
.farbe_msg_err { color:var(--red600-color); }

.farbe_hilfe {
  margin-top:1rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem; padding:.8rem 1rem;
}
.farbe_hilfe summary { cursor:pointer; font-weight:700; }
.farbe_hilfe ul { margin:.6rem 0 .3rem; padding-left:1.3rem; }
.farbe_hilfe li { margin:.25rem 0; }
.farbe_kreis_hilfe { display:flex; flex-direction:column; align-items:center;
  gap:.4rem; margin-top:.7rem; }
.farbe_kreis_text { font-size:.9rem; color:var(--grey600-color); margin:0; }

.farbe_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.farbe_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.farbe_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.farbe_sterne { font-size:2rem; margin-bottom:.8rem; }

@media (max-width:600px) {
  .farbe_panel { padding:.7rem .8rem; }
  .farbe_controls { margin-left:0; }
  .farbe_btn { flex:1 1 100%; font-size:1.05rem; }
  .farbe_mix_wrap { flex-direction:column; align-items:center; }
  .farbe_ziel { flex:1 1 auto; width:100%; max-width:300px; }
  .farbe_klecks { flex:1 1 auto; width:100%; }
}

/* Dark Mode Farben-Meister */
html[data-theme="dark"] .farbe_bubble { background:var(--alt-div-color); }
html[data-theme="dark"] .farbe_hilfe { background:var(--alt-div-color); }
html[data-theme="dark"] .farbe_ziel { background:var(--alt-div-color); }
html[data-theme="dark"] .farbe_msg_err { color:#FF8A80; }

/* ---------- Fake-News-Detektiv - alle Styles mit Praefix fn_ ---------- */
/* Erfundene Beitraege pruefen: Schlagzeile, Bild, Quelle, dann urteilen */
.fn_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.fn_stat {
  display:flex; flex-direction:column; min-width:4rem;
  padding-right:1rem; border-right:1px solid var(--grey300-color);
}
.fn_stat:last-of-type { border-right:0; }
.fn_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.fn_stat span { font-size:1.35rem; font-weight:800; color:var(--link-color); line-height:1.15; }
.fn_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.fn_controls label { font-weight:700; font-size:.9rem; }

/* Merkwissen-Aufklapper (gleiche Optik wie Winkelfuchs/Einheiten-Kueche) */
.fn_hilfe {
  margin:0 0 1.1rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem; padding:.9rem 1.05rem;
}
.fn_hilfe h3 { margin:.1rem 0 .5rem; font-size:1.1rem; }
.fn_hilfe ul { margin:.3rem 0 .2rem; padding-left:1.25rem; }
.fn_hilfe li { margin:.28rem 0; line-height:1.45; }

/* ---------- Buehne ---------- */
.fn_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.fn_kopfzeile {
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center;
  justify-content:space-between; margin:0 0 .8rem;
}
.fn_task_label { margin:0; font-weight:700; color:var(--grey600-color); font-size:.92rem; }

/* Runden-Reihe: ein Punkt je Beitrag, nach dem Urteil gruen oder rot */
.fn_reihe { display:flex; flex-wrap:wrap; gap:.32rem; }
.fn_punkt {
  width:.85rem; height:.85rem; border-radius:50%;
  border:2px solid var(--grey400-color); background:var(--ct-color);
  transition:background .2s, border-color .2s;
}
.fn_punkt_aktiv { border-color:var(--link-color); box-shadow:0 0 0 3px var(--green100-color); }
.fn_punkt_ok { background:#2E7D32; border-color:#2E7D32; }
.fn_punkt_err { background:#E53935; border-color:#E53935; }

/* ---------- Beitrag im Feed-Look ---------- */
.fn_post {
  background:var(--grey50-color); border:2px solid var(--grey300-color);
  border-radius:1rem; padding:1.05rem 1.1rem 1.15rem;
}
.fn_post_neu { animation:fn_rein .3s ease-out; }
@keyframes fn_rein {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
.fn_kopf { display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.fn_avatar {
  flex:0 0 auto; width:3rem; height:3rem; border-radius:50%;
  background:var(--ct-color); border:2px solid var(--grey300-color);
  display:flex; align-items:center; justify-content:center; font-size:1.55rem;
}
.fn_kopf_text { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.fn_absender { font-weight:700; font-size:1.02rem; word-break:break-word; }
.fn_kanal {
  align-self:flex-start; padding:.1rem .6rem; border-radius:999px;
  background:var(--grey200-color); color:var(--grey600-color);
  font-size:.78rem; font-weight:700;
}
.fn_schlagzeile { margin:0 0 .7rem; font-size:1.35rem; line-height:1.28; }
.fn_mark {
  background:#FFE082; color:#3E2723; padding:0 .2rem; border-radius:.3rem;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* Bild mit Unterschrift */
.fn_bildbox {
  margin:.65rem 0 .3rem; border-radius:.85rem; overflow:hidden;
  background:var(--ct-color); border:2px solid var(--grey300-color);
}
.fn_bildbox img { display:block; width:100%; height:auto; }
.fn_bildbox figcaption {
  padding:.4rem .65rem .5rem; font-size:.82rem; font-style:italic;
  color:var(--grey600-color); border-top:1px solid var(--grey300-color);
}
.fn_text { white-space:pre-line; font-size:1.05rem; line-height:1.5; margin:.9rem 0 .7rem; }

/* Quellzeile als kleiner Zettel */
.fn_quelle {
  margin:.3rem 0 0; padding:.5rem .7rem; border-radius:.6rem;
  background:var(--grey50-color); border-left:4px solid var(--grey400-color);
  font-size:.9rem; word-break:break-word;
}
.fn_quelle_label { font-weight:700; color:var(--grey600-color); }
.fn_quelle_url { font-family:monospace; font-size:.88rem; color:var(--grey600-color); }

/* Pruef-Panels: was der Check gefunden hat */
.fn_befund {
  margin:.65rem 0 .2rem; border-radius:.7rem; padding:.65rem .8rem .7rem;
  background:#FFF8E1; border-left:5px solid var(--yellow600-color);
  font-size:.95rem; animation:fn_rein .25s ease-out;
}
.fn_befund_titel { margin:0 0 .4rem; font-weight:800; }
.fn_befund ul { margin:.15rem 0 .2rem; padding-left:1.15rem; }
.fn_befund li { margin:.25rem 0; line-height:1.45; }
.fn_befund li::marker { color:var(--yellow600-color); }
.fn_befund_hinweis {
  margin:.55rem 0 0; padding-top:.45rem; border-top:1px dashed var(--grey400-color);
  font-weight:700; color:var(--grey600-color); font-size:.88rem;
}
.fn_befund_fazit { margin:.55rem 0 0; font-weight:800; font-size:.93rem; color:var(--red600-color); }
.fn_befund_fazit_ok { color:var(--link-color); }
.fn_quellenliste {
  display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem;
  margin:.2rem 0 0; font-size:.92rem;
}
.fn_quellenliste dt { font-weight:700; color:var(--grey600-color); }
.fn_quellenliste dd { margin:0; }

/* ---------- Pruef-Werkzeugkasten ---------- */
.fn_werkzeugkasten {
  margin-top:1.1rem; padding:.85rem .9rem .9rem; border-radius:.9rem;
  background:var(--grey50-color); border:2px solid var(--grey300-color);
}
.fn_werkzeug_kopf {
  display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:center;
  justify-content:space-between; margin-bottom:.7rem;
}
.fn_werkzeug_titel { font-weight:800; font-size:.95rem; }
.fn_bonus_badge {
  padding:.2rem .7rem; border-radius:999px; font-size:.82rem; font-weight:700;
  background:var(--grey200-color); color:var(--grey600-color);
  transition:background .2s, color .2s;
}
.fn_bonus_badge_ok { background:#2E7D32; color:#FFFFFF; }
.fn_werkzeuge { display:grid; grid-template-columns:repeat(3, 1fr); gap:.55rem; }
.fn_werkzeug {
  padding:.7rem .6rem; min-height:3.5rem; text-align:center;
  font-family:inherit; font-size:.98rem; font-weight:700; cursor:pointer;
  background:var(--ct-color); color:var(--link-color);
  border:2px solid var(--link-color); border-radius:.85rem;
  transition:transform .1s, background .15s, color .15s, border-color .15s;
}
.fn_werkzeug:hover { transform:translateY(-2px); background:var(--green50-color); }
.fn_werkzeug:active { transform:translateY(1px); }
.fn_werkzeug:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.fn_werkzeug_done {
  background:var(--green100-color); border-color:#2E7D32; color:#1B5E20; cursor:default;
}
.fn_werkzeug_done:hover, .fn_werkzeug_done:active { transform:none; background:var(--green100-color); }
.fn_werkzeug_fuss { display:flex; justify-content:flex-end; margin-top:.6rem; }
.fn_vorlesen {
  padding:.4rem .9rem; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.9rem;
  background:var(--ct-color); color:var(--grey600-color);
  border:2px dashed var(--grey400-color);
}
.fn_vorlesen:hover { color:var(--link-color); border-color:var(--link-color); }
.fn_vorlesen:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }

/* ---------- Urteil ---------- */
.fn_urteil_frage { margin:1.15rem 0 .45rem; font-weight:800; font-size:1rem; }
.fn_urteil_btns { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.fn_urteil {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:66px; padding:.6rem 1rem;
  font-family:inherit; font-size:1.3rem; font-weight:800; color:#FFFFFF;
  border:none; border-radius:1rem; cursor:pointer;
  transition:transform .1s, filter .1s;
}
.fn_urteil_icon { font-size:1.35rem; }
.fn_urteil_echt { background:linear-gradient(180deg, #43A047, #2E7D32); box-shadow:0 4px 0 #1B5E20; }
.fn_urteil_fake { background:linear-gradient(180deg, #EF5350, #C62828); box-shadow:0 4px 0 #8E1C1C; }
.fn_urteil:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.06); }
.fn_urteil:active:not(:disabled) { transform:translateY(2px); }
.fn_urteil:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.fn_urteil:disabled { cursor:default; opacity:.55; filter:grayscale(.35); }

/* ---------- Aufloesung mit Merksaetzen ---------- */
.fn_aufloesung {
  margin-top:1.1rem; padding:1rem 1.05rem;
  background:var(--grey50-color); border:2px solid var(--grey300-color);
  border-radius:1rem; animation:fn_rein .3s ease-out;
}
.fn_urteil_text {
  margin:0; padding:.6rem .8rem; border-radius:.7rem;
  background:var(--ct-color); border-left:6px solid var(--grey400-color);
  font-weight:800; font-size:1.05rem;
}
.fn_urteil_ok { border-left-color:#2E7D32; color:#1B5E20; }
.fn_urteil_err { border-left-color:#E53935; color:#C62828; }
.fn_bonus {
  margin:.7rem 0 0; padding:.45rem .8rem; border-radius:999px;
  background:var(--grey200-color); color:var(--grey600-color);
  font-size:.9rem; font-weight:700;
}
.fn_bonus_ok { background:var(--green100-color); color:#1B5E20; }
.fn_merkmale { display:flex; flex-direction:column; gap:.5rem; margin-top:.85rem; }
.fn_chip {
  background:#FDECEA; border-left:5px solid var(--red600-color);
  border-radius:.6rem; padding:.6rem .8rem; font-size:.95rem;
}
.fn_chip strong { display:block; margin-bottom:.15rem; }
.fn_chip span { display:block; line-height:1.45; }
.fn_chip_ok { background:var(--green50-color); border-left-color:var(--green600-color); }
.fn_fazit {
  margin:.9rem 0 0; padding:.6rem .8rem; border-radius:.6rem;
  background:var(--ct-color); font-size:.96rem;
}
.fn_tun {
  margin:.6rem 0 0; padding:.65rem .8rem; border-radius:.6rem;
  background:#E1F5FE; border-left:5px solid var(--lightblue600-color);
  font-weight:700; font-size:.96rem;
}
.fn_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.fn_weiter { min-width:9rem; font-size:1.05rem; }

/* ---------- Rundenende mit Checkliste ---------- */
.fn_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem 1.3rem;
}
.fn_done h3 { margin:.2rem 0 .5rem; font-size:1.6rem; color:var(--link-color); }
.fn_done h4 { margin:1.15rem 0 .5rem; color:var(--grey600-color); text-align:left; }
.fn_done p { margin:.3rem 0 .8rem; font-size:1.05rem; white-space:pre-line; }
.fn_sterne { font-size:2.2rem; letter-spacing:.2rem; margin:.2rem 0 1rem; }
.fn_done_zahlen { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.fn_done_zahl {
  flex:1 1 7rem; max-width:11rem; padding:.6rem .7rem; border-radius:.85rem;
  background:var(--grey50-color);
  display:flex; flex-direction:column; gap:.1rem;
}
.fn_done_zahl label {
  font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.fn_done_zahl span { font-size:1.5rem; font-weight:800; color:var(--link-color); }
.fn_handbuch { display:flex; flex-direction:column; gap:.5rem; margin:.3rem 0 1.2rem; text-align:left; }
.fn_check_eintrag {
  background:var(--grey50-color); border-left:5px solid var(--red600-color);
  border-radius:.6rem; padding:.6rem .8rem; font-size:.95rem;
}
.fn_check_eintrag strong { display:block; margin-bottom:.15rem; }
.fn_check_eintrag span { display:block; line-height:1.45; }
.fn_check_eintrag_ok { border-left-color:var(--green600-color); }

/* Handy */
@media (max-width:600px) {
  .fn_panel { padding:.7rem .8rem; gap:.5rem .9rem; }
  .fn_controls { margin-left:0; width:100%; }
  .fn_controls select { flex:1 1 9rem; min-width:0; }
  .fn_stat { min-width:3.4rem; padding-right:.7rem; }
  .fn_stat span { font-size:1.15rem; }
  .fn_stage { padding:.8rem .75rem 1rem; }
  .fn_post { padding:.85rem .8rem 1rem; }
  .fn_kopfzeile { flex-direction:column; align-items:flex-start; }
  .fn_schlagzeile { font-size:1.15rem; }
  .fn_werkzeuge { grid-template-columns:1fr 1fr; }
  .fn_werkzeug { min-height:3.2rem; font-size:.92rem; }
  .fn_urteil_btns { grid-template-columns:1fr; }
  .fn_urteil { min-height:58px; font-size:1.15rem; }
  .fn_quellenliste { grid-template-columns:1fr; gap:.05rem; }
  .fn_quellenliste dt { margin-top:.45rem; }
}

/* Dark Mode Fake-News-Detektiv */
html[data-theme="dark"] .fn_post { background:#242424; border-color:var(--grey300-color); }
html[data-theme="dark"] .fn_bildbox { background:var(--alt-div-color); }
html[data-theme="dark"] .fn_quelle { background:var(--alt-div-color); }
html[data-theme="dark"] .fn_werkzeugkasten { background:var(--alt-div-color); }
html[data-theme="dark"] .fn_werkzeug_done {
  background:#1F3A22; border-color:#66BB6A; color:#C8E6C9;
}
html[data-theme="dark"] .fn_werkzeug_done:hover,
html[data-theme="dark"] .fn_werkzeug_done:active { background:#1F3A22; }
html[data-theme="dark"] .fn_befund { background:#3E2F1C; }
html[data-theme="dark"] .fn_mark { background:#8D6E00; color:#FFF9EC; }
html[data-theme="dark"] .fn_aufloesung { background:var(--alt-div-color); }
html[data-theme="dark"] .fn_urteil_text { background:#242424; }
html[data-theme="dark"] .fn_urteil_ok { color:#A5D6A7; }
html[data-theme="dark"] .fn_urteil_err { color:#FF8A80; }
html[data-theme="dark"] .fn_bonus_ok { background:#1F3A22; color:#C8E6C9; }
html[data-theme="dark"] .fn_chip { background:#3a201e; }
html[data-theme="dark"] .fn_chip_ok { background:#1F3A22; border-left-color:#66BB6A; }
html[data-theme="dark"] .fn_fazit { background:#242424; }
html[data-theme="dark"] .fn_tun { background:#12303D; }
html[data-theme="dark"] .fn_befund_fazit { color:#FF8A80; }
html[data-theme="dark"] .fn_check_eintrag { background:var(--alt-div-color); }
html[data-theme="dark"] .fn_done_zahl { background:var(--alt-div-color); }

/* ---------- Where is the cat? (woistdiekatze.php) ---------- */
.katze_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.katze_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.katze_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.katze_stat span { font-size:1.25rem; font-weight:800; }
.katze_controls { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin-left:auto; }
.katze_controls label { font-size:.85rem; font-weight:700; color:var(--grey600-color); }
.katze_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.15rem 1.2rem;
}
.katze_frage { font-size:1.35rem; font-weight:700; text-align:center; margin:.2rem 0 .9rem; }
.katze_szene {
  max-width:640px; margin:0 auto; border-radius:.9rem;
  overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.katze_szene svg { display:block; width:100%; height:auto; }
.katze_btns_row {
  display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:.9rem 0 .7rem;
}
.katze_antworten {
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem; max-width:640px; margin:0 auto;
}
.katze_antworten[hidden] { display:none; }
.katze_satz {
  background:var(--div-color); border:2px solid var(--grey300-color); border-radius:.85rem;
  padding:.7rem .8rem; font-size:1rem; font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.katze_satz:hover:not(:disabled) { border-color:var(--link-color); transform:translateY(-2px); }
.katze_satz:disabled { cursor:default; opacity:.75; }
.katze_satz_ok { border-color:var(--link-color); background:var(--green50-color); opacity:1; }
.katze_satz_err { border-color:var(--red600-color); background:#FDECEA; opacity:.8; }
.katze_msg { text-align:center; min-height:1.6em; margin-top:.8rem; font-weight:500; }
.katze_msg_ok { color:var(--link-color); }
.katze_msg_err { color:var(--red600-color); }
.katze_hilfe {
  max-width:640px; margin:1rem auto 0; background:var(--green50-color);
  border-radius:.75rem; padding:.6rem .95rem; font-size:.95rem;
}
.katze_hilfe summary { cursor:pointer; font-weight:700; }
.katze_hilfe ul { margin:.5rem 0 .4rem; padding-left:1.2rem; }
.katze_hilfe li { margin:.15rem 0; }
.katze_spot { cursor:pointer; }
.katze_spot:hover ellipse, .katze_spot:hover circle { stroke:var(--link-color); }
.katze_spot_err ellipse, .katze_spot_err circle {
  stroke:var(--red600-color); fill:rgba(229,57,53,.2);
}
.katze_spot_richtig ellipse, .katze_spot_richtig circle { stroke:var(--link-color); }
.katze_pop {
  transform-box:fill-box; transform-origin:50% 100%;
  animation:katze_pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes katze_pop {
  from { transform:scale(.4); opacity:0; }
  to { transform:scale(1); opacity:1; }
}
.katze_done { text-align:center; background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.2rem 1rem; }
.katze_sterne { font-size:2.3rem; letter-spacing:.18em; margin:.3rem 0; color:var(--yellow600-color); }
.katze_chips { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:.7rem 0 1rem; }
.katze_chip {
  background:var(--green50-color); color:var(--link-h-color);
  border-radius:999px; padding:.28rem .75rem; font-size:.85rem; font-weight:600;
}
.katze_chip_err { background:#FDECEA; color:var(--red600-color); }
@media (max-width:640px){
  .katze_antworten { grid-template-columns:1fr; }
  .katze_frage { font-size:1.15rem; }
  .katze_controls { margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .katze_pop { animation:none; }
}
html[data-theme="dark"] .katze_satz { background:var(--alt-div-color); color:#F5F5F5; }
html[data-theme="dark"] .katze_satz_ok { background:#1F3A22; border-color:#66BB6A; color:#C8E6C9; }
html[data-theme="dark"] .katze_satz_err { background:#3a201e; border-color:#E57373; color:#FF8A80; }
html[data-theme="dark"] .katze_msg_ok { color:#A5D6A7; }
html[data-theme="dark"] .katze_msg_err { color:#FF8A80; }
html[data-theme="dark"] .katze_hilfe { background:#1F3A22; }
html[data-theme="dark"] .katze_chip { background:#1F3A22; color:#C8E6C9; }
html[data-theme="dark"] .katze_chip_err { background:#3a201e; color:#FF8A80; }
/* Nacht-Zimmer: die helle Illustration würde im Dark Mode als greller
   Kasten leuchten. Wand, Boden, Bild und Fenster werden darum zu einer
   Abend-Version umgefärbt - die Sonne am Fenster wird zum Mond.
   (Identische Palette wie bei der Maus, damit beide Spiele gleiche Stimmung.) */
html[data-theme="dark"] .katze_wand { fill:#3b3f4a; }
html[data-theme="dark"] .katze_boden { fill:#514537; }
html[data-theme="dark"] .katze_leiste { fill:#453c31; }
html[data-theme="dark"] .katze_parkett { stroke:#655747; }
html[data-theme="dark"] .katze_bild { fill:#2c2f36; stroke:#453726; }
html[data-theme="dark"] .katze_bild_huegel { fill:#4d6e4f; }
html[data-theme="dark"] .katze_bild_sonne { fill:#b3924a; }
html[data-theme="dark"] .katze_fenster { fill:#28395a; stroke:#54452f; }
html[data-theme="dark"] .katze_fenster_kreuz { stroke:#54452f; }
html[data-theme="dark"] .katze_fenster_sonne { fill:#e8edf5; }

/* ---------- Wo ist die Maus? (woistdiemaus.php) ---------- */
/* Schwesterspiel der Katze - gleiche Buehnen-Struktur, deutsche Saetze */
.maus_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.maus_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.maus_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.maus_stat span { font-size:1.25rem; font-weight:800; }
.maus_controls { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin-left:auto; }
.maus_controls label { font-size:.85rem; font-weight:700; color:var(--grey600-color); }
.maus_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.15rem 1.2rem;
}
.maus_frage { font-size:1.35rem; font-weight:700; text-align:center; margin:.2rem 0 .9rem; }
.maus_szene {
  max-width:640px; margin:0 auto; border-radius:.9rem;
  overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.maus_szene svg { display:block; width:100%; height:auto; }
.maus_btns_row {
  display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:.9rem 0 .7rem;
}
.maus_antworten {
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem; max-width:640px; margin:0 auto;
}
.maus_antworten[hidden] { display:none; }
.maus_satz {
  background:var(--div-color); border:2px solid var(--grey300-color); border-radius:.85rem;
  padding:.7rem .8rem; font-size:1rem; font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.maus_satz:hover:not(:disabled) { border-color:var(--link-color); transform:translateY(-2px); }
.maus_satz:disabled { cursor:default; opacity:.75; }
.maus_satz_ok { border-color:var(--link-color); background:var(--green50-color); opacity:1; }
.maus_satz_err { border-color:var(--red600-color); background:#FDECEA; opacity:.8; }
.maus_msg { text-align:center; min-height:1.6em; margin-top:.8rem; font-weight:500; }
.maus_msg_ok { color:var(--link-color); }
.maus_msg_err { color:var(--red600-color); }
.maus_hilfe {
  max-width:640px; margin:1rem auto 0; background:var(--green50-color);
  border-radius:.75rem; padding:.6rem .95rem; font-size:.95rem;
}
.maus_hilfe summary { cursor:pointer; font-weight:700; }
.maus_hilfe ul { margin:.5rem 0 .4rem; padding-left:1.2rem; }
.maus_hilfe li { margin:.15rem 0; }
.maus_spot { cursor:pointer; }
.maus_spot:hover ellipse, .maus_spot:hover circle { stroke:var(--link-color); }
.maus_spot_err ellipse, .maus_spot_err circle {
  stroke:var(--red600-color); fill:rgba(229,57,53,.2);
}
.maus_spot_richtig ellipse, .maus_spot_richtig circle { stroke:var(--link-color); }
.maus_pop {
  transform-box:fill-box; transform-origin:50% 100%;
  animation:maus_pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes maus_pop {
  from { transform:scale(.4); opacity:0; }
  to { transform:scale(1); opacity:1; }
}
.maus_done { text-align:center; background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.2rem 1rem; }
.maus_sterne { font-size:2.3rem; letter-spacing:.18em; margin:.3rem 0; color:var(--yellow600-color); }
.maus_chips { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:.7rem 0 1rem; }
.maus_chip {
  background:var(--green50-color); color:var(--link-h-color);
  border-radius:999px; padding:.28rem .75rem; font-size:.85rem; font-weight:600;
}
.maus_chip_err { background:#FDECEA; color:var(--red600-color); }
@media (max-width:640px){
  .maus_antworten { grid-template-columns:1fr; }
  .maus_frage { font-size:1.15rem; }
  .maus_controls { margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .maus_pop { animation:none; }
}
html[data-theme="dark"] .maus_satz { background:var(--alt-div-color); color:#F5F5F5; }
html[data-theme="dark"] .maus_satz_ok { background:#1F3A22; border-color:#66BB6A; color:#C8E6C9; }
html[data-theme="dark"] .maus_satz_err { background:#3a201e; border-color:#E57373; color:#FF8A80; }
html[data-theme="dark"] .maus_msg_ok { color:#A5D6A7; }
html[data-theme="dark"] .maus_msg_err { color:#FF8A80; }
html[data-theme="dark"] .maus_hilfe { background:#1F3A22; }
html[data-theme="dark"] .maus_chip { background:#1F3A22; color:#C8E6C9; }
html[data-theme="dark"] .maus_chip_err { background:#3a201e; color:#FF8A80; }
/* Nacht-Zimmer wie bei der Katze (dieselbe Abend-Palette) */
html[data-theme="dark"] .maus_wand { fill:#3b3f4a; }
html[data-theme="dark"] .maus_boden { fill:#514537; }
html[data-theme="dark"] .maus_leiste { fill:#453c31; }
html[data-theme="dark"] .maus_parkett { stroke:#655747; }
html[data-theme="dark"] .maus_bild { fill:#2c2f36; stroke:#453726; }
html[data-theme="dark"] .maus_bild_huegel { fill:#4d6e4f; }
html[data-theme="dark"] .maus_bild_sonne { fill:#b3924a; }
html[data-theme="dark"] .maus_fenster { fill:#28395a; stroke:#54452f; }
html[data-theme="dark"] .maus_fenster_kreuz { stroke:#54452f; }
html[data-theme="dark"] .maus_fenster_sonne { fill:#e8edf5; }

/* ---------- Wort-Bau (wortbau.php) ---------- */
/* Komposita als Baukloetze: zwei Teile + Klebe-Laut in der Mitte */
.wtb_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.wtb_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.wtb_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.wtb_stat span { font-size:1.25rem; font-weight:800; }
.wtb_controls { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin-left:auto; }
.wtb_controls label { font-size:.85rem; font-weight:700; color:var(--grey600-color); }
.wtb_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.15rem 1.2rem;
}
.wtb_typ {
  text-align:center; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:.8rem; color:var(--grey600-color); margin:.2rem 0 .3rem;
}
.wtb_frage { font-size:1.25rem; font-weight:700; text-align:center; margin:0 0 .9rem; }
.wtb_bausteine {
  display:flex; gap:.6rem; justify-content:center; align-items:center; flex-wrap:wrap;
  margin:0 auto 1rem; min-height:3.6rem;
}
.wtb_klotz {
  display:inline-block; border-radius:.7rem; padding:.55rem 1.1rem;
  font-size:1.5rem; font-weight:800; letter-spacing:.02em;
  border:2px solid rgba(0,0,0,.12); box-shadow:0 3px 0 rgba(0,0,0,.14);
}
.wtb_klotz_erst { background:#FFE082; color:#5D4037; }
.wtb_klotz_zweit { background:#A5D6A7; color:#1B5E20; }
.wtb_klotz_ganz { background:#B3E5FC; color:#0D47A1; font-size:1.7rem; }
.wtb_plus { font-size:1.6rem; font-weight:800; color:var(--grey600-color); }
.wtb_fuge {
  display:inline-block; background:#FDD835; color:#4E342E;
  border-radius:.3rem; padding:0 .18em; margin:0 .05em;
}
.wtb_inner { color:inherit; }
.wtb_antworten {
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem; max-width:640px; margin:0 auto;
}
.wtb_wort {
  background:var(--div-color); border:2px solid var(--grey300-color); border-radius:.85rem;
  padding:.75rem .8rem; font-size:1.1rem; font-weight:700; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.wtb_wort:hover:not(:disabled) { border-color:var(--link-color); transform:translateY(-2px); }
.wtb_wort:disabled { cursor:default; opacity:.75; }
.wtb_wort_ok { border-color:var(--link-color); background:var(--green50-color); opacity:1; }
.wtb_wort_err { border-color:var(--red600-color); background:#FDECEA; opacity:.8; }
.wtb_btns_row {
  display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:.9rem 0 .7rem;
}
.wtb_msg { text-align:center; min-height:1.6em; margin-top:.8rem; font-weight:500; }
.wtb_msg_ok { color:var(--link-color); }
.wtb_msg_err { color:var(--red600-color); }
.wtb_richtig_wort { font-weight:700; }
.wtb_hilfe {
  max-width:640px; margin:1rem auto 0; background:var(--green50-color);
  border-radius:.75rem; padding:.6rem .95rem; font-size:.95rem;
}
.wtb_hilfe summary { cursor:pointer; font-weight:700; }
.wtb_hilfe ul { margin:.5rem 0 .4rem; padding-left:1.2rem; }
.wtb_hilfe li { margin:.15rem 0; }
.wtb_done { text-align:center; background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.2rem 1rem; }
.wtb_sterne { font-size:2.3rem; letter-spacing:.18em; margin:.3rem 0; color:var(--yellow600-color); }
.wtb_chips { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:.7rem 0 1rem; }
.wtb_chip {
  background:var(--green50-color); color:var(--link-h-color);
  border-radius:999px; padding:.28rem .75rem; font-size:.85rem; font-weight:600;
}
.wtb_chip_err { background:#FDECEA; color:var(--red600-color); }
@media (max-width:640px){
  .wtb_antworten { grid-template-columns:1fr; }
  .wtb_frage { font-size:1.1rem; }
  .wtb_klotz { font-size:1.2rem; padding:.45rem .8rem; }
  .wtb_klotz_ganz { font-size:1.35rem; }
  .wtb_controls { margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .wtb_wort { transition:none; }
}
html[data-theme="dark"] .wtb_klotz_erst { background:#8D6E00; color:#FFF8E1; }
html[data-theme="dark"] .wtb_klotz_zweit { background:#2E5B33; color:#E8F5E9; }
html[data-theme="dark"] .wtb_klotz_ganz { background:#0D47A1; color:#E3F2FD; }
html[data-theme="dark"] .wtb_plus { color:#B0BEC5; }
html[data-theme="dark"] .wtb_fuge { background:#FDD835; color:#3E2723; }
html[data-theme="dark"] .wtb_wort { background:#2b2b2b; border-color:#565656; color:#F5F5F5; }
html[data-theme="dark"] .wtb_wort_ok { background:#1F3A22; border-color:#66BB6A; color:#C8E6C9; }
html[data-theme="dark"] .wtb_wort_err { background:#3a201e; border-color:#E57373; color:#FF8A80; }
html[data-theme="dark"] .wtb_msg_ok { color:#A5D6A7; }
html[data-theme="dark"] .wtb_msg_err { color:#FF8A80; }
html[data-theme="dark"] .wtb_hilfe { background:#1F3A22; }
html[data-theme="dark"] .wtb_chip { background:#1F3A22; color:#C8E6C9; }
html[data-theme="dark"] .wtb_chip_err { background:#3a201e; color:#FF8A80; }

/* ---------- Wort-Bruecke (wortbruecke.php) ---------- */
/* DE <-> Herkunftssprache: die 🌐-Einstellung waehlt die Brueckensprache */
.wbr_bruecke_zeile {
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  margin:0 auto 1rem; max-width:640px;
}
.wbr_seite {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:7.5rem; padding:.4rem .9rem; border-radius:999px;
  background:var(--div-color); border:2px solid var(--grey300-color);
  font-weight:800; font-size:.95rem;
}
.wbr_ms_name { border-color:var(--link-color); color:var(--link-color); }
.wbr_bogen {
  flex:1; max-width:9rem; height:14px; border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border:3px solid var(--link-color); border-bottom:none;
}
.wbr_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.wbr_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.wbr_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.wbr_stat span { font-size:1.25rem; font-weight:800; }
.wbr_controls { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin-left:auto; }
.wbr_controls label { font-size:.85rem; font-weight:700; color:var(--grey600-color); }
.wbr_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.15rem 1.2rem;
}
.wbr_richtung {
  text-align:center; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:.8rem; color:var(--grey600-color); margin:.2rem 0 .3rem;
}
.wbr_wort {
  font-size:2rem; font-weight:800; text-align:center; margin:0 0 1rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
}
.wbr_hoeren {
  font-size:1.1rem; border:2px solid var(--grey300-color); background:var(--div-color);
  border-radius:999px; padding:.25rem .6rem; cursor:pointer;
}
.wbr_hoeren:hover { border-color:var(--link-color); }
.wbr_kacheln {
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem; max-width:640px; margin:0 auto;
}
.wbr_kachel {
  background:var(--div-color); border:2px solid var(--grey300-color); border-radius:.9rem;
  padding:.9rem .8rem; font-size:1.15rem; font-weight:700; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.wbr_kachel:hover:not(:disabled) { border-color:var(--link-color); transform:translateY(-2px); }
.wbr_kachel:disabled { cursor:default; opacity:.75; }
.wbr_kachel_ok { border-color:var(--link-color); background:var(--green50-color); opacity:1; }
.wbr_kachel_err { border-color:var(--red600-color); background:#FDECEA; opacity:.8; }
.wbr_btns_row {
  display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:.9rem 0 .7rem;
}
.wbr_msg { text-align:center; min-height:1.6em; margin-top:.8rem; font-weight:500; }
.wbr_msg_ok { color:var(--link-color); }
.wbr_msg_err { color:var(--red600-color); }
.wbr_hilfe {
  max-width:640px; margin:1rem auto 0; background:var(--green50-color);
  border-radius:.75rem; padding:.6rem .95rem; font-size:.95rem;
}
.wbr_hilfe summary { cursor:pointer; font-weight:700; }
.wbr_hilfe ul { margin:.5rem 0 .4rem; padding-left:1.2rem; }
.wbr_hilfe li { margin:.15rem 0; }
.wbr_done { text-align:center; background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.2rem 1rem; }
.wbr_sterne { font-size:2.3rem; letter-spacing:.18em; margin:.3rem 0; color:var(--yellow600-color); }
.wbr_chips { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:.7rem 0 1rem; }
.wbr_chip {
  background:var(--green50-color); color:var(--link-h-color);
  border-radius:999px; padding:.28rem .75rem; font-size:.85rem; font-weight:600;
}
.wbr_chip_err { background:#FDECEA; color:var(--red600-color); }
@media (max-width:640px){
  .wbr_kacheln { grid-template-columns:1fr; }
  .wbr_wort { font-size:1.5rem; }
  .wbr_bogen { max-width:4rem; }
  .wbr_controls { margin-left:0; }
}
html[data-theme="dark"] .wbr_seite { background:var(--alt-div-color); }
html[data-theme="dark"] .wbr_kachel { background:var(--alt-div-color); }
html[data-theme="dark"] .wbr_kachel_ok { background:#1F3A22; border-color:#66BB6A; color:#C8E6C9; }
html[data-theme="dark"] .wbr_kachel_err { background:#3a201e; border-color:#E57373; color:#FF8A80; }
html[data-theme="dark"] .wbr_msg_ok { color:#A5D6A7; }
html[data-theme="dark"] .wbr_msg_err { color:#FF8A80; }
html[data-theme="dark"] .wbr_hilfe { background:#1F3A22; }
html[data-theme="dark"] .wbr_chip { background:#1F3A22; color:#C8E6C9; }
html[data-theme="dark"] .wbr_chip_err { background:#3a201e; color:#FF8A80; }

/* ---------- Pixel-Coder (pixelcoder.php) ---------- */
.pxc_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.pxc_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.pxc_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.pxc_stat span { font-size:1.25rem; font-weight:800; }
.pxc_controls { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin-left:auto; }
.pxc_controls label { font-size:.85rem; font-weight:700; color:var(--grey600-color); }
.pxc_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.15rem 1.2rem;
}
.pxc_aufgabe { font-size:1.25rem; font-weight:700; text-align:center; margin:.2rem 0 .8rem; }
.pxc_binaer {
  font-family:"Courier New", monospace; font-size:1.5rem; font-weight:700;
  letter-spacing:.14em; text-align:center; margin:0 auto .9rem; width:fit-content;
  background:#263238; color:#A5D6A7; border-radius:.6rem; padding:.35rem 1rem;
}
.pxc_lampen {
  display:flex; justify-content:center; gap:.55rem; flex-wrap:wrap; margin:.9rem 0;
}
.pxc_lampen[hidden] { display:none; }
.pxc_bit {
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  min-width:3.4rem; padding:.5rem .5rem .4rem; border-radius:.7rem;
  background:var(--div-color); border:2px solid var(--grey300-color); cursor:pointer;
}
.pxc_bit:disabled { cursor:default; }
.pxc_lampe {
  width:1.5rem; height:1.5rem; border-radius:50%; background:var(--grey300-color);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.15); transition:background .15s, box-shadow .15s;
}
.pxc_an .pxc_lampe {
  background:var(--yellow600-color);
  box-shadow:0 0 12px 3px rgba(253,216,53,.6);
}
.pxc_stelle { font-size:.82rem; font-weight:700; color:var(--grey600-color); }
.pxc_pulse { border-color:var(--link-color); animation:pxc_pulse .9s ease infinite; }
@keyframes pxc_pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(67,160,71,.55); }
  50% { box-shadow:0 0 0 9px rgba(67,160,71,0); }
}
.pxc_eingabe_zeile {
  display:flex; gap:.6rem; justify-content:center; align-items:center; margin:.8rem 0;
}
.pxc_eingabe_zeile[hidden] { display:none; }
.pxc_eingabe { width:7.5rem; text-align:center; font-size:1.2rem; font-weight:700; }
.pxc_pruefen_zeile { text-align:center; margin:.8rem 0; }
.pxc_pruefen_zeile[hidden] { display:none; }
.pxc_pixelwrap {
  max-width:640px; margin:.9rem auto; display:flex; flex-direction:column;
  gap:4px; align-items:center; --pxc_zelle:34px;
}
.pxc_pixelwrap[hidden] { display:none; }
.pxc_zeile { display:flex; gap:4px; align-items:center; }
.pxc_code {
  font-family:"Courier New", monospace; font-weight:700; width:7.4rem;
  text-align:right; margin-right:.6rem; color:var(--grey600-color); font-size:1.05rem;
}
.pxc_zelle {
  width:var(--pxc_zelle); height:var(--pxc_zelle); border-radius:6px; padding:0;
  border:2px solid var(--grey300-color); background:var(--grey50-color);
  cursor:pointer; transition:background .12s;
}
.pxc_zelle.pxc_aktive {
  background:var(--green400-color); border-color:var(--green600-color);
}
.pxc_zeile_ok .pxc_code { color:var(--link-color); }
.pxc_zeile_ok .pxc_code::after { content:" ✓"; }
.pxc_leuchtet { animation:pxc_leuchtet .5s ease; }
@keyframes pxc_leuchtet {
  0% { transform:scale(.7); } 60% { transform:scale(1.18); } 100% { transform:scale(1); }
}
.pxc_btns_row {
  display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:.9rem 0 .7rem;
}
.pxc_msg { text-align:center; min-height:1.6em; margin-top:.8rem; font-weight:500; }
.pxc_msg_ok { color:var(--link-color); }
.pxc_msg_err { color:var(--red600-color); }
.pxc_hilfe {
  max-width:640px; margin:1rem auto 0; background:var(--green50-color);
  border-radius:.75rem; padding:.6rem .95rem; font-size:.95rem;
}
.pxc_hilfe summary { cursor:pointer; font-weight:700; }
.pxc_hilfe ul { margin:.5rem 0 .4rem; padding-left:1.2rem; }
.pxc_hilfe li { margin:.15rem 0; }
/* Anleitung (gruen, wie die Merkwissen-Box) und Info-Box (blau, Muster
   Bruecken-Bau): beide unter dem Spiel, nur aufgeklappt sichtbar. */
.pxc_anleitung {
  max-width:640px; margin:.7rem auto 0; background:var(--green50-color);
  border-radius:.75rem; padding:.6rem .95rem; font-size:.95rem;
}
.pxc_anleitung summary { cursor:pointer; font-weight:700; }
.pxc_anleitung ul { margin:.5rem 0 .3rem; padding-left:1.2rem; }
.pxc_anleitung li { margin:.15rem 0; }
.pxc_info {
  max-width:640px; margin:1rem auto 0; background:#E1F5FE;
  border-radius:.75rem; padding:.6rem .95rem; font-size:.95rem;
}
.pxc_info summary { cursor:pointer; font-weight:700; color:#01579B; }
.pxc_info_inhalt { padding:.55rem 0 .1rem; }
.pxc_info_inhalt p { margin:.2rem 0; line-height:1.55; color:var(--grey600-color); }
.pxc_done { text-align:center; background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.2rem 1rem; }
.pxc_sterne { font-size:2.3rem; letter-spacing:.18em; margin:.3rem 0; color:var(--yellow600-color); }
@media (max-width:640px){
  .pxc_pixelwrap { --pxc_zelle:26px; }
  .pxc_code { width:5.2rem; font-size:.85rem; }
  .pxc_aufgabe { font-size:1.1rem; }
  .pxc_binaer { font-size:1.15rem; }
  .pxc_controls { margin-left:0; }
  /* Die acht Lampen sollen auch auf dem Handy EINE Reihe bleiben - sonst
     bricht das Feld um und man verliert den Vergleich mit der Stellenwert-
     reihe 128, 64, 32, ... Gemessen bei 390 px: 8 x 2.3 rem + 7 x .22 rem
     = 319 px bei 334 px Platz. */
  .pxc_lampen { gap:.22rem; }
  .pxc_bit { min-width:2.3rem; padding:.4rem .2rem .3rem; gap:.2rem; }
  .pxc_lampe { width:1.1rem; height:1.1rem; }
  .pxc_stelle { font-size:.68rem; }
}
@media (max-width:370px){
  /* Sehr schmale Geraete: noch einmal kleiner, sonst reisst es doch um. */
  .pxc_lampen { gap:.15rem; }
  .pxc_bit { min-width:1.9rem; padding:.35rem .1rem .25rem; }
  .pxc_lampe { width:.95rem; height:.95rem; }
  .pxc_stelle { font-size:.62rem; }
}
@media (prefers-reduced-motion:reduce){
  .pxc_pulse, .pxc_leuchtet { animation:none; }
}
html[data-theme="dark"] .pxc_bit { background:var(--alt-div-color); }
html[data-theme="dark"] .pxc_bit.pxc_an { border-color:var(--yellow600-color); }
html[data-theme="dark"] .pxc_zelle { background:var(--alt-div-color); border-color:var(--grey600-color); }
html[data-theme="dark"] .pxc_msg_ok { color:#A5D6A7; }
html[data-theme="dark"] .pxc_msg_err { color:#FF8A80; }
html[data-theme="dark"] .pxc_hilfe { background:#1F3A22; }
html[data-theme="dark"] .pxc_anleitung { background:#1F3A22; }
html[data-theme="dark"] .pxc_info { background:#12303F; }
html[data-theme="dark"] .pxc_info summary { color:#8FD3F4; }
html[data-theme="dark"] .pxc_info_inhalt p { color:#CFD8DC; }

/* ---------- Minus-Metro - alle Styles mit Praefix metro_ ---------- */
/* Negative Zahlen: U-Bahn faehrt auf dem Zahlenstrahl, Start + Fahrt = Ziel.
   Spiel im Mittelpunkt (Regel 3.13.8): schlanke Titelzeile, Erklaertext in
   der blauen Info-Box unter dem Spiel (wie .bruecke_info). */
.jupi_intro.metro_titel { margin:.2rem auto .9rem; padding:.4rem 1rem 0; }
.metro_info { margin-top:1rem; }
.metro_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.metro_info_inhalt { padding:.7rem .9rem .2rem; }
.metro_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.metro_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}
.metro_merkwissen {
  margin:0 0 .9rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem;
  padding:.8rem 1rem;
}
.metro_merkwissen summary { cursor:pointer; font-weight:700; }
.metro_merkwissen ul { margin:.6rem 0 .3rem; padding-left:1.3rem; }
.metro_merkwissen li { margin:.25rem 0; }
.metro_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.metro_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.metro_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.metro_stat span {
  font-size:1.35rem; font-weight:800; color:var(--green600-color);
}
.metro_controls {
  margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap;
}
.metro_controls label { font-weight:700; font-size:.9rem; }
/* Gleis: die Bahn rueckt mit jeder geloesten Aufgabe weiter */
.metro_gleis {
  position:relative; margin:0 0 1.1rem; padding:.5rem .6rem .6rem;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.metro_bahn {
  position:absolute; bottom:1.7rem; left:0; font-size:2.1rem; z-index:2;
  transition:left .6s ease; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.metro_schiene {
  position:relative; height:14px; border-radius:999px;
  background:var(--grey50-color); border:2px solid var(--grey400-color);
  overflow:hidden;
}
.metro_fortschritt {
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, #039BE5, #43A047); transition:width .6s ease;
}
.metro_endstation {
  position:absolute; right:.9rem; bottom:1.45rem; font-size:1.7rem;
}
/* Aufgaben-Karte mit Zahlenstrahl */
.metro_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.metro_task_label {
  margin:0 0 .6rem; font-weight:700;
  color:var(--grey600-color); font-size:.92rem;
}
.metro_aufgabe {
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--grey50-color); border:3px dashed var(--grey400-color);
  border-radius:1rem; padding:1rem .9rem;
  font-size:1.12rem; line-height:1.5;
}
.metro_icon { flex:none; }
.metro_rechnung { font-size:1.5rem; font-weight:800; letter-spacing:.02em; }
.metro_strahl { margin-top:.9rem; }
.metro_strahl_leiste {
  position:relative; height:2.6rem; border-radius:999px;
  background:linear-gradient(90deg, #B3E5FC 0 50%, #C8E6C9 50% 100%);
  border:2px solid var(--grey400-color);
}
.metro_strahl_null {
  position:absolute; top:-4px; bottom:-4px; width:4px; left:50%;
  background:var(--grey600-color); border-radius:2px;
}
.metro_strahl_null::after {
  content:"0"; position:absolute; top:-1.35rem; left:50%;
  transform:translateX(-50%); font-size:.8rem; font-weight:800;
  color:var(--grey600-color);
}
.metro_zug {
  position:absolute; bottom:.1rem; font-size:1.6rem; z-index:2;
  transform:translateX(-50%); transition:left .5s ease;
}
.metro_startpunkt {
  position:absolute; bottom:.78rem; width:.85rem; height:.85rem;
  border-radius:50%; background:#039BE5; border:2px solid #01579B;
  transform:translateX(-50%);
}
.metro_zug svg, .metro_bahn svg, .metro_endstation svg { display:block; }
.metro_zeile {
  display:flex; gap:.6rem; align-items:center;
  margin-top:1rem; flex-wrap:wrap;
}
.metro_eingabe {
  flex:1 1 10rem; min-width:8rem; font-size:1.3rem; font-weight:700;
  padding:.55rem .8rem; border:3px solid var(--grey400-color);
  border-radius:.8rem; background:var(--ct-color); color:inherit;
}
.metro_eingabe:focus-visible {
  outline:3px solid var(--link-color); outline-offset:1px;
}
.metro_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.metro_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; }
.metro_msg_ok { color:var(--link-color); }
.metro_msg_err { color:var(--red600-color); }
.metro_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.metro_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.metro_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.metro_sterne { font-size:2rem; margin-bottom:1rem; }
@media (max-width:600px) {
  .metro_panel { padding:.7rem .8rem; }
  .metro_controls { margin-left:0; }
  .metro_aufgabe { font-size:1.02rem; padding:.85rem .7rem; }
  .metro_rechnung { font-size:1.3rem; }
}
html[data-theme="dark"] .metro_aufgabe { background:var(--alt-div-color); }
html[data-theme="dark"] .metro_schiene { background:var(--alt-div-color); }
html[data-theme="dark"] .metro_msg_err { color:#FF8A80; }
html[data-theme="dark"] .metro_info summary { background:#102631; color:#81D4FA; }

/* ---------- Notenfall - alle Styles mit Praefix nf_ ---------- */
/* Notenlesen als Falling-Notes-Spiel: Noten rutschen auf einem echten
   Notenlinien-System auf die Trefferzone zu, Buchstabentasten C-H treffen.
   Spiel im Mittelpunkt (Regel 3.13.8): schlanke Titelzeile, Erklaertext in
   der blauen Info-Box unter dem Spiel (wie .bruecke_info). */
.jupi_intro.nf_titel { margin:.2rem auto .9rem; padding:.4rem 1rem 0; }
.nf_info { margin-top:1rem; }
.nf_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.nf_info_inhalt { padding:.7rem .9rem .2rem; }
.nf_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.nf_lernziel {
  background:var(--grey50-color); border-left:4px solid #8E24AA;
  border-radius:.5rem; padding:.55rem .75rem;
}
.nf_merkwissen {
  margin:0 0 .9rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem;
  padding:.8rem 1rem;
}
.nf_merkwissen summary { cursor:pointer; font-weight:700; }
.nf_merkwissen ul { margin:.6rem 0 .3rem; padding-left:1.3rem; }
.nf_merkwissen li { margin:.25rem 0; }
.nf_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.nf_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.nf_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.nf_stat span {
  font-size:1.35rem; font-weight:800; color:#8E24AA;
}
.nf_controls {
  margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap;
}
.nf_controls label { font-weight:700; font-size:.9rem; }
/* Spielfeld mit Overlay (Start + Ergebnis liegen auf dem Canvas).
   Hintergrund im Nachthimmel-Indigo, damit der Rahmen mit dem
   Canvas-Verlauf verschmilzt. */
.nf_stage {
  position:relative; background:#1A2B6B; border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.8rem;
  overflow:hidden;
}
.nf_canvas {
  display:block; width:100%; height:auto; touch-action:none;
  border-radius:.7rem;
}
.nf_overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  gap:.6rem; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  background:rgba(21,28,74,0.86); border-radius:.7rem;
}
/* Falle aus dem DB-Simulator: display:flex darf das hidden-Attribut
   nicht besiegen */
.nf_overlay[hidden] { display:none; }
.nf_overlay h3 { margin:0; font-size:1.6rem; color:#FFD54F; }
.nf_overlay p { margin:0 0 .4rem; max-width:34rem; font-size:1.02rem;
  line-height:1.5; color:#C5CAE9; }
.nf_overlay_sterne { font-size:2.2rem; }
/* Konfetti bei 2+ Sternen (nur transform/opacity, JS ehrt reduced-motion) */
.nf_konfetti {
  position:absolute; top:-12px; width:10px; height:14px;
  border-radius:2px; opacity:.9; pointer-events:none;
  animation:nf_fallen linear forwards;
}
@keyframes nf_fallen {
  to { transform:translateY(115vh) rotate(540deg); opacity:.4; }
}
@media (prefers-reduced-motion: reduce) {
  .nf_konfetti { display:none; }
}
@media (max-width:600px) {
  .nf_panel { padding:.7rem .8rem; }
  .nf_controls { margin-left:0; }
  .nf_stage { padding:.45rem; }
}
html[data-theme="dark"] .nf_info summary { background:#102631; color:#81D4FA; }

/* ---------- Spiel im Mittelpunkt: Nachruestung aelterer Spiele ---------- */
/* Regel 3.13.8: schlanke Titelzeile ueber dem Spiel, Erklaertext in der blauen
   ℹ️-Info-Box unter dem Spiel (Muster .bruecke_info / .metro_info) - plus
   Start-Overlay als Start-Menue. Die Klassennamen behalten
   den je-Spiel-Praefix (tiptest_, bruch_, prozent_, winkel_
   ek_, uhr_, waage_, vm_, satzbau_), die gemeinsamen Regeln stehen hier
   gebuendelt. Neue Praefixe einfach in die Selector-Gruppen aufnehmen. */

/* Schlanke Titelzeile: nur Icon + Spielname */
.jupi_intro.jupi_titel_kompakt { margin:.2rem auto .9rem; padding:.4rem 1rem 0; }

/* Buehne + Start-Overlay: deckt das Spielfeld ab, bis ▶ Start geklickt wird.
   Achtung: [hidden] muss gegen display:flex gewinnen (Falle aus jp-simulator). */
.jupi_start_stage { position:relative; }
.jupi_startoverlay {
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; background:rgba(8,16,31,.84); backdrop-filter:blur(4px);
  color:#fff; text-align:center; padding:1.5rem; border-radius:1rem;
}
.jupi_startoverlay[hidden] { display:none; }
.jupi_startoverlay h3 { font-size:clamp(1.3rem, 4vw, 1.9rem); margin:0; }
.jupi_startoverlay p { max-width:32rem; margin:0; color:#cfe1f5; font-size:.95rem; }

/* Hilfe-Aufklapper per ❓-Knopf (Muster .uhr_hilfe aus Zeitmeister) */
.satzbau_hilfe, .ww_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.satzbau_hilfe h3, .ww_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.satzbau_hilfe ul, .ww_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.satzbau_hilfe li, .ww_hilfe li { margin:.25rem 0; }
html[data-theme="dark"] .satzbau_hilfe, html[data-theme="dark"] .ww_hilfe {
  background:var(--green100-color);
}

/* Blaue ℹ️-Info-Box unter dem Spiel - ein Praefix je Spiel */
.bruch_info, .prozent_info,
.ek_info, .uhr_info, .waage_info, .vm_info, .satzbau_info, .ww_info {
  margin-top:1rem;
}
.bruch_info summary,
.prozent_info summary,
.ek_info summary, .uhr_info summary, .waage_info summary,
.vm_info summary, .satzbau_info summary, .ww_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.bruch_info_inhalt,
.prozent_info_inhalt,
.ek_info_inhalt, .uhr_info_inhalt, .waage_info_inhalt,
.vm_info_inhalt, .satzbau_info_inhalt, .ww_info_inhalt { padding:.7rem .9rem .2rem; }
.bruch_info_inhalt p,
.prozent_info_inhalt p,
.ek_info_inhalt p, .uhr_info_inhalt p, .waage_info_inhalt p,
.vm_info_inhalt p, .satzbau_info_inhalt p, .ww_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.bruch_lernziel,
.prozent_lernziel,
.ek_lernziel, .uhr_lernziel, .waage_lernziel,
.vm_lernziel, .satzbau_lernziel, .ww_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}
html[data-theme="dark"] .bruch_info summary, html[data-theme="dark"] .prozent_info summary,
html[data-theme="dark"] .ek_info summary, html[data-theme="dark"] .uhr_info summary,
html[data-theme="dark"] .waage_info summary, html[data-theme="dark"] .vm_info summary,
html[data-theme="dark"] .satzbau_info summary, html[data-theme="dark"] .ww_info summary {
  background:#102631; color:#81D4FA;
}




/* ---------- Komma-Retter - alle Styles mit Praefix koma_ ---------- */
/* Zeichensetzung: Saetze mit klickbaren Komma-Luecken.
   Spiel im Mittelpunkt (Regel 3.13.8): schlanke Titelzeile, Erklaertext in
   der blauen Info-Box unter dem Spiel (wie .bruecke_info). */
.koma_info { margin-top:1rem; }
.koma_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.koma_info_inhalt { padding:.7rem .9rem .2rem; }
.koma_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.koma_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}
.koma_merkwissen {
  margin:0 0 .9rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem;
  padding:.8rem 1rem;
}
.koma_merkwissen summary { cursor:pointer; font-weight:700; }
.koma_merkwissen ul { margin:.6rem 0 .3rem; padding-left:1.3rem; }
.koma_merkwissen li { margin:.25rem 0; }
.koma_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.koma_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.koma_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.koma_stat span {
  font-size:1.35rem; font-weight:800; color:var(--green600-color);
}
.koma_controls {
  margin-left:auto; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap;
}
.koma_controls label { font-weight:700; font-size:.9rem; }
/* Aufgaben-Karte mit dem Satz aus Wort- und Luecken-Kacheln */
.koma_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.koma_task_label {
  margin:0 0 .6rem; font-weight:700;
  color:var(--grey600-color); font-size:.92rem;
}
.koma_aufgabe {
  display:flex; flex-wrap:wrap; align-items:center;
  background:var(--grey50-color); border:3px dashed var(--grey400-color);
  border-radius:1rem; padding:1rem .9rem;
  font-size:1.18rem; line-height:2.1; font-weight:700;
}
.koma_wort { margin:.1rem .1rem; }
/* Gepunktete Luecke zwischen zwei Woertern - das Komma erscheint erst,
   wenn die Stelle ausgewaehlt ist (bzw. in der Loesung farbig markiert) */
.koma_luecke {
  min-width:1.9rem; height:2rem; margin:.1rem .18rem; padding:0 .2rem;
  font:inherit; font-weight:800; font-size:1.05rem; line-height:1;
  border:0; border-bottom:3px dotted var(--grey500-color);
  border-radius:.35rem; background:transparent; color:transparent;
  cursor:pointer; transition:background .12s ease, color .12s ease;
}
.koma_luecke:hover { background:#E1F5FE; }
.koma_luecke:focus-visible { outline:3px solid var(--link-color); outline-offset:1px; }
.koma_luecke[disabled] { cursor:default; }
.koma_gewaehlt, .koma_richtig {
  color:var(--link-color); background:#C8E6C9;
  border-bottom-color:var(--link-color);
}
.koma_falsch {
  color:var(--red600-color); background:#FFEBEE;
  border-bottom-color:var(--red600-color); text-decoration:line-through;
}
.koma_verpasst {
  color:#E65100; background:#FFF9C4; border-bottom-color:#F9A825;
}
.koma_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.koma_msg { min-height:2.2rem; margin-top:.7rem; font-weight:700; line-height:1.5; }
.koma_msg_ok { color:var(--link-color); }
.koma_msg_err { color:var(--red600-color); }
.koma_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.koma_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.koma_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.koma_sterne { font-size:2rem; margin-bottom:1rem; }
@media (max-width:600px) {
  .koma_panel { padding:.7rem .8rem; }
  .koma_controls { margin-left:0; }
  .koma_aufgabe { font-size:1.02rem; padding:.85rem .7rem; line-height:2.3; }
  .koma_luecke { min-width:1.7rem; height:1.8rem; }
}
html[data-theme="dark"] .koma_aufgabe { background:var(--alt-div-color); }
html[data-theme="dark"] .koma_luecke { border-bottom-color:#90A4AE; }
html[data-theme="dark"] .koma_luecke:hover { background:#102631; }
html[data-theme="dark"] .koma_gewaehlt,
html[data-theme="dark"] .koma_richtig { background:#1B5E20; color:#A5D6A7; }
html[data-theme="dark"] .koma_falsch { background:#4A1418; color:#FF8A80; }
html[data-theme="dark"] .koma_verpasst { background:#4E3B00; color:#FFE082; }
html[data-theme="dark"] .koma_msg_err { color:#FF8A80; }
html[data-theme="dark"] .koma_info summary { background:#102631; color:#81D4FA; }

/* ---------- Magnet Meister - alle Styles mit Praefix mm_ ---------- */
.mm_info { margin-top:.4rem; }
.mm_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.mm_info_inhalt { padding:.7rem .9rem .2rem; }
.mm_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.mm_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}
.mm_merkwissen {
  margin:0 0 .9rem; background:var(--grey50-color);
  border:2px dashed var(--grey400-color); border-radius:1rem;
  padding:.8rem 1rem;
}
.mm_merkwissen summary { cursor:pointer; font-weight:700; }
.mm_merkwissen ul { margin:.6rem 0 .3rem; padding-left:1.3rem; }
.mm_merkwissen li { margin:.25rem 0; }
/* Punkte-Leiste mit Modus- und Stufen-Wahl */
.mm_panel {
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:.7rem .9rem; margin:0 0 1rem;
}
.mm_stat { text-align:center; min-width:3.6rem; }
.mm_stat label {
  display:block; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--grey600-color);
}
.mm_stat span { font-size:1.2rem; font-weight:800; }
.mm_controls {
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center;
  margin-left:auto;
}
/* Spielfeld: Frage, Buehne (SVG), Antwort-Knoepfe */
.mm_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:1.1rem 1rem 1rem; margin:0 0 1.1rem;
}
.mm_task_label {
  margin:.1rem 0 .5rem; font-size:.85rem; font-weight:700;
  color:var(--grey600-color);
}
.mm_aufgabe { margin:.2rem 0 .8rem; font-size:1.1rem; line-height:1.6; }
.mm_buehne { text-align:center; margin:.2rem 0 .9rem; }
.mm_buehne svg { max-width:100%; height:auto; }
/* Pol-Duell-Auflösung: Magnete rücken zusammen oder weichen zurück */
.mm_l_zus { transform:translateX(20px); animation:mm_l_zus_a .45s ease-out; }
.mm_r_zus { transform:translateX(-20px); animation:mm_r_zus_a .45s ease-out; }
.mm_l_weg { transform:translateX(-16px); animation:mm_l_weg_a .45s ease-out; }
.mm_r_weg { transform:translateX(16px); animation:mm_r_weg_a .45s ease-out; }
@keyframes mm_l_zus_a { from { transform:translateX(-16px); }
  to { transform:translateX(20px); } }
@keyframes mm_r_zus_a { from { transform:translateX(16px); }
  to { transform:translateX(-20px); } }
@keyframes mm_l_weg_a { from { transform:translateX(20px); }
  to { transform:translateX(-16px); } }
@keyframes mm_r_weg_a { from { transform:translateX(-20px); }
  to { transform:translateX(16px); } }
@media (prefers-reduced-motion: reduce) {
  .mm_l_zus, .mm_r_zus, .mm_l_weg, .mm_r_weg { animation:none; }
}
.mm_karte {
  display:inline-block; margin:.6rem 0 0; padding:.7rem 1.4rem;
  font-size:1.25rem; font-weight:800;
  background:var(--grey50-color); border:2px solid var(--grey400-color);
  border-radius:.9rem;
}
.mm_antworten {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:.6rem; margin:.2rem 0 .2rem;
}
.mm_ant {
  padding:.8rem .7rem; font-size:1.02rem; font-weight:700;
  background:#FFFFFF; color:#212121;
  border:2px solid var(--grey400-color); border-radius:.9rem;
  cursor:pointer; min-height:3rem;
}
.mm_ant:hover:not(:disabled) { border-color:var(--link-color); }
.mm_ant:disabled { cursor:default; opacity:.85; }
.mm_ant.mm_ok {
  background:#E8F5E9; border-color:var(--link-color); color:#1B5E20;
}
.mm_ant.mm_err {
  background:#FFEBEE; border-color:var(--red600-color); color:#B71C1C;
}
.mm_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.mm_msg { min-height:2.2rem; margin-top:.7rem; font-weight:700; line-height:1.5; }
.mm_msg_ok { color:var(--link-color); }
.mm_msg_err { color:var(--red600-color); }
.mm_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.mm_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.mm_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.mm_sterne { font-size:2rem; margin-bottom:1rem; }
@media (max-width:600px) {
  .mm_panel { padding:.7rem .8rem; }
  .mm_controls { margin-left:0; }
  .mm_aufgabe { font-size:1.02rem; }
}
/* grey50 kippt im Dark Mode auf dunkel (#1A1A1A) - der Fragetext braucht
   daher eine feste helle Farbe, sonst ist die Frage unlesbar */
html[data-theme="dark"] .mm_aufgabe { color:#ECEFF1; }
html[data-theme="dark"] .mm_karte { background:var(--alt-div-color); }
html[data-theme="dark"] .mm_ant { background:var(--alt-div-color); color:#ECEFF1; }
html[data-theme="dark"] .mm_ant.mm_ok { background:#1B5E20; color:#A5D6A7; }
html[data-theme="dark"] .mm_ant.mm_err { background:#4A1418; color:#FF8A80; }
html[data-theme="dark"] .mm_msg_err { color:#FF8A80; }
html[data-theme="dark"] .mm_info summary { background:#102631; color:#81D4FA; }

/* ---------- Sprachwahl (i18n, DaZ) ----------
   🌐-Umschalter im Header, Stil wie der Dark-Mode-Schalter: halbtransparent
   auf dem gruenen Header-Verlauf, helle Schrift, Pillenform. Theme-Schalter
   und Sprachwahl stehen zusammen in .jupi_werkzeuge (rechte Header-Gruppe,
   damit das Jupi-Logo mittig bleibt); ohne Gruppe wirkt der Theme-Schalter
   wie bisher einzeln (statische Header-Kopien der Ordner-Spiele). */
.jupi_werkzeuge { display:flex; align-items:center; gap:.45rem; flex-shrink:0; }
.jupi_sprachen_wahl { display:inline-flex; align-items:center; gap:.3rem; }
.jupi_sprachen_icon { font-size:1rem; line-height:1; }
.jupi_sprachen_select {
  font: inherit; font-size:.85rem; color:#fff; cursor:pointer;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:.28rem .6rem; max-width:17rem;
}
.jupi_sprachen_select:hover { background: rgba(255,255,255,.26); }
.jupi_sprachen_select:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.jupi_sprachen_select option { color:#212121; background:#fff; }
@media (max-width:600px) {
  .jupi_sprachen_select { font-size:.78rem; max-width:12rem; padding:.2rem .45rem; }
}

/* ---------- English Clock & Numbers (englishclock.php) ---------- */
/* Uhrzeit auf Englisch lesen + englische Zahlen hoeren.
   Buehne und Antwort-Knoepfe folgen dem Zeitmeister-Muster (uhr_*),
   die Info-Box dem blauen bruecke_info-Muster. */
.ec_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.ec_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.ec_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.ec_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.ec_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.ec_controls label { font-weight:700; font-size:.9rem; }

/* Hilfe-Kasten mit Merksaetzen (gruen, wie uhr_hilfe) */
.ec_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.ec_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.ec_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.ec_hilfe li { margin:.25rem 0; }

/* Buehne mit der Uhr */
.ec_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}
.ec_task_label { margin:0 0 .7rem; font-weight:700; color:var(--grey600-color);
  font-size:1rem; text-align:center; }
.ec_uhr_box { text-align:center; }
.ec_uhr_box svg { width:100%; max-width:260px; height:auto; }

/* Antwort-Knoepfe: englischer Satz gross, deutsche Hilfe klein darunter */
.ec_antworten { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.ec_btn {
  flex:1 1 calc(50% - .35rem); min-height:72px; cursor:pointer;
  border:none; border-radius:1rem; color:#FFFFFF;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  transition:transform .1s, filter .1s;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; padding:.6rem .5rem;
}
.ec_btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.ec_btn:active:not(:disabled) { transform:translateY(1px); }
.ec_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.ec_btn:disabled { cursor:default; opacity:.85; }
.ec_satz { font-size:1.12rem; font-weight:800; line-height:1.25; }
.ec_deutsch { font-size:.85rem; font-weight:600; opacity:.92; }
.ec_btn_right { outline:4px solid var(--link-color); outline-offset:3px; }
.ec_btn_wrong { opacity:.55; animation:artikel_shake .35s; }
.ec_btn_tipp { outline:4px dashed var(--yellow600-color); outline-offset:3px; }

.ec_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.ec_msg { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }
.ec_msg_ok { color:var(--link-color); }
.ec_msg_err { color:var(--red600-color); }

/* Rundenende */
.ec_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem;
}
.ec_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.ec_done_uhr { font-size:3rem; margin:.2rem 0; }
.ec_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.ec_sterne { font-size:2rem; margin-bottom:.8rem; }

/* Info-Box unter dem Spiel (blau, wie bruecke_info) */
.ec_info { margin-top:1rem; }
.ec_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.ec_info_inhalt { padding:.7rem .9rem .2rem; }
.ec_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.ec_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}

/* Handy */
@media (max-width:600px) {
  .ec_panel { padding:.7rem .8rem; }
  .ec_controls { margin-left:0; }
  .ec_btn { flex:1 1 100%; }
}

/* Dark Mode: Zifferblatt bleibt weiss (wie ein Bild), Fehlermeldung hellrot */
html[data-theme="dark"] .ec_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .ec_msg_err { color:#FF8A80; }
html[data-theme="dark"] .ec_info summary { background:#102631; color:#81D4FA; }

/* ============================================================
   ---------- Funktions-Kunst (funktionskunst.php) ----------
   Bilder aus Funktionsgraphen: Galerie + Zeichen-Sandbox.
   Praefix fk_ - das Koordinatensystem bleibt im Dark Mode hell
   (wie ein Arbeitsblatt, Muster Zifferblatt von Zeitmeister).
   ============================================================ */
.fk_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.fk_controls { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.fk_controls label { font-weight:700; font-size:.9rem; }

.fk_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.fk_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.fk_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.fk_hilfe li { margin:.25rem 0; }

.fk_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
}

/* Links das Koordinatensystem, rechts die Steuerung - im Handy untereinander */
.fk_layout {
  display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(230px, 1fr);
  gap:1.1rem; align-items:start;
}
.fk_canvas_box { min-width:0; text-align:center; }
.fk_canvas {
  width:100%; max-width:620px; aspect-ratio:1/1; display:block; margin:0 auto;
  touch-action:none; border-radius:.6rem; cursor:crosshair;
}

.fk_seite { display:flex; flex-direction:column; gap:.7rem; min-width:0; }
.fk_bild_kopf {
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
}
.fk_bild_kopf h3 { margin:0; font-size:1.15rem; color:var(--green600-color); }
.fk_bild_text {
  margin:.2rem 0 .6rem; font-size:.93rem; line-height:1.55;
  color:var(--grey600-color);
}

.fk_btns_row { display:flex; flex-wrap:wrap; gap:.5rem; }
.fk_btns_row .jupi_btn { font-size:.88rem; padding:.45rem .8rem; }

.fk_werkzeug_label { margin:.1rem 0 .3rem; font-weight:700; font-size:.9rem;
  color:var(--grey600-color); }
.fk_werkzeuge { display:flex; flex-wrap:wrap; gap:.4rem; }
.fk_werkzeug { font-size:.88rem; padding:.42rem .7rem; }
.fk_werkzeug_aktiv {
  outline:3px solid var(--link-color); outline-offset:2px; font-weight:700;
}
.fk_farben { display:flex; flex-wrap:wrap; gap:.45rem; }
.fk_farbe_btn {
  width:2rem; height:2rem; border-radius:50%; border:3px solid #FFFFFF;
  box-shadow:0 0 0 2px rgba(0,0,0,.15); cursor:pointer; padding:0;
}
.fk_farbe_btn:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.fk_farbe_aktiv { box-shadow:0 0 0 3px var(--green600-color); transform:scale(1.12); }
.fk_hinweis {
  margin:.4rem 0 .1rem; font-weight:700; font-size:.92rem;
  color:var(--green600-color); min-height:1.3rem;
}

/* Die Funktionsliste: Farb-Dot + Gleichung */
.fk_liste { list-style:none; margin:.2rem 0; padding:0;
  display:flex; flex-direction:column; gap:.35rem; max-height:22rem;
  overflow-y:auto; }
.fk_zeile {
  display:flex; align-items:center; gap:.55rem; padding:.4rem .6rem;
  background:var(--grey50-color); border-radius:.6rem; font-size:.88rem;
  line-height:1.35; min-height:2.1rem;
}
.fk_zeile[role="button"] { cursor:pointer; }
.fk_zeile[role="button"]:hover { filter:brightness(.97); }
.fk_zeile_aus { opacity:.42; text-decoration:line-through; }
.fk_zeile_sandbox { padding-right:.4rem; }
.fk_farbe {
  flex:0 0 1rem; width:1rem; height:1rem; border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.fk_gleich { flex:1; min-width:0; overflow-wrap:anywhere; }
.fk_weg {
  flex:0 0 auto; border:none; cursor:pointer; border-radius:.4rem;
  background:transparent; color:var(--red600-color); font-weight:800;
  padding:.15rem .45rem; font-size:.95rem;
}
.fk_weg:hover { background:rgba(229,57,53,.12); }

.fk_msg { min-height:1.6rem; margin-top:.7rem; font-weight:700;
  text-align:center; color:var(--link-color); }

/* Info-Box unter dem Spiel (blau, wie bei den anderen Spielen) */
.fk_info { margin-top:1rem; }
.fk_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.fk_info_inhalt { padding:.7rem .9rem .2rem; }
.fk_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.fk_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}

@media (max-width:700px) {
  .fk_layout { grid-template-columns:1fr; }
  .fk_liste { max-height:14rem; }
}

/* Dark Mode: Liste/Zeilen dunkel, Blatt bleibt hell (Arbeitsblatt-Optik) */
html[data-theme="dark"] .fk_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .fk_zeile { background:#1B2B38; color:#E3EDF5; }
html[data-theme="dark"] .fk_weg:hover { background:rgba(255,138,128,.15); }
html[data-theme="dark"] .fk_bild_text,
html[data-theme="dark"] .fk_hinweis { color:inherit; }
html[data-theme="dark"] .fk_info summary { background:#102631; color:#81D4FA; }
html[data-theme="dark"] .fk_lernziel { background:#14261C; color:#C8E6C9; }

/* ============================================================
   ---------- Kurven-Spur (kurvenspur.php) ----------
   Unsichtbaren Funktionsgraphen nachfahren: je naeher der Zeiger,
   desto gruen die Spur. Praefix ks_ - Koordinatensystem bleibt hell.
   ============================================================ */
.ks_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.ks_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.ks_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.ks_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.ks_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.ks_controls label { font-weight:700; font-size:.9rem; }

.ks_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.ks_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.ks_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.ks_hilfe li { margin:.25rem 0; }

/* Angabe über dem Blatt: welche Funktion wird nachgefahren?
   Die Formel selbst ist Lerninhalt und bleibt bewusst Deutsch. */
.ks_angabe {
  display:flex; flex-wrap:wrap; gap:.25rem 1rem;
  align-items:baseline; justify-content:center;
  margin:0 auto .7rem; max-width:760px;
}
.ks_angabe_label {
  font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.ks_angabe strong {
  font-size:1.5rem; font-weight:800; font-style:italic;
  color:#0D47A1; background:#E3F2FD;
  padding:.1rem 1rem; border-radius:.65rem;
}
.ks_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
  position:relative;
}
.ks_canvas {
  width:100%; max-width:760px; aspect-ratio:5/4; display:block; margin:0 auto;
  touch-action:none; border-radius:.6rem; cursor:crosshair;
}

/* Fortschritts-Reihe: 5 Kurven je Runde (Muster Geo-Koerper) */
.ks_fortschritt {
  display:flex; gap:.5rem; justify-content:center; margin:.8rem 0 0; padding:0;
  list-style:none;
}
.ks_fort_punkt {
  width:1.05rem; height:1.05rem; border-radius:50%;
  background:var(--grey200-color); box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
}
.ks_fort_aktuell { background:var(--yellow600-color); }
.ks_fort_gruen { background:var(--link-color); }
.ks_fort_gelb { background:var(--yellow600-color); }
.ks_fort_rot { background:var(--red600-color); }

.ks_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem;
  justify-content:center; }
.ks_msg { min-height:1.7rem; margin-top:.6rem; font-weight:700; text-align:center; }
.ks_msg_ok { color:var(--link-color); }
.ks_msg_err { color:var(--red600-color); }

/* Kurven-Ende: % + Weiter, Rundenende wie bei den anderen Spielen */
.ks_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem; margin-top:1rem;
}
.ks_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.ks_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.ks_sterne { font-size:2rem; margin-bottom:.8rem; }

/* Info-Box unter dem Spiel */
.ks_info { margin-top:1rem; }
.ks_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.ks_info_inhalt { padding:.7rem .9rem .2rem; }
.ks_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.ks_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}

@media (max-width:600px) {
  .ks_panel { padding:.7rem .8rem; }
  .ks_controls { margin-left:0; }
}

/* Dark Mode: Buehne/Boxen dunkel, das Blatt (Canvas) bleibt hell */
html[data-theme="dark"] .ks_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .ks_msg_err { color:#FF8A80; }
html[data-theme="dark"] .ks_info summary { background:#102631; color:#81D4FA; }
html[data-theme="dark"] .ks_lernziel { background:#14261C; color:#C8E6C9; }
html[data-theme="dark"] .ks_angabe strong { background:#102631; color:#81D4FA; }

/* [hidden] muss gegen display:flex gewinnen (Falle jp-simulator/einheitenkueche) */
.fk_btns_row[hidden], .ks_btns_row[hidden] { display:none; }

/* ============================================================
   ---------- Blockfall (blockfall.php) ----------
   Fallende Vierer-Blöcke stapeln, volle Reihen loesen auf.
   Praefix bf_ - der Schacht bleibt in beiden Themes Arcade-dunkel
   (Kontrast fuer alle Blockfarben), Panels folgen dem Theme.
   ============================================================ */
.bf_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.bf_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.bf_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.bf_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.bf_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.bf_controls label { font-weight:700; font-size:.9rem; }

.bf_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.bf_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.bf_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.bf_hilfe li { margin:.25rem 0; }

/* Buehne: Schacht links, Seitenleiste rechts - am Handy untereinander */
.bf_buehne {
  display:flex; gap:1rem; align-items:flex-start; justify-content:center;
}
.bf_schacht_wrap {
  position:relative; background:#0d2036; border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.18); padding:.7rem;
}
.bf_schacht_wrap canvas {
  display:block; border-radius:.6rem; touch-action:none;
  width:min(300px, 68vw); height:auto;
}
.bf_seite { display:flex; flex-direction:column; gap:.7rem; min-width:0; }
.bf_naechster {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.7rem .9rem; text-align:center;
}
.bf_naechster h3 { margin:.1rem 0 .4rem; font-size:1rem; color:var(--green600-color); }
.bf_naechster canvas { display:block; margin:0 auto; border-radius:.5rem; }
.bf_tasten_hint { font-size:.82rem; line-height:1.6; color:var(--grey600-color);
  margin:.2rem 0; text-align:center; }

/* Overlays ueber dem Schacht: Start, Pause, Rundenende */
.bf_overlay {
  position:absolute; inset:.7rem; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; border-radius:.6rem;
  background:rgba(13,32,54,.88); color:#FFFFFF; padding:1rem;
}
.bf_overlay[hidden] { display:none; }
.bf_overlay h3 { margin:0; font-size:1.6rem; }
.bf_overlay p { margin:.2rem 0; font-size:1.02rem; line-height:1.5; }
.bf_overlay_btns { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.bf_sterne { font-size:2rem; letter-spacing:.2em; color:var(--yellow600-color); }
.bf_best_neu { font-weight:800; color:var(--yellow600-color); }

/* Bildschirm-Tasten: gross genug fuer Finger (Regel 3.13.3) */
.bf_touch {
  display:flex; gap:.6rem; justify-content:center; margin-top:.9rem;
  flex-wrap:wrap;
}
.bf_touch button {
  min-width:3.4rem; min-height:3.2rem; font-size:1.4rem; cursor:pointer;
  border:none; border-radius:1rem; color:#FFFFFF;
  background:var(--lightblue600-color); box-shadow:0 4px 0 #0277BD;
  transition:transform .08s, filter .08s; touch-action:none; padding:.3rem .6rem;
}
.bf_touch button:hover { filter:brightness(1.08); }
.bf_touch button:active, .bf_touch button.is_halte {
  transform:translateY(2px); box-shadow:0 1px 0 #0277BD;
}
.bf_touch button:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }

.bf_meldung { min-height:1.7rem; margin-top:.7rem; font-weight:700; text-align:center; }

/* Info-Box unter dem Spiel (blau, wie bei den anderen Spielen) */
.bf_info { margin-top:1rem; }
.bf_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.bf_info_inhalt { padding:.7rem .9rem .2rem; }
.bf_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.bf_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}

@media (max-width:600px) {
  .bf_panel { padding:.7rem .8rem; }
  .bf_controls { margin-left:0; }
  .bf_buehne { flex-direction:column; align-items:center; }
  .bf_seite { flex-direction:row; align-items:center; }
  .bf_tasten_hint { display:none; }
}

/* Dark Mode: Hilfe/Info wie gewohnt, Schacht bleibt dunkel */
html[data-theme="dark"] .bf_hilfe { background:var(--green100-color); }
html[data-theme="dark"] .bf_info summary { background:#102631; color:#81D4FA; }
html[data-theme="dark"] .bf_lernziel { background:#14261C; color:#C8E6C9; }

/* ============================================================
   ---------- Sudoku (sudoku.php) ----------
   Zeilen, Spalten und Blöcke mit Ziffern füllen. Praefix sd_ -
   die Linienfarben des Bretts kommen aus lokalen Variablen,
   damit der Dark Mode nur zwei Schrauben drehen muss.
   ============================================================ */
.sd_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.sd_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.sd_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.sd_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.sd_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.sd_controls label { font-weight:700; font-size:.9rem; }

.sd_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.sd_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.sd_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.sd_hilfe li { margin:.25rem 0; }

.sd_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
  position:relative;
}

/* Das Brett: n*n Zellen als Knöpfe, dicke Linien um die Blöcke */
.sd_brett {
  --sd_linie_dick:#37474F; --sd_linie_duenn:#CFD8DC; --sd_zelle_bg:#FFFFFF;
  display:grid; width:min(100%, 24rem); margin:0 auto;
  border:3px solid var(--sd_linie_dick); border-radius:.45rem; overflow:hidden;
  background:var(--sd_zelle_bg); user-select:none;
}
.sd_zelle {
  position:relative; aspect-ratio:1/1; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:clamp(1rem, 4.2vw, 1.55rem); font-weight:700;
  color:#1565C0; background:var(--sd_zelle_bg); cursor:pointer;
  border-right:1px solid var(--sd_linie_duenn);
  border-bottom:1px solid var(--sd_linie_duenn);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.sd_rahmen_rechts { border-right:2.5px solid var(--sd_linie_dick); }
.sd_rahmen_unten { border-bottom:2.5px solid var(--sd_linie_dick); }
.sd_rand_rechts { border-right:none; }
.sd_rand_unten { border-bottom:none; }
.sd_vorgegeben { color:#263238; font-weight:800; cursor:default; }
.sd_aufgedeckt { color:#2E7D32; }
.sd_peers { background:#EEF3EE; }
.sd_gleich { background:#DCEFD9; }
.sd_gewaehlt { background:#C8E6C9; box-shadow:inset 0 0 0 2.5px var(--link-color); }
.sd_fehler { color:#E53935; background:#FDECEA; }

/* Notizen: kleine Ziffern über die ganze Zelle (3x3-Raster) */
.sd_notizen {
  position:absolute; inset:0; display:grid;
  grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr);
  pointer-events:none;
}
.sd_notizen span {
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(.42rem, 1.7vw, .62rem); font-weight:700;
  color:var(--grey600-color); visibility:hidden;
}
.sd_wert { position:relative; line-height:1; }

/* Ziffern-Leiste unter dem Brett */
.sd_ziffern {
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  max-width:24rem; margin:1rem auto 0;
}
.sd_ziffer {
  flex:1 1 2.6rem; max-width:3.4rem; min-height:2.9rem; padding:.25rem 0;
  border-radius:.7rem; border:2px solid var(--grey200-color);
  background:var(--ct-color); font-size:1.25rem; font-weight:800;
  color:var(--link-color); cursor:pointer;
}
.sd_ziffer:active { transform:scale(.93); }
.sd_ziffer_radier { color:#E53935; }

.sd_btns_row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem;
  justify-content:center; }
.sd_notiz_an { box-shadow:0 0 0 3px var(--yellow600-color); }
.sd_msg { min-height:1.7rem; margin-top:.6rem; font-weight:700; text-align:center; }
.sd_msg_ok { color:var(--link-color); }
.sd_msg_err { color:var(--red600-color); }

/* Rundenende wie bei den anderen Spielen */
.sd_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem; margin-top:1rem;
}
.sd_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.sd_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.sd_sterne { font-size:2rem; margin-bottom:.8rem; }

/* Info-Box unter dem Spiel */
.sd_info { margin-top:1rem; }
.sd_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.sd_info_inhalt { padding:.7rem .9rem .2rem; }
.sd_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.sd_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}

@media (max-width:600px) {
  .sd_panel { padding:.7rem .8rem; }
  .sd_controls { margin-left:0; }
}

/* Dark Mode: Linien und Zellen dunkel, Texte bleiben lesbar */
html[data-theme="dark"] .sd_brett {
  --sd_linie_dick:#90A4AE; --sd_linie_duenn:#455A64; --sd_zelle_bg:#102631;
}
html[data-theme="dark"] .sd_vorgegeben { color:#ECEFF1; }
html[data-theme="dark"] .sd_peers { background:#15242D; }
html[data-theme="dark"] .sd_gleich { background:#1B3A30; }
html[data-theme="dark"] .sd_gewaehlt { background:#1B4630; }
html[data-theme="dark"] .sd_fehler { color:#FF8A80; background:#3E2020; }
html[data-theme="dark"] .sd_msg_err { color:#FF8A80; }
html[data-theme="dark"] .sd_ziffer { border-color:#455A64; }
html[data-theme="dark"] .sd_info summary { background:#102631; color:#81D4FA; }
html[data-theme="dark"] .sd_lernziel { background:#14261C; color:#C8E6C9; }

/* [hidden] muss gegen display:flex gewinnen (Falle jp-simulator/einheitenkueche) */
.sd_btns_row[hidden], .sd_ziffern[hidden] { display:none; }
/* ============================================================
   ---------- Fliesen-Leger (fliesenleger.php) ----------
   Boden auslegen und Flaeche (a·b), Umfang (2·(a+b)), Wand-
   flaeche, Fliesenanzahl, Verschnitt und Materialkosten
   rechnen. Praefix fl_ - die Farben des Raums kommen aus
   lokalen Variablen, damit der Dark Mode nur umschalten,
   nicht ueberschreiben muss.
   ============================================================ */
.fl_panel {
  display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; align-items:center;
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.fl_stat { display:flex; flex-direction:column; min-width:4.3rem; }
.fl_stat label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey600-color);
}
.fl_stat span { font-size:1.35rem; font-weight:800; color:var(--green600-color); }
.fl_controls { margin-left:auto; display:flex; gap:.5rem; align-items:center;
  flex-wrap:wrap; }
.fl_controls label { font-weight:700; font-size:.9rem; }

.fl_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
}
.fl_hilfe h3 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.fl_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.fl_hilfe li { margin:.25rem 0; }

.fl_stage {
  background:var(--ct-color); border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1rem 1.1rem 1.2rem;
  position:relative;
}

/* Auftrag: Kunde + Frage, Vorlesen rechts daneben */
.fl_aufgabe { margin:0 0 .7rem; }
.fl_story { font-weight:700; font-size:1.08rem; margin:0 0 .25rem; }
.fl_frage_zeile { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
.fl_frage { margin:0; color:var(--grey600-color); }
.fl_kl_knopf {
  margin-left:auto; border:2px solid var(--grey200-color); border-radius:999px;
  background:var(--ct-color); padding:.2rem .7rem; font-size:.85rem; font-weight:700;
  color:var(--link-color); cursor:pointer; white-space:nowrap;
}

/* Fortschritt beim Legen: "6 von 12 m² gelegt" + Balken */
.fl_lege_status {
  display:flex; align-items:center; gap:.7rem; margin:0 0 .7rem;
  font-size:.92rem; font-weight:700; color:var(--grey600-color);
}
.fl_lege_status > span { white-space:nowrap; }
.fl_balken {
  flex:1; height:.62rem; background:var(--grey200-color);
  border-radius:999px; overflow:hidden;
}
.fl_balken > i {
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--green300-color),var(--green600-color));
  transition:width .18s ease;
}

/* Die Zeichnung: SVG mit dem Raum, Farben ueber lokale Variablen.
   Eine Zelle = 50 cm; die Fugen sind die Luecken zwischen den Kacheln,
   die schraffierten Ausschnitte sind Loch, Nische oder Säule. */
.fl_zeichnung { --fl-boden:#EAE2D4; --fl-fuge:#D3C8B4; --fl-loch:#C9C0AE;
  --fl-linie:#8a4a2f; --fl-masse:#17497f;
  --fl-kachel-a:#E07A5F; --fl-kachel-b:#F2CC8F; }
.fl_svg { display:block; width:100%; height:auto; margin:0 auto;
  touch-action:none; user-select:none; -webkit-user-select:none; }
.fl_svg:focus-visible { outline:3px solid var(--green200-color);
  outline-offset:4px; border-radius:.5rem; }
.fl_bodenflaeche { stroke:var(--fl-linie); stroke-width:1; stroke-opacity:.25; }
.fl_muster_boden { fill:var(--fl-boden); }
/* Fugenkreuz: Ober- und Linkkante jeder 50-cm-Zelle */
.fl_muster_fuge_linie { fill:none; stroke:var(--fl-fuge); stroke-width:1.6; }
.fl_lochflaeche { stroke:rgba(0,0,0,.14); stroke-width:1; }
.fl_muster_loch { fill:var(--fl-loch); }
.fl_muster_loch_linie { stroke:rgba(0,0,0,.16); stroke-width:3; }
.fl_ussenlinie { stroke:var(--fl-linie); stroke-width:3; stroke-linecap:round; }
/* Gelegte Fliesen: warme Kacheln mit schmaler Fuge dazwischen */
.fl_kachel { stroke:rgba(74,55,40,.22); stroke-width:.8; }
.fl_kachel_a { fill:var(--fl-kachel-a); }
.fl_kachel_b { fill:var(--fl-kachel-b); }
.fl_fliese_rahmen { fill:none; stroke:rgba(74,55,40,.5); stroke-width:2; }
.fl_kachel_neu { animation:fl_setzen .17s ease-out;
  transform-box:fill-box; transform-origin:center; }
@keyframes fl_setzen {
  from { transform:scale(.7); opacity:.25; }
  to   { transform:scale(1); opacity:1; }
}
/* Tastatur-Rahmen (Pfeiltasten bewegen ihn) */
.fl_cursor { fill:rgba(3,155,229,.16); stroke:var(--lightblue600-color);
  stroke-width:2.5; stroke-dasharray:6 4; }
/* Hinweis am Zeiger: ueber einer gelegten Fläche loescht man sie */
.fl_zeiger_weg { cursor:not-allowed; }
.fl_geist { fill:rgba(100,185,68,.30); stroke:#2f7d32; stroke-width:3;
  stroke-dasharray:8 6; }
.fl_geist_schlecht { fill:rgba(229,57,53,.22); stroke:#E53935; stroke-width:3;
  stroke-dasharray:8 6; }
.fl_geist_text { fill:#2f7d32; font-size:15px; font-weight:700; }
.fl_geist_text_schlecht { fill:#E53935; font-size:15px; font-weight:700; }
.fl_hoehe { stroke:var(--fl-masse); stroke-width:2.5; fill:var(--fl-masse); }
/* Halo hinter den Massen, damit sie auf jeder Kachel lesbar bleiben */
.fl_mass { fill:var(--fl-masse); font-size:15px; font-weight:700;
  paint-order:stroke fill; stroke:var(--ct-color); stroke-width:4px;
  stroke-linejoin:round; }

/* Verziehen, wenn Fliesen nicht passen (bei reduzierter Bewegung aus) */
.fl_ruetteln { animation:fl_ruetteln .18s ease; }
@keyframes fl_ruetteln {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-5px); }
  75% { transform:translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .fl_ruetteln { animation:none; }
  .fl_kachel_neu { animation:none; }
  .fl_balken > i { transition:none; }
}

/* Werkzeugzeile waehrend des Legens: Fliese zurueck, Rest fuellen, neu legen */
.fl_werkzeuge { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  justify-content:center; margin-top:.8rem; }

/* Antwortzeile: Eingabe + Pruefen + Tipp */
.fl_antwort { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  justify-content:center; margin-top:.9rem; }
.fl_eingabe {
  width:9rem; text-align:center; font-size:1.25rem; font-weight:700;
  padding:.45rem .5rem; border:2px solid var(--grey200-color);
  border-radius:.7rem; background:var(--ct-color); color:inherit;
}
.fl_eingabe:focus { outline:3px solid var(--green200-color); }
.fl_merke {
  margin-top:.8rem; background:var(--green50-color);
  border-left:4px solid var(--link-color); border-radius:.5rem;
  padding:.55rem .75rem; font-size:.98rem;
}
.fl_msg { min-height:1.7rem; margin-top:.6rem; font-weight:700; text-align:center; }
.fl_msg_ok { color:var(--link-color); }
.fl_msg_err { color:var(--red600-color); }
.fl_weiter_zeile { display:flex; justify-content:center; margin-top:.5rem; }

/* Rundenende wie bei den anderen Spielen */
.fl_done {
  background:var(--ct-color); border-radius:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08); padding:1.6rem 1rem; margin-top:1rem;
}
.fl_done h3 { margin:.2rem 0 .5rem; font-size:1.5rem; color:var(--link-color); }
.fl_done p { margin:.3rem 0 .8rem; font-size:1.05rem; }
.fl_sterne { font-size:2rem; margin-bottom:.8rem; }

/* Info-Box unter dem Spiel (Muster .bruecke_info) */
.fl_info { margin-top:1rem; }
.fl_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.fl_info_inhalt { padding:.7rem .9rem .2rem; }
.fl_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.fl_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}

/* [hidden] muss gegen display:flex/block gewinnen (Falle aus jp-simulator,
   einheitenkueche und sechs weiteren Spielen) */
.fl_antwort[hidden], .fl_weiter_zeile[hidden], .fl_aufgabe[hidden],
.fl_merke[hidden], .fl_hilfe[hidden], .fl_werkzeuge[hidden],
.fl_lege_status[hidden] { display:none; }

/* Dark Mode: Raum dunkel, Fliesen bleiben warm, Mass-Texte hell */
html[data-theme="dark"] .fl_zeichnung {
  --fl-boden:#22333C; --fl-fuge:#334B58; --fl-loch:#131E25; --fl-linie:#C8A88A;
  --fl-masse:#81D4FA; --fl-kachel-a:#C9603F; --fl-kachel-b:#D9AE6E;
}
html[data-theme="dark"] .fl_lochflaeche { stroke:rgba(255,255,255,.10); }
html[data-theme="dark"] .fl_muster_loch_linie { stroke:rgba(255,255,255,.10); }
html[data-theme="dark"] .fl_kachel { stroke:rgba(0,0,0,.35); }
html[data-theme="dark"] .fl_fliese_rahmen { stroke:rgba(255,255,255,.45); }
html[data-theme="dark"] .fl_kl_knopf { background:#102631; border-color:#455A64; }
html[data-theme="dark"] .fl_msg_err { color:#FF8A80; }
html[data-theme="dark"] .fl_info summary { background:#102631; color:#81D4FA; }
html[data-theme="dark"] .fl_lernziel { background:#14261C; color:#C8E6C9; }
html[data-theme="dark"] .fl_eingabe { border-color:#455A64; }

@media (max-width:600px) {
  .fl_panel { padding:.7rem .8rem; }
  .fl_controls { margin-left:0; }
  .fl_kl_knopf { margin-left:0; }
  .fl_eingabe { width:7.5rem; }
  .fl_lege_status { font-size:.85rem; }
}