:root{
  --abyss:#0C1C22; --tide:#14303A; --tide-hi:#1D4250;
  --pounamu:#2C6B5B; --jade-lip:#79CDB4;
  --kowhai:#F0B429; --kowhai-dim:#8a6a20;
  --bone:#ECE7DA; --kelp:#8CA7A3; --danger:#E4785F;
  --nebenbei:#6FB7D6;   /* Stops außerhalb der Route: kühles Blau gegen das warme Kowhai-Gelb */
  --hervor:#9B7BFF;     /* Hervorhebung beim Überfahren: Violett, kommt sonst nirgends vor und hebt sich von Gelb, Blau, Weiß und Kartengrün ab */
  --sheet: 1px solid rgba(140,167,163,.28);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--abyss); color:var(--bone); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
.eyebrow{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--kelp); font-weight:600}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.shell{display:flex; flex-direction:column; height:100%; overflow:hidden}
header.bar{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; padding:14px 22px; border-bottom:var(--sheet); background:linear-gradient(var(--tide), var(--abyss))}
header.bar h1{margin:0; font-size:17px; font-weight:700; letter-spacing:.30em; text-transform:uppercase}
header.bar h1 span{color:var(--kowhai)}
.stats{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
.stat{text-align:right}
.stat b{display:block; font-family:var(--mono); font-size:19px; font-weight:600; line-height:1.15}
.stat small{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--kelp)}

.body{display:flex; flex:1; min-height:0; overflow:hidden; align-items:stretch}
.mapcol{flex:1 1 58%; padding:20px; min-width:0; display:flex; flex-direction:column; gap:10px}
.split{flex:0 0 9px; position:relative; cursor:col-resize; touch-action:none; background:transparent}
.split::before{content:""; position:absolute; inset:0 4px; background:rgba(140,167,163,.35)}
.split::after{content:""; position:absolute; top:50%; left:1px; right:1px; height:26px; margin-top:-13px;
  border-left:1px solid rgba(140,167,163,.5); border-right:1px solid rgba(140,167,163,.5)}
.split:hover::before, .split.zieht::before{background:var(--kowhai)}
.split:focus-visible{outline:2px solid var(--kowhai); outline-offset:-2px}
.panel{flex:0 0 var(--panelbreite,410px); max-width:100%; border-left:var(--sheet); background:var(--tide); display:flex; flex-direction:column; min-height:0}

.sheet{position:relative; flex:1; min-height:0; border:1px solid rgba(140,167,163,.45);
  background:radial-gradient(120% 90% at 30% 10%, #17323d 0%, #0d222a 60%, #091a20 100%); padding:14px}
.sheet::after{content:""; position:absolute; inset:6px; border:1px solid rgba(140,167,163,.18); pointer-events:none}
.sheet.picking{border-color:var(--kowhai)}
svg#map{width:100%; height:100%; display:block; touch-action:manipulation}
.corner{position:absolute; font-family:var(--mono); font-size:9px; color:var(--kelp); letter-spacing:.08em; pointer-events:none}
.corner.tl{top:12px; left:14px}
.corner.br{bottom:12px; right:14px}
.pickbanner{position:absolute; top:14px; left:50%; transform:translateX(-50%); background:var(--kowhai); color:#0C1C22;
  font-size:12px; font-weight:700; letter-spacing:.06em; padding:6px 14px; border-radius:2px; display:none; pointer-events:none; z-index:3}
.sheet.picking .pickbanner{display:block}
.maphint{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--kelp)}

.land{fill:var(--pounamu); stroke:var(--jade-lip); stroke-width:.9; stroke-linejoin:round}
.lake{fill:#12333f; stroke:var(--jade-lip); stroke-width:.5; opacity:.9}
.alps{fill:none; stroke:#9fe0c8; stroke-width:1.1; stroke-dasharray:1 4; stroke-linecap:round; opacity:.55}
.peak{fill:#cfeee0; opacity:.75}
.peaklabel{fill:#cfeee0; font-size:6.5px; letter-spacing:.12em; opacity:.75; font-family:var(--sans)}
.grat{stroke:rgba(140,167,163,.35); stroke-width:.5}
.gratlabel{fill:var(--kelp); font-size:7px; font-family:var(--mono)}
.leg{fill:none; stroke:var(--kowhai); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.leg.est{opacity:.45; stroke-dasharray:5 4; stroke-width:1.8}
.leg.ferry{stroke-dasharray:3 4; stroke:var(--bone); opacity:.75}
/* Zug und Flug: helle Linie statt Kowhai-Gelb — das ist keine Fahrt am Steuer. */
.leg.zug{stroke:var(--bone); stroke-dasharray:6 3; stroke-width:2.2; opacity:.9}
.leg.flug{stroke:var(--bone); stroke-dasharray:.1 5; stroke-width:2; stroke-linecap:round; opacity:.9}
.leglabel.zug, .leglabel.flug{color:var(--bone)}
.detail select{background:var(--abyss); border:1px solid rgba(140,167,163,.3); border-radius:2px; padding:9px 10px; width:100%; color:var(--bone)}
/* Abstecher zu einem reinen Halt: gepunktet statt durchgezogen, aber genauso
   kräftig — mehrere Abstecher je Übernachtung sind normal und sollen alle zu sehen sein. */
.leg.abstecher{stroke-dasharray:.1 4.6; stroke-width:2.4; opacity:.95}
.leg.abstecher.est{stroke-dasharray:.1 4.6; stroke-width:2.2; opacity:.7}
.leglabel.abstecher{opacity:.8}
/* Überfahrene Etappe: heller und breiter, ohne Strichelung — auf Skizze und Liste zugleich. */
.leg.hov{stroke:var(--bone); stroke-width:3.6; opacity:1; stroke-dasharray:none}
.leghit{fill:none; stroke:transparent; stroke-width:12; pointer-events:stroke; cursor:help}
.sheet.picking .leghit{pointer-events:none}
.legtip{position:absolute; z-index:4; pointer-events:none; white-space:nowrap;
  background:rgba(12,28,34,.92); color:var(--bone); border:1px solid var(--kowhai-dim); border-radius:2px;
  padding:4px 8px; font:11px/1.4 var(--mono); box-shadow:0 6px 18px rgba(0,0,0,.45)}
.legtip[hidden]{display:none}
.pin{cursor:pointer}
.pin circle{fill:var(--kowhai); stroke:#0C1C22; stroke-width:1.4; transition:r .12s ease}
.pin text.num{fill:#0C1C22; font-size:8px; font-weight:700; text-anchor:middle; font-family:var(--mono)}
.pin.sel circle{fill:var(--bone)}
.pin:hover circle, .pin.hov circle{r:9.5}
.placelabel{fill:var(--bone); font-size:7.5px; letter-spacing:.14em; text-transform:uppercase;
  paint-order:stroke; stroke:#0C1C22; stroke-width:2.4; stroke-linejoin:round; pointer-events:none; font-family:var(--sans); font-weight:600}
/* Abgespielte Fahrt: Spur und fahrender Punkt in der Hervorhebungsfarbe; die Wege sind solange aus. */
.sheet.fahrt .leg, .sheet.fahrt .leghit, .sheet.fahrt .pin, .sheet.fahrt .placelabel{display:none}
.fahrtspur{fill:none; stroke:var(--hervor); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.fahrtpunkt{fill:var(--hervor); stroke:var(--bone); stroke-width:1.8}
.fahrtpunkt.halt{stroke-width:2.4}
.fahrtlabel{fill:var(--bone); font-size:8px; font-weight:600; letter-spacing:.06em; font-family:var(--sans);
  paint-order:stroke; stroke:#0C1C22; stroke-width:3; stroke-linejoin:round; pointer-events:none}
.scalebar{stroke:var(--kelp); stroke-width:1}
.scaletext{fill:var(--kelp); font-size:7px; font-family:var(--mono)}

.panel .add{padding:16px 18px; border-bottom:var(--sheet)}
.searchwrap{position:relative}
select,input,textarea,button{font-family:inherit; font-size:14px; color:var(--bone)}
input,textarea{background:var(--abyss); border:1px solid rgba(140,167,163,.3); border-radius:2px; padding:9px 10px; width:100%}
input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--kowhai); outline-offset:1px}
button{background:transparent; border:1px solid rgba(140,167,163,.35); color:var(--bone); border-radius:2px;
  padding:0; width:36px; height:36px; flex:0 0 auto; cursor:pointer;
  display:inline-grid; place-items:center}
button:hover{border-color:var(--kowhai); color:var(--kowhai)}
button.on{border-color:var(--kowhai); color:#0C1C22; background:var(--kowhai)}
button:disabled{opacity:.55; cursor:default}
button.danger{border-color:rgba(228,120,95,.5); color:var(--danger)}
button.danger:hover{border-color:var(--danger)}

.gate{position:fixed; inset:0; z-index:50; background:var(--abyss);
  display:grid; place-items:center; padding:24px}
.gate[hidden]{display:none}
.gatebox{width:min(380px,100%); border:var(--sheet); background:var(--tide); padding:26px 24px}
.gatebox h1{font-size:19px; letter-spacing:.02em; margin:6px 0 10px; font-weight:600}
.gatebox p{font-size:12.5px; color:var(--kelp); line-height:1.55; margin-bottom:18px}
.gatebox label{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--kelp); margin-bottom:5px}
.gatezeile{display:flex; gap:8px; margin-top:12px; align-items:center}
.gatezeile input{flex:1}
.gatefehler{margin-top:10px; font-size:12px; color:var(--danger)}
.gatehinweis{margin-top:14px; font-size:11px; color:var(--kelp); font-family:var(--mono); line-height:1.5}

svg.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ic{width:17px; height:17px; display:block; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.laedt .ic{animation:dreh 1s linear infinite; transform-origin:50% 50%}
@keyframes dreh{to{transform:rotate(360deg)}}

.results{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:9;
  background:#0A171C; border:1px solid rgba(140,167,163,.4); max-height:320px; overflow-y:auto; display:none; box-shadow:0 12px 28px rgba(0,0,0,.5)}
.results.open{display:block}
.results .grp{padding:7px 12px 3px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--kelp); background:rgba(140,167,163,.07)}
.results .hit{padding:8px 12px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.results .hit:hover,.results .hit.cur{background:var(--tide-hi)}
.results .hit b{font-weight:600}
.results .hit span{font-size:11px; color:var(--kelp); font-family:var(--mono)}
.results .none{padding:12px; font-size:13px; color:var(--kelp)}
.results .hit.lookup{border-top:1px solid rgba(140,167,163,.25); color:var(--kowhai); font-size:13px}
.results .hit.isonline b::after{content:"◎"; color:var(--kowhai); margin-left:6px; font-size:10px}
.results .prev{max-height:190px; overflow-y:auto}
.results .prev div{padding:6px 12px; font-size:13px; border-bottom:1px solid rgba(140,167,163,.1)}
.results .prev div small{color:var(--kelp); font-family:var(--mono); font-size:10px; margin-left:6px}
.tripdates{display:flex; gap:8px; margin-top:12px}
.tripdates label{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--kelp); margin-bottom:4px}
#endNote{margin-top:7px; font-size:11.5px; color:var(--kelp); font-family:var(--mono)}
a.book{display:inline-grid; place-items:center; text-decoration:none; color:var(--kowhai);
  border:1px solid var(--kowhai-dim); border-radius:2px; width:28px; height:28px}
a.book:hover{border-color:var(--kowhai); background:var(--kowhai); color:#0C1C22}
.stay{margin-top:12px; border-top:1px solid rgba(140,167,163,.22); padding-top:9px}
.stay .hdr{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px}
.stay .hdr b{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--kelp); font-weight:600}
.stay .hdr em{font-style:normal; font-size:10px; color:var(--kelp); font-family:var(--mono)}
.stay .row2{display:flex; justify-content:space-between; gap:9px; align-items:baseline;
  padding:6px 0; border-bottom:1px solid rgba(140,167,163,.1); font-size:12.5px}
.stay .row2 a{color:var(--bone); text-decoration:none}
.stay .row2 a:hover{color:var(--kowhai); text-decoration:underline}
.stay .row2 i{font-style:normal; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--kelp); margin-left:7px}
.stay .row2 span{font-family:var(--mono); font-size:10.5px; color:var(--kelp); white-space:nowrap}
.stay .msg{font-size:12px; color:var(--kelp); padding:4px 0}

/* Feste Höhe, Breite folgt dem Seitenverhältnis — nichts wird beschnitten
   oder verzerrt. Der Rahmen legt sich um das Bild statt umgekehrt. */
.shot{margin:9px 0 2px; border:1px solid rgba(140,167,163,.22); border-radius:2px;
  overflow:hidden; background:rgba(140,167,163,.07);
  width:max-content; max-width:100%; min-width:min(230px,100%)}
/* 158 px ist die Wunschhöhe, nicht die erzwungene: passt ein sehr breites Bild
   nicht ins Panel, gibt die Höhe nach statt das Bild zu verzerren. */
.shot img{display:block; height:auto; width:auto; max-height:158px; max-width:100%; margin:0 auto}
.shot .cap{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--kelp); padding:5px 8px}
.shot .cap a{color:var(--kelp); text-decoration:none; text-align:right; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shot .cap span{white-space:nowrap}
.shot .cap a:hover{color:var(--kowhai); text-decoration:underline}
/* Gebuchte Unterkunft: Karte mit Bild links, Name als Link, Adresse darunter. */
.detail .uk{display:flex; gap:10px; align-items:stretch; margin-top:8px; border:1px solid rgba(140,167,163,.22);
  border-radius:2px; background:rgba(140,167,163,.07); overflow:hidden}
.detail .uk img{width:96px; min-height:64px; object-fit:cover; flex:0 0 auto; display:block}
.detail .uk .ukt{padding:7px 10px 7px 0; min-width:0; font-size:12.5px; line-height:1.45}
.detail .uk .ukt:first-child{padding-left:10px}
.detail .uk a{color:var(--bone); font-weight:600; text-decoration:none}
.detail .uk a:hover{color:var(--kowhai); text-decoration:underline}
.detail .uk .adr{color:var(--kelp); font-family:var(--mono); font-size:11px; margin-top:2px; white-space:pre-line}
.detail .uk .quelle{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--kelp); margin-top:4px}
li.stop .meta .ukmark{color:var(--jade-lip)}
li.stop .meta .untermark{color:var(--bone); font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:12.5px}
body.nurlesen .detail .uk{margin-top:0}
@media print{ .detail .uk{border-color:#ccc; background:#fff} .detail .uk a, .detail .uk .adr{color:#000} }
.detail .acts{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px}
.detail .acts .trenn{width:1px; height:22px; background:rgba(140,167,163,.28); margin:0 2px}
.detail .acts a.book{width:36px; height:36px}
.shot.plain{padding:8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--kelp)}
.umsetz{margin-top:10px; padding:9px 11px; font-size:12.5px; line-height:1.45;
  border-left:2px solid var(--kowhai); background:rgba(240,180,41,.14); color:var(--bone);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.umsetz[hidden]{display:none}
.umsetz button{width:auto; height:28px; padding:0 10px; font-size:12px; margin-left:auto}
.detail .acts button.ort.on{border-color:var(--kowhai); background:var(--kowhai); color:#0C1C22}
#notice{margin-top:10px; padding:9px 11px; font-size:12.5px; line-height:1.45;
  border-left:2px solid var(--kowhai); background:rgba(240,180,41,.09); color:var(--bone); cursor:pointer}

ol.stops{list-style:none; margin:0; padding:8px 0; overflow-y:auto; flex:1; min-height:0;
  scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ ol.stops{scroll-behavior:auto} }
li.stop{position:relative; display:grid; grid-template-columns:16px 26px 42px 1fr auto; gap:4px 9px; padding:11px 18px;
  border-bottom:1px solid rgba(140,167,163,.14); cursor:pointer; align-items:center}
li.stop .grip{cursor:grab; color:var(--kelp); opacity:.35; font-size:14px; line-height:1;
  text-align:center; touch-action:none; user-select:none; -webkit-user-select:none}
li.stop:hover .grip, li.stop.sel .grip{opacity:1}
li.stop.dragging{opacity:.4}
/* Schild am Zeiger, während ein Marker von der Karte in die Liste gezogen wird */
.dragghost{position:fixed; z-index:99; pointer-events:none; background:var(--kowhai); color:#0C1C22;
  font:600 11px/1.4 var(--sans); letter-spacing:.06em; padding:3px 9px; border-radius:2px; box-shadow:0 4px 14px rgba(0,0,0,.5)}
body.zieht, body.zieht *{cursor:grabbing !important; user-select:none; -webkit-user-select:none}
li.stop.dragging .grip{cursor:grabbing}
li.stop.dropbefore::before, li.stop.dropafter::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--kowhai); z-index:3}
li.stop.dropbefore::before{top:-1px}
li.stop.dropafter::after{bottom:-1px}
li.stop:hover{background:var(--tide-hi)}
li.stop.sel{background:var(--tide-hi); box-shadow:inset 3px 0 0 var(--kowhai)}
li.stop .idx{font-family:var(--mono); font-size:11px; color:var(--kowhai); border:1px solid var(--kowhai-dim);
  border-radius:50%; width:24px; height:24px; display:grid; place-items:center}
li.stop .thumb{width:42px; height:32px; border-radius:2px; overflow:hidden;
  background:rgba(140,167,163,.12); border:1px solid rgba(140,167,163,.22)}
li.stop .thumb img{display:block; width:100%; height:100%; object-fit:cover}
li.stop.aus .tools{opacity:1}
li.stop .tools button.mit.aus{color:var(--nebenbei); border-color:rgba(111,183,214,.55)}
li.stop .tools button.mit.aus:hover{border-color:var(--nebenbei)}
li.stop.aus .name, li.stop.aus .meta{opacity:.45}
li.stop.aus .idx{opacity:.4; border-style:dashed}
li.stop.aus .thumb{opacity:.4}
.pin.aus circle{fill:var(--nebenbei); stroke-dasharray:2.4 2.2}
.pin.aus text.num{fill:#0C1C22}
.pin.aus.sel circle{fill:var(--bone)}
.placelabel.aus{fill:var(--nebenbei)}
/* Nur Stopp: hohler Marker — dabei, aber ohne Bett. */
li.stop .tools button.kurz.an, li.stop .tools button.zw.an{border-color:var(--kowhai); color:var(--kowhai)}
li.stop.kurz .idx{background:transparent; border-style:dotted}
li.stop .meta .kurzmark{color:var(--kowhai)}
.pin.kurz circle{fill:#0C1C22; stroke:var(--kowhai); stroke-width:1.6}
.pin.kurz text.num{fill:var(--kowhai)}
.pin.kurz.sel circle{fill:var(--bone); stroke:#0C1C22}
.pin.kurz.sel text.num{fill:#0C1C22}
.pin.kurz.aus circle{fill:#0C1C22; stroke:var(--nebenbei)}
.pin.kurz.aus text.num{fill:var(--nebenbei)}
/* Zwischenstopp: hohl wie der Abstecher, aber mit kräftigem Ring — er liegt auf der Hauptroute. */
.pin.zw circle{stroke-width:2.6}
.nzpin.zw{border-width:3px}
/* Aus der Liste heraus hervorgehoben: eigene Farbe, heller Ring, steht nach sel/aus/kurz, damit sie gewinnt. */
.pin.hov circle, .pin.hov.sel circle, .pin.hov.aus circle, .pin.hov.kurz circle{
  fill:var(--hervor); stroke:var(--bone); stroke-width:2.4; stroke-dasharray:none}
.pin.hov text.num{fill:#0C1C22}
.nzpin.kurz{background:#0C1C22; color:var(--kowhai); border-color:var(--kowhai)}
.nzpin.kurz.sel{background:var(--bone); color:#0C1C22; border-color:#0C1C22}
.nzpin.kurz.aus{color:var(--nebenbei); border-color:var(--nebenbei)}
.nzpin.aus{background:var(--nebenbei); color:#0C1C22; border-style:dashed}
.detail label.mit{display:flex; align-items:center; gap:8px; letter-spacing:0; text-transform:none;
  font-size:13px; color:var(--bone); margin:12px 0 2px; cursor:pointer}
/* Nächte, Anreise und „Teil der Route“ in einer Zeile */
.detail .zeile3{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.detail .zeile3 .n{width:90px}
.detail .zeile3 .a{flex:0 1 230px; min-width:150px}
.detail .zeile3 label.mit{margin:0 0 10px; white-space:nowrap}
body.nurlesen .detail .zeile3{display:none !important}
.detail label.mit input{width:auto; margin:0; accent-color:var(--kowhai)}
li.stop .name{font-weight:600; letter-spacing:.02em}
li.stop .meta{font-family:var(--mono); font-size:11px; color:var(--kelp)}
li.stop .meta .nw{white-space:nowrap}   /* „· 4 Nächte“ bricht nie zwischen Zahl und Wort */
/* An- und Abreise als Kästchen: soll beim Überfliegen der Liste ins Auge fallen. */
li.stop .datum{display:block; width:max-content; margin-top:4px; padding:1px 7px; border-radius:2px;
  font:600 11px/1.5 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap;
  color:var(--kowhai); background:rgba(240,180,41,.13); border:1px solid rgba(240,180,41,.35)}
li.stop.aus .datum{display:none}
/* Vier Knöpfe je Zeile — klein und eng, sonst bricht der Name bei schmalem Panel um. */
li.stop .tools{display:flex; gap:3px; opacity:.35}
li.stop:hover .tools, li.stop.sel .tools{opacity:1}
li.stop .tools button{width:25px; height:25px}
li.stop .tools .ic{width:15px; height:15px}
.detail{grid-column:2 / -1; display:none; padding-top:6px}
/* Der Detailbereich wird nicht mehr in der Zeile aufgeklappt, sondern in den
   Dialog gehoben (dialogSync verschiebt das Element samt Ereignissen). */
/* Nachfrage vor dem Löschen: kleine Box über allem, auch über Blog und Dialog. */
.dialog.frage{z-index:70; background:rgba(5,14,18,.7)}
.fragebox{width:min(400px,100%); background:var(--tide); border:var(--sheet); border-top:3px solid var(--danger); padding:20px 22px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.fragebox p{margin:10px 0 18px; font-size:15px; line-height:1.5; color:var(--bone)}
.fragezeile{display:flex; gap:8px; justify-content:flex-end}
.fragezeile button.text{width:auto; height:34px; padding:0 16px; font-size:13px}
.fragezeile button.danger:hover, .fragezeile button.danger:focus-visible{background:var(--danger); color:#0C1C22; border-color:var(--danger)}
.dialog{position:fixed; inset:0; z-index:40; background:rgba(12,28,34,.74); display:flex; align-items:center; justify-content:center; padding:20px}
.dialog[hidden]{display:none}
.dialogbox{width:min(780px,100%); max-height:92vh; display:flex; flex-direction:column; background:var(--tide);
  border:var(--sheet); box-shadow:0 24px 60px rgba(0,0,0,.6)}
.dialogkopf{display:flex; align-items:center; gap:8px; padding:10px 12px 10px 18px; border-bottom:var(--sheet)}
.dialogkopf button{width:32px; height:32px; font-size:20px; line-height:1}
.dialogkopf button:disabled{opacity:.3}
.dialogtitel{flex:1; font-weight:600; font-size:16px; letter-spacing:.02em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dialoginhalt{overflow:auto; padding:4px 18px 18px}
.dialoginhalt .detail{display:block; grid-column:auto; padding-top:0}
.dialoginhalt .detail .shot{min-width:min(320px,100%)}
.dialoginhalt .detail .shot img{max-height:260px}
@media (max-width:900px){
  .dialog{padding:0}
  .dialogbox{width:100%; height:100%; max-height:none; border:none}
}
.detail textarea{min-height:92px; resize:vertical; line-height:1.55; font-size:14px}
.detail label{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--kelp); margin:8px 0 4px}
.detail .two{display:flex; gap:8px}
.leglabel{padding:3px 18px 3px 54px; font-family:var(--mono); font-size:11px; color:var(--kelp); border-bottom:1px solid rgba(140,167,163,.14)}
.leglabel.ferry{color:var(--jade-lip)}
.leglabel.hov{color:var(--kowhai); background:rgba(240,180,41,.08)}
.empty{padding:40px 24px; color:var(--kelp); text-align:center}
#leaf{position:absolute; inset:14px; z-index:2; background:#0d222a}
.leaflet-container{background:#0d222a !important; font-family:var(--sans) !important}
/* Dauerhafte Ortsnamen in der Straßenkarte, im Ton der Skizze */
.leaflet-tooltip.ortsname{background:rgba(12,28,34,.82); color:var(--bone); border:0; border-radius:2px;
  padding:2px 6px; font:600 10px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  box-shadow:none; pointer-events:none}
.leaflet-tooltip.ortsname::before{display:none}
.leaflet-tooltip.ortsname.aus{color:var(--nebenbei)}
.leaflet-tooltip.etappe{background:rgba(12,28,34,.92); color:var(--bone); border:1px solid var(--kowhai-dim); border-radius:2px;
  padding:4px 8px; font:11px/1.4 var(--mono); box-shadow:none; white-space:nowrap}
.leaflet-tooltip.etappe::before{display:none}
.nzpin{background:var(--kowhai); color:#0C1C22; border:2px solid #0C1C22; border-radius:50%;
  width:24px; height:24px; display:grid; place-items:center; font:700 11px/1 var(--mono);
  box-shadow:0 1px 5px rgba(0,0,0,.55)}
.nzpin.sel{background:var(--bone)}
.leaflet-marker-icon.hov{z-index:1000 !important}
.leaflet-marker-icon.hov .nzpin{transform:scale(1.35); background:var(--hervor); color:#0C1C22; border-color:var(--bone); border-style:solid;
  box-shadow:0 0 0 3px rgba(155,123,255,.4), 0 2px 8px rgba(0,0,0,.6)}
.nzpin{transition:transform .12s ease}
.livewarn{font-size:12px; color:var(--kowhai)}
div.fahrtpunkt{width:18px; height:18px; border-radius:50%; background:var(--hervor); border:2.5px solid var(--bone);
  box-shadow:0 0 0 4px rgba(155,123,255,.35), 0 2px 8px rgba(0,0,0,.6)}
.leaflet-tooltip.fahrtlabel{background:rgba(12,28,34,.92); color:var(--bone); border:1px solid var(--hervor); border-radius:2px;
  padding:3px 8px; font:600 11px/1.4 var(--sans); letter-spacing:.04em; box-shadow:none; white-space:nowrap}
.leaflet-tooltip.fahrtlabel::before{display:none}

.panel footer{padding:12px 18px; border-top:var(--sheet); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.gpanel{padding:16px 18px; border-top:var(--sheet); background:#0A171C; max-height:46vh; overflow-y:auto}
.gpanel h3{margin:0 0 5px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--kelp); font-weight:600}
.gpanel p{margin:0 0 12px; font-size:12.5px; color:var(--kelp); line-height:1.5}
.gpanel a.seg{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  padding:9px 11px; margin-bottom:6px; border:1px solid rgba(140,167,163,.3); color:var(--bone);
  text-decoration:none; border-radius:2px; font-size:13px}
.gpanel a.seg:hover{border-color:var(--kowhai); color:var(--kowhai)}
.gpanel a.seg span{font-family:var(--mono); font-size:11px; color:var(--kelp)}
.gpanel .sep{height:1px; background:rgba(140,167,163,.2); margin:16px 0}
.gpanel ol{margin:0 0 12px; padding-left:18px; font-size:12.5px; color:var(--kelp); line-height:1.65}
.panel footer button{font-size:12px; padding:7px 10px}
/* Nur ansehen (zweites Passwort): alles, was verändert, speichert, ein- oder
   ausführt, ist weg — Suche, Datum, Griffe, Knöpfe, Felder, Export, Import, KI,
   Versionen. Bleiben: Liste, Karten, Fahrt abspielen, Unterkünfte und Wanderungen
   nachschlagen, Google-Maps-Links, Drucken. */
.lesehinweis{display:none}
body.nurlesen .lesehinweis{display:block; font-size:12px; color:var(--kelp); font-family:var(--mono); line-height:1.5}
body.nurlesen .lesehinweis b{color:var(--kowhai); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:10px; margin-right:8px}
body.nurlesen #addLabel, body.nurlesen .searchwrap, body.nurlesen .tripdates,
body.nurlesen #pickBtn, body.nurlesen #routeBtn, body.nurlesen #versBtn, body.nurlesen #planBtn,
body.nurlesen #exportBtn, body.nurlesen #importBtn, body.nurlesen #kmlBtn,
body.nurlesen .detail > label, body.nurlesen .detail > input, body.nurlesen .detail > div > label, body.nurlesen .detail > div > input,
body.nurlesen .detail textarea, body.nurlesen .detail select, body.nurlesen .detail label.mit, body.nurlesen .detail button.ort,
body.nurlesen #pickHelp{display:none !important}
/* Griff und Knöpfe bleiben als Platzhalter im Raster, nur unsichtbar — sonst
   rutschten Nummer und Bild in die leeren Spalten. */
body.nurlesen li.stop .tools, body.nurlesen li.stop .grip{visibility:hidden; pointer-events:none}
/* Ausgenommene Stops (Ideen, Reserven) gehen die Ansichtsversion nichts an. */
body.nurlesen li.stop.aus, body.nurlesen .pin.aus, body.nurlesen .placelabel.aus{display:none}
/* Versionen und KI-Umplanung: Zeilen im Panel, Textknöpfe statt Icon-Knöpfe */
.gpanel textarea{min-height:70px; resize:vertical; margin-bottom:8px}
.gpanel button.text{width:auto; height:30px; padding:0 12px; font-size:12px}
.gpanel button.text.on{background:var(--kowhai); color:#0C1C22; border-color:var(--kowhai)}
.gpanel .zeile{display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:7px 0; border-bottom:1px solid rgba(140,167,163,.14); font-size:12.5px}
.gpanel .zeile small{color:var(--kelp); font-family:var(--mono); font-size:10.5px; margin-left:8px}
.gpanel .zeile .tag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:1px 6px; border-radius:2px; border:1px solid rgba(140,167,163,.35); color:var(--kelp); white-space:nowrap}
.gpanel .zeile .tag.neu{color:var(--kowhai); border-color:var(--kowhai-dim)}
.gpanel .zeile .tag.weg{color:var(--danger); border-color:rgba(228,120,95,.5); text-decoration:none}
.gpanel .zeile.weg span.n{text-decoration:line-through; opacity:.6}
.gpanel .zeile .tag.anders{color:var(--jade-lip); border-color:rgba(121,205,180,.5)}
.gpanel .knoepfe{display:flex; gap:8px; margin:12px 0 4px; flex-wrap:wrap}
.gpanel .zeile.aktiv{background:rgba(240,180,41,.07); margin:0 -6px; padding-left:6px; padding-right:6px}
.gpanel .zeile .knopfreihe{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.gpanel .zeile .tag.veroeff{color:var(--jade-lip); border-color:rgba(121,205,180,.5)}
.gpanel input.planname{margin-bottom:8px}
.gpanel .erkl{font-size:13px; color:var(--bone); line-height:1.5; margin:10px 0; padding:9px 11px;
  border-left:2px solid var(--kowhai); background:rgba(240,180,41,.09)}
/* Dokumente: Ziehfeld mit gestricheltem Rahmen, das beim Ziehen und Hochladen
   aufleuchtet; darunter die Linkzeile; Zeilen mit farbigem Typ-Kürzel, Name
   umbenennbar, neue Zeile blitzt kurz auf. */
.dropzone{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:22px 16px 20px; margin:4px 0 10px; border:1.5px dashed rgba(140,167,163,.45); border-radius:6px; cursor:pointer;
  background:linear-gradient(180deg, rgba(140,167,163,.07), rgba(140,167,163,.02)); color:var(--bone);
  transition:border-color .15s, background .15s, transform .15s}
.dropzone .ic.gross{width:30px; height:30px; color:var(--kowhai); margin-bottom:4px; transition:transform .2s}
.dropzone b{font-size:14px; font-weight:600; letter-spacing:.01em}
.dropzone span{font-size:11.5px; color:var(--kelp); line-height:1.5}
.dropzone:hover, .dropzone:focus-visible{border-color:var(--kowhai); background:linear-gradient(180deg, rgba(240,180,41,.10), rgba(240,180,41,.03))}
.dropzone.ziel{border-style:solid; border-color:var(--kowhai); background:rgba(240,180,41,.14); transform:scale(1.01);
  box-shadow:0 0 0 4px rgba(240,180,41,.18)}
.dropzone.ziel .ic.gross{transform:translateY(-3px) scale(1.15)}
.dropzone.laeuft{border-color:var(--jade-lip); cursor:progress}
.dropzone .fortschritt{width:100%; margin-top:12px}
.dropzone .fortschritt[hidden]{display:none}
.dropzone .balken{height:6px; border-radius:3px; background:rgba(140,167,163,.18); overflow:hidden}
.dropzone .balken i{display:block; height:100%; width:0; border-radius:3px; min-width:6%;
  background:linear-gradient(90deg, var(--jade-lip), var(--kowhai), var(--jade-lip)); background-size:200% 100%;
  animation:fliessen 1.2s linear infinite; transition:width .3s}
@keyframes fliessen{to{background-position:-200% 0}}
.dropzone .ftext{display:block; margin-top:6px; font:11px/1.4 var(--mono); color:var(--kelp); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linkform{display:flex; gap:6px; margin:0 0 14px; align-items:center}
.linkform input{padding:7px 9px; font-size:13px}
.linkform input.url{flex:3; min-width:0}
.linkform input.bez{flex:2; min-width:0}
.linkform button{width:34px; height:34px; flex:0 0 auto}
.gpanel .zeile.dok{padding:9px 0; align-items:flex-start}
.gpanel .zeile.dok > span:first-child{flex:1; min-width:0}
.gpanel .zeile.dok small{display:block; margin:3px 0 0 48px}
.gpanel .zeile.dok .knopfreihe{flex:0 0 auto; flex-wrap:nowrap}
.gpanel .zeile.dok .tag{margin-right:8px; min-width:40px; text-align:center; font-weight:600}
.gpanel .zeile.dok .tag.art-pdf{color:var(--danger); border-color:rgba(228,120,95,.5)}
.gpanel .zeile.dok .tag.art-bild{color:var(--jade-lip); border-color:rgba(121,205,180,.5)}
.gpanel .zeile.dok .tag.art-doc{color:var(--nebenbei); border-color:rgba(111,183,214,.5)}
.gpanel .zeile.dok .tag.art-xls{color:#8fd18f; border-color:rgba(143,209,143,.5)}
.gpanel .zeile.dok .tag.art-zip{color:var(--kowhai); border-color:var(--kowhai-dim)}
.gpanel .zeile.dok .tag.art-link{color:var(--kowhai); border-color:var(--kowhai-dim)}
.gpanel .zeile.dok b{font-weight:600; word-break:break-word}
.gpanel .zeile.dok a.name{color:var(--bone); text-decoration:none}
.gpanel .zeile.dok a.name:hover{color:var(--kowhai); text-decoration:underline}
.gpanel .zeile.dok input.umben{width:auto; min-width:180px; padding:4px 7px; font-size:13px}
.gpanel .zeile.dok .knopfreihe button{width:30px; height:30px}
.gpanel .zeile.dok .knopfreihe button.text{width:auto}
.gpanel .zeile.dok.neu{animation:aufblitzen 1.6s ease-out}
@keyframes aufblitzen{from{background:rgba(121,205,180,.28)} to{background:transparent}}
.gpanel.ziel{box-shadow:inset 0 0 0 3px var(--kowhai)}
/* Offenes Dokumentenpanel: so hoch wie möglich — es nimmt den Platz der Stopliste,
   die solange auf einen schmalen Streifen zusammenrückt. */
#dpanel:not([hidden]){flex:1 1 auto; max-height:none; min-height:0}
.panel:has(#dpanel:not([hidden])) ol.stops{flex:0 0 auto; max-height:96px}
@media (max-width:900px){ .panel:has(#dpanel:not([hidden])) ol.stops{max-height:none} }
body.blogansicht #dokBtn{display:none !important}
/* Abmelden: in der Kopfzeile ganz rechts neben den Kennzahlen, für alle Rollen;
   ohne Function gibt es keine Anmeldung — und nichts abzumelden. */
header.bar #logoutBtn{width:32px; height:32px; align-self:center; margin-left:4px}
body.ohnenetz #logoutBtn{display:none}
.saved{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--kelp); margin-left:auto}

/* ---- Blog: Knopf in der Zeile, Vollbild-Ansicht mit Artikel, Editor, Kommentaren ---- */
li.stop .blogbtn{display:inline-grid; vertical-align:middle; width:22px; height:22px; margin-left:7px; opacity:.4; color:var(--kelp); border-color:transparent}
li.stop .blogbtn .ic{width:14px; height:14px}
li.stop .blogbtn.an{opacity:1; color:var(--jade-lip); border-color:rgba(121,205,180,.45)}
li.stop:hover .blogbtn, li.stop.sel .blogbtn{opacity:1}
li.stop .blogbtn:hover{color:var(--kowhai); border-color:var(--kowhai)}
body.nurlesen li.stop .blogbtn{opacity:1}
/* Zwischenüberschrift zwischen zwei veröffentlichten Teilen der Reise */
li.abschnitt{padding:14px 18px 6px; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--kowhai); font-weight:600;
  border-bottom:1px solid rgba(240,180,41,.35); display:flex; align-items:center; gap:10px}
li.abschnitt::before{content:""; width:14px; height:1px; background:var(--kowhai)}
@media print{ li.abschnitt{color:#7a5c14; border-color:#7a5c14} }
/* „Vor der Reise“: wie eine Stop-Zeile gebaut, aber ohne Griff und Werkzeuge; Stift statt Nummer. */
li.vorab{position:relative; display:grid; grid-template-columns:16px 26px 42px 1fr; gap:4px 9px; padding:11px 18px;
  border-bottom:1px solid rgba(140,167,163,.14); cursor:pointer; align-items:center; background:rgba(121,205,180,.05)}
li.vorab:hover{background:var(--tide-hi)}
li.vorab .idx{width:24px; height:24px; border:1px dashed var(--jade-lip); border-radius:50%; display:grid; place-items:center; color:var(--jade-lip)}
li.vorab .idx .ic{width:13px; height:13px}
li.vorab .thumb{width:42px; height:32px; border-radius:2px; overflow:hidden; background:rgba(140,167,163,.12); border:1px solid rgba(140,167,163,.22)}
li.vorab .thumb img{display:block; width:100%; height:100%; object-fit:cover}
li.vorab .name{font-weight:600; letter-spacing:.02em}
li.vorab .meta{font-family:var(--mono); font-size:11px; color:var(--kelp)}
li.vorab .meta .untermark{color:var(--bone); font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:12.5px}
li.vorab .datum.zaehler{display:block; width:max-content; margin-top:4px; padding:1px 7px; border-radius:2px;
  font:600 11px/1.5 var(--mono); letter-spacing:.02em; white-space:nowrap;
  color:var(--jade-lip); background:rgba(121,205,180,.12); border:1px solid rgba(121,205,180,.4)}
li.vorab .blogzahl{display:inline-flex; align-items:center; gap:3px; vertical-align:middle; margin-left:7px; font:600 10.5px/1 var(--mono); color:var(--kelp)}
li.vorab .blogzahl .ic{width:12px; height:12px; margin-left:4px}
li.vorab .blogzahl .ic:first-child{margin-left:0}
li.vorab .blogzahl use[href="#i-herz"]{color:var(--danger)}
@media (max-width:900px){ li.vorab{padding:9px 10px; gap:4px 7px; grid-template-columns:12px 24px 40px 1fr} }
@media print{ li.vorab{color:#000; border-color:#ccc; background:#fff} }
li.stop .blogzahl{display:inline-flex; align-items:center; gap:3px; vertical-align:middle; margin-left:7px;
  font:600 10.5px/1 var(--mono); color:var(--kelp); white-space:nowrap}
li.stop .blogzahl .ic{width:12px; height:12px; margin-left:4px}
li.stop .blogzahl .ic:first-child{margin-left:0}
li.stop .blogzahl use[href="#i-herz"]{color:var(--danger)}
@media print{ li.stop .blogzahl{color:#333} }
/* Blog-Ansicht: Die ganze Zeile führt in den Blog, der Knopf wäre doppelt;
   Zeilen mit Artikel tragen eine jadegrüne Kante. */
body.blogansicht li.stop .blogbtn{display:none}
li.stop .thumb.blogthumb{border-color:var(--jade-lip)}
body.blogansicht li.stop:has(.blogthumb){box-shadow:inset 3px 0 0 var(--jade-lip)}
.blogview{position:fixed; inset:0; z-index:45; overflow-y:auto; background:var(--abyss); color:var(--bone)}
.blogview[hidden]{display:none}
.blogview.ziel{box-shadow:inset 0 0 0 4px var(--kowhai)}
/* Bild groß: fast schwarz, Bild so groß wie der Bildschirm hergibt, Unterschrift darunter. */
.lightbox{position:fixed; inset:0; z-index:60; background:rgba(5,14,18,.95); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:calc(100vh - 90px); object-fit:contain; cursor:pointer; box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lightbox #lbZu{position:absolute; top:14px; right:14px; width:38px; height:38px; background:rgba(12,28,34,.7)}
.lightbox .lbpfeil{position:absolute; top:50%; margin-top:-24px; width:44px; height:48px; font-size:30px; line-height:1; background:rgba(12,28,34,.7)}
.lightbox #lbPrev{left:14px}
.lightbox #lbNext{right:14px}
.lightbox .lbtext{margin-top:12px; font-family:var(--sans); font-size:13.5px; color:var(--bone); text-align:center; max-width:860px; line-height:1.5}
.lightbox .lbtext #lbZaehler{font-family:var(--mono); font-size:11px; color:var(--kelp); margin-right:12px}
.lightbox .lbtext #lbZaehler:empty{display:none}
.blogart:not(.edit) .bild img{cursor:zoom-in}
@media (max-width:700px){ .lightbox{padding:8px} .lightbox .lbpfeil{width:36px; height:44px; font-size:26px} }
.blogleiste{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; padding:10px 18px;
  background:linear-gradient(var(--tide), var(--abyss)); border-bottom:var(--sheet)}
.blogleiste .blogtitel{font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; margin-left:6px}
.blogleiste .blogtitel::before{content:"Aotearoa / "; color:var(--kowhai)}
.blogleiste .zaehler.leiste{font:600 11px/1.5 var(--mono); letter-spacing:.02em; white-space:nowrap; padding:1px 8px; border-radius:2px;
  color:var(--jade-lip); background:rgba(121,205,180,.12); border:1px solid rgba(121,205,180,.4); margin-left:6px}
@media (max-width:700px){ .blogleiste .zaehler.leiste{font-size:10px; padding:1px 6px} }
.blogleiste .blogstatus{margin-left:auto; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--kelp); white-space:nowrap}
.blogleiste button{height:32px}
.blogleiste button.text{width:auto; padding:0 12px; font-size:12px}
.blogleiste #blogPrev, .blogleiste #blogNext{width:32px; font-size:20px; line-height:1}
.blogleiste #blogPrev:disabled, .blogleiste #blogNext:disabled{opacity:.3}
.blogleiste #blogAbmelden{width:32px; margin-left:6px}
/* Der Artikel liest sich wie eine Zeitschriftenseite: Serifen, große Zeilen, viel Luft. */
/* Die Seite nutzt die Breite: Reihen aus halben und drittel Blöcken sowie Bilder
   laufen bis 1280 px, der Lesetext (Kopf, Absätze, Zitate, Kommentare) bleibt auf
   860 px Zeilenlänge und mittig — wie eine Zeitschriftenseite. */
.blogart{max-width:1280px; margin:0 auto; padding:34px clamp(16px,3vw,40px) 80px; font-family:Georgia, "Iowan Old Style", "Times New Roman", serif; font-size:17.5px; line-height:1.72}
.blogart:not(.edit) > .blogkopf, .blogart:not(.edit) > .bt, .blogart:not(.edit) > h2, .blogart:not(.edit) > blockquote, .blogart .komm{max-width:860px; margin-left:auto; margin-right:auto}
.blogart.edit > .blogkopf{max-width:860px; margin-left:auto; margin-right:auto}
.blogart .blogkopf{margin-bottom:34px}
.blogart .blogkopf .eyebrow{margin-bottom:12px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.blogart .kopfzahl{display:inline-flex; gap:12px; letter-spacing:0; font:600 11px/1 var(--mono); text-transform:none}
.blogart .kopfzahl > *{display:inline-flex; align-items:center; gap:4px; color:var(--kelp); text-decoration:none}
.blogart .kopfzahl a:hover{color:var(--bone)}
.blogart .kopfzahl .ic{width:13px; height:13px}
.blogart .kopfzahl use[href="#i-herz"]{color:var(--danger)}
.blogart h1{font-size:clamp(30px,5vw,46px); line-height:1.1; margin:0 0 12px; font-weight:700; letter-spacing:-.01em}
.blogart .unter{margin:0; font-size:20px; color:var(--kelp); font-style:italic; line-height:1.4}
.blogart h2{font-family:var(--sans); font-size:22px; letter-spacing:.01em; margin:38px 0 10px; font-weight:700}
.blogart .bt p{margin:0 0 1.1em}
.blogart .bt p:first-child::first-letter{font-size:1.1em}
.blogart blockquote{margin:30px 0; padding:4px 0 4px 22px; border-left:3px solid var(--kowhai); font-size:23px; line-height:1.4; font-style:italic; color:var(--bone)}
.blogart blockquote p{margin:0}
/* Ein Bild allein in voller Breite zeigt sich ganz, aber nicht höher als der
   Bildschirm — ein Hochformat wird dann schmaler und steht mittig. */
.blogart .bild{position:relative; background:rgba(140,167,163,.08); border-radius:3px; overflow:hidden; width:max-content; max-width:100%; margin:0 auto}
.blogart .bild img{display:block; width:auto; max-width:100%; height:auto; max-height:82vh}
/* In Reihen aus halben und drittel Blöcken füllt jedes Bild seine Spalte und alle
   haben dieselbe Höhe — Hochformate werden mittig beschnitten, sonst stünde neben
   einem drei Zeilen langen Text ein meterhohes Bild und darunter nichts. */
.blogart .paar .bild{width:100%; height:clamp(220px,30vw,560px)}
.blogart .paar.sp3 .bild{height:clamp(200px,22vw,440px)}
.blogart .paar .bild img{width:100%; height:100%; max-height:none; object-fit:cover}
.blogart .like{position:absolute; right:10px; bottom:10px; width:auto; height:30px; padding:0 10px; gap:5px; display:inline-flex; align-items:center;
  border-radius:15px; background:rgba(12,28,34,.72); border-color:rgba(236,231,218,.35); color:var(--bone); font:600 12px/1 var(--sans); backdrop-filter:blur(4px)}
.blogart .like .ic{width:15px; height:15px}
.blogart .like:hover{border-color:var(--bone); color:var(--bone)}
.blogart .like.an{color:var(--danger); border-color:var(--danger)}
.blogart .like.an .ic{fill:var(--danger)}
.blogart .like span:empty{display:none}
.blogart figure{margin:28px 0}
.blogart figcaption{font-family:var(--sans); font-size:13px; color:var(--kelp); line-height:1.5; margin-top:8px}
.blogart figcaption p{margin:0 0 .5em}
.blogart .bf.lage-breit{margin-left:calc(50% - 50vw + 12px); margin-right:calc(50% - 50vw + 12px); max-width:none}
.blogart .bf.lage-breit .bild{width:100%; border-radius:0}
.blogart .bf.lage-breit .bild img{width:100%; max-height:90vh; object-fit:cover}
.blogart .bf.lage-breit figcaption{max-width:860px; margin-left:auto; margin-right:auto; padding:0 24px}
.blogart .bf.lage-links .bild, .blogart .bf.lage-rechts .bild{width:100%}
.blogart .bf.lage-links .bild img, .blogart .bf.lage-rechts .bild img{width:100%}
.blogart .bf.lage-links, .blogart .bf.lage-rechts{display:grid; grid-template-columns:3fr 2fr; gap:26px; align-items:center}
.blogart .bf.lage-rechts{grid-template-columns:2fr 3fr}
.blogart .bf.lage-rechts .bild{order:2}
.blogart .bf.lage-links figcaption, .blogart .bf.lage-rechts figcaption{font-family:inherit; font-size:16.5px; color:var(--bone); margin:0; line-height:1.65}
.blogart .bg{display:grid; gap:12px; margin:28px 0}
.blogart .bg.sp2{grid-template-columns:1fr 1fr}
.blogart .bg.sp3{grid-template-columns:1fr 1fr 1fr}
.blogart .bg figure{margin:0}
/* Galerie: gleiche Kacheln, Hoch- und Querformat beschnitten — sonst franst das Raster aus. */
.blogart .bg .bild, .blogart .paar .bg .bild{width:100%; height:auto; aspect-ratio:4/3}
.blogart .bg .bild img, .blogart .paar .bg .bild img{width:100%; height:100%; max-height:none; object-fit:cover}
.blogart .bg figcaption{font-size:12px; margin-top:5px}
/* Zwei halbe Blöcke nebeneinander; der einzelne halbe bleibt halb. Bild-neben-Text
   und Randlos geben in der halben Spalte keinen Sinn und fallen auf volle Breite zurück. */
.blogart .paar{display:grid; grid-template-columns:1fr 1fr; gap:0 32px; align-items:start}
.blogart .paar.sp3{grid-template-columns:1fr 1fr 1fr; gap:0 24px}
.blogart.edit .paar.sp3 .bwerk b{display:none}
.blogart .paar.sp3 .bg{grid-template-columns:1fr}
.blogart .paar.sp3 .bt, .blogart .paar.sp3 figcaption, .blogart.edit .paar.sp3 textarea{font-size:15px}
.blogart .paar.sp3 blockquote{font-size:19px; padding-left:14px}
.blogart .paar .halb{min-width:0}
.blogart .paar .bf.lage-links, .blogart .paar .bf.lage-rechts, .blogart.edit .paar .bedit.lage-links, .blogart.edit .paar .bedit.lage-rechts{grid-template-columns:1fr}
.blogart .paar .bf.lage-rechts .bild, .blogart.edit .paar .bedit.lage-rechts .bild{order:0}
.blogart .paar .bf.lage-breit{margin-left:0; margin-right:0}
.blogart .paar .bf.lage-breit figcaption{padding:0}
.blogart .paar figure, .blogart .paar .bg{margin-top:14px}
.blogart .paar .bg.sp3{grid-template-columns:1fr 1fr}
.blogart .paar h2{margin-top:14px}
.blogart.edit .paar{gap:0 12px}
@media (max-width:900px){
  .blogart .paar, .blogart .paar.sp3{grid-template-columns:1fr}
  /* Untereinander gestapelt gibt es keine Reihe mehr — die Bilder zeigen sich ganz. */
  .blogart .paar .bild, .blogart .paar.sp3 .bild{height:auto}
  .blogart .paar .bild img{height:auto; max-height:82vh; object-fit:contain}
}
.blogart .leer{color:var(--kelp); font-style:italic; text-align:center; padding:30px 0}
/* Kommentare: Sans-Serif, kleiner — Gespräch, nicht Erzählung. */
.blogart .komm{margin-top:64px; padding-top:20px; border-top:var(--sheet); font-family:var(--sans); font-size:14px}
.blogart .komm h3{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--kelp); margin:0 0 14px}
.blogart .komm h3 small{font-family:var(--mono); font-size:10px; margin-left:8px; color:var(--kowhai)}
.blogart .komm .k{padding:10px 0; border-bottom:1px solid rgba(140,167,163,.14)}
.blogart .komm .kk{display:flex; align-items:center; gap:10px; margin-bottom:2px}
.blogart .komm .kk b{font-weight:600}
.blogart .komm .kk small{font-family:var(--mono); font-size:10.5px; color:var(--kelp)}
.blogart .komm .kk button{width:22px; height:22px; margin-left:auto; opacity:.5; border-color:transparent}
.blogart .komm .kk button:hover{opacity:1; color:var(--danger)}
.blogart .komm .k p{margin:0 0 .4em; line-height:1.55}
.blogart .komm .leer{padding:10px 0; text-align:left}
.blogart .kform{margin-top:18px; display:grid; gap:8px}
.blogart .kform input{max-width:320px}
.blogart .kform .kzeile{display:flex; align-items:center; gap:12px; justify-content:flex-end}
.blogart .kform .kzeile span{font-size:11px; color:var(--kelp); font-family:var(--mono)}
.blogart .kform button.text{width:auto; height:34px; padding:0 16px; font-size:13px}
/* Editor: Blöcke mit Werkzeugleiste, Einfügeleiste dazwischen, Textfelder in Artikelschrift. */
.blogart.edit .blogkopf input{font-family:inherit; margin-bottom:8px}
.blogart.edit input.titel{font-size:30px; font-weight:700; line-height:1.15; padding:8px 12px}
.blogart.edit input.unter{font-size:18px; font-style:italic; color:var(--kelp)}
.blogart.edit .block{border:1px solid rgba(140,167,163,.22); border-radius:3px; padding:10px 12px 12px; margin:6px 0; background:rgba(20,48,58,.45)}
.blogart.edit .bwerk{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-family:var(--sans)}
.blogart.edit .bwerk .einst{display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0}
.blogart.edit .bwerk .kn{display:flex; gap:3px; flex:0 0 auto}
.blogart.edit .bwerk b{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--kelp); margin-right:3px}
.blogart.edit .bwerk button{width:26px; height:26px; font-size:13px}
.blogart.edit .bwerk button .ic{width:14px; height:14px}
.blogart.edit .bwerk select{width:auto; max-width:100%; background:var(--abyss); border:1px solid rgba(140,167,163,.3); border-radius:2px; padding:4px 6px; font-size:12px; color:var(--bone)}
.blogart.edit textarea{font-family:inherit; font-size:17px; line-height:1.65; min-height:0; resize:none; overflow:hidden}
.blogart.edit textarea.titel{font-family:var(--sans); font-size:22px; font-weight:700}
.blogart.edit textarea.zitat{font-style:italic; font-size:21px; border-left:3px solid var(--kowhai)}
.blogart.edit .bedit{display:grid; gap:14px}
.blogart.edit .bedit.lage-links{grid-template-columns:3fr 2fr; align-items:start}
.blogart.edit .bedit.lage-rechts{grid-template-columns:2fr 3fr; align-items:start}
.blogart.edit .bedit.lage-rechts .bild{order:2}
.blogart.edit .bg.gedit input{font-family:var(--sans); font-size:12px; padding:6px 8px; margin-top:5px}
.blogart.edit .gdel{position:absolute; top:6px; right:6px; width:26px; height:26px; background:rgba(12,28,34,.75); border-color:rgba(236,231,218,.35)}
.blogart.edit .gdel:hover{color:var(--danger); border-color:var(--danger)}
.blogart.edit .hinzu{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 0; font-family:var(--sans); opacity:.45; transition:opacity .12s}
.blogart.edit .hinzu:hover, .blogart.edit .hinzu:focus-within{opacity:1}
.blogart.edit .hinzu span{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--kelp); margin-right:4px}
.blogart.edit .hinzu button.text{width:auto; height:26px; padding:0 10px; font-size:12px; display:inline-flex; gap:5px; align-items:center}
.blogart.edit .hinzu button .ic{width:14px; height:14px}
/* In der halben oder drittel Spalte ohne das Wort „Einfügen“ — die Knöpfe sagen es selbst. */
.blogart.edit .paar .hinzu span{display:none}
.blogart.edit .paar .hinzu{gap:4px}
.blogart.edit .paar .hinzu button.text{padding:0 7px; font-size:11px}
@media (max-width:700px){
  .blogart{padding:22px 16px 60px; font-size:16.5px}
  .blogart .bf.lage-links, .blogart .bf.lage-rechts, .blogart.edit .bedit.lage-links, .blogart.edit .bedit.lage-rechts{grid-template-columns:1fr}
  .blogart .bf.lage-rechts .bild, .blogart.edit .bedit.lage-rechts .bild{order:0}
  .blogart .bg.sp3{grid-template-columns:1fr 1fr}
  .blogart .bf.lage-breit{margin-left:-16px; margin-right:-16px}
  .blogleiste{padding:8px 10px; gap:6px}
  .blogleiste .blogtitel{display:none}
}
@media print{
  body.blogoffen .shell, body.blogoffen .blogleiste, body.blogoffen .like, body.blogoffen .kform{display:none !important}
  body.blogoffen .blogview{position:static; overflow:visible; background:#fff; color:#000}
  body.blogoffen .blogart, body.blogoffen .blogart .unter, body.blogoffen .blogart figcaption, body.blogoffen .blogart .komm{color:#000}
  body.blogoffen .blogart figure, body.blogoffen .blogart .bg{break-inside:avoid}
}

/* Schmale Bildschirme: Die ganze Seite scrollt, statt dass die Liste in einem
   Rest unter der Karte eingesperrt ist. Karte flacher mit knappen Rändern,
   Kopfzeile und Kennzahlen kompakt, Zeilen enger. Oberhalb bleibt alles wie es ist. */
@media (max-width:900px){
  html,body{overflow:auto; height:auto}
  .shell{height:auto; overflow:visible}
  .body{flex-direction:column; overflow:visible}
  .split{display:none}
  header.bar{padding:9px 12px; gap:6px 14px}
  header.bar h1{letter-spacing:.18em; font-size:13px; flex:1 1 auto}
  header.bar #logoutBtn{width:28px; height:28px; order:2}
  header.bar .stats{order:3; width:100%}
  .stats{gap:12px; margin-left:0}
  .stat b{font-size:14px}
  .stat small{font-size:8px; letter-spacing:.14em}
  .mapcol{padding:8px 8px 6px; flex:0 0 auto; gap:6px}
  .sheet{height:38vh; min-height:220px; max-height:420px; flex:0 0 auto; padding:6px}
  .sheet::after{inset:3px}
  #leaf{inset:6px}
  .corner{display:none}
  .maphint{gap:8px; font-size:11px}
  .maphint button{width:32px; height:32px}
  .panel{flex:1 1 auto; min-height:0; border-left:none; border-top:var(--sheet); overflow:visible}
  .panel .add{padding:10px 12px}
  .lesehinweis{font-size:11px}
  ol.stops{overflow:visible; flex:none; padding:4px 0}
  li.stop{padding:9px 10px; gap:4px 7px; grid-template-columns:12px 24px 40px 1fr auto}
  li.stop .idx{width:22px; height:22px; font-size:10px}
  li.stop .thumb{width:40px; height:30px}
  li.stop .name{font-size:14px}
  li.stop .tools button{width:24px; height:24px}
  li.stop .datum{font-size:10px; padding:1px 6px}
  .leglabel{padding:3px 12px 3px 46px; font-size:10.5px}
  .detail{grid-column:1 / -1}
  .gpanel{max-height:none; padding:12px}
  .panel footer{padding:10px 12px; gap:6px}
  .saved{width:100%; margin-left:0; font-size:9px}
}
@media print{
  /* Auf weißem Papier ist die Bildschirm-Palette unlesbar: Kelp-Grün und
     Knochenweiß werden dunkel, Kowhai-Gelb wird dunkles Gold. */
  :root{--kelp:#4a5552; --kowhai:#7a5c14; --kowhai-dim:#7a5c14; --jade-lip:#1f5a4a; --nebenbei:#2f6a86}
  .stat b{color:#000}
  li.stop .name, li.stop .meta, .leglabel, .detail, .detail label, .detail textarea, .detail input{color:#000; background:#fff}
  li.stop .meta{color:#333}
  li.stop .datum{color:#7a5c14; background:#fff; border-color:#7a5c14}
  .stay, .stay .row2 a, .stay .hdr b, .stay .hdr em, .stay .msg, .shot .cap, .shot .cap a{color:#000}
  .corner, .gratlabel, .scaletext{color:#4a5552; fill:#4a5552}
  /* Gedruckt wird die Skizze — als SVG kommt sie zuverlässig aufs Papier, die
     Kachelkarte nicht. Sie erscheint auch dann, wenn am Bildschirm die
     Straßenkarte an ist, in einer hellen Variante: weißes Meer, dunkle Schrift. */
  #leaf{display:none !important}
  svg#map{display:block !important; width:auto; height:175mm; margin:0 auto}
  .sheet{background:#fff; border-color:#999; padding:6px; page-break-inside:avoid}
  .sheet::after{border-color:#ccc}
  .pickbanner, .legtip{display:none}
  .land{stroke:#1f5a4a}
  .lake{fill:#fff}
  .placelabel{fill:#000; stroke:#fff}
  .placelabel.aus{fill:#2f6a86}
  .peaklabel, .peak{fill:#4a5552; opacity:1}
  .alps{stroke:#4a5552}
  .grat{stroke:#ddd}
  .pin text.num{fill:#fff}
  .pin.kurz circle{fill:#fff; stroke:#7a5c14}
  .pin.kurz text.num{fill:#7a5c14}
  .pin.sel circle{fill:#7a5c14}
  .leg.est{opacity:.8}
  .leg.ferry{stroke:#000}
  .leg.hov{stroke:#7a5c14}
  html,body{overflow:visible; height:auto}
  .shell,.body{height:auto; overflow:visible}
  ol.stops{overflow:visible; max-height:none}
  .sheet{height:auto}
  body{background:#fff; color:#000}
  .panel .add, .panel footer, .maphint, li.stop .tools, .split, #umsetzHinweis, #notice, #logoutBtn{display:none}
  .mapcol{padding:0 0 10px}
  .body{display:block}
  .panel{border:none; background:#fff}
  li.stop, .leglabel{color:#000; border-color:#ccc}
  /* Ein Stop steht immer ganz auf einer Seite: Als Inline-Box (inline-grid)
     kann der Browser ihn nicht über den Umbruch teilen — break-inside allein
     ignoriert Chrome bei Raster-Boxen gern. Die Etappenzeile wandert aus
     data-etappe als ::before in dieselbe Box, damit sie beim Stop bleibt. */
  .shell, .body, .panel, ol.stops{display:block !important; height:auto; max-height:none; overflow:visible}
  li.stop{display:inline-grid; width:100%; vertical-align:top; break-inside:avoid; page-break-inside:avoid}
  .leglabel{display:none}
  li.stop[data-etappe]::before{content:attr(data-etappe); grid-column:1 / -1; font-family:var(--mono);
    font-size:11px; color:#333; padding:0 0 4px 44px}
}