/* cro.css — Conversion-Bausteine (2026-09-27)
   Inline-Anmeldung (.cro-box), Beweisleiste im Hero (.hero-proof), Warteliste (.wl-form),
   Mobil-Hero kürzer, damit das Formular im ersten Bildschirm sitzt. */

/* Inline-Anmeldung */
.cro-box{background:#0f0f0f;color:#fff;padding:clamp(26px,4.5vw,48px);margin:44px 0 8px;border-radius:0}
.cro-box .cro-kicker{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ff3b3b;font-weight:600;margin:0 0 10px}
.cro-box h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,32px);line-height:1.15;color:#fff;margin:0 0 10px;max-width:26ch}
.cro-box .cro-text{color:#c7c7c7;font-size:16px;line-height:1.6;margin:0 0 20px;max-width:58ch}
.cro-form{display:flex;gap:10px;flex-wrap:wrap;max-width:580px;margin:0}
.cro-form input[type=email]{flex:1 1 230px;min-width:0;background:#f8f8f8;color:#111;border:0;border-radius:0;padding:15px 16px;font-family:var(--sans);font-size:16px}
.cro-form input[type=email]:focus{outline:2px solid var(--accent);outline-offset:2px}
.cro-form .btn{white-space:nowrap;border-radius:0;padding:15px 24px;font-size:15px}
.cro-box .cro-fine{color:#8a8a8a;font-size:13px;margin:14px 0 0;line-height:1.55}
.cro-box .cro-fine a{color:#b4b4b4;text-decoration:underline;text-underline-offset:2px}
.cro-box .newsletter-stamp-panel{background:#0f0f0f;color:#fff}
@media(max-width:600px){.cro-form{flex-direction:column}.cro-form input[type=email]{flex:0 0 auto;width:100%}.cro-form .btn{width:100%}}

/* Beweisleiste im Hero */
.hero-proof{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#c4c4c4}
.hero-proof li{position:relative}
.hero-proof li+li::before{content:"·";position:absolute;left:-13px;color:var(--accent)}
.sig-home .hero .micro a.hero-sec{white-space:nowrap}

/* Warteliste in Werkzeug-Karten / Kaufblock */
.wl-label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.wl-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.wl-form input[type=email]{flex:1 1 180px;min-width:0;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:11px 12px;font-size:16px;font-family:var(--sans);border-radius:0}
.wl-form .btn{padding:11px 16px;font-size:13px;border-radius:0;white-space:nowrap}
.kaufblock .wl-form{max-width:480px}

/* Werkzeug 000 als Lead-Magnet mit Formular */
.akte-werkzeug .cro-form input[type=email]{border:1px solid var(--ink)}

/* Mobil: Hero-Foto kürzer, damit Formular + Button im ersten Bildschirm sitzen */
@media(max-width:760px){
  .sig-home .hero{min-height:0;padding-top:270px}
  .sig-home .hero-media{height:400px}
  .sig-home .hero-copy{padding-bottom:56px}
  .sig-home .hero .lead{margin:20px 0 22px}
  .hero-proof{font-size:9.5px;gap:4px 20px}
}

/* Formular auf hellem Grund */
.cro-form.light input[type=email]{background:#fff;border:1px solid var(--ink)}
.next{counter-reset:s}

/* Hostinger-Reach-Formular an den Anmeldestellen */
.reach-slot{max-width:580px;margin:0}
.cro-box .reach-slot{color:#fff}