*{box-sizing:border-box;margin:0;padding:0}
#splash{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .4s ease}
.split-half{position:absolute;top:0;bottom:0;width:50%;z-index:0}
.split-half.left{left:0;background:url('static/split-left.webp') center/cover no-repeat}
.split-half.right{right:0;background:url('static/split-right.webp') center/cover no-repeat}
#splash.out{opacity:0;pointer-events:none}
#splash img{max-width:90vw;max-height:85vh;object-fit:contain;user-select:none;filter:drop-shadow(15px 15px 10px rgba(0,0,0,.8));position:relative;z-index:2;transform-origin:center;animation:shrinkTuete 2.2s cubic-bezier(.22,.9,.3,1) 1.5s both}
@keyframes shrinkTuete{0%{transform:translateY(0) scale(1)}100%{transform:translateY(25vh) scale(.3)}}

.cta-wrap{--w:min(150px,40vw);position:absolute;top:50%;width:var(--w);margin-top:-32px;z-index:6;pointer-events:auto;opacity:0}
.cta-wrap:hover .splash-cta{animation-play-state:paused}
.cta-tooltip{max-height:min(70vh,480px);overflow-y:auto;background:rgba(20,30,25,.9);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:12px 14px;color:#fff;font-size:13px;line-height:1.5;text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:5}
.cta-tooltip p{margin:0}
.cta-tooltip ol{margin:8px 0 0;padding-left:18px}
.cta-tooltip ol ul{margin:2px 0 6px;padding-left:16px;font-size:12px;opacity:.85;list-style:disc}
/* Desktop/Tablet: Tooltip am Button verankert (oben links, seitlich rechts) */
@media (min-width:641px){
  .cta-tooltip{position:absolute;bottom:100%;left:50%;width:min(230px,80vw);margin-bottom:12px;transform:translateX(-50%) translateY(6px)}
  .cta-wrap.right .cta-tooltip{width:min(340px,80vw);bottom:auto;top:50%;left:auto;right:100%;margin-bottom:0;margin-right:12px;transform:translateY(-50%) translateX(6px)}
  .cta-wrap:hover .cta-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}
  .cta-wrap.right:hover .cta-tooltip{transform:translateY(-50%) translateX(0)}
}
/* Unter 640px kein Tooltip: kein Hover auf Touch, ein Tap wechselt direkt den Modus. */
.cta-wrap.left{left:calc(25vw - (var(--w) / 2));animation:sinkWithBagLeft 2.2s ease-in-out 1.5s both, arcOutLeft 1.2s ease-in-out 3.7s forwards}
.cta-wrap.right{left:calc(75vw - (var(--w) / 2));animation:sinkWithBagRight 2.2s ease-in-out 1.5s both, arcOutRight 1.2s ease-in-out 3.7s forwards}
@keyframes sinkWithBagLeft{0%{transform:translateX(25vw) translateY(0) scale(1)}100%{transform:translateX(25vw) translateY(25vh) scale(.3)}}
@keyframes sinkWithBagRight{0%{transform:translateX(-25vw) translateY(0) scale(1)}100%{transform:translateX(-25vw) translateY(25vh) scale(.3)}}
@keyframes arcOutLeft{
0%{opacity:0;transform:translateX(25vw) translateY(25vh) scale(.3)}
1%{opacity:1;transform:translateX(25vw) translateY(25vh) scale(.3)}
10%{transform:translateX(22.5vw) translateY(16vh) scale(.37)}
20%{transform:translateX(20vw) translateY(8.5vh) scale(.44)}
30%{transform:translateX(17.5vw) translateY(2.4vh) scale(.51)}
40%{transform:translateX(15vw) translateY(-2.3vh) scale(.58)}
50%{transform:translateX(12.5vw) translateY(-5.5vh) scale(.65)}
60%{transform:translateX(10vw) translateY(-7.3vh) scale(.72)}
70%{transform:translateX(7.5vw) translateY(-7.6vh) scale(.79)}
80%{transform:translateX(5vw) translateY(-6.5vh) scale(.86)}
90%{transform:translateX(2.5vw) translateY(-4vh) scale(.93)}
100%{opacity:1;transform:translateX(0) translateY(0) scale(1)}
}
@keyframes arcOutRight{
0%{opacity:0;transform:translateX(-25vw) translateY(25vh) scale(.3)}
1%{opacity:1;transform:translateX(-25vw) translateY(25vh) scale(.3)}
10%{transform:translateX(-22.5vw) translateY(16vh) scale(.37)}
20%{transform:translateX(-20vw) translateY(8.5vh) scale(.44)}
30%{transform:translateX(-17.5vw) translateY(2.4vh) scale(.51)}
40%{transform:translateX(-15vw) translateY(-2.3vh) scale(.58)}
50%{transform:translateX(-12.5vw) translateY(-5.5vh) scale(.65)}
60%{transform:translateX(-10vw) translateY(-7.3vh) scale(.72)}
70%{transform:translateX(-7.5vw) translateY(-7.6vh) scale(.79)}
80%{transform:translateX(-5vw) translateY(-6.5vh) scale(.86)}
90%{transform:translateX(-2.5vw) translateY(-4vh) scale(.93)}
100%{opacity:1;transform:translateX(0) translateY(0) scale(1)}
}

/* Skip-Intro: "Start" im Buergermenue ueberspringt die Animation, springt direkt in den Endzustand */
#splash.no-intro img{animation:none;transform:translateY(25vh) scale(.3)}
#splash.no-intro .cta-wrap{animation:none;opacity:1;transform:translateX(0) translateY(0) scale(1)}
#splash.no-intro .splash-cta{animation:none}

.splash-cta{padding:16px 14px;border-radius:999px;background:radial-gradient(120% 100% at 22% 15%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),linear-gradient(155deg,rgba(255,255,255,.18),rgba(20,30,25,.4) 60%);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:19.2px;text-align:center;line-height:1.3;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:0 1px 3px rgba(0,0,0,.45);box-shadow:4px 10px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(0,0,0,.2)}
.left .splash-cta{animation:bob 3.4s ease-in-out 4.9s infinite}
.right .splash-cta{animation:bob 3.8s ease-in-out 4.9s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#splash-version{position:absolute;bottom:10px;right:14px;font-size:11px;color:rgba(255,255,255,.65);text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:3;pointer-events:none}
input,button,select,textarea,.leaflet-container{font-family:'Fira Sans Condensed',sans-serif;}
body{font-family:'Fira Sans Condensed',sans-serif;background:#f8f8f6;color:#222;display:flex;flex-direction:column;height:100vh}
#header{padding:8px 14px;border-bottom:1px solid #e0e0da;background:#fff;display:flex;flex-direction:column;gap:5px;flex-shrink:0}
#header h1{font-size:17px;font-weight:800;color:#1a1a1a;flex-shrink:0}
#header-row1{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
/* Reset + Bonbons haengen jetzt in #map-wrap statt in #header: kein weisser
   Kasten mehr, jeder Bonbon traegt seine Kategoriefarbe selbst. Dadurch
   bleiben sie auch im Fullscreen sichtbar (body.map-only blendet nur noch
   #header aus). Zentrieren war keine gute Idee (Block ist bei jeder
   Breitenaenderung mitgewackelt) -- jetzt stattdessen fix links: Reset sitzt
   oben links ueber dem nativen Leaflet-Zoom-Control (+/-), auf gleicher Hoehe
   wie der Fullscreen-Toggle oben rechts. Die Leaflet-Ecken-Controls links
   (Zoom, ZoomDisplay, CountDisplay) ruecken per Margin auf dem
   .leaflet-top.leaflet-left-Container eine Reset-Hoehe tiefer, damit sie sich
   nicht ueberlappen. #pfad-row haengt rechts von Reset, linksbuendig, waechst
   frei nach rechts/unten. */
#reset-round{position:absolute;top:8px;left:8px;z-index:641}
.leaflet-top.leaflet-left{margin-top:42px}
#pfad-row{position:absolute;top:8px;left:50px;right:64px;
  z-index:640;display:flex;gap:4px;align-items:center;flex-wrap:wrap;pointer-events:none}
#pfad-row>*{pointer-events:auto}
#searchbox{padding:5px 10px;border:1px solid #ccc;border-radius:18px;font-size:13px;background:#fafafa;flex:1;min-width:120px;outline:none}
#searchbox:focus{border-color:#666}
/* Pfad-Buttons */
.pfad-btn{display:flex;align-items:center;gap:5px;padding:3px 6px 3px 10px;border-radius:15px;border:1.5px solid rgba(0,0,0,.15);font-size:12px;cursor:pointer;font-weight:600;white-space:nowrap;line-height:1.5;height:32px;overflow:hidden;transition:box-shadow .1s}
.pfad-btn.solo{box-shadow:0 0 0 2.5px rgba(0,0,0,.5)}
/* Glossy-Look nur fuer Gruppen-Buttons (wind-main), analog zu .splash-cta auf
   dem Startbildschirm (Act-Local/RE:MIX) -- bewusster Wiedererkennungseffekt.
   Grundfarbe kommt weiter per JS ueber backgroundColor (nicht background-
   shorthand, sonst wuerde das hier gesetzte background-image ueberschrieben).
   Gilt fuer alle Gruppen-Buttons: die 6 act-local-Gruppen (Earth, Kultur, ...),
   die verschachtelten Medien/Locations-Buttons und die 6 RE:MIX-Cluster
   (Solar, Netz, Verkehr, Waerme, BEG, Wind) -- alle teilen die wind-main-Klasse. */
.wind-main{
  height:40px;font-size:15px;padding:4px 8px 4px 12px;gap:6px;
  background-image:radial-gradient(120% 100% at 22% 15%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),linear-gradient(155deg,rgba(255,255,255,.28),rgba(0,0,0,.12) 60%);
  backdrop-filter:blur(5px) saturate(160%);
  -webkit-backdrop-filter:blur(5px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:0 1px 3px rgba(0,0,0,.45);
  /* Kein Schlagschatten mehr, nur noch die beiden inneren Kanten -- die
     gehoeren zur Glossy-Woelbung selbst, nicht zum abgeschafften Schatten. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.15);
}
.wind-cluster{display:flex;align-items:center;flex-wrap:wrap;row-gap:4px}
/* #pfad-row: sobald eine Erste-Ebene-Gruppe offen ist (.flyout-active), kollabieren
   alle Geschwister-Elemente (andere Gruppen, uebrige Pfad-Pills bei RE:MIX) --
   gleiche Kollaps-Mechanik wie .wind-sub, nur eine Ebene hoeher. Reset ist ein
   eigenstaendiges Element ausserhalb von #pfad-row (siehe #reset-round oben)
   und davon nie betroffen -- das ist der Anker, der stehen bleibt.
   Choreografie beim Aufklappen: (a) Geschwister blenden sofort aus, (b) der
   geklickte Button ruecksicht dadurch von selbst nach links (reiner Flow-
   Effekt, keine eigene Animation noetig), (c) erst danach -- transition-delay
   auf den .expanded-Zielregeln von .wind-sub/.wind-subsub -- fahren die
   Kind-Buttons nach rechts aus. Der Delay steckt nur in der .expanded-Regel
   (Ziel der Oeffnen-Transition), nicht in der Basisregel, darum ist Schliessen
   bewusst ohne Verzoegerung. Der Delay (.7s) ist bewusst genauso lang wie die
   Geschwister-Kollaps-Dauer: gaebe es eine Ueberlappung (z.B. Delay < Dauer),
   waeren fuer einen Moment gleichzeitig halb-geschrumpfte Geschwister UND
   halb-gewachsene Kinder da, deren Summenbreite kurz ueber die finale Breite
   schiessen und die Zeile unmotiviert umbrechen laesst, bevor sie sich wieder
   einpendelt -- genau das war das gemeldete Y-Achsen-Springen. */
#pfad-row>*{transition:max-width .7s cubic-bezier(.4,0,.2,1),opacity .7s cubic-bezier(.4,0,.2,1),margin .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1),border-width .7s cubic-bezier(.4,0,.2,1);overflow:hidden;max-width:2000px}
#pfad-row.flyout-active>*:not(.expanded){max-width:0;opacity:0;margin:0;padding:0;border-width:0;pointer-events:none}
/* Gleicher Bug wie bei .wind-nested (siehe unten), nur eine Ebene hoeher:
   ein kollabiertes Geschwister-.wind-cluster wird selbst auf max-width:0
   geklemmt, aber sein mainBtn-KIND ist davon nicht betroffen (die Klemm-
   Regel greift nur auf direkte #pfad-row-Kinder) und behaelt volle Breite --
   das zwingt intern denselben Zwei-Zeilen-Wrap (68px statt 32px), obwohl
   unsichtbar. Dieses Phantom-68px zaehlt trotzdem zur Zeilenhoehe von
   #pfad-row und schiebt den tatsaechlich offenen Button 18px nach unten
   (align-items:center zentriert ihn in der zu hohen Zeile). Genau das war
   das gemeldete Rutschen beim Aufklapp-Klick. */
#pfad-row.flyout-active>.wind-cluster:not(.expanded){height:32px}
.wind-arrow{font-size:20px;line-height:1;font-weight:700;transition:transform .5s cubic-bezier(.4,0,.2,1);display:inline-block}
.wind-cluster.expanded .wind-arrow{transform:rotate(90deg)}
.wind-sub{max-width:0;margin-left:0;padding-left:0;padding-right:0;opacity:0;overflow:hidden;border-width:0;pointer-events:none;transition:max-width .6s cubic-bezier(.4,0,.2,1),margin-left .6s cubic-bezier(.4,0,.2,1),opacity .6s cubic-bezier(.4,0,.2,1),padding .6s cubic-bezier(.4,0,.2,1),border-width .6s cubic-bezier(.4,0,.2,1)}
.wind-cluster.expanded .wind-sub{max-width:170px;margin-left:6px;opacity:1;pointer-events:auto;padding-left:10px;padding-right:6px;border-width:1.5px;transition-delay:.7s}
/* Zweite Verschachtelungsstufe (#medien/#locations unter Kultur): .wind-nested
   traegt zusaetzlich .wind-sub, damit es mit der Elterngruppe mit-kollabiert,
   braucht aber mehr Platz als eine normale Pill -- daher der spezifischere
   Override statt der 170px-Kappung. Eigene Pfeilklasse .wind-arrow-nested
   (nicht .wind-arrow), sonst wuerde die Elterngruppen-Regel den Pfeil schon
   beim Aufklappen von Kultur mitdrehen, bevor Medien selbst geklickt wurde. */
.wind-nested{display:inline-flex;align-items:center;flex-wrap:wrap;row-gap:4px}
/* .wind-nested ist selbst kein .pfad-btn und hat daher keine feste Hoehe.
   Solange Kultur (der Elterncluster) nicht .expanded ist, klemmt .wind-sub
   die Breite auf 0 -- und genau dann zwingt der interne flex-wrap den
   eigenen Hauptbutton auf eine Zeile und die (ebenfalls 0 breiten, aber
   32px hohen) Kind-Buttons auf eine zweite: macht .wind-nested 68px hoch,
   obwohl visuell nichts zu sehen ist. Das hat schon im Ruhezustand (nichts
   aufgeklappt) Kulturs ganze Zeile auf 68px aufgeblaeht -- das war das
   gemeldete Y-Achsen-Rutschen. Fix: solange der Elterncluster nicht
   .expanded ist, Hoehe hart auf 32px kappen; sobald er es ist, bekommt
   .wind-nested wieder echte Breite und braucht die Zwangs-Deckelung nicht. */
.wind-cluster:not(.expanded) .wind-sub.wind-nested{height:32px}
.wind-cluster.expanded .wind-sub.wind-nested{max-width:2000px}
.wind-arrow-nested{font-size:16px;line-height:1;font-weight:700;transition:transform .5s cubic-bezier(.4,0,.2,1);display:inline-block}
.wind-nested.expanded .wind-arrow-nested{transform:rotate(90deg)}
.wind-subsub{max-width:0;margin-left:0;padding-left:0;padding-right:0;opacity:0;overflow:hidden;border-width:0;pointer-events:none;transition:max-width .6s cubic-bezier(.4,0,.2,1),margin-left .6s cubic-bezier(.4,0,.2,1),opacity .6s cubic-bezier(.4,0,.2,1),padding .6s cubic-bezier(.4,0,.2,1),border-width .6s cubic-bezier(.4,0,.2,1)}
.wind-nested.expanded .wind-subsub{max-width:170px;margin-left:6px;opacity:1;pointer-events:auto;padding-left:10px;padding-right:6px;border-width:1.5px;transition-delay:.7s}
.pfad-check{width:17px;height:17px;border-radius:50%;border:2px solid rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;flex-shrink:0}
/* Reset-Bonbon: rundes Icon-only Pendant zu "Filter & Tree Reset" im Buergermenue,
   direkt neben der Pfad-Reihe statt im Menue vergraben. 40px = gleiche Hoehe
   wie .wind-main (siehe dort), damit Reset genauso gross wirkt wie die
   Gruppen-Buttons. */
.reset-round{width:40px;height:40px;border-radius:50%;border:1.5px solid #aaa;background:#fff;color:#555;
  display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;flex-shrink:0;
  transition:all .15s}
.reset-round:hover{background:#333;color:#fff;border-color:#333;transform:rotate(-45deg)}
/* Handy: Codeberg-Ribbon frisst nur Platz, ohne dort zu nuetzen -- komplett
   weg. Reset+Bonbons wandern an den unteren Bildschirmrand (der Fullscreen-
   Toggle folgt responsiv via JS/setPosition, siehe app.js); oben bleibt so
   nur der Zoom-Block links stehen, darum hier den Abstand dafuer zuruecksetzen. */
@media (max-width:640px){
  cb-rib{display:none}
  /* Reset bleibt oben links, der Fullscreen-Toggle oben rechts -- nur die
     Bonbons wandern an den unteren Rand, ueber die volle Breite. bottom:22px
     statt 8px, damit die OSM-Attribution unten rechts sichtbar bleibt. */
  #pfad-row{top:auto;bottom:22px;left:8px;right:8px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-items:center}
  /* Aufgeklappt wuerde das 3er-Raster den offenen Cluster auf ein Drittel
     einsperren -- darum dann zurueck in den freien Flex-Fluss. */
  #pfad-row.flyout-active{display:flex;flex-wrap:wrap}
  /* Gruppen-Button fuellt seine Rasterzelle; engeres Padding und kleinerer
     Pfeil verschaffen den laengeren Labels (Bildung, Verkehr) den Platz,
     den sie bei einem Drittel Bildschirmbreite brauchen. Schriftgroesse
     bleibt bewusst bei 15px, die Lesbarkeit soll erhalten bleiben. */
  .wind-cluster{width:100%;min-width:0}
  .wind-main{width:100%;min-width:0;justify-content:center;padding:4px 6px 4px 8px;gap:4px}
  .wind-arrow{font-size:16px}
  #pfad-row.flyout-active .wind-cluster,
  #pfad-row.flyout-active .wind-main{width:auto}
}
/* Overlay & Wellen-Buttons */
.gbtn{padding:4px 10px;border-radius:18px;border:1.5px solid #aaa;font-size:12px;cursor:pointer;background:#fff;color:#555;font-weight:500;transition:all .15s;white-space:nowrap}
.gbtn.active{background:#333;color:#fff;border-color:#333}
#wellen-wrap{position:relative}
#wellen-drop{display:none;position:absolute;top:calc(100% + 5px);right:0;left:auto;z-index:3000;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.15);padding:7px 14px 10px;min-width:250px}
#wellen-drop.open{display:block}
#wellen-drop label{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;cursor:pointer;color:#1a3a6b;font-weight:600}
#wellen-drop input[type=checkbox]{accent-color:#1a3a6b;width:14px;height:14px;cursor:pointer}
/* Flyer-Dropdown (Poster-Relevanz), analog Wellen */
#relevanz-wrap{position:relative}
#relevanz-drop{display:none;position:absolute;top:calc(100% + 5px);right:0;left:auto;z-index:3000;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.15);padding:7px 14px 10px;min-width:200px}
#relevanz-drop.open{display:block}
#relevanz-drop label{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;cursor:pointer;color:#8a5a00;font-weight:600}
#relevanz-drop input[type=checkbox]{accent-color:#8a5a00;width:14px;height:14px;cursor:pointer}
/* Quellen-Dropdown (RE:MIX), analog Wellen/Flyer */
#quellen-wrap{position:relative}
#quellen-drop{display:none;position:absolute;top:calc(100% + 5px);right:0;left:auto;z-index:3000;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.15);padding:7px 14px 10px;min-width:200px}
#quellen-drop.open{display:block}
#quellen-drop label{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;cursor:pointer;color:#0D47A1;font-weight:600}
#quellen-drop input[type=checkbox]{accent-color:#0D47A1;width:14px;height:14px;cursor:pointer}
.quellen-hint{font-size:11px;color:#888;font-weight:400;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:2px}
#quellen-mehr{display:block;margin-top:6px;padding-top:6px;border-top:1px solid #eee;font-size:12px;font-weight:600;color:#0D47A1;text-decoration:none}
/* Drill-Down-Toggle im RE:MIX-Betreiber-Popup */
.drill-toggle{position:relative;display:inline-block;width:30px;height:17px;flex:none}
.drill-toggle input{opacity:0;width:0;height:0}
.drill-toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:17px;cursor:pointer;transition:background .15s}
.drill-toggle-slider::before{content:'';position:absolute;width:13px;height:13px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .15s}
.drill-toggle input:checked+.drill-toggle-slider{background:#2192C5}
.drill-toggle input:checked+.drill-toggle-slider::before{transform:translateX(13px)}
#quellen-mehr:hover{text-decoration:underline}
/* Ausgegraute Menüpunkte (Tree/JSON-View bei RE:MIX, noch nicht verfügbar) */
.bmenu-disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
#counter{font-size:11px;color:#888;background:#fff;padding:3px 8px;border-radius:10px;border:1px solid #e0e0da;margin-left:auto;flex-shrink:0}
#map-wrap{position:relative;flex:1}
#map{height:100%}
/* Layer Panel (on-map control) */
.lp-wrap{background:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.4);min-width:30px}
.lp-toggle{display:block;width:36px;height:36px;background-image:url('https://unpkg.com/leaflet@1.9.4/dist/images/layers.png');background-repeat:no-repeat;background-position:center;background-size:26px 26px;text-decoration:none;cursor:pointer;border-radius:4px}
/* Vollbild-Toggle: gleiche Groesse/Optik wie .lp-toggle, aber FA-Icon statt
   Hintergrundbild -- daher background-image zuruecknehmen und zentrieren. */
.fs-toggle{background-image:none;display:flex;align-items:center;justify-content:center;color:#333;font-size:16px}
.compass-toggle{background-image:none;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:16px}
/* :hover mit aufgefuehrt, sonst ueberschreibt das spaetere .lp-toggle:hover
   (gleiche Spezifitaet, steht weiter unten) den Aktiv-Zustand -- der Toggle
   wurde dadurch erst sichtbar, wenn die Maus den Button verlassen hat. */
.compass-toggle.active,.compass-toggle.active:hover{background:#1a3a6b;color:#fff}
/* Kompass-Rose: nur der Mittelpunkt ist Maus-Ziel (Drag-Griff), der Rest
   laesst Klicks durch -- sonst wuerde die 360px grosse Flaeche alle Pins
   darunter blockieren. Events vom Griff bubbeln zum Icon-Container hoch,
   wo Leaflets Drag-Handler haengt, darum reicht pointer-events:auto hier. */
.compass-icon{pointer-events:none}
.compass-icon .compass-grip{pointer-events:auto;cursor:move}
/* Koordinaten-Box unten links: bewusst dieselbe zurueckhaltende Optik wie
   die OSM-Attribution unten rechts, damit sie die Karte nicht dominiert. */
.compass-coords{background:rgba(255,255,255,.7);color:#333;font-size:11px;line-height:1.4;padding:2px 6px;border-radius:3px;cursor:pointer;user-select:none}
.compass-coords:hover{background:rgba(255,255,255,.95)}
.fs-toggle:hover{background:#f4f4f4}
/* Vollbild ("reine Karten-Ansicht"): App-Chrome und Tree raus, die Karte
   fuellt das Fenster. Leaflet-Controls liegen in der Karte und bleiben. */
body.map-only #header{display:none}
body.map-only #tree-panel{display:none}
body.map-only cb-rib{display:none}
.lp-toggle:hover{background:#f4f4f4;color:#333}
.lp-panel{display:none;min-width:190px;padding:5px 0 7px}
.lp-panel.lp-open{display:block}
.lp-head{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;padding:6px 12px 2px}
.lp-row{display:flex;align-items:center;padding:4px 12px;font-size:13px;color:#333;cursor:pointer;gap:7px;white-space:nowrap}
.lp-row:hover{background:#f5f5f5}
.lp-row input{margin:0;cursor:pointer;accent-color:#333}
.lp-badge{font-size:11px;margin-left:auto;color:#bbb}
.lp-divider{height:1px;background:#eee;margin:5px 0}
.lp-key{padding:5px 12px 2px}
.lp-key-lbl{font-size:10px;color:#888;display:block;margin-bottom:3px}
.lp-key-inp{width:100%;padding:4px 8px;font-size:12px;border:1px solid #ccc;border-radius:4px;outline:none;box-sizing:border-box}
.lp-key-inp:focus{border-color:#888}
/* Zoom display */
.leaflet-control-zoom-display a{font-weight:700;font-size:12px;text-align:center;cursor:default!important;color:#333!important;letter-spacing:-.5px}
.leaflet-control-zoom-display a:hover{background:#fff!important}
/* Einträge-Zähler */
.lc-vis,.lc-ohne{display:block;min-width:26px;width:auto;height:26px;line-height:26px;font-size:11px;font-weight:700;text-align:center;padding:0 4px;cursor:default!important;text-decoration:none}
.lc-vis{color:#333!important}
.lc-ohne{color:#aaa!important}
.lc-vis:hover,.lc-ohne:hover{background:#fff!important}
/* Popups */
.pop-title{font-weight:600;font-size:14px;margin-bottom:3px;line-height:1.3}
.pop-addr{font-size:12px;color:#666;margin-bottom:5px}
.pop-tel{font-size:12px;color:#666;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.pop-tags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px}
.pop-tag{font-size:11px;padding:2px 7px;border-radius:10px;background:#f0f0ec;color:#555}
.pop-wave{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;color:#fff}
.pop-hp{font-size:12px;color:#1a73e8;text-decoration:none}
.pop-hp:hover{text-decoration:underline}
/* Geo-Korrektur-Vorstufe: Toggle nur am Rechner (siehe Media-Query), auf dem
   Handy waere Draggen ohnehin unhandlich -- das Fehlen ist gleichzeitig ein
   leichter Schutz gegen versehentliches Verschieben. */
.pop-edit-row{display:flex;align-items:center;gap:6px;margin-top:2px;margin-bottom:2px;font-size:12px;color:#555}
@media(max-width:640px){.pop-edit-row{display:none}}
/* "Laufband"/Marching-Ants statt starrem Rahmen -- deutlicher erkennbar, dass
   der Pin gerade aktiv ziehbar ist. Kein position:relative noetig, Leaflets
   eigenes CSS setzt .leaflet-marker-icon schon auf position:absolute, das
   reicht als Containing-Block fuers ::after. */
/* Schwarz-gelb statt gelb-transparent: volle Deckung statt Durchsicht auf
   die Karte, liest sich sofort als Warnband/Absperrung. */
.geo-editing::after{
  content:'';position:absolute;inset:-5px;border-radius:10px;pointer-events:none;
  background-image:
    linear-gradient(90deg,#FFD700 50%,#000 50%),
    linear-gradient(90deg,#FFD700 50%,#000 50%),
    linear-gradient(0deg,#FFD700 50%,#000 50%),
    linear-gradient(0deg,#FFD700 50%,#000 50%);
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  background-size:10px 4px,10px 4px,4px 10px,4px 10px;
  background-position:0 0,0 100%,0 0,100% 0;
  animation:marching-ants .6s linear infinite;
}
@keyframes marching-ants{to{background-position:10px 0,-10px 100%,0 -10px,100% 10px}}
.app-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);background:#222;color:#fff;
  padding:8px 16px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .25s,transform .25s;z-index:9500;pointer-events:none}
.app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* km-Schild in der Mitte der Messband-Linie, angelehnt an ein
   Bundesstrassenschild (gelb, schwarzer Rand, abgerundete Ecken).
   translate(-50%,-50%) statt Leaflet-iconAnchor-Rechnerei, damit es sich
   bei wechselnder Textlaenge (z.B. "850 m" vs "12.3 km") immer selbst
   zentriert. display:inline-block ist Pflicht, nicht Kosmetik: ein
   Block-Div mit width:auto versucht die Breite des Eltern-Containers zu
   fuellen (hier 0px, da iconSize:[0,0]) statt sich am eigenen Inhalt zu
   orientieren -- daher schrumpfte die Box vorher auf Padding-Groesse
   zusammen, waehrend der Text (nowrap) drueber hinaus rendert. inline-block
   sized sich immer am eigenen Inhalt, unabhaengig vom Elternelement. */
.km-sign{
  display:inline-block;position:relative;left:0;top:0;transform:translate(-50%,-50%);
  background:#FFD700;border:2px solid #000;border-radius:6px;
  color:#000;font-weight:800;font-size:12px;padding:2px 7px;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.leaflet-popup-content-wrapper{border-radius:10px!important;box-shadow:0 3px 12px rgba(0,0,0,.18)!important;border:0}
.leaflet-popup-content{margin:12px 14px!important}
path.leaflet-interactive:focus{outline:none}
/* Bürger-Menu */
#bmenu-wrap{position:relative;flex-shrink:0}
#bmenu-btn{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;border-radius:6px;color:#333}
#bmenu-btn:hover{background:#f0f0ec}
#bmenu-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:4000;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.15);min-width:150px;padding:5px 0}
#bmenu-drop.open{display:block}
#bmenu-drop a{display:block;padding:8px 16px;font-size:13px;color:#333;text-decoration:none;font-weight:500;cursor:pointer}
#bmenu-drop a:hover{background:#f5f5f5}
/* About & JSON-View Modal */
.bm-overlay{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.45);align-items:center;justify-content:center}
.bm-overlay.open{display:flex}
.bm-modal{background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.25);width:600px;max-width:95vw;max-height:85vh;min-width:300px;min-height:200px;display:flex;flex-direction:column;overflow:auto;resize:both;position:relative}
.bm-resize-hint{position:absolute;bottom:4px;right:6px;font-size:12px;color:#ccc;pointer-events:none;line-height:1}
.bm-modal-head{padding:14px 18px 10px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.bm-modal-head h2{font-size:15px;font-weight:700}
.bm-modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#888;line-height:1}
.bm-modal-body{overflow:auto;padding:16px 18px;font-size:13px;line-height:1.6}
.bm-modal-body ul,.bm-modal-body ol{padding-left:1.6em;margin:4px 0 8px}
.bm-modal-body ul ul,.bm-modal-body ol ol,.bm-modal-body ul ol{margin:3px 0 4px;padding-left:1.4em}
.bm-modal-body li{margin-bottom:3px}
.bm-modal-body h2{font-size:14px;font-weight:700;margin:14px 0 5px}
.bm-modal-body h3{font-size:13px;font-weight:700;margin:10px 0 4px;color:#555}
.bm-modal-body p{margin-bottom:6px}
#jsonview-body{font-family:monospace;font-size:11px;white-space:pre;color:#333;background:#f8f8f6;padding:12px;border-radius:6px}
.json-lined{counter-reset:line;font-family:monospace;font-size:11px;white-space:pre;color:#333}
.json-lined span{display:block;counter-increment:line}
.json-lined span::before{content:counter(line);display:inline-block;width:36px;color:#bbb;text-align:right;padding-right:10px;margin-right:8px;border-right:1px solid #eee;user-select:none;pointer-events:none}
/* Tree-Sidebar (Overlay, edit.js P1) */
#tree-panel{position:absolute;top:0;left:0;bottom:0;width:300px;max-width:80%;z-index:1200;background:#fff;border-right:1px solid #ddd;box-shadow:2px 0 12px rgba(0,0,0,.12);display:flex;flex-direction:column}
.tree-resize{position:absolute;top:0;right:-4px;bottom:0;width:8px;cursor:col-resize;z-index:10}
.tree-resize:hover,.tree-resize.dragging{background:rgba(40,90,200,.15)}
#tree-panel[hidden]{display:none}
.tree-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #eee;font-weight:700;font-size:14px;flex-shrink:0}
.tree-title{white-space:nowrap}
.tree-modes{margin-left:auto;display:inline-flex;border:1px solid #ddd;border-radius:14px;overflow:hidden}
.tmode{border:none;background:#fff;color:#666;font-size:12px;font-weight:600;padding:3px 12px;cursor:pointer;font-family:inherit;line-height:1.6}
.tmode+.tmode{border-left:1px solid #eee}
.tmode.active{background:#333;color:#fff}
.tree-close{background:none;border:none;font-size:18px;cursor:pointer;color:#888;line-height:1}
.tree-close:hover{color:#333}
.tree-body{overflow:auto;padding:6px 4px 12px;flex:1}
.tree-body ul{list-style:none;margin:0;padding:0}
.tree-body ul ul{margin-left:14px}
.tnode{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;font-size:13px;cursor:pointer;white-space:nowrap;outline:none}
.tnode:hover{background:#f3f3ef}
.tnode:focus{box-shadow:0 0 0 2px rgba(40,90,200,.4)}
.tnode .caret{display:inline-block;width:12px;text-align:center;font-size:9px;color:#999;transition:transform .12s;flex-shrink:0}
li[aria-expanded=true]>.tnode .caret{transform:rotate(90deg)}
li[aria-expanded=false]>ul{display:none}
.tnode .tlabel{overflow:hidden;text-overflow:ellipsis}
.tnode .tcount{margin-left:auto;color:#aaa;font-size:11px;padding-left:8px;flex-shrink:0}
.tnode .tdot{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;flex-shrink:0}
.tbranch{font-weight:600}
.tleaf{color:#333;font-weight:400}
.tleaf.nocoord{opacity:.6}
li[aria-expanded=false]>.tdetail{display:none}
.tdetail{margin:1px 0 5px 34px;padding:6px 9px;background:#f6f6f2;border-radius:6px;font-size:12px;color:#444}
.tdrow{display:flex;gap:8px;padding:1px 0}
.tdk{color:#999;min-width:52px;flex-shrink:0}
.tdv{color:#333;word-break:break-word}
.tdlink{color:#1a73e8;text-decoration:none}
.tdlink:hover{text-decoration:underline}
.tdempty{color:#aaa}