/* Weihnachten 2026: Schnee, Weihnachtsband der Startseite und Lampert, das Ludgeri-Kaninchen.
   Gehört zu assets/js/jales-weihnachten.js. Saisonmodul, am 07.01.2027 ausbauen. */

/* hidden muss gewinnen, auch gegen img { display:block } und .lw-satz { display:flex } */
.lw-satz[hidden], .lw-bandkopf[hidden], .lw-spuren[hidden], .lw-blase[hidden] { display: none !important; }

/* ---------- Anhalten-Knopf (Schnee, Band, Lampert) ---------- */
.lw-pause { font: 500 11px/1 var(--font-sans); color: rgba(248,244,236,.75); background: rgba(30,45,36,.6);
  border: 1px solid rgba(248,244,236,.3); border-radius: 999px; padding: 7px 11px; min-height: 28px; cursor: pointer; }
.lw-pause:hover { color: var(--jales-ivory); border-color: var(--jales-ivory); }
.lw-pause:focus-visible { outline: 2px solid #D7C19C; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lw-pause { display: none; } }

/* ---------- Stiefelspuren (Sohle aus Jales Figurenblatt) ---------- */
.lw-spuren { position: absolute; pointer-events: none; z-index: 4; }
.lw-spuren span { position: absolute; bottom: 0; width: 10px; height: 18px; }
.lw-spuren svg { width: 100%; height: 100%; fill: rgba(163,127,66,.42); }
.lw-spuren .l { bottom: 6px; transform: rotate(84deg); }
.lw-spuren .r { bottom: -2px; transform: rotate(96deg); }

/* ---------- Weihnachtsband der Startseite (fester Preis vorn, Zusätze laufen) ---------- */
.wb { position: relative; overflow: hidden; color: var(--jales-ivory);
  background: linear-gradient(90deg, rgba(215,193,156,0) 0%, rgba(215,193,156,.10) 50%, rgba(215,193,156,0) 100%), var(--jales-forest-deep);
  border-top: 1px solid rgba(215,193,156,.35); border-bottom: 1px solid rgba(215,193,156,.35); }
.wb .wb-link { display: flex; align-items: center; min-height: 56px; padding-right: 150px; color: var(--jales-ivory); text-decoration: none; }
.wb .wb-link:focus-visible { outline: 3px solid #D7C19C; outline-offset: -3px; }
.wb-stern { width: 10px; height: 10px; fill: #D7C19C; flex-shrink: 0; }
.wb-fest { display: flex; align-items: center; gap: 12px; flex-shrink: 0; position: relative; z-index: 2;
  padding: 0 18px 0 max(16px, calc((100vw - 1200px) / 2)); }
.wb-label { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--jales-forest-deep); background: #D7C19C; padding: 7px 10px 7px 9px; border-radius: 999px; }
.wb-label .wb-stern { fill: var(--jales-forest-deep); width: 9px; height: 9px; }
.wb-kern { font: 500 15.5px/1.3 var(--font-sans); white-space: nowrap; }
.wb-preis { font-family: var(--font-serif); font-size: 21px; font-weight: 500; color: #F3E7C9; margin-left: 3px; }
.lw-bandkopf { width: 30px; height: auto; margin: -6px 0 -10px -4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.wb-lauffeld { flex: 1; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent); }
.wb-spur { display: flex; width: max-content; animation: wb-lauf 38s linear infinite; }
.wb-gruppe { display: flex; flex-shrink: 0; }
.wb-punkt { display: inline-flex; align-items: center; gap: 14px; padding: 0 22px; font: 500 14.5px/1.4 var(--font-sans);
  white-space: nowrap; color: rgba(248,244,236,.82); }
@keyframes wb-lauf { to { transform: translateX(-50%); } }
.wb:hover .wb-spur, .wb:focus-within .wb-spur, .lw-angehalten .wb-spur { animation-play-state: paused; }
.wb-pfeil { position: absolute; right: 132px; color: #D7C19C; }
.wb .lw-pause { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3; background: var(--jales-forest-deep); }
.wb .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Lampe (Spuren-Phase) und Lampert (ab 23.11.) ziehen alle 30 Sekunden einmal durch das Band */
.lw-bandlicht, .lw-laeufer { position: absolute; left: 0; pointer-events: none; z-index: 1; animation: lw-quer 30s linear infinite; }
.lw-bandlicht { top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,205,.95) 0 3px, rgba(255,221,150,.5) 5px, rgba(255,214,140,0) 70%); }
.lw-laeufer { bottom: 0; height: 48px; width: 30px; }
.lw-laeufer img { position: absolute; left: 0; bottom: 1px; height: 100%; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  animation: lw-hops .42s ease-in-out infinite alternate; }
.lw-schatten { position: absolute; left: -1px; bottom: -1px; width: 32px; height: 6px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 72%); }
@keyframes lw-quer { 0% { transform: translateX(-60px); opacity: 0; } 2% { opacity: 1; } 32% { opacity: 1; }
  34% { transform: translateX(calc(100vw + 20px)); opacity: 0; } 100% { transform: translateX(calc(100vw + 20px)); opacity: 0; } }
@keyframes lw-hops { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.lw-angehalten .lw-bandlicht, .lw-angehalten .lw-laeufer, .lw-angehalten .lw-laeufer img { animation-play-state: paused; }
@media (max-width: 700px) {
  .wb .wb-link { flex-wrap: wrap; padding: 10px 0 8px; min-height: 0; }
  .wb-fest { padding: 0 16px; }
  .wb-lauffeld { flex: 0 0 auto; width: calc(100% - 124px); margin-top: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 82%, transparent); }
  .wb-punkt { font-size: 13.5px; padding: 0 14px; }
  .wb-pfeil { display: none; }
  .wb .lw-pause { top: auto; bottom: 6px; transform: none; }
  .lw-laeufer { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .wb-spur { animation: none; } .lw-bandlicht, .lw-laeufer { display: none; } }

/* ---------- Lampert versteckt sich ---------- */
.lw-versteck { isolation: isolate; }
.lw-figur { position: absolute; z-index: 5; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.lw-figur img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)); }
.lw-figur:focus-visible { outline: 3px solid #A37F42; outline-offset: 3px; border-radius: 8px; }
/* oben: lugt mit Kopf und Lampe über die Oberkante */
.lw-oben { width: 74px; right: 14%; bottom: calc(100% - 4px); transform-origin: 50% 100%; }
/* seite: steht vorn an der rechten unteren Ecke und winkt */
.lw-seite { width: 56px; right: -8px; bottom: -12px; transform-origin: 50% 100%; }
/* lugt: schaut hinter der rechten Kante hervor, die Pfote greift um die Kante */
.lw-lugt { width: 62px; left: calc(100% - 7px); top: 16%; z-index: 4; transform-origin: 0 50%; }
.lw-auftritt.lw-lugt { animation: lw-raus .8s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes lw-raus { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.lw-figur:hover { animation: lw-wipp .5s ease-in-out 2 alternate; }
@keyframes lw-wipp { from { transform: rotate(0); } to { transform: rotate(-6deg); } }
.lw-auftritt.lw-oben { animation: lw-hoch .7s cubic-bezier(.2,.9,.3,1.2) both; }
.lw-auftritt.lw-seite { animation: lw-rein .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes lw-hoch { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lw-rein { from { transform: translateX(40px) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lw-figur, .lw-figur:hover { animation: none !important; } }
.lw-blase { position: absolute; z-index: 6; width: min(250px, 72vw); font: 500 14px/1.45 var(--font-sans); color: var(--jales-charcoal);
  background: #FFFDF8; border: 1px solid rgba(163,127,66,.5); border-radius: 14px; padding: 11px 13px 9px; box-shadow: 0 10px 26px rgba(30,45,36,.18); }
.lw-blase-oben { right: calc(14% + 80px); bottom: calc(100% + 26px); }
.lw-blase-seite { right: 54px; bottom: 60px; }
.lw-blase-lugt { right: 6px; top: calc(16% + 124px); }
.lw-ki { display: block; margin-top: 5px; font: 400 10.5px/1.3 var(--font-sans); color: var(--jales-warm-grey); }
@media (max-width: 700px) { .lw-oben { width: 58px; } .lw-seite { width: 48px; } .lw-blase-oben { right: 4%; bottom: calc(100% + 66px); } }

/* ---------- Streich: ein Bild hängt schief ---------- */
.lw-schief { transform: rotate(-1.6deg); transform-origin: 30% 0; transition: transform .6s; }
.lw-zettel { position: absolute; z-index: 5; right: 10px; bottom: -12px; font: italic 500 13px/1 var(--font-serif); color: var(--jales-charcoal);
  background: #FFF8E6; border: 1px solid rgba(163,127,66,.45); padding: 6px 9px; transform: rotate(3deg); box-shadow: 0 4px 10px rgba(0,0,0,.12); }

/* ---------- Sätze je Phase ---------- */
.lw-satz { display: flex; gap: 12px; align-items: center; font: 400 14.5px/1.6 var(--font-sans); max-width: 60ch; }
.lw-satz svg, .lw-satz img { width: 34px; height: auto; flex-shrink: 0; }