/* story-baukasten/styles.css */
/* GUI 3.13 Typ 3: Werkzeuge (Dünne JUPI-Leiste oben, Menüleiste horizontal, Graph- und Buchmodus) */

:root {
  --sb-bg: #F8FAFC;
  --sb-card-bg: #FFFFFF;
  --sb-border: #E2E8F0;
  --sb-text: #0F172A;
  --sb-text-muted: #64748B;
  --sb-accent: #4338CA;
  --sb-accent-hover: #3730A3;
  --sb-danger: #EF4444;
  --sb-active-bg: #EEF2FF;
  --sb-active-border: #6366F1;
  --sb-pfeil: #6366F1;
  --sb-pfeil-bedingt: #F59E0B;
  --sb-port: #4F46E5;
}

[data-theme="dark"] {
  --sb-bg: #0F172A;
  --sb-card-bg: #1E293B;
  --sb-border: #334155;
  --sb-text: #F8FAFC;
  --sb-text-muted: #94A3B8;
  --sb-accent: #6366F1;
  --sb-accent-hover: #818CF8;
  --sb-danger: #F87171;
  --sb-active-bg: #312E81;
  --sb-active-border: #818CF8;
  --sb-pfeil: #818CF8;
  --sb-pfeil-bedingt: #FBBF24;
  --sb-port: #818CF8;
}

/* ------------------------------------------------------------------
   WICHTIG: [hidden] muss wirklich verbergen.
   .sb_ansicht_buch setzt display:flex und schlaegt damit die
   Browser-Regel [hidden]{display:none} (gleiche Spezifitaet? nein -
   die Klassenselektoren sind spezifischer). Dadurch lag die leere
   Buchseite IMMER ueber dem Welten-Graphen und die Szenenkarten
   schrieben ueber sie. Dieses !important stellt die Regel wieder her.
   ------------------------------------------------------------------ */
[hidden] {
  display: none !important;
}

body.sb_body {
  margin: 0;
  padding: 0;
  background-color: var(--sb-bg);
  color: var(--sb-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ================= Kopfzeile (AGENTS.md 3.13.2 Typ 3) =================
   Drei Zonen nach Muster Rechen-Raumschiff: Zurück links (weiße Kontrast-Pille),
   Paket-Marke MITTE mit weißem Titel, Sprachwahl und Dark-Mode-Pill rechts.
   Raster 1fr auto 1fr für perfekte Zentrierung der Marke. */
.sb_header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #2e7d32 0%, var(--link-color, #43a047) 55%, #66bb6a 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
  border-bottom: none;
  box-sizing: border-box;
  z-index: 20;
  flex: 0 0 auto;
}

html[data-theme="dark"] .sb_header {
  background: linear-gradient(135deg, #1a1a1a 0%, #262626 55%, #4a2f0a 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.sb_marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.sb_marke_logo {
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
}

.sb_marke_titel {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.sb_header > .jupi_nav_back {
  justify-self: start;   /* im Raster nicht die ganze Spalte aufziehen */
  background: #ffffff;
  color: var(--link-color, #43a047);
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.2;
}

.sb_header > .jupi_nav_back:hover {
  background: #f1f8e9;
  transform: translateY(-1px);
}

html[data-theme="dark"] .sb_header > .jupi_nav_back {
  background: #1E1E1E;
  color: #FB8C00;
  border: 1px solid #FB8C00;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .sb_header > .jupi_nav_back:hover {
  background: #2a2118;
}

.sb_header .jupi_sprachen_select {
  font: inherit;
  font-size: 0.85rem;
  color: #ffffff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  min-height: 40px;
  max-width: 17rem;
}

.sb_header .jupi_sprachen_select:hover {
  background: rgba(255, 255, 255, 0.26);
}

.sb_header .jupi_sprachen_select:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.sb_header .jupi_sprachen_select option {
  color: #212121;
  background: #ffffff;
}

html[data-theme="dark"] .sb_header .jupi_sprachen_select {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

html[data-theme="dark"] .sb_header .jupi_sprachen_select option {
  color: #e0e0e0;
  background: #1e1e1e;
}

.sb_kopf_rechts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
}

/* ================= Horizontale Menüleiste =================
   Umbruch statt waagerechtem Rollen (3.13.5.3). Unter 620 px nur die
   Symbole - 11 beschriftete Knöpfe passten auf dem Handy in fuenf
   Zeilen und fraessen ein Viertel des Bildschirms. */
.sb_menuleiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem;
  padding: 0.35rem 0.6rem;
  background-color: var(--sb-card-bg);
  border-bottom: 1px solid var(--sb-border);
  z-index: 15;
  flex: 0 0 auto;
}

.sb_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--sb-text);
  background-color: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.sb_btn:hover {
  background-color: var(--sb-border);
}

.sb_btn:focus-visible {
  outline: 3px solid var(--sb-accent);
  outline-offset: 2px;
}

.sb_btn.is_active {
  background-color: var(--sb-active-bg);
  border-color: var(--sb-active-border);
  color: var(--sb-accent);
  font-weight: 600;
}

.sb_btn_wirksam {
  background-color: var(--sb-accent);
  color: #FFFFFF;
  border-color: var(--sb-accent);
}

.sb_btn_wirksam:hover {
  background-color: var(--sb-accent-hover);
}

.sb_btn_gefahr {
  color: var(--sb-danger);
  border-color: var(--sb-danger);
}

.sb_btn_gefahr:hover {
  background-color: var(--sb-danger);
  color: #FFFFFF;
}

.sb_btn_klein {
  min-height: 40px;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.sb_btn_breit {
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  text-align: left;
}

.sb_btn_ico {
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}

.sb_menutrenner {
  width: 1px;
  height: 24px;
  background-color: var(--sb-border);
  margin: 0 0.15rem;
}

/* Erzwingt den Zeilenumbruch nach den Ansichts-Knoepfen (siehe index.html). */
.sb_menubrech {
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

/* Ein Trennstrich direkt nach dem Umbruch haengt linksbuendig allein -
   der waere nur ein weiterer Streifen am Zeilenanfang. */
.sb_menubrech + .sb_menutrenner {
  display: none;
}

/* ================= Hauptbereich ================= */
.sb_hauptbereich {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 0;   /* ohne das wächst der Bereich im Flex-Container ueber den Bildschirm */
}

/* Graph-Ansicht */
.sb_ansicht_graph {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  cursor: grab;
  /* Ohne touch-action scrollt am Tablet die Seite, statt die Karte zu
     bewegen - der Graph war auf Touch-Geraeten praktisch unbedienbar. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: radial-gradient(var(--sb-border) 1px, transparent 1px) 0 0 / 24px 24px var(--sb-bg);
}

.sb_ansicht_graph:active {
  cursor: grabbing;
}

.sb_graph_canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sb_graph_karten {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* --- Ebenen ueber dem Graphen: Titel-Chip und Zoom-Werkzeuge --- */
.sb_graph_ecke {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.sb_graph_ecke_oben {
  top: 0.5rem;
  left: 0.5rem;
  max-width: calc(100% - 1rem);
}

.sb_graph_ecke_unten {
  bottom: 0.5rem;
  right: 0.5rem;
}

/* Dokument-Chip: an welcher Geschichte arbeite ich? Klick = umbenennen.
   KEINE Infoleiste nach 3.13.4 - das ist eine Kopfzeile des Dokuments,
   kein didaktischer Hinweiskasten. */
.sb_titel_chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  max-width: 100%;
  padding: 0.25rem 0.7rem;
  background: var(--sb-card-bg);
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  cursor: pointer;
  font-family: inherit;
  color: var(--sb-text);
  text-align: left;
}

.sb_titel_chip:hover {
  border-color: var(--sb-accent);
}

.sb_titel_chip:focus-visible {
  outline: 3px solid var(--sb-accent);
  outline-offset: 2px;
}

.sb_titel_chip_ico { font-size: 1.05rem; }

.sb_titel_chip_text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.sb_titel_chip_titel {
  font-weight: 700;
  font-size: 0.9rem;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb_titel_chip_autor {
  font-size: 0.72rem;
  color: var(--sb-text-muted);
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb_titel_chip_pencil { font-size: 0.85rem; opacity: 0.75; }

.sb_zoom_btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--sb-text);
  background: var(--sb-card-bg);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  cursor: pointer;
}

.sb_zoom_btn:hover { border-color: var(--sb-accent); color: var(--sb-accent); }

.sb_zoom_btn:focus-visible {
  outline: 3px solid var(--sb-accent);
  outline-offset: 2px;
}

.sb_zoom_text {
  min-width: 52px;
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--sb-text-muted);
  background: var(--sb-card-bg);
  border: 1px solid var(--sb-border);
  border-radius: 8px;
}

/* ================= Szenen-Karte im Graph ================= */
.sb_szene_karte {
  position: absolute;
  top: 0; left: 0;
  pointer-events: auto;
  background-color: var(--sb-card-bg);
  border: 2px solid var(--sb-border);
  border-radius: 12px;
  padding: 0.55rem 0.6rem 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  user-select: none;
  /* WICHTIG: Die Karte wird mit translate(...) scale(...) platziert, die
     Canvas-Pfeile mit translate(...) scale(...) ab der linken oberen Ecke.
     Ohne dieses transform-origin skaliert die Karte um ihre MITTE und
     rutscht bei Zoom 2 um 110 px nach links - die Pfeile zeigten dann ins
     Leere. (Standard ist 50% 50%.) */
  transform-origin: 0 0;
}

.sb_szene_karte:hover {
  border-color: var(--sb-accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.sb_szene_karte.is_start {
  border-color: #10B981;
}

.sb_szene_karte.is_ausgewaehlt {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-active-bg), 0 8px 20px rgba(0, 0, 0, 0.16);
}

.sb_szene_karte.is_ziel {
  border-color: var(--sb-port);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.28), 0 8px 20px rgba(0, 0, 0, 0.16);
}

.sb_karte_kopf {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.sb_karte_icon {
  font-size: 1.2rem;
  line-height: 1.15;
  flex: 0 0 auto;
}

/* Szenen mit Bild zeigen statt des Emojis ein kleines Vorschaubild. Das
   kostet nur wenige Pixel Hoehe (nur bei Szenen MIT Bild) und macht den
   Welten-Graph auf einen Blick lesbar - wie ein Storyboard. */
.sb_karte_icon_bild {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--sb-border);
  background: var(--sb-bg);
}

/* Titel: zwei Zeilen statt einem abgeschnittenen "Der geheimnisv..." */
.sb_karte_titel {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sb-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sb_karte_badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex: 0 0 auto;
  align-self: flex-start;
}

.sb_badge_start { background: #D1FAE5; color: #065F46; }
.sb_badge_normal { background: #E0E7FF; color: #3730A3; }
.sb_badge_sieg { background: #FEF3C7; color: #92400E; }
.sb_badge_gameover { background: #FEE2E2; color: #991B1B; }

[data-theme="dark"] .sb_badge_start { background: #064E3B; color: #6EE7B7; }
[data-theme="dark"] .sb_badge_normal { background: #312E81; color: #C7D2FE; }
[data-theme="dark"] .sb_badge_sieg { background: #78350F; color: #FDE68A; }
[data-theme="dark"] .sb_badge_gameover { background: #7F1D1D; color: #FECACA; }

.sb_karte_text {
  font-size: 0.75rem;
  color: var(--sb-text-muted);
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sb_karte_fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--sb-border);
  font-size: 0.7rem;
  color: var(--sb-accent);
  font-weight: 600;
}

.sb_karte_fuss_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ausgangspunkt zum Zeichnen einer Entscheidung.
   Auch er waechst und schrumpft nicht mit dem Zoom (Gegenzoom) - er ist der
   Hauptgriff des Baukastens und muss mit dem Finger treffbar bleiben. */
.sb_karte_port {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%) scale(var(--sb-gegenzoom, 1));
  transform-origin: center left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sb-port);
  border: 3px solid var(--sb-card-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  cursor: crosshair;
  touch-action: none;
}

/* Der sichtbare Punkt sitzt in der Mitte des 40-px-Griffs - sonst wuerde der
   Kreis bei Zoom != 1 zu gross wirken. */
.sb_karte_port::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.sb_karte_port:hover {
  transform: translateY(-50%) scale(calc(var(--sb-gegenzoom, 1) * 1.15));
}

.sb_szene_karte.is_start .sb_karte_port { background: #10B981; }

/* Aktionen direkt auf der Karte: verdoppeln / loeschen.
   Sie sitzen im Fuss der Karte, nicht oben ueber dem Titel - dort haben sie
   den Titel auf "Der geheim..." zusammengeschoben.

   GEGENZOOM: Die Karte skaliert mit dem Graphen, die Bedienziele sollen aber
   laut AGENTS.md 3.13.5.3 immer mindestens 40 x 40 px gross bleiben. Ohne
   Ausgleich schrumpften sie beim Herauszoomen auf 17 px (Handy). Deshalb
   bekommen sie die Umkehrung des Zoomfaktors gesetzt (JS, siehe
   setzeKartenPositionen). */
.sb_karte_aktionen {
  display: flex;
  gap: 0.1rem;
  flex: 0 0 auto;
}

.sb_karte_knopf {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--sb-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.85;
  transform: scale(var(--sb-gegenzoom, 1));
  transition: opacity 0.15s ease;
}

.sb_szene_karte:hover .sb_karte_knopf,
.sb_szene_karte:focus-within .sb_karte_knopf { opacity: 1; }

/* Ohne Hover (Tablet, Handy) gibt es kein Aufdunkeln - dann bleiben sie
   sichtbar, sonst findet man das Loeschen nie. */
@media (hover: none) {
  .sb_karte_knopf { opacity: 1; }
}

.sb_karte_knopf:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.sb_karte_knopf:focus-visible {
  outline: 2px solid var(--sb-accent);
  opacity: 1;
}

.sb_karte_knopf:hover:not(:disabled) {
  background: var(--sb-bg);
  border-color: var(--sb-border);
  color: var(--sb-text);
}

.sb_karte_knopf[data-aktion="loeschen"]:hover:not(:disabled) {
  color: #FFFFFF;
  background: var(--sb-danger);
  border-color: var(--sb-danger);
}

/* ================= Buch-Ansicht (Playtest) ================= */
.sb_ansicht_buch {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: center;
  background-color: var(--sb-bg);
}

.sb_buch_seite {
  max-width: 680px;
  width: 100%;
  background-color: var(--sb-card-bg);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  height: fit-content;
}

.sb_buch_kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 2px solid var(--sb-border);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.sb_buch_titel { margin: 0; font-size: 1.5rem; color: var(--sb-accent); }
.sb_buch_autor { font-size: 0.85rem; color: var(--sb-text-muted); }

.sb_buch_inventar_box {
  background-color: var(--sb-bg);
  border: 1px dashed var(--sb-border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.sb_buch_icon { font-size: 3.5rem; text-align: center; margin: 0.75rem 0 0.25rem; }
.sb_buch_szene_titel { font-size: 1.3rem; margin-top: 0; text-align: center; }

/* Szenenbild im Buch: fester 16:9-Rahmen wie in einem Visual Novel.
   Ein Klick/Tipp oeffnet die Grossansicht (.sb_bild_gross). */
.sb_buch_bild {
  margin: 0 0 1rem;
  border-radius: 14px;
  overflow: hidden;
  background: #0B1220;
  border: 1px solid var(--sb-border);
  line-height: 0;
  cursor: zoom-in;
}

.sb_buch_bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sb_buch_bild:focus-visible {
  outline: 3px solid var(--sb-accent);
  outline-offset: 2px;
}

/* Grossansicht eines Bildes: ganzer Bildschirm, Bild vollstaendig. */
.sb_bild_gross {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.97);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}

.sb_bild_gross img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
}

.sb_bild_gross_zu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.sb_bild_gross_zu:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

.sb_buch_text {
  font-size: 1.15rem;
  line-height: 1.8;
  margin: 1.5rem 0;
  white-space: pre-wrap;
}

.sb_buch_choices {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.75rem;
}

.sb_buch_wahl_btn {
  background-color: var(--sb-accent);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: left;
}

.sb_buch_wahl_btn:hover:not(:disabled) {
  background-color: var(--sb-accent-hover);
}

.sb_buch_wahl_btn:disabled {
  background-color: var(--sb-border);
  color: var(--sb-text-muted);
  cursor: not-allowed;
}

.sb_buch_wahl_braucht {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 0.2rem;
}

.sb_buch_ende_banner {
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 1.5rem;
  background-color: var(--sb-bg);
  border-radius: 10px;
  border: 1px solid var(--sb-border);
}

.sb_buch_fuss {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sb-border);
}

/* ================= Dialoge & Editor ================= */
.sb_dialog {
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  background-color: var(--sb-card-bg);
  color: var(--sb-text);
  padding: 1.5rem;
  max-width: 660px;
  width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.sb_dialog h2 { margin-top: 0; }

.sb_dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.sb_form_gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.sb_form_reihe {
  display: grid;
  grid-template-columns: 1fr 150px 90px;
  gap: 0.6rem;
  align-items: end;
}

.sb_form_gruppe_icon .sb_input_icon {
  text-align: center;
  font-size: 1.2rem;
}

/* Beschriftung links, Wortzahl rechts - als Klasse, nicht als Inline-Style,
   damit die i18n-Laeufe nichts daran zerstoeren koennen. */
.sb_label_zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.sb_label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sb-text-muted);
}

.sb_input, .sb_select, .sb_textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background-color: var(--sb-bg);
  color: var(--sb-text);
  font-size: 0.95rem;
  box-sizing: border-box;
  font-family: inherit;
  min-height: 40px;
}

.sb_input:focus-visible, .sb_select:focus-visible, .sb_textarea:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: 1px;
}

.sb_textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

/* Entscheidungs-Zeilen: Spalten wie die Ueberschriften darueber */
.sb_wahl_kopf, .sb_choice_zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 40px;
  gap: 0.4rem;
  align-items: center;
}

.sb_wahl_kopf {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sb-text-muted);
  padding: 0 0.15rem 0.3rem;
}

.sb_choice_zeile {
  margin-bottom: 0.4rem;
}

.sb_btn_del {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--sb-danger);
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  cursor: pointer;
}

.sb_btn_del:hover {
  background: var(--sb-danger);
  color: #FFFFFF;
}

.sb_hinweis {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--sb-text-muted);
}

/* ================= Bild-Feld im Szenen-Editor ================= */
.sb_bild_feld { margin-top: 0.25rem; }

.sb_bild_info {
  font-size: 0.78rem;
  color: var(--sb-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sb_bild_zone {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem;
  border: 1px dashed var(--sb-border);
  border-radius: 10px;
  background-color: var(--sb-bg);
}

/* Beim Ziehen einer Bilddatei leuchtet die Ablageflaeche auf. */
.sb_bild_zone.is_ziel {
  border-color: var(--sb-accent);
  background-color: var(--sb-active-bg);
}

.sb_bild_vorschau {
  position: relative;
  flex: 1 1 220px;
  max-width: 300px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--sb-card-bg);
  border: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sb_bild_vorschau img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb_bild_leer {
  padding: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--sb-text-muted);
  text-align: center;
}

.sb_bild_knoepfe {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: auto;   /* rechts buendig, damit die Flaeche nicht leer wirkt */
}

.sb_bild_status {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.sb_bild_status.is_ok { color: #047857; }
.sb_bild_status.is_fehler { color: var(--sb-danger); font-weight: 600; }

[data-theme="dark"] .sb_bild_status.is_ok { color: #6EE7B7; }

.sb_export_info {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--sb-text-muted);
}

.sb_export_info.is_warnung {
  color: #B45309;
  font-weight: 600;
}

[data-theme="dark"] .sb_export_info.is_warnung { color: #FBBF24; }

/* ================= Rechtsklick-Menü der Graph-Fläche =================
   Eigenes Menü statt des Browser-Kontextmenüs. Position kommt aus game.js
   (position:fixed, damit clientX/clientY direkt stimmen). */
.sb_kontext {
  position: fixed;
  z-index: 40;
  min-width: 216px;
  max-width: 290px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background-color: var(--sb-card-bg);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.sb_kontext_eintrag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 40px;
  padding: 0.45rem 0.6rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--sb-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.sb_kontext_eintrag:hover,
.sb_kontext_eintrag:focus-visible {
  background-color: var(--sb-active-bg);
  border-color: var(--sb-active-border);
  color: var(--sb-accent);
  outline: none;
}

.sb_kontext_eintrag.is_gefahr { color: var(--sb-danger); }

.sb_kontext_eintrag.is_gefahr:hover,
.sb_kontext_eintrag.is_gefahr:focus-visible {
  background-color: var(--sb-danger);
  border-color: var(--sb-danger);
  color: #FFFFFF;
}

[data-theme="dark"] .sb_kontext_eintrag.is_gefahr:hover,
[data-theme="dark"] .sb_kontext_eintrag.is_gefahr:focus-visible {
  background-color: #7F1D1D;
  border-color: #7F1D1D;
  color: #FEE2E2;
}

.sb_kontext_trenner {
  height: 1px;
  margin: 0.25rem 0.4rem;
  background-color: var(--sb-border);
}

[data-theme="dark"] .sb_kontext {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ================= Eigener Bestätigungs-/Meldungsdialog =================
   Ersetzt window.confirm/alert. Gleiche Gestaltung wie die übrigen Dialoge. */
.sb_dialog_frage { max-width: 460px; }

.sb_frage_kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.sb_frage_ico {
  font-size: 1.55rem;
  line-height: 1;
  flex: 0 0 auto;
}

.sb_frage_titel {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.sb_frage_text {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sb-text);
  overflow-wrap: anywhere;
}

.sb_dialog_fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.sb_dialog_fuss_rechts { justify-content: flex-end; }

.sb_dialog_fuss_links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sb_export_liste {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

/* ================= Story-Check Meldungen ================= */
.sb_check_meldung {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.sb_check_ok { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.sb_check_warn { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }

[data-theme="dark"] .sb_check_ok { background: #064E3B; color: #A7F3D0; border-color: #065F46; }
[data-theme="dark"] .sb_check_warn { background: #78350F; color: #FDE68A; border-color: #92400E; }

.sb_check_stats {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* ================= Vorlagen ================= */
.sb_vorlagen_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.sb_vorlage_karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 1rem;
  background-color: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.sb_vorlage_karte:hover { border-color: var(--sb-accent); }

.sb_vorlage_karte:focus-visible {
  outline: 3px solid var(--sb-accent);
  outline-offset: 2px;
}

.sb_vorlage_icon { font-size: 2.5rem; }
.sb_vorlage_titel { font-size: 0.95rem; font-weight: 700; text-align: center; color: var(--sb-text); }

/* ================= Kopfzeile: Bedienziele mindestens 40 x 40 px =================
   Regel 3.13.5.3. Die Plattform-Pill ist 56 x 30 px - zu klein zum Greifen mit
   dem Finger; die Werkzeug-Kopien heben sie auf 74 x 40 an.
   Die Sonne/Mond-Icons werden von der Plattform selbst per opacity geschaltet
   (jupi.css): im Light-Modus ist die Sonne unsichtbar, im Dark-Modus der Mond -
   das aktive Symbol ist also IMMER neben dem Daumen, nie darunter. Deshalb hier
   nur die Daumen-Position anpassen, die Icons nicht. */
.sb_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
}

.sb_header .jts_thumb {
  top: 4px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

html[data-theme="dark"] .sb_header .jts_thumb {
  left: calc(100% - 36px);
}

/* ================= Handy & Tablet ================= */
@media (max-width: 900px) {
  /* Kopfzeile wie Erzähler/Voxelwerk: umbrechen statt ueberlaufen */
  .sb_header {
    display: flex;
    flex-wrap: wrap;
    padding: 0.25rem 0.5rem;
    gap: 0.2rem 0.3rem;
  }
  .sb_marke { order: -1; margin-right: auto; }
  .sb_marke_titel { font-size: 1.1rem; }
  .sb_header .jupi_sprachen_select { max-width: 9rem; font-size: 0.78rem; }
}

/* Auf dem Handy ist die Karte so klein, dass zwei 40-px-Knoepfe im Fuss den
   Titel verdraengen. Dort blendet game.js die Karten-Knoepfe aus (die
   Datei beginnt dann ohne sie) - Verdoppeln und Loeschen stehen dort im
   Szenen-Editor zur Verfuegung, also bleibt alles bedienbar. */
@media (max-width: 620px) {
  .sb_karte_aktionen { display: none; }
  .sb_karte_fuss { justify-content: flex-end; }
}

/* Nur die Symbole: elf beschriftete Knoepfe sprengten das Handy in fuenf
   Zeilen und fraessen ein Viertel des Bildschirms. */
@media (max-width: 620px) {
  .sb_menuleiste {
    gap: 0.25rem;
    padding: 0.3rem 0.4rem;
    justify-content: flex-start;
  }
  .sb_btn {
    padding: 0.35rem 0.5rem;
    min-width: 44px;
  }
  /* Der Text bleibt fuer Screenreader im DOM, wird nur nicht angezeigt. */
  .sb_menuleiste .sb_btn > span:not(.sb_btn_ico) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .sb_menuleiste .sb_btn { position: relative; }
  .sb_menutrenner { display: none; }

  .sb_titel_chip_titel { max-width: 40vw; }
  .sb_titel_chip_autor { max-width: 40vw; }
  .sb_zoom_text { display: none; }

  .sb_buch_seite { padding: 1.25rem; }
  .sb_ansicht_buch { padding: 0.75rem 0.5rem; }

  /* Editor: Spalten-Ueberschriften passen nicht - jede Zeile kommt untereinander. */
  .sb_wahl_kopf { display: none; }
  .sb_choice_zeile {
    grid-template-columns: 1fr 1fr 40px;
    gap: 0.3rem;
    padding: 0.5rem;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    margin-bottom: 0.5rem;
  }
  .sb_choice_zeile > .sb_input:first-child { grid-column: 1 / -1; }
  .sb_choice_zeile > .sb_select { grid-column: 1 / -1; }
  .sb_form_reihe { grid-template-columns: 1fr 1fr; }
  .sb_form_gruppe:first-child { grid-column: 1 / -1; }

  /* Bild-Feld: Vorschau ueber die volle Breite, Knoepfe darunter. */
  .sb_bild_vorschau { flex-basis: 100%; max-width: none; }
  .sb_bild_knoepfe { flex-direction: row; flex-wrap: wrap; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sb_btn, .sb_szene_karte, .sb_karte_knopf, .sb_buch_wahl_btn {
    transition: none;
  }
}

/* ==================================================================
   WELT "ERZÄHLWERKSTATT" (Stil-Pass 27.10.2026, GUI 3.13.6 / 3.13.7)
   ------------------------------------------------------------------
   Die Schreibstube mit Storyboard-Pinnwand:
     - Seitenhintergrund: EINE gestreckte Szene (kulisse.svg, cover/no-repeat) -
       Kork-Pinnwand im Holzrahmen über dem Schreibtisch mit Heftstapel,
       Buntstift, Fadenrolle und Messing-Schreibtischlampe.
     - JUPI-Leiste: Holzbrett mit Papier-Pille (drei Zonen bleiben).
     - Werkzeugschiene: Papierstreifen auf Holzkante.
     - Bühne: ein Storyboard-Blatt (Papier mit Punktraster) auf der Pinnwand.
     - Szenen-Karten: Karteikarten mit Nadel, Verbindungen: rote Fäden.
     - Werkzeuge/Dialoge/Meldungen: Papier, Karteikarte, Notizzettel.
   Dark Mode = Abendlicht über dem Schreibtisch (Lampe an, Papiere bleiben hell).

   SPEZIFITÄT: alles an `body.jupi.sb_body` gekettet. Die Paket-Regeln
   `body.jupi` (0,1,1) und `html[data-theme="dark"] .jupi_header` (0,2,1) sind
   damit geschlagen; eigene Dunkel-Regeln bekommen `html[data-theme="dark"]`
   davor (Falle aus AGENTS.md 3.13.6).
   ================================================================== */

body.jupi.sb_body {
  /* Material-Regler der Werkstatt (eigener Namensraum, damit die alten
     --sb-* Variablen der Canvas weiter funktionieren). */
  --sbx-ink: #2f2418;
  --sbx-ink-mute: #6d5c46;
  --sbx-paper: #fdf7e9;
  --sbx-paper-2: #f6ecd6;
  --sbx-paper-edge: #d3c09b;
  --sbx-rust: #a8432a;
  --sbx-rust-dark: #85331f;
  --sbx-amber: #b57a1c;
  --sbx-amber-ink: #7a4f0d;
  --sbx-wood: #8d5c2a;
  --sbx-wood-hell: #b98444;
  --sbx-btn-bg: #fdf8ec;
  --sbx-btn-bg-2: #f2e7cf;
  --sbx-btn-edge: #cbb894;
  --sbx-shadow: rgba(70, 45, 20, 0.26);
  --sbx-buehne: #fbf4e2;
  --sbx-buehne-punkt: #cdb993;

  /* Altvariablen warm nachziehen - Canvas-Pfeile (--sb-pfeil, --sb-port)
     liest game.js direkt aus dem Stylesheet. */
  --sb-bg: #efe4cd;
  --sb-card-bg: #fdf7e9;
  --sb-border: #d3c09b;
  --sb-text: #2f2418;
  --sb-text-muted: #6d5c46;
  --sb-accent: #a8432a;
  --sb-accent-hover: #85331f;
  --sb-danger: #a8331f;
  --sb-active-bg: #f8ecc9;
  --sb-active-border: #b57a1c;
  --sb-pfeil: #a8432a;
  --sb-pfeil-bedingt: #b57a1c;
  --sb-port: #b8452b;

  background-color: #e6d8bd;
  background-image: url("kulisse.svg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-theme="dark"] body.jupi.sb_body {
  --sbx-ink: #2f2418;
  --sbx-ink-mute: #6a5a45;
  --sbx-paper: #f7edda;
  --sbx-paper-2: #efe2c6;
  --sbx-paper-edge: #c3ad86;
  --sbx-rust: #a8432a;
  --sbx-rust-dark: #85331f;
  --sbx-amber: #c08a24;
  --sbx-amber-ink: #7a4f0d;
  --sbx-btn-bg: #57402a;
  --sbx-btn-bg-2: #47341f;
  --sbx-btn-edge: #77593a;
  --sbx-shadow: rgba(0, 0, 0, 0.5);
  --sbx-buehne: #f2e6cc;
  --sbx-buehne-punkt: #c2ab83;

  --sb-bg: #3a2a1a;
  --sb-card-bg: #f7edda;
  --sb-border: #c3ad86;
  --sb-text: #2f2418;
  --sb-text-muted: #6a5a45;
  --sb-accent: #a8432a;
  --sb-accent-hover: #85331f;
  --sb-danger: #a8331f;
  --sb-active-bg: #f8ecc9;
  --sb-active-border: #c08a24;
  --sb-pfeil: #c25a3a;
  --sb-pfeil-bedingt: #c08a24;
  --sb-port: #c25a3a;

  /* Abendlicht: dieselbe Szene, gedimmt, dazu der warme Schein der
     Schreibtischlampe rechts. Beide Ebenen mit cover/no-repeat (3.13.7). */
  background-color: #1d1409;
  background-image:
    radial-gradient(ellipse 46% 40% at 82% 76%, rgba(255, 200, 128, 0.34) 0%, rgba(255, 200, 128, 0) 72%),
    linear-gradient(180deg, rgba(20, 13, 7, 0.60) 0%, rgba(26, 17, 9, 0.74) 100%),
    url("kulisse.svg");
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center top, center top;
  background-attachment: fixed, fixed, fixed;
}

/* Fäden und Nadeln malt game.js mit den Farben aus dem Stylesheet. Es liest
   sie mit getComputedStyle(document.documentElement) - also von <html>, NICHT
   von <body>. Darum stehen diese drei Werte hier auf HTML-Ebene (und nicht in
   der Material-Liste oben): html[data-theme] schlägt das :root des Kopfes. */
html[data-theme] {
  --sb-pfeil: #a8432a;
  --sb-pfeil-bedingt: #b57a1c;
  --sb-port: #b8452b;
}

html[data-theme="dark"] {
  --sb-pfeil: #c25a3a;
  --sb-pfeil-bedingt: #c08a24;
  --sb-port: #c25a3a;
}

/* ================= JUPI-Leiste: Holzbrett mit Papier-Pille ================= */
body.jupi.sb_body .sb_header {
  background: linear-gradient(180deg, #b98444 0%, #a06c33 58%, #8b5a28 100%);
  border-bottom: 3px solid #6d4319;
  box-shadow: 0 6px 18px rgba(50, 30, 10, 0.28), inset 0 1px 0 rgba(255, 240, 214, 0.35);
  color: #fff8ec;
}

/* Holzmaserung als feine Linien - nur Andeutung, keine Kachel. */
body.jupi.sb_body .sb_header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 236, 200, 0.10) 0 2px, rgba(0, 0, 0, 0) 2px 9px),
    repeating-linear-gradient(90deg, rgba(90, 55, 22, 0.10) 0 1px, rgba(0, 0, 0, 0) 1px 17px);
  opacity: 0.55;
}

body.jupi.sb_body .sb_header {
  position: sticky;
  overflow: hidden;
}

/* Die Maserung liegt als ::after über der Leiste - die echten Inhalte müssen
   darüber stehen, sonst dämpfen die feinen Linien Logo und Titel. */
body.jupi.sb_body .sb_header > * {
  position: relative;
  z-index: 1;
}

/* Fußzeile: Text ohne Absatzabstand, damit die Leiste schmal bleibt. */
body.jupi.sb_body .sb_fuss_text {
  margin: 0;
}

html[data-theme="dark"] body.jupi.sb_body .sb_header {
  background: linear-gradient(180deg, #5d3f1f 0%, #46301a 58%, #32210f 100%);
  border-bottom-color: #1b1108;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 220, 170, 0.16);
  color: #f6e8cd;
}

body.jupi.sb_body .sb_marke_titel {
  color: #fffdf6;
  text-shadow: 0 1px 2px rgba(50, 28, 8, 0.45);
}

html[data-theme="dark"] body.jupi.sb_body .sb_marke_titel {
  color: #fbf0d9;
}

/* Logo sitzt auf einem kleinen Papier-Schild */
body.jupi.sb_body .sb_marke_logo {
  background: #fdf7e9;
  border-radius: 7px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(40, 24, 8, 0.35);
}

/* Zurück-Pille: Papier mit Buntstift-Schrift */
body.jupi.sb_body .sb_header > .jupi_nav_back {
  background: linear-gradient(180deg, #fffdf5, #f3e7cd);
  color: var(--sbx-rust-dark);
  border: 1px solid #d8c6a2;
  box-shadow: 0 2px 0 #cbb48d, 0 4px 10px rgba(40, 24, 8, 0.28);
}

body.jupi.sb_body .sb_header > .jupi_nav_back:hover {
  background: #fffaf0;
  border-color: var(--sbx-rust);
  transform: translateY(-1px);
}

html[data-theme="dark"] body.jupi.sb_body .sb_header > .jupi_nav_back {
  background: linear-gradient(180deg, #f7edda, #e9dab9);
  color: #5d2617;
  border-color: #c3ad86;
}

body.jupi.sb_body .sb_header .jupi_sprachen_select {
  background: rgba(255, 250, 238, 0.92);
  color: #3a2a18;
  border: 1px solid #d8c6a2;
  box-shadow: inset 0 1px 0 #fff;
}

body.jupi.sb_body .sb_header .jupi_sprachen_select:hover {
  background: #fffdf6;
}

html[data-theme="dark"] body.jupi.sb_body .sb_header .jupi_sprachen_select {
  background: rgba(247, 236, 214, 0.94);
  color: #33261a;
  border-color: #c3ad86;
}

/* ================= Werkzeugschiene: Papierstreifen auf Holzkante ================= */
body.jupi.sb_body .sb_menuleiste {
  background: linear-gradient(180deg, #f8efdc 0%, #eee1c6 100%);
  border-bottom: 3px solid #8d5c2a;
  box-shadow: 0 3px 10px rgba(60, 38, 16, 0.22), inset 0 1px 0 #fffdf6;
  padding: 0.4rem 0.7rem;
}

html[data-theme="dark"] body.jupi.sb_body .sb_menuleiste {
  background: linear-gradient(180deg, #4c3721 0%, #3b2a19 100%);
  border-bottom-color: #6d4a24;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 226, 180, 0.12);
}

body.jupi.sb_body .sb_menutrenner {
  background-color: #c9b48e;
  height: 26px;
}

html[data-theme="dark"] body.jupi.sb_body .sb_menutrenner {
  background-color: #6b5236;
}

/* ================= Knöpfe: Werkzeug-Chips aus Papier ================= */
body.jupi.sb_body .sb_btn {
  background: linear-gradient(180deg, var(--sbx-btn-bg) 0%, var(--sbx-btn-bg-2) 100%);
  border: 1px solid var(--sbx-btn-edge);
  border-radius: 7px;
  color: var(--sbx-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 2px 3px rgba(60, 38, 16, 0.16);
  font-weight: 600;
}

body.jupi.sb_body .sb_btn:hover {
  background: linear-gradient(180deg, #fffdf6 0%, #f6eeda 100%);
  border-color: #b98f57;
}

html[data-theme="dark"] body.jupi.sb_body .sb_btn {
  background: linear-gradient(180deg, #5c452d 0%, #483522 100%);
  border-color: #77603f;
  color: #f6e9cf;
  box-shadow: 0 1px 0 rgba(255, 226, 180, 0.16) inset, 0 2px 4px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] body.jupi.sb_body .sb_btn:hover {
  background: linear-gradient(180deg, #6b5236 0%, #55402a 100%);
  border-color: #96774d;
}

body.jupi.sb_body .sb_btn.is_active {
  background: linear-gradient(180deg, #fdf3d3 0%, #f4e2b2 100%);
  border-color: var(--sbx-amber);
  color: var(--sbx-amber-ink);
  box-shadow: 0 1px 0 #fffbee inset, 0 0 0 2px rgba(181, 122, 28, 0.18);
}

html[data-theme="dark"] body.jupi.sb_body .sb_btn.is_active {
  background: linear-gradient(180deg, #8a6a33 0%, #6f5326 100%);
  border-color: #d3a049;
  color: #fff3d6;
}

body.jupi.sb_body .sb_btn_wirksam {
  background: linear-gradient(180deg, #b9532f 0%, #97381f 100%);
  border-color: #7d2d17;
  color: #fff6e8;
  box-shadow: 0 1px 0 rgba(255, 210, 180, 0.35) inset, 0 3px 6px rgba(90, 30, 10, 0.32);
}

body.jupi.sb_body .sb_btn_wirksam:hover {
  background: linear-gradient(180deg, #c65c36 0%, #a33f23 100%);
  border-color: #7d2d17;
}

html[data-theme="dark"] body.jupi.sb_body .sb_btn_wirksam {
  background: linear-gradient(180deg, #c05a35 0%, #9a3b21 100%);
  border-color: #7d2d17;
  color: #fff6e8;
}

body.jupi.sb_body .sb_btn_gefahr {
  color: #8f2617;
  border-color: #c98d7f;
}

html[data-theme="dark"] body.jupi.sb_body .sb_btn_gefahr {
  color: #ffc7b8;
  border-color: #a35a48;
}

body.jupi.sb_body .sb_btn:focus-visible {
  outline: 3px solid var(--sbx-rust);
  outline-offset: 2px;
}

/* ================= BÜHNE: Storyboard-Blatt auf der Pinnwand =================
   Kein weißer Kasten auf grauem Grund: ein aufgeheftetes Blatt Papier mit
   Punktraster, das auf der Korkwand liegt. Die Ränder zeigen die Kulisse. */
body.jupi.sb_body .sb_ansicht_graph {
  inset: clamp(8px, 2vw, 28px);
  background-color: var(--sbx-buehne);
  background-image:
    radial-gradient(var(--sbx-buehne-punkt) 1.1px, transparent 1.1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 120px);
  background-size: 26px 26px, 100% 100%;
  background-position: 0 0, 0 0;
  border: 1px solid #cfba93;
  border-radius: 3px;
  box-shadow:
    0 12px 28px rgba(60, 38, 16, 0.34),
    0 2px 0 rgba(255, 250, 236, 0.7) inset,
    0 0 0 1px rgba(255, 250, 236, 0.35);
}

/* Abendlicht auf dem Blatt: der Schein der Schreibtischlampe faellt von rechts
   oben auf das Storyboard - dasselbe Blatt, nur angestrahlt. */
html[data-theme="dark"] body.jupi.sb_body .sb_ansicht_graph {
  border-color: #a98f60;
  background-image:
    radial-gradient(ellipse 55% 46% at 88% 4%, rgba(255, 226, 172, 0.85) 0%, rgba(255, 226, 172, 0) 72%),
    radial-gradient(var(--sbx-buehne-punkt) 1.1px, transparent 1.1px),
    linear-gradient(180deg, rgba(255, 240, 205, 0.35), rgba(150, 120, 78, 0.16) 100%);
  background-size: cover, 26px 26px, 100% 100%;
  background-position: center, 0 0, 0 0;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 246, 224, 0.35) inset;
}

/* Zwei Heftklammern oben - Deko, verdeckt nichts (pointer-events: none). */
body.jupi.sb_body .sb_ansicht_graph::before,
body.jupi.sb_body .sb_ansicht_graph::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 46px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e9dcbe 0%, #cbb794 100%);
  border: 1px solid #b39f78;
  box-shadow: 0 2px 4px rgba(60, 38, 16, 0.28);
  pointer-events: none;
  z-index: 4;
}

body.jupi.sb_body .sb_ansicht_graph::before {
  left: 32%;
  transform: rotate(-1.5deg);
}

body.jupi.sb_body .sb_ansicht_graph::after {
  right: 8%;
  transform: rotate(1.5deg);
}

/* ================= Szenen-Karten: Karteikarten mit Nadel ================= */
body.jupi.sb_body .sb_szene_karte {
  background: linear-gradient(180deg, #fffdf6 0%, #f8efdb 100%);
  border: 1px solid #d6c3a0;
  border-left: 4px solid #b9915c;
  border-radius: 3px 7px 7px 3px;
  box-shadow: 0 2px 0 #e8dabe, 0 8px 18px rgba(60, 38, 16, 0.24);
  padding-top: 0.75rem;
}

body.jupi.sb_body .sb_szene_karte:hover {
  border-color: #b98f57;
  border-left-color: var(--sbx-rust);
  box-shadow: 0 2px 0 #e8dabe, 0 12px 24px rgba(60, 38, 16, 0.3);
}

body.jupi.sb_body .sb_szene_karte.is_start {
  border-left-color: #5d7f3c;
}

body.jupi.sb_body .sb_szene_karte.is_ausgewaehlt {
  border-color: var(--sbx-rust);
  border-left-color: var(--sbx-rust);
  box-shadow: 0 2px 0 #e8dabe, 0 0 0 3px rgba(168, 67, 42, 0.22), 0 12px 24px rgba(60, 38, 16, 0.3);
}

body.jupi.sb_body .sb_szene_karte.is_ziel {
  border-color: var(--sbx-amber);
  box-shadow: 0 0 0 4px rgba(181, 122, 28, 0.3), 0 12px 24px rgba(60, 38, 16, 0.3);
}

/* Die Nadel, die die Karte auf der Pinnwand hält. Skaliert mit der Karte,
   ist reine Deko und liegt nie über einem Bedienziel. */
body.jupi.sb_body .sb_szene_karte::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e7795c 0%, #b8452b 55%, #87301c 100%);
  border: 1px solid #6f2617;
  box-shadow: 0 2px 3px rgba(40, 20, 8, 0.45);
  pointer-events: none;
}

body.jupi.sb_body .sb_szene_karte.is_start::before {
  background: radial-gradient(circle at 34% 30%, #9dc07a 0%, #5d7f3c 55%, #44602c 100%);
  border-color: #355024;
}

/* Karteninhalt: Tinte auf Papier */
body.jupi.sb_body .sb_karte_titel {
  color: var(--sbx-ink);
  font-weight: 700;
}

body.jupi.sb_body .sb_karte_text {
  color: var(--sbx-ink-mute);
}

body.jupi.sb_body .sb_karte_fuss {
  border-top: 1px dashed #c9b48e;
  color: var(--sbx-rust-dark);
  font-weight: 700;
}

/* Register-Reiter statt Bonbon-Badges */
body.jupi.sb_body .sb_karte_badge {
  background: #f1e5cb;
  color: #5c4626;
  border: 1px solid #d6c3a0;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.jupi.sb_body .sb_badge_start { background: #e3ecd4; color: #3f5a26; border-color: #b9cba1; }
body.jupi.sb_body .sb_badge_normal { background: #e8e4d3; color: #574a2f; border-color: #cbbfa1; }
body.jupi.sb_body .sb_badge_sieg { background: #fbeec6; color: #7a4f0d; border-color: #e0cb90; }
body.jupi.sb_body .sb_badge_gameover { background: #f6dbd3; color: #8f2617; border-color: #dfb3a7; }

body.jupi.sb_body .sb_karte_icon_bild {
  border-color: #d6c3a0;
  background: #fffaf0;
  border-radius: 4px;
}

/* Der Griff zum Fädenziehen wird zur Nadel: rostroter Kopf, heller Stift.
   Größe und Gegenzoom bleiben unverändert (≥ 40 px, AGENTS.md 3.13.5.3). */
body.jupi.sb_body .sb_karte_port {
  background: radial-gradient(circle at 36% 32%, #e7795c 0%, #b8452b 58%, #7d2a16 100%);
  border: 3px solid #fdf7e9;
  box-shadow: 0 3px 7px rgba(50, 24, 8, 0.4);
}

body.jupi.sb_body .sb_karte_port::after {
  width: 16px;
  height: 16px;
  background: rgba(255, 250, 240, 0.95);
}

body.jupi.sb_body .sb_szene_karte.is_start .sb_karte_port {
  background: radial-gradient(circle at 36% 32%, #9dc07a 0%, #5d7f3c 58%, #3e5727 100%);
}

body.jupi.sb_body .sb_karte_knopf:hover:not(:disabled) {
  background: #f4e9d2;
  border-color: #cbb48d;
  color: var(--sbx-ink);
}

/* ================= Titel-Chip: Etikett mit Klebestreifen ================= */
body.jupi.sb_body .sb_titel_chip {
  background: linear-gradient(180deg, #fffdf5 0%, #f6ecd5 100%);
  border: 1px solid #d6c3a0;
  border-left: 4px solid var(--sbx-rust);
  border-radius: 4px 999px 999px 4px;
  box-shadow: 0 3px 9px rgba(60, 38, 16, 0.24);
  color: var(--sbx-ink);
}

body.jupi.sb_body .sb_titel_chip:hover {
  border-color: var(--sbx-rust);
  border-left-color: var(--sbx-rust);
  background: #fffdf7;
}

body.jupi.sb_body .sb_titel_chip_autor {
  color: var(--sbx-ink-mute);
}

/* ================= Zoom-Werkzeuge: kleine Messing-Blättchen ================= */
body.jupi.sb_body .sb_zoom_btn {
  background: linear-gradient(180deg, #fdf6e4 0%, #ecdcb9 100%);
  border: 1px solid #b9915c;
  border-radius: 8px;
  color: #4a3319;
  box-shadow: 0 2px 0 #cbb48d, 0 4px 9px rgba(60, 38, 16, 0.26);
}

body.jupi.sb_body .sb_zoom_btn:hover {
  background: linear-gradient(180deg, #fffdf6 0%, #f3e6c9 100%);
  border-color: var(--sbx-rust);
  color: var(--sbx-rust-dark);
}

body.jupi.sb_body .sb_zoom_text {
  background: rgba(253, 247, 233, 0.94);
  border: 1px solid #d6c3a0;
  border-radius: 7px;
  color: var(--sbx-ink-mute);
}

html[data-theme="dark"] body.jupi.sb_body .sb_zoom_btn {
  background: linear-gradient(180deg, #f7edda 0%, #e3d3b2 100%);
  color: #4a3319;
}

html[data-theme="dark"] body.jupi.sb_body .sb_zoom_text {
  background: rgba(247, 237, 218, 0.94);
  border-color: #c3ad86;
  color: #5c4626;
}

/* ================= Buch-Playtester: aufgeschlagenes Heft =================
   Die Bühne bleibt die Pinnwand, das Buch liegt als Heft darauf. */
body.jupi.sb_body .sb_ansicht_buch {
  inset: clamp(6px, 1.4vw, 20px);
  background: transparent;
}

body.jupi.sb_body .sb_buch_seite {
  background: linear-gradient(180deg, #fffdf4 0%, #f9f0dc 100%);
  border: 1px solid #d7c5a2;
  border-left: 10px solid #d3bb94;
  border-radius: 3px 8px 8px 3px;
  box-shadow: 0 16px 34px rgba(50, 30, 12, 0.34), 0 1px 0 #fffdf6 inset;
  color: var(--sbx-ink);
}

body.jupi.sb_body .sb_buch_kopf {
  border-bottom: 2px solid #dcc9a4;
}

body.jupi.sb_body .sb_buch_titel {
  color: var(--sbx-rust-dark);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

body.jupi.sb_body .sb_buch_autor {
  color: var(--sbx-ink-mute);
  font-style: italic;
}

body.jupi.sb_body .sb_buch_szene_titel {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  color: #3a2a18;
}

body.jupi.sb_body .sb_buch_text {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  color: #2b2013;
}

body.jupi.sb_body .sb_buch_inventar_box {
  background: #f6ecd6;
  border: 1px dashed #c9b48e;
  color: var(--sbx-ink);
}

/* Entscheidungen: Papierstreifen mit rotem Rand, wie angeheftete Zettel */
body.jupi.sb_body .sb_buch_wahl_btn {
  background: linear-gradient(180deg, #fffdf5 0%, #f5ead3 100%);
  border: 1px solid #cfba93;
  border-left: 5px solid var(--sbx-rust);
  border-radius: 4px 7px 7px 4px;
  color: var(--sbx-ink);
  font-weight: 700;
  box-shadow: 0 2px 0 #e4d5b8, 0 5px 12px rgba(60, 38, 16, 0.2);
}

body.jupi.sb_body .sb_buch_wahl_btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #fffdf8 0%, #f8efd9 100%);
  border-left-color: var(--sbx-rust-dark);
  color: var(--sbx-rust-dark);
}

body.jupi.sb_body .sb_buch_wahl_btn:disabled {
  background: #eee2ca;
  border-left-color: #b3a184;
  color: #8a7a62;
}

body.jupi.sb_body .sb_buch_wahl_braucht {
  color: var(--sbx-ink-mute);
}

body.jupi.sb_body .sb_buch_ende_banner {
  background: #fdf3c2;
  border: 1px solid #dcc87a;
  color: #5a4708;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(90, 70, 10, 0.22);
}

body.jupi.sb_body .sb_buch_fuss {
  border-top: 1px dashed #c9b48e;
}

/* ================= Dialoge: Papierblatt mit Nadel ================= */
body.jupi.sb_body .sb_dialog {
  background: linear-gradient(180deg, #fffdf5 0%, #f8efda 100%);
  border: 1px solid #d3c09b;
  border-radius: 6px;
  color: var(--sbx-ink);
  box-shadow: 0 24px 48px rgba(30, 18, 6, 0.5), 0 1px 0 #fffdf6 inset;
}

body.jupi.sb_body .sb_dialog::before {
  content: "";
  position: absolute;
  /* Die Nadel sitzt INNEN am Blattrand: dialog hat overflow-y:auto und
     schneidet alles ab, was ueber die Kante ragt (vorher lag sie halb
     ausserhalb und wirkte wie ein angeschnittener Punkt). */
  top: 7px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e7795c 0%, #b8452b 55%, #87301c 100%);
  border: 1px solid #6f2617;
  box-shadow: 0 2px 4px rgba(30, 18, 6, 0.4);
  pointer-events: none;
}

body.jupi.sb_body .sb_dialog::backdrop {
  background: rgba(34, 22, 10, 0.58);
}

body.jupi.sb_body .sb_dialog h2 {
  color: var(--sbx-rust-dark);
}

body.jupi.sb_body .sb_dialog h3 {
  color: #4a3319;
}

/* Bestätigung/Meldung: Notizzettel (gelb), damit sie sich von den
   Formular-Blättern unterscheidet. */
body.jupi.sb_body .sb_dialog_frage {
  background: linear-gradient(180deg, #fdf7c8 0%, #f7ecab 100%);
  border-color: #ddcd7a;
}

body.jupi.sb_body .sb_dialog_frage::before {
  background: radial-gradient(circle at 34% 30%, #9dc07a 0%, #5d7f3c 55%, #44602c 100%);
  border-color: #355024;
}

body.jupi.sb_body .sb_frage_text {
  color: #3d3210;
}

body.jupi.sb_body .sb_label {
  color: var(--sbx-ink-mute);
}

body.jupi.sb_body .sb_hinweis {
  color: var(--sbx-ink-mute);
}

body.jupi.sb_body .sb_input,
body.jupi.sb_body .sb_select,
body.jupi.sb_body .sb_textarea {
  background: #fffdf6;
  border: 1px solid #cfbb95;
  border-radius: 6px;
  color: #2b2013;
}

body.jupi.sb_body .sb_input:focus-visible,
body.jupi.sb_body .sb_select:focus-visible,
body.jupi.sb_body .sb_textarea:focus-visible {
  outline: 2px solid var(--sbx-rust);
  outline-offset: 1px;
  border-color: var(--sbx-rust);
}

body.jupi.sb_body .sb_btn_del {
  background: #fffdf6;
  border-color: #cfbb95;
  color: #8f2617;
}

body.jupi.sb_body .sb_btn_del:hover {
  background: #a8331f;
  border-color: #a8331f;
  color: #fff6e8;
}

body.jupi.sb_body .sb_bild_zone {
  background: #f7edda;
  border: 1px dashed #c9b48e;
}

body.jupi.sb_body .sb_bild_zone.is_ziel {
  border-color: var(--sbx-rust);
  background: #fdf0d6;
}

body.jupi.sb_body .sb_bild_vorschau {
  background: #fffdf6;
  border-color: #cfbb95;
}

body.jupi.sb_body .sb_bild_leer {
  color: var(--sbx-ink-mute);
}

body.jupi.sb_body .sb_dialog_fuss {
  border-top: 1px dashed #d3c09b;
  padding-top: 0.8rem;
}

/* ================= Story-Check: Zettel mit Befund ================= */
body.jupi.sb_body .sb_check_ok {
  background: #e8f0d8;
  border: 1px solid #bccfa2;
  color: #3f5a26;
}

body.jupi.sb_body .sb_check_warn {
  background: #fdf3c6;
  border: 1px solid #ddcd7a;
  color: #6b5408;
}

body.jupi.sb_body .sb_check_stats {
  color: var(--sbx-ink);
}

/* ================= Vorlagen: Karteikarten im Kasten ================= */
body.jupi.sb_body .sb_vorlage_karte {
  background: linear-gradient(180deg, #fffdf6 0%, #f6ecd5 100%);
  border: 1px solid #d6c3a0;
  border-radius: 4px;
  box-shadow: 0 2px 0 #e4d5b8, 0 6px 14px rgba(60, 38, 16, 0.18);
}

body.jupi.sb_body .sb_vorlage_karte:hover {
  border-color: var(--sbx-rust);
  background: #fffdf8;
}

body.jupi.sb_body .sb_vorlage_titel {
  color: var(--sbx-ink);
}

/* ================= Rechtsklick-Menü: Notizzettel ================= */
body.jupi.sb_body .sb_kontext {
  background: linear-gradient(180deg, #fffdf5 0%, #f7eeda 100%);
  border: 1px solid #d3c09b;
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(30, 18, 6, 0.42), 0 1px 0 #fffdf6 inset;
}

body.jupi.sb_body .sb_kontext_eintrag {
  color: var(--sbx-ink);
  border-radius: 5px;
}

body.jupi.sb_body .sb_kontext_eintrag:hover,
body.jupi.sb_body .sb_kontext_eintrag:focus-visible {
  background: #f6e7c6;
  border-color: #cbb48d;
  color: var(--sbx-rust-dark);
}

body.jupi.sb_body .sb_kontext_eintrag.is_gefahr {
  color: #8f2617;
}

body.jupi.sb_body .sb_kontext_trenner {
  background-color: #d9c9a8;
}

/* ================= Fußzeile: schmale Holzleiste am Fensterrand =================
   Typ 3 braucht einen Fuß (3.13.2a). Er sitzt per margin-top:auto ganz unten
   und schließt die Seite mit dem Schul-Bezug ab. */
body.jupi.sb_body .sb_fuss {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 0.3rem 0.75rem;
  background: linear-gradient(180deg, #4a3320 0%, #33220f 100%);
  border-top: 2px solid #6d4a24;
  color: #f0e2c4;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.45;
}

body.jupi.sb_body .sb_fuss a {
  color: #ffe6b8;
  font-weight: 700;
  text-decoration: none;
}

body.jupi.sb_body .sb_fuss a:hover {
  text-decoration: underline;
}

/* ================= Handy & Tablet ================= */
@media (max-width: 900px) {
  body.jupi.sb_body .sb_menuleiste {
    padding: 0.3rem 0.45rem;
  }
  body.jupi.sb_body .sb_fuss {
    font-size: 0.7rem;
    padding: 0.22rem 0.5rem;
  }
}

@media (max-width: 620px) {
  body.jupi.sb_body .sb_ansicht_graph,
  body.jupi.sb_body .sb_ansicht_buch {
    inset: 4px;
  }
  body.jupi.sb_body .sb_ansicht_graph::before,
  body.jupi.sb_body .sb_ansicht_graph::after {
    width: 34px;
    height: 11px;
  }
  body.jupi.sb_body .sb_menuleiste {
    border-bottom-width: 2px;
  }
  body.jupi.sb_body .sb_dialog::before {
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
  }
}

/* Bei erzwungener Ruhe (prefers-reduced-motion) bleibt die Optik, nur ohne
   Übergänge - die Regel oben in dieser Datei deckt die Knöpfe schon ab. */
@media (prefers-reduced-motion: reduce) {
  body.jupi.sb_body .sb_header > .jupi_nav_back:hover {
    transform: none;
  }
}