:root{--bg:#f6f7f9;--card:#fff;--fg:#1d2330;--muted:#667085;--line:#e3e6eb;--accent:#2563eb;--warn:#b45309;--warnbg:#fff7e6;--ok:#15803d;--danger:#b91c1c}
@media (prefers-color-scheme:dark){:root{--bg:#12151b;--card:#1b2029;--fg:#e6e8ec;--muted:#98a2b3;--line:#2c3340;--accent:#60a5fa;--warn:#fbbf24;--warnbg:#2b2312;--ok:#4ade80;--danger:#f87171}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
header{background:var(--card);border-bottom:1px solid var(--line)}
header nav{max-width:1100px;margin:auto;padding:12px 16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header nav a{color:var(--fg);text-decoration:none}
header nav a.brand{font-weight:700;margin-right:auto}
main{max-width:1100px;margin:auto;padding:20px 16px 60px}
h1{font-size:1.5rem;margin:.2em 0 .8em}h2{font-size:1.15rem;margin:1.6em 0 .6em}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.82rem;color:var(--muted);font-weight:600}
td.r,th.r{text-align:right;white-space:nowrap}
.scroll{overflow-x:auto}
label{display:block;font-size:.85rem;color:var(--muted);margin:10px 0 3px}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--fg);font:inherit}
textarea{min-height:70px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.btn,button{display:inline-block;padding:8px 14px;border-radius:7px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;cursor:pointer;text-decoration:none;margin:4px 6px 4px 0}
.btn.sec,button.sec{background:transparent;color:var(--accent)}
button.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.msg{background:var(--card);border-left:4px solid var(--accent);padding:10px 14px;border-radius:6px;margin-bottom:16px}
.warn{background:var(--warnbg);border-left:4px solid var(--warn);padding:10px 14px;border-radius:6px;margin-bottom:8px}
.muted{color:var(--muted);font-size:.88rem}
.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.78rem;border:1px solid var(--line)}
.badge.final{border-color:var(--ok);color:var(--ok)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi>div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px}
.kpi>div b{display:block;font-size:1.25rem}
.kpi>div>span{color:var(--muted);font-size:.82rem}
.check{display:flex;gap:8px;align-items:center;margin:10px 0}
.check input{width:auto}
code{font-size:.85em}
dialog.picker{width:min(760px,96vw);max-height:86vh;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);padding:0}
dialog.picker::backdrop{background:rgba(0,0,0,.45)}
.picker-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.picker-filter{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:10px 16px}
.picker-filter .check{margin:0;white-space:nowrap}
@media (max-width:640px){.picker-filter{grid-template-columns:1fr 1fr}}
.picker-list{overflow:auto;max-height:60vh;padding:0 16px 16px}
.picker-list tr{cursor:pointer}.picker-list tr:hover{background:var(--bg)}
.pick-btn{font-size:.82rem;padding:4px 10px;margin-top:4px}
h3{font-size:.95rem;margin:1.2em 0 .2em;color:var(--muted)}
.phase-box{display:grid;gap:6px}
.phase-box .phase-mode{width:auto;max-width:260px;font-size:.88rem;padding:5px 8px}
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:640px){.phase-grid{grid-template-columns:1fr}}
.phase-label{font-size:.78rem;color:var(--muted);display:block}
.meter-row{border:1px dashed var(--line);border-radius:8px;padding:8px 10px;margin:6px 0;display:grid;gap:4px}
.meter-row .meter-head{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted)}
[hidden]{display:none !important}
.hint-box{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;font-size:.9rem}
p.hint{margin:4px 0 2px;font-size:.84rem}
.picker-sources{display:grid;gap:10px;padding:14px 16px 18px}
.src-tile{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;margin:0;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}
.src-tile:hover:not([disabled]){border-color:var(--accent)}
.src-tile.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.src-tile[disabled]{opacity:.55;cursor:not-allowed}
.src-icon{font-size:1.6rem;line-height:1}
.src-count{font-size:.8rem;color:var(--accent)}
.src-hint{font-size:.8rem;color:var(--warn);display:block}
.picker-list tr.selected{background:var(--bg)}
.picker-filter{grid-template-columns:minmax(160px,2fr) minmax(140px,1fr) auto auto}
@media (max-width:640px){.picker-filter{grid-template-columns:1fr 1fr}}
.src-chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
.src-chip{font-size:.78rem;padding:1px 8px;border-radius:99px;border:1px solid var(--line);background:var(--bg)}
.src-chip b{font-weight:600}
.src-chip.src-ha{border-color:#0ea5e9}.src-chip.src-victron{border-color:#2563eb}.src-chip.src-vrm{border-color:#9333ea}

footer.ver { text-align: center; font-size: 11px; color: #9ca3af; padding: 12px 0 18px }
#native code { overflow-wrap: anywhere }
img.logo { width: 22px; height: 22px; vertical-align: -4px; margin-right: 4px }
.auth-box { max-width: 420px; margin: 6vh auto 0 }
.auth-box h1 { text-align: center }
.auth-box .logo-big { display: block; width: 64px; height: 64px; margin: 0 auto 10px }
.links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: .9rem }

/* ---- Navigation, mobil als Ausklappmenü ---- */
header{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top)}
.nav-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav-links a.who{color:var(--muted)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);padding:8px 9px;margin:0;border-radius:8px}
.menu-toggle span{display:block;width:20px;height:2px;margin:4px 0;background:var(--fg);border-radius:2px;transition:.2s}
nav.open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.open .menu-toggle span:nth-child(2){opacity:0}
nav.open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  header nav{gap:10px}
  .menu-toggle{display:block}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 6px}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:11px 4px;border-top:1px solid var(--line)}
}
/* ---- App-Seite ---- */
.app-hero{display:flex;gap:16px;align-items:center}
.app-hero img{border-radius:16px;flex:none}
.status-list{list-style:none;padding:0;margin:0 0 8px}
.status-list li{padding:4px 0}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 16px}
.grid-cards ol{padding-left:20px;margin:0}
/* ---- allgemein responsiv ---- */
img,svg{max-width:100%}
.card{overflow-wrap:anywhere}
.card table{overflow-wrap:normal}
main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));
     padding-bottom:max(60px,env(safe-area-inset-bottom))}
@media (max-width:600px){
  body{font-size:15px}
  h1{font-size:1.3rem}
  .card{padding:14px 12px}
  th,td{padding:6px 6px}
  .grid{grid-template-columns:1fr}
  .btn,button{padding:10px 14px}
  input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{font-size:16px} /* kein Auto-Zoom auf iOS */
}
html.standalone footer.ver{padding-bottom:max(18px,env(safe-area-inset-bottom))}
.inline-test{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline-test>div{flex:1 1 220px}