/* hero.css — Vollbild-Hero (Bild-Variante = Slider-Kontrakt, Video-Variante = CN/RU)
   Referenz: scrape/screens/{en,cn,ru}-home-*.jpg + docs/animation-notes.md.
   Bild-Hero: EN-Home hat 1 Slide (Slider-JS überspringt <2), Markup bleibt gültig.
   Video-Hero: selbst-gehostetes MP4 (COMING-SOON ist im Video eingebrannt). */

.hero { position: relative; overflow: hidden; background: #0d1b24; }

/* ---- Bild-Hero -------------------------------------------------------- */
.hero--image { height: min(84vh, 760px); }

/* Slide-Fade (animation-notes: Original nutzt slick; hier Fade via is-active).
   Inaktive Slides absolut übereinander; das aktive Slide liegt relativ, MUSS aber
   die feste Hero-Höhe (min(84vh,760px)) voll ausfüllen — sonst kollabiert es auf
   die Eigenhöhe des Bildes (width:100% + Seitenverhältnis) und lässt darunter ein
   schwarzes Band (Hero-Background #0d1b24) stehen. Daher height:100% auf slide +
   picture + img, damit object-fit:cover das Bild bildschirmfüllend beschneidet. */
.hero .slide {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  position: absolute;
  inset: 0;
  height: 100%;
}
.hero .slide.is-active { opacity: 1; position: relative; }
.hero .slide picture,
.hero .slide img { width: 100%; height: 100%; object-fit: cover; }
/* Bild links verankert (Original: Turm-Motiv links im Bild, s. Referenz 6.jpeg) */
.hero .slide img { object-position: left center; }

/* Lesbarkeits-Scrim (Text steht links, Verlauf von links) */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0) 72%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.hero__inner {
  color: #fff;
  max-width: 680px;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}

.hero__brand {
  font-family: var(--font-heading);
  color: #fff;
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: 0.03em;
  margin-bottom: 0.5em;
}
.hero__brand span { display: block; font-size: clamp(2.6rem, 7.5vw, 5.6rem); }
.hero__brand--solo span { font-size: clamp(2rem, 5vw, 3.4rem); }

.hero__lead { margin-bottom: 1.6rem; }
.hero__line {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.hero__line--solo { margin-top: 0.4rem; }
.hero__script {
  font-family: var(--font-script);
  color: #fff !important;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1;
  margin-top: 0.15em;
}

.hero__cta {
  background: rgba(177, 149, 116, 0.82);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
}
.hero__cta:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }

/* Dots (nur bei >= 2 Slides von slider.mjs befüllt) */
.hero__dots {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 1.4rem;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
}
.hero__dots:empty { display: none; }
.hero__dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hero__dots button.is-active { background: #fff; transform: scale(1.15); }

/* ---- Video-Hero (CN/RU) ---------------------------------------------- */
.hero--video { height: min(80vh, 720px); background: #0d1b24; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }

/* Pause/Play-Toggle (WCAG 2.2.2, s. assets/js/video.mjs) — dezenter Kreis-
   Button, untere rechte Ecke über dem Video, dunkler Glas-Look passend zum
   Scrim/Overlay-Ton der Bild-Hero. */
.hero__video-toggle {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(13, 27, 36, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__video-toggle:hover,
.hero__video-toggle:focus-visible { background: rgba(13, 27, 36, 0.72); border-color: #fff; }
.hero__video-toggle-icon::before { content: "❚❚"; font-size: 0.8rem; letter-spacing: 1px; }
.hero__video-toggle.is-paused .hero__video-toggle-icon::before { content: "►"; font-size: 0.9rem; }

/* ===== Transparenter Header über dem Video-Hero (CN/RU-Home) ===========
   Task 8 ließ den Header auf allen Seiten solide cremefarben; hier die
   „over-section"-Variante des Originals: transparent über dem Video, bekommt
   beim Scrollen (nav.mjs -> .site-header--scrolled) wieder Hintergrund.
   Fixed statt sticky, damit der Header das Video wirklich überlagert. */
.has-hero-video .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.has-hero-video .site-header__link,
.has-hero-video .langswitch__current {
  color: #fff;
}
.has-hero-video .langswitch__current {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}
.has-hero-video .site-header__burger span { background: #fff; }

.has-hero-video .site-header--scrolled {
  background: var(--color-cream);
  border-bottom-color: var(--color-line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.has-hero-video .site-header--scrolled .site-header__link,
.has-hero-video .site-header--scrolled .langswitch__current {
  color: var(--color-primary);
}
.has-hero-video .site-header--scrolled .langswitch__current {
  background: #fff;
  border-color: var(--color-line);
}
.has-hero-video .site-header--scrolled .site-header__burger span { background: var(--color-primary); }

/* Mobile: Bild-Hero etwas niedriger, Text linksbündig behalten */
@media (max-width: 767px) {
  .hero--image { height: min(78vh, 560px); }
  .hero--video { height: min(62vh, 460px); }
  .hero__inner { max-width: none; }
}