/* ============================================================
   Rechnwerk – shared design system
   Tokens, layout primitives and calculator-form components
   reused across every tool page on the site.
   ============================================================ */

/* Self-hosted Public Sans (woff2, latin subset only) — no third-party
   font requests, no render-blocking cross-origin DNS/TLS handshake to
   fonts.googleapis.com / fonts.gstatic.com. font-display:swap avoids
   invisible text while the font loads; the fallback stack renders
   immediately either way. */
@font-face{font-family:"Public Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/public-sans-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Public Sans"; font-style:italic; font-weight:400; font-display:swap; src:url("/assets/fonts/public-sans-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Public Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/public-sans-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Public Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/public-sans-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Public Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/public-sans-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Public Sans"; font-style:normal; font-weight:800; font-display:swap; src:url("/assets/fonts/public-sans-latin-800-normal.woff2") format("woff2");}

:root{
  --page:#f9f9f7; --surface:#fcfcfb; --surface-2:#ffffff; --surface-3:#f3f2ee;
  --text-1:#0b0b0b; --text-2:#52514e; --text-3:#898781;
  --border:rgba(11,11,11,0.10); --border-strong:rgba(11,11,11,0.18);
  --gridline:#e1e0d9;
  --accent:#2a78d6; --accent-strong:#184f95; --accent-soft:#e5eefb;
  --c-net:#2a78d6; --c-lst:#eb6834; --c-kv:#1baf7a; --c-rv:#eda100;
  --c-pv:#e87ba4; --c-alv:#008300; --c-kist:#4a3aa7; --c-soli:#e34948;
  --danger:#c23b3b; --focus-ring:#2a78d6;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0d0d0d; --surface:#1a1a19; --surface-2:#201f1e; --surface-3:#242322;
    --text-1:#ffffff; --text-2:#c3c2b7; --text-3:#8f8d85;
    --border:rgba(255,255,255,0.12); --border-strong:rgba(255,255,255,0.20);
    --gridline:#2c2c2a;
    --accent:#3987e5; --accent-strong:#86b6ef; --accent-soft:#16283f;
    --c-net:#3987e5; --c-lst:#d95926; --c-kv:#199e70; --c-rv:#c98500;
    --c-pv:#d55181; --c-alv:#1c9a1c; --c-kist:#9085e9; --c-soli:#e66767;
    --danger:#e37070;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#201f1e; --surface-3:#242322;
  --text-1:#ffffff; --text-2:#c3c2b7; --text-3:#8f8d85;
  --border:rgba(255,255,255,0.12); --border-strong:rgba(255,255,255,0.20);
  --gridline:#2c2c2a;
  --accent:#3987e5; --accent-strong:#86b6ef; --accent-soft:#16283f;
  --c-net:#3987e5; --c-lst:#d95926; --c-kv:#199e70; --c-rv:#c98500;
  --c-pv:#d55181; --c-alv:#1c9a1c; --c-kist:#9085e9; --c-soli:#e66767;
  --danger:#e37070;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--page); color:var(--text-1);
  font-family:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1,h2,h3{text-wrap:balance; margin:0;}
button{font-family:inherit;}
input,select{font-family:inherit; font-size:inherit; color:inherit;}
a{color:var(--accent);}
::selection{background:var(--accent); color:#fff;}
img,svg{max-width:100%;}
[hidden]{display:none !important;}

.wrap{max-width:1180px; margin:0 auto; padding-inline:16px;}
.wrap-narrow{max-width:860px; margin:0 auto; padding-inline:16px;}

/* ---------- site header / nav ---------- */
.site-header{border-bottom:1px solid var(--border); background:var(--surface);}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:14px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.brand-mark{
  width:32px; height:32px; border-radius:9px; flex:none;
  background:linear-gradient(155deg, var(--accent), var(--accent-strong));
  display:flex; align-items:center; justify-content:center;
}
.brand-mark svg{width:17px; height:17px;}
.brand-text{font-size:17px; font-weight:800; letter-spacing:-0.01em;}

.site-nav{display:flex; align-items:center; gap:4px;}
.site-nav a{
  color:var(--text-2); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:8px 11px; border-radius:8px;
}
.site-nav a:hover{color:var(--text-1); background:var(--surface-3);}
.site-nav a.current{color:var(--accent); background:var(--accent-soft);}

.theme-toggle{
  display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:99px; padding:3px; flex:none;
}
.theme-toggle button{
  border:none; background:transparent; color:var(--text-3);
  width:28px; height:28px; border-radius:99px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle button svg{width:14px; height:14px;}
.theme-toggle button[aria-pressed="true"]{background:var(--accent); color:#fff;}
.theme-toggle button:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px;}

.header-right{display:flex; align-items:center; gap:10px;}
.nav-toggle{
  display:none; border:1px solid var(--border-strong); background:var(--surface-2);
  border-radius:8px; width:34px; height:34px; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle svg{width:16px; height:16px;}

@media (max-width:840px){
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; padding:8px 16px 14px; gap:2px;
  }
  .site-nav.open{display:flex;}
  .site-nav a{padding:10px 8px;}
  .nav-toggle{display:flex;}
  .site-header{position:relative;}
}

/* ---------- breadcrumb / page intro ---------- */
.breadcrumb{font-size:12px; color:var(--text-3); padding-top:18px;}
.breadcrumb a{color:var(--text-3); text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}
.page-intro{padding:10px 0 22px; max-width:68ch;}
.page-intro h1{font-size:25px; font-weight:800; letter-spacing:-0.01em; margin-bottom:8px;}
.page-intro p{margin:0; color:var(--text-2); font-size:14.5px; line-height:1.55;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border); margin-top:50px;}
.site-footer-inner{padding:26px 0 40px; display:flex; flex-direction:column; gap:14px;}
.footer-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:20px;}
.footer-col h4{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 0 10px;}
.footer-col a{display:block; color:var(--text-2); text-decoration:none; font-size:13px; padding:3px 0;}
.footer-col a:hover{color:var(--accent);}
.footer-col p{font-size:12.5px; color:var(--text-3); line-height:1.55; margin:0;}
.footer-bottom{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-3);}
@media (max-width:680px){ .footer-cols{grid-template-columns:1fr 1fr;} }

/* ---------- panels / forms (shared calculator UI) ---------- */
.layout{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:20px;
  align-items:start; padding-bottom:40px;
}
@media (max-width:860px){ .layout{grid-template-columns:1fr;} }

.panel{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.results-panel{position:sticky; top:16px;}
@media (max-width:860px){ .results-panel{position:static;} }

fieldset{border:none; margin:0; padding:18px 20px; border-bottom:1px solid var(--border);}
fieldset:last-of-type{border-bottom:none;}
legend{padding:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); width:100%;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.field-row:last-child{margin-bottom:0;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1 / -1;}
label.field-label{font-size:12.5px; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:5px;}
.hint{color:var(--text-3); font-weight:400; cursor:help; border-bottom:1px dotted var(--text-3);}

input[type="number"], input[type="text"], select{
  width:100%; padding:9px 10px; border-radius:9px;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-1);
  font-size:14px; font-variant-numeric:tabular-nums;
}
input[type="number"]:focus, select:focus, input[type="text"]:focus{
  outline:2px solid var(--focus-ring); outline-offset:1px; border-color:var(--accent);
}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23898781' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:26px;}

.amount-input{position:relative;}
.amount-input input{padding-right:34px;}
.amount-input span{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px;}

.segmented{display:flex; border:1px solid var(--border-strong); border-radius:9px; overflow:hidden;}
.segmented button{flex:1; border:none; background:var(--surface-2); color:var(--text-2); padding:9px 0; font-size:13px; font-weight:600; cursor:pointer;}
.segmented button + button{border-left:1px solid var(--border-strong);}
.segmented button[aria-pressed="true"]{background:var(--accent); color:#fff;}

.check-row{display:flex; align-items:center; gap:9px;}
.check-row input[type="checkbox"]{width:17px; height:17px; accent-color:var(--accent); flex:none;}
.check-row label{font-size:13.5px; font-weight:600; color:var(--text-1);}
.subnote{font-size:11.5px; color:var(--text-3); margin-top:2px;}

.radio-pair{display:flex; gap:14px; flex-wrap:wrap;}
.radio-pair label{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; cursor:pointer;}
.radio-pair input{accent-color:var(--accent); width:16px; height:16px;}

.conditional{margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){ .field-row, .conditional{grid-template-columns:1fr;} }

/* ---------- results ---------- */
.results-inner{padding:20px 20px 18px; display:flex; flex-direction:column; gap:18px;}
.hero-result{display:flex; flex-direction:column; gap:4px;}
.hero-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.hero-label{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);}
.hero-figure{font-size:36px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.05; color:var(--c-net);}
.hero-sub{font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums;}
.period-pill{display:flex; gap:2px; background:var(--surface-3); border-radius:99px; padding:3px; flex:none;}
.period-pill button{border:none; background:transparent; color:var(--text-2); font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:99px; cursor:pointer;}
.period-pill button[aria-pressed="true"]{background:var(--surface-2); color:var(--text-1); box-shadow:0 1px 2px rgba(0,0,0,.08);}

.bar{display:flex; width:100%; height:14px; border-radius:8px; overflow:hidden; background:var(--gridline);}
.bar span{height:100%;}

.legend{display:grid; grid-template-columns:1fr 1fr; gap:7px 14px;}
@media (max-width:480px){ .legend{grid-template-columns:1fr;} }
.legend-item{display:flex; align-items:center; gap:8px; font-size:12.5px;}
.legend-dot{width:9px; height:9px; border-radius:3px; flex:none;}
.legend-name{color:var(--text-2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.legend-val{font-variant-numeric:tabular-nums; font-weight:700; color:var(--text-1);}
.legend-pct{font-variant-numeric:tabular-nums; color:var(--text-3); font-size:11px; width:34px; text-align:right;}

.divider{height:1px; background:var(--border);}

.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-card{background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:10px 12px;}
.stat-card .k{font-size:11px; color:var(--text-3); font-weight:600;}
.stat-card .v{font-size:15.5px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px;}

.table-title{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;}
.cmp-row{display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px; padding:5px 0; font-size:12.5px;}
.cmp-row .cls{width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; background:var(--surface-3); color:var(--text-2);}
.cmp-row.active .cls{background:var(--accent); color:#fff;}
.cmp-track{height:8px; border-radius:5px; background:var(--surface-3); position:relative; overflow:hidden;}
.cmp-fill{position:absolute; inset:0; width:0; background:var(--accent-soft); border-radius:5px;}
.cmp-row.active .cmp-fill{background:var(--accent);}
.cmp-val{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap;}

.note{font-size:11.5px; line-height:1.55; color:var(--text-3); background:var(--surface-3); border-radius:11px; padding:11px 13px;}
.note strong{color:var(--text-2);}

/* ---------- explainer / content blocks under the tool ---------- */
.content-block{max-width:74ch; padding-block:10px; margin-bottom:40px;}
.content-block h2{font-size:19px; font-weight:800; margin:28px 0 10px;}
.content-block h2:first-child{margin-top:0;}
.content-block p{color:var(--text-2); font-size:14.5px; line-height:1.65; margin:0 0 12px;}
.content-block ul{color:var(--text-2); font-size:14.5px; line-height:1.65; padding-left:20px; margin:0 0 12px;}
.faq-item{border-top:1px solid var(--border); padding:14px 0;}
.faq-item summary{font-weight:700; font-size:14.5px; cursor:pointer; list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"+"; display:inline-block; width:16px; color:var(--accent); font-weight:800;}
.faq-item[open] summary::before{content:"\2212";}
.faq-item p{margin:8px 0 0 16px; color:var(--text-2); font-size:13.5px; line-height:1.6;}

/* ---------- homepage ---------- */
.hero{padding:44px 0 30px;}
.hero h1{font-size:32px; font-weight:800; letter-spacing:-0.01em; max-width:18ch;}
.hero p{max-width:56ch; color:var(--text-2); font-size:15px; line-height:1.6; margin-top:10px;}

.category{padding-bottom:34px;}
.category h2{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.category h2::after{content:""; flex:1; height:1px; background:var(--border);}

.tool-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
@media (max-width:860px){ .tool-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tool-grid{grid-template-columns:1fr;} }

.tool-card{
  display:block; padding:16px; border-radius:13px; border:1px solid var(--border);
  background:var(--surface); text-decoration:none; color:inherit;
}
.tool-card:hover{border-color:var(--accent); background:var(--surface-2);}
.tool-card .icon{
  width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.tool-card .icon svg{width:17px; height:17px;}
.tool-card h3{font-size:14.5px; font-weight:700; margin-bottom:4px;}
.tool-card p{font-size:12.5px; color:var(--text-3); line-height:1.5; margin:0;}

.tool-card.soon{opacity:0.55; cursor:default;}
.tool-card.soon:hover{border-color:var(--border); background:var(--surface);}
.badge-soon{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--surface-3); color:var(--text-3); padding:2px 7px; border-radius:99px; margin-left:6px;
}