/* lc-season.css · Saison-Schicht Weihnachten 2026 (LER-186, Welt W1 Tannenwald, Adventsfenster)
   Gebaut am 2026-10-28 aus Massnahmen/Navbar-Weihnachten/skins/ (Engine aus Navbar-Halloween/skins/)
   per tools/build_theme.py. Nicht von Hand ändern: Skins anpassen und neu bauen. Zeitfenster 2026-11-02
   bis 2027-01-07 (exklusiv) Europe/Zurich; Schalter im Browser (hw-base.js), ?hw=1 an, ?hw=0 aus. */

/* ===== hw-base.css ===== */
/* ==========================================================================
   Halloween-Navbar · gemeinsame Basis aller Varianten (Prototyp 29.09.2026)

   Alles hängt an html.lc-hw-on. Ohne die Klasse bleibt die Live-Navbar
   unverändert: Der Ausschalter ist eine einzige Klasse. In Produktion setzt
   ein Datumscheck im <head> die Klasse (siehe BRIEF.md, Abschnitt Technik).

   Farben: nur Werte aus Brandkit-2026/tokens.css (Kommentar = Token).
   Kürbis = --lc-attention-500/-700, Licht = --lc-cta-100/-300/-500,
   Nacht = --lc-primary-900 gemischt mit --lc-ink. Kein neuer Hex-Wert.
   Motion: nur transform/opacity, Reduced-Motion-Guard doppelt (CSS hier,
   JS-Flag in hw-base.js), gemäss Motion-System (ds/motion.html).
   ========================================================================== */
html.lc-hw-on {
  --hw-pumpkin: #f76a0c;      /* --lc-attention-500 */
  --hw-pumpkin-lo: #d4570a;   /* --lc-attention-700 */
  --hw-pumpkin-hi: color-mix(in srgb, #f76a0c 55%, #ffba40);
  --hw-glow: #fff1d6;         /* --lc-cta-100 */
  --hw-glow-2: #ffd587;       /* --lc-cta-300 */
  --hw-gold: #ffba40;         /* --lc-cta-500 */
  --hw-ink: #111827;          /* --lc-ink */
  --hw-gray: #374151;         /* --lc-gray-700 */
  --hw-line: #d1d5db;         /* --lc-gray-300 */
  --hw-paper: #fdfbf6;        /* --lc-warm-50 */
  --hw-teal: #22bcad;         /* --lc-primary-600 (Logo) */
  --hw-teal-2: #8fe3da;       /* --lc-primary-300 */
  --hw-teal-lo: #167f76;      /* --lc-primary-800 */
  --hw-teal-900: #12655e;     /* --lc-primary-900 */
  --hw-shadow: 0 4px 16px rgba(17, 24, 39, .10);   /* --lc-shadow-md */
  --hw-ease-out: cubic-bezier(.16, 1, .3, 1);      /* --lc-ease-out */
  --hw-ease-spring: cubic-bezier(.2, .9, .3, 1.2); /* --lc-ease-spring */
}

/* Ebenen: Logo, Menü und CTA liegen über der hinteren Deko-Ebene.
   Unter 1400 px ist .offcanvas fixed (Bootstrap), dort nicht anfassen. */
html.lc-hw-on #nav-main > .navbar-brand,
html.lc-hw-on #nav-main > .flex-row { position: relative; z-index: 2; }
/* Ab 1400 px liegt das Menü (Offcanvas inline, transparent) über ALLEN Deko-Ebenen,
   auch über der Drop-Ebene (9999): Aufgeklappte Untermenüs decken die Deko ab
   (Kurator 15.10.2026, belegt am Untermenü «Gymivorbereitung»). Die Deko bleibt
   durch das transparente Offcanvas sichtbar, nur Menütext und Panels liegen davor. */
@media (min-width: 1400px) {
  html.lc-hw-on #nav-main > .offcanvas { position: relative; z-index: 10000; }
}

.lc-hw-bg, .lc-hw-fg, .lc-hw-oc { display: none; }
html.lc-hw-on .lc-hw-bg,
html.lc-hw-on .lc-hw-fg {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
html.lc-hw-on .lc-hw-bg { z-index: 1; overflow: hidden; }
html.lc-hw-on .lc-hw-fg { z-index: 3; }

/* Geöffnetes Menü (Offcanvas, unter 1400 px) bekommt eine eigene Ebene */
@media (max-width: 1399.98px) {
  html.lc-hw-on .lc-hw-oc {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }
}

html.lc-hw-on .lc-hw-bg svg,
html.lc-hw-on .lc-hw-fg svg,
html.lc-hw-on .lc-hw-oc svg { display: block; overflow: visible; }

/* Bewegung: Systemeinstellung und Prototyp-Schalter «Bewegung aus».
   JS-Seite: hw-base.js setzt html.lc-hw-still bei reduced-motion. */
/* Alle fünf Ebenen (bg, fg, drop, oc, ocbg). Staging-Test 15.10.2026: 15 Abläufe
   liefen unter Reduced Motion weiter, weil die Drop-Ebene hier fehlte. */
@media (prefers-reduced-motion: reduce) {
  html.lc-hw-on :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg),
  html.lc-hw-on :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg) *,
  html.lc-hw-on :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg) *::before,
  html.lc-hw-on :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg) *::after {
    animation: none !important;
    transition: none !important;
  }
}
html.lc-hw-still :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg),
html.lc-hw-still :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg) *,
html.lc-hw-still :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg) *::before,
html.lc-hw-still :is(.lc-hw-bg, .lc-hw-fg, .lc-hw-drop, .lc-hw-oc, .lc-hw-ocbg) *::after {
  animation: none !important;
  transition: none !important;
}

/* ===== hw-scene.css ===== */
/* ==========================================================================
   Halloween-Navbar Runde 2 · Ebenen und gemeinsame Bewegungen (29.09.2026)
   Nur transform und opacity. Reduced-Motion-Guard aus hw-base.css greift
   auch hier (alle Ebenen liegen unter .lc-hw-*).
   ========================================================================== */
/* vertikal über die Seite ragen, horizontal nie über die Seitenbreite
   (gemessen: driftendes Laub machte den 360-px-Viewport 362 px breit) */
html.lc-hw-on .hw-scene-fg { overflow: visible; overflow-x: clip; }
/* Hintere Ebene ebenfalls offen nach unten: ein Eck-Netz läuft als ein Stück
   von der Leiste über die Seite weiter (Runde 3) */
html.lc-hw-on .hw-scene-bg { overflow: visible; overflow-x: clip; }

.lc-hw-drop, .lc-hw-ocbg { display: none; }
/* Unter der Leiste: ragt über die Seite. Innerhalb des fixen Headers (ab
   768 px) liegt das ohnehin über dem Inhalt, mobil im Wurzel-Stapel. */
html.lc-hw-on .lc-hw-drop {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
  z-index: 9999;
  pointer-events: none;
  overflow-x: clip;
  overflow-y: visible;
}
/* Mobil liegt die Ebene im Wurzel-Stapel und damit über dem offenen Menü:
   solange das Menü offen ist, ausblenden */
html.lc-hw-on #nav-main:has(.offcanvas.show) .lc-hw-drop,
html.lc-hw-on #nav-main:has(.offcanvas.showing) .lc-hw-drop { visibility: hidden; }

@media (max-width: 1399.98px) {
  html.lc-hw-on .lc-hw-ocbg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  html.lc-hw-on #offcanvas-navbar > .offcanvas-header,
  /* über .lc-hw-oc (3): Untermenüs im offenen Menü decken die Deko ab (Kurator 15.10.2026) */
  html.lc-hw-on #offcanvas-navbar > .offcanvas-body { position: relative; z-index: 4; }
  html.lc-hw-on .hw-scene-ocfg { overflow: hidden; }
}

html.lc-hw-on .hw-it { position: absolute; display: block; line-height: 0; }
html.lc-hw-on .hw-it > svg,
html.lc-hw-on .hw-it .hw-sw > svg { width: 100%; height: auto; }
html.lc-hw-on .hw-flipx > svg { transform: scaleX(-1); }
html.lc-hw-on .hw-flipy > svg { transform: scaleY(-1); }
html.lc-hw-on .hw-flipxy > svg { transform: scale(-1, -1); }
html.lc-hw-on .hw-webc { color: #9ca3af; opacity: .75; }                 /* --lc-gray-400 */

/* Faden-Figuren: aussen klettern (Schrumpfen), innen pendeln */
html.lc-hw-on .hw-hang { transition: transform .5s var(--hw-ease-out); }
html.lc-hw-on .hw-sw {
  position: relative;
  display: block;
  transform-origin: 50% calc(var(--len, 40px) * -1);
  animation: hw-sway calc(3.6s + var(--i) * .23s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.8s);
}
html.lc-hw-on .hw-sw::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 68%;
  width: 1px;
  height: calc(var(--len, 40px) + 12px);
  margin-left: -.5px;
  background: rgba(17, 24, 39, .45);
}
html.lc-hw-on .hw-sw--light::before { background: rgba(255, 255, 255, .5); }

html.lc-hw-on .hw-sway { transform-origin: 50% 0; animation: hw-sway calc(3.4s + var(--i) * .19s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }
@keyframes hw-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

html.lc-hw-on .hw-bob { animation: hw-bob calc(2.8s + var(--i) * .17s) ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes hw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

html.lc-hw-on .hw-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hw-flame 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(255, 186, 64, .9));
}
@keyframes hw-flame {
  0%, 100% { transform: scale(1, 1) rotate(0); }
  30% { transform: scale(.9, 1.12) rotate(-4deg); }
  60% { transform: scale(1.06, .94) rotate(3deg); }
}
html.lc-hw-on .is-lit .hw-pk-face { animation: hw-flick2 4.6s linear infinite; }
html.lc-hw-on .hw-it:nth-child(3n) .is-lit .hw-pk-face { animation-delay: -1.7s; }
html.lc-hw-on .hw-it:nth-child(3n+1) .is-lit .hw-pk-face { animation-delay: -3.1s; }
@keyframes hw-flick2 {
  0%, 100%, 11%, 14%, 48%, 70%, 73% { opacity: 1; }
  12% { opacity: .6; } 46% { opacity: .85; } 71% { opacity: .7; }
}
html.lc-hw-on .hw-glowpk .is-lit { filter: drop-shadow(0 0 6px rgba(255, 186, 64, .55)); }

html.lc-hw-on .hw-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: hw-lid 5.5s infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes hw-lid { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
html.lc-hw-on .hw-cateyes, html.lc-hw-on .hw-eyepair { transform-box: fill-box; transform-origin: 50% 50%; animation: hw-blink 4.8s infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes hw-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
html.lc-hw-on .hw-tail { transform-box: fill-box; transform-origin: 0% 85%; animation: hw-tail 3.2s ease-in-out infinite alternate; }
@keyframes hw-tail { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
html.lc-hw-on .hw-arm { transform-box: fill-box; transform-origin: 100% 60%; animation: hw-wave 1.1s ease-in-out infinite alternate; }
@keyframes hw-wave { from { transform: rotate(-10deg); } to { transform: rotate(18deg); } }

html.lc-hw-on .hw-tw { animation: hw-tw 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.53s); }
@keyframes hw-tw { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: .95; transform: scale(1); } }

/* Fallen: --fall Strecke, --drift seitliche Auslenkung */
html.lc-hw-on .hw-fall { animation: hw-fall calc(7s + var(--i) * .63s) linear infinite; animation-delay: calc(var(--i) * -1.37s); opacity: 0; }
@keyframes hw-fall {
  0% { transform: translate(0, -24px) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(var(--drift, 30px), calc(var(--fall, 400px) * .5)) rotate(170deg); }
  88% { opacity: 1; }
  100% { transform: translate(0, var(--fall, 400px)) rotate(330deg); opacity: 0; }
}

html.lc-hw-on .hw-drip { transform-origin: 50% 0; animation: hw-drip calc(5s + var(--i) * .7s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.9s); }
@keyframes hw-drip { 0%, 100% { transform: scaleY(.55); } 60% { transform: scaleY(1); } }

html.lc-hw-on .hw-rise { animation: hw-rise calc(3.2s + var(--i) * .4s) ease-in infinite; animation-delay: calc(var(--i) * -.9s); opacity: 0; }
@keyframes hw-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(var(--rise, -60px)) scale(1.1); opacity: 0; } }
html.lc-hw-on .hw-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: hw-pop 2.4s ease-in-out infinite; }
@keyframes hw-pop { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } }

html.lc-hw-on .hw-crawl { animation: hw-crawl calc(14s + var(--i) * 2s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -3s); }
@keyframes hw-crawl { from { transform: translateX(0); } to { transform: translateX(var(--crawl, 160px)); } }

html.lc-hw-on .hw-fogd { animation: hw-fog calc(16s + var(--i) * 3s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -5s); }
@keyframes hw-fog { from { transform: translateX(-7%); } to { transform: translateX(7%); } }

/* Fledermaus-Flug in Schleifen; --fx Spannweite */
html.lc-hw-on .hw-fly { animation: hw-fly calc(11s + var(--i) * 1.3s) ease-in-out infinite; animation-delay: calc(var(--i) * -2.7s); }
@keyframes hw-fly {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  25% { transform: translate(var(--fx, 220px), 26px) rotate(8deg); }
  50% { transform: translate(calc(var(--fx, 220px) * 1.5), -8px) rotate(-4deg); }
  75% { transform: translate(calc(var(--fx, 220px) * .6), 34px) rotate(6deg); }
}
html.lc-hw-on .hw-fly .hw-bat-wl, html.lc-hw-on .hw-fly .hw-bat-wr { transform-box: fill-box; animation: hw-flap .2s ease-in-out infinite alternate; }
html.lc-hw-on .hw-fly .hw-bat-wl { transform-origin: 100% 55%; }
html.lc-hw-on .hw-fly .hw-bat-wr { transform-origin: 0% 55%; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }

/* ===== xm-scene.css ===== */
/* ==========================================================================
   Weihnachts-Navbar · gemeinsame Bewegungen und Schrumpf-Regeln (22.10.2026)
   Nur transform und opacity. Reduced-Motion-Guard aus hw-base.css deckt alle
   fünf Ebenen ab. Perioden bewusst weg von 0,2 Hz (Anti-Slop-Pass Halloween):
   Funkeln 2,6 s, Pendel 9 s und mehr, Schnee 10 s und mehr, Schlitten 18 s.
   ========================================================================== */
html.lc-hw-on .hw-scene-fg .hw-it { transition: transform .45s var(--hw-ease-out), opacity .3s linear; transform-origin: 50% 100%; }
html.lc-hw-on .hw-scene-bg .xm-corner { transition: transform .5s var(--hw-ease-out); transform-origin: 0 0; }
html.lc-hw-on .hw-scene-bg .xm-corner.hw-flipx { transform-origin: 100% 0; }
html.lc-hw-on .hw-scene-bg .xm-band { transition: transform .5s var(--hw-ease-out); transform-origin: 50% 0; }
html.lc-hw-on .hw-scene-bg .xm-band.xm-band--bottom { transform-origin: 50% 100%; }

/* Lichterkette: Birnen funkeln versetzt */
html.lc-hw-on .hw-bulb { animation: xm-tw 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes xm-tw { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Sterne: sanftes Funkeln mit leichtem Atmen */
html.lc-hw-on .xm-star > svg { filter: drop-shadow(0 0 3px rgba(255, 186, 64, .75)); }
html.lc-hw-on .xm-star { animation: xm-star 3.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); transform-origin: 50% 50%; }
@keyframes xm-star { 0%, 100% { opacity: .55; transform: scale(.86); } 50% { opacity: 1; transform: scale(1); } }
html.lc-hw-on .xm-star--calm { animation-duration: 8.5s; }

/* Schnee: fällt mit leichter Drift (Keyframes hw-fall aus hw-scene.css) */
html.lc-hw-on .xm-snow { animation: hw-fall calc(10s + var(--i) * .8s) linear infinite; animation-delay: calc(var(--i) * -1.9s); opacity: 0; }
html.lc-hw-on .xm-snow--slow { animation-duration: calc(15s + var(--i) * 1.1s); }
html.lc-hw-on .lc-hw-drop .xm-snow svg { filter: drop-shadow(0 1px 1px rgba(17, 24, 39, .18)); }

/* Hängende Kugeln, Sterne, Lebkuchen: langsamer als die Halloween-Fäden */
html.lc-hw-on .xm-hang .hw-sw { animation-duration: calc(4.6s + var(--i) * .3s); animation-delay: calc(var(--i) * -1.1s); }
html.lc-hw-on .xm-hang .hw-sw::before { background: rgba(17, 24, 39, .4); }
html.lc-hw-on .xm-hang--gold .hw-sw::before { background: #ffba40; width: 2px; margin-left: -1px; }    /* --lc-cta-500 */
html.lc-hw-on .lc-hw-drop .hw-sw { filter: drop-shadow(0 2px 2px rgba(17, 24, 39, .22)); }

/* Schlitten: alle 18 s von links nach rechts, Rentier voran, leichtes Wippen; Beine traben */
html.lc-hw-on .xm-glide { animation: xm-glide 18s linear infinite; animation-delay: 2.5s; }
@keyframes xm-glide {
  0% { transform: translate(0, 4px) rotate(2deg); }
  10% { transform: translate(calc((100vw + 300px) * .25), -4px) rotate(-1deg); }
  20% { transform: translate(calc((100vw + 300px) * .5), 2px) rotate(1deg); }
  30% { transform: translate(calc((100vw + 300px) * .75), -3px) rotate(-1deg); }
  40%, 100% { transform: translate(calc(100vw + 300px), 0) rotate(0); }
}
html.lc-hw-on .xm-trot { transform-box: fill-box; transform-origin: 50% 0; animation: xm-trot .5s ease-in-out infinite alternate; }
@keyframes xm-trot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

/* Eiszapfen und Schneewehen: statisch; Eiszapfen in der Drop-Ebene leicht abgesetzt */
html.lc-hw-on .lc-hw-drop .xm-ice svg { filter: drop-shadow(0 2px 2px rgba(17, 24, 39, .15)); }

/* Geschrumpfter Header (ab 768 px, beim Scrollen): Figuren kleiner, Ecken und Bänder flacher,
   Fäden hoch, Schnee über der Seite aus, Schlitten weiter */
@media (min-width: 768px) {
  .site.shrink-header #nav-main .hw-scene-fg .hw-it:not(.xm-glide) { transform: scale(.6); }
  .site.shrink-header #nav-main .hw-scene-fg [data-hw-solid="stern"] { opacity: 0; }
  .site.shrink-header #nav-main .hw-scene-bg .xm-corner { transform: scale(.5); }
  .site.shrink-header #nav-main .hw-scene-bg .xm-band { transform: scaleY(.55); }
  .site.shrink-header #nav-main .lc-hw-drop .hw-hang { transform: translateY(calc(var(--len, 40px) * -.82)); }
  .site.shrink-header #nav-main .lc-hw-drop .xm-snow { opacity: 0 !important; animation-play-state: paused; }
  .site.shrink-header #nav-main .lc-hw-drop .xm-ice { transform: scaleY(.5); transform-origin: 50% 0; }
}

/* Schneemann: rechter Stockarm winkt (Schulter unten links in der Box) */
html.lc-hw-on .xm-arm { transform-box: fill-box; transform-origin: 0 100%; animation: xm-wave 1.3s ease-in-out infinite alternate; }
@keyframes xm-wave { from { transform: rotate(-12deg); } to { transform: rotate(10deg); } }

/* Schlitten, Entwurf B (26.10.2026): Fahrt ohne Wackeln in leichtem Bogen, 18-s-Takt; innen galoppiert das Rentier
   als Ganzes (Sprungbogen 0,62 s), der Schlitten schwingt mit kleiner Verzögerung nach, die Bewegungslinien
   flackern, die Schneewolke pulsiert. Werte in SVG-Einheiten (viewBox 1788 breit): 20 Einheiten sind bei
   118 px Breite 1,3 px. Fährt nur im oberen Band (Höhe 65 px), damit die Menütexte frei bleiben. */
html.lc-hw-on .xm-glide--pro { animation: xm-glide-pro 18s linear infinite; animation-delay: 2.5s; }
@keyframes xm-glide-pro {
  0% { transform: translate(0, 4px); }
  10% { transform: translate(calc((100vw + 300px) * .25), -6px); }
  20% { transform: translate(calc((100vw + 300px) * .5), 0); }
  30% { transform: translate(calc((100vw + 300px) * .75), -5px); }
  40%, 100% { transform: translate(calc(100vw + 300px), 2px); }
}
html.lc-hw-on .xm-sl-deer { transform-box: fill-box; transform-origin: 40% 72%; animation: xm-sl-gallop .62s ease-in-out infinite; }
@keyframes xm-sl-gallop {
  0%, 100% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-22px) rotate(-2.2deg); }
  72% { transform: translateY(6px) rotate(1deg); }
}
html.lc-hw-on .xm-sl-sleigh, html.lc-hw-on .xm-sl-rig { transform-box: fill-box; transform-origin: 50% 92%; animation: xm-sl-sway .62s ease-in-out infinite; animation-delay: -.5s; }
@keyframes xm-sl-sway {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-7px) rotate(.7deg); }
}
html.lc-hw-on .xm-sl-lines { animation: xm-sl-flick .62s steps(2, jump-none) infinite; }
@keyframes xm-sl-flick { from { opacity: .35; } to { opacity: 1; } }
html.lc-hw-on .xm-sl-puff { transform-box: fill-box; transform-origin: 50% 100%; animation: xm-sl-puff 1.24s ease-in-out infinite; }
@keyframes xm-sl-puff { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
@media (min-width: 768px) {
  /* im geschrumpften Header liegt das obere Band auf den Menütexten: Fahrt aus */
  .site.shrink-header #nav-main .hw-scene-fg .xm-glide--pro { opacity: 0; animation-play-state: paused; }
}

/* HyperFrames-Clip (Schlitten-Flug, WebM mit Alpha) in der drop-Ebene: volle Breite, Höhe folgt dem Seitenverhältnis 1920:280.
   Liegt vor den Eiszapfen im DOM, also hinter ihnen; beim Scrollen ausgeblendet. */
html.lc-hw-on .hw-it.xm-clip { pointer-events: none; }
html.lc-hw-on .hw-it > video.xm-clip__video { display: block; width: 100%; height: auto; pointer-events: none; }
@media (min-width: 768px) {
  .site.shrink-header #nav-main .lc-hw-drop .xm-clip { opacity: 0; transition: opacity .3s linear; }
}

/* ===== popup-adventsfenster.css ===== */
/* ==========================================================================
   Adventsfenster-Popup (22.10.2026, zu LER-186)
   Fensterrahmen in primary-900, Läden in primary-800 mit Creme-Rand, innen
   warmes Licht (cta-100). Läden öffnen per rotateY (nur transform), Fenster
   kommt von unten (translate). Kontraste: Ink auf cta-100 über 15:1, Ink auf
   cta-500 wie der Live-CTA, Gold-Stern auf primary-800 dekorativ.
   Anti-Slop-Lehren Halloween: kein Dauer-Wippen, Blur unter 20 px, Hover-
   Bewegung nur mit Zeiger, Exit kürzer als Eintritt und mit ease-out.
   ========================================================================== */
html.lc-hw-on .hw-af {
  position: fixed;
  container-type: inline-size;           /* Container ist die fixe Huelle: 1cqw = 1 % von 340 px (320 mobil). Auf dem Frame selbst fiel cqw auf vw zurueck, das Padding wuchs mit dem Bildschirm (Kurator 28.10., Zoom-Out = schmaler Streifen) */
  right: clamp(12px, 4vw, 90px);
  bottom: clamp(12px, 4vh, 48px);
  z-index: 10050;
  width: min(340px, 90vw);
  pointer-events: none;
  visibility: hidden;
}
html.lc-hw-on .hw-af.is-in { visibility: visible; pointer-events: auto; }

html.lc-hw-on .hw-af__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 4cqw;
  border-radius: 3cqw 3cqw 1.5cqw 1.5cqw;
  background: #12655e;                                                          /* --lc-primary-900 */
  box-shadow: 0 16px 20px rgba(17, 24, 39, .28), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  perspective: 900px;
  transform: translateY(40px);
  opacity: 0;
}
html.lc-hw-on .hw-af.is-in .hw-af__frame { animation: hw-af-in .55s var(--hw-ease-out) both; }
html.lc-hw-on .hw-af.is-in.is-instant .hw-af__frame { animation: none; transform: none; opacity: 1; }
html.lc-hw-on .hw-af.is-out { visibility: hidden; transition: visibility 0s .3s; }
html.lc-hw-on .hw-af.is-out .hw-af__frame { animation: hw-af-out .3s var(--hw-ease-out) both; }
@keyframes hw-af-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hw-af-out { from { transform: none; opacity: 1; } to { transform: translateY(24px); opacity: 0; } }

/* Fensterinneres: warmes Licht, Sprossen als feine Linien */
html.lc-hw-on .hw-af__inner {
  position: relative;
  min-height: 100%;                      /* wächst mit dem Inhalt: feste 100 % schnitten den Knopf ab, sobald Text öfter umbricht (schmales Fenster, Text-Zoom; Kurator 28.10.) */
  box-sizing: border-box;
  padding: 11cqw 6cqw 7cqw;
  border-radius: 2cqw;
  background:
    radial-gradient(120% 90% at 50% 20%, #fff1d6 0%, #ffe9bd 60%, #ffd587 100%);   /* cta-100 nach cta-300 */
  text-align: center;
  color: #111827;
  overflow: hidden;
}
html.lc-hw-on .hw-af__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(18, 101, 94, .35) calc(50% - 1px), rgba(18, 101, 94, .35) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(38% - 1px), rgba(18, 101, 94, .35) calc(38% - 1px), rgba(18, 101, 94, .35) calc(38% + 1px), transparent calc(38% + 1px));
  pointer-events: none;
  opacity: .3;
}
html.lc-hw-on .hw-af__fir { position: absolute; top: -2cqw; left: 50%; transform: translateX(-50%); width: 44%; height: auto; }
html.lc-hw-on .hw-af__eyebrow {
  position: relative;
  margin: 0 0 1.5cqw;
  font: 800 max(10px, 3.6cqw)/1 "DM Sans", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #12655e;                                                                 /* --lc-primary-900: 7,5:1 auf cta-100 */
}
html.lc-hw-on .hw-af__title {
  position: relative;
  margin: 0 0 2.5cqw;
  font: 800 max(18px, 9cqw)/1.05 "DM Sans", system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #111827;
}
html.lc-hw-on .hw-af__text {
  position: relative;
  margin: 0 0 2cqw;
  font: 600 max(11px, 4.2cqw)/1.3 "DM Sans", system-ui, sans-serif;
  color: #111827;
}
html.lc-hw-on .hw-af__info {
  position: relative;
  display: inline-block;
  margin: 0 0 4cqw;
  padding: .35em .8em;
  border-radius: 999px;
  background: #ffffff;
  font: 700 max(10px, 3.8cqw)/1 "DM Sans", system-ui, sans-serif;
  color: #111827;
  box-shadow: 0 2px 6px rgba(17, 24, 39, .14);
}
html.lc-hw-on .hw-af a.hw-af__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.5em;
  border-radius: 999px;
  background: #ffba40;                                                            /* --lc-cta-500 */
  color: #111827;
  font: 800 max(12px, 4.4cqw)/1 "DM Sans", system-ui, sans-serif;
  text-decoration: none;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;                   /* bei Text-Zoom lieber umbrechen als ueber das Etikett ragen (gemessen 28.10.) */
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 6px 14px rgba(17, 24, 39, .22);
  touch-action: manipulation;
  transition: transform .2s var(--hw-ease-out);   /* Anti-Slop-Pass 28.10.: nur transform, Farbe wechselt sofort */
}
html.lc-hw-on .hw-af a.hw-af__btn::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  html.lc-hw-on .hw-af a.hw-af__btn:hover { background: color-mix(in srgb, #ffba40 88%, #111827); transform: translateY(-2px); }
}
html.lc-hw-on .hw-af a.hw-af__btn:focus-visible { outline: 3px solid #2fcac1; outline-offset: 3px; }

/* Läden: zwei Flügel, öffnen nach dem Einblenden (rotateY um die Aussenkante) */
html.lc-hw-on .hw-af__shutter {
  position: absolute;
  top: 4cqw;
  bottom: 4cqw;
  width: calc(50% - 4cqw);
  display: grid;
  place-items: center;
  border-radius: 2cqw;
  background: #167f76;                                                            /* --lc-primary-800 */
  box-shadow: 0 0 0 2px rgba(255, 241, 214, .6) inset, 0 4px 12px rgba(17, 24, 39, .3);
}  /* Rückseite bleibt sichtbar: offene Läden liegen als schmale Streifen neben dem Fenster */
html.lc-hw-on .hw-af__shutter::before {
  content: "";
  position: absolute;
  inset: 3cqw;
  border: 1px solid rgba(255, 241, 214, .5);
  border-radius: 1cqw;
}
html.lc-hw-on .hw-af__shutter--l { left: 4cqw; transform-origin: 0 50%; }
html.lc-hw-on .hw-af__shutter--r { right: 4cqw; transform-origin: 100% 50%; }
html.lc-hw-on .hw-af.is-in .hw-af__shutter--l { animation: hw-af-open-l .7s var(--hw-ease-out) .45s both; }
html.lc-hw-on .hw-af.is-in .hw-af__shutter--r { animation: hw-af-open-r .7s var(--hw-ease-out) .5s both; }
html.lc-hw-on .hw-af.is-in.is-instant .hw-af__shutter--l { animation: none; transform: rotateY(-100deg); }
html.lc-hw-on .hw-af.is-in.is-instant .hw-af__shutter--r { animation: none; transform: rotateY(100deg); }
@keyframes hw-af-open-l { from { transform: rotateY(0); } to { transform: rotateY(-100deg); } }
@keyframes hw-af-open-r { from { transform: rotateY(0); } to { transform: rotateY(100deg); } }

/* Fensterbank mit Schnee */
html.lc-hw-on .hw-af__sill {
  position: absolute;
  left: -2cqw;
  right: -2cqw;
  bottom: -2.5cqw;
  height: 5cqw;
  border-radius: 1cqw;
  background: #12655e;
  box-shadow: 0 4px 10px rgba(17, 24, 39, .3);
}
html.lc-hw-on .hw-af__sill::before {
  content: "";
  position: absolute;
  left: 1cqw;
  right: 1cqw;
  top: -2cqw;
  height: 3.2cqw;
  border-radius: 2cqw 2cqw 0 0 / 2cqw 2cqw 0 0;
  background: #ffffff;
  box-shadow: 0 1px 0 #d1d5db inset;                                              /* --lc-gray-300 */
}

html.lc-hw-on .hw-af__close {
  position: absolute;
  top: -14px;
  right: -8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #111827;
  font: 400 26px/1 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .18);
}
@media (hover: hover) and (pointer: fine) { html.lc-hw-on .hw-af__close:hover { background: #fff1d6; } }
html.lc-hw-on .hw-af__close:focus-visible { outline: 3px solid #2fcac1; outline-offset: 3px; }

@media (max-width: 480px) {
  html.lc-hw-on .hw-af { right: 8px; bottom: 10px; width: min(320px, calc(100vw - 16px)); }
}
@media (prefers-reduced-motion: reduce) {
  html.lc-hw-on .hw-af.is-in .hw-af__frame { animation: none; transform: none; opacity: 1; }
  html.lc-hw-on .hw-af.is-in .hw-af__shutter--l { animation: none; transform: rotateY(-100deg); }
  html.lc-hw-on .hw-af.is-in .hw-af__shutter--r { animation: none; transform: rotateY(100deg); }
}
html.lc-hw-still .hw-af.is-in .hw-af__frame { animation: none; transform: none; opacity: 1; }
html.lc-hw-still .hw-af.is-in .hw-af__shutter--l { animation: none; transform: rotateY(-100deg); }
html.lc-hw-still .hw-af.is-in .hw-af__shutter--r { animation: none; transform: rotateY(100deg); }

/* ==========================================================================
   Darstellungsvarianten des Inhalts (28.10.2026). Hülle unverändert.
   v1 Kalenderblatt: Abreisskalender, Banner oben, grosser Tag, Wochentag,
   Zweck, gestrichelte Trennlinie, Anmeldezeile, Knopf. Weiss, Ink, primary-900.
   ========================================================================== */
html.lc-hw-on .hw-af__inner--cal { padding: 15cqw 6cqw 6cqw; background: #ffffff; }
html.lc-hw-on .hw-af__inner--cal::before { content: none; }
html.lc-hw-on .hw-af__month {
  position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 2.6cqw 0 2.2cqw;
  background: #12655e; color: #fff1d6;                                           /* primary-900 / cta-100 */
  font: 800 max(12px, 3.8cqw)/1 "DM Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
html.lc-hw-on .hw-af__ring {
  position: absolute; top: -2.4cqw; width: 5cqw; height: 7cqw; border-radius: 2.5cqw; z-index: 2;
  background: #22bcad; box-shadow: 0 1px 0 rgba(17, 24, 39, .25) inset, 0 2px 3px rgba(17, 24, 39, .25);   /* primary-600 */
}
html.lc-hw-on .hw-af__ring--l { left: 22%; }
html.lc-hw-on .hw-af__ring--r { right: 22%; }
html.lc-hw-on .hw-af__day {
  position: relative; margin: 0; color: #111827;
  font: 800 max(44px, 21cqw)/1 "DM Sans", system-ui, sans-serif; letter-spacing: -.03em;
}
html.lc-hw-on .hw-af__weekday {
  position: relative; margin: .5cqw 0 2cqw; color: #12655e;
  font: 700 max(12px, 4cqw)/1 "DM Sans", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
html.lc-hw-on .hw-af__title--cal { margin: 0 0 2cqw; font-size: max(15px, 5cqw); line-height: 1.15; letter-spacing: 0; }
html.lc-hw-on .hw-af__rule { position: relative; margin: 0 0 2.5cqw; border: 0; border-top: 2px dashed #d1d5db; }   /* gray-300 */
html.lc-hw-on .hw-af__text--cal { margin: 0 0 3cqw; font-weight: 600; color: #374151; }            /* gray-700: 10:1 auf Weiss */

/* v2 Geschenkanhänger: Schleife oben, Etikett mit Öse hängt leicht gedreht vor dem Fensterlicht */
html.lc-hw-on .hw-af__inner--gift { padding: 1.5cqw 2cqw 4cqw; }   /* Kurator 28.10.: seitliche Raender minimal, das Etikett fuellt die Flaeche */
html.lc-hw-on .hw-af__bow { position: relative; display: block; width: 38%; height: auto; margin: 0 auto -5cqw; z-index: 2; }
html.lc-hw-on .hw-af__tag {
  position: relative; margin: 0 auto; width: 96%; padding: 7cqw 3.5cqw 5cqw;
  border-radius: 2cqw; background: #ffffff; color: #111827;
  clip-path: polygon(0 9%, 9% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 18px rgba(17, 24, 39, .22);
  transform: rotate(-1.5deg);
}
html.lc-hw-on .hw-af__hole {
  position: absolute; top: 2.2cqw; left: 50%; width: 3.2cqw; height: 3.2cqw; margin-left: -1.6cqw;
  border-radius: 50%; background: #fff1d6; box-shadow: 0 0 0 1.5px #8fe3da inset;   /* cta-100, Öse primary-300 */
}
html.lc-hw-on .hw-af__eyebrow--tag { color: #167f76; letter-spacing: .1em; }         /* primary-800: 5,6:1 auf Weiss */
html.lc-hw-on .hw-af__title--tag { font-size: max(16px, 7.4cqw); margin-bottom: 2cqw; }
html.lc-hw-on .hw-af__text--tag { font-weight: 500; color: #374151; margin-bottom: 2.5cqw; }
html.lc-hw-on .hw-af__info--tag { background: #fff1d6; box-shadow: none; margin-bottom: 3.5cqw; }

/* v3 Klartext: flaches Creme, Schneekappe oben, Library-Formen (Eyebrow-Pill mit Punkt, Marker-Highlight), kein Fensterlicht */
html.lc-hw-on .hw-af__inner--plain { padding: 13cqw 6cqw 6cqw; background: #fff1d6; }
html.lc-hw-on .hw-af__inner--plain::before { content: none; }
html.lc-hw-on .hw-af__snow { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 13cqw; display: block; }
html.lc-hw-on .hw-af__eyebrow--pill {
  display: inline-flex; align-items: center; gap: .5em; margin: 0 0 2.5cqw; padding: .45em .95em;
  border-radius: 999px; background: #dff6f3; color: #167f76;                      /* primary-100 / primary-800 */
  font-size: max(11px, 3.3cqw); letter-spacing: .09em;
}
html.lc-hw-on .hw-af__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
html.lc-hw-on .hw-af__title--plain { font-size: max(22px, 8.4cqw); line-height: 1.08; margin-bottom: 2.5cqw; }
html.lc-hw-on .hw-af__hl { background: linear-gradient(transparent 60%, #ffd587 60%, #ffd587 94%, transparent 94%); padding: 0 .06em; }   /* lc-hl, cta-300 */
html.lc-hw-on .hw-af__text--plain { font-weight: 500; color: #374151; margin-bottom: 3.5cqw; }
html.lc-hw-on .hw-af__ps { position: relative; margin: 3cqw 0 0; font: 500 max(11px, 3.4cqw)/1.3 "DM Sans", system-ui, sans-serif; color: #374151; }

@media (prefers-reduced-motion: reduce) { html.lc-hw-on .hw-af__tag { transform: none; } }

/* Varianten v1 bis v3 brauchen mehr Höhe als das Quadrat (44-px-Knopf plus drei Zeilen): leicht hochformatiges Fenster,
   Läden und Bank laufen mit. Gemessen 28.10.: im Quadrat war der Knopf bei 1440 px angeschnitten, bei 360 px 7 bis 11 px Überlauf. */
html.lc-hw-on .hw-af--v1 .hw-af__frame, html.lc-hw-on .hw-af--v2 .hw-af__frame, html.lc-hw-on .hw-af--v3 .hw-af__frame { aspect-ratio: auto; }   /* Hoehe aus dem Inhalt (Kurator 28.10.: «so wie im entwurf», kein Leerraum unter dem Etikett) */
html.lc-hw-on .hw-af__inner--cal { padding-top: 14cqw; }
html.lc-hw-on .hw-af__day { font-size: max(42px, 19cqw); }
html.lc-hw-on .hw-af__title--cal { margin-bottom: 1.6cqw; }
html.lc-hw-on .hw-af__rule { margin-bottom: 2cqw; }
html.lc-hw-on .hw-af__text--cal { margin-bottom: 2.6cqw; }
html.lc-hw-on .hw-af__bow { width: 34%; margin-bottom: -4.5cqw; }
html.lc-hw-on .hw-af__tag { padding: 6.5cqw 3.5cqw 4.5cqw; }
html.lc-hw-on .hw-af__title--tag { margin-bottom: 1.6cqw; }
html.lc-hw-on .hw-af__text--tag { margin-bottom: 2cqw; }
html.lc-hw-on .hw-af__info--tag { margin-bottom: 3cqw; }
html.lc-hw-on .hw-af__inner--plain { padding-top: 12cqw; }
html.lc-hw-on .hw-af__ps { margin-top: 2.6cqw; }
/* Unter 480 px greifen die px-Mindestgrössen weniger, der Inhalt ist relativ kleiner: Fenster nur leicht hochformatig */
@media (max-width: 480px) {
  html.lc-hw-on .hw-af--v1 .hw-af__frame, html.lc-hw-on .hw-af--v2 .hw-af__frame, html.lc-hw-on .hw-af--v3 .hw-af__frame { aspect-ratio: auto; }
}

/* ===== w1-tannenwald.css ===== */
/* W1 · Tannenwald: kühler Himmel oben, Schneelicht unten */
html.lc-hw-on #nav-main {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, color-mix(in srgb, #8fe3da 22%, #ffffff) 100%);   /* --lc-primary-300 als Schneelicht */
}

/* --- Produktion ---------------------------------------------------------
   Das runde Info-Abend-Popup (.gym-popup, Startseite) pausiert, solange das
   Adventsfenster läuft. Ausserhalb des Zeitfensters fehlt html.lc-hw-on,
   dann erscheint es wie gewohnt. */
html.lc-hw-on .gym-popup { display: none !important; }