/* Halloween-Schicht fotomeetup.ch — Oktober 2026. Entfernen: diese Datei und halloween.js
   aus dem <head> nehmen, sonst ändert sich nichts an der Seite. */
:root {
  --hw-orange: #FF7A1A;
  --hw-glow: rgba(255, 122, 26, .45);
  --hw-violet: #7B3FE4;
}

/* Akzent Richtung Kürbis-Orange */
.hero__eyebrow, .hero__date { color: var(--hw-orange) !important; }
.hero__title em { color: var(--hw-orange); text-shadow: 0 0 28px var(--hw-glow); }
.hero__overlay { background: linear-gradient(180deg, rgba(20,6,30,.55) 0%, rgba(8,8,10,.35) 45%, rgba(8,8,10,.92) 100%) !important; }

/* Fledermäuse im Hero */
.hw-bats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.hw-bat { position: absolute; left: -80px; width: 56px; height: 28px; opacity: .85; filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); animation: hw-fly linear infinite; }
.hw-bat svg { width: 100%; height: 100%; animation: hw-flap .28s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes hw-fly {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30vw, -40px); }
  50%  { transform: translate(60vw, 30px); }
  75%  { transform: translate(90vw, -20px); }
  100% { transform: translate(calc(100vw + 160px), 10px); }
}

/* Kleine Halloween-Symbole an den Abschnittstiteln */
.hw-ico { display: inline-block; margin-right: .35em; font-style: normal; filter: drop-shadow(0 0 6px var(--hw-glow)); }

/* Einstieg «Seid ihr bereit?» */
.hw-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(123,63,228,.35), rgba(8,8,10,.97) 65%); backdrop-filter: blur(4px); }
.hw-gate__box { position: relative; max-width: 520px; width: 100%; text-align: center; padding: 38px 22px 34px; border-radius: 20px;
  border: 1px solid rgba(255,122,26,.45); background: rgba(14,14,16,.9); box-shadow: 0 0 60px rgba(255,122,26,.18); }
.hw-gate__pumpkin { font-size: 56px; line-height: 1; animation: hw-wobble 2.4s ease-in-out infinite; }
@keyframes hw-wobble { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.hw-gate h2 { font-family: var(--font-display); font-size: clamp(24px, 6.4vw, 36px); line-height: 1.15; margin: 14px 0 26px; color: #f5ede3; overflow-wrap: break-word; hyphens: auto; }
.hw-gate h2 em { color: var(--hw-orange); font-style: normal; }
.hw-gate__btns { position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; min-height: 56px; }
.hw-btn { min-width: 120px; min-height: 48px; padding: 12px 26px; border-radius: 12px; font-size: 17px; font-weight: 700; cursor: pointer; border: 0; font-family: var(--font-body); }
.hw-btn--ja { background: var(--hw-orange); color: #1a0d02; box-shadow: 0 0 24px var(--hw-glow); }
.hw-btn--ja:hover { transform: scale(1.05); }
.hw-btn--nein { background: transparent; color: #ddd; border: 1px solid rgba(255,255,255,.35); transition: transform .18s ease-out; }
.hw-gate__hinweis { margin-top: 18px; font-size: 13px; color: #9a9a9a; }

/* Explosion (Handy, «Nein») */
.hw-funke { position: fixed; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 10000; animation: hw-boom .9s ease-out forwards; }
@keyframes hw-boom { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.hw-knall { position: fixed; z-index: 10000; font-size: 64px; pointer-events: none; animation: hw-knall .7s ease-out forwards; }
@keyframes hw-knall { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; } }

/* Ton an/aus */
.hw-ton { position: fixed; left: 16px; bottom: 16px; z-index: 9000; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,122,26,.6);
  background: rgba(14,14,16,.85); color: var(--hw-orange); font-size: 20px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-bat svg, .hw-gate__pumpkin { animation: none; }
  .hw-bats { display: none; }
}

/* ---------- Mehr Halloween (Runde 2, 23.09.2026) ---------- */
body { background: radial-gradient(ellipse at 50% -10%, rgba(123,63,228,.18), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(255,122,26,.10), transparent 55%), var(--bg) !important; }
/* flackernder, leuchtender Titel */
.hero__title { animation: hw-flacker 5s infinite; }
@keyframes hw-flacker { 0%,19%,21%,62%,64%,100% { opacity: 1; text-shadow: 0 0 18px rgba(255,122,26,.55), 0 0 42px rgba(123,63,228,.45); } 20%,63% { opacity: .55; text-shadow: none; } }
/* Nebel über dem Hero */
.hw-nebel { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 30% 60%, rgba(180,160,220,.18), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(255,140,60,.12), transparent 60%);
  filter: blur(18px); animation: hw-nebel 22s ease-in-out infinite alternate; }
@keyframes hw-nebel { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
/* Mond */
.hw-mond { position: absolute; top: 9%; right: 7%; width: clamp(60px, 12vw, 130px); aspect-ratio: 1; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 38% 38%, #fff6d8, #ffd27a 55%, #e0902a); box-shadow: 0 0 60px 18px rgba(255,190,90,.35), 0 0 140px 40px rgba(255,122,26,.18); animation: hw-puls 4s ease-in-out infinite; }
@keyframes hw-puls { 50% { box-shadow: 0 0 80px 26px rgba(255,190,90,.5), 0 0 180px 60px rgba(255,122,26,.25); } }
/* leuchtende Knöpfe */
.btn-primary, .hw-btn--ja { animation: hw-knopf 2.2s ease-in-out infinite; background: linear-gradient(135deg, #FF7A1A, #ff9d3d) !important; color: #1a0d02 !important; }
@keyframes hw-knopf { 50% { box-shadow: 0 0 26px 6px rgba(255,122,26,.6), 0 0 60px 10px rgba(123,63,228,.3); } }
/* Abschnittstitel mit Glühen */
main section h2 { text-shadow: 0 0 22px rgba(255,122,26,.25); }
.hw-ico { animation: hw-schweben 3s ease-in-out infinite; }
@keyframes hw-schweben { 50% { transform: translateY(-5px) rotate(6deg); } }
/* schwebende Geister und Kürbisse über die ganze Seite */
.hw-deko { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.hw-schwebt { position: absolute; bottom: -60px; font-size: 26px; opacity: .55; filter: drop-shadow(0 0 10px rgba(255,122,26,.6)); animation: hw-steigt linear infinite; }
@keyframes hw-steigt { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, -55vh) rotate(12deg); } to { transform: translate(-20px, -115vh) rotate(-8deg); opacity: 0; } }
/* Spinne am Faden */
.hw-spinne { position: absolute; top: 0; left: 12%; z-index: 2; pointer-events: none; width: 2px; height: 90px; background: rgba(255,255,255,.35); transform-origin: top; animation: hw-faden 4.5s ease-in-out infinite; }
.hw-spinne::after { content: '🕷️'; position: absolute; bottom: -18px; left: -12px; font-size: 24px; }
@keyframes hw-faden { 50% { height: 170px; transform: rotate(4deg); } }
/* Karten und Rahmen in Halloween-Tönen */
.card, .price-card, .regeln-card, [class*="card"] { border-color: rgba(255,122,26,.28) !important; }
[class*="card"]:hover { box-shadow: 0 0 30px rgba(255,122,26,.25), 0 0 60px rgba(123,63,228,.18); }
/* Funken hinter dem Mauszeiger (nur Computer) */
.hw-spur { position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 9998; background: #FF7A1A; box-shadow: 0 0 10px #FF7A1A; animation: hw-spur .7s ease-out forwards; }
@keyframes hw-spur { to { transform: translateY(18px) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hw-nebel, .hw-mond, .btn-primary, .hw-btn--ja, .hw-ico, .hw-spinne { animation: none !important; }
  .hw-deko { display: none; }
}