/* Aus dem Planer übernommen (tools/extract_planner_assets.py). Nicht von Hand ändern,
   eigene Ergänzungen gehören nach app.css. */
@import url(/static/fonts/fonts.css);
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: nautical-chart sheet. White deep water, blue shallows, buff land, magenta overprint for the route and anything selected.
   Square corners, ruled frames, a graduated neatline around the map. */
:root{
  --paper:#F3F4F1; --white:#FFFFFF; --shoal:#C3DCEB; --shoal-2:#E1EDF4; --land:#F4E2A9; --land-2:#ECE3C8; --land-line:#857142;
  --ink:#0E1114; --ink-2:#434C55; --hair:#B9C0C7; --panel:#FFFFFF;
  --mag:#A00F70; --mag-soft:#F5DCEC; --sea-ink:#225A82; --road:#B4533A;
  --ok:#1D7A4B; --ask:#2860B0; --todo:#B05F00; --idea:#7A828A; --bad:#B42A20;
  --st-saigon:#C0402C; --st-tamcoc:#4B8128; --st-lanha:#127E89; --st-hanoi:#98690A; --st-phuquoc:#2B5CA4;
  --st-frankfurt:#6F7882; --st-transit:#6F7882; --st-heim:#6F7882;
  --f-cond:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-serif:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#060B11; --white:#0B141E; --shoal:#12304A; --shoal-2:#0E2134; --land:#332D19; --land-2:#211F14; --land-line:#7E7349;
  --ink:#EBF0F5; --ink-2:#A6B2BD; --hair:#33414F; --panel:#101B27;
  --mag:#E36BC4; --mag-soft:#3A1731; --sea-ink:#7FB5DF; --road:#CF7A5D;
  --ok:#4CC27F; --ask:#7EA1F2; --todo:#E9A23B; --idea:#9AA6A1; --bad:#F0796B;
  --st-saigon:#EE7353; --st-tamcoc:#86BE62; --st-lanha:#41BAC0; --st-hanoi:#E0AE45; --st-phuquoc:#6699E8;
  --st-frankfurt:#8E98A3; --st-transit:#8E98A3; --st-heim:#8E98A3; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#060B11; --white:#0B141E; --shoal:#12304A; --shoal-2:#0E2134; --land:#332D19; --land-2:#211F14; --land-line:#7E7349;
  --ink:#EBF0F5; --ink-2:#A6B2BD; --hair:#33414F; --panel:#101B27;
  --mag:#E36BC4; --mag-soft:#3A1731; --sea-ink:#7FB5DF; --road:#CF7A5D;
  --ok:#4CC27F; --ask:#7EA1F2; --todo:#E9A23B; --idea:#9AA6A1; --bad:#F0796B;
  --st-saigon:#EE7353; --st-tamcoc:#86BE62; --st-lanha:#41BAC0; --st-hanoi:#E0AE45; --st-phuquoc:#6699E8;
  --st-frankfurt:#8E98A3; --st-transit:#8E98A3; --st-heim:#8E98A3; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
body{background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--paper)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--sea-ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--mag);outline-offset:2px}
.cap{font-family:var(--f-cond);font-weight:600;}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.vn{font-family:var(--f-serif);font-style:italic;font-weight:400}
.muted{color:var(--ink-2)}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---- title strip ---- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper);border-bottom:3px double var(--ink)}
.bar .wrap{display:flex;align-items:stretch;gap:22px;min-height:56px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0}
.mark b{font:700 22px/1 var(--f-cond);}
.mark span{font:500 12.5px/1.25 var(--f-mono);color:var(--ink-2);border-left:1px solid var(--hair);padding-left:12px}
.tabs{display:flex;margin:0 auto}
.tab{display:flex;align-items:center;gap:8px;padding:0 16px;color:var(--ink-2);text-decoration:none;font:600 16px/1 var(--f-cond);border-bottom:3px solid transparent;margin-bottom:-3px;white-space:nowrap}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mag)}
.tab .cnt{font:600 11px/1 var(--f-mono);color:var(--mag)}
.bar-r{display:flex;align-items:center;gap:14px;flex-shrink:0}
.clk{font:500 12.5px/1.25 var(--f-mono);color:var(--ink-2);text-align:right}
.clk b{color:var(--ink);font-weight:600}
.sync{position:relative}
.sync summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;font:600 13px var(--f-cond);white-space:nowrap;padding:6px 0}
.sync summary::-webkit-details-marker{display:none}
.dot{width:9px;height:9px;background:var(--idea);flex-shrink:0}
.dot.ok{background:var(--ok)} .dot.busy{background:var(--ask);animation:pulse 1s infinite} .dot.err{background:var(--bad)} .dot.local{background:var(--todo)}
@keyframes pulse{50%{opacity:.3}}
.sync-pop{position:absolute;right:0;top:calc(100% + 10px);width:300px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--ink);padding:14px;display:grid;gap:10px;font-size:13.5px;z-index:50}
.ibtn{width:34px;height:34px;border:1px solid var(--ink);background:var(--panel);display:grid;place-items:center;color:var(--ink);padding:0}
.ibtn svg{width:16px;height:16px}
.ibtn:hover{background:var(--shoal-2)}
.ibtn[aria-pressed="true"]{background:var(--mag);color:var(--white);border-color:var(--mag)}

/* ---- generic ---- */
main{padding-block:22px 90px}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px 24px;padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:22px}
.head h2{font:700 clamp(30px,4vw,46px)/1 var(--f-cond);}
.head .sub{font:500 14px var(--f-mono);color:var(--ink-2);margin-bottom:6px}
.head p{color:var(--ink-2);max-width:64ch;margin-top:8px;font-size:14.5px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--ink);background:var(--panel);color:var(--ink);text-decoration:none;font:600 14px/1 var(--f-cond);white-space:nowrap}
.btn:hover{background:var(--shoal-2)}
.btn.pri{background:var(--mag);border-color:var(--mag);color:#fff}
.btn.pri:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn svg{width:15px;height:15px}
.sec{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:34px 0 12px}
.sec h3{font:700 19px/1 var(--f-cond);white-space:nowrap}
.sec::after{content:"";flex:1;border-top:1px solid var(--ink);transform:translateY(-4px)}
.sec .aside{order:2;font:500 12px var(--f-mono);color:var(--ink-2)}
.box{border:1px solid var(--ink);background:var(--panel)}
.seg{display:inline-flex;border:1px solid var(--ink)}
.seg button{border:0;border-left:1px solid var(--ink);background:var(--panel);padding:7px 12px;font:600 13px/1 var(--f-cond);color:var(--ink-2)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* status marks: shape + colour */
.mk{display:inline-flex;align-items:center;gap:6px;font:600 14px/1.2 var(--f-cond);color:var(--c);background:none;border:0;padding:2px 0;white-space:nowrap}
.mk::before{content:"";width:10px;height:10px;border:1.6px solid var(--c);flex-shrink:0}
.mk.s-gebucht{--c:var(--ok)} .mk.s-gebucht::before{background:var(--c)}
.mk.s-angefragt{--c:var(--ask)} .mk.s-angefragt::before{background:linear-gradient(135deg,var(--c) 50%,transparent 50%)}
.mk.s-offen{--c:var(--todo)}
.mk.s-idee{--c:var(--idea)} .mk.s-idee::before{border-style:dashed}
button.mk:hover{text-decoration:underline;text-underline-offset:3px}
.flag{display:inline-flex;align-items:center;gap:5px;font:600 13.5px var(--f-cond);color:var(--todo)}
.flag::before{content:"!";display:grid;place-items:center;width:13px;height:13px;border:1.5px solid currentColor;font:700 9px var(--f-mono)}
.code{font:600 12.5px var(--f-mono);border:1px solid var(--hair);padding:0 5px;color:var(--ink-2);white-space:nowrap}
.wp{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.6px solid var(--c,var(--ink));color:var(--c,var(--ink));font:700 12px/1 var(--f-mono);background:var(--panel);flex-shrink:0}
.sw{display:inline-block;width:10px;height:10px;background:var(--c);flex-shrink:0}

/* ======================= KARTE ======================= */
.chart{display:grid;grid-template-columns:340px minmax(0,1fr);border:1px solid var(--ink);background:var(--panel)}
.panel{border-right:1px solid var(--ink);display:flex;flex-direction:column;min-width:0;max-height:var(--mapH);overflow:auto}
.cart{padding:16px 18px 14px;border-bottom:1px solid var(--ink)}
.cart h1{font:700 44px/.95 var(--f-cond);}
.cart .t2{font:600 15px var(--f-cond);margin-top:6px}
.cart .t3{font:400 13px/1.5 var(--f-mono);color:var(--ink-2);margin-top:8px}
.cd{display:flex;align-items:baseline;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--hair)}
.cd b{font:600 34px/1 var(--f-mono);color:var(--mag);}
.cd span{font-size:13px;color:var(--ink-2);line-height:1.3}
.p-sec{padding:12px 18px;border-bottom:1px solid var(--hair)}
.p-sec:last-child{border-bottom:0}
.p-h{font:600 14px var(--f-cond);color:var(--ink-2);margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
.legs{display:flex;flex-direction:column}
.leg{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border:0;border-top:1px solid var(--hair);background:none;text-align:left;width:100%;color:var(--ink)}
.leg:first-child{border-top:0}
.leg:hover .nm{color:var(--mag)}
.leg .nm{font:600 16px/1.1 var(--f-cond);}
.leg .nm i{font:italic 400 13px var(--f-serif);letter-spacing:0;text-transform:none;color:var(--ink-2);margin-left:6px}
.leg .dt{font:400 13px var(--f-mono);color:var(--ink-2);display:block;margin-top:2px}
.lyr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.lyr label{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.lyr input{accent-color:var(--mag);width:15px;height:15px;margin:0}
.lyr svg{width:26px;height:12px;flex-shrink:0}
.p-note{font:400 13px/1.45 var(--f-mono);color:var(--ink-2)}
.back{border:0;background:none;padding:0;font:600 13px var(--f-cond);color:var(--mag)}
.st-img{aspect-ratio:16/9;background:var(--shoal-2) center/cover no-repeat;border-bottom:1px solid var(--ink);max-width:100%}
.st-title{padding:12px 18px;border-bottom:1px solid var(--hair)}
.st-title h3{font:700 28px/1 var(--f-cond);display:flex;align-items:center;gap:10px}
.st-title .vn{font-size:15px;color:var(--ink-2);display:block;margin-top:3px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;font-size:13px;margin:0}
.kv dt{font:600 13.5px var(--f-cond);color:var(--ink-2);padding-top:1px}
.kv dd{margin:0;min-width:0}
.mini{display:flex;flex-direction:column}
.mini-row{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--hair);font-size:13.5px;cursor:pointer}
.mini-row:first-child{border-top:0}
.mini-row:hover b{color:var(--mag)}
.mini-row .tm{font:500 13px var(--f-mono);color:var(--ink-2)}
.mini-row b{font-weight:600}
.poi-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--hair);font-size:13.5px}
.poi-row:first-child{border-top:0}
.poi-row .pn{width:20px;height:20px;border:1.4px solid var(--ink);display:grid;place-items:center;font:600 10.5px var(--f-mono);background:var(--panel)}
.poi-row.in .pn{background:var(--mag);border-color:var(--mag);color:#fff}
.poi-row button.nmb{border:0;background:none;padding:0;text-align:left;font-weight:600;color:var(--ink)}
.poi-row button.nmb:hover{color:var(--mag)}
.add{border:1px solid var(--ink);background:var(--panel);font:600 11.5px/1 var(--f-cond);padding:5px 7px;white-space:nowrap}
.add:hover{background:var(--mag);border-color:var(--mag);color:#fff}
.poi-row.in .add{border-color:var(--hair);color:var(--ink-2)}

.frame{position:relative;height:var(--mapH);min-width:0;background:var(--panel);overflow:hidden;user-select:none;-webkit-user-select:none}
.frame svg.fr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mapbox{position:absolute;inset:var(--M);overflow:hidden;background:var(--shoal);outline:1px solid var(--ink)}
.mapbox svg{display:block;touch-action:none}
.mapbox.pin svg{cursor:crosshair}
.fr-band{fill:var(--panel);stroke:var(--ink);stroke-width:1}
.fr-seg{fill:var(--ink)}
.fr-lbl{font:600 10.5px var(--f-mono);fill:var(--ink)}
.m-sea{fill:var(--shoal)} .m-deep{fill:var(--shoal-2)} .m-deeper{fill:var(--white)}
.m-grat{fill:none;stroke:var(--sea-ink);stroke-opacity:.22;stroke-width:.6}
.m-nb{fill:var(--land-2);stroke:none}
.m-vn{fill:var(--land);stroke:none}
.m-coast{fill:none;stroke:var(--land-line);stroke-width:.9}
.m-border{fill:none;stroke:var(--ink-2);stroke-width:1.1;stroke-dasharray:6 2 1.5 2}
.m-lake{fill:var(--shoal);stroke:var(--sea-ink);stroke-width:.5}
.m-river{fill:none;stroke:var(--sea-ink);stroke-width:1;stroke-opacity:.8}
.m-road{fill:none;stroke:var(--road);stroke-width:1.1;stroke-opacity:.75}
.m-rail1{fill:none;stroke:var(--ink);stroke-width:1.9;stroke-opacity:.8}
.m-rail2{fill:none;stroke:var(--land);stroke-width:.8;stroke-dasharray:4 4}
.m-road2{fill:none;stroke:var(--road);stroke-width:.7;stroke-opacity:.55}
.m-urban{fill:color-mix(in srgb,var(--land-line) 28%,var(--land));stroke:none}
.m-leg{fill:none;stroke:var(--mag);stroke-width:2.2}
.m-leg.flight{stroke-width:1.8}
.m-leg.pending{stroke-dasharray:7 5}
.m-leg.long{stroke-width:1.3;stroke-opacity:.55}
.m-leg.past{stroke-opacity:.35}
.m-leg.hl{stroke-width:3.4}
.m-legh{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
svg.no-route .g-route,svg.no-route .s-route{display:none}
svg.no-rail .m-rail1,svg.no-rail .m-rail2{display:none}
svg.no-road .m-road,svg:not(.z3) .m-road,svg.no-road .m-road2,svg:not(.z6) .m-road2{display:none}
svg.no-river .m-river,svg.no-river .m-lake{display:none}
svg.no-depth .m-deep,svg.no-depth .m-deeper{display:none}
svg.no-poi .s-poi,svg.no-pin .s-pin,svg.no-city .s-city{display:none}
.s-water{font:italic 400 13px var(--f-serif);fill:var(--sea-ink);letter-spacing:.02em;pointer-events:none}
.s-water .sm{font-size:11px;letter-spacing:.02em}
.s-country{font:600 13px var(--f-cond);fill:var(--ink-2);letter-spacing:.28em;pointer-events:none}
.s-region{font:italic 400 11.5px var(--f-serif);fill:var(--land-line);pointer-events:none}
.halo{paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.halo-land{paint-order:stroke;stroke:var(--land);stroke-width:3px;stroke-linejoin:round}
.s-city circle{fill:var(--panel);stroke:var(--ink);stroke-width:1.2}
.s-city text{font:500 11.5px var(--f-body);fill:var(--ink)}
.s-peak path{fill:var(--ink)}
.s-peak text{font:500 10.5px var(--f-mono);fill:var(--ink-2)}
.s-apt text{font:600 10px var(--f-mono);fill:var(--ink-2)}
.s-apt path{fill:var(--ink-2)}
.s-st{cursor:pointer}
.s-st .ring{fill:var(--panel);stroke:var(--mag);stroke-width:2}
.s-st .core{fill:var(--mag)}
.s-st .num{font:700 10px var(--f-mono);fill:var(--paper)}
.s-st .lbl{font:700 14px var(--f-cond);fill:var(--ink)}
.s-st .lvn{font:italic 400 12px var(--f-serif);fill:var(--ink-2)}
.s-st.sel .ring{stroke-width:3;r:12}
.s-st:hover .lbl{fill:var(--mag)}
.s-poi{cursor:pointer}
.s-poi rect{fill:var(--panel);stroke:var(--ink);stroke-width:1.3}
.s-poi text.n{font:600 9.5px var(--f-mono);fill:var(--ink)}
.s-poi text.l{font:500 11.5px var(--f-body);fill:var(--ink)}
.s-poi.in rect{fill:var(--mag);stroke:var(--mag)}
.s-poi.in text.n{fill:#fff}
.s-poi:hover text.l{fill:var(--mag)}
.s-pin{cursor:pointer}
.s-pin path{fill:var(--panel);stroke:var(--mag);stroke-width:2}
.s-pin text{font:600 11px var(--f-body);fill:var(--mag)}
.s-leglbl text{font:600 11.5px var(--f-mono);fill:var(--mag)}
.s-arrow{fill:var(--mag)}
.s-here circle.p{fill:none;stroke:var(--mag);stroke-width:2;animation:ping 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.s-here circle.c{fill:var(--mag)}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
.ctrl{position:absolute;top:calc(var(--M) + 10px);right:calc(var(--M) + 10px);display:flex;flex-direction:column;gap:6px;z-index:5}
.ctrl .ibtn{width:36px;height:36px;background:var(--panel)}
.readout{position:absolute;left:calc(var(--M) + 10px);bottom:calc(var(--M) + 10px);display:flex;align-items:end;gap:14px;z-index:5;pointer-events:none}
.readout .xy{font:500 12.5px var(--f-mono);background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--hair);padding:3px 6px;white-space:nowrap}
.sbar{display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--panel) 88%,transparent);padding:4px 6px;border:1px solid var(--hair)}
.sbar .bars{display:flex;height:5px;border:1px solid var(--ink)}
.sbar .bars i{flex:1;background:var(--ink)} .sbar .bars i:nth-child(2){background:var(--panel)}
.sbar span{font:500 12px var(--f-mono)}
.pinhint{position:absolute;top:calc(var(--M) + 10px);left:50%;transform:translateX(-50%);background:var(--mag);color:#fff;font:600 13px var(--f-cond);padding:6px 12px;z-index:6}
.tip{position:absolute;z-index:8;pointer-events:none;background:var(--ink);color:var(--paper);font-size:12.5px;line-height:1.35;padding:6px 9px;max-width:260px}
.tip b{font:600 13.5px var(--f-cond);}
.tip i{font-family:var(--f-serif)}
.pop{position:absolute;z-index:9;width:290px;max-width:calc(100% - 20px);background:var(--panel);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.pop h4{font:700 18px/1.05 var(--f-cond);padding-right:24px}
.pop .vn{color:var(--ink-2);font-size:14px;margin-top:-4px}
.pop p{font-size:13.5px}
.pop .x{position:absolute;top:8px;right:8px;border:0;background:none;font:400 20px/1 var(--f-body);padding:2px 6px;color:var(--ink-2)}
.pop .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pop select{border:1px solid var(--ink);background:var(--panel);padding:6px 8px;font-size:13.5px;flex:1;min-width:0}
.pop .ok{font:600 12.5px var(--f-cond);color:var(--mag)}


.ibtn.sat{font:700 11px var(--f-mono);text-decoration:none}
.ctrl .ibtn[aria-pressed="true"]{background:var(--mag);color:#fff;border-color:var(--mag)}
.attr{position:absolute;right:calc(var(--M) + 6px);bottom:calc(var(--M) + 4px);z-index:5;font:500 9.5px var(--f-mono);color:#fff;background:rgba(0,0,0,.45);padding:2px 5px;pointer-events:none}
svg.sat .m-sea,svg.sat .m-deep,svg.sat .m-deeper,svg.sat .m-nb,svg.sat .m-vn,svg.sat .m-urban,svg.sat .m-lake{fill:none}
svg.sat .m-lake{stroke:none}
svg.sat .m-river,svg.sat .m-road2{display:none}
svg.sat .m-grat{stroke:#fff;stroke-opacity:.16}
svg.sat .m-coast{stroke:rgba(255,255,255,.35)}
svg.sat .m-border{stroke:#ffd54a;stroke-opacity:.8}
svg.sat .m-rail2{stroke:#d8cfa8}
svg.sat .halo,svg.sat .halo-land{stroke:rgba(0,0,0,.72)}
svg.sat .s-city text,svg.sat .s-st .lbl,svg.sat .s-poi text.l,svg.sat .s-peak text,svg.sat .s-apt text,svg.sat .s-region,svg.sat .s-country,svg.sat .s-water,svg.sat .s-pin text{fill:#fff}
svg.sat .s-st .lvn{fill:#e6e6e6}
svg.sat .s-leglbl text{fill:#ffb0e6}
svg.sat .s-peak path,svg.sat .s-apt path{fill:#fff}
svg.sat .m-leg{stroke:#ff4fc1}
svg.sat .s-arrow{fill:#ff4fc1}
/* voyage strip */
.voy{margin-top:16px;border:1px solid var(--ink);background:var(--panel);display:grid;grid-template-columns:auto minmax(0,1fr)}
.voy-ctl{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px;border-right:1px solid var(--ink)}
.voy-days{display:grid;grid-template-columns:repeat(18,minmax(44px,1fr));overflow-x:auto;scrollbar-width:thin}
.vd{border:0;border-left:1px solid var(--hair);background:var(--panel);padding:0 0 6px;display:flex;flex-direction:column;align-items:stretch;gap:3px;color:var(--ink);text-align:center;min-width:0}
.vd:first-child{border-left:0}
.vd .band{height:8px;background:var(--c)}
.vd .wd{font:600 12.5px var(--f-cond);color:var(--ink-2);margin-top:4px}
.vd .dn{font:600 17px/1 var(--f-mono)}
.vd .gl{display:flex;justify-content:center;gap:2px;min-height:14px;color:var(--ink-2)}
.vd .gl svg{width:13px;height:13px}
.vd:hover{background:var(--shoal-2)}
.vd.on{background:var(--mag-soft);box-shadow:inset 0 -3px 0 var(--mag)}
.vd.today .dn{color:var(--mag)}
.vd.bday .dn{text-decoration:underline;text-decoration-color:var(--mag);text-underline-offset:3px}
.voy-axis{grid-column:2;display:flex;justify-content:space-between;font:500 12px var(--f-mono);color:var(--ink-2);padding:4px 8px;border-top:1px solid var(--hair)}

.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--ink);margin-top:16px;background:var(--panel)}
.note{padding:14px 16px;border-left:1px solid var(--ink);min-width:0}
.note:first-child{border-left:0}
.note h4{font:700 15px var(--f-cond);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px}
.note h4 a{font:500 11px var(--f-mono);letter-spacing:0;text-transform:none}
.dl-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--hair);font-size:13.5px;cursor:pointer}
.dl-row:first-of-type{border-top:0}
.dl-row .d{font:600 12.5px var(--f-mono)}
.dl-row .d small{display:block;font-weight:400;color:var(--ink-2);font-size:12px}
.dl-row.urgent .d{color:var(--bad)}
.dl-row small.s{display:block;color:var(--ink-2);font-size:12px}
.stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--hair);font-size:13.5px}
.stat:first-of-type{border-top:0}
.stat b{font:600 15px var(--f-mono)}
.scale{display:flex;height:9px;border:1px solid var(--ink);margin:4px 0 2px;grid-column:1/-1}
.scale span{height:100%;border-right:1px solid var(--panel)}
.scale span:last-child{border-right:0}
.rule{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--hair);font-size:13px}
.rule:first-of-type{border-top:0}
.rule .n{font:600 12px var(--f-mono);color:var(--mag)}
.rule b{display:block;font-weight:600;font-size:13.5px}
.rule span{color:var(--ink-2)}

/* ======================= LOGBUCH ======================= */
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dnav{position:sticky;top:calc(59px + env(safe-area-inset-top,0px));z-index:20;background:var(--paper);padding-block:8px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hair)}
.dnav::-webkit-scrollbar{display:none}
.dnav-in{display:flex;min-width:max-content;border:1px solid var(--ink)}
.dnb{border:0;border-left:1px solid var(--hair);background:var(--panel);width:44px;padding:0 0 5px;display:flex;flex-direction:column;align-items:stretch;color:var(--ink)}
.dnb:first-child{border-left:0}
.dnb i{height:5px;background:var(--c)}
.dnb small{font:600 10.5px var(--f-cond);color:var(--ink-2);margin-top:3px}
.dnb b{font:600 14px var(--f-mono)}
.dnb:hover{background:var(--shoal-2)}
.log{border-top:1px solid var(--ink)}
.lday{display:grid;grid-template-columns:108px minmax(0,1fr);border-bottom:1px solid var(--ink)}
.ldate{padding:14px 12px 14px 0;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:1px}
.ldate .n{font:600 38px/1 var(--f-mono);}
.ldate .w{font:600 13px var(--f-cond);}
.ldate .m{font:400 13px var(--f-mono);color:var(--ink-2)}
.ldate .t{margin-top:auto;font:400 12px var(--f-mono);color:var(--ink-2);padding-top:10px}
.lday.bday .ldate .n{color:var(--mag)}
.lbody{padding:12px 0 12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.lhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.lhead .pl{display:flex;align-items:center;gap:7px;font:600 13px var(--f-cond);color:var(--c)}
.lhead .pl i{font:italic 400 13px var(--f-serif);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.ttl{border:0;background:none;padding:0;text-align:left;font:700 22px/1.1 var(--f-cond);color:var(--ink)}
.ttl:hover{color:var(--mag)}
.night{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--ink-2)}
.night svg{width:15px;height:15px}
.ent{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.en{display:grid;grid-template-columns:92px 22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--hair)}
.en .tm{font:600 14px/1.35 var(--f-mono)}
.en .tm small{display:block;color:var(--ink-2);font-size:11.5px}
.en .ic{color:var(--ink-2);padding-top:2px}
.en .ic svg{width:17px;height:17px}
.en .bd{min-width:0;cursor:pointer}
.en .bd b{font-weight:600;font-size:15px}
.en .bd .code{margin-left:6px}
.en .bd p{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.en .bd:hover b{color:var(--mag)}
.en .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.en .cost{font:500 12.5px var(--f-mono);color:var(--ink-2)}
.en .lnk{font-size:13px;margin-top:3px;display:inline-block}
.empty{padding:10px 0;font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--hair)}
.lfoot{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.lfoot textarea{flex:1;min-width:200px;min-height:36px;resize:vertical;border:0;border-bottom:1px dashed var(--ink-2);background:transparent;padding:7px 2px;font:italic 400 14px var(--f-serif)}
.lfoot textarea:focus{outline:none;border-bottom:1px solid var(--mag)}

/* ======================= BUCHUNGEN ======================= */
.ruler{padding:16px 18px 10px}
.rl{position:relative;height:74px;margin:0 6px}
.rl .base{position:absolute;left:0;right:0;top:34px;border-top:1px solid var(--ink)}
.rl .trip{position:absolute;top:28px;height:12px;background:var(--shoal);border:1px solid var(--sea-ink)}
.rl .tk{position:absolute;top:34px;width:1px;height:5px;background:var(--ink)}
.rl .tk.w{height:10px}
.rl .tl{position:absolute;top:47px;transform:translateX(-50%);font:500 12px var(--f-mono);color:var(--ink-2);white-space:nowrap}
.rl .mkx{position:absolute;top:6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.rl .mkx b{font:600 10px var(--f-mono);color:var(--c)}
.rl .mkx i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--c);margin-top:1px}
.rl .now{position:absolute;top:0;bottom:22px;border-left:2px solid var(--mag)}
.rl .now span{position:absolute;top:-2px;left:5px;font:600 10.5px var(--f-mono);color:var(--mag);white-space:nowrap}
.ledger{border-top:1px solid var(--ink)}
.berth{display:grid;grid-template-columns:180px minmax(0,1fr) 190px;border-bottom:1px solid var(--ink)}
.b-st{padding:14px 12px 14px 0;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:6px}
.b-st .r{display:flex;align-items:center;gap:8px}
.b-st b{font:700 17px/1 var(--f-cond);color:var(--c)}
.b-st .vn{font-size:13.5px;color:var(--ink-2)}
.b-st .dt{font:500 12px var(--f-mono)}
.b-main{padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.b-main h4{font:700 21px/1.1 var(--f-cond);}
.b-next{font-size:13.5px;padding:2px 0 2px 10px;border-left:3px solid var(--mag)}
.b-next b{font:600 12.5px var(--f-cond);margin-right:6px}
.b-side{padding:14px 0 14px 14px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.b-side .amt{font:600 18px var(--f-mono)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font:600 12px var(--f-cond);color:var(--ink-2);padding:8px 10px;border-bottom:1px solid var(--ink)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--shoal-2)}
.tbl .r{text-align:right;font-family:var(--f-mono);white-space:nowrap}
.tbl .grp td{border-bottom:1px solid var(--ink);font:700 14px var(--f-cond);padding-top:16px}
.sx{overflow-x:auto}

/* ======================= BUDGET ======================= */
.bud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);border:1px solid var(--ink);background:var(--panel)}
.bud-total{padding:18px 20px;border-right:1px solid var(--ink);display:flex;flex-direction:column;gap:10px}
.bud-total .big{font:600 clamp(38px,5vw,56px)/1 var(--f-mono);}
.bud-total .scale{height:14px;margin-top:6px}
.bkey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:13px}
.bkey span{display:flex;align-items:center;gap:7px}
.bkey b{margin-left:auto;font:500 12.5px var(--f-mono)}
.bud-g{padding:14px 20px;display:flex;flex-direction:column}
.gr{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) 88px;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--hair);font-size:14px}
.gr:first-of-type{border-top:0}
.gr .bar2{height:8px;display:flex;border:1px solid var(--ink)}
.gr .bar2 span{height:100%}
.gr .a{text-align:right;font:600 13.5px var(--f-mono)}
.bd-b{display:inline-flex;align-items:center;gap:7px;font:600 12.5px var(--f-cond);color:var(--ink-2);white-space:nowrap}
.bd-b::before{content:"";width:10px;height:10px;background:var(--c);border:1px solid var(--ink)}
.b-bezahlt{--c:var(--ok)} .b-gebucht{--c:color-mix(in srgb,var(--ok) 45%,var(--panel))} .b-angebot{--c:var(--ask)} .b-schaetzung{--c:var(--todo)} .b-reserve{--c:var(--idea)}
.conv{padding:16px 18px;display:grid;gap:12px}
.crow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld label{font:600 12px var(--f-cond);color:var(--ink-2)}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--ink);background:var(--panel);padding:8px 10px;font-size:15px;min-width:0;border-radius:0}
.fld textarea{min-height:84px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--mag);outline-offset:-1px}
.fld .mono{font-family:var(--f-mono)}

/* ======================= AUFGABEN ======================= */
.tw{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
.quick{display:flex;gap:0;border:1px solid var(--ink);background:var(--panel);margin-bottom:18px}
.quick input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;padding:10px 12px}
.quick input:focus{outline:none;background:var(--shoal-2)}
.quick input[type="date"]{flex:0 0 160px;border-left:1px solid var(--hair);font-family:var(--f-mono);font-size:13px}
.quick .btn{border:0;border-left:1px solid var(--ink)}
.glab{font:600 13px var(--f-cond);color:var(--ink-2);margin:18px 0 0;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.task{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair);align-items:start}
.task input[type="checkbox"]{appearance:none;width:20px;height:20px;border:1.6px solid var(--ink);margin:2px 0 0;display:grid;place-items:center;cursor:pointer;background:var(--panel);border-radius:0}
.task input[type="checkbox"]:checked{background:var(--ink)}
.task input[type="checkbox"]:checked::after{content:"";width:5px;height:10px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.task .tt{cursor:pointer;min-width:0}
.task .tt b{font-weight:600;font-size:15px}
.task .tt p{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.task .tt:hover b{color:var(--mag)}
.task.done .tt b{text-decoration:line-through;color:var(--ink-2)}
.task .sd{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font:500 13.5px var(--f-mono);color:var(--ink-2);white-space:nowrap}
.task .sd .over{color:var(--bad);font-weight:600}
.task .sd .soon{color:var(--todo);font-weight:600}
.prio{font:700 11.5px var(--f-cond);color:var(--mag)}
.tprog{padding:16px 18px;position:sticky;top:calc(76px + env(safe-area-inset-top,0px))}
.tprog .big{font:600 48px/1 var(--f-mono);}
.tprog .ticks{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;margin:12px 0 8px}
.tprog .ticks i{height:16px;border:1px solid var(--ink)}
.tprog .ticks i.on{background:var(--ink)}
details.dn summary{cursor:pointer;list-style:none}
details.dn summary::-webkit-details-marker{display:none}

/* ======================= DRAWER ======================= */
.scrim{position:fixed;inset:0;background:rgba(10,16,24,.38);z-index:60;opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100%);background:var(--paper);border-left:1px solid var(--ink);z-index:61;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer.on{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:3px double var(--ink)}
.drawer header h3{font:700 22px/1 var(--f-cond);}
.drawer form{flex:1;overflow-y:auto;padding:16px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.drawer .full{grid-column:1/-1}
.drawer footer{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--ink);flex-wrap:wrap}
.drawer footer .r{display:flex;gap:8px}
.helper{grid-column:1/-1;display:flex;gap:8px;align-items:end;padding:10px;border:1px dashed var(--ink-2)}
.helper .fld{flex:1}
.check{display:flex;align-items:center;gap:8px;font-size:14.5px}
.check input{width:18px;height:18px;accent-color:var(--mag)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);background:var(--ink);color:var(--paper);padding:9px 16px;font:600 14px var(--f-cond);opacity:0;transition:.22s;z-index:80;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.notice{padding:12px 14px;border:1px solid var(--todo);background:color-mix(in srgb,var(--todo) 10%,var(--panel));font-size:14px;margin-bottom:16px}
.loading{padding:60px 20px;text-align:center;color:var(--ink-2);font:500 13px var(--f-mono)}

/* ======================= RESPONSIVE ======================= */
:root{--mapH:clamp(520px,calc(100vh - 230px),880px);--M:28px}
@media (max-width:1100px){
  .chart{grid-template-columns:minmax(0,1fr)}
  .panel{border-right:0;border-top:1px solid var(--ink);max-height:none;order:2}
  .frame{order:1}
  .clk{display:none}
  .notes{grid-template-columns:minmax(0,1fr)}
  .note{border-left:0;border-top:1px solid var(--ink)} .note:first-child{border-top:0}
  .berth{grid-template-columns:150px minmax(0,1fr)}
  .b-side{grid-column:1/-1;border-left:0;border-top:1px solid var(--hair);flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 0}
  .bud{grid-template-columns:minmax(0,1fr)} .bud-total{border-right:0;border-bottom:1px solid var(--ink)}
  .tw{grid-template-columns:minmax(0,1fr)} .tprog{position:static}
}
@media (max-width:760px){
  :root{--mapH:min(68vh,600px);--M:20px}
  .bar .wrap{min-height:52px;gap:10px}
  .mark span{display:none}
  .bar-r{margin-left:auto}
  .sync summary .lbl{display:none}
  .tabs{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:35;background:var(--paper);border-top:3px double var(--ink);
    padding:4px max(6px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .tab{flex:1;flex-direction:column;gap:3px;padding:6px 2px;font-size:11.5px;border-bottom:0;border-top:3px solid transparent;margin:0;min-width:0;position:relative}
  .tab[aria-current="page"]{border-top-color:var(--mag);border-bottom:0}
  .tab .cnt{position:absolute;top:4px;right:calc(50% - 22px);font-size:10px}
  main{padding-bottom:120px}
  .fr-lbl{font-size:8.5px}
  .readout .xy{display:none}
  .lday{grid-template-columns:minmax(0,1fr)}
  .ldate{flex-direction:row;align-items:baseline;gap:10px;border-right:0;border-bottom:1px solid var(--hair);padding:10px 0}
  .ldate .n{font-size:26px} .ldate .t{margin:0 0 0 auto;padding:0}
  .lbody{padding-left:0}
  .en{grid-template-columns:62px minmax(0,1fr) auto}
  .en .ic{display:none}
  .berth{grid-template-columns:minmax(0,1fr)}
  .b-st{border-right:0;border-bottom:1px solid var(--hair);flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 0;gap:6px 12px}
  .b-main{padding:12px 0}
  .gr{grid-template-columns:minmax(0,1fr) 84px} .gr .bar2{grid-column:1/-1;grid-row:2}
  .crow{grid-template-columns:minmax(0,1fr)}
  .bkey{grid-template-columns:minmax(0,1fr)}
  .drawer form{grid-template-columns:minmax(0,1fr)}
  .quick{flex-wrap:wrap} .quick input[type="date"]{flex:1 1 140px;border-left:0;border-top:1px solid var(--hair)}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .pop{left:10px!important;right:10px;width:auto!important;top:auto!important;bottom:calc(var(--M) + 10px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}