/* Paket 69/70 (17.10.2026) — Hero als EIN Element (Aykut 16:50: „Bitte das mit dem Video vereinen, es soll wie ein einzelnes Design aussehen“):
   eine Karte, der Erklärfilm (stumm, Schleife, ohne Texte) geht weich in den Text über – am Handy oben → unten, am Desktop rechts → links. */
.hf { position: relative; z-index: 2; padding: 10px var(--gutter) 0; }
.hf-card { position: relative; max-width: 1180px; margin: 0 auto; border-radius: 36px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 100% 0%, rgba(124,58,237,.10), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(37,99,235,.10), transparent 70%), linear-gradient(180deg, #FFFFFF, #F4F5FF);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 90px -40px rgba(30,41,90,.35), 0 0 0 1px rgba(15,23,42,.06);
  display: grid; grid-template-columns: 1fr; }
.hf-media { position: relative; overflow: hidden; background: #F3F4FF; }
.hf-media video, .hf-media .hv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
.hf-media .hv-poster { z-index: 1; transition: opacity .5s ease; }
.hf-media video { z-index: 0; }
.hf.is-playing .hv-poster { opacity: 0; }
.hf-fade { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hf-copy { position: relative; z-index: 3; margin-top: 0 !important; padding: 0 clamp(18px, 4vw, 40px) clamp(26px, 4vw, 40px); }
.hf-copy .kick { margin-top: 0; }
.hf-copy .pill { margin: 18px 0 0; }
.hf-copy .hero-links { margin-top: 14px; }
/* Handy / Tablet: Film oben, läuft nach unten in die Karte aus */
@media (max-width: 899px) {
  .hf-media { aspect-ratio: 1 / 1; }
  .hf-fade { background: linear-gradient(180deg, transparent 55%, #F6F7FF 100%); }
  .hf-copy { margin-top: -64px !important; }
}
/* Desktop: Text links, Film rechts, weicher Übergang von rechts nach links */
@media (min-width: 900px) {
  .hf-card { grid-template-columns: 1fr 1fr; align-items: center; min-height: 580px; }
  .hf-media { grid-column: 2; grid-row: 1; height: 100%; min-height: 560px; }
  .hf-media video, .hf-media .hv-poster { object-position: 60% 40%; }
  .hf-fade { background: linear-gradient(90deg, #F8F8FF 0%, rgba(248,248,255,.85) 14%, rgba(248,248,255,0) 42%), linear-gradient(180deg, rgba(255,255,255,.35), transparent 30%); }
  .hf-copy { grid-column: 1; grid-row: 1; justify-items: start; text-align: left; padding: 48px 0 48px clamp(28px, 4vw, 56px); margin-right: -120px; }
  .hf-copy .lead { margin: 0; }
  .hf-copy .hero-links { justify-content: flex-start; }
  .hero h1 { font-size: clamp(2.8rem, 5.4vw, 5.2rem); }
  .hf-copy .lead { font-size: clamp(1.02rem, 1.3vw, 1.25rem); max-width: 44ch; }
}
@media (min-width: 1300px) { .hf-card { min-height: 600px; } }
@media (prefers-reduced-motion: reduce) { .hf-media video { display: none; } .hf.is-playing .hv-poster { opacity: 1; } }
/* Abschnitt „Foto drauf. Belegerledigt.“: Film ohne Sprecher bis die Tonspur da ist */
.rl-note { margin-top: 10px; }
/* Beta-50 dezent über dem Footer (Aykut 16:48) */
.b50-soft { padding: clamp(40px, 6vw, 72px) 0 0; }
.b50-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; border-radius: 16px; text-decoration: none; color: var(--muted); font: 500 .9rem/1.35 var(--body);
  background: rgba(255,255,255,.6); border: 1px solid rgba(15,23,42,.07); transition: border-color .2s, background .2s; }
.b50-line:hover { border-color: rgba(37,99,235,.35); background: #fff; }
.b50-line i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F97316; box-shadow: 0 0 0 4px rgba(249,115,22,.14); }
.b50-line b { color: var(--text); font-weight: 700; } .b50-line em { font-style: normal; color: var(--text); font-weight: 600; } .b50-line small { color: var(--dim); }
.b50-line .b50-go { margin-left: auto; flex: none; color: var(--blue); font-weight: 600; }
@media (max-width: 600px) { .b50-line { flex-wrap: wrap; } .b50-line .b50-go { margin-left: 32px; } }
/* Dunkelmodus */
[data-theme=dark] .hf-card { background: linear-gradient(180deg, #121A2B, #15132A); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 90px -40px rgba(0,0,0,.6); }
[data-theme=dark] .hf-media { background: #121A2B; }
[data-theme=dark] .b50-line { background: rgba(23,30,46,.7); border-color: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .hf-card { background: linear-gradient(180deg, #121A2B, #15132A); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 90px -40px rgba(0,0,0,.6); }
  :root:not([data-theme=light]) .hf-media { background: #121A2B; }
  :root:not([data-theme=light]) .b50-line { background: rgba(23,30,46,.7); border-color: rgba(255,255,255,.08); }
}
@media (max-width: 899px) { [data-theme=dark] .hf-fade { background: linear-gradient(180deg, transparent 55%, #15132A 100%); } }
@media (min-width: 900px) { [data-theme=dark] .hf-fade { background: linear-gradient(90deg, #121A2B 0%, rgba(18,26,43,.85) 14%, rgba(18,26,43,0) 42%); } }
@media (max-width: 899px) and (prefers-color-scheme: dark) { :root:not([data-theme=light]) .hf-fade { background: linear-gradient(180deg, transparent 55%, #15132A 100%); } }
@media (min-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme=light]) .hf-fade { background: linear-gradient(90deg, #121A2B 0%, rgba(18,26,43,.85) 14%, rgba(18,26,43,0) 42%); } }

/* Paket 71 — „Mit Ton ansehen“ im Hero: Knopf unten rechts im Film; im Ton-Modus wird die Hochkant-Vollfassung ganz gezeigt (nichts abgeschnitten), Verlauf aus. */
.hf-media { pointer-events: none; }
.hf-sound { position: absolute; z-index: 4; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .86rem/1 var(--body, inherit); color: #fff; background: rgba(11,19,32,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.16) inset; transition: transform .2s, background .2s; }
.hf-sound svg { width: 18px; height: 18px; } .hf-sound:hover { transform: translateY(-1px); background: rgba(37,99,235,.9); }
.hf.is-sound .hf-sound { background: #2563EB; }
.hf.is-sound .hf-fade { opacity: 0; }
.hf.is-sound .hf-media video { object-fit: contain; object-position: 50% 50%; background: #EEF1FB; }
.hf.is-sound .hv-poster { opacity: 0; }
@media (max-width: 899px) { .hf.is-sound .hf-media { aspect-ratio: 9 / 16; } .hf.is-sound .hf-copy { margin-top: 10px; } }
@media (min-width: 900px) { .hf.is-sound .hf-media { min-height: 0; aspect-ratio: auto; height: min(82vh, 820px); width: calc(min(82vh, 820px) * 9 / 16); align-self: center; justify-self: center; border-radius: 28px; margin: 16px 0; box-shadow: 0 30px 60px -30px rgba(15,23,42,.35); } }
[data-theme=dark] .hf.is-sound .hf-media video { background: #0F1626; }