/* cockpit.css — das Bedienpult, Aussehen wörtlich aus HM30 übernommen.
 * ==========================================================================
 * Quelle: HM30/Simulations/core/sim.css, Abschnitte „Cockpit“, „Steuerrad“,
 * „Windscheibe“ und „Bugstrahlruder“. Die Regeln stehen hier so, wie sie dort
 * stehen — samt der Kommentare, die erklären, warum eine Zahl so ist. Wer sie
 * hier ändert, ändert sie NICHT in HM30; das bleibt ein eigenes Projekt und
 * wird gelesen, nicht angefasst.
 *
 * ⚠ NICHT die ganze sim.css übernommen (1313 Zeilen). Sie gestaltet auch
 *   Kopfzeile, Bedienpult rechts und Seitenaufbau von HM30 — und dort heißt
 *   `.pult` etwas anderes als hier. Übernommen ist genau der Streifen unten,
 *   um den es geht, plus was er braucht: die Farbtöne, der senkrechte Regler
 *   und der kleine Rückstellknopf.
 *
 * ⚠ EIN Unterschied zum Original, und er ist gewollt: Boote mit zwei Motoren
 *   (kat, 2prop) bekommen ZWEI Gashebel nebeneinander, links und rechts. In
 *   HM30 gibt es nur Einrumpfer, dort stellte sich die Frage nicht.
 * ========================================================================== */

:root {
  --ck-panel:  #14212c;
  --ck-panel2: #1b2b38;
  --ck-line:   #263a48;
  --ck-text:   #e3ecf2;
  --ck-muted:  #8ba1b0;
  --ck-akzent: #4fb8be;
  --ck-warn:   #ffb638;

  /* Luft um das Steuerrad, damit der Griff nicht am Ausschnitt hängenbleibt.
     Er sitzt AUF dem Kranz und ragt darüber hinaus, also braucht es sie auf
     allen Seiten: waagrecht bei hartem Ruder, oben bei mittschiffs.
     Muss größer sein als Punkthalbmesser (13) + Schatten (3) + Überstand. */
  --rad-luft: 20px;

  /* ⚠ EINE ZAHL FUER DEN GRIFF. Die Hoehe des Gasgriffs steht hier und
     nirgends sonst: Das CSS zeichnet ihn damit, und cockpit.js rechnet damit
     aus, wo die Kerben liegen (der Regler laeuft um eine halbe Griffhoehe
     eingerueckt). Standen die beiden Zahlen getrennt, lagen die Striche
     sichtbar neben dem Griff. */
  /* Der dunkle Grund der Cockpit-Kaesten. ⚠ EINE FARBE, ZWEI ORTE: der Block
     mit Rad und Anzeigen und die einzelnen Kaesten daneben. Zweimal getippt
     liefen sie beim ersten Nachjustieren auseinander. */
  --ck-platte: rgba(20, 33, 44, .93);
  --hebel-daumen: 26px;
  /* Wie hoch der Gashebel selbst ist. Genau darum ging der Umbau: Bei 84 px
     war ein Mausschritt fast ein Zehntel Gas.
     ⚠ 168 statt 210 (ein Fuenftel weniger): Bei voller Laenge reichte der
       Hebel so weit ins Bild, dass er zusammen mit den Kaesten daneben die
       Poller am Steg verdeckte - und was verdeckt ist, laesst sich nicht
       anklicken. 1,22 px je Rasterschritt sind immer noch feiner als die
       3,0 px von frueher. */
  --hebel-weg: 168px;
}

/* Senkrechter Regler: Chromium/WebKit über writing-mode, Firefox über das
   Attribut orient="vertical". direction:rtl legt das Maximum nach oben. */
input[type=range].vertikal {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 10px;
  height: 84px;              /* genau so hoch wie Wind- und Bugstrahlscheibe */
  margin: 0;
  padding: 0;
  accent-color: var(--ck-akzent);
  cursor: ns-resize;
}

/* ======================= DER GASHEBEL ===================================
   Kein Regler von der Stange mehr, sondern ein Maschinentelegraf: eine tiefe
   Nut im Wasser und ein dunkler Griff darin, der Licht von oben faengt.

   ⚠ DER GRIFF WIRD SELBST GEZEICHNET (appearance:none). Der runde Punkt, den
     der Browser mitbringt, war zwei Dinge zugleich zu wenig: zu klein zum
     Greifen und zu rund fuer einen Gashebel. Ein Rechteck sagt ausserdem,
     wo genau der Wert steht - ein Punkt hat keine Kante.
   ⚠ SENKRECHT UEBER writing-mode, nicht ueber -webkit-appearance:
     slider-vertical. Das alte Schluesselwort laesst den Griff nicht gestalten
     (und ist in neuen Chromium-Fassungen ohnehin weg). Es steht weiter als
     Rueckfall fuer Firefox daneben (orient="vertical").
   ⚠ DIE NUT IST EIN EIGENES ELEMENT, nicht der Track des Reglers. So sieht
     sie in jedem Browser gleich aus, und der Regler daraufliegt durchsichtig
     - er ist nur noch Bedienung, keine Grafik.
   ===================================================================== */
.hebel-huelle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hebel-weg);
}

/* Die Nut: dunkel und eingesenkt, mit einem hellen Mittelstrich als Boden. */
.hebel-schacht {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #0a1219 0%, #16232e 45%, #0d1720 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .8),
    inset 2px 0 3px rgba(0, 0, 0, .75),
    inset -1px 0 2px rgba(255, 255, 255, .06),
    0 1px 0 rgba(255, 255, 255, .07);
  pointer-events: none;
}

.gashebel {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 44px;               /* so breit wie der Griff: ueberall greifbar */
  height: var(--hebel-weg);
  margin: 0;
  padding: 0;
  cursor: grab;
}
.gashebel:active { cursor: grabbing; }
.gashebel::-webkit-slider-runnable-track { background: transparent; border: none; }
.gashebel::-moz-range-track { background: transparent; border: none; }

/* Der Griff: dunkelgraues Rechteck, Licht von oben, Schatten nach unten -
   dazu drei eingefraeste Rillen als Griffflaeche, wie am echten Hebel. */
.gashebel::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: var(--hebel-daumen);
  border-radius: 4px;
  border: 1px solid #05090d;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.18) 1px 2px, transparent 2px 6px)
      50% 50% / 26px 12px no-repeat,
    linear-gradient(180deg, #5a6773 0%, #3b4652 18%, #222c36 55%, #161e27 82%, #2b3742 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 2px 5px rgba(0, 0, 0, .55);
}
.gashebel::-moz-range-thumb {
  width: 44px;
  height: var(--hebel-daumen);
  border-radius: 4px;
  border: 1px solid #05090d;
  background: linear-gradient(180deg, #5a6773 0%, #3b4652 18%, #222c36 55%, #161e27 82%, #2b3742 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 2px 5px rgba(0, 0, 0, .55);
}
.gashebel:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ck-akzent); outline-offset: 1px; }

/* ---- Kerben am Gashebel: die Ruderfahrt ------------------------------
   Zwei Striche - voraus und zurueck -, an denen der Gang einrastet. Sie
   liegen NEBEN dem Regler und nicht darin: Das Innenleben eines
   input[type=range] gehoert dem Browser, und ein Pseudoelement darauf saehe
   in jedem anders aus.
   ⚠ SIE MUESSEN BREITER SEIN ALS DER GRIFF, sonst verschwinden sie darunter,
     sobald der Hebel daraufsteht - und genau dann will man sie sehen. */
.hebel-kerbe {
  position: absolute;
  left: -9px;
  right: -9px;
  height: 2px;
  border-radius: 1px;
  background: var(--ck-akzent);
  box-shadow: 0 0 4px rgba(0, 0, 0, .8);
  opacity: .95;
  pointer-events: none;      /* nie im Weg beim Ziehen */
}
.hebel-kerbe[hidden] { display: none; }

/* ---- Der Leerlauf als Fläche ----------------------------------------
   Zwischen den beiden Kerben ist der Gang draußen. Zwei einsame Striche
   sagten nur, WO es klickt; die Fläche sagt, WAS dazwischen liegt - ein
   Bereich, in dem nichts einzustellen ist.
   ⚠ NUR DURCHSCHEINEND. Der Hebel läuft mitten hindurch; deckend verschluckte
     die Fläche den Griff. Die Ränder sind die Kerben selbst - deshalb steht
     hier kein eigener Rahmen, sonst lägen zwei Striche übereinander. */
.hebel-leerlauf {
  position: absolute;
  left: -9px;
  right: -9px;
  background: rgba(79, 184, 190, .16);   /* --ck-akzent, durchscheinend */
  pointer-events: none;
}
.hebel-leerlauf[hidden] { display: none; }

/* Kleiner Rückstell-Knopf neben einem Wert im Cockpit. */
.null-knopf {
  flex: 0 0 auto;
  width: 22px;
  height: 20px;
  padding: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ck-muted);
  background: var(--ck-panel2);
  border: 1px solid var(--ck-line);
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}
.null-knopf:hover { color: var(--ck-text); border-color: var(--ck-muted); }
.null-knopf:active { background: var(--ck-line); }
.null-knopf:focus-visible { outline: 2px solid var(--ck-akzent); outline-offset: 1px; }

/* ---------- Cockpit ----------
   Liegt eingeblendet über dem Wasser am unteren Bühnenrand.
   Bedient wird hier. */
.cockpit {
  position: absolute;
  /* Linksbündig, nicht mittig: so steht das Steuerrad immer an derselben
     Stelle der Bühne. Mittig wäre es bei jeder anderen Breite woanders.
     ⚠ ABER NEBEN DER WERKZEUGLEISTE, nicht darunter. Bei left:14px lagen die
       Knoepfe links (Leinen, Regler, Marinen) auf dem Steuerrad - man griff
       ins Menue statt ans Rad. Die Leiste ist 56 px breit und sitzt 10 px vom
       Rand; mit zoom:var(--ui) schrumpft beides mit, deshalb steht der Faktor
       auch hier. 10 px Luft dazwischen. */
  left: calc(66px * var(--ui, 1) + 10px);
  /* ⚠ DICHT AN DEN RAND. 14 px liessen unten einen Streifen Wasser stehen, den
     niemand braucht - die Hoehe fehlt oben, wo die Marina ist. 6 px reichen,
     damit die Leiste nicht am Rand klebt.
     env(safe-area-inset-bottom) fuer Telefone mit Hausbalken: Dort ist der
     Rand nicht der Rand. */
  bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 2;
  width: max-content;
  /* Rechts derselbe Rand wie links am Bildschirm - die Breite ergibt sich aus
     dem, was der Anfang uebriglaesst. */
  max-width: calc(100% - (66px * var(--ui, 1) + 10px) - 14px);
  display: flex;
  /* ⚠ KEIN EIGENER HINTERGRUND MEHR. Die Leiste ist nur noch die Reihe; den
     dunklen Kasten tragen die BLOECKE (.ck-block). Dazwischen steht der
     Gashebel frei ueber dem Wasser - er braucht die Hoehe, und ein Kasten um
     ihn herum haette sie gekostet.
   ⚠ flex-end statt stretch: Die Bloecke sind verschieden hoch (links Rad und
     Anzeigen, rechts eine Reihe Kaesten). Sie stehen auf EINER Linie unten,
     nicht auf gleicher Hoehe - sonst zoege sich der rechte Kasten auf die
     Hoehe des Rades auf und waere innen leer. */
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  line-height: normal;
  /* Als Ganzes skalierbar — app.js setzt --ck-skala, wenn die Bühne zu
     niedrig für die volle Leiste ist. Ursprung links unten: die Leiste bleibt
     in ihrer Ecke stehen und das Steuerrad geht mit. */
  transform-origin: left bottom;
  /* ⚠ ZWEI FAKTOREN, EINE SKALIERUNG. --ck-skala kommt aus cockpit.js und
     passt die Leiste in eine niedrige Buehne; --ui ist die Bediengroesse des
     Geraets. Beide multiplizieren sich - deshalb rechnet einpassen() den
     zweiten mit ein, sonst verkleinerte es ein zweites Mal.
     ⚠ HIER transform statt zoom, anders als bei den Nachbarn: Der Ursprung
       links unten ist der Punkt, an dem die Leiste steht - mit zoom liesse er
       sich nicht festhalten, und cockpit.js rechnet ohnehin mit dieser Zahl. */
  /* ⚠ ERST SCHIEBEN, DANN SKALIEREN. In dieser Reihenfolge ist das Wegklappen
     um 120 % der eigenen Hoehe vom Zoom unabhaengig - andersherum faehre die
     Leiste bei kleinem --ui nicht weit genug und bliebe halb im Bild. */
  transform: translateY(var(--ck-weg, 0)) scale(calc(var(--ck-skala, 1) * var(--ui, 1)));
  transition: transform .22s ease;
}
/* Weggeklappt: das Cockpit faehrt nach unten aus dem Bild. Es bleibt bedienbar
   im DOM (Tastatur, Werte), nur eben unsichtbar - und gibt den Steg frei. */
/* ⚠ AUCH DIE KINDER, nicht nur die Huelle. Die Kaesten schalten
   pointer-events wieder auf auto (siehe "Luecken sind durchlaessig") - und
   das ist spezifischer als eine Regel nur an .cockpit. Weggeklappt fingen sie
   dadurch waehrend des Wegfahrens weiter Klicks ab. */
body.ck-zu .cockpit,
body.ck-zu .cockpit * {
  pointer-events: none;
}
body.ck-zu .cockpit { --ck-weg: 120%; }
.cockpit[hidden] { display: none !important; }

/* ================================ LUECKEN SIND DURCHLAESSIG ==============
   Das Cockpit ist eine Reihe aus drei Gruppen mit Abstand dazwischen - und
   sein eigener Kasten spannt sich ueber alles, auch ueber die Luecken. Ohne
   Hintergrund sieht man dort das Wasser, aber jeder Klick blieb an der
   unsichtbaren Huelle haengen.

   ⚠ GEMESSEN, NICHT VERMUTET: In der Marina "2 Heckleinen" waren 21 von 58
     Dingen nicht anklickbar; groesster Einzelposten war div#cockpit mit
     6 Stueck - Poller, die frei im Bild lagen. Der Gashebel war es nicht.
   ⚠ DIE HUELLEN AUS, DIE KAESTEN AN. pointer-events:none vererbt sich, wird
     aber von den Kindern wieder eingeschaltet. Wer hier eine Gruppe ergaenzt,
     muss sie in die zweite Liste aufnehmen - sonst ist sie unbedienbar.
   ⚠ .rad-halb BLEIBT AN: Der Ausschnitt ist so gross wie das Rad darin, und
     am Rad wird gezogen. Dort ist nichts zu gewinnen.
   ⚠ AUCH DIE GASSAEULE IST EINE HUELLE. Sie ist so breit wie ihr breitestes
     Kind - die Drehzahlanzeige mit Ruecksteller, gut 110 px - und so hoch wie
     der Hebelweg. Der Hebel selbst ist 44 px breit; links und rechts davon lag
     also ein hoher, leerer Streifen, der jeden Klick abfing. Genau dort
     verschwanden die Poller am Steg (gemeldet, dann gemessen). Anklickbar
     bleiben der Hebel (.hebel-huelle), die Anzeige darunter (.gas-fuss) und
     das Kettenglied zwischen zwei Hebeln.
   ===================================================================== */
.cockpit,
.cockpit .ck-block,
.cockpit .gaspult,
.cockpit .gas-saeule,
.cockpit .gas-paar,
.cockpit .gas-eine { pointer-events: none; }

.cockpit .ck-block-rad,
.cockpit .ck-feld,
.cockpit .hebel-huelle,
.cockpit .gas-fuss,
.cockpit .koppel-glied { pointer-events: auto; }

/* ---------- Block: der dunkle Kasten ----------
   Zwei davon: links Steuerrad und Anzeigen (was man ANSIEHT), rechts Wind,
   Bugstrahl und Ansicht (was man STELLT). Dazwischen der Gashebel ohne
   Kasten. Vorher war alles eine einzige lange Leiste. */
/* ⚠ NUR DER LINKE BLOCK HAT EINEN KASTEN. Rad und Anzeigen sind ein Geraet
   und gehoeren zusammengefasst; Wind, Bugstrahl und Ansicht sind drei
   einzelne Kaesten, die ihren eigenen Rahmen schon mitbringen. Ein zweiter
   dunkler Grund darum herum war eine Huelle um lauter Huellen - und auf einem
   kurzen Schirm kostete sie oben und unten je ein Dutzend Pixel, die der
   Marina fehlten. */
.ck-block {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
/* Der linke Block traegt Rad und Anzeigen - und als einziger den Kasten. */
.ck-block-rad {
  position: relative;
  padding: 9px 12px 11px;
  background: var(--ck-platte);
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}

/* ⚠ JEDER KASTEN SEIN EIGENER GRUND, statt einer Huelle um alle drei. Ohne
   Grund standen Wind, Bugstrahl und Ansicht direkt auf dem Wasser und waren
   nicht mehr zu lesen - graue Schrift auf hellem Steg. Mit einer gemeinsamen
   Huelle waere der Platz zurueck, den der Umbau gerade gespart hat: Sie
   kostete oben und unten je ein Dutzend Pixel. So bekommt jeder Kasten
   genau den Grund, den er braucht, und die Luecken dazwischen bleiben frei. */
.ck-block:not(.ck-block-rad) > .ck-feld {
  background: var(--ck-platte);
  border-color: var(--ck-line);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}

/* ---------- Der Gashebel, frei ueber dem Wasser ----------
   Kein Kasten, kein Hintergrund. Nur Beschriftung, Hebel, Anzeige - und die
   brauchen einen Schatten, damit sie ueber hellem Wasser lesbar bleiben. */
.gaspult {
  display: flex;
  align-items: flex-end;
  /* ⚠ UNTEN KEIN POLSTER. Die 11 px hoben die Drehzahlanzeige gegenueber den
     Kaesten links und rechts an - drei Unterkanten auf drei Hoehen. Ohne sie
     steht die Anzeige in derselben Flucht wie Rad-Block und Windkasten. */
  padding: 0 6px 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .7);
}
.gas-saeule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gas-saeule[hidden] { display: none !important; }
.gas-kopf {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ck-text);
  line-height: 14px;
}
.gas-fuss {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 17px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ck-text);
  white-space: nowrap;
}
/* ⚠ EIN KLEINER GRAUER GRUND. Ohne Kasten stand die Drehzahl direkt auf dem
   Wasser - ueber hellem Grund war sie kaum zu lesen, und der Textschatten
   allein reichte nicht. Ein schmales Feld genuegt; es soll die Sicht auf die
   Marina nicht mehr verstellen als noetig. */
.gas-fuss output {
  display: inline-block;
  width: 82px;
  text-align: center;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(24, 36, 47, .82);
  border: 1px solid rgba(255, 255, 255, .10);
  text-shadow: none;
}
.gas-fuss output + output { color: var(--ck-muted); }
.gas-paar { display: flex; gap: 22px; }
.gas-eine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gas-eine .ck-seite {
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--ck-text);
}

/* Je Bedienelement ein eigener Kasten mit Überschrift. Das ordnet die
   Leiste: benannte Gruppen statt einer Reihe loser Dinge. */
.ck-feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 7px;
  min-height: 118px;
  min-width: 96px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
}
.ck-feld[hidden] { display: none !important; }

.ck-kopf {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ck-muted);
  line-height: 14px;
}

/* Nimmt die Resthöhe ein und stellt den Inhalt mittig — dadurch stehen die
   Bedienelemente auf einer Linie, egal wie hoch ihr Kasten ausfällt. */
.ck-inhalt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Der Wert steht UNTER seinem Bedienelement, nicht in einer Sammelspalte:
   Direkt darunter ist der Bezug ohne Beschriftung klar. */
.ck-fuss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 17px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ck-text);
  white-space: nowrap;
}
/* FESTE Breiten. Ohne sie wächst der Kasten mit dem Text — von „0 %“ auf
   „+25 %“ sind zwei Zeichen mehr, und die ganze Leiste ruckt beim Schieben.
   tabular-nums hält nur die ZIFFERN gleich breit, nicht die Zeichenzahl. */
.ck-fuss output { display: inline-block; text-align: center; }
/* Die Gasanzeige steht nicht mehr hier, sondern frei am Hebel - ihre Breite
   deshalb bei .gas-fuss output. Zwei Regeln fuer dieselbe Zahl waeren genau
   die Falle, die dieses Projekt schon mehrfach gestellt hat. */
#windRichtungWert { width: 34px; }
#windStaerkeWert  { width: 40px; }
#bugWert          { width: 42px; }
.ck-fuss output + output { color: var(--ck-muted); }

/* ---- Zwei Gashebel ----
   Nur bei kat und 2prop: dort bringt das Kraftmodell eine zweite Kraft am
   rechten Motor auf (boatKatBase.as Z. 355, Boat_2Propeller.as Z. 508).
   Die beiden Hebel stehen NEBENEINANDER, nicht in zwei Saeulen: Sie gehoeren
   zusammen, und man stellt sie im Wechsel.
   ⚠ GESTALTET WIRD DAS BEI .gas-paar / .gas-eine weiter oben; hier stand
     frueher .ck-doppel/.ck-hebel fuer die Fassung im Kasten. */
/* ---- Das Kettenglied zwischen den beiden Gashebeln ----
   Gekoppelt ist der Normalfall: geradeaus zieht man beide gemeinsam. Zum
   Drehen auf der Stelle - einen vor, einen zurueck - haengt man sie aus.

   ⚠ ES STEHT ZWISCHEN DEN HEBELN, nicht als Kaestchen mit dem Wort
     "gekoppelt" darunter. Was es koppelt, sind genau die beiden Dinge links
     und rechts davon; an dieser Stelle braucht es keine Erklaerung mehr.
   ⚠ ES BLEIBT EIN KONTROLLKAESTCHEN. cockpit.js liest .checked - haetten wir
     einen Knopf daraus gemacht, waere aus einer Zeile Anzeige eine zweite
     Bedienlogik geworden. Verborgen wird nur das Kaestchen selbst; Fokus und
     Tastatur bleiben.
   ⚠ AUSGEHAENGT WIRD DURCHGESTRICHEN, nicht bloss blass. Blass allein liest
     sich wie "abgeblendet", nicht wie "offen". */
.koppel-glied {
  position: relative;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(20, 33, 44, .85);
  border: 1px solid var(--ck-line);
  cursor: pointer;
  flex: 0 0 auto;
}
.koppel-glied:hover { border-color: var(--ck-akzent); }
/* Das Kaestchen selbst ist weg, aber bedienbar: kein display:none, sonst
   verschwaende es auch fuer Tastatur und Vorlesegeraet. */
.koppel-glied input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.koppel-zeichen {
  font-size: 13px;
  line-height: 1;
  filter: grayscale(1) brightness(1.7);
  pointer-events: none;
}
.koppel-glied input:checked ~ .koppel-zeichen {
  filter: none;
}
/* Offen: durchgestrichen. */
.koppel-glied input:not(:checked) ~ .koppel-zeichen { opacity: .5; }
.koppel-glied input:not(:checked) ~ .koppel-zeichen::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 50%;
  height: 1.5px;
  background: var(--ck-warn);
  transform: rotate(-38deg);
  border-radius: 1px;
}
.koppel-glied input:focus-visible ~ .koppel-zeichen {
  outline: 2px solid var(--ck-akzent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Werkzeugleiste links ----------
   Senkrecht am Rand, über dem Wasser. Sie steht LINKS OBEN, nicht unten:
   dort liegt das Steuerrad, und zwei Dinge übereinander in derselben Ecke
   sind eine Ecke zu viel. */
.werkzeugleiste {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  /* ⚠ GERECHNET, NICHT GETIPPT: direkt unter dem Startknopf. Waechst der
     Knopf, wandert die Leiste mit - vorher stand hier eine feste Zahl, und
     beim Vergroessern haette der Knopf die Leiste ueberdeckt.
     ⚠ DERSELBE ABSTAND UNTER DEM KNOPF WIE UEBER IHM, und zwar aus DERSELBEN
     Groesse. Hier stand einmal ein eigenes --leiste-lueck mit 6 px neben den
     8 px darueber: Die Icons sassen dichter am Knopf als der Knopf an der
     schwarzen Leiste, und die Spalte wirkte nach oben verrutscht. Zwei Zahlen
     fuer denselben Abstand laufen frueher oder spaeter auseinander - deshalb
     zweimal --spiel-oben statt einer zweiten Groesse. */
  top: calc(var(--leiste-h) + var(--spiel-oben) + var(--spiel-gross) + var(--spiel-oben));
  transition: top .22s ease;
  z-index: 3;
  display: flex;
  flex-direction: column;
  /* ⚠ 4 STATT 6 px. Acht Knoepfe uebereinander: Jeder Abstand zaehlt achtmal,
     und die Leiste stiess unten an. Enger als 4 px verschmelzen die Kaesten
     optisch zu einer Saeule. */
  gap: 4px;
  /* ⚠ ZWEI FAKTOREN, EIN ZOOM. --ui ist die Bediengroesse des Geraets (siehe
     app.css), --wz-skala kommt aus werkzeugEinpassen() in app.js und greift
     nur, wenn die Leiste sonst unten hinausliefe. Getrennt, weil sie
     verschiedene Fragen beantworten: "wie gross soll es sein" und "wie viel
     Platz ist da". */
  zoom: calc(var(--ui, 1) * var(--wz-skala, 1));
  /* Hoehengrenze setzt werkzeugEinpassen() in app.js; ohne sie ist die Leiste
     so hoch wie ihr Inhalt. Rollbar nur im Notfall - passt alles, gibt es
     nichts zu rollen. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.wz-knopf {
  width: 56px;
  /* ⚠ ENGER (war 6px 2px 5px). Dieselbe Rechnung wie beim gap: was hier
     wegfaellt, faellt achtmal weg. */
  padding: 4px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: rgba(20, 33, 44, .93);
  color: var(--ck-text);
  font: 600 9.5px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
/* ⚠ MUSS SEIN, und zwar mit !important. .wz-knopf setzt display:flex, und
   das schlaegt die Vorgabe des hidden-Attributs (display:none) - der Knopf
   blieb dadurch sichtbar, obwohl app.js ihn ausgeblendet hatte. Genau so ist
   das Objekte-Icon waehrend der Fahrt stehengeblieben. */
.wz-knopf[hidden] { display: none !important; }
.wz-knopf:hover { border-color: var(--ck-akzent); }
.wz-knopf[aria-pressed="true"] { background: var(--ck-akzent); border-color: var(--ck-akzent); color: #06222a; }
/* ⚠ NOTLAGE: NUR NOCH BILDER. Gesetzt von werkzeugEinpassen() in app.js, wenn
   die Leiste selbst gestaucht nicht mehr auf die Buehne passt. Der Name steht
   weiter im title - ein Knopf ohne Wort ist bedienbar, ein abgeschnittener
   nicht. */
.werkzeugleiste.wz-eng .wz-text { display: none; }
.werkzeugleiste.wz-eng .wz-knopf { gap: 0; padding: 5px 2px; }

.wz-bild { display: flex; align-items: center; justify-content: center; height: 26px; }
.wz-bild img { height: 24px; width: auto; display: block; }

/* ---------- Fenster ----------
   Schwebt über der Bühne, links neben der Werkzeugleiste. Bewusst schmal:
   Es zeigt ein Boot von oben, mehr braucht es nicht. */
.fenster {
  position: absolute;
  left: calc(max(10px, env(safe-area-inset-left)) + 66px);
  top: 46px;
  z-index: 4;
  width: 236px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: rgba(20, 33, 44, .97);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  color: var(--ck-text);
  font: 12px/1.5 "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
/* ⚠ NUR SO HOCH, DASS DAS COCKPIT FREI BLEIBT. Die Fenster stehen oben links
   und wuchsen mit ihrem Inhalt nach unten - der Objektkatalog deckte damit
   Gashebel, Rad und Anzeigen zu, also genau die Bedienung, die man beim Bauen
   nebenher braucht. Jede Liste hatte zwar eine eigene Obergrenze (56vh, 64vh),
   aber vh ist die BILDSCHIRMHOEHE und weiss nichts vom Cockpit.
   --ck-hoehe kommt aus einpassen() in cockpit.js und ist die gemessene Hoehe
   des Cockpits samt Rad; 100 % ist die Buehne (.buehne-feld ist fixed und
   damit der Bezug), 46 px der Abstand nach oben (top), 14 px Luft dazwischen.
   ⚠ EINE UNTERGRENZE MUSS SEIN: Auf einem Telefon quer belegt das Cockpit
     45 % der Buehne - ohne max() bliebe fuer das Fenster fast nichts, und
     eine leere Liste ist schlimmer als eine kurze mit Rollbalken.
     110 px = Kopfzeile, eine Zeile Inhalt, Fuss. Weil das Cockpit hoechstens
     45 % der Buehne belegt (siehe einpassen), bleiben rechnerisch
     0,55 x Buehne - 58 px uebrig; die Untergrenze greift also erst unter rund
     305 px Buehnenhoehe - darunter deckt das Fenster wieder ein Stueck ab.
     Gemessen: 776 px Buehne -> 477 px Fenster, 356 px Buehne -> 140 px. */
.fenster { max-height: max(110px, calc(100% - 46px - var(--ck-hoehe, 240px) - 12px)); }
/* Weggeklapptes Cockpit (Knopf in der Werkzeugleiste) = kein Platzbedarf.
   ⚠ Am body, nicht an :root: So gewinnt der Wert gegen die Zuweisung aus
     cockpit.js, die an :root haengt - der naehere Vorfahr vererbt. */
body.ck-zu { --ck-hoehe: 0px; }
/* ⚠ AUSNAHME FENDERFENSTER. Darin steckt eine Leinwand mit fester Hoehe
   (#fenderBuehne, 320 px); wird sie gestaucht, verzerrt das Bild des Bootes.
   Das Fenster ist ohnehin kurz und deckt nichts zu. */
#fensterFender { max-height: none; }
.fenster[hidden] { display: none !important; }
.fenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  background: rgba(255, 255, 255, .07);
  border-bottom: 1px solid var(--ck-line);
  font-weight: 600;
}
.fenster-zu {
  width: 22px; height: 20px;
  padding: 0;
  border: 1px solid var(--ck-line);
  border-radius: 3px;
  background: var(--ck-panel2);
  color: var(--ck-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.fenster-zu:hover { color: var(--ck-text); border-color: var(--ck-muted); }
/* ⚠ Feste Höhe, nicht aus dem Inhalt: Eine Leinwand ohne Höhe ist null hoch,
   und das Boot wäre unsichtbar. */
#fenderBuehne { display: block; width: 100%; height: 320px; cursor: pointer; }
.fenster-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--ck-line);
  font-variant-numeric: tabular-nums;
  color: var(--ck-muted);
}
/* ---------- Objektkatalog ----------
   Breiter als das Fenderfenster: Drei Kacheln nebeneinander sind die Grenze,
   ab der man ein Gitter als Gitter liest und nicht als Liste.

   ⚠ Hoehe begrenzt und scrollbar, NICHT aus dem Inhalt. Es kommen weitere
     Objekte dazu; ein Fenster, das mit dem Katalog waechst, haengt irgendwann
     unten aus dem Bild und die letzte Reihe ist unerreichbar. */
.fenster-breit { width: 274px; }
.objekt-gitter {
  max-height: min(64vh, 560px);
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
/* ⚠ WIE DIE UEBRIGEN GRUPPENUEBERSCHRIFTEN im Pult (.anzeigePult h2):
   dunkles Tuerkis, weisse Schrift. Sie standen hier als blasse Kleinschrift
   und gingen zwischen den Kacheln unter - in einem Gitter aus lauter Bildern
   braucht eine Ueberschrift mehr Gewicht, nicht weniger. */
.objekt-kopf {
  margin: 10px 0 5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #0f5f6b;
  color: #fff;
  font: 700 10px/1.4 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- Filter nach Kategorie ------------------------------------------- */
.objekt-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}
.objekt-filter:empty { display: none; }
.objekt-filter button {
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--ck-text);
  font: 600 10px/1.5 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.objekt-filter button:hover { background: rgba(255, 255, 255, .12); }
/* Der gewaehlte Knopf traegt dasselbe Tuerkis wie die Ueberschriften - so
   sieht man auf einen Blick, welcher Abschnitt gerade uebrig ist. */
.objekt-filter button.an {
  background: #0f5f6b;
  border-color: #14808f;
  color: #fff;
}
.objekt-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.objekt-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px 5px;
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: var(--ck-text);
  cursor: grab;
  /* ⚠ Ohne touch-action scrollt das iPad die Seite, statt das Objekt zu
     ziehen — der Finger gehoert hier dem Zug, nicht dem Rollbalken. */
  touch-action: none;
}
.objekt-kachel:hover { border-color: var(--ck-akzent); background: rgba(255, 255, 255, .08); }
.objekt-kachel.zieht { opacity: .45; cursor: grabbing; }

/* Die Marina wird GEKLICKT, nicht gezogen — es gibt genau eine, und sie füllt
   die Welt. Deshalb der gewöhnliche Zeigefinger statt der Greifhand, und
   touch-action zurück auf normal: Hier soll der Finger die Liste rollen
   dürfen, weil er nichts herauszieht. */
.objekt-marina { cursor: pointer; touch-action: auto; }
.objekt-kachel.an {
  border-color: var(--ck-akzent);
  background: rgba(46, 155, 214, .22);
  box-shadow: inset 0 0 0 1px var(--ck-akzent);
}
.objekt-kachel.an .objekt-name { color: var(--ck-text); }
.objekt-bild { display: block; pointer-events: none; }
.objekt-name {
  font: 500 9px/1.15 "Segoe UI", system-ui, sans-serif;
  text-align: center;
  color: var(--ck-muted);
  /* Zwei Zeilen, dann Schluss — "Poller am Steg" passt, ein laengerer Name
     wird gekuerzt statt die Kachelreihe auseinanderzuziehen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}
.objekt-leer { margin: 10px 4px; color: var(--ck-muted); }

/* ---------- Leinen ----------
   Eine Zeile je Festmacher: Name, Schalter, Länge. Jede für sich, weil jede
   für sich bedient wird. */
/* min-height: 0 - sonst schrumpft die Liste in der Flex-Spalte nicht
   unter ihren Inhalt und die Hoehengrenze des Fensters greift nicht. */
.leinen-liste { max-height: min(56vh, 480px); min-height: 0; overflow-y: auto; padding: 6px 8px; }

/* Parameterfenster - dieselbe Hoehenbegrenzung wie die anderen Listen: Es
   kommen je nach Boot bis zu einem Dutzend Regler, und ein Fenster, das mit
   ihnen waechst, haengt unten aus dem Bild. */
/* ⚠ KUERZER ALS DIE UEBRIGEN LISTEN (60vh/520px stand hier). Das Fenster
   sitzt oben links, und darunter liegt das Steuerrad - bei voller Hoehe
   ueberdeckte es das Rad, das man beim Abstimmen ja gerade bedient. Der
   Inhalt scrollt ohnehin, es geht also nichts verloren. */
.paramInhalt { max-height: min(42vh, 360px); min-height: 0; overflow-y: auto; padding: 2px 10px 6px; }
.leinen-leer { margin: 8px 2px; color: var(--ck-muted); line-height: 1.45; }
.leine {
  margin-bottom: 6px;
  padding: 6px 7px;
  border: 1px solid var(--ck-line);
  border-left: 3px solid var(--ck-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
}
/* ⚠ Die liegende Leine wird am linken Rand GELB markiert — dieselbe Farbe,
   in der sie auf der Bühne gezeichnet wird. So gehört Liste und Bild
   sichtbar zusammen, ohne dass irgendwo „belegt" steht. */
.leine.liegt { border-left-color: #ffe14d; background: rgba(255, 225, 77, .09); }
.leine-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.leine-name { font-weight: 600; font-variant-numeric: tabular-nums; }
.leine-schalter {
  padding: 2px 8px;
  border: 1px solid var(--ck-line);
  border-radius: 4px;
  background: var(--ck-panel2);
  color: var(--ck-text);
  font: 600 10.5px/1.5 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.leine-schalter:hover { border-color: var(--ck-akzent); }
.leine-schalter.an { background: #ffe14d; border-color: #ffe14d; color: #2a2400; }
.leine-reihe { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.leine-wie {
  flex: 1;
  text-align: right;
  font-size: 10.5px;
  color: var(--ck-muted);
}
/* Straff heisst: diese Leine haelt gerade. Das ist die Auskunft, wegen der
   die Zeile ueberhaupt da steht - sie wird hervorgehoben. */
.leine-wie.straff { color: #ffe14d; font-weight: 600; }

/* Ein Regler mit Beschriftung im Anzeige-Pult - dieselbe Zeilenform wie die
   Haken darueber, damit er nicht wie ein Fremdkoerper wirkt. */
.zeileRegler {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 12px;
}
.zeileRegler > span { flex: 0 0 auto; }
.zeileRegler input[type="range"] { flex: 1; min-width: 40px; accent-color: var(--ck-akzent); }
.zeileRegler output { flex: 0 0 auto; min-width: 42px; text-align: right; color: var(--ck-muted); }
.leine-wert { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ck-muted); }
.leine-weg { width: auto; padding: 0 6px; }
.leine-notiz { margin: 4px 0 0; font-size: 10.5px; color: var(--ck-muted); }
/* Zwei Knoepfe nebeneinander im Fuss - die Arten der Leine. */
.leine-arten { display: flex; gap: 5px; }
.leine-neu { width: auto; padding: 0 9px; white-space: nowrap; }
.leine-neu.an { background: var(--ck-akzent); border-color: var(--ck-akzent); color: #06222a; }

.fenster-knoepfe { display: flex; gap: 5px; }
.fenster-knoepfe .null-knopf { width: auto; padding: 0 7px; }
/* ---------- Joystick ----------
   Symbol unten rechts, NEBEN dem Anzeige-Pult (das reicht bis zum unteren
   Rand). --pult-breite setzt app.js; ist das Pult zu, ist sie 0. */
.joy-symbol {
  zoom: var(--ui);
  position: absolute;
  right: calc(max(10px, env(safe-area-inset-right)) + var(--pult-breite, 0px) + 8px);
  bottom: 10px;
  z-index: 5;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ck-line);
  border-radius: 9px;
  background: rgba(20, 33, 44, .93);
  color: var(--ck-text);
  cursor: pointer;
}
.joy-symbol[hidden] { display: none !important; }
.joy-symbol:hover { border-color: var(--ck-akzent); color: var(--ck-akzent); }
/* Stillgestellt: roter Rahmen. ⚠ NICHT AUSBLENDEN - ein ausgeschalteter
   Joystick, dem man das nicht ansieht, kostet beim naechsten Manoever eine
   Minute Suche. */
.joy-symbol.aus { border-color: #e05a4b; border-width: 2px; color: #ff8a7a; }
.joy-symbol.aus:hover { border-color: #ff8a7a; color: #ff8a7a; }

.joy-aktiv { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.joy-aktiv input { accent-color: var(--ck-akzent); }

/* ---------- Sprachbefehle ----------
   Das Mikrofon steht LINKS neben dem Joystick: beides sind Eingabegeräte, und
   zwei Symbole an derselben Ecke lesen sich als Paar. */
.mikro-symbol { right: calc(max(10px, env(safe-area-inset-right)) + var(--pult-breite, 0px) + 54px); }
/* ⚠ EINGESCHALTET GRÜN, nicht nur „gedrückt". Ein Mikrofon, das zuhört, muss
   man sehen - das ist keine Kosmetik, sondern eine Frage des Anstands. */
.mikro-symbol.an { border-color: #6fe3a0; border-width: 2px; color: #6fe3a0; }
.spr-fenster { width: 320px; }
.spr-schalter { display: flex; align-items: center; gap: 10px; padding: 2px 10px 6px; }
.spr-gehoert {
  margin: 0 10px 8px;
  padding: 7px 9px;
  min-height: 2.4em;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ck-text);
}
.spr-gehoert.vorlaeufig { color: var(--ck-muted); font-style: italic; }
.spr-gehoert.gut { color: #8ff0bb; }
.spr-gehoert.nichts { color: #ff8a7a; }
.spr-liste { padding: 0 10px 8px; min-height: 0; overflow-y: auto; }
.spr-zeile { padding: 4px 0; border-bottom: 1px solid var(--ck-line); }
.spr-zeile:last-child { border-bottom: 0; }
.spr-name { display: block; font-weight: 600; }
.spr-worte { display: block; font-size: 10px; color: var(--ck-muted); }

.joy-fenster { width: 300px; }
/* ⚠ overflow-x: hidden. Die Zeilen haben vier Felder; laeuft eines ueber,
   bekaeme das Fenster einen WAAGRECHTEN Rollbalken, und der halbe
   "Zuordnen"-Knopf staende ausserhalb. Die Spalten duerfen deshalb schrumpfen
   (min-width: 0), statt die Zeile breit zu machen. */
/* ⚠ RECHTS MEHR ABSTAND ALS LINKS: Die Liste rollt, und der Rollbalken legt
   sich sonst über den "Zuordnen"-Knopf — der stand rechts angeschnitten da. */
.joy-liste { padding: 4px 16px 6px 10px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.joy-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--ck-line);
}
.joy-zeile:last-child { border-bottom: 0; }
.joy-zeile.lernt { background: rgba(46, 155, 214, .12); }
/* ⚠ NUR DER NAME DARF SCHRUMPFEN. Vorher stand min-width: 0 an ALLEN Kindern -
   damit war auch der Knopf schrumpfbar, und "Zuordnen" stand als 22-px-Stummel
   da (gemessen). Der Knopf behaelt seine Inhaltsbreite, der Name kuerzt. */
.joy-name {
  grid-column: 1; grid-row: 1; font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠ width: auto MUSS SEIN. .null-knopf ist ein 22-px-QUADRAT (fuer „alle"/
   „los" am Fenderfenster); ohne diese Zeile stand "Zuordnen" als 22-px-Stummel
   da - gemessen, nicht vermutet. */
.joy-zeile button {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  width: auto; height: 22px;
  white-space: nowrap;
  padding: 2px 9px;
}
.joy-wert { grid-column: 1 / -1; grid-row: 2; font-size: 10.5px; color: var(--ck-muted); }
/* Der Balken zeigt die Wirkung SOFORT - ohne ihn ordnet man zu und weiss
   nicht, ob die richtige Achse erwischt wurde. */
.joy-balken {
  grid-column: 1 / -1; grid-row: 3;
  height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.joy-balken i { display: block; height: 100%; width: 0; background: var(--ck-akzent); }
.joy-modus { grid-column: 1; grid-row: 4; height: 22px; font: inherit; font-size: 10.5px; }
.joy-kehr { grid-column: 2; grid-row: 4; display: flex; align-items: center; gap: 4px;
            font-size: 10.5px; color: var(--ck-muted); white-space: nowrap; }
/* Kalibrierung (0.9.167): eigene Zeile unter der Achse. ⚠ DIE KNOEPFE SIND
   KEINE GRID-KINDER - die Regel .joy-zeile button (Spalte 2, Zeile 1) greift
   bei ihnen nicht; sie stehen im Fluss dieser Leiste. */
.joy-kal { grid-column: 1 / -1; grid-row: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.joy-kal-schritt { flex: 1 1 100%; font-size: 11px; line-height: 1.4; }
.joy-kal-wert { flex: 1 1 auto; font-size: 10.5px; color: var(--ck-muted); font-variant-numeric: tabular-nums; }
.joy-kal-fehler { margin: 4px 0 6px; font-size: 11px; color: #e8786b; }

.fenster-notiz {
  margin: 0;
  padding: 0 10px 9px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ck-muted);
}

/* ---------- Anzeige-Pult rechts ----------
   Inhalt und Farben aus HM30s Bedienpult. Dort ist es eine feste Spalte
   neben der Bühne; hier schwebt es darüber und lässt sich wegklappen —
   VST20 ist auf Vollbild ausgelegt, und auf dem iPad frässe eine feste
   Spalte die halbe Marina. */
.anzeigePult {
  zoom: var(--ui);          /* siehe --ui in app.css */
  position: absolute;
  /* ⚠ DICHT UNTER DER TOP-BAR. Die 46 px stammten von frueher, als es keine
     Kopfzeile gab; die Buehne faengt inzwischen selbst schon unter ihr an, und
     der Abstand zaehlte dadurch doppelt - genau wie beim Startknopf links.
     Derselbe Wert wie dort, damit beide Seiten auf einer Hoehe beginnen. */
  top: calc(var(--leiste-h) + var(--spiel-oben));
  transition: top .22s ease;
  right: max(10px, env(safe-area-inset-right));
  /* ⚠ UNTEN WIEDER 10 px: Die Ruestleiste stand frueher unten rechts und
     brauchte 74 px Platz. Jetzt steht sie oben - das Pult darf bis zum Rand. */
  bottom: 10px;
  z-index: 3;
  width: 248px;   /* ⚠ breiter seit dem Objektbaum: Namen wie „Poller am Steg“
                      brachen sonst auf zwei Zeilen und machten aus der Liste eine Wand. */
  overflow-y: auto;
  padding: 10px 12px 14px;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: rgba(20, 33, 44, .95);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  color: var(--ck-text);
  font: 13px/1.5 "Segoe UI", system-ui, sans-serif;
}
.anzeigePult[hidden] { display: none !important; }
.anzeigePult section { margin-bottom: 14px; }

/* Register im Pult. Anzeige und Parameter sind zweierlei: das eine ändert das
   Bild, das andere das Fahrverhalten. Untereinander in einer Spalte hiesse
   scrollen, während man fährt. */
.pultReiter { display: flex; gap: 4px; margin: 0 0 12px; }
.pultReiter[hidden] { display: none !important; }
.pultReiterKnopf {
  flex: 1 1 auto;
  height: 26px;
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  background: transparent;
  color: var(--ck-text);
  font: 600 11.5px/1 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.pultReiterKnopf.an { background: var(--ck-akzent); border-color: var(--ck-akzent); color: #06222a; }
#pultAnzeige[hidden], #pultParameter[hidden], #pultObjekte[hidden] { display: none !important; }
.pultKnopfreihe { display: flex; gap: 5px; margin-top: 8px; }
.pultKnopfreihe .null-knopf { width: auto; padding: 0 8px; }

/* Ein Spec je Zeile: Name, wirksamer Wert, Regler, Fusszeile. Gleiche
   Aufteilung wie im Boots-Baukasten — wer dort einstellt, findet sich hier
   sofort zurecht. */
.spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.spec-kopf { font-size: 11.5px; font-weight: 600; cursor: pointer; }
.spec-wert {
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
.spec-wert b { color: var(--ck-akzent); }
.spec input[type=range] { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--ck-akzent); }
.spec-fuss {
  grid-column: 1 / -1;
  font-size: 9.5px;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.spec.abweichend .spec-kopf { color: var(--ck-akzent); }
.spec.verdreht .spec-fuss { color: var(--ck-warn); opacity: .95; }
/* ⚠ DIESELBEN GRUPPENKOEPFE WIE IM BAUKASTEN (#0f5f6b, weisse Schrift) und
   wie in den Pulldowns. „Ueberschrift" soll in der ganzen Anwendung dasselbe
   aussehen; blasses Grau auf dunklem Grund war hier kaum als Gliederung zu
   erkennen, und man las die Liste als eine einzige Wand.
   ⚠ opacity bleibt WEG: Sie nahm das Grau zurueck. Auf einem farbigen Balken
   machte sie aus Weiss ein schmutziges Grau - dieselbe Falle wie im
   Baukasten. */
.anzeigePult h2 {
  margin: 0 0 7px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #0f5f6b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.anzeigePult .check {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12.5px;
  cursor: pointer;
}
.anzeigePult .check input { margin: 3px 0 0; accent-color: var(--ck-akzent); }
.neben { font-size: 11px; opacity: .7; }

/* Farbschlüssel unter einem Haken — welcher Pfeil auf der Bühne welcher ist. */
.vlegende {
  margin: -2px 0 8px 22px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--ck-muted);
}
.vlegende .pfeil {
  display: inline-block;
  width: 13px; height: 0;
  margin: 0 3px 0 0;
  vertical-align: middle;
  border-top: 2px solid var(--f);
  position: relative;
}
.vlegende .pfeil::after {          /* kleine Spitze, wie am echten Vektor */
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  border: 3px solid transparent;
  border-left-color: var(--f);
}

.anzeigePult .werte dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  margin: 0;
  font-size: 11.5px;
}
.anzeigePult .werte dt { color: var(--ck-muted); }
.anzeigePult .werte dd {
  margin: 0;
  text-align: right;
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pultHinweis { margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--ck-muted); }

/* Der Knopf, der das Pult holt. Sitzt oben rechts unter den Instrumenten. */
.b-pult {
  position: absolute;
  top: 52px;
  right: max(10px, env(safe-area-inset-right));
  z-index: 4;
  width: 34px;
  min-width: 34px;
  padding: 0;
}
.b-pult[aria-pressed="true"] { background: var(--ck-akzent); border-color: var(--ck-akzent); }

/* ---- Ansicht ----
   Haken und ein Knopf, schmal gehalten: Der Kasten soll nicht breiter werden
   als die anderen, sonst zieht er die Leiste auseinander. */
.ck-ansicht { min-width: 104px; }
.ck-haken {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.ck-haken .check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ck-text);
  white-space: nowrap;
  cursor: pointer;
}
.ck-haken .check input { margin: 0; accent-color: var(--ck-akzent); }
.ck-weit { width: 100%; }

/* ---- Windscheibe ----
   Bedienung wie beim Steuerrad: gezogen wird am gelben Punkt, die Scheibe
   zeigt zum Zeiger. Anders als beim Rad ohne Anschlag — Wind kommt aus jeder
   Richtung, also volle 360 Grad.
   --punkt-oben ist die Lage des gelben Punkts im Bild. */
.wind-rad {
  --punkt-oben: 14.5%;
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.wind-rad img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .06s linear;
}
.wind-rad.greift img { transition: none; }

/* Dreht mit der Scheibe und trägt den Griff — wie #radDreher beim Rad. */
#windDreher {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform .06s linear;
}
#windDreher.greift { transition: none; }

#windKnauf {
  position: absolute;
  left: 50%;
  top: var(--punkt-oben);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
#windKnauf::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--ck-warn);
  border: 1.5px solid rgba(20, 30, 40, .75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform .15s;
}
#windKnauf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ck-warn);
  opacity: .3;
  transition: opacity .15s, transform .15s;
}
#windKnauf:hover::before,
#windKnauf.greift::before { transform: scale(1.15); }
#windKnauf:hover::after  { opacity: 1; transform: scale(1.12); }
#windKnauf.greift::after { opacity: 1; transform: scale(1.12); }
#windKnauf.greift { cursor: grabbing; }

/* ---- Bugstrahlruder ----
   Die beiden Pfeile im Bild sind die Schalter: links Backbord, rechts
   Steuerbord. Ein zweiter Klick auf dieselbe Seite stellt ab. Die Knöpfe
   liegen unsichtbar über den Pfeilflächen.
   Die Maße sind am Symbol gemessen (Bugstrahl_Icon.png, 277 x 277, blaue
   Fläche): links x 5.4..33.2 %, rechts x 67.1..94.9 %, beide y 19.9..76.5 %.
   Wird das Bild getauscht, gehören sie nachgemessen. */
.bug-rad {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.bug-rad img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  user-select: none;
  -webkit-user-drag: none;
}
.bug-seite {
  position: absolute;
  top: 19.9%;
  width: 27.8%;
  height: 56.5%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.bug-bb  { left: 5.4%;  clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.bug-stb { right: 5.1%; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.bug-seite:hover { background: rgba(255, 255, 255, .22); }
/* Eingeschaltet wird der Pfeil ROT AUSGEFÜLLT — deckend, sonst mischt sich
   das Rot mit dem Blau darunter zu Violett.
   Der Schein per filter, NICHT per box-shadow: clip-path schneidet den
   Schatten eines Kastens mit weg, drop-shadow folgt der Dreiecksform. */
.bug-seite.aktiv {
  background: #d6483c;
  filter: drop-shadow(0 0 4px rgba(214, 72, 60, .85));
}
.bug-seite:focus-visible { outline: 2px solid var(--ck-akzent); outline-offset: 1px; }

/* ---- Steuerrad ----
   Halbes Rad: der volle Ausschlag ist ±90 Grad (Ruder 6 Stufen × 15 Grad),
   der gelbe Punkt wandert von 9 Uhr über 12 Uhr nach 3 Uhr und verlässt die
   obere Hälfte nie. Abgeschnitten wird nur, was ohnehin nie gebraucht wird.

   Das Rad steht OBERHALB der Leiste im Wasser und verschwindet an deren
   Oberkante — wie im Original hinter dem Pult.
     bottom: 100%  setzt die Unterkante des Ausschnitts genau auf die
                   Oberkante des Cockpits.
     Durchmesser 184, Nabe bei 92; sichtbar 120 px (das gleiche Verhaeltnis
     wie zuvor bei 156/102).
   WAAGRECHT braucht es ebenfalls Luft: bei hartem Ruder steht der Griff am
   Radrand und ragt mit Halbmesser und Schatten auf BEIDEN Seiten darüber
   hinaus. Der Ausschnitt ist deshalb um --rad-luft breiter und um denselben
   Betrag nach links gerückt; .rad-buehne wird innen zurückgeschoben, damit
   das Rad optisch an seinem Platz bleibt. */
/* ⚠ DAS RAD STEHT UEBER DEM BLOCK, NICHT DARIN. Kurzzeitig sass es in der
   Spalte auf dem dunklen Grund - und der Kasten wurde damit zur schwarzen
   Flaeche hinter dem Kranz, die halb so hoch war wie die Buehne. Es gehoert
   frei ins Wasser: absolut, bottom 100% des Blocks, mittig darueber.
   Der Schnitt unten faellt dabei genau auf die Kante des Kastens und ist
   deshalb nicht zu sehen - im Block waere er eine Linie quer durch den Kranz
   gewesen.
   ⚠ Zu sehen ist nur die obere Haelfte: Ein ganzes Rad waere doppelt so hoch
   und verdeckte die halbe Marina. */
.rad-halb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  width: calc(184px + 2 * var(--rad-luft));
  /* ⚠ 92 STATT 120 px SICHTBAR - das Rad steht damit tiefer und ragt weniger
     ins Bild. Moeglich, weil der gelbe Griff nur 90 Grad nach jeder Seite
     laeuft: Am obersten Punkt steht er ausschliesslich bei Ruder mittschiffs,
     und dort liegt er in den ersten Pixeln des Kranzes - die bleiben zu
     sehen. Bei hartem Ruder steht er seitlich, also ohnehin tiefer.
     Der Ausschnitt schneidet UNTEN ab (der Kasten haengt mit bottom:100% am
     Block); weniger Hoehe heisst deshalb: die Oberkante rutscht nach unten. */
  height: calc(92px + var(--rad-luft));
  overflow: hidden;
}
.rad-halb .rad-buehne {
  margin-left: var(--rad-luft);
  margin-top: var(--rad-luft);
}
.rad-buehne {
  position: relative;
  width: 184px;
  height: 184px;
  touch-action: none;
}
#steuerrad {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition: transform .06s linear;
}
#steuerrad.greift { transition: none; }

/* Dreht sich synchron zum Rad und trägt den Griff am gelben Punkt. */
#radDreher {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform .06s linear;
}
#radDreher.greift { transition: none; }

#radKnauf {
  position: absolute;
  left: 50%;
  /* Der Punkt sitzt MITTIG AUF dem Kranz und ragt nach außen darüber hinaus.
     Ausgemessen an Rad-modern1.png (491 px): der Kranz ist dort 18 px dick,
     seine Mitte liegt bei 1.84 % der Bildhöhe. */
  top: 1.84%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
#radKnauf::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--ck-warn);
  border: 1.5px solid rgba(20, 30, 40, .75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform .15s;
}
#radKnauf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ck-warn);
  opacity: .3;
  transition: opacity .15s, transform .15s;
}
#radKnauf:hover::before,
#radKnauf.greift::before { transform: scale(1.15); }
#radKnauf:hover::after { opacity: 1; transform: scale(1.12); }
#radKnauf.greift::after { opacity: 1; transform: scale(1.12); }
#radKnauf.greift { cursor: grabbing; }

/* ---- Anzeigen ganz links: Fahrt und Wind ----
   Sie stehen als ERSTE im Cockpit, also unter dem Steuerrad - dort, wo man
   im Boot auch hinsieht. Die Kaesten sind fertige Grafiken; hineingezeichnet
   wird nur die Zahl (core/cockpit.js, Sieben-Segment). */
.ck-anzeigen {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.ck-lcd {
  display: block;
  width: 104px;
  height: 105px;          /* 237 x 240 des Bildes, verhaeltnisgleich */
  border-radius: 6px;
  align-self: center;
}

/* ---------- Start / Halt ----------
   Machart wörtlich aus HM30 (.spielen in sim.css) — nur die Ecke ist eine
   andere: dort rechts oben, hier LINKS unter der Überschrift, weil rechts
   oben bei uns das Anzeige-Pult sitzt.
   ⚠ ER WAR ZU GROSS. 74 px waren die Antwort auf „er ist der Knopf, den man
     sucht" - nur sucht man ihn genau einmal, und danach steht ein Teller im
     Wasser. 56 px genuegen: Er ist immer noch der groesste Knopf auf der
     Buehne, ohne die Ecke zu besetzen. */
/* ⚠ DREI WERTE, EINE RECHNUNG. Die Werkzeugleiste beginnt unter dem
   Startknopf; ihre Lage stand einmal als getippte Zahl daneben und musste bei
   jeder Groessenaenderung von Hand nachgezogen werden - genau daran lag der
   Reset zuletzt schief. Jetzt rechnet das CSS. */
:root {
  /* ⚠ GEMESSEN AB DER BUEHNE, nicht ab dem Fensterrand: Die Buehne faengt
     selbst erst unter der schwarzen Leiste an. Die 46 px kamen von frueher,
     als es die Leiste noch nicht gab - zusammen ergab das den doppelten
     Abstand, und der Knopf schwebte mitten im Wasser. */
  --spiel-oben: 8px;
  --spiel-gross: 56px;
}

.spielen {
  zoom: var(--ui);          /* siehe --ui in app.css */
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  /* ⚠ UNTER DER RUESTLEISTE. --leiste-h ist 0, sobald gefahren wird - dann
     rueckt der Knopf mit der Leiste zusammen nach oben. */
  top: calc(var(--leiste-h) + var(--spiel-oben));
  transition: top .22s ease;
  width: var(--spiel-gross);
  height: var(--spiel-gross);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  /* ⚠ MARINEBLAU, nicht mehr Tuerkis. Tuerkis traegt in dieser App schon eine
     Bedeutung - es ist die Farbe der belegten Leine und der Akzente im Pult.
     Ein Startknopf in derselben Farbe sah aus wie ein weiterer Hinweis statt
     wie der Knopf, mit dem alles anfaengt. */
  background: rgba(23, 62, 107, .95);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
  z-index: 3;
}
.spielen:hover { background: rgba(32, 82, 140, .98); }
.spielen:disabled { opacity: .4; cursor: default; animation: none; }
.spielen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ⚠ DAS ZEICHEN WAECHST MIT DEM KNOPF. Hier standen feste 28 px neben den
   festen 74 px des Knopfes - zwei Zahlen fuer dasselbe Verhaeltnis, und beim
   Verkleinern blieb das Dreieck stehen und sprengte den Kreis. */
.spiel-zeichen {
  font-size: calc(var(--spiel-gross) * 0.38);
  line-height: 1;
  margin-left: calc(var(--spiel-gross) * 0.054);
}

/* ⚠ Die Regeln fuer den runden Reset-Knopf sind WEG. Er traegt jetzt Bild
   UND Wort wie die Werkzeuge daneben (.reset-knopf am Dateiende) - ein
   blosser Kreispfeil war von einem Rueckgaengig nicht zu unterscheiden.
   Eine tote Regel stehenzulassen hiesse, beim naechsten Lesen zwei Bauarten
   fuer denselben Knopf vorzufinden. */

/* Läuft die Simulation, tritt der Knopf zurück — sonst deckt er ständig
   auffällig die Marina zu. */
/* ⚠ DASSELBE AUSSEHEN IM LAUF. Frueher wurde der Knopf beim Fahren fast
   schwarz - er trat so weit zurueck, dass man den Halt suchte. Er bleibt
   jetzt marineblau; was sich aendert, ist allein das Zeichen (▶ / ❚❚).
   Nur eine Spur dunkler, damit man den Zustand doch sieht. */
.spielen[aria-pressed="true"] {
  background: rgba(17, 45, 78, .95);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.spielen[aria-pressed="true"]:hover { background: rgba(24, 62, 106, .98); }
/* ⚠ Die beiden Balken sind schmaler als der Pfeil und brauchen keinen
   Ausgleich nach rechts - der gilt nur dem Dreieck, dessen Schwerpunkt links
   seiner Mitte liegt. */
.spielen[aria-pressed="true"] .spiel-zeichen {
  margin-left: 0;
  font-size: calc(var(--spiel-gross) * 0.284);
}

/* Ein ruhiges Pochen, solange nichts läuft: Es sagt „hier geht es los", ohne
   zu blinken. Wer Bewegung abgestellt hat, bekommt es nicht. */
@media (prefers-reduced-motion: no-preference) {
  .spielen[aria-pressed="false"]:not(:disabled) { animation: pochenRund 2.4s ease-in-out infinite; }
}
@keyframes pochenRund {
  0%, 92%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,.45), 0 0 0 0 rgba(79,184,190,0); }
  46%           { box-shadow: 0 3px 12px rgba(0,0,0,.45), 0 0 0 7px rgba(79,184,190,.25); }
}


/* ======================================================== OBJEKTBAUM =======
   Was in der Marina steht, nach Art gruppiert. Oben liegt vorn.
   ⚠ Die Aeste sind KNOEPFE, keine divs: Man waehlt damit aus, und ein Klick
     muss auch mit der Tastatur gehen. Aussehen macht das CSS, nicht das Tag. */
.baum {
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 4px;
}
.baum-grund {
  padding: 4px 6px;
  margin-bottom: 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .04);
  color: var(--ck-muted);
  font-size: 11.5px;
  /* ⚠ Blass und ohne Rahmen: Der Hintergrund ist da, aber nicht anfassbar -
     das soll man sehen, bevor man ihn zu schieben versucht. */
}
.baum-leer {
  margin: 6px 0 0;
  color: var(--ck-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.baum-kopf {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 3px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ck-text);
  font: 600 11.5px/1.5 "Segoe UI", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.baum-kopf:hover { background: rgba(255, 255, 255, .06); }
.baum-pfeil { font-size: 9px; transition: transform .12s; }
.baum-kopf.zu .baum-pfeil { transform: rotate(-90deg); }
.baum-kopfname { flex: 1 1 auto; }
.baum-zahl {
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: var(--ck-muted);
  font-size: 10px;
}
.baum-aeste {
  /* Die Linie macht die Verzweigung sichtbar - ohne sie ist es eine Liste
     mit fetten Zeilen dazwischen, kein Baum. */
  margin: 0 0 4px 7px;
  padding-left: 7px;
  border-left: 1px solid var(--ck-line);
}
.baum-ast {
  display: block;
  width: 100%;
  padding: 2px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ck-text);
  font: 12px/1.6 "Segoe UI", system-ui, sans-serif;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.baum-ast:hover { background: rgba(255, 255, 255, .07); }
.baum-ast.an {
  background: var(--ck-akzent);
  color: #06222a;
  font-weight: 600;
}

/* Textknopf in der Knopfreihe - er traegt ein Wort, kein Zeichen, und darf
   sich den Platz teilen. */
.pultKnopfreihe .null-knopf.weit {
  flex: 1 1 0;
  min-width: 0;
  font-size: 11px;
}

/* Eine abgesetzte Gruppe in der Werkzeugleiste. ⚠ Der Abstand ist die ganze
   Aussage: Was darüber steht, bedient das fahrende Boot; was darin steht,
   baut die Marina. Ohne ihn liest sich die Leiste als eine einzige Reihe
   gleichrangiger Werkzeuge.
   ⚠ [hidden] mit !important - dieselbe Falle wie beim Objekte-Knopf: Ein
   Flexkasten schlägt sonst das eingebaute hidden, und die leere Gruppe
   hinterliesse im Fahrbetrieb eine Lücke. */
.wz-gruppe {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wz-gruppe[hidden] { display: none !important; }

/* Die Leine eines Nachbarbootes in der Liste. ⚠ Zurückgenommen, aber nicht
   versteckt: Sie gehört zum Bild der Box, man soll sie sehen und wissen, dass
   sie einem nicht gehört. */
.leine.fremd { opacity: .72; }
/* ⚠ Die Marke „gehoert dem Nachbarn" gibt es nicht mehr - der Name steht
   jetzt EINMAL als Gruppenueberschrift statt in jeder Zeile. Die Regel
   bleibt hier nicht als Leiche stehen. */

/* Der Schalter „alle verschieben", solange er laeuft. ⚠ Deutlich anders als
   ein gewoehnlicher Knopf: Er aendert, was JEDER Zug auf der Buehne tut - das
   muss man sehen, ohne es sich zu merken. */
#knopfAlleSchieben.an {
  background: var(--ck-akzent);
  border-color: var(--ck-akzent);
  color: #06222a;
  font-weight: 700;
}

/* ======================================================== MARINEN =========
   Kacheln der gespeicherten Uebungen. ⚠ Zwei nebeneinander, nicht drei: Die
   Vorschau muss das Becken erkennbar zeigen, sonst ist sie nur ein Farbfleck
   und man liest doch wieder den Namen. */
.marinen-gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: min(64vh, 560px);
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}
.marina-kachel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--ck-text);
  font: 12px/1.3 "Segoe UI", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.marina-kachel:hover { background: rgba(255, 255, 255, .1); border-color: var(--ck-akzent); }
.marina-kachel.fehlt { opacity: .45; cursor: default; }
.marina-bild {
  display: block;
  height: 74px;
  border-radius: 5px;
  overflow: hidden;
  background: #0e3a52;
}
.marina-bild canvas { display: block; width: 100%; height: 100%; }
.marina-name { font-weight: 600; }
.marina-zahl { color: var(--ck-muted); font-size: 10.5px; }

/* Die beiden Stufenknoepfe an einer Nachbarleine. ⚠ Klein und ohne Rahmen:
   Sie sind eine Feineinstellung beim Bauen, kein Bedienelement der Fahrt -
   sie duerfen neben „los werfen" nicht wie ein Hauptknopf aussehen. */
.leine-stufe {
  min-width: 20px;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1;
  color: var(--ck-muted);
}
.leine-stufe:hover { color: var(--ck-text); }

/* Ein Paar sich ausschliessender Knoepfe mit Ueberschrift. ⚠ Die Ueberschrift
   gehoert dazu: „linksgaengig / rechtsgaengig" allein sagt nicht, WOVON die
   Rede ist - beim Haken stand das noch im Text daneben. */
.wahlpaar { margin: 2px 0 6px; }
.wahlpaar-titel {
  display: block;
  margin-bottom: 1px;
  color: var(--ck-muted);
  font-size: 11px;
}
.wahlpaar .check { margin-left: 8px; }

/* Ein Eingabefeld ueber die ganze Pultbreite - fuer Namen, die laenger sind
   als eine Zahl. */
.feld-breit {
  width: 100%;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: var(--ck-text);
  font: 12.5px "Segoe UI", system-ui, sans-serif;
}
.feld-breit:focus { outline: none; border-color: var(--ck-akzent); }

/* ------------------------------------------------- Leinen nach Booten ---
   ⚠ EINE UEBERSCHRIFT JE BOOT. In einer Box mit drei Nachbarn liegen schnell
   achtzehn Leinen; flach untereinander findet man die eigenen vier nicht
   mehr. Der Bootsname steht deshalb einmal oben, darunter seine Klampen.
   Klein und zurueckgenommen: Sie ordnet, sie soll nicht die Zeilen
   uebertoenen, um die es geht. */
.leinen-gruppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 2px 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ck-line);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ck-akzent);
}
/* Die erste Ueberschrift braucht keinen Abstand nach oben - darueber ist
   schon der Fensterrand. */
.leinen-gruppe:first-child { margin-top: 2px; }
/* ⚠ Die NACHBARN zurueckgenommen, das eigene Boot in Akzentfarbe: Beim
   Aufklappen des Fensters soll das Auge zuerst auf die Leinen fallen, die
   man auch bedienen kann. */
.leinen-gruppe.fremd { color: var(--ck-muted); }
.leinen-gruppe-name { font-weight: 700; }
.leinen-gruppe-zahl {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .09);
  color: var(--ck-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: center;
}

/* Der Hinweis, dass gerade nur EIN Boot gezeigt wird. ⚠ Er steht ganz oben
   und nicht unten: Wer die Liste kuerzer vorfindet als erwartet, sieht zuerst
   nach oben. */
.leinen-filter {
  margin: 2px 2px 8px;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(63, 214, 208, .10);
  color: var(--ck-akzent);
  font-size: 10.5px;
  line-height: 1.35;
}

/* ⚠ MITMARKIERT, aber nicht angefasst. Zurueckgenommener als „.an": Der
   Unterschied ist echt - am angefassten Ast haengen die Reihenfolge-Knoepfe,
   an den anderen nicht. Beide gleich zu faerben verspraeche dort Griffe, die
   es nicht gibt. */
.baum-ast.mit {
  background: rgba(46, 155, 214, .16);
  border-left: 2px solid rgba(46, 155, 214, .55);
}

/* Der Reset sitzt ALLEIN unter dem Startknopf, nicht in der Werkzeugleiste -
   er oeffnet kein Fenster. Er borgt sich nur deren Aussehen, damit Bild und
   Wort zusammen dasselbe sagen wie nebenan.
   ⚠ Die Lage kommt aus der alten Regel (.spielen.zurueck): dicht unter dem
   runden Startknopf. */
/* ⚠ KEINE EIGENEN KOORDINATEN MEHR. Er steht als erstes Kind in der
   Werkzeugleiste und richtet sich damit von selbst an ihr aus - vorher hatte
   er ein eigenes left (14 statt 10) und ein top, das in den runden
   Startknopf hineinreichte. Was hier bleibt, ist nur der Abstand nach unten:
   Reset gehoert zum Fahren, die Werkzeuge darunter zum Bauen. */
.reset-knopf { margin-bottom: 6px; }

/* ⚠ GESPERRT SIEHT AUS WIE GESPERRT, nicht wie kaputt. Zurueckgenommen, aber
   lesbar - der Knopf soll sagen „das gibt es, nur nicht in dieser Stufe", und
   dafuer muss man ihn noch erkennen koennen. */
.gesperrt, button.gesperrt {
  opacity: .5;
  cursor: not-allowed;
}
.gesperrt:hover { background: inherit; }

/* Eine Marina, die die Stufe nicht hergibt: sichtbar, aber ausgegraut, mit
   einem Schloss in der Ecke. Weglassen waere die schlechtere Auskunft - dass
   es mehr Haefen gibt, soll man sehen. */
.marina-kachel { position: relative; }
.marina-kachel.gesperrt { opacity: .45; cursor: not-allowed; filter: grayscale(.7); }
.marina-schloss {
  position: absolute; top: 6px; right: 8px;
  font-size: 15px; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  display: none;
}
.marina-kachel.gesperrt .marina-schloss { display: block; }

/* Der Vorschlag, welchen Grundwert man in die Bootsdatei eintraegt, damit
   der Regler wieder auf seinem Dateiwert stehen kann. Zurueckhaltender als
   die Fusszeile darueber: Sie sagt, WAS IST, diese Zeile nur, was man
   TUN KOENNTE. */
.spec-fak {
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(63, 214, 208, .10);
  color: var(--ck-akzent);
  font-size: 10px;
  line-height: 1.4;
}
.spec-fak[hidden] { display: none; }