/* satzbaukasten/styles.css - BAUHOF-Look des Satz-Baukastens (26.10.2026)
   =========================================================================
   Idee: "Satz-BAU-kasten" wird woertlich genommen. Die Seite ist ein
   aufgezogener BAUPLAN (Kulisse: kulisse.svg, Generator
   .zcode/satzbaukasten-kulisse.cjs), die Kopfzeile und die Steuerleiste sind
   eine Anthrazit-Konsole mit Absperrband (Sicherheitsgelb), und das Spiel
   selbst steht auf einem Planblatt mit gelbem Bauzaun-Rahmen. Die Wort-Kacheln
   sind ZIEGEL: sie werden auf einem Moertelbett (Satzstreifen) verlegt, die
   Auswahl liegt in einer Holzkiste (Material).

   Aufbau (von aussen nach innen):
     1. Farben
     1b. Seitenkulisse (Bauplan) an body.jupi.sb_body
     2. Bauhof-Konsole: JUPI-Kopfzeile + Steuerleiste
     3. Das Planblatt (Buehne) mit Bauzaun-Rahmen
     4. Moertelbett, Materialkiste, Ziegel
     5. Knoepfe, Uebersetzung, Meldung
     6. Abnahme-Protokoll (Rundenende)
     7. Hilfe-Fenster
     8. Dark Mode (Nacht-Bauplan)
     9. Handy
    10. Bedienziele >= 40 x 40 px - STEHT AM ENDE, sonst gewinnt die spaetere
        Grundregel aus jupi.css.

   Alle Regeln haengen an body.jupi.sb_body (bzw. an den sb_*-Klassen), damit
   sie die Grundregeln aus jupi.css in BEIDEN Themes schlagen. Die alten
   .satzbau_*-Grundregeln in jupi.css bleiben unberuehrt - das Schwester-Spiel
   satzbaukasten-deutsch teilt sie sich mit uns und darf sich nicht aendern. */

/* ---------- 1. Farben ---------- */
:root {
  --sb-plan: #0f2b3d;          /* Bauplan-Blau der Seite */
  --sb-plan-tief: #081c28;
  --sb-anthrazit: #22262b;     /* Konsole */
  --sb-anthrazit-hell: #39424c;
  --sb-gelb: #f2b705;          /* Sicherheitsgelb (Absperrband) */
  --sb-gelb-hell: #ffd75e;
  --sb-gelb-tief: #8a6000;
  --sb-papier: #f7fbfe;        /* Planblatt */
  --sb-papier-tief: #e2edf5;
  --sb-raster: rgba(37, 85, 120, .13);
  --sb-tinte: #16364b;         /* Schrift auf dem Plan */
  --sb-tinte-hell: #4a6c85;
  --sb-moertel: #ddd2bc;       /* Satzstreifen */
  --sb-moertel-tief: #c9bb9e;
  --sb-ziegel: #b8432f;
  --sb-ziegel-hell: #d0604a;
  --sb-ziegel-tief: #992f1f;
  --sb-ziegel-kante: #571c12;
  --sb-holz: #6d4020;          /* Materialkiste */
  --sb-holz-tief: #4a2a11;
}

/* ---------- 1b. Seitenkulisse: der Bauplan um die Konsole ----------
   Muster Schatzkarte / Sternenfusion / Raetselrakete: der Seitenrand traegt
   den Stil des Spiels. Hier: das kachelbare Planblatt (kulisse.svg) mit
   Licht von oben und Tiefe unten; im Dark Mode legt sich eine Nacht-Schicht
   darueber, die Zeichnung bleibt sichtbar (durchsichtige Schicht, keine
   deckende Farbe). */
body.jupi.sb_body {
  min-height: 100vh;
  background-repeat: no-repeat;
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(146, 205, 232, .20) 0%, transparent 62%),
    radial-gradient(900px 520px at 100% 4%, rgba(120, 190, 220, .10) 0%, transparent 58%),
    radial-gradient(1300px 540px at 0% 108%, rgba(3, 14, 22, .48) 0%, transparent 62%),
    url("kulisse.svg") repeat,
    var(--sb-plan);
}
html[data-theme="dark"] body.jupi.sb_body {
  background:
    linear-gradient(rgba(3, 12, 19, .58), rgba(2, 9, 14, .66)),
    radial-gradient(1100px 560px at 50% -12%, rgba(146, 205, 232, .10) 0%, transparent 62%),
    radial-gradient(1300px 540px at 0% 108%, rgba(1, 6, 10, .55) 0%, transparent 62%),
    url("kulisse.svg") repeat,
    var(--sb-plan-tief);
}
/* Die weisse Plattform-Karte darf den Bauplan nicht zudecken. */
body.jupi.sb_body .jupi_container > .jupi_main { background: transparent; }
body.jupi.sb_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.sb_body .jupi_container { min-height: 100dvh; }
}
/* Fuss direkt auf dem Bauplan: keine weisse Karte (Grundregel aus jupi.css:
   #fafafa + border-top + runde Ecken - alles weg). */
body.jupi.sb_body .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
  margin: 0;
  max-width: none;
}
body.jupi.sb_body .jupi_footer,
body.jupi.sb_body .jupi_footer p {
  color: #cfe6ec;
  text-align: center;
  margin: .1rem 0;
}
body.jupi.sb_body .jupi_footer { padding: .8rem 1rem 1.1rem !important; font-size: .84rem; }
body.jupi.sb_body .jupi_footer a { color: var(--sb-gelb-hell); font-weight: 700; }

/* ---------- 2. Bauhof-Konsole (Kopfzeile + Steuerleiste) ---------- */
/* Anthrazit mit feiner Struktur (zwei Lichtkanten, Korn) und einer Kante aus
   Absperrband: 45-Grad-Streifen in Sicherheitsgelb und Anthrazit.
   Die Selektoren tragen body.jupi.sb_body: die Plattform faerbt Kopfzeile,
   "Alle Spiele"-Pille und Sprachwahl im Dark Mode um
   (html[data-theme="dark"] .jupi_header/.jupi_nav_back) - ohne diesen
   Vorsprung gewaenne dort das warme Braun/Orange der Plattform. */
body.jupi.sb_body .sb_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .45rem 1rem .6rem;
  color: #f3ede1;
  border-bottom: 0;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, .06) 0 16%, transparent 17%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--sb-anthrazit-hell) 0%, #2a3037 55%, #1b2025 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
  position: relative;
}
/* Das Absperrband sitzt als eigene Kante unter der Kopfzeile. */
body.jupi.sb_body .sb_header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 7px;
  background: repeating-linear-gradient(45deg,
    var(--sb-gelb) 0 12px, #1b2025 12px 24px);
  border-top: 1px solid #05080b;
  border-bottom: 1px solid #05080b;
  pointer-events: none;
  z-index: 2;
}
body.jupi.sb_body .sb_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: .35rem .8rem; line-height: 1.2;
  font-size: .88rem; font-weight: 800; text-decoration: none;
  background: #eef3f7; color: #20262c;
  border: 2px solid #9aa6b1;
  box-shadow: 0 2px 0 #0d1115;
}
body.jupi.sb_body .sb_header .jupi_nav_back:hover { background: #ffffff; transform: translateY(-1px); }
.sb_brand { display: flex; align-items: center; justify-self: center; gap: .55rem; min-width: 0; }
.sb_brand img {
  display: block; flex: none; width: 40px; height: 40px; object-fit: contain; aspect-ratio: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.sb_brand h1 { display: flex; align-items: baseline; gap: .45rem; margin: 0; min-width: 0; }
.sb_brand_titel {
  font-size: 1.35rem; line-height: 1.15; font-weight: 800; letter-spacing: .01em;
  color: #fdf7e8; text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb_brand_fach {
  flex: none;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #241a00; background: var(--sb-gelb);
  padding: .16rem .42rem; border-radius: .3rem;
  border: 1px solid #8a6000;
  transform: rotate(-2deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
body.jupi.sb_body .sb_header .jupi_werkzeuge {
  position: static; justify-self: end;
  display: flex; align-items: center; gap: .45rem; min-width: 0;
}
body.jupi.sb_body .sb_header .jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
body.jupi.sb_body .sb_header .jupi_sprachen_select {
  background: #12161a; color: var(--sb-gelb-hell);
  border: 2px solid #545e69; border-radius: .55rem;
  font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .3rem .55rem; max-width: 11rem;
}
body.jupi.sb_body .sb_header .jupi_sprachen_select option { background: #12161a; color: #f6efdf; }
body.jupi.sb_body .sb_header .jupi_sprachen_wahl .jupi_sprachen_icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
body.jupi.sb_body .sb_header .jupi_theme_switch {
  width: 74px; height: 40px; min-width: 74px; min-height: 40px; padding: 0;
  background: #12161a; border: 2px solid #545e69; border-radius: 24px;
}
body.jupi.sb_body .sb_header .jupi_theme_switch:hover { background: #1c2229; }
body.jupi.sb_body .sb_header .jts_thumb {
  top: 3px; bottom: auto; left: 4px;
  width: 32px; height: 32px; min-height: 0; border-radius: 50%;
  background: #f7f2e6; box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] body.jupi.sb_body .sb_header .jts_thumb { left: calc(100% - 36px); }
body.jupi.sb_body .sb_header .jts_sun { left: 9px; }
body.jupi.sb_body .sb_header .jts_moon { right: 9px; }

/* Steuerleiste: Zahlen links, Schutzhelm als Schmuckstueck, Steuerung rechts.
   Gleiches Anthrazit, aber als eigenes Panel mit gelber Innenkante. */
body.jupi.sb_body .satzbau_panel.sb_konsole {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .5rem .85rem; margin: 0 0 .75rem;
  border-radius: .8rem;
  border: 2px solid #14181c;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #eef3f7;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #3a434d 0%, #262c33 58%, #1d2228 100%);
}
.sb_werte { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; min-width: 0; }
body.jupi.sb_body .satzbau_stat {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 4.1rem; padding: .16rem .55rem;
  border-radius: .45rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .16));
  border: 1px solid rgba(242, 183, 5, .3);
}
body.jupi.sb_body .satzbau_stat label {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #ccd8e1;
}
body.jupi.sb_body .satzbau_stat span {
  font-size: 1.3rem; font-weight: 800; line-height: 1.1;
  color: var(--sb-gelb-hell);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  white-space: nowrap;
}
.sb_helm { display: inline-flex; align-items: center; margin-left: auto; opacity: .97; }
body.jupi.sb_body .satzbau_controls.sb_steuerung {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-left: auto;
}
.sb_feld { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
body.jupi.sb_body .sb_steuerung label { font-weight: 700; font-size: .88rem; color: #e6edf3; }
body.jupi.sb_body .sb_konsole .jupi_select {
  background: #12161a; color: var(--sb-gelb-hell);
  border: 2px solid #545e69; border-radius: .5rem;
  font-weight: 700; padding: .35rem .6rem; min-height: 40px;
}
body.jupi.sb_body .sb_konsole .jupi_select option { background: #12161a; color: #f6efdf; }
body.jupi.sb_body .sb_konsole .jupi_select:focus {
  outline: none; border-color: var(--sb-gelb);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, .28);
}
body.jupi.sb_body .sb_knopf {
  background: linear-gradient(180deg, #4d5763, #333b44);
  color: #eef4f8;
  border: 2px solid #12161a; border-radius: .55rem;
  font-size: .93rem; font-weight: 700; padding: .38rem .65rem;
  box-shadow: 0 3px 0 #10141a, inset 0 1px 0 rgba(255, 255, 255, .16);
  cursor: pointer;
}
body.jupi.sb_body .sb_knopf:hover { filter: brightness(1.12); }
body.jupi.sb_body .sb_knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 #10141a; }

/* ---------- 3. Das Planblatt (Buehne) ----------
   Ein Blatt Bauplan auf dem Tisch: helles Papier mit Millimeter-Raster, oben
   eine Bauanleitung als Notizzettel, unten die Materialkiste. Der Rahmen ist
   ein Bauzaun aus Absperrband (background-clip: das Papier liegt in
   padding-box, das Band in border-box; der Rahmen selbst ist durchsichtig). */
main.jupi_main {
  align-content: center;
  align-content: safe center;
  gap: .75rem;
  max-width: 1060px;
  padding: .9rem 1rem 1.4rem !important;
}
body.jupi.sb_body .satzbau_stage.sb_blatt {
  display: flex; flex-direction: column;
  position: relative;
  border: 10px solid transparent;
  border-radius: 16px;
  padding: .85rem .95rem 1rem;
  background:
    repeating-linear-gradient(0deg,
      var(--sb-raster) 0, var(--sb-raster) 1px,
      transparent 1px, transparent 26px) padding-box,
    repeating-linear-gradient(90deg,
      var(--sb-raster) 0, var(--sb-raster) 1px,
      transparent 1px, transparent 26px) padding-box,
    linear-gradient(180deg, var(--sb-papier) 0%, var(--sb-papier-tief) 100%) padding-box,
    repeating-linear-gradient(45deg,
      var(--sb-gelb) 0 12px, #1b2025 12px 24px) border-box;
  box-shadow:
    0 16px 36px rgba(2, 10, 17, .5),
    0 0 0 1px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .7);
}
/* [hidden] MUSS gewinnen: die Buehne ist display:flex, sonst bliebe sie nach
   dem Rundenende stehen (bekannte [hidden]-Falle). */
body.jupi.sb_body .satzbau_stage.sb_blatt[hidden] { display: none !important; }

/* Bauanleitung: gelber Notizzettel mit Klebestreifen-Kante. */
body.jupi.sb_body .satzbau_task_label.sb_auftrag {
  margin: 0 0 .7rem; padding: .45rem .7rem .45rem .6rem;
  font-weight: 700; font-size: .92rem; line-height: 1.45;
  color: #5b4200;
  background: linear-gradient(180deg, #fff6cb, #ffeaa5);
  border-left: 6px solid var(--sb-gelb);
  border-radius: .3rem;
  box-shadow: 0 2px 7px rgba(20, 44, 66, .18);
}

.sb_feld_flaeche { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }

/* ---------- 4. Moertelbett, Materialkiste, Ziegel ---------- */
/* Der Satzstreifen ist ein frisch gezogenes Moertelbett: helle Flaeche mit
   Koernung, oben die blaue Maurerschnur (gestrichelt). */
body.jupi.sb_body .satzbau_line.sb_moertel {
  position: relative;
  display: flex; flex-wrap: wrap; gap: .45rem;
  align-content: center; align-items: center;
  min-height: 104px;
  padding: .6rem .65rem .7rem;
  border-radius: .5rem;
  border: 2px solid #b3a382;
  border-top: 2px dashed rgba(63, 143, 191, .6);
  background:
    radial-gradient(circle at 18% 34%, rgba(255, 255, 255, .45) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 72%, rgba(120, 100, 70, .22) 0 1px, transparent 2px),
    linear-gradient(180deg, #e6dcc8 0%, var(--sb-moertel) 40%, var(--sb-moertel-tief) 100%);
  background-size: 37px 41px, 53px 47px, auto;
  box-shadow:
    inset 0 7px 12px rgba(96, 76, 44, .22),
    inset 0 -3px 0 rgba(255, 255, 255, .3),
    0 1px 0 rgba(255, 255, 255, .6);
  transition: background .25s, border-color .25s;
}
/* Leeres Moertelbett: zwei gestrichelte Platzhalter-Ziegel zeigen, wohin die
   Steine gehoeren - ohne Text, damit keine Uebersetzung noetig ist.
   margin/padding/align-self werden ausdruecklich zurueckgesetzt: die
   Grundregel in jupi.css setzt dort margin:auto (sonst schweben die
   Platzhalter in der Mitte statt am linken Rand). */
body.jupi.sb_body .satzbau_line:empty::before,
body.jupi.sb_body .satzbau_line:empty::after {
  content: "";
  height: 46px;
  margin: 0;
  padding: 0;
  align-self: flex-start;
  border-radius: .35rem;
  border: 3px dashed rgba(120, 100, 70, .42);
  background: rgba(255, 255, 255, .28);
}
body.jupi.sb_body .satzbau_line:empty::before { width: min(34%, 130px); }
body.jupi.sb_body .satzbau_line:empty::after  { width: min(52%, 210px); }
/* Fertiger Satz: gruener Moertel + Abnahme-Stempel in der Ecke.
   Der Selektor traegt .sb_moertel mit, weil die Bett-Regel oben sonst
   gewinnt (gleiche Klasse, aber mehr Teile = hoehere Spezifitaet). */
body.jupi.sb_body .satzbau_line.sb_moertel.satzbau_line_win {
  background: linear-gradient(180deg, #e3edd8 0%, #cfe0c3 100%);
  border-color: #6d9a63;
  border-top: 2px dashed #2e7d32;
  animation: sb_aufziehen .5s ease-out;
}
body.jupi.sb_body .satzbau_line.sb_moertel.satzbau_line_win::after {
  content: "✓";
  position: absolute; right: .5rem; top: .4rem;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: #2f7a3c;
  border: 3px double #2f7a3c; border-radius: 50%;
  transform: rotate(-12deg);
  opacity: .6;
  pointer-events: none;
}

/* Materialkiste: Holzkiste mit Bretterfugen, die Ziegel liegen darin. */
body.jupi.sb_body .satzbau_pool.sb_kiste {
  display: flex; flex-wrap: wrap; gap: .45rem;
  align-content: flex-start;
  min-height: 76px;
  padding: .6rem .65rem;
  border-radius: .5rem;
  border: 3px solid #2f1c0c;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 214, 150, .12) 0 8%, transparent 9%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 112px),
    linear-gradient(180deg, #7d4c27 0%, var(--sb-holz) 45%, var(--sb-holz-tief) 100%);
  box-shadow:
    inset 0 9px 16px rgba(0, 0, 0, .38),
    inset 0 -3px 0 rgba(255, 220, 160, .14),
    0 1px 0 rgba(255, 255, 255, .35);
}

/* Die Wort-Ziegel: rot gebrannt, helle Oberkante, dicke Unterkante.
   min-width 44px: auch ein einzelnes "a" oder "I" bleibt ein sicheres
   Bedienziel (Regel 3.13.5). */
body.jupi.sb_body .satzbau_tile {
  font: inherit; font-weight: 800; font-size: 1.02rem; line-height: 1.2;
  min-width: 44px;
  min-height: 46px; padding: .5rem .9rem;
  border-radius: .38rem;
  color: #fff6e6;
  border: 2px solid var(--sb-ziegel-kante);
  background: linear-gradient(180deg, var(--sb-ziegel-hell) 0%, var(--sb-ziegel) 55%, var(--sb-ziegel-tief) 100%);
  box-shadow:
    0 4px 0 #6d2417,
    0 6px 10px rgba(8, 24, 38, .3),
    inset 0 2px 0 rgba(255, 214, 196, .55);
  text-shadow: 0 2px 0 rgba(94, 26, 16, .55);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .15s, background .15s;
}
body.jupi.sb_body .satzbau_tile:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  background: linear-gradient(180deg, #d97157 0%, #c14a34 55%, #a53826 100%);
  box-shadow:
    0 7px 0 #6d2417,
    0 10px 16px rgba(8, 24, 38, .32),
    inset 0 2px 0 rgba(255, 224, 210, .6);
}
body.jupi.sb_body .satzbau_tile:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #6d2417, inset 0 2px 0 rgba(255, 214, 196, .45);
}
body.jupi.sb_body .satzbau_tile:focus-visible {
  outline: 3px solid #2a7fb8; outline-offset: 2px;
}
/* Falsche Stelle: gelbe Warnkante (ein rotes Rot auf rotem Ziegel waere
   unsichtbar) + kurzes Wackeln. Die Kante ist absichtlich kraeftig - sie ist
   die einzige Rueckmeldung direkt an der Kachel. */
body.jupi.sb_body .satzbau_tile_err {
  color: #fff8e6;
  border-color: #4a160d;
  outline: 4px solid var(--sb-gelb);
  outline-offset: 2px;
  background: linear-gradient(180deg, #a63a28 0%, #86281a 55%, #6d1f14 100%);
  box-shadow: 0 3px 0 #4d180e, 0 0 0 .45rem rgba(242, 183, 5, .28);
  animation: sb_wackeln .32s;
}
/* Abgenommene Ziegel ("Loesung zeigen"): gruen gefuellt, nicht klickbar. */
body.jupi.sb_body .satzbau_tile_ok {
  background: linear-gradient(180deg, #6aa96d 0%, #4b8b52 55%, #39733f 100%);
  border-color: #23532c;
  box-shadow: 0 3px 0 #23532c, inset 0 2px 0 rgba(226, 255, 230, .45);
  text-shadow: 0 2px 0 rgba(20, 52, 26, .55);
  cursor: default;
}
body.jupi.sb_body .satzbau_tile:disabled { cursor: default; }
/* Satzzeichen am Ende des Streifens (kommt automatisch, keine Kachel). */
body.jupi.sb_body .satzbau_punct {
  align-self: center;
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  color: #5b3a1b; padding: 0 .15rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---------- 5. Knoepfe, Uebersetzung, Meldung ---------- */
body.jupi.sb_body .satzbau_btns.sb_btns {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem;
}
body.jupi.sb_body .sb_btns button {
  font-size: .98rem; font-weight: 800;
  border-radius: .5rem; padding: .45rem .85rem;
  cursor: pointer;
  transition: transform .1s, filter .12s, box-shadow .12s;
}
/* Hauptknopf: Sicherheitsgelb (Pruefen, Weiter, Nochmal). */
body.jupi.sb_body .sb_btns .sb_haupt {
  color: #2a1d00;
  border: 2px solid var(--sb-gelb-tief);
  background: linear-gradient(180deg, #ffd75e 0%, #f6c21a 55%, #e5a706 100%);
  box-shadow: 0 4px 0 #8a6000, 0 6px 12px rgba(8, 24, 38, .28), inset 0 2px 0 rgba(255, 255, 255, .55);
}
/* Nebenknopf: Stahl (Uebersetzung, Loesung). */
body.jupi.sb_body .sb_btns .sb_neben {
  color: #eef4f8;
  border: 2px solid #12161a;
  background: linear-gradient(180deg, #55606c 0%, #3a434d 55%, #2b323a 100%);
  box-shadow: 0 4px 0 #10141a, 0 6px 12px rgba(8, 24, 38, .25), inset 0 2px 0 rgba(255, 255, 255, .18);
}
body.jupi.sb_body .sb_btns button:hover { transform: translateY(-2px); filter: brightness(1.07); }
body.jupi.sb_body .sb_btns button:active { transform: translateY(2px); box-shadow: 0 1px 0 #10141a; }
body.jupi.sb_body .sb_btns button:focus-visible { outline: 3px solid #2a7fb8; outline-offset: 2px; }

/* Uebersetzung: blaue Plan-Notiz. */
body.jupi.sb_body .satzbau_de.sb_uebersetzung {
  margin-top: .6rem; padding: .5rem .8rem;
  border-radius: .4rem;
  background: #e9f4fc;
  border-left: 5px solid #3f8fbf;
  color: #12364d;
  font-size: 1rem;
  line-height: 1.45;
  box-shadow: 0 2px 6px rgba(20, 44, 66, .12);
}
/* Meldung: wie ein Eintrag auf dem Plan. */
body.jupi.sb_body .satzbau_msg.sb_meldung {
  min-height: 1.7rem; margin-top: .55rem;
  font-weight: 700; font-size: .97rem; line-height: 1.45;
  color: var(--sb-tinte);
  overflow-wrap: anywhere;
}
body.jupi.sb_body .satzbau_msg_ok { color: #1b6b33; }
body.jupi.sb_body .satzbau_msg_err { color: #a52015; }

/* ---------- 6. Abnahme-Protokoll (Rundenende) ---------- */
body.jupi.sb_body .satzbau_done.sb_abnahme {
  text-align: center;
  padding: 1.3rem 1rem 1.4rem;
  border-radius: 1rem;
  border: 3px solid #9fb6c6;
  color: var(--sb-tinte);
  background:
    repeating-linear-gradient(0deg,
      rgba(37, 85, 120, .07) 0, rgba(37, 85, 120, .07) 1px,
      transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg,
      rgba(37, 85, 120, .07) 0, rgba(37, 85, 120, .07) 1px,
      transparent 1px, transparent 26px),
    linear-gradient(180deg, var(--sb-papier), var(--sb-papier-tief));
  box-shadow: 0 14px 30px rgba(2, 10, 17, .42);
}
body.jupi.sb_body .satzbau_done[hidden] { display: none !important; }
body.jupi.sb_body .satzbau_done h3 {
  margin: .1rem 0 .5rem; font-size: 1.5rem; color: #0f4a67;
}
body.jupi.sb_body .satzbau_done p {
  margin: .3rem auto .9rem; max-width: 34rem; font-size: 1.02rem; line-height: 1.5;
}
body.jupi.sb_body .sb_abnahme_bild { display: block; margin: .1rem auto .4rem; }
body.jupi.sb_body .satzbau_done .sb_haupt {
  font-size: 1rem; font-weight: 800; color: #2a1d00;
  border: 2px solid var(--sb-gelb-tief); border-radius: .5rem;
  padding: .45rem .95rem;
  background: linear-gradient(180deg, #ffd75e 0%, #f6c21a 55%, #e5a706 100%);
  box-shadow: 0 4px 0 #8a6000, inset 0 2px 0 rgba(255, 255, 255, .55);
  cursor: pointer;
}
body.jupi.sb_body .satzbau_done .sb_haupt:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ---------- 7. Hilfe-Fenster (Bauanleitung) ---------- */
.sb_dialog {
  width: min(46rem, calc(100% - 2rem));
  max-height: 86dvh; overflow: auto;
  padding: 1rem 1.2rem 1.2rem;
  border: 3px solid #2c3f50; border-radius: .9rem;
  color: var(--sb-tinte);
  background:
    repeating-linear-gradient(0deg,
      rgba(37, 85, 120, .07) 0, rgba(37, 85, 120, .07) 1px,
      transparent 1px, transparent 26px),
    linear-gradient(180deg, var(--sb-papier), var(--sb-papier-tief));
  box-shadow: 0 18px 44px rgba(3, 12, 20, .55);
  line-height: 1.55;
}
.sb_dialog::backdrop { background: rgba(4, 14, 22, .66); }
.sb_schliessen { display: flex; justify-content: flex-end; margin: 0; }
.sb_schliessen button {
  width: 40px; height: 40px; padding: .2rem;
  border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; font-weight: 800;
  color: #12364d; background: #e7eff6;
  border: 2px solid #9fb6c6;
}
.sb_schliessen button:hover { background: #ffffff; }
.sb_dialog h3 {
  margin: .2rem 0 .8rem; padding-bottom: .35rem;
  font-size: 1.3rem; color: #0f3a52;
  border-bottom: 3px solid var(--sb-gelb);
}
.sb_dialog ul { margin: .2rem 0 .8rem; padding-left: 1.2rem; }
.sb_dialog li { margin: .45rem 0; }
.sb_dialog li::marker { color: var(--sb-gelb-tief); }
.sb_dialog p { margin: .6rem 0; }
.sb_lernsatz {
  margin: .9rem 0 0; padding: .6rem .8rem;
  border-radius: .4rem;
  background: rgba(242, 183, 5, .16);
  border-left: 5px solid var(--sb-gelb-tief);
  font-size: .98rem; line-height: 1.55; color: #4a3708;
}

/* ---------- 8. Dark Mode: Nacht-Bauplan ---------- */
html[data-theme="dark"] body.jupi.sb_body .satzbau_stage.sb_blatt {
  background:
    repeating-linear-gradient(0deg,
      rgba(150, 200, 230, .09) 0, rgba(150, 200, 230, .09) 1px,
      transparent 1px, transparent 26px) padding-box,
    repeating-linear-gradient(90deg,
      rgba(150, 200, 230, .09) 0, rgba(150, 200, 230, .09) 1px,
      transparent 1px, transparent 26px) padding-box,
    linear-gradient(180deg, #1b2833 0%, #131d26 100%) padding-box,
    repeating-linear-gradient(45deg,
      #c79a06 0 12px, #0d1114 12px 24px) border-box;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_task_label.sb_auftrag {
  color: #ffe9a8;
  background: linear-gradient(180deg, #3d3313, #302810);
  border-left-color: var(--sb-gelb);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_line.sb_moertel {
  background:
    radial-gradient(circle at 18% 34%, rgba(255, 255, 255, .10) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 72%, rgba(0, 0, 0, .35) 0 1px, transparent 2px),
    linear-gradient(180deg, #43413a 0%, #35332c 45%, #26251f 100%);
  background-size: 37px 41px, 53px 47px, auto;
  border-color: #4c4a41;
  border-top-color: #4f9fc9;
  box-shadow: inset 0 7px 12px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_line:empty::before,
html[data-theme="dark"] body.jupi.sb_body .satzbau_line:empty::after {
  border-color: rgba(226, 216, 196, .3);
  background: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_line.sb_moertel.satzbau_line_win {
  background: linear-gradient(180deg, #273427 0%, #1c2a1d 100%);
  border-color: #3f6b3f;
  border-top: 2px dashed #62a866;
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_line.sb_moertel.satzbau_line_win::after {
  color: #8fd694; border-color: #8fd694; opacity: .75;
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_pool.sb_kiste {
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 214, 150, .08) 0 8%, transparent 9%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 112px),
    linear-gradient(180deg, #4b2d15 0%, #3a2210 45%, #26160a 100%);
  border-color: #180e05;
  box-shadow: inset 0 9px 16px rgba(0, 0, 0, .55), inset 0 -3px 0 rgba(255, 220, 160, .08);
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_punct { color: #e6d6b4; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
html[data-theme="dark"] body.jupi.sb_body .satzbau_de.sb_uebersetzung {
  background: #16303f; color: #d5e9f5; border-left-color: #4f9fc9;
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_msg.sb_meldung { color: #cfe2ee; }
html[data-theme="dark"] body.jupi.sb_body .satzbau_msg_ok { color: #9ce49f; }
html[data-theme="dark"] body.jupi.sb_body .satzbau_msg_err { color: #ff9a8f; }
html[data-theme="dark"] body.jupi.sb_body .satzbau_done.sb_abnahme {
  background:
    repeating-linear-gradient(0deg,
      rgba(150, 200, 230, .07) 0, rgba(150, 200, 230, .07) 1px,
      transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg,
      rgba(150, 200, 230, .07) 0, rgba(150, 200, 230, .07) 1px,
      transparent 1px, transparent 26px),
    linear-gradient(180deg, #1b2833, #131d26);
  border-color: #3d5566;
  color: #dbe9f2;
}
html[data-theme="dark"] body.jupi.sb_body .satzbau_done h3 { color: var(--sb-gelb-hell); }
html[data-theme="dark"] .sb_dialog {
  background:
    repeating-linear-gradient(0deg,
      rgba(150, 200, 230, .07) 0, rgba(150, 200, 230, .07) 1px,
      transparent 1px, transparent 26px),
    linear-gradient(180deg, #1b2833, #121b23);
  border-color: #3d5566;
  color: #dbe9f2;
}
html[data-theme="dark"] .sb_dialog h3 { color: var(--sb-gelb-hell); border-bottom-color: var(--sb-gelb); }
html[data-theme="dark"] .sb_lernsatz { background: rgba(242, 183, 5, .14); color: #ffe9a8; }
html[data-theme="dark"] .sb_schliessen button { background: #24323d; color: #e8f1f7; border-color: #3d5566; }
html[data-theme="dark"] .sb_schliessen button:hover { background: #2e4150; }

/* ---------- 9. Handy ---------- */
@media (max-width: 820px) {
  body.jupi.sb_body .sb_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .5rem;
    padding: .4rem .55rem .55rem;
  }
  .sb_brand { grid-row: 1; grid-column: 1 / -1; }
  .sb_brand img { width: 36px; height: 36px; }
  .sb_brand_titel { font-size: 1.18rem; }
  body.jupi.sb_body .sb_header .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: .84rem; }
  body.jupi.sb_body .sb_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  body.jupi.sb_body .sb_header .jupi_sprachen_select { max-width: 7.2rem; }
  .sb_helm { display: none; }
  .sb_werte { gap: .3rem; }
}
@media (max-width: 640px) {
  main.jupi_main { padding: .55rem .5rem .9rem !important; gap: .6rem; }
  body.jupi.sb_body .satzbau_panel.sb_konsole { padding: .45rem .5rem; gap: .4rem; }
  body.jupi.sb_body .satzbau_stat { flex: 1 1 22%; min-width: 3.5rem; padding: .14rem .4rem; }
  body.jupi.sb_body .satzbau_stat span { font-size: 1.12rem; }
  body.jupi.sb_body .satzbau_controls.sb_steuerung {
    width: 100%; margin-left: 0; gap: .35rem;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  }
  /* Label ueber dem Feld: in einer Zeile mit dem Select wird es zu breit. */
  .sb_feld { flex-direction: column; align-items: stretch; gap: .1rem; }
  body.jupi.sb_body .sb_steuerung label { font-size: .72rem; }
  body.jupi.sb_body .sb_konsole .jupi_select { width: 100%; min-width: 0; font-size: .88rem; }
  body.jupi.sb_body .sb_knopf { font-size: .82rem; padding: .35rem .5rem; }
  body.jupi.sb_body .satzbau_stage.sb_blatt {
    border-width: 8px; border-radius: 13px; padding: .6rem .55rem .75rem;
  }
  body.jupi.sb_body .satzbau_task_label.sb_auftrag { font-size: .85rem; padding: .4rem .55rem; }
  body.jupi.sb_body .satzbau_line.sb_moertel { min-height: 92px; padding: .5rem; gap: .35rem; }
  body.jupi.sb_body .satzbau_pool.sb_kiste { min-height: 68px; padding: .5rem; gap: .35rem; }
  body.jupi.sb_body .satzbau_tile { font-size: .95rem; padding: .45rem .7rem; min-height: 44px; }
  body.jupi.sb_body .satzbau_btns.sb_btns { gap: .4rem; }
  body.jupi.sb_body .sb_btns button { flex: 1 1 calc(50% - .2rem); font-size: .92rem; padding: .45rem .5rem; }
  body.jupi.sb_body .sb_btns button[hidden] { display: none !important; }
  body.jupi.sb_body .satzbau_done.sb_abnahme { padding: 1rem .7rem; }
  body.jupi.sb_body .satzbau_done h3 { font-size: 1.25rem; }
}
@media (max-width: 380px) {
  body.jupi.sb_body .sb_header .jupi_nav_back { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  body.jupi.sb_body .sb_header .jupi_werkzeuge { grid-row: 3; grid-column: 1 / -1; justify-self: center; }
  .sb_brand h1 { flex-wrap: wrap; justify-content: center; }
  .sb_brand_titel { font-size: 1.05rem; }
}

/* ---------- 10. Bedienziele: mindestens 40 x 40 px ----------
   STEHT AM ENDE: eine spaetere Grundregel aus jupi.css wuerde sonst gewinnen
   (beim Rechen-Raumschiff so gemessen). */
.sb_header button, .sb_header a, .sb_header select,
body.jupi.sb_body .sb_konsole button, body.jupi.sb_body .sb_konsole select,
body.jupi.sb_body .sb_btns button, body.jupi.sb_body .satzbau_done button,
body.jupi.sb_body .satzbau_tile,
.sb_dialog button {
  min-width: 40px; min-height: 40px;
  box-sizing: border-box;
}

/* ---------- 11. Bewegung ---------- */
@keyframes sb_wackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(4px); }
}
@keyframes sb_aufziehen {
  0% { transform: scale(1); }
  45% { transform: scale(1.012); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}