:root{
  color-scheme:dark;
  --ground:#050C0E; --panel:#0A171A; --panel-2:#0C2025;
  --line:rgba(76,214,178,.16); --line-2:rgba(76,214,178,.30);
  --ink:#DCEDEA; --ink-2:#A7C4C0; --muted:#6C8B89;
  --goed:#2FE07E; --goed-dim:rgba(47,224,126,.16);
  --letop:#F2B23C; --letop-dim:rgba(242,178,60,.16);
  --stuk:#FF5B5B; --stuk-dim:rgba(255,91,91,.16);
  --onbekend:#7FA5A2; --onbekend-dim:rgba(127,165,162,.14);
  --cyan:#35D8E0;
  --glow:0 0 22px rgba(47,224,126,.35);
  --r:12px;
}
*{box-sizing:border-box}
/* Verbergen moet altijd winnen. Zonder deze regel overstemt .detail{display:flex} het
   verbergen van een dichtgeklapte regel, en staat alles permanent open. (11-09) */
[hidden]{display:none !important}
body{
  background:
    radial-gradient(1100px 620px at 68% -8%, rgba(47,224,126,.07), transparent 62%),
    radial-gradient(760px 500px at 4% 0%, rgba(53,216,224,.06), transparent 60%),
    var(--ground);
  background-attachment:fixed; color:var(--ink);
  font-family:Barlow,"Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.5;
  margin:0; -webkit-font-smoothing:antialiased;
}
.app{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; align-items:start}

.zij{
  position:sticky; top:0; align-self:start; min-height:100vh; border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,23,26,.92), rgba(5,12,14,.92));
  padding:22px 0 26px; display:flex; flex-direction:column; gap:22px;
}
.merk{display:flex; justify-content:center; padding:6px 16px 14px}
.ring{
  width:126px; height:126px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 44%, rgba(47,224,126,.10), rgba(5,12,14,.9) 62%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 0 24px rgba(47,224,126,.12), 0 0 26px rgba(47,224,126,.10);
}
.ring::before{content:""; position:absolute; inset:9px; border-radius:50%;
  border:1px solid rgba(53,216,224,.28); border-top-color:var(--goed); border-right-color:rgba(47,224,126,.55)}
.ring-tekst{text-align:center; line-height:1; z-index:1}
.ring-tekst .k{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.22em; color:var(--ink-2); display:block; margin-bottom:5px}
.ring-tekst .g{font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:30px; color:var(--goed); text-shadow:var(--glow); display:block}
.ring-tekst .s{display:block; margin-top:6px; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.18em; color:var(--muted)}

.nav{display:flex; flex-direction:column}
.nav-kop{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.2em; color:var(--muted); padding:0 20px 8px; margin:0}
.nav button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0;
  border-left:2px solid transparent; cursor:pointer; color:var(--ink-2); font:inherit; font-size:13.5px;
  letter-spacing:.03em; padding:10px 18px;
}
.nav button:hover{background:rgba(47,224,126,.05); color:var(--ink)}
.nav button:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.nav button[aria-current="true"]{color:var(--goed); border-left-color:var(--goed); background:linear-gradient(90deg, rgba(47,224,126,.14), transparent 80%)}
.nav svg{width:16px; height:16px; flex:none; opacity:.9}
.nav .lbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav .dot{width:7px; height:7px; border-radius:50%; flex:none}
.zij-voet{margin-top:auto; padding:0 18px}
.zij-voet a{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; color:var(--muted); text-decoration:none; text-transform:uppercase}
.zij-voet a:hover{color:var(--cyan)}

.hoofd{padding:22px 24px 0; display:flex; flex-direction:column; gap:16px; min-width:0}
.baan{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
h1{font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:24px; letter-spacing:.14em; text-transform:uppercase; margin:0}
.live{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; color:var(--goed)}
.live b{width:7px; height:7px; border-radius:50%; background:var(--goed); box-shadow:var(--glow)}
.baan-rechts{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.stempel{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em; color:var(--muted)}
.ververs{font:inherit; font-size:11px; letter-spacing:.13em; font-family:"IBM Plex Mono",monospace; text-transform:uppercase;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2); border-radius:999px; padding:5px 13px; cursor:pointer}
.ververs:hover{border-color:var(--cyan); color:var(--cyan)}
.ververs:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

.paneel{background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:var(--r)}
.paneel-kop{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line)}
.paneel-kop h2{font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:14.5px; letter-spacing:.15em; text-transform:uppercase; margin:0}
.paneel-kop .rechts{margin-left:auto; display:flex; align-items:center; gap:10px}
.paneel-lijf{padding:15px 16px 17px}

.hart{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:18px; padding:18px}
.hart-graf svg{display:block; width:100%; height:auto; max-width:100%}
.hart-melding{display:flex; align-items:center; gap:9px; margin:6px 0 0; font-size:13.5px; color:var(--ink-2)}
.hart-melding .bol{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; flex:none}
.hart-cijfer{text-align:right; border-left:1px solid var(--line); padding-left:18px}
.hart-cijfer .groot{font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:72px; line-height:.9}
.hart-cijfer .van{font-family:"Barlow Semi Condensed",sans-serif; font-size:22px; color:var(--muted)}
.hart-cijfer .lab{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; color:var(--ink-2); margin-top:10px}
.hart-cijfer .oordeel{font-family:"Barlow Semi Condensed",sans-serif; font-size:17px; letter-spacing:.12em; text-transform:uppercase; margin-top:3px}

.tegels{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:12px}
.tegel{background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px 15px; display:flex; flex-direction:column; gap:9px; text-align:left; cursor:pointer; font:inherit; color:inherit}
.tegel:hover{border-color:var(--line-2)}
.tegel:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.tegel-kop{display:flex; align-items:center; gap:9px; color:var(--ink-2)}
.tegel-kop svg{width:17px; height:17px; flex:none}
.tegel-kop span{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tegel-cijfer{display:flex; align-items:baseline; gap:4px}
.tegel-cijfer b{font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:38px; line-height:1}
.tegel-cijfer i{font-family:"Barlow Semi Condensed",sans-serif; font-style:normal; font-size:16px; color:var(--muted)}
.staaf{height:3px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden}
.staaf i{display:block; height:100%; border-radius:999px}
.tegel-voet{font-size:12px; color:var(--muted)}

.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px}
.storing{display:flex; flex-direction:column}
.storing button{display:grid; grid-template-columns:18px minmax(0,1fr) auto 14px; align-items:center; gap:11px;
  background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; color:inherit; font:inherit; text-align:left; padding:11px 2px}
.storing button:last-child{border-bottom:0}
.storing button:hover{background:rgba(47,224,126,.04)}
.storing button:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.storing .ico{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700}
.storing .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px}
.storing .bd{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.09em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.storing .pijl{color:var(--muted); font-size:12px}
.storing .leeg{padding:10px 2px; color:var(--muted); font-size:13px}

.donut-vak{display:grid; grid-template-columns:158px minmax(0,1fr); gap:18px; align-items:center}
.donut{position:relative; width:158px; height:158px}
.donut svg{transform:rotate(-90deg); display:block}
.donut-mid{position:absolute; inset:0; display:grid; place-items:center; text-align:center; line-height:1.1}
.donut-mid b{font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:30px; color:var(--goed)}
.donut-mid span{display:block; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.16em; color:var(--muted); margin-top:3px}
.legenda{display:flex; flex-direction:column; gap:10px; font-size:13px; min-width:0}
.legenda div{display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:9px}
.legenda .stip{width:9px; height:9px; border-radius:50%}
.legenda .n{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.legenda .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; color:var(--ink)}
.legenda .streep{grid-column:1/-1; border-top:1px solid var(--line); padding-top:9px; margin-top:2px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px}

.versheid{display:flex; align-items:flex-end; gap:10px; height:120px; padding-top:6px}
.versheid div{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0}
.versheid .kolom{width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--goed), rgba(47,224,126,.28))}
.versheid .n{font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:17px}
.versheid .t{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.08em; color:var(--muted); text-align:center}

.bord-kop{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px}
.bord-kop h2{font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:16px; letter-spacing:.15em; text-transform:uppercase; margin:0}
.filterpil{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; color:var(--cyan); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px}

.bedrijf{margin-bottom:12px; overflow:hidden}
.bedrijf-kop{width:100%; text-align:left; background:none; border:0; cursor:pointer; color:inherit; font:inherit;
  display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid transparent}
.bedrijf[data-open] .bedrijf-kop{border-bottom-color:var(--line)}
.bedrijf-kop:hover{background:rgba(47,224,126,.04)}
.bedrijf-kop:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.pijl-k{color:var(--muted); font-size:10px; transition:transform .16s ease; flex:none}
.bedrijf[data-open] .pijl-k{transform:rotate(90deg)}
.bedrijf-naam{font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:16px; letter-spacing:.08em; text-transform:uppercase}
.bedrijf-telling{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.pil{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; padding:3px 9px; border-radius:999px; white-space:nowrap}
.pil.stuk{background:var(--stuk-dim); color:var(--stuk)}
.pil.letop{background:var(--letop-dim); color:var(--letop)}
.pil.goed{background:var(--goed-dim); color:var(--goed)}
.pil.onbekend{background:var(--onbekend-dim); color:var(--onbekend)}

.projectkop{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding:13px 16px 5px; margin:0}
.regel{border-top:1px solid var(--line)}
.regel-kop{width:100%; background:none; border:0; color:inherit; font:inherit; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:12px minmax(0,1fr) 92px 58px auto; align-items:center; gap:12px; padding:9px 16px}
.regel-kop:hover{background:rgba(47,224,126,.04)}
.regel-kop:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.lamp{width:9px; height:9px; border-radius:50%}
.lamp.stuk{background:var(--stuk); box-shadow:0 0 10px rgba(255,91,91,.6)}
.lamp.letop{background:var(--letop); box-shadow:0 0 10px rgba(242,178,60,.5)}
.lamp.goed{background:var(--goed); box-shadow:0 0 10px rgba(47,224,126,.45)}
.lamp.onbekend{background:transparent; border:1.5px dashed var(--onbekend)}
.naam{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px}
.regel.is-stuk .naam{font-weight:600; color:#fff}
.verborgen{position:absolute; left:-9999px}
.meter{height:4px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; display:block}
.meter i{display:block; height:100%; border-radius:999px}
.meter.leeg{background:none; border:1px dashed var(--onbekend); height:5px}
.leeftijd{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--muted); text-align:right}
.knop{font:inherit; font-size:11.5px; letter-spacing:.06em; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line-2); background:transparent; color:var(--ink-2); border-radius:6px; padding:5px 11px}
.knop:hover{border-color:var(--cyan); color:var(--cyan)}
.knop:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.knop.leeg{visibility:hidden}
.wacht{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; white-space:nowrap}

.detail{padding:2px 16px 16px 40px; display:flex; flex-direction:column; gap:11px; background:rgba(0,0,0,.22); border-top:1px dashed var(--line)}
.detail dl{margin:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; font-size:13px}
.detail dt{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.detail dd{margin:0; color:var(--ink-2)}
.detail dd.ontbreekt{color:var(--muted); font-style:italic}
.tech{font-family:"IBM Plex Mono",monospace; font-size:11.5px; background:rgba(0,0,0,.35); border:1px solid var(--line);
  border-radius:6px; padding:9px 11px; color:var(--ink-2); overflow-x:auto; white-space:pre-wrap; word-break:break-word}

/* ---------- inventaris ---------- */
.inv-lijst{display:flex; flex-direction:column}
.inv-rij{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  border-top:1px solid var(--line); padding:11px 0;
}
.inv-rij:first-child{border-top:0}
.inv-naam{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inv-soort{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.inv-waarvoor{grid-column:2 / -1; margin:2px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.55}
.inv-waarvoor .inv-op{color:var(--muted)}
.inv-waarvoor.inv-geen{color:var(--muted); font-style:italic}
.inv-leeg{margin:0; font-size:13px; color:var(--muted)}
@media (max-width:620px){
  .inv-rij{grid-template-columns:auto minmax(0,1fr)}
  .inv-soort{grid-column:1 / -1; padding-left:2px}
  .inv-waarvoor{grid-column:1 / -1}
}

/* ---------- reparatie ---------- */
.herstelvak{margin-top:2px}
.herstel-vraag{background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:9px; padding:13px 14px}
.herstel-vraag .hv-kop{margin:0 0 5px; font-weight:600; font-size:13.5px; color:#fff}
.herstel-vraag .hv-waarom{margin:0 0 13px; font-size:12.5px; color:var(--muted); line-height:1.55}
.hv-knoppen{display:flex; gap:9px; flex-wrap:wrap}
.herstel-melding{border-radius:9px; padding:12px 14px; font-size:13px; border:1px solid}
.herstel-melding p{margin:0}
.herstel-melding b{color:#fff}
.herstel-melding.bezig{background:rgba(53,216,224,.08); border-color:rgba(53,216,224,.35); color:var(--ink-2)}
.herstel-melding.geslaagd{background:var(--goed-dim); border-color:rgba(47,224,126,.45); color:var(--ink-2)}
.herstel-melding.mislukt{background:var(--stuk-dim); border-color:rgba(255,91,91,.45); color:var(--ink-2)}
.hv-uitvoer{
  margin:10px 0 0; font-family:"IBM Plex Mono",monospace; font-size:11px; line-height:1.5;
  background:rgba(0,0,0,.4); border-radius:6px; padding:9px 10px; color:var(--muted);
  max-height:180px; overflow:auto; white-space:pre-wrap; word-break:break-word;
}

.stilband{display:flex; gap:10px; align-items:flex-start; background:var(--letop-dim); border:1px solid rgba(242,178,60,.4);
  border-radius:var(--r); padding:12px 15px; font-size:13.5px; color:var(--ink-2)}
.stilband b{color:var(--ink)}
.stilband.erg{background:var(--stuk-dim); border-color:rgba(255,91,91,.45)}
body.gedoofd .verbleekt{filter:grayscale(1) brightness(.62); pointer-events:none}

.voet{margin-top:6px; border-top:1px solid var(--line); padding:15px 0 26px; display:flex; gap:12px 26px; flex-wrap:wrap;
  align-items:center; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase}

/* ---------- inlogscherm ---------- */
.poort{display:grid; grid-template-columns:1fr 1fr; min-height:100vh}

.poort-beeld{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:30px; padding:40px;
  background:
    radial-gradient(620px 420px at 50% 38%, rgba(47,224,126,.12), transparent 66%),
    radial-gradient(520px 380px at 24% 82%, rgba(53,216,224,.09), transparent 62%),
    linear-gradient(160deg, #0B1B1E 0%, #071113 58%, #050C0E 100%);
  border-right:1px solid var(--line);
}
/* fijn raster, als een monitorscherm */
.poort-beeld::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(76,214,178,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(76,214,178,.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(closest-side at 50% 45%, #000 55%, transparent 100%);
}
.poort-ring{
  width:190px; height:190px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
  background:radial-gradient(circle at 50% 44%, rgba(47,224,126,.12), rgba(5,12,14,.92) 64%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 0 38px rgba(47,224,126,.14), 0 0 60px rgba(47,224,126,.13);
}
.poort-ring::before{
  content:""; position:absolute; inset:13px; border-radius:50%;
  border:1px solid rgba(53,216,224,.26); border-top-color:var(--goed); border-right-color:rgba(47,224,126,.55);
}
.poort-ring .k{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.24em; color:var(--ink-2); display:block; margin-bottom:8px}
.poort-ring .g{font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:40px; line-height:1;
  color:var(--goed); text-shadow:0 0 26px rgba(47,224,126,.45); display:block}
.poort-ring .s{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.2em; color:var(--muted); display:block; margin-top:9px}
.poort-ring span{text-align:center; z-index:1}

.poort-lijn{width:min(420px,80%); z-index:1}
.poort-lijn svg{display:block; width:100%; height:auto}
.poort-zin{z-index:1; text-align:center; max-width:34ch; color:var(--ink-2); font-size:14px; margin:0; line-height:1.55}
.poort-zin b{color:var(--ink); font-weight:600}

.poort-form{display:flex; align-items:center; justify-content:center; padding:40px 32px; background:var(--ground)}
.poort-form form{width:100%; max-width:380px}
.poort-form h1{font-family:Barlow,sans-serif; font-weight:700; font-size:30px; letter-spacing:-.01em;
  text-transform:none; margin:0 0 8px; color:#fff}
.poort-form .sub{color:var(--muted); font-size:14px; margin:0 0 30px}

.poort-melding{
  display:flex; gap:9px; align-items:flex-start; background:var(--stuk-dim); border:1px solid rgba(255,91,91,.42);
  color:var(--ink-2); border-radius:9px; padding:11px 13px; font-size:13px; margin:0 0 20px;
}
.poort-melding b{color:#fff; font-weight:600}

.poort-form label{display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin:0 0 7px}
.poort-veld{position:relative; margin-bottom:18px}
.poort-form input{
  width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px;
  padding:13px 15px; color:var(--ink); font:inherit; font-size:14.5px;
}
.poort-form input::placeholder{color:#4E6664}
.poort-form input:hover{border-color:var(--line-2)}
.poort-form input:focus{outline:none; border-color:var(--goed); box-shadow:0 0 0 3px rgba(47,224,126,.16)}
.poort-veld input[type="password"], .poort-veld input[data-oog]{padding-right:46px}
.oog{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer;
  color:var(--muted); padding:8px; border-radius:7px; display:grid; place-items:center;
}
.oog:hover{color:var(--ink)}
.oog:focus-visible{outline:2px solid var(--goed); outline-offset:0}
.oog svg{width:18px; height:18px}

.poort-form button[type="submit"]{
  width:100%; background:var(--goed); border:0; color:#04150C; font:inherit; font-weight:700; font-size:15px;
  border-radius:9px; padding:14px; cursor:pointer; margin-top:6px; letter-spacing:.01em;
}
.poort-form button[type="submit"]:hover{background:#43EB90}
.poort-form button[type="submit"]:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.poort-form .klein{color:var(--muted); font-size:12px; margin:22px 0 0; text-align:center; line-height:1.6}

@media (max-width:860px){
  .poort{grid-template-columns:1fr; min-height:0}
  .poort-beeld{min-height:210px; padding:30px 24px; gap:18px; border-right:0; border-bottom:1px solid var(--line)}
  .poort-ring{width:118px; height:118px}
  .poort-ring::before{inset:9px}
  .poort-ring .g{font-size:25px}
  .poort-lijn, .poort-zin{display:none}
  .poort-form{padding:32px 22px 44px; min-height:calc(100vh - 210px)}
  .poort-form h1{font-size:25px}
}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .zij{position:static; min-height:0; border-right:0; border-bottom:1px solid var(--line); flex-direction:row;
    align-items:center; gap:14px; padding:12px 14px; overflow-x:auto}
  .merk{padding:0; flex:none}
  .ring{width:64px; height:64px}
  .ring::before{inset:5px}
  .ring-tekst .g{font-size:15px}
  .ring-tekst .k,.ring-tekst .s{display:none}
  .nav{flex-direction:row; gap:2px}
  .nav-kop{display:none}
  .nav button{white-space:nowrap; border-left:0; border-bottom:2px solid transparent; padding:8px 12px}
  .nav button[aria-current="true"]{border-left:0; border-bottom-color:var(--goed); background:rgba(47,224,126,.1)}
  .zij-voet{margin-top:0; padding:0 8px}
  .hoofd{padding:18px 16px 0}
  .hart{grid-template-columns:1fr}
  .hart-cijfer{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:14px; text-align:left}
  .donut-vak{grid-template-columns:1fr; justify-items:center}
  .legenda{width:100%}
}
@media (max-width:620px){
  .regel-kop{grid-template-columns:12px minmax(0,1fr) auto; row-gap:7px}
  .meter{grid-column:2/4}
  .leeftijd{grid-column:1/-1; text-align:left; padding-left:24px}
  .detail{padding-left:18px}
  .bedrijf-telling{width:100%; margin-left:0}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }