/*
 * K-MKT-24 — Startseite, Abschnitt „So läuft's“: ein Handy zeigt Reel → Kommentar → DM → Landingpage → Mail → Newsletter.
 * Rechner: Schritte links, Handy rechts sticky, der Bildschirm wechselt beim Scrollen.
 * Handy (< 900 px): Handy oben, darunter eine Schrittkarte mit Zurück/Weiter.
 * Reel-Modus: dieselben Bildschirme im Hochformat 9:16, auch direkt über /?reel=1 (zum Aufnehmen in 1080 × 1920).
 * Alle Klassen mit Präfix hs-, damit nichts mit style.css kollidiert (dort gibt es u. a. .step, .tag, .label).
 * Bewusst KEIN overflow:hidden am Abschnitt (wie .section) — das würde das sticky Handy abschalten; nur overflow:clip.
 * Farben/Schriften aus style.css (--pink-*, --dark-*, --font-h, --font-b, --mono); die Bildschirme haben eigene Farben.
 */
.hs {
  --hs-line: rgba(255,255,255,0.08);
  --hs-fg2: var(--t-w3, #a1a1aa);
  --hs-fg3: var(--t-w4, #71717a);
  --hs-pink: var(--pink-500, #e91e63);
  --hs-pink-soft: var(--pink-300, #f06292);
  --hs-ig-bg: #000;
  --hs-ig-fg: #f5f5f5;
  --hs-ig-mute: #a8a8a8;
  --hs-ig-bubble: #262626;
  --hs-ig-blue: #4f5bd5;
  --hs-page-bg: #f6f1ec;
  --hs-page-ink: #2b2420;
  --hs-page-acc: #b4553a;
  --hs-mail-ink: #1c1c1e;
  --hs-mail-mute: #6b6b70;
  --hs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  padding: 96px 0 56px;
  background: var(--dark-0, #050506);
  color: var(--t-w, #fff);
  overflow: clip;
}
.hs::before { content: ""; position: absolute; top: -10%; right: -10%; width: 520px; height: 520px; max-width: 90vw; background: radial-gradient(closest-side, rgba(233,30,99,0.16), transparent); pointer-events: none; }
.hs :focus-visible { outline: 2px solid var(--hs-pink-soft); outline-offset: 3px; border-radius: 6px; }

.hs-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 680px; position: relative; }
.hs-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-pink-soft); }
.hs-kopf h2 { font-size: clamp(26px, 8vw, 48px); overflow-wrap: anywhere; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.hs-kopf h2 span { color: var(--hs-pink); }
.hs-kopf p { color: var(--hs-fg2); font-size: 18px; max-width: 56ch; }
.hs-reel-knopf { justify-self: start; display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--hs-line); background: var(--dark-3, #19191f); color: #fff; font-weight: 600; font-size: 15px; transition: border-color .2s; }
.hs-reel-knopf:hover { border-color: var(--hs-pink); }
.hs-reel-knopf svg { width: 18px; height: 18px; }

.hs-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; margin-top: 56px; position: relative; }
.hs-schritte { display: grid; }
.hs-schritt { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 0 24px 28px; border-left: 2px solid var(--hs-line); opacity: .42; transition: opacity .4s var(--hs-ease), border-color .4s; cursor: pointer; }
.hs-schritt:first-child { min-height: 52vh; justify-content: flex-start; padding-top: 8px; }
.hs-schritt.is-active { opacity: 1; border-left-color: var(--hs-pink); }
.hs-nr { font-family: var(--mono); font-size: 12px; color: var(--hs-fg3); letter-spacing: 0.08em; }
.hs-nr b { color: var(--hs-pink-soft); font-weight: 500; }
.hs-schritt h3, .hs-karte h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.hs-schritt p { color: var(--hs-fg2); max-width: 46ch; }
.hs-modul { display: inline-flex; align-self: flex-start; justify-self: start; align-items: center; gap: 8px; font-size: 13px; background: var(--dark-3, #19191f); border: 1px solid var(--hs-line); border-radius: 8px; padding: 4px 10px; }
.hs-modul::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hs-pink); }

.hs-spalte { position: relative; }
.hs-sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: grid; justify-items: center; gap: 18px; }
.hs-punkte { display: flex; gap: 8px; }
.hs-punkt { width: 32px; height: 4px; border-radius: 4px; background: var(--hs-line); padding: 0; transition: background .3s; position: relative; }
.hs-punkt::after { content: ""; position: absolute; inset: -10px -2px; } /* größere Trefferfläche */
.hs-punkt.is-active { background: var(--hs-pink); }

/* Handy */
.hs-handy { --w: 300px; width: var(--w); height: calc(var(--w) * 2.07); border-radius: 46px; background: #0c0c0f; padding: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 30px 80px -20px rgba(233,30,99,0.28), 0 20px 50px rgba(0,0,0,0.6); position: relative; flex: none; }
.hs-handy::after { content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 92px; height: 26px; border-radius: 20px; background: #000; z-index: 5; }
.hs-box { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--hs-ig-bg); }
.hs-bs { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s var(--hs-ease), visibility 0s .45s; font-size: 13px; line-height: 1.45; text-align: left; }
.hs-bs.is-active { opacity: 1; visibility: visible; transition: opacity .45s var(--hs-ease), visibility 0s; }
.hs-bs h4, .hs-bs h5 { letter-spacing: -0.01em; line-height: 1.15; }
.hs-status { display: flex; justify-content: space-between; padding: 14px 26px 6px; font-size: 12px; font-weight: 600; flex: none; position: relative; z-index: 1; }
.hs-bs.is-active .hs-a { animation: hs-auf .55s var(--hs-ease) both; animation-delay: var(--d, 0s); }
@keyframes hs-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hs-ava { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--hs-page-acc), #e0a46a); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; }

/* 1 Reel */
.hs-s-reel { color: var(--hs-ig-fg); }
.hs-video { position: absolute; inset: 0; background:
  radial-gradient(120% 70% at 30% 20%, #6d3b2c 0%, transparent 60%),
  radial-gradient(90% 60% at 80% 85%, #2c3f4f 0%, transparent 60%),
  linear-gradient(170deg, #3a2a24, #121619); animation: hs-kamera 9s ease-in-out infinite alternate; }
@keyframes hs-kamera { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-2%, 1%); } }
.hs-lauf { margin: 2px 16px 0; height: 2px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; position: relative; z-index: 1; }
.hs-lauf i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; animation: hs-balken 6s linear infinite; }
@keyframes hs-balken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hs-reel-oben { padding: 12px 16px; font-weight: 700; font-size: 16px; position: relative; z-index: 1; }
.hs-hook { position: absolute; z-index: 1; top: 34%; left: 18px; right: 64px; font-family: var(--font-h); font-weight: 700; font-size: 22px; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hs-hook small { display: block; font-family: var(--font-b); font-weight: 500; font-size: 13px; margin-top: 8px; opacity: .9; }
.hs-seite { position: absolute; z-index: 1; right: 10px; bottom: 120px; display: grid; gap: 16px; justify-items: center; font-size: 11px; }
.hs-seite svg { width: 26px; height: 26px; }
.hs-seite span { display: grid; justify-items: center; gap: 2px; }
.hs-reel-unten { position: absolute; z-index: 1; left: 14px; right: 60px; bottom: 26px; display: grid; gap: 6px; }
.hs-konto { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hs-folgen { border: 1px solid rgba(255,255,255,.6); border-radius: 7px; padding: 1px 8px; font-size: 11px; }
.hs-caption { font-size: 12.5px; line-height: 1.4; }

/* 2 Kommentare */
.hs-s-komm { color: var(--hs-ig-fg); }
.hs-s-komm .hs-video { filter: brightness(.45); }
.hs-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 30%; background: #1a1a1a; border-radius: 18px 18px 0 0; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.hs-griff { width: 36px; height: 4px; border-radius: 4px; background: #555; margin: 0 auto 2px; }
.hs-sheet h4 { text-align: center; font-size: 13px; font-weight: 600; font-family: var(--font-b); }
.hs-kom { display: flex; gap: 10px; align-items: flex-start; }
.hs-kom .hs-ava { width: 26px; height: 26px; font-size: 10px; }
.hs-kom .hs-a2 { background: linear-gradient(135deg, #7b6cf6, #b993ff); }
.hs-kom .hs-a3 { background: linear-gradient(135deg, #2bb3a3, #8fe3c9); }
.hs-kom > div { min-width: 0; }
.hs-kom strong { font-size: 12px; font-weight: 600; }
.hs-kom strong em { font-style: normal; color: var(--hs-ig-mute); font-weight: 400; margin-left: 4px; }
.hs-kom p { font-size: 13px; }
.hs-kom.hs-antwort { margin-left: 36px; }
.hs-auto { display: inline-block; margin-top: 4px; font-size: 10px; color: var(--hs-pink-soft); font-family: var(--mono); letter-spacing: .04em; }
.hs-eingabe { margin-top: auto; border: 1px solid #333; border-radius: 20px; padding: 8px 12px; color: var(--hs-ig-mute); font-size: 12px; }

/* 3 DM */
.hs-s-dm { background: var(--hs-ig-bg); color: var(--hs-ig-fg); }
.hs-dm-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid #1f1f1f; }
.hs-dm-kopf b { font-size: 14px; display: block; }
.hs-dm-kopf small { color: var(--hs-ig-mute); font-size: 11px; }
.hs-dm { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; }
.hs-zeit { text-align: center; color: var(--hs-ig-mute); font-size: 11px; margin-bottom: 4px; }
.hs-bub { max-width: 82%; padding: 9px 13px; border-radius: 20px; font-size: 13.5px; line-height: 1.38; }
.hs-bub.hs-in { background: var(--hs-ig-bubble); align-self: flex-start; border-bottom-left-radius: 6px; }
.hs-bub.hs-out { background: var(--hs-ig-blue); align-self: flex-end; border-bottom-right-radius: 6px; }
.hs-dm-knopf { align-self: flex-start; display: block; margin-top: 2px; background: #fff; color: #111; border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 13px; }
.hs-tippt { align-self: flex-start; background: var(--hs-ig-bubble); border-radius: 18px; padding: 10px 12px; display: flex; gap: 4px; }
.hs-tippt i { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; animation: hs-tippen 1s infinite; }
.hs-tippt i:nth-child(2) { animation-delay: .15s; } .hs-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes hs-tippen { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.hs-s-dm.is-active .hs-tippt { animation: hs-weg .3s 1.1s both; }
@keyframes hs-weg { to { opacity: 0; height: 0; padding: 0; margin: -4px 0; } }

/* 4 Landingpage */
.hs-s-lp { background: var(--hs-page-bg); color: var(--hs-page-ink); }
.hs-url { margin: 2px 14px 0; background: rgba(43,36,32,.07); border-radius: 10px; padding: 6px 10px; font-size: 11px; color: #6d625b; text-align: center; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-lp { flex: 1; overflow: hidden; padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.hs-lp-bild { height: 112px; border-radius: 14px; flex: none; background:
  radial-gradient(80% 90% at 70% 40%, #e8b48f 0%, transparent 65%),
  linear-gradient(150deg, #c97b5b, #7e4636); position: relative; }
.hs-lp-bild span { position: absolute; left: 12px; bottom: 10px; color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hs-lp h5 { font-family: var(--font-h); font-size: 19px; }
.hs-lp ul { padding-left: 16px; font-size: 12.5px; display: grid; gap: 2px; list-style: disc; }
.hs-feld { border: 1px solid rgba(43,36,32,.22); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; background: #fff; min-height: 34px; display: flex; align-items: center; }
.hs-feld .hs-tipp { overflow: hidden; white-space: nowrap; }
.hs-s-lp.is-active .hs-feld .hs-tipp { animation: hs-schreiben 1s steps(14) both; animation-delay: var(--d); }
@keyframes hs-schreiben { from { width: 0; } to { width: 100%; } }
.hs-lp-cta { background: var(--hs-page-acc); color: #fff; border-radius: 10px; padding: 10px; text-align: center; font-weight: 700; font-size: 13.5px; }
.hs-s-lp.is-active .hs-lp-cta { animation: hs-druck .35s 2.6s both; }
@keyframes hs-druck { 50% { transform: scale(.96); filter: brightness(.9); } }
.hs-lp-fuss { margin-top: auto; text-align: center; font-size: 10.5px; color: #8a7d74; }

/* 5 Mail */
.hs-s-mail, .hs-s-nl { background: #f2f2f7; color: var(--hs-mail-ink); }
.hs-push { margin: 6px 10px 0; background: rgba(255,255,255,.92); border-radius: 16px; padding: 10px 12px; display: flex; gap: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.hs-push .hs-ic { width: 30px; height: 30px; border-radius: 8px; background: #3a82f7; display: grid; place-items: center; flex: none; }
.hs-push .hs-ic svg { width: 16px; height: 16px; color: #fff; }
.hs-push b { font-size: 12px; display: block; }
.hs-push p { font-size: 12px; color: var(--hs-mail-mute); }
.hs-mail { margin: 12px 10px 0; background: #fff; border-radius: 16px; padding: 14px; display: grid; gap: 10px; flex: 1; align-content: start; }
.hs-von { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.hs-von small { color: var(--hs-mail-mute); display: block; }
.hs-mail h5 { font-family: var(--font-h); font-size: 16px; }
.hs-mail p { font-size: 12.5px; color: #3a3a3c; }
.hs-datei { display: flex; gap: 10px; align-items: center; border: 1px solid #e5e5ea; border-radius: 12px; padding: 10px; }
.hs-datei .hs-pdf { width: 34px; height: 40px; border-radius: 6px; background: #e8433a; color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 700; font-family: var(--mono); flex: none; }
.hs-datei b { font-size: 12.5px; display: block; }
.hs-datei small { color: var(--hs-mail-mute); font-size: 11px; }
.hs-mail-knopf { background: var(--hs-page-acc); color: #fff; border-radius: 10px; padding: 9px; text-align: center; font-weight: 700; font-size: 13px; }
.hs-ok { font-size: 11px; color: #1f8a5a; display: flex; gap: 6px; align-items: center; }
.hs-ok svg { width: 14px; height: 14px; }

/* 6 Newsletter + Kontakt */
.hs-nl-kopf { padding: 6px 18px 10px; }
.hs-nl-kopf h5 { font-family: var(--font-h); font-size: 22px; }
.hs-nl-kopf small { color: var(--hs-mail-mute); font-size: 12px; }
.hs-nl-liste { margin: 0 10px; background: #fff; border-radius: 14px; overflow: hidden; }
.hs-nl { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border-bottom: 1px solid #ececf0; align-items: center; }
.hs-nl:last-child { border-bottom: 0; }
.hs-tag { font-family: var(--mono); font-size: 10.5px; color: var(--hs-page-acc); text-align: center; line-height: 1.2; }
.hs-tag b { display: block; font-size: 15px; font-family: var(--font-h); color: var(--hs-mail-ink); }
.hs-nl strong, .hs-nl small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-nl strong { font-size: 12.5px; }
.hs-nl small { color: var(--hs-mail-mute); font-size: 11.5px; }
.hs-toast { margin: auto 10px 18px; background: #111117; color: #f4f4f5; border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hs-toast .hs-logo { font-family: var(--font-h); font-weight: 700; font-size: 11px; letter-spacing: .02em; color: var(--hs-pink-soft); }
.hs-toast b { font-size: 13px; }
.hs-toast small { color: #a1a1aa; font-size: 11.5px; }

/* Schrittkarte (nur Handy) */
.hs-karte { display: none; }

/* Reel-Modus */
.hs-reel { position: fixed; inset: 0; z-index: 10050; background: rgba(5,5,6,.94); display: grid; place-items: center; padding: 16px; }
.hs-reel[hidden] { display: none; }
.hs-buehne { height: min(88vh, 900px); max-height: calc(100vh - 80px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 22px; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; background:
  radial-gradient(80% 50% at 50% 0%, rgba(233,30,99,.35), transparent 70%),
  linear-gradient(180deg, #14060c, #07070a 60%); }
.hs-segs { display: flex; gap: 4px; width: 100%; padding: 14px 14px 0; }
.hs-segs i { flex: 1; height: max(3px, .35vh); border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.hs-segs i b { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.hs-segs i.hs-fertig b { transform: scaleX(1); }
.hs-segs i.hs-jetzt b { animation: hs-balken var(--t, 3.4s) linear both; }
.hs-segs i.hs-jetzt.hs-halt b { animation-play-state: paused; }
.hs-cap { text-align: center; padding: 6% 8% 0; display: grid; gap: 6px; }
.hs-cap small { font-family: var(--mono); font-size: clamp(10px, 1.6vh, 30px); letter-spacing: .14em; text-transform: uppercase; color: var(--hs-pink-soft); }
.hs-cap strong { font-family: var(--font-h); font-weight: 700; font-size: clamp(18px, 3.4vh, 68px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.hs-slot { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }
.hs-skala { transform-origin: center center; }
.hs-marke { color: #fff; padding-bottom: 4%; font-family: var(--font-h); font-weight: 700; font-size: clamp(12px, 1.8vh, 34px); letter-spacing: .02em; }
.hs-marke span { color: var(--hs-pink); }
.hs-steuer { position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 10051; transition: opacity .3s; }
.hs-steuer button { background: var(--dark-3, #19191f); color: #fff; border: 1px solid var(--hs-line); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.hs-reel.hs-ruhig .hs-steuer { opacity: 0; }
.hs-reel.hs-ruhig { cursor: none; }
.hs-reel.hs-ruhig .hs-steuer:has(:focus-visible) { opacity: 1; } /* Tastatur: Knöpfe bleiben sichtbar; Maus/Tippen: blenden aus */
/* Hochformat-Fenster (Handy, Aufnahme 1080 × 1920): die Bühne füllt alles */
@media (max-aspect-ratio: 10/16) {
  .hs-reel { padding: 0; }
  .hs-buehne { height: 100%; max-height: none; width: 100%; aspect-ratio: auto; border-radius: 0; }
}

@media (max-width: 899px) {
  .hs { padding: 64px 0 32px; }
  .hs-raster { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
  .hs-spalte { order: -1; }
  .hs-sticky { position: static; }
  .hs-schritte { display: none; }
  .hs-karte { display: grid; gap: 10px; width: 100%; max-width: 420px; background: var(--dark-2, #111117); border: 1px solid var(--hs-line); border-radius: 16px; padding: 18px; }
  .hs-karte h3 { font-size: 21px; }
  .hs-karte p { color: var(--hs-fg2); font-size: 15px; min-height: 9.6em; } /* 6 Zeilen: Knöpfe springen nicht */
  .hs-karten-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
  .hs-karten-nav button { flex: 1; background: var(--dark-3, #19191f); color: #fff; border: 1px solid var(--hs-line); border-radius: 10px; padding: 10px; font-weight: 600; font-size: 15px; }
  .hs-karten-nav button:disabled { opacity: .4; cursor: default; }
  .hs-kopf p { font-size: 16px; }
}
@media (max-width: 360px) { .hs-handy { --w: 272px; } }

@media (prefers-reduced-motion: reduce) {
  .hs-bs.is-active .hs-a, .hs-tippt i, .hs-lauf i, .hs-video, .hs-s-dm.is-active .hs-tippt,
  .hs-s-lp.is-active .hs-feld .hs-tipp, .hs-s-lp.is-active .hs-lp-cta, .hs-segs i.hs-jetzt b { animation: none !important; }
  .hs-s-dm .hs-tippt { display: none; }
  .hs-bs, .hs-schritt, .hs-punkt, .hs-steuer { transition: none; }
}
.hs-link { color: #b3c2ff; text-decoration: underline; word-break: break-all; }