@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   WeAutomize Onepager — Design-System v3
   Prinzipien:
   - Tiefe über zweischichtige Schatten (Kontakt + Ambient),
     Lichtquelle konsequent oben
   - Ein Eckenradius-System: 12 / 20 / 32
   - Bento nur, wo Inhalte parallel sind; Anker ≈ 2x Fläche
   - Kleine Elemente bleiben klein (Trust-Leiste)
   - Animation dezent, mit prefers-reduced-motion-Fallback
   ============================================================ */

:root{
  --dark:#0c1626; --dark2:#101d31; --navy:#16304f; --ink:#101d2d;
  --mut:#5a6a7a; --mutd:#9db0c7;
  --bg:#ffffff; --bg2:#f4f6fa; --line:#e5e9f0; --lined:#22364f;
  --blue:#2563eb; --blue2:#1d4fd8; --cyan:#38bdf8;

  /* Radius-System */
  --r-s:12px; --r-m:20px; --r-l:32px;

  /* Elevation: Kontaktschatten + Ambientschatten */
  --e1: 0 1px 2px rgba(16,29,45,.05), 0 4px 12px rgba(16,29,45,.06);
  --e2: 0 2px 4px rgba(16,29,45,.06), 0 14px 30px rgba(16,29,45,.10);
  --e3: 0 4px 8px rgba(16,29,45,.08), 0 28px 56px rgba(16,29,45,.16);
  /* Lichtkante für dunkle Flächen */
  --edge-dark: inset 0 1px 0 rgba(255,255,255,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.blue{color:var(--cyan)}
h2 .blue{color:var(--blue)}

/* ---------- Navigation ---------- */
header{position:sticky;top:0;background:rgba(12,22,38,.86);z-index:50;backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo img{height:24px;display:block}
nav a{color:var(--mutd);text-decoration:none;margin-left:24px;font-size:14.5px;transition:color .15s}
nav a:hover{color:#fff}
nav .cta{display:inline-block;color:#fff;background:var(--blue);padding:10px 18px;border-radius:999px;font-weight:600;white-space:nowrap;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(37,99,235,.4)}
nav .cta:hover{background:var(--blue2)}
@media(max-width:1120px){nav a{margin-left:15px;font-size:13.5px}}
@media(max-width:930px){nav a:not(.cta){display:none}nav .cta{margin-left:0;font-size:14px;padding:11px 18px}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#2f6cf0,var(--blue2));color:#fff;text-decoration:none;font-weight:600;font-size:16.5px;padding:15px 28px;border-radius:999px;margin-top:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(29,79,216,.3), 0 10px 26px rgba(37,99,235,.34);transition:transform .18s ease, box-shadow .18s ease}
.btn::after{content:"→";font-size:18px;transition:transform .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 8px rgba(29,79,216,.32), 0 16px 36px rgba(37,99,235,.42)}
.btn:hover::after{transform:translateX(3px)}
.btn.light{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(16,29,45,.14), 0 8px 22px rgba(16,29,45,.18)}
.btn.light:hover{background:var(--bg2)}

/* ---------- Hero: dunkel, Aurora-Drift, Ringe, Dot-Raster ---------- */
.hero{background:var(--dark);color:#fff;text-align:center;position:relative;overflow:hidden;border-radius:0 0 var(--r-l) var(--r-l)}
/* feines Punktraster, nach unten ausgeblendet */
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(157,176,199,.13) 1px, transparent 1.4px);background-size:26px 26px;mask-image:radial-gradient(70% 60% at 50% 32%, black 0%, transparent 100%);-webkit-mask-image:radial-gradient(70% 60% at 50% 32%, black 0%, transparent 100%);pointer-events:none}
/* konzentrische Ringe */
.hero::after{content:"";position:absolute;left:50%;top:36%;width:1100px;height:1100px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(157,176,199,.13);box-shadow:0 0 0 130px rgba(157,176,199,.045), 0 0 0 260px rgba(157,176,199,.028);pointer-events:none}
/* Aurora: zwei weiche Farbfelder, sehr langsamer Drift */
.glow{position:absolute;border-radius:50%;filter:blur(85px);pointer-events:none;will-change:transform}
.glow.g1{width:640px;height:520px;left:50%;top:-6%;margin-left:-480px;background:radial-gradient(closest-side, rgba(37,99,235,.42), transparent 70%);animation:drift1 26s ease-in-out infinite alternate}
.glow.g2{width:560px;height:460px;left:50%;top:8%;margin-left:20px;background:radial-gradient(closest-side, rgba(56,189,248,.26), transparent 70%);animation:drift2 34s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(-2.5%,-2%,0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}
@keyframes drift2{from{transform:translate3d(3%,2%,0) scale(1.05)}to{transform:translate3d(-3%,-3%,0) scale(1)}}
@media (prefers-reduced-motion: reduce){.glow{animation:none}.hero .wrap>*{animation:none !important;opacity:1 !important;transform:none !important}}
.hero .wrap{padding:104px 24px 108px;max-width:920px;position:relative;z-index:1}
/* sanfter Auftritt der Hero-Inhalte */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.hero .wrap>*{animation:rise .7s cubic-bezier(.22,.8,.32,1) both}
.hero .wrap>*:nth-child(2){animation-delay:.08s}
.hero .wrap>*:nth-child(3){animation-delay:.16s}
.hero .wrap>*:nth-child(4){animation-delay:.24s}
.hero .wrap>*:nth-child(5){animation-delay:.32s}
.badge{display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(56,189,248,.28);background:rgba(56,189,248,.07);padding:7px 16px;border-radius:999px;margin-bottom:28px;font-weight:600;box-shadow:var(--edge-dark)}
h1{font-size:clamp(30px,4.8vw,52px);line-height:1.12;font-weight:800;letter-spacing:-1px}
.hero p.sub{font-size:clamp(16.5px,2vw,19px);color:var(--mutd);margin:24px auto 0;max-width:640px}
.hero .note{font-size:13.5px;color:#748aa6;margin-top:14px}

/* ---------- Trust-Leiste: klein, eine Zeile, schwebt über der Herokante ---------- */
.trustbar-holder{position:relative;z-index:3;padding:0 24px}
.trustbar{max-width:1000px;margin:-36px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--e2);display:flex;align-items:center;justify-content:space-between;gap:10px 28px;padding:16px 30px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut);line-height:1.35}
.trust-item b{color:var(--ink);font-weight:700;white-space:nowrap}
.trust-item svg{width:17px;height:17px;stroke:var(--blue);flex:0 0 auto}
@media(max-width:760px){.trustbar{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 22px}}

/* ---------- Sektionen ---------- */
section{padding:88px 0}
.sec-card{background:var(--bg2);border:1px solid #ecf0f6;border-radius:var(--r-l);padding:72px 0;margin:0 16px;box-shadow:inset 0 1px 0 #fff, var(--e1)}
.sec-card>.inner{max-width:1088px;margin:0 auto;padding:0 24px}
.kicker{display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:12px;background:#e8effc;padding:5px 14px;border-radius:999px}
h2{font-size:clamp(25px,3.6vw,37px);color:var(--ink);line-height:1.16;margin-bottom:16px;letter-spacing:-.6px;font-weight:800}
.lead{font-size:17.5px;color:var(--mut);max-width:720px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Ausgangslage: Bento mit Eye-Catchern ----------
   3 Spalten, Zickzack: breit+schmal / schmal+breit.
   Jede Kachel: ein Pain + ein konkretes Visual (Kurve, Uhr,
   verstaubte Karteikarten, unbeantwortete Mails). */
.pbento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:960px){.pbento{grid-template-columns:1fr}}
.pb{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:28px 30px;position:relative;overflow:hidden;box-shadow:var(--e1);display:flex;flex-direction:column;justify-content:flex-end;min-height:250px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.pb:hover{transform:translateY(-5px);box-shadow:var(--e3);border-color:#c6d8f7}
.pb h3{font-size:17px;color:var(--ink);margin-bottom:6px;line-height:1.35;font-weight:700;letter-spacing:-.2px}
.pb p{font-size:14.5px;color:var(--mut)}
.pb.wide{grid-column:span 2;flex-direction:row;align-items:center;gap:36px}
@media(max-width:960px){.pb.wide{grid-column:span 1;flex-direction:column;align-items:stretch;gap:20px}}
.pb-txt{flex:1}
.pb-txt h3{font-size:19px}
.pb-txt p{font-size:15px}
/* Visual 1: fallende Anfragen-Kurve */
.pb-chart{flex:1;position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,#f7f9fd,#eef2f9);border:1px solid #e8edf5;border-radius:14px;padding:16px 0 0;box-shadow:inset 0 1px 0 #fff}
.pb-chart svg{display:block;width:100%;height:96px}
.pb-tag{position:absolute;top:14px;left:16px;font-size:12px;font-weight:700;color:#b45309;background:#fef3c7;border:1px solid #fde68a;padding:4px 11px;border-radius:999px}
/* Visual 2: Uhr-Kachel dunkel */
.pb.navy{background:linear-gradient(165deg,#122341,var(--dark));border-color:transparent;box-shadow:var(--edge-dark), var(--e2)}
.pb.navy h3{color:#fff}
.pb.navy p{color:var(--mutd)}
.pb.navy:hover{box-shadow:var(--edge-dark), var(--e3)}
.pb-clock{font-size:46px;font-weight:800;letter-spacing:-1px;color:var(--cyan);line-height:1;margin-bottom:auto;padding-bottom:26px}
.pb-clock span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--mutd);margin-top:10px}
/* Visual 3: verstaubte Karteikarten */
.pb-cards{display:flex;flex-direction:column;gap:0;margin-bottom:auto;padding-bottom:24px}
.pcard{display:inline-block;align-self:flex-start;background:var(--bg2);border:1px dashed #c9d2de;border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:600;color:#8494a7;box-shadow:0 3px 8px rgba(16,29,45,.06)}
.pcard:nth-child(2){transform:translateX(26px);margin-top:2px}
.pcard:nth-child(3){transform:translateX(52px);margin-top:2px}
/* Visual 4: unbeantwortete Angebots-Mails */
.pb-mails{flex:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:10px}
.pmail{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:0 2px 4px rgba(16,29,45,.05), 0 10px 22px rgba(16,29,45,.07)}
.pmail:nth-child(2){transform:translateX(18px)}
.pmail.dim{opacity:.55;transform:translateX(6px)}
.pdot{width:9px;height:9px;border-radius:50%;background:#c9d2de;flex:0 0 auto}
.pdot.g{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.pdot.o{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.ptime{margin-left:auto;font-size:12px;font-weight:600;color:var(--mut)}
.ptime.over{color:#b45309;background:#fef3c7;border:1px solid #fde68a;padding:2px 9px;border-radius:999px}

/* ---------- Eigener Abschnitt: Kommt Ihnen das bekannt vor?
   Dunkles Panel als Kontrast zur hellen Ausgangslage darüber. */
.bekannt-sec{padding:0 16px 88px}
.statement{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;max-width:1088px;margin:0 auto;background:linear-gradient(165deg,#101f38,var(--dark));color:#fff;border-radius:var(--r-l);padding:64px 56px;position:relative;overflow:hidden;box-shadow:var(--edge-dark), var(--e2)}
@media(max-width:860px){.statement{grid-template-columns:1fr;padding:44px 26px}}
.statement::before{content:"";position:absolute;right:-140px;top:50%;transform:translateY(-50%);width:560px;height:560px;border-radius:50%;border:1.5px solid rgba(157,176,199,.16);box-shadow:0 0 0 90px rgba(157,176,199,.055) inset, 0 0 0 180px rgba(157,176,199,.035) inset;pointer-events:none}
.statement::after{content:"";position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side, rgba(37,99,235,.28), transparent 70%);filter:blur(50px);pointer-events:none}
.statement>div{position:relative;z-index:1}
.statement .badge{margin-bottom:20px}
.statement h3{font-size:clamp(24px,3vw,32px);line-height:1.18;font-weight:800;color:#fff;letter-spacing:-.5px}
.st-pains{list-style:none;margin-top:18px}
.st-pains li{font-size:16px;color:#dbe6f5;font-weight:500;padding:9px 0 9px 30px;position:relative;border-bottom:1px solid rgba(157,176,199,.14)}
.st-pains li:last-child{border-bottom:none}
.st-pains li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:6px;border-left:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);transform:rotate(-45deg)}
.statement .fine{font-size:14.5px;color:var(--mutd);margin-top:18px;max-width:420px}
.chips{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.chip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(229,233,240,.9);border-radius:14px;padding:13px 20px;font-weight:600;font-size:15px;color:var(--ink);box-shadow:0 2px 4px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.32);transition:transform .25s ease}
.chip:hover{transform:translateY(-3px)}
.chip .tick{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.chip:nth-child(2){margin-left:26px}
.chip:nth-child(3){margin-left:52px}
.chip .tick.b{background:var(--blue)}
.chip .tick.c{background:var(--cyan)}
.chip .tick.d{background:var(--dark)}
@media(max-width:860px){.chip:nth-child(2){margin-left:14px}.chip:nth-child(3){margin-left:28px}}

/* ---------- Ablauf-Karten ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:30px 26px;box-shadow:var(--e1);transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--e2)}
.step-n{width:40px;height:40px;border-radius:12px;background:linear-gradient(180deg,#16283f,var(--dark));color:var(--cyan);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;margin-bottom:16px;box-shadow:var(--edge-dark), 0 4px 10px rgba(12,22,38,.25)}
.card h3{font-size:19px;color:var(--ink);margin-bottom:10px;font-weight:700}
.card p{font-size:15px;color:var(--mut)}
.cta-row{text-align:center;margin-top:44px}
.cta-row .btn{margin-top:0}

/* ---------- Bento: Das System im Detail ----------
   4 Spalten x 2 Zeilen. Anker (2x2) = doppelte Fläche
   der größten Nebenkachel (2x1). Einheitlicher Gutter 20px,
   Innenpadding 30px, ein Radius. Ein Gedanke pro Kachel. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(205px,auto);gap:20px;margin-top:44px}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
.b{border-radius:var(--r-m);padding:28px 30px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease}
.b h3{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.2px}
.b p{font-size:14px;margin-top:6px}
.b.white{background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border:1px solid var(--line);box-shadow:var(--e1);color:var(--ink)}
.b.white::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:0;transition:opacity .25s ease}
.b.white::after{content:"";position:absolute;top:-70px;right:-70px;width:170px;height:170px;border-radius:50%;background:radial-gradient(closest-side,rgba(56,189,248,.10),transparent);pointer-events:none}
.b.white p{color:var(--mut)}
.b.white:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:#c6d8f7}
.b.white:hover::before{opacity:1}
.b.navy{background:linear-gradient(165deg,#122341,var(--dark));color:#fff;box-shadow:var(--edge-dark), var(--e2)}
.b.navy h3{color:#fff}
.b.navy p{color:var(--mutd)}
.b.navy:hover{transform:translateY(-4px);box-shadow:var(--edge-dark), var(--e3)}
.b-anchor{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
@media(max-width:960px){.b-anchor{grid-column:span 2;grid-row:auto;min-height:400px}}
@media(max-width:560px){.b-anchor{grid-column:span 1}}
.b-wide{grid-column:span 2;flex-direction:row;align-items:center;gap:24px}
@media(max-width:560px){.b-wide{grid-column:span 1;flex-direction:column;align-items:flex-start}}
.b-wide .txt{flex:1}
.b .num{font-size:40px;font-weight:800;line-height:1;letter-spacing:-1px;margin-bottom:10px;color:var(--ink)}
.b.navy .num{color:#fff}
.b .icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8effc,#e2f4fd);box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(37,99,235,.10);margin-bottom:14px;flex:0 0 auto}
.b .icon svg{width:22px;height:22px;stroke:var(--blue)}
.b.navy .icon{background:rgba(56,189,248,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.b.navy .icon svg{stroke:var(--cyan)}
/* Nachrichten-Sequenz im Anker: Tag 1 E-Mail → Follow-up mit Video.
   Alles waagerecht, Tiefe nur über Schatten. */
.seq{position:absolute;top:26px;left:30px;right:30px;display:flex;flex-direction:column}
.mock{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 2px 4px rgba(0,0,0,.18), 0 20px 40px rgba(0,0,0,.35);color:var(--ink)}
.mock .mhead{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}
.mock .mdot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2);flex:0 0 auto}
.mock .mdot.o{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.mock .mstate{margin-left:auto;font-size:10px;font-weight:700;color:#047857;background:#d1fae5;padding:2px 8px;border-radius:999px;letter-spacing:.04em}
.mock .mtext{font-size:12.5px;line-height:1.5;color:var(--mut);margin-top:9px;font-style:italic}
.mflow{display:flex;align-items:center;gap:9px;padding:11px 6px;font-size:11.5px;font-weight:600;color:var(--mutd)}
.mflow-dot{width:22px;height:22px;border-radius:50%;background:rgba(56,189,248,.14);color:var(--cyan);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(56,189,248,.3)}
.mock .mvideo{margin-top:10px;border-radius:10px;background:linear-gradient(140deg,#16304f,#0c1626);height:62px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:12.5px;font-weight:600;box-shadow:var(--edge-dark);position:relative}
.mock .mplay{width:28px;height:28px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px rgba(37,99,235,.25)}
.mock .mplay::after{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff;margin-left:2px}
.mock .mdur{position:absolute;right:10px;bottom:7px;font-size:10px;font-weight:700;color:#dbeafe;background:rgba(255,255,255,.14);padding:2px 8px;border-radius:999px}
/* Schritt 3: Lead-Scoring + Anrufempfehlung */
.mock .mdot.c{background:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.mscore{margin-left:auto;font-size:10px;font-weight:700;color:#b91c1c;background:#fee2e2;padding:2px 9px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.mstats{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mstat{font-size:11px;font-weight:600;color:var(--navy);background:var(--bg2);border:1px solid #e2e8f2;padding:4px 10px;border-radius:999px}
.mreco{margin-top:10px;font-size:11.5px;font-weight:700;color:var(--blue2);background:#e8effc;border:1px solid #d4e0f9;border-radius:9px;padding:8px 11px}
.b-anchor .cap{position:relative;z-index:1;margin-top:auto;padding-top:456px}
@media(max-width:960px){.b-anchor .cap{padding-top:485px}}
/* Aufwands-Balken in der breiten Kachel */
.hours{flex:0 0 190px;display:flex;flex-direction:column;gap:12px;background:var(--bg2);border:1px solid #e8edf5;border-radius:12px;padding:16px 16px;box-shadow:inset 0 1px 0 #fff}
@media(max-width:560px){.hours{flex:none;align-self:stretch}}
.hrow{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--mut)}
.hlabel{flex:0 0 42px}
.hbar{flex:1;height:8px;border-radius:4px;background:#e2e8f2;overflow:hidden}
.hfill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.hfill.full{width:100%}
.hfill.short{width:14%}
.hval{flex:0 0 auto;font-weight:600;color:var(--ink);font-size:11px}

/* ---------- Timeline 90 Tage ---------- */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px;position:relative}
.timeline::before{content:"";position:absolute;top:-22px;left:4%;right:4%;height:2px;background:linear-gradient(90deg,var(--blue) 0%,var(--cyan) 100%);border-radius:2px;opacity:.35}
@media(max-width:960px){.timeline{grid-template-columns:repeat(2,1fr)}.timeline::before{display:none}}
@media(max-width:560px){.timeline{grid-template-columns:1fr}}
.tl{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:24px 20px;position:relative;box-shadow:var(--e1);transition:transform .25s ease, box-shadow .25s ease}
.tl::before{content:"";position:absolute;top:-27px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff, 0 0 0 5.5px rgba(37,99,235,.35)}
@media(max-width:960px){.tl::before{display:none}}
.tl:hover{transform:translateY(-4px);box-shadow:var(--e2)}
.tl .week{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:#e8effc;padding:4px 12px;border-radius:999px;margin-bottom:12px}
.tl h3{font-size:16.5px;color:var(--ink);margin-bottom:6px;font-weight:700}
.tl p{font-size:14.5px;color:var(--mut)}

/* ---------- Leistungen ---------- */
.price-card{display:flex;flex-direction:column}
.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:8px}
.price{font-size:28px;font-weight:800;color:var(--ink);margin:6px 0 2px;letter-spacing:-.4px}
.price-note{font-size:13.5px;color:var(--mut);margin-bottom:14px}
.price-card ul{list-style:none;margin-top:6px;flex:1}
.price-card li{font-size:15px;color:var(--ink);padding:7px 0 7px 26px;position:relative}
.price-card li::before{content:"";position:absolute;left:2px;top:14px;width:13px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.featured{border:1.5px solid var(--blue);position:relative;box-shadow:0 2px 4px rgba(37,99,235,.08), 0 18px 44px rgba(37,99,235,.16);transform:translateY(-6px)}
.featured:hover{transform:translateY(-10px)}
.featured .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#2f6cf0,var(--blue2));color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(37,99,235,.35)}
@media(max-width:860px){.featured{transform:none}.featured:hover{transform:translateY(-4px)}}

/* ---------- Fit / No-Fit ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit{border-radius:var(--r-m);padding:30px 28px;border:1px solid var(--line);background:#fff;box-shadow:var(--e1)}
.fit.yes{border-top:4px solid var(--blue)}
.fit.no{border-top:4px solid #c9d2de}
.fit h3{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:14px}
.fit ul{list-style:none}
.fit li{font-size:15px;color:var(--ink);padding:8px 0 8px 30px;position:relative;border-bottom:1px solid var(--bg2)}
.fit li:last-child{border-bottom:none}
.fit.yes li::before{content:"";position:absolute;left:2px;top:16px;width:13px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.fit.no li{color:var(--mut)}
.fit.no li::before{content:"×";position:absolute;left:4px;top:7px;color:#9aa8b8;font-size:18px;font-weight:700}

/* ---------- Garantie-Band ---------- */
.garantie-sec{padding:0 16px}
.garantie-inner{background:linear-gradient(165deg,#101f38,var(--dark));color:#fff;border-radius:var(--r-l);padding:64px 48px;position:relative;overflow:hidden;box-shadow:var(--edge-dark), var(--e2)}
.garantie-inner::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(closest-side at 50% 100%, rgba(37,99,235,.26), transparent 65%);pointer-events:none}
.garantie{display:flex;gap:40px;align-items:center;max-width:860px;margin:0 auto;position:relative;z-index:1}
@media(max-width:820px){.garantie{flex-direction:column;text-align:center}.garantie-inner{padding:48px 26px}}
.siegel{flex:0 0 118px;width:118px;height:118px;border-radius:50%;border:2.5px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--cyan);font-size:12.5px;text-align:center;line-height:1.35;letter-spacing:.06em;box-shadow:0 0 0 10px rgba(56,189,248,.06), 0 0 40px rgba(56,189,248,.15)}
.garantie h2{color:#fff}
.garantie p{color:var(--mutd);font-size:17px}

/* ---------- Über ---------- */
.ueber{display:grid;grid-template-columns:400px 1fr;gap:52px;align-items:center}
@media(max-width:820px){.ueber{grid-template-columns:1fr;align-items:start}}
.portrait-frame{background:linear-gradient(170deg,#e8eef6,#d5e0ee);border-radius:var(--r-m);overflow:hidden;position:relative;aspect-ratio:1/1;box-shadow:var(--e2)}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.portrait-frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:14px;text-align:center;padding:20px}
.ueber-text{padding-bottom:10px}
.fakt{display:flex;gap:12px;margin-top:14px;font-size:15px;color:var(--mut)}
.fakt b{color:var(--ink);white-space:nowrap}
.squiggle{position:relative;display:inline-block}
.squiggle svg{position:absolute;left:0;bottom:-10px;width:100%;height:12px}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:44px auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:var(--e1);transition:box-shadow .2s ease}
.faq details[open]{box-shadow:var(--e2)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--blue);font-weight:400;flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 18px;font-size:15px;color:var(--mut)}

/* ---------- Finale CTA ---------- */
.final-sec{padding:16px 16px 90px}
.final{background:linear-gradient(165deg,#101f38,var(--dark));color:#fff;text-align:center;border-radius:var(--r-l);padding:88px 24px;position:relative;overflow:hidden;box-shadow:var(--edge-dark), var(--e2)}
.final::before{content:"";position:absolute;inset:-50% -20% auto -20%;height:150%;background:radial-gradient(closest-side at 50% 30%, rgba(56,189,248,.13), transparent 60%);pointer-events:none}
.final::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(157,176,199,.11) 1px, transparent 1.4px);background-size:26px 26px;mask-image:radial-gradient(60% 55% at 50% 40%, black 0%, transparent 100%);-webkit-mask-image:radial-gradient(60% 55% at 50% 40%, black 0%, transparent 100%);pointer-events:none}
.final>*{position:relative;z-index:1}
.final h2{color:#fff}
.final .lead{color:var(--mutd);margin:0 auto}
.final a.mail{color:var(--cyan);text-decoration:none}

/* ---------- Footer & Recht ---------- */
footer{background:var(--bg);color:var(--mut);padding:28px 0;font-size:14px;border-top:1px solid var(--line)}
footer .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer img{height:20px;opacity:.9}
footer a{color:var(--mut);text-decoration:none;margin-right:20px}
footer a:hover{color:var(--ink)}
.legal{background:#fff;padding:56px 0;font-size:15px;color:var(--mut)}
.legal h1{font-size:28px;color:var(--ink);margin-bottom:14px;letter-spacing:-.4px}
.legal h2{font-size:22px;color:var(--ink);margin:34px 0 8px}
.legal h3{font-size:16.5px;color:var(--navy);margin:22px 0 6px}
.legal h4{font-size:15px;color:var(--navy);margin:16px 0 4px}
.legal h5{font-size:14.5px;color:var(--navy);margin:14px 0 4px}
.legal p{margin-bottom:10px;max-width:760px}
.legal ul{margin:0 0 12px 22px;max-width:740px}
.legal li{margin-bottom:6px}
.legal a{color:var(--blue);word-break:break-word}
.todo{background:#fff7e6;border:1px dashed #d9a662;padding:2px 8px;border-radius:4px;color:#a97527;font-size:13.5px}