/* Responsive Planung: Seitenpanel am Laptop, verschiebbares Blatt auf Touchgeraeten. */
:root{--panel:392px}
body{font-size:15px}
button,input,select,a.knopf{font-size:14px;min-height:44px}
input,select,.f input,.f select{font-size:16px;height:46px;max-width:100%;min-width:0}
button.klein,a.klein,.reiter button,.beste button,.schliessen{min-height:44px;font-size:13px;padding:9px 12px}
button:focus-visible,input:focus-visible,select:focus-visible,.f input:focus-visible,.f select:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #087f8c;outline-offset:3px}
.panel-inhalt{background:var(--weiss);padding:16px;scroll-padding:16px}
.panel-kopf{min-height:70px;flex-shrink:0}
/* Stand in zwei Zeilen (Uhrzeit, Datum), so breit wie die laengere: begrenzt auf 82 px lief
   das Datum rechtsbuendig nach links ueber den Untertitel */
.stand{white-space:pre;font-size:13px;line-height:1.35}
.pill{font-size:13px}
#reise-kompakt{display:none}
.marke .unter{font-size:13px}
/* Neben Stand und den Knoepfen bleiben der Marke auf dem Tablet rund 150 px: der Textblock darf
   schmaler werden als sein Untertitel, und der bricht um, statt unter den Stand zu laufen */
.panel-kopf .marke>div{min-width:0}
.panel-kopf .marke .unter{white-space:normal}
.planer{padding:0;border:0;box-shadow:none;background:none}
.abschnitt,.tour{box-shadow:none;border:1px solid var(--linie);margin-bottom:14px}
.abschnitt>summary{min-height:48px;padding:14px}
.abschnitt>.inhalt{padding:0 14px 14px}
.leise,.hinweis,.boot-zeile{font-size:13px;line-height:1.6}
.optionen{background:var(--flaeche-hell,#f7f9fb)}
.optionen>summary{font-weight:600;font-size:14px}
#motor-box{margin:12px 0 0;background:var(--weiss)}
.planer{gap:12px}
.f>label,.alarm-form fieldset.wahl>legend{font-size:13px;margin-bottom:6px}

/* Stationen wie bei Google Maps: links das Symbol je Station (Kreis, Nummer, Nadel), gepunktet
   verbunden; rechts neben dem Start das Menü, neben dem Ziel das Umkehren, am Stopp der Griff */
.strecke{display:block}
.strecke-felder{position:relative;width:100%;min-width:0;gap:10px;padding-left:36px}
.strecke-felder::before{content:"";position:absolute;left:12px;top:23px;bottom:23px;border-left:2px dotted var(--rand-dunkel,#9aabb7)}
.strecke .f{position:relative;margin-bottom:0}
.zwischenstopps{display:flex;flex-direction:column;gap:10px;margin:0}
.station-marke{position:absolute;left:-36px;top:0;width:26px;height:46px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.station-von .station-marke::before{content:"";box-sizing:border-box;width:16px;height:16px;border-radius:50%;border:3px solid var(--akzent);background:var(--weiss);box-shadow:0 0 0 3px var(--weiss)}
.station-nach .station-marke::before{content:"";width:22px;height:28px;background:var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 31c0 0 10-11.6 10-19A10 10 0 0 0 2 12c0 7.4 10 19 10 19z' fill='%231f3d52'/%3E%3Ccircle cx='12' cy='12' r='3.8' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/19px 25px}
.stopp .station-marke b{display:block;box-sizing:border-box;width:22px;height:22px;border-radius:50%;background:#f59e0b;color:#fff;font:700 12px/22px var(--kopf);text-align:center;box-shadow:0 0 0 3px var(--weiss)}
.stopp.neu .station-marke b{background:var(--weiss);color:var(--akzent);border:2px dashed var(--akzent);line-height:18px}
.station-knopf{flex:none;width:44px;height:46px;min-height:46px;padding:0;background:transparent;border:0;border-radius:23px;color:var(--leise)}
.station-knopf:hover,.station-knopf[aria-expanded="true"]{background:var(--akzent-hell);border-color:transparent;color:var(--dunkel)}
.stopp-weg{color:var(--leise)}
.stopp-griff{cursor:grab;touch-action:none}
.stopp-griff.still{visibility:hidden}
.zwischenstopps.sortiert .station.stopp:not(.zieht){transition:transform .15s ease}
.station.zieht{z-index:25;background:var(--weiss);border-radius:10px;box-shadow:0 8px 22px rgba(20,40,60,.2)}
.station.zieht .stopp-griff{cursor:grabbing}
/* Am Laptop steht "Zwischenstopp hinzufügen" direkt unter den Stationen, auf dem Handy liegt es im Menü */
.stopp-neu{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:44px;margin:4px 0 6px;padding:0 10px 0 1px;
  background:transparent;border:0;border-radius:8px;color:var(--akzent);font:600 14px/1.3 var(--kopf)}
.stopp-neu svg{flex:none;width:26px;height:26px}
.stopp-neu:hover{background:var(--akzent-hell);border-color:transparent;color:var(--dunkel)}
/* Freie Position nah an einem Hafen: der Hafen als Angebot unter den Stationen */
.hafen-nah{margin:8px 0 2px 36px}
.hafen-nah-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 6px;font-size:13.5px;line-height:1.35;color:var(--dunkel)}
.hafen-nah-zeile span{flex:1 1 180px}

/* Start und Ziel: Suchfeld mit Info-Knopf, Trefferliste mit Standort, Karte und Reichweite */
.suche-zeile{display:flex;gap:8px;align-items:center}
.suche-zeile input{flex:1}
.hafen-info{flex:none;width:46px;height:46px;min-height:46px;padding:0;background:var(--weiss);color:var(--akzent);border:1px solid var(--rand);border-radius:8px}
.hafen-info:hover{background:var(--akzent-hell);color:var(--dunkel)}
/* Die Trefferliste liegt über den folgenden Stationen, die Zeilen verrutschen nicht */
.hafen-treffer{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;border:1px solid var(--rand);border-radius:8px;background:var(--weiss);max-height:300px;overflow-y:auto;box-shadow:0 8px 24px rgba(20,40,60,.16)}
.hafen-option{position:relative;padding:10px 12px;min-height:56px;cursor:pointer;border-bottom:1px solid var(--linie)}
.hafen-option strong,.hafen-option span{display:block}
.hafen-option span{font-size:13px;color:var(--leise)}
.hafen-option:hover,.hafen-option[aria-selected=true]{background:var(--akzent-hell)}
.hafen-option.aktion{padding-left:46px;background:var(--flaeche-hell,#f7fafc)}
.hafen-option.aktion strong{color:var(--akzent)}
.hafen-option.aktion:hover,.hafen-option.aktion[aria-selected=true]{background:var(--akzent-hell)}
.hafen-option.aktion::before{content:"";position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;background:no-repeat center/20px}
/* Ziel auf einem anderen Gewässer als der Start (Binnensee und Meer): ausgegraut, nicht wählbar */
.hafen-option.anders{cursor:not-allowed;background:var(--flaeche-hell,#f4f5f6)}
.hafen-option.anders strong,.hafen-option.anders span{color:var(--leise-grau,#8a949e)}
.hafen-option.anders:hover,.hafen-option.anders[aria-selected=true]{background:var(--flaeche-hell2,#eceef0)}
.aktion-standort::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%233a6b8c'/%3E%3Ccircle cx='12' cy='12' r='7.6' fill='none' stroke='%233a6b8c' stroke-width='1.8'/%3E%3Cpath d='M12 1.6v3.2M12 19.2v3.2M1.6 12h3.2M19.2 12h3.2' stroke='%233a6b8c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.aktion-karte::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 31c0 0 10-11.6 10-19A10 10 0 0 0 2 12c0 7.4 10 19 10 19z' fill='%233a6b8c'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%23fff'/%3E%3C/svg%3E")}
.aktion-reichweite::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%233a6b8c' stroke-width='1.6' stroke-dasharray='3 2.4'/%3E%3Ccircle cx='12' cy='12' r='5.5' fill='none' stroke='%233a6b8c' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%233a6b8c'/%3E%3C/svg%3E")}
.aktion-route::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18c4-1 5-11 9-11s5 7 9 6' fill='none' stroke='%233a6b8c' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7' r='3' fill='%23f59e0b' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E")}
.aktion-hafen::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%233a6b8c' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%233a6b8c'/%3E%3C/svg%3E")}
.aktion-info::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%233a6b8c' stroke-width='1.8'/%3E%3Cpath d='M12 10.5v6' stroke='%233a6b8c' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.4' r='1.2' fill='%233a6b8c'/%3E%3C/svg%3E")}
.hafen-treffer p{padding:12px;margin:0;font-size:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zeile.zwei{grid-template-columns:minmax(0,1fr)}
.zeile.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.zeile.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Das Boot zeigt seine Werte, auch wenn "Bootsdaten anpassen" zu ist */
.boot-kurz{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--leise)}
.toern-grund{display:grid;grid-template-columns:85px 1fr;gap:16px;align-items:center;margin-bottom:14px}
.toern-grund .schalter{margin:0}
.schalter{min-height:44px;font-size:14px}
.schalter input{height:22px;width:22px;min-height:22px;flex-shrink:0}
.panel-fuss{flex-shrink:0;display:flex;gap:8px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--weiss);border-top:1px solid var(--linie)}
.panel-fuss button{flex:1;min-width:0;padding:12px 10px;line-height:1.4}
.panel-fuss .primaer{min-height:48px;font-size:15px;margin:0}
.panel-fuss #strecke-ansehen{font-size:14px;max-width:150px}
/* Bereiche Planen, Gespeichert, Fahrt, Profil: am Laptop eine Reihe oben im Panel, auf dem Handy die Leiste
   unten wie bei Komoot (Rückmeldung vom 2026-09-27: das Blatt war überladen) */
.bereich-leiste{display:flex;gap:4px;flex-shrink:0;padding:6px 12px;background:var(--weiss);border-bottom:1px solid var(--linie)}
.bereich-leiste button{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;
  background:transparent;border:0;border-radius:10px;color:var(--leise);font:600 13px/1.2 var(--kopf)}
.bereich-leiste button svg{flex:none;width:20px;height:20px}
.bereich-leiste button:hover{background:var(--akzent-hell);border-color:transparent;color:var(--dunkel)}
.bereich-leiste button[aria-current="page"]{background:var(--akzent-hell);color:var(--akzent)}
/* Läuft eine Fahrt oder Ankerwache, trägt Fahrt einen Punkt, beim Alarm rot */
.bereich-leiste button.laeuft::after{content:"";position:absolute;top:6px;right:calc(50% - 22px);width:8px;height:8px;border-radius:50%;background:var(--gruen,#1a7f37);box-shadow:0 0 0 2px var(--weiss)}
.bereich-leiste button.alarm::after{background:var(--rot)}
.bereich-ansicht h2{margin:4px 0 6px;font-size:20px}
.bereich-block{margin:16px 0}
.bereich-block>h3{margin:0 0 6px;font:600 12px/1.3 var(--kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.bereich-liste{border:1px solid var(--linie);border-radius:12px;overflow:hidden;background:var(--weiss)}
.bereich-liste .menue-eintrag{min-height:56px;padding:10px 14px}
.bereich-liste .menue-eintrag+.menue-eintrag{border-top:1px solid var(--linie)}
.bereich-liste>p{margin:0;padding:14px}
#profil-boot .f{margin-bottom:6px}
#fahrt-ansicht>.hinweis{margin:12px 2px}
/* Im Plan neben der Abfahrt nur Segeln oder Motor, das Boot selbst steht im Profil */
.art-titel{font:600 13px/1.3 var(--kopf);color:var(--leise);margin-bottom:6px}
.art-wahl .reiter{flex-wrap:nowrap;gap:0;padding:2px;border:1px solid var(--rand);border-radius:10px;background:var(--weiss)}
.art-wahl .reiter button{flex:1;height:44px;min-height:44px;border:0;border-radius:8px;font-size:14px;font-weight:600}
#profil-ansicht>.abschnitt>summary h2{font-size:16px}

/* Fahrt starten: dunkelblau, auch in Dunkel und Nacht (dort mit hellem Rand) */
.panel-fuss .fahrt-start{min-height:48px;font-size:15px;background:#1f3d52;border-color:#1f3d52;color:#fff}
.panel-fuss .fahrt-start:hover{background:#16303f;border-color:#16303f;color:#fff}
:root[data-darstellung="dunkel"] .panel-fuss .fahrt-start,:root[data-darstellung="nacht"] .panel-fuss .fahrt-start{border-color:var(--akzent)}
@media (prefers-color-scheme: dark){:root:not([data-darstellung="hell"]) .panel-fuss .fahrt-start{border-color:var(--akzent)}}
.reise-kopf{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.reise-kopf>div{flex:1;min-width:0}
.reise-kopf h2{font-size:18px;line-height:1.45;margin:6px 0}
.reise-kopf button{font-size:14px;padding:10px 12px;flex-shrink:0}
.reise-kopf .station-knopf{padding:0;height:44px;min-height:44px;margin-left:-4px}
#laden-abbrechen{margin-left:auto;flex:none}

/* Menü am ⋮: am Laptop aufgeklappt unter dem Knopf, auf dem Handy als Blatt von unten mit "Abbrechen" */
.route-menue{position:fixed;z-index:60;width:296px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--weiss);border-radius:12px;box-shadow:0 10px 32px rgba(20,40,60,.24),0 1px 3px rgba(20,40,60,.12);padding:6px 0}
.menue-eintrag{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;min-height:48px;padding:8px 18px;background:none;border:0;border-radius:0;
  color:var(--text);text-align:left;white-space:normal;font:500 14px/1.3 var(--fliess)}
.menue-eintrag:hover,.menue-eintrag:focus-visible{background:var(--akzent-hell);border-color:transparent;color:var(--dunkel)}
.menue-eintrag:focus{outline:none}
a.menue-eintrag{text-decoration:none;color:inherit}
.menue-eintrag:focus-visible{outline:3px solid #087f8c;outline-offset:-3px}
.menue-eintrag svg{flex:none;width:20px;height:20px;color:var(--akzent)}
.menue-eintrag span{display:flex;flex-direction:column;gap:1px;min-width:0}
.menue-eintrag b{font:600 14px/1.3 var(--kopf);color:var(--dunkel)}
.menue-eintrag small{font-size:13px;line-height:1.35;color:var(--leise)}
.menue-trenner{height:1px;margin:6px 0;background:var(--linie)}
.menue-titel{margin:0;padding:6px 18px 10px;font:600 13px/1.4 var(--kopf);color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-menue.blatt{left:0;right:0;top:auto;bottom:0;width:auto;max-width:560px;margin:0 auto;max-height:86dvh;border-radius:18px 18px 0 0;
  padding:10px 0 max(12px,env(safe-area-inset-bottom));animation:blatt-hoch .18s ease-out}
.route-menue.blatt .menue-eintrag{min-height:52px;font-size:15px}
.menue-abbrechen{display:flex;width:calc(100% - 32px);min-height:48px;margin:8px 16px 0;background:var(--flaeche);border:0;border-radius:10px;
  color:var(--dunkel);font:600 15px/1 var(--kopf)}
.menue-abbrechen:hover,.menue-abbrechen:focus-visible{background:var(--akzent-hell);border-color:transparent;color:var(--dunkel)}
.menue-hintergrund{position:fixed;inset:0;z-index:59;background:rgba(20,32,44,.4)}
@keyframes blatt-hoch{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* Kurze Meldung (Link kopiert, abgebrochen ...): am Laptop unten im Panel über der Fußleiste, auf dem Handy mittig */
.meldung{position:fixed;left:calc(var(--panel) / 2);bottom:88px;z-index:70;max-width:min(360px,calc(100vw - 32px));padding:11px 16px;border-radius:10px;background:var(--dunkel);
  color:var(--weiss);font-size:14px;line-height:1.45;box-shadow:0 6px 20px rgba(20,40,60,.25);opacity:0;transform:translate(-50%,8px);
  transition:opacity .2s,transform .2s;pointer-events:none}
.meldung.an{opacity:1;transform:translate(-50%,0)}
/* Anmelden (segeln-konto.js): Karte mittig über einem Schleier, auf dem Handy unten wie ein Blatt */
.konto-fenster{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,32,44,.45)}
.konto-karte{width:380px;max-width:100%;max-height:calc(100dvh - 32px);overflow-y:auto;padding:16px 18px 14px;border:1px solid var(--rand);border-radius:14px;
  background:var(--weiss);color:var(--text);box-shadow:0 12px 32px rgba(20,40,60,.28)}
.konto-karte .einstellungen-kopf h2{font-size:17px}
.konto-karte .schliessen{min-width:44px;min-height:44px;border:0;background:none;color:var(--text);font-size:22px}
.konto-grund{margin:0 0 14px;font-size:14px;line-height:1.5}
button.konto-google{width:100%;min-height:46px;gap:10px;background:var(--weiss);color:var(--text);border:1px solid var(--rand);border-radius:999px;font:600 14px/1.2 var(--kopf)}
button.konto-google:hover{background:var(--akzent-hell);border-color:var(--akzent);color:var(--dunkel)}
.konto-oder{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--leise);font-size:12.5px}
.konto-oder::before,.konto-oder::after{content:"";flex:1;border-top:1px solid var(--linie)}
.konto-form{display:flex;flex-direction:column;gap:6px}
.konto-form label{font:600 11px/1.3 var(--kopf);color:var(--leise)}
.konto-form input{min-height:44px;padding:8px 12px;border:1px solid var(--rand);border-radius:var(--radius-klein);background:var(--weiss);color:var(--text);font-size:16px}
.konto-form input#konto-code{letter-spacing:.3em;font-variant-numeric:tabular-nums;font-size:20px}
.konto-form button[type=submit]{min-height:44px;margin-top:4px;font-size:14px}
.konto-form button.link{align-self:flex-start;margin-top:6px}
.konto-code-text{margin:0 0 6px;font-size:14px}
.konto-fehler{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--rot-bg);color:var(--rot);font-size:13px}
.konto-fuss{margin:14px 0 0}
.konto-wer{margin:0;padding:12px 14px;font-weight:600;overflow-wrap:anywhere}
@media (max-width:899px){
  .konto-fenster{align-items:flex-end;padding:0}
  .konto-karte{width:100%;max-height:92dvh;border-radius:16px 16px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));animation:blatt-hoch .2s ease-out}
}
@media print{.konto-fenster{display:none!important}}
/* Neue Version nach einem Deploy (segeln-version.js): oben mittig, bis neu geladen oder "Später" */
.version-hinweis{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));z-index:80;transform:translateX(-50%);width:max-content;max-width:min(420px,calc(100vw - 32px));
  padding:10px 12px;border-radius:10px;border:2px solid var(--akzent);background:var(--weiss);color:var(--text);font-size:14px;line-height:1.4;box-shadow:0 6px 20px rgba(20,40,60,.25)}
.version-hinweis[hidden]{display:none}
.version-hinweis p{margin:0 0 8px}
.version-knoepfe{display:flex;gap:8px}
/* Cookie-Banner (segeln-cookies.js): schlichtes Kaertchen unten mittig auf der Karte, kein Abdunkeln; drei
   Knoepfe, "Cookies anpassen" klappt im selben Kaertchen die Gruppen auf. Unter der Legende, damit eine
   aufgeklappte ihn verdeckt; aus dem Profil gerufen (.vorn) ueber allem. Weg in Tour, Fahrt, Kartenwahl und Druck */
.cookie-hinweis{position:absolute;left:50%;bottom:12px;z-index:4;transform:translateX(-50%);box-sizing:border-box;
  width:max-content;max-width:min(610px,calc(100% - 240px));padding:10px 12px 10px 14px;border-radius:12px;border:1px solid var(--linie);
  background:var(--weiss);color:var(--leise);font-size:12.5px;line-height:1.4;box-shadow:var(--schatten);animation:cookie-ein .3s ease-out}
.cookie-hinweis.vorn{z-index:30}
.cookie-hinweis[hidden],.onboarding-offen .cookie-hinweis,.app.fahrt-laeuft .cookie-hinweis,.app.kartenwahl .cookie-hinweis{display:none}
.cookie-hinweis p{margin:0 0 8px}
.cookie-hinweis a{color:var(--akzent);white-space:nowrap}
.cookie-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.cookie-hinweis button.klein{min-height:32px;padding:4px 12px;font-size:12px;white-space:nowrap}
.cookie-hinweis button.haupt{background:var(--akzent);border-color:var(--akzent);color:var(--knopf-text)}
.cookie-hinweis button.haupt:hover{background:var(--akzent-hover);border-color:var(--akzent-hover);color:var(--knopf-text)}
.cookie-wahl,.cookie-hinweis.anpassen .cookie-start{display:none}
.cookie-hinweis.anpassen .cookie-wahl{display:block}
.cookie-wahl h2{margin:0 0 8px;font:600 13.5px/1.3 var(--kopf);color:var(--dunkel)}
.cookie-wahl h2:focus{outline:none}
.cookie-gruppe{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;cursor:pointer}
.cookie-gruppe input{width:18px;height:18px;min-height:0;margin:1px 0 0;padding:0;flex:none;accent-color:var(--akzent)}
.cookie-gruppe b{display:block;color:var(--text);font-weight:600}
@keyframes cookie-ein{from{opacity:0}to{opacity:1}}
/* Tour beim ersten Öffnen (segeln-onboarding.js): alles abgedunkelt bis auf das Element des Schritts, daneben die Blase mit Pfeil */
.rundgang{position:fixed;inset:0;z-index:90;cursor:default;animation:rundgang-ein .2s ease-out}
.rundgang[hidden]{display:none}
.rundgang-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 3px var(--akzent2),0 0 0 9999px rgba(15,26,36,.58);pointer-events:none;
  transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease}
.rundgang.mitte .rundgang-spot{box-shadow:0 0 0 9999px rgba(15,26,36,.58)}
.rundgang-pfeil{position:fixed;color:var(--weiss);filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));pointer-events:none;animation:rundgang-pfeil 1s ease-in-out infinite}
.rundgang-pfeil.runter{transform:rotate(180deg);animation-name:rundgang-pfeil-runter}
.rundgang.mitte .rundgang-pfeil{display:none}
.rundgang-blase{position:fixed;box-sizing:border-box;padding:16px 16px 12px;border-radius:14px;background:var(--weiss);color:var(--text);
  box-shadow:0 14px 40px rgba(0,0,0,.35);transition:left .3s ease,top .3s ease}
.rundgang-blase:focus{outline:none}
.rundgang-zu{position:absolute;top:8px;right:8px;width:34px;height:34px;min-height:0;padding:0;border-radius:50%;background:var(--flaeche);border-color:transparent;
  color:var(--leise);font:400 21px/1 var(--fliess)}
.rundgang-zu:hover{background:var(--akzent-hell);border-color:transparent;color:var(--dunkel)}
.rundgang-zahl{margin:0 40px 2px 0;font:600 12px/1.3 var(--kopf);letter-spacing:.03em;color:var(--akzent)}
.rundgang-blase h2{margin:0 40px 6px 0;font:600 18px/1.3 var(--kopf);color:var(--dunkel)}
.rundgang-text{margin:0;font-size:14.5px;line-height:1.5}
.rundgang-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin-top:12px}
.rundgang-punkte{display:flex;gap:2px;flex:1 0 auto}
.rundgang-knoepfe{display:flex;gap:6px;margin-left:auto}
.rundgang-punkt{width:18px;height:24px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent}
.rundgang-punkt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rand);transition:width .15s,background-color .15s}
.rundgang-punkt:hover{background:transparent}
.rundgang-punkt[aria-current=step]::before{width:16px;border-radius:4px;background:var(--akzent)}
.rundgang-fuss #onboarding-weiter{min-width:88px}
/* die Modellwahl im Ebenen-Menü, auf die die Tour hinunterscrollt */
.feld-zeile.rundgang-hervor{border-radius:8px;background:var(--akzent-hell);box-shadow:0 0 0 6px var(--akzent-hell)}
.onboarding-offen,.onboarding-offen body{overflow:hidden}
@keyframes rundgang-ein{from{opacity:0}to{opacity:1}}
@keyframes rundgang-pfeil{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
@keyframes rundgang-pfeil-runter{0%,100%{transform:rotate(180deg) translateY(4px)}50%{transform:rotate(180deg) translateY(-4px)}}
@media(max-width:560px){
  .rundgang-fuss button{min-height:40px}
}
#plan-status{display:block;font-size:13px;color:var(--gruen-text,#38624d);font-weight:600}
.ergebnis-reiter{position:sticky;top:-16px;z-index:12;display:flex;gap:2px;background:var(--weiss);border-bottom:1px solid var(--linie);padding:6px 0;margin-bottom:16px}
.ergebnis-reiter button{flex:1;border:0;border-radius:6px;background:transparent;color:var(--leise);padding:10px 4px;font-size:15px}
.ergebnis-reiter button[aria-selected=true]{background:var(--akzent-hell);color:var(--dunkel)}
.leer-text{padding:18px;background:var(--flaeche);border-radius:10px;line-height:1.7}

/* Bewertung: Punktzahl groß und farbig, daneben die konkrete Aussage */
.tour-kopf{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-bottom:16px}
.punkte-kreis{flex:none;width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid currentColor;line-height:1}
.punkte-kreis b{font:700 30px/1 var(--kopf)}
.punkte-kreis small{font:600 13px/1.2 var(--kopf);margin-top:2px}
.punkte-kreis.gruen{color:var(--gruen);background:var(--gruen-bg)}
.punkte-kreis.gelb{color:var(--gelb);background:var(--gelb-bg)}
.punkte-kreis.rot{color:var(--rot);background:var(--rot-bg)}
.tour-aussage{min-width:0}
.schlagzeile{font:600 17px/1.4 var(--kopf);color:var(--dunkel);margin:0}
.bewertung-bezug{font-size:13px;line-height:1.45;color:var(--leise);margin:4px 0 0}
.tour-strecke{display:none}
.kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kachel{min-width:0;padding:12px;background:var(--flaeche-hell,#f4f7f9)}
.kachel .wert{font-size:21px}
.kachel .wert small{font-size:13px}
.kachel .label{font-size:13px}
.befunde-titel{font:600 15px/1.3 var(--kopf);color:var(--dunkel);margin:18px 0 8px}
.befunde{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.befund{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 12px;background:var(--gelb-bg-hell,#fff7e9);border-left:3px solid var(--gelb);border-radius:6px}
.befund.sperre{background:var(--rot-bg);border-left-color:var(--rot)}
.befund-bezug{grid-column:1/-1;font-size:13px;line-height:1.4;color:var(--leise)}
.befund-text{font-size:15px;line-height:1.5}
.befund-abzug{align-self:start;font:600 13px/1.6 var(--kopf);color:var(--gelb);white-space:nowrap}
.befund.sperre .befund-abzug{color:var(--rot)}
/* Ein Tipp auf den Befund zeigt seinen Abschnitt auf der Karte */
.befund.zeigbar{cursor:pointer}
.befund-karte{color:var(--akzent)}
.befund.zeigbar:hover{filter:brightness(.97)}
.befund.zeigbar:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.befunde-mehr{margin:0 0 12px}
.befunde-mehr>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 14px/1.4 var(--kopf);color:var(--akzent)}
.bezug{font:600 13px/1.45 var(--kopf);color:var(--leise);margin:16px 0 4px}
.tour .klartext{font-size:15px;line-height:1.65}
.etappe{padding:14px 12px 14px 40px}
.etappe button{margin-top:10px}

/* Abfahrten im Vergleich: Streifen über 120 Stunden, darunter deine Abfahrt und die besten Tage */
.abfahrten-box>.inhalt{padding:16px 14px 14px}
.abfahrten-box h2{font-size:17px;margin:0 0 4px}
.abfahrt-tage{position:relative;height:18px;margin-top:10px;font-size:13px;color:var(--leise)}
.abfahrt-tage span{position:absolute;top:0;padding-left:3px;border-left:1px solid var(--rand);line-height:18px}
.abfahrt-streifen{position:relative;padding-bottom:14px}
.abfahrt-streifen .zellen{display:flex;height:20px;border-radius:4px;overflow:hidden}
.abfahrt-streifen i{flex:1;min-width:0}
.abfahrt-streifen i.gruen{background:var(--gruen)}
.abfahrt-streifen i.gelb{background:#d9a441}
.abfahrt-streifen i.rot{background:var(--rot)}
.abfahrt-streifen i.nacht{opacity:.3}
.abfahrt-streifen .marke,.marke-legende{position:absolute;bottom:0;width:0;height:0;margin-left:-7px;border:7px solid transparent;border-top:0;border-bottom:10px solid var(--dunkel)}
.abfahrt-streifen .marke.alternative,.marke-legende.alternative{border-bottom-color:var(--gruen)}
.marke-legende{position:relative;display:inline-block;margin:0 4px 0 6px;vertical-align:middle}
.abfahrt-legende{font-size:13px;color:var(--leise);margin:4px 0 0;line-height:1.5}
.abfahrt-liste{list-style:none;margin:14px 0 8px;padding:0;display:flex;flex-direction:column;gap:10px}
.abfahrt{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--linie);border-radius:10px;background:var(--weiss)}
.abfahrt.gewaehlt{background:var(--akzent-hell);border-color:var(--rand-akzent,#c5d8e5)}
.abfahrt.beste{border-color:var(--gruen);box-shadow:inset 3px 0 0 var(--gruen)}
.abfahrt-punkte{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid currentColor;font:700 21px/1 var(--kopf)}
.abfahrt-punkte.gruen{color:var(--gruen);background:var(--gruen-bg)}
.abfahrt-punkte.gelb{color:var(--gelb);background:var(--gelb-bg)}
.abfahrt-punkte.rot{color:var(--rot);background:var(--rot-bg)}
.abfahrt-text p{margin:0 0 4px}
.abfahrt-zeit{font-size:14px;line-height:1.45}
.abfahrt-zeit .pill{font-size:12px;vertical-align:1px}
.abfahrt-aussage{font:600 15px/1.4 var(--kopf);color:var(--dunkel)}
.abfahrt-werte{font-size:13px;line-height:1.5;color:var(--leise)}
.abfahrt-diff{font:600 13px/1.5 var(--kopf);color:var(--dunkel)}
.abfahrt button{margin-top:8px}
#fenster-oeffnen{min-height:44px}

#kontext-zurueck{margin-bottom:16px}
.reichweite-hafen{display:block;width:100%;text-align:left;margin:8px 0}
#profil-ansicht>.abschnitt{margin-top:14px}
#fenster{overflow-x:auto;padding-bottom:8px}
.fenster-tag{min-width:1150px}
.fenster-zellen button{min-width:44px;min-height:44px;font-size:13px}
.fenster-tag .datum{font-size:13px;min-width:66px}
.fenster-zellen{gap:2px}

/* Zeitleiste der Kartenvorschau: "Karte" kennzeichnet den Bezug, die Abfahrt hat eine eigene Marke */
.zeitleiste{padding:10px 18px 8px;flex-shrink:0}
.zeit-kopf{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.zeit-bezug{flex:none;font:600 13px/1 var(--kopf);color:var(--akzent);background:var(--akzent-hell);border-radius:999px;padding:5px 10px}
.zeit-label{flex:1 1 auto;min-width:0;margin:0;font:600 13px/1.4 var(--kopf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeit-knoepfe{flex:none;display:flex;gap:6px}
#zeit-abfahrt::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#d97a14}
#zeit-abfahrt:disabled::before{opacity:.4}
.zeit-spur{position:relative}
#zeit{display:block;width:100%;height:44px;min-height:44px;margin:0;accent-color:var(--akzent)}
.zeit-abfahrt-marke{position:absolute;top:10px;width:4px;height:24px;margin-left:-2px;border-radius:2px;background:#d97a14;pointer-events:none}
.zeit-marken{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--leise)}
.zeit-marken .zeit-hinweis{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Karte */
.feld-steuerung{max-height:min(65dvh,540px);overflow-y:auto;max-width:calc(100vw - 90px)}
.feld-steuerung .reiter{flex-wrap:wrap}
#karten-inhalte{border:0;border-top:1px solid var(--linie);margin:12px 0 0;padding:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px}
#karten-inhalte legend{font-size:13px;font-weight:600;padding:0 6px 0 0}
#ebenen-knopf{min-height:44px}
#route-zeigen{position:absolute;right:12px;top:116px;z-index:5;background:var(--weiss);box-shadow:var(--schatten);min-height:44px;font-size:14px;padding:10px 14px}
/* Route von Hand: am Schreibtisch unten mittig auf der Karte, oben liegen Ebenen und Zoom;
   auf dem Handy oben wie der Wahlmodus (unten liegt das Blatt) */
#hand-leiste{top:auto;bottom:28px}
.standort-knopf{min-height:44px;width:44px;height:44px;right:12px;bottom:12px;top:auto}
/* Ankerwache: Knopf ueber dem Standortknopf, Panel daneben auf der Karte */
.anker-knopf{position:absolute;right:12px;bottom:64px;z-index:5;width:44px;height:44px;min-height:44px;padding:0;
  border-radius:var(--radius-klein);background:var(--weiss);color:var(--akzent);border:1px solid rgba(20,40,60,.12);box-shadow:var(--schatten)}
.anker-knopf:hover{background:var(--akzent-hell);border-color:var(--akzent);color:var(--dunkel)}
.anker-knopf.an{background:var(--akzent);color:var(--weiss);border-color:var(--akzent)}
.anker-knopf.alarm{background:var(--rot);border-color:var(--rot);color:var(--weiss);animation:anker-blinken 1s steps(2) infinite}
@keyframes anker-blinken{50%{opacity:.35}}
.anker-panel{position:absolute;right:68px;bottom:12px;z-index:16;width:min(340px,calc(100% - 92px));max-height:calc(100% - 24px);overflow-y:auto;
  background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);padding:12px 14px;font-size:13px}
.anker-panel.alarm{outline:3px solid var(--rot)}
.anker-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px}
.anker-kopf h2{font-size:15px;margin:0}
.anker-status{margin:8px 0 4px;font-weight:600}
.anker-panel.alarm .anker-status{color:var(--rot)}
.anker-nacht{margin:0 0 8px;color:var(--leise)}
.anker-nacht:empty{display:none}
.anker-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0}
.anker-felder label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--leise)}
.anker-felder input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--rand);border-radius:var(--radius-klein);min-width:0}
.anker-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.anker-knoepfe .haupt{background:var(--akzent);color:var(--weiss);border-color:var(--akzent)}
.anker-gewitter{margin:0 0 8px}
.anker-gewitter:empty{display:none}
.anker-gewitter.gelb{color:var(--gelb)}
.anker-gewitter.rot{color:var(--rot);font-weight:600}
/* Fahrtmodus (segeln-fahrt.js): Knopf ueber der Ankerwache, Panel an ihrer Stelle */
.fahrt-knopf{position:absolute;right:12px;bottom:116px;z-index:5;width:44px;height:44px;min-height:44px;padding:0;
  border-radius:var(--radius-klein);background:var(--weiss);color:var(--akzent);border:1px solid rgba(20,40,60,.12);box-shadow:var(--schatten)}
.fahrt-knopf:hover{background:var(--akzent-hell);border-color:var(--akzent);color:var(--dunkel)}
.fahrt-knopf.an{background:var(--akzent);color:var(--weiss);border-color:var(--akzent)}
.fahrt-knopf.alarm{background:var(--rot);border-color:var(--rot);color:var(--weiss);animation:anker-blinken 1s steps(2) infinite}
.fahrt-panel{z-index:17;width:min(520px,calc(100% - 92px))}
.fahrt-name{font-weight:400;font-size:12.5px;color:var(--leise)}
/* Kopf als Griff: am Kopf ziehen verschiebt das Feld, "Kleiner" laesst nur die Fahrtdaten stehen */
.fahrt-kopf{position:relative;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;padding-top:4px}
.fahrt-kopf h2{flex:1;min-width:0}
.fahrt-kopf button{flex:none}
.fahrt-griff{position:absolute;top:-5px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--rand)}
.fahrt-panel.zieht{box-shadow:0 8px 28px rgba(20,40,60,.3)}
.fahrt-panel.zieht .fahrt-kopf{cursor:grabbing}
.fahrt-mini[hidden]{display:none}
.fahrt-panel.mini .fahrt-kopf h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fahrt-panel.mini .fahrt-eta,.fahrt-panel.mini .fahrt-kreuz,.fahrt-panel.mini .fahrt-wetter,.fahrt-panel.mini #fahrt-laufend,.fahrt-panel.mini #fahrt-grenzen,
.fahrt-panel.mini .anker-status{display:none}
.fahrt-panel.mini.alarm .anker-status{display:block}
/* bei Alarm bleibt verkleinert der Knopf "Alarm stumm" stehen */
.fahrt-panel.mini.alarm #fahrt-laufend{display:block}
.fahrt-panel.mini.alarm #fahrt-laufend .anker-knoepfe>:not(#fahrt-still),.fahrt-panel.mini.alarm #fahrt-laufend details{display:none}
.fahrt-panel.mini .fahrt-werte{margin-bottom:0}
.fahrt-feld{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--leise);margin:6px 0}
.fahrt-feld select,.fahrt-feld input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--rand);border-radius:var(--radius-klein);min-width:0;color:var(--text)}
.fahrt-werte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:6px 0 2px}
.fahrt-werte[hidden]{display:none}
.fahrt-wert{background:var(--akzent-hell);border-radius:var(--radius-klein);padding:4px 6px;min-width:0}
.fahrt-wert b{display:block;font:600 18px/1.15 var(--kopf);color:var(--dunkel);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fahrt-wert small{display:block;font-size:10.5px;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fahrt-eta{grid-column:1/-1}
/* Freie Fahrt: Breite und Laenge brauchen Platz, drei Kacheln oben, zwei breite darunter */
.fahrt-werte.frei{grid-template-columns:repeat(6,minmax(0,1fr))}
.fahrt-werte.frei .fahrt-wert{grid-column:span 2}
.fahrt-werte.frei #fahrt-wp,.fahrt-werte.frei #fahrt-abweichung{grid-column:span 3}
/* Bordinstrumente (segeln-bord.js): Feld an der Stelle der Ankerwache, Kacheln wie im Fahrtmodus */
.bord-panel{z-index:18;width:min(520px,calc(100% - 92px))}
.bord-werte{grid-template-columns:repeat(4,minmax(0,1fr))}
.bord-werte:empty,.bord-fahrt:empty{display:none}
.bord-wert.alt b{color:var(--leise)}
.bord-verbindung{display:grid;grid-template-columns:3fr 1fr;gap:6px;align-items:end}
.bord-verbindung>:first-child,#bord-token-feld,#bord-tls-feld,#bord-geraet-feld,#bord-geraet-knopf{grid-column:1/-1}
#bord-format-felder{grid-template-columns:1fr 1fr}
.bord-verbindung .fahrt-feld{margin:2px 0}
.bord-verbindung[hidden],.bord-panel [hidden]{display:none}
.bord-panel .schalter{display:flex;gap:6px;align-items:flex-start;margin:6px 0;font-size:13px}
.bord-dienste{display:flex;flex-direction:column;gap:4px;margin:4px 0}
.bord-dienste:empty{display:none}
.bord-dienst{text-align:left}
.knopf-datei{display:inline-flex;align-items:center;cursor:pointer;border:1px solid var(--rand);border-radius:var(--radius-klein);padding:6px 10px;font-size:12.5px;min-height:36px}
.bord-ais-liste{list-style:none;margin:4px 0;padding:0;font-size:12.5px}
.bord-ais-liste li{padding:2px 0;border-bottom:1px solid var(--rand)}
.bord-polare-tabelle{overflow-x:auto}
.bord-polare-tabelle table{border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums}
.bord-polare-tabelle th,.bord-polare-tabelle td{padding:2px 5px;text-align:right;border-bottom:1px solid var(--rand)}
.anker-bord{margin:0 0 8px}
.anker-bord:empty{display:none}
.bord-alarm{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:30;max-width:calc(100% - 24px);
  background:var(--rot);color:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);padding:8px 12px;font-weight:600;font-size:14px;
  display:flex;gap:10px;align-items:center;animation:anker-blinken 1s steps(2) infinite}
.bord-alarm[hidden]{display:none}
.bord-alarm button{background:var(--weiss);color:var(--rot);border-color:var(--weiss)}
.fahrt-kreuz{margin:4px 0 2px;padding:5px 8px;border-left:3px solid #0e7490;background:var(--akzent-hell);border-radius:var(--radius-klein)}
.fahrt-kreuz[hidden]{display:none}
.fahrt-kreuz p{margin:1px 0;font-size:12.5px;font-variant-numeric:tabular-nums}
.fahrt-kreuz-jetzt{font-weight:600}
.fahrt-kreuz .kreuz-anzeige{margin:2px 0 4px}
.fahrt-kreuz .kreuz-anzeige button{min-height:36px;padding:6px 10px}
.fahrt-kreuz-stand{color:var(--leise);font-size:11.5px!important}
.fahrt-kreuz-knoepfe{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;margin-top:3px}
/* Wetter unterwegs: Stand, Punktzahl und Aussage, der Rand in der Ampelfarbe der Bewertung */
.fahrt-wetter{display:flex;align-items:center;gap:8px;margin:4px 0 2px;padding:5px 8px;border-left:3px solid var(--rand);background:var(--flaeche-hell,#f7f9fb);border-radius:var(--radius-klein)}
.fahrt-wetter[hidden]{display:none}
.fahrt-wetter p{flex:1 1 auto;margin:0;font-size:12.5px;min-width:0}
.fahrt-wetter button{flex:0 0 auto}
.fahrt-wetter.gruen{border-left-color:var(--gruen)}
.fahrt-wetter.gelb{border-left-color:var(--gelb)}
.fahrt-wetter.rot{border-left-color:var(--rot)}
.fahrt-bordwind summary{cursor:pointer;font-size:12.5px}
.fahrt-bordwind .fahrt-feld{display:block;margin:3px 0}
.fahrt-eta p{margin:1px 0;font-size:12.5px;font-variant-numeric:tabular-nums}
.fahrt-eta p[hidden]{display:none}
.fahrt-panel .anker-status{margin:4px 0 2px;font-size:12.5px}
.fahrt-panel .anker-knoepfe{margin:4px 0}
/* Waehrend der Fahrt gehoert der Bildschirm der Karte: keine Zeitleiste, kein "Route zeigen";
   im Nur-Karte-Modus (wie die Navigation bei Google Maps) auch kein Blatt und kein Tourpanel */
.app.fahrt-laeuft .zeitleiste,.app.fahrt-laeuft #route-zeigen{display:none!important}
/* Kurs oben (segeln-fahrt.js drehen): die Karte auf die Diagonale ihres Felds vergrößert und um -Kurs gedreht,
   Zoom und Quellenangabe genau zurückgedreht, damit sie an ihrem Platz bleiben */
.karte-feld.karte-dreht{overflow:hidden}
.karte.kurs-oben{inset:calc(-1 * var(--dreh-y,0px)) calc(-1 * var(--dreh-x,0px));transform:rotate(var(--dreh-w,0deg));transform-origin:50% 50%}
.karte.kurs-oben .leaflet-control-container{position:absolute;inset:var(--dreh-y,0px) var(--dreh-x,0px);transform:rotate(calc(-1 * var(--dreh-w,0deg)));transform-origin:50% 50%;pointer-events:none}
.app.fahrt-vollbild .panel,.app.fahrt-vollbild .panel-griff{display:none!important}
.fahrt-panel.alarm #fahrt-abweichung{background:var(--rot-bg)}
.fahrt-panel.alarm #fahrt-abweichung b{color:var(--rot)}
.fahrt-boot{background:none;border:0}
.fahrt-boot svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
/* Seekarte: Schalter im Ebenen-Menue, Notiz zur Route je Land (segeln-seekarte.js) */
#seekarte-inhalte{border:0;border-top:1px solid var(--linie);margin:12px 0 0;padding:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px}
#seekarte-inhalte legend{font-size:13px;font-weight:600;padding:0 6px 0 0}
.seekarte-info{flex-basis:100%;margin:0;font-size:12px}
#seekarte-paket{flex-basis:100%;text-align:left}
#seekarte-paket-stand{flex-basis:100%;margin:0;font-size:12px}
#seekarte-paket-stand:empty{display:none}
/* Schiffsverkehr (AIS): Schalter, Farbrampe der Verkehrsdichte und Schiffe live (segeln-ais.js) */
#ais-inhalte{border:0;border-top:1px solid var(--linie);margin:12px 0 0;padding:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px}
#ais-inhalte legend{font-size:13px;font-weight:600;padding:0 6px 0 0}
.ais-info,.ais-legende{flex-basis:100%;margin:0;font-size:12px}
.ais-rampe{display:inline-flex;gap:2px;vertical-align:middle}
.ais-rampe span{display:inline-flex;align-items:center;gap:2px}
.ais-rampe i{display:inline-block;width:14px;height:10px;border-radius:2px}
.ais-schiff{background:none;border:0}
.ais-schiff svg{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.seekarte-hinweis p{margin:4px 0;font-size:13px}
.seekarte-hinweis .stufe{font-weight:600;padding:0 6px;border-radius:999px;white-space:nowrap}
.seekarte-hinweis .stufe.amtlich{background:var(--gruen-bg);color:var(--gruen)}
.seekarte-hinweis .stufe.teilweise{background:var(--gelb-bg);color:var(--gelb)}
.seekarte-hinweis .stufe.grob{background:var(--rot-bg);color:var(--rot)}
.pill.seekarte-amtlich{background:var(--gruen-bg);color:var(--gruen)}
.pill.seekarte-teilweise{background:var(--gelb-bg);color:var(--gelb)}
.pill.seekarte-grob{background:var(--rot-bg);color:var(--rot)}
/* Gewitter und Regen, naechste Stunde (Punktanalyse) */
.kurzfrist p{margin:4px 0}
.kurzfrist-wache{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 10px}
#kurzfrist-wache.an{background:var(--akzent);color:var(--weiss);border-color:var(--akzent)}
.regen-streifen rect{fill:var(--akzent)}
.regen-streifen rect.vorhersage{opacity:.45}
.regen-streifen line.jetzt{stroke:var(--rot);stroke-width:1.5}
.regen-streifen text{font-size:9px;fill:var(--leise)}

/* Welches Modell lag zuletzt richtig? (segeln-validierung.js) */
.validierung p{margin:4px 0}
.validierung-tabelle{width:100%}
/* .tabelle td setzt nowrap: die Modellspalte muss umbrechen, sonst schiebt sie Tendenz aus dem Panel */
.validierung-tabelle th,.validierung-tabelle td{padding:5px 6px}
.validierung-tabelle td.modell{white-space:normal;overflow-wrap:anywhere}
.validierung-tabelle td.modell small{display:block;color:var(--leise);font-size:11px;font-weight:400}
.validierung-tabelle td.daneben,.validierung-tabelle td.tendenz{white-space:nowrap}
.validierung-tabelle .balken{display:inline-block;height:8px;margin-right:6px;border-radius:2px;background:var(--akzent2);vertical-align:middle}
.validierung-tabelle tr.bestes td{background:var(--gruen-bg)}
.validierung-tabelle tr.bestes td.modell{font-weight:600}
.validierung-tabelle tr.bestes .balken{background:var(--gruen)}
.validierung-figur{margin:8px 0 4px;max-width:420px}
.validierung-verlauf{width:100%;height:auto;display:block}
.validierung-verlauf polyline{fill:none;stroke-width:1.6;stroke-linejoin:round}
.validierung-verlauf polyline.v-gemessen{stroke:var(--text);stroke-width:2}
.validierung-verlauf polyline.v-beste{stroke:var(--gruen)}
.validierung-verlauf polyline.v-letzte{stroke:var(--rot);stroke-dasharray:4 3}
.validierung-verlauf line.achse{stroke:var(--linie)}
.validierung-verlauf text{font-size:9px;fill:var(--leise)}
.validierung-figur figcaption{font-size:12px;color:var(--leise)}
.validierung-figur figcaption span{white-space:nowrap;margin-right:10px}
.validierung-figur figcaption span::before{content:"";display:inline-block;width:14px;height:0;margin-right:4px;vertical-align:middle;border-top:2px solid currentColor}
.validierung-figur figcaption .v-gemessen{color:var(--text)}
.validierung-figur figcaption .v-beste{color:var(--gruen)}
.validierung-figur figcaption .v-letzte{color:var(--rot)}
.validierung-figur figcaption .v-letzte::before{border-top-style:dashed}
.modelle tr.zuletzt-bestes td:first-child{box-shadow:inset 3px 0 0 var(--gruen)}
.marke-bestes{display:inline-block;margin-left:4px;padding:0 5px;border-radius:8px;font-size:10px;line-height:16px;background:var(--gruen-bg);color:var(--gruen);white-space:nowrap}
.anker-grenzen summary{cursor:pointer;font-size:12px;color:var(--leise)}
.anker-grenzen .hinweis{margin-top:6px}
.anker-pin span{display:block;width:30px;height:30px;line-height:30px;text-align:center;font-size:17px;border-radius:50%;
  background:var(--weiss);border:2px solid var(--akzent);box-shadow:var(--schatten)}
.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important}
.leaflet-control-attribution{max-width:100%}
.ebenen-box{max-width:calc(100% - 76px)}
.legende{max-width:calc(100% - 80px)}
.legende>summary{min-height:44px;display:flex;align-items:center;padding:10px 14px}
.legende-inhalt{max-height:40dvh;overflow-y:auto}
.feld-steuerung>.legende{position:static;max-width:100%;box-shadow:none;border-top:1px solid var(--linie);width:100%}
/* Über Wind, Böen, Druck ... liegen die Kacheln grau und multipliziert: Küsten, Grenzen und Orte bleiben lesbar */
.leaflet-kartenOben-pane{mix-blend-mode:multiply}
.osm-oben .leaflet-tile{filter:grayscale(1) brightness(1.1)}

@media(max-width:899px){
  :root{--nav-h:calc(60px + env(safe-area-inset-bottom,0px))}
  .app{position:relative;display:block;--sheet-height:50dvh}
  /* Karte wählen und laufende Fahrt: die Leiste geht mit dem Blatt */
  .app.kartenwahl,.app.fahrt-vollbild{--nav-h:0px}
  .bereich-leiste{position:fixed;left:0;right:0;bottom:0;z-index:25;box-sizing:border-box;height:var(--nav-h);gap:2px;padding:4px 6px env(safe-area-inset-bottom,0px);
    border-top:1px solid var(--linie);border-bottom:0}
  .bereich-leiste button{flex-direction:column;gap:3px;min-height:52px;padding:4px 2px;font-size:11.5px;border-radius:12px}
  .bereich-leiste button:hover{background:transparent}
  .bereich-leiste button svg{width:22px;height:22px;padding:2px 14px;border-radius:999px;box-sizing:content-box}
  .bereich-leiste button[aria-current="page"]{background:transparent;color:var(--akzent)}
  .bereich-leiste button[aria-current="page"] svg{background:var(--akzent-hell)}
  .bereich-leiste button.laeuft::after{top:4px;right:calc(50% - 24px)}
  .karte-wrap{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0}
  .karte-feld{position:absolute;inset:0}
  .app .panel,.app.zu .panel{position:absolute;left:0;right:0;bottom:var(--nav-h);z-index:20;display:flex;flex-direction:column;width:100%;max-height:calc(100% - 56px - var(--nav-h));height:var(--sheet-height);margin:0;border-radius:20px 20px 0 0;box-shadow:0 -3px 24px #203d5226;overflow:hidden}
  .sheet-griff{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:100%;height:44px;min-height:44px;border:0;border-radius:20px 20px 0 0;padding:0;touch-action:none;cursor:ns-resize;background:var(--weiss)}
  .sheet-griff span{width:42px;height:5px;border-radius:3px;background:var(--rand-dunkel,#a3b1ba)}
  .panel-kopf{padding:0 16px 10px;min-height:44px}
  .app[data-ansicht="resultat"] .panel-kopf{min-height:36px;padding-bottom:6px}
  .panel-inhalt{padding:12px 16px;min-height:0}
  .panel-fuss{padding:10px 16px}
  .app[data-sheet="0"] .panel-inhalt{display:none}
  .app[data-sheet="0"] .panel-kopf{border-bottom:0;min-height:40px}
  .app[data-sheet="0"][data-ansicht="resultat"] .marke{display:none}
  .app[data-sheet="0"][data-ansicht="resultat"] #reise-kompakt{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kompakt-punkte{flex:none;padding:3px 10px;border-radius:999px;font:700 14px/1.4 var(--kopf)}
  .kompakt-punkte.gruen{color:var(--gruen);background:var(--gruen-bg)}
  .kompakt-punkte.gelb{color:var(--gelb);background:var(--gelb-bg)}
  .kompakt-punkte.rot{color:var(--rot);background:var(--rot-bg)}
  .app[data-sheet="0"][data-ansicht="kontext"] .panel-inhalt{display:block}
  /* Noch ohne Start (in der Passage auch ohne Ziel): keine Knöpfe unten, das kleinste Blatt zeigt nur das Startfeld */
  .app.plan-leer[data-ansicht="plan"] .panel-fuss{display:none}
  .app[data-sheet="0"].plan-leer[data-ansicht="plan"] .panel-inhalt{display:block;overflow:hidden}
  .app[data-sheet="0"].plan-leer[data-ansicht="plan"] .panel-inhalt>*:not(#plan-ansicht),
  .app[data-sheet="0"].plan-leer[data-ansicht="plan"] #plan-ansicht>*:not(#form),
  .app[data-sheet="0"].plan-leer[data-ansicht="plan"] #form>*:not(.strecke),
  .app[data-sheet="0"].plan-leer[data-ansicht="plan"] .strecke-felder>*:not(.station-von),
  .app[data-sheet="0"].plan-leer[data-ansicht="plan"] .strecke-felder::before{display:none}
  .app[data-sheet="0"][data-ansicht="kontext"] #kontext-ansicht>*:not(#kontext-zurueck){display:none}
  /* Keine Marke auf dem Handy, sie nahm nur Platz: der Kopf bleibt für Screenreader und zeigt sich
     allein im kleinsten Blatt des Ergebnisses, dort mit Strecke und Punktzahl */
  .app:not([data-sheet="0"][data-ansicht="resultat"]) .panel-kopf{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .app[data-ansicht="plan"] .panel-inhalt{padding-top:4px}
  .app.karte-knapp[data-sheet="1"] .zeitleiste{display:none}
  /* Zeitleiste als Karte über dem Blatt: Kennzeichen und Zeit, darunter die Spur; die Knöpfe
     erscheinen, wenn das Blatt klein ist und die Karte im Mittelpunkt steht */
  .zeitleiste{position:absolute;left:10px;right:10px;bottom:calc(var(--sheet-height) + var(--nav-h) + 8px);z-index:8;background:var(--weiss);border-radius:12px;box-shadow:var(--schatten);
    padding:8px 12px 4px;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"bezug label" "spur spur" "knoepfe knoepfe";column-gap:8px;align-items:center}
  .zeitleiste[hidden]{display:none}
  .zeit-kopf{display:contents}
  .zeit-bezug{grid-area:bezug}
  .zeit-label{grid-area:label}
  .zeit-spur{grid-area:spur}
  .zeit-knoepfe{grid-area:knoepfe;padding-bottom:6px}
  .zeit-knoepfe button{flex:1}
  .zeit-marken{display:none}
  .app[data-sheet="1"] .zeit-knoepfe{display:none}
  .app[data-sheet="2"] .zeitleiste{display:none}
  .app.ebenen-offen #route-zeigen{display:none}
  /* Ein offenes Popup auf der Karte liegt unter den Kartenknöpfen und der Leiste von Hand (die Karte ist eine eigene Ebene): solange es offen ist, weichen sie */
  .app.popup-offen #route-zeigen,.app.popup-offen .standort-knopf,.app.popup-offen .anker-knopf,.app.popup-offen .fahrt-knopf,.app.popup-offen #hand-leiste{visibility:hidden}
  /* Kartenknöpfe senkrecht am rechten Rand unter "Route zeigen", wie bei Google Maps (Rückmeldung vom
     2026-09-27: nebeneinander ragten Fahrt, Anker und Standort in die Mitte der Karte) */
  .standort-knopf{top:172px;bottom:auto;right:12px}
  .anker-knopf{top:224px;bottom:auto;right:12px}
  .anker-panel{top:70px;bottom:auto;left:12px;right:12px;width:auto;max-height:calc(100dvh - var(--sheet-height) - var(--nav-h) - 90px)}
  .bord-werte{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bord-verbindung{grid-template-columns:2fr 1fr}
  .fahrt-knopf{top:276px;bottom:auto;right:12px}
  /* Fahrt und Ankerwache starten über die Leiste (Fahrt); auf der Karte bleibt ihr Knopf nur, solange sie laufen */
  .fahrt-knopf:not(.an):not(.alarm),.anker-knopf:not(.an):not(.alarm){display:none}
  .app.fahrt-vollbild .leaflet-bottom{bottom:env(safe-area-inset-bottom,0px)}
  .fahrt-panel{max-height:min(46dvh,calc(100dvh - var(--sheet-height) - var(--nav-h) - 90px));padding:8px 10px}
  .app.fahrt-vollbild .fahrt-panel{max-height:min(46dvh,calc(100dvh - 90px))}
  .fahrt-wert b{font-size:16px}
  /* die vier Knoepfe der laufenden Fahrt in einer Reihe (ab 375 px Breite), 44 px hoch fuer nasse Finger */
  .fahrt-panel .anker-knoepfe button{padding-left:9px;padding-right:9px}
  .legende{bottom:auto;top:218px;left:auto;right:12px;max-width:calc(100% - 24px)}
  .legende[open]{z-index:15}
  .karte-hinweis{top:70px;left:12px;right:76px;z-index:16}
  /* neben dem Zoom ist wenig Platz: nur die drei Knöpfe, etwas enger */
  #hand-leiste{top:70px;bottom:auto;gap:6px;padding:6px}
  #hand-leiste-text{display:none}
  #hand-leiste button.klein{padding:6px 8px;font-size:11.5px}
  .ergebnis-reiter{top:-12px}
  .feld-steuerung{max-height:calc(100dvh - var(--sheet-height) - var(--nav-h) - var(--zeitleiste-h, 130px) - 90px)}
  .app[data-sheet="2"] .feld-steuerung{max-height:45dvh}
  .leaflet-bottom{bottom:calc(var(--sheet-height) + var(--nav-h) + var(--zeitleiste-h, 130px) + 16px)}
  /* Ladezeichen ueber der Zeitleiste, im groessten Blatt (keine Karte zu sehen) weg */
  .karte-laden,.hand-leiste:not([hidden]) ~ .karte-laden{bottom:calc(var(--sheet-height) + var(--nav-h) + var(--zeitleiste-h, 130px) + 16px)}
  .app[data-sheet="2"] .karte-laden{display:none}
  .app[data-sheet="2"] .leaflet-bottom{display:none}
  /* Wahlmodus ("Auf der Karte wählen"): Blatt, Zeitleiste und "Route zeigen" fahren herunter, die Karte
     gehört dem Finger; oben bleibt die Leiste mit Abbrechen */
  .app.kartenwahl .panel,.app.kartenwahl .zeitleiste,.app.kartenwahl #route-zeigen{display:none}
  .app.kartenwahl .leaflet-bottom{display:block}
  .zeile.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Handy: "Zwischenstopp hinzufügen" liegt im Menü am ⋮, die Meldung steht über der Fußleiste */
  .stopp-neu{display:none}
  .meldung{left:50%;bottom:calc(76px + max(var(--nav-h), env(safe-area-inset-bottom,0px)));max-width:calc(100vw - 32px)}
  /* Handy: unten über der Leiste, über die ganze Breite */
  .cookie-hinweis{position:fixed;left:10px;right:10px;bottom:calc(var(--nav-h) + 8px);z-index:26;transform:none;width:auto;max-width:none;font-size:12px}
  .cookie-hinweis button.klein{flex:1 1 auto;min-height:36px}
}
/* Fuenf Werte der Fahrt passen auf dem Handy nicht in eine Zeile: oben Fahrt, Kurs und Kurs zum Wegpunkt, darunter Distanz und Abweichung */
@media(max-width:560px){.fahrt-werte{grid-template-columns:repeat(6,minmax(0,1fr))}.fahrt-wert{grid-column:span 2}#fahrt-wp,#fahrt-abweichung{grid-column:span 3}}
@media(max-width:480px){.zeile.zwei{grid-template-columns:1fr}.zeile.vier{grid-template-columns:repeat(2,minmax(0,1fr))}.reise-kopf h2{font-size:17px}.punkte-kreis{width:70px;height:70px}.punkte-kreis b{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{
  .panel-fuss,.bereich-leiste,.ergebnis-reiter,.reise-kopf button,#kontext-ansicht,#profil-ansicht,#gespeichert-ansicht,#fahrt-ansicht,#plan-ansicht,.abfahrt button,#fenster-oeffnen,.route-menue,.menue-hintergrund,.meldung,.version-hinweis,.cookie-hinweis{display:none!important}
  #resultat-ansicht,#ansicht-uebersicht,#ansicht-wetter,#ansicht-etappen{display:block!important}
  .app .panel{position:static;height:auto;max-height:none;overflow:visible;display:block}
  .panel-inhalt{display:block!important;overflow:visible}
}

/* Komfort: wie die See auf dem Kurs laeuft (segeln/komfort.py) */
.komfort.k0,.komfort.k1{color:var(--leise)}
.komfort.k2{color:var(--gelb)}
.komfort.k3{color:var(--rot);font-weight:600}
.etappe-komfort{font-size:12.5px;margin-top:2px}
p.komfort-zeile{margin:6px 0}

/* Fahrt aus dem eigenen Track (segeln-tracklog.js) */
.polare-wahl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.polare-wahl input[type=file]{max-width:100%;font-size:12.5px}
.polare-ergebnis p{margin:6px 0}
.polare-ergebnis #polare-uebernehmen{margin:4px 0 8px}
.polare-tabelle{margin:6px 0}
.polare-raus summary{cursor:pointer;font-size:12.5px;color:var(--leise)}
.polare-raus ul{margin:4px 0 0 18px;padding:0;font-size:12.5px}

/* Bodenkarte mit Fronten (segeln-bodenkarte.js): eigenes Fenster ueber allem, das Bild
   eingepasst oder in voller Groesse zum Schieben */
.bodenkarte{position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;background:var(--weiss);
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.bodenkarte-kopf{display:flex;align-items:center;gap:8px;flex:none}
.bodenkarte-kopf h2{flex:1;min-width:0;margin:0;font-size:17px}
.bodenkarte-zu{min-width:44px;font-size:16px}
.bodenkarte .bodenkarte-reiter{flex:none;flex-wrap:nowrap;overflow-x:auto;padding:8px 0;scrollbar-width:thin}
.bodenkarte-reiter button{flex:none;line-height:1.2}
.bodenkarte-reiter button small{display:block;font-size:11px;font-weight:400;opacity:.85}
.bodenkarte-bild{flex:1;min-height:0;overflow:auto;display:flex;background:var(--flaeche,#f4f6f8);border-radius:8px;overscroll-behavior:contain}
.bodenkarte-bild img{display:block;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;cursor:zoom-in}
.bodenkarte-bild.gross img{max-width:none;max-height:none;cursor:zoom-out}
.bodenkarte-bild p{margin:auto;padding:16px;text-align:center}
.bodenkarte-unter{flex:none;max-height:32dvh;overflow-y:auto;font-size:13px}
.bodenkarte-unter p{margin:6px 0}
.bodenkarte-zeichen summary{cursor:pointer;font-size:13px;color:var(--leise)}
.bodenkarte-zeichen p{font-size:12.5px}