:root{
  --bg:#0B0E14; --text:#EDEDED; --muted:#A9B0BE;
  --pink:#FF3EA5; --lime:#B6FF00; --yt:#FF0033; --dc:#5865F2;
  --card:#111626; --card-alt:#0F1422;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%; height:auto}

.container{width:min(1100px, 92vw); margin-inline:auto}

/* Access */
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:#000; color:#fff; padding:.5rem 1rem; z-index:1000}

/* Header */
.header{position:sticky; top:0; z-index:40; background:rgba(11,14,20,.7); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06)}
.header__inner{display:flex; align-items:center; gap:.8rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text)}
.brand img{height:40px; width:auto; transition:transform .3s ease}
.wordmark{font-weight:800; font-size:clamp(1rem, 2.8vw, 1.2rem)}
.logo_header{height: 34px; width: auto;}
/* --- HERO LOGOS --- */
.logo_hero {
  height: 50px; /* vorher 35px */
  width: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: heroPulse 2.8s infinite;
  filter: drop-shadow(0 0 8px rgba(255,62,165,0.5));
  cursor: pointer;
}

.logo_hero:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 16px rgba(255,62,165,0.9));
}

/* sanftes Pulsieren */
@keyframes heroPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(255,62,165,0.4));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 16px rgba(182,255,0,0.6));
  }
}


.logo-font {
  font-family: 'Audiowide', sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff3ea5;
  text-shadow:
    0 0 5px #ff3ea5,
    0 0 10px #ff3ea5,
    0 0 20px #ff3ea5,
    0 0 40px #ff3ea5;
  animation: logo-flicker 3s infinite;
}

@keyframes logo-flicker {
  0%, 18%, 20%, 22%, 50%, 52%, 100% {
    opacity: 1;
    text-shadow:
      0 0 5px #ff3ea5,
      0 0 10px #ff3ea5,
      0 0 20px #ff3ea5,
      0 0 40px #ff3ea5;
  }
  19%, 21%, 51% {
    opacity: 0.4;
    text-shadow: none;
  }
}


/* Burger */
.burger{margin-left:auto; display:inline-grid; gap:4px; background:transparent; border:0; padding:.4rem; cursor:pointer}
.burger span{display:block; width:22px; height:2px; background:#fff; border-radius:2px}

/* Nav (mobile collapsed) */
.nav{
  position:fixed; inset:56px 0 auto 0; background:rgba(11,14,20,.98);
  transform:translateY(-8px); max-height:0; overflow:hidden; transition:max-height .3s ease;
  display:grid; gap:10px; padding:0 1rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.nav a{color:#fff; text-decoration:none; padding:10px 2px}
.nav-socials{display:flex; gap:8px; padding:10px 0 16px}
.nav[data-collapsed="false"]{max-height:70vh; padding-top:8px}

/* Desktop nav defaults (overwritten in breakpoints) */
.nav.desktop{all:unset}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem .9rem; border-radius:999px; text-decoration:none; color:#fff;
  background:#222; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
  font-weight:700; white-space:nowrap;
}
.btn:hover{filter:brightness(1.05)}


/* Hero */
.hero{padding:clamp(44px,6vw,72px) 0 36px}
.hero__inner{text-align:center}
.hero__logo{width:min(520px, 86vw); aspect-ratio:4/3; object-fit:contain; filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
.hero h1{font-size:clamp(26px, 7vw, 44px); margin:14px 0 6px}
.hero h1 span{color:var(--pink)}
.hero p{color:var(--muted); font-size:clamp(14px, 3.8vw, 18px)}
.cta-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.hero-quotes {
  margin: 10px 0;
  display: flex;
  justify-content: center;
}
.btn-shop {
  background: linear-gradient(90deg, #ff3ea5, #b6ff00);
  color: #000;
  font-weight: 800;
  font-size: 1.1rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  animation: pulseShop 2.5s infinite;
  transition: transform .3s ease;
}
.btn-shop:hover {
  transform: scale(1.08);
}
@keyframes pulseShop {
  0%, 100% { box-shadow: 0 0 10px #ff3ea5, 0 0 20px #b6ff00; }
  50% { box-shadow: 0 0 25px #b6ff00, 0 0 40px #ff3ea5; }
}


/* Neon-Schrift */
.neon {
  color: #ff3ea5;
  text-shadow:
    0 0 5px #ff3ea5,
    0 0 10px #ff3ea5,
    0 0 20px #ff3ea5,
    0 0 40px #ff3ea5;
  animation: flicker 2.8s infinite;
}

/* Flacker-Animation */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { 
    opacity: 1; 
    text-shadow:
      0 0 5px #ff3ea5,
      0 0 10px #ff3ea5,
      0 0 20px #ff3ea5,
      0 0 40px #ff3ea5;
  }
  20%, 24%, 55% { 
    opacity: 0.4; 
    text-shadow: none; /* kurz "aus" wie defekte Neonröhre */
  }
  22% {
    opacity: 0.7;
    text-shadow:
      0 0 3px #ff3ea5,
      0 0 6px #ff3ea5;
  }
}

/* Flimmern (leicht unruhiges Leuchten) */
.flimmer {
  animation: flimmer 1.2s infinite;
}

@keyframes flimmer {
  0%   { opacity: 0.95; filter: brightness(1); }
  25%  { opacity: 0.85; filter: brightness(1.2); }
  50%  { opacity: 1;    filter: brightness(0.9); }
  75%  { opacity: 0.9;  filter: brightness(1.1); }
  100% { opacity: 1;    filter: brightness(1); }
}

/* Splash-Logo flimmern */
.splash-flimmer {
  animation: splashFlimmer 0.18s infinite;
  filter: drop-shadow(0 0 12px #ff3ea5) drop-shadow(0 0 24px #ff3ea5);
}

@keyframes splashFlimmer {
  0%   { opacity: 1;   filter: brightness(1) drop-shadow(0 0 12px #ff3ea5); }
  25%  { opacity: 0.95; filter: brightness(1.2) drop-shadow(0 0 18px #ff3ea5); }
  50%  { opacity: 0.9; filter: brightness(0.9) drop-shadow(0 0 14px #ff3ea5); }
  75%  { opacity: 0.97; filter: brightness(1.1) drop-shadow(0 0 20px #ff3ea5); }
  100% { opacity: 1;   filter: brightness(1) drop-shadow(0 0 12px #ff3ea5); }
}


.hero-quotes .quote {
  display: inline-block;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: linear-gradient(45deg, rgba(255,62,165,.15), rgba(0,0,0,.5));
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-weight: 700;
  font-size: clamp(12px, 3vw, 15px);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  text-align: center;
}

/* Sections */
.section{padding:clamp(48px,7vw,72px) 0}
.section--alt{background:linear-gradient(180deg, rgba(255,62,165,.08), transparent)}
.section h2{font-size:clamp(22px,6vw,34px); margin:0 0 16px}

/* Cards */
.cards{display:grid; grid-template-columns:1fr; gap:12px}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:14px}
.avatar{width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--card-alt); border-radius:14px; padding:8px}
.role{color:var(--lime); margin:.25rem 0 .35rem; font-weight:700}
.bio{color:var(--muted); font-size:clamp(14px,3.8vw,16px)}

/* News */
.news{display:grid; grid-template-columns:1fr; gap:10px}
.news-item{background:var(--card); padding:14px; border:1px solid rgba(255,255,255,.06); border-radius:var(--radius)}

/* Quote */
.section--quote{padding:16px 0}
.quote{text-align:center; font-weight:800; letter-spacing:.3px; margin:0; color:#fff; text-shadow:0 0 24px rgba(255,62,165,.45); font-size:clamp(16px,4.5vw,22px)}

/* Video */

.video-section {
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.video-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.video-section h2 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin-bottom: 1rem;
  color: #b6ff00;
  text-shadow: 0 0 10px #ff3ea5, 0 0 20px #b6ff00;
}

.video-embed,
.tiktok-embed-wrapper {
  position: relative;
  margin: 1.5rem auto;
  max-width: 960px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 25px rgba(255,62,165,0.3);
  transition: box-shadow .5s ease, transform .5s ease;
}
.video-embed:hover,
.tiktok-embed-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(255,62,165,0.7), 0 0 60px rgba(182,255,0,0.6);
}
.video-embed iframe {
  width: 100%;
  height: 600px;
  border: 0;
  display: block;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.video-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255,62,165,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.video-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 40px rgba(255,62,165,0.6);
}
.video-thumb {
  position: relative;
}
.video-thumb img {
  width: 100%;
  display: block;
}
.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  font-size: 3rem;
  color: #b6ff00;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.video-thumb:hover .video-overlay {
  opacity: 1;
}
.video-card h3 {
  font-size: 1rem;
  padding: 0.8rem;
  color: var(--text);
  text-align: center;
}

/* Modal */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 960px;
  aspect-ratio: 16/9;
}
.video-modal-content iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--pink);
  border: none;
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255,62,165,0.6);
}
  
/* Neonrahmen */
.neon-border {
  animation: neonGlow 3s ease-in-out infinite alternate;
}
@keyframes neonGlow {
  0% {
    box-shadow: 0 0 10px rgba(255,62,165,0.4),
                0 0 20px rgba(182,255,0,0.4);
  }
  100% {
    box-shadow: 0 0 30px rgba(255,62,165,0.8),
                0 0 50px rgba(182,255,0,0.8);
  }
}

/* === TikTok Embed Fix === */
.tiktok-embed-wrapper {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}

/* sorgt für ausreichend Platz, damit TikTok keinen Scrollbalken erzeugt */
.tiktok-embed-wrapper .tiktok-embed {
  width: 100% !important;
  min-width: 320px !important;
  max-width: 720px !important;
  height: 500px !important;  /* Höhe anpassen – 850-950 px ist meist ideal */
  overflow: hidden !important;
}

/* verhindert Scroll Iframe */
.tiktok-embed-wrapper iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
}

.tiktok-embed-wrapper > * {
  overflow: hidden !important;
}

/*responsive Anpassung */
@media (max-width: 768px) {
  .tiktok-embed-wrapper .tiktok-embed {
    height: 700px !important;
  }
}


/* Footer */
.footer{padding:20px 0; border-top:1px solid rgba(255,255,255,.06)}
.footer__inner{display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap}
.impressum-page {
  font-family: "Poppins", sans-serif;
  background: #0f0f0f;
  color: #f5f5f5;
  padding: 2rem;
}

.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer small { color: var(--muted); font-size: 0.85rem; }


/* Impressum */
.impressum-page h1 {
  font-size: 2.5rem;
  color: #ff0077;
  text-align: center;
  margin-bottom: 2rem;
}

.impressum-page h2 {
  color: #ff0077;
  margin-top: 1.5rem;
}

.impressum-page a {
  color: #fff;
  text-decoration: none;
}

.impressum-page a:hover {
  text-decoration: underline;
}

.impressum-page .container {
  max-width: 800px;
  margin: auto;
  line-height: 1.6;
}

/* Splash */
#splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 100;
  transition: opacity .6s ease, visibility .6s ease;
  visibility: visible;
  opacity: 1;
}
#splash.hide {
  opacity: 0;
  visibility: hidden;
}

.splash-logo {
  width: min(86vw, 560px);
  animation: splashFlimmer 3s forwards; /* ersetzt splashIn */
  filter: drop-shadow(0 14px 48px rgba(255,62,165,.25));
}

/* neues Flimmern + Einblend-/Ausblend-Animation */
@keyframes splashFlimmer {
  0% {
    transform: scale(.86) rotate(-2deg);
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 12px #ff3ea5);
  }
  10%, 30%, 50%, 70%, 90% {
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 22px #ff3ea5);
  }
  20%, 40%, 60%, 80% {
    opacity: 0.85;
    filter: brightness(0.8) drop-shadow(0 0 10px #ff3ea5);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 0; /* am Ende ausblenden */
    filter: brightness(1) drop-shadow(0 0 12px #ff3ea5);
  }
}

.scrolled .brand img {
  transform: scale(.78);
}

@media (hover:hover){
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
}

/* BREAKPOINT MD ≥ 720px */
@media (min-width:720px){
  .burger{display:none}
  .nav{all:unset; display:flex; gap:16px; margin-left:auto; align-items:center}
  .nav a{color:var(--text); text-decoration:none; opacity:.9}
  .nav a:hover{opacity:1}
  .nav-socials{display:flex; gap:10px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:repeat(2,1fr)}
}

/* BREAKPOINT LG ≥ 1080px */
@media (min-width:1080px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .news{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .splash-logo{animation:none}
  .brand img, .card, .btn{transition:none}
}

/* === Insider Strip === */
.insider-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  justify-content: center;
}

.chip {
  padding: .4rem .7rem;
  border-radius: 999px;
  background: linear-gradient(45deg, rgba(255,62,165,.15), rgba(0,0,0,.5));
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-weight: 700;
  font-size: clamp(12px, 2.8vw, 14px);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.chip--1 { outline: 2px dashed rgba(255,62,165,.4); }
.chip--2 { outline: 2px dashed rgba(182,255,0,.4); }
.chip--3 { outline: 2px dashed rgba(88,101,242,.4); }

@media (hover:hover){
  .chip { transition: transform .2s ease; }
  .chip:hover { transform: translateY(-2px) scale(1.02); }
}

/* Shop */
.shop-note {
  margin: 2rem auto;
  max-width: 780px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow);
  text-align: center;
}
.shop-note h2 {
  margin-top: 0;
}
.shop-note p {
  color: var(--muted);
  margin: .6rem 0;
}

/* === Sounds === */
.sound-card {
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sound-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(255,62,165,0.4);
}

.btn-sound {
  margin-top: 12px;
  background: linear-gradient(90deg, #ff3ea5, #b6ff00);
  color: #000;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  box-shadow: 0 0 15px rgba(255,62,165,0.4);
  transition: all 0.3s ease;
}

.btn-sound:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(255,62,165,0.7), 0 0 35px rgba(182,255,0,0.6);
}

.btn-sound.playing {
  animation: soundPulse 1.5s infinite;
  background: var(--pink);
  color: #000;
}


@keyframes soundPulse {
  0%, 100% {
    background: linear-gradient(90deg, #ff3ea5, #b6ff00);
    box-shadow: 0 0 15px rgba(255,62,165,0.4);
  }
  50% {
    background: linear-gradient(90deg, #b6ff00, #ff3ea5);
    box-shadow: 0 0 35px rgba(182,255,0,0.8), 0 0 55px rgba(255,62,165,0.8);
  }
}

/* ===== Season Banner ===== */
#season-banner {
  display: none;
  background: rgba(11,14,20,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: .6rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .3s ease, opacity .3s ease;
  z-index: 2001;
}
#season-banner.active { display: flex; align-items: center; gap: .8rem; }
#season-banner.hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }

#season-banner .season-text { font-size: .98rem; }
#season-banner .season-close {
  margin-left: auto;
  background: transparent; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer;
  line-height: 1; opacity: .8;
}
#season-banner .season-close:hover { opacity: 1; }

/* Platzierungen */
#season-banner.overlay {
  position: fixed;
  bottom: 60%;                   /* fester Abstand unter dem Header */
  left: 50%;                   /* zentriert horizontal */
  transform: translateX(-50%); /* zentrieren relativ zur eigenen Breite */
  background: rgba(11,14,20,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: .6rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 2001;
  width: 90vw;
  max-width: fit-content;
  text-align: center;

}

#season-banner.under-header {
  position: fixed; left: 0; right: 0;
  margin: 0 auto;
  width: min(900px, 92vw);
}

/* ===== Effekte ===== */
.heart-float {
  position: fixed; bottom: -30px; font-size: 1.6rem; opacity: .85;
  animation: rise 8s linear infinite;
  z-index: 1500; pointer-events: none;
}
@keyframes rise {
  from { transform: translateY(0); opacity: .85; }
  to   { transform: translateY(-110vh); opacity: 0; }
}

.leaf-fall {
  position: fixed; top: -40px; font-size: 1.8rem; opacity: .9;
  animation: fall 10s linear infinite;
  z-index: 1500; pointer-events: none;
}
@keyframes fall {
  from { transform: translateY(0) rotate(0deg); opacity: .9; }
  to   { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

.flower-rise {
  position: fixed; bottom: -20px; font-size: 1.6rem; opacity: .9;
  animation: bloom 9s linear infinite;
  z-index: 1500; pointer-events: none;
}
@keyframes bloom {
  from { transform: translateY(0); opacity: .9; }
  to   { transform: translateY(-100vh); opacity: 0; }
}

/* 🎃 Halloween */
.pumpkin-float {
  position: fixed; bottom: -30px; font-size: 1.8rem; opacity: .95;
  animation: pumpkinRise 7.2s linear infinite;
  z-index: 1500; pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(255, 115, 0, .35));
}
@keyframes pumpkinRise {
  from { transform: translateY(0) rotate(0deg); opacity: .95; }
  to   { transform: translateY(-105vh) rotate(360deg); opacity: 0; }
}

/* ☀️ Sommer Glow */
.sun-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1400;
  background:
    radial-gradient(80vw 80vw at 50% 30%, rgba(255,215,0,.25), transparent 70%),
    radial-gradient(50vw 50vw at 20% 60%, rgba(255,165,0,.18), transparent 70%);
  animation: sunPulse 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sunPulse {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}

/* ===== Adventskerzen ===== */
.advent-holder {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  gap: 12px;
  z-index: 1600;
  pointer-events: none;
}

.candle {
  width: 14px;
  height: 38px;
  background: linear-gradient(to bottom, #f5f5dc 0%, #e0cfa9 100%);
  border-radius: 3px;
  position: relative;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

.flame {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 14px;
  background: radial-gradient(ellipse at center, #ffeb99 0%, #ff9800 60%, transparent 80%);
  border-radius: 50%;
  animation: flicker 1s infinite;
  box-shadow: 0 0 8px 3px rgba(255,180,0,0.6);
}

@keyframes flicker {
  0%,100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(0.8); opacity: 0.7; }
}

/* Mobil leicht nach oben rücken */
@media (max-width: 720px) {
  .advent-holder {
    bottom: 90px;
    right: 20px;
    gap: 10px;
  }
}



#season-overlay {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(11, 14, 20, 0.9);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 0.6rem 1rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 2000;
  box-shadow: 0 0 10px rgba(255,62,165,0.3);
  display: none;
  animation: fadeIn 1.5s ease;
}
#season-overlay.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.heart-float {
  position: fixed;
  bottom: -30px;
  font-size: 1.5rem;
  opacity: 0.8;
  animation: rise 8s linear infinite;
}
@keyframes rise {
  from { transform: translateY(0); opacity: 0.8; }
  to { transform: translateY(-110vh); opacity: 0; }
}

.leaf-fall {
  position: fixed;
  top: -40px;
  font-size: 1.8rem;
  opacity: 0.9;
  animation: fall 10s linear infinite;
}
@keyframes fall {
  from { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  to { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

.flower-rise {
  position: fixed;
  bottom: -20px;
  font-size: 1.4rem;
  opacity: 0.9;
  animation: bloom 9s linear infinite;
}
@keyframes bloom {
  from { transform: translateY(0); opacity: 0.9; }
  to { transform: translateY(-100vh); opacity: 0; }
}