/* ---------- Bruch-Pizza - Pizzeria-Optik (nur bruch_-Praefix) ----------
   Idee: Die Seite ist eine Pizzeria. Holzleiste oben, Pergament-Panel in
   der Mitte, Holz-Tisch mit Deko als Hintergrund. Alles bleibt im
   vorhandenen Markup: gleiche Klassen- und ID-Namen wie vorher.
------------------------------------------------------------------ */

/* ---------- Farben (hell) ---------- */
:root {
  --bp-wand-hell: #8a5a33;
  --bp-wand: #6f4526;
  --bp-wand-tief: #4a2c13;
  --bp-papier: #fdf5e4;
  --bp-papier-hell: #fffdf7;
  --bp-kante: #d8b384;
  --bp-kante-stark: #b98a4b;
  --bp-text: #4a2c12;
  --bp-text-leise: #8a6a45;
  --bp-wert: #9a3412;
  --bp-gelb: #ffd23f;
  --bp-gelb-tief: #f0a800;
  --bp-gruen: #2f6a24;
  --bp-rot: #b3261e;
}

/* ---------- Dunkelmodus: warme Nachtküche ---------- */
html[data-theme="dark"] {
  --bp-wand-hell: #5c3a20;
  --bp-wand: #3f2716;
  --bp-wand-tief: #24150b;
  --bp-papier: #3d2c1e;
  --bp-papier-hell: #4a3623;
  --bp-kante: #8a5f36;
  --bp-kante-stark: #a97c48;
  --bp-text: #f7e8cd;
  --bp-text-leise: #cfae83;
  --bp-wert: #ffb45e;
  --bp-gelb: #f7c744;
  --bp-gelb-tief: #d69b12;
  --bp-gruen: #8fd07a;
  --bp-rot: #ff9d8f;
}

/* ================= Szene: Holz-Tisch ================= */
body.jupi.bruch_body {
  background: #6b4224 url("assets/pizzeria.svg") center top / cover fixed no-repeat;
  color: var(--bp-text);
}
/* Im Dunkelmodus wird die Szene abends: gedämpftes Licht, weniger Farbe.
   Achtung: die Plattform setzt "html[data-theme=dark] body.jupi" - das ist
   spezifischer als "body.jupi.bruch_body". Darum muss die Dunkel-Regel den
   Zusatz "html[data-theme=dark]" mitnehmen, sonst gewinnt die Plattform. */
html[data-theme="dark"] body.jupi.bruch_body {
  background-color: #5f4a2e;
  background-image: url("assets/pizzeria.svg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: multiply;
  filter: brightness(.92) saturate(.85);
}
body.jupi.bruch_body .jupi_main,
body.jupi.bruch_body .jupi_footer { background: transparent; }
body.jupi.bruch_body .jupi_footer {
  color: #f6e6c8;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
  border-radius: 0;
  margin: .5rem auto 0;
  max-width: none;
  padding: .3rem .6rem;
  /* Dunkles Band, damit der Fuss auf dem hellen Kastentuch lesbar bleibt */
  background: rgba(35,18,6,.45);
  backdrop-filter: blur(3px);
}
body.jupi.bruch_body .jupi_footer a { color: #ffd9a0; }
body.jupi.bruch_body .jupi_container { grid-template-rows: 0 auto 1fr auto; }

/* ================= Kopfzeile: Holzbrett ================= */
.bruch_header {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: .8rem;
  padding: .5rem 1rem;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 118px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 3px, rgba(0,0,0,.05) 3px 8px),
    linear-gradient(180deg, var(--bp-wand-hell) 0%, var(--bp-wand) 55%, var(--bp-wand-tief) 100%);
  border-bottom: 3px solid var(--bp-wand-tief);
  box-shadow: 0 6px 18px rgba(30,15,5,.45);
  backdrop-filter: none;
}
/* Kastentuch in den beiden oberen Ecken */
.bruch_header::before,
.bruch_header::after {
  content: ""; position: absolute; top: 0; width: 130px; height: 24px;
  background: repeating-conic-gradient(#f6f1e6 0% 25%, #c0392b 0% 50%) 0 0 / 24px 24px;
  opacity: .85; pointer-events: none;
}
.bruch_header::before { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bruch_header::after { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }

.bruch_brand { display: flex; align-items: center; justify-self: center; gap: .45rem; min-width: 0; }
.bruch_brand h1 {
  margin: 0; color: #fff8e8; font-size: 1.3rem; line-height: 1.15; font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(60,30,10,.85), 0 3px 10px rgba(0,0,0,.55);
  white-space: nowrap;
}
.bruch_marke {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; padding: 3px;
  background: #fdf3dd;
  border: 2px solid #e2c48f; border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.bruch_marke img { display: block; width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1; }
.bruch_blatt { display: inline-flex; width: 30px; flex: none; opacity: .95; }
.bruch_blatt svg { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.bruch_blatt_l { transform: rotate(-16deg); }
.bruch_blatt_r { transform: rotate(164deg); }

/* Zurück-Pille und Werkzeuge */
.bruch_header .jupi_nav_back {
  position: static; justify-self: start; display: inline-flex; align-items: center;
  background: linear-gradient(180deg, #fdf6e4, #f0e0bd);
  color: #5a3517; font-weight: 800; border: 2px solid #c79a5e;
  border-radius: 999px; padding: .42rem .85rem; line-height: 1.2; font-size: .88rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  text-decoration: none;
}
.bruch_header .jupi_nav_back:hover { background: #fff8e8; transform: translateY(-1px); }
.bruch_header .jupi_werkzeuge { position: static; justify-self: end; display: flex; align-items: center; gap: .45rem; }
.bruch_header #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.bruch_header .jupi_sprachen_select {
  color: #4a2c12; background: linear-gradient(180deg, #fdf6e4, #f0e0bd);
  border: 2px solid #c79a5e; font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
  /* Kompakter als der Plattform-Umschalter (17 rem) - die Sprachnamen
     stehen beim Oeffnen weiter voll im Menue. */
  width: 10.5rem;
}
.bruch_header .jupi_sprachen_select:hover { background: #fff8e8; }
.bruch_header .jupi_sprachen_select option { color: #212121; background: #fff; }
html[data-theme="dark"] .bruch_header .jupi_sprachen_select {
  color: #f6e6c8; background: linear-gradient(180deg, #4a2d19, #33200f); border-color: #8a5a33;
}
/* Dark-Mode-Schalter im Holzrahmen */
.bruch_header .jupi_theme_switch {
  width: 74px; height: 40px; min-width: 74px; padding: 0;
  background: rgba(0,0,0,.32);
  border: 2px solid #c79a5e;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.3);
}
/* Die Plattform setzt im Dunkelmodus eigene Header-Farben - die Holzleiste
   muss dafuer staerker benannt werden, sonst gewinnt die Plattform. */
html[data-theme="dark"] .jupi_header.bruch_header {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 118px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 3px, rgba(0,0,0,.06) 3px 8px),
    linear-gradient(180deg, var(--bp-wand-hell) 0%, var(--bp-wand) 55%, var(--bp-wand-tief) 100%);
  border-bottom-color: var(--bp-wand-tief);
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
html[data-theme="dark"] .bruch_header .jupi_nav_back {
  background: linear-gradient(180deg, #4a2d19, #33200f);
  color: #ffd9a0; border-color: #8a5a33;
}
html[data-theme="dark"] .bruch_header .jupi_nav_back:hover { background: #56351d; }
.bruch_header .jupi_theme_switch:hover { background: rgba(0,0,0,.44); }
.bruch_header .jts_thumb {
  top: 3px; bottom: auto; left: 4px; width: 32px; height: 32px; border-radius: 50%;
  background: #fdf3dd; box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
html[data-theme="dark"] .bruch_header .jts_thumb { left: calc(100% - 36px); }
.bruch_header .jts_sun { left: 9px; } .bruch_header .jts_moon { right: 9px; }
html[data-theme="dark"] .bruch_header .jts_sun { color: #ffd98a; }
html[data-theme="dark"] .bruch_header .jts_moon { color: #cfd8ff; }

/* ================= Konsole: Pergament-Panel ================= */
.jupi_main { padding: .7rem 1rem 0; }
.bruch_konsole {
  max-width: 60rem; margin: 0 auto; padding: .85rem 1rem 1rem;
  min-height: min(calc(100dvh - 8.5rem), 42rem);
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 22% 28%, rgba(150,110,60,.05) 0 2px, transparent 3px) 0 0 / 34px 34px,
    radial-gradient(circle at 68% 62%, rgba(150,110,60,.045) 0 2px, transparent 3px) 14px 20px / 44px 44px,
    linear-gradient(180deg, var(--bp-papier) 0%, var(--bp-papier-hell) 100%);
  color: var(--bp-text);
  border: 3px solid var(--bp-kante-stark);
  border-radius: 24px;
  box-shadow:
    0 22px 46px rgba(25,10,0,.45),
    0 3px 0 rgba(255,255,255,.55) inset,
    0 -3px 0 rgba(120,75,35,.18) inset;
}

/* ---------- Bedienleiste oben rechts ---------- */
.bruch_werkzeuge {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: flex-end;
  padding-bottom: .55rem; margin-bottom: .5rem;
  border-bottom: 2px dashed var(--bp-kante);
}
/* Labels sind nur für Screenreader da (die Auswahlfelder zeigen ihren Text selbst) */
.bruch_sichtbar_fuer_alle {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.bruch_select {
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--bp-text);
  background: var(--bp-papier-hell);
  border: 2px solid var(--bp-kante); border-radius: 999px;
  padding: .35rem .8rem; min-height: 42px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(70,40,10,.16);
}
.bruch_select:hover { border-color: var(--bp-kante-stark); }
.bruch_select option { color: #212121; background: #fff; }
html[data-theme="dark"] .bruch_select option { color: #f2ead9; background: #2b1f14; }

/* Runde Knöpfe (Hilfe, Ton) */
.bruch_knopf_rund {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  color: #fff6e4; background: linear-gradient(180deg, #a4703e, #74451f);
  border: 2px solid #4f2c11; border-radius: 50%;
  cursor: pointer; padding: 0;
  box-shadow: 0 3px 8px rgba(40,20,5,.4), 0 2px 0 rgba(255,255,255,.18) inset;
  transition: transform .1s, box-shadow .12s;
}
.bruch_knopf_rund:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(40,20,5,.45); }
.bruch_knopf_rund:active { transform: translateY(0); }

/* Kleine Pille (Neustart, Weiter) */
.bruch_knopf_pille {
  font: inherit; font-weight: 800; font-size: .9rem; color: #5a3517;
  background: linear-gradient(180deg, #fdf6e4, #eeddb8);
  border: 2px solid var(--bp-kante-stark); border-radius: 999px;
  padding: .45rem .95rem; min-height: 42px; cursor: pointer;
  box-shadow: 0 3px 8px rgba(70,40,10,.28);
  transition: transform .1s, box-shadow .12s;
}
.bruch_knopf_pille:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(70,40,10,.32); }
.bruch_knopf_pille:active { transform: translateY(0); }

/* ================= Punkte-Leiste ================= */
.bruch_hud {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
  margin: 0 0 .55rem;
}
.bruch_stat {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding: .35rem .6rem;
  background: linear-gradient(180deg, var(--bp-papier-hell), rgba(255,255,255,.35));
  border: 2px solid var(--bp-kante); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(70,40,10,.16);
}
.bruch_stat_icon { font-size: 1.45rem; line-height: 1; flex: none; }
.bruch_stat_text { display: flex; flex-direction: column; min-width: 0; }
.bruch_stat label {
  font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bp-text-leise); line-height: 1.25;
}
.bruch_stat span { font-size: 1.25rem; font-weight: 800; color: var(--bp-wert); line-height: 1.15; }

/* ================= Aufgabe auf dem Papierstreifen ================= */
/* Der Zettel ist der Rahmen: das Papier selbst ist das ::before (mit
   gerissenen Kanten), das Klebeband liegt darueber und wird nicht
   mitbeschnitten. */
.bruch_zettel {
  position: relative; max-width: 32rem; margin: .35rem auto .4rem;
  padding: .55rem 1.2rem;
}
.bruch_zettel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #fffdf4, #f8efd8);
  /* gerissenes Papier: die Kanten sind unregelmaessig */
  clip-path: polygon(0% 6%, 3% 1%, 7% 7%, 11% 2%, 16% 8%, 21% 2%, 26% 7%, 32% 2%, 38% 8%,
    44% 2%, 50% 7%, 56% 2%, 62% 8%, 68% 2%, 74% 7%, 80% 2%, 86% 8%, 92% 2%, 97% 7%, 100% 3%,
    100% 97%, 97% 93%, 93% 99%, 88% 93%, 83% 99%, 78% 93%, 72% 99%, 66% 93%, 60% 99%,
    54% 93%, 48% 99%, 42% 93%, 36% 99%, 30% 93%, 24% 99%, 18% 93%, 12% 99%, 6% 93%, 2% 99%, 0% 94%);
  filter: drop-shadow(0 6px 10px rgba(60,35,10,.28));
}
html[data-theme="dark"] .bruch_zettel::before {
  background: linear-gradient(180deg, #46341f, #3a2a18);
}
/* Klebeband an den oberen Ecken */
.bruch_tape {
  position: absolute; top: -7px; z-index: 2;
  width: 56px; height: 22px;
  background: rgba(226,203,142,.62);
  border-left: 1px dashed rgba(150,115,60,.5); border-right: 1px dashed rgba(150,115,60,.5);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.bruch_tape_l { left: 14px; transform: rotate(-7deg); }
.bruch_tape_r { right: 14px; transform: rotate(6deg); }
.bruch_aufgabe {
  position: relative; z-index: 1;
  margin: 0; text-align: center;
  font-size: 1.32rem; font-weight: 800; color: var(--bp-text); line-height: 1.45;
}
.bruch_klein { font-size: .82rem; font-weight: 600; color: var(--bp-text-leise); }

/* ================= Spielfeld ================= */
/* Das Feld waechst mit: der Inhalt sitzt mittig im freien Platz. */
.bruch_spielfeld {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex: 1 1 auto; padding: .2rem 0; min-height: 0;
}
.bruch_pizza_svg {
  display: block; margin: 0 auto;
  width: min(78vw, 360px); height: min(36dvh, 360px);
  filter: drop-shadow(0 10px 16px rgba(40,20,5,.45));
}
/* Pizza-Teile (inline SVG, vom JS gebaut) */
.bruch_kruste { fill: url(#bpKruste); stroke: #8f4d18; stroke-width: 3; }
.bruch_sauce { fill: url(#bpSauce); }
.bruch_stueck { fill: url(#bpKaese); stroke: #d99a3c; stroke-width: 1.4; transition: fill .12s; }
.bruch_stueck.bruch_aktiv { fill: url(#bpTomate); stroke: #7d1809; }
.bruch_klick { cursor: pointer; }
.bruch_klick:hover { fill: #ffd98a; }
.bruch_klick.bruch_aktiv:hover { fill: #a8240f; }
.bruch_kaese_fleck { fill: #d99a3c; opacity: .45; pointer-events: none; }
.bruch_salami_fleck { fill: #5f1106; opacity: .5; pointer-events: none; }
.bruch_kruste_fleck { fill: #6b3410; opacity: .45; pointer-events: none; }
/* Schnittlinien im Rand (Sauce + Kruste): dunkel und bis zum äußersten Rand,
   damit ein eingefärbtes Stück auch am Rand als durchgeschnitten gilt. */
.bruch_schnitt { stroke: #4a230c; stroke-width: 2; stroke-linecap: round; pointer-events: none; }

/* ---------- Großer Prüfen-Knopf ---------- */
.bruch_aktionen { display: flex; gap: .8rem; justify-content: center; align-items: center; margin: .35rem 0 .1rem; }
.bruch_pruefen {
  position: relative; isolation: isolate;
  font: inherit; font-size: 1.35rem; font-weight: 800; color: #4a2c12;
  background: linear-gradient(180deg, #ffe066 0%, var(--bp-gelb) 55%, var(--bp-gelb-tief) 100%);
  border: 3px solid #a9700c; border-radius: 999px;
  padding: .5rem 2.2rem; min-height: 56px; cursor: pointer;
  box-shadow: 0 6px 0 #8a5a08, 0 10px 18px rgba(40,20,5,.4);
  transition: transform .1s, box-shadow .12s;
}
.bruch_pruefen:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #8a5a08, 0 12px 22px rgba(40,20,5,.45); }
.bruch_pruefen:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a5a08, 0 6px 12px rgba(40,20,5,.4); }
/* Strahlenkranz um den Knopf */
.bruch_pruefen::before {
  content: ""; position: absolute; inset: -26px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(122,74,34,.55) 0deg 2.2deg, transparent 2.2deg 11deg);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 64%);
  mask: radial-gradient(closest-side, transparent 58%, #000 64%);
  pointer-events: none;
}
html[data-theme="dark"] .bruch_pruefen { color: #3a2200; border-color: #8a5a08; }

/* ---------- Meldung ---------- */
.bruch_msg {
  min-height: 1.5em; max-width: 34rem; margin: .35rem auto 0;
  font-size: .98rem; font-weight: 700; line-height: 1.5; color: var(--bp-text);
}
.bruch_msg.bruch_ok { color: var(--bp-gruen); }
.bruch_msg.bruch_falsch { color: var(--bp-rot); }

/* ---------- Bruch als gestapelte Zahl ---------- */
.bruch_zahl {
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1.05; font-weight: 800; vertical-align: middle;
}
.bruch_oben { padding: 0 .28em .1em; }
.bruch_unten { padding: .1em .28em 0; border-top: .085em solid currentColor; }

/* ---------- Modus Vergleichen: Antwort-Karten ---------- */
.bruch_vergleich {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: .35rem 0 .2rem;
}
.bruch_kauf {
  font-family: inherit; font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  min-width: 7rem; min-height: 78px; padding: .5rem 1.1rem;
  background: var(--bp-papier-hell); color: var(--bp-text);
  border: 2.5px solid var(--bp-kante-stark); border-radius: 1rem;
  cursor: pointer; box-shadow: 0 3px 8px rgba(70,40,10,.2);
  transition: transform .1s, box-shadow .12s, background .12s;
}
.bruch_kauf:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(70,40,10,.28); background: #fff6dd; }
.bruch_kauf_gleich { font-size: 1.05rem; font-weight: 700; }
.bruch_kauf_falsch {
  border-color: var(--bp-rot) !important; background: #fdecea !important;
  opacity: .7; transform: none !important; cursor: default;
}

/* ---------- Mini-Pizzen in der Erklärung ---------- */
.bruch_mini { display: flex; gap: 1.1rem; justify-content: center; align-items: flex-end; margin: .5rem 0 .1rem; }
.bruch_mini_box { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-weight: 700; }
.bruch_mini_box .bruch_pizza_svg { width: 96px; height: 96px; }

/* ---------- Modus Passendes Paar ---------- */
.bruch_paar_geber {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  font-size: 2rem; margin: .1rem 0 .5rem;
}
.bruch_paar_geber .bruch_pizza_svg { width: 76px; height: 76px; }
.bruch_paar_wahl {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
  width: 100%; max-width: 38rem; margin: 0 auto;
}
.bruch_karte {
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .45rem .3rem .4rem;
  background: var(--bp-papier-hell);
  border: 2.5px solid var(--bp-kante); border-radius: 1rem;
  cursor: pointer; transition: transform .1s, border-color .12s, box-shadow .12s;
}
.bruch_karte:hover { transform: translateY(-2px); border-color: var(--bp-kante-stark); box-shadow: 0 6px 14px rgba(70,40,10,.24); }
.bruch_karte .bruch_pizza_svg { width: 100%; height: auto; aspect-ratio: 1; max-width: 104px; }
.bruch_karte_name { font-size: .74rem; font-weight: 700; color: var(--bp-text-leise); }
.bruch_karte_richtig { border-color: var(--bp-gruen) !important; background: #e8f5e9 !important; }
.bruch_karte_falsch { border-color: var(--bp-rot) !important; opacity: .65; cursor: default; }
html[data-theme="dark"] .bruch_karte_richtig { background: #24401f !important; }
html[data-theme="dark"] .bruch_karte_falsch { background: #3a201e !important; }
html[data-theme="dark"] .bruch_kauf_falsch { background: #3a201e !important; }
html[data-theme="dark"] .bruch_kauf:hover { background: #4a3620; }

/* ================= Hilfe-Dialog ================= */
.bruch_dialog {
  width: min(46rem, calc(100% - 1rem)); max-height: 85dvh; overflow: auto;
  border: 3px solid var(--bp-kante-stark); border-radius: 1.2rem; padding: 1.1rem;
  background: var(--bp-papier); color: var(--bp-text);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.bruch_dialog::backdrop { background: rgba(30,15,5,.72); }
.bruch_dialog form { display: flex; justify-content: flex-end; }
.bruch_dialog h2 { margin: .4rem 0; }
.bruch_dialog summary { cursor: pointer; font-weight: 700; }
.bruch_dialog .jupi_btn { background: linear-gradient(180deg, #fdf6e4, #eeddb8); color: #5a3517; border: 2px solid var(--bp-kante-stark); }
.bruch_merksaetze li { margin: .7rem 0; }
.bruch_merksaetze { padding-left: 1.2rem; }

/* ================= Kleinigkeiten ================= */
/* Die versteckten Farbverlaeufe der Pizza (in index.html) sind ein Inline-SVG.
   Ohne diese Regel bekommen sie eine Zeilenhoehe von 24 px und schieben die
   ganze Seite nach unten. */
.bruch_defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.bruch_versteckt { display: none !important; }
button, select, .jupi_nav_back { min-width: 40px; min-height: 40px; }
button:focus-visible, select:focus-visible, .bruch_klick:focus-visible {
  outline: 3px solid #1565c0; outline-offset: 3px;
}
.bruch_body a { color: inherit; }

/* ================= Tablet: Kopfzeile braucht zwei Zeilen ================= */
/* Sonst klebt der Sprachumschalter am Spielnamen (ab ca. 900 px zu eng). */
@media (max-width: 56rem) {
  .bruch_header { grid-template-columns: minmax(0,1fr) auto; gap: .4rem; padding: .5rem .75rem; }
  .bruch_brand { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
  .bruch_brand h1 { font-size: 1.18rem; }
  .bruch_marke { width: 40px; height: 40px; }
  .bruch_header .jupi_nav_back { grid-row: 2; grid-column: 1; justify-self: start; }
  .bruch_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
}

/* ================= Handy ================= */
@media (max-width: 40rem) {
  .bruch_header { grid-template-columns: minmax(0,1fr) auto; gap: .35rem; padding: .45rem .5rem; }
  .bruch_brand { grid-row: 1; grid-column: 1 / -1; }
  .bruch_brand h1 { font-size: 1.12rem; }
  .bruch_marke { width: 38px; height: 38px; }
  .bruch_blatt { display: none; }
  .bruch_header .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: .82rem; padding: .35rem .7rem; justify-self: start; }
  .bruch_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  .bruch_header .jupi_sprachen_select { max-width: 8rem; font-size: .78rem; }

  .jupi_main { padding: .45rem .5rem 0; }
  .bruch_konsole { padding: .6rem .55rem .7rem; border-radius: 18px; }
  .bruch_werkzeuge { gap: .35rem; padding-bottom: .45rem; }
  .bruch_select { font-size: .82rem; padding: .3rem .6rem; min-height: 40px; flex: 1 1 30%; }
  .bruch_knopf_pille { font-size: .8rem; padding: .35rem .7rem; min-height: 40px; }
  .bruch_knopf_rund { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 1rem; }
  .bruch_hud { gap: .3rem; }
  .bruch_stat { padding: .25rem .35rem; gap: .3rem; border-radius: 11px; }
  .bruch_stat_icon { font-size: 1.05rem; }
  .bruch_stat label { font-size: .5rem; letter-spacing: .04em; }
  .bruch_stat span { font-size: 1rem; }
  /* Das laengste Label ("Gelöst/Versuche") passt sonst nur zerbrochen in die
     letzte Karte - darum etwas kleiner und ohne Sperrung. */
  .bruch_stat:last-child label { font-size: .44rem; letter-spacing: 0; }
  .bruch_stat label { overflow-wrap: normal; word-break: keep-all; }
  .bruch_aufgabe { font-size: 1.06rem; }
  .bruch_zettel { padding: .4rem .7rem; }
  .bruch_pizza_svg { width: min(64vw, 250px); height: min(28dvh, 250px); }
  .bruch_pruefen { font-size: 1.15rem; padding: .45rem 1.6rem; min-height: 50px; }
  .bruch_kauf { font-size: 1.35rem; min-width: 5.6rem; min-height: 62px; }
  .bruch_paar_wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; max-width: 22rem; }
  .bruch_paar_geber { font-size: 1.5rem; margin: .1rem 0 .35rem; }
  .bruch_paar_geber .bruch_pizza_svg { width: 58px; height: 58px; }
  .bruch_karte { padding: .3rem; }
  .bruch_karte .bruch_pizza_svg { max-width: 70px; }
  .bruch_karte_name { font-size: .66rem; }
  .bruch_msg { font-size: .86rem; line-height: 1.4; }
  .bruch_mini_box .bruch_pizza_svg { width: 68px; height: 68px; }
}

/* ================= Kurze Fenster (kleines Handy) ================= */
/* Bei wenig Hoehe muss alles kleiner werden, sonst ragt die Konsole aus dem
   Bild. Der Prüfen-Knopf bleibt trotzdem gut treffbar (46 px). */
@media (max-height: 42rem) {
  .bruch_pizza_svg { width: min(60vw, 210px); height: min(24dvh, 210px); }
  .bruch_zettel { padding: .35rem .8rem; margin: .15rem auto .3rem; }
  .bruch_aufgabe { font-size: 1.05rem; }
  .bruch_werkzeuge { padding-bottom: .35rem; margin-bottom: .35rem; }
  .bruch_hud { margin-bottom: .35rem; }
  .bruch_stat { padding: .2rem .3rem; }
  .bruch_stat span { font-size: .95rem; }
  .bruch_pruefen { min-height: 46px; font-size: 1.1rem; padding: .4rem 1.5rem; }
  .bruch_msg { min-height: 1.2em; margin-top: .2rem; }
  /* Paar-Karten und Bruchvorgabe schrumpfen, sonst ragt die Konsole aus dem Bild */
  .bruch_paar_geber { font-size: 1.35rem; margin: 0 0 .25rem; }
  .bruch_paar_geber .bruch_pizza_svg { width: 48px; height: 48px; }
  .bruch_karte { padding: .25rem; }
  .bruch_karte .bruch_pizza_svg { max-width: 58px; }
  .bruch_karte_name { font-size: .6rem; }
}

/* ================= Sehr schmale Handys: Ecken etwas kleiner ================= */
@media (max-width: 24rem) {
  .bruch_stat_icon { display: none; }
  .bruch_brand h1 { font-size: 1rem; }
  /* "Alle Spiele" darf nicht auf zwei Zeilen brechen - das macht die
     Bedienleiste auf dem Handy unnoetig hoch. */
  .bruch_header .jupi_nav_back { font-size: .74rem; padding: .3rem .5rem; white-space: nowrap; }
  .bruch_header .jupi_sprachen_select { width: 5.6rem; font-size: .72rem; padding: .2rem .35rem; }
  .bruch_header .jupi_theme_switch { width: 62px; min-width: 62px; }
  .bruch_header .jts_thumb { left: 3px; }
  html[data-theme="dark"] .bruch_header .jts_thumb { left: calc(100% - 35px); }
  .bruch_header .jts_sun { left: 6px; } .bruch_header .jts_moon { right: 6px; }
}

/* Wer keine Bewegung moechte, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  .bruch_stueck { transition: none; }
  .bruch_knopf_rund, .bruch_knopf_pille, .bruch_pruefen, .bruch_karte, .bruch_kauf { transition: none; }
}