/* bumely.com, Hero-Film: Papierflieger und fünf Schritte (Oktober 2026).
   Nur die Startseite lädt diese Datei. Ruhezustand jedes bewegten Teils = Filmzeit 0,
   die Bewegung kommt aus hero-film.js (nur transform und opacity). Maße im Handy in cqw
   (Breite des Bildschirms = 100cqw, Höhe 216,7cqw), wie bei der Ablauf-Szene. */

/* ---------- Anordnung ---------- */
.hf { display: grid; justify-items: center; gap: 18px; width: 100%; }
.hf-buehne { position: relative; width: max-content; max-width: 100%; }
.hero-film { align-self: center; }
/* Bei kurzen Fenstern schrumpft das Handy, damit die Schrittleiste über der Falz bleibt */
@media (min-width: 900px) and (max-height: 880px) { .hero .hf-geraet { --g-breite: clamp(232px, calc((100svh - 236px) / 2.08), 300px); } }
@media (max-width: 760px) { .hero .hf-geraet { --g-breite: 264px; } }
.hero .hf-geraet .film-knopf { width: 38px; height: 38px; right: 18px; bottom: 18px; }
@media (min-width: 900px) and (max-height: 880px) { .hero .hf-geraet .film-knopf { right: 14px; bottom: 14px; } }
.hero .hf-geraet .film-knopf .sym { width: 16px; height: 16px; }
.hero .hf-geraet .film-knopf::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }

/* ---------- Überschrift: Wörter einzeln beweglich, Pille als Geisterform für den Ruck ---------- */
#hero-t.hf-kopf { position: relative; }
.hw { display: inline-block; }
.hf-pille { position: absolute; z-index: -2; opacity: 0; pointer-events: none; }
.hf-ruck-an .marker { background: none; }

/* ---------- Flug ---------- */
.hf-flug { position: absolute; inset: 0; z-index: 6; overflow: clip; pointer-events: none; --fl-b: 124px; }
.hf-flieger { position: absolute; left: 0; top: 0; width: var(--fl-b); aspect-ratio: 160 / 100; opacity: 0; transform-origin: 39% 50%;
  margin: calc(var(--fl-b) * -.3125) 0 0 calc(var(--fl-b) * -.39);
  filter: drop-shadow(0 10px 10px rgba(31,27,58,.26)) drop-shadow(0 1px 1px rgba(31,27,58,.3)); }
.hf-flieger .fl-rand { stroke: #8F7FE0; }
@media (prefers-color-scheme: dark) {
  .hf-flieger { filter: drop-shadow(0 0 16px rgba(182,168,242,.3)) drop-shadow(0 10px 10px rgba(0,0,0,.5)); }
  .hf-flieger .fl-rand { stroke: #E4DEFF; }
}
.hf-flieger svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hf-knall { position: absolute; left: 0; top: 0; width: calc(var(--fl-b) * 1.4); aspect-ratio: 1; margin: calc(var(--fl-b) * -.7) 0 0 calc(var(--fl-b) * -.7); border-radius: 50%; opacity: 0; pointer-events: none;
  border: 3px solid rgba(106,85,216,.85); box-shadow: 0 0 22px rgba(106,85,216,.45), inset 0 0 22px rgba(106,85,216,.3); }
.hf-knallblitz { position: absolute; left: 0; top: 0; width: calc(var(--fl-b) * 1.8); aspect-ratio: 1; margin: calc(var(--fl-b) * -.9) 0 0 calc(var(--fl-b) * -.9); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(182,168,242,.55) 45%, transparent); }
.hf-strich { position: absolute; left: 0; top: 0; width: calc(var(--fl-b) * 1.6); height: 3px; margin: -1.5px 0 0 calc(var(--fl-b) * -1.6); border-radius: 3px; opacity: 0; pointer-events: none; transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, rgba(106,85,216,.85)); }
@media (prefers-color-scheme: dark) { .hf-knall { border-color: rgba(255,255,255,.9); box-shadow: 0 0 24px rgba(182,168,242,.8), inset 0 0 24px rgba(255,255,255,.45); } .hf-strich { background: linear-gradient(90deg, transparent, rgba(255,255,255,.9)); } }
.hf-spurpunkt { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--glut-tief); opacity: 0; }
@media (prefers-color-scheme: dark) { .hf-spurpunkt { background: var(--glut); } }
@media (max-width: 899px) { .hf-flug { --fl-b: 88px; } .hf-spurpunkt { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; } }
@media (prefers-reduced-motion: reduce) { .hf-flug { display: none; } }

/* ---------- Handy: Bildschirm ---------- */
.hf-schirm { background: var(--a-grund); }
@media not (prefers-color-scheme: dark) { .hf-schirm { --a-grund: #FEFEE6; } }
/* Wortmarke bleibt beim Wechsel Start zu Liste an derselben Stelle (kein Doppelbild) */
.hf-schirm .a-start { transform-origin: 6cqw 16cqw; }
.hf-schirm .a-start-bild { margin-top: 26cqw; }
.hf-schirm .wa-pegel, .hf-schirm .wa-clip { transition: none; }

/* Liste (Schritt 1 und am Ende: alles gepostet) */
.hf-ls { inset: 0; padding: 16cqw 6cqw 0; }
.hf-ls .a-marke { margin-bottom: 5cqw; }
.hf-ls .a-titel { margin-bottom: 5cqw; }
.hf-zahl { opacity: 0; transform: scale(.5); font-size: 4.6cqw; padding: 0 3cqw; white-space: nowrap; }
.hf-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4cqw; }
.hf-karte:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 2cqw); justify-self: center; }
.hf-karte { display: block; opacity: 0; transform: translateY(90cqw) scale(.92); will-change: transform, opacity; }
.hf-karte .a-bild { display: block; aspect-ratio: 9 / 16; box-shadow: 0 2cqw 4cqw -2cqw rgba(31,27,58,.4); }
.hf-karte .a-dauer { top: 6cqw; right: 6cqw; padding: 2.4cqw 4.4cqw; font-size: 11.5cqw; }
.hf-ok { position: absolute; left: 7cqw; bottom: 7cqw; width: 26cqw; height: 26cqw; display: grid; place-items: center; border-radius: 50%; background: var(--a-lila); opacity: 0; transform: scale(.3); }
.hf-ok svg { width: 15cqw; height: 15cqw; fill: none; stroke: #1F1B3A; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* Editor (Schritte 2 bis 5) */
.hf-b { inset: 0; opacity: 0; }
.hf-kamera { position: absolute; inset: 0; transform-origin: 50% 50%; }
.hf-kamera > div { position: absolute; }
.hf-falte, .hf-leer { position: absolute; left: 13cqw; top: 22cqw; width: 74cqw; height: 160.4cqw; border-radius: 5cqw; }
.hf-vorschau { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 6.76cqw; }
.hf-vorschau { overflow: hidden; background: #0E0C17; opacity: 0; transform: scale(.9); }
.hf-vorschau video, .hf-stand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-stand { display: none; }
.hf-leer { border: .7cqw dashed rgba(106,85,216,.5); opacity: 0; }

/* Untertitel in der Vorschau: drei Wörter je Zeile, Look wechselt per data-look.
   Schriftgrößen so, dass die längste Zeile (keine Ausbildung, sondern) in jedem Look in die Vorschau passt. */
.hf-ut { position: absolute; inset: 0; pointer-events: none; }
.hero .demo .hf-ut { --probe-gr: 6cqw; }
.hero .demo .hf-ut[data-look="bumely"] { --probe-gr: 7cqw; }
.hero .demo .hf-ut[data-look="kraeftig"] { --probe-gr: 5.6cqw; }
/* Untertitel auf der gefalteten Karte = Untertitel der auf Kartengröße verkleinerten Vorschau (Faktor 0,74) */
.hero .demo .hf-ut.hf-ut-ende[data-look="kraeftig"] { --probe-gr: 4.14cqw; }
.hf-ut-ende .probe-zeile { left: 2.2cqw; right: 2.2cqw; bottom: 50.3cqw; }
.hf-ut .probe-zeile { position: absolute; left: 3cqw; right: 3cqw; bottom: 68cqw; flex-wrap: nowrap; white-space: nowrap; opacity: 0; transition: none; }
.hf-ut .wort { display: block; opacity: 0; transform: translateY(1.5cqw) scale(.8); }
.hf-ut-ende .probe-zeile, .hf-ut-ende .wort { opacity: 1; transform: none; }
.hf-schleier { position: absolute; inset: 0; background: rgba(20,18,31,.5); opacity: 0; }
.hf-lader { position: absolute; left: 50%; top: 50%; width: 70cqw; margin: -30cqw 0 0 -35cqw; opacity: 0; transform: scale(.88); }
.hf-lader .wa-kachel { margin: 0; padding: 3.4cqw 4cqw 2.4cqw; border: .35cqw solid rgba(255,255,255,.5); background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); box-shadow: inset 0 .5cqw .8cqw rgba(255,255,255,.7), 0 4cqw 10cqw -3cqw rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) { .hf-lader .wa-kachel { background: linear-gradient(160deg, rgba(60,54,96,.62), rgba(30,27,50,.42)); border-color: rgba(255,255,255,.3); box-shadow: inset 0 .5cqw .8cqw rgba(255,255,255,.28), 0 4cqw 10cqw -3cqw rgba(0,0,0,.6); } }
.hf-fertigin { text-align: center; padding-top: 1.2cqw; font: 600 4.6cqw/1.2 var(--ui); color: var(--tinte-2); }
.hf-check { position: absolute; left: 50%; top: 50%; width: 24cqw; height: 24cqw; margin: -12cqw 0 0 -12cqw; display: grid; place-items: center; border-radius: 50%;
  background: var(--a-lila); box-shadow: 0 2cqw 6cqw -1cqw rgba(106,85,216,.6); opacity: 0; transform: scale(.4); }
.hf-check svg { width: 13cqw; height: 13cqw; fill: none; stroke: #1F1B3A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Falten in vier Stufen: Karte, eine Ecke, beide Ecken (Haus), Dreieck. Nur Beschnitt (fest), bewegt wird transform und opacity. */
.hf-falte { opacity: 0; pointer-events: none; will-change: transform, opacity; }
.hf-f0, .hf-f1, .hf-f2, .hf-f3 { position: absolute; inset: 0; }
.hf-f0 { overflow: hidden; border-radius: 5cqw; box-shadow: 0 2.6cqw 6cqw -2cqw rgba(31,27,58,.5); }
.hf-f1, .hf-f2, .hf-f3 { opacity: 0; }
.hf-f0 img, .hf-f1 img, .hf-f2 img, .hf-f3 img { width: 100%; height: 100%; object-fit: cover; }
.hf-f1 { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 28%); }
.hf-f2 { clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%); }
/* Umriss des Fliegers (Nase oben, Flügel unten), damit die Überblendung in den Flieger deckungsgleich ist */
.hf-f3 { clip-path: polygon(50% 0, 0 100%, 57.4% 88.9%, 100% 93.75%); }
.hf-klappe { position: absolute; inset: 0; background: linear-gradient(150deg, #FFFFFF, #DDD5FA); }
.hf-kl { clip-path: polygon(0 28%, 50% 0, 50% 28%); }
.hf-kr { clip-path: polygon(100% 28%, 50% 0, 50% 28%); background: linear-gradient(210deg, #FFFFFF, #CFC5F7); }
.hf-f1::after, .hf-f2::after, .hf-f3::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.hf-f1::after, .hf-f2::after { background: linear-gradient(180deg, rgba(182,168,242,.12), rgba(182,168,242,.3)); }
.hf-f3::after { background: linear-gradient(90deg, rgba(255,255,255,.3) 0 49.5%, rgba(255,255,255,.75) 49.5% 50.5%, rgba(106,85,216,.38) 50.5% 100%), linear-gradient(180deg, rgba(182,168,242,.2), rgba(182,168,242,.4)); }

/* Tonspur: großes Zoomfenster mit Text, Wellenform und Schere (Schritt 2) */
.hf-spur { position: absolute; left: 6.5cqw; right: 6.5cqw; top: 104cqw; padding: 4.6cqw 3.8cqw 4.2cqw; border-radius: 6cqw; opacity: 0; transform-origin: 50% 100%;
  z-index: 3; overflow: hidden; --a-text: #fff; --a-text-2: rgba(255,255,255,.8); --a-lila-text: #DCD3FF; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.05) 40%, rgba(182,168,242,.12)), rgba(20,18,31,.38);
  -webkit-backdrop-filter: blur(20px) saturate(1.9); backdrop-filter: blur(20px) saturate(1.9);
  border: .35cqw solid rgba(255,255,255,.42);
  box-shadow: inset 0 .5cqw .8cqw rgba(255,255,255,.55), inset 0 -.8cqw 2cqw rgba(255,255,255,.12), inset 0 0 6cqw rgba(182,168,242,.22), 0 5cqw 12cqw -4cqw rgba(0,0,0,.6); }
.hf-spur > *:not(.hf-glanz) { position: relative; }
.hf-spur .hf-zeit, .hf-spur .hf-skript { text-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.35); }
/* wandernder Lichtstreifen auf dem Glas (nur transform) */
.hf-glanz { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.hf-glanz i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.42) 48%, rgba(255,255,255,.08) 60%, transparent); transform: translateX(-120cqw); }
.hf-spur-kopf { display: flex; justify-content: space-between; align-items: center; height: 10cqw; margin: 0 0 3cqw; }
.hf-cap { position: relative; display: block; flex: 1; height: 6cqw; font: 650 4.6cqw/6cqw var(--ui); overflow: hidden; color: var(--a-text-2); white-space: nowrap; }
.hf-cap > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 1.4cqw; opacity: 0; }
.hf-cap-d { color: var(--a-lila-text); }
.hf-cap-d svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.hf-zeit { font: 700 9.6cqw/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--a-text); }
.hf-zeit.ok { color: var(--a-lila-text); }
.hf-skript { margin: 0 0 4cqw; font: 600 5.7cqw/1.62 var(--ui); color: var(--a-text); min-height: 18.4cqw; }
.hf-tw { display: inline-block; padding: 0 1.3cqw; border-radius: 1.7cqw; opacity: 0; }
.hf-tw.an { background: var(--a-lila); color: #1F1B3A; }
.hf-wellen { position: relative; display: flex; align-items: center; height: 38cqw; }
.hf-seg, .hf-pause { position: relative; display: flex; align-items: center; gap: .42cqw; height: 100%; margin-right: .42cqw; flex: none; will-change: transform; }
.hf-seg i, .hf-pause i { display: block; flex: none; width: .94cqw; height: calc(var(--h) * 34cqw); border-radius: .6cqw; background: var(--a-text); opacity: .78; }
.hf-pause i { opacity: .5; }
.hf-schraffur { position: absolute; inset: -1.2cqw -1.2cqw; border-radius: 1.8cqw; opacity: 0; border: .4cqw solid var(--a-lila-text);
  background: repeating-linear-gradient(135deg, rgba(182,168,242,.98) 0 .8cqw, rgba(182,168,242,.34) .8cqw 1.6cqw); }
.hf-schnitt { position: absolute; left: 50%; top: -3cqw; bottom: -3cqw; width: .7cqw; margin-left: -.35cqw; border-radius: .4cqw; background: #fff; box-shadow: 0 0 3cqw rgba(255,255,255,.9); opacity: 0; }
.hf-kopf-spur { position: absolute; left: 0; top: -1.6cqw; bottom: -1.6cqw; width: .7cqw; margin-left: -.35cqw; border-radius: .4cqw; background: var(--a-lila-text); opacity: 0; }
.hf-schere { position: absolute; left: 0; top: 0; z-index: 2; width: 24cqw; height: 24cqw; margin: -12cqw 0 0 -12cqw; opacity: 0; pointer-events: none; filter: drop-shadow(0 1.4cqw 1.6cqw rgba(31,27,58,.35)); }
.hf-schere svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--a-text); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 50%; }
.hf-schere circle { fill: var(--a-lila); }

/* Mauszeiger und Klick (Schritte 1 und 3) */
.hf-maus { position: absolute; left: 0; top: 0; z-index: 9; width: 9cqw; height: 9cqw; opacity: 0; pointer-events: none; transform-origin: 18% 12%; filter: drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.4)); }
.hf-maus svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: #1F1B3A; stroke-width: 1.6; stroke-linejoin: round; }
.hf-klick { position: absolute; left: 0; top: 0; z-index: 8; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border-radius: 50%; border: 1.4cqw solid #fff; box-shadow: 0 0 0 .5cqw rgba(31,27,58,.35); opacity: 0; pointer-events: none; }

/* Looks: drei runde Glasblasen (Liquid Glass), darunter der Name */
.hf-looks-halter { --lk-d: 21cqw; --lk-p: 27cqw; position: absolute; left: calc(50% - var(--lk-p) * 1.5); top: 158cqw; width: calc(var(--lk-p) * 3); opacity: 0; }
.hf-looks { display: grid; grid-template-columns: repeat(3, var(--lk-p)); }
.hf-look { display: grid; justify-items: center; gap: 2.2cqw; min-width: 0; color: #fff; opacity: 0; }
.hf-blase { position: relative; display: grid; place-items: center; width: var(--lk-d); height: var(--lk-d); border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.5), rgba(255,255,255,.1) 36%, rgba(255,255,255,0) 58%), radial-gradient(circle at 72% 88%, rgba(182,168,242,.38), rgba(182,168,242,0) 62%), rgba(20,18,31,.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.9); backdrop-filter: blur(10px) saturate(1.9); border: .3cqw solid rgba(255,255,255,.5);
  box-shadow: inset 0 .7cqw 1cqw rgba(255,255,255,.62), inset 0 -1.3cqw 2.4cqw rgba(182,168,242,.32), inset 0 0 3cqw rgba(255,255,255,.12), 0 2.6cqw 5cqw -1.6cqw rgba(0,0,0,.55); }
.hf-blase::before { content: ''; position: absolute; left: 20%; top: 9%; width: 38%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
.hf-blase .hf-glanz { z-index: 2; }
.hf-blase .hf-glanz i { width: 40%; transform: translateX(-30cqw); }
.hf-aa { position: relative; font: 400 8cqw/1 var(--display); padding: .7cqw 1.7cqw; border-radius: 1.8cqw; text-shadow: 0 .3cqw 1cqw rgba(0,0,0,.35); }
.hf-lname { font: 600 3.9cqw/1 var(--ui); white-space: nowrap; text-shadow: 0 .2cqw 1cqw rgba(0,0,0,.6), 0 0 .4cqw rgba(0,0,0,.4); }
.hf-look[data-look="schlicht"] .hf-aa { font: 700 7.8cqw/1 var(--titel); }
.schriften-an .hf-look[data-look="schlicht"] .hf-aa { font-family: 'Syne', var(--titel); }
.hf-look[data-look="bumely"] .hf-aa { background: #FDFDA2; color: #1F1B3A; text-shadow: none; }
.hf-look[data-look="kraeftig"] .hf-aa { background: linear-gradient(90deg, #FF1F4B, #FF4FB3); font: 700 7.4cqw/1 var(--titel); }
.schriften-an .hf-look[data-look="kraeftig"] .hf-aa { font-family: 'Archivo Black', var(--titel); font-weight: 400; }
.hf-ring { position: absolute; left: calc((var(--lk-p) - var(--lk-d)) / 2 - 1.5cqw); top: -1.5cqw; width: calc(var(--lk-d) + 3cqw); height: calc(var(--lk-d) + 3cqw); border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 .8cqw var(--a-lila), 0 0 0 1.7cqw rgba(182,168,242,.38), 0 0 4cqw rgba(182,168,242,.6); }

.hf-blitz { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; transform: scale(.7);
  background: radial-gradient(closest-side at 50% 42%, rgba(255,255,255,.7), rgba(182,168,242,.38) 52%, transparent); }

/* ---------- Plattform-Karten: neben dem Handy (ab 1100 px), darunter bei schmalen Fenstern ---------- */
.hf-karten { position: absolute; left: calc(100% - 24px); bottom: 70px; z-index: 5; display: grid; gap: 14px; width: 188px; pointer-events: none; }
.hf-pk { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 20px; opacity: 0; transform: scale(.6) translateY(16px); transform-origin: 0 50%; }
.hf-pk.glas { background-image: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 55%, rgba(182,168,242,.16)); box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 6px rgba(255,255,255,.12), 0 14px 30px -12px rgba(31,27,58,.45); }
.hf-pk.glas:not(.hf-an) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.hf-pk img { width: 44px; height: 44px; flex: none; border-radius: 12px; }
@media (prefers-color-scheme: dark) { .hf-pk img { box-shadow: 0 0 0 1px rgba(255,255,255,.16); } }
.hf-pk-t { display: grid; gap: 3px; min-width: 0; }
.hf-pk-t b { font: 650 15px/1.1 var(--ui); letter-spacing: -.01em; }
.hf-pk-ok { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1.2 var(--ui); color: var(--gut); white-space: nowrap; }
.hf-haken { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.3); }
@media (min-width: 1100px) and (max-width: 1379px) {
  .hf-karten { left: calc(100% - 44px); width: 130px; gap: 12px; }
  .hf-pk { gap: 8px; padding: 8px 8px 8px 8px; border-radius: 17px; }
  .hf-pk img { width: 34px; height: 34px; border-radius: 10px; }
  .hf-pk-t b { font-size: 13px; }
  .hf-pk-ok { font-size: 11.5px; gap: 4px; }
  .hf-haken { width: 13px; height: 13px; }
}

/* kurze Fenster: das Handy schrumpft, die Karten werden mit kleiner */
@media (min-width: 1100px) and (max-height: 800px) {
  .hf-karten { gap: 9px; }
  .hf-pk { padding-block: 6px; }
  .hf-pk img { width: 36px; height: 36px; }
}
@media (min-width: 1100px) and (max-width: 1379px) and (max-height: 800px) {
  .hf-pk img { width: 30px; height: 30px; }
}

/* ---------- Schrittleiste: fünf Punkte, ein Anzeiger gleitet unter den aktiven (nur transform) ---------- */
.hf-leiste { position: relative; width: min(100%, 460px); }
.hf-schritte { display: flex; justify-content: center; gap: 2px; }
.hf-schritte li { flex: 1 1 0; min-width: 0; }
.hf-schritt { width: 100%; display: grid; justify-items: center; align-content: start; gap: 9px; min-height: 52px; padding: 11px 2px 6px; background: none; border: 0; border-radius: 12px;
  font: 600 12.5px/1.2 var(--ui); text-align: center; text-wrap: balance; overflow-wrap: anywhere; color: var(--tinte-2); cursor: pointer; }
.hf-nowrap { white-space: nowrap; }
.hf-punkt { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--k-tinte), .26); }
.hf-schritt[aria-current="step"] { color: var(--tinte); }
.hf-schritt[aria-current="step"] .hf-punkt { opacity: 0; }
.hf-anzeiger { position: absolute; left: calc(10% - 15px); top: 11px; width: 30px; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(var(--k-glut), .26);
  transform: translateX(var(--ax, 0px)); transition: transform .4s var(--feder); pointer-events: none; }
.hf-anzeiger i { position: absolute; inset: 0; background: var(--glut-tief); transform-origin: 0 50%; transform: scaleX(0); }
@media (hover: hover) { .hf-schritt:hover { color: var(--tinte); } }
@media (prefers-reduced-motion: reduce) { .hf-anzeiger { transition: none; } }
html:not(.js) .hf-leiste { display: none; }

/* ---------- Schmal (bis 1099 px): Karten unter Handy und Schrittleiste ---------- */
@media (max-width: 1099px) {
  .hf-buehne { display: contents; }
  .hf-leiste { order: 2; }
  .hf-karten { order: 3; position: static; width: min(358px, 100%); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hf-pk { flex-direction: column; text-align: center; gap: 8px; padding: 12px 6px 10px; transform-origin: 50% 100%; }
  .hf-pk-t { justify-items: center; }
  .hf-pk img { width: 36px; height: 36px; border-radius: 10px; }
  .hf-pk-ok { font-size: 11.5px; }
  .hf-schritt { font-size: 11.5px; }
}
@media (max-width: 420px) { .hf-schritt { font-size: 11px; padding-inline: 0; } }
@media (max-width: 360px) { .hf-schritt { font-size: 10px; } .hf-leiste { width: calc(100% + 16px); margin-inline: -8px; } }

/* Beschriftungen im Handy etwas größer als in der App (der Bildschirm ist hier nur 250 bis 280 px breit) */
.hf-schirm .a-start-text { font-size: 4.1cqw; }

/* Fokusring der Schritte innen, damit er den Nachbarn nicht überdeckt */
.hf-schritt:focus-visible { outline-offset: -3px; }

/* ---------- Pause: auch die Wellen der Ladeanimation stehen ---------- */
.hf-halt .wa-welle { animation-play-state: paused; }

/* ---------- Reduzierte Bewegung: Standbild je Schritt, kurze Überblendung statt Flug (hero-film.js, Web Animations) ---------- */
.hf-ruhig .hf-maus, .hf-ruhig .hf-klick, .hf-ruhig .hf-schere { display: none; }
.hf-ruhig .hf-vorschau video { display: none; }
.hf-ruhig .hf-stand { display: block; }
@media (prefers-reduced-motion: reduce) { .film-knopf[data-hf-pause] { display: none; } }