:root{
  --inkt:#0b0b0c; --inkt2:#131315; --inkt3:#1a1a1d; --lijn:rgba(245,242,238,.12); --lijn2:rgba(245,242,238,.22);
  --oranje:#ED6A35; --oranje2:#ff8a57; --groen:#3fd46f; --wit:#f5f2ee; --grijs:#8e8a85; --grijs2:#b9b4ae;
  --gutter:clamp(16px,4.2vw,64px);
  --sans:'Montserrat',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--inkt);color:var(--wit);font:500 16px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
::selection{background:var(--oranje);color:#fff}
:focus-visible{outline:2px solid var(--oranje);outline-offset:3px}
h1,h2{font-weight:800;line-height:.98;letter-spacing:-.035em}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.oog{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grijs);display:flex;align-items:baseline;gap:14px}
.oog::before{content:"";width:34px;height:2px;background:var(--oranje);transform:translateY(-4px)}
.merk img{width:56px;height:auto}
.l-label{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--grijs)}

/* =========================== LOGIN =========================== */
.login{display:grid;grid-template-rows:auto 1fr auto;min-height:100svh}
.poort{position:fixed;inset:0;z-index:-1;background:#050505;overflow:hidden}
.poort-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;opacity:0;transform:scaleX(-1) scale(1.06);animation:filmIn 2.2s var(--ease) .1s forwards}
/* gespiegeld: de lege donkere ruimte valt links achter de kop, de lampjes rechts achter de kaart */
.poort-waas{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.7) 30%,rgba(11,11,12,.15) 58%,rgba(11,11,12,.2) 100%),
  linear-gradient(0deg,rgba(11,11,12,.85) 0%,rgba(11,11,12,0) 38%)}
@keyframes filmIn{to{opacity:1;transform:scaleX(-1)}}

.l-kop{display:flex;align-items:center;gap:22px;padding:26px var(--gutter)}
.l-kop .l-label{padding-left:22px;border-left:1px solid var(--lijn2);line-height:1.2}

.l-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);align-items:center;gap:clamp(32px,6vw,120px);padding:clamp(20px,4vh,48px) var(--gutter)}
.l-tekst{align-self:end;max-width:640px;padding-bottom:clamp(8px,4vh,48px)}
.l-tekst h1{font-size:clamp(44px,6.4vw,104px);margin:22px 0 24px}
.l-tekst h1 em{color:var(--oranje);font-size:1.08em;letter-spacing:-.02em}
.l-lead{max-width:440px;color:var(--grijs2);font-size:17px}
.l-tekst > *{opacity:0;transform:translateY(18px);animation:op .9s var(--ease) forwards}
.l-tekst h1{animation-delay:.25s}.l-lead{animation-delay:.4s}
@keyframes op{to{opacity:1;transform:none}}

.kaart{position:relative;background:rgba(19,19,21,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--lijn);border-radius:6px;padding:clamp(28px,3.4vw,44px);opacity:0;transform:translateY(24px);animation:op 1s var(--ease) .5s forwards}
.kaart::before{content:"";position:absolute;left:clamp(28px,3.4vw,44px);top:-1px;width:44px;height:2px;background:var(--oranje)}
.kaart h2{font-size:30px;margin-bottom:28px}
.veld{display:block;margin-bottom:20px}
.veld-naam{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin-bottom:9px}
.invoer{display:flex;align-items:center;height:56px;background:rgba(245,242,238,.04);border:1px solid var(--lijn2);border-radius:4px;transition:border-color .25s,background .25s,box-shadow .25s}
.invoer:focus-within{border-color:var(--oranje);background:rgba(245,242,238,.06);box-shadow:0 0 0 4px rgba(237,106,53,.14)}
.invoer input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;padding:0 16px;font-size:17px;font-weight:500}
.invoer input::placeholder{color:rgba(245,242,238,.32)}
.prefix{padding-left:16px;color:var(--grijs);font-size:17px;user-select:none}
.prefix + input{padding-left:2px}
.toon{background:none;border:0;cursor:pointer;color:var(--grijs);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:0 16px;height:100%}
.toon:hover{color:var(--wit)}
.melding{min-height:22px;font-size:14px;color:#ff8a7a;margin:-4px 0 14px}
.melding:empty{visibility:hidden}
.kaart.schud{animation:schud .45s}
@keyframes schud{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

.knop{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;width:100%;height:58px;padding:0 22px;border:0;border-radius:4px;background:var(--oranje);color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .25s}
.knop:hover{background:var(--oranje2)}
.knop .pijl{transition:transform .35s var(--ease)}
.knop:hover .pijl{transform:translateX(4px)}
.knop .laad{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.knop.bezig{pointer-events:none}
.knop.bezig .laad{animation:laad 1.2s var(--ease) forwards}
.knop.klaar .laad{animation:none;transform:scaleX(1);transition:transform .5s var(--ease)}
@keyframes laad{to{transform:scaleX(.8)}}
.hulp{margin-top:22px;font-size:14px;color:var(--grijs)}
.hulp a{color:var(--wit);border-bottom:1px solid var(--lijn2);transition:border-color .2s}
.hulp a:hover{border-color:var(--oranje)}

.l-voet{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px var(--gutter);font-size:13px;color:var(--grijs)}
.lampjes{display:flex;gap:7px}
.lampjes i{width:7px;height:7px;border-radius:50%;background:var(--oranje);box-shadow:0 0 10px var(--oranje);animation:knipper 3.2s infinite}
.lampjes i:nth-child(2){animation-delay:.9s}.lampjes i:nth-child(3){animation-delay:1.7s}
@keyframes knipper{0%,100%{opacity:1}45%{opacity:.35}55%{opacity:.9}}

/* overgang na inloggen */
body.weg .l-main,body.weg .l-kop,body.weg .l-voet{transition:opacity .5s ease,transform .6s var(--ease);opacity:0;transform:translateY(-14px)}
body.weg .poort-film{transition:opacity .7s ease;opacity:.15!important}

/* =========================== DASHBOARD =========================== */
.dash{display:grid;grid-template-rows:auto 1fr auto}
.d-kop{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:18px var(--gutter);background:rgba(11,11,12,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--lijn)}
.d-kop .merk img{width:48px}
.d-pad{display:flex;align-items:baseline;gap:14px;padding-left:22px;border-left:1px solid var(--lijn2);min-width:0}
.d-site{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uit{margin-left:auto}
.uit button{background:none;border:1px solid var(--lijn2);border-radius:4px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.uit button:hover{border-color:var(--oranje);color:var(--oranje2)}

.d-main{padding:clamp(40px,7vh,88px) var(--gutter) clamp(48px,8vh,96px);width:100%;max-width:1680px;margin:0 auto}
.d-intro h1{font-size:clamp(40px,6vw,92px);margin:20px 0 22px;overflow-wrap:anywhere}
.d-intro h1 em{display:block;color:var(--oranje);font-size:.62em;margin-top:.12em}
.d-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;color:var(--grijs);font-size:14px}
.opnieuw{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--wit);font-size:14px;font-weight:600;border-bottom:1px solid var(--lijn2);padding-bottom:1px;transition:border-color .2s}
.opnieuw svg{align-self:center}
.opnieuw:hover{border-color:var(--oranje)}
.opnieuw.draait svg{animation:draai .9s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}

.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(40px,6vh,72px) 0 0;border-top:1px solid var(--lijn2);border-bottom:1px solid var(--lijn)}
.meter{padding:30px clamp(20px,2.6vw,40px) 34px;border-left:1px solid var(--lijn)}
.meter:first-child{border-left:0;padding-left:0}
.meter h2{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);line-height:1.4}
.stand{display:flex;align-items:baseline;gap:14px;margin:22px 0 16px;font-size:clamp(28px,2.9vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.lamp{flex:none;width:14px;height:14px;border-radius:50%;background:#2a2a2e;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transform:translateY(-.08em);transition:background .5s,box-shadow .5s}
/* groen = in orde, oranje = niet in orde (niet gekoppeld of fout), grijs (nvt) = niet van toepassing */
[data-staat=aan] .lamp{background:var(--groen);box-shadow:0 0 0 4px rgba(63,212,111,.14),0 0 20px rgba(63,212,111,.7)}
[data-staat=uit] .lamp,[data-staat=fout] .lamp{background:var(--oranje);box-shadow:0 0 0 4px rgba(237,106,53,.16),0 0 20px rgba(237,106,53,.7)}
.meter[data-staat=aan] .lamp{animation:gloei 3.4s ease-in-out infinite}
@keyframes gloei{50%{box-shadow:0 0 0 6px rgba(63,212,111,.07),0 0 28px rgba(63,212,111,.85)}}
.stand span{transition:opacity .4s}
.rail[aria-busy=true] .stand span{opacity:.35}
.uitleg{font-size:14px;line-height:1.55;color:var(--grijs2)}
.uitleg.zacht{color:var(--grijs);margin-top:2px}
.uitleg b{color:var(--wit);font-weight:600}
.meter .uitleg{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.meter.getoond .uitleg{opacity:1;transform:none}
.meter.getoond .uitleg.zacht{transition-delay:.08s}

/* analytics & vindbaarheid: uitklap direct onder de rail */
.vind{border-bottom:1px solid var(--lijn);margin-bottom:clamp(48px,7vh,88px)}
.vind summary{display:flex;align-items:center;gap:18px;padding:20px 0;cursor:pointer;list-style:none;user-select:none}
.vind summary::-webkit-details-marker{display:none}
.vind summary:focus-visible{outline-offset:-2px}
.vind-titel{font-size:15px;font-weight:700;white-space:nowrap}
.vind-titel em{color:var(--oranje);font-size:1.2em;margin-left:2px}
.vind-lampjes{display:flex;gap:7px;margin-left:6px}
.vind-lampjes .lamp{display:block;width:8px;height:8px;box-shadow:none;transform:none}
.vind-telling{margin-left:auto;font-size:14px;color:var(--grijs2);white-space:nowrap}
.pijltje{flex:none;color:var(--grijs2);transition:transform .35s var(--ease),color .2s}
.vind summary:hover .pijltje,.vind summary:hover .vind-telling{color:var(--wit)}
.vind[open] .pijltje{transform:rotate(180deg)}
.vind[open] .vind-inhoud{animation:uitklap .45s var(--ease)}
@keyframes uitklap{from{opacity:0;transform:translateY(-8px)}}
.vind-uitleg{color:var(--grijs);font-size:14px;margin:0 0 14px}
.vind-inhoud{padding-bottom:12px}
.vind-tabel{width:100%;border-collapse:collapse;border-top:1px solid var(--lijn);font-size:15px}
.vind-tabel tr{border-bottom:1px solid var(--lijn)}
.vind-tabel tr:last-child{border-bottom:0}
.vind-tabel td,.vind-tabel th{padding:19px 0;vertical-align:baseline;text-align:left}
.vind-tabel .r-lamp{width:30px}
.vind-tabel .lamp{display:inline-block;width:10px;height:10px;transform:none}
.vind-tabel th{font-weight:700;width:26%;padding-right:20px}
.r-stand{font-weight:600;width:24%;padding-right:20px;white-space:nowrap}
.r-detail{color:var(--grijs2);font-size:14px;line-height:1.55}
.r-detail b{color:var(--wit);font-weight:600}
[data-staat=uit] .r-stand,[data-staat=fout] .r-stand{color:var(--oranje2)}
[data-staat=nvt] .r-stand{color:var(--grijs)}
.vind-tabel[aria-busy=true] .r-stand{opacity:.35}
.vind-tabel tr .r-detail{opacity:0;transition:opacity .5s var(--ease)}
.vind-tabel tr.getoond .r-detail{opacity:1}

/* webwinkel-lagen (alleen sites met een winkel) */
.winkel{margin:0 0 clamp(48px,7vh,88px)}
.w-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--lijn)}
.w-rij:first-child{border-top:1px solid var(--lijn2)}
.w-blok{padding:30px clamp(20px,2.6vw,40px) 34px;border-left:1px solid var(--lijn);min-width:0}
.w-blok:first-child{border-left:0;padding-left:0}
.w-blok:last-child{padding-right:0}
.w-blok h2{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);line-height:1.4}
.w-blok .stand{font-size:clamp(26px,2.4vw,36px);margin:20px 0 14px}
.winkel[aria-busy=true] .stand span{opacity:.35}
[data-staat=nvt] .lamp{background:#2a2a2e}
.w-lijst{margin-top:22px;font-size:14px}
.w-lijst:empty{display:none}
.w-regel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--lijn)}
.w-regel:last-child{border-bottom:1px solid var(--lijn)}
.w-regel .w-a{color:var(--grijs);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}
.w-regel .w-b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-regel .w-b small{color:var(--grijs);font-size:13px;margin-left:6px}
.w-regel .w-c{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.w-regel .w-c.goed{color:var(--groen)}
.w-regel .w-c.mis{color:var(--oranje2)}
.w-leeg{color:var(--grijs);font-size:14px;padding:12px 0;border-top:1px solid var(--lijn)}
.w-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:9px 0;border-top:1px solid var(--lijn)}
.w-cat:last-of-type{border-bottom:1px solid var(--lijn)}
.w-cat .w-balk{grid-column:1/-1;height:2px;background:var(--lijn)}
.w-cat .w-balk i{display:block;height:100%;background:var(--oranje);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.w-cat b{font-weight:600;font-variant-numeric:tabular-nums}
.w-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:600;border-bottom:1px solid var(--lijn2);padding-bottom:1px}
.w-link:hover{border-color:var(--oranje)}
.w-link svg{align-self:center}
.w-rec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.w-rec a{display:block;min-width:0}
.w-rec img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--inkt3);transition:transform .6s var(--ease),opacity .3s}
.w-rec a:hover img{transform:scale(1.03)}
.w-rec span{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:var(--grijs2);overflow-wrap:anywhere}
.w-rec small{display:block;font-size:12px;color:var(--grijs);margin-top:2px}

.venster{border:1px solid var(--lijn);border-radius:6px;overflow:hidden;background:var(--inkt2)}
.venster-balk{display:flex;align-items:center;gap:18px;padding:12px 18px;border-bottom:1px solid var(--lijn);font-size:13px}
.stipjes{display:flex;gap:7px}
.stipjes i{width:10px;height:10px;border-radius:50%;background:#2c2c30}
.adres{flex:1;min-width:0;text-align:center;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bekijk{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.bekijk svg{align-self:center;transition:transform .3s var(--ease)}
.bekijk:hover{color:var(--oranje2)}
.bekijk:hover svg{transform:translate(2px,-2px)}
.venster-beeld{display:block;aspect-ratio:16/10;overflow:hidden}
.venster-beeld img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.venster-beeld:hover img{transform:scale(1.015)}
.d-voet a:hover{color:var(--wit)}

/* =========================== RESPONSIVE =========================== */
@media (max-width:1080px){
  .l-main{grid-template-columns:minmax(0,1fr);align-content:end;gap:36px}
  .l-tekst{align-self:auto;padding-bottom:0}
  .kaart{max-width:520px}
  .poort-waas{background:linear-gradient(0deg,var(--inkt) 0%,rgba(11,11,12,.93) 42%,rgba(11,11,12,.74) 66%,rgba(11,11,12,.5) 86%,rgba(11,11,12,.6) 100%)}
}
@media (max-width:1180px){.w-rec{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .w-rij{grid-template-columns:minmax(0,1fr)}
  .w-blok,.w-blok:first-child{border-left:0;padding:24px 0 28px}
  .w-blok + .w-blok{border-top:1px solid var(--lijn)}
  .w-rec{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter);scrollbar-width:none}
  .w-rec::-webkit-scrollbar{display:none}
  .w-rec a{flex:0 0 58%;scroll-snap-align:start}
  .w-regel{grid-template-columns:minmax(0,1fr) auto}
  .w-regel .w-b{grid-column:1/-1;grid-row:2;white-space:normal}
  .w-regel .w-b small{display:block;margin:2px 0 0}
  .vind-tabel tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:4px;padding:16px 0}
  .vind-tabel td,.vind-tabel th{padding:0;width:auto}
  .vind-tabel .r-lamp{grid-row:1;align-self:center}
  .vind-tabel .r-stand{text-align:right;padding:0}
  .vind-tabel .r-detail{grid-column:2/4;margin-top:6px}
  .rail{grid-template-columns:minmax(0,1fr)}
  .meter,.meter:first-child{border-left:0;border-top:1px solid var(--lijn);padding:24px 0 26px}
  .meter:first-child{border-top:0}
  .stand{margin:16px 0 12px}
}
@media (max-width:560px){
  .vind summary{flex-wrap:wrap;column-gap:12px;row-gap:10px}
  .pijltje{order:2;margin-left:auto}
  .vind summary::after{content:"";order:3;flex-basis:100%;height:0}
  .vind-lampjes{order:4;margin-left:0}
  .vind-telling{order:5;margin-left:auto}
  .l-kop{padding-top:20px}
  .l-tekst h1{font-size:clamp(40px,12vw,56px);margin:16px 0 18px}
  .l-lead{font-size:16px}
  .kaart{padding:26px 20px 24px}
  .kaart::before{left:20px}
  .kaart h2{font-size:26px;margin-bottom:22px}
  .d-kop{gap:14px}
  .d-kop .l-label{display:none}
  .d-pad{padding-left:14px}
  .uit button{padding:8px 12px}
  .venster-balk{gap:12px;padding:10px 14px}
  .stipjes{display:none}
  .adres{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}