/* ===========================================================================
   Kopfbereich und Eckdaten der Buchungsseite.

   Nach Figma 42:4929 / 42:4937 (Desktop, 1816 px) und 43:5606 / 43:5614
   (mobil, 390 px). Gehört zu public/styles.css — abgetrennt, weil keine Datei
   über 300 Zeilen gehen soll (CLAUDE.md).
   =========================================================================== */

/* Das dunkle Band läuft über die volle Breite, auf jedem Bildschirm — es ist
   NICHT auf die Inhaltsbreite von 1170 begrenzt und hat keine abgerundeten
   Ecken. Der weiße Rahmen darin sitzt 20 Pixel innen. */
.hero {
  padding: 1.25rem;
  background: var(--gruen-tief);
  box-shadow: 0 4px 12.5px rgb(0 0 0 / 25%);
  color: var(--weiss);
}

.hero__frame {
  text-align: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border: 1px solid var(--weiss);
}

.hero__inner > * {
  width: 100%;
  max-width: 100%;
}

.hero__kicker {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

/*
 * Die drei Teile der Überschrift stehen im Entwurf zueinander wie 60 : 90 : 34
 * Pixel auf einer Zeilenhöhe von 80. Die Größen hängen deshalb alle an EINER
 * Schriftgröße (`em`) — sonst müsste jede für sich umgerechnet werden, sobald
 * das Fenster schmaler wird als 390 Pixel.
 *
 * Auf dem Telefon sind es dieselben Werte, sie umbrechen nur in drei Zeilen.
 * `min(…, 23vw)` fängt nur ab, was schmaler ist als der Entwurf.
 *
 * 0.889em sind die 80 Pixel des Entwurfs. Figma meldet für denselben Textblock
 * 180 Pixel auf zwei Zeilen (= 90) und 252 auf drei (= 84) — das sind die
 * Maße SEINES Textkastens, nicht die Zeilenhöhe. Maßgeblich ist die angegebene
 * Zeilenhöhe, nicht die zurückgerechnete.
 */
.hero__title {
  margin: 0;
  font-size: min(90px, 23vw);
  font-weight: 900;
  line-height: 0.889em;
  text-wrap: balance;
}

.hero__title-lead {
  font-size: 0.667em;
  font-weight: 300;
  letter-spacing: 0.11em;
}

.hero__title-main {
  font-size: 1em;
  font-weight: 900;
  letter-spacing: 0.21em;
}

.hero__title-wide {
  display: block;
  font-size: 0.378em;
  font-weight: 300;
  letter-spacing: 0.25em;
}

.hero__rule {
  width: min(310px, 100%);
  margin: 0;
  border: 0;
  border-top: 1px solid var(--weiss);
}

.hero__date {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

.hero__date strong {
  font-weight: 800;
}

/* --- Eckdaten ------------------------------------------------------------ */

.facts {
  padding: 1.875rem 1.25rem;
  background: var(--gruen-hell);
}

/* Die drei Eckdaten stehen im Entwurf auf der vollen Inhaltsbreite verteilt,
   nicht in der Mitte zusammengeschoben (Figma 42:4940). */
.facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 0 0.625rem;
  list-style: none;
}

.facts__item {
  display: flex;
  flex: 0 1 311px;
  gap: 0.9375rem;
  align-items: center;
  padding: 0.625rem;
  border-radius: 5px;
}

.facts__icon {
  flex: none;
  width: 38px;
  height: 38px;
}

.facts__text {
  display: flex;
  flex-direction: column;
  /* Schwarz, nicht das Grün des Fließtextes (Figma 39:4359). */
  color: var(--schwarz);
  font-size: 1.25rem;
  line-height: 1.25;
}

.facts__text strong {
  font-weight: 700;
}

.facts__note {
  font-weight: 300;
}