/* =========================================================
   HERO ZENTRALE EINSTELLUNGEN
   Hier steuerst du fast alle Hero-Bereiche der Website
   ========================================================= */
:root {
  /* =====================================================
   HERO HÖHE
   ===================================================== */

  /* Höhe aller Hero-Bereiche auf Desktop */
  --hero-height: 68vh;

  /* Höhe aller Hero-Bereiche auf Smartphones */
  --hero-mobile-height: 340px;

  /* Goldfarbe für Kicker */
  --hero-gold: #d7b15b;

  /* Hero Typografie zentral */

  /* =====================================================
   KICKER
   Beispiel:
   "Alle vier Jahre Ausnahmezustand"
   ===================================================== */
  --hero-kicker-size: 0.78rem;
  --hero-kicker-weight: 900;
  --hero-kicker-letter-spacing: 0.16em;
  /* Kicker soll immer einzeilig bleiben */
  --hero-kicker-white-space: nowrap;

  /* =====================================================
   HAUPTÜBERSCHRIFT
   Beispiel:
   "Schützenfest Eicklingen"
   ===================================================== */

  --hero-title-size: clamp(2.7rem, 7vw, 5.8rem);
  --hero-title-weight: 800;
  --hero-title-line-height: 0.96;
  --hero-title-letter-spacing: -0.06em;

  /* =====================================================
   STARTSEITE / INDEX HERO
   Eigene Werte für die große Einstiegsseite
   ===================================================== */

  --hero-home-title-size: clamp(4rem, 9vw, 8rem);
  --hero-home-title-line-height: 0.86;
  --hero-home-title-letter-spacing: -0.065em;

  --hero-home-kicker-size: clamp(0.85rem, 1.1vw, 1.05rem);
  --hero-home-kicker-letter-spacing: 0.18em;

  --hero-home-date-gap: 32px;
  --hero-home-date-size: clamp(1.35rem, 2.8vw, 2.2rem);

  /* =====================================================
   LEADTEXT
   Beispiel:
   "Das größte Fest im Landkreis..."
   ===================================================== */

  --hero-lead-size: clamp(1.05rem, 2vw, 1.3rem);
  --hero-lead-weight: 500;
  --hero-lead-line-height: 1.6;

  /* =====================================================
   TEXTBLOCK IM HERO
   ===================================================== */

  --hero-content-max: 980px;
  --hero-content-padding: 60px 20px;
}

.page-hero {
  position: relative;
  min-height: var(--hero-height);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(28, 111, 71, 0.06),
      rgba(9, 20, 14, 0.44)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.56));
  pointer-events: none;
  z-index: 1;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  width: min(100% - 32px, var(--hero-content-max));
  margin: 0 auto;
  text-align: center;
  padding: var(--hero-content-padding);
}

.page-hero__kicker {
  color: var(--hero-gold);
  text-transform: uppercase;
  letter-spacing: var(--hero-kicker-letter-spacing);
  font-size: var(--hero-kicker-size);
  font-weight: var(--hero-kicker-weight);

  /* Nie umbrechen */
  display: inline-block;
  white-space: var(--hero-kicker-white-space);
  max-width: 100%;
}

.page-hero__title {
  margin: 10px 0 0;
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-line-height);
  letter-spacing: var(--hero-title-letter-spacing);
  font-weight: var(--hero-title-weight);
}

/* =====================================================
   STARTSEITE / INDEX
   Eigene Typografie für die Einstiegsseite
   Werte werden oben im :root eingestellt
   ===================================================== */

.page-hero--home .page-hero__title {
  font-size: var(--hero-home-title-size);
  line-height: var(--hero-home-title-line-height);
  letter-spacing: var(--hero-home-title-letter-spacing);
}

.page-hero--home .page-hero__kicker {
  font-size: var(--hero-home-kicker-size);
  letter-spacing: var(--hero-home-kicker-letter-spacing);
}

.page-hero__lead {
  max-width: 780px;
  margin: 20px auto 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--hero-lead-size);
  font-weight: var(--hero-lead-weight);
  line-height: var(--hero-lead-line-height);
}

.page-hero__date {
  margin-top: var(--hero-home-date-gap);
  font-size: var(--hero-home-date-size);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #fff2c9;
}

.page-hero__actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.page-hero__actions .button,
.page-hero__actions a.button {
  min-height: 50px;
  padding: 0 23px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-decoration: none;
  transition: 0.18s ease;
}

.page-hero__actions .button:hover {
  transform: translateY(-2px);
}

/* =====================================================
   HERO HINTERGRUNDBILDER
   Hier werden die Bilder der einzelnen Seiten festgelegt
   ===================================================== */

.page-hero--aktuelles {
  background-image: url("bilder/hero/hero-aktuelles.jpg?v=4");
}
.page-hero--festumzug {
  background-image: url("bilder/hero/hero-festumzug.jpg?v=4");
}
.page-hero--galerie {
  background-image: url("bilder/hero/hero-galerie.jpg?v=5");
}
.page-hero--menschen {
  background-image: url("bilder/hero/hero-menschen.jpg?v=4");
  background-position: center 40%;
}
.page-hero--majestaeten {
  background-image: url("bilder/hero/hero-majestaeten.jpg?v=4");
}

.page-hero--image-only::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.12));
}

.page-hero.page-hero--home {
  background-color: #0b1f14;
  min-height: clamp(360px, min(68vh, 65vw), 680px);
}

.page-hero__video,
.page-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-hero__video {
  object-fit: cover;
  object-position: center 24%;
  z-index: 0;
}

.page-hero__shade {
  z-index: -2;
}

/* =====================================================
   MOBILE HERO LAYOUT
   ===================================================== */

@media (max-width: 540px) {
  .page-hero {
    min-height: var(--hero-mobile-height);
  }
  .page-hero__actions {
    flex-direction: column;
  }
  .page-hero__actions .button,
  .page-hero__actions a.button {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .page-hero.page-hero--home {
    background-image: var(--mobile-hero);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .page-hero--home .page-hero__video {
    display: none;
  }
}

/* =====================================================
   MOBILE HERO TYPOGRAFIE
   Hier steuerst du Schriftgrößen auf Smartphones
   ===================================================== */

@media (max-width: 768px) {
  :root {
    --hero-kicker-size: 0.68rem;
    --hero-kicker-letter-spacing: 0.11em;

    --hero-title-size: clamp(2.1rem, 10vw, 3.4rem);
    --hero-lead-size: 0.98rem;
    --hero-content-padding: 36px 18px;

    /* Startseite mobil */
    --hero-home-title-size: clamp(3.2rem, 15vw, 5rem);
    --hero-home-title-line-height: 0.86;
    --hero-home-title-letter-spacing: -0.06em;

    --hero-home-kicker-size: 0.72rem;
    --hero-home-kicker-letter-spacing: 0.11em;
  }
}