/* yourpage24 – Hero-Film "Von der Idee zur Seite" (139 Bilder, laufen beim Scrollen) */
.hero-track { position: relative; }
.hero-film-wrap { position: relative; }
.hero-film { position: relative; overflow: hidden; background: #02090d; }
.hero-film .hf-poster, .hero-film .hf-poster img, .hero-film .hf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-film .hf-canvas { opacity: 0; transition: opacity 400ms ease; }
.hero-film.is-ready .hf-canvas { opacity: 1; }
.hf-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,18,26,.92) 0%, rgba(3,18,26,.72) 34%, rgba(3,18,26,0) 62%), linear-gradient(180deg, rgba(3,18,26,.55), transparent 22%, transparent 78%, rgba(3,18,26,.7)); }
.hf-hud { list-style: none; margin: 0; padding: 0; position: absolute; right: var(--pad); bottom: 34px; z-index: 3; display: flex; gap: 22px;
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.hf-hud li { display: flex; gap: 8px; opacity: .45; transition: opacity 300ms ease, color 300ms ease; }
.hf-hud li i { font-style: normal; color: var(--ice); }
.hf-hud li.on { opacity: 1; color: var(--ink); }
.hf-hint { position: absolute; left: 50%; bottom: 30px; z-index: 3; margin: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 400 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--text); transition: opacity 300ms ease; }
.hf-hint span { width: 1px; height: 28px; background: linear-gradient(var(--ice), transparent); }
.hero-film.moved .hf-hint { opacity: 0; }
.hf-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(233,251,255,.1); z-index: 3; }
.hf-bar b { display: block; height: 100%; background: var(--ice); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px var(--glow); }

/* Desktop: Text liegt über dem festgepinnten Film */
@media (min-width: 901px) and (orientation: landscape) {
  .hero-track { height: calc(100svh + 260vh); }
  .hero-film-wrap { position: absolute; inset: 0; }
  .hero-film { position: sticky; top: 0; height: 100svh; }
  .hero { position: sticky; top: 0; z-index: 2; height: 100svh; min-height: 0; display: flex; align-items: center; margin-bottom: -100svh; }
  .hero .hero-fx { opacity: var(--hf-fade, 1); inset: 90px 0 20px 38%; }
  .hero-track.text-weg .hero { pointer-events: none; }
  .hero .hero-copy { max-width: min(640px, 54vw); pointer-events: auto; }
  .hero::before { display: none; }
  .hero .h1 { font-size: clamp(44px, 5.4vw, 80px); }
  .hero .checks { margin: 22px 0 28px; gap: 9px; }
  .hero-lead { margin-top: 18px; }
  .hero-index { margin-top: 20px; }
  .hero .hero-copy { opacity: var(--hf-fade, 1); transform: translateY(calc((1 - var(--hf-fade, 1)) * -24px)); will-change: opacity, transform; }
  .hero-track.text-weg .hero .hero-copy { visibility: hidden; pointer-events: none; }
  .hf-shade { opacity: var(--hf-fade, 1); }
  .hero-track.is-static .hero .hero-copy { opacity: 1; transform: none; }
  .hero .hero-phone { position: absolute; right: max(20px, 2.5vw); top: 57%; transform: translateY(-50%); opacity: var(--hf-fade, 1); pointer-events: auto; }
  .hero .hero-phone .phone { width: clamp(200px, 17vw, 260px); }
  .hero-track.text-weg .hero .hero-phone { visibility: hidden; }
  .hero-track.is-static { height: auto; }
}
/* Handy & Hochformat: erst Text, dann der Film mit eigener Scroll-Strecke */
@media (max-width: 900px), (orientation: portrait) {
  .hero-film-wrap { height: calc(100svh + 140svh); }
  .hero-film { position: sticky; top: 64px; height: calc(100svh - 76px); border-radius: 18px; margin: 0 12px; }
  .hf-shade { background: linear-gradient(180deg, rgba(3,18,26,.4), transparent 20%, transparent 50%, rgba(3,18,26,.9) 88%); }
  .hf-hud { left: 18px; right: 18px; justify-content: space-between; top: 18px; bottom: auto; gap: 8px; font-size: 11px; }
  .hf-hint { display: none; }
}
/* Ruhige Variante: ein Standbild, kein Pinning */
.hero-track.is-static .hero-film-wrap { height: auto; }
.hero-track.is-static .hero-film { position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; margin: 0 auto; max-width: var(--max); }
.hero-track.is-static .hf-hud, .hero-track.is-static .hf-hint, .hero-track.is-static .hf-bar { display: none; }
@media (max-width: 900px), (orientation: portrait) { .hero-track.is-static .hero-film { aspect-ratio: 9 / 16; max-height: 80svh; }}

/* Kapitel-Texte im Film */
.hf-caps { position: absolute; z-index: 3; left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); top: 50%; width: min(420px, 38vw); transform: translateY(-50%); pointer-events: none; }
.hf-cap { position: absolute; left: 0; right: 0; top: 50%; margin: 0; display: grid; gap: 14px; justify-items: start; opacity: 0; transform: translateY(calc(-50% + 18px)); transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out); }
.hf-cap.on { opacity: 1; transform: translateY(-50%); }
.hf-cap i { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.hf-cap b { font: 400 clamp(30px, 3.4vw, 50px)/1.1 "DM Sans", sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.hf-cap .hf-body { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: #b9d6d8; text-wrap: balance; }
.hero-track.is-static .hf-caps { display: none; }
@media (max-width: 900px), (orientation: portrait) {
  .hf-caps { left: 24px; right: 24px; width: auto; top: auto; bottom: 64px; height: 150px; transform: none; }
  .hf-cap { top: auto; bottom: 0; transform: translateY(18px); }
  .hf-cap.on { transform: none; }
  .hf-cap b { font-size: 28px; }
  .hf-cap .hf-body { font-size: 15px; }
}

/* Ghostwriter: Buchstaben glühen beim Schreiben kurz auf */
.hf-sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.hf-cap b { min-height: 2.2em; }
.gw-c { opacity: 0; }
.gw-c.on { opacity: 1; animation: gw-burn 1100ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes gw-burn {
  0% { color: #ffffff; text-shadow: 0 0 6px #fff, 0 0 18px var(--ice), 0 0 34px var(--ice); }
  100% { color: var(--ink); text-shadow: 0 0 0 rgba(34,227,214,0); }
}
.gw-caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -0.08em; background: var(--ice); box-shadow: 0 0 10px var(--ice); animation: gw-blink .9s steps(1) infinite; }
@keyframes gw-blink { 50% { opacity: 0; } }
.hf-cap .hf-body, .hf-cap .hf-next, .hf-cap .hf-btn { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.hf-cap.done span, .hf-cap.done .hf-next, .hf-cap.done .hf-btn { opacity: 1; transform: none; }
.hf-cap.done .hf-next { transition-delay: 350ms; }
.hf-cap.done .hf-btn { transition-delay: 250ms; }
.hf-next { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.hero-track.text-weg .hf-cap.on .hf-btn { pointer-events: auto; }
.hf-btn { margin-top: 6px; }
@media (max-width: 900px), (orientation: portrait) {
  .hf-cap b { min-height: 0; }
  .hf-cap { gap: 10px; }
  .hf-next { display: none; }
  .hf-cap .hf-btn { pointer-events: auto; }
}

/* Appell in Kapitel 1 */
.hf-appeal { font-weight: 500; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; color: var(--ice); text-shadow: 0 0 18px rgba(34,227,214,.35); opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out) 300ms, transform 700ms var(--ease-out) 300ms; }
.hf-cap.done .hf-appeal { opacity: 1; transform: none; }
.hf-cap.done .hf-next { transition-delay: 700ms; }
@media (max-width: 900px), (orientation: portrait) { .hf-appeal { font-size: 16px; } }

/* Handy mit echten Beispielseiten: nur am Desktop, am Handy übernimmt der Film */
@media (max-width: 900px), (orientation: portrait) { .hero .hero-phone { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .chip--a { animation: hf-float 2.4s ease-in-out infinite alternate; }
  .hero .chip--b { animation: hf-float 2.8s ease-in-out infinite alternate-reverse; }
}
@keyframes hf-float { from { translate: 0 -6px; } to { translate: 0 6px; } }
/* Niedrige Bildschirme (z. B. Laptop 1280x720): alles passt in den ersten Bildschirm */
@media (min-width: 901px) and (orientation: landscape) and (max-height: 820px) {
  .hero { padding-top: 76px; padding-bottom: 20px; }
  .hero .h1 { font-size: min(5.2vw, 8.6vh); }
  .hero-lead { font-size: clamp(18px, 2.8vh, 24px); margin-top: 12px; }
  .hero .checks { margin: 14px 0 18px; gap: 6px; font-size: 15px; }
  .hero .btn--big { padding-top: 12px; padding-bottom: 12px; }
  .hero-note { margin-top: 10px; }
  .hero-index { margin-top: 12px; gap: 6px 8px; font-size: 13px; }
  .hero-index a { padding: 4px 10px; }
  .hf-hint { display: none; }
  .hero .hero-phone .phone { width: min(17vw, 34vh); }
}