:root{
  --bg:#eceef1;
  --card:#ffffff;
  --ink:#1b1c20;
  --muted:#8c919c;
  --line:#eef0f3;
  --gold1:#ffce5c;
  --gold2:#f59300;
  --green:#2bb673;
  --blue:#3b82f6;
  --dark:#1b1c20;
  --r-card:22px;
  --r-tile:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-text-size-adjust:100%;}
.app{max-width:460px;margin:0 auto;padding:10px 16px calc(24px + env(safe-area-inset-bottom));}
h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.2px;}
.muted{color:var(--muted);font-size:12.5px;margin:3px 0 0;}
b{font-weight:800;}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 4px 16px;padding-top:calc(12px + env(safe-area-inset-top));}
.brand{display:flex;align-items:center;gap:11px;}
.brand-logo{width:40px;height:40px;display:block;filter:drop-shadow(0 3px 8px rgba(245,147,0,.28));}
.brand-name{font-size:21px;font-weight:900;letter-spacing:-.3px;}
.brand-sub{font-size:12px;color:var(--muted);margin-top:-1px;}
.pill{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--green);
  background:#fff;padding:7px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(30,30,50,.06);}
.pill-dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.pill.stale{color:var(--gold2);} .pill.error{color:#e2563e;} .pill.unknown{color:var(--muted);}

/* Cards */
.card{background:var(--card);border-radius:var(--r-card);padding:18px;margin-bottom:14px;
  box-shadow:0 10px 30px rgba(28,30,45,.06);}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;}

/* Aktuelle Leistung – 2x2 */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.ptile{background:#f6f7f9;border-radius:var(--r-tile);padding:15px 16px;display:flex;flex-direction:column;gap:12px;min-height:96px;justify-content:space-between;}
.pt-label{font-size:13px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px;}
.pt-val{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1;}
.pt-val i{font-size:14px;font-weight:700;color:var(--muted);font-style:normal;margin-left:3px;}
.ptile.hl{background:var(--dark);}
.ptile.hl .pt-label{color:#9a9ca6;}
.ptile.hl .pt-val{background:linear-gradient(120deg,#ffe08a,#f59300);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ptile.hl .pt-val i{-webkit-text-fill-color:#8d8f99;}
.mini-tag{font-size:11px;font-weight:800;color:var(--gold2);background:rgba(245,147,0,.12);padding:2px 7px;border-radius:999px;}
.ptile.hl .mini-tag{color:var(--gold1);background:rgba(255,206,92,.16);}

/* Tabs */
.tabs{display:flex;gap:3px;background:#f1f2f5;padding:4px;border-radius:999px;}
.tabs button{border:none;background:transparent;color:var(--muted);font-weight:800;font-size:12px;
  padding:7px 11px;border-radius:999px;cursor:pointer;transition:.15s;font-family:inherit;}
.tabs button.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(30,30,50,.1);}

/* Verlauf */
.big-num{font-size:42px;font-weight:900;letter-spacing:-1.5px;line-height:1;
  background:linear-gradient(120deg,#ffb43c,#f59300);-webkit-background-clip:text;background-clip:text;color:transparent;}
.big-num i{font-size:15px;font-weight:700;color:var(--muted);font-style:normal;margin-left:8px;-webkit-text-fill-color:var(--muted);}
.chart-wrap{margin-top:14px;}
.chart{width:100%;height:auto;display:block;overflow:visible;}
.bar-r{fill:url(#barGrad);}
.bar-r.dim{fill:#e7e9ed;}
.bar-label{fill:var(--muted);font-size:9px;text-anchor:middle;font-weight:700;}
.bar-val{fill:#c98a12;font-size:8.5px;text-anchor:middle;font-weight:800;}

/* Verbrauch gedeckt */
.split{display:flex;flex-direction:column;gap:14px;}
.split-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);font-weight:700;margin-bottom:7px;}
.split-line b{color:var(--ink);}
.split-line span{display:flex;align-items:center;}
.bar{height:11px;background:#f1f2f5;border-radius:999px;overflow:hidden;}
.bar-fill{height:100%;border-radius:999px;width:0;transition:width .6s ease;}
.f-solar{background:linear-gradient(90deg,var(--gold1),var(--gold2));}
.f-grid{background:#cfd3da;}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;}
.d-solar{background:var(--gold2);} .d-grid{background:#cfd3da;}
.d-green{background:var(--green);} .d-red{background:#e2563e;} .d-blue{background:var(--blue);}

/* Dein Beitrag – Ringe */
.rings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.ring-item{display:flex;flex-direction:column;align-items:center;gap:9px;}
.ring-box{position:relative;width:72px;height:72px;}
.ring-box svg{width:72px;height:72px;transform:rotate(-90deg);}
.rb{fill:none;stroke:#f0f1f4;stroke-width:7;}
.rf{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:188;stroke-dashoffset:188;transition:stroke-dashoffset .7s ease;}
.rf-gold{stroke:var(--gold2);} .rf-green{stroke:var(--green);} .rf-blue{stroke:var(--blue);}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-mid b{font-size:18px;font-weight:900;letter-spacing:-.5px;}
.ring-mid small{font-size:9px;color:var(--muted);font-weight:700;margin-top:1px;}
.ring-cap{font-size:11.5px;color:var(--muted);font-weight:700;text-align:center;}

/* Footer + Details */
.foot{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 0;color:var(--muted);font-size:12px;}
.link-btn{background:none;border:none;color:var(--muted);font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;font-family:inherit;}
.details{display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 6px 0;color:var(--muted);font-size:12px;}
.details b{color:var(--ink);margin-left:5px;}

@media(max-width:360px){.pt-val{font-size:25px;}.big-num{font-size:36px;}}