/*
 * Saison-Design – wird NUR geladen, wenn ein Anlass aktiv ist.
 * Bewusst als eigenständige CSS-Datei (nicht im Haupt-Bundle), damit die
 * Seite im Normalbetrieb kein einziges Byte davon lädt.
 *
 * Grundsatz: Layout, Logo, Schriften und die Marken-Akzentfarbe bleiben
 * unangetastet. Verändert wird nur die Stimmung im Hero.
 */

.wsp-saison {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Der Hero-Inhalt muss über der Saison-Ebene liegen. */
.backdrop > .container,
.backdrop > .page-hero,
.backdrop > section,
.backdrop > header {
  position: relative;
  z-index: 1;
}

.wsp-saison__schleier {
  position: absolute;
  inset: 0;
}

/* ---------------------------------------------------------------- Herbst */
[data-saison='herbst'] .wsp-saison__schleier {
  background:
    radial-gradient(46% 52% at 78% 14%, rgba(214, 138, 32, 0.30), transparent 70%),
    radial-gradient(38% 44% at 14% 82%, rgba(176, 84, 28, 0.22), transparent 72%);
  filter: blur(2px);
}

[data-theme='light'][data-saison='herbst'] .wsp-saison__schleier {
  background:
    radial-gradient(46% 52% at 78% 14%, rgba(214, 138, 32, 0.16), transparent 70%),
    radial-gradient(38% 44% at 14% 82%, rgba(176, 84, 28, 0.10), transparent 72%);
}

/* ------------------------------------------------------------- Halloween */
[data-saison='halloween'] .wsp-saison__schleier {
  background:
    radial-gradient(50% 58% at 20% 12%, rgba(84, 26, 122, 0.45), transparent 72%),
    radial-gradient(42% 48% at 86% 78%, rgba(128, 196, 20, 0.16), transparent 70%),
    linear-gradient(to bottom, rgba(6, 2, 10, 0.55), transparent 60%);
}

[data-theme='light'][data-saison='halloween'] .wsp-saison__schleier {
  background:
    radial-gradient(50% 58% at 20% 12%, rgba(84, 26, 122, 0.16), transparent 72%),
    radial-gradient(42% 48% at 86% 78%, rgba(128, 196, 20, 0.10), transparent 70%);
}

/* Voller Mond, weit oben rechts – der Hero bleibt lesbar. */
[data-saison='halloween'] .wsp-saison__mond {
  position: absolute;
  top: 8%;
  right: 9%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fdf6d8, #e7dca6 62%, #cfc189);
  box-shadow: 0 0 70px 26px rgba(253, 246, 216, 0.22);
  opacity: 0.9;
}

[data-theme='light'][data-saison='halloween'] .wsp-saison__mond {
  opacity: 0.5;
}

@media (max-width: 780px) {
  [data-saison='halloween'] .wsp-saison__mond {
    width: 78px;
    height: 78px;
    top: 6%;
    right: 7%;
  }
}

/* ----------------------------------------------------------- Weihnachten */
[data-saison='weihnachten'] .wsp-saison__schleier {
  background:
    radial-gradient(70% 68% at 50% -12%, rgba(26, 58, 116, 0.72), transparent 72%),
    radial-gradient(44% 50% at 84% 76%, rgba(14, 34, 74, 0.52), transparent 74%);
}

[data-theme='light'][data-saison='weihnachten'] .wsp-saison__schleier {
  background:
    radial-gradient(60% 60% at 50% -10%, rgba(22, 48, 96, 0.14), transparent 70%),
    radial-gradient(40% 46% at 84% 74%, rgba(12, 30, 66, 0.10), transparent 72%);
}

/* Lichterkette: feine Linie mit Lämpchen, direkt unter dem Header. */
[data-saison='weihnachten'] .wsp-saison__lichter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  display: flex;
  justify-content: space-between;
  padding: 0 3vw;
  border-top: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

[data-saison='weihnachten'] .wsp-saison__lichter span {
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-accent) 55%, transparent);
  opacity: 0.85;
}

/* Jedes dritte Lämpchen warmweiß – sonst wirkt es wie eine Lichtleiste. */
[data-saison='weihnachten'] .wsp-saison__lichter span:nth-child(3n) {
  background: #ffe6a8;
  box-shadow: 0 0 10px 2px rgba(255, 230, 168, 0.5);
}

[data-saison='weihnachten'] .wsp-saison__lichter span:nth-child(3n + 2) {
  background: #ff8f6b;
  box-shadow: 0 0 10px 2px rgba(255, 143, 107, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  [data-saison='weihnachten'] .wsp-saison__lichter span {
    animation: wsp-lichter 3.4s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * 0.14s);
  }

  @keyframes wsp-lichter {
    from { opacity: 0.35; }
    to   { opacity: 1; }
  }
}

/* ---------------------------------------------------------------- Ostern */
[data-saison='ostern'] .wsp-saison__schleier {
  background:
    radial-gradient(48% 54% at 76% 16%, rgba(150, 214, 120, 0.26), transparent 72%),
    radial-gradient(40% 46% at 16% 80%, rgba(246, 214, 120, 0.20), transparent 72%);
  filter: blur(2px);
}

[data-theme='light'][data-saison='ostern'] .wsp-saison__schleier {
  background:
    radial-gradient(48% 54% at 76% 16%, rgba(150, 214, 120, 0.16), transparent 72%),
    radial-gradient(40% 46% at 16% 80%, rgba(246, 214, 120, 0.14), transparent 72%);
}

/* ------------------------------------------------------------- Partikel */
.wsp-saison__partikel {
  position: absolute;
  inset: 0;
}

.wsp-saison__p {
  position: absolute;
  top: -8%;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .wsp-saison__p {
    animation-name: wsp-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  @keyframes wsp-fall {
    from { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    to   { transform: translate3d(var(--drift, 3vw), 118vh, 0) rotate(var(--spin, 220deg)); }
  }

  /* Fledermäuse fliegen quer statt zu fallen. */
  [data-saison='halloween'] .wsp-saison__p {
    top: auto;
    animation-name: wsp-flug;
  }

  @keyframes wsp-flug {
    from { transform: translate3d(-14vw, 0, 0) scale(1); }
    50%  { transform: translate3d(44vw, -18px, 0) scale(1.04); }
    to   { transform: translate3d(112vw, 6px, 0) scale(1); }
  }
}

/* Ohne Bewegung: Partikel gar nicht erst zeigen – der Farbschleier trägt. */
@media (prefers-reduced-motion: reduce) {
  .wsp-saison__partikel { display: none; }
}

/* Schneeflocke */
[data-saison='weihnachten'] .wsp-saison__p {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.75;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

[data-theme='light'][data-saison='weihnachten'] .wsp-saison__p {
  background: #cfe0f5;
  box-shadow: none;
  opacity: 0.9;
}

/* Blatt / Blüte / Fledermaus kommen als SVG aus dem JS. */
[data-saison='herbst'] .wsp-saison__p,
[data-saison='ostern'] .wsp-saison__p,
[data-saison='halloween'] .wsp-saison__p {
  line-height: 0;
}

[data-saison='halloween'] .wsp-saison__p svg { opacity: 0.72; }
[data-saison='herbst'] .wsp-saison__p svg { opacity: 0.8; }
[data-saison='ostern'] .wsp-saison__p svg { opacity: 0.7; }

/* ------------------------------------------ Countdown- / Aktionsband */
.wsp-saison-band {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--space-2));
  padding-bottom: var(--space-3);
}

/* Bei Weihnachten hängt oben die Lichterkette – das Band rückt darunter. */
[data-saison='weihnachten'] .wsp-saison-band {
  margin-top: 0;
  padding-top: 22px;
}

.wsp-saison-band__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.1rem 0.5rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  font-size: 0.95rem;
  font-weight: 500;
}

.wsp-saison-band__zahl {
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.wsp-saison-band__link {
  font-weight: 600;
  color: var(--color-accent-ink);
  text-decoration: none;
  white-space: nowrap;
}

[data-theme='dark'] .wsp-saison-band__link {
  color: var(--color-accent);
}

.wsp-saison-band__link:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .wsp-saison-band__inner {
    font-size: 0.88rem;
    padding-right: 0.9rem;
  }
}