/* A2 Digital Works — Paket 80 (17.10.2026): Navigation ruhiger · Scroll-Entlastung am Handy · Fußzeilen-Bild „A2-Studio Wien“ */

/* ── Navigation ─────────────────────────────────────────────────────────────
   Aykut: Belegerl und Ori Live sind zu stark hervorgehoben, müssen nicht blau sein und keine Icons haben.
   Hauptliste nur noch Seiten der Website; die beiden Produkte stehen klein darunter. */
.prod-btn .prod-av{display:none!important}
.navlinks .prod-btn{padding:9px;margin-inline:0;gap:4px;font-size:.9rem;font-weight:500;color:var(--text-2);background:none;box-shadow:none}
.navlinks .prod-btn:hover,.navlinks .prod.open .prod-btn{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.navlinks .prod.is-here .prod-btn{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.drawer nav a.dr-p{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;
  font-family:InterVar,system-ui,sans-serif;font-size:.98rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);background:var(--surface)}
.drawer nav a.dr-p small{grid-column:1;font-size:.8rem;font-weight:450;color:var(--text-3);line-height:1.3}
.drawer nav a.dr-p svg{grid-column:2;grid-row:1/span 2;width:15px;height:15px;color:var(--text-3);transition:transform .25s var(--e-spring,ease)}
.drawer nav a.dr-p:hover,.drawer nav a.dr-p:focus-visible{color:var(--text);border-color:var(--line-strong)}
.drawer nav a.dr-p:hover svg{transform:translate(2px,-2px)}
.drawer nav a.dr-p[aria-current=page]{border-color:var(--line-strong)}
.dr-prod{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0 4px}
@media(max-width:340px){.dr-prod{grid-template-columns:1fr}}

/* ── Scrollen am Handy / Tablet ──────────────────────────────────────────────
   Auf Touch-Geräten: Logo-Animation im Kopf aus (sie lief dauerhaft über der Glas-Unschärfe),
   Glas-Unschärfe nur noch an der Kopfleiste, Endlos-Animationen pausieren während des Scrollens. */
@media (hover:none) and (pointer:coarse){
  .navbar.is-quake{animation:none!important;will-change:auto}
  .a2brand.is-anim .a2blocks,.a2brand.is-anim .a2mark,.a2brand.is-anim .a2pc,.a2brand.is-anim .a2wm span,.a2brand.is-anim .a2crack path,.a2brand.is-anim .a2crack circle{animation:none!important}
  .a2brand .a2crack{display:none}
  .btn-glass,.kicker,.playbtn,.hero-chips .chip{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .btn-glass,.hero-chips .chip,.kicker{background:color-mix(in srgb,var(--surface) 88%,transparent)}
}
/* iPhone/iPad-Safari: Abschnitte nicht erst beim Hineinscrollen aufbauen (content-visibility) — das erzeugte kurze Hänger */
@supports (-webkit-touch-callout:none){.defer-paint,html.lite .defer-paint{content-visibility:visible!important}}
html.is-scrolling .tools-track,html.is-scrolling .rl-stage,html.is-scrolling .bp-fig,html.is-scrolling .bp-chip,html.is-scrolling .a3-ring,html.is-scrolling .a3-face,
html.is-scrolling .nav-bud,html.is-scrolling .asst-fab-ori,html.is-scrolling .asst-dot,html.is-scrolling .eyebrow:before,html.is-scrolling .scrollcue i:after,
html.is-scrolling .fv .pulse,html.is-scrolling .bcat-live i,html.is-scrolling .fs-dot:before{animation-play-state:paused!important}

/* ── Fußzeile: interaktives Bild „A2-Studio Wien“ ────────────────────────────
   Ersetzt die Buddy-Truppe aus Paket 78. Tag/Nacht folgt dem Design (hell/dunkel) und lässt sich am
   Lichtschalter im Bild umschalten. Punkte im Bild: Buddys, Belegerl, Wien. Am Handy wischt man durchs Studio. */
.ftr[data-a2=ftr2]{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.fs{position:relative;max-width:min(940px,100%);margin:clamp(30px,4.6vw,56px) auto clamp(14px,2vw,22px)}
.fs-card{position:relative;isolation:isolate}
.fs-scroll{position:relative}
.fs-stage{position:relative;aspect-ratio:2688/1152;width:100%}
.fs-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease}
.fs-night{opacity:0}
.fs[data-mode=night] .fs-night{opacity:1}
.fs[data-mode=night] .fs-day{opacity:0}
.fs-glare{display:none}
/* Punkte */
.fs-dot{position:absolute;left:var(--x);top:var(--y);z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border:0;padding:0;background:none;cursor:pointer;
  color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.fs-dot:before{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;
  animation:fs-ping 2.8s cubic-bezier(.2,.7,.3,1) calc(var(--i) * -.55s) infinite}
.fs-dot i{position:relative;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.95),0 4px 12px rgba(11,19,32,.35);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.fs-dot:hover i,.fs-dot:focus-visible i,.fs-dot.is-open i{transform:scale(1.25)}
.fs-dot:focus-visible{outline:none}
.fs-dot:focus-visible i{box-shadow:0 0 0 4px rgba(37,99,235,.95),0 0 0 8px rgba(255,255,255,.9)}
@keyframes fs-ping{0%{transform:scale(.55);opacity:.95}70%,100%{transform:scale(1.5);opacity:0}}
.fs-tip{position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 6px;min-width:max-content;max-width:240px;padding:10px 13px 11px;border-radius:14px;text-align:left;
  background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(11,19,32,.45);
  opacity:0;pointer-events:none;transition:opacity .2s,translate .3s cubic-bezier(.2,.8,.2,1)}
.fs-tip b{display:block;font:650 .92rem/1.2 InterVar,system-ui,sans-serif}
.fs-tip span{display:block;margin-top:2px;font:450 .8rem/1.35 InterVar,system-ui,sans-serif;color:var(--text-3);white-space:normal;max-width:220px}
.fs-tip em{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font:600 .78rem/1 InterVar,system-ui,sans-serif;font-style:normal;color:var(--cobalt-ink)}
.fs-dot:hover .fs-tip,.fs-dot:focus-visible .fs-tip,.fs-dot.is-open .fs-tip{opacity:1;translate:-50% 0;pointer-events:auto}
.fs-dot.is-low .fs-tip{bottom:auto;top:calc(100% + 6px)}
.fs-dot.is-left .fs-tip{left:0;translate:-10px 6px}
.fs-dot.is-left:hover .fs-tip,.fs-dot.is-left:focus-visible .fs-tip,.fs-dot.is-left.is-open .fs-tip{translate:-10px 0}
.fs-dot.is-right .fs-tip{left:auto;right:0;translate:10px 6px}
.fs-dot.is-right:hover .fs-tip,.fs-dot.is-right:focus-visible .fs-tip,.fs-dot.is-right.is-open .fs-tip{translate:10px 0}

/* Leiste unter dem Bild */
.fs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--text-3);font:500 .82rem/1.3 InterVar,system-ui,sans-serif}
.fs-bar p{margin:0}
.fs-lead-f{display:none}
@media (hover:hover) and (pointer:fine){.fs-lead-t{display:none}.fs-lead-f{display:inline}}
.fs-sw{display:inline-flex;align-items:center;gap:8px;flex:none;padding:7px 12px 7px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  font:600 .8rem/1 InterVar,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.fs-sw:hover{border-color:var(--line-strong);color:var(--text)}
.fs-sw b{position:relative;width:30px;height:18px;border-radius:999px;background:#F5B841;transition:background .35s}
.fs-sw b:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.fs[data-mode=night] .fs-sw b{background:#1D4ED8}
.fs[data-mode=night] .fs-sw b:after{transform:translateX(12px)}
.fs-sw:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Handy (Paket 81): das ganze Bild randlos sichtbar, kein Wischen. Die Punkte sind nur Markierungen;
   bedient wird über die Namen-Leiste darunter, die Infokarte erscheint unter dem Bild statt darüber. */
.fs-chips,.fs-info,.fs-lead-p{display:none}
@media (max-width:760px){
  .fs{max-width:none;margin:clamp(22px,7vw,34px) calc(var(--gut,20px) * -1) 10px}
  .fs-stage{width:100%;height:auto}
  .fs-stage img{transform:none}
  .fs-dot{width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;transition:opacity .3s}
  .fs-dot.is-open{opacity:1}
  .fs-dot:before{width:22px;height:22px;opacity:0;animation:none}
  .fs-dot i{width:9px;height:9px;box-shadow:0 0 0 3px rgba(37,99,235,.95),0 2px 6px rgba(11,19,32,.3);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
  .fs-dot.is-open:before{opacity:1;animation:fs-ping 1.8s cubic-bezier(.2,.7,.3,1) infinite}
  .fs-dot.is-open i{transform:scale(1.35)}
  .fs-dot .fs-tip{display:none}
  .fs-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px var(--gut,20px) 0}
  .fs-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
    color:var(--text-2);font:600 .84rem/1 InterVar,system-ui,sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent;
    transition:border-color .2s,color .2s,background .2s,box-shadow .2s}
  .fs-chip[aria-pressed=true]{color:var(--text);border-color:#2563EB;box-shadow:0 0 0 3px color-mix(in srgb,#2563EB 18%,transparent)}
  .fs-chip:focus-visible{outline:2px solid var(--focus,#1D4ED8);outline-offset:2px}
  .fs-info{display:grid;grid-template-rows:0fr;margin:0 var(--gut,20px);transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1),margin .35s}
  .fs-info.is-open{grid-template-rows:1fr;margin-top:12px}
  .fs-info>div{overflow:hidden;min-height:0}
  .fs-info-c{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;
    background:var(--surface);box-shadow:0 14px 34px -22px rgba(11,19,32,.45)}
  .fs-info-c b{font:650 .95rem/1.25 InterVar,system-ui,sans-serif;color:var(--text)}
  .fs-info-c span{grid-column:1;font:450 .84rem/1.4 InterVar,system-ui,sans-serif;color:var(--text-3)}
  .fs-info-c a{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#2563EB;color:#fff;
    font:600 .84rem/1 InterVar,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
  .fs-info-c a:focus-visible{outline:2px solid var(--focus,#1D4ED8);outline-offset:3px}
  .fs-bar{padding-inline:var(--gut,20px);flex-wrap:wrap;margin-top:14px}
  .fs-lead-t,.fs-lead-f{display:none!important}
  .fs-lead-p{display:inline}
}
@media (max-width:380px){.fs-chip{padding:0 12px;font-size:.8rem}.fs-info-c{grid-template-columns:1fr}.fs-info-c a{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}
@media (prefers-reduced-motion:reduce){.fs-dot:before,.fs-dot.is-open:before{animation:none}.fs-info{transition:none}.fs-stage img{transition:opacity .3s;transform:none!important}}
html.lite .fs-dot:before{animation:none}

/* ── Barrierefreiheit (Paket 81) ─────────────────────────────────────────────
   Werkzeug-Leiste: Namen hatten zu wenig Kontrast (3,8 : 1 hell, 4,4 : 1 dunkel) → mindestens 4,5 : 1. */
html .tools-track .twb{opacity:.9!important}
html .tools-track .twb svg,html .tools-track .twb img{opacity:.7}
/* Reel: eigener Tastatur-Knopf statt einer Bühne mit role=button (die Knöpfe enthielt) — sichtbar, sobald er den Fokus hat */
.rl-kbd{position:absolute;z-index:5;top:10px;left:10px;padding:10px 14px;border:0;border-radius:999px;background:var(--surface,#fff);color:var(--text,#0B1320);
  font:600 .82rem/1 InterVar,system-ui,sans-serif;box-shadow:0 6px 20px -8px rgba(11,19,32,.5);opacity:0;pointer-events:none;transform:translateY(-4px)}
.rl-kbd:focus-visible{opacity:1;pointer-events:auto;transform:none;outline:2px solid var(--focus,#1D4ED8);outline-offset:2px}
.rl-card{position:relative}
html .tools-track .twb:hover{opacity:1!important}
/* Leistungen: farbige Kleinschriften (Kennung, Ergebnis-Label, Preis) mit der Schriftfarbe gemischt → mind. 4,8 : 1 in beiden Designs */
html .sl-item .sl-k,html .sl-item .sl-price{color:color-mix(in srgb,var(--acc) 55%,var(--text))}
html .sl-item .sl-lbl{color:color-mix(in srgb,var(--acc) 45%,var(--text))}
/* Pixel-Prüfung 17.10.: farbige Namen/Titel (Buddys, Pakete) — Akzentfarbe mit der Schriftfarbe gemischt, wirkt gleich, liest sich besser */
html .bp-name,html .bpl-card h3{color:color-mix(in srgb,var(--acc) 55%,var(--text))!important}
html .bs-sub{color:var(--text-3)}
html .nx-st.warn{color:#92400E}
html .svs-tab{color:rgba(255,255,255,.76)}
html .svs-tab.is-on{color:#fff}
/* „Projekt im Kopf“ (Kontakt): weiße Schrift brauchte dunkleres Blau am hellen Verlaufsende */
html .st-door--build{background:linear-gradient(135deg,#1e40af,#1d4ed8 48%,#2563eb)!important}
html .st-door--build .st-k,html .st-door--build p{color:#fff!important}
/* Dunkles Design: Kobalt-Blau als Schrift war zu dunkel (3,8 : 1) → aufgehellt */
:root[data-theme=dark] .hs-kick{color:color-mix(in srgb,var(--sacc,var(--cobalt)) 55%,var(--text))}
:root[data-theme=dark] .rl-kick,:root[data-theme=dark] .rl-cap a{color:color-mix(in srgb,var(--rl-acc) 55%,var(--text))}
:root[data-theme=dark] .nx-n{color:color-mix(in srgb,var(--nx-ink) 45%,var(--text))!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .hs-kick{color:color-mix(in srgb,var(--sacc,var(--cobalt)) 55%,var(--text))}
  :root:not([data-theme=light]) .rl-kick,:root:not([data-theme=light]) .rl-cap a{color:color-mix(in srgb,var(--rl-acc) 55%,var(--text))}
  :root:not([data-theme=light]) .nx-n{color:color-mix(in srgb,var(--nx-ink) 45%,var(--text))!important}
}
html .rl-tag{color:var(--rl-ink,var(--text))}

/* ── Paket 82 ─────────────────────────────────────────────────────────────── */
/* Fokus nie unter der Kopfleiste oder dem Ori-Knopf (WCAG 2.4.11) */
html{scroll-padding-top:calc(var(--top-clear,88px) + 12px);scroll-padding-bottom:96px}
/* „Bewegung anhalten“ (WCAG 2.2.2): alle CSS-Animationen auf ihren Endzustand, keine Endlosschleifen */
html.a2-still *,html.a2-still *::before,html.a2-still *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
.skip-still{border:0;font:inherit;font-weight:600;cursor:pointer}
.skip-still:focus{left:0;top:52px}
.fs-btns{display:inline-flex;flex-wrap:wrap;gap:8px}
.fs-still{display:inline-flex;align-items:center;gap:8px;flex:none;padding:7px 12px 7px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  font:600 .8rem/1 InterVar,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.fs-still:hover{border-color:var(--line-strong);color:var(--text)}
.fs-still b{position:relative;width:14px;height:14px}
.fs-still b:before,.fs-still b:after{content:"";position:absolute;top:1px;width:4px;height:12px;border-radius:2px;background:currentColor}
.fs-still b:before{left:2px}.fs-still b:after{right:2px}
.fs-still[aria-pressed=true]{color:var(--text);border-color:#2563EB}
.fs-still[aria-pressed=true] b:before{left:3px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.fs-still[aria-pressed=true] b:after{display:none}
.fs-still:focus-visible{outline:2px solid var(--focus,#1D4ED8);outline-offset:3px}
/* Transkript zum Reel */
.rl-tx{margin-top:14px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rl-tx summary{cursor:pointer;padding:12px 16px;font:600 .9rem/1.3 InterVar,system-ui,sans-serif;color:var(--text);list-style-position:inside}
.rl-tx summary:focus-visible{outline:2px solid var(--focus,#1D4ED8);outline-offset:2px;border-radius:14px}
.rl-tx-body{padding:0 16px 14px;display:grid;gap:8px;font:450 .9rem/1.5 InterVar,system-ui,sans-serif;color:var(--text-2)}
.rl-tx-body p{margin:0}
.rl-tx-note{color:var(--text-3)}
.rl-tx-b{color:var(--text-3);font-style:italic}
.rl-tx-body b{font-style:normal;color:var(--text)}
/* AEO: „Kurz beantwortet“ */
.aeo-h{margin:0 0 clamp(18px,2.4vw,28px);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em}
.aeo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(12px,1.6vw,18px)}
.aeo-i{padding:clamp(18px,2vw,24px);border:1px solid var(--line);border-radius:var(--r-lg,20px);background:var(--surface);box-shadow:var(--sh-1,none)}
.aeo-i h3{margin:0 0 8px;font-size:1.05rem;line-height:1.3;letter-spacing:-.015em;color:var(--text)}
.aeo-i p{margin:0;font-size:.95rem;line-height:1.55;color:var(--text-2)}
/* Tastatur-Durchlauf 17.10.: Fokus deutlicher bzw. nicht verdeckt (WCAG 2.4.7 / 2.4.11) */
html .fs-dot:focus-visible i{box-shadow:0 0 0 4px #2563EB,0 0 0 7px #fff,0 0 0 10px #0B1320}
html .bp-fig:focus-visible{z-index:9!important}
html #st-q:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,#2563EB 35%,transparent)}
html :has(> #ol-url:focus-visible){box-shadow:0 0 0 2px var(--bg,#F7F8FA),0 0 0 4px #2563EB!important}
/* Platz für den Ori-Knopf unten rechts, damit er die letzte Zeile der Fußzeile (Sprache) nie verdeckt */
.ftr[data-a2=ftr2]{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
html .lang a[aria-current=false]{color:var(--text-2)}

/* ── Paket 83 · Halloween-Modus (20.10.–31.10.2026) ──────────────────────────── */
.hw-sw,.hw-hero,.hw-bats,.hw-badge,.fs-hw,.hw-only{display:none}
html.hw-season .hw-sw{display:inline-grid}
html[data-mood=halloween] .hw-only{display:inline}
html[data-mood=halloween] .hw-not{display:none}
/* Nacht-Lila über dem dunklen Design (Kontraste bleiben wie im dunklen Design) */
:root[data-mood=halloween][data-theme=dark]{--bg:#0F0A1C;--bg-alt:#140D24;--bg-deep:#0A0714;--surface:#1A1230;--surface-2:#150F27;--surface-3:#22183D;
  --line:#2A2042;--line-strong:#3B2E5C;--glass:rgba(26,18,48,.62);--cobalt-soft:#1D1A40}
.hw-sw svg{width:20px;height:20px}
html[data-mood=halloween] .hw-sw{color:#FFB347}
.hw-sw[aria-checked=true]{background:color-mix(in srgb,#FF7A1A 16%,transparent)}
/* Startseite */
html[data-mood=halloween] .hw-hero{display:block;position:absolute;inset:0;z-index:1}
html[data-mood=halloween] .hw-hero img{width:100%;height:100%;object-fit:cover;object-position:0% 50%}
html[data-mood=halloween] .hero-media .hp,html[data-mood=halloween] .hero-media .hv{visibility:hidden}
html[data-mood=halloween] .hero-media:after{opacity:.12!important}
html[data-mood=halloween] .hero-media:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,7,20,.78) 0%,rgba(10,7,20,.5) 44%,rgba(10,7,20,.12) 62%,rgba(10,7,20,0) 72%),linear-gradient(0deg,rgba(10,7,20,.55) 0%,rgba(10,7,20,0) 40%)}
@media (max-width:700px){
  html[data-mood=halloween] .hw-hero img{object-position:50% 30%}
  html[data-mood=halloween] .hero-media:before{background:linear-gradient(0deg,rgba(10,7,20,.9) 0%,rgba(10,7,20,.82) 42%,rgba(10,7,20,.5) 60%,rgba(10,7,20,.12) 76%,rgba(10,7,20,0) 86%)}
}
html[data-mood=halloween] .hs .hs-kick{color:#FFB347!important}
html[data-mood=halloween] .hero h1,html[data-mood=halloween] .hero .hs-h,html[data-mood=halloween] .hero .sub{color:#F7F3FF}
html[data-mood=halloween] .hw-badge{display:inline-flex;position:absolute;z-index:3;right:clamp(16px,4vw,56px);bottom:clamp(110px,16vh,170px);padding:8px 14px;border-radius:999px;
  background:rgba(20,13,36,.72);border:1px solid rgba(255,179,71,.45);color:#FFD9A8;font:600 .82rem/1 InterVar,system-ui,sans-serif;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-mood=halloween] .hw-badge:before{content:"🎃";margin-right:7px}
@media (max-width:900px){html[data-mood=halloween] .hw-badge{display:none}}
/* Fledermäuse (nur Dekoration; „Bewegung anhalten“/„Bewegung reduzieren“ → stehen still) */
html[data-mood=halloween] .hw-bats{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.hw-bat{position:absolute;left:-80px;width:46px;color:#1B1030;filter:drop-shadow(0 0 6px rgba(255,179,71,.35));animation:hw-fly 19s linear infinite}
.hw-bat svg{display:block;width:100%;animation:hw-flap .32s ease-in-out infinite alternate}
.hw-bat1{top:14%;animation-delay:-3s}
.hw-bat2{top:24%;width:34px;animation-duration:23s;animation-delay:-11s}
.hw-bat3{top:9%;width:28px;animation-duration:27s;animation-delay:-18s}
@keyframes hw-fly{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(30vw,-18px,0)}50%{transform:translate3d(60vw,14px,0)}75%{transform:translate3d(90vw,-10px,0)}100%{transform:translate3d(115vw,6px,0)}}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@media (max-width:700px){.hw-bat3{display:none}}
@media (prefers-reduced-motion:reduce){.hw-bat,.hw-bat svg{animation:none}.hw-bat1{left:58%}.hw-bat2{left:70%}.hw-bat3{left:80%}}
html.a2-still .hw-bat1{left:58%}html.a2-still .hw-bat2{left:70%}html.a2-still .hw-bat3{left:80%}
html.a2-still .hw-bat,html.a2-still .hw-bat svg{animation:none!important;transform:none!important}
html.is-scrolling .hw-bat,html.is-scrolling .hw-bat svg{animation-play-state:paused!important}
/* Hinweis: Text bricht als Fließtext um */
/* Fußzeile */
html[data-mood=halloween] .fs-hw{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
html[data-mood=halloween] .fs-day,html[data-mood=halloween] .fs-night{opacity:0!important}
html[data-mood=halloween] .fs-sw{display:none}
.fs{text-align:left}
@media (min-width:761px){}
/* Lade-Animation im Halloween-Modus: orange Spur */
html[data-mood=halloween] .a2l-trail{background:linear-gradient(90deg,rgba(255,122,26,0),#FF7A1A 60%,#FFB347)!important}
/* Desktop: Halloween-Bild nach rechts, linker Rand läuft weich ins Nacht-Lila aus – die Headline steht frei */
@media (min-width:901px){
  html[data-mood=halloween] .hero{background:#0F0A1C}
  html[data-mood=halloween] .hw-hero img{object-position:100% 50%}
  html[data-mood=halloween] .hw-hero{left:24%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
}
html[data-mood=halloween] .hero h1,html[data-mood=halloween] .hero .hs-h{text-shadow:0 0 2px rgba(10,7,20,.75),0 2px 18px rgba(10,7,20,.9),0 0 42px rgba(10,7,20,.7)}
html[data-mood=halloween] .hero .sub{text-shadow:0 1px 10px rgba(10,7,20,.9)}
/* Hotfix 83b: Hero im Halloween-Modus immer mit Nacht-Farben, auch wenn jemand „Hell“ gewählt hat (heller Schleier aus) */
html[data-mood=halloween] .hero{--text:#F2F5FA;--text-2:#D3DAE5;--text-3:#9AA5B5;--line:#2A2042;--line-strong:#3B2E5C;--surface:#1A1230;--surface-2:#150F27;
  --glass:rgba(26,18,48,.62);--glass-line:rgba(255,255,255,.12);--cobalt-ink:#7DA6FF;--focus:#7DA6FF;color-scheme:dark;color:#F2F5FA;background:#0F0A1C}
html[data-mood=halloween] .hero:after{display:none!important}
:root:not([data-theme=dark])[data-mood=halloween] .hw-sw{color:#C2410C}

/* Belegerl-Hinweis (Paket 83c): eigene dunkle Karte, in jedem Design gut lesbar; sichtbar nur 20.–31.10. (Code-Zeitraum) */
html .hw-note,html .ftr .hw-fnote{display:none}
html.hw-season.hw-offer .hw-note,html.hw-season.hw-offer .ftr .hw-fnote{display:grid}
.hw-note,.hw-fnote{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;text-decoration:none;
  background:linear-gradient(135deg,#21163D,#150F27);border:1px solid rgba(255,179,71,.5);color:#F3EEFF;box-shadow:0 16px 36px -22px rgba(10,7,20,.7);
  transition:border-color .2s,transform .2s}
.hw-note{margin-top:18px;max-width:min(100%,520px)}
.ftr .hw-fnote{width:min(560px,calc(100% - 2 * var(--gut,20px)));margin:14px auto 0;min-height:0}
.hw-note:hover,.ftr .hw-fnote:hover{border-color:#FF7A1A;transform:translateY(-1px)}
.hw-note:focus-visible,.ftr .hw-fnote:focus-visible{outline:2px solid #7DA6FF;outline-offset:3px}
.hw-ic{font-size:1.55rem;line-height:1}
.hw-tx{display:grid;gap:4px;text-align:left}
.hw-t{font:700 .96rem/1.25 InterVar,system-ui,sans-serif;color:#FFE3BF}
.hw-d{font:500 .85rem/1.45 InterVar,system-ui,sans-serif;color:#DCD3F0}
.hw-code{display:inline-block;padding:1px 7px;border:1px dashed #FFB347;border-radius:7px;color:#FFB347;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.hw-ar{color:#FFB347;font-size:1.15rem;line-height:1}
@media (max-width:380px){.hw-note,.hw-fnote{gap:10px;padding:11px 13px}.hw-ic{font-size:1.3rem}}