/* ============================================================
   lp-v2.css — Freies, kugelsicheres LP-Layout (Theme via Variablen)
   Wird ZUSAMMEN mit multistep-lp.css geladen (das liefert die
   Formular-Mechanik). Hier: eigenes Hero-Layout + Theme-Hooks.
   Theme setzt: --bg, --fg, --muted, --accent, --accent-2, --card,
   --glow-1, --glow-2, --font-display, --font-body
   ============================================================ */

.lp { margin:0; min-height:100vh; background:var(--bg); color:var(--fg);
  font-family: var(--font-body), -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* ---- Top bar ---- */
.lp-topbar { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: .9rem clamp(1rem, 4vw, 3rem); position:relative; z-index:3; }
.lp-logo { font-weight:800; letter-spacing:-.02em; font-size:1.05rem; color:var(--fg); }
.lp-logo b { color:var(--accent); font-weight:700; }
.lp-trust { font-size:.74rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:560px){ .lp-trust{ display:none; } }

/* ---- Hero shell + atmosphere ---- */
.lp-hero { position:relative; padding: clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,3rem) clamp(2.5rem,5vw,4rem); }
.lp-atmos { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% -5%, var(--glow-1), transparent 70%),
    radial-gradient(50% 45% at 6% 8%, var(--glow-2), transparent 70%);
}

/* ---- Responsive hero grid (THE robust part) ---- */
.lp-grid { position:relative; z-index:2; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap: 1.75rem; align-items:start; }
.lp-copy-top, .lp-copy-bottom, .lp-formwrap { min-width:0; }  /* prevents overflow */

@media (min-width:980px){
  .lp-grid {
    grid-template-columns: minmax(0,1.15fr) minmax(0,clamp(380px,34vw,460px));
    grid-template-areas: "top form" "bottom form";
    column-gap: clamp(2rem,5vw,5rem); row-gap: 1.5rem;
  }
  .lp-copy-top{ grid-area:top; } .lp-formwrap{ grid-area:form; align-self:start; }
  .lp-copy-bottom{ grid-area:bottom; }
}

/* ---- Eyebrow / chip ---- */
.lp-eyebrow { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); padding:.4rem .8rem; border-radius:100px; margin:0 0 1.1rem; }

/* ---- Headline ---- */
.lp-headline { margin:0 0 1.1rem; font-family:var(--font-display), serif;
  font-weight:800; line-height:1.02; letter-spacing:-.02em; color:var(--fg);
  font-size: clamp(2.3rem, 6.2vw, 4.6rem); text-wrap:balance; overflow-wrap:anywhere; }
.lp-headline .accent { color:var(--accent); }

/* ---- Subline ---- */
.lp-sub { margin:0; color:var(--muted); font-size: clamp(1rem,1.4vw,1.14rem); line-height:1.6; max-width:46ch; }
.lp-sub strong { color:var(--fg); font-weight:700; }

/* ---- Capacity stats ---- */
.cap { display:flex; flex-wrap:wrap; gap: clamp(1rem,3vw,2rem); margin: clamp(1.2rem,2vw,1.6rem) 0 0; }
.cap-item { min-width:0; }
.cap-num { font-family:var(--font-display), serif; font-weight:800; font-size: clamp(1.5rem,3.2vw,2.1rem);
  color:var(--accent-2); line-height:1; }
.cap-lab { font-size:.78rem; color:var(--muted); margin-top:.4rem; }

/* ---- Voice waveform ---- */
.voice { display:flex; align-items:center; gap:.8rem; margin-top: clamp(1.2rem,2vw,1.6rem); flex-wrap:wrap; }
.live-dot { width:10px; height:10px; border-radius:50%; background:var(--accent); flex-shrink:0;
  animation:lppulse 1.8s ease-out infinite; }
@keyframes lppulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%{ box-shadow:0 0 0 12px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.voice-label { color:var(--muted); font-size:.82rem; font-weight:600; }
.wave { display:flex; align-items:center; gap:3px; height:34px; }
.wave span { width:4px; height:22%; background:var(--accent-2); border-radius:4px; opacity:.55; animation:lpwv 1.1s ease-in-out infinite; }
.wave span:nth-child(2){animation-delay:.08s} .wave span:nth-child(3){animation-delay:.18s}
.wave span:nth-child(4){animation-delay:.26s} .wave span:nth-child(5){animation-delay:.12s}
.wave span:nth-child(6){animation-delay:.22s} .wave span:nth-child(7){animation-delay:.04s}
.wave span:nth-child(8){animation-delay:.30s} .wave span:nth-child(9){animation-delay:.16s}
.wave span:nth-child(10){animation-delay:.24s} .wave span:nth-child(11){animation-delay:.10s}
.wave.playing span { opacity:1; animation-play-state:running; }
@keyframes lpwv { 0%,100%{height:16%} 50%{height:100%} }

/* ---- Form card (custom shell; inner .ms-* from multistep-lp.css) ---- */
.lp-form-card { background:var(--card); border-radius:18px; overflow:hidden;
  border-top:3px solid var(--accent);
  box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.18); }
.lp-form-card .ms-step-info { color:#94a3b8; }

/* accent overrides for form internals */
.lp .ms-progress-fill { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.lp .ms-option:hover, .lp .ms-option.selected { border-color:var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff); }
.lp .ms-option:hover .ms-option-radio, .lp .ms-option.selected .ms-option-radio { border-color:var(--accent); }
.lp .ms-option.selected .ms-option-radio { background:var(--accent); }
.lp .ms-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.lp .ms-submit { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--card-fg, #10120a);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 32%, transparent); }
.lp .ms-submit:hover { box-shadow: 0 14px 44px color-mix(in srgb, var(--accent) 42%, transparent); }

/* ---- Proof + testimonials ---- */
.lp-proof { position:relative; z-index:2; background: var(--bg-2, rgba(255,255,255,.03));
  border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent); padding: clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,3rem); }
.lp-proof-inner { max-width:1000px; margin:0 auto; }
.lp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; text-align:center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
@media (max-width:560px){ .lp-stats{ grid-template-columns:1fr; text-align:left; gap:.5rem; } }
.lp-stat-num { font-family:var(--font-display),serif; font-weight:800; font-size: clamp(1.4rem,3vw,2rem); color:var(--accent-2); }
.lp-stat-lab { font-size:.82rem; color:var(--muted); margin-top:.2rem; }
.lp-tt-title { text-align:center; font-family:var(--font-display),serif; font-weight:700; color:var(--fg);
  font-size:1.2rem; margin: clamp(2rem,4vw,2.8rem) 0 1.3rem; }
.lp-tt-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .lp-tt-grid{ grid-template-columns:1fr 1fr; } }
.lp-tt { background: color-mix(in srgb, var(--fg) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius:14px; padding:1.25rem; }
.lp-tt p { margin:0 0 .7rem; color: color-mix(in srgb, var(--fg) 78%, transparent); font-style:italic; line-height:1.6; font-size:.94rem; }
.lp-tt cite { font-style:normal; font-weight:700; color:var(--fg); font-size:.82rem; }
.lp-tt cite span { color:var(--muted); font-weight:400; }

/* ---- Footer ---- */
.lp-footer { background:var(--footer,#000); color:var(--muted); text-align:center; padding:1.5rem 1rem; position:relative; z-index:2; }
.lp-footer a { color:var(--muted); text-decoration:none; margin:0 .75rem; font-size:.82rem; }
.lp-footer a:hover { color:var(--fg); }
.lp-footer p { margin:.5rem 0 0; font-size:.75rem; }

/* ---- Hero credibility line (above the fold) ---- */
.lp-hero-cred { display:flex; align-items:center; gap:.6rem; margin-top:1.1rem; color:var(--muted); font-size:.86rem; line-height:1.4; }
.lp-hero-cred img { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.lp-hero-cred b { color:var(--fg); font-weight:700; }
.lp-hero-cred .stars { color:#f5a623; letter-spacing:1px; }

/* ---- Featured testimonial (light card, pops on dark) ---- */
.lp-featured { background:#fff; color:#16130d; border-radius:18px; max-width:760px;
  margin:0 auto clamp(1.6rem,3vw,2.4rem); padding: clamp(1.4rem,3.2vw,2.3rem); text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.32); }
.lp-featured .av { width:70px; height:70px; border-radius:50%; object-fit:cover; display:block; margin:0 auto .85rem;
  border:3px solid color-mix(in srgb, var(--accent) 55%, #fff); }
.lp-featured .stars { color:#f5a623; letter-spacing:3px; font-size:1rem; margin-bottom:.55rem; }
.lp-featured .q { font-family:var(--font-display), serif; font-style:italic; font-weight:600;
  font-size: clamp(1.05rem,2.1vw,1.35rem); line-height:1.5; color:#16130d; margin:0 0 1rem; }
.lp-featured .who { font-weight:700; font-size:.92rem; color:#16130d; }
.lp-featured .who span { font-weight:400; color:#6b6457; }
.lp-featured .stat { display:inline-block; margin-top:.85rem; background:var(--accent); color:var(--card-fg,#10120a);
  font-weight:800; font-size:.78rem; padding:.34rem .9rem; border-radius:100px; }
.lp-featured .logo { display:block; height:20px; margin:1rem auto 0; opacity:.55; }

/* ---- Entrance animation ---- */
@media (prefers-reduced-motion: no-preference){
  .lp-copy-top > *, .lp-formwrap, .lp-copy-bottom > * { animation: lpfade .6s ease both; }
  .lp-headline{ animation-delay:.05s } .lp-sub{ animation-delay:.12s }
  .lp-formwrap{ animation-delay:.18s } .cap{ animation-delay:.22s } .voice{ animation-delay:.28s }
  @keyframes lpfade { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
  .lp-atmos{ animation: lpdrift 16s ease-in-out infinite; transform-origin:center; }
  @keyframes lpdrift { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.05); opacity:.82; } }
}