/* ══ 0. Themen-Welt: Werkbank ═══════════════════════════════════════════
   Der Seitenrand um das Spiel traegt den Stil des Spiels: eine warme
   Werkstattwand aus Buche-Paneelen mit Werkzeugen und Wort-Bausteinen,
   statt der gruenen Plattform-Karte. Vorbild sind Neumark 1400, Schatzkarte
   und Raetselrakete - alle stylen ihre Leiste UND den Seitenrand in der
   Welt des Spiels. Alle Regeln sind an body.jupi.sbb_body gekettet: das
   schlaegt die html[data-theme]-Regeln aus jupi.css in BEIDEN Themes.
   Die Farben kommen aus dem Logo (logo.svg): Creme #FCE8B5, Gruen
   #2E7D32/#43A047, Blau #17497f, Gold #d9a441. */

/* Kachelbare Werkstattwand (generiert durch .zcode/satzbau-de-werkbank.cjs)
   plus weiche Lichter: warmes Morgenlicht oben links, Werkbank-Gluehen
   unten. Kein Kacheln der Verlaeufe - die waeren sonst unter dem
   Seitenrumpf ein zweites Mal sichtbar (Streifen unter dem Fuss). */
body.jupi.sbb_body {
  color: #3d2b16;
  min-height: 100vh;
  background-repeat: no-repeat;
  background:
    radial-gradient(1100px 560px at 8% -10%, rgba(255, 244, 214, 0.55) 0%, transparent 58%),
    radial-gradient(900px 480px at 96% -4%, rgba(217, 164, 65, 0.14) 0%, transparent 56%),
    radial-gradient(1400px 520px at 50% 112%, rgba(46, 125, 50, 0.10) 0%, transparent 60%),
    url("werkbank.svg") repeat,
    #f0dcae;
}
/* Dunkler Modus: das Werkstattlicht wird gedimmt. Weil die Wand eine
   deckende Flaeche ist, liegt darueber eine durchsichtige Abend-Schicht,
   die Wand, Werkzeuge und Bausteine wirklich abdunkelt (Lehre aus dem
   Raetselrakete-Neubau: nicht die Kachel selbst austauschen). */
html[data-theme="dark"] body.jupi.sbb_body {
  color: #efe3cc;
  background:
    linear-gradient(rgba(43, 30, 12, 0.50), rgba(43, 30, 12, 0.50)),
    radial-gradient(1100px 560px at 8% -10%, rgba(255, 244, 214, 0.22) 0%, transparent 58%),
    radial-gradient(900px 480px at 96% -4%, rgba(217, 164, 65, 0.08) 0%, transparent 56%),
    radial-gradient(1400px 520px at 50% 112%, rgba(46, 125, 50, 0.06) 0%, transparent 60%),
    url("werkbank.svg") repeat,
    #2a1e0e;
}
/* Die weisse Plattform-Karte darf den Seitenrand nicht mehr zudecken. */
body.jupi.sbb_body .jupi_container > .jupi_main { background: transparent; }
/* Die Plattform-Rasterzeilen dehnen sich sonst auf die ganze Fensterhoehe -
   der Fuss soll unten KLEBEN wie auf der Plattform, darum waechst die
   Hauptzeile (1fr), die den Platzueberfluss schluckt (Muster Raetselrakete).
   Zusatz: die Plattform-CSS reserviert 3rem UNTER dem Container - auf dem
   Papier-Hintergrund unsichtbar, hier liegt darunter die Wand. */
body.jupi.sbb_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.sbb_body .jupi_container { min-height: 100dvh; }
}

/* ---------- 3-Zonen JUPI-Leiste als Werkbank-Brett (Typ 2, 3.13.2) ----------
   Links "Alle Spiele", mittig Logo + Titel, rechts Sprache + Dark-Pill.
   Die Aufteilung bleibt die Plattform-Vorgabe, die Optik ist die des
   Spiels: ein dunkles Walnussbrett mit Messing-Kante und Holzmaserung. */
body.jupi.sbb_body .sbb_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: #f7e8c8;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 236, 190, 0.05) 0 3px, transparent 3px 14px),
    linear-gradient(135deg, #4a3620 0%, #5d4426 55%, #6b4f2c 100%);
  border: 1px solid rgba(217, 164, 65, 0.45);
  border-bottom: 3px solid #d9a441;
  border-radius: 1rem;
  box-shadow: 0 6px 22px rgba(43, 30, 12, 0.45), inset 0 1px 0 rgba(255, 236, 190, 0.16);
}
html[data-theme="dark"] body.jupi.sbb_body .sbb_header {
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 236, 190, 0.04) 0 3px, transparent 3px 14px),
    linear-gradient(135deg, #2e2113 0%, #3d2b16 55%, #4a3620 100%);
}

/* Zurueck-Pille: heller Baustein mit Messing-Rand statt weisser Pille. */
body.jupi.sbb_body .sbb_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: #3d2b16;
  background: linear-gradient(180deg, #fdf3d5, #f3ddb0);
  border: 1px solid rgba(217, 164, 65, 0.65);
  box-shadow: 0 2px 0 rgba(122, 92, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s;
}
body.jupi.sbb_body .sbb_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #fffbe9, #f8e7c2);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(122, 92, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Marke: Logo mit Gold-Ring, Titel in warmer Schrift. */
body.jupi.sbb_body .sbb_header .neu_marke {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0.55rem;
  min-width: 0;
  font-size: 1.15rem;
  text-align: center;
}
body.jupi.sbb_body .sbb_header .neu_marke img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  flex: none;
  border-radius: 9px;
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.65), 0 0 14px rgba(217, 164, 65, 0.30);
}
body.jupi.sbb_body .sbb_header .neu_marke strong {
  color: #fdf3d5;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

body.jupi.sbb_body .sbb_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
/* Sprachwahl als Holz-Pille mit Messing-Rand (nicht mehr Weiss auf Gruen). */
body.jupi.sbb_body .sbb_header .jupi_sprachen_wahl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
body.jupi.sbb_body .sbb_header .jupi_sprachen_select {
  width: 10rem;
  max-width: 100%;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(217, 164, 65, 0.65);
  border-radius: 2rem;
  padding: 0.4rem 0.65rem;
  background: rgba(46, 33, 19, 0.65);
  color: #f7e8c8;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}
body.jupi.sbb_body .sbb_header .jupi_sprachen_select:hover { background: rgba(62, 45, 26, 0.8); }
body.jupi.sbb_body .sbb_header .jupi_sprachen_select option {
  color: #3d2b16;
  background: #fdf3d5;
}
/* Dark-Mode-Pill: 74x40, Holz-Fuellung mit Messing-Rand. */
body.jupi.sbb_body .sbb_header #jupi_theme_toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: 74px;
  height: 40px;
  min-width: 74px;
  min-height: 40px;
  max-height: 40px;
  border: 1px solid rgba(217, 164, 65, 0.65);
  border-radius: 24px;
  padding: 0 9px;
  box-sizing: border-box;
  background: rgba(46, 33, 19, 0.65);
  box-shadow: none;
}
body.jupi.sbb_body .sbb_header .jts_icon {
  font-size: 12px;
  line-height: 1;
  z-index: 1;
}
body.jupi.sbb_body .sbb_header .jts_thumb {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 32px;
  height: 32px;
  min-height: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffbe9, #f3ddb0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}
html[data-theme="dark"] body.jupi.sbb_body .sbb_header .jts_thumb { left: 38px; }
body.jupi.sbb_body .sbb_header .jts_sun { margin-right: auto; }
body.jupi.sbb_body .sbb_header .jts_moon { margin-left: auto; }

/* ---------- Steuerleiste: Werkzeug-Konsole (Regel 3.13.3) ----------
   Dunkle Nussbaum-Konsole ueber der hellen Werkbank: Punkte und Stufe
   links, Hilfe und Ton rechts. Sie bleibt in BEIDEN Themes dunkel - der
   Theme-Schalter hellt nur die Wand auf, nicht das Werkzeug. */
body.jupi.sbb_body .satzbau_panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  align-items: center;
  padding: 0.7rem 1rem;
  margin-bottom: 0.7rem;
  color: #f7e8c8;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 236, 190, 0.04) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #3d2b16 0%, #4a3620 60%, #55402a 100%);
  border: 1px solid rgba(217, 164, 65, 0.40);
  border-top: 2px solid rgba(217, 164, 65, 0.65);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(43, 30, 12, 0.35), inset 0 1px 0 rgba(255, 236, 190, 0.12);
}
body.jupi.sbb_body .satzbau_stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 1 4.2rem;
}
body.jupi.sbb_body .satzbau_stat label {
  font-weight: 700;
  font-size: 0.82rem;
  color: #d9b98a;
}
body.jupi.sbb_body .satzbau_stat span {
  font-size: 1.35rem;
  font-weight: 800;
  color: #f7c948;
  text-shadow: 0 0 10px rgba(247, 201, 72, 0.35);
}
body.jupi.sbb_body .satzbau_controls {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
}
body.jupi.sbb_body .satzbau_controls label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #d9b98a;
}
body.jupi.sbb_body .satzbau_controls .jupi_select {
  min-height: 40px;
  border-radius: 0.6rem;
  border: 1.5px solid rgba(217, 164, 65, 0.65);
  background: #2e2113;
  color: #f7e8c8;
  font-size: 0.92rem;
  font-weight: 700;
}
body.jupi.sbb_body .satzbau_controls .jupi_select:focus {
  outline: none;
  border-color: #d9a441;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.25);
}
body.jupi.sbb_body .satzbau_controls .jupi_select option {
  color: #3d2b16;
  background: #fdf3d5;
}
/* Hilfe- und Ton-Knopf als Messing-Pillen auf der dunklen Konsole. */
body.jupi.sbb_body .satzbau_controls .jupi_btn.jupi_btn_alt {
  background: rgba(217, 164, 65, 0.14);
  border: 1px solid rgba(217, 164, 65, 0.55);
  color: #f7e8c8;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.12);
}
body.jupi.sbb_body .satzbau_controls .jupi_btn.jupi_btn_alt:hover {
  background: rgba(217, 164, 65, 0.30);
  color: #fffbe9;
}

/* ---------- Buehne: die Werkbank-Platte ---------- */
body.jupi.sbb_body .satzbau_stage {
  position: relative;
  padding: 1.1rem 1rem 1.3rem;
  border-radius: 1.1rem;
  /* Buchen-Holzplatte: waagrechte Maserung + weicher Lichtschein oben */
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255, 250, 232, 0.65) 0%, transparent 70%),
    repeating-linear-gradient(180deg,
      rgba(160, 120, 66, 0.10) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #f7e9c6 0%, #f2ddb2 60%, #ecd5a4 100%);
  border: 1px solid #b58a4e;
  border-bottom: 4px solid #8a6538;
  box-shadow: 0 6px 20px rgba(43, 30, 12, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #3d2b16;
}
html[data-theme="dark"] body.jupi.sbb_body .satzbau_stage {
  /* Die Werkbank bleibt auch im Dunkeln ein Gegenstand aus Holz - nur
     das Licht auf ihr wird dumpfer. */
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255, 250, 232, 0.20) 0%, transparent 70%),
    repeating-linear-gradient(180deg,
      rgba(160, 120, 66, 0.14) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #d9c49a 0%, #cdb27f 60%, #c2a671 100%);
}
/* Vier Schrauben in den Ecken der Bank (eine Flaeche, vier Positionen). */
body.jupi.sbb_body .satzbau_stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, #9b7a48 0 2.2px, #7a5c33 2.4px 3.6px, transparent 4px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  opacity: 0.75;
}

body.jupi.sbb_body .satzbau_task_label {
  margin: 0 0 0.7rem;
  font-weight: 700;
  color: #6b4f2c;
}
body.jupi.sbb_body .satzbau_task_label::before {
  content: "📐 ";
}

/* Satzstreifen: die Montageschiene - dunkler Stahl mit gestrichelter
   Baulinie (aus dem Logo) und Messing-Spannbacken an den Enden. */
body.jupi.sbb_body .satzbau_line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 5.5rem;
  padding: 0.7rem 1.1rem;
  gap: 0.4rem;
  border-radius: 0.8rem;
  background: linear-gradient(180deg, #33465c 0%, #27394c 55%, #1f2e3e 100%);
  border: 1px solid #17222e;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* gestrichelte Baulinie in der Schiene (wie im Logo) */
body.jupi.sbb_body .satzbau_line::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 50%;
  border-top: 3px dashed rgba(217, 164, 65, 0.35);
  pointer-events: none;
}
/* leere Schiene: keinen Linienhinweis zeichnen, der jupi.css-Platzhalter
   sticht auf dem Stahl zu hart heraus */
body.jupi.sbb_body .satzbau_line:empty::before { content: none; }
body.jupi.sbb_body .satzbau_line:empty { min-height: 5.5rem; }

/* Wort-Kacheln: Holzbausteine mit gefaster Kante. */
body.jupi.sbb_body .satzbau_tile {
  position: relative;
  min-width: 40px;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: 0.55rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: #17497f;
  background: linear-gradient(180deg, #fffdf6 0%, #f6e7c4 100%);
  border: 2px solid #2E7D32;
  box-shadow: 0 3px 0 rgba(46, 125, 50, 0.45), 0 4px 6px rgba(43, 30, 12, 0.25);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  touch-action: manipulation;
}
body.jupi.sbb_body .satzbau_tile:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ffffff 0%, #fcf2d8 100%);
  box-shadow: 0 5px 0 rgba(46, 125, 50, 0.45), 0 6px 8px rgba(43, 30, 12, 0.25);
}
body.jupi.sbb_body .satzbau_tile:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(46, 125, 50, 0.45), 0 2px 4px rgba(43, 30, 12, 0.25);
}
body.jupi.sbb_body .satzbau_tile:focus-visible {
  outline: 3px solid #d9a441;
  outline-offset: 2px;
}
body.jupi.sbb_body .satzbau_tile:disabled { cursor: default; }
/* im Streifen liegende Bausteine: Bauholz-Kante statt Gruen-Rand */
body.jupi.sbb_body .satzbau_line .satzbau_tile {
  background: linear-gradient(180deg, #fdf3d5 0%, #f3ddb0 100%);
  box-shadow: 0 3px 0 rgba(122, 92, 51, 0.6), 0 4px 6px rgba(0, 0, 0, 0.35);
  border-color: #a87c2a;
}
body.jupi.sbb_body .satzbau_tile_ok {
  background: linear-gradient(180deg, #66bb6a 0%, #43A047 100%);
  border-color: #2E7D32;
  color: #ffffff;
  box-shadow: 0 3px 0 rgba(27, 94, 32, 0.6);
}
body.jupi.sbb_body .satzbau_tile_err {
  background: linear-gradient(180deg, #ef9a9a 0%, #e57373 100%);
  border-color: #c62828;
  color: #ffffff;
  animation: satzbau_shake 0.3s;  /* Keyframes liegen in jupi.css */
}
/* Satzzeichen: kleines Goldkaestchen */
body.jupi.sbb_body .satzbau_punct {
  min-width: 40px;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: 0.55rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: #3d2b16;
  background: linear-gradient(180deg, #f7c948, #d9a441);
  border: 2px solid #a87c2a;
  box-shadow: 0 3px 0 rgba(122, 92, 51, 0.6);
}
body.jupi.sbb_body .satzbau_line_win {
  background: linear-gradient(180deg, #3e5c3e 0%, #2f5a33 60%, #24502b 100%);
  border-color: #2E7D32;
  animation: satzbau_pop 0.5s;
}

/* Pool: das Teilefach unter der Schiene - eingelassene Ablage. */
body.jupi.sbb_body .satzbau_pool {
  display: flex;
  flex-wrap: wrap;
  min-height: 3.6rem;
  padding: 0.7rem;
  gap: 0.4rem;
  border-radius: 0.8rem;
  background: linear-gradient(180deg, rgba(122, 92, 51, 0.22), rgba(122, 92, 51, 0.12));
  border: 2px dashed rgba(138, 101, 56, 0.55);
  box-shadow: inset 0 2px 6px rgba(43, 30, 12, 0.18);
}
body.jupi.sbb_body .satzbau_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
/* Hauptknopf (Pruefen/Weiter) bleibt in BEIDEN Themes Baukasten-Gruen -
   die Plattform faerbt ihn im Dunkelmodus orange, das passt nicht zur
   Gruen-Welt des Logos. */
body.jupi.sbb_body .satzbau_btns .jupi_btn {
  min-height: 40px;
  border-radius: 0.7rem;
  box-shadow: 0 3px 0 rgba(27, 94, 32, 0.5);
  background: linear-gradient(180deg, #66bb6a, #43A047);
  border: 1px solid #2E7D32;
  color: #ffffff;
  font-weight: 800;
}
body.jupi.sbb_body .satzbau_btns .jupi_btn:hover {
  background: linear-gradient(180deg, #74cc78, #4caf50);
}
body.jupi.sbb_body .satzbau_btns .jupi_btn:active { transform: translateY(1px); }
body.jupi.sbb_body .satzbau_btns .jupi_btn.jupi_btn_alt {
  background: linear-gradient(180deg, #fffdf6, #f6e7c4);
  border: 2px solid #a87c2a;
  color: #6b4f2c;
  box-shadow: 0 3px 0 rgba(122, 92, 51, 0.5);
}
body.jupi.sbb_body .satzbau_btns .jupi_btn.jupi_btn_alt:hover {
  background: linear-gradient(180deg, #ffffff, #fcf2d8);
}
body.jupi.sbb_body .satzbau_msg {
  min-height: 1.7rem;
  margin-top: 0.7rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
body.jupi.sbb_body .satzbau_msg_ok { color: #2E7D32; }
body.jupi.sbb_body .satzbau_msg_err { color: #b3392b; }
html[data-theme="dark"] body.jupi.sbb_body .satzbau_msg_ok { color: #1b5e20; }
html[data-theme="dark"] body.jupi.sbb_body .satzbau_msg_err { color: #8e2015; }

/* Rundenabschluss: Urkunden-Karte auf der Bank. */
body.jupi.sbb_body .satzbau_done {
  padding: 1.2rem;
  margin-top: 0.8rem;
  border-radius: 1rem;
  text-align: center;
  background: linear-gradient(180deg, #fffdf6, #fdf3d5);
  border: 1px solid #a87c2a;
  border-top: 4px solid #d9a441;
  box-shadow: 0 6px 18px rgba(43, 30, 12, 0.30);
  color: #3d2b16;
}
body.jupi.sbb_body .satzbau_done h3 { margin: 0 0 0.4rem; }
body.jupi.sbb_body .daz_stars {
  font-size: 1.8rem;
  color: #d9a441;
  text-shadow: 0 0 12px rgba(217, 164, 65, 0.4);
  margin: 0.2rem 0;
}

/* ---------- ❓-Hilfe-Fenster (Regel 3.13.4) ----------
   Das Fenster folgt dem Theme (Plattform-Flaeche), bekommt aber einen
   Messing-Rahmen, damit es zur Werkbank-Welt passt. */
body.jupi.sbb_body .neu_dialog {
  width: min(48rem, calc(100vw - 24px));
  max-height: 88dvh;
  overflow: auto;
  border: 2px solid #d9a441;
  border-radius: 1rem;
  background: var(--ct-color, #fffdf6);
  color: var(--blk-color, #3d2b16);
  padding: 1rem;
  line-height: 1.55;
  box-shadow: 0 16px 48px rgba(43, 30, 12, 0.45);
}
body.jupi.sbb_body .neu_dialog::backdrop { background: #2b1e0ccc; }
body.jupi.sbb_body .neu_dialog .satzbau_lernziel {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--grey50-color, #f6f2e6);
  border-left: 4px solid #2E7D32;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ---------- Fuss: dunkles Holzband mit Messing-Kante ---------- */
body.jupi.sbb_body .jupi_container > .jupi_footer {
  color: #d9b98a;
  background: linear-gradient(180deg, #3d2b16, #33230f);
  border-top: 2px solid rgba(217, 164, 65, 0.65);
  box-shadow: 0 -6px 20px rgba(43, 30, 12, 0.30);
}
body.jupi.sbb_body .jupi_container > .jupi_footer a {
  color: #f7c948;
  font-weight: 700;
}

/* ---------- Handy (390 px) ---------- */
@media (max-width: 600px) {
  body.jupi.sbb_body .sbb_header .jupi_nav_back { white-space: nowrap; }
  body.jupi.sbb_body .sbb_header .jupi_sprachen_select { max-width: 8rem; }
  body.jupi.sbb_body .satzbau_panel { padding: 0.6rem 0.75rem; }
  body.jupi.sbb_body .satzbau_stat { flex: 1 1 20%; }
  body.jupi.sbb_body .satzbau_controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  body.jupi.sbb_body .satzbau_controls label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  body.jupi.sbb_body .satzbau_controls .jupi_select { width: 100%; min-width: 0; }
  body.jupi.sbb_body .satzbau_tile { font-size: 1rem; }
}
/* Sehr schmale Leisten: drei Zonen passen nicht mehr nebeneinander. */
@media (max-width: 430px) {
  body.jupi.sbb_body .sbb_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
  }
  body.jupi.sbb_body .sbb_header .neu_marke { grid-row: 1; grid-column: 1 / -1; }
  body.jupi.sbb_body .sbb_header .neu_marke img { width: 36px !important; height: 36px !important; }
  body.jupi.sbb_body .sbb_header .neu_marke strong { font-size: 1.05rem; }
  body.jupi.sbb_body .sbb_header .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: 0.85rem; }
  body.jupi.sbb_body .sbb_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  body.jupi.sbb_body * { animation: none !important; transition: none !important; }
}