/* PV-Amortisationsrechner (grafisch) – alle Regeln auf .pvag begrenzt */
.pvag{--bg:#f4f5f2; --surface:#fcfcfb; --ink:#0b0b0b; --ink2:#52514e; --muted:#8a8984; --line:#e4e4df; --grid:#ecece8;
    --s-haus:#2a78d6; --s-auto:#eb6834; --s-heiz:#1baf7a; --s-feed:#eda100; --s-grid:#c9c8c1; --s-cost:#9b9a94;
    --neg:#b9b8b1; --pos:#2a78d6; --accent:#e8a317; --accent-soft:#fdf3dc;}
.pvag *,.pvag *::before,.pvag *::after{box-sizing:border-box}
.pvag .viz{color:var(--ink);max-width:1060px;margin:0 auto;padding:16px 12px 40px}
.pvag h2.pvag-title{font-size:1.25rem;margin:0;letter-spacing:-.01em}
.pvag .lead{color:var(--ink2);margin:3px 0 12px;font-size:.88rem}
.pvag .layout{display:grid;grid-template-columns:290px 1fr;gap:12px;align-items:start}
@media(max-width:960px){
.pvag .layout{grid-template-columns:1fr}
}
.pvag .card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.pvag .card h2{font-size:.9rem;margin:0 0 1px}
.pvag .card .sub{color:var(--ink2);font-size:.76rem;margin:0 0 6px}
.pvag .grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:8px 0 3px}
.pvag .grp.hl{color:#1d7a3e;font-size:.92rem;font-weight:800;letter-spacing:.04em;margin-top:12px}
.pvag .grp.hl-yellow{color:#c9a000;font-weight:800}
.pvag .grp.hl-red{color:#c62828;font-weight:800}
.pvag .grp.hl-ocker{color:#b07d1a;font-weight:800}
.pvag .grp.hl-lgreen{color:#4caf50;font-weight:800}
.pvag .grp:first-child{margin-top:0}
.pvag .ctl{margin-bottom:5px}
.pvag .ctl .top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:1px}
.pvag .ctl label{font-size:.82rem}
.pvag .ctl .num{display:flex;align-items:center;border:1px solid #d3d3cd;border-radius:7px;background:#fff;overflow:hidden;width:auto;min-width:112px}
.pvag .ctl .num:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,163,23,.2)}
.pvag .ctl .num input{border:0;width:58px;min-width:0;flex:1 1 auto;padding:2px 6px;font:inherit;font-size:.8rem;text-align:right;color:#1546c4;background:transparent}
.pvag .ctl .num input:focus{outline:none}
.pvag .ctl .num input::placeholder{color:#9aa3c8}
.pvag .ctl .num span{padding:0 5px;color:var(--muted);font-size:.66rem;white-space:nowrap;background:#f6f6f3;align-self:stretch;display:flex;align-items:center;border-left:1px solid #e6e6e1}
.pvag .ctl .hint{font-size:.68rem;color:var(--muted);margin-top:0;line-height:1.2}
.pvag input[type=range]{width:100%;accent-color:var(--accent);margin:0;height:14px}
.pvag input[type=range].green{accent-color:#1d7a3e}
.pvag input[type=range].blue{accent-color:#5aaee8}
.pvag input[type=range].orange{accent-color:#eb6834}
.pvag input[type=range].yellow{accent-color:#f2c500}
.pvag input[type=range].lgreen{accent-color:#4caf50}
.pvag .btn{border:1px solid #d3d3cd;background:#fff;border-radius:6px;padding:4px 10px;font:inherit;font-size:.78rem;cursor:pointer}
.pvag .btn:hover{border-color:var(--accent)}
.pvag .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
@media(max-width:700px){
.pvag .kpis{grid-template-columns:repeat(2,1fr)}
}
.pvag .kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.pvag .kpi .lbl{font-size:.72rem;color:var(--ink2)}
.pvag .kpi .val{font-size:1.35rem;font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
.pvag .kpi .val small{font-size:.75rem;font-weight:600;color:var(--ink2)}
.pvag .kpi .foot{font-size:.68rem;color:var(--muted);margin-top:1px}
.pvag .kpi.main{background:var(--accent-soft);border-color:#f1d98f}
.pvag .msg{background:#fff7e3;border:1px solid #f1d98f;border-radius:10px;padding:8px 10px;margin-bottom:10px;font-size:.82rem}
.pvag .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){
.pvag .two{grid-template-columns:1fr}
}
.pvag .two .card{margin-bottom:0}
.pvag .donutwrap{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.pvag .legend{list-style:none;margin:0;padding:0;font-size:.74rem;flex:1;min-width:0}
.pvag .legend li{display:flex;align-items:center;gap:6px;padding:2px 0;border-bottom:1px solid var(--grid)}
.pvag .legend li:last-child{border-bottom:0}
.pvag .legend .sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.pvag .pos{color:#1d7a3e}
.pvag .neg{color:#b3261e}
.pvag .lgd{display:flex;gap:12px;flex-wrap:wrap;font-size:.72rem;color:var(--ink2);margin-top:4px}
.pvag .lgd i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.pvag .lgd i.ln{height:2px;width:14px;border-radius:1px;vertical-align:2px}
.pvag .legend .nm{flex:1;color:var(--ink);white-space:nowrap}
.pvag .legend .v{font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.pvag svg text{font-family:inherit}
.pvag .tip{position:fixed;pointer-events:none;background:#0b0b0b;color:#fff;font-size:.8rem;padding:7px 9px;border-radius:7px;line-height:1.35;
       box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;transition:opacity .08s;z-index:10;white-space:nowrap}
.pvag .tip b{font-weight:650}
.pvag .hit{cursor:default}
.pvag .toggle{margin-top:8px}
.pvag table{width:100%;border-collapse:collapse;font-size:.74rem;font-variant-numeric:tabular-nums}
.pvag th,.pvag td{padding:3px 6px;text-align:right;border-bottom:1px solid var(--grid);white-space:nowrap}
.pvag th{color:var(--ink2);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:var(--surface)}
.pvag th:first-child,.pvag td:first-child{text-align:left}
.pvag .tablewrap{max-height:280px;overflow:auto;margin-top:6px}
.pvag .note{font-size:.68rem;color:var(--muted);line-height:1.4}

/* Theme-Resets */
.pvag{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:13px;line-height:1.35;text-align:left;background:transparent;padding:0}
.pvag h2,.pvag h2.pvag-title{font-family:inherit;color:var(--ink);text-transform:none;letter-spacing:normal;padding:0}
.pvag h2.pvag-title{margin:0}
.pvag .card h2{line-height:1.3}
.pvag p{margin-top:0}
.pvag ul{margin:0;padding:0}
.pvag table{border:0;margin:0;table-layout:auto;background:transparent}
.pvag th,.pvag td{border:0;border-bottom:1px solid var(--grid);background:transparent;line-height:1.35}
.pvag th{background:var(--surface)}
.pvag .ctl .num input[type=number]{border:0;height:auto;margin:0;box-shadow:none;border-radius:0;line-height:normal;max-width:none;-moz-appearance:textfield}
.pvag .ctl .num input[type=number]:focus{border:0;box-shadow:none;background:transparent}
.pvag input[type=range]{padding:0;border:0;background:transparent;box-shadow:none}
.pvag button.btn{color:var(--ink);text-transform:none;letter-spacing:0;line-height:1.2;box-shadow:none;font-weight:normal}
.pvag button.btn:hover{background:#fff;color:var(--ink)}
.pvag svg{max-width:100%;height:auto;display:block}

/* ---------- Handy-Ansicht (v1.4.12): größere Felder, Regler und Schrift ---------- */
@media(max-width:700px){
.pvag{font-size:15px}
.pvag .viz{padding:12px 2px 32px}
.pvag h2.pvag-title{font-size:1.3rem}
.pvag .lead{font-size:.95rem}
.pvag .card{padding:12px}
.pvag .card h2{font-size:1.02rem}
.pvag .card .sub{font-size:.88rem}
.pvag .grp{font-size:.76rem;margin:14px 0 6px}
.pvag .ctl{margin-bottom:14px}
.pvag .ctl .top{gap:10px;margin-bottom:4px}
.pvag .ctl label{font-size:.95rem;line-height:1.25}
.pvag .ctl .num{min-width:136px;min-height:42px;border-radius:8px}
.pvag .ctl .num input,.pvag .ctl .num input[type=number]{font-size:16px;padding:8px;width:76px;min-height:40px}
.pvag .ctl .num span{font-size:.82rem;padding:0 8px}
.pvag .ctl .hint{font-size:.82rem;line-height:1.3;margin-top:2px}
.pvag input[type=range]{height:34px;touch-action:pan-y}
.pvag .btn,.pvag button.btn{min-height:42px;padding:8px 14px;font-size:.95rem}
.pvag .kpi{padding:10px}
.pvag .kpi .lbl{font-size:.82rem}
.pvag .kpi .val{font-size:1.25rem}
.pvag .kpi .foot{font-size:.78rem}
.pvag .msg{font-size:.92rem}
.pvag .donutwrap{flex-wrap:wrap;justify-content:center}
.pvag .legend{flex:1 1 100%;font-size:.88rem}
.pvag .legend .nm{white-space:normal}
.pvag .lgd{font-size:.82rem}
.pvag table{font-size:.82rem}
.pvag th{font-size:.74rem}
.pvag .tablewrap{max-height:360px;-webkit-overflow-scrolling:touch}
.pvag .note{font-size:.8rem}
.pvag .tip{white-space:normal;max-width:80vw;font-size:.85rem}
}