/* Sailseer: Gestaltung nach dem Vorbild von Google Maps und Komoot.
   Die Karte füllt den Bildschirm, links liegt ein Tourpanel mit Planer, Kennzahlen
   und einklappbaren Abschnitten (auf dem Handy als Blatt unter der Karte).
   Farben: gedämpfte Blautöne auf Weiß, Ampelfarben nur für Bewertungen.
   Schriften: Poppins (SIL OFL, siehe vendor/fonts/OFL-Poppins.txt) für Titel,
   Zahlen und Knöpfe, Fließtext in der Systemschrift. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/frontend/vendor/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/frontend/vendor/fonts/poppins-700.woff2) format("woff2")}

:root{
  color-scheme:light;
  --flaeche:#eef2f5; --weiss:#ffffff; --text:#1d2a33; --leise:#5c6d79; --linie:#e1e8ed; --rand:#c9d5dd;
  --akzent:#3a6b8c; --akzent-hover:#2e5873; --akzent-hell:#e4edf3; --akzent2:#4d86a8; --dunkel:#1f3d52; --knopf-text:#ffffff;
  --gruen:#2f7d4f; --gelb:#a8731a; --rot:#b8433d;
  --gruen-bg:#e2f1e7; --gelb-bg:#fbf0d9; --rot-bg:#fae4e2;
  --band:rgba(58,107,140,.16); --nacht:rgba(29,42,51,.07); --fahrt:rgba(47,125,79,.18);
  --schatten:0 1px 3px rgba(20,40,60,.10),0 6px 20px rgba(20,40,60,.07);
  --radius:10px; --radius-klein:7px; --panel:440px;
  --kopf:"Poppins","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fliess:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--flaeche);color:var(--text);font:14px/1.5 var(--fliess)}
a{color:var(--akzent2)}
h1,h2,h3{font-family:var(--kopf);color:var(--dunkel);margin:0}
h1{font-size:15px;font-weight:700;line-height:1.2}
h2{font-size:14px;font-weight:600;line-height:1.3}
h3{font-size:12px;font-weight:600;color:var(--leise);margin:14px 0 6px}
.leise{color:var(--leise);font-size:12.5px;margin:0 0 10px}

/* App-Rahmen: Panel links, Karte rechts */
.app{display:flex;height:100vh;height:100dvh;width:100%}
.panel{position:relative;z-index:2;flex:0 0 var(--panel);width:var(--panel);display:flex;flex-direction:column;background:var(--weiss);
  box-shadow:2px 0 14px rgba(20,40,60,.12);transition:margin-left .25s ease}
.app.zu .panel{margin-left:calc(-1 * var(--panel))}
.panel-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:10px;min-width:0}
.marke .logo{display:inline-flex;flex:none;width:36px;height:36px;border-radius:10px;background:#cde8fd;align-items:center;justify-content:center}
.marke .unter{display:block;font-size:11.5px;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stand{flex:none;font:600 10.5px/1.4 var(--kopf);color:var(--leise);text-align:right}
.stand:empty{display:none}
.panel-inhalt{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 16px 28px;background:var(--flaeche);overscroll-behavior:contain}
.sheet-griff{display:none}

.karte-wrap{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:var(--karte-bg,#d9e4ec)}
.karte-feld{flex:1;min-height:0;position:relative}
.karte{position:absolute;inset:0;z-index:0}
.leaflet-container{font:12px/1.4 var(--fliess);background:var(--karte-bg,#d9e4ec)}
/* Der Filter sitzt an jeder Kachel statt an der ganzen Ebene: so rechnet der Browser ihn einmal beim
   Laden der Kachel, nicht in jedem Bild einer Zoom-Animation über die ganze Karte */
.osm-tiles .leaflet-tile{filter:saturate(.7) contrast(.97)}
.leaflet-bar{border:none !important;box-shadow:var(--schatten);border-radius:var(--radius-klein)}
.leaflet-bar a{color:var(--dunkel);border-bottom-color:var(--linie)}
.leaflet-bar a:first-child{border-radius:var(--radius-klein) var(--radius-klein) 0 0}
.leaflet-bar a:last-child{border-radius:0 0 var(--radius-klein) var(--radius-klein)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--weiss);color:var(--text)}
.leaflet-popup-content-wrapper{border-radius:var(--radius);box-shadow:var(--schatten)}
.leaflet-popup-content{font-size:13px;line-height:1.45;margin:10px 12px}
.leaflet-popup-content button{margin-top:6px;padding:6px 12px;min-height:0;font-size:12px}
.leaflet-container a.leaflet-popup-close-button{color:var(--leise)}
.feld-blase .feld-blase-werte div:first-child{font-weight:600;font-size:14px}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.75)}
/* Eingeklappte Quellennennung: nur ein (i) im Kreis, Antippen klappt sie wieder auf */
.leaflet-control-attribution.nennung-zu{font-size:0;padding:0;width:28px;height:28px;margin:0 6px 6px 0;border-radius:50%;cursor:pointer;box-shadow:var(--schatten)}
.leaflet-control-attribution.nennung-zu::before{content:"i";display:block;font:italic 700 14px/28px Georgia,serif;text-align:center}

/* Griff zum Ein- und Ausklappen des Panels (Desktop) */
.panel-griff{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:5;width:22px;height:56px;padding:0;min-height:0;
  border:none;border-radius:0 10px 10px 0;background:var(--weiss);box-shadow:var(--schatten);cursor:pointer;color:var(--leise)}
.panel-griff::before{content:"";display:block;width:8px;height:8px;margin:0 0 0 8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .25s,margin .25s}
.app.zu .panel-griff::before{transform:rotate(-135deg);margin-left:3px}
.panel-griff:hover{color:var(--akzent);background:var(--weiss)}

/* Schwebende Bedienelemente auf der Karte: Ebenen-Chip oben links, Legende unten links */
.chip,.legende>summary{display:inline-flex;align-items:center;gap:7px;background:var(--weiss);color:var(--text);border:1px solid rgba(20,40,60,.08);
  border-radius:999px;padding:11px 18px;min-height:0;font:600 14px/1 var(--kopf);box-shadow:var(--schatten);cursor:pointer}
/* Der Ebenen-Chip ist der Einstieg in die Flaechenkarten: etwas groesser als
   die Legende, mit Pfeil, der die Richtung wechselt */
#ebenen-knopf{padding:12px 20px;font-size:15px}
#ebenen-knopf::after{content:"";width:8px;height:8px;margin:-3px 0 0 2px;border-right:2px solid var(--leise);border-bottom:2px solid var(--leise);
  transform:rotate(45deg);transition:transform .15s ease}
#ebenen-knopf[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
.chip:hover,.legende>summary:hover{background:var(--weiss);border-color:var(--akzent);color:var(--dunkel)}
.chip b{color:var(--akzent);font-weight:600}
.ebenen-box{position:absolute;left:12px;top:12px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 80px)}
.feld-steuerung{display:none;flex-direction:column;gap:8px;background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);padding:12px 14px;max-width:100%}
.feld-steuerung.offen{display:flex}
.feld-zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.feld-titel{font:600 10.5px/1 var(--kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--leise);min-width:48px}
.feld-zeile .reiter button{padding:5px 10px}
.feld-zeile .reiter button small{font-weight:400;margin-left:4px;color:inherit;opacity:.8}
.feld-zeile .reiter button:disabled{opacity:.45;cursor:default}
/* GRIB fuer den Plotter: Vorlauf waehlen, laden, Groesse ablesen */
.grib-stunden{font:inherit;font-size:12px;padding:4px 6px;border:1px solid rgba(20,40,60,.18);border-radius:var(--radius-klein);background:var(--weiss);color:inherit}
.grib-hinweis{font-size:11.5px;color:var(--leise);flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
/* Standortknopf unter dem Zoom, Hinweisleiste im Wahlmodus (Start/Ziel auf der Karte setzen) */
.standort-knopf{position:absolute;right:12px;top:92px;z-index:5;width:38px;height:38px;padding:0;min-height:0;border-radius:var(--radius-klein);
  background:var(--weiss);color:var(--akzent);border:1px solid rgba(20,40,60,.12);box-shadow:var(--schatten)}
.standort-knopf:hover{background:var(--akzent-hell);border-color:var(--akzent);color:var(--dunkel)}
.standort-knopf.laeuft{opacity:.6;cursor:wait}
.karte-hinweis{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;
  background:var(--dunkel);color:var(--weiss);border-radius:999px;padding:7px 8px 7px 16px;box-shadow:var(--schatten);
  font:600 12.5px/1.2 var(--kopf);max-width:calc(100% - 24px)}
.karte-hinweis button.klein{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:var(--weiss)}
.karte-hinweis button.klein:hover{background:var(--weiss);border-color:var(--weiss);color:var(--dunkel)}
/* Ladezeichen der Karte (segeln.js ladenStart): unten mittig, ueber Legende und Zeitleiste, laesst Tipps durch */
.karte-laden{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;
  background:var(--weiss);color:var(--dunkel);border:1px solid var(--linie);border-radius:999px;padding:7px 14px 7px 10px;box-shadow:var(--schatten);
  font:600 12.5px/1.2 var(--kopf);max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.karte-laden[hidden]{display:none}
.karte-laden>span:last-child{overflow:hidden;text-overflow:ellipsis}
.hand-leiste:not([hidden]) ~ .karte-laden{bottom:84px}
.karte.wahl,.karte.wahl .leaflet-grab,.karte.wahl .leaflet-interactive{cursor:crosshair}
/* Im Wahlmodus keine Tooltips der Ebenen (Route, Nadeln, Stationen): dort sagen sie nichts, und auf dem
   iPhone macht ein aufgehender Tooltip aus dem Tipp ein Überfahren ohne Klick. Der Hafenname beim
   Überfahren am Schreibtisch bleibt. */
.karte.wahl .leaflet-tooltip:not(.hafen-tip){display:none}
.leaflet-container.ueber-hafen{cursor:pointer}
.frei-pin{background:none;border:none;filter:drop-shadow(0 1px 2px rgba(20,40,60,.4))}
.legende{position:absolute;left:12px;bottom:12px;z-index:5;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;max-width:min(380px,calc(100% - 24px))}
.legende>summary{list-style:none}
.legende>summary::-webkit-details-marker{display:none}
.legende-inhalt{background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);padding:12px 14px;font-size:12px;color:var(--leise);
  max-height:44vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.karte-legende{margin:0}
/* Hafenkreise: blau am Meer, dezent grün am Binnensee, grau auf einem anderen Gewässer als der Start */
.hafen-legende .hafen-marke{display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid #3a6b8c;background:var(--weiss);
  vertical-align:-1px;margin-left:6px}
.hafen-legende .hafen-marke:first-child{margin-left:0}
.hafen-legende .hafen-marke.binnensee{border-color:#3d8a73}
.hafen-legende .hafen-marke.anders{border-color:#b4bdc6}
.wetter-legende{display:flex;flex-wrap:wrap;gap:3px 12px}
.feld-legende{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.feld-legende .farbbalken{display:inline-flex;align-items:center;gap:6px}
.feld-legende canvas{width:180px;height:10px;border:1px solid var(--rand);border-radius:2px;vertical-align:middle}
.feld-legende .ticks{display:flex;justify-content:space-between;width:180px;font-size:10px;margin-top:-2px}
.feld-legende .feld-wert{font-weight:600;color:var(--text);min-width:180px}
.feld-legende .radar-stufe{display:inline-flex;align-items:center;gap:4px;font-size:11px}
.feld-legende .radar-stufe i{display:inline-block;width:12px;height:10px;border-radius:2px;border:1px solid var(--rand)}
.feld-canvas{position:absolute;left:0;top:0;pointer-events:none}
.partikel-schalter{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
.swatch{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:5px;border-radius:2px}
.swatch.blitz{width:8px;height:12px;background:none;border:1.5px solid var(--leise);border-radius:0;transform:skewX(-20deg)}
.swatch.zug{background:repeating-linear-gradient(90deg,#b91c1c 0 4px,transparent 4px 7px)}
.swatch.regen{width:10px;height:10px;border-radius:50%;background:rgba(11,99,197,.6)}

/* Zeitleiste unter der Karte */
.zeitleiste{flex:none;background:var(--weiss);border-top:1px solid var(--linie);padding:8px 14px 6px;z-index:3}
.zeit-kopf{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.zeit-label{font:600 12px/1.3 var(--kopf);color:var(--dunkel);margin-left:6px;flex:1;min-width:180px}
#zeit{width:100%;accent-color:var(--akzent);margin:4px 0 0;height:22px}

/* Knöpfe: gefüllt in Blau, zweite Reihe (Reiter, Zeitleiste) als weiße Pillen */
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--akzent);color:var(--knopf-text);border:1px solid var(--akzent);
  border-radius:var(--radius-klein);padding:9px 16px;min-height:38px;font:600 13.5px/1 var(--kopf);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
button:hover{background:var(--akzent-hover);border-color:var(--akzent-hover)}
button:focus-visible{outline:2px solid var(--akzent2);outline-offset:2px}
button:disabled{opacity:.6;cursor:wait}
button.primaer{width:100%;min-height:42px;font-size:14px}
.reiter{display:flex;gap:6px;flex-wrap:wrap}
.reiter button,button.klein,a.klein,.schliessen,.beste button{background:var(--weiss);color:var(--text);border-color:var(--rand)}
.reiter button,button.klein,a.klein,.schliessen{padding:6px 12px;min-height:0;font-size:12px;border-radius:999px}
.reiter button:hover,button.klein:hover,a.klein:hover,.schliessen:hover,.beste button:hover{background:var(--akzent-hell);border-color:var(--akzent);color:var(--dunkel)}
.reiter button.an,.reiter button.an:hover{background:var(--akzent);border-color:var(--akzent);color:var(--knopf-text)}
button.klein:disabled{opacity:.5;cursor:default}
.kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}

/* Planer */
.planer{background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);padding:14px 14px 12px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f label{font:600 11px/1.3 var(--kopf);color:var(--leise)}
.f select,.f input{width:100%;background:var(--weiss);color:var(--text);border:1px solid var(--rand);border-radius:var(--radius-klein);padding:8px 10px;
  font:14px/1.3 var(--fliess);min-height:38px;transition:border-color .15s,box-shadow .15s}
.f select:focus,.f input:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-hell)}
/* Abfahrt mit "Jetzt" daneben; gedrückt gilt bei jeder Prüfung die laufende Stunde */
.abfahrt-zeile{display:flex;gap:6px;align-items:stretch;min-width:0}
.abfahrt-zeile input{flex:1 1 auto;min-width:0}
button.abfahrt-jetzt{flex:0 0 auto;border-radius:var(--radius-klein)}
button.abfahrt-jetzt[aria-pressed="true"],button.abfahrt-jetzt[aria-pressed="true"]:hover{background:var(--akzent);border-color:var(--akzent);color:var(--knopf-text)}
.strecke-felder{min-width:0;display:flex;flex-direction:column;gap:10px}
.ortswahl{margin-top:2px}
.ortswahl button{gap:5px}
.ortswahl button.an,.ortswahl button.an:hover{background:var(--akzent);border-color:var(--akzent);color:var(--knopf-text)}
.standort-status{color:var(--akzent);font-weight:600}
.standort-status.fehler-text{color:var(--rot);background:none;padding:0}
.zeile{display:grid;gap:10px}
.zeile.zwei{grid-template-columns:1fr 1fr}
.zeile.drei{grid-template-columns:1fr 1fr 1fr}
.zeile.vier{grid-template-columns:repeat(4,1fr)}
.hinweis{font-size:11.5px;color:var(--leise);margin:0}
/* Ortszeit weicht von der Zeit des Geraets ab: nicht ueberlesen */
.hinweis.abweichend{color:var(--gelb);font-weight:600}
.fehler{background:var(--rot-bg);color:var(--rot);border-radius:var(--radius-klein);padding:10px 14px;margin-bottom:12px;font-size:13px}
.laden{display:flex;align-items:center;gap:10px;color:var(--leise);font-size:12.5px;padding:2px 2px 12px}
.spinner{flex:none;width:16px;height:16px;border:2px solid var(--akzent-hell);border-top-color:var(--akzent);border-radius:50%;animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
/* Kleines Ladezeichen vor einem Text, der noch kommt ("wird geladen …", "Hole Modelle …") */
.laedt::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px;
  border:2px solid var(--akzent-hell);border-top-color:var(--akzent);border-radius:50%;animation:dreh .8s linear infinite}
@media (prefers-reduced-motion:reduce){.spinner,.laedt::before{animation-duration:2.4s}}

/* Tourkarte: Bewertung, Kennzahl-Kacheln, Klartext, beste Abfahrten */
.tour{background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);padding:14px 16px;margin-bottom:12px}
.tour-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ampel{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--kopf);padding:6px 12px;border-radius:999px}
.ampel.gruen{background:var(--gruen-bg);color:var(--gruen)}
.ampel.gelb{background:var(--gelb-bg);color:var(--gelb)}
.ampel.rot{background:var(--rot-bg);color:var(--rot)}
.punkte{font:700 22px/1 var(--kopf);color:var(--dunkel);white-space:nowrap}
.punkte small{font-size:12px;font-weight:600;color:var(--leise)}
.tour-strecke{font:600 15px/1.3 var(--kopf);color:var(--dunkel);margin:10px 0}
.tour-strecke .nach{color:var(--leise);font-weight:400;font-size:13px;margin:0 6px}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.kachel{background:var(--flaeche);border-radius:var(--radius-klein);padding:8px 10px;min-width:0}
.kachel .wert{display:block;font:700 16px/1.25 var(--kopf);color:var(--dunkel);white-space:nowrap}
.kachel .wert small{font-size:11px;font-weight:600;color:var(--leise);margin-left:3px}
.kachel .label{display:block;font-size:11px;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boot-zeile{font-size:12.5px;color:var(--leise);margin:0 0 10px}
.klartext{font-size:14px;margin:0 0 10px}
.gruende{margin:0 0 10px;padding-left:18px;font-size:13px}
.gruende li{margin-bottom:3px}
.kennzahlen{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--leise);margin-bottom:10px}
.beste{display:flex;flex-direction:column;gap:6px}
.beste button{width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;font:13px/1.35 var(--fliess);
  white-space:normal;padding:8px 12px;min-height:0;border-left-width:4px;border-radius:var(--radius-klein)}
.beste button b{display:block;font-family:var(--kopf);font-weight:600}
.beste button.gruen{border-left-color:var(--gruen)}
.beste button.gelb{border-left-color:var(--gelb)}
.beste button.rot{border-left-color:var(--rot)}
.windkurs,.umfahrung,.freihinweis,.binnensee-hinweis,.handhinweis{border-radius:var(--radius-klein);padding:8px 12px;font-size:13px;margin:0 0 8px;border-left:4px solid currentColor}
.binnensee-hinweis{background:var(--binnen-bg,#eef6f3);color:var(--binnen-text,#2c6b58)}
.windkurs.rot{background:var(--rot-bg);color:var(--rot)}
.windkurs.gelb{background:var(--gelb-bg);color:var(--gelb)}
.windkurs.gruen{background:var(--gruen-bg);color:var(--gruen)}
.umfahrung{background:var(--gelb-bg);color:var(--gelb)}
.freihinweis{background:var(--akzent-hell);color:var(--dunkel)}
.handhinweis{background:var(--akzent-hell);color:var(--dunkel)}
.handhinweis.warnung{background:var(--rot-bg);color:var(--rot);font-weight:600}
.fehler-text{color:var(--rot);font-size:13px}

/* Rechnung */
.rechnung{margin:4px 0 12px}
.rechnung>summary{cursor:pointer;font:600 12px/1.4 var(--kopf);color:var(--akzent)}
.rechnung>summary:hover{color:var(--akzent-hover)}
.rechnung-tabelle{margin-top:6px;font-size:12.5px;table-layout:fixed}
/* .tabelle td setzt weiter unten nowrap: hier muss der Posten umbrechen, sonst
   schiebt ein langer Befund die Punktespalte aus dem Panel (Klassen doppelt
   genannt, damit diese Regel die spaetere gewinnt) */
.tabelle.rechnung-tabelle td{white-space:normal;padding:4px 8px;overflow-wrap:anywhere}
.tabelle.rechnung-tabelle td.posten{padding-left:18px}
.rechnung-tabelle td.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:80px}
.rechnung-tabelle td.sperre{color:var(--rot);font-weight:700}
.rechnung-tabelle tr.gruppe td{font:600 11px/1.4 var(--kopf);padding-top:10px;border-bottom:none;color:var(--leise)}
.rechnung-tabelle tr.summe td{font-weight:700}
.rechnung-tabelle tr.ergebnis td{font-size:14px}
.rechnung-tabelle tr.ergebnis.gruen td.zahl{color:var(--gruen)}
.rechnung-tabelle tr.ergebnis.gelb td.zahl{color:var(--gelb)}
.rechnung-tabelle tr.ergebnis.rot td.zahl{color:var(--rot)}

/* Einklappbare Abschnitte im Panel: Kopfzeile mit Pfeil rechts, per Default zu */
.abschnitt{background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);margin-bottom:10px}
.abschnitt>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:var(--radius)}
.abschnitt>summary::-webkit-details-marker{display:none}
.abschnitt>summary::after{content:"";flex:none;width:8px;height:8px;margin:-4px 4px 0 0;border-right:2px solid var(--leise);border-bottom:2px solid var(--leise);
  transform:rotate(45deg);transition:transform .2s,margin .2s}
.abschnitt[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.abschnitt[open]>summary{border-bottom:1px solid var(--linie);border-radius:var(--radius) var(--radius) 0 0}
.abschnitt>summary:hover{background:var(--akzent-hell)}
.abschnitt>summary h2{display:flex;align-items:center;gap:8px;min-width:0}
.abschnitt .inhalt{padding:12px 16px 14px}
.pill{display:inline-block;font:600 11px/1.5 var(--kopf);padding:0 8px;border-radius:999px;background:var(--akzent-hell);color:var(--akzent)}
.pill.rot{background:var(--rot-bg);color:var(--rot)}
.pill:empty{display:none}
.warnungen p{margin:0 0 8px;font-size:13px}
.warnungen p:last-child{margin-bottom:0}

/* Etappen als Zeitstrahl */
.etappe{position:relative;padding:2px 0 14px 24px;border-left:2px solid var(--linie);margin-left:10px}
.etappe:last-child{border-left-color:transparent;padding-bottom:2px}
.etappe-nr{position:absolute;left:-12px;top:0;width:22px;height:22px;border-radius:50%;background:var(--akzent);color:var(--knopf-text);font:600 11px/22px var(--kopf);text-align:center}
.etappe.gruen .etappe-nr{background:var(--gruen)}
.etappe.gelb .etappe-nr{background:var(--gelb)}
.etappe.rot .etappe-nr{background:var(--rot)}
.etappe-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.etappe-kopf b{font:600 13.5px/1.3 var(--kopf);color:var(--dunkel)}
.etappe-meta,.etappe-segel{font-size:12.5px;color:var(--leise);margin-top:2px}
/* Fahrt aus dem Polardiagramm: was das Boot laeuft und warum */
.etappe-fahrt{font-size:12.5px;color:var(--leise);margin-top:2px}
.etappe-fahrt.kreuzen{color:var(--gelb)}
.etappe-fahrt.motor,.etappe-fahrt.motorsegeln{color:var(--akzent2)}
.etappe-wind{font-size:13px;margin-top:3px}
.etappe-gebiete{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.etappe-kreuz{font-size:12.5px;margin-top:3px;color:var(--text)}
.etappe-kreuz.rueckfall{color:var(--leise)}
.etappe-kreuz .schlaege{margin:2px 0 0;padding-left:18px;color:var(--leise);font-variant-numeric:tabular-nums}
.vorbehalt{margin:8px 0;padding:7px 10px;border-left:3px solid var(--gelb);background:var(--gelb-bg);
  border-radius:var(--radius-klein);font-size:12.5px;line-height:1.45;color:var(--text)}
.kreuz-summe{font-size:13px;margin:0 0 10px;padding:8px 10px;border-radius:var(--radius-klein);background:var(--akzent-hell)}
.kreuz-summe .hinweis{margin:6px 0 0}
.kreuz-summe .kreuz-anzeige{display:inline-flex;margin-top:6px;vertical-align:middle}
.polare-vorschau{font-variant-numeric:tabular-nums}
.etappe-extra{font-size:12.5px;margin-top:4px}
.etappe-extra span{display:block}
.etappe-grund{font-size:12px;color:var(--leise);margin-top:3px}
.etappe-feuer{font-size:12.5px;margin-top:4px}
.etappe-feuer summary{cursor:pointer}
.etappe-feuer ul{margin:4px 0 0;padding-left:18px}
.kennung{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;white-space:nowrap}
.nachtfahrt{font-size:13px;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--weiss);border:1px solid var(--linie)}
.warten{color:var(--gelb)}
.sperre-text{color:var(--rot)}

/* Tabellen und Badges */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelle{border-collapse:collapse;width:100%;font-size:12.5px}
.tabelle th,.tabelle td{padding:6px 8px;border-bottom:1px solid var(--linie);text-align:left;white-space:nowrap;vertical-align:top}
.tabelle th{font:600 11px/1.3 var(--kopf);color:var(--leise);border-bottom:2px solid var(--linie)}
.tabelle td.zahl{font-variant-numeric:tabular-nums}
.tabelle td .extra{display:block;font-size:11.5px;line-height:1.35;margin-top:2px}
.tabelle td .extra span{display:block}
.badge,.tabelle .badge{display:inline-block;padding:2px 8px;border-radius:999px;font:600 10.5px/1.4 var(--kopf);background:var(--flaeche);color:var(--text);vertical-align:middle}
.badge.gruen{background:var(--gruen-bg);color:var(--gruen)}
.badge.gelb{background:var(--gelb-bg);color:var(--gelb)}
.badge.rot{background:var(--rot-bg);color:var(--rot)}
.tabelle.modelle th,.tabelle.modelle td{padding:4px 5px;text-align:center;font-size:12px}
.tabelle.modelle th{font-size:10px}
.tabelle.modelle td:first-child,.tabelle.modelle th:first-child{text-align:left;position:sticky;left:0;background:var(--weiss);white-space:nowrap}
.tabelle.modelle tr.konsens td{font-weight:700;border-top:2px solid var(--linie)}
.tabelle.modelle tr.bestes-reihe td{border-top:1px dashed var(--linie)}
.tabelle.modelle tr.bestes-reihe td.uebergabe{font-style:italic}
.tabelle.modelle tr.bestes-reihe td:first-child small{font-weight:400}
.tabelle.modelle td.bft0,.tabelle.modelle td.bft1,.tabelle.modelle td.bft2,.tabelle.modelle td.bft3{background:rgba(58,107,140,.07)}
.tabelle.modelle td.bft4{background:rgba(47,125,79,.18)}
.tabelle.modelle td.bft5{background:rgba(202,138,4,.22)}
.tabelle.modelle td.bft6{background:rgba(234,88,12,.28)}
.tabelle.modelle td.bft7{background:rgba(220,38,38,.32)}
.tabelle.modelle td.bft8,.tabelle.modelle td.bft9,.tabelle.modelle td.bft10,.tabelle.modelle td.bft11,.tabelle.modelle td.bft12{background:rgba(153,27,27,.45);color:#fff}
.tabelle.modelle td small{display:block;font-size:10px;color:var(--leise)}
.tabelle.modelle th.tag{border-left:2px solid var(--linie)}
/* Tagesplan der Schiesszeiten: eine Zeile je Tag. Nebeneinander als Spalten
   ragte die Tabelle weit aus dem Panel, die Zeiten waren nicht zu sehen */
.tabelle.plan{width:100%;margin-top:8px;font-size:12px}
.tabelle.plan th,.tabelle.plan td{text-align:left;padding:4px 7px;white-space:normal}
.tabelle.plan th{width:86px;font:600 11.5px/1.35 var(--kopf);color:var(--text);border-bottom:1px solid var(--linie)}
.tabelle.plan th.regel{color:var(--leise);font-style:italic;font-weight:400}
.tabelle.plan td.belegt{background:var(--rot-bg);color:var(--rot);font-weight:600}
.tabelle.plan small{color:var(--leise);font-weight:400}

/* Windverlauf (SVG) */
.chart{display:block}
.chart text{fill:var(--leise);font-size:11px}
.chart .band{fill:var(--band)}
.chart .ens{fill:rgba(58,107,140,.09)}
.chart .ens2{fill:rgba(58,107,140,.14)}
.lg.ens{background:linear-gradient(rgba(58,107,140,.09),rgba(58,107,140,.23),rgba(58,107,140,.09))}
.chart .linie{fill:none;stroke:var(--akzent);stroke-width:2}
.chart .boee{fill:none;stroke:var(--rot);stroke-width:1.5;stroke-dasharray:4 3}
.chart .raster{stroke:var(--linie);stroke-width:1}
.chart .nacht{fill:var(--nacht)}
.chart .fahrt{fill:var(--fahrt)}
.chart .pfeil{stroke:var(--text);stroke-width:1.4;fill:none}
.chart .jetzt{stroke:var(--gelb);stroke-width:1.5;stroke-dasharray:2 2}
.chart-legende{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--leise);margin-top:6px}
.lg{display:inline-block;width:14px;height:10px;vertical-align:middle;margin-right:4px;border-radius:2px}
.lg.band{background:var(--band)}
.lg.linie{background:var(--akzent);height:3px}
.lg.boee{background:var(--rot);height:2px}
.lg.nacht{background:var(--nacht);border:1px solid var(--linie)}
.lg.fahrt{background:var(--fahrt)}

/* Abfahrtsfenster */
.fenster-tag{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.fenster-tag .datum{width:52px;font:600 10.5px/1.3 var(--kopf);color:var(--leise);flex:none}
/* minmax(0,1fr): sonst ist die kleinste Spaltenbreite die Stundenzahl und das
   Raster ragt auf schmalen Schirmen ueber den Rand, die letzten Stunden fehlen */
.fenster-zellen{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:1px;flex:1;min-width:0}
.fenster-zellen button{padding:0;min-height:24px;border-radius:3px;font:600 9px/1 var(--fliess);color:var(--text);background:var(--flaeche);border:1px solid transparent;cursor:pointer;transition:none;overflow:hidden}
.fenster-zellen button:hover{border-color:var(--akzent)}
.fenster-zellen button.gruen,.fenster-zellen button.gruen:hover{background:var(--gruen-bg);color:var(--gruen)}
.fenster-zellen button.gelb,.fenster-zellen button.gelb:hover{background:var(--gelb-bg);color:var(--gelb)}
.fenster-zellen button.rot,.fenster-zellen button.rot:hover{background:var(--rot-bg);color:var(--rot)}
.fenster-zellen button.nacht{opacity:.55}
.fenster-zellen button.gewaehlt{border-color:var(--dunkel)}
.fenster-zellen button.umfahrung{box-shadow:inset 0 -3px 0 var(--akzent)}
.fenster-zellen button.gegenwind{box-shadow:inset 0 3px 0 var(--rot)}
.fenster-zellen button.umfahrung.gegenwind{box-shadow:inset 0 3px 0 var(--rot),inset 0 -3px 0 var(--akzent)}

/* Messwerte, Pegel, Gebiete, Lage */
.messung{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--linie);font-size:13px;flex-wrap:wrap}
.messung:last-child{border-bottom:none}
.messung .wert{font-weight:600;font-variant-numeric:tabular-nums}
.messung .alt{color:var(--rot);font-size:12px}
.messung .zeit{color:var(--leise);font-size:12px;font-weight:400}
.messung .melden{color:var(--leise);font-size:11px;font-weight:400;white-space:nowrap;margin-left:4px}
.messung .melden:hover,.messung .melden:focus-visible{color:var(--text)}
.messung .unplausibel{cursor:help;text-decoration:underline dotted}
.messung-unplausibel .wert{opacity:.75}
.gebiet{padding:8px 0;border-bottom:1px solid var(--linie);font-size:13px}
.gebiet:last-child{border-bottom:none}
.gebiet b{display:block}
.gebiet span{display:block;color:var(--leise)}
.gebiet span b{display:inline;color:var(--text);font-weight:600}
.gebiet-eintrag{padding:10px 0;border-bottom:1px solid var(--linie);font-size:13px}
.gebiet-eintrag:last-of-type{border-bottom:none}
.gebiet-eintrag.gefahr{color:var(--rot)}
.land .reisewarnung{color:var(--rot);background:var(--rot-bg);padding:6px 8px;border-radius:6px}
.land .reisewarnung a{color:inherit}
.gebiet-kopf{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:4px}
.niord-text{display:inline-block;margin-top:2px}
.niord-text summary{cursor:pointer;color:var(--akzent2);font-size:12px}
.niord-text[open]{display:block}
.bfs{margin-top:3px}
.bfs-text summary{cursor:pointer;color:var(--akzent2);font-size:12px}
.lage-teil{margin-bottom:12px}
.lage-teil h3{margin-top:4px}

/* Quellen */
.quellen{display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:10px}
.quellen span{padding:1px 8px;border-radius:999px;background:var(--flaeche);font:600 10.5px/1.6 var(--kopf);color:var(--leise)}
.quellen span.fehlt{background:var(--rot-bg);color:var(--rot)}
.quellen span.veraltet{background:var(--gelb-bg);color:var(--gelb)}
/* Werbeplatz, bis zum Abo aus: feste Mindesthoehe, damit eine Anzeige beim Laden nichts verschiebt */
.werbeplatz{margin:10px 6px;min-height:100px;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.recht-links{margin:14px 6px 8px;font-size:12.5px;color:var(--leise)}
.recht-links a{text-decoration:none}

/* Wetterkarte */
.wetter-glyph,.boot-glyph{background:none;border:none}
.wetter-glyph svg{overflow:visible}
.wetter-glyph .zug{stroke:#b91c1c;stroke-width:2;stroke-dasharray:4 3;fill:none;opacity:.85}
.wetter-glyph text.kn{font:600 11px var(--fliess);fill:#16181d;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.leaflet-container.glyph-klein .wetter-glyph text.kn{display:none}

/* Häfen und Brücken */
.haefen{display:grid;grid-template-columns:1fr;gap:10px}
.hafen{border:1px solid var(--linie);border-radius:var(--radius-klein);padding:10px 12px;background:var(--flaeche);min-width:0}
.hafen h3{margin:0 0 4px;font-size:14px;color:var(--dunkel)}
.hafen .rolle{font:600 10.5px/1.3 var(--kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--akzent);display:block;margin-bottom:4px}
.hafen.frei{border-style:dashed}
.hafen.frei .rolle{color:var(--leise)}
.hafen .zeile{display:block;font-size:13px;margin:3px 0}
.hafen .zeile b{font-weight:600}
.hafen .dienste{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.dienst{display:inline-block;padding:2px 8px;border-radius:999px;font:600 10.5px/1.5 var(--kopf);background:var(--gruen-bg);color:var(--gruen)}
.dienst.nein{background:var(--rot-bg);color:var(--rot);text-decoration:line-through}
.dienst.offen{background:transparent;border:1px dashed var(--rand);color:var(--leise)}
.hafen .quellen-zeile{font-size:12px;color:var(--leise);margin-top:6px}
.hafen a{color:var(--akzent)}
.hafen details.havnelods{margin:6px 0;font-size:12.5px}
.hafen details.havnelods summary{cursor:pointer;color:var(--akzent);font-weight:600}
.hafen details.havnelods .zeile{font-size:12.5px;color:var(--leise);margin:4px 0}
/* Hafen-Steckbrief: voller Hafen im Panel (Klick auf den Hafen) */
.steckbrief-zeile{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 2px}
.hafen-voll h3{font-size:15px}
.hafen-voll .koord{font-variant-numeric:tabular-nums;color:var(--leise);font-size:12.5px}
.hafen-aktionen{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
/* Ohne JavaScript (routers/segeln._fuer_suche): was Sailseer ist und die Seiten vom Server, ueber der leeren Karte */
.ohne-js{position:fixed;inset:0;z-index:9999;overflow:auto;padding:24px 16px;background:var(--flaeche);font-size:15px}
.ohne-js h2{font-size:20px;margin:0 0 10px}
.hafen-aktionen a.klein{display:inline-flex;align-items:center;border:1px solid var(--rand);text-decoration:none;font-family:var(--kopf);font-weight:600}
/* Zur Route hinzufügen: gleich unter dem Namen, das Nächstliegende gefüllt */
.hafen-route{margin:8px 0;padding:8px 0 10px;border-top:1px dashed var(--linie);border-bottom:1px dashed var(--linie)}
.hafen-route .kopf{font:600 10.5px/1.3 var(--kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.hafen-route .zeile{margin:4px 0 0}
.hafen-route-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hafen-route button.haupt{background:var(--akzent);border-color:var(--akzent);color:var(--knopf-text)}
.hafen-route button.haupt:hover{background:var(--akzent-hover);border-color:var(--akzent-hover);color:var(--knopf-text)}
.nachbarn{margin:10px 0 2px;padding-top:8px;border-top:1px dashed var(--linie)}
.nachbarn .kopf{font:600 10.5px/1.3 var(--kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.nachbar-liste{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
button.nachbar{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 10px;min-height:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;
  background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius-klein);color:var(--text);font-size:12.5px;text-align:left}
button.nachbar:hover{background:var(--akzent-hell);border-color:var(--akzent);color:var(--dunkel)}
button.nachbar .nm{color:var(--leise);font-size:11.5px;font-variant-numeric:tabular-nums}
button.nachbar .br{color:var(--gelb);font-size:11px}
.bruecke-eintrag{padding:10px 0;border-bottom:1px solid var(--linie);font-size:13px}
.bruecke-eintrag:last-of-type{border-bottom:none}
.bruecke-eintrag .zeiten{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.bruecke-eintrag .zeiten span{padding:1px 7px;border-radius:999px;background:var(--weiss);border:1px solid var(--rand);font-variant-numeric:tabular-nums;font-size:12px}
.bruecke-eintrag .zeiten span.naechste{background:var(--akzent);border-color:var(--akzent);color:var(--knopf-text)}
.bruecke-glyph{background:none;border:none;display:flex;align-items:center;justify-content:center}
.bruecke-glyph svg{width:var(--bruecke,18px);height:var(--bruecke,18px)}

/* Windalarm, Windstatistik */
.alarm-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.alarm-form .f:first-child,.alarm-form .f.knopf{grid-column:1/-1}
.alarm-form .f.knopf button{width:100%}
.alarm-form .f.haken,.alarm-form .f.breit{grid-column:1/-1}
#meldung-knopf{margin:8px 0 0 6px}
.alarm-form .f.haken label{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-weight:400;text-align:left}
/* .f input setzt volle Breite und Polster: fuer den Haken zuruecknehmen */
.alarm-form .f.haken input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--akzent)}
.alarm-reiter{margin:0 0 10px}
/* Webcams: Links am Hafen und an der Strecke */
.webcams{margin:8px 0 4px;padding-top:8px;border-top:1px dashed var(--linie)}
.webcams ul,.webcam-liste{margin:4px 0 6px;padding-left:18px}
.webcams li,.webcam-liste li{margin:2px 0}
.webcam-gruppe{margin:8px 0 2px}
/* Segelwind: Richtungen und Wochentage als Haken-Chips */
.alarm-form fieldset.wahl{border:none;margin:0;padding:0}
.alarm-form fieldset.wahl legend{font:600 11px/1.3 var(--kopf);color:var(--leise);padding:0;margin:0 0 4px}
.alarm-form fieldset.wahl legend .leise{font-weight:400}
.alarm-form .chips{display:flex;flex-wrap:wrap;gap:6px}
.alarm-form .chips label{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--rand);border-radius:999px;background:var(--weiss);
  font-weight:400;font-size:13px;line-height:1.2;color:var(--text);cursor:pointer;min-height:36px}
.alarm-form .chips label:has(input:checked){background:var(--akzent-hell);border-color:var(--akzent)}
.alarm-form .chips input[type=checkbox]{width:16px;height:16px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--akzent)}
#fenster-alarm-knopf{margin:8px 0 0}
/* Segelwind: Vorschau mit Vorhersage und Windklima je Monat */
.wunsch-vorschau{border-top:1px dashed var(--linie);padding-top:8px}
.wunsch-vorschau .kopfzeile{margin-bottom:4px}
.wunsch-vorschau .kopfzeile .leise{white-space:normal;min-width:0;flex:1 1 200px}
.vorschau-teil{margin:6px 0}
.vorschau-teil .kopf{font:600 10.5px/1.3 var(--kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.vorschau-teil p{margin:4px 0}
.vorschau-fenster{margin:2px 0 4px;padding-left:18px;font-size:13px}
.vorschau-warnung{background:var(--rot-bg);border-radius:var(--radius-klein);padding:6px 8px;font-weight:600}
.klima-monate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;margin:6px 0;align-items:end}
.klima-monat{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10.5px;color:var(--leise);min-width:0}
.klima-monat b{font-size:11px;color:var(--text);font-variant-numeric:tabular-nums}
.klima-monat .balken{display:block;width:70%;background:var(--akzent2);border-radius:2px 2px 0 0}
#alarm-status.warnung{color:var(--rot)}
#alarm-status{margin-top:8px}
#alarm-status.ok{color:var(--gruen)}
#alarm-status.fehler-text{color:var(--rot)}
.statistik{margin:8px 0 4px;padding-top:8px;border-top:1px dashed var(--linie)}
.statistik .kopf{font:600 10.5px/1.3 var(--kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.statistik .zeile{display:block;margin:4px 0}
.statistik-grafik{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.statistik-svg text{font-size:10px;fill:var(--leise)}
.statistik-svg text.kn{font-size:9px;fill:var(--text)}
.statistik-svg rect{fill:#b7cbd9}
.statistik-svg rect.akt{fill:var(--akzent)}
.rose path{fill:rgba(58,107,140,.55);stroke:#fff;stroke-width:.8}
.rose text{font-size:9px;fill:var(--leise)}

/* Handy: Karte oben, Panel als Blatt darunter, Griff vergrößert das Blatt */
@media (max-width:899px){
  .app{flex-direction:column}
  .karte-wrap{order:0;flex:0 0 46vh;flex-basis:46dvh;transition:flex-basis .25s ease}
  .app.voll .karte-wrap{flex-basis:22vh;flex-basis:22dvh}
  .panel{order:1;flex:1 1 auto;min-height:0;width:auto;margin:0;border-radius:16px 16px 0 0;box-shadow:0 -4px 16px rgba(20,40,60,.16);transition:none}
  .app.zu .panel{margin-left:0}
  .panel-griff{display:none}
  .sheet-griff{display:block;width:100%;background:none;border:none;padding:8px 0 2px;min-height:0;cursor:pointer;border-radius:16px 16px 0 0}
  .sheet-griff:hover{background:none}
  .sheet-griff span{display:block;width:40px;height:4px;border-radius:2px;background:var(--rand);margin:0 auto}
  .panel-kopf{padding:4px 16px 10px}
  .marke .logo{width:30px;height:30px}
  .panel-inhalt{padding:12px 12px 24px}
  /* 24 Stunden nebeneinander: auf dem Handy Schrift und Datumsspalte kleiner,
     damit jede Stunde lesbar bleibt statt am Rand abgeschnitten zu werden */
  .fenster-tag .datum{width:44px;font-size:10px}
  .fenster-zellen button{font-size:8px}
  .legende{max-width:calc(100% - 24px)}
  .standort-knopf{top:auto;bottom:12px;right:12px}
  /* Handy: volle Breite unter Ebenen-Chip und Zoom, sonst liegt die Leiste darueber */
  .karte-hinweis{top:92px;left:12px;right:12px;transform:none;max-width:none;justify-content:space-between;
    font-size:12px;padding:6px 6px 6px 12px;gap:8px}
  .legende-inhalt{max-height:30vh}
  .zeitleiste{padding:6px 10px 4px}
  .zeit-label{font-size:11px;flex-basis:100%;min-width:0;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kachel .wert{font-size:15px}
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .stand{display:none}
}

/* == Törnplaner (frontend/segeln-planer.js) ================================= */

/* Ein Download-Link sieht aus wie ein Knopf (GPX) */
a.klein{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--rand);
  text-decoration:none;font:600 12px/1 var(--kopf);cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background-color .15s,border-color .15s,color .15s}

/* Modus: eine Passage mit Wetter oder ein Mehrtagestörn */
.modus-reiter{display:flex;gap:6px;margin:0 0 12px}
.modus-reiter[hidden]{display:none}
.modus-reiter button[hidden]{display:none}
/* Freie Fahrt: ohne Ziel, ohne Zwischenstopps, ohne Streckenvorschau */
.frei-modus .station-nach,.frei-modus #zwischenstopps,.frei-modus .stopp-neu,.frei-modus #route-umkehren,
.frei-modus #strecke-ansehen,.frei-modus .strecke-linie,.frei-modus #stopp-hinzu{display:none!important}
.revier-ergebnis{margin:14px 0 4px;border-top:1px solid var(--rand);padding-top:12px}
.revier-ergebnis[hidden]{display:none}
.revier-ergebnis h3{margin:0 0 2px}
.revier-ergebnis h4{margin:14px 0 6px}
.revier-fenster{margin:8px 0;padding:8px 10px;border-radius:8px;border-left:4px solid var(--rand);background:var(--akzent-hell)}
.revier-fenster.gruen{border-left-color:#2f7d4f}.revier-fenster.gelb{border-left-color:#a8731a}.revier-fenster.rot{border-left-color:#b8433d}
.revier-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.revier-tabelle{width:100%;border-collapse:collapse;font-size:13px}
.revier-tabelle th,.revier-tabelle td{text-align:left;vertical-align:top;padding:5px 4px;border-bottom:1px solid var(--rand)}
.revier-tabelle th{font-weight:600;white-space:nowrap}
.revier-stufe{display:inline-block;padding:1px 7px;border-radius:10px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap}
.revier-stufe.gruen{background:#2f7d4f}.revier-stufe.gelb{background:#a8731a}.revier-stufe.rot{background:#b8433d}.revier-stufe.grau{background:#6b7280}
.revier-gruende{display:block;color:var(--leise);font-size:12px;margin-top:2px}
.revier-kurse{margin:4px 0 0;padding:0;list-style:none;font-size:12.5px}
.revier-kurse li{margin:1px 0}
.revier-kurse b{display:inline-block;min-width:9.5em;font-weight:600}
.modus-reiter button{flex:1;padding:8px 10px;border:1px solid var(--rand);background:var(--weiss);color:var(--leise);
  border-radius:var(--radius-klein);font:600 13px/1.2 var(--kopf);cursor:pointer}
.modus-reiter button.an{background:var(--akzent-hell);border-color:var(--akzent);color:var(--dunkel)}
.modus-reiter button:hover{border-color:var(--akzent)}

/* Zwischenstopps im Formular: Zeilen und Griff in segeln-ui.css */
.stationen-knoepfe{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}
.schalter{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 8px}
.f.blass{opacity:.5}

/* Nadeln auf der Karte: Zwischenstopp, Ziehen, Tagesziel */
.stopp-pin{background:none;border:0}
.stopp-pin span{display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:#f59e0b;border:2px solid #fff;box-shadow:var(--schatten);color:#fff;
  font:700 12px/22px var(--kopf);text-align:center}
.stopp-pin span::before{content:"";display:block;transform:rotate(45deg)}
.stopp-pin.zieh span{background:var(--akzent)}
.stopp-pin.tag span{background:#1f3d52}   /* auf der Karte, auch im Dunkeln dieselbe Nadel */

/* Route von Hand: Griffe der Wegpunkte (28 px Fangfläche für den Finger, der Kreis darin
   14 px) und das + auf jeder längeren Geraden; die Leiste liegt wie der Wahlmodus oben */
.hand-punkt,.hand-mitte{background:none;border:0;display:flex;align-items:center;justify-content:center;cursor:grab}
.hand-punkt span{display:block;width:14px;height:14px;border-radius:50%;background:var(--weiss);
  border:3px solid var(--dunkel);box-shadow:0 1px 3px rgba(20,40,60,.35)}
.hand-punkt:hover span,.hand-punkt.leaflet-drag-target span{background:#f59e0b;border-color:var(--weiss)}
.hand-mitte span{display:block;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.8);
  border:1.5px solid var(--dunkel);color:var(--dunkel);font:700 13px/13px var(--kopf);text-align:center;opacity:.75}
.hand-mitte:hover span{opacity:1;background:var(--weiss)}
.hand-leiste button.klein:disabled{opacity:.4}
.hand-leiste button{flex:none}
#hand-leiste-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.karte-hinweis:not([hidden]) ~ .hand-leiste{display:none}
.app.fahrt-laeuft .hand-leiste,.app.fahrt-laeuft .hand-punkt,.app.fahrt-laeuft .hand-mitte{display:none}
.linien-wahl{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin:8px 0}
.linien-titel{font-size:12px;font-weight:600;color:var(--leise)}

/* Strecke: Kennzahlen, Knöpfe, Alternativen */
.strecke-box .inhalt{padding-top:12px}
.planer-knoepfe{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
a.knopf{display:inline-block;text-decoration:none}
.alternativen h3{margin-top:12px}
.alt-karten{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.alt-karte{flex:1 0 46%;min-width:150px;text-align:left;background:var(--weiss);border:1px solid var(--rand);
  border-radius:var(--radius-klein);padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px;
  /* ein Knopf erbt nowrap und Mitte: lange Titel ("über Marstal Ansteuerung") liefen über den Rand */
  white-space:normal;align-items:flex-start;justify-content:flex-start;line-height:1.3;height:auto}
.alt-karte b{overflow-wrap:anywhere}
.alt-karte b{font:600 13px/1.3 var(--kopf);color:var(--dunkel)}
.alt-karte span{font-size:12px;color:var(--text)}
.alt-karte span.leise{font-size:11px}
.alt-karte.an{border-color:var(--akzent);background:var(--akzent-hell)}
.alt-karte:hover{border-color:var(--akzent)}

/* Törnplan: ein Kasten je Tag */
.toern-tage{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.toern-tag{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:9px 11px;cursor:pointer}
.toern-tag:hover{border-color:var(--akzent)}
.tag-kopf{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.tag-kopf b{font:600 13px/1.3 var(--kopf);color:var(--dunkel)}
.tag-kopf .leise{margin:0 0 0 auto}
.tag-nr{flex:0 0 22px;height:22px;border-radius:50%;color:#fff;font:700 12px/22px var(--kopf);text-align:center}
.tag-weg{font-size:13px}
.toern-tag .warnung{color:var(--rot);font-size:12.5px;margin-top:3px}

/* Hafen-Steckbrief: Verweise, Ankerplätze, Versorgung an Land */
.hafen-extra{margin-top:12px;border-top:1px solid var(--linie);padding-top:10px}
.see-regeln{margin-bottom:10px}
.verweise{margin-bottom:10px}
.verweis{display:flex;flex-direction:column;gap:1px;padding:6px 9px;margin-bottom:5px;background:var(--flaeche);
  border-radius:var(--radius-klein);text-decoration:none;color:var(--text)}
.verweis b{font:600 12.5px/1.3 var(--kopf);color:var(--akzent)}
.verweis span{font-size:11.5px;color:var(--leise)}
.verweis:hover{background:var(--akzent-hell)}
.anker-eintrag,.poi-gruppe{padding:6px 0;border-bottom:1px solid var(--linie);font-size:13px}
.anker-eintrag:last-child,.poi-gruppe:last-child{border-bottom:0}
.klein-hafen{padding:7px 0;border-bottom:1px solid var(--linie)}
.klein-hafen .hafen-kopf{display:flex;gap:8px;align-items:baseline}
.klein-hafen .hafen-kopf .leise{margin-left:auto}
.warnung{color:var(--rot)}
button.link{background:none;border:0;padding:0;color:var(--akzent);font:600 13px/1.4 var(--kopf);cursor:pointer;text-align:left}
button.link:hover{text-decoration:underline}
.land{margin:6px 0;border:1px solid var(--linie);border-radius:var(--radius-klein);padding:6px 9px}
.land summary{cursor:pointer;font-size:13px}
.land .inhalt{padding:6px 0 0}
.land p{margin:0 0 6px;font-size:12.5px}

/* Drucken: der Törnplan aufs Papier, ohne Karte und Bedienelemente */
.druck-kopf{display:none}

@media print{
  body{overflow:visible;background:#fff}
  .app{display:block;height:auto}
  .karte-wrap,.zeitleiste,.feld-steuerung,.planer-knoepfe,.modus-reiter,.stationen-knoepfe,
  .panel-griff,.sheet-griff,.ortswahl,.steckbrief-zeile,#form,.alternativen,.tage-reiter,
  .alarm-form,#hafen-suche,.karte-legende{display:none !important}
  .druck-kopf{display:block !important;margin:0 0 14px;padding:0 0 10px;border-bottom:2px solid #333}
  .druck-kopf h2{font-size:18px}
  .druck-kopf p{margin:4px 0 0;font-size:12px;color:#444}
  .panel{position:static;width:auto;max-width:none;box-shadow:none;border:0}
  .panel-inhalt{overflow:visible;max-height:none}
  .abschnitt{break-inside:avoid;border:0;border-bottom:1px solid #ddd}
  .abschnitt>.inhalt,details>.inhalt{display:block !important}
  details{open:open}
  .toern-tag{break-inside:avoid;border:1px solid #ccc}
}
/* Rueckblick je Hafen: ein Balken je Tag, Farbe nach Urteil */
.rueckblick-grafik{margin:6px 0 2px;overflow-x:auto}
.tabelle.ausblick{margin:6px 0 2px}
.tabelle.ausblick td{vertical-align:middle}
.tabelle.ausblick tr.tendenz td{opacity:.6}
.tabelle.ausblick .badge{font-size:10px;padding:1px 6px}
.rueckblick-svg rect{fill:var(--akzent);opacity:.85}
.rueckblick-svg rect.gut{fill:var(--gruen)}
.rueckblick-svg rect.stark{fill:var(--gelb)}
.rueckblick-svg rect.zuviel{fill:var(--rot)}
.rueckblick-svg rect.flau{fill:var(--rand)}
.rueckblick-svg text{font-size:9px;fill:var(--leise)}

/* == Tide (Nordsee) ======================================================= */

.tide-mond { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--flaeche); border-radius: 10px; margin-bottom: 10px; }
.tide-mond-zeichen { font-size: 26px; line-height: 1; color: var(--akzent); }
.tide-haefen { display: flex; flex-wrap: wrap; gap: 10px; }
.tide-hafen { flex: 1 1 280px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; }
.tide-kopf { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; }
.tide-kenn { font-size: 13px; margin: 4px 0 6px; }
.tide-kurve { width: 100%; height: auto; display: block; margin: 4px 0; }
.tide-flaeche { fill: var(--akzent-hell); }
.tide-linie { fill: none; stroke: var(--akzent); stroke-width: 1.6; }
.tide-hw { fill: var(--gruen); }
.tide-nw { fill: var(--rot); }
.tide-jetzt { stroke: var(--dunkel); stroke-width: 1; stroke-dasharray: 2 2; }
.tide-scheitel-reihe { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin-bottom: 4px; }
.tide-scheitel.hw b { color: var(--gruen); }
.tide-scheitel.nw b { color: var(--rot); }
.tide-tor { padding: 8px 0; border-top: 1px solid var(--linie); font-size: 13px; }
#tide-tore h3 { margin: 14px 0 4px; }
/* Törnplaner: siehe segeln-ui.css. */

/* == Dunkel und Nacht ==========================================================
   Dunkel folgt dem System (prefers-color-scheme) oder der Wahl im Kopf (Knopf
   "Darstellung", data-darstellung auf html). Nacht ist Dunkel mit rotem Filter
   ueber der ganzen Seite samt Karte: rotes Licht haelt die Dunkeladaption der
   Augen bei der Nachtfahrt. Im hellen Modus gelten die Rueckfallwerte der
   Variablen, dort aendert sich nichts. */
@media (prefers-color-scheme:dark){
  :root:not([data-darstellung="hell"]){
    color-scheme:dark;
    --flaeche:#10171d; --weiss:#1a232b; --text:#dde6ec; --leise:#9aabb7; --linie:#2a3640; --rand:#3a4955;
    --akzent:#6fa3c4; --akzent-hover:#8cb8d4; --akzent-hell:#1f3444; --akzent2:#7fb2d3; --dunkel:#cfe0ec; --knopf-text:#0d1419;
    --gruen:#5cbf85; --gelb:#e0a94a; --rot:#ef7d76; --gruen-bg:#15301f; --gelb-bg:#33280f; --rot-bg:#3a1917;
    --band:rgba(111,163,196,.2); --nacht:rgba(0,0,0,.28); --fahrt:rgba(92,191,133,.2);
    --schatten:0 1px 3px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.4);
    --flaeche-hell:#212c35; --flaeche-hell2:#28343e; --leise-grau:#7d8b96; --gruen-text:#7fd1a0; --gelb-bg-hell:#2e2410;
    --rand-akzent:#3b566a; --rand-dunkel:#5a6975; --karte-bg:#0f1a22; --binnen-bg:#13302a; --binnen-text:#8fd6bf;
  }
}
:root[data-darstellung="dunkel"],:root[data-darstellung="nacht"]{
  color-scheme:dark;
  --flaeche:#10171d; --weiss:#1a232b; --text:#dde6ec; --leise:#9aabb7; --linie:#2a3640; --rand:#3a4955;
  --akzent:#6fa3c4; --akzent-hover:#8cb8d4; --akzent-hell:#1f3444; --akzent2:#7fb2d3; --dunkel:#cfe0ec; --knopf-text:#0d1419;
  --gruen:#5cbf85; --gelb:#e0a94a; --rot:#ef7d76; --gruen-bg:#15301f; --gelb-bg:#33280f; --rot-bg:#3a1917;
  --band:rgba(111,163,196,.2); --nacht:rgba(0,0,0,.28); --fahrt:rgba(92,191,133,.2);
  --schatten:0 1px 3px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.4);
  --flaeche-hell:#212c35; --flaeche-hell2:#28343e; --leise-grau:#7d8b96; --gruen-text:#7fd1a0; --gelb-bg-hell:#2e2410;
  --rand-akzent:#3b566a; --rand-dunkel:#5a6975; --karte-bg:#0f1a22; --binnen-bg:#13302a; --binnen-text:#8fd6bf;
}
/* Karte und Leaflet-Bedienelemente im Dunkeln: die hellen OSM-Kacheln invertiert, Wasser wird dunkel */
@media (prefers-color-scheme:dark){
  :root:not([data-darstellung="hell"]) .osm-tiles .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.85) saturate(.5)}
  :root:not([data-darstellung="hell"]) .leaflet-bar a,:root:not([data-darstellung="hell"]) .leaflet-popup-content-wrapper,
  :root:not([data-darstellung="hell"]) .leaflet-popup-tip,:root:not([data-darstellung="hell"]) .leaflet-control-attribution{background:var(--weiss);color:var(--text)}
}
:root[data-darstellung="dunkel"] .osm-tiles .leaflet-tile,:root[data-darstellung="nacht"] .osm-tiles .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.85) saturate(.5)}
:root[data-darstellung="dunkel"] .leaflet-bar a,:root[data-darstellung="dunkel"] .leaflet-popup-content-wrapper,
:root[data-darstellung="dunkel"] .leaflet-popup-tip,:root[data-darstellung="dunkel"] .leaflet-control-attribution,
:root[data-darstellung="nacht"] .leaflet-bar a,:root[data-darstellung="nacht"] .leaflet-popup-content-wrapper,
:root[data-darstellung="nacht"] .leaflet-popup-tip,:root[data-darstellung="nacht"] .leaflet-control-attribution{background:var(--weiss);color:var(--text)}
/* Nacht: alles rot und gedimmt (Multiplizieren mit Rot laesst nur den Rotkanal stehen) */
:root[data-darstellung="nacht"] body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:#d01800;mix-blend-mode:multiply}
.darstellung-knopf{flex:none;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--rand);border-radius:8px;
  background:var(--weiss);color:var(--text);font-size:12px;line-height:1.1;cursor:pointer}
@media print{:root[data-darstellung="nacht"] body::after{display:none}}
/* Einstellungen: Windeinheit und Darstellung */
.einstellungen-knopf{display:inline-flex;align-items:center;gap:5px}
.einstellungen{position:fixed;top:72px;left:16px;z-index:62;width:320px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 88px);overflow-y:auto;
  padding:14px 16px;border:1px solid var(--rand);border-radius:12px;background:var(--weiss);color:var(--text);box-shadow:0 12px 32px rgba(20,40,60,.22)}
.einstellungen-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.einstellungen-kopf h2{margin:0;font-size:16px}
.einstellungen .schliessen{min-width:44px;min-height:44px;border:0;background:none;color:var(--text);font-size:22px;cursor:pointer}
.einstellung{border:0;margin:0 0 12px;padding:0}
.einstellung legend{padding:0;margin-bottom:6px;font-weight:600;font-size:14px}
.einstellung-wahl{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.einstellung-sprache{grid-template-columns:repeat(4,1fr)}
.einstellung-sprache span{font-size:13px}
.einstellung-wahl label{position:relative;display:block}
.einstellung-wahl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.einstellung-wahl span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--rand);border-radius:8px;font-size:14px}
.einstellung-wahl input:checked+span{background:var(--akzent);border-color:var(--akzent);color:var(--knopf-text);font-weight:600}
.einstellung-wahl input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:2px}
.einstellungen .leise{margin:8px 0 0;font-size:13px}
@media (max-width:899px){.einstellungen{top:auto;bottom:calc(16px + var(--nav-h, env(safe-area-inset-bottom,0px)));left:16px;right:16px;width:auto;max-width:none}}
@media print{.einstellungen{display:none}}