/* ============================================================
   Verben-Lauf - DORFWEG: die eigene Optik des Spiels (.vl_*).
   Der Rahmen (Kopfzeile, Dialog) kommt aus rahmen.css, die
   Plattform-Grundlagen aus colors.css/jupi.css. Hier steht das
   Material der Welt: Holz, Schild-Grün, Creme und eine Wanderkarte.

   Welt (AGENTS.md 3.13.6b): Das Kind läuft einen österreichischen
   Landweg entlang und wählt am Tor die richtige deutsche Verbform.
   Deshalb ist die Seite ein Dorfweg: Kulisse mit Wiese, Holzzaun,
   Kapelle und Ortstafel (kulisse.svg, EINE Szene - 3.13.7),
   die Leiste ein Holz-Schild in Grün mit Creme-Schrift, das HUD eine
   Wanderkarte, die Aufgabe ein Holzschild, das Ergebnis eine Wegmarke.
   Dark Mode = Abenddämmerung im Dorf (dieselbe Welt, Laternen an).

   Regeln der Plattform (AGENTS.md 3.13):
   - Bedienziele mindestens 40 x 40 px.
   - Keine Erklaerbox unter dem Spiel (alles steht im Menue bzw.
     im ❓-Dialog) - Goldene Negativ-Regel 3.13.4.
   - [hidden] muss immer wirken (display:none), auch mitten in
     Flex- oder Grid-Regeln.
   ============================================================ */

/* Der Container verteilt freien Platz sonst an ALLE Zeilen - die
   Kopfzeile wuerde mitwachsen (Wortklick-Lehre). So wächst nur die
   Buehne.
   Die Hoehe kommt jetzt aus dem FENSTER (100dvh): Kopfzeile und HUD
   stapeln sich kompakt, die Buehne bekommt den ganzen Rest. Vorher
   richtete sich die Buehne nach 62-66vh und die Seite scrollte
   (390x844: 9 px, 1280x900: 45 px), waehrend die Figur winzig blieb. */
.vl_body .jupi_container {
  grid-template-rows: 0 min-content minmax(0, 1fr) auto;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.vl_body { height: 100dvh; overflow: hidden; }
.vl_body .jupi_main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.5rem 0.7rem 0.25rem;
  overflow: hidden;
  /* Die Kulisse des Dorfwegs liegt auf dem body - der Hauptbereich darf
     sie nicht mit einer deckenden Flaeche zustellen (jupi.css setzt sonst
     --ct-color). */
  background: transparent;
}
/* Der Fuss traegt sein eigenes Papier (.vl_fuss) - jupi.css wuerde sonst
   die deckende Plattform-Flaeche --ct-color darueber legen. */
.vl_body .jupi_container > .jupi_footer { background: transparent; }
.vl_body .jupi_container > .vl_fuss {
  background-color: var(--vl_papier);
  background-image: linear-gradient(180deg, #f7eed8 0%, #e9dbbb 100%);
  /* jupi.css schiebt den Fuss mit margin-top:1rem nach oben - dann bliebe
     ein Streifen Kulisse zwischen Bühne und Fuss stehen. */
  margin: 0 auto;
}
.vl_body [hidden] { display: none !important; }
.vl_body .vl_stat label { font-family: inherit; }

/* Der Spielname steht als <h1> in der Kopfzeile - ohne die grossen
   Standardraender der Ueberschrift bleibt die Leiste eine Zeile. */
.neu_marke h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Grundform der Seite: der Dorfweg als EINE Szene ---------- */
.vl_body {
  /* Kein Plattform-Hintergrund: der Dorfweg kommt aus kulisse.svg.
     Der Margin-Reset ist Pflicht: die Plattform-Regel gilt nur an
     body.jupi - ohne Reset bleibt der Browser-Standardrand von 8 px
     stehen und die Layout-Abnahme faellt auf.
     Die Kulisse ist EIN Bild (1600x1000) mit cover/no-repeat - keine
     sichtbare Kachelwiederholung (AGENTS.md 3.13.7, Weg A). */
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background-color: #7ea463;
  background-image: url("kulisse.svg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* Material des Dorfwegs (hell): Papier, Holz, Schild-Grün */
  --vl_tinte: #2b2115;
  --vl_tinte_sanft: #6b5636;
  --vl_papier: #fdf6e4;
  --vl_papier_tief: #efe1c2;
  --vl_papier_rand: #b99a63;
  --vl_holz: #8a6a44;
  --vl_holz_tief: #5a3f23;
  --vl_holz_hell: #cbb184;
  --vl_schild_oben: #3f7050;
  --vl_schild_unten: #27492f;
  --vl_schild_rand: #1c3522;
  --vl_creme: #f7efd9;
  --vl_gruen: #2f5638;
  --vl_gruen_dunkel: #1f3d27;
  --vl_gelb: #e3ae2c;
  --vl_rot: #b3432e;
  --vl_blau: #35618f;
  --vl_schatten: rgba(31, 23, 10, 0.22);
  /* Alte Namen bleiben bedient (andere Regeln unten nutzen sie). */
  --vl_kasten: var(--vl_papier);
  --vl_text: var(--vl_tinte);
  --vl_text_grau: var(--vl_tinte_sanft);
  --vl_rand: var(--vl_papier_rand);
}

/* Dark Mode = Abenddämmerung im Dorf: dieselbe Kulisse, gedimmt,
   Laternen an, Himmel violettblau. Papiere (Karte, Schilder) bleiben
   hell - die Antworten müssen lesbar bleiben (AGENTS.md 3.13.6). */
html[data-theme="dark"] .vl_body {
  background-color: #241f45;
  background-image:
    linear-gradient(180deg, rgba(16, 12, 38, 0.72) 0%, rgba(48, 24, 34, 0.55) 60%, rgba(20, 16, 32, 0.72) 100%),
    url("kulisse.svg");
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;

  --vl_tinte: #2a2114;
  --vl_tinte_sanft: #6a583c;
  --vl_papier: #e9dcbd;
  --vl_papier_tief: #d8c7a2;
  --vl_papier_rand: #a98c5c;
  --vl_holz: #6d5537;
  --vl_holz_tief: #3d2d1b;
  --vl_holz_hell: #a08a63;
  --vl_schild_oben: #2a4a34;
  --vl_schild_unten: #18301f;
  --vl_schild_rand: #102215;
  --vl_creme: #efe4c9;
  --vl_gruen: #3c6b48;
  --vl_gruen_dunkel: #223f2a;
  --vl_gelb: #d9a52a;
  --vl_rot: #a53a26;
  --vl_blau: #2f5680;
  --vl_schatten: rgba(0, 0, 0, 0.45);
}

/* ============================================================
   JUPI-Leiste im Spielmaterial: grün lackiertes Holz-Schild mit
   Creme-Schrift. Drei Zonen und beide Werkzeuge bleiben (3.13.2).
   Die !important-Regeln schlagen die Rahmen-Vorgaben aus rahmen.css.
   ============================================================ */
.vl_body .neu_header {
  background-color: #2f5638 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px,
      rgba(0, 0, 0, 0.05) 2px 5px),
    linear-gradient(180deg, #3f7050 0%, #2f5638 58%, #24432c 100%) !important;
  color: var(--vl_creme);
  border-bottom: 3px solid var(--vl_holz) !important;
  box-shadow: 0 6px 18px rgba(20, 30, 15, 0.28),
              inset 0 1px 0 rgba(255, 253, 244, 0.22) !important;
}
.vl_body .neu_marke h1 {
  color: var(--vl_creme);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  letter-spacing: 0.01em;
}
/* Zurück-Pille: Creme-Schild mit grüner Schrift */
.vl_body .neu_header .jupi_nav_back {
  background: var(--vl_creme) !important;
  color: var(--vl_gruen) !important;
  border: 1px solid var(--vl_holz_hell) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22) !important;
}
.vl_body .neu_header .jupi_nav_back:hover { background: #fffdf4 !important; }

/* Sprachwahl: Creme-Feld statt Milchglas */
.vl_body .neu_header .jupi_sprachen_select {
  background: var(--vl_creme);
  color: var(--vl_gruen_dunkel);
  border: 1px solid var(--vl_holz_hell);
  font-weight: 700;
}
.vl_body .neu_header .jupi_sprachen_select option { color: #2b2115; background: #fffdf5; }

/* Dark-Schalter: Creme-Schale mit grünem Daumen */
.vl_body .neu_header #jupi_theme_toggle {
  background: var(--vl_creme) !important;
  border: 1px solid var(--vl_holz_hell) !important;
}
.vl_body .neu_header #jupi_theme_toggle .jts_thumb {
  background: var(--vl_gruen) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .vl_body .neu_header {
  background-color: #16301f !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px,
      rgba(0, 0, 0, 0.07) 2px 5px),
    linear-gradient(180deg, #24452f 0%, #16301f 60%, #0f2317 100%) !important;
  border-bottom-color: #6d5537 !important;
}
html[data-theme="dark"] .vl_body .neu_header .jupi_nav_back {
  background: var(--vl_papier) !important;
  color: #223f2a !important;
  border-color: #a98c5c !important;
}
html[data-theme="dark"] .vl_body .neu_header .jupi_sprachen_select {
  background: var(--vl_papier);
  color: #223f2a;
  border-color: #a98c5c;
}
html[data-theme="dark"] .vl_body .neu_header #jupi_theme_toggle {
  background: var(--vl_papier) !important;
  border-color: #a98c5c !important;
}
html[data-theme="dark"] .vl_body .neu_header #jupi_theme_toggle .jts_thumb {
  background: #3c6b48 !important;
}

/* ============================================================
   HUD: die WANDERKARTE (Papier mit Höhenlinien) - Punkte, Best,
   Distanz, Tempo, Kombo, Münzen als Kartenlegende (3.13.6 Punkt 4)
   ============================================================ */
.vl_hud {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 2px solid var(--vl_papier_rand);
  border-radius: 14px;
  background-color: var(--vl_papier);
  background-image:
    radial-gradient(circle at 12% 132%, rgba(120, 92, 44, 0) 34px,
      rgba(120, 92, 44, 0.13) 35px 36px, rgba(120, 92, 44, 0) 37px),
    radial-gradient(circle at 84% 128%, rgba(120, 92, 44, 0) 44px,
      rgba(120, 92, 44, 0.11) 45px 46px, rgba(120, 92, 44, 0) 47px),
    radial-gradient(circle at 52% -46%, rgba(120, 92, 44, 0.10) 0 30px,
      rgba(120, 92, 44, 0) 32px),
    linear-gradient(180deg, var(--vl_papier) 0%, var(--vl_papier_tief) 100%);
  box-shadow: 0 8px 22px var(--vl_schatten),
              inset 0 0 0 2px rgba(255, 253, 244, 0.55);
}
.vl_stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 4.2rem;
  padding: 0 0.35rem 0 0.7rem;
}
/* Kartenlegende: ein kleiner Holz-Punkt vor jedem Wert */
.vl_stat::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--vl_holz);
  transform: rotate(45deg);
  opacity: 0.75;
}
.vl_stat label {
  font-size: 0.875rem;          /* 14 px - vorher 10,6 px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vl_tinte_sanft);
  font-weight: 700;
}
.vl_stat span {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vl_tinte);
  font-variant-numeric: tabular-nums;
}
.vl_knoepfe {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
  align-items: center;
}
/* Knöpfe wie kleine Holz-Schilder */
.vl_knopf {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--vl_holz_tief);
  border-radius: 11px;
  background-color: var(--vl_holz);
  background-image: linear-gradient(180deg, #a67f4c 0%, #7a5a33 100%);
  color: var(--vl_creme);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(58, 40, 18, 0.55),
              inset 0 1px 0 rgba(255, 253, 244, 0.28);
  transition: background 0.15s, transform 0.15s;
}
.vl_knopf:hover {
  background-image: linear-gradient(180deg, #b78e57 0%, #8a673c 100%);
}
.vl_knopf_breit:hover {
  background-image: linear-gradient(180deg, #fffdf4 0%, #f3e7cc 100%);
}
.vl_body button:focus-visible, .vl_body select:focus-visible {
  outline: 3px solid #e8ae58;
  outline-offset: 3px;
}
.vl_knopf:active { transform: scale(0.95); }

/* ============================================================
   Aufgabe: der deutsche Satz steht auf einem Holzschild
   ============================================================ */
.vl_frage {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;            /* fest: zwei Zeilen springen nicht */
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--vl_holz_tief);
  border-left: 6px solid var(--vl_holz_hell);
  border-radius: 12px;
  background-color: var(--vl_holz_tief);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 253, 244, 0.035) 0 3px,
      rgba(0, 0, 0, 0.05) 3px 7px),
    linear-gradient(180deg, #6b4e2c 0%, #4a3520 100%);
  color: var(--vl_creme);
  box-shadow: 0 6px 16px rgba(24, 18, 8, 0.26),
              inset 0 1px 0 rgba(255, 253, 244, 0.18);
}
.vl_frage_buch {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--vl_creme);
  color: var(--vl_gruen_dunkel);
  font-weight: 800;
  font-size: 0.875rem;          /* 14 px - kleiner wird die Marke nicht */
  letter-spacing: 0.02em;
}
.vl_frage strong {
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  color: var(--vl_creme);
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Buehne: Leinwand im Holzrahmen, Lage-Karten darueber
   ============================================================ */
.vl_buehne {
  position: relative;
  width: 100%;
  /* Die Buehne nimmt den Rest der Fensterhoehe (Zeile 1fr in .jupi_main).
     Die Leinwand zeichnet in der Groesse ihres Kastens - jedes Seiten-
     verhaeltnis ist deshalb ohne Verzerrung spielbar. Auf sehr breiten
     Fenstern bleibt sie bei hoechstens 16:9 (Regel der Plattform). */
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
  margin-inline: auto;
  border-radius: 22px;
  overflow: hidden;
  border: none;
  background: #8fd6f2;
  touch-action: none;            /* wischen gehoert dem Spiel */
  box-shadow: 0 18px 45px rgba(31, 23, 10, 0.28);
}
/* Der Holzrahmen der Bühne: als ::after ÜBER der Leinwand, damit er
   weder Layout noch Messwerte (Figur, Tafeln) verändert. */
.vl_buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 6px solid #7d5a34;
  box-shadow: inset 0 0 0 2px rgba(255, 247, 223, 0.22),
              inset 0 12px 26px rgba(24, 18, 8, 0.20),
              0 0 0 2px rgba(58, 40, 18, 0.35);
  pointer-events: none;
  z-index: 2;                    /* unter Meldung (3) und Menüs (4) */
}
html[data-theme="dark"] .vl_buehne { background: #241f45; }
html[data-theme="dark"] .vl_buehne::after {
  border-color: #5c452a;
  box-shadow: inset 0 0 0 2px rgba(239, 228, 201, 0.14),
              inset 0 12px 30px rgba(0, 0, 0, 0.42),
              0 0 0 2px rgba(0, 0, 0, 0.45);
}
/* Nur auf grossen Fenstern bleibt die Buehne bei hoechstens 16:9
   (Plattform-Regel). Am Handy - auch quer - fuellt sie die Breite,
   sonst blieb im Querformat ein 335-px-Feld in einem 844-px-Fenster. */
@media (min-width: 900px) {
  .vl_buehne { max-width: min(100%, calc((100dvh - 12.5rem) * 16 / 9)); }
}
.vl_buehne canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Rote Warnung bei nahem Verfolger */
.vl_gefahr {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  background: radial-gradient(ellipse at center,
              rgba(229, 73, 58, 0) 55%, rgba(229, 73, 58, 0.38) 100%);
}

/* Nicht-blockierende Meldung (Korrektur / Powerup) - ein Holzbrett */
.vl_meldung {
  position: absolute;
  top: 0.7rem;
  left: 50%;
  transform: translate(-50%, -0.6rem);
  max-width: min(92%, 26rem);
  padding: 0.5rem 0.9rem;
  /* Vorher 999px: eine mehrzeilige Korrektur ("Falsch! Richtig waere: ...
     Achte auf die Person ...") wurde damit zum riesigen roten Kreis, der
     das halbe Spielfeld und die Menues zudeckte. */
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background-color: rgba(43, 30, 17, 0.94);
  background-image: linear-gradient(180deg, #6b4e2c 0%, #4a3520 100%);
  color: #fffdf4;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 3;              /* unter den Menue-Lagen (4) bleiben */
}
.vl_meldung.zeige { opacity: 1; transform: translate(-50%, 0); }
.vl_meldung.ok {
  background-image: linear-gradient(180deg, #35714a 0%, #1f4a2e 100%);
}
.vl_meldung.falsch {
  background-image: linear-gradient(180deg, #a4432c 0%, #7c2c1c 100%);
}
.vl_meldung.power {
  background-image: linear-gradient(180deg, #35618f 0%, #22405e 100%);
}

/* ============================================================
   Menue-Lagen (Start, Pause, Game Over) - Typ 4
   Karte aus Papier in einem Holzrahmen (Wanderkarte des Dorfwegs)
   ============================================================ */
.vl_menu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(90deg, rgba(22, 30, 20, 0.42), rgba(22, 30, 20, 0));
  z-index: 4;
}
.vl_menu_kasten {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(100%, 26rem);
  max-height: 100%;
  overflow: auto;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  border: 2px solid var(--vl_holz);
  background-color: var(--vl_papier);
  background-image: linear-gradient(180deg, var(--vl_papier) 0%, var(--vl_papier_tief) 100%);
  box-shadow: 0 18px 55px rgba(24, 18, 8, 0.42),
              inset 0 0 0 4px #fdf7e6,
              inset 0 0 0 5px var(--vl_holz_hell);
  color: var(--vl_tinte);
}
.vl_menu_kasten h3 {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  color: var(--vl_tinte);
}
/* Ergebniskarte: "Wegmarke" - der Titel ist ein Stempel */
#vl_end_titel {
  align-self: center;
  padding: 0.1rem 0.85rem;
  border: 2px solid var(--vl_rot);
  border-radius: 6px;
  color: var(--vl_rot);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  background: rgba(179, 67, 46, 0.07);
}
.vl_grossknopf {
  min-height: 52px;
  border: 2px solid var(--vl_schild_rand);
  border-radius: 12px;
  background-color: var(--vl_schild_oben);
  background-image: linear-gradient(180deg, #3f7050 0%, #27492f 100%);
  color: var(--vl_creme);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 0 #172b1d,
              inset 0 1px 0 rgba(255, 253, 244, 0.24);
}
.vl_grossknopf:active { transform: translateY(2px); box-shadow: none; }
.vl_knopf_breit {
  min-height: 44px;
  border: 1px solid var(--vl_papier_rand);
  border-radius: 10px;
  background-color: var(--vl_papier);
  background-image: linear-gradient(180deg, #fffdf4 0%, #f1e4c6 100%);
  color: var(--vl_tinte);
  font-family: inherit;
  font-size: 0.95rem;           /* 15,2 px - vorher Plattform-Erbe (13,3) */
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(120, 92, 44, 0.35);
}
.vl_menu_zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.vl_menu_zeile > * { flex: 1 1 9rem; }
.vl_wahl_zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem 0.6rem;
}
.vl_wahl_zeile label {
  font-size: 0.875rem;          /* 14 px */
  font-weight: 700;
  color: var(--vl_tinte_sanft);
}
.vl_wahl {
  flex: 1 1 8rem;
  min-height: 40px;
  padding: 0 0.5rem;
  border: 1px solid var(--vl_papier_rand);
  border-radius: 8px;
  background: #fffdf5;
  color: var(--vl_tinte);
  font-size: 0.95rem;
  width: 100%;
  min-width: 0;
}
.vl_steuerung {
  margin: 0;
  font-size: 0.875rem;          /* 14 px */
  color: var(--vl_tinte_sanft);
  text-align: center;
}
.vl_best_zeile {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--vl_tinte_sanft);
}
/* „Über das Spiel": aufgeklappter Erklärtext im Menü */
#vl_ueber { margin-top: -0.2rem; }
.vl_lernsatz {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--vl_tinte);
  background: rgba(47, 86, 56, 0.10);
  border-left: 4px solid var(--vl_gruen);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}

/* Game-Over-Statistik als Felder der Wanderkarte */
.vl_end_punkte {
  margin: 0;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--vl_tinte);
}
.vl_end_punkte span + span { font-size: 1rem; font-weight: 600; }
.vl_rekord_zeile { margin: 0; text-align: center; min-height: 1.4rem; }
.vl_rekord {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #a8801a;
  background: var(--vl_gelb);
  color: #4a3400;
  font-weight: 800;
}
.vl_ende_raster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}
.vl_ende_raster .vl_stat {
  flex: 1 1 6rem;
  background: rgba(120, 92, 44, 0.10);
  border: 1px dashed var(--vl_papier_rand);
  border-radius: 8px;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  min-height: 52px;
}

/* Hilfe-Dialog: Lernsatz wie im Menue */
.neu_dialog .vl_lernsatz { margin-top: 0.8rem; }

/* Fuss: schmaler Papierstreifen mit Holzkante */
.vl_fuss {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--vl_tinte_sanft);
  background-color: var(--vl_papier);
  background-image: linear-gradient(180deg, #f7eed8 0%, #e9dbbb 100%);
  border-top: 2px solid var(--vl_papier_rand);
  font-size: 0.875rem;          /* nie kleiner als 14 px */
  margin: 0 auto;
  padding: 0.3rem 0.8rem;
}
.vl_fuss a {
  color: var(--vl_gruen);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: 40px;             /* Bedienziel, nicht nur Text */
  padding: 0 0.4rem;
}
html[data-theme="dark"] .vl_fuss,
html[data-theme="dark"] .vl_body .jupi_container > .vl_fuss {
  background-color: var(--vl_papier);
  background-image: linear-gradient(180deg, var(--vl_papier) 0%, var(--vl_papier_tief) 100%);
  border-top-color: #a98c5c;
}
html[data-theme="dark"] .vl_fuss a { color: #223f2a; }

/* Auf breiten Bühnen bleibt die Figur rechts neben der Menükarte sichtbar. */
@media (min-width: 760px) {
  #vl_startmenu { justify-content: flex-start; padding-left: 7%; }
}

/* ============================================================
   Kopfzeile kompakt: eine Zeile, damit die Buehne die Hoehe bekommt
   ============================================================ */
.vl_body .neu_header {
  padding: 0.35rem 0.6rem !important;
  gap: 0.35rem 0.6rem;
  min-height: 0;
}
.vl_body .neu_marke { gap: 0.45rem; min-width: 0; }
.vl_body .neu_marke img { width: 30px; height: 30px; }
.vl_body .jupi_nav_back { padding: 0.3rem 0.6rem; font-size: 0.875rem; }
.vl_body .neu_marke h1 { font-size: 1.05rem; }
.vl_body .jupi_sprachen_select { font-size: 0.875rem; }

/* ============================================================
   Handy hochkant (< 560 px): HUD als 3x2-Raster, Knoepfe eigene Zeile.
   Vorher brach die Leiste unmotiviert um ("MUENZEN" allein in Zeile 2).
   ============================================================ */
@media (max-width: 559px) {
  .vl_body .neu_header { flex-wrap: wrap; }
  .vl_hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 0.4rem;
    margin: 0 0 0.4rem;
    padding: 0.4rem 0.5rem;
  }
  .vl_stat { min-width: 0; padding: 0 0.1rem 0 0.6rem; }
  .vl_stat label { font-size: 0.875rem; letter-spacing: 0.02em; }
  .vl_stat span { font-size: 1.1rem; }
  .vl_knoepfe {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-left: 0;
    padding-top: 0.15rem;
  }
  .vl_knopf { min-width: 44px; min-height: 44px; font-size: 1.15rem; }
  .vl_frage { min-height: 2.8rem; margin-bottom: 0.4rem; padding: 0.35rem 0.55rem; }
  .vl_frage strong { font-size: 1.05rem; line-height: 1.2; }
  .vl_frage_buch { width: 2rem; height: 2rem; font-size: 0.875rem; }
  .vl_buehne::after { border-width: 5px; }
  .vl_menu { padding: 0.5rem; }
  .vl_menu_kasten { gap: 0.45rem; padding: 0.75rem 0.8rem; border-radius: 14px; }
  .vl_menu_kasten h3 { font-size: 1.25rem; }
  #vl_end_titel { font-size: 1.1rem; }
  .vl_grossknopf { min-height: 48px; font-size: 1.05rem; }
  .vl_knopf_breit { min-height: 44px; }
  .vl_steuerung { font-size: 0.875rem; }
  .vl_end_punkte { font-size: 1.6rem; }
}

/* Querformat/Handy quer (z. B. 844x390): alles eine Zeile, damit
   ueberhaupt Spielfeld uebrig bleibt. */
@media (max-height: 500px) {
  .vl_body .neu_header { padding: 0.2rem 0.5rem !important; }
  .vl_body .neu_marke img { width: 24px; height: 24px; }
  .vl_body .neu_marke h1 { font-size: 0.95rem; }
  .vl_hud {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem 0.45rem;
    margin: 0 0 0.25rem;
    padding: 0.2rem 0.45rem;
    align-items: center;
  }
  .vl_stat { min-width: 0; padding: 0 0.1rem 0 0.5rem; }
  .vl_stat label { font-size: 0.875rem; letter-spacing: 0; }
  .vl_stat span { font-size: 1rem; }
  .vl_knopf { min-width: 40px; min-height: 40px; }
  .vl_frage { min-height: 0; margin-bottom: 0.25rem; padding: 0.15rem 0.5rem; }
  .vl_frage_buch { display: none; }
  .vl_frage strong { font-size: 1rem; }
  .vl_buehne::after { border-width: 4px; }
  .vl_fuss { padding: 0 0.6rem; }
  .vl_menu { padding: 0.5rem; }
  .vl_menu_kasten { gap: 0.4rem; padding: 0.6rem 0.8rem; }
}

/* Weniger Bewegung, wenn es gewuenscht ist */
@media (prefers-reduced-motion: reduce) {
  .vl_meldung, .vl_gefahr { transition: none; }
  .vl_grossknopf:active { transform: none; }
}