/* ============================================================================
   wortbruecke/styles.css - WELT "GRENZBRUECKE" (Neubau 26.10.2026)

   Von aussen nach innen:
     1.  Farben, Masse, Grundregeln
     2.  Seitenkulisse: EINE gemalte Szene (kulisse.svg / kulisse-nacht.svg)
     3.  Leiste: die Brueckengelaender-Konsole (Sandstein, Messing, Nieten)
     4.  Steuerung: der Zollzettel (Creme-Formular mit Linien und Stempeln)
     5.  Buehne: das Brueckendeck (Bohlen, Gelaender, Ufer-Schilder,
         Gepaeckanhaenger als Antworten, Richtungsschild)
     6.  Rundenende: die Passseite mit Passstempeln
     7.  Hilfe-Fenster: das Zollformular
     8.  Fuss
     9.  Dark Mode: Nacht an der Grenze - dunkles Blau, Laternenlicht,
         Papier bleibt hell
    10.  Handy / schmale Fenster
    11.  Bedienziele >= 40 x 40 px (Regel 3.13.5) - steht am Ende

   Alles haengt an body.jupi.wbr_body (body-Klasse), damit die Plattform-
   Regeln aus jupi.css in BEIDEN Themes geschlagen werden. Nichts davon
   gehoert in die Plattform-Dateien (AGENTS.md 3.10).
   ========================================================================== */

/* ---------- 1. Farben und Grundregeln ---------- */
:root {
  --gb-fluss: #2c4a63;
  --gb-fluss-tief: #1d3446;
  --gb-fluss-hell: #4a708c;
  --gb-stein: #d9c7a7;
  --gb-stein-hell: #ebdfc7;
  --gb-stein-dunkel: #bda98a;
  --gb-stein-tief: #8d7a5c;
  --gb-tinte: #22201c;
  --gb-tinte-weich: #6d6152;
  --gb-messing: #b98b3e;
  --gb-messing-hell: #e3c689;
  --gb-messing-tief: #7c5a21;
  --gb-rot: #a6402f;
  --gb-rot-hell: #c8614c;
  --gb-papier: #fbf5e7;
  --gb-papier-2: #f2e7cd;
  --gb-papier-linie: rgba(44, 74, 99, .16);
  --gb-gruen: #2f6b4f;
  --gb-gruen-hell: #e5efe1;
  --gb-holz: #c2ab88;
  --gb-holz-2: #b09a76;
  --gb-holz-kante: #8a744f;
  --gb-nacht: #0e1a26;
  --gb-nacht-2: #16283a;
  --gb-rund: 10px;
}

* { box-sizing: border-box; }

html { background: var(--gb-fluss-tief); }

/* ---------- 2. Seitenkulisse: EIN Bild, keine Kachel ----------
   Das Bild (1600 x 1000, Generator .zcode/wortbruecke-kulisse.cjs) wird
   einmal mit `cover` eingesetzt: keine Wiederholung, die Raender duerfen
   anschneiden. Am breiten Fenster sieht man die beiden Ufer links und
   rechts, am Handy den mittleren Brueckenbogen. */
body.jupi.wbr_body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--gb-tinte);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: var(--gb-fluss-tief);
  background-image: url("kulisse.svg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.wbr_container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1040px;
  margin: 0 auto;
  background: transparent;
}
@supports (min-height: 100dvh) {
  body.jupi.wbr_body, .wbr_container { min-height: 100dvh; }
}

.wbr_main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: .2rem .9rem 1.4rem;
  background: transparent;
  min-width: 0;
}

/* ---------- 2b. Plattform-Reste zuruecksetzen ----------
   Die Paket-Kopie jupi.css enthaelt noch die ALTEN Wort-Bruecke-Regeln
   (Abschnitt "Wort-Bruecke (wortbruecke.php)": .wbr_stage mit weisser
   Flaeche, .wbr_bogen als gruener Bogen, .wbr_hilfe mit Rand ...). Diese
   Reste werden hier ausdruecklich geleert, damit die neue Welt nicht von
   alten Rahmen und Groessen ueberlagert wird. Reihenfolge: erst
   zuruecksetzen, weiter unten neu aufbauen. */
.wbr_body .wbr_stage,
.wbr_body .wbr_panel,
.wbr_body .wbr_bruecke_zeile,
.wbr_body .wbr_kacheln,
.wbr_body .wbr_msg {
  background: none;
  border: 0;
  box-shadow: none;
}
.wbr_body .wbr_bruecke_zeile { justify-content: normal; }
/* Die Plattform legte .wbr_stage Polster und Radius an - beides weg, sonst
   steht das Deck 16 px tiefer und die Kulisse blitzt dazwischen durch. */
.wbr_body .wbr_stage { padding: 0; border-radius: 0; }
.wbr_body .wbr_bogen {
  flex: 0 0 auto;
  max-width: none;
  height: 26px;
  border: 0;
  border-radius: 0;
}
.wbr_body .wbr_hilfe { margin: auto; max-width: 620px; }

/* Die Plattform malt .jupi_main und .jupi_footer weiss - hier nicht. */
.wbr_body .jupi_main,
.wbr_body .wbr_main { background: transparent; }

/* ---------- 3. Leiste: Brueckengelaender-Konsole ----------
   Drei Zonen (AGENTS.md 3.13.2 Typ 2): links Zurueck-Pille, mittig das
   Schild mit Logo und Name, rechts Sprachwahl + Theme im Gelaenderrahmen.
   Oben laeuft der Messing-Handlauf mit Nieten. */
.wbr_body .wbr_header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  padding: 1.05rem .9rem .75rem;
  border: 0;
  border-radius: 0 0 14px 14px;
  border-bottom: 4px solid var(--gb-stein-tief);
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, .38) 0 40%, transparent 41%),
    linear-gradient(180deg, #e6d7ba 0%, var(--gb-stein) 52%, #c9b593 100%);
  box-shadow: 0 10px 24px rgba(20, 24, 28, .34), inset 0 -1px 0 rgba(255, 255, 255, .35);
  color: var(--gb-tinte);
  backdrop-filter: none;
}
/* Messing-Handlauf mit Nieten oben */
.wbr_body .wbr_header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9px;
  border-radius: 0 0 3px 3px;
  background:
    radial-gradient(circle at 13px 4.5px, #5d4318 0 1.6px, transparent 2.1px) 0 0 / 26px 9px repeat-x,
    linear-gradient(180deg, var(--gb-messing-hell), var(--gb-messing) 58%, var(--gb-messing-tief));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* Steinplatten-Fugen unten (dezent) */
.wbr_body .wbr_header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0 8%, rgba(34, 32, 28, .35) 8% 8.5%, transparent 8.5% 30%,
    rgba(34, 32, 28, .28) 30% 30.5%, transparent 30.5% 62%,
    rgba(34, 32, 28, .3) 62% 62.5%, transparent 62.5% 90%,
    rgba(34, 32, 28, .32) 90% 90.5%, transparent 90.5%);
}

/* Zurueck-Pille: Creme-Schild mit Tinte und Messingrand */
.wbr_body .wbr_header .jupi_nav_back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .95rem;
  border: 2px solid var(--gb-messing-tief);
  border-radius: 999px;
  background: linear-gradient(180deg, #fdf8ec, #efe3c9);
  color: var(--gb-tinte);
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(60, 44, 20, .35), inset 0 1px 0 #fff;
  transition: background .15s ease, transform .12s ease;
}
.wbr_body .wbr_header .jupi_nav_back:hover {
  background: var(--gb-messing-hell);
  transform: translateY(-1px);
}
.wbr_body .wbr_header .jupi_nav_back:focus-visible {
  outline: 3px solid var(--gb-rot);
  outline-offset: 2px;
}

/* Schild mit Logo + Name */
.wbr_body .wbr_brand {
  position: relative;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .2rem .85rem .2rem .3rem;
  border: 2px solid var(--gb-messing);
  border-radius: 8px;
  background:
    radial-gradient(circle at 7px 7px, #a88b57 0 2.2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, #a88b57 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), #a88b57 0 2.2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #a88b57 0 2.2px, transparent 2.6px),
    linear-gradient(180deg, #fdf8ec, #f0e5cd);
  box-shadow: 0 3px 0 rgba(60, 44, 20, .3), inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.wbr_body .wbr_brand img {
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  filter: drop-shadow(0 2px 3px rgba(34, 32, 28, .35));
}
.wbr_body .wbr_brand h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--gb-tinte);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* Werkzeuge im Gelaenderrahmen */
.wbr_body .wbr_werkzeuge {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  padding: .22rem .3rem;
  border-radius: 10px;
  border: 1px solid var(--gb-stein-tief);
  background: linear-gradient(180deg, #b7a483, #94805f);
  box-shadow: inset 0 1px 3px rgba(20, 20, 20, .45), 0 1px 0 rgba(255, 255, 255, .35);
}
.wbr_body .wbr_header .jupi_sprachen_select {
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  height: 40px;
  min-height: 40px;
  max-width: 10.5rem;
  padding: 0 .55rem;
  border: 1px solid var(--gb-messing-tief);
  border-radius: 7px;
  background: linear-gradient(180deg, #fdf8ec, #eee1c6);
  color: var(--gb-tinte);
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
}
.wbr_body .wbr_header .jupi_sprachen_select:hover { background: var(--gb-messing-hell); }
.wbr_body .wbr_header .jupi_sprachen_select:focus-visible {
  outline: 3px solid var(--gb-rot);
  outline-offset: 1px;
}
.wbr_body .wbr_header .jupi_sprachen_select option {
  color: var(--gb-tinte);
  background: #fdf8ec;
}
.wbr_body .jupi_sprachen_icon { font-size: .95rem; }

/* Theme-Pille: Messinggehaeuse */
.wbr_body .wbr_theme_switch {
  width: 3.5rem;
  height: 40px;
  border: 1px solid var(--gb-messing-tief);
  border-radius: 999px;
  background: linear-gradient(180deg, #dcc08a, #b18a44);
  box-shadow: inset 0 1px 3px rgba(20, 20, 20, .4);
}
.wbr_body .wbr_theme_switch .jts_thumb {
  top: .2rem;
  bottom: .2rem;
  left: .2rem;
  width: 1.55rem;
  background: linear-gradient(180deg, #fffdf6, #e8dcc0);
  box-shadow: 0 1px 4px rgba(20, 20, 20, .45);
}
html[data-theme="dark"] .wbr_body .wbr_theme_switch .jts_thumb {
  left: calc(100% - 1.55rem - .2rem);
  transform: none;
}

/* ---------- 4. Steuerung: der ZOLLZETTEL ----------
   Creme-Formular mit Linien, rundem Stempel und einer Kante aus
   Grenzsteinen unten. Punkte / Best / Aufgabe sind Formularfelder. */
.wbr_body .wbr_panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1.15rem;
  margin: 0 0 1rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid #cbb98f;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(180deg,
      transparent 0 27px, rgba(44, 74, 99, .22) 27px 28px),
    linear-gradient(170deg, #fdf8ec 0%, var(--gb-papier-2) 100%);
  box-shadow: 0 8px 20px rgba(20, 24, 28, .28), inset 0 0 0 3px rgba(255, 255, 255, .5);
  color: var(--gb-tinte);
}
/* Zollstempel-Ecke: entfaellt bewusst - die Zettel-Optik traegt schon
   Formularlinien, Grenzstein-Kante und den Passstempel bei "Aufgabe". */
.wbr_body .wbr_panel::before { content: none; }
/* Grenzstein-Kante unten */
.wbr_body .wbr_panel::after {
  content: "";
  position: absolute;
  inset: auto 6px 4px 6px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gb-stein-dunkel), var(--gb-stein-tief));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  opacity: .55;
}

.wbr_body .wbr_stat {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 4.4rem;
}
.wbr_body .wbr_stat label {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gb-tinte-weich);
}
.wbr_body .wbr_stat span {
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--gb-tinte);
  font-variant-numeric: tabular-nums;
}
/* Aufgabe als Passstempel */
.wbr_body .wbr_stat_stempel span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.1rem;
  padding: .1rem .5rem;
  border: 2px dashed rgba(166, 64, 47, .55);
  border-radius: 4px;
  color: var(--gb-rot);
  font-size: 1.05rem;
  transform: rotate(-1.6deg);
}

.wbr_body .wbr_controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .55rem;
  margin-left: auto;
}
.wbr_body .wbr_controls label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gb-tinte-weich);
}
.wbr_body .jupi_select {
  height: 40px;
  min-height: 40px;
  padding: 0 .55rem;
  border: 1.5px solid var(--gb-stein-tief);
  border-radius: 6px;
  background: #fffdf6;
  color: var(--gb-tinte);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.wbr_body .jupi_select:focus-visible {
  outline: 3px solid var(--gb-rot);
  outline-offset: 1px;
}

/* Knoepfe im Zollzettel: Gummistempel-Optik */
.wbr_body .jupi_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 40px;
  padding: .4rem .9rem;
  border: 1.5px solid var(--gb-messing-tief);
  border-radius: 6px;
  background: linear-gradient(180deg, #fdf8ec, #eadfc4);
  color: #4a3a1e;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(60, 44, 20, .28), inset 0 1px 0 #fff;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.wbr_body .jupi_btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff3d0, var(--gb-messing-hell));
  transform: translateY(-1px);
}
.wbr_body .jupi_btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(60, 44, 20, .3);
}
.wbr_body .jupi_btn:focus-visible {
  outline: 3px solid var(--gb-rot);
  outline-offset: 2px;
}
.wbr_body .jupi_btn:disabled {
  opacity: .55;
  cursor: default;
  box-shadow: none;
}
.wbr_body .jupi_btn_alt {
  border-color: var(--gb-stein-tief);
  background: linear-gradient(180deg, #fdf9ee, #efe5cd);
  color: var(--gb-tinte);
}

/* ---------- 5. Buehne: das BRUECKENDECK ----------
   Bohlen mit Fugen, oben der Messing-Handlauf, unten die Steinkante.
   Auf dem Deck: links das Wort-Schild (Ufer), rechts die Antworten als
   Gepaeckanhaenger, dazwischen der Richtungspfeil als Messingschild. */
.wbr_body .wbr_stage { margin: 0 0 1.2rem; }

.wbr_body .wbr_deck {
  position: relative;
  padding: 1.5rem 1.1rem 1.05rem;
  border: 3px solid var(--gb-holz-kante);
  border-radius: var(--gb-rund);
  background:
    repeating-linear-gradient(90deg,
      rgba(60, 44, 26, .13) 0 1.5px, transparent 1.5px 49px),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .07) 0 24px, rgba(60, 44, 26, .05) 24px 49px),
    linear-gradient(180deg, #cdb897 0%, #c3ac88 62%, #b49b76 100%);
  box-shadow:
    0 16px 34px rgba(16, 20, 26, .38),
    inset 0 0 0 2px rgba(255, 255, 255, .22),
    inset 0 -10px 18px -12px rgba(34, 32, 28, .8);
  color: var(--gb-tinte);
}
/* Stein-Deckplatte oben (der Messing-Handlauf gehoert zum Brueckenbogen
   in der Mitte, nicht ueber die ganze Breite) */
.wbr_body .wbr_deck::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9px;
  border-radius: var(--gb-rund) var(--gb-rund) 0 0;
  background: linear-gradient(180deg, var(--gb-stein-hell), var(--gb-stein-dunkel));
  box-shadow: inset 0 -1px 0 rgba(34, 32, 28, .3), 0 1px 0 rgba(255, 255, 255, .35);
}
/* Steinkante unten */
.wbr_body .wbr_deck::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 7px;
  border-radius: 0 0 var(--gb-rund) var(--gb-rund);
  background: linear-gradient(180deg, var(--gb-stein-hell), var(--gb-stein-dunkel));
  opacity: .95;
}

/* --- Ufer-Schilder + Brueckenbogen (Kopfzeile des Decks) --- */
.wbr_body .wbr_bruecke_zeile {
  display: grid;
  grid-template-columns: auto minmax(2.5rem, 1fr) auto;
  align-items: center;
  gap: .55rem;
  margin: 0 auto .55rem;
  max-width: 100%;
}
.wbr_body .wbr_seite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.6rem;
  padding: .32rem .85rem;
  border: 2px solid var(--gb-messing-tief);
  border-radius: 4px;
  background: linear-gradient(180deg, #fdf8ec, #eee2c8);
  color: var(--gb-tinte);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  box-shadow: 0 3px 0 rgba(60, 44, 20, .28), inset 0 1px 0 #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wbr_body .wbr_ms_name {
  border-color: var(--gb-rot);
  color: var(--gb-rot);
}
/* Der Bogen: Messing-Handlauf ueber Steinstreben, unten ein Soeckel */
.wbr_body .wbr_bogen {
  position: relative;
  height: 26px;
  background:
    linear-gradient(180deg, var(--gb-messing-hell), var(--gb-messing) 55%, var(--gb-messing-tief)) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg,
      var(--gb-stein) 0 6px, rgba(34, 32, 28, .24) 6px 7px, transparent 7px 26px) 0 9px / 100% 13px no-repeat,
    linear-gradient(180deg, var(--gb-stein), var(--gb-stein-tief)) 0 100% / 100% 4px no-repeat;
  filter: drop-shadow(0 2px 1px rgba(34, 32, 28, .35));
}

/* --- Richtungsschild (Messingplatte auf dem Deck) --- */
.wbr_body .wbr_richtung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1rem;
  padding: .22rem .85rem;
  border: 1px solid var(--gb-messing-tief);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gb-messing-hell), #c19a4c);
  color: #38301f;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 2px 0 rgba(60, 44, 20, .32), inset 0 1px 0 rgba(255, 255, 255, .5);
  overflow-wrap: anywhere;
}

/* --- Das Feld: Wort-Schild links, Antworten rechts --- */
.wbr_body .wbr_feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}
.wbr_body .wbr_uferplatz { min-width: 0; }

/* Wort-Schild: das Ufer, auf dem das Wort steht */
.wbr_body .wbr_schild {
  position: relative;
  padding: 1.15rem .95rem 1.05rem;
  border: 3px solid var(--gb-messing);
  border-radius: 6px;
  background:
    radial-gradient(circle at 9px 9px, #a88b57 0 2.4px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 9px) 9px, #a88b57 0 2.4px, transparent 2.8px),
    radial-gradient(circle at 9px calc(100% - 9px), #a88b57 0 2.4px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #a88b57 0 2.4px, transparent 2.8px),
    linear-gradient(170deg, #fefaf0 0%, #f3e8d0 100%);
  box-shadow:
    0 10px 22px rgba(16, 20, 26, .34),
    inset 0 0 0 2px rgba(255, 255, 255, .7);
  transform: rotate(-.4deg);
}
/* Aufhaenger: kleiner Messingbuegel mittig auf der Schildkante */
.wbr_body .wbr_schild::before {
  content: "";
  position: absolute;
  inset: -10px auto auto 50%;
  width: 58px;
  height: 11px;
  margin-left: -29px;
  border: 2px solid var(--gb-messing-tief);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #d5b071, #a87f36);
}
.wbr_body .wbr_wort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: clamp(1.45rem, 4.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--gb-tinte);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.wbr_body .wbr_hoeren {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--gb-messing-tief);
  border-radius: 50%;
  background: linear-gradient(180deg, #fdf8ec, #e6d6b4);
  color: var(--gb-tinte);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(60, 44, 20, .3), inset 0 1px 0 #fff;
  transition: background .15s ease, transform .12s ease;
}
.wbr_body .wbr_hoeren:hover {
  background: linear-gradient(180deg, #fff3d0, var(--gb-messing-hell));
  transform: translateY(-1px);
}
.wbr_body .wbr_hoeren:focus-visible {
  outline: 3px solid var(--gb-rot);
  outline-offset: 2px;
}

/* --- Antworten: Gepaeckanhaenger mit Zollkante --- */
.wbr_body .wbr_kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  max-width: 100%;
}
.wbr_body .wbr_kachel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: .7rem .6rem .7rem 1.1rem;
  border: 1.5px solid #c9b48a;
  border-left: 6px solid var(--gb-rot);
  border-radius: 5px;
  background: linear-gradient(168deg, #fefaf0 0%, #f1e6ce 100%);
  color: var(--gb-tinte);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(16, 20, 26, .26), inset 0 1px 0 #fff;
  transform: rotate(var(--tag-dreh, 0deg));
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
/* Oese des Anhaengers */
.wbr_body .wbr_kachel::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #d9c7a7;
  box-shadow: inset 0 0 0 1.5px #8d7a5c;
}
.wbr_body .wbr_kachel:nth-child(1) { --tag-dreh: -.5deg; }
.wbr_body .wbr_kachel:nth-child(2) { --tag-dreh: .6deg; }
.wbr_body .wbr_kachel:nth-child(3) { --tag-dreh: .45deg; }
.wbr_body .wbr_kachel:nth-child(4) { --tag-dreh: -.6deg; }
.wbr_body .wbr_kachel:hover:not(:disabled) {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 8px 16px rgba(16, 20, 26, .32), inset 0 1px 0 #fff;
  background: linear-gradient(168deg, #fffdf6 0%, #f6ecd6 100%);
}
.wbr_body .wbr_kachel:focus-visible {
  outline: 3px solid var(--gb-fluss);
  outline-offset: 2px;
}
.wbr_body .wbr_kachel:disabled { cursor: default; }

/* Richtig: gruener Zollstempel */
.wbr_body .wbr_kachel.wbr_kachel_ok {
  border-color: var(--gb-gruen) !important;
  border-left-color: var(--gb-gruen) !important;
  background: linear-gradient(168deg, #f2f7ec, var(--gb-gruen-hell)) !important;
  color: #234a37 !important;
  opacity: 1 !important;
  transform: rotate(0deg);
  box-shadow: 0 2px 6px rgba(16, 20, 26, .22), inset 0 0 0 2px rgba(47, 107, 79, .18);
}
.wbr_body .wbr_kachel.wbr_kachel_ok::after {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(47, 107, 79, .75);
  border-radius: 50%;
  color: var(--gb-gruen);
  font-size: .72rem;
  font-weight: 900;
  transform: rotate(-12deg);
}
/* Falsch: roter Stempel */
.wbr_body .wbr_kachel.wbr_kachel_err {
  border-color: var(--gb-rot) !important;
  border-left-color: var(--gb-rot) !important;
  background: #f7e3dd !important;
  color: #7d2b1f !important;
  opacity: .92 !important;
  box-shadow: 0 2px 6px rgba(16, 20, 26, .18);
}
.wbr_body .wbr_kachel.wbr_kachel_err::after {
  content: "✗";
  position: absolute;
  top: 3px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(166, 64, 47, .8);
  border-radius: 50%;
  color: var(--gb-rot);
  font-size: .72rem;
  font-weight: 900;
  transform: rotate(10deg);
}

/* --- Weiter-Knopf + Meldung (Zollvermerk) --- */
.wbr_body .wbr_btns_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: .85rem 0 0;
}
.wbr_body .wbr_msg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  margin: .8rem auto 0;
  max-width: 46rem;
  padding: .45rem .9rem;
  border: 1px dashed rgba(34, 32, 28, .3);
  border-radius: 4px;
  background: rgba(253, 248, 236, .62);
  color: var(--gb-tinte);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}
.wbr_body .wbr_msg_ok {
  border-color: rgba(47, 107, 79, .55);
  background: rgba(229, 239, 225, .8);
  color: #234a37;
}
.wbr_body .wbr_msg_err {
  border-color: rgba(166, 64, 47, .5);
  background: rgba(247, 227, 221, .82);
  color: #8d3225;
}

/* ---------- 6. Rundenende: die PASSSEITE ---------- */
.wbr_body .wbr_done {
  position: relative;
  padding: 1.5rem 1.2rem 1.6rem;
  border: 3px solid var(--gb-messing);
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, var(--gb-papier-linie) 27px 28px),
    linear-gradient(170deg, #fdf8ec 0%, var(--gb-papier-2) 100%);
  box-shadow: 0 16px 34px rgba(16, 20, 26, .38), inset 0 0 0 3px rgba(255, 255, 255, .55);
  color: var(--gb-tinte);
  text-align: center;
}
.wbr_body .wbr_done h3 {
  margin: .1rem 0 .4rem;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--gb-tinte);
}
.wbr_body .wbr_done h4 {
  margin: 1.2rem 0 .5rem;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gb-tinte-weich);
}
.wbr_body .wbr_done p {
  margin: .3rem 0;
  color: var(--gb-tinte);
  font-size: .98rem;
}
.wbr_body .wbr_sterne {
  margin: .35rem 0 .2rem;
  font-size: 2.1rem;
  letter-spacing: .16em;
  color: var(--gb-messing);
  text-shadow: 0 1px 0 #fff;
}
.wbr_body .wbr_chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin: .8rem 0 1.3rem;
}
.wbr_body .wbr_chip {
  position: relative;
  padding: .34rem .8rem;
  border: 1.5px dashed rgba(47, 107, 79, .65);
  border-radius: 3px;
  background: rgba(229, 239, 225, .7);
  color: #26523c;
  font-size: .88rem;
  font-weight: 700;
  transform: rotate(-1deg);
}
.wbr_body .wbr_chip:nth-child(even) { transform: rotate(.9deg); }
.wbr_body .wbr_chip_err {
  border-color: rgba(166, 64, 47, .6);
  background: rgba(247, 227, 221, .8);
  color: #8d3225;
}

/* ---------- 7. Hilfe-Fenster: das Zollformular ---------- */
.wbr_body .wbr_modal {
  max-width: 620px;
  width: calc(100vw - 2rem);
  padding: 0;
  border: 3px solid var(--gb-messing);
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, var(--gb-papier-linie) 27px 28px),
    linear-gradient(170deg, #fdf8ec 0%, var(--gb-papier-2) 100%);
  color: var(--gb-tinte);
  box-shadow: 0 20px 50px rgba(10, 14, 18, .6);
}
.wbr_body .wbr_modal::backdrop {
  background: rgba(12, 20, 28, .62);
  backdrop-filter: blur(2px);
}
.wbr_body .wbr_modal_box {
  padding: 1.3rem 1.4rem 1.4rem;
}
.wbr_body .wbr_modal_box h3 {
  margin: 0 0 .8rem;
  font-size: 1.22rem;
  font-weight: 900;
  color: var(--gb-rot);
}
.wbr_body .wbr_lernziel {
  margin-bottom: 1rem;
  padding: .6rem .8rem;
  border-left: 5px solid var(--gb-rot);
  border-radius: 3px;
  background: rgba(255, 255, 255, .5);
  color: var(--gb-tinte);
  font-size: .93rem;
}
.wbr_body .wbr_modal_box ul {
  margin: .6rem 0 1.1rem;
  padding-left: 1.2rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--gb-tinte);
}
.wbr_body .wbr_modal_box li { margin-bottom: .4rem; }
.wbr_body .wbr_modal_footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* ---------- 8. Fuss ----------
   Klebt am unteren Fensterrand (auch bei kurzem Inhalt): der Hauptbereich
   waechst mit (flex: 1 0 auto), der Fuss zieht per margin-top:auto nach. */
.wbr_body .wbr_fuss,
.wbr_body .jupi_footer.wbr_fuss {
  margin: auto 0 0;
  padding: .9rem 1rem 1.1rem;
  border-top: 1px solid rgba(217, 199, 167, .28);
  border-radius: 0;
  background: rgba(12, 20, 28, .5);
  backdrop-filter: blur(3px);
}
.wbr_body .wbr_fuss .jupi_footer_text {
  color: #ded4bf;
  font-size: .8rem;
}
.wbr_body .wbr_fuss .jupi_footer_text a {
  color: var(--gb-messing-hell);
}
.wbr_body .wbr_fuss .jupi_footer_text a:hover { color: #fff3d0; }

/* ---------- 9. Dark Mode: NACHT AN DER GRENZE ----------
   Dieselbe Szene als Nachtfassung (Laternenlicht, dunkles Blau). Leiste
   und Deck sinken ins Dunkel, PAPIER BLEIBT HELL: Zollzettel, Wort-Schild,
   Gepaeckanhaenger, Passseite und Hilfe-Fenster behalten ihre Creme-Flaeche
   - sie sind die lesbaren Stellen. */
html[data-theme="dark"] body.jupi.wbr_body {
  background-color: var(--gb-nacht);
  background-image: url("kulisse-nacht.svg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #ece4d2;
}
/* Auch im Dunkelmodus bleibt der Hauptbereich durchsichtig (die Plattform
   setzt dort sonst die dunkle Flaeche #1E1E1E ueber die Kulisse). */
html[data-theme="dark"] .wbr_body .jupi_main,
html[data-theme="dark"] .wbr_body .wbr_main { background: transparent; }

/* Leiste: dunkler Sandstein (Nachtblau) */
html[data-theme="dark"] .wbr_body .wbr_header {
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, .1) 0 40%, transparent 41%),
    linear-gradient(180deg, #384451 0%, #2b3540 55%, #1e262f 100%);
  border-bottom-color: #12181e;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .wbr_body .wbr_brand {
  border-color: var(--gb-messing);
  background:
    radial-gradient(circle at 7px 7px, #8a7040 0 2.2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, #8a7040 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), #8a7040 0 2.2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #8a7040 0 2.2px, transparent 2.6px),
    linear-gradient(180deg, #34302a, #2a2721);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wbr_body .wbr_brand h1 {
  color: #f2e6c9;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .wbr_body .wbr_header .jupi_nav_back {
  background: linear-gradient(180deg, #f0e6ce, #dccfae);
  color: #2a2318;
  border-color: var(--gb-messing);
}
html[data-theme="dark"] .wbr_body .wbr_header .jupi_nav_back:hover {
  background: var(--gb-messing-hell);
}
html[data-theme="dark"] .wbr_body .wbr_werkzeuge {
  border-color: #12181e;
  background: linear-gradient(180deg, #2a333d, #1b222a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .wbr_body .wbr_header .jupi_sprachen_select {
  background: linear-gradient(180deg, #f0e6ce, #dbcdac);
  color: #2a2318;
  border-color: var(--gb-messing-tief);
}
html[data-theme="dark"] .wbr_body .wbr_header .jupi_sprachen_select option {
  color: #2a2318;
  background: #f0e6ce;
}
html[data-theme="dark"] .wbr_body .wbr_theme_switch {
  background: linear-gradient(180deg, #6a5a3c, #443a28);
  border-color: #1d1a15;
}

/* Zollzettel bleibt Papier, nur die Kante dunkelt */
html[data-theme="dark"] .wbr_body .wbr_panel {
  border-color: #8a7856;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(44, 74, 99, .22) 27px 28px),
    linear-gradient(170deg, #f4ecd9 0%, #e8dcc2 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(255, 255, 255, .35);
}

/* Deck: dunkles Holz, Messing bleibt Messing */
html[data-theme="dark"] .wbr_body .wbr_deck {
  border-color: #241f19;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0 1.5px, transparent 1.5px 49px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 24px, rgba(0, 0, 0, .06) 24px 49px),
    linear-gradient(180deg, #453d31 0%, #3a3329 62%, #2d2820 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .wbr_body .wbr_deck::after {
  background: linear-gradient(180deg, #6b5f4b, #3a332a);
}
html[data-theme="dark"] .wbr_body .wbr_bogen {
  opacity: .9;
}
html[data-theme="dark"] .wbr_body .wbr_richtung {
  background: linear-gradient(180deg, #c9a869, #9c7a34);
  color: #241d10;
}
/* Papier bleibt hell */
html[data-theme="dark"] .wbr_body .wbr_seite {
  background: linear-gradient(180deg, #f5edd9, #e3d6b8);
  color: #2a2318;
}
html[data-theme="dark"] .wbr_body .wbr_ms_name {
  color: var(--gb-rot);
  border-color: var(--gb-rot);
}
html[data-theme="dark"] .wbr_body .wbr_schild {
  background:
    radial-gradient(circle at 9px 9px, #8a7040 0 2.4px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 9px) 9px, #8a7040 0 2.4px, transparent 2.8px),
    radial-gradient(circle at 9px calc(100% - 9px), #8a7040 0 2.4px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #8a7040 0 2.4px, transparent 2.8px),
    linear-gradient(170deg, #fffbf1 0%, #f0e4cb 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .5);
}
html[data-theme="dark"] .wbr_body .wbr_wort { color: var(--gb-tinte); }
html[data-theme="dark"] .wbr_body .wbr_hoeren {
  background: linear-gradient(180deg, #f7eed9, #ddd0ae);
  color: #2a2318;
  border-color: var(--gb-messing-tief);
}
html[data-theme="dark"] .wbr_body .wbr_hoeren:hover {
  background: linear-gradient(180deg, #fff3d0, var(--gb-messing-hell));
}
html[data-theme="dark"] .wbr_body .wbr_kachel {
  background: linear-gradient(168deg, #fdf8ec 0%, #eee1c6 100%);
  color: var(--gb-tinte);
  border-color: #a8916a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
}
html[data-theme="dark"] .wbr_body .wbr_kachel:hover:not(:disabled) {
  background: linear-gradient(168deg, #fffdf6 0%, #f5e9d0 100%);
}
html[data-theme="dark"] .wbr_body .wbr_kachel.wbr_kachel_ok {
  background: linear-gradient(168deg, #eef5e8, #d9e8d2) !important;
  color: #234a37 !important;
  border-color: var(--gb-gruen) !important;
  border-left-color: var(--gb-gruen) !important;
}
html[data-theme="dark"] .wbr_body .wbr_kachel.wbr_kachel_err {
  background: #f4ded7 !important;
  color: #7d2b1f !important;
  border-color: var(--gb-rot) !important;
  border-left-color: var(--gb-rot) !important;
}
html[data-theme="dark"] .wbr_body .wbr_msg {
  background: rgba(14, 26, 38, .62);
  border-color: rgba(217, 199, 167, .4);
  color: #ece4d2;
}
html[data-theme="dark"] .wbr_body .wbr_msg_ok {
  background: rgba(28, 52, 40, .8);
  border-color: rgba(122, 190, 150, .5);
  color: #cfe6d8;
}
html[data-theme="dark"] .wbr_body .wbr_msg_err {
  background: rgba(58, 26, 22, .82);
  border-color: rgba(200, 97, 76, .6);
  color: #f3c9c0;
}
html[data-theme="dark"] .wbr_body .wbr_done {
  border-color: var(--gb-messing-tief);
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, var(--gb-papier-linie) 27px 28px),
    linear-gradient(170deg, #f6eeda 0%, #e9dcc0 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .wbr_body .wbr_done h3,
html[data-theme="dark"] .wbr_body .wbr_done h4,
html[data-theme="dark"] .wbr_body .wbr_done p { color: var(--gb-tinte); }
html[data-theme="dark"] .wbr_body .wbr_modal {
  border-color: var(--gb-messing-tief);
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, var(--gb-papier-linie) 27px 28px),
    linear-gradient(170deg, #f6eeda 0%, #e9dcc0 100%);
}
html[data-theme="dark"] .wbr_body .wbr_fuss,
html[data-theme="dark"] .wbr_body .jupi_footer.wbr_fuss {
  background: rgba(6, 12, 18, .72);
  border-top-color: rgba(217, 199, 167, .2);
}
/* Knoepfe und Auswahl bleiben Papier/Messing - die Plattform faerbt sie im
   Dunkelmodus orange bzw. grau (html[data-theme="dark"] .jupi_btn). */
html[data-theme="dark"] .wbr_body .jupi_btn {
  background: linear-gradient(180deg, #f3e9d2, #ddcfae);
  color: #2a2318;
  border-color: var(--gb-messing-tief);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
}
html[data-theme="dark"] .wbr_body .jupi_btn_alt {
  background: linear-gradient(180deg, #efe6d0, #d8c9a6);
  color: #2a2318;
  border-color: var(--gb-stein-tief);
}
html[data-theme="dark"] .wbr_body .jupi_btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff3d0, var(--gb-messing-hell));
}
html[data-theme="dark"] .wbr_body .jupi_btn_alt:hover:not(:disabled) {
  background: linear-gradient(180deg, #fbf1d8, #e3d5b4);
}
html[data-theme="dark"] .wbr_body .jupi_select {
  background: #fffdf6;
  color: var(--gb-tinte);
  border-color: var(--gb-stein-tief);
}

/* ---------- 10. Handy / schmale Fenster ---------- */
@media (min-width: 880px) {
  .wbr_body .wbr_feld {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 1.2rem;
  }
}

@media (max-width: 720px) {
  .wbr_body .wbr_header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand brand" "zurueck werkzeuge";
    gap: .45rem .6rem;
    padding: 1rem .7rem .6rem;
  }
  .wbr_body .wbr_brand { grid-area: brand; justify-self: start; }
  .wbr_body .wbr_werkzeuge { grid-area: werkzeuge; justify-self: end; max-width: 100%; }
  .wbr_body .wbr_header .jupi_nav_back { grid-area: zurueck; justify-self: start; }
  .wbr_body .wbr_header .jupi_sprachen_select { max-width: 8.5rem; font-size: .78rem; }
  .wbr_body .wbr_brand h1 { font-size: 1.12rem; }
  .wbr_body .wbr_brand img { width: 32px; height: 32px; }
  .wbr_body .wbr_main { padding: .1rem .7rem 1.1rem; }
  .wbr_body .wbr_panel { padding: .9rem .8rem 1rem; gap: .45rem .7rem; }
  .wbr_body .wbr_controls { margin-left: 0; width: 100%; }
  .wbr_body .wbr_controls label { width: auto; margin-right: .2rem; }
  .wbr_body .wbr_controls .jupi_select { flex: 1 0 calc(100% - 7.2rem); min-width: 0; max-width: 100%; }
  .wbr_body .wbr_deck { padding: 1.35rem .7rem 1rem; }
  .wbr_body .wbr_seite { min-width: 0; padding: .3rem .6rem; font-size: .84rem; }
  .wbr_body .wbr_kachel { font-size: .95rem; padding: .65rem .45rem .65rem .95rem; }
  .wbr_body .wbr_msg { font-size: .9rem; }
}

/* Sehr schmale Fenster (390 px und weniger): alles eine Spur kleiner. */
@media (max-width: 430px) {
  .wbr_body .wbr_header .jupi_sprachen_select { max-width: 7rem; }
  .wbr_body .jupi_sprachen_icon { display: none; }
  .wbr_body .wbr_bruecke_zeile { gap: .35rem; }
  .wbr_body .wbr_kachel { font-size: .9rem; min-height: 54px; }
  .wbr_body .wbr_stat { min-width: 3.6rem; }
  .wbr_body .wbr_stat span { font-size: 1.15rem; }
  .wbr_body .wbr_msg { min-height: 2.2em; }
}

/* ---------- 11. Bedienziele >= 40 x 40 px (AGENTS.md 3.13.5) ---------- */
.wbr_body .wbr_header .jupi_sprachen_select,
.wbr_body .wbr_header .jupi_nav_back,
.wbr_body .jupi_select,
.wbr_body .jupi_btn,
.wbr_body .wbr_hoeren,
.wbr_body .wbr_kachel { min-height: 40px; }

.wbr_body .wbr_kachel { min-height: 58px; }
.wbr_body .wbr_hoeren { min-width: 40px; }