:root{
  --ink:#16242B;
  --ink-soft:#4A5C63;
  --paper:#EDF0EF;
  --card:#FFFFFF;
  --line:#D3DAD8;
  --netz:#1F5673;
  --lade:#E0A33B;
  --erloes:#2E7D5B;
  --risk:#B5462F;
}
*{box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;}
body{line-height:1.55;}
h1,h2,h3,h4,h5{font-family:'IBM Plex Sans',sans-serif;font-weight:600;color:var(--ink);margin:0 0 .5rem;line-height:1.2}
h1{font-size:2rem;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.45rem;margin-top:2rem}
h3{font-size:1.1rem;margin-top:1.4rem}
p{margin:.6rem 0;max-width:72ch}
a{color:var(--netz)}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.soft{color:var(--ink-soft);font-weight:500;font-size:.85em}

/* Kopf */
.masthead{background:var(--ink);color:#EDF0EF;padding:0}
.masthead .inner{max-width:1180px;margin:0 auto;padding:1.1rem 1rem .4rem}
.masthead .kicker{font-size:.8rem;color:#9FB3B8;margin:0;letter-spacing:.04em}
.masthead h1{color:#fff;font-size:1.5rem;margin:.15rem 0 .1rem}
.masthead .sub{font-size:.9rem;color:#B9C8CC;margin:0 0 .8rem}

/* Tabs */
.tabwrap{background:var(--ink)}
.tabwrap .tabs{background:transparent;height:44px}
.tabwrap .tabs .tab a{color:#93A8AE;font-size:.82rem;text-transform:none;font-weight:500;padding:0 14px}
.tabwrap .tabs .tab a:hover,.tabwrap .tabs .tab a.active{color:#fff;background:transparent}
.tabwrap .tabs .indicator{background-color:var(--lade);height:3px}

main{max-width:1180px;margin:0 auto;padding:1.2rem 1rem 5rem}
.panel{padding-top:.4rem}
h2.sec{margin-top:1.6rem}
h3.sec3{margin-top:1.8rem}

/* Karten */
.box{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1rem 1.1rem;margin:.8rem 0}
.box.tight{padding:.75rem .9rem}
.box h3{margin-top:0}
.grid{display:grid;gap:.8rem}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:520px){.g4{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.g4{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--netz);border-radius:3px;padding:.6rem .75rem}
.kpi .v{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;font-weight:600;line-height:1.1}
.kpi .l{font-size:.74rem;color:var(--ink-soft);margin-top:.15rem}
.kpi.lade{border-left-color:var(--lade)}
.kpi.erloes{border-left-color:var(--erloes)}
.kpi.risk{border-left-color:var(--risk)}
.kpi.netz{border-left-color:var(--netz)}

/* Rendite-Anhaltspunkt */
.yield{display:grid;gap:.7rem 2rem;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--erloes);border-radius:4px;padding:.9rem 1.1rem;margin:.4rem 0 1rem}
@media(min-width:720px){.yield{grid-template-columns:auto 1fr;align-items:center}}
.yield .yield-main .l{font-size:.8rem;color:var(--ink-soft)}
.yield .yield-main .v{font-size:2.5rem;font-weight:600;color:var(--erloes);line-height:1.05;margin:.1rem 0}
.yield .yield-main .s{font-size:.78rem;color:var(--ink-soft)}
.yield-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem 1.2rem}
.yield-side>div{border-left:1px solid var(--line);padding-left:.8rem}
.yield-side .l{display:block;font-size:.74rem;color:var(--ink-soft)}
.yield-side .num{font-size:1.05rem;font-weight:600}
.yield-note{grid-column:1/-1;font-size:.74rem;color:var(--ink-soft);margin:0;max-width:none}

/* Hero */
.hero{display:grid;gap:.6rem 1.6rem;align-items:center;background:var(--ink);border-radius:4px;padding:1rem 1.2rem .5rem;margin:.2rem 0 1rem;color:#EDF0EF}
@media(min-width:820px){.hero{grid-template-columns:1fr 1fr}}
.hero h2{color:#fff;font-size:1.5rem;margin:0 0 .4rem;line-height:1.25}
.hero-text p{color:#B9C8CC;font-size:1rem;margin:0 0 .5rem}
.hero-chart svg{width:100%;max-width:520px;height:auto;display:block;margin-left:auto}
.hero .cap{font-size:.74rem;color:#9FB3B8;margin:.2rem 0 .4rem;text-align:right;max-width:none}
.hero .g{border-bottom-color:#9FB3B8}

/* Warum-Karten */
.why{display:grid;gap:.8rem;grid-template-columns:1fr;margin:.6rem 0 .4rem}
@media(min-width:720px){.why{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.why{grid-template-columns:repeat(4,1fr)}}
.wcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--erloes);border-radius:4px;padding:.9rem 1rem}
.wcard .material-icons{font-size:30px;color:var(--erloes)}
.wcard.money{border-top-color:var(--lade)}
.wcard.money .material-icons{color:var(--lade)}
.wcard h3{font-size:1.08rem;margin:.35rem 0 .45rem}
.wcard p{font-size:.9rem;margin:0}

/* Problem-Karten */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.15rem;position:relative;padding-left:3rem}
.pcard .nr{position:absolute;left:.8rem;top:.75rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--risk);color:#fff;font-weight:600;text-align:center;line-height:1.6rem;font-size:.9rem}
.pcard b{font-size:1rem}
.pcard span:last-child{font-size:.85rem;color:var(--ink-soft)}

/* Arbitrage-Fluss: Bezug unten (billig), Einspeisung oben (teuer) */
.flow{display:flex;align-items:stretch;gap:.3rem;margin:.6rem 0 .8rem}
.fcard{flex:1 1 0;border:2px solid var(--line);border-radius:6px;padding:.8rem .9rem;min-width:0}
.fcard .t{font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}
.fcard .w{font-size:.8rem;color:var(--ink-soft);line-height:1.35;margin-top:.15rem}
.fcard .p{font-size:1.65rem;font-weight:600;margin-top:.35rem;line-height:1.1}
.fcard .lvl{display:inline-block;font-size:.7rem;font-weight:600;padding:.1rem .55rem;border-radius:10px;color:#fff;margin-top:.35rem}
.fcard.buy{border-color:var(--netz);background:#E8F0F4;margin-top:3.4rem}
.fcard.buy .t,.fcard.buy .p{color:var(--netz)}
.fcard.buy .lvl{background:var(--netz)}
.fcard.sell{border-color:var(--lade);background:#FBF2E0;margin-bottom:3.4rem}
.fcard.sell .t,.fcard.sell .p{color:#9A6A12}
.fcard.sell .lvl{background:var(--lade)}
.fcard.bat{flex:0 0 140px;border-color:var(--ink);background:var(--paper);text-align:center;margin:1.7rem 0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fcard.bat .material-icons{font-size:42px;color:var(--erloes)}
.farrow{flex:0 0 76px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.74rem;font-weight:600}
.farrow svg{width:72px;height:22px}
.farrow.in{color:var(--netz);padding-top:2.4rem}
.farrow.out{color:#C98A1E;padding-bottom:2.4rem}
.fresult{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem;background:#E4F0EA;border-left:4px solid var(--erloes);border-radius:4px;padding:.7rem .9rem;font-size:.92rem}
.fresult .op{font-size:1.2rem;font-weight:600;color:var(--ink-soft)}
.fresult .big b{font-size:1.25rem;color:var(--erloes)}
.fresult .plus{flex-basis:100%;font-size:.82rem;color:var(--ink-soft)}
@media(max-width:720px){
  .flow{flex-direction:column}
  .fcard.buy,.fcard.sell,.fcard.bat{margin:0}
  .fcard.bat{flex-basis:auto;flex-direction:row;gap:.6rem;padding:.5rem}
  .farrow,.farrow.in,.farrow.out{flex-basis:auto;flex-direction:row;gap:.4rem;padding:.1rem 0}
  .farrow svg{transform:rotate(90deg);width:40px}
}

/* Rollen und Partner */
.role{border:1px solid var(--line);border-radius:4px;padding:.8rem .9rem;border-top:4px solid var(--ink-soft)}
.role.fh{border-top-color:var(--erloes)}
.role.jm{border-top-color:var(--lade)}
.role.inv{border-top-color:var(--netz)}
.role .material-icons{font-size:30px}
.role.fh .material-icons{color:var(--erloes)}
.role.jm .material-icons{color:var(--lade)}
.role.inv .material-icons{color:var(--netz)}
.role .who{font-size:.78rem;color:var(--ink-soft);margin-top:.2rem}
.role .what{font-size:1.15rem;font-weight:600}
.role p{font-size:.88rem;margin:.35rem 0 0}
.partner{border-top:4px solid var(--ink-soft)}
.partner.fh{border-top-color:var(--erloes)}
.partner.jm{border-top-color:var(--lade)}
.partner h3{display:flex;align-items:center;gap:.45rem}
.partner.fh h3 .material-icons{color:var(--erloes)}
.partner.jm h3 .material-icons{color:var(--lade)}

table.mini{width:100%;border-collapse:collapse;font-size:.88rem}
table.mini td,table.mini th{padding:.35rem .4rem;border-bottom:1px solid var(--line);text-align:left}
table.mini td.n,table.mini th.n{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
table.mini tr.sum td{font-weight:600;border-top:2px solid var(--ink);border-bottom:none}
table.mini tr.off td{color:var(--ink-soft)}
table.mini.cf{font-size:.8rem;margin-top:.6rem;white-space:nowrap}
table.mini.cf td.neg{color:var(--risk)}
.scroll{overflow-x:auto}

.tag{display:inline-block;font-size:.72rem;padding:.1rem .45rem;border:1px solid var(--line);border-radius:2px;color:var(--ink-soft);margin-right:.3rem}
.tag.ok{border-color:var(--erloes);color:var(--erloes)}
.tag.warn{border-color:var(--risk);color:var(--risk)}
.tag.in{border-color:var(--netz);color:var(--netz)}
.tag.out{border-color:var(--lade);color:#9A6A12}

/* Kalkulation: kompakte Eingabefelder, Zahlen rechtsbündig */
.calchead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.4rem 1.2rem}
.calchead .lead{margin-bottom:.2rem}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.55rem .7rem}
.f label{display:block;font-size:.74rem;color:var(--ink-soft);margin-bottom:.15rem;white-space:nowrap}
.f .inp{display:flex;align-items:center;height:2.05rem;padding:0 .5rem;border:1px solid var(--line);border-radius:3px;background:#fff}
.f .inp:focus-within{border-color:var(--netz);box-shadow:0 0 0 2px rgba(31,86,115,.15)}
.f input.browser-default,.f output{flex:1;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;
  text-align:right;font-family:'IBM Plex Mono',monospace;font-size:.92rem;color:var(--ink)}
.f input[type=date]{text-align:right}
.f .u{font-size:.7rem;color:var(--ink-soft);margin-left:.35rem;white-space:nowrap}
.f.out .inp{background:var(--paper);border-style:dashed}
.f.wide{grid-column:1/-1}
.f.wide .range-field{margin:.1rem 0 0}
.f.note{grid-column:span 2;display:flex;align-items:flex-end}
.f.note p{margin:0;font-size:.82rem}
@media(max-width:600px){.f.note{grid-column:1/-1}}

/* PDF-Aufrufe */
.pdfcta{display:inline-flex;align-items:center;gap:.45rem;background:var(--netz);color:#fff;border:none;border-radius:4px;padding:.55rem .95rem;font:600 .88rem 'IBM Plex Sans',sans-serif;cursor:pointer;white-space:nowrap}
.pdfcta:hover{background:#17455c}
.pdfcta .material-icons{font-size:20px}
.pdfbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;border-left:4px solid var(--netz)}
.pdfbox p{margin:0;font-size:.88rem}
.pdffab{position:fixed;right:14px;bottom:14px;z-index:900;display:inline-flex;align-items:center;gap:.4rem;background:var(--lade);color:var(--ink);border:none;border-radius:24px;padding:.6rem 1rem .6rem .8rem;font:600 .86rem 'IBM Plex Sans',sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.pdffab:hover{background:#E8B252}
@media(max-width:600px){.pdffab span{display:none}.pdffab{padding:.7rem}}
[data-pdf].busy{opacity:.6;cursor:progress}
[data-pdf].busy span::after{content:" …"}

.btn-flat{text-transform:none}
ul.dash{padding-left:0;list-style:none}
ul.dash li{padding-left:1rem;position:relative;margin:.35rem 0;max-width:72ch}
ul.dash li:before{content:"";position:absolute;left:0;top:.7em;width:.5rem;height:1px;background:var(--ink-soft)}
.src{font-size:.74rem;color:var(--ink-soft);margin-top:.4rem}
.chart{height:300px;width:100%}
.chart.tall{height:400px}
@media(max-width:600px){.chart{height:250px}.chart.tall{height:380px}h1{font-size:1.35rem}main{padding:.8rem .6rem 5rem}.box{padding:.8rem}.yield .yield-main .v{font-size:2rem}}
.socwrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.socbat{width:120px;height:190px}
.phase{margin:0 0 .5rem;font-size:.9rem}
.phase #l_time{font-size:1.15rem;font-weight:600;margin-right:.4rem}
.lead{font-size:1.02rem;color:var(--ink-soft);max-width:68ch}

/* Erklärungen per Mouseover */
[data-g]{cursor:help}
.g{border-bottom:1px dotted currentColor}
[data-g]:focus{outline:2px solid var(--lade);outline-offset:1px}
.f label[data-g]::after,.gi{content:"i";display:inline-block;width:14px;height:14px;line-height:14px;margin-left:.3rem;border-radius:50%;background:var(--netz);color:#fff;font-size:10px;font-weight:700;text-align:center;font-family:'IBM Plex Sans',sans-serif;font-style:normal;vertical-align:1px}
.gi{vertical-align:3px}
#gtip{position:fixed;z-index:1200;max-width:min(360px,calc(100vw - 16px));background:var(--ink);color:#DDE5E4;font-size:.8rem;line-height:1.45;padding:.6rem .75rem;border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.25);pointer-events:none}
#gtip b{display:block;color:#fff;margin-bottom:.2rem;font-size:.85rem}

/* Kopf: Logo und Live-Batterie */
.mh{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap}
.brand{display:inline-block;line-height:0;margin:.1rem 0 .45rem}
.brand svg{height:26px;width:auto}
.livebat{display:flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.45rem .8rem .45rem .55rem;color:#EDF0EF;cursor:pointer;font:inherit;text-align:left}
.livebat:hover{background:rgba(255,255,255,.1)}
.livebat:focus-visible{outline:2px solid var(--lade);outline-offset:2px}
.lb-svg{width:92px;height:44px;flex:none}
.lb-fill{fill:#7E8F94;transition:width .8s ease,fill .4s}
.livebat.charging .lb-fill{fill:var(--erloes)}
.livebat.discharging .lb-fill{fill:var(--lade)}
.lb-shine{opacity:0}
.livebat.charging .lb-shine{opacity:1;animation:lbIn 1.4s linear infinite}
.livebat.discharging .lb-shine{opacity:1;animation:lbOut 1.4s linear infinite}
@keyframes lbIn{from{transform:translateX(0)}to{transform:translateX(125px)}}
@keyframes lbOut{from{transform:translateX(125px)}to{transform:translateX(0)}}
.lb-bolt,.lb-out,.lb-pause{opacity:0;transition:opacity .3s}
.livebat.charging .lb-bolt,.livebat.discharging .lb-out,.livebat.idle .lb-pause{opacity:1}
.lb-bolt{fill:#E0A33B;stroke:#16242B;stroke-width:2.5;stroke-linejoin:round}
.lb-out{fill:none;stroke:#16242B;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.lb-pause{fill:#EDF0EF}
.lbtxt{display:flex;flex-direction:column;line-height:1.2}
.lbtxt b{font-size:.95rem}
.lbtxt .num{font-size:.85rem;color:#B9C8CC}
.lbtxt small{font-size:.66rem;color:#93A8AE;text-transform:uppercase;letter-spacing:.05em}
@media(prefers-reduced-motion:reduce){.lb-shine{display:none}.lb-fill{transition:none}}
@media(max-width:600px){.lb-svg{width:70px;height:34px}.livebat{padding:.35rem .6rem .35rem .45rem}.brand svg{height:22px}}

/* Problem: Fristen */
.deadline{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem;margin:.6rem 0}
.dl{border-radius:6px;padding:.7rem .8rem;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ink-soft)}
.dl.crit{border-top-color:var(--risk);background:#FBEDEA}
.dl.ok{border-top-color:var(--erloes)}
.dl .d{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.1rem}
.dl .t{font-size:.84rem;color:var(--ink-soft);line-height:1.35}
.pcard.urgent .nr{background:var(--lade);color:var(--ink)}

/* Vorteile, Vergütung, Hebel, FAQ */
.benefits{border-left:4px solid var(--erloes);background:#F2F8F5}
.benefits ul{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.4rem 1.2rem}
@media(min-width:720px){.benefits ul{grid-template-columns:1fr 1fr}}
.benefits li{position:relative;padding-left:1.7rem;font-size:.92rem}
.benefits li::before{content:"check_circle";font-family:'Material Icons';position:absolute;left:0;top:-.05rem;color:var(--erloes);font-size:1.2rem;line-height:1.3}
.pay{border-left:4px solid var(--lade)}
.pay table.mini td.n{white-space:nowrap}
.levers{display:grid;gap:.7rem;grid-template-columns:1fr;margin:.8rem 0}
@media(min-width:720px){.levers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.levers{grid-template-columns:repeat(4,1fr)}}
.lever{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--lade);border-radius:4px;padding:.8rem .9rem}
.lever .material-icons{color:#C98A1E;font-size:26px}
.lever h4{font-size:.98rem;margin:.3rem 0 .35rem}
.lever p{font-size:.86rem;margin:0}
.faq details{border-bottom:1px solid var(--line);padding:.55rem 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:1.2rem;color:var(--netz);font-weight:700}
.faq details[open] summary::before{content:"–"}
.faq details p{margin:.35rem 0 0 1.2rem;font-size:.92rem}
.structure{overflow-x:auto}
.structure svg{min-width:640px;width:100%;height:auto;display:block}

/* Kontakt und Footer */
.contact{display:grid;gap:.4rem 1.4rem;grid-template-columns:1fr;align-items:start;border-left:4px solid var(--netz)}
@media(min-width:720px){.contact{grid-template-columns:1.2fr 1fr}}
.contact p{margin:.2rem 0}
.phonebtn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--netz);color:var(--netz);background:#fff;border-radius:4px;padding:.3rem .7rem;font:600 .86rem 'IBM Plex Sans',sans-serif;cursor:pointer}
.phonebtn:hover{background:#E8F0F4}
.phonebtn .material-icons{font-size:18px}
a.phone{font-weight:600}
.foot{background:var(--ink);color:#B9C8CC;font-size:.82rem}
.foot .inner{max-width:1180px;margin:0 auto;padding:1.1rem 1rem 1.3rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;align-items:center}
.foot a{color:#EDF0EF}
.foot svg{height:20px;width:auto;vertical-align:middle}

/* Rechtliche Seiten */
.legal{max-width:860px}
.legal h2{margin-top:1.8rem;font-size:1.3rem}
.legal h3{margin-top:1.2rem;font-size:1.02rem}
.legal p,.legal li{font-size:.95rem}
.todo{background:#FFF3CD;border:1px dashed #C98A1E;padding:0 .3rem;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:2000;background:#fff;color:var(--ink);padding:.4rem .6rem}