/* styles.css - eigenes Stylesheet des Bolzplatzes (Praefix .bp_)
   ------------------------------------------------------------
   Die Welt ist ein BOLZPLATZ AM ABEND unter Flutlicht (GUI-Regel 3.13.6):
   dunkler Abendhimmel, zwei Flutlichtmasten, Ballfangzaun, Vereinsbank und
   Rasen mit Kreidelinien (assets/kulisse.svg, EIN gestrecktes Bild nach
   3.13.7 Weg A). Leiste, Anzeige und Karten bestehen aus demselben Material:
   Stahl/Anthrazit mit Amberkante (Flutlicht), Papier fuer Aushaenge.

   Aufbau:
   - Kopfzeile 3.13.2: drei Zonen, Material der Flutlicht-Konsole, ganz oben
   - Buehne als Gegenstand: das Spielfeld im Bild (3.13.6)
   - Startmenue/Hilfe/Info als Aushaenge und Mannschaftsblaetter
   - keine Erklaerbox unter dem Spiel (3.13.4)
   - beide Themes lesbar; Dark Mode = derselbe Platz in tieferer Nacht
   - Bedienziele >= 40 x 40 px (3.13.5), Mindestgroessen ganz am Ende

   Grundfarben kommen aus colors.css, das Layout-Muster aus jupi.css. */

/* ---------- Grundlagen ---------- */
/* Das hidden-Attribut muss stärker sein als unsere eigenen display-Regeln.
   Sonst bleiben Menü und Ergebnisbildschirm über dem Spielfeld stehen. */
body.bp [hidden] { display: none !important; }

body.bp {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e8f0f5;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Die Seite: der Platz am Abend (3.13.7 Weg A) ----------
   EIN gestrecktes Bild, cover / no-repeat / fixed. Die zweite Ebene ist nur
   Licht und Vignette, kein zweites Motiv. Hell = Abenddaemmerung, dunkel =
   tiefe Nacht - derselbe Platz, nur spaeter.
   ACHTUNG: jupi.css setzt `body.jupi` als KURZFORM (background: ...) und im
   Dunkelmodus `html[data-theme="dark"] body.jupi` mit hoeherer Spezifitaet.
   Beide Regeln stehen deshalb hier ausdruecklich mit ALLEN Teilwerten -
   sonst loescht die Kurzform background-size/-repeat/-attachment und die
   Kulisse kachelt (genau dieser Fehler passierte in airhockey/). */
body.jupi.bp {
  background-color: #0b1420;
  background-image:
    linear-gradient(180deg, rgba(6, 12, 20, 0.10) 0%, rgba(6, 12, 20, 0.42) 62%, rgba(6, 12, 20, 0.78) 100%),
    url("assets/kulisse.svg");
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
html[data-theme="dark"] body.jupi.bp {
  background-color: #05090f;
  background-image:
    linear-gradient(180deg, rgba(3, 6, 11, 0.42) 0%, rgba(3, 6, 11, 0.68) 55%, rgba(2, 4, 8, 0.88) 100%),
    url("assets/kulisse.svg");
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
/* Die Flex-Spalte sitzt in der Hülle (siehe dort), nicht mehr am <body> selbst. */
body.bp > .bp_huelle { min-height: 0; }

/* Die Paket-Hülle ist die Seiten-Flexspalte: <body> behält nur den Hintergrund,
   .bp_huelle übernimmt die Spalte, in der Leiste und Bühne stehen. Damit die
   Abnahme (Teil D) überhaupt etwas zu messen bekommt, trägt sie die
   Plattform-Klassen .container/.jupi_container - und die eigenen Regeln hier
   sorgen dafür, dass css/layout.css daran nichts am Spiel kaputtmacht: das
   Grid der Schulwebsite wird zum Flex, die min-height auf 100dvh gesetzt.
   Rand und Innenabstand bleiben bewusst unangetastet - genau die prüft Teil D
   (der einzige Unterschied soll `margin-bottom: 2rem` sein). */
.bp_huelle {
  display: flex;
  flex-direction: column;
  /* FESTE Höhe statt min-height: ein Spiel, das den ganzen Bildschirm
     braucht, darf nicht schrumpfen, wenn css/layout.css dem .container den
     unteren Rand `margin-bottom: 2rem` gibt. Mit fester Höhe rutscht der Rand
     nach unten hinaus (der <body> schneidet mit overflow:hidden ab), statt die
     Bühne zusammenzudrücken - genau das prüft Teil D der Paket-Abnahme:
     "Geometrie brett gleich (mit/ohne layout.css)". */
  flex: 0 0 auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Die Huelle ist auf der Kulisse durchsichtig: unten scheint der Rasen
     durch, oben der Himmel. Nur Leiste und Buehne sind eigene Gegenstaende. */
  background: transparent;
}

/* ---------- Fuß ---------- */
/* Der Fuß steht bewusst unter der bildschirmfüllenden Bühne (siehe Kommentar
   im HTML). Das Schullogo ist bewusst klein: es ist ein Absender, kein Blickfang.
   Material: dunkles Flutlicht-Blech - dieselbe Konsole wie die Leiste, nur
   ohne Werkzeuge. Papierton waere hier falsch: unter dem Platz liegt Rasen. */
.bp_fuss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.82rem;
  color: #b9c8d2;
  background: linear-gradient(180deg, rgba(9, 15, 22, 0.94), #05090e);
  border-top: 1px solid rgba(233, 161, 60, 0.35);
  box-shadow: 0 -1px 0 rgba(233, 161, 60, 0.18), 0 -12px 30px rgba(0, 0, 0, 0.45);
}
.bp_fuss_schule {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  opacity: 0.85;
}
.bp_fuss p { margin: 0.1rem 0; }
.bp_fuss a,
.bp_fuss .jupi_footer_text a { color: #ffcf87; font-weight: 600; }
.bp_fuss a:hover { color: #ffe7bd; }
.bp_fuss .jupi_footer_text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.7rem;
  font-size: 0.76rem;
  color: #a9b8c3;
  line-height: 1.4;
}

/* ---------- Kopfzeile (3.13.2): Flutlicht-Konsole ----------
   Drei Zonen: links „Alle Spiele", mittig Logo + Name, rechts die Werkzeuge.
   Material: Anthrazit wie ein Flutlichtmast, Amberkante wie das Licht.
   Kein Schullogo, kein jupi-Wortlogo - die stehen im Fuß bzw. auf der
   Startseite. Die Leiste sitzt buendig an der Oberkante (3.13.2a). */
.bp_leiste {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem;
  color: #f2f7fb;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%),
    linear-gradient(90deg, #0c141d 0%, #16222e 50%, #0c141d 100%);
  border-bottom: 1px solid rgba(233, 161, 60, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 22px rgba(0, 0, 0, 0.45);
  z-index: 30;
  flex-wrap: nowrap;
}
/* Amberstreifen an der Oberkante - wie die Leuchtkante eines Flutlichts.
   Die Leiste bleibt buendig an top:0, der Streifen liegt IN ihr. */
.bp_leiste::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(233, 161, 60, 0) 0%, #e9a13c 18%, #ffe1a8 50%, #e9a13c 82%, rgba(233, 161, 60, 0) 100%);
  opacity: 0.95;
}

.bp_zurueck {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Der Plattform-Knopf .jupi_nav_back bringt aus jupi.css eine WEISSE
   Pille mit. Auf einer dunklen Leiste war der Text dann weiß auf weiß und
   damit UNSICHTBAR - im Screenshot nur eine leere helle Pille (der Fehler
   stand schon einmal in airhockey/). Deshalb wird die Pille hier ausdruecklich
   ueberschrieben: dunkles Glas mit Amberrand, guter Kontrast in beiden Themes. */
.bp_zurueck,
.bp_zurueck.jupi_nav_back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.5rem;
  background: rgba(233, 161, 60, 0.12);
  color: #ffd89a;
  border: 1px solid rgba(233, 161, 60, 0.55);
  border-radius: 0.5rem;
  padding: 0.2rem 0.65rem;
  box-shadow: 0 0 14px rgba(233, 161, 60, 0.12) inset;
  transition: background 0.15s, border-color 0.15s;
}
.bp_zurueck:hover,
.bp_zurueck.jupi_nav_back:hover {
  background: rgba(233, 161, 60, 0.22);
  color: #fff1d4;
  border-color: #ffce85;
  text-decoration: none;
}
html[data-theme="dark"] .bp_zurueck,
html[data-theme="dark"] .bp_zurueck.jupi_nav_back {
  background: rgba(233, 161, 60, 0.14);
  color: #ffd89a;
}

/* Bedienziele: mindestens 40 x 40 px (GUI_DESIGN_CHECKLISTE.md 3.13.6).
   Ohne diese Mindesthöhe sind die Knöpfe auf dem Handy 30 bis 34 px hoch -
   für kleine Finger zu klein und unter der 36-px-Grenze.
   WICHTIG: Diese Regel steht bewusst am ENDE der Datei (siehe unten bei
   "Mindestgroessen der Bedienziele"). Eine gleich schwere Regel weiter oben
   würde von der spaeteren Definition von .bp_knopf (min-height:2.1rem)
   wieder ueberschrieben - deshalb nicht einfach hier einfuegen. */
.bp_zurueck:focus-visible,
.bp_knopf:focus-visible,
#jupi_theme_toggle:focus-visible { outline: 2px solid #ffce85; outline-offset: 2px; }

/* Das Schullogo steht im Fuss (dunkle Konsole) - dort weiss faerben. In der
   Leiste gibt es bewusst KEIN Schullogo mehr (3.13.2: mittig nur Spiel-Logo). */
.bp_schule img { display: block; filter: brightness(0) invert(1); }
.bp_schule { flex: 0 0 auto; }

/* Spiel-Logo + Name in der Mitte (GUI-Liste Typ 1). Das Logo ist hier die
   einzige Bildmarke der Leiste - es kommt aus dem Paket (logo.svg). */
.bp_kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0.2rem;
}
.bp_kopf_logo { display: block; border-radius: 0.3rem; flex: 0 0 auto; }

.bp_titel {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f5f9fc;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.bp_vermerk {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd89a;
  background: rgba(233, 161, 60, 0.14);
  border: 1px solid rgba(233, 161, 60, 0.45);
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
  flex: 0 0 auto;
}

.bp_werkzeuge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

/* ---------- 🌐 Sprachumschalter in der schlanken Leiste ----------
   jupi.css stylt die Auswahl für die breite Plattform-Kopfzeile
   (max-width 17 rem). Diese Leiste ist bewusst dünn und trägt schon
   fünf Werkzeuge - deshalb wird die Auswahl hier schmaler und auf die
   Höhe der Nachbar-Knöpfe gebracht (GUI 3.13.2 Typ 1: die Leiste soll
   den Blick auf das Spiel freigeben, nicht selbst Inhalt tragen). */
.bp_leiste .jupi_sprachen_wahl { gap: 0.15rem; }
.bp_leiste .jupi_sprachen_icon { font-size: 0.9rem; }
.bp_leiste .jupi_sprachen_select {
  max-width: 7.2rem;
  min-height: 2.1rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.82rem;
  color: #eaf2f8;
  background: rgba(9, 16, 24, 0.7);
  border: 1px solid rgba(233, 161, 60, 0.35);
  border-radius: 0.45rem;
}
.bp_leiste .jupi_sprachen_select:focus-visible { outline: 2px solid #ffce85; outline-offset: 2px; }
@media (max-width: 900px) {
  .bp_leiste .jupi_sprachen_select { max-width: 5.6rem; font-size: 0.76rem; }
  .bp_leiste .jupi_sprachen_icon { display: none; }
}
@media (max-width: 560px) {
  .bp_leiste .jupi_sprachen_select { max-width: 4.6rem; padding: 0.2rem 0.25rem; }
}
.bp_knopf {
  background: rgba(233, 161, 60, 0.10);
  color: #f4f8fb;
  border: 1px solid rgba(233, 161, 60, 0.42);
  border-radius: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  min-height: 2.1rem;
  transition: background 0.15s, border-color 0.15s;
}
.bp_knopf:hover { background: rgba(233, 161, 60, 0.24); border-color: #ffce85; }

/* ---------- Das 3D-Feld ---------- */
/* Die "Bühne" fasst Spielfeld, Anzeige und Bildschirmtasten zusammen. Ohne sie
   hängen Anzeige und Tasten am Fenster und rutschen hinter die Kopfzeile.
   Material: das Spielfeld ist das BILD im Rahmen - ein dunkler Geräterahmen
   mit Amberkante (wie ein Monitor am Spielfeldrand). Der Rahmen liegt als
   Schatten AUSSERHALB der Bühne, das Bild selbst nutzt die Fläche voll -
   sonst verliert die Kamera Bildwinkel. */
.bp_buehne {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  padding: 0;
  margin: 0.3rem 0.3rem 0;
  border-radius: 0.55rem;
  background: #0b1622;
  box-shadow:
    0 0 0 1px rgba(233, 161, 60, 0.30),
    0 0 22px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* Im Vollbild ist die Bühne das Vollbild-Element - dann ohne Rahmen und Rand,
   sonst verschenkt das Spiel Bildfläche. */
.bp_buehne:fullscreen {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.bp_feld {
  position: absolute;
  inset: 0;
  background: #101a33;
}
.bp_feld canvas { display: block; width: 100%; height: 100%; }

/* ---------- Anzeige über dem Spielfeld ---------- */
/* ---------- Die Leisten oben über dem Spielfeld ----------
   Drei Stücke, alle mittig und untereinander:
     1. .bp_hud          - Spielstand, Halbzeit, Laufzeit, Restzeit
     2. .bp_hinweiszeilen - wer wird gesteuert, Pass- und Wechselziel
     3. .bp_messwerte    - der aufklappbare Knopf mit den Lernwerten

   Sie lagen zweimal an derselben Stelle und überdeckten sich gegenseitig (im
   Spielbild war die Steuerungszeile quer über dem Spielstand zu sehen). Der
   zweite Versuch gab jedem Block einen FESTEN top-Wert (0,35 / 2,6 / 5,6 rem).
   Das sah gut aus - bis eine Zeile höher wurde: eine Meldung ("Rotes Team:
   Freistoss …"), der zweite Spieler im Zwei-Spieler-Modus oder ein
   aufgeklapptes Messwert-Feld. Der feste Wert kann das nicht wissen, also
   schoben sich die Leisten gegenseitig über den Kopf. Gemessen
   (.zcode/bolzplatz3d-tests/gui-messung.js): 24 px Überdeckung in JEDEM
   Zustand, bis zu 480 px, wenn die Messwerte offen waren.

   Jetzt macht EINER die Arbeit: die Spalte .bp_leisten. Sie ist ein
   normaler Fluss (flex, Spalte, Lücke), die drei Blöcke sind ihre Kinder und
   werden nicht mehr selbst positioniert. Eine Zeile, die wächst, schiebt die
   darunterliegenden einfach weiter nach unten - so wie man es erwartet. */
.bp_leisten {
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  /* Nicht breiter als die Spalte: die Leisten richten sich nach ihr, das Feld
     darunter bleibt frei. */
  width: min(34rem, calc(100% - 1rem));
  /* Klicks gehen durch die Spalte auf das Spielfeld - nur die Knöpfe
     (Messwerte, Wechseln) nehmen Klick wieder an. */
  pointer-events: none;
}
/* Die drei Blöcke bekommen ihre Lage von der Spalte, nicht von sich selbst. */
.bp_hud,
.bp_hinweiszeilen,
.bp_messwerte {
  position: static;
  transform: none;
  margin: 0;
}

/* Der Spielstand ist eine Anzeigetafel: dunkles Blech, Amber-Ziffern wie an
   einer Bahnhofsanzeige, zwei Teamlichter (blau/rot) an den Seiten. */
.bp_hud {
  width: auto;
  max-width: 100%;
  color: #f4ecd9;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #17222d 0%, #0d1620 100%);
  border: 1px solid rgba(233, 161, 60, 0.5);
  border-radius: 0.55rem;
  padding: 0.22rem 0.9rem 0.28rem;
  font-size: 0.8rem;
  pointer-events: none;
  backdrop-filter: blur(4px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(233, 161, 60, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bp_zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.bp_tor { display: flex; align-items: center; font-weight: 700; }
.bp_tor b {
  font-size: 1.45rem;
  line-height: 1;
  min-width: 1ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Ziffern wie auf einer LED-Anzeige: heller Kern mit Glutschein. */
  text-shadow: 0 0 10px currentColor, 0 1px 0 rgba(0, 0, 0, 0.6);
}
.bp_tor.blau b { color: #7fb6ff; }
.bp_tor.rot b { color: #ff9a9a; }
.bp_mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: #d6c7a8;
  line-height: 1.25;
}
/* Laufzeit und Restzeit nebeneinander: "1:12 · 1:48".
   tabular-nums, damit die Ziffern beim Zählen nicht springen. */
.bp_zeiten {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: #ffe6b0;
  letter-spacing: 0.04em;
}
.bp_zeit_trenn { opacity: 0.5; }
/* Die letzten 30 Sekunden einer Halbzeit blinken - so sieht jeder, dass es
   gleich der Abpfiff ist. */
.bp_zeit_kurz .bp_zeiten { animation: bp_zeit_blink 1s steps(2, end) infinite; }
@keyframes bp_zeit_blink {
  from { color: inherit; opacity: 1; }
  to { color: #ff6b5e; opacity: 0.55; }
}

/* ---------- Messwert-Panel (aufklappbar) ----------
   Die Lerninhalte sind nicht weg, nur aus dem Weg. Standardmaessig zu.
   Material: dasselbe Anzeigeblench wie die Tafel, nur flacher. */
.bp_messwerte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  pointer-events: none;
  /* Nicht breiter als vorher (30 rem) - die Spalte darf ruhig breiter sein. */
  width: min(30rem, 100%);
}
.bp_messwerte_knopf {
  pointer-events: auto;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  color: #ffe0a6;
  background: rgba(13, 22, 32, 0.86);
  border: 1px solid rgba(233, 161, 60, 0.5);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  backdrop-filter: blur(4px);
}
.bp_messwerte_knopf:hover { background: rgba(28, 42, 55, 0.94); border-color: #ffce85; }
.bp_messwerte_knopf:focus-visible { outline: 2px solid #ffce85; outline-offset: 2px; }
.bp_messwerte_inhalt {
  width: 100%;
  box-sizing: border-box;
  background: rgba(11, 19, 27, 0.9);
  color: #f2f7f2;
  border: 1px solid rgba(233, 161, 60, 0.35);
  border-radius: 0.55rem;
  padding: 0.4rem 0.7rem 0.5rem;
  font-size: 0.8rem;
  backdrop-filter: blur(4px);
}

.bp_messung {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.bp_messung b { color: #ffe066; }

/* "Ball bei …": Wer den Ball gerade am Fuß hat. Frei = grau und unaufgeregt,
   ein eigener Spieler = gold (das kann man gerade nutzen), ein Gegner = rot
   (dann lohnt sich ein Wechsel). Genau diese drei Faelle entscheiden, was man
   als naechstes tut - deshalb bekommen sie eigene Farben. */
.bp_ballhalter { transition: color 0.2s; }
.bp_ballhalter.bp_ball_frei { color: #cfd8dc !important; }
.bp_ballhalter.bp_ball_fremd { color: #ff8a80 !important; }
.bp_ballhalter:not(.bp_ball_frei):not(.bp_ball_fremd) { color: #ffe066 !important; }

/* Der Kraftbalken: füllt sich, solange die Schusstaste gedrückt wird.
   Material: eine kleine Messleiste unter der Tafel. */
.bp_kraftleiste {
  height: 0.4rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  margin-top: 0.35rem;
  overflow: hidden;
}
.bp_kraftleiste i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffd54f, #ff7043);
  transition: width 0.05s linear;
}


/* Der passive Lernteil: eine Zeile Rechnung, die beim Spielen mitläuft.
   Farbe: helles Amber wie die Tafel - ruhig, aber lesbar auf dem Rasen. */
.bp_merksatz {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: #ffe6b8;
  line-height: 1.3;
}
.bp_meldung {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  min-height: 1.1rem;
}
/* ---------- Steuerungszeile mit Pass- und Wechselanzeige ----------
   Eigene schmale Leiste UNTER der Anzeige, nicht mehr Teil von ihr. So
   bleibt oben nur, was man wirklich im Sekundentakt braucht: Spielstand
   und Zeiten. Der Knopf braucht pointer-events, sonst ist die Leiste nur Text.
   Die Position kommt aus .bp_leisten - hier steht nur, wie sie INNEN aussieht.
   Die Farben sind dieselben wie die Markierungen auf dem Rasen (Punkt 7a):
   Pass = Gold, Wechsel = Cyan. So findet man den Pfeil auf dem Feld wieder. */
.bp_hinweiszeilen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  pointer-events: none;
  width: 100%;
}
.bp_steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: #eef4f8;
  background: rgba(11, 19, 27, 0.74);
  border: 1px solid rgba(233, 161, 60, 0.3);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  backdrop-filter: blur(3px);
}
.bp_steuerung[hidden] { display: none; }
.bp_steuertext b { color: #ffe066; }
.bp_abzeichen {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.bp_abzeichen_pass { border: 1px solid rgba(255, 224, 102, 0.6); }
.bp_abzeichen_pass b { color: #ffe066; }
.bp_abzeichen_wechsel { border: 1px solid rgba(143, 208, 255, 0.6); }
.bp_abzeichen_wechsel b { color: #a8d8ff; }
.bp_wechselknopf {
  pointer-events: auto;          /* die Anzeige ist sonst pointer-events: none */
  cursor: pointer;
  border: 1px solid rgba(143, 208, 255, 0.6);
  background: rgba(143, 208, 255, 0.16);
  color: #eaf4ff;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.bp_wechselknopf:hover { background: rgba(143, 208, 255, 0.32); }
.bp_wechselknopf:active { transform: translateY(1px); }
.bp_wechselknopf[hidden] { display: none; }

/* ---------- Werkzeugzeile im Startmenü + Dialoge ----------
   Erklärung und Ton-Schalter liegen NICHT unter dem Spiel, sondern im
   Startmenü (GOLDENE NEGATIVE REGEL, GUI-Liste Typ 1 Punkt 3). Die beiden
   Dialoge .bp_hilfe und .bp_ueber liegen in der Bühne, damit sie auch im
   Vollbild aufgehen - so bleibt die Hilfe während des Spiels erreichbar
   (☰ -> Menü -> ❓ Hilfe). */

/* Werkzeugzeile direkt über der Tasten-Hinweiszeile im Startmenü */
.bp_menue_werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: 0.6rem 0 0.35rem;
}
/* Mindestens 40x40 px: jedes Bedienziel muss mit dem Finger treffbar sein */
.bp_menue_werkzeuge .bp_wahl_klein { min-height: 2.6rem; padding: 0.4rem 0.7rem; }

/* Dialog-Karten: Hilfe und Über-das-Spiel */
.bp_karte_hilfe { width: min(42rem, 100%); }
.bp_dialog_inhalt {
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
  max-height: min(52vh, 30rem);
  overflow-y: auto;
  margin-bottom: 0.6rem;
}
.bp_dialog_inhalt p { margin: 0.4rem 0; }
.bp_schulenzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  opacity: 0.8;
  margin: 0.5rem 0 0;
}
/* Das Schullogo steht auf PAPIER (Aushang) - deshalb KEIN Weissfaerben wie
   auf einer dunklen Leiste, sonst waere es weiss auf hell und unsichtbar. */
.bp_schulenzeile img { display: block; }

.bp_lernsatz b { color: #8a5a10; }
.bp_merk {
  background: rgba(233, 161, 60, 0.14);
  border-left: 4px solid #e9a13c;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
}
.bp_tasten b { color: #17497f; }

/* ---------- Countdown ---------- */
.bp_countdown {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 20;
}

/* ---------- Die Karte des Schiedsrichters ----------
   Nach einem Foul hebt der Schiedsrichter die Karte hoch. Sie steht groß in
   der Mitte, damit sie auch vom Platz aus gesehen wird - das Blatt selbst
   bekommt die Farbe, der Text sagt, was es ist und wen es betrifft.
   Der Klassenname heisst absichtlich bp_FOUL_karte: .bp_karte ist im Spiel
   schon die Karte des Startmenüs, und die beiden dürfen sich nicht
   ins Gehege kommen. */
.bp_foul_karte {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem 0.7rem;
  border-radius: 0.6rem;
  background: #ffebee;
  border: 3px solid #b71c1c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 24;
  /* Wenn jemand die Karte nicht bemerkt, soll sie nicht ewig stehen:
     nach 2 s blendet das Spiel sie aus, hier ist es nur der Notfallschutz. */
  animation: bp_karte_rein 0.22s ease-out;
}
@keyframes bp_karte_rein {
  from { transform: translate(-50%, -50%) rotate(-4deg) scale(0.6); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; }
}
.bp_foul_karte_blatt {
  width: 3.4rem;
  height: 4.8rem;
  border-radius: 0.25rem;
  background: #ffd600;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18);
}
.bp_foul_karte_rot .bp_foul_karte_blatt { background: #d32f2f; }
.bp_foul_karte_text {
  font-weight: 800;
  font-size: 1.05rem;
  color: #7f1d1d;
  text-align: center;
  line-height: 1.25;
}
.bp_foul_karte_rot .bp_foul_karte_text { color: #b71c1c; }
/* Im Vollbild ist alles etwas groesser, sonst ist die Karte auf dem Handy
   nur ein Fleck. */
@media (max-width: 700px) {
  .bp_foul_karte { padding: 0.6rem 1rem 0.5rem; }
  .bp_foul_karte_blatt { width: 2.4rem; height: 3.4rem; }
  .bp_foul_karte_text { font-size: 0.9rem; }
}

/* ---------- Bildschirmtasten (Tablet und Handy) ----------
   Blau sitzt unten links, Rot unten rechts. Beide Seiten bekommen dieselbe
   Bedienung: eine GROSSE, unsichtbare Fläche für den Stick und daneben die
   beiden Knöpfe.

   Warum eine Fläche statt nur des Kreises? Kinder haben am Handy einen Daumen,
   keine Maus. Einen 7-rem-Kreis genau zu treffen und dann 46 px zu ziehen, war
   der Grund dafür, dass die eigenen Spieler auf dem Handy langsamer liefen als
   auf dem Laptop: es wurde einfach nie ganz ausgeschlagen. Jetzt landet der
   Stick dort, wo der Finger landet - und kurzer Weg heißt schon volles Tempo. */
.bp_touch_bp {
  position: absolute;
  bottom: 0.8rem;
  z-index: 15;
}
.bp_touch_bp[data-bp-touch="blau"] { left: 0.8rem; }
.bp_touch_bp[data-bp-touch="rot"] { right: 0.8rem; }

/* Die Fläche: groß wie eine Handfläche, unsichtbar, und sie fängt nichts
   anderes ab - die Knöpfe liegen darüber (eigene Ebene, siehe .bp_touch_knoepfe). */
.bp_stick_zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(15rem, 46vw);
  height: min(12rem, 42vh);
  min-width: 8.5rem;
  min-height: 8.5rem;
  z-index: 1;
  touch-action: none;     // ohne das scrollt die Seite beim Wischen
  cursor: pointer;
}
.bp_touch_knoepfe {
  position: absolute;
  bottom: 0.8rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.bp_touch_bp[data-bp-touch="blau"] .bp_touch_knoepfe { left: 9.6rem; }
.bp_touch_bp[data-bp-touch="rot"] .bp_touch_knoepfe { right: 9.6rem; }

.bp_stick {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.4);
  touch-action: none;
  cursor: pointer;
}
/* Wenn der Stick "schwebt" (der Finger war außerhalb), wird er kräftiger, damit
   man sieht, wo er gerade ist. */
.bp_stick.bp_stick_schwebt {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
}
.bp_stick_ring {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.35);
}
.bp_stick_knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.2rem;
  height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bp_touch_knopf {
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
}
/* Die Aktions-Tasten tragen das Material der Seite: Ball = Amber (wie die
   Flutlichtkante), Wechsel = Stahl-Blau, Graetsche = Rot, Sprint = Blau. */
.bp_touch_knopf.bp_aktion {
  width: 5.6rem;
  height: 5.6rem;
  font-size: 2rem;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #f0b862, #d98f2a);
  border-color: #ffe1a8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.bp_touch_knopf.bp_wechsel {
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.1rem;
  background: rgba(120, 160, 190, 0.35);
}
.bp_touch_knopf.bp_gedrueckt { background: rgba(255, 224, 102, 0.85); }

/* Auf einem Laptop mit Maus braucht man keine Bildschirmtasten: ausblenden.
   Auf Tablets und kleinen Bildschirmen bleiben sie immer da - darauf kommt es
   an, nicht auf die Meldung des Browsers über Zeigegeräte. */
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  .bp_touch_bp { display: none; }
}

/* ---------- Vollbild ----------
   Vollbild ist die BÜHNE, nicht die ganze Seite: dadurch verschwindet die
   Jupi-Leiste oben und das Spiel hat den ganzen Bildschirm. Die Werkzeuge
   (Menü, Ton, Kamera, Raus) liegen deshalb in der Bühne und sind nur im
   Vollbild zu sehen. */
.bp_buehne:fullscreen {
  width: 100%;
  height: 100%;
  background: #101a33;
}
/* Im Vollbild soll das Spielfeld wirklich alles füllen - auch wenn das
   Fenster hochkant steht. */
.bp_buehne:fullscreen .bp_feld { inset: 0; }

.bp_fs_werkzeuge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 18;              /* über der Anzeige (10), unter dem Zähler (20) */
  display: flex;
  gap: 0.3rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(9, 16, 24, 0.62);
  border: 1px solid rgba(233, 161, 60, 0.32);
  backdrop-filter: blur(6px);
}
.bp_fs_knopf {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.bp_fs_knopf:hover { background: rgba(255, 255, 255, 0.32); }
.bp_fs_knopf:focus-visible { outline: 3px solid #ffce85; outline-offset: 2px; }

/* ---------- Menü und Ergebnis ----------
   Material: der Aushang am Vereinsheim. Die Karte ist ein helles Blatt Papier
   (bleibt auch im Dunkelmodus hell - ein Zettel wird nachts nicht schwarz),
   der Startknopf ist der Amber-Knopf wie an der Flutlichtkonsole. */
.bp_overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(233, 161, 60, 0.10), rgba(233, 161, 60, 0) 70%),
    rgba(4, 9, 15, 0.86);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 40;
  overflow: auto;
}
.bp_karte {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 30%),
    #f7f0de;
  color: #2a2318;
  border: 1px solid #b98b4d;
  border-top: 4px solid #e9a13c;
  border-radius: 0.9rem;
  padding: 1.1rem 1.3rem 1.2rem;
  width: min(30rem, 100%);
  max-height: 92vh;
  overflow: auto;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 233, 190, 0.35) inset;
}
.bp_karte h2 { margin: 0 0 0.4rem; color: #241d12; }
.bp_karte h3.bp_abschnitt {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a5c2e;
}
.bp_wahl_reihe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bp_wahl {
  border: 2px solid #c58f3d;
  background: #fffaf0;
  color: #6b4a17;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  /* Mindesthöhe für kleine Finger, siehe Kommentar bei .bp_zurueck */
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bp_wahl:hover { background: #fdf1da; }
.bp_wahl.bp_aktiv {
  background: linear-gradient(180deg, #f6c877, #e9a13c);
  color: #2a1c06;
  border-color: #a9762a;
  font-weight: 700;
}
.bp_wahl_grau { border-color: #c2b49a; color: #7a6f5c; }
.bp_start {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  background: linear-gradient(180deg, #f7c877, #e0962f);
  color: #2a1c06;
  border: 1px solid #a9762a;
  border-radius: 999px;
  padding: 0.7rem;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #a9762a, 0 8px 18px rgba(0, 0, 0, 0.2);
}
.bp_start:hover { background: linear-gradient(180deg, #ffd994, #eda63f); }
.bp_start[disabled] { background: #cdbfa6; color: #756a58; box-shadow: none; cursor: default; }
/* Startknopf und "Neues Spiel" nebeneinander. */
.bp_start_zeile { display: flex; align-items: center; gap: 0.5rem; }
.bp_start_zeile .bp_start { flex: 1 1 auto; }
.bp_neu { flex: 0 0 auto; min-height: 2.6rem; }
.bp_tasten_hinweis { font-size: 0.78rem; color: #6a5c46; margin-bottom: 0; }
.bp_modus_hinweis { font-size: 0.85rem; color: #4a3f2e; margin: 0.4rem 0 0; }
.bp_menue_hinweis { font-size: 0.8rem; color: #5a4e3c; margin: 0.5rem 0 0.9rem; }

/* ---------- Die Einstellungs-Schalter ----------
   Echte Checkboxen (mit Tab erreichbar, auf dem Tablet fingerfreundlich),
   nur optisch als Schalter gestaltet. Die ganze Zeile ist anklickbar, weil
   das <label> um Text und Schalter herum liegt. Material: getoentes Papier,
   Schalter in Flutlicht-Amber. */
.bp_schalter_liste {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bp_schalter_zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #dcc9a4;
  border-radius: 0.6rem;
  background: #fdf7ea;
  cursor: pointer;
}
.bp_schalter_zeile:hover { background: #fbf0d9; }
.bp_schalter_text {
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  line-height: 1.25;
}
.bp_schalter_text small { font-size: 0.74rem; color: #6a5c46; }
.bp_schalter {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 1.6rem;
  margin: 0;
  border: 2px solid #b9a888;
  border-radius: 999px;
  background: #ded3c0;
  position: relative;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.bp_schalter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.12rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.bp_schalter:checked { background: #e9a13c; border-color: #a9762a; }
.bp_schalter:checked::after { transform: translate(1.25rem, -50%); }
/* Der Tastaturfokus muss sichtbar bleiben - sonst merkt niemand, wo er ist. */
.bp_schalter:focus-visible { outline: 3px solid #17497f; outline-offset: 2px; }

/* ---------- Startmenü ----------
   Die Startseite ist bewusst kurz: Kopf, drei Modus-Karten, Spielzeit, Startknopf.
   Stärke und die fünf Schalter liegen eingeklappt unter "Mehr Einstellungen".
   Vorher stand alles offen - dann rutschte "Los geht's!" auf dem Handy unter
   den Bildschirmrand. */
.bp_karte_start { width: min(34rem, 100%); }

.bp_startkopf {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.bp_startlogo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.55rem;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(122, 92, 46, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.bp_startkopf h2 { margin: 0; }
.bp_startunter {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: #6a5c46;
}

.bp_moduskarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
}
.bp_moduskarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border: 2px solid #dcc9a4;
  border-radius: 0.7rem;
  background: #fffaf0;
  color: #2a2318;
  cursor: pointer;
  min-height: 5.2rem;
}
.bp_moduskarte:hover { background: #fdf1da; }
.bp_moduskarte.bp_aktiv {
  border-color: #e9a13c;
  background: linear-gradient(180deg, #fff4dd, #fbe7c4);
  box-shadow: 0 0 0 3px rgba(233, 161, 60, 0.22);
}
.bp_moduskarte:focus-visible { outline: 3px solid #17497f; outline-offset: 2px; }
.bp_moduszeichen { font-size: 1.5rem; line-height: 1.1; }
.bp_moduskarte b { font-size: 0.95rem; }
.bp_moduskarte small { font-size: 0.74rem; color: #6a5c46; line-height: 1.2; }

/* Die Meldung, wenn im Netz etwas fehlt (Verbindung weg, Code falsch). */
.bp_netz_warnung {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  background: #fff4e1;
  border: 1px solid #e08a3c;
  color: #7a3d00;
  font-size: 0.85rem;
}

/* Eingeklappte Einstellungen: wie ein <details>, aber in den Kartenfarben. */
.bp_klappbar {
  margin-top: 0.9rem;
  border: 1px solid #dcc9a4;
  border-radius: 0.7rem;
  background: #fffcf5;
}
.bp_klappbar > summary {
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: #7a5c2e;
  list-style: none;
}
.bp_klappbar > summary::-webkit-details-marker { display: none; }
.bp_klappbar > summary::after { content: " ▾"; }
.bp_klappbar[open] > summary::after { content: " ▴"; }
.bp_klappbar_inhalt { padding: 0 0.7rem 0.6rem; }
.bp_klappbar_inhalt .bp_abschnitt:first-child { margin-top: 0.2rem; }

/* Auf dem Handy und mit dem Finger wird der Schalter größer: 46 × 26 px ist
   zwar klickbar, aber daneben zu treffen ist Glück. Ab 44 px Breite und
   etwa 42 px Höhe liegt er gut in der Fingerkuppe. Die Werte passen
   zusammen: Knopf 2 rem, Rand 0,12 rem, Weg nach rechts 2,18 rem. */
@media (max-width: 879px), (pointer: coarse) {
  .bp_schalter { width: 4.4rem; height: 2.6rem; border-width: 3px; }
  .bp_schalter::after { width: 2rem; height: 2rem; left: 0.16rem; }
  .bp_schalter:checked::after { transform: translate(2.18rem, -50%); }
}

.bp_ende_text { font-size: 1.5rem; font-weight: 800; text-align: center; }
.bp_ende_merk { text-align: center; color: #4a3f2e; }

/* ---------- Netz-Lobby ----------
   Die Lobby steht im Spiel, nicht in einem eigenen Fenster: ein Code-Feld
   zum Kopieren, eins zum Einfügen, eine Namensliste und die zwei Spieler. */
.bp_karte_lobby { width: min(38rem, 100%); }

/* Chip in der Kopfzeile: "wer spielt hier gegen wen". */
.bp_netzchip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.bp_lobby_namen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.bp_lobby_name {
  border: 2px solid #dcc9a4;
  background: #fffaf0;
  color: #6b4a17;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 2.4rem;
}
.bp_lobby_name.bp_wahl_aktiv {
  background: linear-gradient(180deg, #f6c877, #e9a13c);
  color: #2a1c06;
  border-color: #a9762a;
  font-weight: 700;
}
.bp_lobby_name:focus-visible { outline: 3px solid #17497f; outline-offset: 2px; }

.bp_code {
  width: 100%;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 0.5rem;
  border: 2px solid #dcc9a4;
  border-radius: 0.5rem;
  background: #fffdf7;
  color: #2a2318;
  resize: vertical;
  word-break: break-all;
}
.bp_code:focus-visible { outline: 3px solid #17497f; outline-offset: 1px; }
.bp_wahl_klein { font-size: 0.82rem; padding: 0.3rem 0.7rem; }
.bp_lobby_status {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  min-height: 1.2em;
  color: #6b4a17;
}
.bp_lobby_status.bp_lobby_fehler { color: #c62828; font-weight: 600; }

.bp_lobby_knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}
.bp_start_klein { width: auto; margin-top: 0; padding: 0.5rem 1.2rem; flex: 1 1 auto; }

.bp_lobbyliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bp_lobby_zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #dcc9a4;
  border-radius: 0.5rem;
  background: #fffdf7;
  font-size: 0.9rem;
}
.bp_lobby_zeile_ich { border-color: #e9a13c; background: #fdf3e0; }
.bp_lobby_kugel {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.bp_lobby_kugel_blau { background: #1e5fbf; }
.bp_lobby_kugel_rot { background: #c62828; }
.bp_lobby_text { font-weight: 700; }
.bp_lobby_rolle, .bp_lobby_haken {
  margin-left: auto;
  font-size: 0.76rem;
  color: #6a5c46;
}
.bp_lobby_haken { margin-left: 0.4rem; }

/* ---------- Dark Mode ----------
   Der Platz wird zur tiefen Nacht (Kulisse + dunklere Folie, siehe oben).
   Die Aushaenge im Startmenue bleiben PAPIER und damit hell - ein Zettel am
   Vereinsheim wird nachts nicht schwarz, und die Kinder brauchen den
   Kontrast. Deshalb faerbt der Dunkelmodus nur, was WIRKLICH zur Seite
   gehoert: die Texte auf der Kulisse und die Schiedsrichterkarte. */
html[data-theme="dark"] body.bp { color: #e8f0f5; }
/* Die Schiedsrichterkarte ist auch im Dunkeln ein Blatt aus Karton - deshalb
   bleiben Gelb und Rot hell, nur der Kasten dunkler. */
html[data-theme="dark"] .bp_foul_karte { background: #2b1a1a; border-color: #ef5350; }
html[data-theme="dark"] .bp_foul_karte_text { color: #ffcdd2; }
html[data-theme="dark"] .bp_foul_karte_rot .bp_foul_karte_text { color: #ff8a80; }
/* Der Aushang (Startmenue, Hilfe, Ergebnis, Lobby) bleibt in BEIDEN Themes
   dasselbe helle Blatt - nur die Aussenkante wird im Dunkeln etwas waermer. */
html[data-theme="dark"] .bp_karte {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 30%),
    #f4ecd8;
  color: #2a2318;
  border-color: #a9762a;
  border-top-color: #e9a13c;
}
html[data-theme="dark"] .bp_karte h2 { color: #241d12; }
html[data-theme="dark"] .bp_karte h3.bp_abschnitt { color: #7a5c2e; }
html[data-theme="dark"] .bp_ende_merk { color: #4a3f2e; }
html[data-theme="dark"] .bp_lernsatz b { color: #8a5a10; }
html[data-theme="dark"] .bp_tasten b { color: #17497f; }

/* ---------- Mindestgroessen der Bedienziele ----------
   Steht ganz am ENDE und damit nach allen Definitionen von .bp_knopf
   (min-height:2.1rem) und nach den Handy-Regeln (min-height:2rem). Ohne
   diese Stelle blieben die Werkzeugknoepfe bei 32 bis 34 px.
   GUI_DESIGN_CHECKLISTE.md 3.13.6: Ziele >= 40 x 40 px, unter 36 verboten.

   ACHTUNG (10.10.2026) - #jupi_theme_toggle wurde hier RAUSGENOMMEN. Er ist
   kein Knopf, sondern ein proportionsgebauter Pill-Schalter (jupi.css:
   3.5rem x 1.9rem = 56 x 30 px). Das min-height: 2.5rem dehnt ihn auf
   56 x 40 px, Seitenverhaeltnis 1.40 statt 1.84, und der Daumen wird zum
   Hochoval. Genau so sah der Schalter hier aus. Auf der Startseite greift
   keine eigene min-Regel - dort misst er korrekt 56 x 30. */
.bp_zurueck,
.bp_knopf,
.bp_wahl {
  min-height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Kleine Bildschirme ---------- */
/* 3.13.2 verlangt in der Mitte Logo + NAME. Bis 10.11.2026 fiel der Name am
   Handy ganz weg (gemessene Breite 0), weil sieben Werkzeuge daneben standen -
   dann zeigt die Leiste nur noch ein Bild ohne Namen. Jetzt weichen am Handy
   nur die zwei Werkzeuge, die im Startmenü ohnehin erreichbar sind:
   🎥 Kamera (Schalter "Feste Übersicht") und 🔊 Ton (Knopf "Ton").
   ⛶ Vollbild bleibt in der Leiste, weil es sonst am Handy keinen Weg dorthin
   gäbe; die Pflicht-Werkzeuge der Plattform (🌐-Sprache, Dark-Mode-Pille)
   bleiben selbstverständlich auch. */
@media (max-width: 620px) {
  #bp_kamera,
  #bp_ton { display: none; }
}
@media (max-width: 480px) {
  .bp_leiste { gap: 0.3rem; padding: 0.3rem 0.4rem; }
  .bp_titel { font-size: 0.88rem; }
  .bp_kopf { gap: 0.3rem; margin-left: 0; }
  .bp_zurueck { font-size: 0.85rem; }
  /* Die Sprachauswahl ist das breiteste Werkzeug. Am Handy reicht ein
     schmaleres Feld (die Namen stehen im aufgeklappten Menue ohnehin ganz
     da) - dadurch bleibt neben Logo + Name genug Platz, statt den Titel
     auf "Bolzplatz ..." abzuschneiden. */
  .bp_leiste .jupi_sprachen_select {
    max-width: 2.6rem;
    padding: 0.18rem 0.15rem;
    font-size: 0.7rem;
  }
  /* Die Sprachwahl zeigt am Handy nur noch das Kürzel (DE, EN, AR …) - die
     vollen Namen stehen im aufgeklappten Menü. Dadurch passen Logo + Name
     ("Bolzplatz 3D") ungekürzt in die Mitte (3.13.2). */
  .bp_leiste .jupi_sprachen_icon { display: none; }
  /* Menü-Knopf als ☰: der Name steht im aria-label und im Startmenü. */
  .bp_menue_wort { display: none; }
  .bp_menue_zeichen { font-size: 1.05rem; }
  /* Auf dem Handy bleibt nur der Pfeil - so passt der Spielname ganz. */
  .bp_zurueck_wort { display: none; }
  .bp_schule { display: none; }
  .bp_vermerk { display: none; }
  .bp_werkzeuge { gap: 0.2rem; }
  /* Die 40-px-Regel gilt auch am Handy. Vorher stand hier min-height:2rem
     (32 px) und überschrieb damit die größere Vorgabe von oben. */
  .bp_knopf { min-height: 2.5rem; min-width: 2.5rem; }
  /* Die 40-px-Regel gilt auch am Handy - deshalb hier 2.5rem und NICHT
     2rem (32 px). Nur die Innenabstände und die Schrift werden kleiner,
     die Trefferfläche bleibt 40 px. */
  .bp_knopf { padding: 0.25rem 0.5rem; min-height: 2.5rem; min-width: 2.5rem; font-size: 0.85rem; }
  .bp_hud { font-size: 0.75rem; padding: 0.3rem 0.5rem 0.4rem; }
  .bp_messung { font-size: 0.72rem; }
  /* Auf dem Handy ist die Zeile zu breit - die Information steht trotzdem da,
     aber als 3D-Pfeil im Spielfeld. Nur der Wechsel-Knopf bleibt. */
  .bp_steuertext,
  .bp_abzeichen_pass { display: none; }
  .bp_steuerung { justify-content: flex-start; }
  .bp_wechselknopf { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
  .bp_merksatz { font-size: 0.72rem; }
  .bp_stick { width: 6.5rem; height: 6.5rem; }
  .bp_stick_knob { width: 2.7rem; height: 2.7rem; margin: -1.35rem 0 0 -1.35rem; }
  .bp_touch_bp[data-bp-touch="blau"] .bp_touch_knoepfe { left: 8rem; }
  .bp_touch_bp[data-bp-touch="rot"] .bp_touch_knoepfe { right: 8rem; }
  .bp_touch_knopf.bp_aktion { width: 4.6rem; height: 4.6rem; font-size: 1.6rem; }
  .bp_moduskarte { min-height: 4.8rem; padding: 0.5rem 0.6rem; }
  .bp_startkopf h2 { font-size: 1.1rem; }
}

/* Mit dem Finger wird der Stick größer: auf dem Handy war er vorher so klein,
   dass der Daumen ihn kaum vom Untergrund unterscheiden konnte. */
@media (pointer: coarse) {
  .bp_stick { width: 8.5rem; height: 8.5rem; }
  .bp_touch_bp[data-bp-touch="blau"] .bp_touch_knoepfe { left: 10rem; }
  .bp_touch_bp[data-bp-touch="rot"] .bp_touch_knoepfe { right: 10rem; }
}

/* ---------- Wer keine Bewegung will, bekommt keine ---------- */
@media (prefers-reduced-motion: reduce) {
  .bp_zeit_kurz .bp_zeiten { animation: none; color: #ff6b5e; }
  .bp_var_karte { animation: none !important; }
}

/* ---------- VAR: der Videoassistent ----------
   Eine kleine Karte unten in der Mitte. Sie erscheint nur, wenn wirklich
   geprüft wird, und geht nach ein paar Sekunden von selbst wieder weg. */
.bp_var {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  width: min(26rem, calc(100% - 1rem));
  pointer-events: none;
  background: rgba(10, 16, 30, 0.88);
  border: 1px solid rgba(120, 190, 255, 0.5);
  border-radius: 0.8rem;
  padding: 0.4rem 0.7rem 0.45rem;
  color: #eaf2ff;
  font-size: 0.78rem;
  box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.bp_var_karte {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
/* Das Bildsymbol blinkt, solange geprüft wird. */
.bp_var_bild { font-size: 1.3rem; line-height: 1; }
.bp_var.bp_var_arbeitet .bp_var_bild { animation: bp_var_blink 0.9s ease-in-out infinite; }
@keyframes bp_var_blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.bp_var_text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.bp_var_titel { font-size: 0.82rem; }
.bp_var_grund { color: #b9cbe6; line-height: 1.25; }
/* Das Zeichen am Ende: ✅ oder ❌ */
.bp_var_zeichen { font-size: 1.25rem; line-height: 1; flex: none; }
/* Der Balken zeigt, wie weit die Prüfung ist. */
.bp_var_balken {
  height: 0.22rem;
  margin-top: 0.35rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  overflow: hidden;
}
.bp_var_balken i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #64b5f6, #42a5f5);
  transition: width 0.12s linear;
}
.bp_var.bp_var_ergebnis_gut { border-color: rgba(125, 255, 138, 0.6); }
.bp_var.bp_var_ergebnis_schlecht { border-color: rgba(255, 138, 128, 0.6); }


/* ---------- Grätsche, Sprint, Ausdauer ---------- */
.bp_touch_knopf.bp_graetsche,
.bp_touch_knopf.bp_sprint {
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.3rem;
}
.bp_touch_knopf.bp_graetsche { background: rgba(229, 57, 53, 0.5); }
.bp_touch_knopf.bp_sprint { background: rgba(30, 136, 229, 0.5); }

.bp_ausdauer {
  position: absolute;
  bottom: 0.5rem;
  width: 8rem;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.bp_ausdauer[hidden] { display: none; }
.bp_ausdauer_blau { left: calc(50% - 8.5rem); }
.bp_ausdauer_rot { left: calc(50% + 0.5rem); }
.bp_ausdauer i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #29b6f6, #66bb6a);
  transition: width 0.08s linear;
}
.bp_ausdauer.bp_ausdauer_leer i { background: #ef5350; }
@media (max-width: 820px) {
  .bp_ausdauer { width: 5rem; bottom: 0.35rem; }
  .bp_ausdauer_blau { left: calc(50% - 5.4rem); }
  .bp_ausdauer_rot { left: calc(50% + 0.4rem); }
}

/* Die drei kleinen Knöpfe (Wechsel, Grätsche, Sprint) stehen als Block neben
   dem großen Ball-Knopf: zwei Spalten, damit sie auf dem Handy nicht zu breit werden. */
.bp_touch_klein {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.45rem;
  align-items: end;
}