:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#eef4ff;background:#0c121b;line-height:1.45;--panel:#172131;--line:#34445a;--muted:#a9b6c8;--accent:#62b5ff;--ok:#54d398;--bad:#ff7b7b}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#17263b 0,#0c121b 48%);color:#eef4ff}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 18px;padding:22px clamp(18px,4vw,52px);border-bottom:1px solid var(--line);background:rgba(12,18,27,.88)}h1,h2,h3,p{margin-top:0}.topbar h1{margin-bottom:2px}.topbar p,.muted{color:var(--muted);margin-bottom:0}.topbar a,.toolbar a{color:#07101b;background:var(--accent);font-weight:800;text-decoration:none;padding:10px 15px;border-radius:9px}main{width:94vw;width:min(1180px,94vw);margin:28px auto 60px}.toolbar,.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}.toolbar label{font-weight:800}select,input,button{font:inherit;border-radius:9px;border:1px solid #586b85;padding:9px 11px;background:#0d1520;color:#fff}button{cursor:pointer;background:var(--accent);color:#07101b;font-weight:850;border:0}button:disabled{cursor:wait;opacity:.65}.badge{padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}.badge.ok{color:#06170f;background:var(--ok);border-color:var(--ok)}.badge.bad{color:#260707;background:var(--bad);border-color:var(--bad)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.card{background:linear-gradient(145deg,#192638,#131c29);border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:0 16px 40px rgba(0,0,0,.2)}button.card{color:inherit;text-align:left;width:100%}.card:hover{border-color:var(--accent)}.card h2,.card h3{margin-bottom:5px}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px}.metric{padding:10px;border-radius:9px;background:#0d1520}.metric b{display:block;color:var(--muted);font-size:.8rem}.metric span{font-size:1.1rem;font-weight:800}.empty{color:var(--muted);padding:24px;border:1px dashed var(--line);border-radius:12px}.bad-text{color:var(--bad)}dialog:not([open]){display:none}dialog{width:94vw;width:min(1050px,94vw);max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:16px;background:#111a27;color:#eef4ff;padding:20px}dialog::backdrop{background:rgba(2,6,12,.78)}html.dialog-open,html.dialog-open body{overflow:hidden}dialog.dialog-fallback[open]{display:block;position:fixed;z-index:1000;top:4vh;right:3vw;bottom:4vh;left:3vw;margin:auto}.dialog-head{display:flex;justify-content:space-between;gap:16px}.dialog-head button{font-size:1.6rem;padding:2px 12px;align-self:flex-start}.history-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:16px 0}.range-field{display:grid;gap:5px;color:var(--muted);font-weight:700}.range-field input{width:110px}.series-picker{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:12px 0}.series-picker>legend{padding:0 6px;color:var(--muted);font-weight:700}.legend{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0}.series-toggle{display:flex;align-items:center;gap:7px;min-height:40px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#0d1520;cursor:pointer}.series-toggle input{width:18px;height:18px;margin:0;accent-color:var(--color)}.series-toggle span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--color);margin-right:6px}.chart-wrap{width:100%;min-width:0}.chart-wrap canvas{display:block;width:100%;background:#fff;border-radius:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.settings-card{margin:16px 0}.field{display:grid;gap:6px;margin:10px 0}.sensor,.recipient{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}.recipient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.node-checks{display:flex;flex-wrap:wrap;gap:9px}.node-checks label{background:#0d1520;padding:7px 9px;border-radius:8px}.actions{position:sticky;bottom:0;padding:14px;background:rgba(12,18,27,.94);border-top:1px solid var(--line)}.login-page{display:grid;place-items:center}.login-shell{width:92vw;width:min(460px,92vw);margin:0}.login-card{display:grid;gap:12px}.login-card button{margin-top:8px}.topbar nav{display:flex;align-items:center;gap:10px}.logout{padding:10px 15px}.password-card{margin-top:28px;max-width:680px}.password-card #passwordMessage{margin-left:10px}@media(max-width:650px){.topbar{align-items:flex-start;flex-direction:column;padding:16px}.topbar nav{width:100%;justify-content:space-between}.topbar h1{font-size:1.45rem}.toolbar{align-items:stretch;flex-direction:column}.toolbar select,.toolbar .badge{width:100%}main{width:calc(100% - 24px);margin:18px auto 40px}.grid{grid-template-columns:1fr}.card{padding:15px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}dialog{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:14px}dialog.dialog-fallback[open]{top:0;right:0;bottom:0;left:0}.dialog-head{position:sticky;top:-14px;z-index:2;background:#111a27;padding:10px 0}.dialog-head h2{font-size:1.25rem;margin-bottom:3px}.history-controls{display:grid;grid-template-columns:minmax(90px,1fr) minmax(115px,1fr);align-items:end}.history-controls button{grid-column:1/-1;min-height:44px}.range-field input,.range-field select{width:100%}.series-picker{padding:7px}.legend{display:grid;grid-template-columns:1fr}.series-toggle{width:100%}.chart-wrap{margin-top:8px}.metric span{font-size:1rem}}@media(max-width:380px){.metrics{grid-template-columns:1fr}}
.language-picker{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.85rem;font-weight:700}.language-picker select{min-width:112px;padding:8px}.login-card>.language-picker{justify-self:end}.topbar nav{flex-wrap:wrap}@media(max-width:650px){.topbar nav .language-picker{width:100%;justify-content:space-between}.topbar nav .language-picker select{flex:1}.login-card>.language-picker{justify-self:stretch;justify-content:space-between}.login-card>.language-picker select{flex:1}}
.history-controls input[type="datetime-local"]{width:220px}@media(max-width:650px){.history-controls input[type="datetime-local"]{width:100%}}
.quick-ranges{display:flex;gap:8px;flex-basis:100%;flex-wrap:wrap}.quick-ranges .secondary{background:#25364b;color:#eef4ff;border:1px solid #586b85}@media(max-width:650px){.quick-ranges{display:grid;grid-template-columns:1fr 1fr}.quick-ranges .secondary{min-height:44px}.quick-ranges #rangeLastJump{grid-column:1/-1}}
:root{--background:#0c121b}.topbar{background:var(--panel)}body{background:radial-gradient(circle at top,var(--panel) 0,var(--background) 52%)}.card{background:var(--panel)}.metric{display:flex;align-items:center;gap:11px}.metric-icon{font-size:1.65rem;line-height:1;flex:0 0 auto}.metric>div{min-width:0}.gateway-build{font-size:.78rem;opacity:.78;margin-top:3px!important}
.settings-tabs{display:flex;gap:8px;margin:18px 0;border-bottom:1px solid var(--line);padding-bottom:8px}.settings-tab{background:#25364b;color:#eef4ff;border:1px solid #586b85}.settings-tab.active{background:var(--accent);color:#07101b;border-color:var(--accent)}[data-settings-panel][hidden]{display:none!important}@media(max-width:650px){.settings-tabs{display:grid;grid-template-columns:1fr 1fr}.settings-tab{min-height:46px}}
:root{color-scheme:dark;--text:#eef4ff;--input:#0d1520;--surface:#111a27;--secondary:#25364b;--shadow:rgba(0,0,0,.22)}html[data-theme=light]{color-scheme:light;--background:#eef3f8!important;--panel:#fff!important;--text:#172033;--muted:#5f6f82;--line:#c8d3df;--input:#f7f9fc;--surface:#fff;--secondary:#e3ebf4;--shadow:rgba(42,59,79,.13)}body{color:var(--text)}select,input{background:var(--input);color:var(--text);border-color:var(--line)}.card,dialog{color:var(--text);box-shadow:0 16px 40px var(--shadow)}dialog{background:var(--surface)}.metric,.series-toggle,.node-checks label{background:var(--input)}.quick-ranges .secondary,.settings-tab{background:var(--secondary);color:var(--text);border-color:var(--line)}.actions{background:color-mix(in srgb,var(--surface) 94%,transparent)}.theme-toggle{display:inline-grid;place-items:center;width:42px;height:42px;min-width:42px;padding:0;border:1px solid var(--line);background:var(--secondary);color:var(--text);font-size:1.15rem}.dialog-head-actions{display:flex;align-items:flex-start;gap:8px}.dialog-head-actions .theme-toggle{font-size:1rem}.login-options{display:flex;align-items:center;justify-content:space-between;gap:12px}.login-options .language-picker{margin-left:auto}.chart-wrap{margin:10px 0 16px}.series-picker{margin-top:16px}
.card[tabindex]{cursor:pointer}.io-toggle{display:block;margin-top:8px;padding:6px 9px;font-size:.82rem;background:var(--accent);color:#07101b}.io-toggle.active{background:var(--bad);color:#260707}.metric .io-toggle{font-size:.82rem}
@media(max-width:650px){dialog{padding:12px}.dialog-head{top:-12px;background:var(--surface);padding:8px 0 10px}.dialog-head>div:first-child{min-width:0}.dialog-head h2{font-size:1.2rem}.dialog-head p{font-size:.82rem;line-height:1.35}.dialog-head button{padding:0}.dialog-head-actions .theme-toggle{width:38px;height:38px;min-width:38px}.dialog-head-actions #closeDialog{width:42px;height:42px;min-width:42px;font-size:1.45rem}.history-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 8px;margin:10px 0 12px}.quick-ranges{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.quick-ranges #rangeLastJump{grid-column:auto}.history-controls .quick-ranges button{grid-column:auto;min-height:38px;padding:6px 5px;font-size:.72rem;line-height:1.16}.range-field{min-width:0;gap:3px}.range-field span{font-size:.76rem}.history-controls input[type="datetime-local"]{width:100%;min-width:0;padding:8px 5px;font-size:.78rem}.history-controls #applyRange{grid-column:1/-1;justify-self:end;width:auto;min-height:38px;padding:7px 22px;font-size:.86rem}.chart-wrap{margin:4px 0 14px}.series-picker{padding:6px;margin:14px 0 6px}.series-picker>legend{font-size:.82rem}.legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.series-toggle{min-width:0;min-height:38px;padding:6px 7px;font-size:.76rem}.series-toggle input{width:17px;height:17px;flex:0 0 auto}.series-toggle span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.series-toggle span::before{width:8px;height:8px;margin-right:4px}.topbar nav .theme-toggle{width:40px;min-width:40px}.login-options{align-items:flex-end}}@media(max-width:380px){.history-controls .quick-ranges button{font-size:.66rem}.history-controls input[type="datetime-local"]{font-size:.72rem}.legend{grid-template-columns:1fr}}textarea{font:inherit;border-radius:9px;border:1px solid var(--line);padding:9px 11px;background:var(--input);color:var(--text);min-height:82px;resize:vertical}

/* Installierbare Smartphone-/Tablet-Web-App */
[hidden]{display:none!important}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100dvh;overscroll-behavior-y:none}button,a,select,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 72%,white);outline-offset:2px}.pwa-install{background:var(--secondary);color:var(--text);border:1px solid var(--line);white-space:nowrap}.pwa-install-dialog{width:min(440px,calc(100vw - 28px));height:auto;max-height:calc(100dvh - 28px);padding:22px}.pwa-install-dialog h2{margin-bottom:10px}.pwa-install-dialog p{color:var(--muted);font-size:1rem}.pwa-dialog-actions{display:flex;justify-content:flex-end;margin-top:18px}.pwa-network-state{position:fixed;z-index:50;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 28px);padding:10px 14px;border-radius:999px;background:var(--bad);color:#260707;font-weight:800;box-shadow:0 8px 30px var(--shadow);text-align:center}
@media(hover:none) and (pointer:coarse){button,.topbar a,.toolbar a{min-height:44px}select,input{min-height:44px}}
@media(min-width:651px) and (max-width:1024px){.topbar{padding:18px 24px;align-items:flex-start}.topbar nav{justify-content:flex-end;max-width:60%}main{width:calc(100% - 40px);margin-top:22px}.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
@media(max-width:650px){.topbar{padding-top:max(16px,env(safe-area-inset-top));padding-right:max(16px,env(safe-area-inset-right));padding-left:max(16px,env(safe-area-inset-left))}.topbar nav a,.topbar nav .logout{flex:1;text-align:center}.topbar nav .pwa-install:not([hidden]){flex:1}.login-shell{padding-top:max(12px,env(safe-area-inset-top));padding-right:env(safe-area-inset-right);padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:env(safe-area-inset-left)}main{padding-right:env(safe-area-inset-right);padding-bottom:max(30px,env(safe-area-inset-bottom));padding-left:env(safe-area-inset-left)}dialog{padding-top:max(12px,env(safe-area-inset-top));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left))}.history-controls input[type="datetime-local"]{font-size:16px}.pwa-install-dialog{height:auto;margin:auto;padding:20px}}
@media(display-mode:standalone){.topbar{padding-top:max(22px,env(safe-area-inset-top))}.login-page{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}