/* 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: 6px;
  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: 6px; 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: 16px; text-align: center; }
.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; }

/* ------------------------------------------------------------ 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; }

/* ------------------------------------------------------------ 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%; }
}