:root{
  --gruen:#1d3b2a; --hell:#f6f4ee; --linie:#e2ddd0; --text:#1f2421; --grau:#6b716c;
  --t1:#e8b500; --t2:#d7263d; --t4:#1f6fd1; --s:#8d8d8d; --bus:#7b3fd1; --bahn:#111;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:var(--text);background:var(--hell)}
#karte{position:fixed;inset:0 0 0 420px}
#seite{position:fixed;left:0;top:0;bottom:0;width:420px;overflow-y:auto;background:var(--hell);
  border-right:1px solid var(--linie);padding:0 18px 18px;z-index:5}
#griff{display:none}
header{position:sticky;top:0;background:var(--hell);padding:16px 0 10px;z-index:2;border-bottom:1px solid var(--linie)}
h1{margin:0;font-size:24px;color:var(--gruen);letter-spacing:-.3px}
.unter{margin:2px 0 0;color:var(--grau);font-size:14px}
h2{margin:18px 0 6px;font-size:21px}
h3{margin:20px 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.6px;color:var(--gruen)}
h3 small{font-weight:400;text-transform:none;letter-spacing:0;color:var(--grau)}
.text{line-height:1.5;margin:0 0 10px}

#tourliste{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.tour{display:flex;gap:12px;align-items:stretch;text-align:left;background:#fff;border:1px solid var(--linie);
  border-radius:12px;padding:0;cursor:pointer;overflow:hidden;font:inherit;color:inherit;transition:box-shadow .15s,transform .15s}
.tour:hover{box-shadow:0 3px 14px rgba(0,0,0,.08);transform:translateY(-1px)}
.tour.an{outline:2.5px solid var(--farbe)}
.tour .balken{width:7px;background:var(--farbe);flex:none}
.tour .inh{padding:10px 12px 10px 0;flex:1}
.tour b{font-size:16px;display:block}
.tour .kurz{color:var(--grau);font-size:13.5px;margin:2px 0 6px;line-height:1.35}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:12px;background:var(--hell);border:1px solid var(--linie);border-radius:20px;padding:2px 8px;white-space:nowrap}
.chip.sac{color:#fff;border:none;font-weight:600}

.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.zahlen div{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:8px 4px;text-align:center}
.zahlen b{display:block;font-size:18px}
.zahlen span{font-size:11.5px;color:var(--grau)}

#profilbox{position:relative;background:#fff;border:1px solid var(--linie);border-radius:10px;margin-top:10px}
#profil{width:100%;height:150px;display:block;touch-action:none;cursor:crosshair}
#profil-info{position:absolute;top:6px;right:8px;font-size:12px;background:rgba(255,255,255,.9);padding:2px 6px;border-radius:6px;pointer-events:none}
.legende{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--grau);margin-top:8px}
.legende i{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:4px}
.legende i.gestr{background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px)!important;height:3px}

.ablauf{list-style:none;padding:0;margin:0;position:relative}
.ablauf li{display:flex;gap:10px;padding:7px 0;position:relative;cursor:pointer;border-radius:8px}
.ablauf li:hover{background:#fff}
.ablauf .sym{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:#fff;border:2px solid var(--c,#999);z-index:1}
.ablauf li:not(:last-child)::before{content:"";position:absolute;left:14px;top:36px;bottom:-8px;border-left:2px dotted #c9c3b4}
.ablauf .was b{display:block;font-size:14.5px}
.ablauf .was span{font-size:13px;color:var(--grau)}

.oev{display:flex;flex-direction:column;gap:8px}
.oevblock{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:9px 11px;font-size:14px}
.oevblock .kopf{font-weight:600;margin-bottom:4px}
.oevblock .hint{font-size:12.5px;color:var(--grau);margin-bottom:4px}
.abf{display:flex;gap:8px;align-items:baseline;padding:2px 0}
.abf .zeit{font-variant-numeric:tabular-nums;font-weight:700;min-width:44px}
.abf .lin{font-size:11.5px;background:var(--gruen);color:#fff;border-radius:4px;padding:1px 5px}
.abf .ver{color:#c0392b;font-size:12px}
.hinweise{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.hinweis{background:#fff7e0;border:1px solid #f0dca0;border-radius:10px;padding:8px 10px;font-size:13.5px;line-height:1.4}
.aktionen{display:flex;gap:8px;margin-top:16px}
.aktionen button,.aktionen a{flex:1;text-align:center;font:inherit;font-size:14px;font-weight:600;padding:10px;border-radius:10px;
  border:1px solid var(--gruen);background:var(--gruen);color:#fff;text-decoration:none;cursor:pointer}
.aktionen a{background:#fff;color:var(--gruen)}
footer{margin-top:26px;font-size:11.5px;color:var(--grau);line-height:1.5}
footer a{color:inherit}

#kartenknoepfe{position:fixed;top:12px;right:12px;z-index:4;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#kartenknoepfe>button,.umschalter,.haken{background:#fff;border:none;border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.25);font:inherit;font-size:14px;font-weight:600}
#kartenknoepfe>button{padding:8px 12px;cursor:pointer;min-width:44px}
#kartenknoepfe>button.an{background:var(--gruen);color:#fff}
.umschalter{display:flex;overflow:hidden}
.umschalter button{border:none;background:none;font:inherit;font-size:13px;padding:8px 10px;cursor:pointer}
.umschalter button.an{background:var(--gruen);color:#fff}
.haken{padding:7px 10px;font-size:13px;font-weight:500;display:flex;gap:6px;align-items:center;cursor:pointer}

.mk{display:flex;align-items:center;gap:4px;cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.mk .ic{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:15px;border:2px solid var(--c,#1d3b2a)}
.mk .nm{background:rgba(255,255,255,.92);border-radius:6px;padding:1px 6px;font-size:12px;font-weight:600;white-space:nowrap}
.mk.klein .nm{display:none}
.mk.gipfel .ic{border-radius:6px;background:#1d3b2a;color:#fff;border-color:#fff}
.laeufer{width:16px;height:16px;border-radius:50%;background:#ff3b30;border:3px solid #fff;box-shadow:0 0 0 2px #ff3b30,0 2px 6px rgba(0,0,0,.4)}
.maplibregl-popup-content{border-radius:10px;font-size:13.5px;padding:10px 12px}

@media (max-width:820px){
  #karte{inset:0 0 44vh 0}
  #seite{top:auto;height:44vh;width:100%;border-right:none;border-top:1px solid var(--linie);border-radius:16px 16px 0 0;
    box-shadow:0 -4px 18px rgba(0,0,0,.12);transition:height .25s;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  #seite.gross{height:86vh}
  #griff{display:block;position:sticky;top:0;height:22px;margin:0 -18px;background:var(--hell);z-index:3;cursor:pointer}
  #griff::after{content:"";position:absolute;left:50%;top:8px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:#cfc8b8}
  header{top:22px;padding-top:2px}
  h1{font-size:20px}
  #kartenknoepfe{top:calc(8px + env(safe-area-inset-top));right:8px;left:8px;flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
  #kartenknoepfe>button{padding:7px 10px;font-size:13px}
  .haken{padding:6px 8px;font-size:12px}
  .umschalter button{padding:7px 8px;font-size:12px}
}