/* ============================================================
   SAN PV Solution — PV-Rechner (seitenspezifische Styles)
   Basis-Tokens & Komponenten kommen aus ../styles.css
   ============================================================ */

/* ---------- Layout ---------- */
.calc-intro{max-width:820px}
.calc-intro p{margin-top:14px}

.calc-layout{display:grid;gap:28px}
@media (min-width:980px){
  .calc-layout{grid-template-columns:1.05fr .95fr;align-items:start}
  .calc-results{position:sticky;top:96px}
}

.calc-panel{padding:clamp(20px,4vw,32px)}
.calc-panel-title{font-size:1.25rem;margin:0 0 22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Felder ---------- */
.calc-field{border:0;margin:0 0 24px;padding:0;min-width:0}
.calc-field:last-child{margin-bottom:0}

.calc-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-weight:700;font-size:.95rem;color:var(--ink,#14231a);margin-bottom:10px}
legend.calc-label{width:100%}

.calc-val{font-variant-numeric:tabular-nums;font-weight:800;color:var(--brand,#00803b);
  background:var(--bg-soft,#f4f8f5);border:1px solid var(--line,#e2eae4);
  border-radius:999px;padding:2px 12px;font-size:.9rem;white-space:nowrap}

.calc-hint{font-size:.82rem;color:var(--muted,#5d6f63);margin:8px 0 0;line-height:1.5}

/* ---------- Slider ---------- */
.calc-field input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand,#00803b),var(--brand-light,#76b82a));
  outline:none;cursor:pointer;display:block}
.calc-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:4px solid var(--brand,#00803b);
  box-shadow:var(--shadow-md,0 6px 24px -8px rgba(20,35,26,.14));
  transition:transform .15s ease,border-color .15s ease}
.calc-field input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--brand,#00803b);
  box-shadow:var(--shadow-md,0 6px 24px -8px rgba(20,35,26,.14));
  transition:transform .15s ease}
.calc-field input[type="range"]:hover::-webkit-slider-thumb,
.calc-field input[type="range"]:focus-visible::-webkit-slider-thumb{transform:scale(1.12);border-color:var(--brand-deep,#0a5c2f)}
.calc-field input[type="range"]:hover::-moz-range-thumb{transform:scale(1.12)}
.calc-field input[type="range"]:focus-visible{outline:2px solid var(--brand-light,#76b82a);outline-offset:4px}

/* ---------- Segment-Buttons (Umschalter / Ausrichtung) ---------- */
.calc-seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.calc-seg-4{grid-template-columns:repeat(2,1fr)}
@media (min-width:540px){.calc-seg-4{grid-template-columns:repeat(4,1fr)}}
.calc-seg label{position:relative;display:block;min-width:0}
.calc-seg input{position:absolute;opacity:0;inset:0;pointer-events:none}
.calc-seg span{display:block;text-align:center;padding:10px 6px;border:1.5px solid var(--line,#e2eae4);
  border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;background:#fff;
  color:var(--text,#243329);transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-seg span:hover{border-color:var(--brand-light,#76b82a)}
.calc-seg input:checked + span{background:var(--brand,#00803b);border-color:var(--brand,#00803b);
  color:#fff;box-shadow:var(--shadow-sm,0 1px 2px rgba(20,35,26,.06))}
.calc-seg input:focus-visible + span{outline:2px solid var(--brand-light,#76b82a);outline-offset:2px}

/* ---------- Toggle-Switches ---------- */
.calc-switch-row{display:grid;gap:16px;padding-top:6px;border-top:1px solid var(--line,#e2eae4)}
.calc-switch{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;user-select:none}
.calc-switch input{position:absolute;opacity:0;width:1px;height:1px}
.calc-switch-track{flex:0 0 50px;height:29px;border-radius:999px;background:#cdd9d1;
  position:relative;transition:background .25s ease}
.calc-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,35,26,.25);transition:transform .25s ease}
.calc-switch input:checked ~ .calc-switch-track{background:var(--brand,#00803b)}
.calc-switch input:checked ~ .calc-switch-track::after{transform:translateX(21px)}
.calc-switch input:focus-visible ~ .calc-switch-track{outline:2px solid var(--brand-light,#76b82a);outline-offset:3px}
.calc-switch-text{display:flex;flex-direction:column;line-height:1.35}
.calc-switch-text strong{font-size:.95rem;color:var(--ink,#14231a)}
.calc-switch-text small{font-size:.8rem;color:var(--muted,#5d6f63)}

/* ---------- Ergebnis-Cards ---------- */
.calc-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px}
@media (min-width:440px){.calc-cards{grid-template-columns:1fr 1fr}}
.calc-card{padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.calc-card:hover{transform:none}
.calc-card-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted,#5d6f63)}
.calc-card-value{font-size:clamp(1.45rem,3vw,1.8rem);font-weight:800;color:var(--ink,#14231a);
  font-variant-numeric:tabular-nums;line-height:1.15}
.calc-card-sub{font-size:.8rem;color:var(--muted,#5d6f63)}

.calc-card-hero{background:linear-gradient(135deg,var(--brand,#00803b),var(--brand-light,#76b82a));border:0}
@media (min-width:440px){.calc-card-hero{grid-column:1/-1}}
.calc-card-hero .calc-card-label,.calc-card-hero .calc-card-sub{color:rgba(255,255,255,.85)}
.calc-card-hero .calc-card-value{color:#fff;font-size:clamp(1.7rem,4vw,2.2rem)}

.calc-card-accent{border-top:3px solid var(--amber,#f7b32b)}

/* ---------- Eigenverbrauchs-Balken ---------- */
.calc-bar-card{padding:18px 20px;margin-bottom:16px}
.calc-bar-card:hover{transform:none}
.calc-bar-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.85rem;color:var(--muted,#5d6f63);margin-bottom:10px}
.calc-bar-head strong{color:var(--ink,#14231a);font-variant-numeric:tabular-nums;margin-left:4px}
.calc-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.calc-dot-ev{background:var(--brand,#00803b)}
.calc-dot-feed{background:var(--amber,#f7b32b)}
.calc-bar{height:18px;border-radius:999px;background:var(--amber,#f7b32b);overflow:hidden}
.calc-bar-ev{height:100%;min-width:3%;border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,var(--brand-deep,#0a5c2f),var(--brand,#00803b));
  transition:width .45s cubic-bezier(.22,.8,.35,1)}
.calc-bar-card .calc-hint{margin-top:10px}

/* ---------- Disclaimer & CTA ---------- */
.calc-disclaimer{background:var(--bg-soft,#f4f8f5);border:1px solid var(--line,#e2eae4);
  border-left:4px solid var(--amber,#f7b32b);border-radius:var(--radius,14px);
  padding:16px 18px;font-size:.85rem;line-height:1.6;color:var(--text,#243329);margin-bottom:20px}

.calc-cta{display:block;text-align:center;width:100%}
.calc-cta-hint{text-align:center;margin-top:10px}

/* ---------- SEO-Text ---------- */
.calc-seo{max-width:820px}
.calc-seo p{margin-top:14px}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .calc-bar-ev,.calc-switch-track,.calc-switch-track::after,.calc-seg span,
  .calc-field input[type="range"]::-webkit-slider-thumb{transition:none}
}