/* ==========================================================================
   hero.css — Pos 02: Hero mit E-Mail-Capture + Werkbank-Montage
   Stil lt. analyse/hero-video-stil.md (Dreiakter), K1a/K2a/K4a/K11a.
   Ohne JS / bei reduced-motion: statisches Akt-3-Arrangement (CSS-Default);
   html.motion blendet die Akteure aus, GSAP übernimmt.
   ========================================================================== */

.hero { position: relative; background: var(--bg); }
/* Hero-Hintergrund (js/particles.js): Punkteraster, das dem Cursor ausweicht */
.hero-bg { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.hero.has-bg > .hero-head, .hero.has-bg > .hero-stage-wrap { position: relative; z-index: 1; }
.hero.has-bg .hero-ticker { background: var(--bg); }
.hero.has-bg .hero-cta .email-combo { background-color: var(--bg); background-image: linear-gradient(var(--field-bg), var(--field-bg)); }
.hero-head { text-align: center; padding-block: clamp(2.6rem, 6vw, 4.5rem) 2.4rem; }
.hero-ticker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 500 0.78rem/1 var(--font-label); letter-spacing: 0.04em;
  color: var(--text-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 0.9rem; margin-bottom: 1.6rem;
}
.hero-ticker .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-text); }
html.motion .hero-ticker .live-dot { animation: heroDot 1.6s ease-in-out infinite; }
@keyframes heroDot { 50% { opacity: 0.35; } }
.hero-head h1 { font-size: var(--fs-hero); margin: 0 0 0.3em; letter-spacing: -0.015em; }
.hero-head .lead { margin-inline: auto; max-width: 38rem; }
.hero-cta { display: grid; justify-items: center; gap: 0; margin-top: 1.9rem; }
.hero-cta .email-combo { width: 100%; }
.hero-cta .micro-trust { justify-content: center; }

/* ---------- Bühne ---------- */
.hero-stage-wrap { padding: 0.4rem var(--gutter) clamp(2.2rem, 5vw, 3.6rem); }
.hero-stage {
  position: relative;
  max-width: 76rem; margin-inline: auto;
  height: clamp(26rem, 44vw, 34rem);
  border: 1px solid var(--line); border-radius: var(--r-l);
  overflow: hidden;
}
.hero-glow {
  position: absolute; inset: -12%; pointer-events: none;
  background:
    radial-gradient(38rem 24rem at 76% 28%, rgba(255, 77, 129, 0.13), transparent 62%),
    radial-gradient(34rem 26rem at 12% 88%, rgba(251, 239, 243, 0.85), transparent 60%);
}
html.motion .hero-glow { opacity: 0; }

/* Badge-Crossfade: beide Zustände deckungsgleich stapeln */
.badge-swap { display: inline-grid; }
.badge-swap > * { grid-area: 1 / 1; justify-self: end; white-space: nowrap; }

/* Antrags-Dokumente (Akt 1) */
.hero-doc { position: absolute; width: 14.5rem; z-index: 1; }
.hero-doc--1 { left: 4%; top: 11%; }
.hero-doc--2 { left: 9%; bottom: 15%; }
.hero-doc--3 { right: 5%; top: 9%; }
.hero-doc .doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.7rem 0.8rem 0.1rem; }
.hero-doc .doc-title { font: 600 0.78rem/1.3 var(--font-sans); color: var(--ink); }
.hero-doc .doc-amount { font: 600 0.74rem/1 var(--font-label); color: var(--text-soft); white-space: nowrap; }
.hero-doc .doc-tag {
  margin: 0.45rem 0.8rem 0; display: inline-block;
  font: 500 0.6rem/1 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0.25rem 0.4rem;
}
html.js .hero-doc { display: none; }
html.motion .hero-doc { display: block; opacity: 0; }

/* App-Fenster (Akt 2): breit, unten von der Bühne beschnitten */
.hero-window { position: absolute; left: 50%; bottom: -4.5rem; transform: translateX(-50%); width: min(54rem, 94%); z-index: 2; }
html.motion .hero-window { opacity: 0; }

/* Prozess-Karten */
.hero-proc { position: absolute; width: 16.5rem; z-index: 3; }
.hero-proc--1 { left: 2.5%; top: 32%; }
.hero-proc--2 { right: 3%; top: 14%; }
.hero-proc--3 { right: 2%; bottom: 20%; }
.hero-proc--4 { left: 6%; bottom: 7%; }
html.motion .hero-proc { opacity: 0; }
/* Mikroanimation: Schimmer läuft über das Label, solange die Software arbeitet */
html.motion .proc-label.is-busy {
  color: transparent;
  background: linear-gradient(90deg, var(--text-soft) 0%, var(--text-soft) 38%, var(--ink) 50%, var(--text-soft) 62%, var(--text-soft) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: procShimmer 1.5s linear infinite;
}
@keyframes procShimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }

/* Lebendes Punktraster (js/particles.js): ersetzt das CSS-Raster, sobald es läuft */
.hero-stage.is-live { background-image: none; }
.live-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* Ziffernrollen (Tacho) für Kennzahlen */
.odo-wrap { display: inline-flex; vertical-align: top; }
.odo { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; }
.odo-col { display: block; transition: transform 0.7s var(--ease-out); }
.odo-col::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; display: block; }
.hero-proc .proc-sub { display: block; font-size: 0.68rem; color: var(--text-soft); padding: 0.15rem 0.8rem 0.7rem; }
.hero-proc .gd-bar { margin: 0.3rem 0.8rem 0.8rem; }
.proc-chiprow { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.8rem 0.75rem; }
.proc-chiprow .gd-ava { width: 1.45rem; height: 1.45rem; font-size: 0.55rem; }
.proc-chiprow span:not(.gd-ava) { font-size: 0.7rem; color: var(--text); }

/* Impact-Stories (Akt 3, warm — K4a) */
.hero-impact {
  position: absolute; z-index: 4; width: 16rem;
  background: #fff; border: 1px solid var(--line-warm); border-radius: var(--r-m);
  box-shadow: var(--shadow-warm); overflow: hidden;
}
.hero-impact--1 { right: 7%; top: 36%; }
.hero-impact--2 { right: 22%; bottom: 5%; width: 13.5rem; }
html.motion .hero-impact { opacity: 0; }
.hero-impact .impact-art {
  height: 3.4rem; background: var(--bg-warm);
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 0.5rem;
}
.hero-impact .impact-badge {
  font: 500 0.6rem/1 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
  background: #fff; color: var(--mint-text); border: 1px solid var(--line-warm);
  border-radius: 4px; padding: 0.28rem 0.45rem;
}
.hero-impact .impact-body { padding: 0.7rem 0.85rem 0.8rem; }
.hero-impact b { display: block; font: 600 0.82rem/1.35 var(--font-sans); color: var(--ink); margin-bottom: 0.15rem; }
.hero-impact .impact-line { font-size: 0.72rem; color: var(--text-soft); line-height: 1.45; display: block; }
.hero-impact .impact-heart {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.5rem; font: 600 0.72rem/1 var(--font-sans); color: var(--pink-deep);
}

/* Pause-Schalter */
.stage-toggle {
  position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 6;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.42rem 0.8rem; cursor: pointer;
  font: 500 0.75rem/1 var(--font-sans); color: var(--text);
}
.stage-toggle:hover { border-color: var(--line-input); color: var(--ink); }

/* ---------- Responsive (M02) ---------- */
@media (max-width: 62rem) {
  .hero-stage { height: 30rem; }
  .hero-doc, .hero-proc--4, .hero-impact--2 { display: none !important; }
  .hero-proc { width: 13rem; }
  /* Karten ans Ufer, weg vom zentrierten Fenster */
  .hero-proc--1 { left: 2%; top: 4%; }
  .hero-proc--2 { right: 2%; top: 4%; }
  .hero-proc--3 { right: 2%; bottom: 5%; }
  .hero-impact--1 { right: auto; left: 2%; top: auto; bottom: 5%; }
  .hero-window { width: min(34rem, 92%); bottom: -3.5rem; }
}
@media (max-width: 40rem) {
  .hero-stage { height: 25rem; }
  .hero-proc--1 { display: none !important; }
  .hero-window { width: 96%; bottom: -2.5rem; }
}