/* ==========================================================================
   Hero (Integration, Version D, Brief Abschnitte 05 und 06)
   Blickverlauf, zentriert auf allen Breiten: Eyebrow · Headline · Subheadline · Erstgespräch + Referenzen · Bewertung ·
   Founder-Video. Das Video ist das einzige Hero-Medium (kein Anfragen-Element, keine schwebenden Karten).
   Bewegung „In die Mitte“ (Desktop ab 1024 px, js/hero.js setzt --t 0…1):
   das Video kommt eingezogen (78 %) unter der Botschaft herauf und wächst mit jedem Scrollschritt gleichmäßig, bis es
   mittig unter dem Header auf voller Breite steht; danach scrollt es normal weiter. Kein Halten, keine Pause
   (Polish Abschnitt 5). Kein Kippen, kein Licht. Tablet: nur leichtes Wachsen. Handy und Reduced Motion: Endzustand.
   ========================================================================== */

.hero { position: relative; padding-top: clamp(8rem, 6rem + 5vw, 11rem); }

/* ---------------- Botschaft ---------------- */
.hero__msg { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__eyebrow { justify-content: center; margin-bottom: clamp(1.1rem, .9rem + .6vw, 1.6rem); }
/* Headline (Marcel 24.10, Test dreizeilig): „Damit dein Unternehmen / online so stark / ist wie offline.“, gedämpft ab „so stark“.
   Ab 768 px feste Umbrüche (.hero__br), darunter ausgeglichen ohne feste Umbrüche. */
.hero__h { max-width: 14em; text-wrap: balance; }
.hero__h .soft { text-wrap: balance; }
@media (max-width: 767px) { .hero__br { display: none; } }
.hero__lead { max-width: 33em; margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); text-wrap: balance; }
.hero__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 2rem; margin-top: clamp(1.75rem, 1.4rem + .9vw, 2.5rem); }
/* Bewertung: ruhiger Beleg, zentriert unter den Buttons. Kein Rahmen, keine Fläche, kein Glow. */
.hero__trust { justify-items: center; margin-top: clamp(1.6rem, 1.3rem + .8vw, 2.25rem); padding: .25rem .5rem; border-radius: var(--r-sm); }
.hero__trust .stars-line__row { justify-content: center; }

/* ---------------- Medienbühne ---------------- */
.hero__media { position: relative; margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); padding-bottom: var(--sec-y); }
.hero__pin { position: relative; }
/* Breite des Videos: volle Inhaltsbreite, aber nie höher als das Fenster unter dem Header (16:9). */
.hero__film { width: min(100%, calc((100svh - 7.5rem) * 16 / 9)); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--r-xl); box-shadow: var(--shadow-3); transform-origin: 50% 0; }
.hero__film video { position: absolute; inset: 0; }
.hero__ph { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; }
.hero__pause { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
/* Unterkante: Name links, „Mit Ton ansehen“ rechts. Ein dunkler Verlauf nur so hoch wie die Schrift (Lesbarkeit). */
.hero__foot { position: absolute; inset: auto 0 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1rem, .7rem + 1vw, 1.75rem); background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); }
.hero__who { display: grid; gap: .1rem; line-height: 1.3; text-align: left; }
.hero__who b { font-size: 1.0625rem; font-weight: 650; color: #fff; }
.hero__who > span { font-size: var(--fs-meta); color: rgba(255, 255, 255, .78); }
.hero__listen { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .25rem 1rem .25rem .25rem; border-radius: 12px; background: var(--scrim); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-size: .9375rem; font-weight: 600; transition: background var(--t-fast); }
.hero__listen:hover { background: var(--surface-4); }
.hero__listen-k { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: var(--red); color: var(--on-red); }
.hero__listen-k svg { width: 1.05rem; height: 1.05rem; }
.hero__film.is-sound .hero__listen, .hero__film.is-sound .hero__pause, .hero__film.is-sound .hero__foot, .hero__film.is-sound .hero__ph { display: none; }
.hero__film.is-sound video { z-index: 3; }

/* ---------------- Bewegung „In die Mitte“ (nur mit JS, ohne Reduced Motion) ----------------
   --t 0 = eingezogen (78 %), 1 = volle Breite, erreicht genau dann, wenn das Video mittig unter dem Header steht.
   D hielt das Video dort zusätzlich sticky über eine Laufstrecke; in dieser Haltestrecke stand die Szene still
   (Polish Abschnitt 5). Deshalb kein Sticky und keine Laufstrecke mehr: die Seite bewegt sich mit jedem Scrollschritt. */
.js .hero[data-motion] .hero__film { transform: scale(calc(.78 + var(--t, 0) * .22)); will-change: transform; }

/* ---------------- Mobil-Dialog: Video mit Ton im Querformat ---------------- */
.hero__dlg { width: min(100vw - 1.5rem, 64rem); max-width: none; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface-2); color: var(--text); box-shadow: var(--ring-2), var(--shadow-3); }
.hero__dlg::backdrop { background: rgba(0, 0, 0, .82); }
.hero__dlg video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.hero__dlg-bar { display: flex; align-items: center; gap: 1rem; padding: .75rem .75rem .75rem 1.1rem; }
.hero__dlg-bar .hero__who b { color: var(--text); font-size: 1rem; }
.hero__dlg-bar .hero__who > span { color: var(--text-2); }
.hero__dlg-bar .ctl { margin-left: auto; }

/* ---------------- Tablet ---------------- */
@media (max-width: 1023px) {
  .js .hero[data-motion] .hero__film { transform: scale(calc(.9 + var(--t, 0) * .1)); }
}

/* ---------------- Handy: Botschaft zuerst, dann Video im Hochformat ---------------- */
@media (max-width: 767px) {
  .hero { padding-top: 6.25rem; }
  .hero__h { max-width: 11em; }
  .hero__l1 { white-space: normal; }
  .hero__lead { font-size: .9375rem; line-height: 1.6; margin-top: 1.1rem; }       /* F K7: mobiler Hero-Lead 15 px */
  .hero__acts { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; margin-top: 1.5rem; gap: .6rem; }
  .hero__acts .btn { justify-content: space-between; }
  .hero__acts .tlink { align-self: center; margin-top: .35rem; }
  .hero__trust { margin-top: 1.4rem; }
  .hero__media { margin-top: 2.25rem; padding-bottom: calc(var(--sec-y) * .75); }
  .hero__film { width: 100%; max-width: 30rem; aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
  .hero__ph { top: .85rem; left: .85rem; }
  .hero__pause { top: .75rem; right: .75rem; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: .85rem; padding: 3rem 1rem 1.1rem; background: linear-gradient(to top, rgba(0, 0, 0, .78) 55%, rgba(0, 0, 0, 0)); }
  .js .hero[data-motion] .hero__film { transform: none; }
}

/* Unter 360 px: „für Unternehmen,“ bleibt zusammen (Review H13) */
@media (max-width: 359px) { .hero__h { font-size: 2.0625rem; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero[data-motion] .hero__film { transform: none; }
}

/* Marcel 30.10.: Tonfassung am Handy im Hochformat 4:5 (fertiger Schnitt) */
.hero__dlg { width: min(100vw - 1.5rem, 26rem, (100svh - 7rem) * 4 / 5); }
.hero__dlg video { aspect-ratio: 4 / 5; }
/* Der fertige Film hat Bauchbinde und Untertitel eingebrannt: kein eigener Namenszug und kein Verlauf darüber, am Handy „Mit Ton ansehen“ oben links */
.hero__foot { background: none; justify-content: flex-end; }
.hero__foot .hero__who { display: none; }
@media (max-width: 767px) { .hero__foot { inset: 0 auto auto 0; padding: .75rem; } }