/* wz-kosten.css — Kostenrechner (/werkzeuge/kostenrechner-geschaeftsadresse), Präfix wzk-.
   Nutzt die Tokens und Formularklassen aus app.css; hier nur Anordnung und Ergebniskarten. */
.no-js .wzk-tool{display:none}

.wzk-fakten{margin:0 0 34px;max-width:78ch}
.wzk-fakten ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.wzk-fakten li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.55;color:var(--ink-72)}
.wzk-fakten li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--amber)}
.wzk-stand{margin:14px 0 0;font-size:13px;color:var(--ink-52)}
.wzk-antwort{max-width:78ch}
.wzk-antwort h2{margin-bottom:12px}

.wzk-tool{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);margin-top:28px}
.wzk-tool>*{min-width:0}
.wzk-form{margin-top:0}
.wzk-felder{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.wzk-optionen{display:grid;gap:12px}
.wzk-zahlweise{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.wzk-zahlweise legend{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;padding:0}
.wzk-form .opt:focus-within,.wzk-form .btn:focus-visible{outline:2px solid var(--post);outline-offset:2px}
.wzk-form input:focus-visible{outline:2px solid var(--post);outline-offset:1px}
.wzk-form .btn{min-height:44px}

.wzk-erg h3{margin:0 0 8px}
.wzk-ansage{font-weight:600;color:var(--ink);min-height:1.5em;margin:0 0 16px}
.wzk-karten{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.wzk-karte{background:var(--cream-hi);border:1px solid var(--line-soft);border-radius:12px;padding:18px;
  box-shadow:var(--sh-near);min-width:0;display:grid;gap:10px;align-content:start}
.wzk-karte.is-best{border-color:var(--amber);box-shadow:0 0 0 1px rgba(232,163,58,.45),var(--sh-mid)}
.wzk-karte.is-ungeeignet{opacity:.86}
.wzk-karte__kopf{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between}
.wzk-karte__kopf h3{margin:0;font-size:20px}
.wzk-marke{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--amber-deep)}
.wzk-marke--nein{color:var(--clay)}
.wzk-grund{margin:0;font-size:14px;color:var(--clay)}
.wzk-hinweis{color:var(--ink-72);margin-top:6px}
.wzk-tabwrap{overflow-x:auto;max-width:100%}
.wzk-tab{width:100%;border-collapse:collapse;font-size:14px}
.wzk-tab th,.wzk-tab td{padding:8px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;text-align:left}
.wzk-tab th{font-weight:500;color:var(--ink);padding-right:12px}
.wzk-tab th small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-52);overflow-wrap:anywhere}
.wzk-tab td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.wzk-tab tfoot tr:first-child th,.wzk-tab tfoot tr:first-child td{font-weight:700;border-top:2px solid var(--line)}
.wzk-gwg{margin:0;font-size:13px;color:var(--ink-52)}
.wzk-cta{margin:4px 0 0}
.wzk-cta .btn{min-height:44px}
.wzk-cta .arrow-link{min-height:44px;display:inline-flex;align-items:center}
.wzk-modell small{font-size:12.5px;color:var(--ink-52)}

@media (min-width:700px){
  .wzk-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .wzk-karten{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.wzk-karte{transition:none}}