/* Huis Wiltink — warm-cream design, goedgekeurd via de mockup van 31-8 */
:root{
  --ground:#F7EFE4; --ground2:#F1E5D3; --card:#FFFFFF; --card-soft:#FBF7F0;
  --ink:#2B2118; --ink2:#8A7A6B; --line:#EDE2D2;
  --coral:#F26B4E; --coral-deep:#D84E31; --teal:#2AA791; --amber:#E9A13B; --amber-chart:#E39412;
  --cocoa:#7A4A32; --blue:#5B7FD9;
  --good:#2AA791; --warn:#C77E10;
  --r-card:22px; --r-tile:16px;
  --shadow:0 10px 28px rgba(122,74,50,.10), 0 2px 6px rgba(122,74,50,.06);
  --font:"Poppins","Segoe UI",system-ui,sans-serif;
}
html{box-sizing:border-box} *,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14.5px;line-height:1.45}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

/* ── verbind-scherm ── */
.verbind{position:fixed;inset:0;background:var(--ground);display:grid;place-items:center;z-index:50;padding:20px}
.verbind-kaart{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:30px 28px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px}
.verbind-kaart h1{font-weight:700;font-size:26px;margin:0}
.verbind-kaart p{margin:0;color:var(--ink2)}
.verbind-kaart label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px}
.verbind-kaart input{font:inherit;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card-soft)}
.verbind-kaart input:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent}
.verbind-kaart small{color:var(--ink2)}
.verbind-kaart button{background:var(--coral);color:#fff;font-weight:700;border-radius:999px;padding:11px;
  box-shadow:0 8px 18px rgba(242,107,78,.35)}
.verbind-kaart button:disabled{opacity:.6}
.verbind-fout{background:#FBE7E1;color:#A03A22;border-radius:12px;padding:10px 12px;font-size:13px}

/* ── raamwerk ── */
.app{display:flex;min-height:100vh}
.side{width:216px;flex:none;background:var(--ground2);display:flex;flex-direction:column;gap:4px;
      padding:22px 14px 18px;border-right:1px solid var(--line);transition:width .25s ease;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 18px;white-space:nowrap}
.zijknop{margin-left:auto;width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
         color:var(--ink2);background:var(--card);box-shadow:0 2px 8px rgba(122,74,50,.12)}
.zijknop svg{width:15px;height:15px;transition:transform .25s ease}
/* ingeklapt: smalle icoonrail */
.zij-dicht .side{width:68px;padding-left:10px;padding-right:10px}
.zij-dicht .brand{padding-left:4px;padding-right:4px;flex-direction:column;gap:12px}
.zij-dicht .brand b,.zij-dicht .nav a span,.zij-dicht .me div{display:none}
.zij-dicht .zijknop{margin-left:0}
.zij-dicht .zijknop svg{transform:rotate(180deg)}
.zij-dicht .nav a{justify-content:center;padding:11px 0}
.zij-dicht .me{justify-content:center;padding-left:0;padding-right:0}

.brand .dots{display:grid;grid-template-columns:8px 8px;gap:3px}
.brand .dots i{width:8px;height:8px;border-radius:50%}
.brand .dots i:nth-child(1){background:var(--coral)}
.brand .dots i:nth-child(2){background:var(--amber)}
.brand .dots i:nth-child(3){background:var(--teal)}
.brand .dots i:nth-child(4){background:var(--blue)}
.brand b{font-weight:700;font-size:16px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink2);
       text-decoration:none;font-weight:500;white-space:nowrap}
.nav a svg{width:19px;height:19px;flex:none}
.nav a.on{background:var(--card);color:var(--ink);box-shadow:0 4px 14px rgba(122,74,50,.10)}
.nav a.on svg{color:var(--coral)}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px}
.ava{width:34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;
     font-weight:700;font-size:15px}
.me small{color:var(--ink2)}
.me small.live{color:var(--good)}
.me small.fout{color:var(--coral-deep)}
.koppelknop{margin-left:auto;width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
            color:var(--ink2);background:var(--card);box-shadow:0 2px 8px rgba(122,74,50,.12)}
.koppelknop svg{width:16px;height:16px}
.zij-dicht .koppelknop{display:none}
/* koppel-dialoog */
.koppel{border:0;border-radius:var(--r-card);box-shadow:0 20px 60px rgba(43,33,24,.3);padding:26px 26px 22px;
        max-width:360px;width:calc(100% - 32px);background:var(--card);color:var(--ink);font-family:var(--font)}
.koppel::backdrop{background:rgba(43,33,24,.45)}
.koppel h2{margin:0 0 8px;font-size:20px;font-weight:700}
.koppel p{margin:0 0 14px;color:var(--ink2);font-size:13.5px}
.koppel .qr{display:grid;place-items:center;background:#fff;border-radius:16px;padding:10px;border:1px solid var(--line)}
.koppel .qr svg{width:100%;max-width:280px;height:auto}
.koppel small{display:block;margin-top:12px;color:var(--ink2);font-size:12px}
.koppel button{margin-top:14px;width:100%;background:var(--coral);color:#fff;font-weight:700;border-radius:999px;padding:10px}

.main{flex:1;min-width:0;padding:28px 34px 44px;max-width:1600px;margin:0 auto;width:100%}   /* groeit mee als de zijbalk inklapt */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:6px}
h1{font-weight:700;font-size:38px;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
.top .date{color:var(--ink2);margin-top:6px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:7px;background:var(--card);border-radius:999px;padding:7px 13px;
       box-shadow:0 3px 10px rgba(122,74,50,.08);font-weight:500;font-variant-numeric:tabular-nums}
.badge svg{width:15px;height:15px;color:var(--ink2)}
.badge b{font-weight:600}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ink2)}
.badge .dot.thuis{background:var(--good)}
.badge em{font-style:normal;color:var(--ink2);font-weight:400}
.knopindeling{cursor:pointer;padding:7px 10px}
.knopindeling svg{color:var(--ink)}
.bewerk .knopindeling{background:var(--coral)}
.bewerk .knopindeling svg{color:#fff}

/* ── pagina's & periodekiezer ── */
.pagina[hidden]{display:none}
.periodekiezer{display:flex;background:var(--card);border-radius:999px;padding:3px;box-shadow:0 3px 10px rgba(122,74,50,.08)}
.periodekiezer button{border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:500;color:var(--ink2)}
.periodekiezer button[aria-selected="true"]{background:var(--coral);color:#fff}
.badge.blader{padding:3px 6px;gap:2px}
.badge.blader button{padding:4px 10px;border-radius:999px;font-weight:600;font-size:13px}
.badge.blader button:hover{background:var(--ground2)}
.elegend{margin:0 0 8px}
.ringen{display:flex;justify-content:space-around;gap:10px;margin-bottom:14px}
.ringitem{display:flex;flex-direction:column;align-items:center;gap:6px}
.ringitem small{font-size:11.5px;color:var(--ink2);font-weight:500}
.ringen .ring{width:96px;height:96px}
.ringen .ring svg{width:96px!important;height:96px!important}
.ringen .mid b{font-size:21px}
.totalen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 14px}
.totalen>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:5px;white-space:nowrap}
.totalen>div b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.node span.dubbel{white-space:pre-line;line-height:1.25}
.totalen.kosten{grid-template-columns:1fr}
.totalen.kosten>div.som{border-bottom:0;border-top:2px solid var(--line);padding-top:7px;margin-top:2px}
.totalen.kosten>div.som b{font-size:16px}
.totalen.kosten>div.min b{color:#177A69}
.totalen.kosten>div span small{color:var(--ink2);font-size:11px;white-space:normal}
.rang{display:flex;flex-direction:column;gap:9px}
.rang .r{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;font-size:13px}
.rang .r .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ground2);color:var(--cocoa)}
.rang .r .ic svg{width:15px;height:15px}
.rang .r b{font-size:13px;display:block}
.rang .r .balk{height:6px;border-radius:99px;background:var(--ground2);margin-top:4px;overflow:hidden}
.rang .r .balk i{display:block;height:100%;border-radius:99px;background:var(--coral)}
.rang .r .kwh{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rang .r.overig .ic{background:transparent;color:var(--ink2)}
.rang .r.overig .balk i{background:var(--ink2);opacity:.5}

/* ── indeling: GridStack ── */
.knop{border-radius:999px;padding:8px 14px;font-weight:600;font-size:13px;background:var(--card);box-shadow:var(--shadow);color:var(--ink)}
.knop.primair{background:var(--coral);color:#fff;box-shadow:0 8px 18px rgba(242,107,78,.35)}
.knop.klein{padding:7px 12px;font-size:12.5px;color:var(--ink2)}
.indelingbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#FCE3D2;color:#7A3A22;border-radius:14px;padding:10px 14px;font-size:13px;margin-top:14px}
.indelingbalk .knoppen{display:flex;gap:8px}
.grid-stack{margin-top:16px}
.grid-stack-item-content{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);padding:0;
  overflow:hidden!important;inset:6px!important}
.gs-kop{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;margin-bottom:10px;user-select:none;flex-wrap:wrap}
.gs-kop>svg{width:17px;height:17px;color:var(--cocoa);opacity:.8;flex:none}
.gs-kop .greep{display:none;color:var(--ink2);font-size:16px;letter-spacing:-2px;line-height:1}
.gs-kop .hb{margin-left:auto;font-size:12px;font-weight:500;color:var(--ink2)}
.gs-widget{display:flex;flex-direction:column;padding:16px 18px}  /* hier wordt de hoogte gemeten (incl. deze marge) */
.gs-inhoud{min-height:0;display:flex;flex-direction:column}
.gs-inhoud.stat{gap:0;min-height:46px}   /* alle vier even hoog: waarde-rij + ruimte voor de accu-balk */
.stat .rij{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.stat .val{font-weight:700;font-size:26px;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.stat .val small{font-size:14px;color:var(--ink2);font-weight:500}
.stat .sub{font-size:12px;color:var(--ink2);text-align:right}   /* rechts, op de basislijn van de W */
/* bewerkmodus */
.bewerk .grid-stack-item-content{outline:2px dashed #F4C4B5;outline-offset:-2px}
.bewerk .gs-kop{cursor:grab}
.bewerk .gs-kop .greep{display:inline}
.grid-stack-item.ui-draggable-dragging .grid-stack-item-content{box-shadow:0 18px 40px rgba(122,74,50,.25)}
.grid-stack-placeholder>.placeholder-content{background:rgba(242,107,78,.12)!important;border:2px dashed var(--coral)!important;border-radius:var(--r-card);inset:6px!important}
.ui-resizable-e{width:12px!important;right:2px!important;cursor:ew-resize;background:linear-gradient(90deg,transparent,rgba(242,107,78,.35))!important;border-radius:0 var(--r-card) var(--r-card) 0}
.ui-resizable-w{width:12px!important;left:2px!important;cursor:ew-resize;background:linear-gradient(270deg,transparent,rgba(242,107,78,.35))!important;border-radius:var(--r-card) 0 0 var(--r-card)}
.ui-resizable-s{height:12px!important;bottom:2px!important;cursor:ns-resize;background:linear-gradient(180deg,transparent,rgba(242,107,78,.35))!important;border-radius:0 0 var(--r-card) var(--r-card)}
.ui-resizable-se,.ui-resizable-sw{width:18px!important;height:18px!important;bottom:6px!important;background:none!important;transform:none!important;
  border-bottom:3px solid var(--coral);border-radius:0 0 6px 6px;opacity:.9}
.ui-resizable-se{right:8px!important;border-right:3px solid var(--coral)}
.ui-resizable-sw{left:8px!important;border-left:3px solid var(--coral)}
.grid-stack:not(.bewerk) .ui-resizable-handle{display:none!important}


.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;
      font-variant-numeric:tabular-nums}
.pill.up{background:#E2F3EF;color:#177A69}
.pill.down{background:#FBE7E1;color:#C0492E}
.pill.flat{background:var(--ground2);color:var(--ink2)}

.stat .val small{font-size:14px;color:var(--ink2);font-weight:500}
.stat .sub{margin-top:5px;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2)}
.meter{height:5px;border-radius:99px;background:var(--ground2);margin-top:9px;overflow:hidden}
.stat .meter{margin-top:10px}
.meter i{display:block;height:100%;border-radius:99px;transition:width .5s ease}

/* energiestroom */
.flow{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:4px 2px 0}  /* iconen op één rij, tekst eronder mag verschillen */
.node{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:70px}
.node .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--card-soft);
          border:2px solid var(--line)}
.node .ic svg{width:20px;height:20px}
.ic-zon{border-color:#F2D6A8!important}.ic-huis{border-color:#F4C4B5!important}
.ic-accu{border-color:#BFE4DC!important}.ic-net{border-color:#C9D4F2!important}
.node b{font-size:13px}
.node span{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
/* richting-regels: pijl-icoon in kleur + woord, getal eronder */
.node .rt{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:3px}
.node .rt em{display:flex;align-items:center;font-style:normal}
.node .rt em svg{width:16px;height:16px;flex:none}
.node .rt em svg.links{transform:rotate(180deg)}
.node .rt b{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;font-weight:400}   /* zelfde stijl als de andere waarden */
.link{flex:1;height:3px;border-radius:3px;min-width:26px;margin-top:20px}   /* op de hartlijn van het 42px-icoon */
.apparaten{display:flex;justify-content:space-between;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.app-node{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px}
.app-node .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ground2);color:var(--cocoa)}
.app-node .ic svg{width:17px;height:17px}
.app-node b{font-size:11.5px;font-weight:600}
.app-node span{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.app-node.uit{opacity:.45}
.app-node.aan .ic{background:#FCE3D2;color:var(--coral-deep)}
.link.l1{background:linear-gradient(90deg,#F2D6A8,#EDD3C6)}
.link.l2{background:linear-gradient(90deg,#EDD3C6,#BFE4DC)}
.link.l3{background:linear-gradient(90deg,#BFE4DC,#C9D4F2)}

/* grafiek */
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
.legend i.dash{width:14px;height:0;border-radius:0;border-top:2px dashed;vertical-align:middle}
.legend small{font-size:11px;opacity:.8}
.chartwrap{position:relative}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#FBF7F0;border-radius:10px;padding:8px 11px;
     font-size:12px;line-height:1.55;opacity:0;transform:translate(-50%,0);white-space:nowrap;
     font-variant-numeric:tabular-nums;box-shadow:0 6px 18px rgba(43,33,24,.35)}
.tip b{font-weight:700}
.tip .r{display:flex;align-items:center;gap:6px}
.tip .r i{width:7px;height:7px;border-radius:50%;display:inline-block}

.gkop{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 12px}
.gkop>div{display:flex;flex-direction:column;min-width:92px}
.gkop b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.gkop b small{font-size:12px;font-weight:600}
.gkop>div>small{font-size:11.5px;color:var(--ink2);margin-top:2px}

/* saldering */
.tabs{display:flex;background:var(--ground2);border-radius:999px;padding:3px}
.tabs button{border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:500;color:var(--ink2)}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(122,74,50,.12)}
/* saldering als rekensom: label + uitleg links, bedrag rechts; twee kolommen als er ruimte is */
.sald{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 28px}
.sald>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.sald .k{min-width:0}
.sald .k b{display:block;font-size:13px;font-weight:600}
.sald .k small{display:block;font-size:11px;color:var(--ink2);line-height:1.3}
.sald .v{font-weight:700;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sald>div.min .v{color:var(--coral-deep)}
.sald>div.plus .v{color:#177A69}
.sald>div.som{border-bottom:2px solid var(--line)}
.sald>div.som .v{font-size:16px}

/* bediening */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;align-items:center;gap:11px;background:var(--card);border-radius:var(--r-tile);
      box-shadow:var(--shadow);padding:12px 13px;text-align:left;min-width:0}
.tile:active{transform:scale(.98)}
.tile .ic{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ground2);color:var(--ink2);transition:background .25s,color .25s}
.tile .ic svg{width:19px;height:19px}
.tile.aan .ic{background:#FCE3D2;color:var(--coral-deep)}
.tile b{display:block;font-size:13.5px}
.tile span{font-size:12px;color:var(--ink2)}
.tile.wide{grid-column:1/-1;display:block}
.tile .row{display:flex;align-items:center;gap:11px}
.rolslider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:26px;margin:11px 0 0;
  border-radius:10px;cursor:pointer;
  /* verticaal vegen = de pagina scrollen; alleen horizontaal slepen verzet het rolluik.
     Zonder dit pakt de slider elke aanraking op en verschuift hij tijdens het scrollen. */
  touch-action:pan-y;
  background:linear-gradient(90deg,#F6C79A,#EFA35F var(--p,0%),var(--ground2) var(--p,0%))}
.rolslider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid var(--cocoa);box-shadow:0 2px 6px rgba(43,33,24,.3)}
.rolslider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid var(--cocoa);box-shadow:0 2px 6px rgba(43,33,24,.3)}
.rolslider:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/* klimaat */
.therm{display:flex;align-items:center;gap:16px}
.therm+.therm{margin-top:14px}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .mid b{font-size:18px;font-weight:700;display:block}
.ring .mid span{font-size:10.5px;color:var(--ink2)}
.therm .info b{display:block;font-size:14px}
.therm .info span{color:var(--ink2);font-size:12.5px}

/* klimaat: thermostaat-dial */
.dial{position:relative;max-width:240px;margin:0 auto}
.dial svg{width:100%;height:auto;display:block;cursor:pointer}
.dial-mid{position:absolute;inset:12% 15% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;
          gap:2px;pointer-events:none;text-align:center}
.dial-mid .stand{font-size:13px;font-weight:600;color:var(--ink2)}
.dial-mid .doel{font-size:38px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.dial-mid .huidig{font-size:11.5px;color:var(--ink2)}
.klim-doel{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:2px}
.klim-doel button{width:40px;height:40px;border-radius:50%;background:var(--ground2);font-size:20px;font-weight:700;color:var(--ink)}
.klim-doel button:active{transform:scale(.94)}
.klim-modi.iconen{display:flex;justify-content:space-between;gap:6px;margin-top:16px;background:var(--ground2);border-radius:14px;padding:5px}
.klim-modi .modus{flex:1;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink2)}
.klim-modi .modus svg{width:19px;height:19px}
.klim-modi .modus.aan{background:var(--card);box-shadow:0 2px 8px rgba(122,74,50,.15)}
.chip.aan{background:#FCE3D2;border-color:#F4C4B5;color:var(--coral-deep);font-weight:700}
.klim-fan{display:flex;align-items:center;gap:10px;margin-top:12px}
.klim-fan select{flex:1;font:inherit;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--card-soft)}

/* muziek */
.music .art{width:74px;height:74px;flex:none;border-radius:14px;position:relative;overflow:hidden;
    background:radial-gradient(120% 120% at 20% 15%,#F2A65E 0%,#D6543A 48%,#5C2B34 100%);
    background-size:cover;background-position:center}
.music .now{display:flex;gap:14px;align-items:center}
.music .mtxt{min-width:0}
.music .now b{font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music .now span{color:var(--ink2);font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music .eq{display:flex;gap:2px;align-items:flex-end;height:14px;margin-left:auto;flex:none}
.music .eq i{width:3px;border-radius:2px;background:var(--teal);animation:eq 1s ease-in-out infinite}
.music .eq i:nth-child(1){height:8px}
.music .eq i:nth-child(2){height:14px;animation-delay:.15s}
.music .eq i:nth-child(3){height:10px;animation-delay:.3s}
@keyframes eq{50%{transform:scaleY(.45)}}
@media (prefers-reduced-motion:reduce){.music .eq i{animation:none}}
/* dezelfde equalizer in de grote speler op de Muziek-pagina */
.msp .eq{display:flex;gap:3px;align-items:flex-end;height:18px;flex:none;align-self:center;margin-left:auto}
.msp .eq i{width:4px;border-radius:2px;background:var(--teal);animation:eq 1s ease-in-out infinite}
.msp .eq i:nth-child(1){height:10px}
.msp .eq i:nth-child(2){height:18px;animation-delay:.15s}
.msp .eq i:nth-child(3){height:13px;animation-delay:.3s}
@media (prefers-reduced-motion:reduce){.msp .eq i{animation:none}}
.ctrls{display:flex;align-items:center;justify-content:center;gap:20px;margin:14px 0 4px}
.ctrls button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink2)}
.ctrls button svg{width:18px;height:18px}
.ctrls .play{width:48px;height:48px;background:var(--coral);color:#fff;box-shadow:0 8px 18px rgba(242,107,78,.4)}
.ctrls .play svg{width:20px;height:20px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{background:var(--card-soft);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500}
.chip:active{transform:scale(.97)}

/* weer */
.weer-kop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.weer-kop svg.groot{width:44px;height:44px;flex:none;color:var(--ink2)}
.weer-kop svg.groot.zon{color:var(--amber)}
.weer-kop svg.groot.regen{color:var(--blue)}
.weer-kop .wtekst{min-width:0}
.weer-kop .wtekst b{display:block;font-size:16px;line-height:1.2}
.weer-kop .wtekst span{font-size:11.5px;color:var(--ink2)}
.weer-kop .wnu{margin-left:auto;text-align:right}
.weer-kop .wnu b{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.weer-kop .wnu small{display:block;font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.wx{display:flex;justify-content:space-between;gap:4px}
.wx .d{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--ink2)}
.wx .d svg{width:17px;height:17px;color:var(--ink2)}
.wx .d.zon svg{color:var(--amber)}
.wx .d.regen svg{color:var(--blue)}
.wx .d b{color:var(--ink);font-size:12.5px;font-variant-numeric:tabular-nums}
.wx-leeg{color:var(--ink2);font-size:12.5px}

/* afval (ROVA) */
.afval{display:flex;flex-direction:column;gap:10px}
.afval .rij{display:flex;align-items:center;gap:11px}
.afval .kode{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.afval .kode svg{width:20px;height:20px}
.afval .kode.gft{background:#009640}.afval .kode.pmd{background:#F39200}.afval .kode.pap{background:#009FE3}
.afval .kode.rest{background:var(--ink2)}
.afval b{display:block;font-size:13.5px}
.afval span{font-size:12px;color:var(--ink2)}
.afval .wanneer{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.afval .wanneer b{font-size:13px}
.afval .rij.snel .wanneer b{color:var(--coral-deep)}

/* muziek-pagina */
.msp .msp-spelers{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.msp .msp-hoofd{display:flex;gap:18px;align-items:center}
.msp .art.groot{width:132px;height:132px;border-radius:18px;flex:none;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 20% 15%,#F2A65E 0%,#D6543A 48%,#5C2B34 100%);background-size:cover;background-position:center}
.msp .msp-info{min-width:0;flex:1}
.msp .msp-info b{display:inline-block;font-size:19px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}
.msp .hartje{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;color:var(--ink2);vertical-align:middle;margin-left:4px}
.msp .hartje svg{width:18px;height:18px}
.msp .hartje:hover{background:#FCE3D2;color:var(--coral-deep)}
.msp .hartje.gedaan{color:var(--coral-deep)}
.msp .hartje.gedaan svg{fill:var(--coral-deep);stroke:var(--coral-deep)}
.msp .msp-info span{display:block;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msp .msp-info .album{font-size:12px}
.msp .msp-voortgang{margin-top:16px}
.msp .balkje{height:6px;border-radius:99px;background:var(--ground2);overflow:hidden;cursor:pointer}
.msp .balkje i{display:block;height:100%;width:0;background:var(--coral);border-radius:99px}
.msp .tijden{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink2);margin-top:5px;font-variant-numeric:tabular-nums}
.msp .ctrls{margin:12px 0 4px}
.msp .ctrls .klein{position:relative;width:34px;height:34px}
.msp .ctrls .klein svg{width:17px;height:17px}
.msp .ctrls .klein.aan{color:var(--coral-deep);background:#FCE3D2;border-radius:50%}
.msp .ctrls .klein i{position:absolute;right:2px;top:2px;font-style:normal;font-size:9px;font-weight:700}
.msp .msp-vol{display:flex;align-items:center;gap:10px;margin-top:12px}
/* label links, dan een gekoppeld min/plus-paar, dan dempen, en rechts de bron.
   Geen schuif: de soundbar meldt zijn stand niet terug (HDMI ARC). */
.msp .vollabel{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);font-weight:500;flex:none}
.msp .vollabel svg{width:16px;height:16px;color:var(--ink2)}
.msp .volgroep{display:flex;flex:none;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card-soft)}
.msp .volgroep button{width:46px;height:34px;font:inherit;font-size:18px;font-weight:600;color:var(--ink);
  display:grid;place-items:center;line-height:1;user-select:none;touch-action:manipulation;background:none}
.msp .volgroep button+button{border-left:1px solid var(--line)}
.msp .volgroep button:hover{background:#FCE3D2}
.msp .volgroep button:active,.msp .volgroep button.bezig{background:#F9CDB8}
.msp .volknop.dempen{width:38px;height:34px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--card-soft);border:1px solid var(--line);cursor:pointer}
.msp .volknop.dempen svg{width:16px;height:16px;color:var(--ink2)}
.msp .volknop.dempen:hover{background:#FCE3D2;border-color:#F4C4B5}
.msp .volknop.dempen.aan{background:#FBE7E1;border-color:#F4C4B5}
.msp .volknop.dempen.aan svg{color:var(--coral-deep)}
/* schermknop: opgelicht = beeld staat aan */
.msp .volknop.scherm{width:38px;height:34px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--card-soft);border:1px solid var(--line);cursor:pointer}
.msp .volknop.scherm svg{width:17px;height:17px;color:var(--ink2)}
.msp .volknop.scherm:hover{background:#FCE3D2;border-color:#F4C4B5}
.msp .volknop.scherm.aan{background:#FCE3D2;border-color:#F4C4B5}
.msp .volknop.scherm.aan svg{color:var(--coral-deep)}

/* dezelfde bediening op de Home-kaart; die is smaller, dus compacter en
   gecentreerd onder de afspeelknoppen */
.music .msp-vol.home{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.music .msp-vol.home .volgroep{display:flex;flex:none;border:1px solid var(--line);border-radius:11px;
  overflow:hidden;background:var(--card-soft)}
.music .msp-vol.home .volgroep button{width:40px;height:31px;font:inherit;font-size:17px;font-weight:600;
  color:var(--ink);display:grid;place-items:center;line-height:1;user-select:none;touch-action:manipulation;background:none}
.music .msp-vol.home .volgroep button+button{border-left:1px solid var(--line)}
.music .msp-vol.home .volgroep button:hover{background:#FCE3D2}
.music .msp-vol.home .volgroep button:active,.music .msp-vol.home .volgroep button.bezig{background:#F9CDB8}
.music .msp-vol.home .volknop{width:34px;height:31px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--card-soft);border:1px solid var(--line);cursor:pointer}
.music .msp-vol.home .volknop svg{width:15px;height:15px;color:var(--ink2)}
.music .msp-vol.home .volknop:hover{background:#FCE3D2;border-color:#F4C4B5}
.music .msp-vol.home .volknop.dempen.aan{background:#FBE7E1;border-color:#F4C4B5}
.music .msp-vol.home .volknop.dempen.aan svg{color:var(--coral-deep)}
.music .msp-vol.home .volknop.scherm.aan{background:#FCE3D2;border-color:#F4C4B5}
.music .msp-vol.home .volknop.scherm.aan svg{color:var(--coral-deep)}
.msp .volinfo{font-size:11.5px;color:var(--ink2);margin-left:auto}
.wisknop{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--ink2);padding:3px 10px;border-radius:999px;background:var(--ground2)}
.wisknop:hover{background:#FBE7E1;color:var(--coral-deep)}
.wisknop:disabled{opacity:.5}
.wrij{display:flex;flex-direction:column;gap:6px}
.wrij .r{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:12px;cursor:pointer}
.wrij .r:hover{background:var(--card-soft)}
.wrij .r.aan{background:#FCE3D2}
.wrij .mini{width:38px;height:38px;border-radius:9px;flex:none;background:var(--ground2) center/cover}
.wrij .tekst{min-width:0;flex:1}
.wrij .tekst b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrij .tekst span{display:block;font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrij .r.bezig{opacity:.45;pointer-events:none}
.wrij .weg{flex:none;width:26px;height:26px;border-radius:50%;color:var(--ink2);font-size:16px;line-height:1}
.wrij .weg:hover{background:var(--ground2);color:var(--coral-deep)}
.chips.groot .chip{padding:10px 18px;font-size:13.5px}
/* favoriete radiozenders */
.favradio{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.favradio .zender{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 8px;border-radius:14px;
  background:var(--card-soft);border:1px solid var(--line);text-align:center}
.favradio .zender:hover{background:#FCE3D2;border-color:#F4C4B5}
.favradio .zender:active{transform:scale(.97)}
.favradio .zender.bezig{opacity:.5;pointer-events:none}
.favradio .logo{width:46px;height:46px;border-radius:12px;background:var(--ground2) center/cover;flex:none}
.favradio .zender b{font-size:12px;font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* inklapknop: op de desktop niet nodig, daar past de kaart gewoon */
.klapknop{display:none}

/* zenderlade op de Home-kaart: schuift over de kaartinhoud, blijft binnen de kaart */
.music{position:relative}
.chip-lade{display:flex;width:100%;align-items:center;justify-content:center;gap:7px}
.chip-lade svg{width:14px;height:14px;color:var(--coral-deep)}
/* dekt de kaart; de kop van de lade toont wat er speelt, dus je raakt die
   informatie niet kwijt terwijl je kiest. De kaart is te laag om zowel de
   speler als drie rijen zenders te tonen - gemeten, niet gegokt. */
.zenderlade{position:absolute;left:0;right:0;top:-6px;bottom:-2px;
  background:var(--card);border-radius:14px;
  display:flex;flex-direction:column;padding:2px 0 0;z-index:3;
  box-shadow:0 -8px 20px -14px rgba(60,40,25,.45);
  transform:translateY(10px);opacity:0;transition:transform .2s ease,opacity .2s ease}
.zenderlade.open{transform:translateY(0);opacity:1}
.zl-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 10px}
.zl-kop b{font-size:13.5px}
.zl-dicht{font-size:22px;line-height:1;color:var(--ink2);background:none;border:0;padding:0 4px;cursor:pointer}
.zl-dicht:hover{color:var(--ink)}
.zl-lijst{flex:1;min-height:0;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;align-content:start}
.zl-zender{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 4px;border-radius:12px;
  background:var(--card-soft);border:1px solid var(--line);text-align:center}
.zl-zender:hover{background:#FCE3D2;border-color:#F4C4B5}
.zl-zender:active{transform:scale(.97)}
.zl-zender.bezig{opacity:.5;pointer-events:none}
.zl-zender .logo{width:34px;height:34px;border-radius:10px;background:var(--ground2) center/cover;flex:none}
.zl-zender b{font-size:10.5px;font-weight:600;line-height:1.2;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* bibliotheek */
.mb-zoek{display:flex;gap:8px;margin-bottom:12px}
.mb-zoek input{flex:1;font:inherit;border:1.5px solid var(--line);border-radius:12px;padding:9px 13px;background:var(--card-soft);min-width:0}
.mb-zoek input:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent}
.mb-tabs{display:flex;gap:4px;background:var(--ground2);border-radius:999px;padding:3px;margin-bottom:12px;overflow-x:auto}
.mb-tabs button{border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.mb-tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(122,74,50,.12)}
.mb-bron{display:flex;gap:6px;margin:-4px 0 10px}
.mb-bron button{border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--ink2);background:var(--card-soft);border:1px solid var(--line)}
.mb-bron button[aria-selected="true"]{background:#FCE3D2;border-color:#F4C4B5;color:var(--coral-deep)}
.mb-lijst{display:flex;flex-direction:column;gap:5px;max-height:520px;overflow-y:auto}
.mb-lijst .r{display:flex;align-items:center;gap:11px;padding:6px 8px;border-radius:12px}
.mb-lijst .r:hover{background:var(--card-soft)}
.mb-lijst .mini{width:38px;height:38px;border-radius:9px;flex:none;background:var(--ground2) center/cover}
.mb-lijst .tekst{min-width:0;flex:1}
.mb-lijst .tekst b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-lijst .tekst span{display:block;font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-lijst .acties{display:flex;gap:4px;flex:none}
.mb-lijst .acties button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);font-size:16px}
.mb-lijst .acties button svg{width:14px;height:14px}
.mb-lijst .acties .nu:hover{background:var(--coral);color:#fff}
.mb-lijst .acties .straks:hover{background:var(--ground2);color:var(--ink)}
.mb-lijst .acties .hart:hover{background:#FCE3D2;color:var(--coral-deep)}
.mb-lijst .acties .hart.bezig{opacity:.5}
.mb-lijst .acties .hart.gedaan{color:var(--coral-deep)}
.mb-lijst .acties .hart.gedaan svg{fill:var(--coral-deep)}

/* NAS-pagina */
.schijven{display:flex;flex-direction:column;gap:9px}
.schijf{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:14px;background:var(--card-soft);border:1px solid var(--line)}
.schijf .ic{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ground2);color:var(--teal)}
.schijf .ic svg{width:18px;height:18px}
.schijf .tekst{min-width:0;flex:1}
.schijf .tekst b{display:block;font-size:13.5px}
.schijf .tekst span{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.schijf .rechts{text-align:right;flex:none}
.schijf .rechts b{font-size:13px;color:#177A69}
.schijf .rechts span{display:block;font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.schijf.stuk{background:#FBE7E1;border-color:#F4C4B5}
.schijf.stuk .ic{background:#F8D5CB;color:var(--coral-deep)}
.schijf.stuk .rechts b{color:var(--coral-deep)}
/* containers op de NAS */
.dockers{display:flex;flex-direction:column;gap:7px}
.dk{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:12px;background:var(--card-soft);border:1px solid var(--line)}
.dk .stip{width:8px;height:8px;flex:none;border-radius:50%;background:var(--teal)}
.dk .tekst{min-width:0;flex:1}
.dk .tekst b{display:block;font-size:13px}
.dk .tekst span{display:block;font-size:11px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk .rechts{flex:none;font-size:11.5px;color:var(--ink2);text-align:right}
.dk.uit{background:var(--ground2)}
.dk.uit .stip{background:var(--ink2)}
.dk.stuk{background:#FBE7E1;border-color:#F4C4B5}
.dk.stuk .stip{background:var(--coral-deep)}
.dk.stuk .rechts{color:var(--coral-deep);font-weight:600}
.dk-leeg{font-size:12px;color:var(--ink2);padding:4px 2px}
.dk-schakel{margin-left:auto;font:inherit;font-size:11px;color:var(--ink2);background:var(--ground2);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
.dk-schakel:hover{color:var(--ink);border-color:var(--ink2)}
.volumes{display:flex;flex-direction:column;gap:13px}
.vol .k{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.vol .k b{font-size:13.5px}
.vol .k .vrij{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.vol .onder{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.vol .onder .pct{font-weight:700}
#nToestel{grid-template-columns:1fr}
#nToestel>div{white-space:normal;gap:12px}
#nToestel>div b{text-align:right;word-break:break-all}
.nsys{display:flex;flex-direction:column;gap:14px}
.nrij .k{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.nrij .k b{font-variant-numeric:tabular-nums}
.nrij small{display:block;margin-top:4px;font-size:11.5px;color:var(--ink2)}

/* systeem/NAS */
.bars{display:flex;flex-direction:column;gap:11px}
.bar .k{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.bar .k b{font-variant-numeric:tabular-nums}
.bar .k b.ok{color:#177A69}
.bar .k span{color:var(--ink2)}

:is(.tile,.chip,.ctrls button,.tabs button,.nav a,.knopVerbind):focus-visible{outline:2px solid var(--coral);outline-offset:2px}

@media (max-width:1080px){
}
@media (max-width:760px){
  .main{padding:22px 16px calc(84px + env(safe-area-inset-bottom,0px))} h1{font-size:28px}
  .gs-widget{padding:14px 14px}
  /* saldering inklapbaar: die kaart is op de telefoon lang, en je wilt er
     langs kunnen scrollen zonder er doorheen te hoeven */
  .klapknop{display:grid;place-items:center;width:26px;height:26px;flex:none;margin-left:auto;
    background:var(--ground2);border:1px solid var(--line);border-radius:50%;color:var(--ink2);cursor:pointer}
  .klapknop svg{width:15px;height:15px;transform:rotate(-90deg);transition:transform .2s ease}
  .klapknop[aria-expanded="false"] svg{transform:rotate(90deg)}
  .gs-widget.ingeklapt .gs-inhoud{display:none}
  .gs-widget.ingeklapt .gs-kop{margin-bottom:0}
  /* de periodetabs nemen ruimte weg van de knop; op smalle schermen mogen ze wijken */
  .gs-widget.ingeklapt .tabs{display:none}

  /* telefoon: de kaart is breder t.o.v. zijn hoogte, dus meer kolommen en
     iets minder ruimte tussen de tegels - dan passen alle zenders zonder scroll */
  .zl-lijst{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
  .zl-kop{padding-bottom:6px}
  .zl-zender{padding:6px 3px}
  .zl-zender .logo{width:30px;height:30px}
  .indelingbalk{font-size:12.5px}
  /* op de telefoon: de zijbalk wordt een vaste tabbalk onderaan, altijd zichtbaar */
  .side,.zij-dicht .side{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;z-index:40;
        flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));transition:none;
        border-right:0;border-top:1px solid var(--line);background:rgba(241,229,211,.96);
        backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .brand,.side .me{display:none}
  .nav{flex-direction:row;width:100%;gap:2px}
  .nav a,.zij-dicht .nav a{flex:1;flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;
        font-size:10.5px;font-weight:600;border-radius:12px}
  .nav a svg{width:21px;height:21px}
  .nav a span,.zij-dicht .nav a span{display:initial}
  .nav a.on{background:var(--card);box-shadow:0 4px 12px rgba(122,74,50,.12)}
  /* energiestroom: knopen schalen mee, anders valt "Net" buiten de kaart */
  .flow{gap:2px}
  .node{min-width:0;flex:1}
  .node .ic{width:36px;height:36px}
  .node .ic svg{width:17px;height:17px}
  .node b{font-size:12px}
  .node span{font-size:11px;white-space:nowrap}
  .link{min-width:8px;flex:0 1 26px;margin-top:17px}
  .apparaten{gap:2px}
  .app-node{min-width:0;flex:1}
  .periodekiezer button{padding:5px 10px;font-size:12px}
  /* grafiek-koprij zoals HA: elk item zijn eigen breedte, kleine letter, alles op één regel */
  .gkop{display:flex;justify-content:space-between;gap:4px;margin:4px 0 8px}
  .gkop>div{min-width:0;flex:0 1 auto}
  .gkop b{font-size:14px;letter-spacing:-.01em;white-space:nowrap}
  .gkop b small{font-size:9px}
  .gkop>div>small{font-size:9.5px;letter-spacing:-.01em;white-space:nowrap}
  .gkop>div>small .lang{display:none}
  .gkop>div>small::after{content:attr(data-kort)}
}

/* melding onderin (verbinding weg, opdracht mislukt) */
.melding{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:60;
  background:var(--ink);color:#FBF7F0;border-radius:14px;padding:11px 18px;font-size:13.5px;font-weight:500;
  box-shadow:0 10px 30px rgba(43,33,24,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px)}
.melding.aan{opacity:1;transform:translate(-50%,0)}
.melding.fout{background:#A03A22}
.melding.goed{background:#177A69}
@media (max-width:760px){ .melding{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }

/* paneelkaart op de Energie-pagina */
.paneel-uitleg{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-bottom:10px}
.paneel-uitleg b{color:var(--ink);font-weight:600}
.paneel-uitleg small{display:block;margin-top:3px;font-size:11.5px;opacity:.85}

/* ── 3D-huis bovenaan de startpagina (alleen telefoon; app.js zet .actief zodra de scene draait) ── */
.huis3d .meting{display:none}
@media (max-width:760px){
  .huis3d.actief{position:relative;margin:-22px -16px 0;height:64vh;min-height:520px;background:#aebbcd;overflow:hidden}
  .huis3d.actief .date,
  .huis3d.actief h1{display:none}                /* op de telefoon: alleen de badges over het huis, geen begroeting (Franco, 5-9) */
  .huis3d.actief three-d-stage{position:absolute!important;inset:0;width:100%!important;height:100%!important;display:block}
  .huis3d.actief three-d-stage:not(:defined){visibility:hidden}
  /* de crème-achtergrond loopt onderaan het beeld in */
  .huis3d.actief::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,239,228,0) 0%,var(--ground) 92%)}
  .huis3d.actief .top{position:absolute;left:16px;right:16px;top:10px;z-index:3;margin:0}
  .huis3d.actief .tegelwaarde{display:none}      /* zon en huis staan al groot in beeld */
  /* de vier waarden: indeling zoals de Anker-app, letters van de app; positie komt uit huis3d.js */
  .huis3d.actief .meting{display:block;position:absolute;z-index:2;white-space:nowrap;top:0}
  .huis3d.actief .meting .tekst{display:flex;flex-direction:column;line-height:1.25;padding-left:14px;text-decoration:none;color:inherit}
  .huis3d.actief .meting.links-van{transform:translateX(-100%)}
  .huis3d.actief .meting.links-van .tekst{padding-left:0;padding-right:14px;text-align:right}
  .huis3d.actief .meting .tekst b{font-size:12.5px;font-weight:500;color:var(--ink2)}
  .huis3d.actief .meting .tekst>span{font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
  .huis3d.actief .meting.links-van .tekst>span{justify-content:flex-end}
  .huis3d.actief .meting .tekst small{font-size:12px;font-weight:500;color:var(--ink2);margin-left:-3px}
  .huis3d.actief .meting .chev{width:18px;height:18px;border-radius:50%;background:rgba(43,33,24,.08);display:grid;place-items:center;
    font-style:normal;font-size:13px;line-height:1;color:var(--ink2);padding-bottom:1px}
  .huis3d.actief .meting .lijn{position:absolute;left:0;width:0;border-left:1.5px dotted rgba(43,33,24,.45)}
  .huis3d.actief .meting.links-van .lijn{left:auto;right:0}
  .huis3d.actief .meting.band-boven .lijn{top:calc(100% + 4px)}
  .huis3d.actief .meting.band-onder .lijn{bottom:calc(100% + 4px)}
  .huis3d.actief .meting .lijn::before{content:"";position:absolute;left:-3.25px;width:5px;height:5px;border-radius:50%;background:rgba(43,33,24,.5)}
  .huis3d.actief .meting.band-boven .lijn::before{top:-6px}
  .huis3d.actief .meting.band-onder .lijn::before{bottom:-6px}
  .huis3d.actief + .grid-stack{position:relative;z-index:4;margin-top:-44px}   /* de eerste kaart schuift over de crème band */
}


/* het echte huis op de paneelkaart: panelen gloeien op vermogen, wattage erop geprojecteerd */
.pnl-huis{position:relative;height:min(52vh,420px);border-radius:14px;overflow:hidden;background:#aebbcd;margin:6px 0 12px}
.pnl-huis three-d-stage{position:absolute!important;inset:0;width:100%!important;height:100%!important;display:block}
.pnl-huis three-d-stage:not(:defined){visibility:hidden}
.pnl-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.pnl-label{position:absolute;transform:translate(-50%,-50%);font-size:11.5px;font-weight:700;color:#fff;line-height:1.1;
  text-shadow:0 1px 3px rgba(0,0,0,.75);white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums}
.pnl-label i{display:block;font-style:normal;font-size:9px;font-weight:600;opacity:.8}
.pnl-label.uit{color:#FFE1DA}
@media (max-width:760px){ .pnl-huis{height:300px} .pnl-label{font-size:10px} .pnl-label i{font-size:8px} }
.pnl-label u{display:block;text-decoration:none;font-size:9.5px;font-weight:600;opacity:.85}

/* ── Beveiliging ── */
.camwrap{position:relative;border-radius:14px;overflow:hidden;background:var(--ground2);aspect-ratio:16/9;display:grid;place-items:center;min-height:150px}
.camwrap img,.camwrap video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s}
.camwrap video.aan{opacity:1}
.camwrap img.aan{opacity:1}
.camleeg{position:absolute;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);
  background:rgba(251,247,240,.85);border-radius:999px;padding:8px 14px;backdrop-filter:blur(4px)}
.camleeg .spin{width:16px;height:16px;flex:none;border-radius:50%;border:2.5px solid rgba(43,33,24,.15);
  border-top-color:var(--coral);animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.camleeg .spin{animation:none;border-top-color:var(--ink2)}}
.camstatus{position:absolute;left:12px;bottom:12px;background:rgba(43,33,24,.72);color:#fff;border-radius:999px;
  padding:5px 13px;font-size:12.5px;font-weight:600;backdrop-filter:blur(6px)}
.camstatus.let{background:rgba(200,110,20,.85)}
.camstatus.bel{background:rgba(216,78,49,.9)}
.camknoppen{display:flex;gap:9px;margin-top:11px}
.camknoppen .knop{flex:1;justify-content:center;text-align:center}
.knop.primair{background:var(--coral);color:#fff}
.knop.primair.aan{background:var(--coral-deep)}
.standen{display:flex;gap:8px;flex-wrap:wrap}
/* alleen de bewakingsknoppen - de thermostaat heeft ook een .stand (het woordje 'Uit'), die moet er niet uitzien als knop */
.standen .stand{flex:1;min-width:84px;border-radius:13px;padding:11px 8px;font-size:13px;font-weight:600;
  background:var(--card-soft);border:1.5px solid var(--line);color:var(--ink2)}
.standen .stand.aan{background:#FCE3D2;border-color:#F4C4B5;color:var(--coral-deep)}
.standmeer{flex:1;min-width:84px;border-radius:13px;padding:11px 8px;font:inherit;font-size:13px;font-weight:600;
  background:var(--card-soft);border:1.5px solid var(--line);color:var(--ink2)}
.standuitleg{margin-top:10px;font-size:12.5px;color:var(--ink2);line-height:1.5}
.tijdlijn{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto}
.tlrij{display:flex;gap:11px;align-items:baseline;padding:6px 2px;border-bottom:1px solid var(--line);font-size:13px}
.tlrij:last-child{border-bottom:0}
.tlrij b{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:600;font-size:12px;min-width:42px}
.tlrij.bel span{color:var(--coral-deep);font-weight:600}
.instel{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.instelrij{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  border-radius:13px;padding:11px 13px;background:var(--card-soft);border:1.5px solid var(--line);font-size:13px;color:var(--ink)}
.instelrij.aan{background:#E2F3EF;border-color:#BFE4DC}
.instelrij .vink{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink2)}
.instelrij.aan .vink{color:#177A69}
@media (max-width:760px){ .instel{grid-template-columns:1fr} .tijdlijn{max-height:none} }