/* Quartio Webseite – gleiche Tokens wie die Plattform (frontend/src/style.css). Keine externen Ressourcen. */
@font-face{font-family:'Roboto Variable';font-weight:100 900;font-display:swap;src:url(fonts/roboto-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Variable';font-weight:100 900;font-display:swap;src:url(fonts/roboto-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat Variable';font-weight:100 900;font-display:swap;src:url(fonts/montserrat-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat Variable';font-weight:100 900;font-display:swap;src:url(fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#faf6f8;--surface:#fff;--surface-2:#fcf9fb;--ink:#3e192e;--mute:#786270;--line:#ece1e7;--line-2:#dccdd5;
  --accent:#c04375;--accent-ink:#fff;--accent-soft:#f9e6ee;--accent-line:#eab6cb;--brand:#3e192e;
  --ok:#13795b;--ok-soft:#e1f4ec;--warn:#a15c07;--warn-soft:#fdf0d8;
  
  --r-card:16px;--r-ctl:10px;--ease:cubic-bezier(.16,1,.3,1);
  --font:'Roboto Variable',system-ui,-apple-system,'Segoe UI',sans-serif;--head:'Montserrat Variable','Roboto Variable',system-ui,sans-serif;
  color-scheme:light}
:root[data-theme=dark]{--bg:#170a12;--surface:#221019;--surface-2:#2a1521;--ink:#f6ecf1;--mute:#b49ba8;--line:#3a2230;--line-2:#4a2d3f;--accent:#e0709b;--accent-ink:#2b0f1d;--accent-soft:#42182d;--accent-line:#6b2a47;--brand:#f6ecf1;--ok:#4fd6a8;--ok-soft:#12352a;--warn:#f2b45a;--warn-soft:#3a2a10;--shadow:0 1px 2px rgb(0 0 0/.4),0 18px 40px -20px rgb(0 0 0/.7);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#170a12;--surface:#221019;--surface-2:#2a1521;--ink:#f6ecf1;--mute:#b49ba8;--line:#3a2230;--line-2:#4a2d3f;--accent:#e0709b;--accent-ink:#2b0f1d;--accent-soft:#42182d;--accent-line:#6b2a47;--brand:#f6ecf1;--ok:#4fd6a8;--ok-soft:#12352a;--warn:#f2b45a;--warn-soft:#3a2a10;--shadow:0 1px 2px rgb(0 0 0/.4),0 18px 40px -20px rgb(0 0 0/.7);color-scheme:dark}}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px}img,svg{max-width:100%}
h1,h2,h3{font-family:var(--head);color:var(--brand);margin:0 0 .5em;letter-spacing:-.025em}
h1{font-size:clamp(2rem,3.9vw,3.1rem);line-height:1.08;font-weight:700}h2{font-size:clamp(1.6rem,2.8vw,2.25rem);line-height:1.15;font-weight:700}h3{font-size:1.05rem;line-height:1.3;font-weight:650;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:64ch}.sub{color:var(--mute)}.small{font-size:.85rem}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}.wrap.narrow{width:min(820px,100% - 40px);margin-inline:auto}
section{padding:88px 0}.tint{background:var(--surface-2);border-block:1px solid var(--line)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--surface);padding:8px 12px;border-radius:var(--r-ctl)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* Apple-Stil: schmale, durchscheinende Menüleiste, zentrierte große Typografie, Bildflächen mit runden Ecken */
.gnav{position:sticky;top:0;z-index:20;height:52px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--line-2) 60%,transparent)}
.gnav-in{width:min(1024px,100% - 40px);height:100%;margin-inline:auto;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:8px;font:650 1rem var(--head);color:var(--brand);text-decoration:none}.logo img{width:24px;height:24px;border-radius:6px}
#nav{display:flex;flex:1;justify-content:center;gap:28px}
#nav a{color:var(--ink);text-decoration:none;font-size:.8rem;opacity:.82;transition:opacity .2s}#nav a:hover{opacity:1}
.gright{display:flex;align-items:center;gap:16px}.mlogin{display:none}
.gcta{font-size:.8rem;font-weight:600;background:var(--accent);color:var(--accent-ink);padding:6px 14px;border-radius:99px;text-decoration:none;white-space:nowrap}.gcta:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.menu-btn{display:none;background:none;border:0;width:32px;height:32px;position:relative;cursor:pointer}.menu-btn span{position:absolute;left:7px;right:7px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}.menu-btn span:first-child{top:12px}.menu-btn span:last-child{top:19px}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.btn{font:inherit;font-weight:600;display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),background .2s}
.btn:hover{background:var(--accent-soft)}.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.tl{color:var(--accent);font-weight:600;text-decoration:none;font-size:1.05rem}.tl:hover{text-decoration:underline;text-underline-offset:4px}
.center{text-align:center}.center p,.center .lead{margin-inline:auto}.center .actions{justify-content:center}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--mute);line-height:1.45;max-width:40ch}
.wrap.wide{width:min(1240px,100% - 40px)}
/* Hero */
.hero{padding:84px 0 24px}.hero h1{font-size:clamp(2.4rem,6.4vw,5rem);line-height:1.03;font-weight:700;letter-spacing:-.035em;max-width:17ch;margin-inline:auto}
.hero .lead{margin-top:22px}.actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:30px 0 56px}
.ph{display:block;width:100%;height:auto;border-radius:28px;object-fit:cover}.ph.empty{background:linear-gradient(160deg,var(--accent-soft),var(--surface-2));border:1px solid var(--line)}
.hero-img{aspect-ratio:16/8}.hero-img.empty{min-height:360px}.mid{aspect-ratio:16/8;margin:44px 0 0}.mid.empty{min-height:320px}
.strip{padding:72px 0 8px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;text-align:center}
.facts li{padding:0 12px}.facts b{display:block;font:700 clamp(1.4rem,2.3vw,1.9rem) var(--head);color:var(--brand);letter-spacing:-.03em}.facts span{color:var(--mute);font-size:.92rem;display:block;max-width:24ch;margin:4px auto 0}
section{padding:104px 0}.band{background:var(--surface-2)}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin-bottom:.4em}.center h2{max-width:20ch;margin-inline:auto}
.plain{list-style:none;margin:0;padding:0}.plain li{padding:14px 0;border-bottom:1px solid var(--line)}.plain li:last-child{border:0}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;text-align:left}.cols3 li{border:0;border-top:1px solid var(--line-2);padding:16px 0 0;font-size:.98rem}.trustlist{margin-top:48px;grid-template-columns:repeat(4,1fr)}
/* Zielgruppen-Kacheln */
.atiles{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.atile{display:flex;flex-direction:column;background:var(--surface);border-radius:28px;padding:44px 44px 0;text-decoration:none;color:var(--ink);overflow:hidden;border:1px solid var(--line);text-align:center;transition:transform .35s var(--ease)}
.atile:hover{transform:translateY(-3px)}.atile h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.025em;margin-bottom:.3em}.atile p{color:var(--mute);margin:0 auto 14px;max-width:34ch}.atile .tl{margin-bottom:32px}
.atile .ph{border-radius:20px 20px 0 0;aspect-ratio:4/3;margin-top:auto}.atile .ph.empty{min-height:260px}
/* Funktionen als Kacheln (5 Gruppen: 2+3) */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:56px}
.tile{grid-column:span 2;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px}.tile:nth-child(-n+2){grid-column:span 3}
.tile h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.8em}.tile ul{list-style:none;margin:0;padding:0}.tile li{padding:8px 0;border-top:1px solid var(--line);font-size:.93rem}.tile li:first-child{border:0}
.st{font-size:.72rem;font-weight:650;margin-left:4px}.st.beta{color:var(--warn)}.st.planned{color:var(--mute)}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:48px}.why>div{padding-top:0}.why h3{font-size:1.1rem}.why p{color:var(--mute);margin:0;font-size:.95rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}.split.one{grid-template-columns:minmax(0,620px);justify-content:center}.formbox{margin-top:48px}
/* Tabellen, Schritte, FAQ */
.blk{padding:30px 0}.blk h2{margin-top:.2em}
.tw{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--surface);margin:20px 0}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:660px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--accent-soft);color:var(--brand);font-family:var(--head);font-size:.84rem}tbody th{font-weight:600;color:var(--brand)}tr:last-child>*{border-bottom:0}
thead th:nth-child(2),tbody td:nth-child(2){background:color-mix(in srgb,var(--accent-soft) 40%,transparent)}
.steps{list-style:none;counter-reset:s;padding:0;margin:20px 0;border-top:1px solid var(--line-2)}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:2px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:span 2;font:700 1.05rem var(--head);color:var(--accent)}.steps span{color:var(--mute)}
.checks{list-style:none;padding:0;margin:0}.checks li{padding:10px 0;border-bottom:1px solid var(--line)}.checks li:last-child{border:0}
details{border-top:1px solid var(--line-2);padding:16px 0}details:last-of-type{border-bottom:1px solid var(--line-2)}
summary{cursor:pointer;font:600 1.02rem var(--head);list-style:none;display:flex;justify-content:space-between;gap:16px}summary::after{content:'+';color:var(--accent);font-size:1.4rem;line-height:1}details[open] summary::after{content:'-'}
details p{margin:10px 0 0;color:var(--mute)}
dl.facts2{display:grid;grid-template-columns:minmax(120px,190px) 1fr;margin:20px 0;border-top:1px solid var(--line-2)}
dl.facts2 dt,dl.facts2 dd{margin:0;padding:13px 0;border-bottom:1px solid var(--line)}dl.facts2 dt{font-weight:650;color:var(--brand);padding-right:16px}
/* Formular */
form.lead-form{display:grid;gap:14px}label{font-weight:550;font-size:.92rem;display:grid;gap:6px}
input,textarea,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:11px 13px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}.check input{width:auto;margin-top:5px}
.embed iframe{width:100%;border:0;min-height:520px;border-radius:var(--r-ctl)}.hp{position:absolute;left:-9999px}
/* Unterseiten */
.phead{padding:64px 0 16px}.phead .lead{font-size:1.15rem;color:var(--mute)}.upd{font-size:.82rem;color:var(--mute)}
.cta{padding:48px 0 88px}.cta .wrap{border-top:2px solid var(--brand);padding-top:32px}
.legal{padding:56px 0 80px}.legal .wrap{max-width:820px}.legal h2{font-size:1.2rem;margin-top:1.8em}.legal li{margin-bottom:.4em}
/* Fuß: schmal, mittig, Spalten nebeneinander */
footer{background:var(--surface-2);border-top:1px solid var(--line-2);padding:48px 0 32px;font-size:.82rem;color:var(--mute)}
.fwrap{max-width:900px}.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}.fbrand p{margin:12px 0 0;line-height:1.7}
footer h4{font:650 .78rem var(--head);color:var(--brand);margin:0 0 12px}footer ul{list-style:none;margin:0;padding:0}footer li{padding:4px 0}
footer a{color:var(--mute);text-decoration:none}footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}footer .logo{color:var(--brand)}
.fbottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.fbottom p{margin:0;font-size:.78rem}
.fctl{display:flex;align-items:center;justify-content:center;gap:40px}
.tbtn{font:inherit;font-size:.82rem;background:none;border:0;cursor:pointer;color:var(--mute);padding:6px 0}.tbtn:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Sprachmenü */
.langmenu{position:relative;border:0!important;padding:0!important}.langmenu summary{list-style:none;cursor:pointer;font:600 .8rem var(--font);color:var(--ink);padding:6px 10px;border-radius:99px;display:flex;align-items:center;gap:6px}.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.langmenu summary:hover,.langmenu[open] summary{background:var(--accent-soft)}
.langmenu ul{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;margin:0;padding:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 20px 50px -20px rgb(62 25 46/.4);max-height:70vh;overflow:auto}
.langmenu.up ul{top:auto;bottom:calc(100% + 8px);right:50%;transform:translateX(50%)}
.langmenu li{padding:0}.langmenu li a,.langmenu li.soon{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:8px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.88rem}
.langmenu li a:hover{background:var(--accent-soft);text-decoration:none}.langmenu li a[aria-current]{font-weight:700;color:var(--accent)}
.langmenu li.soon{color:var(--mute)}.langmenu li.soon small{font-size:.72rem;white-space:nowrap}
@media(max-width:1000px){.why{grid-template-columns:1fr 1fr}.trustlist{grid-template-columns:1fr 1fr}.bento{grid-template-columns:1fr 1fr}.tile,.tile:nth-child(-n+2){grid-column:auto}}
@media(max-width:860px){#nav{display:none;position:absolute;left:0;right:0;top:52px;background:var(--bg);flex-direction:column;gap:0;padding:8px 20px 16px;border-bottom:1px solid var(--line)}#nav.open{display:flex}#nav a{font-size:1.05rem;padding:13px 0;border-bottom:1px solid var(--line);opacity:1}
 .menu-btn{display:block}.gnav-in{gap:12px}.logo{margin-right:auto}.gcta,.glogin{display:none}.mlogin{display:block}
 .facts,.cols3,.atiles,.split,.why,.bento,.trustlist{grid-template-columns:1fr}.facts{gap:28px}.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}section{padding:64px 0}.two{grid-template-columns:1fr}.atile{padding:32px 24px 0}.hero{padding-top:48px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Produkt-Screenshots: echte Ausschnitte, feiner Rand, getönter Schatten */
.shotwrap{width:min(1100px,100% - 40px)}.hero-img,.side{aspect-ratio:auto;border:1px solid var(--line-2);border-radius:20px;box-shadow:0 40px 80px -44px rgb(62 25 46/.45);background:var(--surface)}
.hero-img.empty,.side.empty{min-height:420px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.split2.rev{grid-template-columns:1.15fr .85fr}
.split2 .lead{max-width:36ch}.split2 .plain{margin:26px 0 24px}.split2 h2{max-width:14ch}
.figcol{display:flex;justify-content:center}.figcol .side{width:100%;max-width:520px;height:auto}.rev .figcol .side{max-width:640px}
@media(max-width:860px){.split2,.split2.rev{grid-template-columns:1fr;gap:36px}.rev .figcol{order:2}}

/* Funktionen: je Bereich eine Überschrift und ein Raster aus Titel plus Satz */
.fgroups{margin-top:64px}.fgroup{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:40px 0;border-top:1px solid var(--line-2)}.fgroup:last-child{border-bottom:1px solid var(--line-2)}
.fgroup>h3{font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.025em;line-height:1.15;margin:0}
.fitems{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.fi b{display:block;font:650 1.02rem var(--head);color:var(--brand);margin-bottom:4px}.fi span{display:block;color:var(--mute);font-size:.95rem;line-height:1.5}
@media(max-width:1000px){.fgroup{grid-template-columns:1fr;gap:20px}}
@media(max-width:640px){.fitems{grid-template-columns:1fr}}

/* Preisrechner */
.calc{padding:24px 0 96px}.calcgrid{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:start}
.calcform fieldset{border:0;border-top:1px solid var(--line-2);margin:0;padding:28px 0 32px}.calcform legend{font:650 1.25rem var(--head);letter-spacing:-.02em;color:var(--brand);padding:0 0 14px;float:left;width:100%}.calcform fieldset>*{clear:both}
.opts{display:flex;flex-wrap:wrap;gap:10px}.chip-opt{position:relative}.chip-opt input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0}input[type=checkbox],input[type=radio]{width:auto}.chip-opt span{display:inline-block;padding:10px 18px;border:1px solid var(--line-2);border-radius:99px;cursor:pointer;font-weight:550;background:var(--surface);transition:background .2s,border-color .2s}
.chip-opt input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.chip-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.addons{display:grid;gap:12px;margin-top:14px}.addon{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--surface);cursor:pointer;font-weight:400}.addon:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.addon input{width:auto;margin-top:5px}.addon span{display:grid;gap:2px}.addon b{font:650 1rem var(--head);color:var(--brand)}.addon em{font-style:normal;color:var(--accent);font-weight:600;font-size:.92rem}.addon small{color:var(--mute);font-size:.88rem}
.calcsum{position:sticky;top:76px;background:var(--surface);border:1px solid var(--line-2);border-radius:28px;padding:30px}.calcsum h2{font-size:1.4rem;margin-bottom:14px}
.ln{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}.ln small{color:var(--mute)}
.tot{display:flex;align-items:baseline;gap:10px;margin:18px 0 4px}.tot b{font:700 2.1rem var(--head);letter-spacing:-.03em;color:var(--brand)}.tot span{color:var(--mute)}
.calcsum .lead-form{margin-top:22px;padding-top:22px;border-top:1px solid var(--line-2)}.calcsum .lead-form h3{font-size:1.1rem}.err{color:var(--bad,#b42318);font-size:.9rem;margin:0}
@media(max-width:960px){.calcgrid{grid-template-columns:1fr;gap:32px}.calcsum{position:static}}