/* =============================================================
   Stoerer "Halloween-Special" — Spec 041 (05.10.2026, Fassung 2)
   Ersetzt bis zum 31.10.2026 den Francesca-Stoerer an denselben
   Einhaengepunkten (#lz-stoerer). Aufbau: assets/js/stoerer-halloween.js.

   Look wie /halloween: Schwarz, Blutrot, Glut. Zombie-Loop als Video
   rechts, links dunkler Verlauf als Lesehilfe, Blut laeuft vom oberen
   Rand (animiertes WebP mit Alpha), animierter Pinsel-Slogan, Preis-
   Lettering (AB klein, 27,75 € gross, IM MONAT klein), Countdown mit
   Millisekunden, Tropfen unter dem Knopf, Spinne laeuft am Rand.

   Hausregeln: kein text-shadow, Radius 8px, Buttons 6px, keine
   Versalien im Text (nur in den Lettering-Grafiken), KI-Hinweis
   winzig ohne Kasten.
   ============================================================= */

.lzh{
  --lzh-bg:#050406;
  --lzh-line:rgba(255,255,255,.14);
  --lzh-line-2:rgba(255,255,255,.26);
  --lzh-text:#f3ece9;
  --lzh-muted:#b9aaa6;
  --lzh-ember:#ff8c3c;
  --lzh-blut:#b3101c;
  margin:18px 0 0;
  max-width:460px;
}
.lzh[hidden]{display:none}
.lzh.is-mitte{margin-left:auto;margin-right:auto}
.lzh.is-gross{max-width:520px}

/* ---------- Karte ---------- */
.lzh__card{
  position:relative;display:block;width:100%;min-height:200px;
  border:1px solid var(--lzh-line);border-radius:8px;
  background:var(--lzh-bg);color:var(--lzh-text);
  overflow:hidden;isolation:isolate;text-align:left;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9);
  transition:transform .22s var(--ease,ease),border-color .22s ease;
}
.lzh__card:hover{transform:translateY(-2px);border-color:var(--lzh-line-2)}
.lzh__link{position:absolute;inset:0;z-index:3;display:block}
.lzh__link:focus-visible{outline:2px solid var(--lzh-ember);outline-offset:-3px;border-radius:8px}

.lzh__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%;pointer-events:none}
.lzh__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(94deg,rgba(5,4,6,.97) 0%,rgba(5,4,6,.9) 36%,rgba(5,4,6,.42) 62%,rgba(5,4,6,.18) 84%,rgba(5,4,6,.4) 100%),
    linear-gradient(180deg,rgba(5,4,6,.3) 0%,rgba(5,4,6,0) 35%,rgba(5,4,6,.5) 100%);
}
.lzh__blut{position:absolute;top:-1px;left:0;z-index:2;width:100%;height:auto;pointer-events:none;opacity:.96}
.lzh__in{position:relative;z-index:2;padding:14px 16px 13px;pointer-events:none}

/* ---------- Kopf: animierter Slogan + Preis-Lettering ---------- */
.lzh__eyebrow{display:block;width:210px;height:auto;margin:0 0 2px -6px}
.lzh__eyebrow-t{display:block;font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--lzh-ember);margin:0 0 6px}
.lzh__preis{display:block;width:290px;max-width:100%;height:auto;margin:-6px 0 2px -2px}
.lzh__preis-t{display:block;font-size:14px;font-weight:500;line-height:1.1;color:var(--lzh-text);margin:0 0 6px}
.lzh__preis-t b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--lzh-ember);margin:2px 0}
.lzh__sub{display:block;font-size:12.2px;font-weight:400;line-height:1.35;color:var(--lzh-muted);max-width:360px}
.lzh__sub em{font-style:normal;color:var(--lzh-text);font-weight:600}

/* ---------- Fusszeile: Countdown mit Millisekunden, Knopf ---------- */
.lzh__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:11px 0 0;padding:10px 0 0;border-top:1px solid var(--lzh-line)}
.lzh__cd{display:flex;flex-direction:column;gap:2px;min-width:0}
.lzh__cdl{font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--lzh-muted)}
.lzh__cdz{display:inline-flex;align-items:baseline;gap:4px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--lzh-ember);white-space:nowrap;line-height:1}
.lzh__cdd{font-size:21px}
.lzh__cdt{font-size:11px;font-weight:600;color:var(--lzh-muted);margin-right:4px}
.lzh__cdr{font-size:21px}
.lzh__cdm{font-size:12px;font-weight:700;color:#ff3d4f;min-width:3ch;animation:lzhPuls 1s steps(1) infinite}
@keyframes lzhPuls{0%,100%{opacity:1}50%{opacity:.55}}

.lzh__cta{
  position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:10px 14px;border-radius:6px;background:var(--lzh-blut);color:#fff;
  font-size:12.5px;font-weight:700;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,80,96,.45);
  animation:lzhGlimmen 4s ease-in-out infinite;
}
.lzh__cta svg{width:13px;height:13px;fill:currentColor}
@keyframes lzhGlimmen{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,80,96,.45),0 0 10px rgba(179,16,28,.15)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,120,130,.8),0 0 22px rgba(179,16,28,.4)}
}
.lzh__tropfen{position:absolute;left:0;right:0;top:100%;height:0;pointer-events:none;z-index:2}
.lzh__tropfen i{position:absolute;left:var(--x,30%);top:-3px;width:6px;height:40px;background:var(--t) center top/100% auto no-repeat;transform-origin:50% 0;animation:lzhTropfen var(--d,8s) cubic-bezier(.6,0,.9,.3) var(--v,0s) infinite}
@keyframes lzhTropfen{
  0%{transform:scaleY(.12);opacity:0}10%{opacity:1}62%{transform:scaleY(.55);opacity:1}78%{transform:scaleY(1);opacity:1}
  86%{transform:translateY(22px) scaleY(1.05);opacity:.9}100%{transform:translateY(40px) scaleY(1);opacity:0}
}

/* ---------- Spinne laeuft am Kartenrand entlang (Laufzyklus als animiertes WebP, Weg per Keyframes) ---------- */
.lzh__spinne{
  position:absolute;z-index:6;left:2px;top:2px;width:46px;height:46px;
  pointer-events:none;opacity:0;transform:rotate(90deg);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
.lzh__spinne.is-los{opacity:1;animation:lzhSpinne 34s linear 1.5s infinite}
@keyframes lzhSpinne{
  0%  {left:2px;top:2px;transform:rotate(90deg)}
  24% {left:calc(100% - 48px);top:2px;transform:rotate(90deg)}
  26% {left:calc(100% - 48px);top:2px;transform:rotate(180deg)}
  48% {left:calc(100% - 48px);top:calc(100% - 48px);transform:rotate(180deg)}
  50% {left:calc(100% - 48px);top:calc(100% - 48px);transform:rotate(270deg)}
  74% {left:2px;top:calc(100% - 48px);transform:rotate(270deg)}
  76% {left:2px;top:calc(100% - 48px);transform:rotate(360deg)}
  98% {left:2px;top:2px;transform:rotate(360deg)}
  100%{left:2px;top:2px;transform:rotate(450deg)}
}
.lzh__ki{position:absolute;right:8px;bottom:5px;z-index:2;font-size:8px;line-height:1;color:rgba(255,255,255,.55);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .lzh__cta,.lzh__tropfen i,.lzh__cdm{animation:none}
  .lzh__tropfen i{transform:scaleY(.5);opacity:1}
  .lzh__spinne,.lzh__spinne.is-los{opacity:1;animation:none;left:auto;right:6px;top:auto;bottom:6px;transform:rotate(290deg)}
}

/* ---------- Telefon ---------- */
@media (max-width:640px){
  .lzh{max-width:none}
  .lzh__card{min-height:0}
  .lzh__bg{object-position:84% 50%}
  .lzh__scrim{background:
    linear-gradient(94deg,rgba(5,4,6,.97) 0%,rgba(5,4,6,.9) 46%,rgba(5,4,6,.5) 72%,rgba(5,4,6,.3) 100%),
    linear-gradient(180deg,rgba(5,4,6,.3) 0%,rgba(5,4,6,0) 35%,rgba(5,4,6,.5) 100%)}
  .lzh__in{padding:14px 14px 12px}
  .lzh__eyebrow{width:190px}
  .lzh__preis{width:255px}
  .lzh__sub{font-size:11.8px}
  .lzh__foot{gap:10px}
  .lzh__cdd,.lzh__cdr{font-size:19px}
  .lzh__spinne{width:38px;height:38px}
  @keyframes lzhSpinne{
    0%  {left:2px;top:2px;transform:rotate(90deg)}
    24% {left:calc(100% - 40px);top:2px;transform:rotate(90deg)}
    26% {left:calc(100% - 40px);top:2px;transform:rotate(180deg)}
    48% {left:calc(100% - 40px);top:calc(100% - 40px);transform:rotate(180deg)}
    50% {left:calc(100% - 40px);top:calc(100% - 40px);transform:rotate(270deg)}
    74% {left:2px;top:calc(100% - 40px);transform:rotate(270deg)}
    76% {left:2px;top:calc(100% - 40px);transform:rotate(360deg)}
    98% {left:2px;top:2px;transform:rotate(360deg)}
    100%{left:2px;top:2px;transform:rotate(450deg)}
  }
}