:root{
  --bg:#faf6ef; --surface:#ffffff; --ink:#2b2320; --muted:#6d625b; --line:#e6ddd0;
  --brand:#8e1a4b; --brand-ink:#ffffff; --brand-soft:#f6e4ec; --olive:#5f6f2f; --done:#3d7a4a;
  --shadow:0 6px 24px rgba(43,35,32,.16);
  --tabs-h:62px; --top-h:58px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#17120f; --surface:#241d19; --ink:#f3ece4; --muted:#b3a79d; --line:#3a2f29; --brand:#e0719d; --brand-ink:#2a0c19; --brand-soft:#3a1f2b; --olive:#a9ba6a; --done:#7cc58b; --shadow:0 6px 24px rgba(0,0,0,.5)}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.marker.wide{width:46px;border-radius:17px;font-size:14px}
.peek .cl{display:flex;gap:8px;margin-top:6px}
.peek .cl .btn{min-width:48px;justify-content:center;padding:6px 12px}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.25;margin:0}
a{color:var(--brand)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.top{position:fixed;inset:0 0 auto 0;height:var(--top-h);padding:env(safe-area-inset-top) 16px 0;background:var(--brand);color:var(--brand-ink);z-index:1100;display:flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand-ink);color:var(--brand);display:grid;place-items:center;font:700 20px Georgia,serif}
.top h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top p{margin:0;font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-color-scheme:dark){.top{background:#3a1f2b;color:#f3ece4}.brand-mark{background:#e0719d;color:#2a0c19}}

main{position:fixed;inset:calc(var(--top-h) + env(safe-area-inset-top)) 0 calc(var(--tabs-h) + env(safe-area-inset-bottom)) 0}
.view{position:absolute;inset:0;display:none;overflow:auto;-webkit-overflow-scrolling:touch}
.view.active{display:block}
#view-map{overflow:hidden}
#map{position:absolute;inset:0;background:#e8e4da}
.wrap{max-width:720px;margin:0 auto;padding:16px 16px 28px}

.tabs{position:fixed;inset:auto 0 0 0;height:calc(var(--tabs-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line);display:flex;z-index:1100}
.tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;color:var(--muted)}
.tabs svg{width:26px;height:26px}
.tabs button.active{color:var(--brand);font-weight:700}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.card h2{font-size:22px;margin-bottom:8px}
.card.small{font-size:15px;color:var(--muted)}
.card.small h2{color:var(--ink)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.btn{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 16px;min-height:46px;font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.ghost{border-color:transparent;background:transparent;padding:8px 10px}
.btn .ico{font-size:14px}

.station-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.station-list li{margin:0}
.st-card{width:100%;text-align:left;display:flex;gap:14px;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden}
.st-thumb{flex:none;width:96px;background:var(--brand-soft) center/cover no-repeat;display:grid;place-items:center;color:var(--brand);font:700 30px Georgia,serif;min-height:96px}
.st-txt{padding:12px 12px 12px 0;min-width:0;flex:1}
.st-no{font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.04em;text-transform:uppercase}
.st-title{font:700 17px/1.3 Georgia,serif;margin:2px 0 4px;display:block}
.st-place{font-size:14px;color:var(--muted);display:block}
.st-card .tick{display:none;color:var(--done);font-weight:700}
.st-card.done .tick{display:inline}

/* Karte */
.marker{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--brand-ink);border:3px solid #fff;display:grid;place-items:center;font:700 15px system-ui;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .15s}
.marker.done{background:var(--done)}
.marker.active{transform:scale(1.25);background:#222;color:#fff}
.marker.check{outline:2px dashed #e0a800;outline-offset:2px}
.marker.start{background:var(--olive);width:30px;height:30px;font-size:13px}
.me{width:18px;height:18px;border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 0 0 2px rgba(26,115,232,.35)}
.leaflet-container{font:inherit}
.fab{position:absolute;right:12px;bottom:calc(14px + var(--peek,0px));z-index:900;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);display:grid;place-items:center;transition:bottom .2s}
.fab.fab2{bottom:calc(72px + var(--peek,0px))}
.fab.on{background:var(--brand);color:var(--brand-ink)}
.peek{position:absolute;left:10px;right:10px;bottom:10px;z-index:950;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;display:flex;gap:12px;align-items:center}
.peek .no{flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:700 18px system-ui}
.peek .t{flex:1;min-width:0}
.peek .t b{display:block;font:700 16px/1.25 Georgia,serif;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.peek .t small{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek .go{flex:none}
.editbar{position:absolute;left:10px;right:10px;top:10px;z-index:1000;background:var(--surface);border:2px solid #e0a800;border-radius:12px;padding:10px;font-size:14px}
.editbar textarea{width:100%;font:12px/1.4 ui-monospace,monospace;margin:6px 0;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px}

/* Detail */
.sheet{position:fixed;inset:0;z-index:1200;background:var(--bg);display:flex;flex-direction:column;animation:up .22s ease-out}
.sheet[hidden]{display:none}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-bar{flex:none;display:flex;justify-content:space-between;align-items:center;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;background:var(--surface);border-bottom:1px solid var(--line)}
.sheet-pos{font-size:14px;color:var(--muted);padding-right:8px}
.sheet-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.hero{position:relative;background:var(--brand-soft);aspect-ratio:16/10;max-height:46vh;width:100%;display:grid;place-items:center}
.hero .cap{position:absolute;right:8px;bottom:8px;max-width:72%;background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:1.3;padding:3px 9px;border-radius:8px;z-index:1}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .big{font:700 90px Georgia,serif;color:var(--brand);opacity:.35}
.hero .badge{position:absolute;left:14px;bottom:-1px;transform:translateY(50%);width:52px;height:52px;border-radius:50%;background:var(--brand);color:var(--brand-ink);border:4px solid var(--bg);display:grid;place-items:center;font:700 22px system-ui;z-index:2}
.s-inner{max-width:720px;margin:0 auto;padding:0 18px}
.s-head{padding-top:36px}
.s-head .kicker{color:var(--brand);font-weight:700;font-size:14px;letter-spacing:.03em}
.s-head h2{font-size:26px;margin:4px 0 6px}
.s-head .place{color:var(--muted);font-size:15px}
.text p,.text li{margin:0 0 .9em}
.text .lead{font:italic 20px/1.5 Georgia,serif}
.text h3{font-size:19px;margin:1.3em 0 .4em;color:var(--brand)}
.text blockquote{margin:1em 0;padding:.4em 0 .4em 16px;border-left:4px solid var(--brand);color:var(--muted);font-style:italic}
.text blockquote.inscr{font-style:normal;letter-spacing:.04em;font-weight:600;color:var(--ink)}
.text ul{padding-left:1.2em}
.text ul.timeline{list-style:none;padding:0}
.text ul.timeline li{border-left:3px solid var(--line);padding:0 0 .2em 14px;margin-bottom:.8em}
.text ul.timeline b{color:var(--brand);margin-right:6px}
.text .ps{font-size:15px;color:var(--muted)}
.text .end{font-weight:700;color:var(--brand)}
.gallery{display:grid;gap:12px;margin:8px 0 18px}
.gallery figure{margin:0}
.gallery img{width:100%;border-radius:12px;display:block;background:var(--brand-soft)}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:4px}
.way{margin:22px 0;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:16px}
.way h3{font-size:18px;margin-bottom:2px}
.way .sum{color:var(--muted);font-size:15px;margin-bottom:10px}
.way ol{margin:0 0 12px;padding-left:1.3em}
.way li{margin-bottom:6px}
.pager{display:flex;gap:10px;margin:22px 0 10px}
.pager .btn{flex:1;justify-content:center;text-align:center}
.pager .btn[disabled]{opacity:.4;pointer-events:none}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs-h) + 22px);transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:12px;z-index:1300;font-size:15px;max-width:90vw}
@media (min-width:900px){
  .view#view-list .wrap,.view#view-info .wrap{padding-top:28px}
  .peek{max-width:520px;left:16px;right:auto}
}
/* QR-Code für große Bildschirme (Säulen-Display, PC): unten rechts, über allen Ansichten.
   Auf Handys/Tablets ausgeblendet; mit ?saeule=1 erzwingbar. */
.qrcard{display:none;position:fixed;right:16px;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + 34px);z-index:1250;background:#fff;color:#2b2320;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px 10px 8px;width:max-content;max-width:calc(clamp(150px,14vh,260px) + 20px);text-align:center;font-size:13px;line-height:1.25;font-weight:600}
.qrcard img{display:block;width:clamp(150px,14vh,260px);height:auto;image-rendering:pixelated}
.qrcard span{display:block;margin-top:6px}
.qrcard.force{display:block}
@media (min-width:1100px){
  .qrcard{display:block}
  .fab{bottom:auto;top:14px}
  .fab.fab2{top:72px;bottom:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.top,.tabs,.fab{display:none}}