/**
 * @file
 * Startseiten-Hero mit Video: Text linksbündig unten links wie bei den
 * Header-Bildern der Unterseiten.
 * Overlay: Schwarz mit 30 % Deckkraft. Die Lesbarkeit der weißen Schrift
 * hängt damit vom Video ab; ein Textschatten sichert helle Stellen ab.
 * Weiß auf Römisch-Rot 7:1. Pause-Schalter kommt aus js/global.js.
 */

:root {
  --header-h: 72px;
}
@media (min-width: 1200px) {
  :root {
    --header-h: 110px;
  }
}

.hero-video {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Fensterhöhe minus Header (und Admin-Leiste, falls angemeldet):
     Der Hero füllt genau den sichtbaren Bereich unter dem Header.
     --header-h setzt js/global.js aus der echten Header-Höhe; die Werte
     unten sind nur der Rückfall ohne JavaScript. svh berücksichtigt die
     Adressleiste auf dem Handy. */
  min-height: calc(100vh - var(--header-h, 72px) - var(--drupal-displace-offset-top, 0px));
  min-height: calc(100svh - var(--header-h, 72px) - var(--drupal-displace-offset-top, 0px));
  overflow: hidden;
  isolation: isolate;
  background: var(--ink, #1A1A1A);
  color: #FFF;
}

.hero-video__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gleichmäßiges Overlay: Schwarz mit 30 % Deckkraft, das Video bleibt kräftig. */
.hero-video__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.3);
}

/* Weicher Schatten hält die Schrift auch über hellen Stellen im Video lesbar. */
.hero-video__eyebrow,
.hero-video .hero-video__title,
.hero-video .hero-video__lead,
.hero-video__trust {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero-video__content {
  position: relative;
  padding-top: 7rem;
  padding-bottom: clamp(3rem, 9vh, 6.5rem);
  text-align: left;
}

/* Kennung mit kurzem roten Strich davor. */
.hero-video .hero-video__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  color: #FFF;
  font-family: var(--font-body, serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}
.hero-video__eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 3px;
  background: var(--roman-red, #A82824);
}

/* Alte Regeln zentrieren und verkleinern h1/p in Blöcken – hier übersteuern. */
.hero-video .hero-video__title {
  max-width: 18ch;
  margin: 0 !important;
  padding: 0;
  color: #FFF;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-align: left !important;
  hyphens: manual;
}

.hero-video .hero-video__lead {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  text-align: left !important;
}

.hero-video__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.25rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-video .hero-btn--primary {
  padding: 0.75rem 1.75rem;
  background: var(--roman-red, #A82824);
  color: #FFF;
}
.hero-video .hero-btn--primary:hover {
  background: #FFF;
  color: var(--ink, #1A1A1A);
}
.hero-video .hero-btn--link {
  color: #FFF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.hero-video .hero-btn--link:hover {
  text-decoration-thickness: 2px;
}
.hero-video .hero-btn:focus-visible {
  outline: 3px solid #FFF !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

.hero-video__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  max-width: 44rem;
  margin: 2.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  list-style: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
}
.hero-video .hero-video__trust li {
  margin: 0;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Pause-Schalter (global.js) unten rechts, nicht über dem Text. */
.hero-video .hetz-video-toggle {
  right: 1.5rem;
  bottom: 1.5rem;
}

/* Handy: Verlauf von unten, damit der Text auf jedem Bildausschnitt lesbar ist. */
@media (max-width: 767.98px) {
  .hero-video__content {
    padding-bottom: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn {
    transition: none;
  }
}