/* Einsatzbereit -- Spiel im Gameboy-Stil.
 * Ein Spielpixel ist --px (2 CSS-Pixel); die Pixelschrift (schrift/pixel.ttf)
 * hat 10 Spielpixel je Geviert, also font-size 20px = 2 CSS-Pixel je Pixel.
 * Keine Inline-Stile (strenge CSP): alles Aussehen steht hier. */

@font-face {
  font-family: "Einsatzbereit Pixel";
  src: url("schrift/pixel.ttf") format("truetype");
  font-display: swap;
}

:root {
  --px: 2px;
  --schrift: 20px;
  --zeile: 24px;
  --gehaeuse: #2b2e33;
  --gehaeuse-hell: #3a3e45;
  --rand: #15171a;
  --kreuz: #1b1d21;
  --knopf: #8f3a56;
  --knopf-text: #f2dbe2;
  --beschriftung: #c9cdd2;
  /* Palette des Bildschirms (wie js/grafik.js) */
  --k: #1b241c;
  --d: #2f5a3a;
  --g: #6ea65c;
  --l: #b7d696;
  --w: #f4f4e2;
  --o: #e8843a;
  --r: #b04a3a;
  --grau: #5d646c;
  --tipp: 44px;
  /* die Ordensmappe (Ausbildung): Leder wie im Entwurf der Abzeichen */
  --mappe: #7a4a2a;
  --mappe-rand: #4a2c18;
  --mappe-fach: #3a2414;
  --mappe-text: #f6d9b4;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--gehaeuse);
  color: var(--beschriftung);
  font-family: "Einsatzbereit Pixel", ui-monospace, monospace;
  font-size: var(--schrift);
  line-height: var(--zeile);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select { font: inherit; }

.geraet {
  height: 100vh;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------ Meldeleiste */

.meldeleiste {
  margin: 0;
  padding: 6px 10px;
  background: var(--o);
  color: var(--k);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meldeleiste[hidden] { display: none; }
.leisten-knopf {
  min-height: var(--tipp);
  padding: 0 12px;
  background: var(--k);
  color: var(--w);
  border: 0;
  cursor: pointer;
}

/* ------------------------------------------------------------ Bildschirm */

.bildschirm {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--l);
  color: var(--k);
  border: 3px solid var(--rand);
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.kopf {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  background: var(--k);
  color: var(--w);
  white-space: nowrap;
  overflow: hidden;
}
.kopf-titel { overflow: hidden; text-overflow: ellipsis; }
.kopf-status { color: var(--l); }

.buehne {
  flex: 0 0 auto;
  max-height: 55%;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ohne-buehne .buehne { display: none; }
.buehne > * { flex-shrink: 0; }

.unten {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 8px 8px;
}
.ohne-buehne .unten { padding-top: 8px; }
.laden { margin: auto; }

/* Gameboy-Rahmen: schwarz, Papierspalt, schwarze Innenlinie, Papier */
.box {
  background: var(--w);
  border: var(--px) solid var(--k);
  box-shadow: inset 0 0 0 var(--px) var(--w), inset 0 0 0 calc(var(--px) * 2) var(--k);
  padding: 10px 14px;
  min-height: 0;
}

/* ------------------------------------------------------------ Textbox */

.textbox {
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.textbox-text {
  margin: 0;
  height: calc(var(--zeile) * 5);
  overflow-y: auto;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.textbox.gross, .textbox.lang { flex: 1 1 auto; display: flex; flex-direction: column; }
.textbox.gross .textbox-text, .textbox.lang .textbox-text { flex: 1 1 auto; height: auto; min-height: calc(var(--zeile) * 4); }
.weiter {
  position: absolute;
  right: 10px;
  bottom: 4px;
  animation: blinken 0.8s steps(2, start) infinite;
}
@keyframes blinken { to { visibility: hidden; } }
.textbox:focus-visible, .wahl:focus-visible, .zurueck:focus-visible, .taste:focus-visible, .knopf-text:focus-visible {
  outline: 3px solid var(--o);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ Menue */

.menue-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: calc(var(--tipp) * 2 + var(--zeile));
}
.menue-box.gross { max-height: none; flex: 1 1 auto; }
.menue-titel { margin: 0 0 4px; color: var(--d); }
.menue {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
}
/* Zeilen einer Liste schrumpfen nie: zu lange Listen rollen, statt dass zweizeilige Eintraege
   uebereinander rutschen (min-height allein laesst das Flex-Schrumpfen zu) */
.menue > .wahl, .menue > .wahl-kopf { flex-shrink: 0; }
.wahl {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  width: 100%;
  min-height: var(--tipp);
  padding: 2px 4px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--k);
  text-align: left;
  cursor: pointer;
  line-height: var(--zeile);
}
.wahl .zeiger { flex: 0 0 auto; visibility: hidden; width: 12px; }
.wahl.gewaehlt .zeiger { visibility: visible; }
.wahl.gewaehlt { background: var(--l); }
.wahl.inaktiv { color: var(--grau); }
.wahl-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wahl .rechts { flex: 0 0 auto; margin-left: auto; padding-left: calc(var(--px) * 3); color: var(--d); text-align: right; white-space: nowrap; }
/* ein Wort im Menuepunkt bricht nicht mitten durch (lange Angaben rechts brechen statt dessen) */
.wahl-text { min-width: min-content; overflow-wrap: break-word; }
.wahl.inaktiv .rechts { color: var(--grau); }
.zeichen { flex: 0 0 auto; width: calc(var(--px) * 8); text-align: center; }   /* am Handy 16px, im Breitbild mitskaliert */
.zeichen-ja { color: var(--d); }
.zeichen-nein { color: var(--r); }
/* Einsatzmenue: grosse Felder als Raster (wie KAMPF/BEUTEL), Gruppen als Ueberschrift in der Liste */
.menue.menue-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start; }
.wahl.wahl-feld { justify-content: center; min-height: var(--tipp); padding: 2px 4px;
  border: var(--px) solid var(--k); text-align: center; font-size: 0.82em; }
/* im Raster zeigt die Flaeche die Wahl, kein Zeiger: „UNTERSUCHEN“ passt auch bei 360px in eine Zeile */
.wahl.wahl-feld .zeiger { display: none; }
.wahl.wahl-feld.gewaehlt { box-shadow: inset 0 0 0 var(--px) var(--k); }
.wahl.wahl-feld .wahl-text { flex: 0 1 auto; min-width: 0; overflow-wrap: normal; word-break: normal; letter-spacing: -1px; }
.wahl-kopf { margin: 6px 0 2px; padding: 0 4px; color: var(--d); border-bottom: var(--px) solid var(--d); }
.menue-info { margin: 6px 0 0; padding-top: 4px; border-top: var(--px) solid var(--k); min-height: var(--zeile); }
.zurueck {
  align-self: flex-start;
  min-height: var(--tipp);
  margin-top: 4px;
  padding: 0 10px;
  border: var(--px) solid var(--k);
  background: var(--w);
  color: var(--k);
  cursor: pointer;
}

/* ------------------------------------------------------------ Figuren, Titel */

canvas.figur { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }   /* pixelated zuletzt */

.titelbild { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; text-align: center; }
.titel-gross { margin: 0; font-size: calc(var(--schrift) * 2); line-height: calc(var(--zeile) * 2); font-weight: normal; }
.titel-unter { margin: 0; color: var(--d); }

/* ------------------------------------------------------------ Einsatz, Dialog, Nachbesprechung */

.leise { color: var(--grau); }
.einsatz-kopf, .dialog-kopf, .anleiterin {
  display: flex;
  align-items: center;
  gap: 12px;
}
.einsatz-zeit { margin-left: auto; text-align: right; }
.einsatz-zeit p, .anleiterin p { margin: 0; }
.befundliste { margin: 0; padding: 6px 12px; display: grid; gap: 0 12px; }
.laufend { margin: 0; padding: 4px 12px; font-weight: bold; }
.befund { display: flex; justify-content: space-between; gap: 12px; }
.befund dt { min-width: 0; }
.befund dd { margin: 0; text-align: right; }
/* Messart „einzeln“, veraltet: grau (.leise), die Zeitmarke bricht als Ganzes um */
.befund.veraltet dt { flex-shrink: 0; }
.befund .messwert, .befund .messalter { white-space: nowrap; }
.werte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wert p { margin: 0; }
.wert-zahl { color: var(--d); }
.wert-balken {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: calc(var(--px) * 4);
  border: var(--px) solid var(--k);
  background: var(--w);
}
.wert-balken::-webkit-progress-bar { background: var(--w); }
.wert-balken::-webkit-progress-value { background: var(--d); }
.wert-balken::-moz-progress-bar { background: var(--d); }
.sprechblase { margin: 0; white-space: pre-line; }
.anleiterin canvas { background: var(--w); border-bottom: var(--px) solid var(--k); }

/* ------------------------------------------------------------ Tafel: Code, QR, Kamera */

.buehne:has(.tafel) { max-height: 70%; }
.tafel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tafel p, .tafel label { margin: 0; align-self: stretch; }
canvas.qr, video.kamera {
  display: block;
  width: min(100%, 320px);
  height: auto;
  image-rendering: pixelated;
}
.code-text {
  width: 100%;
  min-height: calc(var(--zeile) * 3);
  padding: 6px 8px;
  border: var(--px) solid var(--k);
  background: var(--w);
  color: var(--k);
  resize: vertical;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}
.hinweis { color: var(--d); }
.name-feld {
  width: 100%;
  min-height: var(--tipp);
  padding: 4px 8px;
  border: var(--px) solid var(--k);
  background: var(--w);
  color: var(--k);
  user-select: text;
  -webkit-user-select: text;
}
.vorschau { white-space: pre-line; }

/* ------------------------------------------------------------ Steuerung */

.tastenhinweis { margin: 0; text-align: center; font-size: var(--schrift); color: var(--beschriftung); }
.steuerung { display: none; }
html.touch .tastenhinweis { display: none; }
html.touch .zurueck { display: none; }   /* am Telefon ist B die Taste */
html.touch .steuerung {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 8px 6px;
}
.kreuz {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 52px);
}
.taste {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.kreuz .taste, .kreuz .mitte { background: var(--kreuz); }
.kreuz .hoch { grid-column: 2; grid-row: 1; border-radius: 8px 8px 0 0; }
.kreuz .links { grid-column: 1; grid-row: 2; border-radius: 8px 0 0 8px; }
.kreuz .mitte { grid-column: 2; grid-row: 2; }
.kreuz .rechts { grid-column: 3; grid-row: 2; border-radius: 0 8px 8px 0; }
.kreuz .runter { grid-column: 2; grid-row: 3; border-radius: 0 0 8px 8px; }
.kreuz .taste::after {
  content: "";
  display: block;
  margin: auto;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}
.kreuz .hoch::after { border-bottom-color: var(--gehaeuse-hell); border-top-width: 0; }
.kreuz .runter::after { border-top-color: var(--gehaeuse-hell); border-bottom-width: 0; }
.kreuz .links::after { border-right-color: var(--gehaeuse-hell); border-left-width: 0; }
.kreuz .rechts::after { border-left-color: var(--gehaeuse-hell); border-right-width: 0; }
.ab { display: flex; gap: 14px; align-items: center; transform: rotate(-20deg); }
.knopf {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--knopf);
  color: var(--knopf-text);
  font-size: var(--schrift);
  box-shadow: 0 3px 0 var(--rand);
}
.knopf-a { margin-top: -28px; }
.taste.gedrueckt { filter: brightness(1.35); }
.knopf.gedrueckt { transform: translateY(2px); box-shadow: 0 1px 0 var(--rand); }

/* ------------------------------------------------------------ Spielwelt (Teilprojekt 3a) */

/* Die Leinwand fuellt den Bildschirm; ihre Groesse (ganzzahlig) setzt das
   Skript als width/height, sie liegt absolut -- so haengt der Platz nicht
   von ihr ab. Textbox und Menues liegen unten ueber ihr. */
.welt-modus .buehne {
  flex: 1 1 0;
  max-height: none;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--k);
}
.welt-modus .buehne canvas.welt {
  position: absolute;
  inset: 0;
  margin: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;      /* zuletzt: gewinnt, wo der Browser es kennt */
}
.welt-modus .unten {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 6px 6px;
  pointer-events: none;
}
.welt-modus .unten > * { pointer-events: auto; }
.welt-modus .textbox-text { height: calc(var(--zeile) * 3); }
.welt-modus .menue-box { flex: 0 1 auto; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); min-height: 0; }
.weltleiste {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.weltleiste-text {
  padding: 0 6px;
  background: var(--k);
  color: var(--w);
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.weltleiste-text:empty { display: none; }
.welt-menue {
  flex: 0 0 auto;                 /* ein langer Text in der Leiste (RTW-Dienst) drueckt den Knopf nicht zusammen */
  margin-left: auto;
  pointer-events: auto;
  min-height: var(--tipp);
  min-width: var(--tipp);
  padding: 0 12px;
  border: var(--px) solid var(--k);
  background: var(--w);
  color: var(--k);
  cursor: pointer;
}
.welt-menue:focus-visible { outline: 3px solid var(--o); outline-offset: 2px; }
/* Ausdauer (Items, Etappe 2): ein kleiner Balken in der Leiste, solange sie unter 50 liegt */
.ausdauer-balken {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 64px;
  height: 10px;
  align-self: center;
  border: var(--px) solid var(--k);
  background: var(--w);
  color: var(--o);
}
.ausdauer-balken[hidden] { display: none; }
.ausdauer-balken::-webkit-progress-bar { background: var(--w); }
.ausdauer-balken::-webkit-progress-value { background: var(--o); }
.ausdauer-balken::-moz-progress-bar { background: var(--o); }
/* Die erzwungene Pause: kurz abblenden */
.buehne { transition: opacity 0.5s steps(4); }
.abgeblendet .buehne { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .buehne { transition: none; } }

/* ------------------------------------------------------------ Abzeichen und Ordensmappe (Ausbildung, js/orden.js) */

.orden-gross { display: grid; place-items: center; height: 100%; }
.orden-neu .orden-bild { animation: orden-blinken 0.35s steps(2) 4; }
@keyframes orden-blinken { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .orden-neu .orden-bild { animation: none; } }
.ordensmappe {
  display: grid;
  gap: calc(var(--px) * 4);
  align-content: center;
  height: 100%;
  padding: calc(var(--px) * 4);
  background: var(--mappe);
  border: calc(var(--px) * 3) solid var(--mappe-rand);
}
.orden-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--px) * 3); }
.orden-sonder { display: grid; justify-items: center; border-top: var(--px) dashed var(--mappe-text); padding-top: calc(var(--px) * 3); }
.orden-sonder .orden-fach { width: 25%; }
.orden-fach {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--mappe-fach);
  color: var(--mappe-text);
}
.orden-fach canvas { width: 80%; height: auto; }
.orden-fach-leer { opacity: 0.6; }
/* die Faecher sind Knoepfe: der Cursor ist ein Rahmen (wie auf der Karte), Antippen waehlt */
button.orden-fach {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.orden-fach.gewaehlt { opacity: 1; box-shadow: 0 0 0 var(--px) var(--k), 0 0 0 calc(var(--px) * 2) var(--w), 0 0 0 calc(var(--px) * 3) var(--k); }
.orden-fach:focus-visible { outline: 3px solid var(--o); outline-offset: 2px; }
/* die Box darunter: feste Hoehe (Name + drei Zeilen, die am Telefon umbrechen duerfen: sechs Zeilen Platz),
   damit beim Blaettern nichts springt */
.orden-info {
  flex: 0 0 auto;
  height: calc(var(--zeile) * 6 + 20px + var(--px) * 4);
  overflow: hidden;
}
.orden-info p { margin: 0; overflow-wrap: break-word; }
.orden-info .orden-info-name { color: var(--d); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.orden-gross canvas { max-width: 100%; height: auto; }

/* ------------------------------------------------------------ Album der Ansichtskarten (NPC-Lieferung 3, js/album.js) */

/* oben das Raster aller Karten (gesammelte als Bild, fehlende mit „?“), der Cursor der Liste darunter ist ein Rahmen */
.album {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(var(--px) * 2);
  height: 100%;
  overflow: hidden;
}
.album-kopf { margin: 0; color: var(--d); }
.album-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--px) * 3);
  align-content: center;
  min-height: 0;
}
.album-feld {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  min-width: 0;
  background: var(--w);
  border: var(--px) solid var(--k);
}
.album-feld canvas { width: 100%; height: auto; }
.album-fehlt { background: var(--l); opacity: 0.7; }
.album-frage { font-size: 1.5em; color: var(--d); }
.album-feld.gewaehlt { box-shadow: 0 0 0 var(--px) var(--w), 0 0 0 calc(var(--px) * 3) var(--k); opacity: 1; }
.ansichtskarte-gross canvas { max-width: 96%; max-height: 96%; width: auto; height: auto; }

/* ------------------------------------------------------------ Karte im Menue, Flug */

/* Die Karte (js/weltkarte.js): oben der Ort, in der Mitte das Pixelbild (ganz zu sehen,
   pixelgenau vergroessert), darunter der Text; die Leiste mit „Region“ und „zurück“
   liegt unten ueber allem (wie die Leiste der Welt). */
.weltkarte, .flug {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 64px;
  background: var(--k);
}
.weltkarte-kopf {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  background: var(--w);
  color: var(--k);
  border: var(--px) solid var(--k);
  box-shadow: 0 0 0 var(--px) var(--w);
  /* feste Hoehe: eine Zeile, ein langer Name endet mit … -- sonst springt das Bild beim Blaettern */
  flex: 0 0 auto;
  height: calc(var(--zeile) + var(--px) * 2);
  overflow: hidden;
}
.weltkarte-ort { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.weltkarte-art { flex: 0 0 auto; color: var(--d); white-space: nowrap; }
.weltkarte-flaeche, .flug-flaeche {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weltkarte-bild, .flug-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.weltkarte-info, .flug-text {
  margin: 0;
  padding: 4px 8px;
  background: var(--w);
  color: var(--k);
  border: var(--px) solid var(--k);
}
/* feste Hoehe (vier Zeilen): ein laengerer Text rollt IN der Box, das Bild darueber bleibt gleich gross */
.weltkarte-info {
  flex: 0 0 auto;
  height: calc(var(--zeile) * 4 + 8px + var(--px) * 2);
  overflow-y: auto;
  overflow-wrap: break-word;
}
.flug-text { min-height: 0; text-align: center; }
.weltkarte-leiste {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.weltkarte-leiste-rechts { justify-content: flex-end; }
.weltkarte-knopf {
  min-height: var(--tipp);
  min-width: var(--tipp);
  padding: 0 8px;
  border: var(--px) solid var(--k);
  background: var(--w);
  color: var(--k);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.weltkarte-knopf:focus-visible { outline: 3px solid var(--o); outline-offset: 2px; }

/* Die Aufzugskabine mit dem Menue der Stockwerke (js/aufzug.js, `[data-kabine]` nur solange das Menue offen ist;
   Betreiber, 12.10.2026: am Telefon verdeckte das Menue die Figuren unten in der Kabine). Hier liegt das Menue NICHT
   ueber dem Bild, sondern darunter -- die Kabine bekommt den Platz darueber und wird ganz gezeigt (object-fit:
   contain), auch am Schreibtisch. Quer am Handy: Kabine links, Menue rechts daneben. Gemessen mit
   design/aufzug_messen.py (Figuren gegen alle Kaesten in `.unten`, Gegenprobe mit elementFromPoint). */
.welt-modus:has([data-kabine]) .buehne { flex: 1 1 0; min-height: 40%; }
.welt-modus:has([data-kabine]) .unten { position: static; flex: 0 1 auto; min-height: 0; padding: 6px; background: var(--k); }
.welt-modus .menue-aufzug { max-height: none; min-height: 0; padding: 6px 10px; }
.menue-aufzug .menue-titel { margin-bottom: 2px; }
[data-kabine].flug { padding: 6px; gap: 0; }
[data-kabine] .flug-text { display: none; }          /* den Stock zeigt die Anzeige der Kabine, das Menue markiert ihn */
@media (max-width: 600px) {
  /* schmal: kleinere Schrift im Menue, damit lange Zeilen hoechstens zweimal umbrechen (Tippziele bleiben 44 px) */
  .menue-aufzug .wahl { font-size: 0.8em; line-height: calc(var(--zeile) * 0.8); }
}

/* ------------------------------------------------------------ Einstieg: Titelmenue, grosse Bilder */

.titelbild-klein { padding: 4px 0; gap: 4px; }
.portraet { display: flex; justify-content: center; padding: 4px 0; }
.portraet canvas { background: var(--w); border: var(--px) solid var(--k); }
.portraet-reihe { display: flex; justify-content: space-around; align-items: flex-end; gap: 8px; }
.portraet-wahl { margin: 0; flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.portraet-wahl canvas { background: var(--w); border: var(--px) solid var(--k); max-width: 100%; height: auto; }
/* ganze Figuren (Prolog): frei auf dem Schirm wie in Pokémon, ohne Rahmen; in der Auswahl
   steht die Figur unter dem Cursor hell hinterlegt */
.ganzfigur canvas { background: none; border: 0; }
.portraet-wahl canvas { background: none; border: var(--px) solid transparent; }
.portraet-wahl.gewaehlt canvas { background: var(--w); border-color: var(--k); }
.weiter[hidden] { display: none; }
/* nur fuer Hilfstechnik (die Textbox liest ihre Seite ganz vor, waehrend sie tippt) */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.portraet-wahl { cursor: pointer; }

/* ------------------------------------------------------------ Optionen: Steuerung am Handy */

/* Wischen: an der Stelle des Steuerkreuzes (gleiche Seite, gleiche Groesse) liegt ein Wischfeld; der
   Stick erscheint darin am Aufsetzpunkt (das Skript zeichnet ihn auf eine Leinwand in Feldgroesse).
   Der Bildschirm selbst nimmt kein Wischen mehr an: Antippen von Listen und Textbox bleibt Antippen. */
.wischfeld {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: 156px;
  height: 156px;
  border-radius: 24px;
  background: var(--kreuz);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
html.touch.wischen .wischfeld { display: block; }
.stick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html.touch.wischen .kreuz { display: none; }
html.touch.kreuz-rechts .steuerung { flex-direction: row-reverse; }
html.knoepfe-gross .kreuz { grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); }
html.knoepfe-gross .knopf { width: 78px; height: 78px; }
html.knoepfe-gross .wischfeld { width: 192px; height: 192px; }

@media (prefers-reduced-motion: reduce) {
  .weiter { animation: none; }
}

/* ------------------------------------------------------------ Startmenue, Rucksack, Ausweis wie in Pokémon
   (js/menue.js, js/rucksack.js, js/ausweis.js): das Startmenue ist eine schmale Box rechts ueber der Welt,
   die Hilfe zum gewaehlten Punkt steht in einer eigenen Box am unteren Rand. */

.welt-modus .unten:has(> .menue-start) { top: 0; padding: 6px; }
.menue-start {
  flex: 0 1 auto;
  align-self: flex-end;
  margin-bottom: auto;
  min-width: 10em;
  max-width: 64%;
  min-height: 0;
  padding: 6px 8px;
}
.welt-modus .menue-start { max-height: none; }
.menue-start .wahl-text { white-space: nowrap; }
.menue-start .zurueck, .menue-tasche .zurueck, .menue-klein .zurueck { display: none; }
.menue-hilfe {
  flex: 0 0 auto;
  margin-top: 6px;
  padding: 8px 12px;
  min-height: calc(var(--zeile) * 2 + 20px);
}
.menue-hilfe .menue-info { margin: 0; padding: 0; border: 0; overflow-wrap: break-word; }
.speicher-info { padding-bottom: 4px; margin-bottom: 4px; border-bottom: var(--px) solid var(--k); }
.speicher-info p { margin: 0; white-space: nowrap; }

/* Der Rucksack: Taschenleiste ◀ NAME ▶ mit Symbol und „1/4“, die Werte darunter, die Liste mit Symbolen */
.menue-tasche { padding: 8px 10px; }
.taschen-kopf { padding-bottom: 4px; margin-bottom: 4px; border-bottom: var(--px) solid var(--k); }
.taschen-leiste { display: flex; align-items: center; gap: 6px; }
.taschen-pfeil {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: var(--tipp);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--k);
  cursor: pointer;
}
.taschen-pfeil:focus-visible { outline: 3px solid var(--o); outline-offset: 2px; }
.taschen-bild, .wahl-bild { flex: 0 0 auto; display: flex; }
.taschen-name { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; }
.taschen-nr { flex: 0 0 auto; color: var(--d); }
.taschen-werte { margin: 0; color: var(--d); text-align: center; overflow-wrap: break-word; }
.menue-tasche .wahl .rechts { flex: 0 0 auto; white-space: nowrap; }
/* das kleine Untermenue (ESSEN · ANSEHEN · ZURÜCK) liegt rechts unten ueber der Liste */
.menue-klein {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  flex: 0 0 auto;
  min-width: 9em;
  min-height: 0;
  padding: 6px 8px;
}
.menue-klein .wahl-text { white-space: nowrap; }

/* Der Dienstausweis: Papierkarte mit orangem Band (kein Kreuz), Brustbild, Werte, Orden als Reihe */
.buehne:has(.ausweis) { max-height: 72%; }
.ausweis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  padding: 8px 10px;
  background: var(--w);
  border: var(--px) solid var(--k);
  box-shadow: inset 0 0 0 var(--px) var(--w), inset 0 0 0 calc(var(--px) * 2) var(--k);
}
.ausweis-kopf { grid-column: 1 / -1; margin: 0; padding: 0 6px; background: var(--o); color: var(--k); }
.ausweis-bild { align-self: start; }
.ausweis-bild canvas { background: var(--l); border: var(--px) solid var(--k); }
.ausweis-daten { min-width: 0; margin: 0; display: grid; }
.ausweis-zeile { display: flex; justify-content: space-between; gap: 8px; }
.ausweis-zeile dt { color: var(--d); }
.ausweis-zeile dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: break-word; }
.ausweis-orden { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ausweis-orden-fach { display: grid; place-items: center; aspect-ratio: 1; background: var(--l); border: var(--px) solid var(--k); }
.ausweis-orden-fach.leer { opacity: 0.5; }
.ausweis-orden-fach canvas { width: 100%; height: auto; }
.ausweis-hinten .ausweis-daten { grid-column: 1 / -1; }
.ausweis-leiste { display: flex; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------ Querformat am Handy
   Der Bildschirm in der Mitte, so hoch wie moeglich; links das Steuerkreuz (bzw. das Wischfeld),
   rechts A und B, darunter START (das Menue). „Steuerkreuz rechts“ tauscht die Seiten. Hochformat und
   Schreibtisch bleiben, wie sie sind (nur mit `html.touch` und niedrigem Querformat). */

.knopf-start { display: none; }
@media (orientation: landscape) and (max-height: 540px) {
  html.touch .geraet {
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "melde melde melde" "kreuz schirm ab" "kreuz schirm start";
    column-gap: 14px;
    row-gap: 6px;
    padding: max(4px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  html.touch.kreuz-rechts .geraet { grid-template-areas: "melde melde melde" "ab schirm kreuz" "start schirm kreuz"; }
  html.touch .meldeleiste { grid-area: melde; }
  html.touch .bildschirm { grid-area: schirm; }
  html.touch .steuerung { display: contents; }
  html.touch .kreuz, html.touch .wischfeld { grid-area: kreuz; align-self: center; justify-self: center; }
  html.touch .ab { grid-area: ab; align-self: center; justify-self: center; padding-top: 24px; }
  html.touch .knopf-start {
    display: block;
    grid-area: start;
    justify-self: center;
    align-self: end;
    min-width: 88px;
    min-height: var(--tipp);
    margin-bottom: 2px;
    padding: 0 12px;
    border-radius: 22px;
    background: var(--gehaeuse-hell);
    color: var(--beschriftung);
    box-shadow: 0 2px 0 var(--rand);
  }
  html.touch .kopf { padding: 0 8px; }
  /* Menues und Textbox ueber der Welt: der Bildschirm ist niedrig, die Liste darf fast ganz hoch */
  html.touch .welt-modus .menue-box { max-height: calc(100dvh - 90px); }
  html.touch .welt-modus .textbox-text { height: calc(var(--zeile) * 2); }
  html.touch .bildschirm:not(.welt-modus) .buehne { max-height: 50%; }
  html.touch .bildschirm:not(.welt-modus) .textbox-text { height: calc(var(--zeile) * 3); }
  /* schmalere Bedienung, damit der Bildschirm Platz hat (Tippziele bleiben ab 44 px) */
  html.touch .kreuz { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
  html.touch .wischfeld { width: 138px; height: 138px; }
  html.touch .knopf { width: 56px; height: 56px; }
  html.touch .ab { gap: 10px; }
  html.touch .knopf-a { margin-top: -24px; }
  html.knoepfe-gross.touch .kreuz { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); }
  html.knoepfe-gross.touch .wischfeld { width: 168px; height: 168px; }
  html.knoepfe-gross.touch .knopf { width: 66px; height: 66px; }
  /* die Karte quer: zwei Zeilen Text (rollt in der Box), damit das Bild Platz hat */
  html.touch .weltkarte-info { height: calc(var(--zeile) * 2 + 8px + var(--px) * 2); }
  /* die Ordensmappe quer: Faecher klein, das Sonderfach rechts daneben; die Box darunter vier Zeilen */
  html.touch .bildschirm:not(.welt-modus) .buehne:has(.ordensmappe) { max-height: none; }
  html.touch .ordensmappe { grid-template-columns: auto auto; justify-content: center; align-items: center; }
  html.touch .orden-reihe { grid-template-columns: repeat(4, 52px); }
  html.touch .orden-sonder { border-top: 0; padding-top: 0; border-left: var(--px) dashed var(--mappe-text);
    padding-left: calc(var(--px) * 4); }
  html.touch .orden-sonder .orden-fach { width: 52px; }
  html.touch .orden-info { height: calc(var(--zeile) * 4 + 20px + var(--px) * 4); }
  html.touch .orden-info p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* der Ausweis quer: die Orden klein */
  html.touch .ausweis-orden { grid-template-columns: repeat(8, minmax(0, 34px)); justify-content: start; }
  html.touch .bildschirm:not(.welt-modus) .buehne:has(.tafel) { max-height: 62%; }
  html.touch .bildschirm:not(.welt-modus) .buehne:has(.ausweis) { max-height: 72%; }
  /* die Aufzugskabine quer: links das Bild, rechts das Menue der Stockwerke (B ist der Knopf daneben) */
  html.touch .welt-modus:has([data-kabine]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  html.touch .welt-modus:has([data-kabine]) .kopf { grid-column: 1 / -1; }
  html.touch .welt-modus:has([data-kabine]) .buehne { min-height: 0; }
  html.touch .welt-modus:has([data-kabine]) .unten { justify-content: center; padding-left: 0; }
  html.touch .menue-aufzug .wahl { font-size: 0.8em; line-height: calc(var(--zeile) * 0.8); }
  html.touch .menue-aufzug .zurueck { display: none; }
}
/* sehr schmal quer (667 x 375): das Menue bekommt mehr Breite, die Schrift wird noch kleiner, der Titel steht schon
   in der Kopfzeile („Aufzug“) -- sonst braeche „Unfallambulanz,“ aus der Spalte */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 720px) {
  html.touch .welt-modus:has([data-kabine]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  html.touch .menue-aufzug .wahl { font-size: 0.7em; line-height: calc(var(--zeile) * 0.7); }
  html.touch .menue-aufzug .menue-titel { display: none; }
}

/* ------------------------------------------------------------ Funkverkehr: Statusgeber und Pager (13.10.2026)
   Der Statusgeber (js/funkgeraete.js) ist ein graues Bediengeraet: oben die gruene Anzeige (Ziffer, Text, Rufname),
   darunter die Tasten 1-9 und 0. Am Handy eine eigene Zeile zwischen Kopf und Buehne (verdeckt nichts), im Breitbild
   ein Fenster oben links. Kein Logo, kein Kreuz. Die passende Taste blinkt in den ersten Einsaetzen (`data-blinkt`). */
.statusgeber {
  flex: 0 0 auto;
  margin: 0;
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  background: var(--gehaeuse-hell);
  color: var(--beschriftung);
  border-bottom: var(--px) solid var(--rand);
  font-size: 0.7em;
  line-height: calc(var(--zeile) * 0.7);
}
.statusgeber[hidden] { display: none; }
.statusgeber p { margin: 0; }
.sg-kopf { display: flex; justify-content: space-between; gap: 8px; color: var(--beschriftung); }
.sg-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sg-anzeige {
  display: flex; align-items: baseline; gap: calc(var(--px) * 3);
  margin: var(--px) 0 calc(var(--px) * 2);
  padding: 0 calc(var(--px) * 3);
  background: var(--g);
  color: var(--k);
  border: var(--px) solid var(--k);
  box-shadow: inset 0 0 0 var(--px) var(--l);
  white-space: nowrap; overflow: hidden;
}
.sg-ziffer { font-size: 1.4em; }
.sg-text { overflow: hidden; text-overflow: ellipsis; }
.sg-tasten { display: grid; grid-template-rows: auto auto; gap: var(--px); }
.sg-reihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--px); }
.sg-taste {
  min-height: calc(var(--px) * 15);
  padding: 0;
  background: var(--grau);
  color: var(--w);
  border: var(--px) solid var(--k);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--k);
  cursor: pointer;
}
.sg-taste[data-gedrueckt] { background: var(--k); box-shadow: none; }
.sg-taste[data-blinkt] { animation: sg-blinken 0.8s steps(1) infinite; }
@keyframes sg-blinken { 50% { background: var(--o); color: var(--k); } }
@media (prefers-reduced-motion: reduce) { .sg-taste[data-blinkt] { animation: none; background: var(--o); color: var(--k); } }
/* im Aufzug (Kabine, Menue der Stockwerke) braucht es den Platz */
.bildschirm:has([data-kabine]) .statusgeber { display: none; }
/* am Handy quer ist der Bildschirm niedrig: eine Zeile -- die Anzeige links, die Tasten rechts */
@media (orientation: landscape) and (max-height: 540px) {
  html.touch .statusgeber { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: center; }
  html.touch .statusgeber[hidden] { display: none; }
  html.touch .sg-kopf { grid-column: 1 / -1; display: none; }
  html.touch .sg-anzeige { margin: 0; }
  html.touch .sg-tasten { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.touch .sg-taste { min-height: calc(var(--px) * 12); }
}

/* Der Pager auf der Buehne: das Geraet (Pixelbild) und sein Display */
.pager { display: flex; align-items: center; gap: 10px; }
.pager canvas { flex: 0 0 auto; image-rendering: pixelated; }
.pager-lcd {
  flex: 1 1 auto; min-width: 0;
  padding: calc(var(--px) * 2) calc(var(--px) * 4);
  background: var(--l);
  color: var(--k);
  border: var(--px) solid var(--k);
  box-shadow: inset 0 0 0 var(--px) var(--g);
}
.pager-lcd p { margin: 0; overflow-wrap: anywhere; }
.pager-lcd p:first-child { color: var(--d); }
/* unterwegs: ueber der Welt, oben (die Welt bleibt stehen, die Textbox unten sagt dasselbe) */
.pager-ueber { position: absolute; top: calc(var(--zeile) + 8px); left: 8px; right: 8px; z-index: 2; pointer-events: none; }
html[data-breit] .pager-ueber { top: calc(var(--px) * 3); left: 50%; right: auto; width: min(90%, var(--textbreite));
  transform: translateX(-50%); }
.pager[data-erneut] .pager-lcd { box-shadow: inset 0 0 0 var(--px) var(--o); }

/* ------------------------------------------------------------ AED im Einsatz (13.10.2026, js/aed-geraet.js)
   Das Geraet als Pixelbild (Gehaeuse, Pads), rechts das Display: Ansage, Ladebalken (fuenf Teile) und die runde
   Schocktaste -- dunkel, solange nicht geladen, blinkend orange, wenn sie bereit ist. Beim Laden fuellt sich der Balken
   (`data-laedt`); bei „Bewegung reduzieren“ steht er halb. Kein Kreuz, kein Logo. */
.aed { display: flex; align-items: center; gap: calc(var(--px) * 4); margin: 0; padding: calc(var(--px) * 2) calc(var(--px) * 4); }
.aed canvas { flex: 0 0 auto; image-rendering: pixelated; }
.aed-lcd {
  flex: 1 1 auto; min-width: 0;
  padding: calc(var(--px) * 2) calc(var(--px) * 4);
  background: var(--l);
  color: var(--k);
  border: var(--px) solid var(--k);
  box-shadow: inset 0 0 0 var(--px) var(--g);
}
.aed-ansage { margin: 0; overflow-wrap: anywhere; font-size: 0.85em; line-height: calc(var(--zeile) * 0.85); }
.aed-unten { display: flex; align-items: center; gap: calc(var(--px) * 4); margin-top: var(--px); }
.aed-ladung { display: grid; grid-template-columns: repeat(5, calc(var(--px) * 5)); gap: var(--px); }
.aed-teil { height: calc(var(--px) * 5); background: var(--g); border: var(--px) solid var(--d); }
.aed-teil[data-an] { background: var(--k); border-color: var(--k); }
/* laedt (das Menue am Geraet): ein Lauflicht; waehrend man drueckt (`data-laedt`): der Balken fuellt sich */
.aed[data-aed-phase="laedt"]:not([data-laedt]) .aed-teil { animation: aed-lauflicht 1.5s steps(1) infinite; }
.aed[data-aed-phase="laedt"]:not([data-laedt]) .aed-teil:nth-child(2) { animation-delay: 0.3s; }
.aed[data-aed-phase="laedt"]:not([data-laedt]) .aed-teil:nth-child(3) { animation-delay: 0.6s; }
.aed[data-aed-phase="laedt"]:not([data-laedt]) .aed-teil:nth-child(4) { animation-delay: 0.9s; }
.aed[data-aed-phase="laedt"]:not([data-laedt]) .aed-teil:nth-child(5) { animation-delay: 1.2s; }
@keyframes aed-lauflicht { 0% { background: var(--k); border-color: var(--k); } 40% { background: var(--g); border-color: var(--d); } }
.aed[data-laedt] .aed-teil { animation: aed-laden 1.6s steps(1) forwards; }
.aed[data-laedt] .aed-teil:nth-child(2) { animation-delay: 0.3s; }
.aed[data-laedt] .aed-teil:nth-child(3) { animation-delay: 0.6s; }
.aed[data-laedt] .aed-teil:nth-child(4) { animation-delay: 0.9s; }
.aed[data-laedt] .aed-teil:nth-child(5) { animation-delay: 1.2s; }
@keyframes aed-laden { to { background: var(--k); border-color: var(--k); } }
.aed-taste {
  width: calc(var(--px) * 9); height: calc(var(--px) * 9);
  border-radius: 50%;
  background: var(--grau);
  border: var(--px) solid var(--k);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--k);
}
.aed-taste[data-blinkt] { background: var(--o); animation: aed-blinken 0.6s steps(1) infinite; }
@keyframes aed-blinken { 50% { background: var(--w); } }
.aed-tastentext { color: var(--d); font-size: 0.8em; }
@media (prefers-reduced-motion: reduce) {
  .aed-taste[data-blinkt] { animation: none; }
  .aed[data-laedt] .aed-teil, .aed[data-aed-phase="laedt"] .aed-teil { animation: none; }
  .aed[data-aed-phase="laedt"] .aed-teil:nth-child(-n+2) { background: var(--k); border-color: var(--k); }
  .aed[data-laedt] .aed-teil:nth-child(-n+2) { background: var(--k); border-color: var(--k); }
}

/* ============================================================ Breitbild am Computer (Betreiber, 12.10.2026)
   js/breitbild.js entscheidet (feiner Zeiger, Fenster breiter als 900 und hoeher als 540 px) und setzt an <html>
   `data-breit` und `data-ui` (Stufe von Schrift und Rahmen: ein UI-Pixel ist --px, die Pixelschrift hat 10 Pixel
   je Geviert). Das ganze Fenster ist Welt (die Leinwand in Spielaufloesung, vergroessert per transform), die
   Textbox unten in der Mitte, Menues als Fenster rechts, oben rechts die Statusbox, beim Kartenwechsel oben links
   das Ortsschild; Bildschirme ohne Welt stehen in einer mittigen Spalte. Ohne `data-breit` gilt nichts hiervon --
   das Handy bleibt, wie es war. */

html[data-ui="3"] { --px: 3px; --schrift: 30px; --zeile: 36px; }
html[data-ui="4"] { --px: 4px; --schrift: 40px; --zeile: 48px; }
html[data-ui="5"] { --px: 5px; --schrift: 50px; --zeile: 60px; }
html[data-ui="6"] { --px: 6px; --schrift: 60px; --zeile: 72px; }
html[data-breit] {
  --tipp: max(44px, var(--zeile));
  --textbreite: calc(var(--schrift) * 30);       /* die Textbox: nicht ueber das ganze Fenster */
  --fenster: calc(var(--schrift) * 13);          /* Menues rechts (Startmenue, Hilfe) */
  --spalte: calc(var(--schrift) * 30);           /* Bildschirme ohne Welt */
}
html[data-breit] .geraet { max-width: none; padding: 0; gap: 0; }
html[data-breit] .bildschirm { border: 0; border-radius: 0; }
html[data-breit] .box { padding: calc(var(--px) * 4) calc(var(--px) * 6); }
html[data-breit] .wahl .zeiger { width: calc(var(--px) * 6); }
/* der Tastenhinweis: klein, eine Zeile unter der Welt (js/breitbild.js: HINWEIS_HOEHE) */
html[data-breit] .tastenhinweis, html.touch[data-breit] .tastenhinweis {
  display: block; flex: 0 0 auto; height: 24px; padding: 0 8px; overflow: hidden; white-space: nowrap;
  font-size: 20px; line-height: 24px; background: var(--rand); color: var(--grau);
}
html.touch[data-breit] .zurueck { display: block; }
html.touch[data-breit] .steuerung { display: none; }

/* Touch-Laptop: Steuerkreuz (bzw. Wischfeld), A/B und START als zuschaltbare Einblendung ueber der Welt
   (Option „Steuerkreuz einblenden“, Vorgabe aus) */
html.touch.einblenden[data-breit] .steuerung {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  position: fixed; left: 0; right: 0; bottom: calc(var(--tipp) + 48px); z-index: 5; padding: 0 24px;
  pointer-events: none; opacity: 0.85;
}
html.touch.einblenden[data-breit] .steuerung > * { pointer-events: auto; }
html.touch.einblenden[data-breit] .ab { margin-bottom: 24px; }
html.touch.einblenden[data-breit] .knopf-start {
  display: block; position: fixed; right: 24px; top: 50%; min-width: 88px; min-height: var(--tipp); padding: 0 12px;
  border-radius: 22px; background: var(--gehaeuse-hell); color: var(--beschriftung); box-shadow: 0 2px 0 var(--rand);
}

/* ---------------- die Welt: das ganze Fenster */
.welt-modus .buehne canvas.welt[data-spielpixel] { transform-origin: center; }
canvas.welt[data-spielpixel][data-skala="2"] { transform: scale(2); }
canvas.welt[data-spielpixel][data-skala="3"] { transform: scale(3); }
canvas.welt[data-spielpixel][data-skala="4"] { transform: scale(4); }
canvas.welt[data-spielpixel][data-skala="5"] { transform: scale(5); }
canvas.welt[data-spielpixel][data-skala="6"] { transform: scale(6); }
canvas.welt[data-spielpixel][data-skala="7"] { transform: scale(7); }
canvas.welt[data-spielpixel][data-skala="8"] { transform: scale(8); }
html[data-breit] .welt-modus .unten {
  top: 0; padding: calc(var(--px) * 3); gap: calc(var(--px) * 2); align-items: center;
}
html[data-breit] .welt-modus .unten > * { flex-shrink: 0; }
html[data-breit] .welt-modus .unten > .textbox { width: min(100%, var(--textbreite)); }
html[data-breit] .welt-modus .unten > .weltleiste { align-self: stretch; }
/* Ort, Einsatz und Ausdauer stehen in der Statusbox -- unten bleibt nur der Menue-Knopf */
html[data-breit] .weltleiste-text, html[data-breit] .ausdauer-balken { display: none; }
/* Menues sind Fenster rechts; die Hilfe steht direkt darunter */
html[data-breit] .welt-modus .unten > .menue-box { align-self: flex-end; width: auto; min-width: var(--fenster);
  max-width: min(100%, var(--textbreite)); }
html[data-breit] .welt-modus .unten:has(> .menue-start) { justify-content: flex-start; }
html[data-breit] .welt-modus .unten > .menue-start { margin-bottom: 0; max-width: min(100%, var(--textbreite)); }
html[data-breit] .welt-modus .unten > .menue-hilfe { align-self: flex-end; width: var(--fenster); margin-top: 0; }
html[data-breit] .menue-hilfe { min-height: calc(var(--zeile) * 2 + var(--px) * 8); }

/* das Ortsschild (die Kopfzeile) oben links, nur kurz nach einem Kartenwechsel (js/oberflaeche.js: ortsschild) */
html[data-breit] .welt-modus .kopf { display: none; }
html[data-breit] .welt-modus[data-ortsschild]:has(canvas.welt):not(:has(.menue-box)) .kopf {
  display: block; position: absolute; top: calc(var(--px) * 3); left: calc(var(--px) * 3); z-index: 1;
  padding: calc(var(--px) * 1) calc(var(--px) * 5);
  background: var(--w); color: var(--k); border: var(--px) solid var(--k);
  box-shadow: inset 0 0 0 var(--px) var(--w), inset 0 0 0 calc(var(--px) * 2) var(--k);
}
html[data-breit] .welt-modus .kopf-status { display: none; }

/* die Statusbox oben rechts (js/oberflaeche.js: statusbox): nur ueber der Welt und solange rechts kein Menue steht */
.statusbox { display: none; }
html[data-breit] .welt-modus:has(canvas.welt):not(:has(.unten .menue-box)) .statusbox {
  display: block; position: absolute; top: calc(var(--px) * 3); right: calc(var(--px) * 3); z-index: 1;
  width: var(--fenster); padding: calc(var(--px) * 2) calc(var(--px) * 5); pointer-events: none;
}
.statusbox p { margin: 0; }
.statusbox [hidden] { display: none; }
.status-ort { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.status-ausdauer { display: flex; align-items: center; gap: calc(var(--px) * 2); font-size: 0.6em; line-height: calc(var(--zeile) * 0.7); }
.status-name { color: var(--d); }
.status-zahl { min-width: 2.2em; text-align: right; }
.status-balken {
  appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; height: calc(var(--px) * 4);
  border: var(--px) solid var(--k); background: var(--w); color: var(--o);
}
.status-balken::-webkit-progress-bar { background: var(--w); }
.status-balken::-webkit-progress-value { background: var(--o); }
.status-balken::-moz-progress-bar { background: var(--o); }
.status-einsatz { margin-top: var(--px); padding-top: var(--px); border-top: var(--px) solid var(--k); font-size: 0.6em;
  line-height: calc(var(--zeile) * 0.7); overflow-wrap: break-word; }

/* ---------------- Bildschirme ohne Welt: eine mittige Spalte */
html[data-breit] body { background: var(--gehaeuse); }
html[data-breit] .bildschirm:not(.welt-modus) {
  align-self: center; width: min(100%, var(--spalte)); border-left: var(--px) solid var(--rand); border-right: var(--px) solid var(--rand);
}
/* die Figuren auf der Buehne (gezeichnet fuers Handy, 2-4 Bildpunkte je Pixel) wachsen mit der Schrift -- nur um
   Faktoren, die ganze Bildpunkte ergeben (die Figuren des Einstiegs messen ihren Platz selbst: js/einstieg.js) */
html[data-ui="3"] :is(.einsatz-kopf, .anleiterin, .ausweis-bild) canvas.figur { zoom: 1.5; }
html[data-ui="3"] .dialog-kopf canvas.figur { zoom: calc(4 / 3); }
html:is([data-ui="4"], [data-ui="5"]) :is(.einsatz-kopf, .anleiterin, .ausweis-bild, .dialog-kopf) canvas.figur { zoom: 2; }
html[data-ui="6"] :is(.einsatz-kopf, .anleiterin, .ausweis-bild, .dialog-kopf) canvas.figur { zoom: 3; }
/* der AED im Einsatz: das Geraet waechst mit der Schrift (sonst steht ein winziges Bild neben einem grossen Display) */
html[data-ui="3"] .aed canvas.figur { zoom: 1.5; }
html:is([data-ui="4"], [data-ui="5"]) .aed canvas.figur { zoom: 2; }
html[data-ui="6"] .aed canvas.figur { zoom: 3; }
/* die Ordensmappe und der Ausweis: so gross wie noetig, nicht so breit wie die Spalte */
html[data-breit] .orden-reihe { grid-template-columns: repeat(4, calc(var(--px) * 30)); justify-content: center; }
html[data-breit] .orden-sonder .orden-fach { width: calc(var(--px) * 30); }
html[data-breit] .ausweis { width: min(100%, calc(var(--schrift) * 22)); align-self: center; }
html[data-breit] .ausweis-orden { grid-template-columns: repeat(8, minmax(0, calc(var(--px) * 16))); justify-content: start; }
/* Bilder ueber den ganzen Schirm (die Karte, Flug, Fahrt, Zug, NEF, Aufzug): Text und Leiste in der Spalte */
html[data-breit] :is(.weltkarte, .flug) {
  padding-left: max(6px, calc((100% - var(--spalte)) / 2)); padding-right: max(6px, calc((100% - var(--spalte)) / 2));
}
html[data-breit] .welt-modus:not(:has(canvas.welt)) .unten > * { width: min(100%, var(--spalte)); align-self: center; }

/* ---------------- Funkverkehr im Breitbild: der Statusgeber als Fenster oben links (das Ortsschild steht nur kurz
   dort, die Statusbox rechts), der Pager in der Spalte */
html[data-breit] .statusgeber {
  position: absolute; top: calc(var(--zeile) * 2 + var(--px) * 6); left: calc(var(--px) * 3); z-index: 1;
  width: calc(var(--schrift) * 11); border: var(--px) solid var(--rand);
}
/* ohne Welt (Pager, Fall, Nachbesprechung): eine Zeile ueber dem Inhalt der Spalte wie am Handy -- nichts verdeckt */
html[data-breit] .bildschirm:not(.welt-modus) .statusgeber { position: static; width: auto; border: 0;
  border-bottom: var(--px) solid var(--rand); }