@font-face{font-family:"Inter Variable";src:url(/assets/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --accent:#2358e6;--accent-bright:#5b8dff;--accent-soft:rgb(35 88 230 / .1);
  --accent-fill:linear-gradient(180deg,#4d84ff 0%,#2358e6 52%,#1a46c2 100%);
  --ink:#0f1216;--muted:#5c6470;--surface:#f5f6f8;--raised:#fff;--dark:#14171c;--dark2:#1b1f26;--on-dark:#f5f6f8;--muted-dark:#a3abb7;--line:#dfe2e7;--line-dark:rgb(255 255 255 / .1);
  --ok:#2f7d4a;--r:20px;
  --shadow:0 1px 2px rgb(15 18 22 / .04),0 20px 40px -18px rgb(15 18 22 / .22);
  --font:"Inter Variable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--raised);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent)}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}
h1,h2,h3{letter-spacing:-.025em;line-height:1.12;font-weight:700;margin:0}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem)}
h1 em{font-style:normal;color:var(--accent-bright);display:block}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:18px;max-width:22ch}
h3{font-size:1.15rem}
.eyebrow{font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:60ch;margin:0 0 24px}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:650;font-size:16px;padding:14px 22px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent-fill);color:#fff;box-shadow:0 10px 24px -10px rgb(35 88 230 / .7),inset 0 1px 0 rgb(255 255 255 / .25)}
.btn.secondary{background:linear-gradient(180deg,#fff,#eef0f3);color:var(--ink);border-color:var(--line)}
.btn.ghostDark{color:#fff;border-color:rgb(255 255 255 / .25);background:rgb(255 255 255 / .04)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.wide{width:100%}

/* Kopf */
.lnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:12px 20px;background:rgb(20 23 28 / .88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line-dark)}
.lnav .wm{color:#fff;text-decoration:none;font-weight:750;letter-spacing:.16em;font-size:13px;white-space:nowrap}
.lnav nav{display:flex;gap:4px;margin-left:auto}
.lnav nav a,.lnav .lnk{color:#c9ced6;text-decoration:none;font-size:14.5px;padding:8px 10px;border-radius:999px}
.lnav nav a:hover,.lnav .lnk:hover{color:#fff;background:rgb(255 255 255 / .08)}
@media(max-width:820px){.lnav nav{display:none}.lnav .lnk{margin-left:auto}}
@media(max-width:400px){.lnav{gap:8px;padding:10px 14px}.lnav .wm{font-size:12px;letter-spacing:.1em;overflow:hidden;text-overflow:ellipsis;min-width:0}}

/* Abschnitte */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec.light{background:var(--surface)}
.dark{background:radial-gradient(1200px 500px at 85% -10%,rgb(35 88 230 / .28),transparent 60%),linear-gradient(180deg,var(--dark2),var(--dark));color:var(--on-dark)}
.dark .lead,.dark p{color:var(--muted-dark)}
.dark .eyebrow{color:var(--accent-bright)}

/* Hero */
.hero{padding:clamp(56px,8vw,96px) 0 clamp(64px,9vw,110px)}
.heroGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .lead{margin-top:22px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted-dark)}
.trust li::before{content:"✓";color:#7fd39b;font-weight:700;margin-right:6px}
.heroShot{position:relative;min-height:420px}
.heroShot .laptop{position:absolute;right:0;top:20px;width:88%}
.heroShot .phone{position:absolute;left:0;bottom:-20px;width:44%;z-index:2}
.heroShot:not(:has(.laptop)) .phone{position:relative;margin:0 auto;width:60%;left:auto;bottom:auto}
@media(max-width:900px){.heroGrid{grid-template-columns:1fr;gap:36px}.heroShot{min-height:0}.heroShot .laptop{display:none}.heroShot .phone,.heroShot:not(:has(.laptop)) .phone{position:relative;left:auto;bottom:auto;width:min(78%,340px);margin:0 auto}}

/* Geräte-Rahmen */
.phone{border-radius:34px;padding:9px;background:linear-gradient(160deg,#2a2f38,#0c0e11);box-shadow:0 30px 60px -20px rgb(0 0 0 / .55),inset 0 0 0 1px rgb(255 255 255 / .08)}
.phone img{border-radius:26px;width:100%;height:auto;background:#e9edf2;aspect-ratio:9/19;object-fit:cover;object-position:top}
.phone.sm{max-width:320px;margin:0 auto}
.laptop{border-radius:14px;padding:8px 8px 10px;background:linear-gradient(180deg,#30353e,#16191e);box-shadow:0 30px 60px -24px rgb(0 0 0 / .5),inset 0 0 0 1px rgb(255 255 255 / .07)}
.laptop img{border-radius:8px;width:100%;height:auto;background:#eef1f5;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* Schmerzen */
.pains{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.pains div{background:var(--surface);border-radius:var(--r);padding:22px;border:1px solid var(--line)}
.pains b{display:block;font-size:1.05rem;margin-bottom:6px}
.pains p{margin:0;color:var(--muted);font-size:15.5px}
@media(max-width:900px){.pains{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pains{grid-template-columns:1fr}}

/* Schritte */
.steps3{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps3 li{background:var(--raised);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);border:1px solid var(--line)}
.steps3 i{font-style:normal;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent-fill);color:#fff;font-weight:700;margin-bottom:14px}
.steps3 b{display:block;font-size:1.1rem;margin-bottom:6px}
.steps3 p{margin:0;color:var(--muted);font-size:15.5px}
@media(max-width:820px){.steps3{grid-template-columns:1fr}}

/* Zweispaltig */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:.9fr 1.1fr}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr;gap:36px}.split.rev>.phone{order:2}}
.feat{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
.feat li{position:relative;padding-left:30px;color:var(--muted);font-size:16.5px}
.feat li b{color:var(--ink)}
.feat li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232358e6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.note{margin:22px 0 0;padding:14px 16px;border-radius:14px;background:var(--accent-soft);font-size:15px;color:var(--ink)}

/* Raster dunkel */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.grid3 div{border:1px solid var(--line-dark);background:rgb(255 255 255 / .03);border-radius:var(--r);padding:22px}
.grid3 b{display:block;color:#fff;font-size:1.05rem;margin-bottom:6px}
.grid3 p{margin:0;font-size:15.5px}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}

/* Branchen */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 30px}
.chips span{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14.5px;font-weight:550}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.quotes div{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 14px 14px 0;padding:14px 18px;font-size:15.5px}
.quotes small{display:block;font-size:11.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
@media(max-width:700px){.quotes{grid-template-columns:1fr}}

/* Gründer */
.founder{background:var(--surface);padding:clamp(56px,7vw,84px) 0}
.founder p{margin:0 auto;max-width:34ch;text-align:center;font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.35;font-weight:600;letter-spacing:-.015em}

/* Preise */
.termPick{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);margin:4px 0 28px;flex-wrap:wrap}
.chip{font:inherit;font-size:14.5px;border:0;background:transparent;padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--ink)}
.chip b{color:var(--ok);margin-left:4px}
.chip.on{background:var(--dark);color:#fff}
.chip.on b{color:#7fd39b}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:24px;padding:28px 24px;box-shadow:var(--shadow)}
.plan.hl{border:2px solid var(--accent);box-shadow:0 30px 60px -28px rgb(35 88 230 / .45)}
.plan .tag{position:absolute;top:-13px;left:24px;background:var(--accent-fill);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan h3{margin-bottom:12px}
.plan .price{font-size:15px;color:var(--muted)}
.plan .price b{font-size:2.3rem;color:var(--ink);letter-spacing:-.03em}
.plan .price small{display:block;font-size:13px;margin-top:2px}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:9px;flex:1;align-content:start}
.plan li{padding-left:24px;position:relative;font-size:15.5px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:460px}}
.addons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.addons div{border:1px dashed var(--line);border-radius:16px;padding:16px 18px;font-size:15px}
.addons b{display:block;margin-bottom:2px}
.addons span{color:var(--muted)}
@media(max-width:700px){.addons{grid-template-columns:1fr}}
.fine{font-size:13.5px;color:var(--muted);margin:18px 0 0;max-width:80ch}

/* FAQ */
.faq{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:650;font-size:1.05rem;padding:16px 36px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.5rem;font-weight:400;color:var(--muted);transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 18px;color:var(--muted)}

/* Schluss */
.final{text-align:center}
.final h2{margin-left:auto;margin-right:auto}
.final .lead{margin-left:auto;margin-right:auto}
.final .cta{justify-content:center}
.lfoot{background:var(--dark);color:var(--muted-dark);font-size:14px;padding:26px 0}
.lfoot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.lfoot nav{display:flex;flex-wrap:wrap;gap:16px}
.lfoot a{color:var(--muted-dark);text-decoration:none}
.lfoot a:hover{color:#fff}

.lnav .wm{flex-shrink:0}
.lnav .wm img{display:block;height:34px;width:auto;max-width:none}
@media(max-width:500px){.lnav{gap:8px;padding:10px 14px}.lnav .wm{min-width:auto;overflow:visible}.lnav .wm img{height:22px}.lnav .lnk{padding:8px 6px;font-size:14px}.lnav .btn.sm{padding-left:12px;padding-right:12px;white-space:nowrap}}
@media(max-width:380px){.lnav .wm img{height:19px}.lnav .lnk{font-size:13px;padding:6px 4px}.lnav .btn.sm{font-size:13px;padding-left:10px;padding-right:10px}}
@media(max-width:340px){.lnav{gap:6px;padding:10px 10px}.lnav .wm img{height:17px}.lnav .lnk{font-size:12.5px;padding:6px 2px}.lnav .btn.sm{font-size:12.5px;padding-left:8px;padding-right:8px}}
.lfoot .fl{display:inline-flex;align-items:center;gap:12px}.lfoot .fl img{height:24px;width:auto;opacity:.9}
.plan .price .pDay{display:block;font-size:13.5px;font-weight:600;color:var(--accent, #2f6bff);margin-top:2px}
.fairGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.fairGrid div{background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);border-radius:16px;padding:18px}
.fairGrid b{display:block;font-size:16px;margin-bottom:6px;color:#fff}
.fairGrid span{font-size:14px;line-height:1.5;color:rgb(255 255 255 / .72)}
@media(max-width:900px){.fairGrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fairGrid{grid-template-columns:1fr}}
/* Öffentliche Inhaltsseiten (Gewerke, Vergleich, Ratgeber) */
.pHead{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px)}
.pTitle{font-size:clamp(1.9rem,4.4vw,3rem);max-width:24ch;margin:0 0 18px}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:18px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--accent)}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:860px){.split2{grid-template-columns:1fr}}
.split2 h3,.prose h3{font-size:17px;margin:22px 0 8px}
.tGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tCard{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tCard:hover{border-color:var(--accent);transform:translateY(-2px)}.tCard b{display:block;font-size:16.5px;margin-bottom:6px}.tCard span{font-size:14px;color:var(--muted)}
.pTable{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pTable th,.pTable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.pTable th{font-size:13px;color:var(--muted);font-weight:650;background:var(--surface)}
.pTable .r{text-align:right;white-space:nowrap}.pTable tr:last-child td{border-bottom:0}
.cmp th.me,.cmp td.me{background:rgb(35 88 230 / .06)}.cmp .yes{color:#17733f;font-weight:600}.cmp .no{color:#9aa1ab}.cmp .na{color:#9aa1ab;font-size:13px}
.tblScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}.tblScroll .cmp{min-width:560px}
.prose{font-size:17px}.prose p{margin:0 0 16px}.prose h2{margin:36px 0 12px;font-size:clamp(1.35rem,2.6vw,1.75rem)}.prose .pTable{margin:8px 0 20px}.prose a{color:var(--accent)}
.fine{font-size:13px;color:var(--muted);margin-top:14px}.fine a{color:var(--muted)}
.chipLink{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14.5px;font-weight:550;color:var(--ink);text-decoration:none}.chipLink:hover{border-color:var(--accent);color:var(--accent)}
.chips a{text-decoration:none}
.faqBox h3{margin-top:0}
.lfoot.big{padding:48px 0 26px}.lfoot.big .wrap{display:block}
.footCols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;margin-bottom:30px}.footCols p{font-size:14px;line-height:1.5;margin:12px 0 0;max-width:30ch}
.footCols b{display:block;color:#fff;font-size:14px;margin-bottom:10px}.footCols a{display:block;padding:3px 0;font-size:14px}
.footLegal{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;border-top:1px solid rgb(255 255 255 / .08);padding-top:18px}.footLegal nav{display:flex;flex-wrap:wrap;gap:16px}
@media(max-width:860px){.footCols{grid-template-columns:1fr 1fr}.footCols>div:first-child{grid-column:1/-1}}
.cmp td:first-child,.cmp th:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 var(--line)}.cmp th:first-child{background:var(--surface)}
@media(max-width:700px){.cmp{font-size:13.5px}.cmp td,.cmp th{padding:8px 9px}.cmp td:first-child{min-width:132px;max-width:150px}.tblScroll::after{content:"← seitlich wischen für alle Anbieter →";display:block;text-align:center;font-size:12px;color:var(--muted);padding:6px 0}}
.stickyCta{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 14px 34px -10px rgb(35 88 230 / .8)}
@media(min-width:821px){.stickyCta{display:none!important}}
/* Preis: Tagespreis groß, Monatspreis gut lesbar darunter */
.plan .price .pUnit{font-size:17px;font-weight:650;color:var(--ink)}
.plan .price .pMon{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-top:4px}