[hidden]{display:none!important}
:root{
  --bg:#f4f1ea; --karte:#fffdf8; --text:#1f2a24; --leise:#6b726d; --linie:#e2ddd2;
  --kg:#2f7d4f; --msl:#c0502b; --akzent:#1f2a24; --schatten:0 6px 24px rgba(20,25,20,.18);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141816; --karte:#1d2320; --text:#eef0ec; --leise:#9aa39d; --linie:#2e3632; --akzent:#eef0ec;
  --schatten:0 6px 24px rgba(0,0,0,.5);}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden}
#map{position:fixed;inset:0}
button{font:inherit;color:inherit;cursor:pointer}
:not(.leaflet-pane)>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#top{position:fixed;left:12px;right:12px;top:calc(10px + var(--safe-t));display:flex;gap:8px;z-index:900}
#suche{flex:1;min-width:0;height:46px;border:0;border-radius:23px;padding:0 18px;background:var(--karte);
  color:var(--text);box-shadow:var(--schatten);font-size:16px;outline:none}
.rund{width:46px;height:46px;border-radius:23px;border:0;background:var(--karte);box-shadow:var(--schatten);
  display:grid;place-items:center;position:relative;flex:none}
.schwebend{position:fixed;right:12px;bottom:calc(24px + var(--safe-b));z-index:800}
#filterPunkt{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--msl)}

.blatt{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--karte);border-radius:18px 18px 0 0;
  box-shadow:0 -6px 30px rgba(0,0,0,.22);padding:8px 16px calc(16px + var(--safe-b));max-height:62vh;overflow:auto;
  animation:hoch .2s ease-out}
.blatt.gross{max-height:82vh}
@media (min-width:760px){.blatt{left:auto;right:16px;bottom:16px;width:400px;border-radius:18px;max-height:80vh}}
@keyframes hoch{from{transform:translateY(40px);opacity:0}}
.griff{width:40px;height:5px;border-radius:3px;background:var(--linie);margin:2px auto 10px;position:relative;touch-action:none;cursor:grab}
.griff::before{content:'';position:absolute;left:-70px;right:-70px;top:-16px;bottom:-14px}
h2{margin:0 0 12px;font-size:19px}
h2 small{color:var(--leise);font-weight:400;font-size:14px}
.gruppe{margin:0 0 16px}
.lbl{display:block;color:var(--leise);font-size:13px;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--linie);background:transparent;border-radius:16px;padding:6px 12px}
.chips button.an{background:var(--akzent);color:var(--karte);border-color:var(--akzent)}
input[type=range]{width:100%;accent-color:var(--akzent)}
.schalter{display:flex;gap:8px;align-items:center}
.zeile{display:flex;gap:8px;justify-content:flex-end}
.flach,.voll{border-radius:12px;padding:10px 16px;border:1px solid var(--linie);background:transparent}
.voll{background:var(--akzent);color:var(--karte);border-color:var(--akzent)}

.region{color:var(--leise);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:14px 0 4px}
.eintrag{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--linie);cursor:pointer}
.eintrag .n{flex:1;min-width:0}
.eintrag .n b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.eintrag .n span{color:var(--leise);font-size:13px}
.ohne{font-size:11px;color:var(--leise)}
.punkt{width:12px;height:12px;border-radius:50%;flex:none}
.p-KG{background:var(--kg)} .p-MSL{background:var(--msl)}

.kopf{display:flex;gap:10px;align-items:flex-start}
.kopf h2{flex:1;margin:0}
.badge{display:inline-block;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:600;color:#fff}
.b-KG{background:var(--kg)} .b-MSL{background:var(--msl)}
.b-C{background:transparent;color:var(--text);border:1px solid var(--linie)}
.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.fakt{background:var(--bg);border-radius:12px;padding:8px 10px}
.fakt span{display:block;color:var(--leise);font-size:11px}
.fakt b{font-size:16px}
.ort{color:var(--leise);font-size:13px;margin-top:4px}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--linie);cursor:pointer}
.aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.aktionen a,.aktionen button{flex:1 1 auto;text-align:center;text-decoration:none;border-radius:12px;padding:10px 12px;
  border:1px solid var(--linie);background:transparent;color:var(--text);font-size:14px}

#viewer{position:fixed;inset:0;z-index:2000;background:#000;display:flex;flex-direction:column}
#vBar{display:flex;align-items:center;gap:10px;color:#fff;padding:calc(10px + var(--safe-t)) 14px 10px}
#vTitel{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vNr{color:#aaa;font-size:13px}
#vZu{background:#222;border:0;color:#fff;width:40px;height:40px;border-radius:20px;font-size:18px}
#vBahn{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;touch-action:none;scrollbar-width:none;overscroll-behavior:contain}
#vBahn::-webkit-scrollbar{display:none}
#vBahn .seite{flex:0 0 100%;scroll-snap-align:center;overflow:hidden;position:relative}
#vBahn .zf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%;will-change:transform}
#vBahn img{max-width:100%;max-height:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
#vBahn .seite.zoom{display:block}
#vBahn .seite.zoom img{max-width:none;max-height:none;width:250%}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + var(--safe-b));z-index:3000;
  background:var(--akzent);color:var(--karte);padding:10px 16px;border-radius:12px;box-shadow:var(--schatten);font-size:14px}

.mk{width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.mk.KG{background:var(--kg)} .mk.MSL{background:var(--msl)}
.mk.C{border-color:#ffe08a}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(31,42,36,.25)}
.marker-cluster div{background:#1f2a24!important;color:#fff;font-weight:700}
.leaflet-control-attribution{font-size:10px}
.leaflet-bottom.leaflet-left{margin-bottom:var(--safe-b)}

.gradzeile{display:flex;align-items:center;gap:10px}
.gradzeile span{width:24px;color:var(--leise);font-size:13px}
.hinweis{display:block;color:var(--leise);font-size:12px;margin-top:2px}
.schwebend.links{right:auto;left:12px;bottom:calc(84px + var(--safe-b))}
#legende{position:fixed;left:12px;bottom:calc(138px + var(--safe-b));z-index:850;background:var(--karte);
  border-radius:14px;box-shadow:var(--schatten);padding:10px 14px;font-size:14px;max-width:calc(100vw - 24px)}
.lz{display:flex;align-items:center;gap:10px;padding:4px 0}
.lz .mk{width:18px;height:18px;flex:none;border-width:2.5px}
.lz .cl{width:22px;height:22px;border-radius:50%;background:#1f2a24;color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;flex:none;box-shadow:0 0 0 4px rgba(31,42,36,.25)}
.lz .ich{width:16px;height:16px;border-radius:50%;background:#2a6fdb;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);flex:none}
.lz.klein{color:var(--leise);font-size:12px}

.doppel{position:relative;height:34px}
.doppel .spur{position:absolute;left:11px;right:11px;top:15px;height:5px;border-radius:3px;background:var(--linie)}
#spurAn{position:absolute;top:0;bottom:0;background:var(--akzent);border-radius:3px}
.doppel input{position:absolute;left:0;right:0;top:4px;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:26px}
.doppel input::-webkit-slider-runnable-track{background:none;height:26px}
.doppel input::-moz-range-track{background:none}
.doppel input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:26px;height:26px;border-radius:50%;
  background:var(--karte);border:3px solid var(--akzent);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.doppel input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:var(--karte);border:3px solid var(--akzent);cursor:pointer}
.skala{position:relative;height:14px;color:var(--leise);font-size:11px}
.skala span{position:absolute;transform:translateX(-50%)}

/* ---------- Beschrieb ---------- */
.kurz{font-style:italic;margin:10px 0 0;line-height:1.45}
.balken{display:flex;gap:3px;height:24px;margin:0 0 10px;border-radius:8px;overflow:hidden}
.bk{display:flex;align-items:center;justify-content:center;min-width:44px;color:#fff;font-size:12px;white-space:nowrap}
.g5{background:#7fae5a}.g6{background:#2f7d4f}.g7{background:#c0502b}.g8{background:#5a2238}
.aktionen a.voll{background:var(--akzent);color:var(--karte);border-color:var(--akzent)}
.beschrieb{margin-top:6px;font-size:14px;line-height:1.5}
.beschrieb p{margin:0 0 8px}
.beschrieb ul{margin:0 0 8px;padding-left:18px}
.beschrieb a{color:inherit}
.abschn{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--leise);margin:18px 0 6px}
.sektor{border-top:1px solid var(--linie);padding:4px 0}
.sektor summary{cursor:pointer;font-weight:600;padding:8px 0}
.sektor summary small{color:var(--leise);font-weight:400;margin-left:6px}
.tabwrap{overflow-x:auto;margin:0 0 8px}
.rt{width:100%;border-collapse:collapse;font-size:13px}
.rt th{text-align:left;color:var(--leise);font-weight:400;font-size:12px;padding:4px}
.rt td{padding:5px 4px;border-top:1px solid var(--linie);vertical-align:top}
.rt td:last-child{color:var(--leise);font-size:12px}
.grad{color:#fff;border-radius:6px;padding:1px 6px;font-size:12px;font-weight:600;white-space:nowrap}
.fuss{color:var(--leise);font-size:12px;margin-top:14px}

/* ---------- Detail-Kasten vergroessern ---------- */
.grossKnopf{flex:none;width:32px;height:32px;border-radius:16px;border:1px solid var(--linie);background:transparent;
  color:var(--text);font-size:17px;line-height:1;display:grid;place-items:center;padding:0}
#detail.maxi{max-height:calc(100dvh - 12px - var(--safe-t));height:calc(100dvh - 12px - var(--safe-t))}
@media (min-width:760px){
  #detail.maxi{width:min(860px, calc(100vw - 32px));top:16px;bottom:16px;height:auto;max-height:none}
  #detail.maxi .fotos{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}

/* ---------- Foto-Viewer: Pfeile ---------- */
#viewer{position:fixed}
.vPfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:26px;border:0;
  background:rgba(0,0,0,.45);color:#fff;font-size:34px;line-height:1;display:grid;place-items:center;padding:0 0 4px}
.vPfeil:hover{background:rgba(0,0,0,.7)}
#vZurueck{left:12px} #vWeiter{right:12px}
.vPfeil[hidden]{display:none}

/* ---------- Fotos drehen ---------- */
#vDreh{background:#222;border:0;color:#fff;width:40px;height:40px;border-radius:20px;font-size:20px}
img.r90{transform:rotate(90deg)} img.r180{transform:rotate(180deg)} img.r270{transform:rotate(270deg)}
#vBahn img.r90,#vBahn img.r270{max-width:calc(100dvh - 70px - var(--safe-t));max-height:100vw}
#vBahn .seite.zoom img.r90,#vBahn .seite.zoom img.r270{max-width:none;max-height:none}

/* ---------- Heruntergeladene Gebiete ---------- */
#dlPunkt{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--kg);
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
#dlPunkt[hidden]{display:none}
.dlInfo{color:var(--leise);font-size:13px;margin:-6px 0 8px}
.dlEintrag{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--linie)}
.dlEintrag .n{flex:1;min-width:0;cursor:pointer}
.dlEintrag .n b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlEintrag .n span{color:var(--leise);font-size:13px}
.dlLoeschen{flex:none;border:1px solid var(--linie);background:transparent;color:var(--text);border-radius:10px;padding:7px 12px;font-size:13px}
.dlLoeschen.sicher,#dlAlle.sicher{background:#c0392b;border-color:#c0392b;color:#fff}
.leer{color:var(--leise);font-size:14px}
#downloads .zeile{margin-top:14px}

/* ---------- Zu- und Abstieg ---------- */
.abschn small{text-transform:none;letter-spacing:0;font-weight:400}
.weg{border-left:3px solid #1f8a3b;padding:2px 0 2px 10px;margin:0 0 10px}
.wegKopf{display:flex;align-items:center;gap:8px}
.wegLinie{flex:none;width:26px;height:0;border-top:4px solid #1f8a3b}
.wegLinie.abstieg{border-top-style:dashed}
.wegFakten{color:var(--leise);font-size:13px;margin:2px 0 4px}
.weg p{margin:0}
.wegKnopf{width:100%;margin:4px 0 6px}

/* ---------- Muesch gah ---------- */
.mk.M{position:relative}
.mk.M::after{content:"★";position:absolute;top:-11px;right:-11px;width:16px;height:16px;border-radius:8px;background:#f2b705;
  color:#fff;font-size:11px;line-height:16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.4)}
#muPunkt{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e0a100;
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
#muPunkt[hidden]{display:none}
#btnMuesch svg{stroke:#e0a100}
.muBox{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.muKnopf{width:100%;border-radius:12px;padding:10px 12px;border:1px solid #e0a100;background:transparent;color:#b07d00;font-weight:600}
.muBox.an .muKnopf{background:#f2b705;border-color:#f2b705;color:#1f2a24}
.muMit{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--leise)}
.muMit input{flex:1;min-width:0;border:1px solid var(--linie);border-radius:10px;padding:8px 10px;background:var(--bg);color:var(--text);font-size:16px}
.muMit.klein{margin-top:4px;font-size:13px}
.muMit.klein input{padding:5px 8px;font-size:15px}
#muWer{margin:0 0 6px}
.muEintrag{display:flex;align-items:flex-start;gap:10px;padding:10px 2px;border-bottom:1px solid var(--linie)}
.muEintrag .n{flex:1;min-width:0;cursor:pointer}
.muEintrag .n>b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muEintrag .n>span{color:var(--leise);font-size:13px}
.muEintrag .muWeg{margin-top:2px}
.muWeg.sicher{background:#c0392b;border-color:#c0392b;color:#fff}
#muesch .zeile{margin-top:14px}

/* ---------- grosse Klickflaeche fuer Gebietspunkte ---------- */
.mkHit{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.mkHit .mk{transition:transform .12s}
.mkHit:hover .mk{transform:scale(1.3)}
.leaflet-marker-icon{cursor:pointer}

/* Anmeldung und Konto */
#zugang{position:fixed;inset:0;z-index:3000;background:var(--bg);display:grid;place-items:center;padding:16px;overflow:auto}
#zKarte{width:100%;max-width:380px;background:var(--karte);border-radius:18px;box-shadow:var(--schatten);padding:22px 20px}
#zKarte form{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
#zKarte input{border:1px solid var(--linie);border-radius:12px;padding:12px 14px;background:var(--bg);color:var(--text);font-size:16px}
#zKarte .voll{padding:12px 16px}
.zText{color:var(--leise);margin:0 0 6px}
#zKarte .zeile{margin-top:16px}
.zLinks{font-size:14px;margin:12px 0 0}
.zLinks a{color:var(--text)}
.zMeldung{margin:10px 0 0;color:#c0392b;font-size:14px}
.zMeldung.gut{color:var(--kg)}
#kontoPunkt{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--msl);
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
#kontoPunkt[hidden]{display:none}
.zTitel{margin:14px 0 4px;font-size:16px}
.zGruppe{margin:12px 0 2px;font-size:13px;color:var(--leise);font-weight:600}
.zEintrag{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 2px;border-bottom:1px solid var(--linie)}
.zEintrag .n{flex:1;min-width:180px}
.zEintrag .n>b{display:block}
.zEintrag .n>span{color:var(--leise);font-size:13px;word-break:break-all}
.zKn{display:flex;gap:6px}
.zKn button{padding:7px 12px;font-size:13px;border-radius:10px}
@media (max-width:420px){#top{gap:6px}#top .rund{width:42px;height:42px}#suche{height:42px;padding:0 14px}}