/* =========================================================
   WETTER-KLIMAFENSTER  (Leistungen · Energiebaum)
   Additiv – alle Klassen mit .lab-/.wx- Prefix.
   Steuerung über data-season + data-w auf .lab-frame.
   ========================================================= */

/* ---- Bedienleisten ---- */
.lab-controls { display:flex; flex-direction:column; gap:10px; margin:0 0 18px; }
.lab-seasons, .lab-weather { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.lab-weather { min-height:38px; }
.lab-tab, .lab-chip {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:inherit; border:1px solid var(--line); background:var(--white);
  color:var(--gray-600); transition:var(--ease); white-space:nowrap;
}
.lab-tab  { padding:9px 16px; border-radius:999px; font-size:.92rem; font-weight:600; }
.lab-chip { padding:7px 13px; border-radius:999px; font-size:.84rem; }
.lab-tab:hover, .lab-chip:hover { border-color:var(--green-500); color:var(--green-700); }
.lab-tab[aria-selected="true"]  { border-color:var(--green-500); background:var(--green-50); color:var(--green-700); }
.lab-chip[aria-pressed="true"]  { border-color:var(--green-600); background:var(--green-600); color:#fff; }

/* ---- Glas-Schaukasten (= die alte .tree-photo) ---- */
.lab-frame .tree-photo {
  position:relative; aspect-ratio:1/1; width:100%; max-width:540px; margin:0 auto;
  border-radius:16px; overflow:visible;
  border:1px solid var(--line);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.7);
  background:transparent;
}
.lab-frame .tree-photo > picture { position:relative; z-index:1; display:block; }
.lab-frame .tree-photo img { display:block; width:100%; height:auto; border-radius:0; }
.lab-frame .apple-spot { z-index:4; }
.lab-frame .apple-pop  { z-index:6; }

/* Glas-Reflexion über allem (klick-durchlässig) */
.lab-glare {
  position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:16px;
  background:linear-gradient(115deg, rgba(255,255,255,.18) 0 13%, transparent 20% 30%, rgba(255,255,255,.08) 34% 40%, transparent 46%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 52px rgba(16,40,28,.10);
}

/* ---- Ebenen hinter / vor dem Baum ---- */
.wx-back, .wx-front { position:absolute; inset:0; border-radius:16px; overflow:hidden; pointer-events:none; }
.wx-back  { z-index:0; }
.wx-front { z-index:2; }
.wx-back > *, .wx-front > * { position:absolute; inset:0; }

/* ===== HIMMEL ===== */
.wx-sky { transition:background 1.1s ease; background:#eaf3ec; }
.lab-frame[data-w="sonne"]       .wx-sky { background:radial-gradient(130% 95% at 50% -12%,#fff4cf 0%,#e7f3fb 52%,#eef6ee 100%); }
.lab-frame[data-w="hitze"]       .wx-sky { background:radial-gradient(130% 95% at 50% -10%,#ffe7a8 0%,#ffd9b0 40%,#f3ead2 100%); }
.lab-frame[data-w="mild"]        .wx-sky { background:radial-gradient(130% 95% at 50% -8%,#fdf3d6 0%,#e9f5ef 58%,#eef7ef 100%); }
.lab-frame[data-w="golden"]      .wx-sky { background:radial-gradient(130% 95% at 50% -8%,#ffeebf 0%,#f6e3c2 52%,#eef0e2 100%); }
.lab-frame[data-w="wolken"]      .wx-sky { background:linear-gradient(#cfd8de,#e6ebee); }
.lab-frame[data-w="schauer"]     .wx-sky { background:linear-gradient(#bcc7cf,#dbe2e6); }
.lab-frame[data-w="regen"]       .wx-sky { background:linear-gradient(#9fabb3,#bcc4ca); }
.lab-frame[data-w="gewitter"]    .wx-sky { background:linear-gradient(#414c57,#79858d); }
.lab-frame[data-w="wind"]        .wx-sky { background:linear-gradient(#c4d0d3,#e3e9ea); }
.lab-frame[data-w="nebel"]       .wx-sky { background:linear-gradient(#d6dbde,#e9edee); }
.lab-frame[data-w="schnee"]      .wx-sky { background:linear-gradient(#d7e6f1,#eef5fb); }
.lab-frame[data-w="schneesturm"] .wx-sky { background:linear-gradient(#aab8c4,#cfd9e1); }
.lab-frame[data-w="frost"]       .wx-sky { background:radial-gradient(130% 95% at 50% -8%,#eaf4fb 0%,#dbe9f3 60%,#e9f2f8 100%); }
.lab-frame[data-w="nacht"]       .wx-sky { background:linear-gradient(#142136,#26395a); }

/* ===== BODEN (Erdreich unter dem Horizont) ===== */
.wx-ground { top:62%; background:linear-gradient(#ece5d8,#e2d8c5); transition:filter 1s; }
.lab-frame[data-season="winter"] .wx-ground { background:linear-gradient(#eef2f6,#dde6ee); }
.lab-frame[data-season="herbst"] .wx-ground { background:linear-gradient(#ecdfca,#ddccac); }
.lab-frame[data-w="nacht"] .wx-ground { filter:brightness(.45) saturate(.7); }
.lab-frame[data-w="regen"] .wx-ground, .lab-frame[data-w="gewitter"] .wx-ground { filter:brightness(.82); }

/* ===== WOLKEN (hinter dem Baum) ===== */
.wx-clouds { inset:0; }
.wx-cloud {
  position:absolute; width:24%; height:9%; color:#fff; background:currentColor; border-radius:60px;
  box-shadow:8% 22% 0 -1.2% currentColor, -7% 26% 0 -1.8% currentColor, 2% -30% 0 -1% currentColor;
  opacity:0; transition:opacity 1s, color 1s; animation:wxDrift linear infinite; left:-30%;
}
.lab-frame[data-w="sonne"] .wx-cloud{opacity:.18;color:#fff}
.lab-frame[data-w="mild"] .wx-cloud{opacity:.28;color:#fff}
.lab-frame[data-w="golden"] .wx-cloud{opacity:.22;color:#fbf3e2}
.lab-frame[data-w="wolken"] .wx-cloud{opacity:.95;color:#f3f5f7}
.lab-frame[data-w="schauer"] .wx-cloud{opacity:.9;color:#c9d2d8}
.lab-frame[data-w="regen"] .wx-cloud{opacity:.95;color:#9aa6ad}
.lab-frame[data-w="gewitter"] .wx-cloud{opacity:1;color:#566069}
.lab-frame[data-w="wind"] .wx-cloud{opacity:.9;color:#c9d2d8}
.lab-frame[data-w="nebel"] .wx-cloud{opacity:.5;color:#e3e7ea}
.lab-frame[data-w="schnee"] .wx-cloud{opacity:.7;color:#e9eef4}
.lab-frame[data-w="schneesturm"] .wx-cloud{opacity:.92;color:#b8c2c9}
.lab-frame[data-w="frost"] .wx-cloud{opacity:.12;color:#eef5fb}
.lab-frame[data-w="nacht"] .wx-cloud{opacity:.4;color:#2e405b}
.lab-frame[data-w="gewitter"] .wx-cloud,.lab-frame[data-w="wind"] .wx-cloud,.lab-frame[data-w="schneesturm"] .wx-cloud{animation-duration:16s !important}

/* ===== BLITZE (hinter dem Baum) ===== */
.wx-bolts { filter:drop-shadow(0 0 8px rgba(150,190,255,.95)); }
.wx-bolts svg { position:absolute; inset:0; width:100%; height:100%; }
.wx-bolt { opacity:0; }
.wx-bolt .g { fill:none; stroke:#bcd2ff; stroke-width:9; stroke-linejoin:round; stroke-linecap:round; }
.wx-bolt .c { fill:none; stroke:#fff;     stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.lab-frame[data-w="gewitter"] .wx-b1 { animation:wxBolt 4.8s linear infinite; }
.lab-frame[data-w="gewitter"] .wx-b2 { animation:wxBolt 4.8s linear infinite; animation-delay:2.3s; }
.lab-frame[data-w="gewitter"] .wx-b3 { animation:wxBolt 6.1s linear infinite; animation-delay:1.1s; }

/* ===== STERNE (Nacht) ===== */
.wx-stars { opacity:0; transition:opacity 1.2s; }
.lab-frame[data-w="nacht"] .wx-stars { opacity:1; }
.wx-star { position:absolute; background:#fff; border-radius:50%; box-shadow:0 0 4px rgba(255,255,255,.6); animation:wxTwinkle ease-in-out infinite; }

/* ===== STIMMUNGS-WASH / NACHT-VERDUNKLUNG (vor dem Baum) ===== */
.wx-wash { opacity:0; transition:opacity 1s, background 1s; }
.lab-frame[data-w="regen"] .wx-wash{opacity:1;background:rgba(70,84,96,.14)}
.lab-frame[data-w="gewitter"] .wx-wash{opacity:1;background:rgba(40,52,64,.26)}
.lab-frame[data-w="schauer"] .wx-wash{opacity:1;background:rgba(110,124,134,.10)}
.lab-frame[data-w="wolken"] .wx-wash{opacity:1;background:rgba(120,132,142,.08)}
.lab-frame[data-w="nebel"] .wx-wash{opacity:1;background:rgba(220,224,228,.18)}
.lab-frame[data-w="schnee"] .wx-wash{opacity:1;background:rgba(170,195,225,.14)}
.lab-frame[data-w="schneesturm"] .wx-wash{opacity:1;background:rgba(150,170,190,.14)}
.lab-frame[data-w="frost"] .wx-wash{opacity:1;background:rgba(150,185,225,.18)}
.lab-frame[data-w="golden"] .wx-wash{opacity:1;background:rgba(220,150,40,.07)}
.lab-frame[data-w="nacht"] .wx-wash{opacity:1;background:linear-gradient(rgba(12,24,48,.6),rgba(12,24,48,.5))}

/* Sonnen-Dimmer: deckt die gemalte Sonne bei trübem Wetter zu */
.wx-suncover { bottom:auto; height:34%; opacity:0; transition:opacity 1s, background 1s;
  background:linear-gradient(#cfd8de,rgba(207,216,222,0)); }
.lab-frame[data-w="wolken"] .wx-suncover{opacity:.95}
.lab-frame[data-w="schauer"] .wx-suncover{opacity:.92;background:linear-gradient(#c2cdd4,rgba(194,205,212,0))}
.lab-frame[data-w="regen"] .wx-suncover{opacity:.96;background:linear-gradient(#9aa6ad,rgba(154,166,173,0))}
.lab-frame[data-w="gewitter"] .wx-suncover{opacity:1;background:linear-gradient(#5a646d,rgba(90,100,109,0))}
.lab-frame[data-w="wind"] .wx-suncover{opacity:.85;background:linear-gradient(#c4d0d3,rgba(196,208,211,0))}
.lab-frame[data-w="nebel"] .wx-suncover{opacity:.95;background:linear-gradient(#dde2e4,rgba(221,226,228,0))}
.lab-frame[data-w="schnee"] .wx-suncover{opacity:.7;background:linear-gradient(#e3ebf2,rgba(227,235,242,0))}
.lab-frame[data-w="schneesturm"] .wx-suncover{opacity:.92;background:linear-gradient(#c2ccd4,rgba(194,204,212,0))}

/* ===== GLÜHEN: PV-Krone / Erdkollektor / Wärmepumpe ===== */
.wx-glow { mix-blend-mode:screen; opacity:0; transition:opacity 1s; }
.wx-pvglow   { background:radial-gradient(38% 22% at 45% 22%, rgba(255,243,200,.95), rgba(255,243,200,0) 70%); }
.wx-coilglow { mix-blend-mode:normal; background:radial-gradient(16% 13% at 46% 82%, rgba(224,162,58,.8), rgba(224,162,58,0) 70%); }
.wx-hpglow   { left:62.5%; top:52.5%; width:14%; height:14%; right:auto; bottom:auto; border-radius:50%;
  mix-blend-mode:normal; transform-origin:center;
  background:radial-gradient(circle, rgba(244,150,42,.62) 0%, rgba(244,150,42,.34) 42%, rgba(244,150,42,0) 70%); }
.lab-frame[data-w="sonne"] .wx-pvglow{opacity:.95}
.lab-frame[data-w="hitze"] .wx-pvglow{opacity:1}
.lab-frame[data-w="mild"] .wx-pvglow{opacity:.8}
.lab-frame[data-w="golden"] .wx-pvglow{opacity:.8}
.lab-frame[data-w="wind"] .wx-pvglow{opacity:.4}
.lab-frame[data-w="wolken"] .wx-pvglow{opacity:.35}
.lab-frame[data-w="frost"] .wx-pvglow{opacity:.3}
.lab-frame[data-w="schauer"] .wx-pvglow{opacity:.2}
.lab-frame[data-w="nebel"] .wx-pvglow{opacity:.18}
.lab-frame:not([data-w="sonne"]):not([data-w="mild"]):not([data-w="hitze"]):not([data-w="golden"]) .wx-coilglow {
  opacity:1; animation:wxPulse 2.6s ease-in-out infinite;
}
.lab-frame:not([data-w="sonne"]):not([data-w="mild"]):not([data-w="hitze"]):not([data-w="golden"]) .wx-hpglow {
  opacity:1; animation:wxHpPulse 2.4s ease-in-out infinite;
}

/* Wärme-Effekt der Luft-Wasser-Wärmepumpe: warme Schwaden steigen über dem Gerät auf */
.wx-hpheat { left:60%; top:28%; width:20%; height:22%; right:auto; bottom:auto; opacity:0; transition:opacity .8s; }
.wx-hpheat span { position:absolute; bottom:6%; width:38%; aspect-ratio:1/1; border-radius:50%; transform:translate(-50%,0);
  background:radial-gradient(circle, rgba(244,162,60,.82) 0%, rgba(244,162,60,0) 64%); }
.wx-hpheat span:nth-child(1){ left:36%; }
.wx-hpheat span:nth-child(2){ left:54%; animation-delay:-.86s; }
.wx-hpheat span:nth-child(3){ left:72%; animation-delay:-1.7s; }
.lab-frame:not([data-w="sonne"]):not([data-w="mild"]):not([data-w="hitze"]):not([data-w="golden"]) .wx-hpheat { opacity:1; }
.lab-frame:not([data-w="sonne"]):not([data-w="mild"]):not([data-w="hitze"]):not([data-w="golden"]) .wx-hpheat span { animation:wxHeatRise 2.6s ease-out infinite; }

/* Sonne bei Nacht vollständig abdecken (Baum = Haus, nachts keine Sonne) */
.wx-sunhide { opacity:0; transition:opacity 1.2s;
  background:radial-gradient(12% 13% at 45.5% 9.5%, #16243b 0%, #17263e 58%, rgba(23,38,62,0) 100%); }
.lab-frame[data-w="nacht"] .wx-sunhide { opacity:1; }

@keyframes wxHpPulse  { 0%,100%{ transform:scale(.9);  opacity:.5; } 50%{ transform:scale(1.06); opacity:.95; } }
@keyframes wxHeatRise { 0%{ opacity:0; transform:translate(-50%,40%) scale(.5); } 18%{ opacity:1; } 60%{ opacity:.7; } 100%{ opacity:0; transform:translate(-50%,-185%) scale(1.3); } }

/* ===== NEBEL ===== */
.wx-fog { opacity:0; transition:opacity 1.2s; background:linear-gradient(rgba(244,247,249,.42),rgba(244,247,249,.26)); }
.wx-fog::after { content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,rgba(255,255,255,.4) 70px,transparent 140px);
  background-size:280px 100%; animation:wxFog 30s linear infinite; }
.lab-frame[data-w="nebel"] .wx-fog { opacity:1; }

/* ===== HITZEFLIMMERN ===== */
.wx-shimmer { opacity:0; transition:opacity 1s; background:linear-gradient(to top,rgba(255,205,120,.20),transparent 42%); }
.lab-frame[data-w="hitze"] .wx-shimmer { opacity:1; animation:wxShimmer 3.6s ease-in-out infinite; }

/* ===== NIEDERSCHLAG ===== */
.wx-precip { inset:0; }
.wx-drop  { position:absolute; top:-8%; width:2px; border-radius:1px; background:linear-gradient(rgba(170,200,225,0),rgba(150,180,205,.85)); animation:wxFall linear infinite; }
.wx-flake { position:absolute; top:-6%; background:#fff; border-radius:50%; animation:wxSnow linear infinite; }
.wx-leaf  { position:absolute; top:-7%; width:11px; height:11px; background:#d98a3a; border-radius:60% 60% 60% 2px; animation:wxLeaf linear infinite; }
.wx-petal { position:absolute; top:-6%; width:9px; height:9px; background:#f3b6c8; border-radius:60% 60% 60% 2px; opacity:.9; animation:wxPetal linear infinite; }

/* ===== MOND (Nacht) ===== */
.wx-moon { left:auto; right:13%; top:8%; bottom:auto; width:15%; aspect-ratio:1/1;
  filter:drop-shadow(0 0 12px rgba(220,230,250,.55));
  opacity:0; transition:opacity 1.1s; }
.wx-moon svg { width:100%; height:100%; display:block; }
.lab-frame[data-w="nacht"] .wx-moon { opacity:1; }

/* ===== BLITZ-AUFHELLUNG ===== */
.wx-flash { background:#eaf1ff; opacity:0; }
.lab-frame[data-w="gewitter"] .wx-flash { animation:wxFlash 4.8s linear infinite; }

/* ===== JAHRESZEITEN-DEKO ===== */
/* Schnee auf der Modulkrone */
.wx-snowcap { top:9%; height:13%; left:15%; right:21%; bottom:auto; opacity:0; transition:opacity 1s;
  background:radial-gradient(62% 100% at 50% 100%, rgba(255,255,255,.96), rgba(255,255,255,0) 72%); }
.lab-frame[data-season="winter"] .wx-snowcap { opacity:1; }

/* Schnee-Ansammlung am Boden */
.wx-snowground { top:auto; bottom:0; left:0; right:0; height:18%;
  background:radial-gradient(130% 150% at 50% 122%, #ffffff 0%, #ffffff 46%, rgba(255,255,255,0) 78%);
  opacity:0; transition:opacity 1s; }
.lab-frame[data-w="schnee"] .wx-snowground,
.lab-frame[data-w="schneesturm"] .wx-snowground { opacity:.97; }

/* Frost: vereiste Scheibe + Eiskristalle */
.wx-frost { opacity:0; transition:opacity 1.2s;
  background:
    radial-gradient(44% 40% at 0% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
    radial-gradient(44% 40% at 100% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
    radial-gradient(50% 44% at 0% 100%, rgba(226,240,251,.74), rgba(226,240,251,0) 74%),
    radial-gradient(50% 44% at 100% 100%, rgba(226,240,251,.74), rgba(226,240,251,0) 74%),
    linear-gradient(rgba(214,234,248,.10), rgba(214,234,248,.10)); }
.lab-frame[data-w="frost"] .wx-frost { opacity:1; }
.wx-crystal { position:absolute; width:7px; height:7px; background:#fff; transform:rotate(45deg);
  box-shadow:0 0 5px rgba(255,255,255,.95); animation:wxTwinkle ease-in-out infinite; }

/* ===== SPEICHER / BATTERIE (nur Nacht) ===== */
.wx-battery { left:5%; top:56%; width:24%; height:15%; right:auto; bottom:auto;
  opacity:0; transition:opacity 1s, filter 1s; }
.wx-battery svg { width:100%; height:100%; overflow:visible; }
/* Speicher sichtbar, wann immer er beiträgt: nachts voll, im Sturm dezenter */
.lab-frame[data-w="nacht"] .wx-battery { opacity:1; animation:wxBatPulse 2.8s ease-in-out infinite; }
.lab-frame[data-w="gewitter"] .wx-battery,
.lab-frame[data-w="schneesturm"] .wx-battery { opacity:.72; animation:wxBatPulse 3.2s ease-in-out infinite; }
.lab-frame[data-w="nacht"] .wx-bat-arrow,
.lab-frame[data-w="gewitter"] .wx-bat-arrow,
.lab-frame[data-w="schneesturm"] .wx-bat-arrow { animation:wxBatFlow 1.6s ease-in-out infinite; }

/* Keine Wärmebewegung am Erdkollektor, wenn die WP praktisch aus ist (PV-Wetter) */
.lab-frame[data-w="sonne"] .heat-spot .heat-wisp,
.lab-frame[data-w="mild"] .heat-spot .heat-wisp,
.lab-frame[data-w="hitze"] .heat-spot .heat-wisp,
.lab-frame[data-w="golden"] .heat-spot .heat-wisp { animation:none; opacity:0; }
@keyframes wxBatPulse { 0%,100%{ filter:drop-shadow(0 0 7px rgba(80,210,140,.55)); } 50%{ filter:drop-shadow(0 0 15px rgba(80,210,140,.95)); } }
@keyframes wxBatFlow  { 0%{ opacity:.3; transform:translateX(-2px); } 50%{ opacity:1; } 100%{ opacity:.25; transform:translateX(5px); } }
.lab-bar.bat b { background:#2f86c9; }
.lab-frame[data-w="nacht"] .lab-meter--bat .lab-meter-l { color:var(--green-700); font-weight:600; }
.lab-frame[data-w="nacht"] .lab-meter--bat .lab-bar.bat b { box-shadow:0 0 8px rgba(47,134,201,.7); }
/* Blüten (Frühling) – JS füllt Punkte */
.wx-blossom { opacity:0; transition:opacity 1s; }
.lab-frame[data-season="fruehling"] .wx-blossom { opacity:1; }
.wx-blossom span { position:absolute; width:9px; height:9px; border-radius:50%; background:#f6c6d6; box-shadow:0 0 0 2px rgba(255,255,255,.5); }

/* Fallobst (Herbst) – liegt am Boden unter dem (jetzt leeren) linken Apfel */
.wx-fallapple { left:22%; top:58%; right:auto; bottom:auto; width:12%; height:12%; opacity:0; transform-origin:50% 100%; }
.wx-fallapple svg { width:100%; height:100%; overflow:visible; }
.lab-frame[data-season="herbst"] .wx-fallapple { animation:wxThud .8s cubic-bezier(.3,1.4,.5,1) both; }

/* Klickpunkt + Popup für den linken Apfel wandern im Herbst zum Fallobst */
.lab-frame[data-season="herbst"] .apple-spot[data-key="a1"],
.lab-frame[data-season="herbst"] .apple-pop[data-for="a1"] { --x:28% !important; --y:65% !important; }

/* ---- Messwerte / Bildunterschrift ---- */
.lab-readout { display:flex; gap:16px; flex-wrap:wrap; max-width:540px; margin:18px auto 0; }
.lab-meter { flex:1; min-width:150px; }
.lab-meter-l { display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem; color:var(--gray-600); margin-bottom:5px; }
.lab-meter-l b { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.lab-bar { height:7px; border-radius:999px; background:var(--green-50); overflow:hidden; }
.lab-bar b { display:block; height:100%; width:0; border-radius:999px; transition:width .7s ease; }
.lab-bar.pv b { background:var(--green-600); }
.lab-bar.wp b { background:var(--amber); }
.lab-cap { text-align:center; max-width:540px; margin:12px auto 0; font-size:.92rem; color:var(--gray-600); min-height:1.4em; }

/* ===== Keyframes ===== */
@keyframes wxDrift   { from{transform:translateX(0)} to{transform:translateX(560%)} }
@keyframes wxFall    { to{transform:translateY(640%)} }
@keyframes wxSnow    { to{transform:translate(var(--sx,0px),560%)} }
@keyframes wxLeaf    { to{transform:translate(var(--sx,40px),560%) rotate(320deg)} }
@keyframes wxPetal   { to{transform:translate(var(--sx,-30px),560%) rotate(200deg)} }
@keyframes wxTwinkle { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes wxFog     { to{background-position:280px 0} }
@keyframes wxShimmer { 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(-6px);opacity:1} }
@keyframes wxPulse   { 0%,100%{opacity:.4} 50%{opacity:.9} }
@keyframes wxBolt    { 0%,100%{opacity:0} 1%{opacity:1} 3%{opacity:.25} 5%{opacity:.95} 8%{opacity:0} }
@keyframes wxFlash   { 0%,100%{opacity:0} 1%{opacity:.8} 3%{opacity:.22} 5%{opacity:.55} 8%{opacity:0} }
@keyframes wxThud    { 0%{transform:translateY(-220%);opacity:0} 55%{opacity:1} 70%{transform:translateY(0) scaleY(.86) scaleX(1.12)} 85%{transform:translateY(-12%) scaleY(1)} 100%{transform:translateY(0);opacity:1} }

@media (max-width: 600px) {
  .lab-frame .tree-photo { max-width:380px; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-cloud,.wx-drop,.wx-flake,.wx-leaf,.wx-petal,.wx-star,.wx-bolt,.wx-flash,
  .wx-fog::after,.wx-shimmer,.wx-coilglow,.wx-hpglow,.wx-fallapple,.wx-crystal,
  .wx-battery,.wx-bat-arrow,.wx-hpheat span { animation:none !important; }
  .lab-frame[data-w="nacht"] .wx-battery { opacity:1; }
  .lab-frame[data-season="herbst"] .wx-fallapple { opacity:1; }
}