/* Stadtohr – gemeinsames Design für Startseite und Tour.
   Dunkel als Grundton, Bilder tragen die Fläche, Glas und Verlauf statt Kästen. */
:root{
 --bg:#FDFAF6; --bg2:#fff; --glas:rgba(26,18,12,.045); --glas2:rgba(26,18,12,.085);
 --ink:#1C150F; --muted:#6A6058; --line:rgba(26,18,12,.14);
 --p1:#F2762B; --p2:#DE3A5B; --p:#CE4020; --p-fg:#fff;
 --mint:#0B7A54; --focus:#0b5cab; --mark:rgba(242,118,43,.3);
 --grad:linear-gradient(135deg,var(--p1),var(--p2));
 --sh:0 1px 3px rgba(28,21,15,.07),0 6px 18px rgba(28,21,15,.07);
 --sh-l:0 3px 10px rgba(28,21,15,.09),0 18px 46px rgba(28,21,15,.13);
 --r:26px; --r-s:18px; --tap:48px;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root[data-theme=dark]{
 --bg:#100E13; --bg2:#17141B; --glas:rgba(255,255,255,.065); --glas2:rgba(255,255,255,.1);
 --ink:#F6F2EC; --muted:#A49DAE; --line:rgba(255,255,255,.12);
 --p1:#FF8A3D; --p2:#FF4F6E; --p:#FF6B4D; --p-fg:#1A0E08;
 --mint:#4ADE9B; --focus:#8ab4ff; --mark:rgba(255,138,61,.28);
 --sh:0 2px 8px rgba(0,0,0,.45);
 --sh-l:0 10px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{color:var(--ink);font:17px/1.6 var(--sans);-webkit-text-size-adjust:100%;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:780px;margin:0 auto;padding:0 18px 28px;position:relative;z-index:1}
/* Nur wo die Abspielleiste fest unten klebt, braucht es Platz darunter. */
.wrap.mitLeiste{padding-bottom:150px}
#setup>.kino:first-child{margin-top:0}

h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0}
h1{font-size:clamp(2.1rem,9vw,3.3rem)}
h2{font-size:clamp(1.35rem,5vw,1.8rem)}
h3{font-size:1.05rem;letter-spacing:-.02em;font-weight:700}
p{margin:.65em 0}
.lead{color:var(--muted);font-size:1.07rem;line-height:1.5;margin:.6em 0 1.3em;max-width:32em}
.meta{color:var(--muted);font-size:.87rem}
.kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800}
.verlauf{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

button,input,select{font:inherit;color:inherit}
button{min-height:var(--tap);border-radius:999px;border:1px solid var(--line);background:var(--glas);
 color:var(--ink);padding:0 22px;cursor:pointer;font-weight:650;backdrop-filter:blur(10px);
 transition:transform .12s cubic-bezier(.2,.8,.2,1),background .18s,box-shadow .18s}
button:active{transform:scale(.955)}
button.primary{background:var(--grad);color:#fff;border-color:transparent;
 box-shadow:0 2px 10px rgba(206,64,32,.26);font-weight:800}
button.ghost{background:transparent}
button:disabled{opacity:.35;cursor:not-allowed}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
a{color:var(--p)}
label{display:block;font-weight:750;margin:1.1em 0 .4em;font-size:.93rem;letter-spacing:-.01em}
select,input[type=search],input[type=text]{width:100%;min-height:var(--tap);padding:0 16px;
 border:1px solid var(--line);border-radius:var(--r-s);background:var(--glas);color:var(--ink);font-weight:550}
input[type=range]{width:100%;accent-color:var(--p)}

/* Flächen */
.card{background:var(--glas);border:1px solid var(--line);border-radius:var(--r);padding:20px;
 margin:18px 0;backdrop-filter:blur(14px);box-shadow:var(--sh)}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 auto}
.seg{display:flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px;
 background:var(--glas);flex-wrap:wrap;backdrop-filter:blur(10px)}
.seg button{flex:1 1 auto;border:none;background:transparent;min-height:44px;padding:0 15px;
 border-radius:999px;white-space:nowrap;font-size:.93rem;font-weight:700;box-shadow:none}
.seg button[aria-pressed=true]{background:var(--grad);color:#fff}
.note{background:var(--glas);border:1px solid var(--line);border-radius:var(--r-s);
 padding:14px 17px;margin:16px 0;font-size:.92rem;backdrop-filter:blur(10px)}
.note.warn{background:linear-gradient(135deg,rgba(255,138,61,.16),rgba(255,79,110,.12));
 border-color:rgba(255,138,61,.3)}

/* Marke */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo svg{flex:0 0 auto;display:block;filter:drop-shadow(0 2px 8px rgba(255,90,70,.45))}
.logo .wm{font-weight:900;letter-spacing:-.045em;font-size:1.08rem}
.brand-big .wm{font-size:1.65rem}

/* Kopfleiste als Glas */
.topbar{position:sticky;top:0;z-index:600;padding:10px 18px;
 background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(1.6) blur(20px);
 border-bottom:1px solid var(--line)}
.topbar .inner{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.topbar .logo{min-width:0;flex:0 0 auto}
.topbar .wm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.topbar button svg{display:block}
.dots{display:flex;gap:4px;flex:1;min-width:50px}
.dots i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .3s}
.dots i.on{background:var(--mint)} .dots i.now{background:var(--p1)}

/* Vollflächiges Titelbild */
.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.kino{position:relative;overflow:hidden}
.kino img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.kino.kompakt img{aspect-ratio:auto;height:186px}
.kino.kompakt .auf{padding:0 18px 14px}
.kino.kompakt h1{font-size:clamp(1.35rem,5.6vw,1.9rem);color:#fff}
.kino.kompakt h2{font-size:1.25rem}
@media(min-width:620px){.kino img{aspect-ratio:21/9}.kino.kompakt img{height:210px}}
/* Der Verlauf bleibt dunkel, damit die weisse Schrift in beiden Grundtoenen traegt. */
.kino .scrim{position:absolute;inset:0;background:
 linear-gradient(to top,rgba(12,8,5,.9) 0%,rgba(12,8,5,.55) 34%,rgba(12,8,5,.12) 62%,transparent 80%)}
:root[data-theme=dark] .kino .scrim{background:
 linear-gradient(to top,var(--bg) 2%,color-mix(in srgb,var(--bg) 60%,transparent) 34%,transparent 72%)}
.kino .auf,.kino .auf *{color:#fff}
:root[data-theme=dark] .kino .auf .meta{color:var(--muted)}
.kino .auf{position:absolute;left:0;right:0;bottom:0;padding:0 18px 20px}
.kino .auf .mitte{max-width:780px;margin:0 auto}
.kino h1,.kino h2{text-shadow:0 2px 30px rgba(0,0,0,.6)}
.marke{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 13px;
 border-radius:999px;background:var(--grad);color:#fff;font-weight:900;font-size:1rem;
 box-shadow:0 6px 20px rgba(255,90,70,.4);margin-bottom:12px}

/* Bilderschiene */
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 0 4px;
 -webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip button{flex:0 0 auto;padding:0;border:none;min-height:0;background:none;border-radius:16px;
 overflow:hidden;scroll-snap-align:start;box-shadow:var(--sh);line-height:0;backdrop-filter:none}
.strip img{width:104px;height:72px;object-fit:cover;display:block;border-radius:16px;opacity:.55;
 transition:opacity .2s,transform .2s;transform:scale(.97)}
.strip button[aria-current=true] img{opacity:1;transform:scale(1);box-shadow:0 0 0 2.5px var(--p)}
figcaption{font-size:.74rem;color:var(--muted);margin-top:8px}
figcaption a{color:var(--muted)}

/* Karte */
#map,#mapLive,#karte{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-l);
 margin:16px 0;overflow:hidden;z-index:1}
#map,#mapLive{height:40vh;min-height:230px}
#karte{height:56vh;min-height:320px}
.leaflet-container{background:var(--bg2)}
:root[data-theme=dark] .leaflet-tile{filter:brightness(.92) saturate(.78) contrast(1.08)}
:root[data-theme=dark] .leaflet-control-zoom a{background:var(--bg2);color:var(--ink);
 border-color:var(--line)}
:root[data-theme=dark] .leaflet-control-attribution{background:rgba(16,14,19,.72);
 color:var(--muted)}
:root[data-theme=dark] .leaflet-control-attribution a{color:var(--muted)}
.pin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);
 color:#fff;font-weight:900;font-size:14px;border:2.5px solid rgba(255,255,255,.9);
 box-shadow:0 3px 12px rgba(0,0,0,.55)}
.pin.done{background:var(--mint);color:#fff}
.pin.now{transform:scale(1.22);box-shadow:0 0 0 7px rgba(255,107,77,.22),0 3px 14px rgba(0,0,0,.55)}
.pin.plan{background:var(--glas2);color:var(--muted);width:24px;height:24px;font-size:11px;
 border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.me{width:18px;height:18px;border-radius:50%;background:var(--focus);border:3px solid #fff;
 box-shadow:0 0 0 6px rgba(138,180,255,.25)}

/* Kleinteile */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:.7em 0 0}
.chip{font-size:.76rem;border-radius:999px;padding:5px 13px;color:var(--ink);font-weight:700;
 background:var(--glas);border:1px solid var(--line);backdrop-filter:blur(8px)}
.tag{display:inline-block;font-size:.71rem;font-weight:800;border-radius:999px;padding:4px 11px;
 background:rgba(74,222,155,.16);color:var(--mint);margin-top:8px;letter-spacing:.02em}
.tag.plan{background:var(--glas2);color:var(--muted)}
.transcript{font-size:1.06rem;line-height:1.78;color:color-mix(in srgb,var(--ink) 92%,transparent)}
.big .transcript{font-size:1.32rem} .big{--tap:54px}
.transcript .s{transition:background .3s;border-radius:6px;cursor:pointer;padding:1px 0}
.transcript .s.on{background:var(--mark);box-shadow:0 0 0 4px var(--mark)}
details{border-top:1px solid var(--line);margin-top:20px;padding-top:4px}
summary{cursor:pointer;font-weight:750;font-size:.93rem;padding:12px 0;list-style:none;
 min-height:44px;display:flex;align-items:center;color:var(--muted)}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-weight:800;margin-right:.6em;color:var(--p);font-size:1.15em}
details[open] summary::before{content:"–"}
details ul{margin:.3em 0 .7em;padding-left:1.2em;font-size:.84rem;color:var(--muted)}

/* Abspielleiste als Glas */
.playbar{position:fixed;left:0;right:0;bottom:0;z-index:700;padding:10px 16px calc(12px + env(safe-area-inset-bottom));
 background:color-mix(in srgb,var(--bg) 66%,transparent);backdrop-filter:saturate(1.8) blur(26px);
 border-top:1px solid var(--line)}
.playbar .inner{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:11px}
.pbtn{width:54px;height:54px;min-height:54px;border-radius:50%;border:none;background:var(--grad);
 color:#fff;font-size:1.15rem;display:grid;place-items:center;flex:0 0 auto;padding:0;
 box-shadow:0 2px 10px rgba(206,64,32,.28)}
.sbtn{width:46px;height:46px;min-height:46px;border-radius:14px;padding:0;flex:0 0 auto;
 font-size:.72rem;font-weight:800;display:grid;place-items:center;line-height:1;
 border:none;background:transparent;color:var(--muted);box-shadow:none}
.sbtn:hover{background:var(--glas)}
.pmeta{flex:1;min-width:0}
.pmeta .t{font-weight:750;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptrack{height:5px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden;cursor:pointer}
.ptrack>div{height:100%;background:var(--grad);width:0;border-radius:3px}
.rate{flex:0 0 auto;font-size:.82rem;font-weight:800;color:var(--muted);min-height:44px;
 padding:0 13px;border:none;background:transparent;box-shadow:none;border-radius:14px}
.rate:hover{background:var(--glas)}

/* Navigation */
.navcard{background:var(--glas);border:1px solid var(--line);border-radius:var(--r);
 box-shadow:var(--sh-l);padding:20px;margin:14px 0;backdrop-filter:blur(16px)}
.navtop{display:flex;align-items:center;gap:15px;margin-bottom:16px}
.arrow{font-size:3rem;line-height:1;transition:transform .4s cubic-bezier(.2,.8,.2,1);display:block;
 background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dist{font-size:3rem;line-height:1;font-weight:900;letter-spacing:-.045em;
 font-variant-numeric:tabular-nums}
.steps{margin:0;padding:0;list-style:none}
.steps li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.steps li.on{font-weight:800;color:var(--ink)}
.steps li.on::before{content:"";width:3px;border-radius:2px;background:var(--grad);margin-right:-6px}
.steps li.done{opacity:.3}
.steps .m{color:var(--muted);font-variant-numeric:tabular-nums;min-width:56px;text-align:right;font-size:.84rem}
.thumbnext{width:68px;height:68px;border-radius:20px;object-fit:cover;flex:0 0 auto;box-shadow:var(--sh)}

/* Städteliste auf der Startseite */
.karten{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.karten{grid-template-columns:1fr 1fr}}
.stadt{display:flex;gap:0;align-items:stretch;background:var(--glas);border:1px solid var(--line);
 border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;text-align:left;padding:0;
 text-decoration:none;color:inherit;backdrop-filter:blur(12px);
 transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
a.stadt:active{transform:scale(.985)}
a.stadt:hover{box-shadow:var(--sh-l)}
.stadt img{width:118px;height:100%;min-height:112px;object-fit:cover;flex:0 0 auto;background:var(--glas2)}
.stadt .txt{padding:14px 16px;flex:1;min-width:0}
.stadt b{display:block;font-size:1.1rem;font-weight:800;letter-spacing:-.02em}
.stadt .zeile{font-size:.82rem;color:var(--muted);margin-top:4px}
.stadt .kurz{font-size:.87rem;margin-top:7px;font-weight:400;line-height:1.45;color:var(--muted)}
.stadt.plan{opacity:.55}

/* Stationsliste als Blatt von unten */
.sheet{position:fixed;inset:0;z-index:800;background:rgba(8,6,10,.6);display:grid;align-items:end;
 backdrop-filter:blur(6px);animation:ein .25s ease}
.sheet .inner{background:var(--bg2);border-radius:var(--r) var(--r) 0 0;max-height:84vh;overflow:auto;
 padding:20px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--sh-l);
 border-top:1px solid var(--line);animation:hoch .3s cubic-bezier(.2,.9,.2,1)}
@keyframes ein{from{opacity:0}to{opacity:1}}
@keyframes hoch{from{transform:translateY(30px)}to{transform:none}}
.liste{list-style:none;margin:0;padding:0}
.liste li{border-bottom:1px solid var(--line)}
.liste button{width:100%;display:flex;align-items:center;gap:13px;border:none;background:none;
 text-align:left;padding:12px 2px;border-radius:0;min-height:66px;font-weight:550;backdrop-filter:none}
.liste img{width:58px;height:46px;object-fit:cover;border-radius:13px;flex:0 0 auto}
.liste .n{flex:1;min-width:0}.liste .n b{display:block;font-size:.98rem;font-weight:750}
.liste .n span{font-size:.79rem;color:var(--muted)}
.liste .ok{color:var(--mint);font-weight:900;font-size:1.1rem}

/* Ladebild */
#lade{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:900}
#lade .puls{animation:puls 1.5s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.3;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}

/* Ansichtswechsel */
#setup,#station,#navi,#fertig{animation:rein .32s cubic-bezier(.2,.8,.2,1)}
@keyframes rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.hidden{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.suche{display:grid;gap:12px;margin:16px 0 6px}
@media(min-width:560px){.suche{grid-template-columns:1fr auto}}
.suche input{min-height:52px}
.suche button{min-height:52px;white-space:nowrap}
footer{color:var(--muted);font-size:.83rem;padding:32px 0 12px;line-height:1.6}
footer a{color:var(--muted);display:inline-block;padding:6px 2px}

@media print{
 .topbar,.playbar,#map,#mapHolder,#karte,.seg,button,select,input,.strip,#setup,#navi,.sheet,#lade{display:none!important}
 html,body{background:#fff}
 body{color:#000;font-size:11pt;padding:0}
 .card,.navcard{border:none;box-shadow:none;padding:0;margin:0 0 16pt;break-inside:avoid;background:none}
 .kino img{max-height:62mm;aspect-ratio:auto}
 .kino .scrim,.kino .auf{position:static;background:none;color:#000;padding:0}
 .kino h1,.kino h2{color:#000;text-shadow:none} details{display:block} details ul{display:block}
 .bleed{margin:0;width:auto}
}


/* ---- Kopfgrafik: der echte Rundweg zeichnet sich selbst ---- */
.held{position:relative;overflow:hidden;background:
 radial-gradient(120% 90% at 18% 8%, #FFB36B 0%, #F2762B 34%, #D83F56 68%, #9E2A52 100%);
 min-height:min(78vw,420px);display:grid;align-items:end}
.held svg{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.held .weg{fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.5;stroke-linecap:round;
 stroke-linejoin:round;filter:drop-shadow(0 1px 6px rgba(120,20,0,.45));
 stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
 animation:zeichnen 2.8s cubic-bezier(.4,0,.2,1) .25s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.held .punkt{fill:#fff;opacity:0;animation:auftauchen .5s ease forwards}
.held .halo{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.6;opacity:0;
 animation:pochen 2.4s ease-out infinite 3s}
@keyframes auftauchen{to{opacity:1}}
@keyframes pochen{0%{r:2;opacity:.7}70%{r:7;opacity:0}100%{opacity:0}}
.held .auf{position:relative;z-index:2;padding:0 18px 24px;width:100%}
.held .auf .mitte{max-width:780px;margin:0 auto}
.held h1{color:#fff;text-shadow:0 2px 24px rgba(90,15,0,.4)}
.held .kicker{color:rgba(255,255,255,.85)}
.held .hell{color:rgba(255,255,255,.72)}
.held::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:1;
 background:linear-gradient(to top,rgba(120,25,10,.55),transparent)}
@media (prefers-reduced-motion:reduce){
 .held .weg{animation:none;stroke-dashoffset:0}
 .held .punkt{animation:none;opacity:1}
 .held .halo{animation:none;opacity:0}
}

/* Symbolknoepfe in der Kopfzeile: kein Ring, Symbol nie beschnitten */
.iko{min-height:44px;min-width:44px;width:44px;height:44px;padding:0;flex:0 0 auto;
 display:grid;place-items:center;border:none;background:transparent;box-shadow:none;
 border-radius:14px;color:var(--t);opacity:.72;overflow:visible}
.iko svg{display:block;overflow:visible}
.iko:hover,.iko:focus-visible{opacity:1;background:var(--glas)}
.iko:active{transform:scale(.94)}
@media (max-width:420px){.iko{width:40px;height:40px;min-width:40px}}

/* Detailgrad: auf schmalen Geraeten zwei mal zwei statt zerrissener Pillenreihe */
@media (max-width:430px){
 .seg{display:grid;grid-template-columns:1fr 1fr;gap:5px;border-radius:var(--r-s);padding:5px}
 .seg button{padding:0 8px;font-size:.88rem}
}
html{overflow-anchor:none}
.tag.auto{background:rgba(46,125,80,.14);color:#1f5c33;border:1px solid rgba(46,125,80,.3)}

/* Modus-Wahl: zu Fuss oder mit dem Auto */
.modi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:.4em 0 0}
.modus{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
 min-height:92px;padding:13px 14px;border-radius:var(--r-s);text-align:left;
 border:1.5px solid var(--line);background:var(--bg2);box-shadow:none;color:var(--ink)}
.modus .bild{display:block;line-height:0;opacity:.85}
.modus .name{font-weight:800;font-size:1rem;line-height:1.2}
.modus .zahl{font-size:.78rem;opacity:.72;font-weight:600;line-height:1.35;
 margin-top:1px}
.modus[aria-pressed=true]{border-color:var(--p);border-width:2px;background:var(--glas)}
.modus[aria-pressed=true] .bild{opacity:1;color:var(--p)}
.modus.aus{opacity:.5;cursor:not-allowed}
.modus.aus .zahl{font-style:italic}