/* Skilo — Seekarten-Palette: Lotpapier, Wattblau, Kartenmagenta.
   Drei Zustände: hell, dunkel, und Rotlicht für die Nachtwache. */

:root{
  --bg:#F1F4F4;
  --surface:#FFFFFF;
  --surface-2:#E7EEF0;
  --ink:#13252D;
  --muted:#516C78;
  /* War #8CA3AC: 2,4:1 gegen den Grund. Bei Sonne auf dem Wasser praktisch
     unlesbar — und daran hängen die Marken am Eintrag („Nachtrag", „Rev. 2")
     und die Hinweise unter den Formularfeldern. Jetzt 4,5:1. */
  --faint:#627278;
  --line:#D2DEE2; --edge:#858C8F;
  --sea:#1C6079;
  --sea-soft:#D6E8EF;
  /* Die Segelzone auf dem Erfassungsschirm. Ein eigenes Token, nicht die
     Erfolgsfarbe mitbenutzt: Grün heißt dort „in Ordnung" und steht am
     laufenden Törn in der Liste — die beiden dürfen sich nicht gegenseitig
     verstellen, wenn eines von ihnen nachjustiert wird. */
  --segel:#2F6B3E;
  --segel-soft:#DFEFDE;
  --magenta:#B01167;
  --ok:#2E6B4F;
  --warn:#9A5A06;
  --tile:#E7EEF0;
  --tile-ink:#13252D;
  --shadow:0 1px 2px rgba(19,37,45,.07);
  --radius:12px;
  /* Die Breite der Inhaltsspalte am Rechner. Kopfleiste und Inhalt beziehen
     sich beide darauf — zwei getrennte Werte laufen irgendwann auseinander. */
  --spalte:1080px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B141A;
    --surface:#122029;
    --surface-2:#182D37;
    --ink:#E4EDEF;
    --muted:#9FB6BE;
    --faint:#6E8A94;   /* auf --surface waren es 4,36:1 — knapp daneben */
    --line:#223C46;
    /* Fehlte hier und erbte den hellen Wert #858C8F. Ausgerechnet in der
       Palette, die die meisten sehen: „System" ist die Voreinstellung, die
       ausdrückliche Wahl „dunkel" ist der Sonderfall. Ein Token, das nur in
       einem der beiden Dunkelblöcke steht, ist immer ein Fehler — der
       Prüfstand vergleicht sie deshalb jetzt Zeile für Zeile. */
    --edge:#427487;
    --sea:#63BAD6;
    --sea-soft:#12303C;
    --segel:#7FCB93;
    --segel-soft:#16301F;
    --magenta:#FF77B0;
    --ok:#69C39A;
    --warn:#E8A34E;
    --tile:#1A303A;
    --tile-ink:#E4EDEF;
    --shadow:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B141A; --surface:#122029; --surface-2:#182D37; --ink:#E4EDEF;
  --muted:#9FB6BE; --faint:#6E8A94; --line:#223C46; --edge:#427487; --sea:#63BAD6;
  --sea-soft:#12303C; --magenta:#FF77B0; --ok:#69C39A; --warn:#E8A34E;
  --segel:#7FCB93; --segel-soft:#16301F;
  --tile:#1A303A; --tile-ink:#E4EDEF; --shadow:none; color-scheme:dark;
}
/* Rotlicht: erhält die Nachtsicht. Gewinnt über jede Themenwahl. */
:root[data-mode="night"]{
  --bg:#000000; --surface:#0E0302; --surface-2:#170504; --ink:#FF4A3D;
  /* Nebentext und Marken lagen bei 3,4:1 und 2,1:1 — nachts nicht lesbar,
     und damit nutzlos. Auf 4,5:1 gehoben. Dass beide denselben Wert haben,
     ist Absicht: im Rotlicht gibt es keine dritte, noch blassere Stufe, die
     man noch entziffern könnte. Die Hierarchie kommt hier über Größe und
     Stärke, nicht über Helligkeit. */
  --muted:#E85043; --faint:#DA3C32; --line:#3A0D0A; --edge:#BE130F; --sea:#FF6A5D;
  --sea-soft:#1C0605; --magenta:#FF6A5D; --ok:#D6473B; --warn:#FF8A7D;
  /* Im Rotlicht gibt es keine zweite Farbe — die Zonen unterscheiden sich
     dort über Helligkeit und über ihre Überschrift, nicht über den Ton.
     Alles andere kostete Nachtsicht. */
  --segel:#FF6A5D; --segel-soft:#30100D;
  --tile:#170504; --tile-ink:#FF4A3D; --shadow:none; color-scheme:dark;
}
:root[data-mode="night"] img,:root[data-mode="night"] canvas{filter:grayscale(1) sepia(1) hue-rotate(-38deg) saturate(4) brightness(.6)}

/* Muss vor allem anderen stehen: Autoren-CSS schlägt das display:none, das
   der Browser dem hidden-Attribut gibt. Ohne diese Zeile liegt der Vorhang
   des Modals von Anfang an über der Seite — alles wirkt ausgegraut und
   nichts reagiert auf Klicks. */
[hidden]{display:none!important}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
/* Auf dem iPhone reicht height:100% nicht: Safari rechnet damit die große
   Ansicht, während unten die eigene Werkzeugleiste steht. Der Inhalt ist dann
   höher als das, was man sieht — und das Letzte darin liegt hinter der
   Leiste. dvh meint genau den sichtbaren Teil. */
@supports (height:100dvh){ html,body{height:100dvh} }
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.45;
  display:flex;flex-direction:column;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
.mono,.fixline,.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;line-height:1.22;text-wrap:balance}
h1{font-size:1.45rem;font-weight:650;letter-spacing:-.01em}
h2{font-size:1.1rem;font-weight:650}
h3{font-size:.95rem;font-weight:650}
p{margin:0}
a{color:var(--sea)}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:4px}

/* ---------- Kopfleiste ---------- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 8px) 14px 0;
}
.topbar-row{display:flex;align-items:center;gap:10px}
.topbar-title{min-width:0;flex:1}
.tour-name{display:block;font-weight:650;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tour-sub{display:block;font-size:.72rem;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
/* Läuft ein Törn, ohne dass aufgezeichnet wird, entsteht keine Strecke.
   Das muss man sehen, ohne es zu suchen. */
.tour-sub.warnt{color:var(--warn,#b26a00)}
/* Das Wort über den Abgleich führt zur Erklärung. Gepunktet unterstrichen,
   nicht durchgezogen: Es ist kein Weg woandershin, sondern eine Auskunft über
   das, was dasteht. Der Innenabstand ist nicht Zierde — ohne ihn wäre die
   Fläche zum Antippen 0,72rem hoch, und das trifft an Bord niemand. */
.abgleichwort{
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;
  text-decoration:underline dotted;text-underline-offset:2px;
  padding:4px 0;margin:-4px 0;
}
/* Ein Punkt in Farbe vor dem Wort.

   Gemeldet: „es muss klarer ersichtlich sein, z. B. über Farben, dass ich
   lokal arbeite oder eben alles grün ist." Ein kleingeschriebenes Wort in
   einer Nebenzeile ist dafür zu leise.

   Der Punkt ersetzt das Wort nicht. Im Rotlicht gibt es keine zweite Farbe —
   dort sind alle vier Töne Abstufungen von Rot, und die Auskunft kommt
   weiterhin aus dem Wort. Dasselbe gilt für jeden, der Farben schlecht
   unterscheidet; für ihn steht der Ton zusätzlich in der Vorlesemarke. */
.abgleichwort::before{
  content:'';display:inline-block;width:.6em;height:.6em;border-radius:50%;
  margin-right:.45em;vertical-align:.02em;background:currentColor;
}
.abgleichwort.ton-gut{color:var(--ok)}
.abgleichwort.ton-wartet{color:var(--warn)}
.abgleichwort.ton-fehler{color:var(--magenta)}
/* „Nur auf diesem Gerät" ist kein Fehler, sondern eine vollständige
   Arbeitsweise. Also kein Alarmton, sondern der leise Ton der Zeile — und
   ein offener Punkt statt eines gefüllten: etwas ist hier noch nicht zu
   Ende, und das sieht man auch ohne Farbe. */
.abgleichwort.ton-lokal{color:var(--faint)}
.abgleichwort.ton-lokal::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
/* Zwei Sachen standen hier falsch.
   Erstens fehlte die Zentrierung: ein <button> zentriert seinen Inhalt von
   selbst, ein <a> nicht — die Lupe saß oben links in ihrem Rahmen, während
   der Knopf daneben mittig aussah.
   Zweitens war der Rand die zarte Trennlinie mit 1,24 zu 1. Ein Knopf ist ein
   Bedienelement; man muss sehen, wo er anfängt und aufhört. */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--edge);color:var(--muted);
  width:38px;height:38px;border-radius:10px;font-size:1.05rem;cursor:pointer;flex:none;
  text-decoration:none;line-height:1;
  position:relative;
}
/* Sichtbar 38, treffbar 44.

   Die Kopfleiste trägt vier der meistbenutzten Knöpfe, darunter den Notruf.
   38 Punkte sehen ruhig aus, sind aber unter dem, was ein Daumen auf einem
   schwankenden Schiff sicher trifft — Apple nennt 44, und wer schon einmal
   bei Welle danebengetippt hat, weiß warum. Größer zeichnen würde die
   Kopfleiste erdrücken; also bleibt das Bild, und nur die Fläche wächst.
   Nach außen, in den Abstand hinein: die Knöpfe stehen 10 Punkte
   auseinander, die Flächen berühren sich also nicht. */
.icon-btn::after{
  content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.icon-btn[aria-pressed="true"]{border-color:var(--magenta);color:var(--magenta)}
.fixline{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:.74rem;color:var(--muted);padding:7px 0 8px;letter-spacing:-.01em;
}
.fix-pos{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fix-meta{white-space:nowrap;color:var(--faint)}
.fixline.stale .fix-pos{color:var(--warn)}
.fixline.good .fix-pos{color:var(--ink)}

/* ---------- Inhaltsfläche ---------- */
/* Rubriken in einem Verzeichnis.

   „Mehr" ist eine lange Seite mit vier Gruppen, und die sahen alle gleich
   aus. Ein farbiger Strich vor der Überschrift sagt beim Überfliegen, was
   zusammengehört — mehr nicht: ein bunter Kasten je Zeile machte die Seite
   unruhiger statt klarer. Die Farben stehen schon in der Palette und haben
   dort ihre Bedeutung. */
.rubrik > h2,
.rubrik > .card-head > h2{
  padding-left:11px;border-left:3px solid var(--line);
}
.rubrik > .section-note{padding-left:14px}
.rubrik-sicherheit > h2,.rubrik-sicherheit > .card-head > h2{border-left-color:var(--magenta)}
.rubrik-toern > h2,.rubrik-toern > .card-head > h2{border-left-color:var(--sea)}
.rubrik-verwaltung > h2,.rubrik-verwaltung > .card-head > h2{border-left-color:var(--ok)}
.rubrik-recht > h2,.rubrik-recht > .card-head > h2{border-left-color:var(--faint)}

/* Das Konto-Zeichen: die eigenen Initialen, rund, ruhig.

   Angemeldet trägt es die Initialen und die Farbe der Anwendung, abgemeldet
   einen blassen Umriss — so sieht man mit einem Blick, woran man ist, ohne
   ein Wort zu lesen. */
.icon-btn.avatar{
  border-radius:100px;font-size:.78rem;font-weight:700;letter-spacing:.02em;
}
.icon-btn.avatar.an{
  border-color:var(--sea);color:var(--sea);background:var(--sea-soft);
}
/* Abgemeldet trägt der Knopf ein Wort statt eines Zeichens. Er wird dadurch
   breiter und nimmt dem Törnnamen Platz — der kürzt sich ohnehin ab, und wer
   nicht angemeldet ist, braucht den Weg hinein dringender als die letzten
   Silben einer Überschrift. */
.icon-btn.avatar.wortmarke{
  width:auto;min-width:44px;padding:0 12px;font-size:.78rem;
  border-color:var(--sea);color:var(--sea);
}

/* Der Notruf in der Kopfleiste. Rot genug, um ihn zu finden, ruhig genug,
   um nicht bei jedem Blick anzuspringen — er steht ja immer da. */
.icon-btn.notruf{color:var(--magenta);font-size:1.15rem;font-weight:700}
.icon-btn.notruf:active{background:var(--magenta);color:#fff}

/* ---------- Die erste Frage ----------
   Ein Bildschirm, auf dem es nichts zu erkunden gibt, sondern etwas zu
   entscheiden. Deshalb ohne Kopfzeile und ohne Reiterleiste: jedes weitere
   Ziel waere hier eine Ablenkung von genau drei Moeglichkeiten. */
body.nurwahl .topbar,
body.nurwahl .tabbar{display:none}
body.nurwahl .view{padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
.startseite{max-width:34rem;margin:0 auto;padding:8vh 0 0}
.startseite h1{font-size:1.7rem;margin-bottom:10px}
.startseite-satz{color:var(--muted);font-size:.95rem;margin-bottom:26px}
.startwahlen{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.startwahl{
  display:block;width:100%;text-align:left;margin:0;
  padding:16px 18px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;
}
.startwahl.primaer{border-color:var(--sea);background:var(--sea-soft)}
.startwahl:active{transform:scale(.995)}
.startwahl-titel{display:block;font-weight:650;font-size:1.02rem;margin-bottom:3px}
.startwahl-satz{display:block;font-size:.85rem;color:var(--muted);line-height:1.4}
.startseite-fuss{font-size:.8rem;color:var(--faint);margin-bottom:10px}
.linkbtn{
  background:none;border:0;padding:0;margin:0;color:var(--sea);
  font:inherit;text-decoration:underline;cursor:pointer;
}

.view{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 14px 0;
}
/* Der Platz für die Leiste am unteren Rand — als Element, nicht als
   Innenabstand des Rollbereichs.

   Gemeldet von der Törnseite: „wenn ich runterscrolle, verschwindet der Knopf
   hinter dem Menü unten." Hier stand padding-bottom, und das lassen mehrere
   Browser beim untersten Ende eines überlaufenden Rollbereichs fallen — der
   Abstand ist rechnerisch da und wird nicht angezeigt. Ein leeres Element
   fällt niemand weg. */
.view::after{
  content:'';display:block;
  height:calc(env(safe-area-inset-bottom) + 84px);
}
.section{margin-bottom:22px}
.section > h2{margin-bottom:4px}
.section-note{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.label{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:650}
.empty{
  border:1px dashed var(--line);border-radius:var(--radius);padding:26px 20px;text-align:center;
  color:var(--muted);font-size:.9rem;
}
.empty h3{color:var(--ink);margin-bottom:6px}

/* ---------- Ereigniskacheln ---------- */
.state-strip{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;
}
.chip{
  font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:100px;
  background:var(--surface-2);color:var(--muted);border:1px solid transparent;white-space:nowrap;
}
.chip.on{background:var(--sea-soft);color:var(--sea);border-color:var(--sea)}
.chip.warn{background:transparent;color:var(--warn);border-color:var(--warn)}

/* Auf einem iPad am Kartentisch passen drei nebeneinander. Man sieht mehr
   Ereignisse, ohne zu rollen — im Manöver zählt genau das. Auf einem breiten
   Schirm werden es von selbst mehr, statt dass drei Kacheln auf 340 Punkte
   auseinandergezogen werden.

   Hier steckte ein Fehler: die drei Regeln standen in falscher Reihenfolge im
   Quelltext, und bei gleicher Spezifität gewinnt die spätere. Die auto-fill-
   Regel griff dadurch auf keiner einzigen Breite. Jetzt steigt die Staffel
   aufsteigend an, damit die breiteste Bedingung auch die letzte ist. */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:560px){.tiles{grid-template-columns:repeat(3,1fr)}}
/* Und die Höhe muss mit hinein — sonst wiederholt sich der Fehler, der schon
   einmal die Seitenleiste erwischt hat: ein iPhone quer ist 852 Punkte breit
   und bekäme damit die Rechnerstufe, also fünf schmale Spalten. Quer auf dem
   Telefon hat man aber kaum 400 Punkte Höhe; dort will man große Kacheln, die
   man mit dem Daumen trifft, nicht viele kleine. */
@media (min-width:840px) and (min-height:600px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
.tile{
  appearance:none;border:0;text-align:left;cursor:pointer;
  background:var(--tile);color:var(--tile-ink);border-radius:var(--radius);
  min-height:88px;padding:12px 12px 13px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  font-size:.98rem;font-weight:650;line-height:1.18;font-family:inherit;
  transition:transform .06s ease;
}
.tile:active{transform:scale(.97)}
/* Solange auf eine Position gewartet wird: sichtbar beschäftigt, und nicht
   noch einmal antippbar. Vier Sekunden ohne Antwort sind der Grund, warum
   überhaupt zweimal getippt wird. */
/* Läuft gerade. pointer-events:none nimmt den zweiten Tipp schon weg, bevor
   der Handler ihn ablehnen muss — und die halbe Deckkraft sagt, dass etwas
   passiert. Gilt für Kacheln, Knöpfe und Listenzeilen gleichermaßen. */
.working{opacity:.6;pointer-events:none}
.tile.working{opacity:.6;pointer-events:none}
.tile.working .tile-ico{animation:pulse 1s ease-in-out infinite}
.tile.working::after{
  content:'wird eingetragen …';position:absolute;left:12px;right:12px;bottom:6px;
  font-size:.68rem;font-weight:600;opacity:.85;
}
.tile{position:relative}
.tile small{font-weight:400;font-size:.72rem;color:var(--muted);letter-spacing:0}
.tile .tile-ico{font-size:1.05rem;color:var(--sea);margin-bottom:auto}
/* Die MOB-Kachel — die wichtigste, die es gibt.
   Hier stand hart „color:#fff". In der hellen Palette ist die Warnfarbe
   dunkel, weiß darauf also richtig. In der dunklen ist sie hell, und weiß
   darauf ergab 2,47 zu 1: ausgerechnet die Kachel, die man im Ernstfall in
   Sekunden treffen muss, war nachts kaum zu lesen.
   Die Schrift nimmt jetzt den Seitengrund — der ist in jeder Palette das
   Gegenstück zur Warnfarbe, und damit stimmt es überall. */
.tile.hot{background:var(--magenta);color:var(--bg)}
.tile.hot small,.tile.hot .tile-ico{color:var(--bg);opacity:.85}
:root[data-mode="night"] .tile.hot{background:#4A0F0A;color:var(--ink);border:1px solid var(--ink)}
.tile.quiet{background:transparent;border:1px solid var(--edge)}
.tile.wide{grid-column:1/-1;min-height:60px;flex-direction:row;align-items:center;justify-content:space-between}
.tile.primary{background:var(--sea);color:var(--bg)}
.tile.primary small,.tile.primary .tile-ico{color:inherit;opacity:.75}

/* Zonen: jede ist ein eigenes Raster. Verschwindet die Segelzone im Hafen,
   verrutscht darunter nichts — „Wachwechsel" steht in jedem Bordzustand an
   derselben Stelle.

   Hier stand einmal, Luft zwischen den Gruppen reiche und Beschriftung sei
   nicht nötig. Das war zu optimistisch: eine Lücke bedeutet nur etwas, wenn
   man schon weiß, dass sie etwas bedeutet. Also jetzt eine Überschrift und
   eine eigene Farbe je Zone — und dafür keine Sonderfarbe mehr an einzelnen
   Ereignissen. Farbe sagt „welche Art von Handlung", nicht „diese eine hier
   ist wichtig". Damit steht sie in jedem Bordzustand gleich, und man findet
   die Gruppe, ohne die Beschriftungen zu lesen.

   Farbe ist dabei immer nur die Zugabe: jede Kachel trägt weiterhin Zeichen
   und Wort, und die Zonen haben ihre Überschrift. Wer Farben nicht
   unterscheidet, verliert nichts. */
.zone + .zone{margin-top:14px}
.zone:last-of-type{margin-bottom:16px}
.zonenkopf{
  margin:0 0 6px;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);
}

/* Der Grund färbt zart, das Zeichen kräftig. Auf einem hellen Ton bleibt die
   Schrift --tile-ink und damit überall lesbar — eine voll eingefärbte Kachel
   müsste ihre Schriftfarbe je Palette mitführen, und genau daran ist die
   MOB-Kachel schon einmal gescheitert.
   :not([disabled]) ist nötig, weil diese Regeln sonst die gestrichelte
   Sperrkachel überschreiben würden — sie ist spezifischer als .tile[disabled]. */
.tiles[data-zone="fahrt"] .tile:not([disabled]){background:var(--sea-soft)}
.tiles[data-zone="fahrt"] .tile-ico{color:var(--sea)}

.tiles[data-zone="segel"] .tile:not([disabled]){background:var(--segel-soft)}
.tiles[data-zone="segel"] .tile-ico{color:var(--segel)}

/* Was nur mitschreibt und nichts am Schiff ändert, bleibt ein Umriss. */
.tiles[data-zone="buch"] .tile:not([disabled]){background:transparent;border:1px solid var(--edge)}
.tiles[data-zone="buch"] .tile-ico{color:var(--muted)}

.tiles[data-zone="notfall"] .tile:not(.hot):not([disabled]){background:var(--tile)}
.tiles[data-zone="notfall"] .tile-ico{color:var(--magenta)}

/* Ein gesperrter Platz hält die Stelle frei und sagt, warum hier gerade
   nichts geht. Er ist deutlich zurückgenommen, aber nicht unlesbar: die
   Begründung ist der Zweck der Kachel. */
.tile[disabled]{
  cursor:default;opacity:1;background:transparent;
  border:1px dashed var(--line);color:var(--muted);
}
.tile[disabled] .tile-ico{color:var(--line)}
.tile[disabled] small{color:var(--muted)}
.tile[disabled]:active{transform:none}

/* Mehrfachauswahl als Schaltflächen zum Aktivieren.
   
   Hier standen die Möglichkeiten untereinander, jede als eigene Zeile mit
   einem kleinen Kästchen links. Bei sechs Segeln wurde das Formular lang, und
   der eigentliche Inhalt — „Genua", „Fock" — stand als schmale Spalte in viel
   Weiß. Als Schaltfläche ist es beides: kürzer und mit einer Trefferfläche,
   die man mit dem Daumen trifft statt mit der Fingerspitze ein Kästchen. */
.checks{display:grid;gap:2px;margin-top:4px}
.checks.flach{display:block}
/* Nur die Überschriften bleiben Zeilen. Ohne :not() gewinnt diese Regel gegen
   .chipwahl — sie ist spezifischer — und die Knöpfe wären wieder 40 statt 44
   Punkte hoch. Gemessen wird das in layout-test.mjs, und zwar in der echten
   Verschachtelung: allein gestellt sah der Knopf richtig aus. */
.checks .field.check:not(.chipwahl){margin:0;min-height:40px}
.chipreihe{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
/* Eingerückt, solange eine Überschrift darüber steht: so sieht man, wozu sie
   gehört. Ohne Gruppen gibt es nichts einzurücken. */
.checks:not(.flach) .chipreihe{padding-left:14px;margin-bottom:10px}
/* Zwei Klassen, nicht eine.
   Der Knopf trägt auch „field" und „check", und deren Regeln stehen weiter
   unten in dieser Datei. Bei gleicher Spezifität gewinnt die spätere — mit
   einem bloßen „.chipwahl" setzte sich flex-direction:column aus „.field"
   durch und die Beschriftung klebte oben am Rand. */
.checks .chipwahl{
  position:relative;margin:0;
  /* Richtung und Ausrichtung ausdrücklich, beide Achsen: in einer Spalte
     richtet align-items waagerecht aus und justify-content senkrecht. */
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  min-height:44px;padding:0 15px;border-radius:100px;gap:0;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  font-size:.9rem;line-height:1.2;text-align:center;
  cursor:pointer;-webkit-user-select:none;user-select:none;
}
/* Das Kästchen bleibt da und bleibt anfassbar — es trägt Tastatur und
   Bildschirmleser. Nur sichtbar ist es nicht mehr: die Schaltfläche selbst
   sagt schon, ob sie an ist. */
.checks .chipwahl input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.checks .chipwahl.on{
  background:var(--sea-soft);border-color:var(--sea);color:var(--sea);font-weight:600;
}
.checks .chipwahl:active{opacity:.7}
.checks .chipwahl:has(input:focus-visible),.checks .chipwahl:focus-within{
  outline:2px solid var(--sea);outline-offset:2px;
}

/* Eine Beanstandung steht am Feld, nicht als Hinweis am Bildschirmrand: dort
   sieht man sie beim Korrigieren, und der Bildschirmleser sagt sie mit an. */
.field-error{
  display:block;margin-top:5px;font-size:.8rem;font-weight:600;color:var(--magenta);
}
input[aria-invalid],textarea[aria-invalid],select[aria-invalid]{
  border-color:var(--magenta);outline-color:var(--magenta);
}

/* ---------- Karten und Listen ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;box-shadow:var(--shadow);
}
.card + .card{margin-top:8px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-sub{font-size:.8rem;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:8px}
.row{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;font:inherit;color:inherit;cursor:pointer;
  /* Einzeilige Zeilen kämen sonst auf 42 Punkte. Auf einem schwankenden
     Schiff, mit klammen Fingern, ist das zu wenig. */
  min-height:46px;
}
.row-time{font-size:.76rem;color:var(--muted);width:52px;flex:none;padding-top:2px;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
/* Untereinander, nicht nebeneinander. Die Zeilenteile sind span-Elemente und
   damit von Haus aus inline — ohne display:block klebt „Heiko“ an „Skipper“. */
.row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-title{display:block;font-weight:600;font-size:.95rem;line-height:1.25}
.row-meta{display:block;font-size:.76rem;color:var(--muted);word-break:break-word;line-height:1.35}
.row-tag{font-size:.68rem;color:var(--faint);white-space:nowrap;padding-top:3px}

/* Der laufende Törn in der Törnliste.
   Das Wort „läuft" stand dort schon — aber in einer Liste aus zwölf Zeilen
   findet das Auge eine Farbe schneller als ein Wort, und genau diese eine
   Zeile sucht man ja. Die Farbe kommt deshalb dazu, sie ersetzt nichts: wer
   Grün nicht von Grau unterscheidet, liest weiterhin „läuft". Im Rotlicht
   wird --ok von selbst rot, damit die Nachtsicht heil bleibt. */
/* Eine Handlung, die etwas beendet, ohne etwas zu zerstören.

   Rot wäre falsch: es heißt in dieser Anwendung „unwiderruflich" — Törn
   löschen, Konto löschen. Abmelden ist das Gegenteil, die Törns bleiben
   liegen. Farblos wäre aber auch falsch, dann steht der Abschluss da wie ein
   Menüpunkt unter anderen. Also die Farbe der Anwendung, und ein Strich an
   der Seite wie bei einem laufenden Törn: ein Akzent, keine Warnung. */
.row[data-tone="aktion"]{
  border-color:var(--sea);box-shadow:inset 4px 0 0 var(--sea);padding-left:17px;
}
.row[data-tone="aktion"] .row-title{color:var(--sea)}
.row[data-tone="aktion"] .row-tag{color:var(--sea)}

.row.laeuft{border-color:var(--ok);box-shadow:inset 4px 0 0 var(--ok);padding-left:17px}
.row.laeuft .row-title{font-weight:600}
.row.laeuft .row-tag{
  background:var(--ok);color:var(--bg);font-weight:600;
  padding:3px 9px;border-radius:100px;
}
.row.gap{border-style:dashed;background:transparent}

.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:.88rem;margin-top:10px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}

/* 96 war zu schmal für das, was drinsteht.

   Bei 96 Punkten Spalte bleiben nach der Polsterung 72 für den Wert — und
   „16:20:28" braucht in Schreibmaschinenschrift 84. Auf einem 375 Punkte
   breiten Telefon (iPhone SE, 13 mini) standen deshalb drei Spalten neben-
   einander und die Uhrzeit endete an der Kartenkante als „16:20:4". Einer
   abgeschnittenen Uhrzeit sieht man nicht an, dass sie unvollständig ist.

   110 heißt: Solange drei Spalten nicht wirklich passen, werden es zwei. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--surface);padding:11px 12px 12px}
.stat .v{font-size:1.2rem;font-weight:650;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:650}
.stat .s{font-size:.72rem;color:var(--muted)}

/* ---------- Schaltflächen ---------- */
.btn{
  appearance:none;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;
  border-radius:10px;padding:12px 16px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);min-height:46px;
}
.btn.primary{background:var(--sea);border-color:var(--sea);color:var(--bg)}
.btn.danger{border-color:var(--magenta);color:var(--magenta);background:transparent}
.btn.ghost{background:transparent}
/* Der kleine Knopf neben einer Überschrift.

   Stand fünfzehnmal als Inline-Stil in den Ansichten: minHeight 34, padding
   6/12. Fünfzehn Kopien heißt, dass ein Maß an fünfzehn Stellen geändert
   werden muss — und beim sechzehnten Knopf schreibt man es wieder neu ab.
   Jetzt einmal hier.

   34 bleibt das Bild, 44 wird die Fläche: auch „Holen" beim Wetter und
   „Ändern" im Wachplan werden auf einem Telefon getippt, nicht geklickt. */
.btn.klein{
  min-height:34px;padding:6px 12px;position:relative;
}
.btn.klein::after{
  content:'';position:absolute;inset:-5px -4px;
}
/* Und die noch kleinere Fassung: leisere Schrift, wie sie in den dichten
   Listen unter „Dieser Server" sitzt und neben einem Punkt der Checkliste.
   Auch die wird getippt — auf der Checkliste sogar besonders oft, weil man
   sie im Hafen der Reihe nach durchgeht. */
.btn.winzig{
  min-height:32px;padding:5px 10px;font-size:.78rem;position:relative;
}
.btn.winzig::after{
  content:'';position:absolute;inset:-6px -5px;
}
.btn.block{display:block;width:100%}
.btn:disabled{opacity:.45;cursor:default}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btnrow .btn{flex:1;min-width:130px}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.field > span{font-size:.78rem;color:var(--muted);font-weight:600}
.field .hint{font-size:.72rem;color:var(--faint);font-weight:400}
/* Hier steckte ein Bedienfehler, den man nur beim Nachmessen sieht: der Rand
   eines Eingabefeldes hatte 1,24 zu 1 gegen seinen Grund. Auf einem sonnen-
   beschienenen Telefondisplay ist ein Feld damit unsichtbar — man sieht nicht,
   wo man tippen kann, und tippt daneben.
   Für Bedienelemente gilt deshalb --edge mit über 3 zu 1. Die zarte --line
   bleibt den Trennern zwischen Listenzeilen: dort ist schwach richtig, sonst
   wird jede Liste ein Gitter. */
input,select,textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--edge);border-radius:9px;padding:11px 12px;width:100%;
}
textarea{min-height:82px;resize:vertical}
input[type="checkbox"]{width:auto;min-width:22px;height:22px}
.check{display:flex;align-items:center;gap:10px;font-size:.9rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.seg{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{
  flex:1;font:inherit;font-size:.85rem;font-weight:600;padding:10px 6px;cursor:pointer;
  background:var(--surface);color:var(--muted);border:0;border-right:1px solid var(--line);
  /* 40 Punkte hoch war es vorher. Der Umschalter sitzt unter anderem auf dem
     Notrufbildschirm über dem Wortlaut — die Stelle, an der jemand mit
     zitternden Händen von Deutsch auf Englisch wechselt, weil die
     Küstenfunkstelle auf Englisch geantwortet hat. Dort zählen vier Punkte. */
  min-height:44px;
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--sea);color:var(--bg)}

/* ---------- Fußnavigation ---------- */
/* Vor dem allerersten Törn: „An Bord", „Törn", „Mehr". Logbuch und Karte
   wären leer und erklärten nur, dass sie leer sind. Ab dem ersten Törn steht
   die Leiste fest — siehe paintNav(). */
body.wenigtabs .tabbar a[data-tab="logbook"],
body.wenigtabs .tabbar a[data-tab="map"]{display:none}
body.wenigtabs .tabbar{grid-template-columns:repeat(3,1fr)}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 0 8px;text-decoration:none;color:var(--muted);font-size:.66rem;font-weight:600;
}
/* Auf einem schwankenden Boot hält man einen Knopf länger gedrückt, als man
   will. Ohne das erscheint dann iOS' Auswahlmenü über der Kachel — mitten im
   Manöver. Text im Inhalt bleibt auswählbar, damit man Koordinaten kopieren
   kann; nur die Tippflächen selbst nicht.
   touch-action:manipulation nimmt außerdem die Doppeltipp-Zoom-Wartezeit. */
.tile,.btn,.tabbar a,.row,.seg button{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
/* Erklärender Text bleibt markierbar.
   Gemeldet: „ich kann keinen Text in den Buttons / Feldern markieren, um z. B.
   die Adresse der Installation für den Cron zu lesen." Genau richtig — die
   Sperre soll iOS' Auswahlmenü beim Tippen auf eine Kachel verhindern, nicht
   das Kopieren eines Pfades. Die Tippfläche bleibt gesperrt, ihr Untertitel
   nicht. */
.row-meta,.befehl,.befehl code{
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  user-select:text;
}

/* Ein Befehl zum Abtippen ist keiner: er wird kopiert. */
.befehl{
  margin:10px 0 0;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);
}
.befehl code{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;line-height:1.5;color:var(--ink);
  white-space:pre-wrap;word-break:break-all;
}
.befehl .btnrow{margin-top:8px}

/* Rückmeldung beim Tippen — der Grund, warum sich Knöpfe „langsam" anfühlten.
   Ganz oben steht -webkit-tap-highlight-color:transparent auf allen Elementen.
   Das nimmt dem Browser seine eigene Tipp-Rückmeldung weg, und ersetzt wurde
   sie nur bei den Kacheln (.tile:active). Ein Knopf oder eine Listenzeile tat
   beim Tippen also sichtbar gar nichts, bis die nächste Ansicht gezeichnet war
   — und das dauert je nach Bestand vierzig Millisekunden und mehr. Gemessen
   war der Klick nie langsam; er sah nur tot aus.
   Diese Regeln greifen im Compositor, noch bevor überhaupt Javascript läuft.
   Bewusst ohne transition: eine Überblendung verzögert genau das, was hier
   sofort passieren muss. */
.btn:active,button.row:active,.seg button:active{background:var(--surface-2)}
.btn:active{transform:scale(.985)}
.tabbar a:active{opacity:.55}
.chip:active{opacity:.7}

.tabbar a.active{color:var(--sea)}
.tab-ico{font-size:1.15rem;line-height:1}
.wide-only{display:none}

/* ---------- Quer auf dem Telefon ----------
   Wenig Höhe, viel Breite. Eine Fußleiste in voller Höhe frisst dort ein
   Achtel des Sichtbaren — deshalb schmaler, mit Symbol und Wort nebeneinander. */
@media (max-height:520px) and (orientation:landscape){
  .tabbar a{flex-direction:row;gap:6px;padding:6px 0;font-size:.72rem}
  .tab-ico{font-size:1rem}
  .view::after{height:calc(env(safe-area-inset-bottom) + 60px)}
}

/* ---------- Seitenleiste: Tablet und Rechner ----------
   Eine Leiste am unteren Rand ist ein Muster für Daumen, nicht für Mauszeiger
   — und nicht für ein iPad, das man in zwei Händen hält. Sie wandert an die
   Seite, sobald genug Breite **und** Höhe da ist.

   Die Bedingung hing vorher an der Breite allein, bei 900 Punkten. Das ging
   zweimal daneben: ein iPad hochkant (820) bekam die Telefonansicht samt
   Fußleiste, und ein großes iPhone quer (926 breit, 428 hoch) bekam die
   Seitenleiste — neun Einträge übereinander auf 428 Punkten Höhe, dazu 238
   Punkte Breite weniger für den Inhalt. Genau verkehrt herum. */
@media (min-width:760px) and (min-height:600px){
  /* Die erste Frage kennt keine Seitenleiste — also darf ihr auch keine
     Spalte freigehalten werden. Sonst stand der allererste Bildschirm, den
     ein neuer Mensch von Skilo sieht, auf dem iPad und am Rechner 238 Punkte
     zu weit rechts: links ein leerer Streifen, rechts ein knapper Rand. Das
     ist die Stelle, an der man entscheidet, ob eine Anwendung fertig
     aussieht. */
  body.nurwahl{display:block;height:auto}
  body.nurwahl .view{grid-area:auto;padding-inline:24px}
  body{
    display:grid;
    grid-template-columns:238px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"nav head" "nav main";
    height:100vh;
    height:100dvh;   /* iOS: 100vh reicht unter die Werkzeugleiste */
  }
  /* Kopfleiste und Inhalt teilen sich dieselbe Spalte — sonst steht der
     Törnname weit links von dem, was er überschreibt. */
  .topbar{grid-area:head;padding:14px 0 0}
  .topbar-row,.fixline{max-width:var(--spalte);margin-inline:auto;padding-inline:32px}
  /* Mittig statt links geklebt. Vorher stand der Inhalt am linken Rand und
     rechts blieb auf einem breiten Schirm die halbe Fläche leer — das ist der
     Grund, warum die Rechneransicht unfertig wirkte.

     Die Mitte kommt aber über die Polsterung, nicht über max-width: der
     Kasten, der scrollt, muss so breit sein wie das Fenster. Mit max-width
     klebte die Bildlaufleiste an der rechten Kante des Inhalts und stand
     mitten auf dem Schirm. So steht sie am Fensterrand, wo man sie erwartet,
     und der Inhalt bleibt trotzdem in der Mitte. */
  .view{
    grid-area:main;
    padding:26px max(32px, calc((100% - var(--spalte)) / 2)) 0;
  }
  /* Am Rechner steht die Leiste seitlich — unten genügt Luft zum Atmen. */
  .view::after{height:56px}

  /* Auf einem großen Schirm darf alles etwas größer atmen. Nicht der
     Fließtext — der hat auf dem Telefon die richtige Größe und behält sie —,
     aber Überschriften, Abstände und Kacheln. */
  h1{font-size:1.75rem}
  h2{font-size:1.2rem}
  .section{margin-bottom:30px}
  .section-note{font-size:.86rem;margin-bottom:14px}
  .card{padding:18px 20px}
  .stat{padding:14px 16px 15px}
  .stat .v{font-size:1.45rem}
  .tabbar{
    grid-area:nav;position:static;display:flex;flex-direction:column;gap:2px;
    border-top:0;border-right:1px solid var(--line);padding:16px 10px 20px;
    overflow-y:auto;
  }
  /* „Mehr" ist der Sammelpunkt und gehört unter alles andere. Auf dem Telefon
     steht es als fünfter Reiter unten, dort ist die Reihenfolge richtig — hier
     rückt es ans Ende, ohne dass die Reihenfolge im Text sich ändert. */
  .tabbar a[data-tab="more"]{order:99;margin-top:18px}
  .tabbar a{
    flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
    padding:10px 12px;border-radius:10px;font-size:.92rem;font-weight:500;
    /* Die Seitenleiste erscheint ab 760 Punkten — und ein iPad hochkant ist
       834 breit. Sie ist also nicht die „Rechneransicht", sondern auch die
       iPad-Ansicht, und dort wird sie mit dem Finger getroffen, nicht mit der
       Maus. 41 Punkte hoch war sie: zu wenig für dreizehn Einträge
       untereinander, bei denen der Nachbar nur vier Punkte entfernt steht. */
    min-height:44px;
  }
  .tabbar a:hover{background:var(--surface-2);color:var(--ink)}
  .tabbar a.active{background:var(--sea-soft);color:var(--sea);font-weight:600}
  .tab-ico{width:22px;text-align:center;font-size:1.05rem}
  /* In der Seitenleiste steht kein Raster; die Regel für das Telefon greift
     dort nicht, und Logbuch und Karte gehören in die Törnrubrik. */
  body.wenigtabs .tabbar{grid-template-columns:none}
  /* Am Rechner stehen Erfassen, Logbuch und Karte in der Törnrubrik — dort
     gehören sie hin, denn sie sind ohne Törn leer. Zweimal untereinander
     dieselben vier Ziele wären nur Rauschen.

     Der Wähler muss `.tabbar a.phone-only` heißen, nicht `.phone-only`: die
     Regel `.tabbar a{display:flex}` ist genauer (eine Klasse und ein Element)
     und gewinnt sonst, egal wie weit unten sie steht. Genau daran ist es
     zuerst gescheitert — die Einträge standen doppelt da. */
  .tabbar a.phone-only{display:none}
  .navdyn .navgroup{display:block}
  .navrubrik{display:flex}

  /* Zwei Zustände, zwei Darstellungen — sie bedeuten Verschiedenes.

     Steht man auf der Törnseite selbst, ist die Rubrik der Ort und wird
     markiert wie jeder andere: Fläche und Farbe.

     Steht man dagegen im Logbuch, ist sie nur der Zusammenhang. Dann bekommt
     sie einen Strich an der Kante und kräftigere Schrift, aber keine Fläche —
     sonst leuchteten zwei Zeilen gleich stark, und man wüsste nicht, welche
     davon der Ort ist. */
  .navrubrik.active{
    background:var(--sea-soft);color:var(--sea);border-radius:8px;
    border-bottom-color:transparent;
  }
  .navrubrik.enthaelt{
    color:var(--ink);box-shadow:inset 3px 0 0 var(--sea);
  }
  .navrubrik.enthaelt .tab-ico{color:var(--sea)}
  /* Der Schriftzug ist ein Weg nach Hause, kein Aufkleber — deshalb ohne
     Unterstreichung, aber mit Zeigefinger und Rückmeldung beim Tippen.
     Die Regel für .tabbar a würde ihn sonst zu einem Reiter machen. */
  .tabbar a.navbrand{
    display:block;font-weight:650;font-size:1.05rem;letter-spacing:-.01em;
    padding:2px 12px 14px;color:var(--ink);text-decoration:none;
    background:none;
  }
  .tabbar a.navbrand:hover{color:var(--sea);background:none}
  .navsep{display:block;height:1px;background:var(--line);margin:12px 12px}
  /* Fließtext bekommt eine Lesebreite. Eine Spalte von 1080 Punkten ist für
     Kacheln und Tabellen richtig, für Sätze aber viel zu breit: bei über
     hundert Zeichen je Zeile findet das Auge den Zeilenanfang nicht mehr. */
  .section-note,.card-sub,.note,.empty p,.lightbox-meta{max-width:72ch}
  .empty{max-width:640px;margin-inline:auto}

  /* Der Hinweis erschien über der linken Kante — er gehört über den Inhalt,
     und der steht jetzt in der Mitte. */
  .toast-host{bottom:24px;left:238px;padding:0 32px;align-items:center}
  .fixline{padding-bottom:12px}
}

/* Ein gezeichnetes Symbol muss sich einfügen wie ein Buchstabe: mittig, in
   der Textfarbe, und ohne die Zeile auseinanderzuziehen. */
.icon-btn svg{display:block;color:inherit}

/* Zuklappbare Fragen in der Hilfe.
   Die Fragenliste war eine Wand aus sechzehntausend Zeichen. Zugeklappt sind
   es dreiunddreißig Zeilen, die man überfliegt — und die Antwort holt man sich
   mit einem Tipp. Die Fläche zum Antippen ist bewusst so hoch wie eine
   Listenzeile: auf einem schwankenden Schiff trifft man keine Textzeile. */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-frage {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.faq-frage > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 11px 13px;
  font-weight: 600; font-size: .95rem; line-height: 1.3;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
/* Das Dreieck des Browsers steht bei Safari und Chrome verschieden weit
   innen; ein eigenes Zeichen sitzt überall gleich. */
.faq-frage > summary::-webkit-details-marker { display: none; }
.faq-frage > summary::after {
  content: '⌄'; margin-left: auto; flex: none;
  font-size: 1.05rem; line-height: 1; color: var(--faint);
  transform: translateY(-2px);
}
.faq-frage[open] > summary::after { content: '⌃'; transform: translateY(2px); }
.faq-frage > summary:active { background: var(--surface-2); }
.faq-antwort {
  margin: 0; padding: 0 13px 13px;
  font-size: .88rem; line-height: 1.5; color: var(--muted);
  /* Am Rechner lief die Antwort über die volle Spalte — rund 130 Zeichen je
     Zeile. Das Auge verliert beim Rücksprung die Zeile; ab etwa 90 Zeichen
     liest man dieselbe zweimal. Überall sonst in Skilo sind es 73, weil der
     Text in einer Karte steht. In der Hilfe steht er es nicht — und
     ausgerechnet dort liest man am längsten am Stück. */
  max-width: 68ch;
}

/* Die Überschrift einer Ankreuzgruppe. Sie steht etwas abgesetzt und trägt
   fettere Schrift — sonst sieht sie aus wie ein weiteres Kästchen unter
   Kästchen, und niemand ahnt, dass sie neun andere schaltet. */
.gruppenwahl{
  margin-top:12px;font-weight:700;
  border-top:1px solid var(--line);padding-top:12px;
}
.checks > .gruppenwahl:first-child{margin-top:0;border-top:0;padding-top:0}
/* Die Einzelnen stecken jetzt in .chipreihe und werden dort eingerückt. */

/* Die Sicherheitseinweisung: Punkte zum gemeinsamen Durchgehen.
   Jeder ist ein ganzer Satz, kein Stichwort — also darf er umbrechen und
   braucht Luft. Ein fehlender Pflichtpunkt wird rot umrandet: er ist kein
   Fehler des Benutzers, aber er soll ins Auge fallen, solange er offen ist. */
.briefliste{display:flex;flex-direction:column;gap:2px}
.briefpunkt{align-items:flex-start;line-height:1.4}
.briefpunkt input{margin-top:3px;flex:none}
.briefliste .check[data-tone="warn"]{
  border-left:3px solid var(--warn);padding-left:9px;border-radius:0 var(--radius) var(--radius) 0;
}

/* Der Weg zurück zu einem errechneten Wert. Klein und zurückhaltend: er ist
   ein Angebot, keine Aufforderung — der eingetippte Wert ist meistens der
   richtige. Er steht unter dem Feld und nicht daneben, damit er auf einem
   schmalen Telefon nicht die Eingabe zusammendrückt. */
.feld-zurueck{
  align-self:flex-start;margin-top:6px;
  background:transparent;border:1px solid var(--edge);border-radius:8px;
  padding:5px 9px;min-height:32px;font:inherit;font-size:.74rem;
  color:var(--muted);cursor:pointer;
}
.feld-zurueck:active{background:var(--surface-2)}

/* Das Suchfeld: groß genug, um mit nassen Fingern zu treffen, und ohne die
   Lupe des Browsers, die auf iOS mitten im Feld sitzt. */
.suchfeld{
  font-size:1.05rem;min-height:52px;padding:12px 14px;
}
.suchfeld::-webkit-search-decoration,
.suchfeld::-webkit-search-results-button{display:none}

/* Ein Weg, der zur Rubrik gehört, aber nicht zu ihrem Alltag: „Alle Törns"
   steht unter den täglichen Zielen und tritt einen Schritt zurück. */
.navnebensache{opacity:.72;font-size:.86em}

/* Der Törnname als Rubriküberschrift: er ist der Zusammenhang, in dem alles
   darunter steht, und deshalb keine Zeile wie die anderen. Er führt selbst auf
   die Törnseite — von dort geht Crew, Übernahme, Drucken. */
.navrubrik{
  display:none;align-items:center;gap:10px;
  font-size:.86rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);padding:14px 12px 8px;text-decoration:none;
  border-bottom:1px solid var(--line);margin-bottom:4px;
}
/* Die Flagge steht fest, der Name darf gekürzt werden: „Kornaten — Herbst mit
   der ganzen Familie" passt sonst nirgends hin. */
.navrubrik .tab-ico{flex:none;color:var(--sea)}
.navrubrik span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Behälter für alles, was nur in der Seitenleiste steht.

   Er stand hier auf display:none und wurde in der breiten Ansicht über
   `.navdyn.wide-only` eingeschaltet. Seit die Seitenleiste zur Laufzeit
   entsteht — und ihre Elemente die Klasse `wide-only` nicht mehr tragen —
   blieb er damit unsichtbar: am Rechner fehlte die halbe Navigation, und aus
   „Mehr" kam man nicht mehr zurück. Sichtbar ist er jetzt immer; dass er auf
   dem Telefon nicht stört, sorgt seitenleiste(), indem sie ihn dort gar nicht
   erst anlegt. */
.navdyn{display:flex;flex-direction:column;gap:2px}

/* Gruppen in der Seitenleiste. Dreizehn gleich aussehende Zeilen
   untereinander lassen „Notruf" so wichtig wirken wie „Häfen" — mit drei
   Beschriftungen sieht man auf einen Blick, wonach man sucht. */
/* Wie .navdyn: stand auf display:none und wurde über `.navgroup.wide-only`
   eingeschaltet. Es gibt die Beschriftung nur noch in der Seitenleiste, und
   dort soll sie zu sehen sein. Als Block, nicht als Reiter — sonst zöge flex
   sie in eine Zeile mit dem Symbol daneben. */
.navgroup{
  display:block;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:16px 14px 4px;
}

/* Gruppenüberschrift: die Ebene über den Abschnitten. „Mehr" hatte sechzehn
   Abschnitte hintereinander, ohne dass erkennbar war, wo ein Bereich aufhört
   — Kartenspeicher stand neben Impressum, und beides sah gleich wichtig aus. */
.gruppe{
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:30px 0 10px;padding-top:14px;
  border-top:1px solid var(--line);
}
.gruppe:first-of-type{margin-top:22px}

/* Ein Merkposten im Tagebuch: der Rahmen der Erzählung, nicht ihr Inhalt.
   Deshalb eine Zeile und keine Karte — als Karte sähe er aus wie etwas, das
   jemand geschrieben hat, und geschrieben hat das niemand. */
.merkposten{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 10px;padding:5px 2px 5px 12px;
  border-left:2px solid var(--line);
  color:var(--muted);font-size:.86rem;
}
.merkposten .mono{
  font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  font-size:.8rem;color:var(--faint);flex:none;
}
.merkposten .ort{color:var(--ink);font-weight:600}

/* ---------- Notruf ----------
   Groß und ruhig. Wer diesen Schirm aufschlägt, liest im Schwell, vielleicht
   bei Nacht, vielleicht mit einer Hand — und spricht das Gelesene gleichzeitig
   ins Mikrofon. Jede Zeile muss auf einen Blick erfassbar sein. */
.mayday-pos{
  font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:700;letter-spacing:.02em;margin:4px 0 2px;
}
.mayday-say{color:var(--muted);font-size:.92rem;margin:0 0 8px}
.mayday-lines{
  list-style:none;counter-reset:zeile;margin:12px 0 4px;padding:0;
  border-top:1px solid var(--line);
}
.mayday-lines li{
  counter-increment:zeile;
  padding:9px 0 9px 30px;border-bottom:1px solid var(--line);position:relative;
  font-size:1.06rem;line-height:1.35;font-weight:600;
}
.mayday-lines li::before{
  content:counter(zeile);position:absolute;left:0;top:10px;
  color:var(--faint);font-size:.78rem;font-weight:700;
  font-family:ui-monospace,Menlo,monospace;
}
/* Die drei Kopfzeilen sind das, was zuerst gesprochen wird. */
.mayday-lines li:first-child{color:var(--magenta);letter-spacing:.04em}

/* ---------- Modal ---------- */
.modal-host{
  position:fixed;inset:0;z-index:40;background:rgba(4,12,16,.55);
  display:flex;align-items:flex-end;justify-content:center;
}
@media (min-width:620px){.modal-host{align-items:center}}
.modal{
  background:var(--bg);width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom) + 18px);
  border:1px solid var(--line);border-bottom:0;
}
@media (min-width:620px){.modal{border-radius:16px;border-bottom:1px solid var(--line)}}
.modal h2{margin-bottom:3px}
.modal-sub{font-size:.82rem;color:var(--muted);margin-bottom:16px}

/* ---------- Wo liegen meine Daten? ---------- */
.datenlage-zeile{padding:10px 0;border-bottom:1px solid var(--edge)}
.datenlage-zeile:last-child{border-bottom:0}
.datenlage-kopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.datenlage-was{font-size:.82rem;color:var(--muted)}
.datenlage-wert{font-weight:600;text-align:right}
.datenlage-satz{margin:4px 0 0;font-size:.82rem;color:var(--muted);line-height:1.45}

/* ---------- Hinweise ---------- */
.note{border-left:2px solid var(--magenta);padding:2px 0 2px 13px;font-size:.85rem;color:var(--muted);margin:12px 0}
.note b{color:var(--ink)}
.note.info{border-color:var(--sea)}
.note.ok{border-color:var(--ok)}

.toast-host{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 68px);z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding:0 14px}
.toast{
  background:var(--ink);color:var(--bg);border-radius:10px;padding:6px 8px 6px 14px;font-size:.86rem;font-weight:600;
  /* Auf einem schmalen Telefon rutschen zwei Knöpfe neben einer langen
     Meldung sonst aus dem Bild oder drücken den Text auf null. */
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:520px;width:100%;pointer-events:auto;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.toast > span{padding:5px 0}
:root[data-mode="night"] .toast{background:var(--surface-2);color:var(--ink);border:1px solid var(--ink)}
/* „Rückgängig" trifft man nach einem Fehltipper — im Manöver, mit nasser
   Hand. Ohne Polsterung war die Trefffläche nur so hoch wie der Text. */
.toast button{
  background:none;border:0;color:inherit;font:inherit;font-weight:700;
  text-decoration:underline;cursor:pointer;flex:none;
  padding:10px 12px;min-height:44px;border-radius:8px;
}
.toast button:active{background:rgba(255,255,255,.14)}

/* ---------- Track-Zeichnung ---------- */
.trackmap{width:100%;height:190px;background:var(--sea-soft);border-radius:var(--radius);border:1px solid var(--line);display:block}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--magenta);margin-right:6px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Die Karte im Ausdruck: volle Breite, und sie darf nicht über eine
   Seitengrenze zerrissen werden. */
.printmap{
  width:100%;max-width:100%;display:block;margin:8px 0 4px;
  border:1px solid #C9D6DB;border-radius:6px;break-inside:avoid;page-break-inside:avoid;
}

/* ---------- Bildergalerie ----------
   Ein Raster, keine Liste: nach einer Woche sind es hundertfünfzig Bilder, und
   ein Tag soll auf einen Blick zu sehen sein. Die Spaltenzahl kommt aus der
   Breite, nicht aus einer festen Zahl — auf dem iPad passen mehr hin. */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;
}
@media (min-width:620px){.gallery{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}}
.shot{
  position:relative;aspect-ratio:1;padding:0;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--surface-2);cursor:pointer;
  -webkit-touch-callout:none;user-select:none;touch-action:manipulation;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot:active{transform:scale(.97)}
.shot-tag{
  position:absolute;left:4px;bottom:4px;font-size:.6rem;font-weight:700;
  background:var(--ink);color:var(--bg);border-radius:5px;padding:1px 5px;opacity:.85;
}

/* ---------- Bild groß ansehen ----------
   Ein Bild gehört nicht in eine Karte mit Rand, sondern auf dunklen Grund, so
   groß wie der Schirm hergibt. Was dazugehört — Bildtext, Zeit, Ort — steht
   direkt darunter und nicht als Merkmalsliste darüber. */
.modal-wide{max-width:880px}
.lightbox{
  position:relative;background:#07100F;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:200px;max-height:64dvh;touch-action:pan-y;
}
.lightbox-img{max-width:100%;max-height:64dvh;object-fit:contain;display:block}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.45);color:#fff;font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-nav:active{background:rgba(0,0,0,.7)}

/* Vollbild.
   Der Sinn ist, dass das Bild den Schirm bekommt — also weicht alles, was
   normalerweise um es herum steht: Rand, Ecken, Polsterung. Was bleibt, ist
   das Bild und darunter, was dazu gehört. Auf einem Telefon in der Hand ist
   das der Unterschied zwischen Ansehen und Danebengucken. */
.modal-host:fullscreen{background:#000;padding:0;align-items:stretch}
.modal-host:fullscreen .modal{
  max-width:none;width:100%;height:100dvh;border-radius:0;border:0;
  background:#000;color:#fff;padding:0;display:flex;flex-direction:column;
  justify-content:center;gap:0;
}
.modal-host:fullscreen .modal > h2,
.modal-host:fullscreen .modal > .modal-sub{
  position:absolute;top:0;left:0;right:0;padding:10px 16px;margin:0;
  color:rgba(255,255,255,.7);font-size:.8rem;font-weight:600;
  background:linear-gradient(rgba(0,0,0,.55), transparent);z-index:2;
}
.modal-host:fullscreen .modal > .modal-sub{top:30px;background:none;font-weight:400}
.modal-host:fullscreen .lightbox{
  border-radius:0;max-height:100dvh;flex:1;background:#000;
}
.modal-host:fullscreen .lightbox-img{max-height:100dvh}
/* Bildtext und Ort bleiben lesbar, treten aber zurück. */
.modal-host:fullscreen .lightbox-meta{
  position:absolute;bottom:64px;left:0;right:0;padding:0 18px;
  color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.modal-host:fullscreen .btnrow{
  position:absolute;bottom:0;left:0;right:0;padding:10px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,.6));margin:0;
}
.modal-host:fullscreen .btnrow .btn{
  background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.35);
}
.lightbox-nav.prev{left:8px}
.lightbox-nav.next{right:8px}
.lightbox-meta{margin-top:12px}
.lightbox-caption{font-weight:600;font-size:.95rem;line-height:1.35}
.lightbox-line{font-size:.82rem;color:var(--muted);margin-top:4px}
.lightbox-hint{font-size:.74rem;color:var(--faint);margin-top:4px}

/* ---------- Fortschritt ---------- */
.progress{display:block;height:10px;border-radius:100px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.progress span{display:block;height:100%;background:var(--sea);border-radius:100px}

/* ---------- Ankerwache ---------- */
.anchorcircle{width:100%;max-width:340px;aspect-ratio:1;display:block;margin:0 auto}
.alarmbox{
  background:var(--magenta);color:#fff;border-radius:var(--radius);padding:18px 20px 20px;margin-bottom:14px;
  animation:alarmpulse 1.2s ease-in-out infinite;
}
.alarmbox h2{color:#fff;margin-bottom:6px}
.alarmbox p{font-size:.92rem;line-height:1.45}
.alarmbox .btn{background:#fff;border-color:#fff;color:var(--magenta)}
:root[data-mode="night"] .alarmbox{background:#4A0F0A;color:var(--ink);border:1px solid var(--ink)}
:root[data-mode="night"] .alarmbox h2{color:var(--ink)}
:root[data-mode="night"] .alarmbox .btn{background:transparent;border-color:var(--ink);color:var(--ink)}
@keyframes alarmpulse{0%,100%{opacity:1}50%{opacity:.82}}

/* ---------- Sterne ----------
   Fünf große Flächen je Kriterium; ein zweiter Tipp auf denselben Stern nimmt
   die Note zurück. Kein Wischen, kein Schieberegler — beides trifft man auf
   einem schwankenden Boot nicht. */
.starrow{display:flex;align-items:center;gap:10px;padding:5px 0}
.starrow-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:.9rem;font-weight:600}
.starrow-hint{font-size:.72rem;font-weight:400;color:var(--muted)}
.stars{display:flex;gap:2px;flex:none}
.starbtn{
  width:34px;height:38px;border:0;background:none;cursor:pointer;
  font-size:1.35rem;line-height:1;color:var(--line);padding:0;font-family:inherit;
}
.starbtn[aria-pressed="true"]{color:var(--warn)}
:root[data-mode="night"] .starbtn[aria-pressed="true"]{color:var(--ink)}

/* ---------- Prüfliste ----------
   Siebzig Positionen im Stehen an der Pier: ein Tipp je Position, große
   Trefferflächen, und der Vergleichsstand steht direkt darunter. */
.checkrow{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 10px 9px 13px;
}
.checkrow-main{display:flex;align-items:center;gap:10px}
.checkrow-label{
  flex:1;min-width:0;text-align:left;background:none;border:0;padding:2px 0;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:2px;cursor:pointer;
}
.checkrow-title{font-size:.94rem;font-weight:600;line-height:1.25}
.checkrow-hint{font-size:.75rem;color:var(--muted);line-height:1.3}
.checkrow-prev{font-size:.72rem;color:var(--warn);line-height:1.3}
.tri{display:flex;gap:4px;flex:none}
.tri-btn{
  width:42px;height:42px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:var(--faint);font-size:1.05rem;font-weight:700;cursor:pointer;font-family:inherit;
}
.tri-btn:disabled{opacity:.4;cursor:default}
.tri-btn[aria-pressed="true"].tri-ok{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.tri-btn[aria-pressed="true"].tri-warn{background:var(--warn);border-color:var(--warn);color:var(--bg)}
.tri-btn[aria-pressed="true"].tri-bad{background:var(--magenta);border-color:var(--magenta);color:#fff}
:root[data-mode="night"] .tri-btn[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--ink)}

/* ---------- Druckansichten ----------
   Auf dem Schirm sieht es aus wie ein Blatt Papier, gedruckt ist es eines.
   Die Vorschau ist damit dasselbe Dokument, nicht eine Annäherung. */
.printsheet{
  background:#fff;color:#13252D;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 30px;font-size:.86rem;line-height:1.45;
}
.printsheet .printhead{border-bottom:2px solid #13252D;padding-bottom:9px;margin-bottom:16px}
.printsheet h2{font-size:1.35rem;letter-spacing:-.01em;color:#13252D}
.printsheet .sub{font-size:.82rem;color:#516C78;margin-top:2px}
.printsheet h3.dayhead{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#516C78;
  margin:20px 0 7px;padding-bottom:4px;border-bottom:1px solid #C9D6DA;
}
.printsheet table{border-collapse:collapse;width:100%}
.printsheet .kvtable th{
  text-align:left;font-weight:600;color:#516C78;padding:3px 14px 3px 0;
  white-space:nowrap;width:1%;font-size:.82rem;letter-spacing:0;text-transform:none;border:0;
}
.printsheet .kvtable td{padding:3px 0;color:#13252D;border:0;text-align:left}
.printsheet .logtable{margin-top:4px;font-size:.76rem}
.printsheet .logtable th{
  text-align:left;font-weight:600;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:#516C78;border-bottom:1px solid #13252D;padding:5px 8px 5px 0;white-space:nowrap;
}
.printsheet .logtable td{padding:4px 8px 4px 0;border-bottom:1px solid #E2EAEC;vertical-align:top;color:#13252D}
.printsheet .logtable td.pos,.printsheet .logtable td.n,.printsheet .logtable td.nowrap{
  font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.printsheet .logtable td.n{text-align:right}
/* Die Crewliste trägt mehr Spalten als das Logbuch — enger setzen, und die
   E-Mail darf umbrechen statt die Tabelle über den Rand zu schieben. */
.printsheet .crewtable{font-size:.72rem}
.printsheet .crewtable td.wrap{white-space:normal;word-break:break-all}
/* Protokoll: zwei Spalten nebeneinander, Mängel sichtbar ohne Farbe —
   viele Ausdrucke sind schwarzweiß. */
.printsheet .prot td.state{white-space:nowrap;font-weight:600}
.printsheet .prot td.state.defect::before{content:"! "}
.printsheet .prot td.state.missing::before{content:"✗ "}
.printsheet .prot tr.flag td{background:#F3F0E4}
.printsheet .shots{display:flex;gap:5px;flex-wrap:wrap;margin:3px 0 2px}
.printsheet .shots img{width:74px;height:74px;object-fit:cover;border:1px solid #C9D6DA}
.printsheet .milestable th{
  text-align:left;font-weight:600;color:#516C78;padding:6px 14px 6px 0;white-space:nowrap;
  font-size:.82rem;letter-spacing:0;text-transform:none;border-bottom:1px solid #E2EAEC;
}
.printsheet .milestable td{padding:6px 0;border-bottom:1px solid #E2EAEC;color:#13252D}
.printsheet .milestable td.big{
  font-size:1.15rem;font-weight:700;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
}
.printsheet .confirm{margin:10px 0 4px;max-width:62ch}
.printsheet .signature{display:flex;gap:36px;margin-top:38px}
.printsheet .signature > div{flex:1}
.printsheet .signature .line{border-bottom:1px solid #13252D;height:26px}
.printsheet .signature span{font-size:.72rem;color:#516C78}
.printsheet .footnote{margin-top:16px;font-size:.7rem;color:#516C78;line-height:1.45;max-width:78ch}
/* Prüfnummer: das Einzige auf dem Blatt, das ein Papierformular nicht kann. */
.printsheet .cardgrid{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start;margin-top:6px}
@media (max-width:520px){.printsheet .cardgrid{grid-template-columns:1fr}}
.printsheet .certbox{margin-top:22px;padding:11px 14px;border:1px solid #13252D}
.printsheet .certcode{
  font-family:ui-monospace,Menlo,monospace;font-size:1.15rem;font-weight:700;letter-spacing:.06em;margin-top:2px;
}
.printsheet .page + .page{margin-top:34px;padding-top:26px;border-top:1px dashed #C9D6DA}

@media print{
  @page{size:A4;margin:15mm}
  /* Hier steckte ein Fehler, den man erst auf dem Papier sieht: am Rechner
     ist body ein Raster mit einer 238 Punkte breiten Spalte für die
     Seitenleiste. Die Leiste wird beim Drucken ausgeblendet — ihre Spalte
     blieb aber stehen, und der Bericht bekam nur den Rest der Seite.
     Beim Drucken gibt es keine Leiste, also auch kein Raster. */
  html,body{
    height:auto;overflow:visible;background:#fff;color:#000;
    display:block!important;
  }
  .topbar,.tabbar,.toast-host,.modal-host,.noprint{display:none!important}
  /* Der Platzhalter für die Leiste am unteren Rand gehört nicht aufs Papier. */
  .view::after{display:none!important}
  /* Ein scrollender Kasten druckt in manchen Browsern nur den sichtbaren
     Ausschnitt — deshalb hier ausdrücklich aufheben. */
  .view{overflow:visible!important;height:auto!important;padding:0!important;display:block}
  .printsheet{
    border:0;border-radius:0;padding:0;font-size:9.5pt;background:#fff;color:#000;
    /* Und die volle Breite nehmen — die Begrenzung auf Lesebreite gilt für
       den Bildschirm, nicht für ein Blatt Papier mit eigenem Rand. */
    max-width:none;width:100%;margin:0;
  }
  .printsheet .printhead{border-color:#000}
  .printsheet h2{font-size:16pt}
  .printsheet h3.dayhead{margin-top:14pt;break-after:avoid;page-break-after:avoid}
  .printsheet thead{display:table-header-group}
  .printsheet tr{break-inside:avoid;page-break-inside:avoid}
  .printsheet .page{break-inside:avoid}
  .printsheet .page.pagebreak{break-before:page;page-break-before:always;margin-top:0;padding-top:0;border-top:0}
  .printsheet .signature{break-inside:avoid;page-break-inside:avoid}
  a[href]::after{content:""}
}