/* brueckenbau/styles.css - BAUSTELLEN-KONSOLE (26.10.2026)

   Das Spiel hat einen eigenen Look bekommen, nach dem Muster der zuletzt
   umgebauten Spiele (Schatzkarte, Raetselrakete, Farbenmeister, Zelllabor,
   Satz-Baukasten): die Seite traegt den Stil des Spiels, nicht die Plattform.

   Aufbau (von aussen nach innen):
     0. Farben, Masse, Schriften
     1. Seitenkulisse: kachelbare Stahlwand der Werkstatt (kulisse.svg)
     2. Die Stahl-Konsole: JUPI-Kopfzeile als genietetes Traegerblech
     3. Die Bauplan-Tafel: Rahmen um Spielfeld und HUD
     4. Instrumente auf dem Spielfeld (Level, Werkzeuge, Budget, Spannung)
     5. Hinweis-Band und Ergebnis-Overlay (Bauplan-Karte)
     6. Startmenue (Bauplan-Blatt)
     7. Fuss
     8. Dark Mode (Abendschicht: alles eine Stufe dunkler)
     9. Handy
    10. Vollbild
    11. Bedienziele >= 40 x 40 px - STEHT AM ENDE (sonst gewinnt jupi.css)

   Wichtig: alle Regeln haengen an `body.jupi.bb_body` bzw. an den
   bruecke_*-Klassen des Pakets. Die geteilten Regeln in der lokalen
   jupi.css-Kopie bleiben unberuehrt - das Paket ist die Quelle der Optik
   (AGENTS.md 3.10). */

/* ---------- 0. Farben, Masse, Schriften ---------- */
:root {
  --bb-stahl-tief: #0c1419;
  --bb-stahl: #17262f;
  --bb-stahl-hell: #263a46;
  --bb-stahl-kante: #3d5867;
  --bb-amber: #f5c542;
  --bb-amber-hell: #ffe08a;
  --bb-amber-tief: #b8820c;
  --bb-glas: rgba(12, 22, 29, .90);
  --bb-glas-hell: rgba(26, 42, 52, .92);
  --bb-text: #e9f2f7;
  --bb-text-leise: #a9c1cd;
  --bb-cyan: #8fd3e8;
  --bb-rot: #ff6b5a;
  --bb-gruen: #7fd48a;
  --bb-tafel: #16242d;
  --bb-schrift: "Bahnschrift", "DIN Alternate", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --bb-zahl: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace;
  /* Sicherheitsstreifen: gelb/schwarz im 45-Grad-Winkel */
  --bb-streifen: repeating-linear-gradient(45deg,
      var(--bb-amber) 0 9px, #16202a 9px 18px);
}

/* ---------- 1. Seitenkulisse: die Werkstatt-Wand ----------
   Die Stahlwand (kulisse.svg, Generator .zcode/brueckenbau-kulisse.cjs)
   kachelt hinter allem; darueber liegen drei Lichter: warmes Werkstattlicht
   oben, ein kaltes Cyan rechts und die Tiefe unten. In BEIDEN Themes dunkel,
   denn das Spielfeld ist eine helle Tagesszene - ein dunkler Rahmen laesst
   sie leuchten (Muster Numbergeddon, Raetselrakete, Schatzkarte). */
body.jupi.bb_body {
  min-height: 100vh;
  background-repeat: no-repeat;
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(245, 197, 66, .16) 0%, transparent 62%),
    radial-gradient(820px 480px at 100% 4%, rgba(143, 211, 232, .12) 0%, transparent 58%),
    radial-gradient(1300px 560px at 0% 104%, rgba(4, 10, 14, .62) 0%, transparent 62%),
    url("kulisse.svg") repeat,
    #101c24;
}
/* Dunkel = Abendschicht: dieselbe Wand, nur gedaempft. Die durchsichtige
   Schicht laesst die Kulisse darunter stehen (Muster Raetselrakete). */
html[data-theme="dark"] body.jupi.bb_body {
  background:
    linear-gradient(rgba(3, 8, 11, .52), rgba(2, 6, 8, .62)),
    radial-gradient(1200px 620px at 50% -12%, rgba(245, 197, 66, .09) 0%, transparent 62%),
    radial-gradient(820px 480px at 100% 4%, rgba(143, 211, 232, .07) 0%, transparent 58%),
    url("kulisse.svg") repeat,
    #0a1218;
}
/* Die weisse Plattform-Karte darf die Wand nicht zudecken. */
body.jupi.bb_body .jupi_container > .jupi_main { background: transparent; }
/* Kopfzeile oben, Fuss unten: freie Hoehe bekommt die Spielzeile (1fr). */
body.jupi.bb_body .jupi_container {
  align-content: start;
  grid-template-rows: 0 auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.bb_body .jupi_container { min-height: 100dvh; }
}

/* ---------- 2. Die Stahl-Konsole (Kopfzeile) ----------
   Genietetes Traegerblech: warmes Stahlgrau, oben eine Lichtkante, unten
   der Sicherheitsstreifen. Die drei Zonen bleiben wie in GUI 3.13.2:
   links "Alle Spiele", Mitte Logo + Name, rechts Sprache und Dark-Mode. */
.bruecke_header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem .6rem;
  border-bottom: 4px solid var(--bb-stahl-tief);
  color: var(--bb-text);
  background:
    /* zwei senkrechte Traeger-Fugen (alle 104 px) als Blech-Textur */
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 104px),
    linear-gradient(180deg, #35505f 0%, #22363f 54%, #16252d 100%);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(200, 228, 240, .28);
}
/* Sicherheitsstreifen als Unterkante der Konsole */
.bruecke_header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  height: 4px;
  background: var(--bb-streifen);
  opacity: .95;
  pointer-events: none;
}
/* Nieten-Reihe auf dem Blech (eine Reihe kleiner Koepfe) */
.bruecke_header::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 7px;
  background:
    radial-gradient(circle 2.6px at 10px 3.5px, rgba(255, 255, 255, .30) 0 2.6px, transparent 2.7px)
    repeat-x;
  background-size: 34px 7px;
  opacity: .8;
  pointer-events: none;
}

/* Marke: Logo auf einer kleinen Plakette, Name in DIN-Schrift */
.bruecke_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .6rem;
  min-width: 0;
}
.bruecke_brand img {
  display: block;
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
  aspect-ratio: 1;
  border-radius: .45rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(200, 228, 240, .32);
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.bruecke_brand h1 {
  margin: 0;
  font-family: var(--bb-schrift);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(6, 12, 16, .85), 0 0 18px rgba(245, 197, 66, .22);
  white-space: nowrap;
}
/* "Zurueck" als Baustellen-Schild: gelbe Tafel mit dunkler Schrift */
.bruecke_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border-radius: .5rem;
  padding: .45rem .8rem;
  line-height: 1.2;
  font-size: .88rem;
  font-weight: 800;
  color: #2a1c02;
  background: linear-gradient(180deg, var(--bb-amber-hell), var(--bb-amber));
  border: 2px solid #8a6106;
  box-shadow: 0 3px 0 #6d4c05, 0 6px 14px rgba(0, 0, 0, .35);
  text-decoration: none;
}
.bruecke_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #fff0b8, var(--bb-amber-hell));
  transform: translateY(-1px);
}
.bruecke_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.bruecke_header #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.bruecke_header .jupi_sprachen_select {
  min-height: 2.5rem;
  max-width: 11rem;
  color: var(--bb-text);
  background: rgba(8, 16, 21, .72);
  border: 2px solid var(--bb-stahl-kante);
  border-radius: .5rem;
  font-weight: 700;
}
.bruecke_header .jupi_sprachen_select:hover { background: rgba(14, 26, 33, .85); }
.bruecke_header .jupi_sprachen_select option { color: #16242d; background: #f3f7f9; }
/* Theme-Schalter 74 x 40 px mit rundem 32-px-Schieber (Vorbild) */
.bruecke_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  min-height: 40px;
  padding: 0;
  background: rgba(8, 16, 21, .72);
  border: 2px solid var(--bb-stahl-kante);
}
.bruecke_header .jupi_theme_switch:hover { background: rgba(20, 34, 42, .9); }
.bruecke_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7fbfd, #c9d8e0);
}
html[data-theme="dark"] .bruecke_header .jts_thumb { left: calc(100% - 36px); }
.bruecke_header .jts_sun { left: 9px; }
.bruecke_header .jts_moon { right: 9px; }

/* ---------- 3. Die Bauplan-Tafel (Rahmen um das Spielfeld) ----------
   Das Spielfeld steckt in einem Stahlrahmen mit Eck-Schrauben: die Buehne
   ist das Fenster, der Rahmen ist das Geraet. Der Sicherheitsstreifen
   oben am Rahmen macht die Tafel als Baustelle erkennbar. */
.bruecke_panel {
  position: relative;
  padding: .7rem;
  border-radius: 1rem;
  border: 1px solid var(--bb-stahl-kante);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(143, 211, 232, .12) 0%, transparent 62%),
    linear-gradient(180deg, #22343f 0%, var(--bb-tafel) 46%, #101b22 100%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(200, 228, 240, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .5);
}
/* Eck-Schrauben: vier Koepfe in den Ecken der Tafel */
.bruecke_panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle 4px at 9px 9px, #8fa6b2 0 3.2px, #0d161b 3.3px 4px, transparent 4.1px),
    radial-gradient(circle 4px at calc(100% - 9px) 9px, #8fa6b2 0 3.2px, #0d161b 3.3px 4px, transparent 4.1px),
    radial-gradient(circle 4px at 9px calc(100% - 9px), #8fa6b2 0 3.2px, #0d161b 3.3px 4px, transparent 4.1px),
    radial-gradient(circle 4px at calc(100% - 9px) calc(100% - 9px), #8fa6b2 0 3.2px, #0d161b 3.3px 4px, transparent 4.1px);
  opacity: .9;
}
/* Sicherheitsstreifen als Oberkante der Tafel */
.bruecke_panel::after {
  content: "";
  position: absolute;
  inset-inline: 1.1rem;
  top: -.35rem;
  height: 6px;
  border-radius: 2px;
  background: var(--bb-streifen);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.bruecke_buehne { position: relative; }
.bruecke_spielfeld { position: relative; font-size: 1rem; }
/* Das Spielfeld selbst: eingelassen wie ein Bildschirm im Geraet */
.bruecke_buehne canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .55rem;
  touch-action: none;
  cursor: crosshair;
  border: 2px solid #0a1218;
  box-shadow:
    0 0 0 1px rgba(143, 211, 232, .22),
    0 10px 26px rgba(0, 0, 0, .45);
}

/* ---------- 4. Instrumente auf dem Spielfeld ----------
   Alles, was auf dem Canvas liegt, ist dunkles Geraeteglas mit Amber-Kante:
   auf dem hellen Himmel genauso lesbar wie auf dem dunklen Fels. */
.bruecke_hud {
  position: absolute;
  inset-inline: 0;
  display: flex;
  gap: .4em;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 .55em;
  pointer-events: none;
  z-index: 2;
}
.bruecke_hud > * { pointer-events: auto; }
.bruecke_hud_oben { top: .55em; }
.bruecke_hud_unten { bottom: .55em; align-items: flex-end; flex-wrap: wrap; }
.bruecke_hud_gruppe { display: flex; gap: .4em; align-items: center; }

/* Gemeinsame Geraete-Optik */
.bruecke_levelwahl, .bruecke_fahrzeugwahl, .bruecke_iconbtn,
.bruecke_werkzeug, .bruecke_budget, .bruecke_last {
  color: var(--bb-text);
  background: linear-gradient(180deg, var(--bb-glas-hell), var(--bb-glas));
  border: 1.5px solid rgba(245, 197, 66, .42);
  border-radius: .55em;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(3px);
  transition: border-color .12s, background .12s, transform .12s;
}

/* Level- und Fahrzeugwahl */
.bruecke_levelwahl, .bruecke_fahrzeugwahl {
  display: flex;
  align-items: center;
  gap: .35em;
  padding: .22em .55em;
  font-weight: 700;
  cursor: pointer;
}
.bruecke_levelwahl:focus-within, .bruecke_fahrzeugwahl:focus-within {
  border-color: var(--bb-amber);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, .28), 0 3px 10px rgba(0, 0, 0, .42);
}
.bruecke_levelwahl .jupi_select,
.bruecke_fahrzeugwahl .jupi_select {
  border: none;
  background: transparent;
  color: var(--bb-text);
  box-shadow: none;
  font-weight: 700;
  font-family: var(--bb-schrift);
  padding: .15em .1em;
  max-width: 16em;
}
.bruecke_levelwahl .jupi_select option,
.bruecke_fahrzeugwahl .jupi_select option { color: #16242d; background: #f3f7f9; }

/* Symbol-Knoepfe (Hilfe, Ton, Vollbild) */
.bruecke_iconbtn {
  padding: .28em .55em;
  cursor: pointer;
  font-size: 1.05em;
  line-height: 1;
  font-weight: 700;
}
.bruecke_iconbtn:hover {
  border-color: var(--bb-amber);
  background: linear-gradient(180deg, #2d4756, #16242d);
  transform: translateY(-1px);
}
.bruecke_iconbtn:active { transform: translateY(0); }
.bruecke_iconbtn:focus-visible { outline: 3px solid var(--bb-amber); outline-offset: 2px; }

/* Material-Werkzeuge (unten links) - wie Werkzeuggriffe im Kasten */
.bruecke_werkzeuge { display: flex; gap: .35em; flex-wrap: wrap; }
.bruecke_werkzeug {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35em;
  border-radius: .55em;
  padding: .34em .65em;
  font-weight: 700;
  font-size: .92em;
  font-family: var(--bb-schrift);
  color: var(--bb-text);
  cursor: pointer;
  transition: transform .1s, border-color .1s, background .1s;
}
.bruecke_werkzeug:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--bb-amber);
}
.bruecke_werkzeug.is_aktiv {
  color: #221703;
  border-color: #8a6106;
  background: linear-gradient(180deg, var(--bb-amber-hell) 0%, var(--bb-amber) 62%, #dcab26 100%);
  box-shadow:
    0 3px 0 #6d4c05,
    0 4px 12px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* Aktives Werkzeug traegt den Sicherheitsstreifen als Unterkante */
.bruecke_werkzeug.is_aktiv::after {
  content: "";
  position: absolute;
  inset-inline: .45em;
  bottom: .12em;
  height: 2.5px;
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, #3a2a05 0 5px, transparent 5px 10px);
  opacity: .5;
  pointer-events: none;
}
.bruecke_werkzeug:disabled { opacity: .45; cursor: default; }
.bruecke_werkzeug:focus-visible { outline: 3px solid var(--bb-amber); outline-offset: 2px; }
.bruecke_punkt {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 1.5px rgba(255, 255, 255, .22);
  flex: none;
}

/* Budget: Messgeraet mit Skalenstrichen und Amber-Fuellung */
.bruecke_budget {
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .32em .55em;
  min-width: 9.5em;
}
.bruecke_budgetleiste {
  flex: 1 1 3.5em;
  height: .78em;
  border-radius: 999px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(200, 228, 240, .22) 7px 8px),
    #0a1218;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}
.bruecke_budgetleiste div {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bb-amber-hell), var(--bb-amber-tief));
  box-shadow: 0 0 8px rgba(245, 197, 66, .5);
  transition: width .25s, background .25s;
}
/* Stufen der Budgetleiste (die Stufe setzt game.js als data-stufe) */
.bruecke_budgetleiste div[data-stufe="warn"] {
  background: linear-gradient(180deg, #ffd76b, #d98e05);
}
.bruecke_budgetleiste div[data-stufe="knapp"] {
  background: linear-gradient(180deg, #ff9c8a, #c8341f);
  box-shadow: 0 0 10px rgba(255, 107, 90, .6);
}
.bruecke_budget span {
  font-family: var(--bb-zahl);
  font-size: .92em;
  font-weight: 700;
  color: var(--bb-amber-hell);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* Spannungsanzeige (nur waehrend der Probefahrt sichtbar) */
.bruecke_last {
  border-radius: 999px;
  padding: .3em .8em;
  font-family: var(--bb-zahl);
  font-weight: 800;
  font-size: .95em;
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
}
/* Stufen: ruhig = Cyan, Achtung = Amber, kritisch = Rot (game.js setzt sie) */
.bruecke_last[data-stufe="ruhig"] { color: var(--bb-cyan); border-color: rgba(143, 211, 232, .5); }
.bruecke_last[data-stufe="warn"] {
  color: #221703;
  background: linear-gradient(180deg, var(--bb-amber-hell), var(--bb-amber));
  border-color: #8a6106;
}
.bruecke_last[data-stufe="kritisch"] {
  color: #2a0603;
  background: linear-gradient(180deg, #ffb3a6, var(--bb-rot));
  border-color: #8c1d10;
}

/* Knoepfe im HUD: "Probefahrt" ist der Amber-Knopf, "Alles loeschen" Stahl */
.bruecke_hud .jupi_btn,
.bruecke_hud .jupi_btn_alt {
  font-family: var(--bb-schrift);
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: .55em;
  border: 2px solid #8a6106;
  color: #221703;
  background: linear-gradient(180deg, var(--bb-amber-hell) 0%, var(--bb-amber) 60%, #dcaa22 100%);
  box-shadow: 0 3px 0 #6d4c05, 0 6px 14px rgba(0, 0, 0, .4);
  padding: .45em .85em;
  transition: transform .1s, filter .1s;
}
.bruecke_hud .jupi_btn:hover,
.bruecke_hud .jupi_btn_alt:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  background: linear-gradient(180deg, #fff2c2 0%, var(--bb-amber-hell) 60%, var(--bb-amber) 100%);
  box-shadow: 0 4px 0 #6d4c05, 0 8px 18px rgba(0, 0, 0, .42);
}
.bruecke_hud .jupi_btn:active,
.bruecke_hud .jupi_btn_alt:active { transform: translateY(2px); box-shadow: 0 1px 0 #6d4c05; }
.bruecke_hud .jupi_btn:disabled,
.bruecke_hud .jupi_btn_alt:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
  filter: grayscale(.4);
}
.bruecke_hud .jupi_btn_alt {
  color: var(--bb-text);
  background: linear-gradient(180deg, var(--bb-glas-hell), var(--bb-glas));
  border-color: rgba(143, 211, 232, .45);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.bruecke_hud .jupi_btn_alt:hover {
  color: #fff;
  background: linear-gradient(180deg, #2d4756, #16242d);
  border-color: var(--bb-cyan);
}

/* ---------- 5. Hinweis-Band und Ergebnis-Overlay ---------- */
/* Der Tipp liegt als dunkles Band ueber dem Himmel unter der Kopfzeile.
   WICHTIG: left/right zuerst auf auto - die Grundregel in der lokalen
   jupi.css setzt noch `left: .6em`; mit zusaetzlichem inset-inline-start
   waere das Band in RTL-Sprachen ueber beide Kanten gespannt (in der
   Sichtprobe mit Arabisch gesehen). Danach setzt die logische Eigenschaft
   die richtige Seite: LTR links, RTL rechts. */
.bruecke_hinweis {
  position: absolute;
  left: auto;
  right: auto;
  inset-inline-start: .6em;
  top: 3.4em;
  max-width: 62%;
  margin: 0;
  padding: .32em .8em .32em .75em;
  border-radius: .5em;
  color: var(--bb-text);
  background: linear-gradient(180deg, rgba(12, 22, 29, .93), rgba(8, 15, 20, .93));
  border: 1px solid rgba(245, 197, 66, .4);
  border-inline-start: 4px solid var(--bb-amber);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  font-weight: 600;
  font-size: .95em;
  line-height: 1.35;
  pointer-events: none;
  z-index: 2;
}
.bruecke_hinweis:empty { display: none; }

/* Ergebnis-Karte: Bauplan-Blatt mit Stahlrahmen */
.bruecke_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: .55rem;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(10, 18, 24, .55) 0%, rgba(6, 12, 16, .82) 100%);
  backdrop-filter: blur(2px);
  z-index: 5;
}
.bruecke_overlay[hidden] { display: none; }
.bruecke_karte {
  position: relative;
  max-width: 27rem;
  padding: 1.3rem 1.5rem 1.4rem;
  text-align: center;
  border-radius: .9rem;
  border: 3px solid #0a1218;
  color: #dff0f8;
  background:
    repeating-linear-gradient(0deg, rgba(143, 211, 232, .1) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(143, 211, 232, .1) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #1d3b4c 0%, #142a37 60%, #0e2029 100%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(200, 228, 240, .2);
}
/* Sicherheitsstreifen als Kopfkante der Karte */
.bruecke_karte::before {
  content: "";
  position: absolute;
  inset-inline: .9rem;
  top: -.9rem;
  height: 5px;
  border-radius: 2px;
  background: var(--bb-streifen);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.bruecke_karte h3 {
  margin: .1rem 0 .55rem;
  font-family: var(--bb-schrift);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--bb-amber-hell);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
.bruecke_karte p { margin: .35rem 0; font-size: 1rem; line-height: 1.5; }
.bruecke_sterne { font-size: 2.1rem; margin: .35rem 0 .45rem; letter-spacing: .1em; }
.bruecke_tipp {
  font-size: .92rem !important;
  color: #d8ecf5;
  background: rgba(143, 211, 232, .12);
  border-inline-start: 3px solid var(--bb-cyan);
  border-radius: .45rem;
  padding: .55rem .75rem;
  text-align: start;
}
.bruecke_knopfzeile {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .9rem;
}
.bruecke_knopfzeile .jupi_btn,
.bruecke_knopfzeile .jupi_btn_alt {
  font-family: var(--bb-schrift);
  font-weight: 800;
  border-radius: .55rem;
  border: 2px solid #8a6106;
  color: #221703;
  background: linear-gradient(180deg, var(--bb-amber-hell), var(--bb-amber) 62%, #dcaa22);
  box-shadow: 0 3px 0 #6d4c05;
  padding: .5rem .9rem;
}
.bruecke_knopfzeile .jupi_btn:hover,
.bruecke_knopfzeile .jupi_btn_alt:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bruecke_knopfzeile .jupi_btn_alt {
  color: var(--bb-text);
  background: linear-gradient(180deg, #2b4553, #16242d);
  border-color: rgba(143, 211, 232, .45);
  box-shadow: 0 3px 0 #0a1218;
}

/* Im Testmodus bleiben nur Probefahrt-Exit, Spannung und Vollbild sichtbar
   (visibility statt display, damit nichts springt) */
.bruecke_ist_test .bruecke_werkzeuge,
.bruecke_ist_test .bruecke_budget,
.bruecke_ist_test .bruecke_fahrzeugwahl,
.bruecke_ist_test .bruecke_neu,
.bruecke_ist_test .bruecke_levelwahl { visibility: hidden; }

/* Alte Info-/Hilfe-Aufklapper unter dem Spiel: nicht mehr benutzt (GUI 3.13
   Typ 4), bleiben aber fuer die geteilte jupi.css-Kopie stehen. */

/* ---------- 6. Startmenue: das Bauplan-Blatt ---------- */
.bb_start {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(10, 20, 27, .55) 0%, rgba(4, 9, 12, .82) 100%);
  backdrop-filter: blur(3px);
}
.bb_start[hidden] { display: none; }
.bb_start_karte {
  position: relative;
  width: 100%;
  max-width: 41rem;
  max-height: 92vh;
  overflow: auto;
  padding: 1.15rem 1.4rem 1.3rem;
  text-align: center;
  border-radius: 1rem;
  border: 3px solid #0a1218;
  color: #e4f2f9;
  background:
    repeating-linear-gradient(0deg, rgba(143, 211, 232, .09) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(143, 211, 232, .09) 0 1px, transparent 1px 30px),
    radial-gradient(120% 80% at 50% -10%, rgba(143, 211, 232, .16) 0%, transparent 60%),
    linear-gradient(180deg, #1e3d4e 0%, #142a37 58%, #0d1e27 100%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(200, 228, 240, .2);
}
/* Sicherheitsstreifen als Kopfkante des Blattes */
.bb_start_karte::before {
  content: "";
  position: absolute;
  inset-inline: 1rem;
  top: -.85rem;
  height: 6px;
  border-radius: 2px;
  background: var(--bb-streifen);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
.bb_start_logo {
  display: block;
  width: 5.2rem;
  height: 5.2rem;
  margin: 0 auto .35rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(200, 228, 240, .35);
  padding: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.bb_start_karte h2 {
  margin: 0 0 .8rem;
  font-family: var(--bb-schrift);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bb-amber-hell);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 20px rgba(245, 197, 66, .28);
}
/* Info-Bloecke: ℹ️ Cyan, ❓ Amber - wie die beiden Knoepfe im HUD */
.bb_start_info {
  text-align: start;
  margin: 0 0 .65rem;
  padding: .55rem .95rem .65rem;
  border-radius: .6rem;
  border: 1px solid rgba(143, 211, 232, .32);
  border-inline-start: 4px solid var(--bb-cyan);
  background: rgba(8, 18, 24, .55);
  color: #dceef7;
}
.bb_start_info summary {
  cursor: pointer;
  min-height: 2.5rem;              /* Bedienziel: ganze Zeile >= 40 px */
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--bb-schrift);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--bb-cyan);
}
.bb_start_info summary:hover { color: #c6ecf8; }
.bb_start_info summary:focus-visible { outline: 3px solid var(--bb-amber); outline-offset: 3px; border-radius: .3rem; }
#bb_start_hilfe { border-inline-start-color: var(--bb-amber); }
#bb_start_hilfe summary { color: var(--bb-amber-hell); }
#bb_start_hilfe summary:hover { color: #fff3cd; }
.bb_start_info p {
  margin: .5rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
}
.bb_start_info ul { margin: .45rem 0 .2rem 1.15rem; padding: 0; }
.bb_start_info li { margin: .4rem 0; font-size: .95rem; line-height: 1.5; }
.bb_start_info strong { color: var(--bb-amber-hell); }
.bb_start_lernziel {
  margin-top: .7rem !important;
  padding: .6rem .75rem;
  border-radius: .45rem;
  border-inline-start: 4px solid var(--bb-gruen);
  background: rgba(127, 212, 138, .12);
  color: #dff5e2;
}
.bb_start_aktion {
  margin-top: .9rem;
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.bb_start_aktion .jupi_btn,
.bb_start_aktion .jupi_btn_alt {
  font-family: var(--bb-schrift);
  font-size: 1.1rem;
  font-weight: 800;
  padding: .6rem 1.5rem;
  min-height: 2.75rem;             /* Bedienziel >= 44 px */
  border-radius: .6rem;
  border: 2px solid #8a6106;
  color: #221703;
  background: linear-gradient(180deg, var(--bb-amber-hell) 0%, var(--bb-amber) 60%, #dcaa22 100%);
  box-shadow: 0 4px 0 #6d4c05, 0 8px 20px rgba(0, 0, 0, .45);
}
.bb_start_aktion .jupi_btn:hover,
.bb_start_aktion .jupi_btn_alt:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bb_start_aktion .jupi_btn_alt {
  color: var(--bb-text);
  background: linear-gradient(180deg, #2b4553, #16242d);
  border-color: rgba(143, 211, 232, .45);
  box-shadow: 0 4px 0 #0a1218;
}

/* ---------- 7. Fuss: auf der Wand, nicht auf einer weissen Karte ---------- */
body.jupi.bb_body .jupi_container > .jupi_footer {
  margin-top: .8rem;
  background: transparent;
  border-top: 1px solid rgba(143, 211, 232, .18);
  border-radius: 0;
}
body.jupi.bb_body .jupi_footer_text { color: #b8d2de; }
body.jupi.bb_body .jupi_footer_text a { color: var(--bb-amber-hell); }

/* ---------- 8. Dark Mode (Abendschicht) ----------
   Die Konsole ist schon dunkel - im Dunkelmodus sinkt sie eine Stufe tiefer,
   das Spielfeld bleibt die helle Tagesszene (wie in AGENTS.md 7 notiert). */
html[data-theme="dark"] .bruecke_header {
  background:
    radial-gradient(circle at 14% 30%, rgba(255, 255, 255, .05) 0 8%, transparent 9%),
    radial-gradient(circle at 82% 70%, rgba(0, 0, 0, .38) 0 7%, transparent 8%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .30) 0 2px, transparent 2px 104px),
    linear-gradient(180deg, #22333d 0%, #142128 54%, #0c1519 100%);
}
html[data-theme="dark"] .bruecke_header .jupi_nav_back {
  color: #2a1c02;
  background: linear-gradient(180deg, #f7cd52, #d8a41c);
  border-color: #6d4c05;
  box-shadow: 0 3px 0 #4a3404, 0 6px 14px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .bruecke_panel {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(143, 211, 232, .08) 0%, transparent 62%),
    linear-gradient(180deg, #182832 0%, #0e1a21 48%, #080f13 100%);
  border-color: #2b404c;
}
html[data-theme="dark"] .bruecke_levelwahl,
html[data-theme="dark"] .bruecke_fahrzeugwahl,
html[data-theme="dark"] .bruecke_iconbtn,
html[data-theme="dark"] .bruecke_werkzeug,
html[data-theme="dark"] .bruecke_budget,
html[data-theme="dark"] .bruecke_last {
  background: linear-gradient(180deg, rgba(20, 34, 42, .96), rgba(7, 13, 17, .96));
  border-color: rgba(245, 197, 66, .34);
}
html[data-theme="dark"] .bruecke_werkzeug.is_aktiv {
  color: #221703;
  background: linear-gradient(180deg, #ffd76b 0%, #f0b92f 62%, #cc9612 100%);
  border-color: #7d5805;
}
html[data-theme="dark"] .bruecke_last[data-stufe="warn"] { color: #221703; background: linear-gradient(180deg, #ffd76b, #eab018); }
html[data-theme="dark"] .bruecke_last[data-stufe="kritisch"] { color: #2a0603; background: linear-gradient(180deg, #ff9d8d, #e2503c); }
html[data-theme="dark"] .bb_start_karte {
  background:
    repeating-linear-gradient(0deg, rgba(143, 211, 232, .07) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(143, 211, 232, .07) 0 1px, transparent 1px 30px),
    radial-gradient(120% 80% at 50% -10%, rgba(143, 211, 232, .1) 0%, transparent 60%),
    linear-gradient(180deg, #152b37 0%, #0d1d26 58%, #070f14 100%);
}
html[data-theme="dark"] .bb_start_info { background: rgba(4, 9, 12, .55); }
html[data-theme="dark"] .bruecke_karte {
  background:
    repeating-linear-gradient(0deg, rgba(143, 211, 232, .08) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(143, 211, 232, .08) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #16303e 0%, #0d1f28 60%, #081318 100%);
}

/* ---------- 9. Schmale Fenster: Bedienpult UNTER das Spielfeld ----------
   Ab etwa 1000 px Tafelbreite ist das 16:9-Feld zu niedrig fuer ein HUD, das
   darauf liegt: bei 700 px Tafel sind das nur ~390 px Hoehe, das HUD braucht
   ~190 px - es deckte die halbe Bruecke zu (in der Sichtprobe gemessen).
   Darum wandern die Instrumente dort in den Fluss UNTER das Bild, als
   eigene Konsole. Gemessen wird am BESTEN die Tafel selbst, nicht das
   Fenster: im Vollbild ist das Feld gross, im Fenster schmal (Container
   Query). Die Media-Query am Ende ist der Rueckfall fuer aeltere Browser,
   die noch keine Container Queries kennen (dann wie bisher erst ab 600 px). */
.bruecke_panel { container-type: inline-size; container-name: bbtafel; }

@container bbtafel (max-width: 1000px) {
  .bruecke_spielfeld { display: flex; flex-direction: column; }
  .bruecke_buehne canvas { order: 1; }
  .bruecke_hinweis {
    order: 2;
    position: static;
    max-width: 100%;
    margin: .55em 0 0;
  }
  .bruecke_hud {
    order: 3;
    position: static;
    padding: .55em 0 0;
    gap: .5em;
  }
  .bruecke_hud_unten { order: 4; align-items: stretch; padding-top: .45em; }
  .bruecke_hud_gruppe { align-items: stretch; flex-wrap: wrap; }
  .bruecke_hud_oben { flex-wrap: wrap; }
  .bruecke_levelwahl .jupi_select,
  .bruecke_fahrzeugwahl .jupi_select { max-width: 13em; }
}
/* Vollbild ist ausgenommen: dort liegt das HUD wieder auf dem Bild. */

@media (max-width: 800px) {
  .bruecke_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem .5rem;
    padding: .45rem .5rem .55rem;
  }
  .bruecke_brand { grid-row: 1; grid-column: 1 / -1; }
  .bruecke_brand img { width: 36px; height: 36px; }
  .bruecke_brand h1 { font-size: 1.1rem; letter-spacing: .05em; }
  .bruecke_header .jupi_nav_back { grid-row: 2; grid-column: 1; justify-self: start; font-size: .85rem; }
  .bruecke_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  .bruecke_header .jupi_sprachen_select { max-width: 7rem; }
  .bruecke_header .jupi_theme_switch { width: 62px; min-width: 62px; }
}
/* Sehr schmal (unter 360 px): Zurueck und Werkzeuge untereinander */
@media (max-width: 359px) {
  .bruecke_header .jupi_nav_back { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .bruecke_header .jupi_werkzeuge { grid-row: 3; grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 600px) {
  body.jupi.bb_body .jupi_main { padding: .5rem .5rem 0; }
  .bruecke_panel { padding: .5rem; border-radius: .8rem; }
  .bruecke_panel::after { inset-inline: .7rem; height: 5px; }
  .bruecke_spielfeld { font-size: .82rem; }
  /* Rueckfall ohne Container Query: dasselbe Untereinander wie oben */
  .bruecke_spielfeld { display: flex; flex-direction: column; }
  .bruecke_buehne canvas { order: 1; }
  .bruecke_hinweis {
    order: 2;
    position: static;
    max-width: 100%;
    margin: .5em 0 0;
  }
  .bruecke_hud {
    order: 3;
    position: static;
    padding: .5em 0 0;
    gap: .5em;
  }
  .bruecke_hud_unten { order: 4; align-items: stretch; padding-top: .45em; }
  .bruecke_hud_gruppe { align-items: stretch; flex-wrap: wrap; }
  .bruecke_hud_oben { flex-wrap: wrap; }
  .bruecke_levelwahl .jupi_select,
  .bruecke_fahrzeugwahl .jupi_select { max-width: 10em; }
  /* Die Werkzeug-Reihe laeuft am Handy in zwei Reihen, ohne Ueberlauf */
  .bruecke_werkzeuge { gap: .35em; }
  .bruecke_werkzeug { font-size: .88em; }
  .bb_start_karte { padding: .95rem 1rem 1.1rem; }
  .bb_start_karte h2 { font-size: 1.25rem; }
  .bb_start_logo { width: 4rem; height: 4rem; }
}

/* ---------- 10. Vollbild ---------- */
.bruecke_buehne:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(245, 197, 66, .1) 0%, transparent 60%),
    #0b141a;
}
.bruecke_buehne:fullscreen .bruecke_spielfeld {
  width: min(100vw, calc(100vh * 1.7778));
  font-size: 1.4rem;               /* HUD waechst im Vollbild mit */
}
.bruecke_buehne:fullscreen canvas { border-radius: 0; border: none; box-shadow: none; }
.bruecke_buehne:fullscreen .bruecke_hud {
  position: absolute;
  inset-inline: 0;
  padding: 0 .55em;
}
.bruecke_buehne:fullscreen .bruecke_hud_oben { order: 0; top: .55em; }
.bruecke_buehne:fullscreen .bruecke_hud_unten { order: 0; bottom: .55em; padding-top: 0; }
.bruecke_buehne:fullscreen .bruecke_hinweis {
  position: absolute;
  order: 0;
  inset-inline-start: .6em;
  top: 3.4em;
  max-width: 62%;
  margin: 0;
}

/* Kein Ueberlauf der Kopfzeile auf schmalen Fenstern */
.bruecke_hud_oben, .bruecke_hud_gruppe { flex-wrap: wrap; }

/* ---------- 11. Bedienziele: mindestens 40 x 40 px (Regel 3.13.5) ----------
   STEHT AM ENDE der Datei: eine spaetere Grundregel aus jupi.css wuerde
   sonst gewinnen (so ist es beim Rechen-Raumschiff gemessen worden). */
.bruecke_levelwahl, .bruecke_fahrzeugwahl,
.bruecke_iconbtn, .bruecke_werkzeug,
#bruecke_neu, #bruecke_test,
.bb_start_aktion .jupi_btn, .bb_start_aktion .jupi_btn_alt,
.bruecke_knopfzeile .jupi_btn, .bruecke_knopfzeile .jupi_btn_alt {
  min-height: 2.5rem;
}
.bruecke_iconbtn {
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bruecke_levelwahl .jupi_select,
.bruecke_fahrzeugwahl .jupi_select { min-height: 2.25rem; }
.bruecke_header .jupi_nav_back { min-height: 2.5rem; }
/* Altfehler-Fix: .bruecke_werkzeug steht auf display:flex, dadurch gewann
   die Autorenregel gegen das hidden-Attribut und die Hydraulik-Pille blieb
   auch in Nicht-Hubbruecken-Leveln sichtbar (ladeLevel() schaltet sie per
   hidden ab). Gilt nur im Paket - die geteilte jupi.css bleibt unberuehrt. */
.bruecke_werkzeug[hidden] { display: none; }