: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;
  /* Keuze A van Steven (11-09): het middendeel maximaal 1040 px breed en in het midden, met ruimte
     links en rechts op een breed scherm. Op een smal venster is er geen ruimte over en vult het
     de breedte zoals voorheen. De zijbalk blijft zoals hij is. */
  max-width:1040px; width:100%; margin:0 auto}
.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 ---------- */
/* Het paneel is inklapbaar (Steven, 11-09): zelfde gebaar en pijl als een bedrijf op het bord.
   Dicht = alleen de kop met het aantal stilstaande dingen; open = de lijst. */
.paneel-kop.klapbaar{width:100%; text-align:left; background:none; border:0; border-bottom:1px solid transparent;
  cursor:pointer; color:inherit; font:inherit}
.paneel[data-open] .paneel-kop.klapbaar{border-bottom-color:var(--line)}
.paneel-kop.klapbaar:hover{background:rgba(47,224,126,.04)}
.paneel-kop.klapbaar:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.paneel[data-open] .pijl-k{transform:rotate(90deg)}
.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}
}
/* ---------- beweging en diepte (Steven, 11-09) ----------
   Drie dingen: een lichtpuls die langs de hartslaglijn loopt, diepte op panelen en tegels, en een glans die
   door de balken, meters en versheidskolommen trekt. "Minder beweging" in het systeem zet alles stil (onderaan). */
.paneel, .tegel{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 14px 34px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.35);
  border-top-color:rgba(76,214,178,.26);
}
.tegel{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.tegel:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(76,214,178,.18)}
.hart-licht{opacity:.75; filter:drop-shadow(0 0 6px rgba(234,247,244,.7)); animation:hart-loop 7s linear infinite}
.hart-as text{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; fill:var(--muted)}
@keyframes hart-loop{from{stroke-dashoffset:1000} to{stroke-dashoffset:0}}
.staaf i, .meter i, .versheid .kolom{position:relative; overflow:hidden}
.staaf i::after, .meter i::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  animation:glans 3.2s ease-in-out infinite;
}
.versheid .kolom::after{
  content:""; position:absolute; left:0; right:0; top:0; height:45%;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  animation:glans-op 3.6s ease-in-out infinite;
}
.versheid div:nth-child(2) .kolom::after{animation-delay:.4s} .versheid div:nth-child(3) .kolom::after{animation-delay:.8s}
.versheid div:nth-child(4) .kolom::after{animation-delay:1.2s} .versheid div:nth-child(5) .kolom::after{animation-delay:1.6s}
.tegel:nth-child(2) .staaf i::after{animation-delay:.5s} .tegel:nth-child(3) .staaf i::after{animation-delay:1s}
.tegel:nth-child(4) .staaf i::after{animation-delay:1.5s} .tegel:nth-child(5) .staaf i::after{animation-delay:2s}
@keyframes glans{0%{transform:translateX(-120%)} 100%{transform:translateX(320%)}}
@keyframes glans-op{0%{transform:translateY(320%)} 100%{transform:translateY(-120%)}}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }