/* ============================================================
Wedoa — Design v3 ("Fonio Weich")
Shared design system for every public Razor page.
Ported from the /48 preview (Views/Home/Design48.cshtml), which
is the source of truth for tokens, components and behaviour.
Fonts are self-hosted below via @font-face (no third-party requests).
Section index
1 @font-face
2 Tokens
4 Reset + base
5 Typography
6 Layout primitives .wrap .mid
7 Buttons + links .btn* .tlink
8 Header / nav .hd .nav .dd .burger .msheet
9 Section frame .sec .sec-head
10 Hero + glows + frame .hero .glow* .trust* .shot* .frame*
11 Cards / steps / rails .card .step* .rail* .tile*
12 Dark band .dark* .quiet*
13 Split + list .split .list*
14 FAQ .q*
15 Modules .tr* .tc* .calc* .tl* .ev*
16 End CTA .end*
17 Footer .ft*
18 Site components (no /48 equivalent — re-authored in its idiom)
19 Reveal .rv
21 Breakpoints 980 / 640
22 Reduced motion
============================================================ */
/* ============ 1. Fonts ============ */
/* Schibsted Grotesk + DM Mono — self-hosted (no third-party requests) */
@font-face {
font-family: "Schibsted Grotesk";
src: url("/fonts/SchibstedGrotesk-normal-latin.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
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;
}
@font-face {
font-family: "Schibsted Grotesk";
src: url("/fonts/SchibstedGrotesk-normal-latinext.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
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: "Schibsted Grotesk";
src: url("/fonts/SchibstedGrotesk-italic-latin.woff2") format("woff2");
font-weight: 400 900;
font-style: italic;
font-display: swap;
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;
}
@font-face {
font-family: "Schibsted Grotesk";
src: url("/fonts/SchibstedGrotesk-italic-latinext.woff2") format("woff2");
font-weight: 400 900;
font-style: italic;
font-display: swap;
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: "DM Mono";
src: url("/fonts/DMMono-400-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
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;
}
@font-face {
font-family: "DM Mono";
src: url("/fonts/DMMono-400-latinext.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
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: "DM Mono";
src: url("/fonts/DMMono-500-latin.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
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;
}
@font-face {
font-family: "DM Mono";
src: url("/fonts/DMMono-500-latinext.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
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;
}
/* ============ 2. Tokens ============ */
:root{
--lila:#BB5DFF;
--lila-hover:#9A3FE0;
--lila-deep:#5E1F8B;
--lila-light:#ECE2FF;
--lila-wash:#F4EDFF;
--navy:#113644;
--navy-deep:#0D262F;
--navy-soft:#7389AB;
--white:#FFFFFF;
--gray:#F5F5F5;
--line:#E3E7EC;
/* abgeleitete Werte, gleiche zwei Familien */
--paper:#F8F9FC;
--ink:#0D262F;
--ink-soft:rgba(17,54,68,.64);
--ink-faint:rgba(17,54,68,.46);
--ink-ghost:rgba(17,54,68,.28);
--hair:rgba(17,54,68,.10);
--hair-soft:rgba(17,54,68,.06);
--on-dark:rgba(255,255,255,.72);
--on-dark-faint:rgba(255,255,255,.48);
--on-dark-hair:rgba(255,255,255,.12);
--sans:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
--mono:"DM Mono",ui-monospace,monospace;
--r-sm:8px;
--r:12px;
--r-lg:16px;
--sh-1:0 3px 5px rgba(17,54,68,.08);
--sh-2:0 6px 12px rgba(17,54,68,.10);
--sh-3:0 20px 46px rgba(17,54,68,.14);
--sec:clamp(80px,8.4vw,104px);
--gut:clamp(20px,4vw,40px);
}
/* ============ 4-17. Components (from /48) ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lila);outline-offset:3px;border-radius:var(--r-sm)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mid{max-width:900px;margin-left:auto;margin-right:auto;text-align:center}
/* ---------- Typografie: ein Sprung, keine Treppe ---------- */
h1{font-size:clamp(38px,6.4vw,70px);font-weight:500;line-height:1.05;letter-spacing:-.032em}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:500;line-height:1.12;letter-spacing:-.026em}
h3{font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.012em}
p{font-size:15.5px;line-height:1.62}
b,strong{font-weight:500}
/* the site sets its accent word with inside a heading */
h1 b,h2 b,h3 b{color:var(--lila-deep)}
.dark h1 b,.dark h2 b,.dark h3 b{color:#DCC4FF}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.5;color:var(--navy-soft);max-width:600px}
.mid .lead{margin-left:auto;margin-right:auto}
.badge{display:inline-flex;align-items:center;gap:9px;min-height:32px;max-width:100%;padding:6px 14px 6px 11px;line-height:1.35;text-align:left;border:1px solid var(--line);border-radius:999px;background:var(--white);box-shadow:var(--sh-1);font-size:13px;font-weight:500;color:var(--ink-soft);letter-spacing:-.005em}
.badge i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--lila);box-shadow:0 0 0 4px rgba(187,93,255,.16)}
.kicker{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.kicker.on-dark{color:var(--on-dark-faint)}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border:1px solid transparent;border-radius:var(--r);font-size:15px;font-weight:500;letter-spacing:-.006em;cursor:pointer;white-space:nowrap;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn svg{width:16px;height:16px;flex:none}
.btn-fill{background:var(--lila);color:var(--white);box-shadow:0 3px 5px rgba(94,31,139,.18)}
.btn-fill:hover{background:var(--lila-hover);box-shadow:0 6px 12px rgba(94,31,139,.22);transform:translateY(-1px)}
.btn-line{background:var(--white);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-line:hover{border-color:var(--ink-ghost);box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn-ghost-dark{background:rgba(255,255,255,.08);color:var(--white);border-color:var(--on-dark-hair)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.14)}
.btn-sm{height:40px;padding:0 16px;font-size:14px;border-radius:var(--r-sm)}
.tlink{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;color:var(--lila-deep)}
.tlink svg{width:15px;height:15px;transition:transform .18s ease}
.tlink:hover{color:var(--lila-hover)}
.tlink:hover svg{transform:translateX(3px)}
.tlink.on-dark{color:#DCC4FF}
.tlink.on-dark:hover{color:var(--white)}
/* ---------- Kopfleiste ---------- */
.hd{position:sticky;top:0;z-index:400;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair-soft)}
.hd-in{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:inline-flex;align-items:baseline;gap:1px;font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.brand i{font-style:normal;color:var(--lila);letter-spacing:-.09em;font-weight:500}
.nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.nav-i{position:relative}
.nav-t{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 11px;border:none;background:none;border-radius:var(--r-sm);font-size:14.5px;font-weight:400;color:var(--ink-soft);cursor:pointer;transition:color .16s ease,background .16s ease}
.nav-t svg{width:13px;height:13px;transition:transform .2s ease;opacity:.65}
.nav-t:hover{color:var(--ink);background:var(--paper)}
.nav-i.open>.nav-t{color:var(--ink);background:var(--paper)}
.nav-i.open>.nav-t svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 8px);left:-8px;min-width:270px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-i.open .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd.two{min-width:470px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.dd-h{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:4px 10px 9px;margin-bottom:4px;border-bottom:1px solid var(--hair-soft);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.dd-h a{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--lila-deep)}
.dd-h a:hover{color:var(--lila-hover)}
.dd-a{display:block;padding:8px 10px;border-radius:var(--r-sm);font-size:14.5px;color:var(--ink-soft);transition:background .14s ease,color .14s ease}
.dd-a:hover{background:var(--lila-wash);color:var(--ink)}
.hd-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.hd-link{font-size:14.5px;color:var(--ink-soft);padding:0 4px}
.hd-link:hover{color:var(--ink)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);cursor:pointer}
.burger svg{width:19px;height:19px}
/* ---------- Mobiles Menü ---------- */
.msheet{display:none;position:fixed;inset:66px 0 0;z-index:390;background:var(--white);overflow-y:auto;padding:18px var(--gut) 40px}
.msheet.on{display:block}
.ms-g{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-ghost);margin:20px 0 6px}
.ms-a{display:block;padding:10px 0;font-size:16px;color:var(--ink-soft);border-bottom:1px solid var(--hair-soft)}
.ms-a:hover{color:var(--ink)}
.ms-cta{display:flex;gap:10px;margin-top:24px}
.ms-cta .btn{flex:1}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,7vw,92px) 0 0}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);opacity:.72;z-index:0}
.glow-l{width:min(680px,78vw);height:min(680px,78vw);left:-14%;top:-12%;background:radial-gradient(circle at 50% 50%,rgba(187,93,255,.62),rgba(187,93,255,0) 66%)}
.glow-r{width:min(720px,82vw);height:min(720px,82vw);right:-14%;top:-8%;background:radial-gradient(circle at 50% 50%,rgba(115,137,171,.50),rgba(17,54,68,0) 66%)}
.glow-c{width:min(900px,110vw);height:min(420px,54vw);left:50%;transform:translateX(-50%);bottom:-8%;background:radial-gradient(ellipse at 50% 50%,rgba(236,226,255,.9),rgba(244,237,255,0) 70%);opacity:.9;filter:blur(70px)}
.hero-in{position:relative;z-index:1}
.hero h1{margin:0 auto;max-width:880px}
.hero .lead{margin-top:20px}
/* ---------- Testanruf-Modul ---------- */
.tc{width:100%;max-width:398px;margin:34px auto 0;padding:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 6px 12px rgba(17,54,68,.10),0 26px 54px rgba(17,54,68,.10);text-align:left;transition:box-shadow .25s ease,border-color .25s ease}
.tc.busy{border-color:rgba(187,93,255,.42);box-shadow:0 6px 12px rgba(94,31,139,.12),0 26px 54px rgba(94,31,139,.16)}
.tc-row{display:flex;align-items:center;gap:8px;height:50px;padding:0 6px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);transition:border-color .18s ease,background .18s ease}
.tc-row:focus-within{border-color:rgba(187,93,255,.55);background:var(--white)}
.tc-cc{display:flex;align-items:center;gap:7px;align-self:stretch;padding:0 12px;border-right:1px solid var(--line);font-family:var(--mono);font-size:14px;color:var(--ink-soft)}
.tc-cc svg{width:15px;height:15px;color:var(--ink-ghost)}
.tc-in{flex:1;min-width:0;height:100%;border:none;background:none;outline:none;font-size:15.5px;letter-spacing:.01em;color:var(--ink)}
.tc-in::placeholder{color:var(--ink-ghost)}
.tc-go{width:100%;margin-top:10px}
.tc-go[disabled]{opacity:.9;cursor:progress}
.tc-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--white);animation:tcspin .7s linear infinite}
@keyframes tcspin{to{transform:rotate(360deg)}}
.tc-foot{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:12px}
.tc-note{font-size:12.5px;color:var(--ink-ghost);text-align:center}
.tc-state{display:none;margin-top:12px;padding:11px 12px;background:var(--lila-wash);border:1px solid rgba(187,93,255,.24);border-radius:var(--r)}
.tc-state.on{display:block}
.tc-state p{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.tc-state a{color:var(--lila-deep);text-decoration:underline;text-underline-offset:2px}
.tc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}
.tc-lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-ghost)}
.tc-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-faint)}
.tc-dot i{width:6px;height:6px;border-radius:50%;background:var(--lila);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------- Vertrauensleiste ---------- */
.trust{margin-top:clamp(48px,6vw,72px);padding-bottom:clamp(40px,5vw,56px);position:relative;z-index:1}
.trust-h{text-align:center;font-size:13px;color:var(--ink-ghost);margin-bottom:20px}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 34px}
.trust-m{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink-ghost);opacity:.85;transition:color .18s ease,opacity .18s ease}
.trust-m:hover{color:var(--ink-faint);opacity:1}
.trust-m svg{width:17px;height:17px}
/* "Alle Branchen" leads the trust row: same chip, carried in the accent colour so
the branch overview reads as the entry point rather than one industry among many. */
.trust-m.is-all{color:var(--lila-deep);opacity:1}
.trust-m.is-all:hover{color:var(--lila-hover)}
/* ---------- Grosser Screenshot mit Schimmer ---------- */
.shot-sec{position:relative;padding-bottom:0}
.shot-band{position:absolute;left:0;right:0;bottom:0;height:56%;background:var(--paper);border-top:1px solid var(--hair-soft);z-index:0}
.shot-wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto}
.shot-glow{position:absolute;left:8%;right:8%;top:8%;bottom:-6%;background:linear-gradient(120deg,rgba(187,93,255,.42),rgba(17,54,68,.30));filter:blur(70px);opacity:.5;border-radius:50%;z-index:-1}
.frame{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 6px 12px rgba(17,54,68,.10),0 34px 70px rgba(17,54,68,.16);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-bottom:1px solid var(--hair-soft);background:var(--white)}
.frame-dots{display:flex;gap:6px}
.frame-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.frame-url{flex:1;max-width:280px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--ink-ghost)}
.frame img{width:100%;height:auto;aspect-ratio:16/9.3;object-fit:cover;object-position:bottom center}
.shot-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin-top:20px;position:relative;z-index:1}
.shot-cap span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-faint)}
.shot-cap svg{width:15px;height:15px;color:var(--lila)}
/* ---------- Sektionsgerüst ---------- */
.sec{padding:var(--sec) 0}
.sec.paper{background:var(--paper)}
.sec-head{max-width:760px;margin:0 auto clamp(38px,4vw,54px);text-align:center}
.sec-head h2{margin-top:14px}
.sec-head .lead{margin-top:16px;margin-left:auto;margin-right:auto}
/* ---------- Drei Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
.step:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--hair)}
.step-txt{padding:22px 22px 18px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:26px;border-radius:var(--r-sm);background:var(--lila-wash);border:1px solid rgba(187,93,255,.22);font-family:var(--mono);font-size:12px;color:var(--lila-deep);margin-bottom:14px}
.step h3{margin-bottom:7px}
.step p{font-size:15px;color:var(--ink-soft)}
.step-img{margin:0 14px 14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:var(--sh-1)}
.step-img img{width:100%;height:auto;aspect-ratio:16/9.3;object-fit:cover;object-position:bottom center}
.step-img.photo img{object-position:center}
/* ---------- Nutzenraster ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:24px 22px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:box-shadow .22s ease,transform .22s ease}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.card-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--lila-wash);color:var(--lila-deep);margin-bottom:16px}
.card-ic svg{width:18px;height:18px}
.card h3{margin-bottom:6px}
.card p{font-size:15px;color:var(--ink-soft)}
/* ---------- Dunkler Abschnitt ---------- */
.dark{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--white);padding:var(--sec) 0}
.dark .lead{color:var(--on-dark)}
.dark-glow{position:absolute;width:min(780px,110vw);height:min(560px,80vw);left:50%;transform:translateX(-50%);top:-24%;background:radial-gradient(ellipse at 50% 50%,rgba(187,93,255,.40),rgba(187,93,255,0) 66%);filter:blur(80px);pointer-events:none}
.dark-glow.side{left:auto;right:-22%;top:auto;bottom:-30%;transform:none;width:min(560px,80vw);height:min(560px,80vw);background:radial-gradient(circle at 50% 50%,rgba(115,137,171,.34),rgba(115,137,171,0) 68%)}
.dark-mark{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;color:var(--lila);opacity:.30;pointer-events:none}
.dark-in{position:relative;z-index:1}
.dark h2{max-width:760px;margin:14px auto 0}
.quiet{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(38px,4.4vw,54px)}
.quiet-i{padding:22px;background:rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--on-dark-hair);border-radius:var(--r-lg)}
.quiet-n{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;color:#DCC4FF;display:block;margin-bottom:8px}
.quiet-i h3{color:var(--white);margin-bottom:5px}
.quiet-i p{font-size:14.5px;color:var(--on-dark-faint)}
.dark-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(34px,4vw,46px)}
/* ---------- Kachel-Karussell ---------- */
.rail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:26px}
.rail-head h2{max-width:520px}
.rail-head .lead{margin-top:14px}
.rail-nav{display:flex;gap:8px;flex:none}
.rail-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--ink-soft);cursor:pointer;box-shadow:var(--sh-1);transition:border-color .16s ease,color .16s ease,box-shadow .16s ease}
.rail-btn:hover{border-color:var(--ink-ghost);color:var(--ink);box-shadow:var(--sh-2)}
.rail-btn svg{width:17px;height:17px}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 336px;max-width:336px;border-radius:var(--r-lg);overflow:hidden;scroll-snap-align:start;border:1px solid var(--line);box-shadow:var(--sh-1);background:var(--paper)}
.tile img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.tile-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,38,47,0) 38%,rgba(13,38,47,.82) 100%)}
.tile-txt{position:absolute;left:20px;right:20px;bottom:18px;color:var(--white)}
.tile-txt h3{color:var(--white);margin-bottom:4px}
.tile-txt p{font-size:14px;color:rgba(255,255,255,.74)}
/* ---------- Split mit Screenshot ---------- */
.split{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(32px,5vw,64px);align-items:center}
.split-txt h2{margin-top:14px}
.split-txt .lead{margin-top:16px}
.list{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.list-i{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--ink-soft)}
.list-i svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--lila)}
.split-media{position:relative}
.split-media .shot-glow{left:10%;right:4%;top:10%;bottom:-4%;opacity:.42}
/* ---------- Gesprächskarte ---------- */
.tr{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 6px 12px rgba(17,54,68,.10),0 30px 60px rgba(17,54,68,.14);overflow:hidden}
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--hair-soft)}
.tr-who{display:flex;align-items:center;gap:12px}
.tr-av{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--lila-wash);color:var(--lila-deep);flex:none}
.tr-av svg{width:17px;height:17px}
.tr-who b{display:block;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:-.01em}
.tr-who em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-ghost);margin-top:2px}
.tr-time{font-family:var(--mono);font-size:13px;color:var(--ink-faint)}
.tr-body{display:flex;flex-direction:column;gap:12px;padding:20px 18px}
.tr-line{max-width:86%;align-self:flex-start}
.tr-line.ai{align-self:flex-end;text-align:right}
.tr-tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-ghost);margin-bottom:5px}
.tr-line p{display:inline-block;padding:11px 14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--hair-soft);font-size:15px;line-height:1.5;color:var(--ink-soft);text-align:left}
.tr-line.ai p{background:var(--lila-wash);border-color:rgba(187,93,255,.20);color:var(--ink)}
.tr-foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid var(--hair-soft);background:var(--paper)}
.tr-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:12.5px;color:var(--ink-faint)}
.tr-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lila)}
/* ---------- Fragen ---------- */
.qs{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.q{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.q-b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;background:none;border:none;text-align:left;cursor:pointer;font-size:16px;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
.q-b svg{width:17px;height:17px;flex:none;color:var(--ink-ghost);transition:transform .2s ease}
.q.on .q-b svg{transform:rotate(45deg);color:var(--lila)}
.q-c{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .28s ease,visibility 0s linear .28s}
.q.on .q-c{max-height:600px;visibility:visible;transition:max-height .28s ease,visibility 0s}
.q-c p{padding:0 20px 18px;font-size:15px;color:var(--ink-soft)}
/* ---------- Schluss-CTA ---------- */
.end{position:relative;overflow:hidden;background:var(--lila-wash);padding:var(--sec) 0}
.end-glow{position:absolute;width:min(720px,100vw);height:min(420px,60vw);left:50%;transform:translateX(-50%);bottom:-40%;background:radial-gradient(ellipse at 50% 50%,rgba(187,93,255,.34),rgba(187,93,255,0) 68%);filter:blur(70px);pointer-events:none}
.end-in{position:relative;z-index:1}
.end-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.end-note{margin-top:16px;font-size:12.5px;color:var(--ink-ghost)}
/* ---------- Fusszeile ---------- */
.ft{background:var(--white);border-top:1px solid var(--line);padding:clamp(54px,6vw,76px) 0 28px}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px 26px}
.ft-brand p{margin:14px 0 16px;font-size:14.5px;color:var(--ink-faint);max-width:250px}
.ft-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-ghost);margin-bottom:13px}
.ft-l{display:flex;flex-direction:column;gap:9px}
.ft-l a{font-size:14.5px;color:var(--ink-soft)}
.ft-l a:hover{color:var(--lila-deep)}
.ft-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(38px,4vw,54px);padding-top:22px;border-top:1px solid var(--hair-soft);font-size:13px;color:var(--ink-ghost)}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:18px}
.ft-bot a:hover{color:var(--ink-soft)}
/* ---------- Zeitrechner ---------- */
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,3.4vw,52px);align-items:center;max-width:940px;margin:0 auto;padding:clamp(26px,3vw,38px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.calc-lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.calc-field{margin-bottom:26px}
.calc-field:last-child{margin-bottom:0}
.calc-sel{position:relative;display:block;margin-top:10px}
.calc-sel select{width:100%;height:48px;padding:0 40px 0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);box-shadow:var(--sh-1);font-size:15px;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .18s ease,box-shadow .18s ease}
.calc-sel select:hover{border-color:var(--ink-ghost);box-shadow:var(--sh-2)}
.calc-sel svg{position:absolute;top:50%;right:14px;width:14px;height:14px;margin-top:-7px;color:var(--ink-faint);pointer-events:none}
.calc-val{margin:8px 0 20px;font-family:var(--mono);font-size:clamp(40px,5vw,56px);font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.calc-slider{position:relative;height:26px}
.calc-track{position:absolute;top:50%;left:0;right:0;height:6px;transform:translateY(-50%);border-radius:3px;background:var(--lila-light)}
.calc-fill{position:absolute;top:50%;left:0;height:6px;transform:translateY(-50%);border-radius:3px;background:var(--lila)}
.calc-range{-webkit-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:26px;margin:0;background:none}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--lila);border:3px solid var(--white);box-shadow:var(--sh-2);cursor:grab}
.calc-range:active::-webkit-slider-thumb{cursor:grabbing}
.calc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--lila);border:3px solid var(--white);box-shadow:var(--sh-2);cursor:grab}
.calc-range::-moz-range-track{background:none}
.calc-scale{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}
.calc-stat{padding:16px 0;border-bottom:1px solid var(--hair-soft)}
.calc-stat:first-child{padding-top:0}
.calc-stat:last-child{padding-bottom:0;border-bottom:none}
.calc-num{font-family:var(--mono);font-size:clamp(26px,3vw,32px);font-weight:500;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.calc-unit{margin-left:3px;font-size:.62em;color:var(--lila-deep)}
.calc-cap{margin-top:5px;font-size:14px;color:var(--ink-soft)}
.calc-note{max-width:720px;margin:20px auto 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
/* ---------- Tagesverlauf ---------- */
.tl-scroll{margin-top:clamp(38px,4vw,54px)}
.tl{position:relative;height:260px}
.tl-line{position:absolute;left:0;right:0;top:50%;height:2px;border-radius:2px;background:rgba(17,54,68,.14)}
.tl-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:2px;height:10px;background:var(--ink-ghost)}
.tl-tick-lab{position:absolute;top:calc(50% + 14px);transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}
.tl-dot{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:var(--lila);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(187,93,255,.18),0 0 26px 8px rgba(187,93,255,.34);z-index:3}
.tl-ev{position:absolute;width:196px;transform:translateX(-50%);z-index:2}
.tl-ev.above{bottom:calc(50% + 26px)}
.tl-ev.below{top:calc(50% + 40px)}
.tl-ev .ev-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);box-shadow:var(--sh-1);opacity:0;transform:translateY(14px) scale(.9);transition:opacity .5s ease,transform .5s ease,box-shadow .5s ease}
.tl-ev.below .ev-card{transform:translateY(-14px) scale(.9)}
.tl-ev.active .ev-card{opacity:1;transform:none;box-shadow:var(--sh-3)}
.tl-ev.dim .ev-card{opacity:.34;transform:none;box-shadow:var(--sh-1);transition:opacity .8s ease,transform .8s ease,box-shadow .8s ease}
.ev-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:var(--r-sm);background:var(--lila-light);color:var(--lila-deep)}
.ev-chip.solid{background:var(--lila);color:var(--white)}
.ev-chip svg{width:14px;height:14px}
.ev-time{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.ev-title{font-size:13.5px;font-weight:500;line-height:1.3;letter-spacing:-.012em}
.tl-ev .stem{position:absolute;left:50%;width:1px;background:var(--hair)}
.tl-ev.above .stem{top:100%;height:26px}
.tl-ev.below .stem{bottom:100%;height:40px}
/* ---------- Einblenden ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
/* ============ 18. Site components ==========================
Patterns the /48 preview has no equivalent for, re-authored
in its idiom: surfaces are white or --paper with a 1px --line
border and a soft shadow, radii from the --r scale, one accent.
============================================================ */
/* ---------- 18.1 Forms, prose, docs ---------- */
/* ============ 18a. Forms ============
Inputs echo the /48 test-call row (.tc-row): --paper fill, 1px --line,
radius --r, 48px tall; on focus the border turns lila and the fill
turns white. Labels stay sentence-case (the calculators use full
German sentences as labels), mono, --ink-soft for contrast.
==================================================================== */
.form-card{max-width:640px;margin:0 auto;padding:clamp(22px,3vw,32px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .form-field{margin-bottom:0}
.form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.form-field.full{grid-column:1/-1}
.form-field:last-of-type{margin-bottom:22px}
.form-field label{font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.45;letter-spacing:.02em;color:var(--ink-soft)}
.form-field input,.form-field textarea,.form-field select{width:100%;font-family:var(--sans);font-size:15.5px;line-height:1.62;letter-spacing:.01em;color:var(--ink);background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r);outline:none;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.form-field input,.form-field select{height:48px;padding:0 14px}
.form-field textarea{min-height:132px;padding:12px 14px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--ink-ghost)}
.form-field input:hover,.form-field textarea:hover,.form-field select:hover{border-color:var(--ink-ghost)}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--lila);background-color:var(--white);box-shadow:var(--sh-1)}
.form-field select{padding-right:40px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237389AB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.form-error{font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.01em;color:#B3261E}
.form-error:empty{display:none}
.form-note{font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
.alert{margin-bottom:22px;padding:14px 16px;background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.alert strong{font-weight:500;color:var(--ink)}
.alert a{color:var(--lila-deep);text-decoration:underline;text-underline-offset:2px}
.alert-success{background-color:var(--lila-wash);border-color:rgba(187,93,255,.24);box-shadow:none}
.alert-success strong{color:var(--lila-deep)}
/* ============ 18b. Prose (legal / long-form text) ============ */
.prose{max-width:760px;margin:0 auto;color:var(--ink)}
.prose > * + *{margin-top:18px}
.prose > :first-child{margin-top:0}
.prose section{scroll-margin-top:96px}
.prose > section + section{margin-top:clamp(38px,4vw,52px)}
.prose section > :first-child{margin-top:0}
.prose h2{margin-top:clamp(38px,4vw,52px);font-size:clamp(22px,2.4vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.022em;color:var(--ink);scroll-margin-top:96px}
.prose h3{margin-top:30px;font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.012em;color:var(--ink);scroll-margin-top:96px}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:24px}
.prose li + li{margin-top:8px}
.prose li::marker{color:var(--ink-ghost)}
.prose ol > li::marker{font-family:var(--mono);font-size:.9em;color:var(--ink-faint)}
.prose a{color:var(--lila-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .18s ease}
.prose a:hover{color:var(--lila-hover)}
.prose strong,.prose b{font-weight:500;color:var(--ink)}
.prose .muted{font-family:var(--mono);font-size:12.5px;line-height:1.5;letter-spacing:.02em;color:var(--ink-faint)}
.prose hr{height:1px;margin:clamp(30px,3.4vw,44px) 0;border:none;background:var(--hair)}
.prose blockquote{padding:16px 18px;background-color:var(--paper);border:1px solid var(--line);border-left:3px solid var(--lila);border-radius:var(--r);color:var(--ink-soft)}
.prose blockquote > * + *{margin-top:10px}
/* ============ 18c. Privacy table of contents ============ */
.privacy-toc-nav{margin-top:26px;padding:20px 24px;background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.privacy-toc-nav h2{margin-top:0;font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.privacy-toc-nav ol{margin-top:14px;padding-left:24px}
.privacy-toc-nav li{font-size:14.5px;line-height:1.5}
.privacy-toc-nav li + li{margin-top:7px}
.privacy-toc-nav a,.privacy-toc-nav a.privacy-toc-link{color:var(--ink-soft);text-decoration:none;transition:color .18s ease}
.privacy-toc-nav a:hover,.privacy-toc-nav a.is-active{color:var(--lila-deep)}
.privacy-num{margin-right:10px;font-family:var(--mono);font-size:.8em;font-weight:400;letter-spacing:0;color:var(--lila-deep)}
/* ============ 18d. Docs prose (API / integration guide) ============ */
.docs-prose{max-width:820px;margin:0 auto;color:var(--ink)}
.docs-prose > * + *{margin-top:16px}
.docs-prose > :first-child{margin-top:0}
.docs-prose h1{margin-bottom:6px;font-size:clamp(28px,3.4vw,38px);font-weight:500;line-height:1.12;letter-spacing:-.026em}
.docs-prose .docs-sub{margin-bottom:32px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-faint)}
.docs-prose h2{margin-top:clamp(40px,4.4vw,56px);padding-bottom:12px;border-bottom:1px solid var(--hair);font-size:clamp(22px,2.4vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.022em;color:var(--ink);scroll-margin-top:96px}
.docs-prose h3{margin-top:30px;font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.012em;color:var(--ink);scroll-margin-top:96px}
.docs-prose p,.docs-prose li{font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.docs-prose ul,.docs-prose ol{padding-left:24px}
.docs-prose li + li{margin-top:8px}
.docs-prose li::marker{color:var(--ink-ghost)}
.docs-prose ol > li::marker{font-family:var(--mono);font-size:.9em;color:var(--ink-faint)}
.docs-prose a{color:var(--lila-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .18s ease}
.docs-prose a:hover{color:var(--lila-hover)}
.docs-prose strong,.docs-prose b{font-weight:500;color:var(--ink)}
.prose code,.docs-prose code{font-family:var(--mono);font-size:.88em}
.prose p code,.prose li code,.docs-prose p code,.docs-prose li code,.docs-prose td code,.docs-prose th code{padding:.12em .4em;background-color:var(--lila-wash);border:1px solid rgba(187,93,255,.18);border-radius:var(--r-sm);color:var(--lila-deep);overflow-wrap:anywhere}
.docs-prose pre{padding:16px 18px;background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.docs-prose pre code{padding:0;background:none;border:none;border-radius:0;font-size:inherit;color:inherit}
.docs-note,.docs-info{padding:14px 16px;border-radius:var(--r);font-size:14.5px;line-height:1.6}
.docs-note{background-color:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);color:var(--ink-soft)}
.docs-info{background-color:var(--lila-wash);border:1px solid rgba(187,93,255,.24);color:var(--ink-soft)}
.docs-note strong,.docs-info strong{display:block;margin-bottom:5px;font-weight:500}
.docs-note strong{color:var(--ink)}
.docs-info strong{color:var(--lila-deep)}
.docs-note a,.docs-info a{color:var(--lila-deep);text-decoration:underline;text-underline-offset:2px}
.docs-toc{margin-top:24px;padding:18px 22px;background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.docs-toc strong{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.docs-toc ul{margin:0;padding-left:22px}
.docs-toc li{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.docs-toc li + li{margin-top:6px}
.docs-toc a{color:var(--ink-soft);text-decoration:none;transition:color .18s ease}
.docs-toc a:hover{color:var(--lila-deep)}
.prose table,.docs-prose table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;font-size:14px}
.prose th,.prose td,.docs-prose th,.docs-prose td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair-soft);color:var(--ink-soft)}
.prose thead th,.docs-prose thead th{background-color:var(--paper);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.prose tbody tr:last-child td,.docs-prose tbody tr:last-child td{border-bottom:none}
/* ---------- Breakpoint 640 ---------- */
@media (max-width:640px){
.form-grid{grid-template-columns:1fr}
.prose table,.docs-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto}
/* a full sentence on the secondary CTA must wrap rather than clip */
.end-cta .btn-line{white-space:normal;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;line-height:1.35}
.calc-chart-hours span{font-size:7px}
}
/* ---------- 18.2 Tables, pricing cards, chips ---------- */
/* ============ Vergleichstabelle ============ */
.cmp-wrap { margin-top: clamp(34px, 4vw, 48px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; background: none; }
.cmp-table th, .cmp-table td { padding: 15px 20px; text-align: left; font-size: 15px; line-height: 1.5; border-bottom: 1px solid var(--hair-soft); }
.cmp-table thead th { padding: 13px 20px; background: var(--paper); border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-faint); }
.cmp-table tbody td { color: var(--ink-soft); }
.cmp-table tbody td:first-child { min-width: 210px; font-weight: 500; letter-spacing: -.008em; color: var(--ink); }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td.center, .cmp-table th.center { text-align: center; }
.cmp-table tbody tr:hover td { background: var(--hair-soft); }
.cmp-table thead th:nth-child(3), .cmp-table tbody td:nth-child(3), .cmp-table th.cmp-hi, .cmp-table td.cmp-hi { background: var(--lila-wash); }
.cmp-table tbody tr:hover td:nth-child(3), .cmp-table tbody tr:hover td.cmp-hi { background: var(--lila-light); }
.cmp-yes, .cmp-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-sm); font-size: 12px; line-height: 1; }
.cmp-yes { background: var(--lila-wash); border: 1px solid rgba(187, 93, 255, .22); color: var(--lila-deep); }
.cmp-no { background: var(--paper); border: 1px solid var(--hair); color: var(--ink-ghost); }
/* ============ Preiskarten ============ */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-top: clamp(34px, 4vw, 48px); }
.price-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.price-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.price-card.featured { border-color: var(--lila); box-shadow: var(--sh-3); }
.price-card.featured:hover { transform: translateY(-3px); }
.price-card .pc-name { margin-bottom: 12px; padding-right: 96px; font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.price-card.featured .pc-name { color: var(--lila-deep); }
.price-card .pc-price { font-family: var(--mono); font-size: clamp(26px, 3vw, 32px); font-weight: 500; line-height: 1.1; letter-spacing: -.024em; font-variant-numeric: tabular-nums; color: var(--ink); }
.price-card .pc-price small { display: block; margin-top: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); }
.price-card .pc-desc { margin: 14px 0 20px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.price-card .pc-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0 0 26px; padding: 0; }
.price-card .pc-features li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.price-card .pc-features li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: var(--r-sm); background: var(--lila-wash); border: 1px solid rgba(187, 93, 255, .22); }
.price-card .pc-features li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 7px; height: 4px; border-left: 1.5px solid var(--lila-deep); border-bottom: 1.5px solid var(--lila-deep); transform: rotate(-45deg); }
.price-card .pc-cta { margin-top: auto; }
.price-badge { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-faint); }
.price-card.featured .price-badge { background: var(--lila); border-color: var(--lila); color: var(--white); box-shadow: 0 3px 5px rgba(94, 31, 139, .18); }
/* ============ Chips, Pills, Tags ============ */
.pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 30px; padding: 6px 14px; border: 1px solid rgba(187, 93, 255, .22); border-radius: 999px; background: var(--lila-wash); font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; line-height: 1.35; text-align: left; color: var(--lila-deep); }
.pill svg { width: 14px; height: 14px; flex: none; color: var(--lila); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 28px; padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; line-height: 1.35; color: var(--ink-soft); transition: border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.tag svg { width: 13px; height: 13px; flex: none; color: var(--ink-ghost); }
a.tag:hover, button.tag:hover { border-color: var(--ink-ghost); color: var(--ink); box-shadow: var(--sh-1); }
@media (max-width: 980px) {
.price-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.price-grid { grid-template-columns: 1fr; }
.price-card { padding: 24px 20px; }
}
/* ---------- 18.3 Logo marquee, testimonials, stats, rating ---------- */
/* ============================================================
LOGOLEISTE · STIMMEN · ZAHLEN
Marquee, Testimonials, Kennzahlenband, Sternzeile
============================================================ */
/* ---------- Logoleiste / Marquee ---------- */
.partners{
background:var(--paper);
border-top:1px solid var(--hair-soft);
border-bottom:1px solid var(--hair-soft);
padding:clamp(56px,6vw,76px) 0;
text-align:center;
}
.partners h3{
font-size:13px;
font-weight:400;
line-height:1.5;
letter-spacing:0;
color:var(--ink-ghost);
margin-bottom:clamp(22px,2.6vw,30px);
}
.partner-row{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:14px 40px;
}
.partner-logo{
display:inline-flex;
align-items:center;
gap:9px;
font-size:15px;
font-weight:500;
letter-spacing:-.01em;
color:var(--ink-ghost);
transition:color .18s ease;
}
.partner-logo:hover{color:var(--ink-soft)}
.partner-logo .pl-dot{
width:6px;
height:6px;
flex:none;
border-radius:50%;
background:var(--lila);
opacity:.45;
transition:opacity .18s ease;
}
.partner-logo:hover .pl-dot{opacity:1}
.marquee{
position:relative;
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.marquee-track{
display:flex;
width:max-content;
animation:marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{
display:flex;
align-items:center;
flex:none;
gap:56px;
padding-right:56px;
}
@keyframes marquee-scroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* ---------- Bekannt aus ---------- */
.bekannt-aus{position:relative;margin-top:clamp(26px,3vw,34px)}
.bekannt-aus .ba-label{
display:block;
font-family:var(--mono);
font-size:11px;
font-weight:400;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--ink-ghost);
margin-bottom:16px;
}
.ba-logos{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:14px 36px;
}
.ba-logos img{
height:26px;
width:auto;
object-fit:contain;
mix-blend-mode:multiply;
filter:grayscale(1);
opacity:.38;
transition:opacity .18s ease;
}
.ba-logos img:hover{opacity:.7}
/* ---------- Sternzeile ---------- */
.stars{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
font-family:var(--mono);
font-size:12.5px;
color:var(--ink-faint);
}
.stars .star-row{
font-size:14px;
line-height:1;
letter-spacing:.14em;
color:var(--golden,#FFBA02);
}
.stars .rating{
font-family:var(--mono);
font-size:12.5px;
letter-spacing:.01em;
color:var(--ink-faint);
}
/* ---------- Stimmen: Bildkarten ---------- */
.testi-band{background:var(--white)}
.testi-band h2{max-width:20ch}
.testi-band h2 b{color:inherit;font-weight:500}
.testi-band .sub{
margin-top:14px;
max-width:56ch;
font-size:17px;
line-height:1.5;
color:var(--navy-soft);
}
.testi-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:clamp(38px,4vw,54px);
}
.testi-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-start;
min-height:0;
overflow:hidden;
background:var(--white);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
color:var(--ink);
text-decoration:none;
isolation:isolate;
transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.testi-card:hover{
transform:translateY(-3px);
box-shadow:var(--sh-3);
border-color:var(--hair);
}
.testi-card::before{content:none}
.testi-bg{
order:1;
position:static;
width:100%;
height:auto;
aspect-ratio:16/9.3;
object-fit:cover;
object-position:center;
border-bottom:1px solid var(--hair-soft);
}
.testi-badge{
position:absolute;
z-index:2;
top:14px;
right:14px;
left:auto;
transform:none;
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:var(--r-sm);
background:var(--white);
border:1px solid var(--line);
box-shadow:var(--sh-1);
color:var(--lila-deep);
}
.testi-badge svg{width:14px;height:14px}
/* der frühere Hover-Weichzeichner wird zum ruhigen Zitatblock */
.testi-hover{
order:2;
position:static;
z-index:auto;
flex:1;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:12px;
padding:18px 20px 16px;
text-align:left;
background:none;
opacity:1;
-webkit-backdrop-filter:none;
backdrop-filter:none;
pointer-events:auto;
transition:none;
}
.testi-avatar{
width:40px;
height:40px;
flex:none;
border-radius:var(--r-sm);
object-fit:cover;
border:1px solid var(--line);
box-shadow:none;
}
.testi-quote{
max-width:none;
font-size:15.5px;
font-style:normal;
line-height:1.62;
color:var(--ink);
}
.testi-quote .tq-author{
display:block;
margin-top:10px;
font-family:var(--mono);
font-style:normal;
font-size:12px;
letter-spacing:.01em;
color:var(--ink-faint);
}
.testi-foot{
order:3;
position:relative;
z-index:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:13px 20px;
border-top:1px solid var(--hair-soft);
background:var(--paper);
}
.testi-foot .tf-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.testi-foot .tf-name{
font-size:15px;
font-weight:500;
line-height:1.3;
letter-spacing:-.012em;
color:var(--ink);
}
.testi-foot .tf-more{
font-family:var(--mono);
font-size:12px;
letter-spacing:.01em;
color:var(--ink-faint);
}
.testi-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
flex:none;
width:32px;
height:32px;
border-radius:var(--r-sm);
background:var(--lila-wash);
color:var(--lila-deep);
transition:transform .18s ease,background .18s ease,color .18s ease;
}
.testi-arrow svg{width:15px;height:15px}
.testi-card:hover .testi-arrow{
transform:translateX(3px);
background:var(--lila);
color:var(--white);
}
/* ---------- Stimmen: schlichte Zitatkarte ---------- */
.quote-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:clamp(38px,4vw,54px);
}
.quote-card{
display:flex;
flex-direction:column;
gap:14px;
padding:24px 22px;
background:var(--white);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
transition:box-shadow .18s ease,transform .18s ease;
}
.quote-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.quote-card .q-stars{
font-size:13px;
line-height:1;
letter-spacing:.14em;
color:var(--golden,#FFBA02);
}
.quote-card p{font-size:15.5px;line-height:1.62;color:var(--ink)}
.quote-card .q-author{
margin-top:auto;
font-family:var(--mono);
font-size:12.5px;
letter-spacing:.01em;
color:var(--ink-faint);
}
/* ---------- Zahlenband ---------- */
.stats{background:var(--paper);padding:var(--sec) 0}
.stats h2{max-width:22ch}
.stats h2 b{color:inherit;font-weight:500}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:clamp(38px,4vw,54px);
}
.stat-card,
.stat-card.lila,
.stat-card.navy,
.stat-card.grayblue,
.stat-card.deep{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:22px;
min-height:186px;
padding:22px;
background:var(--white);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
color:var(--ink);
transition:box-shadow .18s ease,transform .18s ease;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.stat-card .idx{
align-self:flex-start;
display:inline-flex;
align-items:center;
justify-content:center;
height:26px;
padding:0 9px;
border-radius:var(--r-sm);
background:var(--lila-wash);
border:1px solid rgba(187,93,255,.22);
font-family:var(--mono);
font-size:12px;
letter-spacing:.06em;
color:var(--lila-deep);
opacity:1;
}
.stat-card .num{
font-family:var(--mono);
font-size:clamp(32px,3.6vw,44px);
font-weight:500;
line-height:1.05;
letter-spacing:-.03em;
color:var(--ink);
}
.stat-card .cap{
margin-top:7px;
max-width:22ch;
font-size:14.5px;
line-height:1.45;
color:var(--ink-soft);
opacity:1;
}
/* ---------- Umbrüche ---------- */
@media (max-width:980px){
.stats-grid{grid-template-columns:1fr 1fr}
.testi-grid,.quote-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.stats-grid,.testi-grid,.quote-grid{grid-template-columns:1fr}
.partner-row{gap:12px 26px}
.marquee-group{gap:38px;padding-right:38px}
.ba-logos{gap:12px 24px}
.ba-logos img{height:22px}
}
@media (prefers-reduced-motion:reduce){
.marquee-track{animation:none}
}
/* ---------- 18.4 Accordion, tabs, carousel, search dropdown ---------- */
/* ---------- Akkordeon (FAQ, Jobliste) — /48 .q .q-b .q-c unter alten Namen ---------- */
.acc{max-width:800px;margin:clamp(28px,3.4vw,40px) auto 0;display:flex;flex-direction:column;gap:10px}
.acc-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .18s ease,border-color .18s ease}
.acc-item:hover{border-color:var(--hair);box-shadow:var(--sh-2)}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;background:none;border:none;text-align:left;cursor:pointer;color:var(--ink)}
.acc-q>span:not(.acc-ico){font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.012em}
.acc-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:17px;height:17px;color:var(--ink-ghost);transition:transform .2s ease,color .2s ease}
.acc-ico svg{width:17px;height:17px}
.acc-q:hover .acc-ico{color:var(--ink-faint)}
.acc-item.open .acc-ico{transform:rotate(45deg);color:var(--lila)}
.acc-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility 0s linear .3s}
.acc-item.open .acc-a{max-height:600px;visibility:visible;transition:max-height .3s ease,visibility 0s}
.acc-a-inner{padding:0 20px 18px;font-size:15px;line-height:1.62;color:var(--ink-soft)}
.acc-a-inner p{font-size:15px;line-height:1.62;color:var(--ink-soft)}
.acc-a-inner p+p{margin-top:10px}
/* ---------- Funktions-Tabs — /48 .nav-t als Pille ---------- */
.fn-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(30px,3.6vw,44px) 0 clamp(24px,3vw,36px)}
.fn-tab{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);box-shadow:var(--sh-1);font-size:14.5px;font-weight:500;letter-spacing:-.006em;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.fn-tab:hover{border-color:var(--ink-ghost);color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-1px)}
.fn-tab.active{background:var(--lila-wash);border-color:rgba(187,93,255,.28);color:var(--lila-deep);box-shadow:none;transform:none}
.fn-tab.active:hover{background:var(--lila-light);border-color:rgba(187,93,255,.38);color:var(--lila-deep)}
.fn-panel[hidden]{display:none}
.fn-panel .feature-grid{margin-top:0}
/* ---------- Story-Karussell ---------- */
.story-carousel-slides .story-slide{display:none}
.story-carousel-slides .story-slide.active{display:block;animation:storyfade .32s ease}
@keyframes storyfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.story-card{padding:clamp(24px,3vw,36px);background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.story-card .pill{margin-bottom:16px}
.story-quote{font-size:clamp(19px,2.2vw,24px);font-weight:500;line-height:1.34;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.story-card .split-media{background:var(--lila-wash)}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.carousel-dots{display:flex;align-items:center;gap:10px}
.carousel-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;background:var(--ink-ghost);cursor:pointer;transition:background .18s ease,box-shadow .18s ease}
.carousel-dot:hover{background:var(--ink-faint)}
.carousel-dot.active{background:var(--lila);box-shadow:0 0 0 4px rgba(187,93,255,.16)}
.carousel-arrow{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--ink-soft);cursor:pointer;box-shadow:var(--sh-1);transition:border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.carousel-arrow:hover{border-color:var(--ink-ghost);color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-1px)}
.carousel-arrow svg{width:17px;height:17px}
/* ---------- Branchensuche — /48 .dd als Ergebnisliste ---------- */
.industry-search-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;max-height:340px;overflow-y:auto;padding:8px;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.industry-search-dropdown.open{display:block}
.industry-search-item{display:block;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;transition:background .14s ease}
.industry-search-item:hover{background:var(--lila-wash)}
.industry-search-item strong{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.industry-search-item span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.industry-search-empty{padding:14px 12px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.industry-search-empty a{color:var(--lila-deep);text-decoration:underline;text-underline-offset:2px}
.industry-search-empty a:hover{color:var(--lila-hover)}
/* ---------- 18.5 Sub-page hero, feature grids, mocks ---------- */
/* ============ 18a. Sub-page hero .hero-sub / .page-hero ============
Derived from /48's .hero: same glow atmosphere, shorter, h1 at the
small end of the clamp, room for a kicker above and a CTA row below.
Component name: .hero-sub — .page-hero is the shipped alias the
existing sub-page markup uses.
==================================================================== */
.hero-sub,
.page-hero{position:relative;overflow:hidden;background:var(--white);text-align:center;padding:clamp(48px,6vw,78px) 0 clamp(44px,5.4vw,66px)}
.hero-sub.tight,
.page-hero.tight{padding-bottom:clamp(30px,3.6vw,42px)}
.hero-sub>:not(.glow),
.page-hero>:not(.glow){position:relative;z-index:1}
/* glow layer — /48's .glow blobs, kept under the deco/blob names */
/* optional kicker above the headline */
.hero-sub .kicker,
.page-hero .kicker{display:block;margin-bottom:14px}
.hero-sub .badge,
.page-hero .badge{margin-bottom:18px}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;min-height:30px;margin-bottom:18px;padding:5px 13px;border:1px solid var(--line);border-radius:999px;background:var(--white);box-shadow:var(--sh-1);font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.page-hero .eyebrow .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--lila);box-shadow:0 0 0 4px rgba(187,93,255,.16);animation:pulse 2.4s ease-in-out infinite}
.hero-sub h1,
.page-hero h1{max-width:18ch;margin:0 auto;font-size:clamp(34px,4.8vw,52px)}
.hero-sub h1 b,
.page-hero h1 b{font-weight:500;color:var(--lila-deep)}
.hero-sub .lead,
.page-hero .lead,
.page-hero p.lead{margin:18px auto 0;max-width:600px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:28px}
/* ============ 18b. Feature grid .feature-* ============
/48's .card treatment under the site's class names.
======================================================== */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(38px,4vw,50px)}
.feature-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.feature-card{display:block;padding:24px 22px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);color:var(--ink);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.feature-card.on-white{background:var(--paper)}
/* hover lift is stated twice so it also wins over .reveal.in{transform:none} */
.feature-card:hover,
.feature-card.reveal.in:hover{transform:translateY(-2px);box-shadow:var(--sh-2);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
a.feature-card:hover,
a.feature-card.reveal.in:hover{border-color:var(--hair)}
.feature-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:16px;border-radius:var(--r-sm);background:var(--lila-wash);color:var(--lila-deep)}
.feature-ico svg{width:18px;height:18px}
.feature-card h3{margin-bottom:6px}
.feature-card p{font-size:15px;color:var(--ink-soft)}
.feature-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair-soft)}
.feature-card ul li{position:relative;padding-left:18px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.feature-card ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lila)}
/* ============ 18c. Step grid .steps-band / .steps-grid / .step-card ============ */
.steps-band{background:var(--white)}
.steps-band h2{max-width:20ch}
.steps-band h2 b{color:var(--lila-deep)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(38px,4vw,50px)}
.step-card{position:relative;padding:24px 22px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:box-shadow .18s ease,transform .18s ease}
.step-card:hover,
.step-card.reveal.in:hover{transform:translateY(-2px);box-shadow:var(--sh-2);transition:box-shadow .18s ease,transform .18s ease}
.step-num{display:inline-flex;align-items:center;justify-content:center;height:26px;margin-bottom:14px;padding:0 9px;border:1px solid rgba(187,93,255,.22);border-radius:var(--r-sm);background:var(--lila-wash);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--lila-deep)}
.step-card h3{margin-bottom:7px}
.step-card p{font-size:15px;color:var(--ink-soft)}
/* ============ 18d. Two-column content .split / .check-list ============
.split itself is /48's; only the site's media frame, the reversed
ratio and the check list are re-authored here.
======================================================================= */
.split.narrow-media{grid-template-columns:1.1fr .9fr}
.split h2 b{color:var(--lila-deep)}
.split p{color:var(--ink-soft)}
.split .split-media>img{width:100%;height:auto;display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.check-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:24px}
.check-list li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}
.check-list li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:var(--r-sm);background:var(--lila-wash);border:1px solid rgba(187,93,255,.22)}
.check-list li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:5px;border-left:2px solid var(--lila-deep);border-bottom:2px solid var(--lila-deep);transform:rotate(-45deg)}
/* ============ 18e. Numbered list on the dark band .func-* ============
/48's .quiet* glass treatment, one card per step.
====================================================================== */
.dark h2 b{color:#DCC4FF}
.func-list{display:flex;flex-direction:column;gap:12px;margin-top:clamp(38px,4.4vw,54px);position:relative;z-index:1}
.func-item{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:18px 20px;padding:22px;background:rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--on-dark-hair);border-radius:var(--r-lg);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.func-item:hover,
.func-item.reveal.in:hover{transform:translateY(-1px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.func-num{font-family:var(--mono);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#DCC4FF}
.func-num b{font-weight:400;color:var(--on-dark-faint)}
.func-body h3{margin-bottom:5px;color:var(--white)}
.func-body p{max-width:62ch;font-size:14.5px;color:var(--on-dark-faint)}
.func-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid var(--on-dark-hair);color:#DCC4FF}
.func-chip svg{width:18px;height:18px}
/* ============ 18f. Hero product mock .hero-mock / .mock-* ============
/48's .frame + .tr-row idiom.
====================================================================== */
.hero-mock{position:relative;max-width:1060px;margin:clamp(38px,5vw,62px) auto 0}
.mock-window{overflow:hidden;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 6px 12px rgba(17,54,68,.10),0 34px 70px rgba(17,54,68,.16)}
.mock-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;background:var(--white);border-bottom:1px solid var(--hair-soft)}
.mock-bar .dots{display:flex;gap:6px}
.mock-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.mock-bar .mock-url{flex:1;max-width:280px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--ink-ghost)}
.mock-body{display:grid;grid-template-columns:212px 1fr;min-height:360px}
.mock-side{padding:20px 16px;background:var(--navy-deep);color:var(--white)}
.mock-side .ms-brand{display:inline-flex;align-items:baseline;gap:1px;margin-bottom:22px;font-size:17px;font-weight:600;letter-spacing:-.03em}
.mock-side .ms-brand .slash{margin-right:2px;font-weight:500;letter-spacing:-.09em;color:var(--lila)}
.mock-side .ms-item{margin-bottom:2px;padding:9px 11px;border-radius:var(--r-sm);font-family:var(--mono);font-size:12.5px;color:var(--on-dark-faint)}
.mock-side .ms-item.active{background:rgba(187,93,255,.20);color:var(--white)}
.mock-main{padding:22px 24px;background:var(--white)}
.mock-main .mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.mock-main .mm-head h4,
.mock-main .mm-head .mm-title{font-size:15px;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
.mock-pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--lila-wash);border:1px solid rgba(187,93,255,.24);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--lila-deep)}
.mock-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:11px 12px;background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--r)}
.mock-row:last-child{margin-bottom:0}
.mock-row .mr-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:var(--lila-wash);color:var(--lila-deep)}
.mock-row .mr-chip.solid{background:var(--lila);color:var(--white)}
.mock-row .mr-chip svg{width:15px;height:15px}
.mock-row .mr-text{flex:1;min-width:0}
.mock-row .mr-text .t{font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.mock-row .mr-text .s{font-family:var(--mono);font-size:11.5px;color:var(--ink-ghost)}
.mock-row .mr-time{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.mock-badge{flex:none;padding:4px 8px;border-radius:var(--r-sm);background:var(--lila-wash);border:1px solid rgba(187,93,255,.22);font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--lila-deep)}
/* ============ 18g. Lila band + autoplay accordion .band-lila / .aio-* ============ */
.band-lila{position:relative;overflow:hidden;background:var(--lila-wash)}
.band-lila h2{max-width:22ch}
.band-lila h2 b{color:var(--lila-deep)}
.aio-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px}
.aio-slider{display:grid;grid-template-columns:1fr minmax(0,504px);gap:clamp(28px,3.4vw,44px);align-items:center;margin-top:clamp(38px,4vw,50px)}
.aio-list{display:flex;flex-direction:column;gap:10px}
.aio-item{background:transparent;border:1px solid transparent;border-radius:var(--r-lg);transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}
.aio-item.active{background:var(--white);border-color:var(--line);box-shadow:var(--sh-2)}
.aio-head{display:flex;align-items:center;gap:12px;width:100%;padding:18px 22px;background:none;border:0;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.aio-item.active .aio-head{padding-bottom:6px}
.aio-head h3{color:var(--ink-soft);transition:color .18s ease}
.aio-item.active .aio-head h3{color:var(--ink)}
.aio-icn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--lila-light);color:var(--lila-deep);transition:background .18s ease}
.aio-item.active .aio-icn{background:var(--lila-wash)}
.aio-icn svg{width:18px;height:18px}
.aio-panel{overflow:hidden;max-height:0;visibility:hidden;transition:max-height .4s ease,visibility 0s linear .4s}
.aio-item.active .aio-panel{max-height:340px;visibility:visible;transition:max-height .4s ease,visibility 0s}
.aio-panel-inner{padding:0 22px 8px}
.aio-panel p{margin-bottom:16px;font-size:15px;line-height:1.62;color:var(--ink-soft)}
.aio-foot{display:flex;align-items:center;gap:16px;padding:0 22px 20px}
.aio-progress{flex:1;height:4px;overflow:hidden;border-radius:2px;background:var(--lila-light)}
.aio-bar{width:0;height:100%;border-radius:2px;background:var(--lila)}
.aio-item.active.playing .aio-bar{width:100%;transition:width 10s linear}
.aio-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;padding:0;background:none;border:0;color:var(--ink-ghost);cursor:pointer;transition:color .18s ease}
.aio-toggle:hover{color:var(--lila-deep)}
.aio-toggle svg{width:22px;height:22px}
.aio-toggle .icn-play{display:block}
.aio-toggle .icn-pause{display:none}
.aio-item.playing .aio-toggle .icn-play{display:none}
.aio-item.playing .aio-toggle .icn-pause{display:block}
.aio-visual{position:relative;overflow:hidden;aspect-ratio:1670/877;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.aio-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.aio-img.active{opacity:1}
.aio-link{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;color:var(--lila-deep)}
.aio-link svg{width:13px;height:10px;flex:none;transition:transform .18s ease}
.aio-link:hover{color:var(--lila-hover)}
.aio-link:hover svg{transform:translateX(3px)}
/* ---------- Breakpoints for this group (site breakpoints 980 / 640) ---------- */
@media (max-width:980px){
.feature-grid,
.cards.cols-4,
.feature-grid.cols-4,
.steps-grid{grid-template-columns:1fr 1fr}
.split.narrow-media{grid-template-columns:1fr}
.aio-top{flex-direction:column;align-items:flex-start;gap:16px}
.aio-slider{grid-template-columns:1fr}
.aio-visual{order:-1;width:100%;max-width:504px;margin:0 auto}
.mock-body{grid-template-columns:1fr}
.mock-side{display:none}
}
@media (max-width:640px){
.feature-grid,
.cards.cols-2,
.feature-grid.cols-2,
.cards.cols-4,
.feature-grid.cols-4,
.steps-grid{grid-template-columns:1fr}
.func-item{grid-template-columns:auto 1fr;gap:14px 16px}
.func-chip{display:none}
.mock-badge{display:none}
.hero-ctas .btn{width:100%}
}
/* ---------- 18.6 Promoted from the shared partials ---------- */
/* hero placement modifier for .stars (used as class="hero-trust stars") */
.hero-trust{margin-top:clamp(16px,2.2vw,22px);flex-wrap:wrap;gap:9px 14px}
/* a quote card carries a portrait, so the author line is an avatar + text row */
.quote-card .q-author{display:flex;align-items:center;gap:12px}
.quote-card .q-author strong{display:block;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
/* the comparison table uses real | row headers */
.cmp-table tbody th{min-width:210px;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.cmp-table tbody tr:hover th{background:var(--hair-soft)}
/* visually hidden, for text carried behind a decorative glyph */
.cmp-sr,.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* calculator: hourly call-distribution chart (built by the package calculator's JS) */
.calc-field-chart{margin-bottom:22px}
.calc-chart{display:flex;align-items:flex-end;gap:3px;height:96px;margin-top:12px;padding:0 2px}
.calc-bar-col{flex:1;display:flex;align-items:flex-end;height:100%}
.calc-bar{width:100%;border-radius:4px 4px 0 0;background:var(--lila);transition:height .35s cubic-bezier(.22,1,.36,1),background .25s ease,opacity .25s ease}
.calc-bar.dimmed{background:var(--lila-light);opacity:.75}
.calc-chart-hours{display:flex;gap:3px;margin-top:8px;padding:0 2px}
.calc-chart-hours span{flex:1;text-align:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.02em;color:var(--ink-faint)}
/* calculator: two range inputs stacked in one track, only the thumbs are clickable */
.calc-slider.is-dual .calc-range{pointer-events:none}
.calc-slider.is-dual .calc-range::-webkit-slider-thumb{pointer-events:auto}
.calc-slider.is-dual .calc-range::-moz-range-thumb{pointer-events:auto}
/* ---------- 18.7 Promoted from the page migration ---------- */
/* a hero that ends on a visual, not on the trust strip, needs its own bottom rhythm */
.hero{padding-bottom:clamp(48px,6vw,72px)}
/* a capped heading inside a centred .sec-head must stay centred */
.sec-head h2,.sec-head .sub{margin-left:auto;margin-right:auto}
/* the rotating word in the homepage headline */
.hero h1 .rotor{display:inline-grid;color:var(--lila-deep);vertical-align:bottom}
.hero h1 .rotor .word{grid-area:1/1;justify-self:center;white-space:nowrap;transition:opacity .45s ease,transform .45s ease}
.hero h1 .rotor .w-ghost{visibility:hidden}
.hero h1 .rotor.swap .w-live{opacity:0;transform:translateY(14px)}
/* form submit sits full width under the last field */
.form-submit{width:100%;margin-top:22px}
/* the error counterpart of .alert-success */
.alert-error{background-color:rgba(200,32,48,.06);border-color:rgba(200,32,48,.26);color:rgba(140,22,34,.92)}
/* a bullet may lead with a bold term */
.list-i strong{color:var(--ink);font-weight:500}
/* a card may carry a kicker above its heading */
.card .kicker,.feature-card .kicker{display:block;margin-bottom:8px}
/* a quote may name its source alongside the stars */
.quote-card .q-src{margin-left:auto;align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:var(--lila-deep)}
/* ---------- 18.8 Promoted from the remaining pages ---------- */
/* .cards takes the same column modifiers .feature-grid already has */
.cards.cols-2{grid-template-columns:repeat(2,1fr)}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
/* a status pill under a hero headline */
.hero-pill{margin-top:22px}
/* a --paper surface sitting on a --paper band lifts to white */
.sec.paper .privacy-toc-nav{background-color:var(--white)}
/* ============ 21. Breakpoints ============ */
/* ---------- Breakpoints ---------- */
@media (max-width:980px){
.nav,.hd-link{display:none}
.burger{display:inline-flex}
.steps,.cards,.quiet{grid-template-columns:1fr 1fr}
.calc{grid-template-columns:1fr;gap:30px;max-width:520px}
.split{grid-template-columns:1fr}
.split-media{order:-1}
.ft-top{grid-template-columns:1fr 1fr 1fr}
.ft-brand{grid-column:1/-1}
.rail-head{flex-direction:column;align-items:flex-start;gap:20px}
.rail-nav{align-self:flex-end}
.tl-scroll{overflow-x:auto;overflow-y:hidden;padding:0 40px;scrollbar-width:thin}
.tl{height:300px;min-width:660px}
.tl-ev{width:158px}
.tl-ev .ev-card{padding:10px 11px}
}
@media (max-width:640px){
.hd-in{height:60px;gap:12px}
.msheet{inset:60px 0 0}
.steps,.cards,.quiet{grid-template-columns:1fr}
.ft-top{grid-template-columns:1fr 1fr}
.tile{flex:0 0 260px;max-width:260px}
.frame-bar{height:34px}
.frame-url{max-width:170px}
.btn{width:100%}
.hd-right .btn,.rail-btn,.tc-go{width:auto}
.tc-go{width:100%}
.end-cta .btn,.dark-cta .btn{width:100%}
.shot-cap{gap:8px 16px}
.tl{height:300px}
.tl-ev{width:136px}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.rv{opacity:1;transform:none}
.tl-ev .ev-card{opacity:1;transform:none}
.tl-dot{display:none}
}
|