/* ── Design Tokens ── */
:root {
  --bg0:#0a0d0f; --bg1:#0f1418; --bg2:#151b22; --bg3:#1c252f; --bg4:#222e3a;
  --border:rgba(255,255,255,0.07); --border-hi:rgba(255,255,255,0.14);
  --orange:#f97316; --od:rgba(249,115,22,0.12); --og:rgba(249,115,22,0.25);
  --green:#22c55e;  --gd:rgba(34,197,94,0.12);  --gg:rgba(34,197,94,0.25);
  --blue:#38bdf8;   --bd:rgba(56,189,248,0.10);  --bg_:rgba(56,189,248,0.22);
  --red:#f43f5e;    --rd:rgba(244,63,94,0.10);
  --yellow:#eab308; --yd:rgba(234,179,8,0.12);
  --purple:#a855f7; --pd:rgba(168,85,247,0.12);
  --text:#e8edf2; --text2:#8fa3b8; --text3:#4a6278;
  --r:14px; --r-sm:8px; --tap:48px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Barlow Condensed',sans-serif;background:var(--bg0);color:var(--text);
  min-height:100vh;overflow-x:hidden;overscroll-behavior-x:none}

/* Header */
header{position:sticky;top:0;z-index:300;display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 1rem;background:rgba(10,13,15,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
.hd-l{display:flex;align-items:center;gap:.45rem}
.sun{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#f97316,#fb923c);
  display:grid;place-items:center;font-size:.95rem;flex-shrink:0;box-shadow:0 0 14px var(--og)}
.hd-title{font-size:1.05rem;font-weight:800}.hd-title em{color:var(--orange);font-style:normal}
.hd-sub{font-size:.48rem;color:var(--text3);letter-spacing:.1em;text-transform:uppercase}
.hd-r{display:flex;align-items:center;gap:.6rem}
.hd-clock{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:600}
.hd-status{font-size:.48rem;color:var(--text3);letter-spacing:.05em;text-transform:uppercase}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);
  margin-right:3px;animation:blink 2s ease-in-out infinite}
.dot.err{background:var(--red)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
#hd-wx{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--text2)}
.hd-wx-temp{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--text)}

/* Tab Bar */
.tab-bar{display:flex;gap:.1rem;padding:.32rem .8rem;background:rgba(10,13,15,.92);
  border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-left:max(.8rem,env(safe-area-inset-left));
  padding-right:max(.8rem,env(safe-area-inset-right))}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{flex-shrink:0;min-height:var(--tap);padding:0 .85rem;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;font-family:'Barlow Condensed',sans-serif;
  font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:transparent;color:var(--text3);transition:background .15s,color .15s;
  -webkit-tap-highlight-color:transparent;display:flex;align-items:center}
.tab-btn:hover{background:var(--bg3);color:var(--text2)}
.tab-btn.active{background:var(--od);color:var(--orange);border-color:rgba(249,115,22,.3)}

/* Main */
main{padding:.75rem 1rem;max-width:1300px;margin:0 auto;
  padding-left:max(1rem,env(safe-area-inset-left));
  padding-right:max(1rem,env(safe-area-inset-right));
  padding-bottom:max(4rem,calc(3rem + env(safe-area-inset-bottom)))}
.tab-pane{display:none}
.tab-pane.active{display:flex;flex-direction:column;gap:.65rem}

/* Section Label */
.sec{font-size:.48rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text3);display:flex;align-items:center;gap:.3rem;margin-bottom:.3rem}
.sec::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sec.pv::before{background:var(--orange)}.sec.strom::before{background:var(--blue)}
.sec.combined::before{background:var(--green)}.sec.purple::before{background:var(--purple)}

/* KPI Grid */
.grid{display:grid;gap:.5rem}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:1fr 1fr 1fr 1fr}

.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:.6rem .8rem;position:relative;overflow:hidden}
.kpi-gl{position:absolute;inset:0;pointer-events:none}
.kpi-gl.o{background:var(--od)}.kpi-gl.g{background:var(--gd)}
.kpi-gl.b{background:var(--bd)}.kpi-gl.y{background:var(--yd)}.kpi-gl.p{background:var(--pd)}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.15rem}
.kpi-lbl{font-size:.47rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);line-height:1.3}
.kpi-ico{font-size:.85rem;opacity:.28}
.kpi-val{font-family:'JetBrains Mono',monospace;font-size:1.28rem;font-weight:600;line-height:1;transition:color .3s}
.kpi-val.o{color:var(--orange)}.kpi-val.g{color:var(--green)}.kpi-val.b{color:var(--blue)}
.kpi-val.r{color:var(--red)}.kpi-val.y{color:var(--yellow)}.kpi-val.p{color:var(--purple)}
.kpi-unit{font-size:.48rem;color:var(--text3);margin-top:.07rem}

/* Flow Hero */
.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center}
.flow-node{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:.7rem .9rem;text-align:center;position:relative;overflow:hidden}
.flow-node::after{content:'';position:absolute;inset:0;border-radius:var(--r);pointer-events:none}
.flow-node.solar{border-color:rgba(249,115,22,.35)}.flow-node.solar::after{background:var(--od)}
.flow-node.house{border-color:rgba(56,189,248,.28)}.flow-node.house::after{background:var(--bd)}
.fn-ico{font-size:1.45rem;line-height:1;margin-bottom:.12rem}
.fn-lbl{font-size:.46rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text2);margin-bottom:.15rem}
.fn-val{font-family:'JetBrains Mono',monospace;font-size:1.45rem;font-weight:600;line-height:1}
.fn-val.o{color:var(--orange)}.fn-val.b{color:var(--blue)}
.fn-unit{font-size:.5rem;color:var(--text3);margin-top:.08rem}
.flow-mid{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.farr{display:flex;align-items:center;gap:.2rem;font-size:.56rem}
.farr-val{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600}
.farr-sep{width:1px;height:16px;background:var(--border)}

/* EV Ring */
.ev-wrap{display:grid;grid-template-columns:110px 1fr;gap:.7rem;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:.7rem;align-items:center}
.ring-box{position:relative;width:110px;height:110px;flex-shrink:0}
.ring-box canvas{display:block}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-pct{font-family:'JetBrains Mono',monospace;font-size:1.45rem;font-weight:600;color:var(--green);line-height:1}
.ring-lbl{font-size:.44rem;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-top:.1rem}
.ev-stats{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.ev-stat{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:.4rem .6rem}
.ev-lbl{font-size:.44rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:.1rem}
.ev-val{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:600}
.ev-val.o{color:var(--orange)}.ev-val.g{color:var(--green)}.ev-val.b{color:var(--blue)}

/* Chart Card */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.7rem .85rem}
.card h3{font-size:.48rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);margin-bottom:.5rem;display:flex;align-items:center;gap:.3rem}
.card h3::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
.note{font-size:.46rem;color:var(--text3);margin-top:.3rem;font-style:italic}
.c2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

/* Navigator */
.nav{display:flex;align-items:center;justify-content:space-between;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:.42rem .75rem;gap:.35rem}
.nav-lbl{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:600;flex:1;text-align:center}
.nav-grp{display:flex;align-items:center;gap:.28rem}
.btn{min-height:var(--tap);min-width:var(--tap);padding:0 .55rem;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;
  color:var(--text2);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center}
.btn:hover{background:var(--bg4);color:var(--text)}
.btn:disabled{opacity:.22;cursor:not-allowed}
.btn.today{background:var(--od);border-color:rgba(249,115,22,.35);color:var(--orange)}
input[type=date]{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.2rem .38rem;color:var(--text);font-family:'JetBrains Mono',monospace;
  font-size:.66rem;cursor:pointer;min-height:var(--tap)}

/* Stat Card */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.58rem .75rem}
.stat-lbl{font-size:.47rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);margin-bottom:.12rem}
.stat-val{font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:600;line-height:1}
.stat-val.o{color:var(--orange)}.stat-val.g{color:var(--green)}.stat-val.b{color:var(--blue)}
.stat-val.y{color:var(--yellow)}.stat-val.r{color:var(--red)}
.stat-unit{font-size:.48rem;color:var(--text3);margin-top:.09rem}
.delta{font-size:.5rem;margin-top:.22rem;padding:.09rem .28rem;border-radius:4px;
  display:inline-block;font-weight:600}
.delta.pos{background:var(--gd);color:var(--green)}.delta.neg{background:var(--rd);color:var(--red)}
.delta.neu{background:var(--bg3);color:var(--text3)}

/* Prognose */
.fc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.38rem}
.fc-day{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:.6rem .35rem;text-align:center}
.fc-day.clickable{cursor:pointer;transition:border-color .15s;-webkit-tap-highlight-color:transparent}
.fc-day.clickable:active,.fc-day.active{border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.06)}
.fc-dn{font-size:.5rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:.15rem}
.fc-dt{display:block;font-size:.42rem;font-weight:400;letter-spacing:0}
.fc-ico{font-size:1.4rem;line-height:1;margin:.15rem 0}
.fc-tmp{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600;margin-bottom:.15rem}
.fc-kwh{font-family:'JetBrains Mono',monospace;font-size:1.0rem;font-weight:700;color:var(--orange);line-height:1}
.fc-unit{font-size:.44rem;color:var(--text3);margin-top:.04rem}
.fc-rad{font-size:.46rem;color:var(--text3);margin-top:.12rem}
.fc-conf{display:inline-block;margin-top:.15rem;font-size:.44rem;padding:.06rem .25rem;border-radius:3px;font-weight:700}
.fc-conf.hi{background:var(--gd);color:var(--green)}.fc-conf.mid{background:var(--yd);color:var(--yellow)}
.fc-conf.lo{background:var(--bg4);color:var(--text3)}
.fc-nav{display:flex;align-items:center;justify-content:space-between;
  background:var(--bg2);border:1px solid rgba(249,115,22,.2);border-radius:var(--r);
  padding:.48rem .8rem}
.fc-nav-title{font-size:.48rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--orange)}
.fc-nav-hint{font-size:.46rem;color:var(--text3);margin-top:.08rem}
.fc-kpis{display:flex;gap:.55rem}
.fc-kpi-val{font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:600;color:var(--orange);text-align:right}
.fc-kpi-lbl{font-size:.44rem;color:var(--text3);text-align:right}

/* Lernmodell */
.lm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem;margin-top:.42rem}
.lm-cell{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.4rem .42rem;text-align:center}
.lm-name{font-size:.44rem;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
.lm-val{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:600;color:var(--orange);margin:.06rem 0}
.lm-n{font-size:.41rem;color:var(--text3)}
.lm-bar{height:3px;background:var(--bg4);border-radius:2px;margin-top:.16rem;overflow:hidden}
.lm-fill{height:3px;border-radius:2px;background:var(--orange)}

/* Wetter */
.wx-days{display:grid;grid-template-columns:repeat(4,1fr);gap:.42rem}
.wx-day{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.5rem .52rem;text-align:center}
.wx-dn{font-size:.48rem;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.12rem}
.wx-ico{font-size:1.3rem;line-height:1;margin-bottom:.1rem}
.wx-tmp{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600}
.wx-rain{font-size:.46rem;color:var(--blue);margin-top:.08rem;min-height:.6rem}
.wx-desc{font-size:.46rem;color:var(--text3);margin-top:.08rem}

/* Error */
#err-bar{display:none;position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  background:#7f1d1d;border:1px solid var(--red);border-radius:var(--r-sm);
  padding:.42rem .9rem;font-size:.7rem;color:#fca5a5;z-index:999;
  max-width:calc(100vw - 2rem);text-align:center}

/* Responsive Tablet */
@media(max-width:900px){
  .g4{grid-template-columns:1fr 1fr}.c2{grid-template-columns:1fr}
  .fc-days{grid-template-columns:repeat(4,1fr)}.wx-days{grid-template-columns:1fr 1fr}
  .lm-grid{grid-template-columns:repeat(4,1fr)}
}
/* Responsive Mobile */
@media(max-width:600px){
  main{padding:.58rem .75rem}
  .tab-pane.active{gap:.55rem}
  .flow{grid-template-columns:1fr;gap:.42rem}
  .flow-mid{flex-direction:row;justify-content:center}
  .farr-sep{width:18px;height:1px}
  .g3,.g4,.stats{grid-template-columns:1fr 1fr}
  .c2{grid-template-columns:1fr}
  .ev-wrap{grid-template-columns:1fr;justify-items:center}
  .fc-days{grid-template-columns:repeat(2,1fr)}
  .lm-grid{grid-template-columns:repeat(3,1fr)}
  .wx-days{grid-template-columns:1fr 1fr}
  .nav{flex-wrap:wrap;gap:.3rem}
  .nav-lbl{order:-1;width:100%;text-align:center}
  #hd-wx{display:none}
  .fn-val{font-size:1.25rem}.kpi-val{font-size:1.12rem}.stat-val{font-size:1.15rem}
  .fc-nav{flex-direction:column;gap:.35rem;align-items:flex-start}
  .fc-kpis{width:100%;justify-content:space-between}
}
@media(max-width:380px){
  .g3,.g4,.stats{grid-template-columns:1fr}.fc-days{grid-template-columns:1fr 1fr}
  .lm-grid{grid-template-columns:repeat(2,1fr)}
}