/* LOTSE — Seekarte und Brücke, Telefon zuerst.
 *
 * Oberflaechensprache seit 12.08.: DUNKLES GLAS. Eine Flaeche liegt ueber der
 * Szene, und sie hat keinen Rahmen — sie hat eine Kante. Was sie abgrenzt, ist
 * der feine helle Strich an ihrer Oberseite (Licht, das auf eine Kante faellt)
 * und der weiche Schatten darunter, nicht eine gezogene Linie ringsum. Deshalb
 * sind hier fast alle `border` verschwunden.
 *
 * Drei Regeln, die alles andere tragen:
 *   1. EINE Akzentfarbe (Messing). Rot und Gruen sind reserviert fuer Backbord,
 *      Steuerbord und Gefahr. Alles andere ist Grau in Grau.
 *   2. Die Zahl traegt, das Wort erklaert: Werte gross und leicht, Bezeichner
 *      klein, gesperrt, gedaempft.
 *   3. Abstand statt Trennlinie. Wo doch getrennt werden muss, eine Haarlinie
 *      auf acht Prozent Weiss — nie ein Rahmen.
 */

/* Schriften (SIL OFL, Lizenztexte liegen neben den Dateien in
   assets/fonts/LICENSE-*.txt). Nur das Latin-Subset, zusammen rund 118 KB.
   `font-display:swap` heisst: erst der System-Stack, dann die echte Schrift —
   nie ein unsichtbarer Text. Fuer CANVAS reicht das nicht, dort muss
   document.fonts.load() vorher gelaufen sein (siehe boot() in src/main.js).
   tools/build-artifact.js ersetzt die url() durch data:-Zeilen und wirft eine
   @font-face-Regel ganz weg, wenn ihre Datei fehlt. */
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../assets/fonts/IBMPlexMono-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/IBMPlexSansCondensed-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../assets/fonts/IBMPlexSansCondensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/EBGaramond-400.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/EBGaramond-400-italic.woff2") format("woff2");
}

:root {
  --grund: #060a0f;
  --glas: rgba(12, 19, 27, 0.62);
  --glas-tief: rgba(8, 13, 19, 0.80);
  --kante: rgba(255, 255, 255, 0.085);
  --haar: rgba(255, 255, 255, 0.07);
  --schatten: 0 12px 34px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.34);

  --ink: #eef3f7;
  --dim: #9baebd;
  /* Von #62778a angehoben: der alte Wert stand bei rund 4,2:1 gegen den
     Hintergrund und damit unter der Lesbarkeitsgrenze von 4,5:1. Bei Sonne auf
     dem Telefonbildschirm verschwanden die Kurzwoerter (FAHRT, KURS, WIND)
     als Erstes. */
  --faint: #7d92a6;

  --messing: #f2b441;
  --see: #6fc7ee;
  --gut: #3fd07f;
  --warn: #ffae3b;
  --gefahr: #ff5c4d;

  --rad: 16px;
  --rad-klein: 11px;
  --unschaerfe: blur(20px) saturate(1.15);

  /* ------------------------------------------------- Papier („Seekarte“) ---
     Eigener Namensraum `--k-*`: die alten Tokens oben beschreiben DUNKLES
     Glas (--ink ist dort die helle Schrift), das HUD bleibt dunkel. Auf dem
     Papierblatt ist --k-ink die dunkle Tinte. Ein gemeinsamer Name waere eine
     Kollision, kein Sparen. */
  --k-paper: #e9e5d8;
  --k-paper-hi: #f3f0e6;
  --k-ink: #16303c;
  --k-ink-soft: #4d6a74;
  --k-rule: #b9b2a0;
  --k-magenta: #a5216f;
  --k-land: #e3d4ab;
  --k-shoal: #bfd9e2;
  --k-deep: #f6fbfb;
  --k-desk: #2f3a3d;
  --k-rad: 0;
  --k-schatten: 0 18px 40px rgba(0, 0, 0, .45);

  /* Schriftfamilien. Hinter jeder Webschrift steht ein System-Stack — faellt
     die Datei aus (fehlgeschlagener Deploy, Einzeldatei ohne Font), bleibt die
     Anmutung stehen statt in die Standardschrift zu kippen. */
  --f-serif: "EB Garamond", Georgia, "Iowan Old Style", serif;
  --f-cond: "IBM Plex Sans Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Linien statt Flaechen: das Blatt grenzt mit Strichen ab, nicht mit
     Farbfeldern. */
  --l-haar: 1px solid var(--k-rule);
  --l-rahmen: 1px solid var(--k-ink);
  --l-doppel: 3px double var(--k-ink);
  --l-punkt: 1.5px dotted var(--k-rule);

  /* R14 (F19-16/17/18): das Spiel-DOM (Reiter, Ecktasten, Meldungsleiste)
     traegt dieselben Papierwerte wie hud.js sie auf dem Canvas malt (dort
     `P` in src/ui/hud.js). Ein Ton, zwei Zeichenwege — wer einen aendert,
     aendert beide. */
  --brett-papier: rgba(235, 231, 219, 0.93);
  --brett-papier-hell: rgba(243, 240, 230, 0.96);
  --brett-kante: rgba(92, 110, 116, 0.34);
  --brett-haar: rgba(103, 120, 126, 0.34);
  --brett-schatten: 0 6px 16px rgba(6, 18, 24, 0.30);
  --brett-rad: 12px;

  --fs-marke: clamp(46px, 8.4vmin, 96px);
  --fs-zeile: clamp(19px, 3.1vmin, 33px);
  --fs-wert: clamp(10px, 1.5vmin, 13px);
  --fs-folio: 12px;
  --fs-notiz: clamp(11px, 1.6vmin, 14px);
  --fs-stempel: clamp(12px, 1.9vmin, 17px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  color: var(--ink);
  /* Erst die Systemschrift der Plattform, dann Ausweichwege. Auf dem Telefon
     und auf dem Mac ist das San Francisco — genau die Anmutung, die hier
     gesucht ist, ohne eine Schriftdatei mitzuliefern. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#view, #chart, #hud {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#chart { background: #050b11; }
#hud { touch-action: none; }
.gone { display: none !important; }

#ui { position: fixed; inset: 0; pointer-events: none; }
.layer {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
.layer.passthru { pointer-events: none; }
.layer.passthru button, .layer.passthru .box { pointer-events: auto; }
.hidden { display: none !important; }

/* ------------------------------------------------------------- Hauptmenue
   Richtung A „Seekarte und Logbuch" (docs/mockups/a-seekarte.html): das Menue
   ist ein PAPIERBLATT ueber der hellen Hafenszene, keine Glasflaeche ueber
   Schwarz. Bewusst ohne Papiertextur — es traegt nur Linien, Stempel und eine
   leichte Drehung. Die Papier-Tokens heissen --k-* (siehe :root); die alten
   dunklen Tokens gehoeren dem HUD und bleiben dort. */

#menu {
  /* Ueber der Einweisung (50): die liegt ausserhalb von #ui und haette
     sonst das Menue verdeckt. Unter dem Bestaetigungsdialog (60). */
  z-index: 52;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 16px);
  background: none;
  position: fixed;
  display: flex;
  align-items: stretch;
}
/* Der Rueckfall hinter dem Menue: dasselbe Standbild wie bisher, jetzt aber
   HELL und ohne Weichzeichner — das Blatt liegt auf einem Revier, nicht auf
   Schwarz. Laeuft die lebende Szene (menueBild in main.js), blendet
   body.menue-live es aus und darunter steht das echte Bild. Schlaegt das
   Rendern fehl, bleibt das Standbild stehen und niemand merkt etwas. */
#menu::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--menu-bild, none);
  background-size: cover; background-position: center 44%;
  opacity: 1; pointer-events: none;
  transition: opacity 0.5s ease;
  /* F19-19: das Standbild ist ein Auftragsbild, 1200 x 450 — ueber ein
     1180 x 820 grosses Fenster bei Geraetefaktor 2 gezogen sind das 3,6-fache
     Vergroesserung, und genau so sah es aus („unscharf, niedrig aufgeloest").
     Ein groesseres Bild dafuer zu erzeugen waere Ballast fuer eine Flaeche,
     die nach einer Sekunde von der lebenden Szene abgeloest wird. Also das
     Gegenteil: BEWUSST weich und etwas skaliert — dann liest es sich als
     Tiefenunschaerfe hinter dem Blatt und nicht als kaputtes Bild. Der
     Ueberstand (scale) verhindert helle Raender durch den Weichzeichner. */
  filter: blur(7px) saturate(0.94);
  transform: scale(1.06);
}
body.menue-live #menu::before { opacity: 0; }
/* Ein Schatten von links unter das Blatt, damit das Papier nicht auf einem
   gleich hellen Himmel schwimmt. Kein Vollflaechen-Dunkel mehr: die Szene
   soll zu sehen sein. */
#menu::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 14, 19, 0.58) 0%, rgba(8, 14, 19, 0.16) 54%, transparent 100%);
  pointer-events: none;
}
.menuseite { position: relative; z-index: 1; }
.menuseite.hidden { display: none !important; }

/* Das Blatt selbst. */
.blatt {
  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--f-serif);
  border-radius: var(--k-rad);
  box-shadow: var(--k-schatten);
  padding: clamp(12px, 2.2vmin, 26px);
}
/* Startseite: das Buchblatt steht links, die rechte Bildhaelfte bleibt der
   Szene. Es fuellt die Hoehe, statt zu schwimmen — dann scrollt auch bei
   844x390 nichts. */
#menuHome {
  width: min(460px, 46vw); min-width: 292px;
  margin-right: auto;
  display: flex; flex-direction: column;
  gap: clamp(5px, 1.3vmin, 14px);
}
/* Hochkant auf dem Telefon gibt es keine "rechte Bildhaelfte", die man frei
   halten koennte — dort nimmt das Blatt die ganze Breite. */
@media (orientation: portrait) and (max-width: 700px) {
  #menuHome { width: 100%; min-width: 0; margin-right: 0; }
}
/* Die Unterseiten sind breite Blaetter in der Mitte. */
#menuLevels, #menuOptions {
  width: min(1100px, 100%); margin: 0 auto;
  display: flex; flex-direction: column;
  min-height: 0;
}
#menuOptions { width: min(720px, 100%); }

/* ---------------------------------------------------------------- Vorspann
   Nicht bedienbar. Gezeichnet wird in src/ui/vorspann.js auf #introCanvas —
   hier steht nur noch, wo die Flaeche liegt und wie sie verschwindet. Die
   frueheren @keyframes sind bewusst weg: sie liefen waehrend der Blockade des
   Hauptfadens ins Leere (siehe Kopf von vorspann.js). */
#intro {
  pointer-events: none;
  overflow: hidden;
  background: #03060f;
  transition: opacity 0.55s ease;
}
/* Das Ausblenden entscheidet AUSSCHLIESSLICH main.js, nicht eine feste
   CSS-Verzoegerung: der Aufbau dahinter dauert je nach Maschine 1,4 bis 8,5 s.
   Eine Animation nach fester Zeit haette auf einer langsamen Maschine einen
   schwarzen Bildschirm zwischen Vorspann und Menue hinterlassen. */
#intro.aus { opacity: 0; }
#intro.weg { display: none !important; }
#introCanvas { display: block; width: 100%; height: 100%; }

@keyframes introAus   { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------- Startseite
   Kein Kachelraster mehr, sondern die Ledger-Zeilen eines Buchs: Name links,
   Punktlinie, Wert rechts in Mono. Der Grund ist derselbe wie bei der Karte —
   ein Buchblatt fuehrt mit Linien, nicht mit Flaechen. */
.folio {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-cond); font-size: var(--fs-folio); letter-spacing: 0.14em;
  color: var(--k-ink-soft); border-bottom: var(--l-haar); padding-bottom: 5px;
}
.home-kopf { text-align: left; padding: 0; }
.home-kopf h1 {
  font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-marke);
  font-variant: small-caps; letter-spacing: 0.015em; text-indent: 0;
  line-height: 0.86; color: var(--k-ink);
}
.home-kopf .tag {
  font-family: var(--f-serif); font-style: italic; letter-spacing: 0.02em;
  font-size: clamp(13px, 2.1vmin, 22px); color: var(--k-ink-soft); margin-top: 0.35em;
}

/* Das eingeklebte Foto. Nicht dekorativ gemeint: es zeigt das Schiff, um das
   es geht, und der weisse Rand mit der leichten Drehung macht aus einem Bild
   ein Beweisstueck im Buch. */
.shipshot {
  border: 5px solid #fbf9f2; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.1deg); align-self: flex-start; width: 100%;
}
.shipshot .kachel-bild {
  display: block; width: 100%; height: clamp(58px, 12vmin, 116px);
  background-size: cover; background-position: 46% 58%;
}
.shipshot figcaption {
  font-family: var(--f-mono); font-size: 10px; color: var(--k-ink-soft);
  background: #fbf9f2; padding: 3px 4px 1px;
}

.ledger { list-style: none; margin: 0; padding: 0; border-top: var(--l-haar); }
.ledger li { position: relative; border-bottom: var(--l-haar); }
.ledger li.hidden { display: none !important; }
.lz {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 8px;
  width: 100%; background: none; border: 0; cursor: pointer; color: inherit;
  font: inherit; text-align: left;
  padding: clamp(5px, 1.2vmin, 13px) 0 clamp(3px, 0.8vmin, 9px);
}
.lz-t {
  font-family: var(--f-serif); font-variant: small-caps; letter-spacing: 0.03em;
  font-size: var(--fs-zeile); line-height: 1; color: var(--k-ink);
}
.lz .dots { border-bottom: var(--l-punkt); transform: translateY(-0.32em); height: 1px; }
.lz .val {
  font-family: var(--f-mono); font-size: var(--fs-wert); color: var(--k-ink-soft);
  text-align: right; max-width: 22ch; line-height: 1.35; white-space: pre-line;
}
.lz .val i { font-style: normal; }
.ledger li.now .lz-t, .ledger li.now .val { color: var(--k-magenta); }
/* Die Zeigehand am Rand ist das einzige Zeichen, das sagt "hier weiter". */
.ledger li.now::before {
  content: "\261B"; position: absolute; left: -0.92em; bottom: 0.5em;
  color: var(--k-magenta); font-size: 15px;
}
.lz:focus-visible { outline: 2px solid var(--k-magenta); outline-offset: 3px; }
@media (hover: hover) { .lz:hover .lz-t { color: var(--k-magenta); } }

.booknote {
  font-family: var(--f-serif); font-style: italic; font-size: var(--fs-notiz);
  color: var(--k-ink-soft); max-width: 44ch; margin: 0;
}
.stamp {
  align-self: flex-start; margin-top: auto;
  border: 2px solid var(--k-magenta); color: var(--k-magenta);
  padding: 5px 10px 3px; transform: rotate(-6.5deg);
  font-family: var(--f-cond); letter-spacing: 0.1em; font-size: var(--fs-stempel);
  opacity: 0.82;
}
.stamp .wert { font-family: var(--f-mono); letter-spacing: 0; }
.stamp i { font-style: normal; }
.bookfoot {
  border-top: var(--l-haar); padding-top: 6px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  font-family: var(--f-cond); font-size: var(--fs-folio); letter-spacing: 0.1em;
  color: var(--k-ink-soft);
}
/* Impressumspflicht § 18 Abs. 1 MStV. F19-21 („noch mehr verstecken"): die
   Zeile MUSS erreichbar bleiben, darf aber nichts anbieten. Also kein
   Unterstrich mehr (der las sich wie ein Menuepunkt), kleiner als die Fusszeile
   und blass — die Trefferflaeche bleibt trotzdem bei 44 px, sonst ist
   „erreichbar" eine Behauptung. */
.home-impressum {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0;
  font-size: 10px; letter-spacing: 0.14em; opacity: 0.42;
  color: var(--k-ink-soft); text-decoration: none; border: 0;
}
.home-impressum:hover, .home-impressum:focus-visible { opacity: 1; color: var(--k-ink); }
/* Die Fusszeile traegt jetzt nur noch das Impressum (F19-22: EN · DE ist raus).
   Es steht deshalb rechts in der Ecke statt links am Satzspiegel. */
.bookfoot { justify-content: flex-end; padding-top: 0; border-top: 0; }

/* -------------------------------------------------- Kopf der Unterseiten */
.seiten-kopf {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center;
  gap: 10px; padding: 0 0 7px; margin-bottom: 9px; border-bottom: var(--l-haar);
}
.seiten-kopf h2 {
  font-family: var(--f-serif); font-variant: small-caps; text-align: left;
  font-size: clamp(18px, 2.8vmin, 26px); font-weight: 400;
  letter-spacing: 0.03em; text-indent: 0; color: var(--k-ink);
}
.zurueck {
  width: 38px; height: 38px; border-radius: var(--k-rad);
  background: none; border: var(--l-rahmen); color: var(--k-ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.zurueck:active { background: rgba(22, 48, 60, 0.10); }
.kopf-stand {
  font-family: var(--f-mono); color: var(--k-magenta); font-size: var(--fs-wert);
  text-align: right; white-space: nowrap;
}
.kopf-stand i { font-style: normal; }

/* ------------------------------------------------------ Schwierigkeitswahl
   Derselbe Schalter wie bisher, nur rechteckig: Doppelrahmen statt Pille, und
   die gewaehlte Stufe steht in Magenta unterstrichen statt auf einem hellen
   Schieber. Der Schieber selbst entfaellt — er musste seine Breite aus der
   Stufenzahl rechnen und war damit die einzige Regel, die bei einem
   zweistufigen Schalter (Sprache) falsch lag. */
.schwierigkeit { margin-bottom: 10px; display: grid; gap: 6px; }
.schalter {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  background: none; border: var(--l-doppel); border-radius: var(--k-rad);
  padding: 0; gap: 0;
}
.schalter .schieber { display: none; }
.stufe {
  position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
  padding: 8px 4px 7px;
  font-family: var(--f-cond); font-size: 12.5px; font-weight: 400;
  letter-spacing: 0.14em; color: var(--k-ink-soft);
  transition: color 0.18s ease;
}
.stufe + .stufe { border-left: var(--l-haar); }
.stufe.on { color: var(--k-magenta); box-shadow: inset 0 -3px 0 var(--k-magenta); }
/* Zusatz unter dem Namen der Stufe — zweizeilig, weil ein Wortpaar in EINER
   Zeile auf einem Telefondrittel umbricht. */
.stufe small {
  display: block; margin-top: 2px;
  font-family: var(--f-cond); font-size: 10px; font-weight: 400;
  letter-spacing: 0.04em; text-transform: none; color: var(--k-ink-soft);
  white-space: nowrap;
}
.stufe.on small { color: var(--k-magenta); }
/* ------------------------------------------------------------ Die Reise
   EIN Auftrag je Ansicht (F19-24). Der Behaelter ist ein echter
   Scroll-Bereich mit Schnappen: Wischen, Traegheit und das Hineinrollen
   beim Tastaturfokus kommen damit vom Browser und nicht aus JavaScript.

   `overscroll-behavior-x: contain` haelt das Weiterrollen im Behaelter, statt
   es an die Seite durchzureichen. (Ob die Zurueck-Geste von iPad-Safari damit
   ausbleibt, ist HIER nicht geprueft — die entscheidet der Browser, bevor die
   Seite etwas sieht.) */
/* `.reise` traegt DIESELBEN Spalten wie eine Etappe. Nur so liegen die
   Blaetterpfeile ueber der KARTE und nicht ueber dem Text daneben — bei
   `position:absolute; right:0` sassen sie am rechten Blattrand und deckten
   quer auf dem Telefon die Lagezeilen zu. */
.reise {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px;
}
#jobGrid.reise-spur {
  grid-column: 1 / -1; grid-row: 1;
  display: flex;
  grid-template-columns: none;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  height: clamp(190px, calc(100dvh - 232px), 560px);
  outline: none;
}
#jobGrid.reise-spur::-webkit-scrollbar { display: none; }
.etappe {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
  box-sizing: border-box;
  padding: 0 1px;
  min-width: 0;
}
.et-karte { position: relative; min-width: 0; min-height: 0; }
.et-cv { display: block; width: 100%; height: 100%; }
.et-text {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior-y: contain;
}
.et-nr {
  margin: 0 0 2px; font-family: var(--f-cond); font-size: 11px;
  letter-spacing: 0.16em; color: var(--k-ink-soft);
}
.et-nr b { color: var(--k-magenta); font-weight: 600; }
.et-name {
  margin: 0 0 4px; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(17px, 2.6vmin, 27px); line-height: 1.1; color: var(--k-ink);
}
.et-brief {
  margin: 0 0 8px; font-family: var(--f-serif); color: var(--k-ink-soft);
  font-size: clamp(12px, 1.7vmin, 15px); line-height: 1.4;
}
.et-lage { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 0; }
.et-lage li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
  gap: 6px; padding: 2px 0; border-bottom: var(--l-haar);
}
.et-lage li b {
  font-family: var(--f-cond); font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--k-ink-soft);
}
.et-lage .et-wert { font-family: var(--f-mono); font-size: 13px; color: var(--k-ink); }
.et-lage .et-zus { font-family: var(--f-mono); font-size: 10px; color: var(--k-ink-soft); }
.et-lage li.warn .et-wert, .et-lage li.warn .et-zus { color: var(--k-magenta); }
.et-sterne {
  margin: 0 0 6px; font-size: 15px; letter-spacing: 0.12em; color: var(--k-magenta);
}
.et-sterne i { color: var(--k-rule); font-style: normal; }

/* Der Startknopf IST der Auftragsknopf (`button.job[data-id]`) — der Name
   steht als `.job-t` darin, nur unsichtbar: Werkzeuge lesen ihn. */
.job.start {
  margin-top: auto; align-self: stretch; cursor: pointer;
  background: var(--k-magenta); color: #fff; border: 0;
  padding: 10px 14px;
  font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.18em;
}
.job.start .job-t {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.job.start:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 2px; }
@media (hover: hover) { .job.start:hover { background: var(--k-ink); } }

/* Die Blaetterpfeile. Sie sitzen UEBER der Karte, nicht daneben: daneben
   haetten sie auf dem Telefon die halbe Kartenbreite gekostet. */
.reise-pfeil {
  grid-column: 1; grid-row: 1; align-self: center;
  width: 34px; height: 46px; z-index: 2; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(243, 240, 230, 0.88); color: var(--k-ink);
  border: var(--l-rahmen); border-radius: var(--k-rad);
  font-size: 22px; line-height: 1; padding-bottom: 3px;
}
.reise-pfeil.links { justify-self: start; margin-left: -2px; }
.reise-pfeil.rechts { justify-self: end; margin-right: -2px; }
.reise-pfeil:disabled { opacity: 0.25; cursor: default; }
@media (hover: hover) { .reise-pfeil:not(:disabled):hover { color: var(--k-magenta); } }

/* Die Wegleiste: achtzehn Perlen, eine je Etappe. Sie beantwortet die Frage,
   die eine Einzelansicht sonst offen laesst — wo stehe ich auf der Reise? */
.kette {
  position: relative; display: flex; gap: 0; margin-top: 10px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.kette::-webkit-scrollbar { display: none; }
/* Die Wegspur: EINE gestrichelte Magenta-Linie hinter allen Perlen, auf der
   Hoehe der Scheiben. Dieselbe Spur wie auf dem alten Kartenblatt — sie hat
   Levi gefallen, und sie ist der Grund, warum die Kette als Weg liest und
   nicht als Zahlenreihe. */
.kette::before {
  content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 0;
  border-top: 1.5px dashed var(--k-magenta); opacity: 0.45;
}
.perle {
  flex: 1 0 auto; min-width: 40px; cursor: pointer; position: relative;
  background: none; border: 0; padding: 3px 2px 2px; color: var(--k-ink-soft);
  font-family: var(--f-mono); font-size: 10px; line-height: 1.05;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 40px;
}
/* Die Scheibe. Offen = Ring auf Papier, erledigt = ausgefuellt, aktuell =
   Magenta mit Ring darum. */
.perle i {
  font-style: normal; display: flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--k-rule); background: var(--k-paper);
  font-size: 9.5px; position: relative; z-index: 1;
}
.perle u {
  display: block; text-decoration: none; font-size: 9px; height: 11px;
  color: var(--k-magenta); letter-spacing: -0.04em; white-space: nowrap;
}
.perle.done { color: var(--k-ink); }
.perle.done i {
  background: var(--k-ink); border-color: var(--k-ink); color: var(--k-paper-hi);
}
.perle.hier { color: var(--k-magenta); }
.perle.hier i {
  background: var(--k-magenta); border-color: var(--k-magenta); color: #fff;
  font-weight: 700; box-shadow: 0 0 0 2.5px var(--k-paper), 0 0 0 4px var(--k-magenta);
}
.perle:focus-visible { outline: 2px solid var(--k-magenta); outline-offset: 1px; }
@media (hover: hover) { .perle:hover i { border-color: var(--k-magenta); } }

/* ---------------------------------------------------------- Einstellungen */
.optionen { display: flex; flex-direction: column; gap: 0; }
.opt-zeile {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 11px 2px; box-shadow: none; border-bottom: var(--l-haar);
}
.opt-zeile label {
  font-family: var(--f-serif); font-variant: small-caps; letter-spacing: 0.03em;
  font-size: clamp(16px, 2.4vmin, 22px); color: var(--k-ink);
}
.opt-zeile input[type="range"] { width: min(240px, 42vw); accent-color: var(--k-magenta); }
.opt-zeile .fine { font-family: var(--f-mono); color: var(--k-ink-soft); font-size: var(--fs-wert); }
.opt-zeile-grafik { grid-template-columns: auto 1fr; justify-content: space-between; }
.schalter-grafik { width: min(220px, 46vw); justify-self: end; }
.schalter-grafik .stufe { font-size: 11px; }
.opt-hinweis {
  font-family: var(--f-mono); color: var(--k-ink-soft); font-size: var(--fs-wert);
  padding: 8px 2px 11px; margin: 0; box-shadow: none; border-bottom: var(--l-haar);
  line-height: 1.5;
}
/* Knoepfe auf Papier: Linie statt Glas. Nur im Blatt gescoped — das dunkle
   Spiel behaelt seine eigenen. */
.blatt button.ghost {
  background: none; border: var(--l-rahmen); border-radius: var(--k-rad);
  color: var(--k-ink); font-family: var(--f-cond); font-size: 12px;
  letter-spacing: 0.1em; padding: 9px 15px;
}
.blatt button.ghost:active { background: rgba(22, 48, 60, 0.10); }
.blatt button.ghost.gefahr { color: var(--k-magenta); border-color: var(--k-magenta); }
button.ghost.gefahr { color: var(--gefahr); }

/* --------------------------------------------- Quer und flach (844 x 390)
   Hier ist die HOEHE der Engpass. Das Buchblatt wird schmal und verliert
   Foto und Randnotiz; der Stempel wandert in die Fusszeile, damit nichts
   scrollt. Auf der Karte tragen die Marken nur noch ihre Nummer. */
@media (orientation: landscape) and (max-height: 480px) {
  #menuHome { width: min(360px, 44vw); min-width: 268px; gap: 4px; }
  .home-kopf h1 { font-size: 40px; }
  .home-kopf .tag { font-size: 13px; }
  .shipshot, .booknote { display: none; }
  .lz-t { font-size: 19px; }
  .stamp {
    margin-top: 5px; align-self: flex-start; transform: rotate(-4deg);
    font-size: 12px; padding: 3px 7px 2px;
  }
  .bookfoot { padding-top: 4px; }
  .folio { padding-bottom: 3px; }

  /* Kopf und Schalter zusammendraengen — sonst bleibt fuer die Reise nichts.
     Bei 844x390 (Telefon quer) bleiben nach Blattrand, Kopfzeile,
     Schalterzeile und Wegleiste rund 200 px fuer das Blatt. */
  #menuLevels { padding-top: 8px; padding-bottom: 8px; }
  #menuLevels .seiten-kopf {
    margin-bottom: 0; border-bottom: 0; padding-bottom: 3px;
    grid-template-columns: 32px 1fr auto;
  }
  #menuLevels .seiten-kopf h2 { font-size: 17px; }
  #menuLevels .zurueck { width: 32px; height: 32px; font-size: 17px; }
  #menuLevels .schwierigkeit {
    margin-bottom: 5px; grid-template-columns: minmax(0, 260px) 1fr;
    align-items: center; gap: 12px;
  }
  #jobGrid.reise-spur { height: clamp(150px, calc(100dvh - 172px), 400px); }
  /* Beide zusammen aendern, sonst stehen die Pfeile nicht mehr ueber der
     Karte (siehe Kommentar bei `.reise`). */
  .reise, .etappe { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 9px; }
  .et-nr { font-size: 10px; margin-bottom: 1px; }
  .et-name { font-size: 15.5px; margin-bottom: 2px; }
  /* Drei Zeilen Briefing und Schluss. Quer auf dem Telefon bleiben rund
     210 px fuer die ganze Spalte; ein vierzeiliges Briefing (flussbogen,
     begegnung) schob den Startknopf darunter aus dem Blatt. */
  .et-brief {
    font-size: 11.5px; margin-bottom: 4px; line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .et-lage { margin-bottom: 4px; }
  .et-lage li { padding: 0; }
  .et-lage li b { font-size: 9.5px; letter-spacing: 0.1em; }
  .et-lage .et-wert { font-size: 11.5px; }
  .et-lage .et-zus { font-size: 9px; }
  .et-sterne { font-size: 12px; margin-bottom: 2px; }
  .job.start { padding: 7px 10px; font-size: 11.5px; letter-spacing: 0.14em; }
  .reise-pfeil { width: 28px; height: 40px; font-size: 19px; }
  /* Quer auf dem Telefon kompakter, aber die Antippflaeche bleibt: 30 px
     hoch und 30 px breit sind am Daumen noch zu treffen. */
  .kette { margin-top: 5px; }
  .kette::before { top: 10px; }
  .perle { font-size: 9px; padding: 1px 1px 0; min-width: 30px; min-height: 30px; }
  .perle i { width: 17px; height: 17px; font-size: 8.5px; border-width: 1.2px; }
  .perle u { height: 8px; font-size: 7.5px; }
  .opt-zeile { padding: 7px 2px; }
  .opt-zeile label { font-size: 16px; }
}

/* -------------------------------------------------------- Auftragskarte
   EINE Karte statt zweier Seiten: sie traegt Bild, Auftrag und Bedingungen.
   Frueher kam nach 'Ablegen' noch ein zweites Blatt mit denselben
   Ueberschriften.

   Seit dem Umbau auf Richtung A ist sie ein FORMULAR auf Papier — ein
   Lotsenauftrag, wie er auf der Bruecke ueberreicht wird. Die Befunde vom
   13.09. (Levi, iPad F13-5) gelten unveraendert weiter und sind hier
   eingebaut, nur in der neuen Sprache:
     1. Die Bedingungen sind keine Kaesten, sondern Formularfelder: Wort klein
        und gesperrt in Cond, Zahl in Mono auf einer Unterstreichung.
     2. Der Brief ist das Einzige, was wirklich gelesen wird — Serif, 16 px,
        auf 60 Zeichen begrenzt.
     3. Quer ist die HOEHE der Engpass. Ab 900 px Breite liegt das Blatt
        zweispaltig; bei 844x390 ebenso, nur enger (eigene Regel unten).
   Markup und Funktion sind unveraendert; das hier ist reine Oberflaeche. */
.karte {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(16, 26, 31, 0.72);
  backdrop-filter: blur(5px);
  padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);
  animation: kartenAuf 0.16s ease both;
}
@keyframes kartenAuf { from { opacity: 0; } to { opacity: 1; } }
.karte-blatt {
  width: min(520px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  /* GANZ deckend: bei 0,96 schien das Blatt darunter durch (Kritiker K1
     11.09.). Papier ist nicht durchsichtig. */
  background: var(--k-paper);
  color: var(--k-ink); font-family: var(--f-serif);
  border: 0; border-radius: var(--k-rad);
  box-shadow: var(--k-schatten);
  overflow: hidden;
  animation: blattAuf 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes blattAuf { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
/* Formularkopf: gesperrt, in Cond, mit der Auftragsnummer rechts. */
.formkopf {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: clamp(9px, 1.6vmin, 15px) clamp(12px, 2.2vmin, 22px) 6px;
  font-family: var(--f-cond); font-size: var(--fs-folio); letter-spacing: 0.16em;
  color: var(--k-ink-soft); border-bottom: var(--l-haar);
}
.formkopf .fk-nr b { font-family: var(--f-mono); font-weight: 400; color: var(--k-ink); letter-spacing: 0.04em; }
/* Das eingeklebte Foto: weisser Rand, leicht gedreht. */
.karte-bildbox {
  position: relative; flex: 0 0 auto;
  margin: clamp(10px, 1.8vmin, 18px) clamp(12px, 2.2vmin, 22px) 0;
  border: 5px solid #fbf9f2; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: rotate(-1deg);
}
.karte-bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.karte-sterne {
  position: absolute; top: 7px; right: 7px; z-index: 1;
  font-size: 12px; letter-spacing: 0.12em; line-height: 1.2;
  color: var(--k-magenta); border: 1.5px solid var(--k-magenta);
  background: rgba(243, 240, 230, 0.86); padding: 2px 6px 1px;
  transform: rotate(-5deg);
}
.karte-sterne:empty { display: none; }
/* Die unerreichten Sterne mussten die FARBE wechseln, nicht nur die
   Deckkraft: ein blasses Magenta las sich auf dem Stempel wie ein erreichter
   Stern, der Auftrag sah bei null Sternen aus wie bei dreien. */
.karte-sterne i { font-style: normal; color: var(--k-rule); }
.karte-text {
  padding: clamp(10px, 1.8vmin, 16px) clamp(12px, 2.2vmin, 22px) 10px;
  margin-top: 0; position: relative; overflow-y: auto;
  /* Die Fade-Kante sagt "da kommt mehr" — die Flaeche IST scrollbar, aber
     ohne Zeichen las sich der Abbruch als Fehler (Kritiker F 29.08.). */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
}
.karte-text h2 {
  font-family: var(--f-serif); font-variant: small-caps; font-weight: 400;
  font-size: clamp(22px, 3.4vmin, 32px); letter-spacing: 0.02em; line-height: 1.1;
  color: var(--k-ink);
}
.karte-brief {
  font-family: var(--f-serif); color: var(--k-ink); font-size: 16px; line-height: 1.45;
  margin-top: 8px; max-width: 60ch;
}

/* Die Bedingungen als Formularfelder: Label klein und gesperrt, Wert in Mono
   auf einer Haarlinie. Fuenf Spalten, solange Platz ist. */
.karte-cond {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 12px; row-gap: 6px; margin: 14px 0 0;
}
.karte-cond .cell {
  background: none; border: 0; border-radius: 0;
  padding: 0 0 4px; box-shadow: none; border-bottom: var(--l-haar);
  min-width: 0;
}
.karte-cond .k {
  font-family: var(--f-cond); color: var(--k-ink-soft);
  font-size: 10px; font-weight: 400; letter-spacing: 0.16em; white-space: nowrap;
}
.karte-cond .v {
  font-family: var(--f-mono); color: var(--k-ink); font-size: 17px; font-weight: 400;
  line-height: 1.25; margin-top: 3px; font-variant-numeric: tabular-nums;
}
.karte-cond .u { font-size: 11px; color: var(--k-ink-soft); white-space: nowrap; }
.karte-cond .cell.warn .v, .karte-cond .cell.warn .u { color: var(--k-magenta); }
.karte-cond .cell:last-child:nth-child(odd) { grid-column: auto; }
@media (max-width: 560px), (max-height: 480px) {
  .karte-cond { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.karte-sterntext {
  font-family: var(--f-mono); color: var(--k-ink-soft); font-size: 11px;
  line-height: 1.55; margin-top: 10px;
}
.karte-sterntext:empty { display: none; }

.karte-fuss {
  flex: 0 0 auto; display: flex; gap: 12px; align-items: center; justify-content: flex-end;
  padding: 10px clamp(12px, 2.2vmin, 22px) calc(10px + env(safe-area-inset-bottom));
  background: none; border-top: var(--l-haar);
}
/* Papierknoepfe: der Weg nach vorn ist Tinte, der Rueckweg eine Linie. */
.formular button.primary {
  flex: 1 1 auto; max-width: 240px; width: 100%;
  background: var(--k-ink); color: var(--k-paper-hi); border: 0; border-radius: var(--k-rad);
  font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.16em; font-weight: 400;
  padding: 12px 18px; box-shadow: none;
}
.formular button.primary:disabled {
  background: none; color: var(--k-ink-soft);
  border: 1.5px dashed var(--k-rule); box-shadow: none;
}
.formular button.ghost {
  background: none; border: var(--l-rahmen); border-radius: var(--k-rad);
  color: var(--k-ink); font-family: var(--f-cond); font-size: 12px;
  letter-spacing: 0.1em; padding: 12px 17px;
}
.formular button.ghost:active { background: rgba(22, 48, 60, 0.10); }
@media (hover: hover) {
  .formular button.primary:not(:disabled):hover { filter: brightness(1.35); }
  .formular button.ghost:hover { background: rgba(22, 48, 60, 0.07); }
}
.formular button.primary:not(:disabled):active { transform: scale(0.975); }
.formular button.primary:focus-visible, .formular button.ghost:focus-visible {
  outline: 2px solid var(--k-magenta); outline-offset: 3px;
}
/* Der Knopf sagt, DASS gebaut wird — der Balken zeigt, dass es noch laeuft.
   Ueber transform, nicht ueber left: dann laeuft er auf dem Compositor weiter,
   auch waehrend der Aufbau den Hauptfaden anhaelt (Kritiker K1 11.09.). */
.go-box { position: relative; flex: 1 1 auto; max-width: 240px; display: flex; padding-bottom: 8px; }
.lade-balken {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
  overflow: hidden; background: rgba(22, 48, 60, 0.12);
  opacity: 0; transition: opacity 0.2s ease;
}
.go-box.laedt .lade-balken { opacity: 1; }
.lade-balken::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: var(--k-magenta);
  will-change: transform;
  animation: ladeLauf 1.05s ease-in-out infinite;
}
@keyframes ladeLauf { 0% { transform: translateX(-105%); } 100% { transform: translateX(270%); } }

/* Quer und breit: Bild links ueber die volle Hoehe, Text und Fuss rechts.
   Der Grund ist gemessen, nicht geschmacklich — im Stapel war das Blatt beim
   Sturm-Auftrag 644 px hoch, und ein Fenster von 820 px hat nach
   Sicherheitsabstaenden keine 644 px uebrig. */
@media (orientation: landscape) and (min-width: 900px) {
  .karte-blatt {
    width: min(920px, 100%);
    display: grid;
    grid-template-columns: 42% 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .formkopf { grid-column: 1 / -1; }
  .karte-bildbox { grid-row: 2 / -1; align-self: start; margin-bottom: 18px; }
  .karte-text { min-height: 0; }
  .karte-fuss { padding-top: 8px; }
}
/* Quer und flach (844 x 390): dasselbe zweispaltig, nur enger. Das Mockup
   haette hier seinen `max-width:820px`-Spread genommen — der greift bei 844
   nicht, deshalb eine eigene Regel. Innen scrollbar, die Fusszeile klebt. */
@media (orientation: landscape) and (max-height: 480px) {
  .karte { padding: 8px; }
  .karte-blatt {
    width: min(760px, 100%); max-height: 100vh; max-height: 100dvh;
    display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto 1fr auto;
  }
  .formkopf { grid-column: 1 / -1; padding: 7px 14px 5px; }
  .karte-bildbox { grid-row: 2 / -1; align-self: start; margin: 10px 0 12px 14px; border-width: 4px; }
  .karte-text { padding: 8px 14px 6px; min-height: 0; }
  .karte-text h2 { font-size: 21px; }
  .karte-brief { font-size: 13.5px; line-height: 1.38; margin-top: 5px; }
  .karte-cond { margin-top: 9px; row-gap: 4px; }
  .karte-cond .v { font-size: 14px; }
  .karte-fuss { padding: 7px 14px calc(7px + env(safe-area-inset-bottom)); }
  .formular button.primary, .formular button.ghost { padding: 9px 14px; }
}

/* Ladeschirm zwischen 'Ablegen' und dem ersten Bild. */
/* Er wird SOFORT eingehaengt (sonst zeichnet ihn der Browser nie — gleich
   danach blockiert der Aufbau den Hauptfaden), blendet sich aber verzoegert
   ein. Geht das Ablegen schnell, war er bei wenigen Prozent Deckkraft und
   fiel nicht auf; dauert es, steht er voll da. Ein Schirm, der 100 ms
   aufblitzt, ist schlechter als gar keiner. */
/* 45 -> 56: die Einweisung (50) und das Menue (52) sind dazwischen gerueckt,
   und der Ladeschirm erscheint bei NOCH sichtbarem Menue (jcGo). */
#laden {
  z-index: 56; display: grid; place-items: center;
  background: rgba(4, 8, 13, 0.92);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.22s ease 0.06s;
}
#laden.an { opacity: 1; }
.laden-box { text-align: center; }
.laden-ring {
  width: 42px; height: 42px; margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-top-color: var(--messing);
  animation: ladeDreh 0.85s linear infinite;
  /* Eigene Ebene: dann dreht der Compositor den Ring weiter, auch wenn der
     Aufbau den Hauptfaden anhaelt (Levi 11.09., iPad: "Ladesymbol steckt
     fest"). Ohne Ebene steht die Animation genau so lange wie der Aufbau. */
  will-change: transform;
  transform: translateZ(0);
}
@keyframes ladeDreh { to { transform: rotate(360deg); } }
#laden p { color: var(--dim); font-size: 13px; letter-spacing: 0.10em; }


button.primary {
  /* Der einzige gefuellte Knopf im Spiel — deshalb traegt er die Akzentfarbe
     und braucht keinen Rahmen dazu. */
  background: var(--messing);
  border: 0;
  color: #1a1206;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: var(--rad-klein);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(242, 180, 65, 0.22);
  transition: transform 0.14s ease, filter 0.14s ease;
}
button.primary:active { transform: scale(0.97); filter: brightness(1.08); }
button.primary:disabled {
  background: rgba(255, 255, 255, 0.07);
  color: var(--faint);
  box-shadow: none;
  cursor: default;
  transform: none;
}
button.ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  color: var(--dim);
  padding: 11px 18px;
  border-radius: var(--rad-klein);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.14s ease;
}
button.ghost:active { background: rgba(255, 255, 255, 0.10); }
button.primary:focus-visible, button.ghost:focus-visible, .lvl:focus-visible,
.tab:focus-visible, button.icon:focus-visible {
  outline: 2px solid var(--see);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
footer { margin-top: 22px; }
.fine { color: var(--faint); font-size: 12px; line-height: 1.65; }

/* ----------------------------------------------------------------- Spiel */

.tabs {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
/* Die drei Ansichten sitzen in EINER Leiste, nicht in drei Kaesten. R14: aus
   dem schwarzen Register wird ein Reiter im Lotsenbuch — dasselbe Papier wie
   die Instrumente darunter. Kein backdrop-filter: das Blatt deckt ohnehin,
   und die Unschaerfe kostet auf dem iPad je Bild. */
.tabs {
  gap: 0;
  background: var(--brett-papier);
  border-radius: var(--brett-rad);
  border: 1px solid var(--brett-kante);
  padding: 0;
  box-shadow: var(--brett-schatten);
  overflow: hidden;
}
.tab {
  background: none;
  border: 0;
  color: var(--k-ink-soft);
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  /* 8px hoch ergab 30 px Trefferflaeche — unter den 44, die als Mindestmass
     fuer einen Daumen gelten. Die Reiter werden je Auftrag mehrfach
     angetippt; das Band selbst waechst dadurch nicht sichtbar, weil die
     Schrift gleich bleibt. */
  padding: 15px 16px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
/* Register-Trennung: Haarlinie zwischen den Reitern statt Abstand. */
.tabs .tab + .tab { border-left: 1px solid var(--brett-haar); }
/* Die gewaehlte Ansicht ist eine helle Flaeche in der Leiste, kein blauer
   Kasten — der Strich unter ihr sagt zusaetzlich "hier stehst du". */
/* Die gewaehlte Ansicht ist angestrichen, nicht angeschaltet: Magenta wie im
   Menue, als Strich unter dem Wort. Kein zweiter Farbwert im Bild. */
.tab.on {
  background: rgba(165, 33, 111, 0.07);
  color: var(--k-magenta);
  box-shadow: inset 0 -2px 0 var(--k-magenta);
}

/* Schmales Telefon: die Pille steht NEBEN den Ecktasten, nicht ueber ihnen.
 *
 * Mittig (`left:50%`) war sie mit vier Reitern breiter als 390 px — KARTE lag
 * unter dem ☰-Knopf, und die Pille reichte bis in die Zellen der Zahlenleiste
 * darunter: ein Tipp auf DREH zeigte die Erklaerung UND wechselte die Ansicht
 * (Kritik 06.09., Handy-K1). Jetzt spannt sie vom rechten Rand der Ecktasten
 * bis zum Bildrand, die vier Reiter teilen sich diese Breite zu gleichen
 * Teilen. Die Zahlenleiste rueckt darunter nach (hudLayout misst die
 * Unterkante der Pille, sie wird nicht geraten).
 *
 * Nur HOCHKANT: quer ist die Breite kein Engpass, dort bleibt die Pille
 * mittig ueber dem Revier. */
@media (max-width: 480px) and (orientation: portrait) {
  .tabs {
    left: calc(max(8px, env(safe-area-inset-left)) + 52px);
    right: max(8px, env(safe-area-inset-right));
    transform: none;
  }
  /* Gleiche Teile statt Textbreite: sonst ist AUSSEN eine schmalere
     Trefferflaeche als BRÜCKE, und der Daumen trifft daneben. */
  .tabs .tab { flex: 1 1 0; padding: 15px 4px; letter-spacing: 0.08em; }
  .pult-tabs .tab { padding: 9px 4px; }
  /* Handy-Kritik 07.09. (w7-handy K1): am 390er hochkant lag die Auftrags-
     karte mittig im Bild, und die Ecktastenspalte (vier Tasten a 44 px,
     Abstand 10) reichte bis in ihre Ueberschrift — der ?-Knopf deckte
     "NAC" von NACHTSCHICHT. Die Karte beginnt jetzt UNTER der Spalte;
     ihr Text scrollt ohnehin, die Hoehe fehlt ihr nicht. */
  .karte {
    place-items: start center;
    padding-top: calc(max(8px, env(safe-area-inset-top)) + 4 * 44px + 3 * 10px + 10px);
  }
}

.corner {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  /* R14 (F19-17): die drei Tasten sind EINE Gruppe, nicht drei Kacheln —
     also kein Abstand dazwischen, sondern eine Haarlinie. Die Trefferflaeche
     bleibt je Taste 44 px. */
  gap: 0;
  z-index: 5;
  background: var(--brett-papier);
  border: 1px solid var(--brett-kante);
  border-radius: var(--brett-rad);
  box-shadow: var(--brett-schatten);
  overflow: hidden;
}
/* Quer ist die Hoehe knapp: eine Viererspalte reicht bis in die Zone von
   Kompass und Massstabsleiste (chart.js, x0=14, sitzt gegen die Unterkante
   des freien Feldes). Zwei Spalten zu zweit halten die Ecktasten oben und
   lassen Kompass/Massstab in Ruhe. */
@media (orientation: landscape) and (max-height: 460px) {
  .corner { flex-direction: row; flex-wrap: wrap; width: 90px; }
}
button.icon {
  /* 40 statt 44: dieselbe Rechnung wie bei den Reitern. Die Ecktasten sind
     der einzige Weg zurueck ins Menue und zum Ton. */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--glas);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  border: 0;
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten);
  color: var(--dim);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.14s ease;
}
button.icon:active { background: rgba(255, 255, 255, 0.12); transform: scale(0.94); }

/* R14 (F19-17): Levi mochte die drei schwarzen Kacheln nicht. Jetzt sind sie
   Knoepfe auf EINEM Blatt: kein eigener Kasten je Taste, kein Schatten je
   Taste, nur eine Haarlinie zwischen ihnen. Der Rahmen sitzt an der Gruppe
   (.corner), nicht am Knopf. */
.corner button.icon {
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--k-ink-soft);
  font-size: 18px;
}
.corner button.icon + button.icon { border-top: 1px solid var(--brett-haar); }
@media (orientation: landscape) and (max-height: 460px) {
  /* Zwei Spalten: dann trennt die Linie seitlich, nicht nach oben. */
  .corner button.icon + button.icon { border-top: 0; border-left: 1px solid var(--brett-haar); }
}
/* Das Press-Highlight steht weiter oben bei gleicher Spezifitaet und wuerde
   sonst von der Regel darueber verdeckt — ohne es fuehlt sich die Taste tot an. */
.corner button.icon:active { background: rgba(22, 48, 60, 0.10); }

/* Meldungsfeld-Aufhaenger (H1, 29.08.): Ecktaste wie die anderen, plus
   Zaehler fuer Ungelesenes — der Punkt sitzt AUSSERHALB der 44px-Flaeche,
   damit er den Daumen nicht verkleinert (Trefferflaeche bleibt voll 44px). */
/* Meldungsleiste. R14 (F19-18): Levi — „die Hinweis-Nachrichten unten stoeren
   an ihrer Position". Sie lagen ueber dem Bedienband, also mitten im Wasser
   zwischen den Stellern, genau dort, wo man das Schiff sucht.

   Jetzt stehen sie OBEN, mittig unter der Ansichtenleiste: ein schmaler
   Streifen am oberen Rand, wo ohnehin keine Bedienung liegt und der Blick
   beim Manoever nicht haengt. `--msg-strip-top` rechnet
   positioniereMeldungsleiste() aus der gemessenen Unterkante der Reiter (und
   des Gefahren-Slips, wenn einer steht) — kein Fixwert.
   Neue Zeilen drucken sich ein (.neu). */
.msg-strip {
  position: absolute;
  left: var(--notice-left, 12px);
  transform: none;
  top: var(--msg-strip-top, 70px);
  bottom: auto;
  width: min(var(--notice-breite, 520px), 520px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 24;
  pointer-events: auto;
  cursor: pointer;
}
/* Jede Zeile ist ein Slip — ein Streifen Papier aus dem Schreiber, mit einem
   Farbbalken links. Zeit in der Schreibmaschinenschrift, Text in der schmalen
   Groteske, wie im Logbuch. Hoechstens zwei Zeilen hoch (siehe max-height). */
.msg-strip .msg-zeile {
  background: var(--brett-papier);
  box-shadow: var(--brett-schatten);
  border: 1px solid var(--brett-kante);
  border-left: 4px solid var(--k-ink-soft);
  border-radius: 9px;
  padding: 7px 12px;
  font-family: var(--f-cond);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--k-ink);
  /* Zwei Zeilen, dann Schluss — eine Meldung, die den halben Rand fuellt,
     ist wieder das, was weg sollte. */
  max-height: 2.7em;
  overflow: hidden;
}
.msg-strip .msg-zeile .t {
  color: var(--k-ink-soft);
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
  font-size: 10.5px;
}
.msg-strip .msg-zeile.bad { border-left-color: #a8301f; }
.msg-strip .msg-zeile.warn { border-left-color: #9a6212; }
.msg-strip .msg-zeile.good { border-left-color: #2f6b4f; }
/* NUR die juengste Zeile — ueberall, nicht mehr nur am Pult (Kritiker L,
   30.08. R2): nach zehn Minuten Fahrt stapelten sich drei Zeilen (davon
   zwei Duplikate "KAJE VORAUS") bis in die Bildmitte, waehrend das rote
   Banner oben dieselbe Info schon traegt. Das volle Protokoll bleibt im
   aufklappbaren Meldungsfeld (msg-panel). */
.msg-strip .msg-zeile { display: none; }
.msg-strip .msg-zeile:last-child { display: block; }
/* Erklaerung zu einem angetippten Ablesefeld (main.js zeigeKuerzel): sie steht
   vier Sekunden da und darf die juengste Meldung daneben nicht verdraengen —
   dieselbe Ausnahme wie fuer die Akut-Warnung darunter.

   OHNE `:has()` (R13-Rest): Safari vor 15.4 kennt den Wahlschalter nicht, und
   dort blieb genau die Zeile aus, auf die es ankommt. Welche Zeilen stehen
   duerfen, weiss ohnehin die Stelle, die sie baut — renderMessages() in
   main.js setzt `zeig`. */
.msg-strip .msg-zeile.zeig { display: block; }
.msg-strip .msg-zeile.info { display: block; }
.msg-strip .msg-zeile.info {
  border-left-color: var(--k-magenta);
  color: var(--k-ink);
}
/* R4-11: die Akut-Warnung liegt in DERSELBEN Leiste wie alles andere. Sie ist
   immer die letzte Zeile, steht also ohnehin — die Regel oben blendet dann
   aber die juengste Meldung aus, und die will man daneben behalten. */
.msg-strip .msg-zeile.akut { display: block; }
/* Die Akut-Warnung bleibt die einzige Zeile mit eigener Flaeche: gedecktes
   Rot auf Papier, kein Leuchtstoff. Sie blinkt weiter — sie ist das einzige
   im Bild, das das darf. */
.msg-strip .msg-zeile.akut {
  border-left-color: #a8301f;
  background: rgba(240, 222, 214, 0.95);
  color: #8e2415;
  font-weight: 600;
  letter-spacing: 0.04em;
  animation: akutBlink 1.05s ease-in-out infinite;
}
/* Eine stehende Marke (Grundberuehrung, Rumpfschaden, Stromausfall) ist ein
   ZUSTAND, kein Alarm — sie blinkt nicht, sonst flackert das halbe Spiel. */
.msg-strip .msg-zeile.akut.steht { animation: none; }
@keyframes akutBlink {
  0%, 100% { background: rgba(240, 222, 214, 0.95); }
  50%      { background: rgba(232, 200, 190, 0.97); }
}
.msg-strip .msg-zeile.neu { animation: msgPrint 0.45s ease-out; }
/* Pult-Ansicht: oben sitzen Konsolenleiste, Alarmbanner und der
   Anzeigen-Header, unten die Regler — beides hat die Leiste dort schon
   verdeckt (Kritiker r30a/r31a). Am Pult bleibt darum NUR die juengste
   Zeile, unten links im freien Blech. */
.msg-strip.am-pult {
  left: 16px;
  transform: none;
  top: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 32px));
}
.msg-strip.am-pult .msg-zeile { display: none; }
.msg-strip.am-pult .msg-zeile:last-child { display: block; opacity: 1; }
@keyframes msgPrint {
  from { opacity: 0; transform: translateY(10px); }
}

.badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gefahr);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--grund);
}

/* Meldungsfeld selbst: aus-/einklappbares Protokoll, das run.log zeigt.
   Rechts verankert wie ein Schubfach, nicht mittig wie Briefing/Bedienung —
   die Ecktaste sitzt links oben, das Feld haengt trotzdem dort, wo der
   Daumen es leicht wieder zuklappt (oben, erreichbar, nicht mittendrin). */
.msg-panel {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: min(380px, calc(100vw - 16px - env(safe-area-inset-left)));
  max-height: min(72vh, calc(100vh - 24px));
  background: var(--glas-tief);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten);
  border-radius: var(--rad);
  display: flex;
  flex-direction: column;
  z-index: 30;
  overflow: hidden;
  /* #game ist .layer.passthru (pointer-events:none) — ohne diese Zeile waere
     das ganze Feld nur optisch da, Wischen zum Scrollen liefe ins Leere. */
  pointer-events: auto;
}
.msg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--haar);
  flex: none;
}
.msg-head h3 { font-size: 14px; letter-spacing: 0.04em; color: var(--ink); font-weight: 600; }
/* 44px Trefferflaeche wie jede andere Taste hier — der Schliessen-Knopf ist
   der einzige Weg zurueck, wenn man mit dem Daumen daneben tippt. */
.msg-head button.ghost { min-height: 44px; padding: 8px 14px; }
.msg-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 10px;
}
.msg-item {
  padding: 9px 10px;
  border-radius: var(--rad-klein);
  margin: 4px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
  border-left: 3px solid var(--dim);
}
.msg-item .t {
  display: block;
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.msg-item.bad { border-left-color: var(--gefahr); }
.msg-item.warn { border-left-color: var(--warn); }
.msg-item.good { border-left-color: var(--gut); }
.msg-empty { color: var(--faint); font-size: 12.5px; padding: 18px 10px; text-align: center; }

.brief {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  max-width: 92vw;
  background: var(--glas);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  border: 0;
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten);
  border-radius: var(--rad);
  padding: 13px 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dim);
  text-align: center;
  /* Wegtippbar — mit pointer-events:none lief der Handler in main.js ins Leere
     und der Kasten stand neun Sekunden ueber Bug und Liegeplatzfeld. */
  pointer-events: auto;
  cursor: pointer;
}

/* Die Bedienerklaerung (zeigeBedienung() in main.js) haengt ueber der echten
   3D-Szene — bei Tageslicht auf hellem Wasser wurde die duenne Glaspille
   (--glas, 62% Deckung) zu wenig Untergrund fuer gedaempften Text, und ohne
   Hoehenbremse lief der lange Dreiabsatz-Text auf schmalen Phones unten aus
   dem sicheren Bereich. Eigenes dunkleres, blickdichteres Panel mit Deckel. */
/* :not(.toast) absichern: main.js setzt bei einer Meldung nur className neu
   ('brief toast ...'), das data-art-Attribut von einer vorher offenen Hilfe
   bleibt haengen. Ohne die Klammer haette die naechste Meldung Hilfe-Panel-
   Innenabstand und Scrollbox geerbt statt der Toast-Optik. */
.brief[data-art="hilfe"]:not(.toast) {
  background: var(--glas-tief);
  text-align: left;
  padding: 16px 22px;
  max-height: min(70vh, calc(100vh - 96px - max(24px, env(safe-area-inset-bottom))));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 1px 0 var(--kante), 0 24px 60px rgba(0, 0, 0, 0.55);
  /* #brief liegt als Kind in #game, #briefing folgt im DOM danach — beide
     .layer mit z-index:auto, also deckt #briefing das Hilfe-Panel ab, sobald
     beide gleichzeitig sichtbar sind (Briefing-Screen + '?' antippen).
     z-index:40 hebt das Panel darueber, bleibt aber unter .confirm-layer (60). */
  z-index: 40;
}
.brief[data-art="hilfe"] p { color: var(--ink); margin: 0 0 10px; }
.brief[data-art="hilfe"] p:last-child { color: var(--faint); margin-bottom: 0; font-size: 12px; }

/* Fester Warnort "Notice". R14 (F19-18): er steht jetzt an DERSELBEN Stelle
   wie die Meldungsleiste — oben mittig unter der Ansichtenleiste, der Slip
   zuoberst, die Meldungen darunter. Zwei Meldeorte in einem Bild waren genau
   das, was Levi „stoert an ihrer Position" nannte; `--notice-top` rechnet
   positioniereMeldungsleiste() aus der gemessenen Reiterunterkante. */
.brief.toast {
  top: var(--notice-top, 70px);
  bottom: auto;
  left: var(--notice-left, 12px);
  transform: none;
  width: min(var(--notice-breite, 520px), 520px);
  max-width: min(var(--notice-breite, 520px), 520px);
  background: var(--brett-papier);
  box-shadow: var(--brett-schatten);
  color: var(--k-ink);
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.06em;
  /* Kleiner als vorher (15 -> 12.5px) und schmaler gepolstert: der Toast ist
     jetzt die Ausnahme fuer kritische Ereignisse, kein zweites Warnbanner
     mehr (Levi 29.08., siehe auch drawWarnings in hud.js). */
  font-size: 12.5px;
  padding: 8px 12px 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--brett-kante);
  /* Der Balken links ist das Slip-Merkmal aus dem Mockup (docs/mockups/
     a-seekarte.html, .slip.live) — Farbe sagt, wie ernst es ist. */
  border-left: 4px solid var(--k-ink-soft);
  pointer-events: none;
}
.brief.toast.bad {
  color: #8e2415; background: rgba(240, 222, 214, 0.95);
  border-left-color: #a8301f;
}
.brief.toast.ok { color: #2f6b4f; border-left-color: #2f6b4f; }
/* Quer am Telefon ist fuer zwei Zeilen kein Platz — eine Zeile, Rest als
   Ellipse, und schmaler, damit die Ecktasten frei bleiben. */
@media (orientation: landscape) and (max-height: 480px) {
  /* Quer am Telefon (844x390) ist die Hoehe der Engpass: EINE Zeile je Slip,
     Rest als Ellipse, und enger gesetzt — zwei volle Streifen am oberen Rand
     fressen dort ein Viertel des Bildes. */
  .brief.toast {
    width: min(var(--notice-breite, 400px), 400px);
    max-width: min(var(--notice-breite, 400px), 400px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 5px 9px 5px 11px; font-size: 11px; border-radius: 7px;
  }
  .msg-strip { width: min(var(--notice-breite, 400px), 400px); }
  .msg-strip .msg-zeile {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 5px 9px; font-size: 11px; border-radius: 7px; max-height: none;
  }
}
/* Solange das Ergebnisblatt liegt, schweigt der Rand: die Meldungsleiste lag
   sonst UEBER dem Blatt (844x390, handy-9-ergebnis.png aus BA2). */
/* OHNE `:has()` (R13-Rest): die Klasse setzt main.js, wenn das Blatt kommt und
   geht — `body:has(#result:not(.hidden))` blieb auf Safari vor 15.4 wirkungslos,
   und die Leiste stand dann UEBER dem Ergebnisblatt. */
body.ergebnis-offen .msg-strip,
body.ergebnis-offen .brief.toast { visibility: hidden; }

/* ------------------------------------------------------ Auftragskarte ---- */
/* Gleiche Sprache wie das Instrumentenbrett in hud.js: Deckton, Messing fuer
   Sollwerte, Seeblau fuer Istwerte. Waehrend die Karte steht, ruht die
   Simulation und das Brett wird nicht gezeichnet — der Einstieg zeigt erst
   das Schiff, dann den Auftrag, dann die Instrumente. */

#briefing {
  display: flex;
  /* Unten, nicht mittig: ueber der Karte steht das Schiff, und das soll man
     beim Lesen sehen. Mittig deckte die Karte genau das zu, worum es geht. */
  align-items: flex-end;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 42%, rgba(4, 10, 16, 0.30) 0%, rgba(3, 7, 11, 0.86) 78%);
  overflow-y: auto;
  touch-action: pan-y;
}
#briefing .card {
  width: min(460px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: rgba(7, 17, 26, 0.94);
  border: 1px solid #27404f;
  border-radius: 12px;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
#briefing .kicker {
  color: #5d7486;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
#briefing h2 {
  color: #e7edf3;
  font-size: clamp(19px, 5.2vw, 25px);
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 3px 0 10px;
}
#briefing .rule { height: 1px; background: #27404f; margin: 0 0 11px; }
#briefing p.text {
  color: #b8c8d8;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 4px;
}
#briefing .cond {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 13px 0 4px;
}
#briefing .cell {
  background: #0b1a26;
  border: 1px solid #2d4a5d;
  border-radius: 8px;
  padding: 7px 9px;
}
#briefing .cell .k {
  color: #5d7486;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
#briefing .cell .v {
  color: #5fbfe8;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}
#briefing .cell .u { color: #8aa2b6; font-size: 10px; font-weight: 600; white-space: nowrap; }
#briefing .cell.warn .v { color: #f0b544; }
#briefing .hint {
  color: #5d7486;
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 11px;
}
#briefing button {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: #12506e;
  border: 1px solid #2f88b4;
  color: #dceafc;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 15px;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
}
#briefing button:active { background: #1a6c93; }

/* Quer ist die Hoehe knapp: Text und Kacheln nebeneinander. */
@media (orientation: landscape) and (max-height: 460px) {
  #briefing .card { width: min(680px, 100%); padding: 12px 14px 14px; }
  #briefing h2 { margin-bottom: 7px; }
  #briefing .cond { grid-template-columns: repeat(6, 1fr); margin: 9px 0 0; }
  #briefing p.text { font-size: 13px; }
  #briefing .hint { display: none; }
  #briefing button { margin-top: 10px; padding: 11px; }
}

/* ------------------------------------------------------------- Auswertung */

#result { display: flex; align-items: center; justify-content: center; }
#result .box {
  margin-top: max(64px, env(safe-area-inset-top));
  background: rgba(8, 13, 20, 0.93);
  border: 1px solid #33404e;
  border-radius: 12px;
  padding: 18px 22px;
  max-width: min(520px, 94vw);
  text-align: center;
}
#result h2 { letter-spacing: 0.08em; font-size: 20px; margin-bottom: 6px; }
#result h2.won { color: #58e08c; }
#result h2.lost { color: #ff5040; }
#result .stars { color: #ffd020; font-size: 24px; letter-spacing: 0.2em; }
#result .big { font-size: 26px; font-weight: 800; color: #e8f0f8; margin: 4px 0; }
#result p { margin: 4px 0; color: #9fb2c4; font-size: 13px; }
.btnrow { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.btnrow button {
  background: #16202c;
  border: 1px solid #3a4a5c;
  color: #cfdcea;
  padding: 11px 16px;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
}
.btnrow button.primary { background: #12506e; border-color: #2f88b4; }
/* Wo der Zwischenstand liegt, steht im Knopf — sonst muss man ihn druecken,
   um es zu erfahren. Eigene Zeile, nicht angehaengt: im Hochformat brach der
   Zusatz sonst mitten im Wert um ("900 m, / 11:09"). */
.btnrow button .sub {
  display: block;
  font-weight: 500;
  opacity: 0.72;
  font-size: 0.82em;
  margin-top: 2px;
  white-space: nowrap;
}

#fatal { background: #080b10; display: flex; align-items: center; justify-content: center; }
#fatal .box { max-width: 90vw; }
#fatal pre { text-align: left; color: #74879b; font-size: 11px; margin-top: 10px; white-space: pre-wrap; }

/* ---------------------------------------------------- Produktgefuehl-Zusaetze
 * Alles ab hier: reine Anhaengsel fuer Zelebration, Onboarding und Bedienung
 * — bestehende Regeln oben bleiben unberuehrt.
 */

/* Auftrag 1: Hinweis fuer den allerersten Start. Inline-Badge statt Pseudo-
   Element, damit ein negativer Offset nicht am `overflow:hidden` von .liste
   abgeschnitten wird. */
.start-tag {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: #1a1204;
  background: var(--messing);
  padding: 2px 6px;
  border-radius: 5px;
  vertical-align: middle;
}
.zeile.start-here { animation: lotsePulseRow 1.8s ease-in-out infinite; }
@keyframes lotsePulseRow {
  0%, 100% { box-shadow: inset 0 0 0 rgba(242, 180, 65, 0); }
  50% { box-shadow: inset 0 0 0 2px rgba(242, 180, 65, 0.55); }
}

/* Lautstaerkeregler im Menue, unterhalb des Reset-Knopfs. */
.volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 2px 0;
  color: var(--faint);
  font-size: 12px;
}
.volume-row label { flex: 0 0 auto; white-space: nowrap; }
.volume-row input[type="range"] {
  flex: 1 1 auto;
  accent-color: var(--messing);
  height: 28px;
}
.volume-row #volValue {
  flex: 0 0 auto;
  min-width: 3.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Einweisung beim ersten Auftrag (src/ui/tutorial.js).

   Sie liegt ueber dem Bild (und ueber den Ecktasten, 5) und unter dem Menue
   (52). Alle drei Zahlen gelten im selben Stapelkontext #ui — deshalb haengt
   die Flaeche dort und nicht als Body-Kind daneben. Die abgedunkelte Flaeche ist
   KEIN eigener Kasten, sondern der sehr weite Schlagschatten des Ausschnitts:
   so bleibt das gezeigte Bedienteil in seiner eigenen Farbe stehen, und es
   gibt keine Kante, die daneben sitzt. */
.tut {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: auto;
  touch-action: none;
}
.tut-loch {
  position: absolute;
  border-radius: 14px;
  border: 2px solid var(--messing);
  box-shadow: 0 0 0 9999px rgba(4, 8, 13, 0.74);
  pointer-events: none;
  transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.tut-loch.ohne-ziel { border-color: transparent; }
.tut-karte {
  position: absolute;
  width: min(340px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  border-radius: var(--rad);
  background: var(--glas-tief);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten);
}
.tut-zaehler {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.tut-zaehler b { color: var(--messing); font-weight: 700; }
.tut-zaehler i { font-style: normal; }
.tut-karte h3 {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.tut-karte p#tutText {
  font-size: 14px;
  line-height: 1.45;
  color: var(--dim);
}
.tut-knoepfe {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
/* Beide Knoepfe halten die 44 px Trefferhoehe — an Bord wird mit dem Daumen
   gedrueckt, nicht mit der Maus. */
.tut-knoepfe button {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: var(--rad-klein);
  font-size: 14px;
}
.tut-knoepfe #tutSkip { flex: 0 1 auto; padding-left: 14px; padding-right: 14px; }

/* Ergebnisbildschirm: Sterne einzeln mit Ease einblenden statt als fertiger
   Textblock zu stehen. */
#result .kicker {
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 4px;
}
#result .stars { font-size: 30px; letter-spacing: 0.22em; }
#result .stars .star { display: inline-block; }
#result .stars .star:not(.on) { color: rgba(255, 255, 255, 0.16); }
#result .stars .star.on {
  color: #ffd020;
  opacity: 0;
  animation: lotseStarPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes lotseStarPop {
  0% { opacity: 0; transform: scale(0.3) rotate(-16deg); }
  60% { opacity: 1; transform: scale(1.25) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* Drei Sterne: kurzer Glanzmoment um die Box, ein einzelner radialer Puls. */
#result .box.glow3 { position: relative; }
#result .box.glow3::before {
  content: "";
  position: absolute;
  inset: -44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 180, 65, 0.38), rgba(242, 180, 65, 0) 68%);
  animation: lotseGlowBurst 1.15s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes lotseGlowBurst {
  0% { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7); }
}
#result .progress {
  color: var(--messing);
  font-size: 13px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
#result .delta { color: var(--gut); font-weight: 700; }

/* Eigener Bestaetigungsdialog statt window.confirm(). */
.confirm-layer {
  z-index: 60;
  background: rgba(4, 7, 11, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.confirm-box {
  width: min(360px, 100%);
  background: var(--glas-tief);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten);
  border-radius: var(--rad);
  padding: 22px 20px;
  text-align: center;
}
.confirm-box h3 { font-size: 16px; letter-spacing: 0.02em; margin-bottom: 8px; color: var(--ink); }
.confirm-box p { color: var(--dim); font-size: 13px; line-height: 1.55; margin-bottom: 4px; }
.confirm-box .btnrow { margin-top: 16px; }

/* Kritiker-Fix: .corner (z-index:5) liegt sonst immer ueber #result (auto) —
   waehrend die Auswertung offen ist, blendet main.js die Iconspalte weg,
   sonst schneidet sie den Ergebnistext ab. */
.corner.result-open { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }

/* Sterne-Legende ueber der Auftragsliste (Startseite) */
.sterne-legende {
  margin: 10px 0 14px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(200, 212, 226, 0.62);
}
@media (max-width: 520px) { .sterne-legende { font-size: 11.5px; padding: 0 8px; } }

/* Konsolenwahl am Stoerungspult: zweite Pillenleiste unter den Ansichten.
 * Sie stand frueher am unteren Bildrand (bottom: 76px) — auf dem Telefon
 * hochkant blieb darueber genug Luft, aber im Querformat (iPad, ~390 px
 * Bildhoehe) frisst dieser Fixwert fast ein Drittel der Hoehe und liegt
 * genau ueber der untersten Bedienreihe des Pults: "beim Strom [...] weil da
 * das Umschalten zwischen den Pulten ist" (Levi 29.08.). Jetzt haengt sie
 * stattdessen UNTER der Ansichts-Pille — main.js misst deren wirkliche
 * Unterkante (`positioniereKonsolenLeiste()`) und setzt `top` von dort aus,
 * damit es auf jedem Geraet stimmt, nicht nur auf dem Screenshot ohne Notch.
 * Der Wert hier ist nur der Startzustand vor dem ersten Messen. */
.pult-tabs {
  top: 54px;
  bottom: auto;
}
.pult-tabs .tab { font-size: 11px; padding: 8px 12px; }

/* Modusauswahl im Menue: drei Karten, die WIRKUNG statt Schwierigkeitsgrad
   benennen. */
.modi {
  display: flex;
  gap: 8px;
  margin: 10px 0 4px;
}
.modi .modus {
  flex: 1;
  text-align: left;
  background: var(--glas);
  border: 1px solid var(--kante);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--ink);
  cursor: pointer;
}
.modi .modus b { display: block; font-size: 13px; letter-spacing: 0.06em; }
.modi .modus span { display: block; font-size: 11px; opacity: 0.65; margin-top: 3px; }
.modi .modus.on {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 560px) {
  .modi { flex-direction: column; }
  .modi .modus span { display: inline; margin-left: 6px; }
}

/* Fingerzeig auf der Konsolenleiste: die Konsole mit dem naechsten Griff
   pulsiert bernstein, solange sie nicht offen ist. */
@keyframes pult-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 176, 42, 0); } 50% { box-shadow: 0 0 0 3px rgba(255, 176, 42, 0.55); } }
.pult-tabs .tab.hint { animation: pult-hint 1.4s ease-in-out infinite; color: #ffb02a; }

/* Update-Hinweis (P1, Cache-Mischstand): erscheint, wenn ein Tab laenger
   offen war und inzwischen neu deployt wurde. Bewusst oben und auffaellig,
   aber NICHT modal — es blockiert kein Spiel, nur ein Tippziel, das
   location.reload() ausloest. Ueber allem anderen (z-index 60 ist bisher der
   Bestaetigungsdialog), sonst faellt es genau in dem Moment nicht auf, in
   dem es am wichtigsten ist. */
.update-banner {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  pointer-events: auto;
  display: block;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--glas-tief);
  border: 1px solid var(--messing);
  border-radius: var(--rad-klein);
  box-shadow: var(--schatten);
  padding: 9px 16px;
  cursor: pointer;
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
}
.update-banner:hover { background: rgba(20, 30, 40, 0.9); }

/* ------------------------------------------- Papieroptik: Blatt und Zettel
   Ergebnis, Bestaetigung, Ladeschirm und Einweisungskarte liegen seit dem
   Umbau auf Richtung A ueber einer HELLEN Szene — dunkles Glas stand dort
   wie ein Fremdkoerper. Sie bekommen dieselbe Papierflaeche wie das Menue,
   und zwar rein ueber CSS: Markup und Funktion bleiben, wie sie waren.

   Die Regeln stehen absichtlich am Ende der Datei. Die dunklen Fassungen
   weiter oben gehoeren zum HUD-Teil (BA3) und werden hier nur ueberschrieben,
   nicht entfernt — so bleibt in einer Datei nachlesbar, was war. */

/* ------------------------------------------------------ Ergebnis: Logbuch */
#result .box.formular {
  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--f-serif);
  border: 0;
  border-radius: var(--k-rad);
  box-shadow: var(--k-schatten);
  padding: clamp(14px, 2.4vmin, 26px);
  max-width: min(520px, 94vw);
  text-align: left;
}
#result .box.formular .kicker {
  font-family: var(--f-cond); color: var(--k-ink-soft);
  font-size: var(--fs-folio); letter-spacing: 0.16em;
  border-bottom: var(--l-haar); padding-bottom: 5px; margin-bottom: 8px;
}
#result .box.formular h2 {
  font-family: var(--f-serif); font-variant: small-caps; font-weight: 400;
  font-size: clamp(24px, 3.6vmin, 34px); letter-spacing: 0.02em; line-height: 1.05;
  margin-bottom: 4px;
}
#result .box.formular h2.won { color: var(--k-ink); }
#result .box.formular h2.lost { color: var(--k-magenta); }
/* Die Sterne sind ein Stempel, kein Leuchten. */
#result .box.formular .stars {
  display: inline-block; color: var(--k-magenta); font-size: 22px; letter-spacing: 0.18em;
  border: 2px solid var(--k-magenta); padding: 3px 9px 1px; transform: rotate(-5.5deg);
  margin: 6px 0 10px; opacity: 0.88;
}
#result .box.formular .stars .star:not(.on) { color: var(--k-rule); }
#result .box.formular .stars .star.on { color: var(--k-magenta); }
#result .box.formular .big {
  font-family: var(--f-mono); font-weight: 400; font-size: 22px; color: var(--k-ink);
}
/* Die Gruende stehen als linierte Zeilen, wie Eintraege in einem Buch. */
#result .box.formular p {
  font-family: var(--f-serif); color: var(--k-ink); font-size: 14px; line-height: 1.5;
  margin: 0;
}
#result .box.formular p.grund { border-bottom: var(--l-haar); padding: 5px 0 4px; }
#result .box.formular .progress {
  font-family: var(--f-mono); color: var(--k-ink-soft); font-size: 12px;
  margin-top: 9px; border-bottom: 0;
}
#result .box.formular .delta { color: var(--k-magenta); font-weight: 400; }
/* Der Glanzmoment bei drei Sternen wird zum Aufdruecken des Stempels. */
#result .box.formular.glow3::before { display: none; }
#result .box.formular.glow3 .stars {
  animation: lotseStempel 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lotseStempel {
  0% { opacity: 0; transform: rotate(-16deg) scale(1.6); }
  60% { opacity: 0.95; transform: rotate(-4deg) scale(0.94); }
  100% { opacity: 0.88; transform: rotate(-5.5deg) scale(1); }
}
#result .box.formular .btnrow { justify-content: flex-start; margin-top: 14px; }
.formular .btnrow button {
  background: none; border: var(--l-rahmen); border-radius: var(--k-rad);
  color: var(--k-ink); font-family: var(--f-cond); font-weight: 400;
  letter-spacing: 0.12em; font-size: 12px; padding: 11px 16px;
}
.formular .btnrow button.primary {
  background: var(--k-ink); border-color: var(--k-ink); color: var(--k-paper-hi);
}
.formular .btnrow button .sub {
  font-family: var(--f-mono); letter-spacing: 0; opacity: 0.8; font-size: 0.82em;
}

/* --------------------------------------- Bestaetigung, Ladeschirm, Karte */
.confirm-layer { background: rgba(16, 26, 31, 0.58); }
.confirm-box {
  background: var(--k-paper); color: var(--k-ink); font-family: var(--f-serif);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--k-schatten);
  border-radius: var(--k-rad);
  text-align: left;
}
.confirm-box h3 {
  font-family: var(--f-serif); font-variant: small-caps; font-weight: 400;
  font-size: 22px; letter-spacing: 0.02em; color: var(--k-ink);
  border-bottom: var(--l-haar); padding-bottom: 6px;
}
.confirm-box p { color: var(--k-ink); font-size: 14px; line-height: 1.5; }
.confirm-box .btnrow { justify-content: flex-end; }
.confirm-box .btnrow button {
  background: none; border: var(--l-rahmen); border-radius: var(--k-rad);
  color: var(--k-ink); font-family: var(--f-cond); font-weight: 400;
  letter-spacing: 0.12em; font-size: 12px; padding: 11px 16px;
}
.confirm-box .btnrow button.primary {
  background: var(--k-ink); border-color: var(--k-ink); color: var(--k-paper-hi);
}

#laden { background: rgba(16, 26, 31, 0.86); }
.laden-box {
  background: var(--k-paper); color: var(--k-ink);
  box-shadow: var(--k-schatten); padding: 22px 30px 20px;
}
.laden-ring { border-color: rgba(22, 48, 60, 0.16); border-top-color: var(--k-magenta); }
#laden p { font-family: var(--f-cond); color: var(--k-ink-soft); letter-spacing: 0.14em; }

.tut-karte {
  background: var(--k-paper); color: var(--k-ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: var(--k-rad); box-shadow: var(--k-schatten);
}
.tut-zaehler { font-family: var(--f-mono); color: var(--k-ink-soft); letter-spacing: 0.1em; }
.tut-zaehler b { color: var(--k-magenta); font-weight: 400; }
.tut-karte h3 {
  font-family: var(--f-serif); font-variant: small-caps; text-transform: none;
  font-weight: 400; font-size: 21px; letter-spacing: 0.02em; color: var(--k-ink);
}
.tut-karte p#tutText { font-family: var(--f-serif); color: var(--k-ink); font-size: 14.5px; }
.tut-karte .tut-knoepfe button.ghost {
  background: none; border: var(--l-rahmen); border-radius: var(--k-rad);
  color: var(--k-ink); font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.1em;
}
.tut-karte .tut-knoepfe button.primary {
  background: var(--k-ink); color: var(--k-paper-hi); border: 0; border-radius: var(--k-rad);
  font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.14em; box-shadow: none;
}

/* --------------------------------------------------- Untergang (R14/P3) ---
   F19-11: nach dem Verlust laeuft die Szene weiter. Was dabei stehen darf,
   darf die Szene nicht zudecken — also ein schmaler Slip an der Unterkante
   statt eines Blattes in der Mitte. Der Platz ist frei: das HUD wird ab dem
   Verlust nicht mehr gezeichnet (main.js frame()). */
#sinkSlip {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 6;                       /* ueber .corner (5), unter #result */
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px;
  background: rgba(8, 13, 20, 0.90);
  border: 1px solid #4a3038; border-left: 3px solid #ff5040;
  border-radius: 10px;
  max-width: min(680px, 94vw);
  font-family: var(--f-cond, inherit);
}
#sinkSlip .kopf {
  color: #ff5040; font-size: 12px; letter-spacing: 0.12em; font-weight: 800;
  white-space: nowrap;
}
#sinkSlip .txt { color: #c8d6e4; font-size: 12.5px; }
#sinkSlip .knoepfe { display: flex; gap: 8px; margin-left: auto; }
#sinkSlip button {
  background: #16202c; border: 1px solid #3a4a5c; color: #cfe0ef;
  border-radius: 7px; padding: 6px 12px; font-size: 12px; letter-spacing: 0.06em;
  cursor: pointer;
}
#sinkSlip button.primary { background: #1a6c93; border-color: #2a87b4; color: #eaf6ff; }
@media (max-height: 460px) {
  #sinkSlip { bottom: 10px; padding: 6px 10px; gap: 9px; }
  #sinkSlip .txt { font-size: 11px; }
  #sinkSlip button { padding: 4px 9px; }
}

/* Das volle Blatt nach einem Untergang steht SEITLICH, damit das Wrack
   daneben sichtbar bleibt (Levis Bild 55a: das Blatt stand genau davor).
   Die Kamera schiebt das Schiff dafuer in die linke Bildhaelfte —
   `blattVersatz` in main.js placeCamera(). */
#result.seitlich { justify-content: flex-end; align-items: center; }
#result.seitlich .box {
  margin-top: 0;
  margin-right: max(16px, env(safe-area-inset-right));
  max-width: min(400px, 46vw);
  max-height: 88vh; overflow-y: auto;
}
@media (max-height: 460px) {
  #result.seitlich .box { padding: 10px 14px; max-height: 94vh; }
  #result.seitlich h2 { font-size: 16px; margin-bottom: 3px; }
  #result.seitlich .big { font-size: 18px; margin: 2px 0; }
  #result.seitlich p { font-size: 11px; margin: 2px 0; }
  #result.seitlich .btnrow { margin-top: 8px; gap: 6px; }
}

/* Waehrend des Untergangs zaehlt der Slip, nicht die Meldungsleiste: der Kern
   meldet dort "MS ELBTAL has sunk.", waehrend das Schiff noch sinkt. */
body.sinkt .msg-strip { visibility: hidden; }