/* ============ Waldkarte „Flokis Lichtwald" ============ */
body.view-lernkarte #planCol,body.view-lernkarte #flokiCol,body.view-lernkarte .import,body.view-lernkarte #focusBar,body.view-lernkarte #missionBar{display:none!important}
body.view-lernkarte .grid{grid-template-columns:1fr}
#lernkarteView{display:none;position:relative}
body.view-lernkarte #lernkarteView{display:block}
#mapWrap{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.map-head{display:flex;align-items:center;gap:14px;padding:16px 20px;flex-wrap:wrap}
.map-head h2{font-size:20px;color:var(--maroon)}
.map-head .map-sub{font-size:13px;color:var(--ink-2)}
.map-head #mapPct{margin-left:auto;font-size:22px;font-weight:800;color:var(--maroon)}
.map-legend{display:flex;gap:14px;padding:0 20px 12px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
#mapStage{position:relative;aspect-ratio:1200/800;max-height:74vh;width:100%}
#mapStage svg{display:block;width:100%;height:100%}
.map-failed #mapStage{display:none}
#mapFallback{display:none;padding:18px 20px 24px}
.map-failed #mapFallback{display:block}
#mapFallback .fbk-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px dashed var(--line)}
#mapFallback .fbk-row:first-of-type{border-top:none}
#mapFallback .fbk-bar{flex:1;height:8px;border-radius:4px;background:var(--bg-2);overflow:hidden}
#mapFallback .fbk-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a2336,#c99a3b)}
/* Hotspots */
.hs{position:absolute;width:12%;aspect-ratio:1;min-width:44px;min-height:44px;transform:translate(-50%,-62%);
  background:transparent;border:none;border-radius:50%;cursor:pointer;padding:0}
.hs:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:50%}
/* Stations-Zustände (Paint-Transitions) */
#scene .st-icon,#scene .st-halo,#scene .st-check,#scene .ff,#scene .flag,#scene .fxp{transform-box:fill-box;transform-origin:center}
#scene .st .st-icon{opacity:.78;transition:opacity .5s}
#scene .st.is-cur .st-icon,#scene .st.is-done .st-icon{opacity:1}
#scene .st .st-halo{opacity:0;transform:scale(.6);transition:opacity .6s,transform .6s}
#scene .st.is-cur .st-halo{opacity:.85;animation:haloPulse 2.8s ease-in-out infinite}
#scene .st.is-done .st-halo{opacity:.5;transform:scale(1)}
@keyframes haloPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
#scene .st .st-check{opacity:0;transition:opacity .4s}
#scene .st.is-done .st-check{opacity:1;animation:checkPop .5s var(--ease-pop)}
@keyframes checkPop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
#scene .st .glow-el{transition:fill .5s,stroke .5s}
#scene .st .chip-bg{stroke:none;transition:stroke .5s}
#scene .st.is-cur .chip-bg{stroke:#C99A3B;stroke-width:2}
#scene .st.is-done .chip-bg{stroke:#237a3f;stroke-width:2}
#scene .st .st-bloom3{opacity:0;transition:opacity .8s .3s}
#scene .st.is-done .st-bloom3{opacity:1}
#scene .st.bloom .st-icon{animation:stBloom .9s var(--ease-pop)}
@keyframes stBloom{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
#scene .wimpel{opacity:0;transition:opacity .6s}
#scene .st.is-done .wimpel{opacity:1}
/* Leucht-Pfad */
#trailLit,#trailLitGlow{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)}
/* Glühwürmchen */
#scene .ff{animation:ffDrift 5.5s ease-in-out infinite alternate}
#scene .ff.f2{animation-duration:7s}#scene .ff.f3{animation-duration:8.5s}
@keyframes ffDrift{0%{transform:translate(0,0)}100%{transform:translate(9px,-14px)}}
/* Floki */
#floki.walking #fkBob{animation:fkBob .6s ease-in-out infinite alternate}
@keyframes fkBob{from{transform:translateY(0)}to{transform:translateY(-2px)}}
/* Finale */
#scene .castle-win{transition:fill .8s}
#scene.all-done .castle-win{fill:#FFD966}
#scene #sunGlow{transition:opacity 1.2s}
#scene.all-done #sunGlow{opacity:.9}
#scene .flag{transform-origin:left center}
#scene.all-done .flag{animation:flagWave 1.2s ease-in-out 3}
@keyframes flagWave{0%,100%{transform:skewY(0)}50%{transform:skewY(-8deg)}}
#scene .fxp{animation:fxFly .7s ease-out forwards}
@keyframes fxFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
/* Stations-Zustandsfarben */
#scene text{font-family:var(--font)}
#scene .st.is-sleep .rune{stroke:#8A97A0}
#scene .st.is-cur .rune,#scene .st.is-done .rune{stroke:#FFD966}
#scene .st.is-sleep .ranke{stroke:#8FA97E}
#scene .st.is-cur .ranke,#scene .st.is-done .ranke{stroke:#6A9A4E}
#scene .st.is-sleep .kappe{fill:#AEB9C1}
#scene .st.is-cur .kappe,#scene .st.is-done .kappe{fill:#C99A3B}
#scene .st.is-sleep .glas{fill:#C6D98E;opacity:.5}
#scene .st.is-cur .glas,#scene .st.is-done .glas{fill:#FFD966;opacity:1}
#scene .st.is-sleep .laub{fill:#93A886}
#scene .st.is-cur .laub,#scene .st.is-done .laub{fill:#7AA85A}
/* Karten-Panel */
#mapPanel{position:absolute;top:70px;right:16px;width:290px;max-width:86%;z-index:4;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-float);
  padding:16px;transform:translateX(125%);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s;pointer-events:auto}
#mapPanel.open{transform:none;opacity:1}
#mapPanel .mp-close{position:absolute;top:7px;right:11px;cursor:pointer;border:none;background:none;font-size:19px;line-height:1;color:var(--ink-2);padding:6px;font-family:inherit}
#mapPanel .mp-close:hover{color:var(--ink)}
#mapPanel .mp-eyebrow{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold-ink)}
#mapPanel h3{font-size:17px;color:var(--maroon);margin:3px 0 4px;line-height:1.2;outline:none}
#mapPanel .mp-sub{font-size:12.5px;color:var(--ink-2);margin-bottom:13px;line-height:1.5}
#mapPanel .mp-bar{height:8px;border-radius:99px;background:var(--gold-soft);overflow:hidden;margin-bottom:6px}
#mapPanel .mp-fill{height:100%;border-radius:99px;background:var(--maroon);transition:width .6s ease}
#mapPanel .mp-pct{font-size:12px;color:var(--ink-2);margin-bottom:14px}
#mapPanel .mp-cta{width:100%;border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;
  background:var(--green-ink);padding:12px;border-radius:10px;transition:background var(--t-fast);min-height:44px}
#mapPanel .mp-cta:hover{background:var(--green)}
@media(max-width:640px){
  #mapStage{aspect-ratio:800/700}
  #mapPanel{position:fixed;left:10px;right:10px;top:auto;bottom:96px;width:auto;max-width:none;transform:translateY(140%)}
  #mapPanel.open{transform:none}
}