/* Halloween-Event 2026: wird von halloween.js nur bei AKTIVEM Event eingeschaltet (html.halloween). Ohne die Klasse greift keine Regel hier.
   Orange #ff7a00, Lila #8a2be2/#b000ff, Dunkel #120a1a. Wird NACH theme.css geladen und ueberschreibt Variablen und die fest verdrahteten Cyan-Stellen.
   Kein eigenes nav-CSS (siehe Falle in CLAUDE.md): nav.sn wird nur ueber vorhandene Selektoren in der Farbe angepasst. */

/* ---------- Variablen: hell ---------- */
html.halloween {
  --accent: #ff7a00;
  --accent-dark: #d96400;
  --accent-ink: #b34700;
  --card-hover: #fff4e8;
  --hw-purple: #8a2be2;
  --hw-grad: linear-gradient(135deg, #e85d00 0%, #7a22c8 100%);
  --hw-grad-text: linear-gradient(315deg, #8a2be2 0%, #ff7a00 100%);
}
html.halloween ::selection { background: #ff7a00; color: #120a1a; }

/* ---------- Variablen: dunkel (Violett-Schwarz #120a1a) ---------- */
html.dark.halloween {
  --bg: #120a1a; --bg-alt: #181022; --card: #1c1229; --card-hover: #251a35;
  --card-border: #33264a; --border: #33264a; --card-2: #251a35;
  --accent: #ff8a1f; --accent-dark: #ff9a3d; --accent-ink: #ffa24d;
  --hw-grad: linear-gradient(135deg, #ff9a2e 0%, #c58bff 100%);
  --hw-grad-text: linear-gradient(315deg, #d08bff 0%, #ff9a2e 100%);
  --shadow: 0 10px 30px rgba(0,0,0,.55); --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
}
html.dark.halloween ::selection { background: #ff8a1f; color: #120a1a; }

/* ---------- Hero / Titelbereiche ---------- */
html.halloween .hero { background: linear-gradient(0deg, #fff 10%, #fff1e3 60%, #fff 100%) !important; }
html.halloween .pl-hero { background: linear-gradient(0deg, #fff 10%, #fff1e3 60%, #fff 100%); }
html.dark.halloween .hero, html.dark.halloween .pl-hero { background: linear-gradient(0deg, var(--bg) 10%, #2b1238 60%, var(--bg) 100%) !important; }
html.halloween .hero h1 .hero-hl, html.halloween .tp-hero h1 b {
  background: var(--hw-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
html.halloween .hero-badge { background: rgba(255,122,0,.12) !important; }
html.dark.halloween .hero-badge { background: rgba(255,138,31,.18) !important; }
html.halloween .tp-chip { color: var(--accent-ink); background: rgba(255,122,0,.14); }
html.halloween .mode-card .mode-tag { background: rgba(255,122,0,.14); }
html.halloween .rank-card.hot { box-shadow: 0 14px 34px rgba(255,122,0,.2); }
html.dark.halloween .rank-card.hot { box-shadow: 0 14px 34px rgba(255,138,31,.16); }

/* ---------- Buttons: Verlauf Orange -> Lila ---------- */
html.halloween .btn:not(.ghost):not(.btn-ghost):not(.btn-secondary):not(.btn-discord):not(.discord),
html.halloween .btn-primary, html.halloween .btn-play,
html.halloween nav.sn .sn-cta,
html.halloween .pl-btn:not(.white), html.halloween .tp-btn:not(.white):not(.hw-ghost),
html.halloween .pl-copy, html.halloween .lc-top {
  background: var(--hw-grad); color: #fff;
}
html.halloween nav.sn .sn-cta, html.halloween .pl-btn:not(.white), html.halloween .tp-btn:not(.white):not(.hw-ghost) { color: #fff !important; }
html.dark.halloween .btn:not(.ghost):not(.btn-ghost):not(.btn-secondary):not(.btn-discord):not(.discord),
html.dark.halloween .btn-primary, html.dark.halloween .btn-play,
html.dark.halloween .pl-copy, html.dark.halloween .lc-top { color: #1a0b05; }
html.dark.halloween nav.sn .sn-cta, html.dark.halloween .pl-btn:not(.white), html.dark.halloween .tp-btn:not(.white):not(.hw-ghost) { color: #1a0b05 !important; }
html.halloween .lc-top { box-shadow: 0 10px 26px rgba(255,122,0,.4); }

/* ---------- Symbol-Kacheln (Verlauf) ---------- */
html.halloween .pl-tile .ic, html.halloween .tp-tile i, html.halloween .rp-tip i, html.halloween .st-hubcard .ic { background: linear-gradient(135deg, #e85d00 0%, #8a2be2 100%); color: #fff; }

/* ---------- Seiten-Komponenten mit festem Cyan ---------- */
html.halloween .pl-steps li::before { background: rgba(255,122,0,.15); color: var(--accent-ink); }
html.halloween .pl-steps code, html.halloween .ps-cmds code, html.halloween .ps-modes code { background: #fff1e3; color: #b34700; }
html.dark.halloween .pl-steps code, html.dark.halloween .ps-cmds code, html.dark.halloween .ps-modes code { background: rgba(255,138,31,.16); color: var(--accent-ink); }
html.halloween .pl-checks li::before { background-color: #e85d00; }
html.halloween .pl-tab.on { color: var(--accent-ink); }
html.halloween .pl-step-card { background: linear-gradient(160deg, #fff4e8, #fff); border-color: #ffd9b3; }
html.dark.halloween .pl-step-card { background: linear-gradient(160deg, #2a1636, var(--card)); border-color: #4a2b63; }
html.halloween .pl-step-card small { color: var(--accent-ink); }
html.halloween .topic-num { color: var(--accent-ink) !important; background: rgba(255,122,0,.14) !important; }
html.halloween .lc-s-list a em { color: var(--accent-ink); background: rgba(255,122,0,.14); }

/* ---------- Header / Footer (nur Farben der vorhandenen Selektoren) ---------- */
html.halloween nav.sn .sn-mega-head { border-bottom-color: #ff7a00; }
html.halloween nav.sn .sn-mega-head a, html.halloween nav.sn .sn-links > a.sn-shop { color: var(--accent-ink); }
html.halloween nav.sn .sn-col a:hover, html.halloween nav.sn .sn-mega-side a:hover { color: var(--accent-ink); }
html.halloween footer.sf .sf-social a:hover { color: var(--accent-ink); border-color: #ff7a00; }
html.halloween .hw-navlink { color: var(--accent-ink) !important; font-weight: 800; }
html.dark.halloween nav.sn { background: rgba(18,10,26,.9); }
html.dark.halloween nav.sn .sn-theme, html.dark.halloween nav.sn .nav-toggle, html.dark.halloween nav.sn .sn-search { background: #251a35; }
html.dark.halloween nav.sn .sn-links > a:hover, html.dark.halloween nav.sn .sn-dd-btn:hover, html.dark.halloween nav.sn .sn-dd:hover > .sn-dd-btn, html.dark.halloween nav.sn .sn-dd.open > .sn-dd-btn { background: #251a35; }
html.dark.halloween footer.sf { background: #0d0714; }
html.dark.halloween section.dark { background: #0a0510; }

/* ---------- Banner oben (nur im DOM, wenn das Event aktiv ist) ---------- */
.hw-bar { position: relative; z-index: 61; overflow: hidden; color: #fff; font-family: var(--font, 'Nunito', system-ui, sans-serif); font-size: 14px; font-weight: 700; line-height: 1.35; background: linear-gradient(90deg, #2b0f4a 0%, #5b1d8f 50%, #a84a00 100%); }
.hw-bar-in { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 9px 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; text-align: center; }
.hw-bar a.hw-bar-link { color: #fff; text-decoration: none; }
.hw-bar a.hw-bar-link:hover, .hw-bar a.hw-bar-link:focus-visible { text-decoration: underline; }
.hw-bar-pump { display: inline-flex; width: 22px; height: 22px; flex: none; }
.hw-bar-pump svg { width: 22px; height: 22px; }
.hw-count { background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2px 11px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Spinnennetze in den Banner-Ecken */
.hw-bar::before, .hw-bar::after { content: ''; position: absolute; top: 0; width: 46px; height: 46px; opacity: .38; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='white' stroke-width='1.2'><path d='M0 0H60M0 0L56 22M0 0L42 42M0 0L22 56M0 0V60M18 0Q14 14 0 18M36 0Q28 28 0 36M54 0Q44 44 0 54'/></svg>") no-repeat 0 0 / contain; }
.hw-bar::before { left: 0; }
.hw-bar::after { right: 0; transform: scaleX(-1); }
@media (max-width: 600px) {
  .hw-bar { font-size: 13px; }
  .hw-bar-in { padding: 8px 40px; }
  .hw-bar-pump { display: none; }
  .hw-bar::before, .hw-bar::after { width: 34px; height: 34px; }
}

/* ---------- Deko ---------- */
.hw-deco { position: fixed; left: 16px; bottom: 16px; z-index: 40; width: 50px; height: 50px; pointer-events: none; opacity: .94; filter: drop-shadow(0 0 10px rgba(255,122,0,.55)); transform-origin: 50% 90%; animation: hw-sway 4.5s ease-in-out infinite; }
.hw-deco svg { width: 100%; height: 100%; }
@keyframes hw-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (max-width: 700px) { .hw-deco { display: none; } }
@media (prefers-reduced-motion: reduce) { .hw-deco { animation: none; } }
@media print { .hw-bar, .hw-deco { display: none; } }
/* Spinnennetz in der Fusszeilen-Ecke */
html.halloween footer.sf { position: relative; }
html.halloween footer.sf::before { content: ''; position: absolute; top: 0; left: 0; width: 84px; height: 84px; opacity: .5; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23b34700' stroke-width='1.1'><path d='M0 0H60M0 0L56 22M0 0L42 42M0 0L22 56M0 0V60M18 0Q14 14 0 18M36 0Q28 28 0 36M54 0Q44 44 0 54'/></svg>") no-repeat 0 0 / contain; }
html.dark.halloween footer.sf::before { opacity: .55; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23ffa24d' stroke-width='1.1'><path d='M0 0H60M0 0L56 22M0 0L42 42M0 0L22 56M0 0V60M18 0Q14 14 0 18M36 0Q28 28 0 36M54 0Q44 44 0 54'/></svg>"); }
@media (max-width: 700px) { html.halloween footer.sf::before { width: 56px; height: 56px; } }

/* =====================================================================================================
   Schaurig-Schicht (11.10.2026): Fledermaeuse, Geister, Nebel, Blitze, leuchtende Augen, Blut-Tropfen, Friedhof, Flackern.
   Alles nur bei html.halloween; Elemente erzeugt halloween.js (#hw-fx). Reduzierte Bewegung: keine Animation.
   ===================================================================================================== */

/* Rangfarben in den dunklen Bereichen immer in den hellen Varianten (sonst unlesbar auf Schwarz) */
html.halloween section.dark, html.halloween .dark {
  --mc-0: #7b8794; --mc-1: #7c7cff; --mc-2: #2fc02f; --mc-3: #25c4c4; --mc-4: #ff5e5e; --mc-5: #d85cd8; --mc-6: #ffb02e; --mc-7: #aab4bf;
  --mc-8: #8a96a3; --mc-9: #7b7bff; --mc-a: #55ff55; --mc-b: #55ffff; --mc-c: #ff6b6b; --mc-d: #ff7aff; --mc-e: #ffff66; --mc-f: #ffffff;
}
html.halloween section.dark { background: radial-gradient(1200px 500px at 50% 0%, #2a0f3d 0%, #0a0510 70%) !important; }
html.halloween .lb-card { border-color: rgba(255,122,0,.35); box-shadow: 0 0 0 1px rgba(138,43,226,.25), 0 10px 30px rgba(0,0,0,.5); }
html.halloween .lb-card:hover { box-shadow: 0 0 0 1px rgba(255,122,0,.7), 0 0 28px rgba(255,122,0,.35); }

/* Seitenhintergrund: leichter Violett-Schleier und Vignette */
html.halloween body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(40,10,60,.12) 100%); }
html.dark.halloween body::before { background: radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(0,0,0,.35) 100%); }

/* Titel flackern wie eine defekte Laterne */
html.halloween .hero h1, html.halloween .tp-hero h1, html.halloween .pl-hero h1 { animation: hw-flicker 7s infinite; text-shadow: 0 0 22px rgba(255,122,0,.28); }
@keyframes hw-flicker { 0%,19%,21%,23%,100% { opacity: 1; } 20%,22% { opacity: .55; } 60% { opacity: .92; } 61% { opacity: 1; } }

/* Effekt-Ebene */
#hw-fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#hw-fx * { pointer-events: none; }
.hw-fog { position: absolute; left: -20%; right: -20%; bottom: -6%; height: 34%; opacity: .55; background: radial-gradient(60% 100% at 30% 100%, rgba(190,150,255,.20), transparent 70%), radial-gradient(55% 100% at 75% 100%, rgba(255,150,60,.14), transparent 70%); animation: hw-fog 38s ease-in-out infinite alternate; }
.hw-fog.b { height: 24%; opacity: .45; animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes hw-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

.hw-bat { position: absolute; left: -90px; width: 54px; height: 28px; color: #1b0f26; opacity: .85; animation: hw-fly var(--d, 24s) linear var(--delay, 0s) infinite; top: var(--y, 20%); }
html.dark.halloween .hw-bat { color: #000; filter: drop-shadow(0 0 4px rgba(255,122,0,.45)); }
.hw-bat svg { width: 100%; height: 100%; animation: hw-flap .32s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes hw-fly { 0% { transform: translate(0, 0); } 25% { transform: translate(30vw, 28px); } 50% { transform: translate(60vw, -22px); } 75% { transform: translate(85vw, 30px); } 100% { transform: translate(115vw, -10px); } }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }

.hw-ghost { position: absolute; bottom: -90px; width: 62px; height: 78px; opacity: 0; left: var(--x, 20%); animation: hw-float var(--d, 40s) ease-in-out var(--delay, 0s) infinite; filter: drop-shadow(0 0 12px rgba(220,200,255,.7)); }
.hw-ghost svg { width: 100%; height: 100%; }
@keyframes hw-float { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .30; } 50% { transform: translate(70px, -55vh); opacity: .22; } 90% { opacity: .26; } 100% { transform: translate(-30px, -115vh); opacity: 0; } }

.hw-eyes { position: absolute; left: var(--x, 3%); top: var(--y, 60%); width: 34px; height: 10px; opacity: 0; animation: hw-blink var(--d, 14s) steps(1) var(--delay, 0s) infinite; }
.hw-eyes::before, .hw-eyes::after { content: ''; position: absolute; top: 0; width: 11px; height: 8px; border-radius: 50% 50% 45% 45%; background: #ffcc33; box-shadow: 0 0 10px 3px rgba(255,150,0,.75); }
.hw-eyes::before { left: 0; } .hw-eyes::after { right: 0; }
@keyframes hw-blink { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: .1; } 14% { opacity: 1; } 30% { opacity: 1; } 32% { opacity: 0; } }

.hw-flash { position: absolute; inset: 0; background: rgba(230,215,255,.0); animation: hw-lightning 23s linear infinite; }
@keyframes hw-lightning { 0%, 96.2%, 97.4%, 100% { background: rgba(230,215,255,0); } 96.4% { background: rgba(235,225,255,.34); } 96.9% { background: rgba(235,225,255,.08); } 97.1% { background: rgba(235,225,255,.28); } }

/* Blut-Tropfen am unteren Rand des Banners */
.hw-drips { position: absolute; left: 0; right: 0; bottom: -17px; height: 18px; pointer-events: none; z-index: 2; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'><path fill='%238b0000' d='M0 0H160V3C150 3 148 9 147 15C146 18 143 18 142 15C141 9 139 3 128 3C121 3 120 6 119 9C118 11 115 11 114 9C113 6 112 3 102 3C92 3 91 5 90 8C89 12 85 12 84 8C83 5 82 3 68 3C60 3 59 7 58 12C57 16 53 16 52 12C51 7 50 3 40 3C30 3 29 5 28 9C27 13 23 13 22 9C21 5 20 3 10 3C5 3 3 4 0 4Z'/></svg>") repeat-x 0 0 / 160px 18px; opacity: .92; }

/* Friedhof als Silhouette an der Oberkante der Fusszeile */
html.halloween footer.sf::after { content: ''; position: absolute; left: 0; right: 0; top: -38px; height: 40px; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='40' viewBox='0 0 420 40'><g fill='%231a0b2a'><path d='M0 40V30H18V22Q18 14 26 14Q34 14 34 22V30H60V40Z'/><path d='M80 40V26L88 26V18H92V26H100V30H92V40Z'/><path d='M130 40V24Q130 16 140 16Q150 16 150 24V40Z'/><path d='M190 40V22L197 12L204 22V40Z'/><path d='M240 40V28H256V20Q256 12 264 12Q272 12 272 20V28H290V40Z'/><path d='M320 40V25H326V20H330V25H336V29H330V40Z'/><path d='M350 40Q352 28 360 24L358 14L364 22L372 12L372 24Q384 28 386 40Z'/><path d='M398 40V26Q398 19 406 19Q414 19 414 26V40Z'/></g></svg>") repeat-x 0 100% / 420px 40px; }
html.dark.halloween footer.sf::after { filter: brightness(.55) drop-shadow(0 -2px 6px rgba(255,122,0,.18)); }

/* Karten / Kacheln leuchten beim Ueberfahren */
html.halloween .mode-card:hover, html.halloween .pl-tile:hover, html.halloween .tp-tile:hover, html.halloween .rank-card:hover { box-shadow: 0 0 0 1px rgba(255,122,0,.55), 0 14px 38px rgba(255,122,0,.22); }

@media (max-width: 700px) { .hw-ghost, .hw-eyes { display: none; } .hw-bat { width: 38px; height: 20px; } }
@media (prefers-reduced-motion: reduce) {
  html.halloween .hero h1, html.halloween .tp-hero h1, html.halloween .pl-hero h1, .hw-fog, .hw-bat, .hw-bat svg, .hw-ghost, .hw-eyes, .hw-flash { animation: none !important; }
  .hw-bat, .hw-ghost, .hw-eyes { display: none; }
}
@media print { #hw-fx, .hw-drips { display: none; } }

/* Heller Modus: Kopfleiste warm statt grau ueber dunklen Abschnitten */
html.halloween:not(.dark) nav.sn { background: rgba(255,246,236,.95); border-bottom: 1px solid rgba(255,122,0,.25); }

/* Discord-Banner im Halloween-Stil: lila Verlauf statt Discord-Blau (der orange Button passte nicht zum Blau) */
html.halloween .dc-cta { background: linear-gradient(120deg, #2b0f4a 0%, #5b1d8f 55%, #8a3a00 100%) !important; box-shadow: 0 14px 40px rgba(91,29,143,.35); }
html.halloween .dc-cta .btn { background: #ff8a1f !important; color: #1a0b05 !important; }