:root{color-scheme:dark;--bg:#0e161e;--card:#182430;--border:#2c3e4f;--text:#e8f0f7;--muted:#9fb0bf;--accent:#ffca62}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px system-ui,sans-serif}button,select{font:inherit;color:inherit;background:#223342;border:1px solid #3c5267;border-radius:9px;padding:10px 14px;cursor:pointer}button:hover,select:hover{border-color:var(--accent)}button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.45;cursor:default}header{display:flex;align-items:center;gap:20px;max-width:1500px;margin:auto;padding:25px 28px;border-bottom:1px solid var(--border)}.menu-button{font-size:26px;padding:4px 14px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;color:var(--muted)}h1{font-size:23px;margin:4px 0 0}h2{font-size:27px;margin:6px 0}h3{font-size:18px;margin:0}h4{font-size:18px;margin:20px 0 6px}.view-label{margin-left:auto;color:var(--accent)}main{max-width:1500px;margin:auto;padding:0 28px}.statusbar{display:flex;justify-content:space-between;gap:12px;padding:20px 0;color:var(--muted);font-size:13px}.intro{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:22px 0}.badge{font-size:12px;border:1px solid #655533;background:#342b1b;color:var(--accent);border-radius:30px;padding:8px 13px}.devices{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1.25fr);align-items:stretch}.device{min-width:0;background:var(--card);border:1px solid var(--border);padding:22px;border-radius:16px}.card-label{display:flex;align-items:center;gap:12px}.number{color:var(--accent);font-size:12px;border:1px solid #5b5136;padding:6px;border-radius:7px}.spec{color:var(--muted);font-size:13px;min-height:38px;margin:0}.picture{height:245px;display:flex;justify-content:center;align-items:center;margin:16px 0}.picture>img{height:100%;width:100%;object-fit:contain}.battery-pictures{gap:5px}.battery-pictures figure{width:50%;margin:0;text-align:center}.battery-pictures img{width:100%;height:160px;object-fit:contain}.battery-pictures figcaption{font-size:12px;color:var(--muted);margin-top:10px}.planned img{opacity:.4}.planned figcaption{color:var(--accent)}.flow{display:flex;align-items:center;justify-content:center;color:#7993a6;font-size:23px}.primary{padding:17px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}.primary>span{font-size:13px;color:var(--muted)}.primary strong{font-size:27px;color:var(--accent);white-space:nowrap}dl{margin:0}dl>div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-top:1px solid var(--border)}dt{color:var(--muted);font-size:13px}dd{margin:0;text-align:right;font-size:13px}details{margin-top:18px}summary{cursor:pointer;color:var(--muted);font-size:13px;padding:8px 0}details dl{margin-top:10px}.small{font-size:12px;line-height:1.7;color:var(--muted)}.lower-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}.tile{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:22px}.tile h3{font-size:16px;margin:10px 0}.tile strong{font-size:29px;color:#8edacb}.tile p{font-size:12px;color:var(--muted);margin-bottom:0}.future{border:1px dashed #4e5b64;padding:12px 20px;border-radius:12px;margin-bottom:22px}.future p{color:var(--muted)}footer{margin-top:35px;border-top:1px solid var(--border);padding:20px 0 30px;color:var(--muted);font-size:12px}dialog{position:fixed;inset:0 auto 0 0;margin:0;width:320px;max-width:90vw;height:100dvh;max-height:100dvh;border:0;border-right:1px solid var(--border);padding:25px;background:#16222e;color:var(--text)}dialog::backdrop{background:#0009}.menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}.menu-head button{background:transparent}nav{display:grid;gap:8px;margin:12px 0 30px}nav button{text-align:left;background:transparent;border-color:transparent}nav button.active{background:#2c3a40;border-color:#766139;color:var(--accent)}nav small{display:block;color:var(--muted);margin-top:5px}.menu-note{font-size:12px;color:var(--muted);line-height:1.7}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:25px 0}label{color:var(--muted)}select{margin-left:10px}.charts{display:grid;gap:20px}.charts article{background:var(--card);border:1px solid var(--border);padding:22px;border-radius:14px}.charts h3 span{color:var(--muted);font-weight:400;font-size:13px}canvas{display:block;width:100%;height:250px;margin-top:15px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:14px;white-space:nowrap}th,td{padding:16px;text-align:right;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:500}th:first-child,td:first-child{text-align:left}[hidden]{display:none!important}@media(min-width:1450px){.picture{height:280px}.battery-pictures img{height:180px}}@media(max-width:1000px){.devices{grid-template-columns:1fr}.flow{height:35px;transform:rotate(90deg)}.picture{height:220px}.spec{min-height:0}.battery-pictures{max-width:600px;margin:auto}.battery-pictures img{height:190px}.lower-grid{grid-template-columns:1fr}.statusbar{flex-direction:column}.intro{align-items:flex-start;flex-direction:column}}@media(max-width:550px){main{padding:0 14px}header{padding:18px 14px;gap:12px}h1{font-size:19px}h2{font-size:23px}.view-label{font-size:12px}.device{padding:18px}.toolbar{align-items:flex-start;flex-direction:column}select{margin-left:0}.primary strong{font-size:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Kompakte Solarübersicht */
@media (min-width:1001px) {
  header { padding:12px 24px; gap:14px }
  h1 { font-size:20px }
  main { padding:0 24px }
  .statusbar { padding:10px 0; font-size:12px }
  .intro { margin:10px 0 }
  h2 { font-size:21px; margin:3px 0 }
  .device { padding:14px }
  .card-label { gap:9px }
  .card-label h3 { font-size:16px }
  h4 { font-size:16px; margin:10px 0 4px }
  .spec { font-size:12px; min-height:30px }
  .picture { height:clamp(95px,16vh,155px); margin:8px 0 }
  .battery-pictures img { height:110px }
  .battery-pictures figcaption { margin-top:3px; font-size:11px }
  .primary { padding:9px 0 }
  .primary strong { font-size:23px }
  dl>div { padding:7px 0 }
  dt, dd { font-size:12px }
  .device details { margin-top:7px }
  summary { padding:5px 0; font-size:12px }
  .small { font-size:11px; line-height:1.45 }
  .device .small { margin:8px 0 0 }
  .lower-grid { gap:12px; margin:12px 0 }
  .tile { padding:12px 16px }
  .tile h3 { font-size:14px; margin:5px 0 }
  .tile strong { font-size:24px }
  .tile p { margin-top:4px }
  .future { padding:5px 14px; margin:8px 0 }
  footer { margin-top:12px; padding:10px 0; font-size:11px }
}
@media (min-width:1001px) and (max-height:850px) {
  .picture { height:95px }
  .battery-pictures img { height:75px }
  .device { padding:11px }
  .spec { min-height:26px }
  .primary { padding:7px 0 }
  dl>div { padding:5px 0 }
}
/* Gleich breite Solarboxen */
@media (min-width:1001px) {
  .devices {
    position:relative;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
  }
  .devices > .flow {
    position:absolute;
    top:50%;
    width:24px;
    height:30px;
    transform:translateY(-50%);
    pointer-events:none;
  }
  .devices > .flow:nth-child(2) {
    left:calc((100% - 48px) / 3);
  }
  .devices > .flow:nth-child(4) {
    left:calc((200% - 96px) / 3 + 24px);
  }
  .lower-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
  }
  .device, .tile { min-width:0 }
  h4, .spec, .small, dt, dd {
    overflow-wrap:anywhere;
  }
}

/* Antippbare Batterieinfos */
.solar-info-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0;
  margin:-10px 0 -10px 3px;
  vertical-align:middle;
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:20px;
}
dialog.solar-info-dialog {
  inset:0;
  margin:auto;
  width:min(440px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  height:fit-content;
  max-height:80dvh;
  overflow:auto;
  padding:24px;
  border:1px solid var(--border);
  border-radius:16px;
}
.solar-info-dialog h2 {
  margin:0 0 14px;
  font-size:20px;
}
.solar-info-dialog p {
  line-height:1.65;
  color:var(--muted);
}
.solar-info-dialog > button {
  min-height:44px;
  margin-top:10px;
}