/* ============================================================
   lp-neu.css — Design-System für die Redesign-Landingpages
   Schrift self-hosted (DSGVO-sauber, SIL OFL) — KEIN Google-CDN.
   ============================================================ */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2')}

:root{
  --bg:#F4F8FD; --bg-2:#EAF2FB; --card:#FFFFFF;
  --ink:#13243A; --ink-soft-2:#465971; --ink-faint:#8497ad;
  --blue:#2F86E0; --blue-deep:#1C63B8; --blue-soft:#DBEAFB; --blue-tint:#EDF5FE;
  --ok:#1FA971; --ok-deep:#15784F; --ok-tint:#E6F7EF; --ok-line:#BCE8D2;
  --warn:#B57E10; --warn-tint:#FdF4E3; --warn-line:#EAD9AE;
  --danger:#D64550; --danger-tint:#FCEDEE; --danger-line:#F1C9CD;
  --line:#D9E6F4; --line-strong:#C2D6EC;
  --maxw:1120px; --r:22px;
  --sh-lg:0 34px 64px -34px rgba(18,38,66,.5); --sh-md:0 18px 40px -26px rgba(18,38,66,.45);
  --grad-btn:linear-gradient(135deg,#3B92EC,#1C63B8);
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
p{color:var(--ink-soft-2)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep);display:inline-flex;align-items:center;gap:9px;background:var(--blue-tint);border:1px solid var(--line);padding:6px 13px;border-radius:999px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-tint)}

/* Header */
header{background:rgba(244,248,253,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.1rem;letter-spacing:-.02em}
.brand img{width:34px;height:34px}
.brand small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-top:-3px}
.nav-cta{font-size:.92rem;font-weight:700;color:#fff;background:var(--grad-btn);padding:10px 20px;border-radius:999px;box-shadow:var(--sh-md);transition:transform .2s}
.nav-cta:hover{transform:translateY(-2px)}

/* Buttons */
.btn{font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;background:var(--grad-btn);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s;box-shadow:0 16px 30px -16px rgba(28,99,184,.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 38px -16px rgba(28,99,184,.75)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn .arr svg{width:17px;height:17px;display:block}
.btn.ghost{background:#fff;color:var(--blue-deep);border-color:var(--line-strong);box-shadow:var(--sh-md)}
.btn.ghost:hover{background:var(--blue-tint)}
.btn.block{width:100%}

/* Hero */
.hero{position:relative;padding:64px 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(820px 480px at 82% -8%, rgba(47,134,224,.22), transparent 62%),
  radial-gradient(640px 440px at -6% 108%, rgba(31,169,113,.12), transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.7vw,3.35rem);margin:18px 0 0}
.hero h1 .hl{background:linear-gradient(120deg,var(--blue),var(--blue-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{font-size:1.13rem;margin-top:18px;max-width:33em}
.hero-points{list-style:none;margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:11px 18px}
.hero-points li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:.96rem}
.hero-points .ck{width:22px;height:22px;flex:none;border-radius:7px;background:var(--ok-tint);color:var(--ok-deep);display:grid;place-items:center;margin-top:1px;border:1px solid var(--ok-line)}
.hero-points .ck svg{width:13px;height:13px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-trust{margin-top:22px;font-size:.86rem;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
.hero-trust svg{width:16px;height:16px;color:var(--ok-deep);flex:none}

/* Phone-Mockup (KI) */
.phone-wrap{position:relative;display:flex;justify-content:center}
.phone-wrap::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(47,134,224,.18),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}
.phone{position:relative;z-index:1;width:286px;background:#0d1a2b;border-radius:42px;padding:13px;box-shadow:0 50px 90px -40px rgba(13,26,43,.7),0 0 0 1px rgba(13,26,43,.5)}
.phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#0d1a2b;border-radius:0 0 16px 16px;z-index:3}
.phone-screen{position:relative;border-radius:31px;background:linear-gradient(165deg,#1C63B8,#2F86E0 55%,#3B92EC);overflow:hidden;min-height:520px;padding:46px 22px 22px;color:#fff;display:flex;flex-direction:column;align-items:center}
.ps-status{font-size:.78rem;font-weight:600;opacity:.95;letter-spacing:.02em;display:flex;align-items:center;gap:7px}
.ps-status .live{width:8px;height:8px;border-radius:50%;background:#52E0A0;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(82,224,160,.35)}50%{box-shadow:0 0 0 7px rgba(82,224,160,.05)}}
.ps-avatar{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;margin:30px 0 16px;color:#fff}
.ps-avatar svg{width:54px;height:54px}
.ps-name{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.ps-sub{font-size:.85rem;opacity:.85;margin-top:2px;text-align:center}
.ps-wave{display:flex;align-items:center;gap:4px;height:38px;margin:22px 0 18px}
.ps-wave span{width:4px;border-radius:3px;background:rgba(255,255,255,.85);animation:eq 1.1s ease-in-out infinite}
.ps-wave span:nth-child(1){height:30%;animation-delay:0s}.ps-wave span:nth-child(2){height:65%;animation-delay:.1s}.ps-wave span:nth-child(3){height:100%;animation-delay:.2s}.ps-wave span:nth-child(4){height:55%;animation-delay:.3s}.ps-wave span:nth-child(5){height:85%;animation-delay:.4s}.ps-wave span:nth-child(6){height:40%;animation-delay:.5s}.ps-wave span:nth-child(7){height:72%;animation-delay:.6s}.ps-wave span:nth-child(8){height:48%;animation-delay:.7s}.ps-wave span:nth-child(9){height:90%;animation-delay:.8s}.ps-wave span:nth-child(10){height:34%;animation-delay:.9s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.ps-bubble{background:rgba(255,255,255,.95);color:var(--ink);font-size:.82rem;font-weight:500;line-height:1.45;border-radius:16px 16px 16px 4px;padding:12px 14px;margin-top:auto;box-shadow:0 10px 22px -12px rgba(0,0,0,.4)}
.ps-actions{display:flex;justify-content:center;gap:26px;margin-top:18px}
.ps-actions i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.ps-actions i.end{background:#FF4B4B}
.ps-actions i svg{width:20px;height:20px;color:#fff}

/* Generisches Visual-Mockup (Karte für Dokument/Tool-Mockups je Seite) */
.mockup{position:relative;max-width:420px;margin:0 auto;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden}
.mockup-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.mockup-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.mockup-bar span{margin-left:8px;font-size:.78rem;color:var(--ink-faint);font-weight:600}
.mockup-body{padding:22px 24px}

/* Sections */
.sec{padding:74px 0;position:relative}
.sec.tint{background:var(--bg-2)}
.sec-head{max-width:46rem;margin:0 auto 40px;text-align:center}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.sec-head p{margin-top:13px;font-size:1.05rem}

/* Audio-Demo */
.demo{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);padding:26px 28px;box-shadow:var(--sh-lg);display:flex;gap:22px;align-items:center}
.demo-avatar{width:76px;height:76px;flex:none;border-radius:50%;background:linear-gradient(150deg,var(--blue),var(--blue-deep));display:grid;place-items:center;color:#fff;box-shadow:0 14px 26px -14px rgba(28,99,184,.8)}
.demo-avatar svg{width:44px;height:44px}
.demo-body{flex:1;min-width:0}
.demo-top{display:flex;align-items:center;gap:14px;margin-bottom:13px}
.demo-play{width:52px;height:52px;flex:none;border-radius:50%;border:none;background:var(--grad-btn);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s;box-shadow:0 14px 26px -14px rgba(28,99,184,.8)}
.demo-play:hover{transform:scale(1.06)}
.demo-play svg{width:20px;height:20px}
.demo-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.demo-meta strong{font-size:1rem;color:var(--ink)}
.demo-sub{font-size:.82rem;color:var(--ink-faint)}
.demo-time{font-size:.85rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.demo-wave{display:block;width:100%;height:56px}
.demo-hint{font-size:.85rem;color:var(--ink-faint);margin-top:8px}

/* Formular */
.lead-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);padding:30px;box-shadow:var(--sh-lg);scroll-margin-top:90px}
.lead-card h2{font-size:1.4rem;margin-bottom:5px}
.lead-card .sub{font-size:.95rem;color:var(--ink-soft-2);margin-bottom:20px}
.field{margin-bottom:10px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row .field{margin-bottom:10px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft-2);margin-bottom:4px}
.field label .optnote{font-weight:500;color:var(--ink-faint)}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:11px;padding:9px 14px;color:var(--ink);font-family:inherit;font-size:.97rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field textarea{resize:vertical;min-height:56px}
.consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 12px}
.consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--blue);cursor:pointer}
.consent label{font-size:.8rem;font-weight:500;color:var(--ink-soft-2);line-height:1.5;cursor:pointer}
.consent a{color:var(--blue-deep);border-bottom:1px solid var(--blue-soft)}
.card-fine{font-size:.78rem;color:var(--ink-faint);margin-top:12px;text-align:center}
.form-ok{display:none;text-align:center;padding:14px 6px 4px}
.form-ok.on{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.form-ok .ck{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--ok-tint);color:var(--ok-deep);border:1px solid var(--ok-line);display:grid;place-items:center}
.form-ok .ck svg{width:26px;height:26px}
.form-ok h3{font-size:1.2rem;margin-bottom:6px}
.form-err{color:var(--danger);margin-top:12px;font-weight:600;font-size:.9rem}

/* Painpoint Duo */
.pp{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pp-card{border-radius:var(--r);padding:26px 28px;border:1px solid}
.pp-card.no{background:#fff;border-color:var(--danger-line)}
.pp-card.yes{background:linear-gradient(160deg,var(--ok-tint),#fff);border-color:var(--ok-line)}
.pp-card .tag{font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pp-card.no .tag{color:var(--danger)} .pp-card.yes .tag{color:var(--ok-deep)}
.pp-card .tag .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.pp-card.no .tag .ic{background:var(--danger-tint)} .pp-card.yes .tag .ic{background:#fff;border:1px solid var(--ok-line)}
.pp-card .tag svg{width:15px;height:15px}
.pp-card h3{font-size:1.12rem;margin-bottom:8px}
.pp-card p{font-size:.95rem}
.pp-card ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:7px}
.pp-card li{font-size:.93rem;color:var(--ink-soft-2);padding-left:16px;position:relative}
.pp-card.no li::before{content:"–";position:absolute;left:0;color:var(--ink-faint)}
.pp-card.yes li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto;grid-auto-rows:1fr}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.bcard .ic{width:46px;height:46px;border-radius:13px;background:var(--blue-tint);color:var(--blue-deep);display:grid;place-items:center;margin-bottom:14px;border:1px solid var(--line)}
.bcard .ic svg{width:24px;height:24px}
.bcard h3{font-size:1.08rem;margin-bottom:6px}
.bcard p{font-size:.93rem}
.bcard.feature{grid-column:span 2;background:linear-gradient(150deg,var(--blue-tint),#fff);border-color:var(--line-strong)}
.bcard.dark{background:linear-gradient(155deg,#1C63B8,#2F86E0);color:#fff;border-color:transparent}
.bcard.dark .ic{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.25)}
.bcard.dark h3{color:#fff} .bcard.dark p{color:rgba(255,255,255,.92)}

/* 3 Karten / tcard */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.tcard .ic,.tcard .num{width:46px;height:46px;border-radius:13px;background:var(--blue-tint);color:var(--blue-deep);display:grid;place-items:center;margin-bottom:14px;border:1px solid var(--line);font-weight:800;font-size:1.2rem}
.tcard .ic svg{width:24px;height:24px}
.tcard h3{font-size:1.06rem;margin-bottom:5px}
.tcard p{font-size:.93rem}

/* Flow + Message-Mockup */
.flow-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;max-width:1040px;margin:0 auto}
.msg-mock{max-width:300px;margin:0 auto;background:#fff;border:1px solid var(--line-strong);border-radius:26px;padding:18px;box-shadow:var(--sh-lg)}
.msg-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.msg-head .av{width:38px;height:38px;flex:none;border-radius:50%;background:linear-gradient(150deg,var(--blue),var(--blue-deep));display:grid;place-items:center;color:#fff}
.msg-head .av svg{width:21px;height:21px}
.msg-head strong{font-size:.92rem}
.msg-head span{font-size:.74rem;color:var(--ink-faint)}
.msg-bubble{background:var(--blue-tint);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:14px;font-size:.86rem}
.msg-bubble .row{display:flex;gap:8px;margin-bottom:7px}
.msg-bubble .row:last-child{margin-bottom:0}
.msg-bubble .k{color:var(--ink-faint);min-width:74px;font-weight:600;font-size:.78rem;flex:none}
.msg-bubble .v{color:var(--ink);font-weight:600}
.msg-bubble .urg{color:var(--danger);font-weight:700}
.msg-time{font-size:.72rem;color:var(--ink-faint);text-align:right;margin-top:8px}
.flow-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.flow-list li{display:flex;gap:16px;align-items:flex-start}
.flow-list .num{width:38px;height:38px;flex:none;border-radius:12px;background:var(--grad-btn);color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 12px 22px -14px rgba(28,99,184,.8)}
.flow-list h3{font-size:1.06rem;margin-bottom:3px}
.flow-list p{font-size:.93rem}

/* Trust */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:0 auto}
.vcard{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);padding:26px 28px;display:flex;gap:16px;align-items:flex-start}
.vcard .ic{width:46px;height:46px;flex:none;border-radius:13px;background:var(--ok-tint);color:var(--ok-deep);border:1px solid var(--ok-line);display:grid;place-items:center}
.vcard .ic svg{width:24px;height:24px}
.vcard h3{font-size:1.08rem;margin-bottom:4px}
.vcard p{font-size:.93rem}

/* Preis / Offer */
.offer{max-width:700px;margin:0 auto;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);padding:36px;box-shadow:var(--sh-lg);text-align:center}
.price-grid{display:flex;align-items:flex-start;justify-content:center;gap:24px;flex-wrap:wrap}
.pcol{display:flex;flex-direction:column;align-items:center}
.pmain{font-size:2rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.pcol small{font-size:.9rem;font-weight:500;color:var(--ink-faint);margin-top:6px}
.pplus{font-size:1.6rem;font-weight:700;color:var(--ink-faint);margin-top:4px}
.offer .price{font-size:2.2rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.offer .price small{display:block;font-size:.92rem;font-weight:500;color:var(--ink-faint);margin-top:6px}
.offer .note{margin-top:14px;font-size:.97rem}
.incl{text-align:left;margin:24px auto 0;max-width:540px;list-style:none;display:flex;flex-direction:column;gap:12px}
.incl li{display:flex;gap:12px;font-weight:700;color:var(--ink);font-size:.98rem}
.incl small{display:block;font-weight:400;color:var(--ink-soft-2);font-size:.86rem;margin-top:2px}
.incl .ck{width:24px;height:24px;flex:none;border-radius:8px;background:var(--ok-tint);color:var(--ok-deep);border:1px solid var(--ok-line);display:grid;place-items:center;margin-top:1px}
.incl .ck svg{width:13px;height:13px}
.offer .btn{margin:28px auto 0;max-width:380px}
.offer-disc{font-size:.82rem;color:var(--ink-faint);margin-top:16px;line-height:1.5}

/* Final-Form-Section */
.final-form{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;background:#fff;border:1px solid var(--line-strong);border-radius:30px;padding:44px;box-shadow:var(--sh-lg)}
.final-form>div:not(.ff-pitch){margin-top:30px}
.final-form .ff-pitch h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.final-form .ff-pitch p{margin-top:12px;font-size:1.02rem}
.final-form .ff-pitch ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.final-form .ff-pitch li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:.95rem}
.final-form .ff-pitch .ck{width:22px;height:22px;flex:none;border-radius:7px;background:var(--ok-tint);color:var(--ok-deep);border:1px solid var(--ok-line);display:grid;place-items:center;margin-top:1px}
.final-form .ff-pitch .ck svg{width:13px;height:13px}
.final-form .lead-card{box-shadow:none;border:1px solid var(--line);padding:0;max-width:none}

/* Footer */
footer{border-top:1px solid var(--line);padding:28px 0;background:#fff}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:var(--ink-faint)}
.foot a{color:var(--ink-soft-2);margin-left:18px}
.foot a:hover{color:var(--blue-deep)}
/* Social-Icons im Footer (2026-07-15). Inline-SVG, currentColor -> erbt Footer-Farbe.
   margin-left:0 hebt die .foot a-Regel auf, sonst schoeben die Icons auseinander. */
.foot-social{display:flex;align-items:center;gap:14px}
.foot-social a{margin-left:0;display:inline-flex;color:var(--ink-faint);transition:color .15s}
.foot-social a:hover{color:var(--blue-deep)}
.foot-social svg{width:19px;height:19px;display:block;fill:currentColor}
.foot-bot .foot-social{margin:0 auto}

/* Motion */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:960px){
  body{font-size:17px}
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .bento,.three{grid-template-columns:1fr 1fr}
  .bcard.feature{grid-column:span 2}
  .flow-grid,.final-form{grid-template-columns:1fr;gap:34px}
  .final-form>div:not(.ff-pitch){margin-top:0}
  .pp,.trust-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .nav{height:70px;gap:10px}
  .brand{font-size:.88rem;gap:8px;line-height:1.08}
  .brand img{width:34px;height:34px}
  .brand small{font-size:.55rem;margin-top:0;line-height:1.2;letter-spacing:.04em}
  .nav-cta{padding:9px 13px;font-size:.8rem;text-align:center;line-height:1.2}
  .hero-points{grid-template-columns:1fr}
  .bento,.three{grid-template-columns:1fr}
  .bcard.feature{grid-column:span 1}
  .demo{flex-direction:column;text-align:center}.demo-meta{align-items:center}
  .price-grid{flex-direction:column;gap:8px;align-items:center}.pplus{margin:0}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ps-wave span,.ps-status .live{animation:none}
}

/* Footer-Navi: interne Verlinkung zu Start + Service-LPs */
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.foot-nav a{color:var(--ink-soft-2);font-size:.85rem;font-weight:500}
.foot-nav a:hover{color:var(--blue-deep)}

/* Breadcrumb (Orientierung; nutzt BreadcrumbList-Schema) */
.crumbs{padding-top:14px;font-size:.82rem;color:var(--ink-faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--ink-soft-2)}
.crumbs a:hover{color:var(--blue-deep)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}

/* ===== Blog & Case Study ===== */
.article{max-width:760px;margin:0 auto;padding:6px 0 0}
.article h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:6px 0 14px}
.article h2{font-size:1.45rem;margin:34px 0 12px}
.article h3{font-size:1.12rem;margin:24px 0 8px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 16px 22px}.article li{margin-bottom:8px}
.article a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.article figure{margin:20px 0}
.article figure img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:0}
.article figcaption{font-size:.85rem;color:var(--ink-faint);margin-top:8px;text-align:center}
.tldr{background:var(--blue-tint);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;padding:16px 18px;margin:0 0 26px}
.tldr b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:6px}
.byline{display:flex;align-items:center;gap:12px;margin:0 0 24px;font-size:.9rem;color:var(--ink-faint)}
.byline img{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);margin:0;object-fit:cover}
.byline b{color:var(--ink);font-weight:650}
.faq{max-width:820px;margin:28px auto 0}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:650;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .faq-a{padding:0 18px 15px;color:var(--ink-soft-2)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:8px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--line-strong)}
.blog-card .bc-body{padding:20px;display:flex;flex-direction:column;flex:1}
.blog-card h3{font-size:1.08rem;margin:0 0 8px}
.blog-card p{font-size:.92rem;color:var(--ink-soft-2);margin:0 0 14px}
.blog-card .bc-meta{font-size:.8rem;color:var(--ink-faint);margin-top:auto}
.cs-quote{background:var(--blue-tint);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:22px 0;font-size:1.05rem;color:var(--ink)}
.cs-quote cite{display:block;margin-top:10px;font-size:.85rem;color:var(--ink-faint);font-style:normal}
.cs-steps{counter-reset:step;margin:18px 0;padding:0;list-style:none}
.cs-steps li{position:relative;padding-left:46px;margin-bottom:18px}
.cs-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:24px 0}
.cs-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.cs-stat b{display:block;font-size:clamp(1.15rem,4.5vw,1.8rem);color:var(--blue-deep);font-weight:800;line-height:1.1}
.cs-stat span{font-size:.85rem;color:var(--ink-soft-2)}
@media(max-width:560px){.cs-stats{grid-template-columns:1fr}}

/* ===== Top-Nav auf Content-Seiten (Projekte/Blog) ===== */
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:.92rem;font-weight:500;color:#465a72;transition:color .2s}
.nav-links a:hover{color:var(--blue-deep)}
.nav-links a.nav-cta{color:#fff}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);display:block;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:680px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--bg);border-bottom:1px solid var(--line);padding:20px 22px;gap:16px;box-shadow:var(--sh-lg)}
  .nav-links.open a.nav-cta{width:100%;text-align:center}
  .burger{display:flex}
}

/* Active-Nav + zentrierte Artikel-Bilder */
.nav-links a{position:relative}
.nav-links a.active:not(.nav-cta){color:var(--blue-deep)}
.nav-links a.active:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--blue)}
.article figure{text-align:center}
.article figure img{display:block;margin:0 auto}

/* Einheitliches Hero-Bild (Blog + Fallstudien): volle Breite x 400px, gecroppt */
.article figure img.hero-img{width:100%;height:400px;object-fit:cover;object-position:center;border-radius:14px;border:1px solid var(--line);display:block;margin:0}
@media(max-width:680px){.article figure img.hero-img{height:220px}}

/* Scrollbar-Platz immer reservieren -> kein horizontaler Sprung zwischen kurzen/langen Seiten */
html{scrollbar-gutter:stable}

/* Unsichtbares Struktur-Label (Heading-Hierarchie ohne Design-Aenderung). HD-173, 2026-07-17. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}