/* ============================================================================
   installateur.at — Kostenrechner (geführter Flow) · Shortcode [service_checklist]
   Ersetzt den alten Checkbox-Rechner. Markup: functions.php (inst_kostenrechner_
   shortcode), Logik: js/kostenrechner.js. ALLE Regeln unter .krc gescoped +
   Klassen krc-* → keine Kollision mit Theme/Elementor. Flach (kein Gradient/Glow/
   Lift), Marken-Palette Navy/Cyan/Gold.
   ========================================================================== */
.krc{
  --navy:#1e456c; --navy-700:#173651; --cyan:#36afd8; --cyan-600:#2a93b8;
  --ink:#1d2430; --muted:#64748b; --faint:#94a3b8;
  --band:#eef3f8; --card:#ffffff; --line:#e6ebf1;
  --chip:#e6eef7; --chip-ink:#3a5d88; --chip-line:#d3e0ee;
  --ok:#15803d; --ok-tint:#eef8f1; --gold:#f3b100;
  --radius:16px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(16,40,70,.05),0 6px 20px rgba(16,40,70,.06);
  background:var(--band);
  padding:44px 20px 52px;
  color:var(--ink);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  scroll-margin-top:90px;
}
.krc *,.krc *::before,.krc *::after{box-sizing:border-box;}
.krc [hidden]{display:none !important;}
.krc-inner{max-width:860px;margin:0 auto;}
.krc-card{scroll-margin-top:90px;}

/* ---------- Header ---------- */
.krc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan-600);background:var(--chip);border:1px solid var(--chip-line);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.krc-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);}
.krc .krc-title{
  font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.12;
  margin:0 0 12px;color:var(--navy);
}
.krc-sub{color:var(--muted);font-size:16px;max-width:580px;margin:0 0 30px;}

/* ---------- Fortschritt ---------- */
.krc-progress{display:flex;align-items:center;margin:0 2px 24px;max-width:520px;}
.krc-node{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;}
.krc-dot{
  width:32px;height:32px;border-radius:50%;background:var(--card);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--faint);transition:.25s;
}
.krc-plabel{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:.25s;}
.krc-pipe{flex:1;height:4px;background:var(--line);border-radius:3px;margin:0 10px;transform:translateY(-13px);overflow:hidden;position:relative;}
.krc-pipe::after{content:"";position:absolute;inset:0;background:var(--cyan);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.krc-node.is-done .krc-dot,.krc-node.is-active .krc-dot{border-color:var(--cyan);color:var(--navy);}
.krc-node.is-done .krc-dot{background:var(--cyan);border-color:var(--cyan);color:#fff;}
.krc-node.is-active .krc-dot{box-shadow:0 0 0 4px rgba(54,175,216,.16);}
.krc-node.is-active .krc-plabel,.krc-node.is-done .krc-plabel{color:var(--navy);}
.krc-pipe.is-filled::after{transform:scaleX(1);}

/* ---------- Karte / Schritte ---------- */
.krc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;}
.krc-step{display:none;animation:krc-fade .3s ease;}
.krc-step.is-visible{display:block;}
@keyframes krc-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.krc .krc-step-title{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;color:var(--navy);}
.krc-step-hint{color:var(--muted);font-size:14.5px;margin:0 0 22px;}

/* ---------- Leistungs-Kacheln ---------- */
.krc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.krc-tile{
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
  padding:18px 16px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;
  font-family:inherit;display:flex;flex-direction:column;gap:11px;
}
.krc-tile:hover,.krc-tile:focus{border-color:var(--cyan);box-shadow:0 4px 14px rgba(16,40,70,.08);background:var(--card);}
.krc-tile:focus-visible{outline:3px solid rgba(54,175,216,.4);outline-offset:2px;}
.krc-tile svg{width:30px;height:30px;stroke:var(--cyan);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.krc-tile-txt{display:flex;flex-direction:column;gap:2px;}
.krc-tile-name{font-weight:800;font-size:15px;line-height:1.3;color:var(--navy);}
.krc-tile-from{font-size:12.5px;color:var(--muted);}
.krc-tile-from b{color:var(--cyan-600);font-weight:800;}

/* ---------- Fragen ---------- */
.krc-qblock{margin-bottom:24px;}
.krc-qlabel{font-weight:800;font-size:15px;margin-bottom:12px;display:block;color:var(--navy);}
.krc-opts{display:flex;flex-wrap:wrap;gap:9px;}
.krc-opt{
  border:1.5px solid var(--line);border-radius:999px;background:var(--card);
  padding:9px 17px;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);transition:.14s;
}
.krc-opt:hover,.krc-opt:focus{border-color:var(--cyan);background:var(--card);color:var(--ink);}
.krc-opt:focus-visible{outline:3px solid rgba(54,175,216,.4);outline-offset:2px;}
.krc-opt.is-sel{background:var(--navy);border-color:var(--navy);color:#fff;}

/* ---------- Ergebnis ---------- */
.krc-res-service{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.krc-res-price{font-size:clamp(28px,4.6vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-bottom:4px;font-variant-numeric:tabular-nums;}
.krc-res-price small{font-size:.42em;font-weight:700;color:var(--muted);letter-spacing:0;}
.krc-res-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 24px;}
.krc-res-tag{font-size:12.5px;font-weight:700;background:var(--chip);border:1px solid var(--chip-line);border-radius:999px;padding:4px 12px;color:var(--chip-ink);}
.krc-gauge{margin:22px 0 8px;}
.krc-gauge-bar{height:12px;border-radius:7px;background:#e2e9f1;position:relative;overflow:visible;}
.krc-gauge-fill{position:absolute;top:0;bottom:0;left:14%;right:14%;border-radius:7px;background:var(--cyan);transition:all .55s cubic-bezier(.2,.8,.2,1);}
.krc-gauge-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums;}
.krc-gauge-caption{font-size:12.5px;color:var(--faint);margin-top:2px;}
.krc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;}
.krc-box{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;background:var(--band);}
.krc-box h4{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px;color:var(--navy);}
.krc-box ul{list-style:none;margin:0;padding:0;}
.krc-box li{font-size:13.5px;color:var(--ink);padding:4px 0 4px 20px;position:relative;}
.krc-box li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;border:2px solid var(--cyan);}
.krc-fair{border:1px solid #f0dcae;background:#fdf7ea;border-radius:var(--radius-sm);padding:18px 20px;margin-top:14px;}
.krc-fair h4{margin:0 0 8px;font-size:14px;font-weight:800;color:#8a6a1e;}
.krc-fair p{margin:0;font-size:13.5px;color:#6b551f;}
.krc-fair b{color:#8a6a1e;}
.krc-green{border:1px solid #cfe6da;background:var(--ok-tint);border-radius:var(--radius-sm);padding:16px 20px;margin-top:14px;font-size:13.5px;color:#22503f;}
.krc-green b{color:var(--ok);}

/* ---------- CTA (flach, navy) ---------- */
.krc-cta{margin-top:26px;border-radius:var(--radius-sm);background:var(--navy);color:#fff;padding:26px;}
.krc-cta h3{margin:0 0 6px;font-size:19px;font-weight:800;color:#fff;}
.krc-cta p{margin:0 0 18px;font-size:14px;color:#c3d5e4;}
.krc-cta-row{display:flex;gap:10px;flex-wrap:wrap;}
.krc-cta-row input{flex:1;min-width:150px;border-radius:10px;padding:13px 16px;font-family:inherit;font-size:15px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);}
.krc-cta-row input::placeholder{color:#9fb8c9;}
.krc-cta-row input:focus{outline:2px solid var(--cyan);background:rgba(255,255,255,.18);}
.krc-cta-ok{font-size:14.5px;font-weight:600;color:#bfe9d3;margin-top:14px;}
.krc-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:#9fb8c9;}
.krc-trust span{display:flex;align-items:center;gap:6px;}
.krc-trust svg{width:14px;height:14px;stroke:#7fd0b0;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* ---------- Buttons / Navigation ---------- */
.krc-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;}
.krc-ghost{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:10px 20px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);transition:.15s;}
.krc-ghost:hover,.krc-ghost:focus{border-color:var(--navy);color:var(--navy);background:var(--card);}
.krc-primary{border:none;border-radius:10px;padding:12px 22px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:800;color:#fff;background:var(--cyan);transition:background .15s;}
.krc-primary:hover,.krc-primary:focus{background:var(--cyan-600);}
.krc-primary:disabled{opacity:.45;cursor:not-allowed;background:var(--cyan);}
.krc-cyan{border:none;border-radius:10px;padding:13px 24px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:800;color:#fff;background:var(--cyan);transition:background .15s;white-space:nowrap;}
.krc-cyan:hover,.krc-cyan:focus{background:var(--cyan-600);}
.krc-disclaimer{font-size:12px;color:var(--faint);margin:22px 0 0;line-height:1.6;}

/* ---------- Responsive ---------- */
@media (max-width:720px){.krc-tiles{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.krc-grid{grid-template-columns:1fr;}}
@media (max-width:560px){.krc-card{padding:22px 18px;}.krc{padding:36px 14px 44px;}.krc-plabel{display:none;}}
@media (max-width:460px){.krc-tiles{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.krc *{animation:none !important;transition:none !important;}}