/* ==========================================================================
   Villa Restaurant Sömmerda - Seiten-Hero
   ==========================================================================
   Der Hero jeder Unterseite: Bild, Wash, Überschrift, Vorspann.

   ⚠️ WARUM ES DIESE DATEI GIBT
   Diese Regeln standen bis zum 02.09.2026 in speisekarte.css. Die wird
   aber nur von vier Seiten geladen. Auf allen anderen Seiten mit einem
   Seiten-Hero, also den zehn Ortsseiten, der Nischenseite und den drei
   Feiern-Seiten, fehlte deshalb die Schriftfarbe. Die Überschrift stand
   dort in Anthrazit auf dunklem Foto und war praktisch unsichtbar.

   Der Inhalt ist unverändert übernommen, Fassung 2.4. Der hellere Wash
   und der vierstufige Schatten sind aufeinander abgestimmt, wer einen
   davon ändert, misst den anderen nach.

   Geladen in base.html für JEDE Seite, direkt vor dem extra_css-Block,
   also an derselben Stelle der Reihenfolge, an der speisekarte.css stand.
   ========================================================================== */

.hero--page {
  position: relative;
  min-height: 64vh;
  background: var(--vr-anthrazit);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: var(--vr-space-xl);
}

.hero--page .hero__media {
  position: absolute;
  /* War -10%. Diese Reserve war fuer eine Bewegung gedacht, die es auf
     den Unterseiten nicht gibt, und hat nur Bildflaeche gekostet. */
  inset: -4% 0 0 0;
  z-index: 1;
  will-change: transform;
}

.hero--page .hero__media picture,
.hero--page .hero__media .hero__img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero--page .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
}

/* Heller oben (0.48), frueher Auslauf in Creme ab 50 Prozent.
   Dadurch bleibt der scharfe Bereich sichtbar und es gibt
   keine harte Bildkante mehr nach unten. */
.hero--page .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(26, 20, 16, 0.48) 0%,
    rgba(26, 20, 16, 0.42) 18%,
    rgba(26, 20, 16, 0.32) 35%,
    rgba(26, 20, 16, 0.18) 60%,
    rgba(239, 230, 210, 0.00) 72%,
    rgba(239, 230, 210, 0.45) 85%,
    rgba(239, 230, 210, 0.85) 96%,
    rgba(239, 230, 210, 1.00) 100%
  );
}

.hero--page .hero__inner {
  position: relative;
  z-index: 3;
}

.hero__inner--center {
  text-align: center;
  margin-inline: auto;
  max-width: 760px;
  margin-bottom: 8vh;
}

/* 4-stufiger Schatten kompensiert helleren Wash */
.hero__headline {
  color: var(--vr-creme);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 6px 18px rgba(0, 0, 0, 0.65),
    0 14px 36px rgba(0, 0, 0, 0.45);
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.05;
}

.hero__lead {
  color: var(--vr-creme);
  opacity: 1;
  max-width: 60ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  font-weight: var(--vr-fw-medium);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 6px 18px rgba(0, 0, 0, 0.65),
    0 12px 28px rgba(0, 0, 0, 0.45);
}

.eyebrow--on-dark {
  color: var(--vr-gold-hell);
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 6px 14px rgba(0, 0, 0, 0.55);
}


/* ==========================================================================
   THEMA-A-E-04092026, Teil A. Die Fotos oben waren abgeschnitten.

   Gemessen auf /hochzeit bei 1282 mal 831 Pixel: Rahmen 603 hoch, Bild
   darin 784. Ein Viertel lag ausserhalb. Ursache war min-height 64vh,
   das nur die Fensterhoehe kennt. Ein breites, flaches Fenster machte
   den Rahmen flach, das Foto blieb hoch, also wurde mehr beschnitten,
   je groesser der Monitor war.

   clamp koppelt die Hoehe an beides:
     unten  400px   damit es auf dem Handy nicht wuchtig wird
     Mitte   52vw   waechst mit der Breite, also mit dem Monitor
     oben    82vh   damit es nie ueber das Fenster hinauslaeuft
   ========================================================================== */
.hero--page {
  /* 52vw brachten nichts: der Anteil blieb bei 77 Prozent, weil das Foto
     mit dem Rahmen mitwaechst. Entscheidend ist die Naehe zum
     Seitenverhaeltnis des Fotos, 3 zu 2, also 66,6vw fuer ein ganzes
     Bild. 62vw ist so nah daran, wie es geht, ohne dass der Abschnitt
     zur Wand wird. 90vh deckelt ihn im Fenster. */
  min-height: clamp(420px, 62vw, 90vh);
}

/* Auf sehr flachen Fenstern, etwa einem gedrehten Handy, wuerde 82vh zu
   wenig hergeben. Dort zaehlt die Breite mehr. */
@media (max-height: 560px) and (min-width: 700px) {
  .hero--page {
    min-height: clamp(340px, 46vw, 96vh);
  }
}


/* ==========================================================================
   HERO-HOEHE-FIX, 04.09.2026.

   Gemessen: der Bildrahmen war 972 Pixel hoch, obwohl der Abschnitt nur
   748 hat und inset -4% oben, 0 unten gesetzt ist. Aus top und bottom
   haette sich 778 ergeben muessen. Das bottom griff nicht, die Hoehe kam
   vom Inhalt. Folge: 224 Pixel Bild lagen unterhalb der Kante, sichtbar
   waren 77 Prozent.

   Eine ausgeschriebene Hoehe laesst dem nichts offen. 104 Prozent, das
   sind die 4 Prozent Ueberstand oben. Damit sind rechnerisch 91 Prozent
   des Fotos zu sehen statt 77.
   ========================================================================== */
.hero--page .hero__media {
  height: 104%;
  bottom: auto;
}