/* ===== 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); }

/* Logo-Link ist eine Reihe: [Versions-Sticker] [jupi-Logo]. Der Sticker
   steht im Fluss (kein absolut), damit die Kopfzeile auf schmalen Fenstern
   umbricht statt zu ueberlappen; das BETA-Eck sitzt weiter am Bild. */
.jupi_logo_link { display:inline-flex; align-items:center; gap:.36rem; position:relative; transition: transform .16s; flex-shrink:0; text-decoration:none; }
.jupi_logo_link:hover { transform: scale(1.04) rotate(-1deg); }
.jupi_logo_link img {
  height:3rem; width:auto;
}
/* Status-Sticker an der Logo-Ecke (unten rechts), er sagt den Reifegrad der
   Plattform: das Dashboard traegt "Alpha", die Spielseiten "Beta" - welchen
   Text welche Seite bekommt, entscheidet jupi_header.html. Die Geometrie
   teilen sich beide Namen; .jupi_logo_beta bleibt als alter Klassenname
   stehen, denn ihn benutzen die statischen Header-Kopien der Ordner-Spiele. */
.jupi_logo_beta, .jupi_logo_sticker {
  position:absolute; right:-.7rem; bottom:-.3rem;
  font-size:.58rem; font-weight:800; letter-spacing:.12em;
  padding:.12rem .42rem; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transform:rotate(8deg);
  pointer-events:none;
}
/* Gelb = Beta (auch der alte Name) */
.jupi_logo_beta, .jupi_logo_sticker_beta {
  background:var(--yellow600-color); color:#5d4300;
  border:1px solid rgba(0,0,0,.15);
}
/* Rot/Pink = Alpha - dieselben Farben wie .card_status_alpha auf den Karten */
.jupi_logo_sticker_alpha {
  background:#FDE7E6; color:#B71C1C;
  border:1px solid #E53935;
}
html[data-theme="dark"] .jupi_logo_sticker_alpha {
  background:#3d1a18; color:#FF8A80; border-color:#E57373;
}
/* Versions-Sticker am jupi-Logo - nur auf dem Dashboard (jupi_header.html
   setzt ihn nur bei index.php ein). Er zeigt die ausgelieferte Fassung
   "v0.1.<Stand des Service Workers>" und steht LINKS neben dem Logo: rechts
   ist die Ecke vom BETA-Sticker belegt. Bewusst klein und ruhig. */
.jupi_logo_version {
  font-size:.55rem; font-weight:700; letter-spacing:.08em;
  font-variant-numeric: tabular-nums;
  color:#fff; background: rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.35);
  padding:.08rem .38rem; border-radius:999px;
  white-space:nowrap; pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* - 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);
}
/* ---------- Hinweis-Kaestchen (Dashboard, oben, wegklickbar) ---------- */
/* 🚧 + Status-Erklaerung in EINEM Kaestchen: Der Bernstein-Ton ist derselbe
   wie beim Beta-Etikett der Karten - "in Arbeit" ist sofort lesbar. */
.jupi_hinweise {
  max-width:44rem;
  margin:.5rem auto 0;
  padding:0 1rem;
}
.jupi_baustelle {
  margin:0;
  font-size:.88rem;
  line-height:1.55;
  color:#7a5c00;
}
/* Die drei Etiketten von den Karten, kurz erklaert. Die Farben sind 1:1 von
   .card_status_* uebernommen (hell + dunkel), damit Kinder die Marken auf
   den Karten wiedererkennen. */
.jupi_status_info {
  position:relative;
  margin:0;
  background:#FFF8E1;
  border:1px solid #F9A825;
  border-radius:.6rem;
  padding:.7rem 2.6rem .7rem .9rem;
  font-size:.88rem;
  line-height:1.5;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.jupi_status_info[hidden] { display:none; }
.jupi_status_titel { margin:.55rem 0 0; font-weight:700; color:#1b5e20; }
.jupi_status_liste {
  list-style:none;
  margin:.45rem 0 0;
  padding:0;
}
.jupi_status_liste li {
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:.3rem 0;
}
.jupi_status_marke {
  flex:none;
  min-width:5.4rem;
  text-align:center;
  border-radius:999px;
  padding:.12rem .55rem;
  font-size:.76rem;
  font-weight:700;
  white-space:nowrap;
}
.jupi_status_marke_prealpha { background:#EEEEEE; color:#555555; border:1px solid #BDBDBD; }
.jupi_status_marke_alpha { background:#FDE7E6; color:#B71C1C; border:1px solid #E53935; }
.jupi_status_marke_beta { background:#FFF3C4; color:#7a5c00; border:1px solid #FDD835; }
/* ✕ schliesst das ganze Kaestchen (Bedienziel 40 px wie auf den Spielleisten);
   inset-inline-end statt right, falls ein Ziel-Element mal RTL erbt. */
.jupi_status_zu {
  position:absolute;
  top:.3rem; right:.3rem; inset-inline-end:.3rem;
  width:2.5rem; height:2.5rem;
  border:1px solid #e8d48a;
  border-radius:.5rem;
  background:#fdf2cd;
  color:#7a5c00;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  padding:0;
  display:flex; align-items:center; justify-content:center;
}
.jupi_status_zu:hover { background:#f7e6a8; }

/* ---------- 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) - rueckt einen
   Stern breit nach links, damit der Favoriten-Stern in die Ecke passt */
.jupi_game_card .card_status {
  position:absolute; top:.8rem; right:3.2rem;
  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; }
/* Favoriten-Stern in der Karten-Ecke: antippen merkt das Spiel unter
   "Meine Spiele" (Script auf index.php fängt den Klick ab, bevor der
   Karten-Link reagiert). Der Zustand steht im aria-pressed. */
.jupi_game_card .card_fav {
  position:absolute; top:.65rem; right:.65rem; z-index:2;
  width:2.2rem; height:2.2rem; border-radius:999px;
  border:2px solid var(--grey300-color); background:rgba(255,255,255,.92);
  color:#9e9e9e; font-size:1.05rem; line-height:1;
  font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  transition:transform .12s, border-color .12s, color .12s, background .12s;
}
.jupi_game_card .card_fav:hover { transform:scale(1.1); border-color:#F9A825; color:#F9A825; }
.jupi_game_card .card_fav:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.jupi_game_card .card_fav.ist_favorit { color:#F9A825; border-color:#F9A825; background:#FFF6D9; }

/* 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) ---------- */
/* (.ww_panel ist am 10.10.2026 in das PWA-Paket wortwunder/styles.css
   umgezogen; .vm_panel ist am 11.10.2026 mit dem Vokabel-Memory-Paket nach
   vokabmemory/styles.css gewandert - AGENTS.md 3.10/3.13.) */

/* 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: die .rr_*-Regeln sind am 10.10.2026 in das
   eigenstaendige PWA-Paket raetselrakete/styles.css umgezogen (AGENTS.md 3.10/3.13). */

/* ---------- Vokabel-Memory: die .vm_*-Regeln sind am 11.10.2026 in das
   eigenstaendige PWA-Paket vokabmemory/styles.css umgezogen (AGENTS.md
   3.10, GUI 3.13 Typ 2 mit Hilfe-Modal statt der Info-Box unter dem Spiel). ---------- */

/* ---------- 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_logo_link { gap:.26rem; }
  .jupi_logo_version { font-size:.5rem; padding:.06rem .3rem; }
  .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; }
  .fu_topbar { border-radius:.8rem; }
  .fusion_canvaswrap { border-radius:.8rem; }
}


/* ---------- 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; }
/* Hinweis-Kaestchen (Farbton wie das dunkle Beta-Etikett, bernstein) */
html[data-theme="dark"] .jupi_status_info { background:#2b230e; border-color:#F9A825; color:#E0E0E0; box-shadow:none; }
html[data-theme="dark"] .jupi_baustelle { color:#FFE082; }
html[data-theme="dark"] .jupi_status_titel { color:#FFB74D; }
html[data-theme="dark"] .jupi_status_marke_prealpha { background:#333333; color:#CCCCCC; border-color:#757575; }
html[data-theme="dark"] .jupi_status_marke_alpha { background:#3d1a18; color:#FF8A80; border-color:#E57373; }
html[data-theme="dark"] .jupi_status_marke_beta { background:#3a2f10; color:#FFE082; border-color:#F9A825; }
html[data-theme="dark"] .jupi_status_zu { background:#3a2f10; border-color:#8a6d1a; color:#FFE082; }
html[data-theme="dark"] .jupi_status_zu:hover { background:#4a3c14; }
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"] .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: die Dark-Regeln sind am 10.10.2026 mit in das PWA-Paket
   wortwunder/styles.css umgezogen (AGENTS.md 3.10). */

/* Vokabel-Memory: die Dark-Regeln sind am 11.10.2026 mit in das PWA-Paket
   vokabmemory/styles.css umgezogen (AGENTS.md 3.10/3.13). */

/* 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;
}

/* ---------- 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; }

/* ---------- 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; margin-bottom:.7rem; }
.jupi_search_icon { font-size:1.2rem; }
#jupi_q {
  flex:1; font-size:1.05rem; padding:.65rem 1.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); }
/* Filter-Dropdowns: Beschriftungen wie bisher, Auswahl im Pillen-Look.
   Sortierung nutzt dasselbe Aussehen (Grundregel "chronologisch",
   AGENTS.md 3.1). */
.jupi_sortlabel { font-weight:800; font-size:.85rem; color:var(--grey600-color); }
.jupi_filterlabel { font-weight:800; font-size:.85rem;
  color:var(--grey600-color); margin-right:.15rem; }
.jupi_select {
  font-family:inherit; font-size:.9rem; font-weight:800; color:#1a1a1a;
  background:#fff; border:2px solid var(--grey300-color); border-radius:999px;
  padding:.4rem .6rem; min-height:2.5rem; cursor:pointer; max-width:100%;
  transition:border-color .12s;
}
.jupi_select:hover { border-color:var(--link-color); }
.jupi_select:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
.jupi_wahlreihe { display:flex; flex-wrap:wrap; gap:.5rem .95rem; align-items:center;
  margin-top:.15rem; }
.jupi_wahlgruppe { display:inline-flex; align-items:center; gap:.35rem; min-width:0; }
.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, Dropdowns je eine Zeile */
@media (max-width:600px) {
  .jupi_search { flex-wrap:wrap; }
  #jupi_q { flex:1 1 100%; }
  .jupi_wahlgruppe { width:100%; justify-content:space-between; }
  .jupi_wahlgruppe .jupi_select { flex:1; min-width:0; }
}

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

/* ---------- Startseite: Ueberrasch-mich-Knopf ---------- */
.jupi_lucky {
  display:inline-flex; align-items:center; gap:.35rem;
  border:2px solid var(--yellow600-color); background:#FFF6D9; color:#6b5200;
  border-radius:999px; padding:.4rem .85rem; font-size:.9rem; font-weight:800;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, transform .12s, border-color .12s;
}
.jupi_lucky:hover { transform:translateY(-1px); border-color:#F9A825; background:#FFF3C4; }
.jupi_lucky:focus-visible { outline:3px solid var(--yellow600-color); outline-offset:2px; }
/* 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: 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; }
/* 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);
}

/* ---------- Startseite: Meine Spiele (Favoriten) ---------- */
/* Zeile ueber dem Raster, gefuellt aus dem localStorage (Stern auf der
   Karte). Erscheint nur mit Favoriten und ohne aktiven Filter. */
.jupi_favoriten { margin:0 0 1.1rem; }
.jupi_favoriten h2 { font-size:1.15rem; margin:0 0 .55rem; }
.jupi_fav_grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:38rem) { .jupi_fav_grid { grid-template-columns:repeat(2,1fr); gap:1.1rem; } }
@media (min-width:64rem) { .jupi_fav_grid { grid-template-columns:repeat(3,1fr); gap:1.25rem; } }
/* Favoriten-Karten: goldener Ring als "hier gehoerst du"-Hinweis */
.jupi_fav_grid .jupi_game_card {
  border:2px solid #ffe082;
  box-shadow: 0 6px 20px rgba(249,168,37,.16);
}
/* Kompaktansicht: nur Icon + Name als schlanke Reihe (das JS wirft
   Beschreibung & Co. aus dem Klon). Rechts bleibt Platz fuer den Stern. */
.jupi_fav_grid .jupi_kompakt_karte,
.jupi_tages_grid .jupi_kompakt_karte {
  flex-direction:row; align-items:center; gap:.7rem;
  padding:.45rem 3.2rem .45rem .75rem;
}
.jupi_kompakt_karte .card_icon { font-size:1.4rem; flex:0 0 auto; }
.jupi_kompakt_karte .card_icon img {
  width:2.1rem; height:2.1rem; border-radius:.55rem; padding:.15rem;
}
.jupi_kompakt_karte h2 { font-size:.98rem; }
/* Pillen brauchen weniger Platz - vier nebeneinander auf breiten Fenstern */
@media (min-width:38rem) {
  .jupi_fav_grid, .jupi_tages_grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:52rem) {
  .jupi_fav_grid, .jupi_tages_grid { grid-template-columns:repeat(3,1fr); gap:.8rem; }
}
@media (min-width:74rem) {
  .jupi_fav_grid, .jupi_tages_grid { grid-template-columns:repeat(4,1fr); gap:.75rem; }
}

/* Dark Mode: Spiele des Tages + Meine Spiele + Karten-Chips */
html[data-theme="dark"] .jupi_lucky { background:#3a2f10; color:#FFE082; border-color:#F9A825; }
html[data-theme="dark"] .jupi_game_card .card_fav {
  background:rgba(38,50,58,.92); border-color:#546e7a; color:#90a4ae;
}
html[data-theme="dark"] .jupi_game_card .card_fav.ist_favorit {
  background:#3a2f10; border-color:#F9A825; color:#FFE082;
}
html[data-theme="dark"] .jupi_fav_grid .jupi_game_card { border-color:#F9A825; }
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; }




/* ---------- 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; }
/* ---------- 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; }

/* ---------- 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-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); color:#F5F5F5; border-color:var(--grey400-color); }
html[data-theme="dark"] .wbr_hoeren { background:var(--alt-div-color); color:#F5F5F5; border-color:var(--grey400-color); }
html[data-theme="dark"] .wbr_kachel { background:var(--alt-div-color); color:#F5F5F5; border-color:var(--grey400-color); }
html[data-theme="dark"] .wbr_kachel:hover:not(:disabled) { background:var(--alt-div-hover-color); border-color:var(--link-color); color:#FFFFFF; }
html[data-theme="dark"] .wbr_kachel:disabled { color:#9E9E9E; }
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; color:#F5F5F5; }
html[data-theme="dark"] .wbr_chip { background:#1F3A22; color:#C8E6C9; }
html[data-theme="dark"] .wbr_chip_err { background:#3a201e; color:#FF8A80; }
/* ---------- 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; die Minus-Metro ist am
   11.10.2026 mit samt ihren .metro_*-Regeln in das PWA-Paket minusmetro/
   umgezogen, GUI 3.13 Typ 2) - plus
   Start-Overlay als Start-Menue. Die Klassennamen behalten
   den je-Spiel-Praefix (tiptest_, bruch_, prozent_, winkel_
   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)
   (.ww_hilfe ist am 10.10.2026 mit ins PWA-Paket wortwunder/ gezogen -
   dort wohnt die Hilfe jetzt im ❓-Modal, GUI 3.13.4.) */
.satzbau_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 { margin:.1rem 0 .4rem; font-size:1.05rem; }
.satzbau_hilfe ul { margin:.2rem 0 .2rem; padding-left:1.2rem; }
.satzbau_hilfe li { margin:.25rem 0; }
html[data-theme="dark"] .satzbau_hilfe {
  background:var(--green100-color);
}

/* Blaue ℹ️-Info-Box unter dem Spiel - ein Praefix je Spiel
   (die .ww_info-/.ww_lernziel-Anteile sind am 10.10.2026 ins PWA-Paket
   wortwunder/ gezogen, AGENTS.md 3.10.) */
.prozent_info,
.uhr_info, .waage_info, .satzbau_info {
  margin-top:1rem;
}
.bruch_info summary,
.prozent_info summary,
.uhr_info summary, .waage_info summary, .satzbau_info summary {
  cursor:pointer; font-weight:700; padding:.5rem .8rem;
  background:#E1F5FE; border-radius:.7rem; color:#01579B;
}
.bruch_info_inhalt,
.prozent_info_inhalt,
.uhr_info_inhalt, .waage_info_inhalt, .satzbau_info_inhalt { padding:.7rem .9rem .2rem; }
.bruch_info_inhalt p,
.prozent_info_inhalt p,
.uhr_info_inhalt p, .waage_info_inhalt p, .satzbau_info_inhalt p {
  margin:.4rem 0; font-size:.98rem; line-height:1.6; color:var(--grey600-color);
}
.bruch_lernziel,
.prozent_lernziel,
.uhr_lernziel, .waage_lernziel, .satzbau_lernziel {
  background:var(--grey50-color); border-left:4px solid var(--lightblue600-color);
  border-radius:.5rem; padding:.55rem .75rem;
}
html[data-theme="dark"] .prozent_info summary,
html[data-theme="dark"] .uhr_info summary,
html[data-theme="dark"] .waage_info summary,
html[data-theme="dark"] .satzbau_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);
  /* Etwas schmaler seit der Kopfzeilen-Suche (23.10.2026): der Umschalter
     zeigt weiterhin Eigenname + deutschen Namen in Klammern ("Bosanski/
     Hrvatski/Srpski (Bosnisch/Kroatisch/Serbisch)" ist der längste).
     Abgeschnitten wird erst ganz rechts, das liest sich beim Öffnen der
     Liste trotzdem flüssig; das geschlossene Feld zeigt nur den kurzen
     Namen der gewählten Sprache (meist "Deutsch") und passt leicht. */
  border-radius:999px; padding:.28rem .6rem; max-width:13rem;
}
.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:10rem; padding:.2rem .45rem; }
}

/* ---------- Kopfzeilen-Suche (nur Dashboard, seit 23.10.2026) ----------
   Zweite, vereinfachte Suche oben rechts in der Jupi-Leiste, direkt neben
   der Sprachwahl - derselbe Glas-Pillen-Stil wie Theme-Schalter und
   Sprachwahl. Sie spiegelt nur das große Suchfeld der Filterleiste
   (#jupi_q, Verdrahtung in index.php); Dropdowns und Trefferzaehler
   bleiben dort. Auf Handys (<= 52rem) ist sie bewusst aus: dort sitzt
   die große Suche direkt unter der Kopfzeile. */
.jupi_kopf_suche {
  display:inline-flex; align-items:center; gap:.26rem;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:.24rem .65rem .24rem .55rem;
}
.jupi_kopf_suche_icon { font-size:.82rem; line-height:1; }
.jupi_kopf_suche input {
  font: inherit; font-size:.85rem; color:#fff; background:none;
  border:none; padding:0; width:9rem;
}
.jupi_kopf_suche input::placeholder { color:rgba(255,255,255,.78); }
.jupi_kopf_suche input:focus { outline:none; }
/* Der Fokus-Rahmen liegt auf der ganzen Pille, nicht nur im Eingabefeld */
.jupi_kopf_suche:focus-within {
  background: rgba(255,255,255,.28); outline:2px solid #fff; outline-offset:2px;
}
@media (max-width:52rem) { .jupi_kopf_suche { display:none; } }

/* ============================================================
   ---------- 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 (12.10.2026): samt allen .sd_*-Regeln in das eigenstaendige PWA-Paket sudoku/ umgezogen (GUI 3.13 Typ 2). */
/* ============================================================
   ---------- 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:.65rem 1.1rem; align-items:center;
  background:linear-gradient(135deg, var(--ct-color) 0%, #FAF5EC 100%);
  border:2px solid #E6D9C5; border-radius:1.1rem;
  box-shadow:0 4px 14px rgba(93,58,26,.08); padding:.85rem 1.15rem; margin:0 0 1.1rem;
}
.fl_stat {
  display:flex; flex-direction:column; min-width:4.4rem;
  background:rgba(255,255,255,.72); border:1px solid #EAE0CF;
  border-radius:.75rem; padding:.3rem .65rem;
}
.fl_stat label {
  font-size:.68rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grey600-color);
}
.fl_stat span { font-size:1.3rem; font-weight:800; color:var(--green600-color); line-height:1.2; }
.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_controls select {
  font-weight:700; border-radius:.6rem; border:2px solid #D9CBB5;
  padding:.32rem .6rem; background:var(--ct-color); color:inherit;
}

.fl_hilfe {
  background:var(--green50-color); border:2px solid var(--green200-color);
  border-radius:1rem; padding:.9rem 1.1rem; margin:0 0 1.1rem;
  box-shadow:0 3px 10px rgba(46,125,50,.08);
}
.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:2px solid #E6D9C5; border-radius:1.15rem;
  box-shadow:0 6px 20px rgba(93,58,26,.09); padding:1.05rem 1.15rem 1.25rem;
  position:relative; overflow:hidden;
}

/* Auftrag: Werkstatt-Klemmbrett mit Icon, Kunde + Frage, Vorlesen und Parameter-Chips */
.fl_aufgabe {
  margin:0 0 .85rem; padding:.75rem .95rem;
  background:linear-gradient(135deg, #FBF7F0 0%, #F4ECE0 100%);
  border:1.5px solid #E2D4BE; border-left:5px solid #D86C4F;
  border-radius:.85rem; box-shadow:0 2px 6px rgba(93,58,26,.05);
}
.fl_auftrag_kopf {
  display:flex; align-items:center; gap:.65rem; margin:0 0 .3rem;
}
.fl_auftrag_icon {
  width:2.2rem; height:2.2rem; flex:0 0 2.2rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:#FFFDF9; border:1.5px solid #DFCGB6; border-color:#DFCEB6;
  border-radius:.6rem; padding:.2rem; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.fl_auftrag_icon svg { width:100%; height:100%; display:block; }
.fl_story { font-weight:800; font-size:1.08rem; margin:0; color:#4A2F1B; }
.fl_frage_zeile { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.fl_frage { margin:0; color:#3E4C59; font-size:1rem; line-height:1.45; flex:1 1 18rem; }
.fl_kl_knopf {
  margin-left:auto; border:2px solid #D5C5AE; border-radius:999px;
  background:#FFFDF9; padding:.26rem .8rem; font-size:.85rem; font-weight:700;
  color:var(--link-color); cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.05); transition:transform .12s ease, border-color .12s ease;
}
.fl_kl_knopf:hover { border-color:var(--link-color); transform:translateY(-1px); }
.fl_parameter {
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.55rem;
  padding-top:.5rem; border-top:1px dashed #D8C8B0;
}
.fl_param_chip {
  display:inline-flex; align-items:center; gap:.35rem;
  background:#FFFDF9; border:1.5px solid #D8C7AE; border-radius:999px;
  padding:.18rem .65rem; font-size:.84rem; color:#4A3525;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.fl_param_chip i {
  display:inline-flex; width:1rem; height:1rem; color:#C85A3B; font-style:normal;
}
.fl_param_chip i svg { width:100%; height:100%; display:block; }
.fl_param_chip b { font-weight:800; letter-spacing:.01em; }

/* Fortschritt beim Legen: "6 von 12 m² gelegt" + Balken */
.fl_lege_status {
  display:flex; align-items:center; gap:.75rem; margin:0 0 .75rem;
  background:#F4F8F2; border:1.5px solid #C8E6C9; border-radius:.75rem;
  padding:.45rem .8rem; font-size:.92rem; font-weight:700; color:#2E5732;
}
.fl_lege_status > span { white-space:nowrap; }
.fl_balken {
  flex:1; height:.7rem; background:#DCE8D8;
  border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
.fl_balken > i {
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, #66BB6A, #2E7D32);
  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-plan-bg:#F5EFE4; --fl-plan-linie:#E5DBC9; --fl-plan-rand:#D6C7B0;
  --fl-boden:#EAE2D4; --fl-kleber:#DDD1BD; --fl-fuge:#CBBFA8; --fl-meter:#B6A68E;
  --fl-loch:#CFC5B3; --fl-wand:#A67B5B; --fl-linie:#6D3B22;
  --fl-masse:#124678; --fl-masse-bg:#FFFDF8; --fl-masse-rand:#90B4D4;
  --fl-kachel-a:#E07A5F; --fl-kachel-b:#F2CC8F; --fl-rahmen:#6D3B22;
}
.fl_svg {
  display:block; width:100%; height:auto; margin:0 auto;
  touch-action:none; user-select:none; -webkit-user-select:none;
  border-radius:.85rem;
}
.fl_svg:focus-visible { outline:3px solid var(--green200-color);
  outline-offset:4px; border-radius:.85rem; }

/* Zeichenbrett-Hintergrund und Raum-Schatten */
.fl_plan_kasten {
  fill:url(#fl_muster_plan); stroke:var(--fl-plan-rand); stroke-width:2;
}
.fl_muster_plan_linie { fill:none; stroke:var(--fl-plan-linie); stroke-width:1; }
.fl_raum_schatten { fill:rgba(62,39,20,.14); }

/* Moertelbett, Zahnkellen-Rillen, 50-cm-Fugen und 1-m-Linien */
.fl_bodenflaeche { stroke:var(--fl-linie); stroke-width:1; stroke-opacity:.25; }
.fl_muster_boden { fill:var(--fl-boden); }
.fl_muster_kleber { fill:none; stroke:var(--fl-kleber); stroke-width:1.3; stroke-linecap:round; }
.fl_muster_fuge_linie { fill:none; stroke:var(--fl-fuge); stroke-width:1.4; }
.fl_muster_meter_linie { fill:none; stroke:var(--fl-meter); stroke-width:1.8; stroke-dasharray:5 3; }

/* Loch, Nische oder tragende Säule im Raum */
.fl_lochflaeche { stroke:rgba(0,0,0,.22); stroke-width:1.5; }
.fl_muster_loch { fill:var(--fl-loch); }
.fl_muster_loch_linie { stroke:rgba(74,55,40,.22); stroke-width:3; }
.fl_saeule_kern {
  fill:rgba(93,64,55,.22); stroke:var(--fl-linie); stroke-width:2;
  stroke-dasharray:4 2;
}

/* Mauer-Umriss, Raumkante, Sockelleiste und Tür-Symbol */
.fl_wand_umriss {
  stroke:var(--fl-wand); stroke-width:8; stroke-linecap:square; opacity:.38;
}
.fl_ussenlinie { stroke:var(--fl-linie); stroke-width:3.4; stroke-linecap:round; }
.fl_sockel_ring {
  stroke:#E07A5F; stroke-width:5.5; stroke-linecap:round;
  stroke-dasharray:10 5; opacity:.85;
}
.fl_tuer_luecke { stroke:var(--fl-boden); stroke-width:6; stroke-linecap:butt; }
.fl_tuer_symbol {
  fill:rgba(23,73,127,.10); stroke:var(--fl-masse); stroke-width:2;
  stroke-linecap:round;
}

/* Vorab verlegte Boden-Vorschau bei reinen Rechen-Aufgaben */
.fl_vorschau_fliese { stroke:rgba(74,55,40,.18); stroke-width:.9; opacity:.82; }
.fl_vorschau_a { fill:var(--fl-kachel-a); }
.fl_vorschau_b { fill:var(--fl-kachel-b); }

/* Gelegte Fliesen: warme Keramik-Kacheln mit Glanzkante und Rahmen */
.fl_kachel { stroke:rgba(74,55,40,.26); stroke-width:.9; }
.fl_kachel_a { fill:var(--fl-kachel-a); }
.fl_kachel_b { fill:var(--fl-kachel-b); }
.fl_kachel_glanz {
  fill:none; stroke:rgba(255,255,255,.45); stroke-width:1.5;
  stroke-linecap:round; pointer-events:none;
}
.fl_fliese_rahmen {
  fill:none; stroke:var(--fl-rahmen); stroke-width:2.4;
  stroke-linejoin:round; pointer-events:none;
}
.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; }
}

/* Teilflächen-Plakette beim Zerlegen */
.fl_feld_pille {
  fill:rgba(255,253,248,.92); stroke:var(--fl-rahmen); stroke-width:1.5;
  pointer-events:none;
}
.fl_feld_mass {
  fill:#3E2723; font-size:12px; font-weight:800; pointer-events:none;
}

/* Tastatur-Rahmen (Pfeiltasten bewegen ihn) */
.fl_cursor { fill:rgba(3,155,229,.18); stroke:var(--lightblue600-color);
  stroke-width:2.6; 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,.28); stroke:#2E7D32; stroke-width:3;
  stroke-dasharray:8 5; }
.fl_geist_schlecht { fill:rgba(229,57,53,.22); stroke:#C62828; stroke-width:3;
  stroke-dasharray:8 5; }
.fl_geist_pille {
  fill:rgba(255,255,255,.94); stroke:#2E7D32; stroke-width:1.8;
  pointer-events:none;
}
.fl_geist_pille_schlecht {
  fill:rgba(255,245,245,.95); stroke:#C62828; stroke-width:1.8;
  pointer-events:none;
}
.fl_geist_text { fill:#1B5E20; font-size:13.5px; font-weight:800; pointer-events:none; }
.fl_geist_text_schlecht { fill:#B71C1C; font-size:13.5px; font-weight:800; pointer-events:none; }

/* Maßlinien, Ticks und Maß-Plaketten im Architektur-Stil */
.fl_hoehe { stroke:var(--fl-masse); stroke-width:2.5; fill:var(--fl-masse); }
.fl_mass_hilfslinie {
  stroke:var(--fl-masse); stroke-width:1.4; stroke-dasharray:3 2; opacity:.55;
}
.fl_mass_tick { stroke:var(--fl-masse); stroke-width:2; stroke-linecap:round; opacity:.75; }
.fl_mass_pille {
  fill:var(--fl-masse-bg); stroke:var(--fl-masse-rand); stroke-width:1.5;
}
.fl_mass {
  fill:var(--fl-masse); font-size:13.5px; font-weight:800;
  paint-order:stroke fill; stroke:var(--fl-masse-bg); stroke-width:2.5px;
  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:.85rem; }

/* Antwortzeile: Eingabe mit Einheits-Plakette + Pruefen + Tipp */
.fl_antwort { display:flex; gap:.65rem; align-items:center; flex-wrap:wrap;
  justify-content:center; margin-top:.95rem; }
.fl_eingabe_gruppe {
  display:inline-flex; align-items:stretch;
  border:2px solid #C8B89E; border-radius:.8rem;
  background:var(--ct-color); overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.05);
}
.fl_eingabe_gruppe:focus-within {
  border-color:var(--green600-color);
  box-shadow:0 0 0 3px var(--green200-color);
}
.fl_eingabe {
  width:7.8rem; text-align:center; font-size:1.25rem; font-weight:800;
  padding:.45rem .55rem; border:0;
  background:transparent; color:inherit;
}
.fl_eingabe:focus { outline:none; }
.fl_einheit {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.6rem; padding:0 .65rem;
  background:#F3ECE0; border-left:1.5px solid #D8C8B0;
  font-size:1.05rem; font-weight:800; color:#5D4037;
  user-select:none;
}
.fl_merke {
  margin-top:.85rem; background:var(--green50-color);
  border:1.5px solid var(--green200-color); border-left:5px solid var(--link-color);
  border-radius:.65rem; padding:.6rem .85rem; font-size:.98rem; font-weight:600;
}
.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:.55rem; }

/* Start-Overlay mit Werkstatt-Illustration */
.fl_startoverlay {
  display:flex; justify-content:center; align-items:center;
}
.fl_start_karte {
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  background:linear-gradient(180deg, #FFFDF9 0%, #F6EFE2 100%);
  border:2px solid #DFCEB6; border-radius:1.1rem;
  padding:1.15rem 1.5rem 1.25rem; max-width:26rem; width:100%;
  box-shadow:0 10px 28px rgba(0,0,0,.28); color:#3E2723;
}
.fl_start_karte h2 { color:#3E2723; margin:.1rem 0; }
.fl_start_karte p { color:#4A5568; margin:0 0 .35rem; line-height:1.5; }
.fl_start_illu { width:10.5rem; height:auto; display:block; }

/* Rundenende mit Meister-Plakette */
.fl_done {
  background:linear-gradient(180deg, var(--ct-color) 0%, #FAF4E8 100%);
  border:2px solid #E2D3BC; border-radius:1.1rem; text-align:center;
  box-shadow:0 6px 20px rgba(93,58,26,.10); padding:1.6rem 1.2rem; margin-top:1rem;
}
.fl_done_medaille { width:4.6rem; height:4.6rem; margin:0 auto .3rem; }
.fl_done_medaille svg { width:100%; height:100%; display:block; }
.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; letter-spacing:.15em; }

/* Info-Box unter dem Spiel (Muster .bruecke_info) */
.fl_info { margin-top:1rem; }
.fl_info summary {
  cursor:pointer; font-weight:700; padding:.55rem .9rem;
  background:#E1F5FE; border-radius:.75rem; 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], .fl_parameter[hidden], .fl_startoverlay[hidden],
.fl_done[hidden] { display:none; }

/* Dark Mode: Raum dunkel, Fliesen bleiben warm, Mass-Texte hell */
html[data-theme="dark"] .fl_panel {
  background:linear-gradient(135deg, #16242D 0%, #111D24 100%);
  border-color:#2B3E4B; box-shadow:0 4px 14px rgba(0,0,0,.3);
}
html[data-theme="dark"] .fl_stat {
  background:rgba(255,255,255,.04); border-color:#2B3E4B;
}
html[data-theme="dark"] .fl_controls select {
  background:#102029; border-color:#385060;
}
html[data-theme="dark"] .fl_stage {
  border-color:#2B3E4B; box-shadow:0 6px 20px rgba(0,0,0,.35);
}
html[data-theme="dark"] .fl_aufgabe {
  background:linear-gradient(135deg, #15252F 0%, #101D25 100%);
  border-color:#2B3E4B; border-left-color:#E07A5F;
}
html[data-theme="dark"] .fl_auftrag_icon {
  background:#0E1A22; border-color:#344B59;
}
html[data-theme="dark"] .fl_story { color:#F5E6D3; }
html[data-theme="dark"] .fl_frage { color:#CFD8DC; }
html[data-theme="dark"] .fl_kl_knopf {
  background:#102631; border-color:#455A64; color:#81D4FA;
}
html[data-theme="dark"] .fl_parameter { border-top-color:#2B3E4B; }
html[data-theme="dark"] .fl_param_chip {
  background:#102029; border-color:#344B59; color:#ECEFF1;
}
html[data-theme="dark"] .fl_param_chip i { color:#FFAB91; }
html[data-theme="dark"] .fl_lege_status {
  background:#12251B; border-color:#2E5732; color:#A5D6A7;
}
html[data-theme="dark"] .fl_balken { background:#1E3526; }
html[data-theme="dark"] .fl_zeichnung {
  --fl-plan-bg:#0F1B22; --fl-plan-linie:#192B36; --fl-plan-rand:#2A404E;
  --fl-boden:#22333C; --fl-kleber:#2B3F4B; --fl-fuge:#344C5A; --fl-meter:#4A6778;
  --fl-loch:#131E25; --fl-wand:#8D6E63; --fl-linie:#D7B899;
  --fl-masse:#81D4FA; --fl-masse-bg:#102029; --fl-masse-rand:#375A70;
  --fl-kachel-a:#C9603F; --fl-kachel-b:#D9AE6E; --fl-rahmen:#F5E6D3;
}
html[data-theme="dark"] .fl_raum_schatten { fill:rgba(0,0,0,.35); }
html[data-theme="dark"] .fl_lochflaeche { stroke:rgba(255,255,255,.14); }
html[data-theme="dark"] .fl_muster_loch_linie { stroke:rgba(255,255,255,.12); }
html[data-theme="dark"] .fl_saeule_kern { fill:rgba(255,255,255,.08); }
html[data-theme="dark"] .fl_kachel { stroke:rgba(0,0,0,.38); }
html[data-theme="dark"] .fl_kachel_glanz { stroke:rgba(255,255,255,.28); }
html[data-theme="dark"] .fl_fliese_rahmen { stroke:rgba(255,255,255,.55); }
html[data-theme="dark"] .fl_feld_pille { fill:rgba(16,32,41,.92); stroke:#81D4FA; }
html[data-theme="dark"] .fl_feld_mass { fill:#E1F5FE; }
html[data-theme="dark"] .fl_geist_pille { fill:rgba(16,38,24,.94); stroke:#66BB6A; }
html[data-theme="dark"] .fl_geist_pille_schlecht { fill:rgba(45,16,18,.94); stroke:#EF5350; }
html[data-theme="dark"] .fl_geist_text { fill:#A5D6A7; }
html[data-theme="dark"] .fl_geist_text_schlecht { fill:#FF8A80; }
html[data-theme="dark"] .fl_eingabe_gruppe { border-color:#455A64; background:#102029; }
html[data-theme="dark"] .fl_einheit {
  background:#172A35; border-left-color:#455A64; color:#CFD8DC;
}
html[data-theme="dark"] .fl_start_karte {
  background:linear-gradient(180deg, #162630 0%, #101C24 100%);
  border-color:#2F4654; box-shadow:0 6px 18px rgba(0,0,0,.35); color:#F5E6D3;
}
html[data-theme="dark"] .fl_start_karte h2 { color:#F5E6D3; }
html[data-theme="dark"] .fl_start_karte p { color:#CFD8DC; }
html[data-theme="dark"] .fl_done {
  background:linear-gradient(180deg, #162630 0%, #101C24 100%);
  border-color:#2F4654;
}
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; }

@media (max-width:600px) {
  .fl_panel { padding:.65rem .75rem; gap:.5rem .75rem; }
  .fl_stat { min-width:3.8rem; padding:.25rem .5rem; }
  .fl_stat span { font-size:1.15rem; }
  .fl_controls { margin-left:0; width:100%; justify-content:space-between; }
  .fl_aufgabe { padding:.65rem .75rem; }
  .fl_kl_knopf { margin-left:0; }
  .fl_eingabe { width:6.5rem; }
  .fl_lege_status { font-size:.85rem; padding:.4rem .65rem; }
}