/* ============================================================
   Subpage Hero — schlanker Hero fuer alle Unterseiten
   Eyebrow + Headline + Lead-Text, optional mit Lead-Image rechts.
   Wird auf events, event-detail, geschichte, mitglieder, kontakt
   wiederverwendet. Variante per Modifier (--centered, --image).
   ============================================================ */

.subpage-hero {
  position: relative;
  padding: clamp(7rem, 14vh, 11rem) var(--space-lg) clamp(3rem, 6vh, 5rem);
  background: var(--color-sand);
  overflow: hidden;
}

.subpage-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Variante 1 — links Text, rechts Bild (default) */
.subpage-hero--split .subpage-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Variante 2 — zentriert, ohne Bild */
.subpage-hero--centered {
  text-align: center;
}
.subpage-hero--centered .subpage-hero-text {
  max-width: 60ch;
  margin: 0 auto;
}
.subpage-hero--centered .eyebrow { justify-content: center; }
.subpage-hero--centered .eyebrow::before { display: none; }

.subpage-hero-text {
  max-width: 55ch;
}

.subpage-hero-text .eyebrow {
  margin-bottom: var(--space-md);
}

.subpage-hero-text h1 {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

.subpage-hero-text h1 em {
  font-style: italic;
  color: var(--color-rot);
  font-weight: 400;
}

.subpage-hero-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: rgba(28, 44, 44, 0.78);
  margin: 0;
}

.subpage-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Bild rechts — leichte Schraege wie auf der Startseite */
.subpage-hero-image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(28, 44, 44, 0.18);
  transform: rotate(0.6deg);
}
.subpage-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dezenter Akzent — goldener Strich ueber der Headline */
.subpage-hero-accent {
  display: inline-block;
  width: 64px;
  height: 2px;
  background: var(--color-gold);
  margin-bottom: var(--space-md);
}

@media (max-width: 880px) {
  .subpage-hero--split .subpage-hero-inner {
    grid-template-columns: 1fr;
  }
  .subpage-hero-image {
    aspect-ratio: 3/2;
    transform: none;
    order: 2;
  }
}