:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:#080e18;color:#f4f7fc;font-synthesis:none}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:#080e18;color:#f4f7fc;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.layout{width:min(1140px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:absolute;left:-10000px;top:12px;background:#ecf2ff;color:#08101e;padding:12px;z-index:100}
.skip-link:focus{left:12px}
a:focus-visible,summary:focus-visible{outline:2px solid #87c1ff;outline-offset:5px}
.muted{color:#96a4b8}
.topbar{height:76px;position:sticky;top:0;z-index:10;background:#080e18e8;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid #ffffff0e}
.topbar-inner{height:100%;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:750;letter-spacing:-.85px;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:10px}
.brand-accent{color:#8ac4ff}
.topbar-links{display:flex;align-items:center;gap:31px;margin-inline:auto;font-size:12px;font-weight:520;color:#a9b5c7}
.topbar-links a{transition:color .15s ease}
.topbar-links a:hover{color:#fff}
.topbar-links .nav-ultra{color:#bdaeff;font-weight:680}
.topbar-links .nav-ultra:hover{color:#e3dbff}
.header-actions{display:flex;align-items:center;gap:20px;margin-left:auto}
.signin{color:#bdc9d8;font-size:12px;white-space:nowrap}
.signin:hover{color:#fff}
.header-cta{background:#f2f5fa;color:#0b1626;padding:11px 17px;border-radius:8px;font-size:12px;font-weight:720;white-space:nowrap;transition:background .2s ease}
.header-cta:hover{background:#cde1ff}
.mobile-ultra-link{display:none}
.hero{padding:125px 0 104px;border-bottom:1px solid #ffffff12;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;pointer-events:none;left:50%;top:-330px;width:970px;height:710px;transform:translateX(-50%);background:radial-gradient(ellipse,#153c6433 0%,transparent 68%)}
.hero-inner{text-align:center;position:relative;display:flex;flex-direction:column;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#94bedf;font-size:11px;font-weight:690;letter-spacing:1.8px;text-transform:uppercase}
.eyebrow .dot{width:6px;height:6px;border-radius:100%;background:#87bff2;box-shadow:0 0 0 4px #508dce16}
.hero h1{font-size:clamp(49px,7.1vw,91px);letter-spacing:-5.1px;font-weight:720;line-height:1.055;margin:29px auto 23px;max-width:1000px}
.hero h1 em{font-style:normal;color:#a3bedd}
.hero-lead{font-size:clamp(15px,1.7vw,18px);color:#a5b4c7;line-height:1.85;max-width:660px;margin:0 auto}
.hero-buttons{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:36px}
.btn{min-height:49px;border-radius:9px;padding:14px 20px;display:inline-flex;align-items:center;justify-content:center;gap:16px;font-size:13px;font-weight:680;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#e9f2ff;color:#081524}
.btn-primary:hover{background:#bddcff}
.btn-secondary{border:1px solid #3a485c;background:#141d2b;color:#dbe7f5}
.btn-secondary:hover{border-color:#749bc3;background:#192639}
.hero-detail{margin-top:24px;color:#6e839a;font-size:11px;line-height:1.7}
.hero-detail b{color:#a2b7ca;font-weight:600}
.product-section{padding:110px 0 111px}
.section-head{text-align:center;max-width:650px;margin:0 auto 49px}
.section-label{color:#83a9cd;font-size:10px;letter-spacing:2.2px;font-weight:750}
.section-head h2,.ultra-copy h2,.pricing-head h2,.closing h2{font-size:clamp(34px,4.4vw,53px);font-weight:690;letter-spacing:-2.3px;line-height:1.17;margin:17px 0}
.section-head p,.ultra-copy p,.pricing-head p,.closing p{font-size:15px;line-height:1.85;color:#9aaac1;margin:0}
.product-window{border:1px solid #344355;border-radius:17px;background:#101927;box-shadow:0 32px 86px #0006,0 0 0 7px #17203040;overflow:hidden;max-width:1000px;margin:auto}
.window-head{height:50px;border-bottom:1px solid #263548;background:#111b29;display:flex;justify-content:space-between;align-items:center;padding:0 22px}
.window-dots{display:flex;gap:7px}
.window-dots i{width:7px;height:7px;background:#31465c;border-radius:50%;display:block}
.window-title{font-size:11px;color:#879ab1;font-weight:650;letter-spacing:.15px}
.window-status{color:#87aeda;background:#18304a;border:1px solid #2b506f;border-radius:100px;font-size:9px;font-weight:730;padding:6px 9px}
.window-content{padding:39px 43px 29px}
.window-eyebrow{font-size:10px;letter-spacing:1.4px;color:#7e9fbd;font-weight:730}
.window-content h3{margin:11px 0 25px;font-size:24px;letter-spacing:-.65px;font-weight:660}
.filter-preview{display:grid;grid-template-columns:1.1fr 1.1fr 1fr .8fr;gap:10px}
.filter-field{padding:13px 15px;border-radius:9px;border:1px solid #33455a;background:#131f30;min-height:77px}
.filter-field small{display:block;font-size:10px;color:#7890a9;margin-bottom:9px}
.filter-field strong{font-size:13px;font-weight:640;color:#e5edf8;display:flex;align-items:center;justify-content:space-between;gap:6px}
.filter-field strong:after{content:"⌄";color:#718ba8;font-size:16px;font-weight:400}
.filter-line{height:1px;background:#2a3b4c;margin:28px 0 24px}
.window-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}
.window-bottom span{font-size:11px;color:#7d91a8}
.window-bottom a{border:1px solid #5d89af;background:#213d5a;border-radius:8px;padding:12px 19px;font-size:12px;color:#e0efff;font-weight:730;white-space:nowrap}
.window-bottom a:hover{background:#2c5378}
.product-caption{display:flex;gap:14px;align-items:start;justify-content:space-between;padding-top:19px;max-width:1000px;margin:auto;color:#6e8299;font-size:11px;line-height:1.65}
.product-caption span:first-child{color:#98aac0}
.workflow{padding:112px 0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12}
.workflow-header{display:flex;align-items:end;justify-content:space-between;gap:55px;margin-bottom:55px}
.workflow-header h2{font-size:clamp(34px,4vw,49px);font-weight:690;letter-spacing:-2.1px;margin:13px 0 0;line-height:1.17}
.workflow-header p{max-width:390px;font-size:14px;line-height:1.8;color:#9aaac1}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px}
.step{border-top:1px solid #354659;padding-top:23px}
.step-number{font-size:12px;letter-spacing:1px;color:#8fadd0;font-weight:680}
.step h3{font-size:20px;font-weight:660;letter-spacing:-.5px;margin:26px 0 11px}
.step p{font-size:13px;color:#91a4b9;line-height:1.85;margin:0}
.ultra-section{padding:116px 0 120px}
.ultra-layout{border:1px solid #393f5c;border-radius:18px;background:linear-gradient(110deg,#16192b,#101929 75%);display:grid;grid-template-columns:1.04fr .96fr;gap:32px;min-height:370px;overflow:hidden}
.ultra-copy{padding:60px 13px 62px 61px;align-self:center}
.ultra-copy .section-label{color:#bba8f5}
.ultra-copy h2{margin:20px 0}
.ultra-copy p{max-width:390px;font-size:14px}
.ultra-copy .btn{margin-top:30px}
.ultra-copy .availability{font-size:10px;color:#857e9e;margin-top:14px}
.ultra-preview{position:relative;margin:35px 34px 0 0;border:1px solid #4a4b70;border-bottom:none;background:linear-gradient(135deg,#202542,#11182e);border-radius:15px 15px 0 0;box-shadow:0 15px 55px #0006;min-height:320px;overflow:hidden;padding:23px}
.ultra-preview-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;letter-spacing:1.6px;font-weight:850;color:#d6c4ff}
.ultra-preview-lock{border:1px solid #7a71a8;border-radius:7px;padding:5px 9px;color:#c0b5df;font-size:9px;letter-spacing:.5px}
.ultra-preview-title{font-size:21px;font-weight:670;letter-spacing:-.5px;margin:32px 0 18px}
.ultra-prompt{border:1px solid #4b5574;border-radius:9px;padding:18px;color:#b4b5cb;background:#151e35;font-size:13px;line-height:1.65}
.ultra-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ultra-tags span{font-size:10px;color:#b8acce;background:#33304c;border-radius:6px;padding:8px 10px}
.ultra-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111627bb;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ultra-overlay span{display:inline-flex;align-items:center;gap:9px;border:1px solid #8574ba;border-radius:40px;padding:11px 18px;background:#312b4c;color:#ebdfff;font-weight:710;font-size:12px}
.pricing{padding:35px 0 125px}
.pricing-head{text-align:center;max-width:690px;margin:0 auto 49px}
.pricing-head h2{margin:18px 0 13px}
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plan{display:flex;flex-direction:column;min-height:415px;background:#101925;border:1px solid #2c394b;border-radius:13px;padding:27px 21px 22px}
.plan.ultra{border-color:#7e70b7;background:linear-gradient(160deg,#1b1b34,#131b2a 72%)}
.plan-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:24px}
.plan-name{font-size:16px;letter-spacing:-.3px;font-weight:720}
.plan-flag{font-size:9px;color:#7d94ac;font-weight:720;letter-spacing:.3px}
.plan.ultra .plan-name{color:#d7c5ff}
.plan-price{font-weight:720;font-size:34px;letter-spacing:-1.4px;white-space:nowrap}
.plan-price span{font-size:11px;color:#76899e;font-weight:450;letter-spacing:0}
.plan-desc{margin:11px 0 25px;font-size:12px;color:#94a4b8;line-height:1.7;min-height:60px}
.plan-cta{border:1px solid #45566d;background:#1a293a;color:#e9f1fa;display:flex;align-items:center;justify-content:center;border-radius:8px;min-height:43px;padding:11px;font-size:12px;font-weight:670;text-align:center}
.plan-cta:hover{background:#263b52}
.plan.ultra .plan-cta{background:#b8a4eb;border-color:#b8a4eb;color:#16112b;font-weight:720}
.plan.ultra .plan-cta:hover{background:#d1c2ff}
.plan-rule{height:1px;background:#2e3e50;margin:25px 0 19px}
.plan-include{font-size:10px;color:#748ca5;font-weight:720;letter-spacing:.65px;text-transform:uppercase}
.plan ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:13px}
.plan li{font-size:11px;color:#c0cbd8;line-height:1.6;position:relative;padding-left:15px}
.plan li:before{content:"✓";position:absolute;left:0;color:#88afd5}
.plan.ultra li:before{color:#beaaf2}
.pricing-disclaimer{font-size:11px;line-height:1.8;color:#75879c;max-width:970px;margin:25px auto 0;text-align:center}
.faq{padding:85px 0 115px;border-top:1px solid #ffffff10}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.faq-heading h2{font-size:40px;font-weight:690;letter-spacing:-1.9px;margin:16px 0}
.faq-heading p{font-size:13px;color:#8da0b7;line-height:1.8}
.faq-list details{border-bottom:1px solid #2b3746;padding:20px 0}
.faq-list details:first-child{border-top:1px solid #2b3746}
.faq-list summary{font-size:14px;line-height:1.6;color:#e7eef7;font-weight:610;list-style:none;cursor:pointer;position:relative;padding-right:30px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";position:absolute;right:7px;top:-2px;color:#91abc5;font-size:21px;font-weight:350}
.faq-list details[open] summary:after{content:"−"}
.faq-list details p{font-size:12px;line-height:1.85;color:#95a7bb;padding-right:24px;margin:11px 0 0}
.faq-list details a{color:#a4cdff;text-decoration:underline;text-underline-offset:3px}
.closing{padding:78px 0;border-top:1px solid #ffffff12;text-align:center}
.closing h2{margin:13px 0 15px}
.closing p{max-width:470px;margin:0 auto}
.closing .btn{margin-top:30px}
.footer{background:#0b121d;border-top:1px solid #ffffff12;padding:47px 0 25px}
.footer-main{display:flex;justify-content:space-between;gap:28px;align-items:center}
.footer-main p{font-size:11px;color:#778a9d;margin:12px 0 0}
.footer-links{display:flex;gap:25px;flex-wrap:wrap;color:#9eafc1;font-size:12px}
.footer-links a:hover{color:#e2eefa}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid #ffffff0f;color:#6b7d93;font-size:10px;line-height:1.8}
@media(max-width:1050px){.topbar-inner{gap:24px}.topbar-links{gap:20px}.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan{min-height:390px}.plan-desc{min-height:0}.ultra-copy{padding:44px 0 45px 43px}}
@media(max-width:780px){.layout{width:min(100% - 38px,1140px)}.topbar{height:68px}.topbar-inner{gap:16px}.topbar-links{display:none}.signin{display:none}.mobile-ultra-link{display:inline-flex;color:#dbc7ff;align-items:center;gap:5px;font-size:11px;font-weight:680;border:1px solid #5f507e;padding:10px 11px;border-radius:8px}.header-actions{gap:9px}.header-cta{padding:11px 12px;font-size:11px}.hero{padding:88px 0 80px}.hero h1{letter-spacing:-3.6px}.product-section{padding:78px 0}.window-content{padding:27px}.filter-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow{padding:80px 0}.workflow-header{display:block}.workflow-header p{margin-top:16px}.steps{gap:19px}.ultra-section{padding:76px 0}.ultra-layout{grid-template-columns:1fr;gap:5px}.ultra-copy{padding:43px 36px 10px}.ultra-preview{margin:18px 35px 0;min-height:275px}.pricing{padding:40px 0 85px}.faq{padding:70px 0 85px}.faq-wrap{grid-template-columns:1fr;gap:22px}}
@media(max-width:500px){.brand{font-size:16px;letter-spacing:-.75px}.brand img{width:29px;height:29px}.topbar-inner{gap:8px}.mobile-ultra-link{font-size:10px;padding:10px 8px}.header-cta{font-size:10px;padding:11px 10px}.hero{padding:83px 0 71px}.hero h1{font-size:clamp(42px,11vw,58px);letter-spacing:-2.7px;margin:23px 0 18px}.hero-lead{font-size:15px}.hero-buttons{width:100%;flex-direction:column}.hero-buttons .btn{width:100%}.hero-detail{font-size:10px}.section-head h2,.ultra-copy h2,.pricing-head h2,.closing h2{font-size:37px;letter-spacing:-1.5px}.section-head{margin-bottom:31px}.window-head{padding:0 14px}.window-content{padding:21px 17px}.window-content h3{font-size:20px}.filter-preview{gap:8px}.filter-field{padding:12px 10px;min-height:68px}.filter-field strong{font-size:12px}.window-bottom{flex-direction:column;align-items:stretch;gap:16px}.window-bottom a{text-align:center}.product-caption{flex-direction:column;gap:7px}.steps{grid-template-columns:1fr;gap:30px}.step h3{margin-top:15px}.workflow-header{margin-bottom:36px}.ultra-copy{padding:33px 24px 8px}.ultra-preview{margin:17px 15px 0;min-height:265px}.pricing-grid{grid-template-columns:1fr}.plan{min-height:0;padding:25px}.plan-desc{margin-bottom:19px}.faq-heading h2{font-size:36px}.closing{padding:68px 0}.footer-main{flex-direction:column;align-items:flex-start}.footer-links{gap:19px}.footer-bottom{margin-top:25px}}
@media(max-width:375px){.brand{font-size:14px}.mobile-ultra-link{padding:8px 7px;font-size:9px}.header-cta{padding:9px 8px;font-size:10px}}
@media(max-width:420px){
  /* The primary "Kostenlos starten" CTA is immediately below; keep mobile navigation uncluttered. */
  .header-cta{display:none}
  .header-actions{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* A calm product-story hierarchy: three sources, with honest live-vs-planned benefits. */
.hero-sources{display:flex;align-items:center;justify-content:center;gap:17px;margin-top:28px;flex-wrap:wrap;color:#bdcad9;font-size:12px;font-weight:680;letter-spacing:-.15px}
.hero-sources i{display:block;width:3px;height:3px;background:#5c7894;border-radius:50%}
.hero .hero-buttons{margin-top:30px}
.hero-detail{max-width:745px;text-align:center;font-size:11px;line-height:1.85;margin-top:25px;color:#869bb1}
.hero-detail b{color:#bed1e3}
.benefits{border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;padding:100px 0 104px;background:#0b1420}
.benefits-heading{max-width:710px;margin:0 auto 46px;text-align:center}
.benefits-heading h2{font-size:clamp(33px,4.3vw,52px);line-height:1.16;letter-spacing:-2.15px;font-weight:690;margin:17px 0}
.benefits-heading h2 span{color:#a1bbd8}
.benefits-heading p{font-size:14px;line-height:1.85;color:#9caec2}
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px}
.benefit-group{min-width:0}
.benefit-group-head{display:flex;align-items:center;gap:10px;color:#aecde7;font-size:10px;letter-spacing:1.2px;font-weight:820;margin-bottom:22px;min-height:29px}
.planned-group .benefit-group-head{color:#b8aecb}
.availability-dot,.planned-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#7ac7bd;box-shadow:0 0 0 4px #3e8a7c26}
.planned-dot{background:#a695cc;box-shadow:0 0 0 4px #6d619026}
.benefit-row{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-top:1px solid #ffffff15}
.benefit-number{font-size:11px;line-height:1.7;font-weight:660;color:#6685a1;min-width:20px}
.benefit-row h3{font-weight:680;font-size:16px;letter-spacing:-.3px;color:#edf4fc;margin:0 0 7px}
.benefit-row p{font-size:12px;line-height:1.9;color:#9badc3;margin:0}
.planned-group .benefit-row h3{color:#dddaf0}
.benefits-note{max-width:1040px;color:#8398ae;font-size:11px;line-height:1.85;margin:29px 0 0}
.workflow{border-top:0}
@media(max-width:780px){
 .benefits{padding:73px 0 78px}
 .benefits-grid{grid-template-columns:1fr;gap:38px}
 .benefit-row{gap:15px}
 .benefits-heading{text-align:left;margin-bottom:30px}
 .benefit-group-head{margin-bottom:8px}
 .hero-sources{gap:11px;font-size:11px;margin-top:23px}
}
@media(max-width:500px){
 .benefits-heading h2{font-size:36px;letter-spacing:-1.7px}
 .benefit-row h3{font-size:15px}
 .benefit-row p{font-size:12px}
 .hero-sources{font-size:10px;gap:10px}
 .hero-detail{font-size:10px}
}