/* ========================
   SAISON-DEKO: HALLOWEEN
   Wird nur geladen, wenn params.season.theme = 'halloween'.
   Alle Deko-Elemente liegen hinter dem Inhalt und sind nicht klickbar.
   ======================== */

/* --- Hexenhut auf dem Logo --- */
.logo-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.halloween-hat {
  position: absolute;
  top: -15px;
  right: -11px;
  width: 32px;
  height: 32px;
  transform: rotate(24deg);
  pointer-events: none;
}

/* --- Spinnennetze in den Ecken der Inhaltsbereiche --- */
.season-halloween .section {
  position: relative;
}

.season-halloween .section > .container {
  position: relative;
  z-index: 1;
}

.season-halloween .section::before,
.season-halloween .section::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  background: url('../../images/seasons/halloween/netz-dunkel.svg') top left / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.season-halloween .section::before {
  top: 0;
  left: 0;
}

.season-halloween .section::after {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

/* --- Kleiner Kürbis auf den Leistungs-Karten --- */
.season-halloween .service-card {
  position: relative;
}

.season-halloween .service-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 33px;
  background: url('../../images/seasons/halloween/kuerbis.svg') center / contain no-repeat;
  transform: rotate(8deg);
  pointer-events: none;
}

/* --- Hero: Netze, Spinne, Fledermäuse, Kürbisse --- */
.halloween-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hw-netz {
  position: absolute;
  top: 0;
  width: 170px;
  height: 170px;
  background: url('../../images/seasons/halloween/netz-hell.svg') top left / contain no-repeat;
}

.hw-netz-links {
  left: 0;
}

.hw-netz-rechts {
  right: 0;
  transform: scaleX(-1);
}

.hw-spinne {
  position: absolute;
  top: 0;
  right: 16%;
  width: 30px;
  transform-origin: top center;
  animation: hw-pendeln 4s ease-in-out infinite;
}

/* Faden */
.hw-spinne::before {
  content: "";
  display: block;
  width: 2px;
  height: 46px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.6);
}

.hw-spinne img {
  display: block;
  width: 30px;
  height: 30px;
  margin-top: -4px;
}

.hw-fledermaus {
  position: absolute;
  width: 64px;
  height: auto;
  opacity: 0.85;
  animation: hw-flattern 3s ease-in-out infinite;
}

.hw-fledermaus-1 {
  top: 22%;
  left: 7%;
}

.hw-fledermaus-2 {
  top: 12%;
  left: 17%;
  width: 40px;
  animation-delay: -1s;
}

.hw-fledermaus-3 {
  top: 34%;
  right: 6%;
  width: 48px;
  animation-delay: -2s;
}

.hw-kuerbis {
  position: absolute;
  bottom: 10px;
  width: 76px;
  height: auto;
}

.hw-kuerbis-links {
  left: 4%;
  transform: rotate(-6deg);
}

.hw-kuerbis-rechts {
  right: 4%;
  width: 58px;
  transform: rotate(7deg);
}

/* --- Geist im Footer --- */
.season-halloween .site-footer {
  position: relative;
}

.halloween-geist {
  position: absolute;
  top: -34px;
  right: 5%;
  width: 52px;
  height: auto;
  pointer-events: none;
  animation: hw-schweben 3.5s ease-in-out infinite;
}

/* --- Animationen --- */
@keyframes hw-pendeln {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

@keyframes hw-flattern {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-6px) scaleY(0.85); }
}

@keyframes hw-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-spinne,
  .hw-fledermaus,
  .halloween-geist {
    animation: none;
  }
}

/* --- Responsive: Deko kleiner und aus dem Textbereich heraus --- */
@media (max-width: 768px) {
  .halloween-hat {
    top: -12px;
    right: -9px;
    width: 26px;
    height: 26px;
  }

  .season-halloween .section::before,
  .season-halloween .section::after {
    width: 110px;
    height: 110px;
  }

  .hw-netz {
    width: 100px;
    height: 100px;
  }

  .hw-spinne {
    right: 22%;
  }

  .hw-spinne::before {
    height: 22px;
  }

  .hw-spinne img {
    width: 24px;
    height: 24px;
  }

  /* Fledermäuse nur im oberen Rand, nicht hinter dem Text */
  .hw-fledermaus-1 {
    top: 14px;
    left: 30%;
    width: 38px;
  }

  .hw-fledermaus-2 {
    top: 30px;
    left: 44%;
    width: 26px;
  }

  .hw-fledermaus-3 {
    top: 10px;
    right: 34%;
    width: 30px;
  }

  .hw-kuerbis {
    bottom: 6px;
    width: 46px;
  }

  .hw-kuerbis-rechts {
    width: 36px;
  }

  .season-halloween .service-card::after {
    width: 28px;
    height: 26px;
  }

  .halloween-geist {
    top: -26px;
    width: 40px;
  }
}