/* ==========================================================================
   Impact:Cores – Saison-Themes (app/season.php)
   Wird nur geladen, wenn gerade ein Countdown oder Theme aktiv ist.
   ========================================================================== */

/* --- Test-Hinweis (nur für den Admin) --- */
.season-preview form { display: inline; margin-left: 10px; }
.season-preview button { font: inherit; background: #000; color: #fff; border: 2px solid #fff; padding: 2px 10px; cursor: pointer; }

/* --- Countdown-Leiste --- */
.sz-countdown { --sz-a: #1a0f24; --sz-b: #2a1430; --sz-clock: #ff8a1f; --sz-text: #c9b3e6; --sz-until: #b388ff;
  background: linear-gradient(90deg, var(--sz-a), var(--sz-b) 50%, var(--sz-a)); border-bottom: 4px solid #000;
  color: #f3e6ff; position: relative; overflow: hidden; }
.sz-countdown.sz-christmas { --sz-a: #0f2418; --sz-b: #1d3a26; --sz-clock: #ff5a5a; --sz-text: #cfe8d4; --sz-until: #ffd54f; }
.sz-countdown.sz-newyear { --sz-a: #10142a; --sz-b: #1f2650; --sz-clock: #ffd54f; --sz-text: #c9cde8; --sz-until: #4fd1c5; }
.sz-countdown::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.04) 22px 24px); }
.sz-countdown-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding-top: 10px; padding-bottom: 10px; position: relative; }
.sz-cd-text { font-size: 13px; color: var(--sz-text); letter-spacing: .02em; }
.sz-cd-clock { font-family: var(--font-display); font-size: 14px; color: var(--sz-clock); text-shadow: 2px 2px 0 #000; white-space: nowrap; }
.sz-cd-clock b { font-weight: normal; display: inline-block; min-width: 1.6em; text-align: center; background: #0b0a15; border: 2px solid #000; padding: 4px 2px; }
.sz-cd-clock small { font-size: 9px; color: var(--sz-text); text-shadow: none; margin-right: 6px; }
.sz-cd-until { font-family: var(--font-pixel); font-size: 12px; color: var(--sz-until); text-transform: uppercase; }
.sz-art { animation: sz-bob 1.6s steps(2) infinite; }
.sz-art-r { animation-delay: -.8s; }
@keyframes sz-bob { 50% { transform: translateY(-3px); } }

/* --- Banner am Theme-Tag --- */
.sz-banner { background: var(--accent); color: #12111f; border-bottom: 4px solid #000; }
.sz-banner-row { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; text-align: center; }
.sz-banner strong { font-family: var(--font-display); font-size: 13px; }
.sz-banner-text { font-size: 13px; }

/* --- Gemeinsame Deko-Ebene: liegt HINTER dem Inhalt, stört beim Lesen nicht --- */
.sz-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
body[class*="theme-"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.site-header { position: relative; }
.theme-halloween .hero-title, .theme-christmas .hero-title, .theme-newyear .hero-title,
.theme-space .hero-title, .theme-towel .hero-title { text-shadow: 3px 3px 0 #000, 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
.sz-fly { position: absolute; left: -100px; animation: sz-fly 18s linear infinite; }
.sz-fly.f1 { top: 140px; }
.sz-fly.f2 { top: 260px; animation-duration: 24s; animation-delay: -9s; }
.sz-fly.f3 { top: 70px; animation-duration: 30s; animation-delay: -17s; }
@keyframes sz-fly { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, 30px); } 50% { transform: translate(55vw, -10px); }
  75% { transform: translate(82vw, 25px); } 100% { transform: translate(calc(100vw + 200px), 0); } }

/* ==== Halloween ==== */
body.theme-halloween { --bg: #0d0912; --panel: #1e1328; --teal: #b388ff; background-color: #0d0912; }
body.theme-halloween::before { background: radial-gradient(ellipse at 50% -10%, rgba(255,138,31,.16), transparent 55%),
  radial-gradient(ellipse at 50% 120%, rgba(106,63,201,.25), transparent 60%); }
.theme-halloween .site-header::before, .theme-halloween .site-header::after {
  content: ""; position: absolute; top: 0; width: 90px; height: 90px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%20shape-rendering%3D%22crispEdges%22%20fill%3D%22none%22%20stroke%3D%22%23c9c4d9%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%200L60%2060M0%200L30%2060M0%200L60%2030M0%200L0%2060M0%200L60%200%22/%3E%3Cpath%20d%3D%22M0%2012Q8%208%2012%200M0%2024Q16%2018%2024%200M0%2038Q24%2030%2038%200M0%2052Q34%2042%2052%200%22/%3E%3C/svg%3E") no-repeat; background-size: contain; }
.theme-halloween .site-header::before { left: 0; }
.theme-halloween .site-header::after { right: 0; transform: scaleX(-1); }
.theme-halloween .sz-fly .sprite { animation: sz-flap .4s steps(2) infinite; }
@keyframes sz-flap { 50% { transform: scaleY(.7); } }
.sz-moon { position: absolute; top: 210px; right: 1.5%; width: 64px; height: 64px; background: #f2e6c9; opacity: .8;
  box-shadow: inset -12px -6px 0 #d2bb8a, 0 0 40px rgba(242,230,201,.35);
  clip-path: polygon(25% 0,75% 0,75% 8%,88% 8%,88% 20%,100% 20%,100% 80%,88% 80%,88% 92%,75% 92%,75% 100%,25% 100%,25% 92%,12% 92%,12% 80%,0 80%,0 20%,12% 20%,12% 8%,25% 8%); }
.sz-spider { position: absolute; top: 160px; right: 46%; display: flex; flex-direction: column; align-items: center; animation: sz-drop 6s ease-in-out infinite; }
.sz-spider::before { content: ""; width: 2px; height: 120px; background: rgba(201,196,217,.5); }
@keyframes sz-drop { 0%, 100% { transform: translateY(-40px); } 50% { transform: translateY(10px); } }

/* ==== Weihnachten ==== */
body.theme-christmas { --bg: #0b1210; --panel: #16241d; background-color: #0b1210; }
body.theme-christmas::before { background: radial-gradient(ellipse at 50% -10%, rgba(255,90,90,.14), transparent 55%),
  radial-gradient(ellipse at 50% 120%, rgba(95,174,58,.18), transparent 60%); }
/* Lichterkette unter der Kopfzeile */
.theme-christmas .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 10px; pointer-events: none;
  background: radial-gradient(circle at 6px 4px, #ff5a5a 0 3px, transparent 4px) 0 0 / 48px 10px repeat-x,
              radial-gradient(circle at 22px 4px, #ffd54f 0 3px, transparent 4px) 0 0 / 48px 10px repeat-x,
              radial-gradient(circle at 38px 4px, #4fd1c5 0 3px, transparent 4px) 0 0 / 48px 10px repeat-x;
  animation: sz-blink 1.2s steps(2) infinite; z-index: 2; }
@keyframes sz-blink { 50% { filter: brightness(.45); } }
.sz-flake { position: absolute; top: -40px; animation: sz-fall linear infinite, sz-sway ease-in-out infinite alternate; opacity: .8; }
@keyframes sz-fall { to { top: 105vh; } }
@keyframes sz-sway { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
.sz-flake:nth-child(1) { left: 0.7%; animation-duration: 10s, 4s; animation-delay: -12s, -12s; }
.sz-flake:nth-child(2) { left: 5.9%; animation-duration: 9s, 3s; animation-delay: -12s, -12s; }
.sz-flake:nth-child(3) { left: 11.9%; animation-duration: 17s, 4s; animation-delay: -11s, -11s; }
.sz-flake:nth-child(4) { left: 19.3%; animation-duration: 13s, 5s; animation-delay: -6s, -6s; }
.sz-flake:nth-child(5) { left: 24.8%; animation-duration: 12s, 5s; animation-delay: -5s, -5s; }
.sz-flake:nth-child(6) { left: 29.9%; animation-duration: 20s, 5s; animation-delay: -11s, -11s; }
.sz-flake:nth-child(7) { left: 35.6%; animation-duration: 17s, 4s; animation-delay: -7s, -7s; }
.sz-flake:nth-child(8) { left: 40.6%; animation-duration: 10s, 3s; animation-delay: -17s, -17s; }
.sz-flake:nth-child(9) { left: 47.5%; animation-duration: 18s, 6s; animation-delay: -9s, -9s; }
.sz-flake:nth-child(10) { left: 51.7%; animation-duration: 13s, 4s; animation-delay: -13s, -13s; }
.sz-flake:nth-child(11) { left: 56.7%; animation-duration: 13s, 3s; animation-delay: -1s, -1s; }
.sz-flake:nth-child(12) { left: 63.0%; animation-duration: 13s, 5s; animation-delay: -16s, -16s; }
.sz-flake:nth-child(13) { left: 67.6%; animation-duration: 19s, 6s; animation-delay: -6s, -6s; }
.sz-flake:nth-child(14) { left: 75.5%; animation-duration: 19s, 5s; animation-delay: -20s, -20s; }
.sz-flake:nth-child(15) { left: 79.0%; animation-duration: 15s, 4s; animation-delay: -18s, -18s; }
.sz-flake:nth-child(16) { left: 86.7%; animation-duration: 10s, 5s; animation-delay: -1s, -1s; }
.sz-flake:nth-child(17) { left: 91.9%; animation-duration: 18s, 5s; animation-delay: -7s, -7s; }
.sz-flake:nth-child(18) { left: 98.0%; animation-duration: 13s, 3s; animation-delay: -14s, -14s; }

/* ==== Silvester / Neujahr ==== */
body.theme-newyear { --bg: #0a0b18; --panel: #161a33; background-color: #0a0b18; }
body.theme-newyear::before { background: radial-gradient(ellipse at 50% -10%, rgba(255,213,79,.14), transparent 55%); }
.sz-firework { position: absolute; width: 6px; height: 6px; color: #ffd54f; animation: sz-burst 5.4s steps(12) infinite; opacity: 0; }
.sz-firework::before { content: ""; position: absolute; width: 6px; height: 6px; background: transparent;
  box-shadow: 0 -48px currentColor, 34px -34px currentColor, 48px 0 currentColor, 34px 34px currentColor,
              0 48px currentColor, -34px 34px currentColor, -48px 0 currentColor, -34px -34px currentColor,
              0 -24px currentColor, 17px -17px currentColor, 24px 0 currentColor, 17px 17px currentColor,
              0 24px currentColor, -17px 17px currentColor, -24px 0 currentColor, -17px -17px currentColor; }
@keyframes sz-burst { 0% { transform: scale(.1); opacity: 0; } 8% { opacity: 1; } 30% { transform: scale(1.2); opacity: .9; }
  45% { transform: scale(1.35) translateY(8px); opacity: 0; } 100% { opacity: 0; } }
.sz-firework:nth-child(1) { left: 12%; top: 22%; color: #ffd54f; animation-delay: -0.9s; }
.sz-firework:nth-child(2) { left: 78%; top: 18%; color: #4fd1c5; animation-delay: -1.8s; }
.sz-firework:nth-child(3) { left: 30%; top: 40%; color: #ff6b6b; animation-delay: -2.7s; }
.sz-firework:nth-child(4) { left: 64%; top: 36%; color: #b388ff; animation-delay: -3.6s; }
.sz-firework:nth-child(5) { left: 88%; top: 52%; color: #ffd54f; animation-delay: -4.5s; }
.sz-firework:nth-child(6) { left: 46%; top: 16%; color: #ff8a1f; animation-delay: -5.4s; }

/* ==== 1. April: Glitch ==== */
body.theme-april { --teal: #4fffd2; }
.theme-april .hero-title, .theme-april .h2, .theme-april .project-title { animation: sz-glitch 2.8s steps(1) infinite; }
@keyframes sz-glitch {
  0%, 88%, 100% { text-shadow: 2px 0 #ff4fd8, -2px 0 #4fffd2; transform: none; }
  90% { text-shadow: -4px 0 #ff4fd8, 4px 0 #4fffd2; transform: translateX(3px) skewX(-6deg); }
  93% { text-shadow: 5px 0 #ff4fd8, -5px 0 #4fffd2; transform: translateX(-4px); }
  96% { text-shadow: 0 2px #ff4fd8, 0 -2px #4fffd2; transform: translateY(1px) skewX(4deg); } }
.theme-april .site-header { animation: sz-tear 7s steps(1) infinite; }
@keyframes sz-tear { 0%, 96%, 100% { transform: none; } 97% { transform: translateX(6px); } 98% { transform: translateX(-4px); } }
.sz-glitch-band { position: absolute; left: 0; right: 0; height: 18px; top: -20px; background: rgba(255,79,216,.12);
  box-shadow: 0 6px 0 rgba(79,255,210,.08); animation: sz-band 6s linear infinite; }
@keyframes sz-band { to { top: 105vh; } }
.theme-april .sz-banner { background: repeating-linear-gradient(90deg, #ff4fd8 0 12px, #ff6be0 12px 24px); }

/* ==== Sci-Fi-Tag (4. Mai) ==== */
body.theme-space { --bg: #05060f; --panel: #11152b; background-color: #05060f; }
.sz-stars { position: absolute; inset: -50% 0 0 0; background-repeat: repeat; animation: sz-warp 40s linear infinite; }
.sz-stars.s1 { background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #c9c4d9, transparent),
  radial-gradient(2px 2px at 200px 150px, #7cc7ff, transparent), radial-gradient(1px 1px at 300px 40px, #fff, transparent); background-size: 340px 200px; }
.sz-stars.s2 { background-image: radial-gradient(2px 2px at 60px 120px, #fff, transparent), radial-gradient(1px 1px at 250px 20px, #ffd54f, transparent);
  background-size: 300px 260px; animation-duration: 22s; opacity: .7; }
@keyframes sz-warp { to { transform: translateY(50%); } }
.sz-planet { position: absolute; right: 4%; top: 240px; opacity: .85; }
.theme-space .sz-fly.f1 { animation-duration: 26s; top: 180px; }

/* ==== Towel Day (25. Mai) ==== */
body.theme-towel { --bg: #0b1416; --panel: #142326; background-color: #0b1416; }
.theme-towel .sz-fly { animation-name: sz-drift; }
@keyframes sz-drift { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(55vw, 40px) rotate(180deg); }
  100% { transform: translate(calc(100vw + 200px), 0) rotate(360deg); } }
.sz-42 { position: absolute; right: 3%; bottom: 6%; font-family: var(--font-display); font-size: 72px; color: rgba(79,209,197,.12); }

/* --- Handy & reduzierte Bewegung --- */
@media (max-width: 640px) {
  .sz-cd-text { flex-basis: 100%; text-align: center; }
  .sz-cd-clock { font-size: 12px; }
  .sz-spider, .sz-moon, .sz-fly.f3, .sz-planet, .sz-42 { display: none; }
  .theme-halloween .site-header::before, .theme-halloween .site-header::after { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .sz-sky *, .sz-art, .sz-fly .sprite, .theme-april .hero-title, .theme-april .h2, .theme-april .project-title,
  .theme-april .site-header, .theme-christmas .site-header::after { animation: none !important; }
  .sz-fly, .sz-flake, .sz-firework, .sz-glitch-band { display: none; }
}