/* Saisonale Designs: werden über html[data-theme] von js/theme.js geschaltet */
html[data-theme] .hero-inner::before,
html[data-theme] .hero-inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}
html[data-theme] .hero-watermark { opacity: .05; }

/* ---------- Halloween ---------- */
html[data-theme="halloween"] {
  --brand-rgb: 255, 122, 26;
  --red: #d9620f;
  --red-bright: #ff8a3d;
  --red-dark: #8a3407;
  --red-tint: rgba(255, 138, 61, .12);
  --red-glow: rgba(255, 122, 26, .3);
}
html[data-theme="halloween"] .hero {
  background:
    radial-gradient(700px 420px at 12% 20%, rgba(255, 122, 26, .2), transparent 65%),
    radial-gradient(800px 500px at 95% 90%, rgba(110, 70, 170, .28), transparent 60%),
    linear-gradient(180deg, #0d0b12 0%, #140d1a 100%);
}
html[data-theme="halloween"] .hero h1 .accent { background-image: linear-gradient(90deg, #c4500a, #7c2f06, #c4500a); }
html[data-theme="halloween"] .btn-primary {
  background: linear-gradient(180deg, #c4500a, #7c2f06);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(255, 122, 26, .6);
}
html[data-theme="halloween"] .hero-inner::before {
  left: -24px; top: -60px; width: 150px; height: 150px;
  background-image: url(../assets/theme/halloween-web.svg);
  opacity: .5;
}
html[data-theme="halloween"] .hero-inner::after {
  right: 0; bottom: -50px; width: 240px; height: 165px;
  background-image: url(../assets/theme/halloween-deko.svg);
  opacity: .9;
}

/* ---------- Weihnachten ---------- */
html[data-theme="weihnachten"] {
  --brand-rgb: 200, 55, 45;
  --red-tint: rgba(200, 55, 45, .12);
  --red: #c8372d;
  --red-bright: #ff6a58;
  --red-dark: #7d1a14;
  --red-glow: rgba(200, 55, 45, .3);
}
html[data-theme="weihnachten"] .hero {
  background:
    radial-gradient(700px 420px at 12% 20%, rgba(200, 55, 45, .18), transparent 65%),
    radial-gradient(800px 500px at 95% 90%, rgba(47, 122, 77, .3), transparent 60%),
    linear-gradient(180deg, #0b0f0d 0%, #0d1a13 100%);
}
html[data-theme="weihnachten"] .hero h1 .accent { background-image: linear-gradient(90deg, #e6c067, #fff1c4, #e6c067); }
html[data-theme="weihnachten"] .btn-primary { background: linear-gradient(180deg, var(--red), var(--red-dark)); color: #fff; box-shadow: 0 10px 24px -8px rgba(200, 55, 45, .6), inset 0 0 0 2px rgba(230, 192, 103, .55); }
html[data-theme="weihnachten"] .hero-inner::before {
  inset: -90px -24px -90px; width: auto; height: auto;
  background-image: url(../assets/theme/weihnachten-schnee.svg);
  background-repeat: repeat; background-size: 240px 240px;
  animation: snow-fall 40s linear infinite;
  opacity: .6;
}
html[data-theme="weihnachten"] .hero-inner::after {
  right: -24px; top: -90px; width: 260px; height: 150px;
  background-image: url(../assets/theme/weihnachten-zweig.svg);
  opacity: .95;
}
@keyframes snow-fall { to { background-position: 60px 240px; } }

/* ---------- Silvester ---------- */
html[data-theme="silvester"] {
  --brand-rgb: 230, 192, 103;
  --red: #c9a227;
  --red-bright: #e6c067;
  --red-dark: #7a6212;
  --red-tint: rgba(230, 192, 103, .12);
  --red-glow: rgba(230, 192, 103, .25);
}
html[data-theme="silvester"] .hero {
  background:
    radial-gradient(700px 420px at 12% 20%, rgba(230, 192, 103, .16), transparent 65%),
    radial-gradient(800px 500px at 95% 90%, rgba(226, 35, 26, .16), transparent 60%),
    linear-gradient(180deg, #09090d 0%, #0e0e17 100%);
}
html[data-theme="silvester"] .hero h1 .accent { background-image: linear-gradient(90deg, #e6c067, #fff1c4, #e6c067); }
html[data-theme="silvester"] .btn-primary {
  background: linear-gradient(180deg, #e6c067, #b8921f);
  color: #17120a;
  box-shadow: 0 10px 24px -8px rgba(230, 192, 103, .5);
}
html[data-theme="silvester"] .hero-inner::before {
  inset: -90px -24px -90px; width: auto; height: auto;
  background-image: url(../assets/theme/silvester-konfetti.svg);
  background-repeat: repeat; background-size: 260px 260px;
  animation: snow-fall 60s linear infinite;
  opacity: .6;
}
html[data-theme="silvester"] .hero-inner::after {
  right: 0; bottom: -60px; width: 250px; height: 177px;
  background-image: url(../assets/theme/silvester-feuerwerk.svg);
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .65; } to { opacity: 1; } }

@media (max-width: 760px) {
  html[data-theme] .hero-inner::after { transform: scale(.6); transform-origin: right bottom; opacity: .55; }
  html[data-theme="halloween"] .hero-inner::before { width: 100px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .hero-inner::before,
  html[data-theme] .hero-inner::after { animation: none; }
}

@media (min-width: 1280px) {
  html[data-theme="halloween"] .hero-inner::before { left: 0; top: -40px; }
  html[data-theme="halloween"] .hero-inner::after { right: 24px; bottom: -20px; }
  html[data-theme="weihnachten"] .hero-inner::after { right: 0; top: -70px; }
  html[data-theme="silvester"] .hero-inner::after { right: 24px; bottom: -20px; }
}