/* Funnel Master 24 - gemeinsame Styles fuer Unterseiten (Funktionen & Zielgruppen).
   Design wie die Startseite (weiss/blau/orange), voll responsiv. */
:root{--bg:#fff;--bg2:#f6f8fc;--ink:#0f172a;--muted:#5b6b83;--line:#e6ebf3;--brand:#2563eb;--brand2:#1d4ed8;--accent:#f59e0b;--cta:#ff7f00;--cta2:#e86f00;--ok:#16a34a;--radius:16px;--wrap:1160px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.btn{display:inline-block;font-weight:700;border-radius:12px;padding:14px 26px;cursor:pointer;border:0;font-size:1rem;transition:transform .12s,box-shadow .12s;text-align:center}
.btn--primary{background:var(--cta);color:#fff;box-shadow:0 10px 24px rgba(255,127,0,.28)}
.btn--primary:hover{transform:translateY(-1px);background:var(--cta2);box-shadow:0 14px 30px rgba(255,127,0,.36)}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn--lg{padding:16px 32px;font-size:1.05rem}
.btn--sm{padding:9px 22px;font-size:.95rem}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:#eef4ff;border:1px solid #dbe7ff;padding:6px 12px;border-radius:99px}
/* Kopf */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:inline-flex;align-items:center;gap:1px;font-size:1.22rem;letter-spacing:-.01em}
.brand .fw-funnel{color:#9aa7ba;font-weight:700}
.brand .fw-master{color:#0f172a;font-weight:800}
.brand .fw-24{margin-left:8px;background:#2563eb;color:#fff;font-size:.8rem;font-weight:800;min-width:26px;height:26px;padding:0 6px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center}
.nav .links{display:flex;gap:22px;margin-left:14px}
.nav .links a{color:var(--muted);font-weight:600;font-size:.95rem}
.nav .links a:hover,.nav .links a.active{color:var(--ink)}
.nav .spacer{flex:1}
.nav .cta-head{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(255,127,0,.26)}
.nav .cta-head:hover{background:var(--cta2)}
.nav .login{color:var(--muted);font-weight:700;font-size:.95rem}
@media(max-width:980px){.nav .links{display:none}.nav .cta-head{padding:9px 16px;font-size:.9rem}}
@media(max-width:520px){.nav .cta-head{display:none}}
/* Breadcrumb */
.crumb{font-size:.85rem;color:var(--muted);padding:16px 0 0}
.crumb a{color:var(--brand);font-weight:600}
/* Hero */
.sub-hero{padding:30px 0 42px;background:radial-gradient(1100px 480px at 18% -10%,#eef4ff 0%,#fff 60%)}
.sub-hero h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:12px 0 14px;max-width:20ch}
.sub-hero .lead{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--muted);max-width:60ch;margin:0 0 22px}
.sub-hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.sub-hero .cta .pres-link{color:var(--brand);font-weight:700}
/* 2-Spalten (Aha + Ablauf, Beispiel + FAQ) */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.aha{background:#eff6ff;border:1px solid #dbe7ff;border-radius:16px;padding:22px 24px}
.aha .k{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.aha p{font-size:1.18rem;font-weight:700;color:#0f172a;margin:0;line-height:1.4}
.flowcard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(15,23,42,.05);overflow:hidden}
.flowcard .bar{background:#f8fafc;border-bottom:1px solid var(--line);padding:11px 16px;display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted)}
.flowcard .bar i{width:9px;height:9px;border-radius:50%;background:#e2e8f0;display:inline-block}
.flowcard .bar i:nth-child(1){background:#ff6058}.flowcard .bar i:nth-child(2){background:#ffbd2e}.flowcard .bar i:nth-child(3){background:#28c840}
.flowcard .bar span{margin-left:6px}
.flowcard .steps{padding:18px 20px;display:grid;gap:16px}
.flowcard .step{display:flex;gap:13px;align-items:flex-start}
.flowcard .step .no{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.flowcard .step b{display:block;font-size:1rem;color:#0f172a}
.flowcard .step .d{color:var(--muted);font-size:.9rem}
/* Vorteile */
.section{padding:52px 0}
.section h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 24px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.cards3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.card h3{margin:0 0 8px;font-size:1.12rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
/* CTA-Band */
.cta-band{background:#eff6ff;border:1px solid #dbe7ff;border-radius:18px;padding:22px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta-band .t{flex:1;min-width:240px}
.cta-band .t b{font-size:1.15rem;color:#0f172a}
.cta-band .t p{margin:4px 0 0;color:var(--muted);font-size:.9rem}
/* Beispiel + FAQ */
.example{background:#fff7ed;border:1px solid #fde3c2;border-radius:16px;padding:22px 24px}
.example h3{margin:0 0 10px;font-size:1.15rem}
.example p{margin:0;color:#7c4a12}
.example .fine{margin:14px 0 0;font-size:.8rem;color:#b08a5a}
.faq h3{font-size:1.3rem;margin:0 0 14px}
.faq .q{border-bottom:1px solid var(--line);padding:12px 0}
.faq .q:last-child{border-bottom:0}
.faq .q b{display:block;font-size:1rem;color:#0f172a;margin-bottom:4px}
.faq .q p{margin:0;color:var(--muted);font-size:.93rem}
/* verwandte Funktionen */
.related{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.related a{background:#eff6ff;border:1px solid #dbe7ff;color:var(--brand);font-weight:700;border-radius:12px;padding:12px 16px;font-size:.92rem}
.related a:hover{background:#dbe7ff}
.endcta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.endcta .tarif{color:var(--brand);font-weight:700}
/* Hub-Raster */
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.hubgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hubgrid{grid-template-columns:1fr}}
.hubcard{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 20px;box-shadow:0 8px 24px rgba(15,23,42,.04);transition:transform .12s,box-shadow .12s,border-color .12s}
.hubcard:hover{transform:translateY(-2px);border-color:#c7d8f5;box-shadow:0 16px 36px rgba(37,99,235,.12)}
.hubcard .ic{font-size:1.6rem;margin-bottom:8px}
.hubcard h3{margin:0 0 4px;font-size:1.05rem}
.hubcard .go{color:var(--brand);font-weight:700;font-size:.9rem}
.grouphead{font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:30px 0 12px}
/* Fuss */
footer.site{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);margin-top:30px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot a{color:var(--muted);font-weight:600}.foot a:hover{color:var(--ink)}
.foot .cols{display:flex;gap:40px;flex-wrap:wrap}
.foot h4{color:var(--ink);font-size:.9rem;margin:0 0 8px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}