:root{--accent:#1e406e;--text:#1b2433;--muted:#667085;--line:#e3e8ef;--bg:#fff;--soft:#f4f6fa;--radius:12px;--font:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}a{color:var(--accent)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}h1{font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.02em}h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.01em}h3{font-size:1.15rem}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}.wrap.narrow{max-width:800px}
.muted{color:var(--muted)}.a-center{text-align:center}.a-left{text-align:left}
.lead{font-size:1.2rem;color:var(--muted);margin:0 0 1.2em}
/* Header */
.site-head{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:50}
.site-head .bar{display:flex;align-items:center;gap:22px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--accent);text-decoration:none}
.logo .mark{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1rem}
.site-head nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}.site-head nav a{padding:8px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.95rem}.site-head nav a:hover{background:var(--soft)}
/* Buttons */
.btn{display:inline-block;padding:11px 20px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--text);font-weight:600;text-decoration:none;cursor:pointer;font-size:1rem;font-family:inherit}
.btn:hover{filter:brightness(.97)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.big{padding:15px 28px;font-size:1.08rem}.btn.small{padding:8px 14px;font-size:.9rem}
.btn.ghost{background:transparent;border-color:var(--accent);color:var(--accent)}.btn.light{background:#fff;color:var(--accent);border-color:#fff}.btn.ghost-light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}.btn.disabled{opacity:.55;pointer-events:none}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* Sektionen */
.blk{padding:72px 0}.pad-s{padding:36px 0}.pad-l{padding:110px 0}
.bg-white{background:#fff}.bg-light{background:var(--soft)}
.bg-dark{background:#0f1a2b;color:#fff}.bg-dark .lead,.bg-dark .muted{color:#b6c2d6}.bg-dark .card{background:#17263d;border-color:#243752;color:#fff}.bg-dark .card p{color:#c8d3e4}
.bg-accent{background:var(--accent);color:#fff}.bg-accent .lead{color:rgba(255,255,255,.85)}
.bg-gradient{background:linear-gradient(135deg,#eef3fb 0%,#dfe9f7 55%,#f7f9fd 100%)}
.sect-head{max-width:760px;margin:0 auto 44px}.sect-head.a-left{margin-left:0}
.badge{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--accent);padding:4px 12px;border-radius:99px;font-size:.85rem;font-weight:600;margin-bottom:16px}
/* Hero */
.hero{display:grid;gap:40px;align-items:center}.hero.has-img{grid-template-columns:1.1fr .9fr}
.hero-img img{border-radius:var(--radius);box-shadow:0 20px 50px rgba(15,26,43,.18);border:1px solid var(--line)}
@media(max-width:860px){.hero.has-img{grid-template-columns:1fr}}
/* Karten & Raster */
.grid{display:grid;gap:22px}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 1px 3px rgba(16,24,40,.05)}.card p{color:var(--muted);margin:0}
.card .ico{font-size:2rem;margin-bottom:10px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}.step{text-align:center}.step .num{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.3rem;margin:0 auto 14px}.step p{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.split.rev>:first-child{order:2}@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.media img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,26,43,.12)}
.ph{background:var(--soft);border:2px dashed var(--line);border-radius:var(--radius);aspect-ratio:16/10;display:grid;place-items:center;color:var(--muted)}
.checks{list-style:none;padding:0;margin:14px 0 22px}.checks li{padding:5px 0 5px 30px;position:relative}.checks li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.gallery figure{margin:0}.gallery img{border-radius:10px;border:1px solid var(--line)}.gallery figcaption{font-size:.9rem;color:var(--muted);text-align:center;margin-top:8px}
.stats{text-align:center}.stat .v{font-size:2.4rem;font-weight:800}.stat .l{color:#b6c2d6}
blockquote.card{margin:0}blockquote.card p{color:var(--text);font-size:1.08rem}blockquote footer{margin-top:14px;display:flex;flex-direction:column;font-size:.92rem}blockquote footer span{color:var(--muted)}
.price-card{max-width:480px;margin:0 auto;background:#fff;border:2px solid var(--accent);border-radius:16px;padding:36px;text-align:center;box-shadow:0 20px 50px rgba(30,64,110,.15)}
.price-card .plan{font-weight:700;color:var(--accent)}.price-card .price{font-size:3.4rem;font-weight:800;margin:6px 0}.price-card .checks{text-align:left;margin:22px 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:12px}.faq summary{cursor:pointer;font-weight:600}.faq details p{margin:10px 0 0;color:var(--muted)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}.cta h2{margin-bottom:6px}.cta p{margin:0}
.contact{display:grid;gap:10px;margin-top:14px;font-size:1.1rem}
.prose p{margin:0 0 1.1em}hr{border:0;border-top:1px solid var(--line);margin:0}
/* Formular */
form.order{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;gap:14px}
form.order label{font-weight:600;font-size:.95rem;display:block}form.order small{font-weight:400;color:var(--muted)}
form.order input:not([type=checkbox]){width:100%;padding:12px 14px;border:1px solid #cdd5e0;border-radius:9px;font:inherit;margin-top:5px}
form.order input:focus{outline:2px solid var(--accent);outline-offset:1px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:620px){.fg{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500!important}.check input{margin-top:5px;width:auto!important}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}.price-line{margin:0;font-size:1.1rem}
.alert{padding:12px 16px;border-radius:9px;border:1px solid}.alert.ok{background:#e3f4ea;border-color:#157347;color:#0f5132}.alert.err{background:#fde8e6;border-color:#b42318;color:#842029}
/* Footer */
.site-foot{background:#0f1a2b;color:#b6c2d6;padding:36px 0;font-size:.95rem}.site-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.site-foot a{color:#fff;margin-left:18px}
@media(max-width:700px){.site-head nav{display:none}.blk{padding:52px 0}}

/* Windows-Fensterrahmen um Programm-Screenshots */
.winframe{background:#fff;border-radius:10px;border:1px solid #c9d2e0;box-shadow:0 20px 50px rgba(15,26,43,.22);overflow:hidden}
.winframe .wtitle{display:flex;align-items:center;gap:8px;background:#f1f4f9;border-bottom:1px solid #d9e0ec;padding:7px 0 7px 12px;font-size:.78rem;color:#334;font-weight:600}
.winframe .wtitle .wlogo{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--accent);color:#fff;font-size:.65rem;font-weight:800}
.winframe .wtitle i{font-style:normal;margin-left:auto;width:42px;text-align:center;color:#556;font-weight:400}.winframe .wtitle i+i{margin-left:0}
.winframe img,.hero-img .winframe img,.media .winframe img{border:0!important;border-radius:0!important;box-shadow:none!important;display:block;width:100%}
.hero-img .winframe{box-shadow:0 20px 50px rgba(15,26,43,.25)}
.winbadge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.02em;vertical-align:middle}
/* Vergleich Demo / Pro */
.tblwrap{overflow-x:auto}
table.compare{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.compare th,table.compare td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:center}
table.compare thead th{background:#f4f6fa;font-weight:700}table.compare thead th.pro{background:var(--accent);color:#fff}
table.compare tbody th{text-align:left;font-weight:500}table.compare td.yes{color:#15803d;font-weight:700}table.compare td.no{color:#b91c1c;font-weight:700}
table.compare tbody tr:last-child>*{border-bottom:0}