/* lc-halloween.css · Navbar Halloween 2026 (LER-184) + Kürbis-Popup (LER-38)
   Gebaut am 2026-10-15 aus Massnahmen/Navbar-Halloween/skins/ per tools/build_theme.py.
   Nicht von Hand ändern: Skins anpassen und neu bauen. Zeitfenster 2026-10-15 bis 2026-11-01
   (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); } }

/* ===== popup-kuerbis.css ===== */
/* ==========================================================================
   Info-Abend-Popup als Halloween-Kürbis, v2 (15.10.2026, zu LER-38)
   Masse in Container-Einheiten (cqw), der Kürbis skaliert als Ganzes.
   Kontraste: Ink auf Kürbis-Orange 5,8:1 · Ink auf Creme-Zettel über 15:1 ·
   Ink auf CTA-Gelb wie der Live-CTA.
   ========================================================================== */
html.lc-hw-on .hw-kp {
  position: fixed;
  right: clamp(12px, 4vw, 90px);
  bottom: clamp(12px, 4vh, 48px);
  z-index: 10050;
  width: min(400px, 92vw);
  pointer-events: none;
  visibility: hidden;
}
html.lc-hw-on .hw-kp.is-in { visibility: visible; pointer-events: auto; }
html.lc-hw-on .hw-kp__roll {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  transform: translateX(125%) rotate(95deg);
  filter: drop-shadow(0 16px 20px rgba(17, 24, 39, .3));                     /* Blur unter 20 px (Pflicht 12) */
}
html.lc-hw-on .hw-kp.is-in .hw-kp__roll {
  animation: hw-kp-roll 1s var(--hw-ease-spring) both;                        /* kein Dauer-Wippen (Pflicht 12: Loop nahe 0,2 Hz) */
}
html.lc-hw-on .hw-kp.is-in.is-instant .hw-kp__roll { animation: none; transform: rotate(-3deg); }
html.lc-hw-on .hw-kp.is-out { visibility: hidden; transition: visibility 0s .35s; }
html.lc-hw-on .hw-kp.is-out .hw-kp__roll { animation: hw-kp-away .35s var(--hw-ease-out) both; }
@keyframes hw-kp-roll { from { transform: translateX(125%) rotate(95deg); } to { transform: translateX(0) rotate(-3deg); } }
@keyframes hw-kp-away { to { transform: translateY(30px) rotate(6deg) scale(.9); opacity: 0; } }

html.lc-hw-on .hw-kp__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.lc-hw-on .hw-kp .kp-o { fill: #d4570a; }                                   /* --lc-attention-700 */
html.lc-hw-on .hw-kp .kp-i { fill: color-mix(in srgb, #f76a0c 62%, #d4570a); }
html.lc-hw-on .hw-kp .kp-c { fill: #f76a0c; }                                   /* --lc-attention-500 */
html.lc-hw-on .hw-kp .kp-mouth { fill: color-mix(in srgb, #d4570a 22%, #111827); }
html.lc-hw-on .hw-kp .kp-eye {
  fill: #ffd587;                                                                /* --lc-cta-300 */
  filter: drop-shadow(0 0 6px rgba(255, 186, 64, .9));
  animation: hw-kp-flicker 3.8s linear infinite;
}
html.lc-hw-on .hw-kp .kp-eye + .kp-eye { animation-delay: -1.4s; }
@keyframes hw-kp-flicker { 0%, 100%, 20%, 23%, 61%, 64% { opacity: 1; } 21% { opacity: .65; } 62% { opacity: .8; } }

/* Stirn: Titel, oberhalb der Augen. Kurator 15.10.: weg vom Rand, andere
   Farbe, kontrastreich, ohne den Kürbis zu verdrängen. Deshalb wie die
   Augen «hineingeschnitzt»: Creme mit dunklem Schnittrand und warmem Schein,
   kein Kasten. Roh gemessen 2,7:1, mit dem dunklen Saum klar lesbar. */
html.lc-hw-on .hw-kp__title {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 27.5%;
  margin: 0;
  padding: 0;
  text-align: center;
  font: 800 6.8cqw/1 "DM Sans", system-ui, sans-serif;
  letter-spacing: -.005em;
  color: #fff1d6;                                                               /* --lc-cta-100, wie die Augen */
  text-shadow:
    0 0 1.5px #3b1a08, 0 0 3px rgba(59, 26, 8, .95), 0 2px 0 rgba(59, 26, 8, .55),
    0 0 14px rgba(255, 186, 64, .75);
  hyphens: none;
  opacity: 1;
}
html.lc-hw-on .hw-kp__title span { display: block; font-size: .76em; font-weight: 800; margin-top: .14em; }

/* Maul: Termine als Zettel plus Adresse */
html.lc-hw-on .hw-kp__mouth {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 58.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
html.lc-hw-on .hw-kp__hint {
  margin: 0 0 1.6cqw;
  font: 800 max(12px, 4.4cqw)/1 "DM Sans", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffd587;                                                               /* --lc-cta-300 */
}
html.lc-hw-on .hw-kp__dates {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.6cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.lc-hw-on .hw-kp__dates li {
  margin: 0;
  padding: .36em .6em;
  border-radius: 999px;
  background: #fff1d6;                                                          /* --lc-cta-100: heller Zettel */
  font: 800 max(13px, 4.1cqw)/1 "DM Sans", system-ui, sans-serif;
  color: #111827;
  white-space: nowrap;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
html.lc-hw-on .hw-kp__loc {
  margin: 2.4cqw 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .4em;
  max-width: 100%;
  font: 600 max(11px, 3.2cqw)/1.25 "DM Sans", system-ui, sans-serif;
  color: #fff1d6;
  text-align: center;
  letter-spacing: 0;
}
html.lc-hw-on .hw-kp__loc svg { flex: none; margin-top: .12em; }

/* Zunge: Anmelde-Knopf ragt über den Maulrand */
html.lc-hw-on .hw-kp a.hw-kp__btn {
  position: absolute;
  left: 50%;
  top: 82.5%;
  transform: translateX(-50%) rotate(-2deg);
  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(14px, 4.2cqw)/1 "DM Sans", system-ui, sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(255, 213, 135, .35), 0 8px 18px rgba(17, 24, 39, .35);
  transition: transform .2s var(--hw-ease-out), background-color .2s linear;
}
html.lc-hw-on .hw-kp a.hw-kp__btn::after { content: none; }
html.lc-hw-on .hw-kp a.hw-kp__btn:hover { background: color-mix(in srgb, #ffba40 88%, #111827); }   /* --lc-cta-500 abgedunkelt */
@media (hover: hover) and (pointer: fine) {                                     /* Bewegung nur mit echtem Zeiger (Pflicht 12) */
  html.lc-hw-on .hw-kp a.hw-kp__btn:hover { transform: translateX(-50%) rotate(-2deg) translateY(-2px); }
}
html.lc-hw-on .hw-kp a.hw-kp__btn:focus-visible { outline: 3px solid #2fcac1; outline-offset: 3px; }

html.lc-hw-on .hw-kp__close {
  position: absolute;
  top: 19%;                              /* sitzt auf der rechten Schulter des Kürbis */
  right: 6%;
  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;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .18);
}
html.lc-hw-on .hw-kp__close:hover { background: #fff1d6; }
html.lc-hw-on .hw-kp__close:focus-visible { outline: 3px solid #2fcac1; outline-offset: 3px; }

@media (max-width: 480px) {
  html.lc-hw-on .hw-kp { right: 8px; bottom: 10px; width: min(352px, calc(100vw - 16px)); }
  html.lc-hw-on .hw-kp__dates { gap: 1cqw; }
  html.lc-hw-on .hw-kp__dates li { padding: .34em .5em; }
}
@media (prefers-reduced-motion: reduce) {
  html.lc-hw-on .hw-kp.is-in .hw-kp__roll { animation: none; transform: rotate(-3deg); }
  html.lc-hw-on .hw-kp .kp-eye { animation: none; }
}
html.lc-hw-still .hw-kp.is-in .hw-kp__roll { animation: none; transform: rotate(-3deg); }
html.lc-hw-still .hw-kp .kp-eye { animation: none; }

/* ===== n6-kuerbisfeld-plus.css ===== */
/* ==========================================================================
   N6 · Kürbisfeld Plus (Runde 3)
   N2-Grund (Abendlicht am unteren Rand) plus organische Eck-Netze, die von
   der Leiste über die Seite laufen, Spinnen, Krabbler, Besen.
   ========================================================================== */
html.lc-hw-on #nav-main {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #fff1d6 100%);     /* --lc-cta-100 als Abendlicht */
}
/* Netz: dünn, grau, mit hellem Saum, damit es auf Weiss und auf dem Hero-Foto lesbar ist */
html.lc-hw-on .hw-web2 { color: #6b7280; opacity: .8; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)); }   /* --lc-gray-500 */
html.lc-hw-on .hw-scene-bg .hw-web2 { transition: transform .5s var(--hw-ease-out); transform-origin: 0 0; }
html.lc-hw-on .hw-scene-bg .hw-web2.hw-flipx { transform-origin: 100% 0; }
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 .lc-hw-drop .hw-fall svg { filter: drop-shadow(0 2px 2px rgba(17, 24, 39, .22)); }
html.lc-hw-on .lc-hw-drop .hw-sw { filter: drop-shadow(0 2px 2px rgba(17, 24, 39, .25)); }
html.lc-hw-on .lc-hw-ocbg .hw-fall { opacity: .55; }

/* Besen fliegt alle 14 s über das obere Band, Stiel voran, leicht aufsteigend */
html.lc-hw-on .hw-broomfly { animation: hw-broom 14s linear infinite; animation-delay: 2s; }
@keyframes hw-broom {
  0% { transform: translate(0, 6px) rotate(-10deg); }
  40% { transform: translate(calc(100vw + 180px), -6px) rotate(-6deg); }
  100% { transform: translate(calc(100vw + 180px), -6px) rotate(-6deg); }
}

/* Geschrumpfter Header: Feld niedriger, Netze unter der Leiste kürzer, Fäden hoch, Laub aus */
@media (min-width: 768px) {
  .site.shrink-header #nav-main .hw-scene-fg .hw-it:not(.hw-crawl):not(.hw-broomfly) { transform: scale(.6); }
  .site.shrink-header #nav-main .hw-scene-fg [data-hw-solid="kraehe"],
  .site.shrink-header #nav-main .hw-scene-fg [data-hw-solid="spinne"] { opacity: 0; }
  .site.shrink-header #nav-main .hw-scene-bg .hw-web2 { transform: scale(.42); }
  .site.shrink-header #nav-main .hw-scene-bg .hw-web2.hw-flipx { transform: scale(.42); }
  .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 .hw-fall { opacity: 0 !important; animation-play-state: paused; }
}

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