/* ==========================================================================
   HERO
   Full-bleed, 100vw x 100svh. svh statt dvh: dvh folgt der mobilen
   Adressleiste, dadurch änderte sich die Hero-Höhe (und damit die gesamte
   Dokumenthöhe) bei jedem Leisten-Toggle mitten im Scroll — Inhalt
   verrutschte unter dem Finger (s. auch .site-footer in footer.css, wo
   derselbe Effekt am Scroll-Ende die Jitter-Schleife auslöste). svh ist
   über alle Leisten-Zustände konstant und füllt den Viewport exakt im
   Lade-Zustand (Leiste sichtbar). Ignoriert den .wrapper-Container bewusst.
   ========================================================================== */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh; /* Fallback für Browser ohne svh-Support */
  height: 100svh;
  /* "clip" statt "hidden": schneidet Overflow genauso ab (kein horizontaler
     Scrollbalken durch 100vw), erzeugt aber KEINEN Scroll-Container – das
     .pattern-cross-rows-Kind (s. base.css) kann dadurch innerhalb des Hero
     position:sticky nutzen. Mit "hidden" bliebe sticky wirkungslos, weil
     der nächste scrollende Vorfahre dann .hero selbst wäre (der aber nie
     intern scrollt), statt des Dokuments. */
  overflow: clip;
  background: var(--color-background-contrast);
  /* isolation: isolate als Firefox-Workaround gegen Mozilla Bug 1787089,
     ausführlich erklärt bei .site-header__logo in header.css: mix-blend-
     mode ≠ normal ohne "backdrop root" kann Root-Reichweite bekommen und
     dadurch Firefox' backdrop-filter/blur der Glas-Buttons irgendwo auf
     der Seite reißen. */
  isolation: isolate;
}

/* Der Hero füllt den Viewport ab y=0, der fixed Header schwebt transparent
   darüber (kein eigener Hintergrund mehr). Das globale Top-Padding für
   Anker-Sections (main > .section:first-child in base.css) würde hier sonst
   einen sichtbaren dunklen Balken oberhalb des Videos erzeugen. Gleiche
   Spezifität wie die base.css-Regel, gewinnt aber durch spätere Ladereihenfolge. */
main > .hero:first-child {
  padding-top: 0;
}

.hero__media {
  width: 100%;
  height: 100%;
}

.hero__video,
.hero__image,
.hero__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

/* Rein dekoratives Hintergrundvideo, kein <video controls> – ohne
   pointer-events bliebe es trotzdem als eigenständiges Ziel für
   Touch-Gesten antastbar (Doppel-Tap/Long-Press einiger mobiler Browser
   bietet dafür ein natives "Vollbild"/Cast-Kontextmenü an, selbst ohne
   sichtbare Controls). pointer-events: none nimmt dem Video jede
   Interaktionsfläche, Klicks/Taps fallen einfach durch zum Hero dahinter. */
.hero__video {
  pointer-events: none;
}

/* full-bleed (100vw): keine abgerundeten Ecken, anders als sonstige
   Medienelemente (.placeholder-box setzt sonst --radius-sm) */
.hero__placeholder {
  border-radius: 0;
}

/* "Connect!"-Label + E-Mail unten rechts im Hero, nebeneinander in einer
   Reihe. Abstand zum Rand spiegelt exakt die Werte, mit denen der Header
   seinen Inhalt vom Viewport-Rand rückt (padding-inline: --container-padding;
   margin-top + padding-block ergibt den vertikalen Versatz), nur unten
   statt oben. */
.hero__connect {
  position: absolute;
  right: var(--container-padding);
  bottom: calc(var(--space-sm) + var(--space-md));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--tag-gap);
}

/* bp: --bp-mobile (640px) — auf dem Smartphone untereinander statt
   nebeneinander, gleiches Muster wie .hero__elevator oben. align-items:
   flex-end statt flex-start (dort), damit beide Boxen weiterhin rechts-
   bündig zum Viewport-Rand stehen (die Gruppe ist rechts verankert,
   right: var(--container-padding)). */
@media (max-width: 640px) {
  .hero__connect {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* Elevator-Zeile unten links, spiegelbildlich zu .hero__connect (s.u.) –
   Inhalt/Reihenfolge kommt aus site.yml (Tab „Overview" > „Elevator"),
   s. hero-section.php. Alle drei Boxen teilen das Glas-Design von
   .hero__email (s.u.); die letzte (.hero__elevator-tag) rotiert zusätzlich
   automatisch durch die im Panel gepflegten Rollen (s. Elevator-Tag-Block
   in nav.js). flex-wrap nötig: die Boxen sind auf schmalen Screens breiter
   als bei .hero__connect. */
.hero__elevator {
  position: absolute;
  left: var(--container-padding);
  bottom: calc(var(--space-sm) + var(--space-md));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tag-gap);
}

/* Fasst Verb + Rollen-Tag zu einer Einheit zusammen, ohne das Desktop-Layout
   zu beeinflussen: display:contents lässt den Wrapper aus der Box-Struktur
   verschwinden, die beiden Kind-Boxen bleiben ganz normale Flex-Items von
   .hero__elevator (Reihe, gleicher gap, wie vorher ohne Wrapper). Erst mobil
   (s.u.) wird daraus ein eigener Flex-Container. */
.hero__elevator-role {
  display: contents;
}

/* bp: --bp-mobile (640px) — Name bleibt in eigener Zeile darüber, Verb +
   Rollen-Tag rücken als eigene Reihe darunter zusammen (nebeneinander statt
   je eigener Zeile): .hero__elevator-role verlässt hier display:contents
   und wird selbst zum zweiten Flex-Item der äußeren column-Liste. */
@media (max-width: 640px) {
  .hero__elevator {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__elevator-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tag-gap);
  }
}

/* E-Mail-Link + Elevator-Boxen (Name/Verb/rotierendes Rollen-Tag): tragen
   im Markup zusätzlich die .tag-Klasse (components.css) als Basis – Maße/
   Radius/Typo kommen dadurch automatisch von dort und bleiben mit allen
   anderen Tags synchron. Hier nur noch die Abweichungen vom normalen .tag:
   Hintergrund-Mix + Blur wie .site-header .btn (header.css) übernommen –
   die --color-heading-badge-background-Variante aus .tag (nur 10% deckend)
   mischte auf dunklem Hero-Video zu stark mit dem Hintergrund – der dunkle
   Text war praktisch unlesbar. Als Mix-Farbe kommt bewusst NICHT das Weiß
   der Nav-Buttons (--color-nav-button-background) zum Einsatz, sondern das
   Grau aus dem hellen Tag-Design (--color-badge-background, Design-Tab
   „Tag Background") – passt farblich besser zur dunklen .hero__connect-
   label-Pille daneben. Blur/Saturate/Schatten kommen aus den site-weiten
   --glass-*-Tokens (tokens.css), inkl. Dark-Theme-Schatten. */
.hero__email,
.hero__elevator-item {
  background: color-mix(in srgb, var(--color-badge-background) 75%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
}

/* Animiert die Boxbreite beim Rollen-Wechsel (s. swapElevatorTag in nav.js)
   statt hart zu springen — bewusste, dokumentierte Ausnahme von der
   transform/opacity-Regel (s. animations.css): die Box ist links verankert
   (.hero__elevator, s.o.), wächst/schrumpft dadurch sichtbar nur rechts. */
.hero__elevator-tag {
  transition: width var(--duration-base) var(--ease-standard);
}

/* Platz für spätere Overlay-Inhalte (z.B. Logo-Reveal, Scroll-Hinweis) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-background-contrast) 15%, transparent),
    transparent 40%
  );
  pointer-events: none;
}