/* 28.10.2026 Inhaber: Halloween-Aktion „Süßes oder Rabatt?“ – Startseiten-Banner (Variante C) + Spielseite /halloween.
   Nur auf Startseite (Hero, deutsch, Aktionszeitraum) und Spielseite geladen. Eigene Klassen mit hw-Präfix. */
:root { --hw-navy:#0f2a52; --hw-blue:#2c628d; --hw-gold:#e9b44c; --hw-orange:#e0782a; --hw-cream:#fff8ef; --hw-green:#1f8a63; }

/* ---------- Startseiten-Slider ---------- */
.hw-slider { position:relative; overflow:hidden; }
.hw-slide { transition:opacity .9s ease, visibility .9s; }
.hw-slide-promo { position:absolute; inset:0; opacity:0; visibility:hidden; z-index:2; }
.hw-slider.show-promo .hw-slide-promo { opacity:1; visibility:visible; }
.hw-slider.show-promo .hw-slide-main { opacity:0; }
.hw-banner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; text-decoration:none; background:#f6e3cc; }
/* Breitbanner: Original in der Mitte, GPT-Erweiterung links/rechts (banner-wide.webp 3584x1024). Höhe so, dass das Original nie beschnitten wird. */
.hw-banner { container-type:size; }
.hw-fill { position:absolute; inset:-30px; background-size:cover; background-position:6% 50%; filter:blur(8px); }
.hw-wide { position:absolute; left:50%; top:50%; height:max(min(100cqh, 66.667cqw), 28.571cqw); aspect-ratio:3584/1024; transform:translate(-50%,-50%); }
/* 28.10.: auf sehr breiten Bildschirmen (Banner breiter als 3,5:1) füllt die Bühne die ganze Breite statt seitlicher Unschärfe-Streifen; oben/unten wird etwas abgeschnitten */
.hw-wideimg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hw-banner .hw-art { position:absolute; left:28.571%; top:0; width:42.857%; height:100%; z-index:3; }
.hw-side { position:absolute; top:0; width:28.571%; height:100%; container-type:size; overflow:hidden; z-index:2; }
.hw-side.l { left:0; } .hw-side.r { right:0; }
.hw-side img { display:block; width:100%; pointer-events:none; user-select:none; }
/* Hexe fliegt eine Schleife und verschwindet hinter dem Automaten-Banner */
.hw-witch { position:absolute; left:0; top:0; width:40cqw; z-index:2; animation:hw-witch 17s ease-in-out infinite; }
.hw-witch img { filter:drop-shadow(0 0 1.2cqw rgba(255,214,120,.55)); animation:hw-bob 1.7s ease-in-out infinite alternate; }
@keyframes hw-witch {
  0% { transform:translate(-60cqw,38cqh) scaleX(1) rotate(-6deg); }
  38% { transform:translate(45cqw,6cqh) scaleX(1) rotate(-10deg); }
  46% { transform:translate(57cqw,12cqh) scaleX(1) rotate(4deg); }
  50% { transform:translate(55cqw,22cqh) scaleX(-1) rotate(-4deg); }
  80% { transform:translate(8cqw,52cqh) scaleX(-1) rotate(-8deg); }
  92%,100% { transform:translate(-60cqw,40cqh) scaleX(-1) rotate(-6deg); }
}
.hw-witch.far { width:24cqw; filter:blur(.3px); animation:hw-witch-far 21s linear -6s infinite; }
@keyframes hw-witch-far { 0% { transform:translate(110cqw,8cqh) scaleX(-1); opacity:.92; } 40% { transform:translate(50cqw,2cqh) scaleX(-1) scale(.8) rotate(-6deg); opacity:.92; } 62% { transform:translate(22cqw,10cqh) scaleX(-1) scale(.35) rotate(4deg); opacity:0; } 100% { transform:translate(110cqw,8cqh) scaleX(-1); opacity:0; } }
@keyframes hw-bob { from { transform:translateY(-5%) rotate(-3deg); } to { transform:translateY(5%) rotate(3deg); } }
/* Spinne seilt sich ab, federt, pendelt und klettert wieder hoch */
.hw-spider-rig { position:absolute; left:52cqw; top:0; width:22cqw; height:100cqh; transform-origin:50% 0; animation:hw-sway 3.2s ease-in-out infinite alternate; z-index:3; }
.hw-spider { --drop:40cqh; position:absolute; left:0; top:0; width:100%; animation:hw-drop 13s ease-in-out infinite; }
.hw-spider img { animation:hw-wiggle 2.6s ease-in-out infinite; }
.hw-thread { position:absolute; left:50%; bottom:92%; width:2px; height:100cqh; margin-left:-1px; background:linear-gradient(to bottom, rgba(255,255,255,.2), rgba(235,235,240,.95)); box-shadow:0 0 2px rgba(255,255,255,.8); }
@keyframes hw-drop {
  0%,4% { transform:translateY(-130%); }
  16% { transform:translateY(calc(var(--drop) * 1.1)); } 19% { transform:translateY(calc(var(--drop) * .9)); } 22% { transform:translateY(calc(var(--drop) * 1.05)); } 25% { transform:translateY(var(--drop)); }
  55% { transform:translateY(var(--drop)); } 59% { transform:translateY(calc(var(--drop) * .7)); } 63% { transform:translateY(calc(var(--drop) * 1.15)); } 67% { transform:translateY(var(--drop)); }
  80% { transform:translateY(calc(var(--drop) * .95)); } 94%,100% { transform:translateY(-130%); }
}
@keyframes hw-sway { from { transform:rotate(-4deg); } to { transform:rotate(4deg); } }
@keyframes hw-wiggle { 0%,70%,100% { transform:rotate(0) scale(1); } 75% { transform:rotate(-7deg) scale(1.03); } 80% { transform:rotate(6deg) scale(.98); } 85% { transform:rotate(-4deg); } }
/* Fledermäuse: Flügelschlag + Flugbahn */
.hw-bat { position:absolute; left:0; top:0; width:20cqw; z-index:2; }
.hw-bat img { animation:hw-flap .22s ease-in-out infinite alternate; transform-origin:50% 40%; }
@keyframes hw-flap { from { transform:scale(1,1); } to { transform:scale(.62,1.08); } }
.hw-bat.b1 { animation:hw-bat1 11s ease-in-out infinite; }
.hw-bat.b2 { width:16cqw; animation:hw-bat2 9s ease-in-out -3s infinite; }
@keyframes hw-bat1 { 0% { transform:translate(70cqw,70cqh); } 25% { transform:translate(40cqw,45cqh) rotate(-8deg); } 50% { transform:translate(10cqw,62cqh) rotate(6deg); } 75% { transform:translate(30cqw,30cqh) rotate(-4deg); } 100% { transform:translate(70cqw,70cqh); } }
@keyframes hw-bat2 { 0% { transform:translate(10cqw,30cqh); } 30% { transform:translate(30cqw,62cqh) rotate(8deg); } 60% { transform:translate(78cqw,40cqh) rotate(-6deg); } 100% { transform:translate(10cqw,30cqh); } }
.hw-dots { position:absolute; z-index:5; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; padding:6px 10px; border-radius:20px; background:rgba(255,255,255,.75); backdrop-filter:blur(4px); }
.hw-dots button { width:9px; height:9px; padding:0; border:0; border-radius:9px; background:#b9c9d6; cursor:pointer; transition:width .25s, background .25s; }
.hw-dots button.is-current { width:26px; background:var(--hw-blue); }
.hw-ribbon { position:absolute; z-index:6; top:14px; right:14px; padding:6px 12px; border-radius:20px; background:var(--hw-navy); color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em; box-shadow:0 4px 14px rgba(15,42,82,.25); }

/* ---------- Kunstwerk mit Ebenen (Banner + Spiel) ---------- */
.hw-art { position:relative; aspect-ratio:1536/1024; container-type:inline-size; }
.hw-art > img.hw-plate { position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
.hw-layer { position:absolute; pointer-events:none; }

/* Lampen oben am Automaten blinken abwechselnd */
.hw-bulb { position:absolute; width:4.2%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,215,1) 0 18%, rgba(255,214,110,.75) 38%, rgba(255,190,70,0) 70%);
  mix-blend-mode:screen; animation:hw-bulb 1.2s steps(1,end) infinite; }
.hw-bulb:nth-child(2n) { animation-delay:.6s; }
@keyframes hw-bulb { 0%{opacity:1} 50%{opacity:.15} }
.machine.is-spinning .hw-bulb { animation-duration:.3s; }
.machine.winner .hw-bulb { animation:hw-bulb .18s steps(1,end) infinite; }

/* Sterne funkeln */
.hw-twinkle { position:absolute; width:5%; aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,255,240,.95) 0 6%, rgba(255,222,140,.55) 22%, transparent 60%); mix-blend-mode:screen; animation:hw-twinkle 2.6s ease-in-out infinite; }
.hw-twinkle::before, .hw-twinkle::after { content:''; position:absolute; left:50%; top:50%; width:90%; height:4%; background:linear-gradient(90deg,transparent,#fff7d6,transparent); transform:translate(-50%,-50%); }
.hw-twinkle::after { transform:translate(-50%,-50%) rotate(90deg); }
@keyframes hw-twinkle { 0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)} 45%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(25deg)} }

/* warmes Leuchten: Kürbis flackert, Automat atmet */
.hw-glow-pumpkin { left:38%; top:56%; width:27%; height:28%; background:radial-gradient(ellipse, rgba(255,200,70,.55), transparent 65%); mix-blend-mode:screen; animation:hw-flicker 3.2s ease-in-out infinite; }
.hw-glow-machine { left:56%; top:8%; width:40%; height:58%; background:radial-gradient(ellipse, rgba(255,236,170,.45), transparent 70%); mix-blend-mode:screen; animation:hw-breathe 4s ease-in-out infinite; }
@keyframes hw-flicker { 0%,100%{opacity:.35} 20%{opacity:.8} 23%{opacity:.5} 40%{opacity:.95} 70%{opacity:.55} 75%{opacity:.85} }
@keyframes hw-breathe { 0%,100%{opacity:.2} 50%{opacity:.85} }

/* Walzen */
.reel-bed { position:absolute; z-index:5; pointer-events:none; left:59.4%; top:31%; width:27.8%; height:27.6%; }
.reel-lane { position:absolute; top:0; height:100%; width:29%; overflow:hidden; border-radius:18% / 8%; container-type:size;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%); }
.reel-lane:nth-child(1) { left:0 } .reel-lane:nth-child(2) { left:35.5% } .reel-lane:nth-child(3) { left:71% }
.reel-lane::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,rgba(91,51,11,.22),transparent 26%,transparent 74%,rgba(101,54,10,.2)); }
.reel-track { position:absolute; left:0; top:0; width:100%; will-change:transform; }
.reel-cell { height:33.333cqh; display:flex; align-items:center; justify-content:center; font-size:22cqh; line-height:1; text-shadow:0 3px 3px rgba(92,53,13,.15); user-select:none; }
.reel-lane.stopped { animation:hw-thump .22s ease-out; }
@keyframes hw-thump { 0%{transform:translateY(-3px)} 60%{transform:translateY(2px)} 100%{transform:none} }
.reel-lane.hit { box-shadow:inset 0 0 0 3px rgba(255,206,67,.9), inset 0 0 22px rgba(255,206,67,.7); }
.win-line { position:absolute; z-index:6; left:58.6%; top:44.6%; width:29.4%; height:2px; background:linear-gradient(90deg,transparent,rgba(255,213,96,.85),transparent); opacity:.35; pointer-events:none; }
.machine.winner .win-line { opacity:1; box-shadow:0 0 10px 4px rgba(255,206,67,.8),0 0 28px rgba(255,206,67,.6); }

/* Hebel */
.hw-lever { position:absolute; z-index:9; right:-.3%; top:15%; width:10.8%; height:55%; touch-action:none; user-select:none; }
.hw-lever svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(3px 6px 3px rgba(62,34,13,.28)); pointer-events:none; }
.hw-game .hw-lever { cursor:grab; }
.hw-game .machine.is-locked .hw-lever { cursor:not-allowed; }

/* Knopf „JETZT DREHEN“ im Bild: pulsierender Ring lädt zum Klicken ein */
.hw-cta { position:absolute; z-index:10; left:5.2%; top:49.8%; width:30.4%; height:9.3%; border-radius:100px; border:0; padding:0; background:transparent; cursor:pointer; }
.hw-cta::before, .hw-cta::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.hw-cta::before { box-shadow:0 0 0 0 rgba(233,180,76,.75); animation:hw-ring 2s ease-out infinite; }
.hw-cta::after { background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); background-size:250% 100%; animation:hw-cta-shine 3s ease-in-out infinite; mix-blend-mode:screen; }
@keyframes hw-ring { 0%{box-shadow:0 0 0 0 rgba(233,180,76,.8)} 80%,100%{box-shadow:0 0 0 1.6cqw rgba(233,180,76,0)} }
@keyframes hw-cta-shine { 0%{background-position:120% 0} 60%,100%{background-position:-120% 0} }
.hw-cta:hover::before, .hw-cta:focus-visible::before { animation-duration:1s; }

@media (prefers-reduced-motion: reduce) { .hw-art *, .hw-art *::before, .hw-art *::after { animation:none !important; } }

/* ---------- Aktionsseite ---------- */
.hw-game { background:linear-gradient(180deg,#fff8ef 0%,#fff 520px); }
.hw-wrap { max-width:1240px; margin:0 auto; padding:28px 16px 56px; }
.hw-intro { text-align:center; max-width:760px; margin:0 auto 22px; }
.hw-kicker { color:var(--hw-orange); font-weight:800; letter-spacing:.14em; font-size:12px; text-transform:uppercase; }
.hw-intro h1 { font-size:clamp(30px,5vw,52px); color:var(--hw-navy); margin:6px 0 8px; font-weight:800; }
.hw-intro p { color:#40566b; font-size:17px; margin:0; }
.hw-period { display:inline-block; margin-top:12px; padding:5px 12px; border-radius:20px; background:#fdebd8; color:#8a4211; font-weight:700; font-size:13px; }
.hw-stage { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr); gap:24px; align-items:start; }
.hw-stage .hw-art { border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(110,60,20,.18); }
.hw-lock { position:absolute; inset:0; z-index:12; display:flex; align-items:flex-end; justify-content:center; padding:4%; background:linear-gradient(to top,rgba(15,42,82,.45),transparent 45%); transition:opacity .4s; }
.hw-lock span { background:#fff; color:var(--hw-navy); border-radius:30px; padding:8px 16px; font-weight:700; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.machine:not(.is-locked) .hw-lock { opacity:0; pointer-events:none; }
.hw-panel { background:#fff; border:1px solid #f0e2cf; border-radius:18px; padding:22px; box-shadow:0 10px 30px rgba(110,60,20,.08); }
.hw-panel h2 { font-size:20px; color:var(--hw-navy); margin:0 0 10px; font-weight:800; }
.hw-panel ul { padding-left:18px; margin:0 0 14px; color:#33475b; font-size:14.5px; }
.hw-panel li { margin:4px 0; }
.hw-check { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:12px; background:#f6f9fb; font-size:14px; color:#25384a; cursor:pointer; }
.hw-check input { width:20px; height:20px; margin-top:1px; flex:none; accent-color:var(--hw-blue); }
.hw-check.shake { animation:hw-shake .4s; outline:2px solid #e0782a; }
@keyframes hw-shake { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.hw-btn { display:block; width:100%; margin-top:14px; padding:14px 18px; border:0; border-radius:40px; background:var(--hw-navy); color:#fff; font-weight:800; font-size:16px; letter-spacing:.04em; cursor:pointer; text-align:center; text-decoration:none; transition:transform .15s, background .2s; }
.hw-btn:hover { background:#173d73; color:#fff; } .hw-btn:active { transform:scale(.98); }
.hw-btn[disabled] { background:#9aa9b8; cursor:not-allowed; }
.hw-btn.alt { background:#fff; color:var(--hw-navy); border:2px solid var(--hw-navy); }
.hw-counter { display:flex; justify-content:space-between; align-items:baseline; font-weight:700; color:#5a6f82; font-size:14px; }
.hw-counter strong { font-size:26px; color:var(--hw-navy); }
.hw-pips { display:flex; gap:6px; margin:10px 0 4px; }
.hw-pips i { flex:1; height:8px; border-radius:6px; background:#e7eef3; transition:background .3s; }
.hw-pips i.used { background:var(--hw-orange); }
.hw-msg { min-height:48px; margin:12px 0 0; color:#25384a; font-size:15px; }
.hw-small { font-size:12.5px; color:#6a7c8d; margin-top:10px; }
.hw-small a, .hw-panel a { color:var(--hw-blue); }
.hw-section { margin-top:40px; }
.hw-section h2 { font-size:24px; color:var(--hw-navy); font-weight:800; margin-bottom:6px; }
.hw-prizes { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-top:14px; }
.hw-prize { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid #f0e2cf; }
.hw-prize b { font-size:28px; line-height:1; }
.hw-prize span { display:block; font-weight:700; color:var(--hw-navy); font-size:14.5px; }
.hw-prize small { color:#7a8a99; font-size:12px; }
.hw-terms { margin-top:14px; border:1px solid #e3e9ee; border-radius:14px; background:#fff; }
.hw-terms summary { padding:14px 18px; font-weight:700; color:var(--hw-navy); cursor:pointer; }
.hw-terms ol { padding:0 22px 16px 40px; color:#33475b; font-size:14px; }
.hw-terms li { margin:6px 0; }

/* Gewinn-Dialog */
.hw-dialog { border:0; border-radius:22px; padding:0; max-width:440px; width:calc(100% - 32px); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.hw-dialog::backdrop { background:rgba(15,25,40,.55); backdrop-filter:blur(3px); }
.hw-dialog-in { padding:28px 26px 22px; text-align:center; background:radial-gradient(circle at 50% 0,#fff1d8,#fff 60%); }
.hw-dialog .big { font-size:54px; line-height:1; }
.hw-dialog h2 { color:var(--hw-navy); font-weight:800; margin:8px 0 4px; font-size:26px; }
.hw-dialog .prize { display:inline-block; margin:10px 0; padding:10px 18px; border-radius:14px; background:var(--hw-navy); color:#fff; font-size:22px; font-weight:800; }
.hw-code { display:flex; gap:8px; justify-content:center; align-items:center; margin:8px 0; }
.hw-code code { font-size:20px; letter-spacing:.08em; padding:8px 14px; border:2px dashed var(--hw-orange); border-radius:10px; color:#7a3a0c; background:#fff8ef; }
.hw-code button { border:0; background:#f1f5f8; border-radius:10px; padding:9px 12px; cursor:pointer; font-weight:700; color:var(--hw-navy); }
.hw-confetti { position:fixed; inset:0; pointer-events:none; z-index:2000; overflow:hidden; }
.hw-confetti i { position:absolute; top:-20px; width:10px; height:14px; border-radius:2px; animation:hw-conf 2.6s ease-in forwards; }
@keyframes hw-conf { to { transform:translateY(105vh) rotate(720deg); opacity:.9 } }

@media (max-width: 900px) {
  .hw-stage { grid-template-columns:1fr; }
  .hw-wrap { padding-top:18px; }
  .hw-ribbon { top:8px; right:8px; font-size:11px; padding:4px 9px; }
  .hw-dots { bottom:8px; }
}

/* Blätter im Wind (Canvas, nur Handy) */
.hw-wind { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }

/* Mittelvideo (Gemini, 16:9-Ausschnitt x 882–2702 von 3584) über dem Standbild, Ränder weich.
   Seitenvideos auf den sichtbaren Teil beschnitten: links x 0–1046 (736 von 1280 px), rechts x 2546–3584 (550–1280 px). */
.hw-video { position:absolute; z-index:1; left:24.609%; top:0; width:50.781%; height:100%; object-fit:fill;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); }

.hw-video.side.l { left:0; width:29.199%; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88.7%,transparent 99.1%); mask-image:linear-gradient(90deg,#000 0,#000 88.7%,transparent 99.1%); }
.hw-video.side.r { left:71.039%; width:28.961%; -webkit-mask-image:linear-gradient(90deg,transparent .5%,#000 10.2%,#000 100%); mask-image:linear-gradient(90deg,transparent .5%,#000 10.2%,#000 100%); }

/* SVG-Symbole (Smaragde, Sieben) */
.reel-cell .sym-svg { height:62%; width:auto; filter:drop-shadow(0 2px 2px rgba(92,53,13,.2)); }
.hw-prize b .sym-svg { height:28px; width:28px; display:block; }
.hw-dialog .big .sym-svg { height:58px; width:58px; }

.hw-slider.no-anim .hw-slide { transition:none !important; }

/* ---------- Handy: Hochformat-Motiv 2:3, füllt den Banner (cover) ---------- */
.hw-port { position:absolute; inset:0; overflow:hidden; background:#f6e3cc; }
.hw-mart { position:absolute; left:50%; top:50%; width:max(100cqw, 66.667cqh); aspect-ratio:2/3; transform:translate(-50%,-50%); container-type:inline-size; }
.hw-mimg, .hw-mart video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.hw-mart .hw-bulb { width:4.6%; }
.reel-bed.m { left:41.5%; top:54.4%; width:40.5%; height:17.6%; }
.reel-bed.m .reel-lane { width:31.5%; }
.reel-bed.m .reel-lane:nth-child(2) { left:33.7%; } .reel-bed.m .reel-lane:nth-child(3) { left:67.5%; }
.hw-lever.m { left:85%; right:auto; top:49%; width:13%; height:21.1%; }
.hw-cta.m { left:25.6%; top:34.2%; width:48.8%; height:6.6%; }
.hw-mglow { left:10%; top:71%; width:39%; height:17%; background:radial-gradient(ellipse, rgba(255,200,70,.6), transparent 65%); mix-blend-mode:screen; animation:hw-flicker 3.2s ease-in-out infinite; }
.hw-banner:has(.hw-port) .hw-ribbon { top:8px; right:8px; }


/* Spielseite: Bild ohne Werbeschrift, Ausschnitt x 400–1536, y 60–1024 des 1536x1024-Motivs (Automat größer);
   alle Ebenen bleiben im vollen Raster und werden mit .hw-art-full verschoben */
.hw-art.hw-crop { aspect-ratio:1136/964; overflow:hidden; }
.hw-art-full { position:absolute; left:-35.211%; top:-6.224%; width:135.211%; height:106.224%; container-type:inline-size; }
.hw-art-full > img.hw-plate { position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }

/* 28.10. Preiskarten: Titel nicht abschneiden, „wie oft“ farbig, Jackpot 7-7-7 als breite Goldkarte */
.hw-prizes { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 760px) { .hw-prizes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 440px) { .hw-prizes { grid-template-columns:1fr; } }
.hw-prize { align-items:flex-start; }
.hw-prize span { overflow-wrap:anywhere; }
.hw-prize small { display:block; line-height:1.35; margin-top:2px; }
.hw-prize small.often { color:var(--hw-orange); font-weight:700; }
.hw-prize.jackpot { grid-column:1 / -1; align-items:center; background:linear-gradient(100deg,#fff6e0,#ffe7b0 55%,#fff6e0); border-color:#e9b44c; }
.hw-prize.jackpot b .sym-svg { height:40px; width:40px; }
.hw-prize.jackpot span { font-size:17px; }

/* Gewinn-Fenster: Code per E-Mail */
.hw-mail { margin:12px 0 4px; text-align:left; }
.hw-mail-sent { margin:0; padding:10px 12px; border-radius:10px; background:#ecf8f1; color:#14593d; font-size:14px; }
.hw-mail-form label { font-size:13.5px; color:#25384a; font-weight:700; }
.hw-mail-row { display:flex; gap:6px; margin:6px 0; }
.hw-mail-row input { flex:1; min-width:0; padding:9px 11px; border:1px solid #c9d4de; border-radius:10px; font-size:15px; }
.hw-mail-row button { border:0; border-radius:10px; padding:9px 14px; background:var(--hw-orange); color:#fff; font-weight:800; cursor:pointer; }
.hw-mail-row button[disabled] { opacity:.6; }
.hw-mail-consent { display:flex; gap:8px; align-items:flex-start; font-weight:400 !important; font-size:12.5px !important; color:#5a6f82 !important; }
.hw-mail-consent input { margin-top:2px; accent-color:var(--hw-blue); }
.hw-mail-error { min-height:0; margin:4px 0 0; color:#b42318; font-size:12.5px; }

/* Warenkorb/Kasse: Hinweis zum Halloween-Bonus */
.hw-cart-hint { margin:0 0 16px; padding:12px 16px; border-radius:12px; background:linear-gradient(100deg,#fff6e0,#ffe7b0); border:1px solid #e9b44c; color:#4a2a07; font-size:15px; }

/* 28.10. Gewinn-Fenster festlicher (Inhaber: „добавь немного праздничности“): Fledermaus + Blätter in den Ecken,
   Symbol springt mit Goldschein, Preis-Plakette mit schimmerndem Goldrand */
.hw-dialog-in { position:relative; overflow:hidden; background:radial-gradient(circle at 50% 0,#ffe9c2 0,#fff7ea 38%,#fff 70%); }
.hw-dialog-in::before, .hw-dialog-in::after { content:''; position:absolute; pointer-events:none; background-repeat:no-repeat; background-size:contain; }
.hw-dialog-in::before { left:-10px; top:-6px; width:90px; height:90px; background-image:url('assets/halloween/leaves/leaf1.webp'), url('assets/halloween/leaves/leaf6.webp');
  background-size:56px, 40px; background-position:0 0, 40px 34px; transform:rotate(-14deg); opacity:.9; }
.hw-dialog-in::after { right:-6px; top:8px; width:78px; height:56px; background-image:url('assets/halloween/bat.webp'); animation:hw-dlg-bat 2.4s ease-in-out infinite alternate; }
@keyframes hw-dlg-bat { from { transform:translateY(-3px) rotate(-6deg); } to { transform:translateY(5px) rotate(5deg); } }
.hw-dialog .hw-dlg-kicker { color:var(--hw-orange); font-weight:800; letter-spacing:.14em; font-size:11px; text-transform:uppercase; margin-bottom:4px; }
.hw-dialog .big { display:inline-block; filter:drop-shadow(0 0 14px rgba(255,196,80,.85)); animation:hw-dlg-pop .7s cubic-bezier(.2,1.6,.4,1) both, hw-dlg-float 2.6s ease-in-out .7s infinite alternate; }
@keyframes hw-dlg-pop { from { transform:scale(.2) rotate(-20deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes hw-dlg-float { from { transform:translateY(0); } to { transform:translateY(-5px); } }
.hw-dialog .prize { position:relative; box-shadow:0 0 0 3px #e9b44c, 0 8px 22px rgba(233,180,76,.45); animation:hw-dlg-glow 2s ease-in-out infinite alternate; }
@keyframes hw-dlg-glow { from { box-shadow:0 0 0 3px #e9b44c, 0 6px 16px rgba(233,180,76,.35); } to { box-shadow:0 0 0 3px #ffd77a, 0 10px 30px rgba(233,180,76,.7); } }
@media (prefers-reduced-motion: reduce) { .hw-dialog *, .hw-dialog-in::after { animation:none !important; } }

/* Gewinn-Gutschein-Bild im Fenster */
.hw-dialog .hw-coupon { display:block; width:100%; height:auto; margin:10px 0 6px; border-radius:12px; box-shadow:0 10px 26px rgba(122,58,12,.28); animation:hw-dlg-pop .7s cubic-bezier(.2,1.6,.4,1) both; }
.hw-dialog .hw-coupon[hidden] { display:none; }
.hw-dialog { max-width:520px; }

/* ---------- 28.10. abends: außer Deutsch Motiv ohne Schrift + Text darüber (Lage wie die eingemalte deutsche Schrift) ---------- */
.hw-copy { position:absolute; z-index:4; left:4.2%; top:14%; width:45%; display:flex; flex-direction:column; align-items:flex-start; gap:1.5cqw; pointer-events:none; }
.hw-copy-t { display:block; width:100%; font-family:'Libre Caslon Text', Georgia, serif; font-weight:700; text-transform:uppercase; color:#13254f; font-size:7.3cqw; line-height:1.04; letter-spacing:-.01em; text-shadow:0 .22cqw 0 rgba(255,248,232,.85); overflow-wrap:normal; word-break:normal; }
.hw-copy-s { font-family:'Source Sans 3', Arial, sans-serif; font-weight:600; color:#13254f; font-size:2.35cqw; line-height:1.25; }
.hw-copy-b { position:relative; margin-top:1.6cqw; display:inline-flex; align-items:center; gap:1.3cqw; background:#13254f; color:#fff; font-family:'Source Sans 3', Arial, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1.85cqw; line-height:1; padding:2.1cqw 3.8cqw; border-radius:100px; box-shadow:0 .6cqw 1.6cqw rgba(19,37,79,.25); }
.hw-copy-b i { font-style:normal; font-size:1.35em; line-height:.8; }
.hw-copy-b::before { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(233,180,76,.75); animation:hw-ring 2s ease-out infinite; }
.hw-copy-b::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); background-size:250% 100%; animation:hw-cta-shine 3s ease-in-out infinite; mix-blend-mode:screen; }
.hw-copy.m { left:8%; top:10.8%; width:84%; align-items:center; text-align:center; gap:2.2cqw; }
.hw-copy.m .hw-copy-t { font-size:11.2cqw; }
.hw-copy.m .hw-copy-s { font-size:3.7cqw; }
.hw-copy.m .hw-copy-b { font-size:3.1cqw; padding:3.3cqw 7.5cqw; margin-top:1.2cqw; }
@media (prefers-reduced-motion: reduce) { .hw-copy-b::before, .hw-copy-b::after { animation:none; } }