/* Farben-Meister: Styles fuer das PWA-Paket - ATELIER-WELT (2026-10-26)
   ═══════════════════════════════════════════════════════════════════════
   Der Seitenrand um das Spiel traegt den Stil des Spiels: eine Atelier-
   wand aus warmem Papier mit verblassten Farbklecksen (atelier.svg,
   Generator .zcode/farbenmeister-atelier.cjs). Leiste, Steuerleiste und
   Fuss sind eine dunkle Maler-Konsole aus warmem Holzton mit gemalter
   Farb-Kante (Rot-Gold-Blau, die drei Grundfarben) - beides in BEIDEN
   Themes gleich, der Dark-Schalter hellt nur die Wand auf. Die Buehne ist
   der Malkarton (Creme) - wie eine echte Leinwand bleibt sie auch bei
   Atelier-Daemmerung hell. Vorbild: Schatzkarte, Raetselrakete,
   Winkelfuchs, Numbergeddon. Alle Regeln sind an body.jupi.fm_body
   gekettet: das schlaegt die html[data-theme]-Regeln aus jupi.css in
   BEIDEN Themes. Die Farben kommen aus dem Logo (logo.svg):
   Papier #FFF9EC/#FFF3D6, Rot #F04E3E, Gold #FFC93D, Blau #1C52A7,
   Holz #8D6E63/#5D4037, Skizze #3E2F28. */

/* ── 0. Atelier-Wand: Seitenhintergrund ─────────────────────────────────
   Kachelbare Wand (atelier.svg) plus weiche Lichter: warmes Atelier-
   Fensterlicht oben, farbiger Widerschein unten. Kein Kacheln des
   Verlaufs - der waere sonst unter dem Seitenrumpf ein zweites Mal
   sichtbar (Streifen unter dem Fuss, Lehre aus der Raetselrakete). */
body.jupi.fm_body {
  color: #3E2F28;
  min-height: 100vh;
  background-repeat: no-repeat;
  background:
    radial-gradient(1100px 560px at 8% -10%, rgba(255, 201, 61, 0.18) 0%, transparent 58%),
    radial-gradient(900px 480px at 96% -4%, rgba(240, 78, 62, 0.10) 0%, transparent 56%),
    radial-gradient(1400px 520px at 50% 112%, rgba(28, 82, 167, 0.08) 0%, transparent 60%),
    url("atelier.svg") repeat,
    #FFF9EC;
}
/* Dunkler Modus: das Atelierlicht geht aus. Weil die Wand eine deckende
   Kachel ist, liegt darueber eine durchsichtige Daemmer-Schicht, die
   Kleckse und Mottling wirklich abdunkelt (Lehre Raetselrakete). */
html[data-theme="dark"] body.jupi.fm_body {
  background:
    linear-gradient(rgba(33, 22, 12, 0.62), rgba(33, 22, 12, 0.62)),
    radial-gradient(1100px 560px at 8% -10%, rgba(255, 201, 61, 0.10) 0%, transparent 58%),
    radial-gradient(900px 480px at 96% -4%, rgba(240, 78, 62, 0.06) 0%, transparent 56%),
    radial-gradient(1400px 520px at 50% 112%, rgba(28, 82, 167, 0.06) 0%, transparent 60%),
    url("atelier.svg") repeat,
    #F4E8CF;
}
/* Die weisse Plattform-Karte darf den Seitenrand nicht mehr zudecken. */
body.jupi.fm_body .jupi_container > .jupi_main { background: transparent; }
/* Die Plattform-Rasterzeilen dehnen sich sonst auf die ganze Fensterhoehe -
   auf dem Handy entsteht ein leeres Band UEBER der Kopfzeile (Muster
   Numbergeddon/Raetselrakete: align-content start, Hauptzeile waechst). */
body.jupi.fm_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.fm_body .jupi_container { min-height: 100dvh; }
}

/* Die Fusszeile sitzt bei dunklen Themes sonst auf gruener Plattform-Farbe
   (jupi.css html[data-theme]-Regel) - hier hat die eigene Kette Vorrang. */
body.jupi.fm_body .jupi_container > .jupi_footer { color: #d8c3a5; }

/* ── 1. JUPI-Leiste als Maler-Konsole (3.13.2) ──────────────────────────
   Links "Alle Spiele", mittig Logo + Titel, rechts Sprache + Dark-Pill.
   Dunkle Holz-Konsole mit gemalter Farb-Kante oben (Rot-Gold-Blau, die
   drei Grundfarben der Malerei) - in BEIDEN Themes gleich. */
body.jupi.fm_body .farbe_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.6rem;
  color: #FFF3D6;
  background:
    radial-gradient(560px 130px at 50% -40%, rgba(255, 201, 61, 0.12) 0%, transparent 70%),
    linear-gradient(135deg, #2b2018 0%, #3a2a1c 55%, #4a3626 100%);
  border: 1px solid rgba(141, 110, 99, 0.55);
  border-bottom: 2px solid rgba(201, 143, 13, 0.85);
  border-radius: 1rem;
  box-shadow: 0 6px 24px rgba(62, 47, 40, 0.45), inset 0 1px 0 rgba(255, 243, 214, 0.12);
}
/* Die gemalte Farb-Kante: ein Pinselstrich aus den drei Grundfarben. */
body.jupi.fm_body .farbe_header::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F04E3E 0%, #FFC93D 50%, #1C52A7 100%);
  opacity: 0.9;
}
/* Der eigentliche Leisten-Inhalt rueckt unter den Pinselstrich. */
body.jupi.fm_body .farbe_header > * { grid-row: 2; }

/* Zurueck-Pille: Papier-Knopf auf Holz statt weisser Plattform-Pille. */
body.jupi.fm_body .farbe_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;            /* Bedienziel 3.13.5 */
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  line-height: 1.2;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  color: #FFF3D6;
  background: rgba(255, 201, 61, 0.13);
  border: 1px solid rgba(255, 201, 61, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 243, 214, 0.10);
  transition: background 0.16s, color 0.16s, transform 0.16s;
}
body.jupi.fm_body .farbe_header .jupi_nav_back:hover {
  background: rgba(255, 201, 61, 0.28);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Marke: Logo mit Gold-Ring, Titel mit warmem Schein. */
body.jupi.fm_body .farbe_marke {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0.55rem;
  min-width: 0;
}
body.jupi.fm_body .farbe_marke img {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(255, 201, 61, 0.55), 0 0 14px rgba(255, 201, 61, 0.28);
}
body.jupi.fm_body .farbe_marke strong {
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 201, 61, 0.45);
}

body.jupi.fm_body .farbe_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Sprachwahl und Dark-Pill als Papier-Pillen auf Holz. */
body.jupi.fm_body .farbe_header .jupi_sprachen_select {
  min-height: 40px;
  color: #FFF3D6;
  background: rgba(255, 201, 61, 0.12);
  border: 1px solid rgba(255, 201, 61, 0.45);
  font-weight: 700;
}
body.jupi.fm_body .farbe_header .jupi_sprachen_select:hover { background: rgba(255, 201, 61, 0.26); }
body.jupi.fm_body .farbe_header .jupi_sprachen_select option,
body.jupi.fm_body .farbe_header .jupi_sprachen_select optgroup {
  color: #2b2018;
  background: #ffffff;
}
body.jupi.fm_body .farbe_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  min-height: 40px;
  padding: 0;
  background: rgba(255, 201, 61, 0.12);
  border-color: rgba(255, 201, 61, 0.45);
}
body.jupi.fm_body .farbe_header .jupi_theme_switch:hover { background: rgba(255, 201, 61, 0.26); }
body.jupi.fm_body .farbe_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
html[data-theme="dark"] body.jupi.fm_body .farbe_header .jts_thumb { left: calc(100% - 36px); }
body.jupi.fm_body .farbe_header .jts_sun { left: 9px; }
body.jupi.fm_body .farbe_header .jts_moon { right: 9px; }

/* Fuss: schmale Holz-Zeile mit Farb-Kante - der Pinselstrich endet hier. */
body.jupi.fm_body .jupi_container > .jupi_footer {
  background: rgba(43, 32, 24, 0.92);
  border-top: 2px solid rgba(255, 201, 61, 0.55);
  box-shadow: 0 -6px 24px rgba(62, 47, 40, 0.30);
}
body.jupi.fm_body .jupi_container > .jupi_footer a {
  color: #FFC93D;
  font-weight: 700;
}

/* ── 2. Steuerleiste als dunkle Glaskonsole (Regel 3.13.3) ──────────────
   Sie grenzt an die helle Buehne, bleibt aber wie die ganze Atelier-
   Konsole in BEIDEN Themes dunkel - der Theme-Schalter hellt nur die
   Seitenwand auf, nicht die Ausstattung. */
.farbe_panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.3rem;
  align-items: center;
  background: rgba(43, 32, 24, 0.86);
  border: 1px solid rgba(141, 110, 99, 0.50);
  border-top: 2px solid rgba(255, 201, 61, 0.50);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(62, 47, 40, 0.35), inset 0 1px 0 rgba(255, 243, 214, 0.10);
  padding: 0.75rem 1rem;
  margin: 0 0 0.9rem;
  color: #FFF3D6;
}

.farbe_stat {
  display: flex;
  flex-direction: column;
  min-width: 4.5rem;
}

.farbe_stat label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #d8c3a5;
}

.farbe_stat span {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFC93D;
  text-shadow: 0 0 10px rgba(255, 201, 61, 0.35);
}

.farbe_controls {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.farbe_controls label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #d8c3a5;
}

/* Selects als dunkle Holz-Faecher mit Papier-Schrift. */
.farbe_controls .jupi_select {
  min-height: 40px;
  height: 40px;
  border-radius: 0.6rem;
  padding: 0.35rem 0.8rem;
  border: 1.5px solid rgba(255, 201, 61, 0.45);
  background: #33241a;
  color: #FFF3D6;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  box-sizing: border-box;
}

.farbe_controls .jupi_select:focus {
  outline: none;
  border-color: #FFC93D;
  box-shadow: 0 0 0 3px rgba(255, 201, 61, 0.22);
}

.farbe_controls .jupi_select option,
.farbe_controls .jupi_select optgroup {
  color: #2b2018;
  background: #ffffff;
}

/* Plattform-Knoepfe werden hier zu Papier-Pillen auf der Konsole. */
body.jupi.fm_body .farbe_panel .jupi_btn.jupi_btn_alt {
  background: rgba(255, 201, 61, 0.14);
  border: 1px solid rgba(255, 201, 61, 0.45);
  color: #FFF3D6;
  box-shadow: inset 0 1px 0 rgba(255, 243, 214, 0.10);
}
body.jupi.fm_body .farbe_panel .jupi_btn.jupi_btn_alt:hover {
  background: rgba(255, 201, 61, 0.28);
  color: #ffffff;
}

.farbe_controls .jupi_btn {
  min-height: 40px;
  min-width: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border-radius: 0.6rem;
  padding: 0.5rem 0.9rem;
}

/* ── 3. Buehne = Malkarton (Creme, immer hell wie eine echte Leinwand) ── */
.farbe_stage {
  background-color: #FFF9EC;                 /* Malkarton bleibt deckend */
  background-image: linear-gradient(180deg, #FFFDF6 0%, #FFF9EC 100%);
  border: 1px solid #e2d3b3;
  border-top: 6px solid #8D6E63;          /* Holzleiste des Keilrahmens */
  border-radius: 1rem;
  box-shadow: 0 4px 18px rgba(62, 47, 40, 0.28), inset 0 1px 0 #ffffff;
  padding: 1rem 1.1rem 1.2rem;
  color: #3E2F28;
}

/* Klebe-Ecken oben links und rechts auf dem Malkarton. */
.farbe_stage::before,
.farbe_stage::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 18px;
  border-radius: 3px;
  background: rgba(255, 232, 130, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.farbe_stage { position: relative; }
.farbe_stage::before { top: 12px; left: 18px; transform: rotate(-6deg); }
.farbe_stage::after { top: 12px; right: 18px; transform: rotate(5deg); }

.farbe_task_label {
  margin: 0 0 0.8rem;
  font-weight: 800;
  color: #3E2F28;
  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: #ffffff;
  border: 2px solid #e2d3b3;
  border-radius: 1rem;
  padding: 0.8rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(62, 47, 40, 0.12);
}

/* 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, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.farbe_ziel_titel {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a7a6a;
}

.farbe_sw_gross {
  width: 100%;
  height: 110px;
  border-radius: 0.9rem;
  border: 3px solid #FFFFFF;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.farbe_ziel_name {
  margin: 0.55rem 0 0;
  font-weight: 800;
  font-size: 1.05rem;
  color: #3E2F28;
}

.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 0.8rem;
}

.farbe_frage .farbe_sw_gross {
  width: min(240px, 60%);
  height: 96px;
}

.farbe_kreis_box {
  display: flex;
  justify-content: center;
  margin: 0 0 0.8rem;
}

.farbe_kreis_box svg {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.2));
}

/* Regler-Zeile */
.farbe_regler[hidden] {
  display: none;
}

.farbe_regler {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.farbe_regler_ein {
  flex: 1 1 160px;
  max-width: 240px;
}

.farbe_regler_ein label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #3E2F28;
}

.farbe_punkt {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid rgba(0, 0, 0, 0.25);
}

.farbe_regler_ein input[type="range"] {
  width: 100%;
  height: 2.2rem;
  cursor: pointer;
}

.farbe_regler_ein output {
  color: #C98F0D;
}

/* Sprechblase des Farbmeisters: Pergament-Zettel auf dem Malkarton. */
.farbe_bubble {
  position: relative;
  margin: 1rem auto 0;
  max-width: 34rem;
  background: #FFF3D6;
  border: 2px solid #d9c9a8;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-align: left;
  color: #3E2F28;
  box-shadow: 0 2px 8px rgba(62, 47, 40, 0.10);
}

.farbe_btns[hidden] {
  display: none;
}

.farbe_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.farbe_btn {
  flex: 1 1 calc(50% - 0.35rem);
  min-height: 54px;
  font-size: 1.1rem;
  font-weight: 800;
  border: none;
  border-radius: 1rem;
  color: #FFFFFF;
  cursor: pointer;
  background: var(--lightblue600-color);
  box-shadow: 0 4px 0 #0277BD;
  transition: transform 0.1s, filter 0.1s;
  padding: 0.5rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  box-sizing: border-box;
}

.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 #C98F0D;
  outline-offset: 2px;
}

.farbe_btn:disabled {
  cursor: default;
  opacity: 0.9;
}

.farbe_btn_right {
  outline: 4px solid #2B9E61;
  outline-offset: 3px;
}

.farbe_btn_wrong {
  opacity: 0.55;
  animation: farbe_shake 0.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: 0.45rem;
  flex: 0 0 auto;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.farbe_btns_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
  justify-content: center;
}

/* Aktions-Knoepfe (Tipp/Pruefen/Weiter): Gold als Hauptknopf, Papier
   als Zweitknopf - auf dem Malkarton bleiben beide gut lesbar. */
.farbe_btns_row .jupi_btn {
  min-height: 42px;
  min-width: 42px;
  padding: 0.55rem 1.2rem;
  font-size: 1rem;
  border-radius: 2rem;
  box-sizing: border-box;
}

body.jupi.fm_body .farbe_stage .jupi_btn:not(.jupi_btn_alt) {
  background: linear-gradient(180deg, #FFC93D, #F6B71D);
  border: 1px solid #C98F0D;
  color: #3E2F28;
  font-weight: 800;
  box-shadow: 0 3px 0 #C98F0D;
}
body.jupi.fm_body .farbe_stage .jupi_btn:not(.jupi_btn_alt):hover {
  filter: brightness(1.06);
}
body.jupi.fm_body .farbe_stage .jupi_btn.jupi_btn_alt {
  background: #ffffff;
  border: 1px solid #d9c9a8;
  color: #3E2F28;
  box-shadow: 0 2px 6px rgba(62, 47, 40, 0.14);
}
body.jupi.fm_body .farbe_stage .jupi_btn.jupi_btn_alt:hover {
  background: #FFF9EC;
}

.farbe_msg {
  min-height: 1.7rem;
  margin-top: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: #3E2F28;
}

.farbe_msg_ok {
  color: #2B9E61;
}

.farbe_msg_err {
  color: #C62828;
}

/* Abschluss-Karte: dasselbe Papier wie die Buehne. */
.farbe_done {
  background-color: #FFF9EC;
  background-image: linear-gradient(180deg, #FFFDF6 0%, #FFF9EC 100%);
  border: 1px solid #e2d3b3;
  border-top: 6px solid #8D6E63;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 4px 18px rgba(62, 47, 40, 0.28);
  padding: 1.6rem 1rem;
  color: #3E2F28;
}

.farbe_done h3 {
  margin: 0.2rem 0 0.5rem;
  font-size: 1.5rem;
  color: #C98F0D;
}

.farbe_done p {
  margin: 0.3rem 0 0.8rem;
  font-size: 1.05rem;
}

.farbe_done .jupi_btn {
  min-height: 42px;
  min-width: 120px;
  padding: 0.55rem 1.2rem;
  font-size: 1rem;
  border-radius: 2rem;
}

.farbe_sterne {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

/* ── 4. Hilfe-Dialog: Pergament-Karte (Goldene Negativ-Regel 3.13.4) ──── */
.neu_dialog {
  box-sizing: border-box;
  width: min(48rem, calc(100vw - 24px));
  max-height: 88dvh;
  overflow: auto;
  border: 1px solid #d9c9a8;
  border-top: 5px solid #8D6E63;
  border-radius: 1rem;
  background: #FFFDF6;
  color: #3E2F28;
  padding: 1rem;
  line-height: 1.55;
  box-shadow: 0 10px 40px rgba(62, 47, 40, 0.40);
}
.neu_dialog::backdrop { background: rgba(33, 22, 12, 0.66); }
.neu_schliessen { display: flex; justify-content: flex-end; margin: 0; }
.neu_schliessen button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0.3rem;
  border-radius: 50%;
  cursor: pointer;
  background: #FFF3D6;
  border: 1px solid #d9c9a8;
  color: #3E2F28;
  font-weight: 800;
}
.neu_schliessen button:hover { background: #FFE8A6; }
.neu_dialog h2 { margin: 0.3rem 0 1rem; color: #3E2F28; }
.neu_dialog li { margin: 0.5rem 0; }
.neu_dialog b { color: #2b2018; }

/* Didaktischer Satz und Hilfe im Modal */
.farbe_lernsatz {
  background: #FFF3D6;
  border-left: 4px solid #C98F0D;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.farbe_kreis_hilfe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

.farbe_kreis_text {
  font-size: 0.9rem;
  color: #8a7a6a;
  margin: 0;
  text-align: center;
}

/* ── 5. Handy (Muster Raetselrakete: zweizeilige Leiste) ──────────────── */
@media (max-width: 600px) {
  .farbe_panel {
    padding: 0.7rem 0.8rem;
  }
  .farbe_controls {
    margin-left: 0;
    width: 100%;
  }
  .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%;
  }
}

@media (max-width: 52rem) {
  body.jupi.fm_body .farbe_header {
    grid-template-columns: 1fr 1fr;
    padding: 0.4rem 0.6rem;
  }
  body.jupi.fm_body .farbe_marke {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
  body.jupi.fm_body .farbe_marke strong { font-size: 1.1rem; }
  body.jupi.fm_body .farbe_header .jupi_nav_back { grid-row: 3; grid-column: 1; font-size: 0.85rem; white-space: nowrap; }
  body.jupi.fm_body .farbe_header .jupi_werkzeuge { grid-row: 3; grid-column: 2; }
  body.jupi.fm_body .farbe_header .jupi_sprachen_select { width: 7rem; }
}
@media (max-width: 360px) {
  body.jupi.fm_body .farbe_header .jupi_nav_back { grid-column: 1 / -1; justify-self: center; }
  body.jupi.fm_body .farbe_header .jupi_werkzeuge { grid-column: 1 / -1; grid-row: 4; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .farbe_btn, .farbe_btn:active:not(:disabled), .farbe_btn:hover:not(:disabled) { transition: none; transform: none; }
  body.jupi.fm_body .farbe_header .jupi_nav_back { transition: none; transform: none; }
}

/* ── 6. Altlasten abwehren ──────────────────────────────────────────────
   Das Plattform-jupi.css (Paket-Kopie) bringt noch die alten farbe_*-
   Regeln samt Dark-Mode mit (dort war das Spiel einst zu Hause). Der
   Malkarton und die Pergament-Zettel bleiben aber in BEIDEN Themes hell
   - wie eine echte Leinwand im abgedunkelten Atelier. Darum hier mit
   hoher Spezifitaet (html[data-theme] + body-Kette) zuruecksetzen. */
html[data-theme="dark"] body.jupi.fm_body .farbe_ziel {
  background: #ffffff;
  border-color: #e2d3b3;
  color: #3E2F28;
}
html[data-theme="dark"] body.jupi.fm_body .farbe_ziel_titel { color: #8a7a6a; }
html[data-theme="dark"] body.jupi.fm_body .farbe_bubble {
  background: #FFF3D6;
  border-color: #d9c9a8;
  color: #3E2F28;
}
html[data-theme="dark"] body.jupi.fm_body .farbe_msg_err { color: #C62828; }
html[data-theme="dark"] body.jupi.fm_body .farbe_msg_ok { color: #2B9E61; }
html[data-theme="dark"] body.jupi.fm_body .farbe_controls .jupi_select {
  background: #33241a;
  border-color: rgba(255, 201, 61, 0.45);
  color: #FFF3D6;
}
html[data-theme="dark"] body.jupi.fm_body .farbe_controls label { color: #d8c3a5; }
html[data-theme="dark"] body.jupi.fm_body .farbe_stat label { color: #d8c3a5; }
html[data-theme="dark"] body.jupi.fm_body .farbe_stat span { color: #FFC93D; }
html[data-theme="dark"] body.jupi.fm_body .farbe_panel .jupi_btn.jupi_btn_alt {
  background: rgba(255, 201, 61, 0.14);
  border: 1px solid rgba(255, 201, 61, 0.45);
  color: #FFF3D6;
}