:root{
  --bg:#f6f8fc;--card:#ffffff;--muted:#5a6b85;--text:#111827;
  --brand:#0e1f53;--brand2:#2f6fec;--ok:#0a9b6d;--danger:#c62828;
  --line:#e5e7eb;--shadow:0 8px 26px rgba(17,24,39,.08);
  --r:14px;--c:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--c);margin:0 auto;padding:18px}

/* Topbar + Nav */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.topbar__row{display:flex;gap:14px;align-items:center;justify-content:space-between}
.brand{font-weight:900;color:var(--brand);letter-spacing:.2px}

.nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nav a{padding:10px 10px;border-radius:10px;color:#1f2937;font-weight:600}
.nav a.is-active{background:rgba(47,111,236,.10);color:var(--brand2);text-decoration:none}
.topbar__cta{margin-left:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#111827;font-weight:800}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{text-decoration:none;filter:brightness(1.05)}
.btn--ghost{background:transparent}

.navbtn{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  background:#fff;border-radius:12px; padding:10px; cursor:pointer;
}
.navbtn span{display:block;height:2px;background:#111827;margin:6px 0;border-radius:2px}

/* Layout */
.hero{padding:30px 0 10px}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.h1{font-size:38px;line-height:1.1;margin:0 0 10px}
.lead{color:var(--muted);font-size:16px;margin:0 0 16px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.badge{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;color:#1f2937;font-size:13px}

.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:1fr 1fr}
.grid--rechner{grid-template-columns:1.05fr .95fr}

.field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
label{font-weight:800}
select,input,textarea{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:12px;background:#fff}
textarea{min-height:110px;resize:vertical}

.checks{display:grid;gap:8px;margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#374151}
.check input{margin-top:2px}

.alert{border-radius:12px;padding:12px 12px;border:1px solid var(--line);background:#fff}
.alert--ok{border-color:rgba(10,155,109,.35);background:rgba(10,155,109,.07)}
.alert--err{border-color:rgba(198,40,40,.35);background:rgba(198,40,40,.07)}
.note{color:var(--muted);font-size:14px;margin:10px 0 0}

.range{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price{font-size:28px;font-weight:900}
.sep{color:var(--muted)}

.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.table th{color:#374151;font-size:13px}

.footer{margin-top:28px;border-top:1px solid var(--line);background:#fff}
.footer__row{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;color:#374151}
.footer__right{display:flex;gap:14px;flex-wrap:wrap}

/* Responsive nav */
@media (max-width: 980px){
  .hero__grid,.grid--rechner,.grid--2{grid-template-columns:1fr}
  .h1{font-size:32px}

  .topbar__cta{display:none}
  .navbtn{display:inline-block}
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line);
    padding:12px 18px; display:none; flex-direction:column; align-items:stretch; gap:6px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 12px}
  .nav__cta{width:100%}
}