/* ===================================================================
   HERO SECTION — Vollbildbereich mit Blur-Glass-Box
   nutzt zentrale Theme-Variablen aus /core/theme.php
   =================================================================== */

/* Vollbild-Hintergrund */
.hero {
  position: relative;
  width: 100vw;

  /* Full-Bleed auf beiden Seiten */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* Höhe kann optional per Variable gesteuert werden */
  height: var(--hero-height, 100vh);

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  /* Fallback-Hintergrund, wird meist vom inline-style
     mit background-image (page_hero.image) überschrieben */
  background: var(
    --hero-bg,
    url('/assets/img/hero.jpg') center center / cover no-repeat fixed
  );

  /* Textfarbe: standardmäßig helle Schrift,
     kann aber via Theme-Studio (Textfarbe) überschrieben werden */
  color: var(--hero-text-color, var(--theme-text-color, #ffffff));

  transition: filter .4s ease, opacity .4s ease;
  z-index: 1;
}

/* Hero-Overlay (dunkelt alles leicht ab) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Overlay-Farbe ist per Variable anpassbar, Fallback wie bisher */
  background: var(--hero-overlay-color, rgba(0, 0, 0, .45));
  z-index: 0 !important;
}

/* ===================================================================
   GLASS BOX — Der eigentliche Textbereich (H1, Untertitel)
   =================================================================== */

.hero-glass {
  position: relative;
  z-index: 2;

  backdrop-filter: blur(var(--blur, 20px));
  -webkit-backdrop-filter: blur(var(--blur, 20px));

  /* Glas-Hintergrund aus zentraler Variable, Fallback alte Optik */
  background: var(
    --hero-glass-bg,
    var(--white-glass, rgba(255, 255, 255, 0.18))
  );

  border-radius: var(--hero-radius, 20px);
  padding: 3rem 2rem;
  text-align: center;

  max-width: 800px;
  width: 90%;

  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);

  /* Einstiegseffekt */
  animation: heroIn .8s var(--ease-spring, cubic-bezier(.22,.61,.36,1)) both .1s;
}

/* Animation Keyframe */
@keyframes heroIn {
  from {
    transform: translateY(16px) scale(.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Titel:
   - Farbe -> standardmäßig Akzentfarbe aus Theme-Studio
   - Größe -> per Variable anpassbar */
.hero-glass h2 {
  font-size: var(--hero-title-size, 3rem);
  color: var(--hero-title-color, var(--yellow, #E8FF3A));
  margin-bottom: 1rem;
}

/* Untertitel:
   - Farbe hängt an Theme-Textfarbe, damit deine „Textfarbe“
     im Theme-Studio sichtbar wird.
   - Kann optional über --hero-subtitle-color überschrieben werden. */
.hero-glass p {
  font-size: var(--hero-subtitle-size, 1.2rem);
  color: var(--hero-subtitle-color, var(--theme-text-color, #ffffff));
  margin-bottom: 2rem;
}

/* ===================================================================
   PRIMARY BUTTON (btn-main)
   Wird auch auf Start/BLOG/Events genutzt
   =================================================================== */

.btn-main {
  background: var(--btn-primary-bg, var(--yellow, #E8FF3A));
  color: var(--btn-primary-text, var(--green-dark, #0e5a37));

  padding: .8rem 1.8rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;

  transition:
    transform .2s ease,
    background .3s ease,
    box-shadow .2s ease;

  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

.btn-main:hover {
  background: var(--btn-primary-bg-hover, #fff75f);
  transform: translateY(-2px);
}

/* ===================================================================
   RESPONSIVE HERO STYLES
   =================================================================== */

@media (max-width: 900px) {
  .hero-glass h2 {
    font-size: calc(var(--hero-title-size, 3rem) * 0.7);
  }

  .hero-glass p {
    font-size: calc(var(--hero-subtitle-size, 1.2rem) * 0.9);
  }

  /* Mobile-Geräte: Fixed-Background deaktivieren wegen Performance */
  .hero {
    background-attachment: scroll;
  }
}