/* Leitfaden-Funnel (/guide/, /guide/bestaetigen/, /guide/danke/) – Design v3, ergänzt /assets/site.css.
   Klassen und IDs des Formulars (form.js, MailerLite) bleiben unverändert. */
.funnel .hero{padding:clamp(36px,6vw,88px) 0 clamp(56px,7vw,96px)}
.funnel .hero-grid{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
@media(min-width:960px){.funnel .hero-grid{grid-template-columns:1.15fr .85fr;grid-template-areas:"copy form" "cover form"}.funnel .hero-grid>div:first-child{grid-area:copy}.funnel .hero-grid .cover{grid-area:cover}.funnel #optin{grid-area:form;position:sticky;top:100px}}
.funnel .label{font:500 12px/1.3 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:flex;gap:10px;align-items:center}
.funnel .label .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--white);color:var(--ink);font-weight:600;letter-spacing:0}
.funnel main h1{font:420 clamp(36px,4.4vw,62px)/1.08 var(--display);font-stretch:118%;margin:16px 0 20px;max-width:13em}
.funnel h1 em{font-style:normal;background:var(--g-peach);padding:0 .14em;border-radius:.16em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.funnel main h2{font:420 clamp(30px,3.8vw,52px)/1.08 var(--display);font-stretch:118%;margin:14px 0 18px;max-width:18em}
.funnel .sub{font-size:var(--fs-lede);line-height:1.5;color:var(--ink-2);max-width:34em;margin:0 0 26px}
.funnel .hero-cta{display:inline-flex}
@media(min-width:960px){.funnel .hero-cta{display:none}}
.funnel .facts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.funnel .facts li{background:var(--white);border-radius:var(--pill);padding:8px 14px;font-size:14px;font-weight:500}
.funnel .cover{position:relative;border-radius:var(--r-card);background:var(--g-peach);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:visible}
.funnel .cover picture{width:42%;transform:rotate(-4deg);box-shadow:0 40px 70px -30px rgba(11,43,42,.55)}
.funnel .badge{position:absolute;left:-2%;top:12%;background:var(--white);border-radius:var(--r-chip);padding:10px 14px;font-size:14px;font-weight:600;box-shadow:var(--shadow)}
/* Formular */
.funnel #optin.card{background:var(--white);border-radius:calc(var(--r-card) + 4px);padding:clamp(24px,3vw,36px);box-shadow:0 30px 60px -36px rgba(11,43,42,.35)}
.funnel #optin h2{font-size:clamp(26px,2.4vw,32px);margin:0 0 6px}
.funnel .hint{color:var(--mute);font-size:14px;margin:0 0 20px}
.funnel .field{display:flex;flex-direction:column;margin-bottom:16px}
.funnel .field label{font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.funnel .field label span{color:var(--mute);font-weight:400}
.funnel .field input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.funnel .field input:focus{outline:none;border-color:var(--ink);background:var(--white)}
.funnel .field input[aria-invalid=true]{border-color:#B4472C}
.funnel .hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.funnel #optin .btn{width:100%;justify-content:center;border:0;font-weight:600}
.funnel #optin .btn[disabled]{opacity:.6;cursor:wait}
.funnel .consent{font-size:12.5px;line-height:1.5;color:var(--mute);margin:14px 0 0}
.funnel .consent a{color:var(--ink-2)}
.funnel .msg{display:none;font-size:14px;margin-top:12px;padding:10px 12px;border-radius:10px}
.funnel .msg.err{display:block;background:#F7E4DD;color:#7A2E1C}
/* Abschnitte */
.funnel .s{padding:var(--section) 0 0}
.funnel .intro{font-size:var(--fs-lede);color:var(--ink-2);max-width:36em;margin:0 0 32px}
.funnel .pains,.funnel .outcomes{display:grid;gap:var(--gutter)}
@media(min-width:900px){.funnel .pains,.funnel .outcomes{grid-template-columns:repeat(3,1fr)}}
.funnel .pain,.funnel .outcome{border-radius:var(--r-card);padding:26px 24px;min-height:190px}
.funnel .pain:nth-child(1),.funnel .outcome:nth-child(1){background:var(--g-peach)}
.funnel .pain:nth-child(2),.funnel .outcome:nth-child(2){background:var(--g-sage)}
.funnel .pain:nth-child(3),.funnel .outcome:nth-child(3){background:var(--g-lilac)}
.funnel .pain b,.funnel .outcome b{display:block;font:480 22px/1.2 var(--display);font-stretch:110%;margin-bottom:10px}
.funnel .pain p,.funnel .outcome p{color:var(--ink-2);font-size:15px;margin:0}
.funnel .s>.wrap>.note{margin-top:28px;font:420 clamp(20px,2vw,26px)/1.35 var(--display);font-stretch:110%;color:var(--ink);background:none;padding:0;max-width:30em}
.funnel .toc{list-style:none;margin:28px 0 0;padding:8px 28px;background:var(--white);border-radius:var(--r-card)}
.funnel .toc li{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.funnel .toc li:last-child{border-bottom:0}
.funnel .toc .n{font:420 22px/1 var(--display);font-stretch:112%;color:var(--mute);min-width:2em;padding-top:2px}
.funnel .toc b{display:block;font:480 19px/1.3 var(--display);font-stretch:108%}
.funnel .toc div span{color:var(--ink-2);font-size:15px}
.funnel .s.dark{background:none}
.funnel .about{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.funnel .about{grid-template-columns:auto 1fr;gap:48px}}
.funnel .mono{width:120px;height:120px;border-radius:50%;background:var(--g-sage) url(/assets/luigi-lugmayr.jpg) 50% 15%/cover;color:transparent;overflow:hidden}
.funnel .about p{color:var(--ink-2);max-width:40em;margin:0 0 14px}
.funnel .sig{font:420 28px/1 var(--display);font-stretch:112%;color:var(--ink)!important}
.funnel .faq .narrow{max-width:calc(880px + 2*var(--margin))}
.funnel .faq h2{margin-bottom:24px}
.funnel .faq details{background:var(--white);border:0;border-radius:16px;padding:0 24px;margin-bottom:10px}
.funnel .faq details:last-child{border-bottom:0}
.funnel .cta{margin-top:var(--section);padding:clamp(72px,9vw,120px) 0;background:var(--g-band);text-align:center}
.funnel .cta .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.funnel .cta h2{margin:0}
.funnel .cta p{color:var(--ink-2);font-size:14px}
/* Bestätigen / Danke */
.funnel .simple{padding:clamp(36px,6vw,80px) 0 clamp(64px,8vw,112px)}
.funnel .simple .wrap{max-width:calc(820px + 2*var(--margin))}
.funnel .simple .card{background:var(--white);border-radius:calc(var(--r-card) + 4px);padding:clamp(26px,4vw,48px)}
.funnel .simple h1{font-size:clamp(32px,4.4vw,52px);margin:14px 0 16px}
.funnel .simple p{color:var(--ink-2);max-width:40em}
.funnel .steps{counter-reset:s;list-style:none;margin:24px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.funnel .steps li{counter-increment:s;position:relative;padding:16px 18px 16px 58px;background:var(--bg);border-radius:14px}
.funnel .steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:600;font-size:14px}
.funnel .note{font-size:15px;color:var(--ink-2);background:var(--bg);border-radius:12px;padding:12px 16px;margin:18px 0 0}
.funnel .dl{display:flex;gap:20px;align-items:center;margin:24px 0;padding:20px;border-radius:var(--r-card);background:var(--g-peach)}
.funnel .dl picture{width:96px;flex:none;transform:rotate(-4deg);box-shadow:0 20px 30px -16px rgba(11,43,42,.5)}
.funnel .dl .note{background:rgba(255,255,255,.6)}
.funnel .dl-title{display:block;font:480 20px/1.25 var(--display);font-stretch:108%}
.funnel .h-sub{font-size:clamp(24px,2.6vw,32px)!important;margin-top:32px!important}

/* Mobil: Formular direkt nach dem Einstieg, Cover danach (21.10.2026, Funnel-Prüfung) */
@media(max-width:959px){
  .funnel .hero-grid>div:first-child{order:1}
  .funnel #optin{order:2}
  .funnel .hero-grid .cover{order:3;aspect-ratio:16/10}
  .funnel .hero-cta{display:none}
  .funnel .facts{margin-top:16px}
  .funnel .sub{margin-bottom:8px}
}
@media(max-width:600px){
  .funnel .dl{flex-direction:column;align-items:flex-start}
  .funnel .dl picture{width:110px}
}