/* ==========================================================
   FMSC Saison-Deko
   Datei: /css/components/seasonal.css

   Gesteuert durch:
   /js/seasonal/seasonal.js

   Unterstützte Layer:
   Jahreszeiten, immer genau eine Basis:
   - Frühling: season-spring / season-base-spring
   - Sommer: season-summer / season-base-summer
   - Herbst: season-autumn / season-base-autumn
   - Winter: season-winter / season-base-winter (Schnee)

   Jahresevents, zusätzlich zur Jahreszeit:
   - Weihnachten: season-christmas / season-event-christmas (Geschenke)
   - Ostern: season-easter / season-event-easter
   - Silvester/Neujahr: season-newyear / season-event-newyear

   Wichtig:
   - blockiert keine Klicks
   - verschiebt kein Layout
   - Wetterbox bleibt exakt an ihrer Position
   - mobil reduziert
   - respektiert prefers-reduced-motion
   ========================================================== */


/* ==========================================================
   Basis
   ========================================================== */

.seasonal-enabled {
  --seasonal-navbar-z: 5;
  --seasonal-hero-z: 1;
  --seasonal-content-z: 2;
  --seasonal-weather-z: 60;
  --seasonal-footer-z: 1;
  --seasonal-soft-shadow: 0 8px 20px rgba(17, 24, 39, 0.16);
}

.seasonal-navbar-target,
.seasonal-hero-target,
.seasonal-footer-target {
  position: relative;
}

.seasonal-navbar-deco,
.seasonal-snow,
.seasonal-hero-deco,
.seasonal-footer-deco,
.seasonal-navbar-deco *,
.seasonal-snow *,
.seasonal-hero-deco *,
.seasonal-footer-deco * {
  pointer-events: none;
  user-select: none;
}

body.season-spring .navbar,
body.season-summer .navbar,
body.season-autumn .navbar,
body.season-winter .navbar,
body.season-base-spring .navbar,
body.season-base-summer .navbar,
body.season-base-autumn .navbar,
body.season-base-winter .navbar,
body.season-christmas .navbar,
body.season-easter .navbar,
body.season-newyear .navbar {
  overflow: visible;
}

body.season-spring .seasonal-navbar-target,
body.season-summer .seasonal-navbar-target,
body.season-autumn .seasonal-navbar-target,
body.season-winter .seasonal-navbar-target,
body.season-base-spring .seasonal-navbar-target,
body.season-base-summer .seasonal-navbar-target,
body.season-base-autumn .seasonal-navbar-target,
body.season-base-winter .seasonal-navbar-target,
body.season-christmas .seasonal-navbar-target,
body.season-easter .seasonal-navbar-target,
body.season-newyear .seasonal-navbar-target {
  position: relative;
  overflow: visible;
}

body.season-spring .seasonal-hero-target,
body.season-summer .seasonal-hero-target,
body.season-autumn .seasonal-hero-target,
body.season-winter .seasonal-hero-target,
body.season-base-spring .seasonal-hero-target,
body.season-base-summer .seasonal-hero-target,
body.season-base-autumn .seasonal-hero-target,
body.season-base-winter .seasonal-hero-target,
body.season-christmas .seasonal-hero-target,
body.season-easter .seasonal-hero-target,
body.season-newyear .seasonal-hero-target {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/*
   Wichtig:
   Nicht alle direkten Kinder des Headers auf position:relative setzen.
   Sonst wird .header-weather von absolute auf relative geändert
   und dadurch verschoben.
*/
body.season-spring .seasonal-hero-target .hero-content,
body.season-summer .seasonal-hero-target .hero-content,
body.season-autumn .seasonal-hero-target .hero-content,
body.season-winter .seasonal-hero-target .hero-content,
body.season-base-spring .seasonal-hero-target .hero-content,
body.season-base-summer .seasonal-hero-target .hero-content,
body.season-base-autumn .seasonal-hero-target .hero-content,
body.season-base-winter .seasonal-hero-target .hero-content,
body.season-christmas .seasonal-hero-target .hero-content,
body.season-easter .seasonal-hero-target .hero-content,
body.season-newyear .seasonal-hero-target .hero-content {
  position: relative;
  z-index: var(--seasonal-content-z);
}

body.season-spring .seasonal-hero-target .header-weather,
body.season-summer .seasonal-hero-target .header-weather,
body.season-autumn .seasonal-hero-target .header-weather,
body.season-winter .seasonal-hero-target .header-weather,
body.season-base-spring .seasonal-hero-target .header-weather,
body.season-base-summer .seasonal-hero-target .header-weather,
body.season-base-autumn .seasonal-hero-target .header-weather,
body.season-base-winter .seasonal-hero-target .header-weather,
body.season-christmas .seasonal-hero-target .header-weather,
body.season-easter .seasonal-hero-target .header-weather,
body.season-newyear .seasonal-hero-target .header-weather {
  position: absolute;
  z-index: var(--seasonal-weather-z);
}

body.season-spring .seasonal-footer-target,
body.season-summer .seasonal-footer-target,
body.season-autumn .seasonal-footer-target,
body.season-winter .seasonal-footer-target,
body.season-base-spring .seasonal-footer-target,
body.season-base-summer .seasonal-footer-target,
body.season-base-autumn .seasonal-footer-target,
body.season-base-winter .seasonal-footer-target,
body.season-christmas .seasonal-footer-target,
body.season-easter .seasonal-footer-target,
body.season-newyear .seasonal-footer-target {
  position: relative;
  overflow: hidden;
}

body.season-spring .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-summer .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-autumn .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-winter .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-base-spring .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-base-summer .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-base-autumn .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-base-winter .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-christmas .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-easter .seasonal-footer-target > :not(.seasonal-footer-deco),
body.season-newyear .seasonal-footer-target > :not(.seasonal-footer-deco) {
  position: relative;
  z-index: 2;
}

body.season-spring .seasonal-footer-deco,
body.season-summer .seasonal-footer-deco,
body.season-autumn .seasonal-footer-deco,
body.season-winter .seasonal-footer-deco,
body.season-base-spring .seasonal-footer-deco,
body.season-base-summer .seasonal-footer-deco,
body.season-base-autumn .seasonal-footer-deco,
body.season-base-winter .seasonal-footer-deco,
body.season-christmas .seasonal-footer-deco,
body.season-easter .seasonal-footer-deco,
body.season-newyear .seasonal-footer-deco {
  position: absolute;
  inset: 0;
  z-index: var(--seasonal-footer-z);
  overflow: hidden;
}


/* ==========================================================
   Weihnachten: Navbar-Geschenke
   JS erzeugt:
   .seasonal-christmas-navbar-deco
   .seasonal-navbar-ribbon
   .seasonal-gift .seasonal-gift-1 bis 3
   ========================================================== */

body.season-christmas .seasonal-christmas-navbar-deco {
  position: absolute;
  right: clamp(0.35rem, 2vw, 1.4rem);
  bottom: clamp(-0.75rem, -0.7vw, -0.45rem);
  z-index: var(--seasonal-navbar-z);
  width: clamp(92px, 11vw, 150px);
  height: clamp(34px, 4vw, 48px);
  overflow: visible;
}

body.season-christmas .seasonal-navbar-ribbon {
  position: absolute;
  left: 6%;
  right: 3%;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(185, 28, 28, 0.95),
      rgba(22, 101, 52, 0.95),
      rgba(185, 28, 28, 0.95)
    );
  box-shadow: 0 3px 8px rgba(17, 24, 39, 0.18);
  transform: rotate(-4deg);
  opacity: 0.88;
}

body.season-christmas .seasonal-gift {
  position: absolute;
  display: block;
  bottom: 0;
  border-radius: 5px;
  box-shadow: var(--seasonal-soft-shadow);
  transform-origin: bottom center;
}

body.season-christmas .seasonal-gift::before,
body.season-christmas .seasonal-gift::after {
  content: "";
  position: absolute;
  display: block;
}

body.season-christmas .seasonal-gift::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 18%;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.82);
}

body.season-christmas .seasonal-gift::after {
  left: 0;
  right: 0;
  top: 38%;
  height: 18%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.82);
}

body.season-christmas .seasonal-gift-1 {
  left: 7%;
  width: clamp(23px, 2.45vw, 34px);
  height: clamp(21px, 2.25vw, 31px);
  background: linear-gradient(135deg, #dc2626, #991b1b);
  transform: rotate(-7deg);
  animation: seasonalGiftFloatOne 4.8s ease-in-out infinite;
}

body.season-christmas .seasonal-gift-2 {
  left: 37%;
  width: clamp(27px, 2.8vw, 39px);
  height: clamp(25px, 2.65vw, 37px);
  background: linear-gradient(135deg, #16a34a, #166534);
  transform: rotate(4deg);
  animation: seasonalGiftFloatTwo 5.4s ease-in-out infinite;
}

body.season-christmas .seasonal-gift-3 {
  right: 5%;
  width: clamp(21px, 2.25vw, 32px);
  height: clamp(19px, 2.1vw, 29px);
  background: linear-gradient(135deg, #f59e0b, #b45309);
  transform: rotate(8deg);
  animation: seasonalGiftFloatThree 5.1s ease-in-out infinite;
}


/* ==========================================================
   Winter: Schnee im Header/Hero

   Wichtig:
   - Schnee gehört zur Jahreszeit Winter
   - Weihnachten ist nur ein zusätzlicher Event-Layer
   - Dadurch ist Schnee an Weihnachten automatisch aktiv, weil Dezember Winter ist

   JS erzeugt im Winter:
   .seasonal-snow .seasonal-christmas-snow
   .seasonal-snowflake
   ========================================================== */

body.season-winter .seasonal-snow,
body.season-base-winter .seasonal-snow {
  position: absolute;
  inset: 0;
  z-index: var(--seasonal-hero-z);
  overflow: hidden;
  contain: layout paint;
}

body.season-winter .seasonal-snow::before,
body.season-base-winter .seasonal-snow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.18), transparent 20%),
    radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.13), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 62%);
  opacity: 0.85;
}

body.season-winter .seasonal-snowflake,
body.season-base-winter .seasonal-snowflake {
  position: absolute;
  top: -12%;
  left: var(--snow-x, 50%);
  width: var(--snow-size, 7px);
  height: var(--snow-size, 7px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  opacity: var(--snow-opacity, 0.7);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.78),
    0 0 18px rgba(255, 255, 255, 0.28);
  animation-name: seasonalSnowFall;
  animation-duration: var(--snow-duration, 14s);
  animation-delay: var(--snow-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

body.season-winter .seasonal-snowflake:nth-child(3n),
body.season-base-winter .seasonal-snowflake:nth-child(3n) {
  filter: blur(0.4px);
}

body.season-winter .seasonal-snowflake:nth-child(4n),
body.season-base-winter .seasonal-snowflake:nth-child(4n) {
  background: rgba(255, 255, 255, 0.76);
}

body.season-winter .seasonal-snowflake:nth-child(5n),
body.season-base-winter .seasonal-snowflake:nth-child(5n) {
  width: calc(var(--snow-size, 7px) * 0.72);
  height: calc(var(--snow-size, 7px) * 0.72);
}


/* ==========================================================
   Weihnachten: Footer-Deko
   JS erzeugt:
   .seasonal-christmas-footer-deco
   .seasonal-footer-snowline
   .seasonal-footer-stars
   .seasonal-footer-star-1 bis 7
   ========================================================== */

body.season-christmas .seasonal-footer-snowline {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 9px;
  border-radius: 0 0 999px 999px;
  background:
    radial-gradient(circle at 6% 0, rgba(255, 255, 255, 0.96) 0 7px, transparent 8px),
    radial-gradient(circle at 16% 0, rgba(255, 255, 255, 0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 27% 0, rgba(255, 255, 255, 0.95) 0 8px, transparent 9px),
    radial-gradient(circle at 39% 0, rgba(255, 255, 255, 0.88) 0 5px, transparent 6px),
    radial-gradient(circle at 51% 0, rgba(255, 255, 255, 0.96) 0 7px, transparent 8px),
    radial-gradient(circle at 64% 0, rgba(255, 255, 255, 0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 0, rgba(255, 255, 255, 0.95) 0 8px, transparent 9px),
    radial-gradient(circle at 91% 0, rgba(255, 255, 255, 0.88) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72));
  box-shadow:
    0 4px 14px rgba(255, 255, 255, 0.18),
    0 8px 22px rgba(17, 24, 39, 0.12);
  opacity: 0.95;
}

body.season-christmas .seasonal-footer-stars {
  position: absolute;
  inset: 0;
}

body.season-christmas .seasonal-footer-star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(255, 255, 255, 0.35);
  opacity: 0.75;
  animation: seasonalFooterTwinkle 3.8s ease-in-out infinite;
}

body.season-christmas .seasonal-footer-star::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  transform: translate(-50%, -50%);
}

body.season-christmas .seasonal-footer-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  transform: translate(-50%, -50%);
}

body.season-christmas .seasonal-footer-star-1 { left: 8%; top: 34%; animation-delay: -0.4s; }
body.season-christmas .seasonal-footer-star-2 { left: 21%; top: 68%; animation-delay: -1.2s; }
body.season-christmas .seasonal-footer-star-3 { left: 37%; top: 42%; animation-delay: -2.1s; }
body.season-christmas .seasonal-footer-star-4 { left: 54%; top: 73%; animation-delay: -0.9s; }
body.season-christmas .seasonal-footer-star-5 { left: 69%; top: 36%; animation-delay: -1.8s; }
body.season-christmas .seasonal-footer-star-6 { left: 83%; top: 64%; animation-delay: -2.7s; }
body.season-christmas .seasonal-footer-star-7 { left: 94%; top: 39%; animation-delay: -1.5s; }


/* ==========================================================
   Ostern: Navbar
   JS erzeugt:
   .seasonal-easter-navbar-deco
   .seasonal-easter-egg-1 bis 4
   .seasonal-easter-bunny
   ========================================================== */

body.season-easter .seasonal-easter-navbar-deco {
  position: absolute;
  right: clamp(0.35rem, 2vw, 1.4rem);
  bottom: clamp(-0.75rem, -0.7vw, -0.45rem);
  z-index: var(--seasonal-navbar-z);
  width: clamp(112px, 11vw, 168px);
  height: clamp(38px, 4.2vw, 58px);
  overflow: visible;
}

body.season-easter .seasonal-easter-egg {
  position: absolute;
  bottom: 0;
  width: clamp(17px, 1.9vw, 27px);
  height: clamp(24px, 2.7vw, 38px);
  border-radius: 52% 52% 46% 46%;
  box-shadow:
    inset -4px -6px 8px rgba(17, 24, 39, 0.16),
    inset 4px 4px 7px rgba(255, 255, 255, 0.5),
    var(--seasonal-soft-shadow);
  transform-origin: bottom center;
  animation: seasonalEggFloat 5.2s ease-in-out infinite;
}

body.season-easter .seasonal-easter-egg::before,
body.season-easter .seasonal-easter-egg::after {
  content: "";
  position: absolute;
  display: block;
}

body.season-easter .seasonal-easter-egg::before {
  left: 12%;
  right: 12%;
  top: 42%;
  height: 18%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
}

body.season-easter .seasonal-easter-egg::after {
  left: 28%;
  top: 18%;
  width: 28%;
  height: 18%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

body.season-easter .seasonal-easter-egg-1 {
  left: 6%;
  background: linear-gradient(135deg, #f9a8d4, #db2777);
  transform: rotate(-8deg);
}

body.season-easter .seasonal-easter-egg-2 {
  left: 27%;
  bottom: 4px;
  width: clamp(20px, 2.2vw, 32px);
  height: clamp(28px, 3vw, 44px);
  background: linear-gradient(135deg, #93c5fd, #2563eb);
  transform: rotate(4deg);
  animation-delay: -1.4s;
}

body.season-easter .seasonal-easter-egg-3 {
  left: 50%;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  transform: rotate(8deg);
  animation-delay: -2.2s;
}

body.season-easter .seasonal-easter-egg-4 {
  right: 7%;
  bottom: 2px;
  background: linear-gradient(135deg, #bbf7d0, #16a34a);
  transform: rotate(-5deg);
  animation-delay: -0.8s;
}

body.season-easter .seasonal-easter-bunny {
  position: absolute;
  right: 20%;
  bottom: 16px;
  width: 15px;
  height: 15px;
  border-radius: 999px 999px 75% 75%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    -5px 3px 0 rgba(255, 255, 255, 0.88),
    5px 3px 0 rgba(255, 255, 255, 0.88),
    0 5px 10px rgba(17, 24, 39, 0.12);
}

body.season-easter .seasonal-easter-bunny::before,
body.season-easter .seasonal-easter-bunny::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 6px;
  height: 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transform-origin: bottom center;
}

body.season-easter .seasonal-easter-bunny::before {
  left: 2px;
  transform: rotate(-14deg);
}

body.season-easter .seasonal-easter-bunny::after {
  right: 2px;
  transform: rotate(14deg);
}


/* ==========================================================
   Ostern: Header/Hero
   JS erzeugt:
   .seasonal-easter-hero-deco
   .seasonal-blossom-1 bis n
   ========================================================== */

body.season-easter .seasonal-easter-hero-deco {
  position: absolute;
  inset: 0;
  z-index: var(--seasonal-hero-z);
  overflow: hidden;
  contain: layout paint;
  background:
    radial-gradient(circle at 20% 18%, rgba(252, 231, 243, 0.20), transparent 22%),
    radial-gradient(circle at 80% 22%, rgba(220, 252, 231, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(236, 253, 245, 0.08), transparent 62%);
}

body.season-easter .seasonal-blossom {
  position: absolute;
  top: -12%;
  left: var(--blossom-x, 50%);
  width: var(--blossom-size, 11px);
  height: calc(var(--blossom-size, 11px) * 1.35);
  border-radius: 80% 20% 80% 20%;
  background: rgba(249, 168, 212, 0.78);
  opacity: 0.58;
  animation-name: seasonalBlossomFall;
  animation-duration: calc(var(--blossom-duration, 12s) + 8s);
  animation-delay: var(--blossom-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

body.season-easter .seasonal-blossom:nth-child(3n) {
  background: rgba(253, 186, 116, 0.68);
}

body.season-easter .seasonal-blossom:nth-child(4n) {
  background: rgba(187, 247, 208, 0.65);
  filter: blur(0.2px);
}


/* ==========================================================
   Ostern: Footer
   JS erzeugt:
   .seasonal-easter-footer-deco
   .seasonal-footer-grass
   .seasonal-footer-egg-1 bis 5
   ========================================================== */

body.season-easter .seasonal-easter-footer-deco::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 8px;
  border-radius: 0 0 999px 999px;
  background:
    radial-gradient(circle at 8% 0, rgba(134, 239, 172, 0.95) 0 6px, transparent 7px),
    radial-gradient(circle at 22% 0, rgba(187, 247, 208, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 38% 0, rgba(134, 239, 172, 0.95) 0 7px, transparent 8px),
    radial-gradient(circle at 56% 0, rgba(187, 247, 208, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 0, rgba(134, 239, 172, 0.95) 0 7px, transparent 8px),
    radial-gradient(circle at 92% 0, rgba(187, 247, 208, 0.95) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(187, 247, 208, 0.95), rgba(74, 222, 128, 0.55));
}

body.season-easter .seasonal-footer-grass {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  opacity: 0.38;
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0 8px,
      rgba(34, 197, 94, 0.7) 9px 10px,
      transparent 11px 18px
    );
}

body.season-easter .seasonal-footer-egg {
  position: absolute;
  top: 7px;
  width: 10px;
  height: 14px;
  border-radius: 52% 52% 46% 46%;
  opacity: 0.5;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
}

body.season-easter .seasonal-footer-egg-1 { left: 12%; background: #f9a8d4; }
body.season-easter .seasonal-footer-egg-2 { left: 28%; background: #93c5fd; }
body.season-easter .seasonal-footer-egg-3 { left: 52%; background: #fde68a; }
body.season-easter .seasonal-footer-egg-4 { left: 71%; background: #bbf7d0; }
body.season-easter .seasonal-footer-egg-5 { left: 88%; background: #fdba74; }

/* ==========================================================
   Sommer: Header/Hero
   JS erzeugt:
   .seasonal-summer-hero-deco
   .seasonal-summer-glow
   .seasonal-summer-ray-1 bis 3

   Optik:
   - Sonne/Glow oben rechts
   - alle Sonnenstrahlen starten logisch aus demselben Punkt
   - Strahlen laufen weich nach links/unten aus
   ========================================================== */

body.season-summer .seasonal-summer-hero-deco {
  --summer-sun-x: 82%;
  --summer-sun-y: 18%;

  position: absolute;
  inset: 0;
  z-index: var(--seasonal-hero-z);
  overflow: hidden;
  contain: layout paint;
  background:
    radial-gradient(
      circle at var(--summer-sun-x) var(--summer-sun-y),
      rgba(250, 204, 21, 0.24),
      rgba(250, 204, 21, 0.10) 12%,
      transparent 26%
    ),
    linear-gradient(180deg, rgba(253, 224, 71, 0.07), transparent 64%);
}

body.season-summer .seasonal-summer-glow {
  position: absolute;
  left: calc(var(--summer-sun-x) - 150px);
  top: calc(var(--summer-sun-y) - 150px);
  width: clamp(180px, 24vw, 340px);
  height: clamp(180px, 24vw, 340px);
  border-radius: 999px;
  background:
    radial-gradient(
      circle,
      rgba(250, 204, 21, 0.24) 0%,
      rgba(250, 204, 21, 0.12) 34%,
      transparent 68%
    );
  animation: seasonalSunPulse 7s ease-in-out infinite;
}

/*
   Alle Strahlen haben denselben Ursprung:
   right: calc(100% - var(--summer-sun-x))
   top: var(--summer-sun-y)

   Dadurch kommen sie optisch wirklich aus der Sonne.
*/
body.season-summer .seasonal-summer-ray {
  position: absolute;
  right: calc(100% - var(--summer-sun-x));
  top: var(--summer-sun-y);
  width: clamp(520px, 56vw, 980px);
  height: clamp(1px, 0.18vw, 3px);
  border-radius: 999px;
  transform-origin: 100% 50%;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(254, 240, 138, 0.04) 18%,
      rgba(254, 240, 138, 0.16) 52%,
      rgba(254, 240, 138, 0.34) 82%,
      rgba(254, 240, 138, 0.06) 100%
    );
  opacity: 0.72;
  filter: blur(0.25px);
  animation: seasonalRayDrift 9s ease-in-out infinite;
}

/* oberer Strahl: fast gerade nach links */
body.season-summer .seasonal-summer-ray-1 {
  transform: rotate(-4deg);
  opacity: 0.42;
}

/* mittlerer Strahl: leicht nach unten links */
body.season-summer .seasonal-summer-ray-2 {
  transform: rotate(-12deg);
  opacity: 0.56;
  animation-delay: -2.5s;
}

/* unterer Strahl: stärker nach unten links */
body.season-summer .seasonal-summer-ray-3 {
  transform: rotate(-21deg);
  opacity: 0.46;
  animation-delay: -4.5s;
}

/* ==========================================================
   Herbst: wenige realistische, langsam schwebende Blätter
   JS erzeugt:
   .seasonal-autumn-navbar-deco
   .seasonal-autumn-leaf-static-1 bis 5
   .seasonal-autumn-hero-deco
   .seasonal-autumn-leaf-1 bis n
   .seasonal-autumn-footer-deco
   .seasonal-footer-leaf-1 bis 8

   Entscheidung:
   - keine liegenden Blätter an Navbar/Footer
   - nur 1 bis 3 einzelne Blätter im Header
   - realistischere Blattform statt Bootform
   - langsames Schweben mit leichter 3D-Drehung
   ========================================================== */

body.season-autumn .seasonal-autumn-navbar-deco,
body.season-autumn .seasonal-autumn-leaf-static,
body.season-autumn .seasonal-footer-leaf {
  display: none !important;
}

body.season-autumn .seasonal-autumn-hero-deco {
  position: absolute;
  inset: 0;
  z-index: var(--seasonal-hero-z);
  overflow: hidden;
  contain: layout paint;
  perspective: 900px;
  background:
    radial-gradient(circle at 18% 22%, rgba(251, 146, 60, 0.14), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(234, 88, 12, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(251, 146, 60, 0.06), transparent 66%);
}

/*
   Die JS erzeugt viele Herbstblätter.
   Wir blenden alle aus und zeigen nur wenige gezielt an.
*/
body.season-autumn .seasonal-autumn-leaf {
  display: none !important;
}

/* Nur wenige einzelne Blätter sichtbar */
body.season-autumn .seasonal-autumn-leaf:nth-child(4),
body.season-autumn .seasonal-autumn-leaf:nth-child(15),
body.season-autumn .seasonal-autumn-leaf:nth-child(25) {
  display: block !important;
  position: absolute;
  top: -24%;
  width: var(--leaf-size, 18px);
  height: calc(var(--leaf-size, 18px) * 1.48);
  opacity: 0;
  transform-origin: 50% 58%;
  transform-style: preserve-3d;
  backface-visibility: visible;

  /*
     Realistischere Blattkontur:
     nicht rund, nicht bootförmig, sondern spitzer und leicht gezackt.
  */
  clip-path: polygon(
    50% 0%,
    57% 6%,
    65% 10%,
    70% 18%,
    79% 22%,
    82% 32%,
    91% 40%,
    88% 51%,
    96% 61%,
    86% 69%,
    84% 80%,
    72% 84%,
    66% 94%,
    50% 100%,
    34% 94%,
    28% 84%,
    16% 80%,
    14% 69%,
    4% 61%,
    12% 51%,
    9% 40%,
    18% 32%,
    21% 22%,
    30% 18%,
    35% 10%,
    43% 6%
  );

  background:
    radial-gradient(circle at 30% 22%, rgba(255, 224, 160, 0.34) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 32%, rgba(255, 255, 255, 0.12) 0 8%, transparent 9%),
    linear-gradient(
      145deg,
      #f6b24a 0%,
      #ef8d28 22%,
      #d45d1f 48%,
      #b63a19 70%,
      #7b2c18 100%
    );

  filter: drop-shadow(0 4px 8px rgba(17, 24, 39, 0.14));
  animation-name: seasonalAutumnLeafFloatRealistic;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

/* Mittelader und kleiner Stiel */
body.season-autumn .seasonal-autumn-leaf::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7%;
  bottom: -13%;
  width: 1.5px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(123, 56, 24, 0.20) 0%,
      rgba(108, 47, 18, 0.46) 48%,
      rgba(90, 40, 16, 0.78) 100%
    );
  transform: translateX(-50%);
}

/* Seitenadern */
body.season-autumn .seasonal-autumn-leaf::after {
  content: "";
  position: absolute;
  inset: 11% 18% 13% 18%;
  opacity: 0.32;
  background:
    repeating-linear-gradient(
      26deg,
      transparent 0 7px,
      rgba(106, 46, 18, 0.28) 7px 8px,
      transparent 8px 15px
    ),
    repeating-linear-gradient(
      -26deg,
      transparent 0 7px,
      rgba(106, 46, 18, 0.22) 7px 8px,
      transparent 8px 15px
    );
  clip-path: polygon(
    50% 0%,
    68% 14%,
    82% 34%,
    86% 58%,
    72% 82%,
    50% 100%,
    28% 82%,
    14% 58%,
    18% 34%,
    32% 14%
  );
}

/* Blatt 1: links, orange */
body.season-autumn .seasonal-autumn-leaf:nth-child(4) {
  left: 18%;
  --leaf-size: 18px;
  --leaf-drift: 56px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 224, 160, 0.34) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 32%, rgba(255, 255, 255, 0.12) 0 8%, transparent 9%),
    linear-gradient(
      145deg,
      #f6b24a 0%,
      #ef8d28 22%,
      #d45d1f 48%,
      #b63a19 70%,
      #7b2c18 100%
    );
  animation-duration: 42s;
  animation-delay: -5s;
}

/* Blatt 2: mittig, gelb-braun */
body.season-autumn .seasonal-autumn-leaf:nth-child(15) {
  left: 52%;
  --leaf-size: 16px;
  --leaf-drift: -62px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 241, 180, 0.30) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 32%, rgba(255, 255, 255, 0.10) 0 8%, transparent 9%),
    linear-gradient(
      145deg,
      #f7d14d 0%,
      #e5a51c 24%,
      #c67915 50%,
      #9f5410 74%,
      #73400d 100%
    );
  animation-duration: 49s;
  animation-delay: -22s;
}

/* Blatt 3: rechts, rotbraun */
body.season-autumn .seasonal-autumn-leaf:nth-child(25) {
  left: 82%;
  --leaf-size: 19px;
  --leaf-drift: 48px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 214, 170, 0.24) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 32%, rgba(255, 255, 255, 0.08) 0 8%, transparent 9%),
    linear-gradient(
      145deg,
      #ee7b45 0%,
      #d84a24 24%,
      #b8281e 50%,
      #8f201b 74%,
      #681717 100%
    );
  animation-duration: 46s;
  animation-delay: -34s;
}

/*
   Natürliches Fallen:
   - langsam
   - nicht senkrecht wie ein Stein
   - links/rechts Schweben
   - Drehung um Z-Achse
   - leichte Drehung um horizontale X-Achse
   - unten weich ausblenden
*/
@keyframes seasonalAutumnLeafFloatRealistic {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -20%, 0)
      rotateZ(-18deg)
      rotateX(0deg)
      rotateY(0deg);
  }

  10% {
    opacity: 0.74;
  }

  22% {
    transform:
      translate3d(calc(var(--leaf-drift, 50px) * 0.35), 18vh, 0)
      rotateZ(28deg)
      rotateX(95deg)
      rotateY(12deg);
  }

  38% {
    transform:
      translate3d(calc(var(--leaf-drift, 50px) * -0.28), 36vh, 0)
      rotateZ(-34deg)
      rotateX(185deg)
      rotateY(-10deg);
  }

  56% {
    transform:
      translate3d(calc(var(--leaf-drift, 50px) * 0.48), 58vh, 0)
      rotateZ(42deg)
      rotateX(285deg)
      rotateY(16deg);
  }

  74% {
    opacity: 0.74;
    transform:
      translate3d(calc(var(--leaf-drift, 50px) * -0.18), 82vh, 0)
      rotateZ(-22deg)
      rotateX(410deg)
      rotateY(-14deg);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(calc(var(--leaf-drift, 50px) * 0.22), 116vh, 0)
      rotateZ(34deg)
      rotateX(540deg)
      rotateY(10deg);
  }
}

/* Mobil: nur 1 bis 2 Blätter */
@media (max-width: 700px) {
  body.season-autumn .seasonal-autumn-leaf:nth-child(25) {
    display: none !important;
  }

  body.season-autumn .seasonal-autumn-leaf:nth-child(4),
  body.season-autumn .seasonal-autumn-leaf:nth-child(15) {
    opacity: 0;
  }
}

@media (max-width: 520px) {
  body.season-autumn .seasonal-autumn-leaf:nth-child(15) {
    display: none !important;
  }

  body.season-autumn .seasonal-autumn-leaf:nth-child(4) {
    --leaf-size: 15px;
    animation-duration: 46s;
  }
}


/* ==========================================================
   Silvester / Neujahr: Navbar + Header-Feuerwerk

   Ablauf:
   - keine Flugbahn mehr von Navbar zu Header
   - Rakete startet unten im Header, direkt unter der Explosion
   - Rakete steigt ruhig und senkrecht nach oben
   - Explosion kommt erst danach
   ========================================================== */

/* Navbar-Deko bei Neujahr ausblenden: Start läuft sauber im Header */
body.season-newyear .seasonal-newyear-navbar-deco {
  display: none !important;
}

/* Header / Himmel */
body.season-newyear .seasonal-newyear-hero-deco {
  position: absolute;
  inset: 0;
  z-index: calc(var(--seasonal-content-z) + 1);
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(147, 197, 253, 0.10), transparent 22%),
    radial-gradient(circle at 78% 18%, rgba(250, 204, 21, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.04) 58%, transparent 100%);
}

/*
   Das Element sitzt an der späteren Explosionsposition.
   Die Rakete startet unten exakt unter dieser Position und steigt senkrecht hoch.
*/
body.season-newyear .seasonal-firework {
  position: absolute;
  left: var(--rocket-burst-left, 50%);
  top: var(--rocket-burst-top, 24%);
  z-index: 1;
  width: var(--firework-size, 130px);
  height: var(--firework-size, 130px);
  border-radius: 999px;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  animation: seasonalFireworkRocketFlight 10s linear infinite;
  animation-delay: var(--firework-delay, 0s);
  will-change: transform;
}

/* sichtbares Raketenlicht während des Aufstiegs */
body.season-newyear .seasonal-firework::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.98),
    0 0 28px var(--firework-glow, rgba(250, 204, 21, 0.82)),
    0 18px 12px rgba(250, 204, 21, 0.36),
    0 38px 24px rgba(250, 204, 21, 0.20),
    0 64px 38px rgba(250, 204, 21, 0.12);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: seasonalRocketLightVisible 10s linear infinite;
  animation-delay: var(--firework-delay, 0s);
}

/* Explosion erst nach dem Aufstieg */
body.season-newyear .seasonal-firework::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.08) rotate(0deg);
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.32))
    drop-shadow(0 0 18px var(--firework-glow, rgba(250, 204, 21, 0.32)));
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 3px, transparent 5px),
    radial-gradient(circle at 50% 4%, var(--firework-color-a, rgba(250, 204, 21, 0.95)) 0 2px, transparent 4px),
    radial-gradient(circle at 70% 10%, var(--firework-color-b, rgba(147, 197, 253, 0.90)) 0 2px, transparent 4px),
    radial-gradient(circle at 86% 25%, var(--firework-color-c, rgba(244, 114, 182, 0.90)) 0 2px, transparent 4px),
    radial-gradient(circle at 96% 50%, var(--firework-color-a, rgba(250, 204, 21, 0.95)) 0 2px, transparent 4px),
    radial-gradient(circle at 86% 75%, var(--firework-color-b, rgba(147, 197, 253, 0.90)) 0 2px, transparent 4px),
    radial-gradient(circle at 66% 92%, var(--firework-color-c, rgba(244, 114, 182, 0.90)) 0 2px, transparent 4px),
    radial-gradient(circle at 38% 94%, var(--firework-color-a, rgba(250, 204, 21, 0.95)) 0 2px, transparent 4px),
    radial-gradient(circle at 16% 78%, var(--firework-color-b, rgba(147, 197, 253, 0.90)) 0 2px, transparent 4px),
    radial-gradient(circle at 5% 52%, var(--firework-color-c, rgba(244, 114, 182, 0.90)) 0 2px, transparent 4px),
    radial-gradient(circle at 12% 26%, var(--firework-color-a, rgba(250, 204, 21, 0.95)) 0 2px, transparent 4px),
    radial-gradient(circle at 30% 10%, var(--firework-color-b, rgba(147, 197, 253, 0.90)) 0 2px, transparent 4px);
  animation: seasonalFireworkExplosionLate 10s ease-out infinite;
  animation-delay: var(--firework-delay, 0s);
}

/* Feuerwerk 1: links, steigt ruhig von unten links hoch */
body.season-newyear .seasonal-firework-1 {
  --rocket-burst-left: 24%;
  --rocket-burst-top: 22%;
  --rocket-start-x: 0px;
  --rocket-start-y: clamp(210px, 64vh, 430px);
  --firework-size: clamp(90px, 8vw, 150px);
  --firework-delay: 0.1s;
  --firework-glow: rgba(250, 204, 21, 0.82);
  --firework-color-a: rgba(250, 204, 21, 0.96);
  --firework-color-b: rgba(147, 197, 253, 0.86);
  --firework-color-c: rgba(255, 255, 255, 0.82);
}

/* Feuerwerk 2: mittig, steigt gerade nach oben */
body.season-newyear .seasonal-firework-2 {
  --rocket-burst-left: 50%;
  --rocket-burst-top: 28%;
  --rocket-start-x: 0px;
  --rocket-start-y: clamp(200px, 60vh, 400px);
  --firework-size: clamp(78px, 6.5vw, 128px);
  --firework-delay: 3.4s;
  --firework-glow: rgba(147, 197, 253, 0.78);
  --firework-color-a: rgba(147, 197, 253, 0.88);
  --firework-color-b: rgba(250, 204, 21, 0.82);
  --firework-color-c: rgba(244, 114, 182, 0.72);
}

/* Feuerwerk 3: rechts, steigt ruhig von unten rechts hoch */
body.season-newyear .seasonal-firework-3 {
  --rocket-burst-left: 76%;
  --rocket-burst-top: 22%;
  --rocket-start-x: 0px;
  --rocket-start-y: clamp(210px, 64vh, 430px);
  --firework-size: clamp(96px, 9vw, 170px);
  --firework-delay: 6.8s;
  --firework-glow: rgba(255, 255, 255, 0.78);
  --firework-color-a: rgba(255, 255, 255, 0.88);
  --firework-color-b: rgba(250, 204, 21, 0.90);
  --firework-color-c: rgba(147, 197, 253, 0.82);
}

body.season-newyear .seasonal-firework-4,
body.season-newyear .seasonal-firework-5 {
  display: none !important;
}


/* ==========================================================
   Silvester / Neujahr: Footer
   JS erzeugt:
   .seasonal-newyear-footer-deco
   .seasonal-footer-firework-1 bis 7
   ========================================================== */

body.season-newyear .seasonal-newyear-footer-deco::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 7px;
  background:
    linear-gradient(90deg, rgba(147, 197, 253, 0.8), rgba(250, 204, 21, 0.78), rgba(244, 114, 182, 0.68), rgba(147, 197, 253, 0.8));
  box-shadow:
    0 0 12px rgba(147, 197, 253, 0.28),
    0 0 18px rgba(250, 204, 21, 0.20);
}

body.season-newyear .seasonal-footer-firework {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(250, 204, 21, 0.42);
  opacity: 0.75;
  animation: seasonalSparkPulse 3.6s ease-in-out infinite;
}

body.season-newyear .seasonal-footer-firework::before,
body.season-newyear .seasonal-footer-firework::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

body.season-newyear .seasonal-footer-firework::before { width: 14px; height: 1px; }
body.season-newyear .seasonal-footer-firework::after { width: 1px; height: 14px; }

body.season-newyear .seasonal-footer-firework-1 { left: 8%; top: 34%; animation-delay: -0.4s; }
body.season-newyear .seasonal-footer-firework-2 { left: 21%; top: 68%; animation-delay: -1.2s; }
body.season-newyear .seasonal-footer-firework-3 { left: 37%; top: 42%; animation-delay: -2.1s; }
body.season-newyear .seasonal-footer-firework-4 { left: 54%; top: 73%; animation-delay: -0.9s; }
body.season-newyear .seasonal-footer-firework-5 { left: 69%; top: 36%; animation-delay: -1.8s; }
body.season-newyear .seasonal-footer-firework-6 { left: 83%; top: 64%; animation-delay: -2.7s; }
body.season-newyear .seasonal-footer-firework-7 { left: 94%; top: 39%; animation-delay: -1.5s; }


/* ==========================================================
   Animationen
   ========================================================== */

@keyframes seasonalSnowFall {
  0% {
    transform: translate3d(0, -14%, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(var(--snow-drift, 20px), 56vh, 0) rotate(180deg);
  }

  100% {
    transform: translate3d(calc(var(--snow-drift, 20px) * -0.45), 112vh, 0) rotate(360deg);
  }
}

@keyframes seasonalGiftFloatOne {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-2px); }
}

@keyframes seasonalGiftFloatTwo {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-3px); }
}

@keyframes seasonalGiftFloatThree {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-2px); }
}

@keyframes seasonalFooterTwinkle {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.82) rotate(0deg);
  }

  50% {
    opacity: 0.92;
    transform: scale(1.12) rotate(18deg);
  }
}

@keyframes seasonalEggFloat {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -3px;
  }
}

@keyframes seasonalBlossomFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12%, 0) rotate(var(--blossom-rotate, 0deg));
  }

  8% {
    opacity: 0.58;
  }

  50% {
    transform: translate3d(var(--blossom-drift, 22px), 55vh, 0) rotate(calc(var(--blossom-rotate, 0deg) + 160deg));
  }

  92% {
    opacity: 0.58;
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--blossom-drift, 22px) * -0.4), 112vh, 0) rotate(calc(var(--blossom-rotate, 0deg) + 320deg));
  }
}

@keyframes seasonalSunPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.04);
    filter: brightness(1.08);
  }
}

@keyframes seasonalRayDrift {
  0%, 100% {
    opacity: 0.28;
    translate: 0 0;
  }

  50% {
    opacity: 0.62;
    translate: -10px 0;
  }
}

@keyframes seasonalLeafFallFromTop {
  0% {
    opacity: 0;
    transform: translate3d(0, -18%, 0) rotate(var(--leaf-rotate, 0deg));
  }

  7% {
    opacity: 0.72;
  }

  26% {
    transform: translate3d(calc(var(--leaf-drift, 34px) * 0.55), 30vh, 0) rotate(calc(var(--leaf-rotate, 0deg) + 75deg));
  }

  54% {
    transform: translate3d(calc(var(--leaf-drift, 34px) * -0.45), 64vh, 0) rotate(calc(var(--leaf-rotate, 0deg) + 165deg));
  }

  84% {
    opacity: 0.72;
    transform: translate3d(calc(var(--leaf-drift, 34px) * 0.35), 96vh, 0) rotate(calc(var(--leaf-rotate, 0deg) + 260deg));
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--leaf-drift, 34px) * -0.25), 124vh, 0) rotate(calc(var(--leaf-rotate, 0deg) + 340deg));
  }
}

@keyframes seasonalSparkPulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.84) rotate(0deg);
  }

  50% {
    opacity: 0.95;
    transform: scale(1.14) rotate(20deg);
  }
}

@keyframes seasonalNewYearLaunchFlashReal {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.65);
  }

  7% {
    opacity: 0.95;
    transform: translateY(-3px) scale(1.25);
  }

  14% {
    opacity: 0;
    transform: translateY(-18px) scale(0.7);
  }
}

/* Das ganze Feuerwerk-Element steigt senkrecht im Header hoch */
@keyframes seasonalFireworkRocketFlight {
  0%, 6% {
    transform:
      translate3d(var(--rocket-start-x, 0px), var(--rocket-start-y, 380px), 0)
      scale(0.38);
  }

  18% {
    transform:
      translate3d(var(--rocket-start-x, 0px), calc(var(--rocket-start-y, 380px) * 0.78), 0)
      scale(0.46);
  }

  34% {
    transform:
      translate3d(var(--rocket-start-x, 0px), calc(var(--rocket-start-y, 380px) * 0.52), 0)
      scale(0.58);
  }

  50% {
    transform:
      translate3d(var(--rocket-start-x, 0px), calc(var(--rocket-start-y, 380px) * 0.24), 0)
      scale(0.70);
  }

  62% {
    transform:
      translate3d(0, 0, 0)
      scale(0.82);
  }

  68%, 100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

/* sichtbarer Lichtpunkt während des Aufstiegs */
@keyframes seasonalRocketLightVisible {
  0%, 4% {
    opacity: 0;
  }

  7% {
    opacity: 1;
  }

  56% {
    opacity: 1;
  }

  63%, 100% {
    opacity: 0;
  }
}

/* Explosion kommt erst, wenn der Lichtpunkt oben angekommen ist */
@keyframes seasonalFireworkExplosionLate {
  0%, 66% {
    opacity: 0;
    transform: scale(0.08) rotate(0deg);
  }

  70% {
    opacity: 0.96;
    transform: scale(0.50) rotate(8deg);
  }

  79% {
    opacity: 0.72;
    transform: scale(0.95) rotate(16deg);
  }

  89% {
    opacity: 0.24;
    transform: scale(1.22) rotate(22deg);
  }

  96%, 100% {
    opacity: 0;
    transform: scale(1.34) rotate(25deg);
  }
}


/* ==========================================================
   Mobil-Optimierung
   ========================================================== */

@media (max-width: 820px) {
  body.season-christmas .seasonal-christmas-navbar-deco,
  body.season-easter .seasonal-easter-navbar-deco,
  body.season-summer .seasonal-summer-navbar-deco {
    right: clamp(0.25rem, 1.8vw, 0.75rem);
    bottom: -0.58rem;
    width: 92px;
    height: 32px;
    opacity: 0.94;
  }

  body.season-christmas .seasonal-navbar-ribbon {
    display: none;
  }

  body.season-christmas .seasonal-gift-1 { width: 21px; height: 19px; }
  body.season-christmas .seasonal-gift-2 { width: 25px; height: 23px; }
  body.season-christmas .seasonal-gift-3 { width: 20px; height: 18px; }

  body.season-winter .seasonal-snowflake,
body.season-base-winter .seasonal-snowflake {
    box-shadow:
      0 0 6px rgba(255, 255, 255, 0.65),
      0 0 12px rgba(255, 255, 255, 0.22);
  }

  body.season-autumn .seasonal-autumn-leaf {
    opacity: 0.58;
  }

  body.season-newyear .seasonal-firework::before {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 700px) {
  body.season-christmas .seasonal-footer-star,
  body.season-newyear .seasonal-footer-firework {
    width: 4px;
    height: 4px;
  }

  body.season-christmas .seasonal-footer-star::before,
  body.season-newyear .seasonal-footer-firework::before {
    width: 10px;
  }

  body.season-christmas .seasonal-footer-star::after,
  body.season-newyear .seasonal-footer-firework::after {
    height: 10px;
  }

  body.season-christmas .seasonal-footer-star-2,
  body.season-christmas .seasonal-footer-star-4,
  body.season-christmas .seasonal-footer-star-7,
  body.season-winter .seasonal-footer-star-2,
  body.season-winter .seasonal-footer-star-4,
  body.season-winter .seasonal-footer-star-7,
  body.season-base-winter .seasonal-footer-star-2,
  body.season-base-winter .seasonal-footer-star-4,
  body.season-base-winter .seasonal-footer-star-7,
  body.season-newyear .seasonal-footer-firework-2,
  body.season-newyear .seasonal-footer-firework-4,
  body.season-newyear .seasonal-footer-firework-7 {
    display: none;
  }

  body.season-easter .seasonal-footer-egg-2,
  body.season-easter .seasonal-footer-egg-4 {
    display: none;
  }
}

@media (max-width: 520px) {
  body.season-christmas .seasonal-christmas-navbar-deco,
  body.season-easter .seasonal-easter-navbar-deco,
  body.season-summer .seasonal-summer-navbar-deco,
  body.season-newyear .seasonal-newyear-navbar-deco {
    right: 0.15rem;
    bottom: -0.45rem;
    width: 72px;
    height: 26px;
    opacity: 0.88;
  }

  body.season-christmas .seasonal-gift-1 { width: 16px; height: 15px; border-radius: 4px; }
  body.season-christmas .seasonal-gift-2 { width: 19px; height: 17px; border-radius: 4px; }
  body.season-christmas .seasonal-gift-3 { width: 15px; height: 14px; border-radius: 4px; }

  body.season-christmas .seasonal-gift::before { width: 20%; }
  body.season-christmas .seasonal-gift::after { height: 20%; }

  body.season-easter .seasonal-easter-bunny,
  body.season-summer .seasonal-summer-cloud-2,
  body.season-newyear .seasonal-firework-4,
  body.season-newyear .seasonal-firework-5 {
    display: none;
  }

  body.season-easter .seasonal-blossom,
  body.season-autumn .seasonal-autumn-leaf {
    opacity: 0.38;
  }
}



/* ==========================================================
   Layer-Modus: Jahreszeiten + Jahresevents

   Grundprinzip ab /js/seasonal/seasonal.js:
   - Jahreszeit läuft immer als Basis: spring/summer/autumn/winter
   - Jahresevents werden zusätzlich aktiviert: christmas/easter/newyear
   - Dadurch müssen Animationen nicht doppelt gebaut werden.
   ========================================================== */

/* Generische Zielcontainer: gilt für alle Jahreszeiten und Events */
body.seasonal-enabled .navbar {
  overflow: visible;
}

body.seasonal-enabled .seasonal-navbar-target {
  position: relative;
  overflow: visible;
}

body.seasonal-enabled .seasonal-hero-target {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.seasonal-enabled .seasonal-hero-target .hero-content {
  position: relative;
  z-index: var(--seasonal-content-z);
}

body.seasonal-enabled .seasonal-hero-target .header-weather {
  position: absolute;
  z-index: var(--seasonal-weather-z);
}

body.seasonal-enabled .seasonal-footer-target {
  position: relative;
  overflow: hidden;
}

body.seasonal-enabled .seasonal-footer-target > :not(.seasonal-footer-deco) {
  position: relative;
  z-index: 2;
}

body.seasonal-enabled .seasonal-footer-deco {
  position: absolute;
  inset: 0;
  z-index: var(--seasonal-footer-z);
  overflow: hidden;
}

/* Frühling-Basis: nutzt Blüten, aber keine Ostereier/Hasen ohne Event */
body.season-spring .seasonal-spring-hero-deco,
body.season-base-spring .seasonal-spring-hero-deco,
body.season-spring .seasonal-easter-hero-deco,
body.season-base-spring .seasonal-easter-hero-deco {
  position: absolute;
  inset: 0;
  z-index: var(--seasonal-hero-z);
  overflow: hidden;
  contain: layout paint;
  background:
    radial-gradient(circle at 20% 18%, rgba(252, 231, 243, 0.20), transparent 22%),
    radial-gradient(circle at 80% 22%, rgba(220, 252, 231, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(236, 253, 245, 0.08), transparent 62%);
}

body.season-spring .seasonal-blossom,
body.season-base-spring .seasonal-blossom {
  position: absolute;
  top: -12%;
  left: var(--blossom-x, 50%);
  width: var(--blossom-size, 11px);
  height: calc(var(--blossom-size, 11px) * 1.35);
  border-radius: 80% 20% 80% 20%;
  background: rgba(249, 168, 212, 0.78);
  opacity: 0.58;
  animation-name: seasonalBlossomFall;
  animation-duration: calc(var(--blossom-duration, 12s) + 8s);
  animation-delay: var(--blossom-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

body.season-spring .seasonal-blossom:nth-child(3n),
body.season-base-spring .seasonal-blossom:nth-child(3n) {
  background: rgba(253, 186, 116, 0.68);
}

body.season-spring .seasonal-blossom:nth-child(4n),
body.season-base-spring .seasonal-blossom:nth-child(4n) {
  background: rgba(187, 247, 208, 0.65);
  filter: blur(0.2px);
}

/* Winter-Basis: nutzt Schnee/Sterne, aber keine Geschenke ohne Weihnachts-Event */
body.season-winter .seasonal-snow,
body.season-base-winter .seasonal-snow,
body.season-winter .seasonal-winter-snow,
body.season-base-winter .seasonal-winter-snow,
body.season-winter .seasonal-christmas-snow,
body.season-base-winter .seasonal-christmas-snow {
  position: absolute;
  inset: 0;
  z-index: var(--seasonal-hero-z);
  overflow: hidden;
  contain: layout paint;
}

body.season-winter .seasonal-snow::before,
body.season-base-winter .seasonal-snow::before,
body.season-winter .seasonal-winter-snow::before,
body.season-base-winter .seasonal-winter-snow::before,
body.season-winter .seasonal-christmas-snow::before,
body.season-base-winter .seasonal-christmas-snow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.18), transparent 20%),
    radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.13), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 62%);
  opacity: 0.85;
}

body.season-winter .seasonal-snowflake,
body.season-base-winter .seasonal-snowflake {
  position: absolute;
  top: -12%;
  left: var(--snow-x, 50%);
  width: var(--snow-size, 7px);
  height: var(--snow-size, 7px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  opacity: var(--snow-opacity, 0.7);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.78),
    0 0 18px rgba(255, 255, 255, 0.28);
  animation-name: seasonalSnowFall;
  animation-duration: var(--snow-duration, 14s);
  animation-delay: var(--snow-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

body.season-winter .seasonal-footer-snowline,
body.season-base-winter .seasonal-footer-snowline {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 9px;
  border-radius: 0 0 999px 999px;
  background:
    radial-gradient(circle at 6% 0, rgba(255, 255, 255, 0.96) 0 7px, transparent 8px),
    radial-gradient(circle at 16% 0, rgba(255, 255, 255, 0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 27% 0, rgba(255, 255, 255, 0.95) 0 8px, transparent 9px),
    radial-gradient(circle at 39% 0, rgba(255, 255, 255, 0.88) 0 5px, transparent 6px),
    radial-gradient(circle at 51% 0, rgba(255, 255, 255, 0.96) 0 7px, transparent 8px),
    radial-gradient(circle at 64% 0, rgba(255, 255, 255, 0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 0, rgba(255, 255, 255, 0.95) 0 8px, transparent 9px),
    radial-gradient(circle at 91% 0, rgba(255, 255, 255, 0.88) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72));
  box-shadow:
    0 4px 14px rgba(255, 255, 255, 0.18),
    0 8px 22px rgba(17, 24, 39, 0.12);
  opacity: 0.95;
}

body.season-winter .seasonal-footer-stars,
body.season-base-winter .seasonal-footer-stars {
  position: absolute;
  inset: 0;
}

body.season-winter .seasonal-footer-star,
body.season-base-winter .seasonal-footer-star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(255, 255, 255, 0.35);
  opacity: 0.75;
  animation: seasonalFooterTwinkle 3.8s ease-in-out infinite;
}

body.season-winter .seasonal-footer-star::before,
body.season-base-winter .seasonal-footer-star::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  transform: translate(-50%, -50%);
}

body.season-winter .seasonal-footer-star::after,
body.season-base-winter .seasonal-footer-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  transform: translate(-50%, -50%);
}

body.season-winter .seasonal-footer-star-1,
body.season-base-winter .seasonal-footer-star-1 { left: 8%; top: 34%; animation-delay: -0.4s; }
body.season-winter .seasonal-footer-star-2,
body.season-base-winter .seasonal-footer-star-2 { left: 21%; top: 68%; animation-delay: -1.2s; }
body.season-winter .seasonal-footer-star-3,
body.season-base-winter .seasonal-footer-star-3 { left: 37%; top: 42%; animation-delay: -2.1s; }
body.season-winter .seasonal-footer-star-4,
body.season-base-winter .seasonal-footer-star-4 { left: 54%; top: 73%; animation-delay: -0.9s; }
body.season-winter .seasonal-footer-star-5,
body.season-base-winter .seasonal-footer-star-5 { left: 69%; top: 36%; animation-delay: -1.8s; }
body.season-winter .seasonal-footer-star-6,
body.season-base-winter .seasonal-footer-star-6 { left: 83%; top: 64%; animation-delay: -2.7s; }
body.season-winter .seasonal-footer-star-7,
body.season-base-winter .seasonal-footer-star-7 { left: 94%; top: 39%; animation-delay: -1.5s; }

/* Event-Klassen zusätzlich zu den alten season-*-Klassen */
body.season-event-christmas .seasonal-christmas-navbar-deco,
body.season-event-easter .seasonal-easter-navbar-deco,
body.season-event-newyear .seasonal-newyear-hero-deco,
body.season-event-newyear .seasonal-newyear-footer-deco {
  pointer-events: none;
  user-select: none;
}

/* Manuelle Event-Vorschau soll immer über der Jahreszeit liegen */
body.season-event-newyear .seasonal-newyear-hero-deco,
body.season-newyear .seasonal-newyear-hero-deco {
  z-index: calc(var(--seasonal-content-z) + 1);
}


/* ==========================================================
   Reduzierte Bewegung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  body.season-winter .seasonal-snowflake,
  body.season-base-winter .seasonal-snowflake,
  body.season-christmas .seasonal-gift,
  body.season-christmas .seasonal-footer-star,
  body.season-easter .seasonal-easter-egg,
  body.season-easter .seasonal-blossom,
  body.season-summer .seasonal-summer-sun,
  body.season-summer .seasonal-summer-glow,
  body.season-summer .seasonal-summer-ray,
  body.season-autumn .seasonal-autumn-leaf,
  body.season-newyear .seasonal-newyear-spark,
  body.season-newyear .seasonal-firework,
  body.season-newyear .seasonal-footer-firework {
    animation: none !important;
  }

  body.season-winter .seasonal-snowflake,
  body.season-base-winter .seasonal-snowflake,
  body.season-easter .seasonal-blossom,
  body.season-autumn .seasonal-autumn-leaf,
  body.season-newyear .seasonal-firework {
    display: none !important;
  }
}

body.seasonal-reduced-motion .seasonal-snowflake,
body.seasonal-reduced-motion .seasonal-gift,
body.seasonal-reduced-motion .seasonal-footer-star,
body.seasonal-reduced-motion .seasonal-easter-egg,
body.seasonal-reduced-motion .seasonal-blossom,
body.seasonal-reduced-motion .seasonal-summer-sun,
body.seasonal-reduced-motion .seasonal-summer-glow,
body.seasonal-reduced-motion .seasonal-summer-ray,
body.seasonal-reduced-motion .seasonal-autumn-leaf,
body.seasonal-reduced-motion .seasonal-newyear-spark,
body.seasonal-reduced-motion .seasonal-firework,
body.seasonal-reduced-motion .seasonal-footer-firework {
  animation: none !important;
}

body.seasonal-reduced-motion .seasonal-snowflake,
body.seasonal-reduced-motion .seasonal-blossom,
body.seasonal-reduced-motion .seasonal-autumn-leaf,
body.seasonal-reduced-motion .seasonal-firework {
  display: none !important;
}


/* ==========================================================
   Saison AUS
   ========================================================== */

body.season-off .seasonal-navbar-deco,
body.season-off .seasonal-snow,
body.season-off .seasonal-hero-deco,
body.season-off .seasonal-footer-deco {
  display: none !important;
}