@font-face{font-family:Inter;src:url(inter.woff2) format('woff2');font-weight:100 900;font-display:block}
:root{
  --bg:#F6F4EE;--ink:#2A2A28;--olijf:#505340;--lijn:#DCD9CF;--lijn2:#ECE9E1;--spoor:#EFECE4;
  --dempt:#5F5E55;--zacht:#6E6D63;--salie:#AAAB99;
  --limoen:#CFDC6A;--oker:#E8A93C;--oker-d:#B97A12;--oker-tekst:#8A5A0A;--petrol:#2C5D57;--groen:#3E6B3A;
  --r-tegel:22px;--r-held:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--olijf)}a:hover{color:var(--ink)}
img{max-width:100%}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid #1B1C18;outline-offset:3px;box-shadow:0 0 0 6px var(--limoen)}
.nav :focus-visible,.donker :focus-visible,.held :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px #1B1C18}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@view-transition{navigation:auto}
.nav-wrap{view-transition-name:menubalk}

.pagina{max-width:1312px;margin:0 auto;padding:24px 28px 140px;display:flex;flex-direction:column;gap:18px;animation:fade .45s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* held */
.held{position:relative;border-radius:var(--r-held);overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;padding:26px 30px 30px;color:var(--bg);isolation:isolate}
.held.laag{min-height:230px}
.held>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.06);animation:zoom 1.6s ease-out both}
.held::before{content:"";position:absolute;inset:0;background:rgba(36,36,32,.6);z-index:-1}
@keyframes zoom{to{transform:scale(1)}}
.held-top{display:flex;align-items:center;gap:12px}
.merk{font-size:18px;word-spacing:-.16em;color:var(--bg)}
.merk b{font-weight:800}.merk span{font-weight:600}
.avatar{margin-left:auto;width:40px;height:40px;border-radius:999px;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.held-onder{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.held-tekst{display:flex;flex-direction:column;gap:8px}
.groet{font-size:46px;line-height:1.05;font-weight:700;letter-spacing:-.03em}
.held-tekst p{font-size:16px;color:#E6E4DA}
.vraag{flex:0 1 440px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--bg);transition:box-shadow .2s}
.vraag:focus-within{box-shadow:0 0 0 4px rgba(207,220,106,.8)}
.vraag input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:500 15px Inter,system-ui,sans-serif}
.vraag input::placeholder{color:#6E6D63}
.knop-olijf{height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--olijf);color:var(--bg);font:700 14px Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .15s}
.knop-olijf:hover{background:#3F4232}.knop-olijf:active{transform:scale(.97)}

/* tegels */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.rij{display:flex;gap:16px}
.rij>.breed{flex:1.65 1 0;min-width:0}.rij>.smal{flex:1 1 0;min-width:0}
.tegel{padding:22px;border-radius:var(--r-tegel);background:#fff;border:1px solid var(--lijn);display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}
.tegel.ruim{padding:24px;gap:16px}
a.tegel,button.tegel{text-decoration:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tegel.kaart:hover,a.tegel:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(42,42,40,.10);border-color:#C9C5B8}
.tegel-kop{display:flex;align-items:center;gap:10px}
.tegel-kop h2{font-size:15px;font-weight:600}
.ico{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink)}
.ico svg{width:17px;height:17px}
.limoen{background:var(--limoen)}.oker{background:var(--oker)}.petrol{background:var(--petrol);color:var(--bg)}
.groot{font-size:38px;line-height:1;font-weight:800;letter-spacing:-.03em}
.tegel p,.klein{font-size:14px;color:var(--dempt)}
.tegel h2.titel,.titel{font-size:17px;font-weight:700}
.tegelkop{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.sub{font-size:13px;color:var(--zacht);line-height:1.5}

/* aanschuiven */
.rise{opacity:0;transform:translateY(16px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*70ms + 120ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* periode schakelaar */
.schakel{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--spoor)}
.schakel button{height:34px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--dempt);font:600 13px Inter,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.schakel button:hover{color:var(--ink)}
.schakel button[aria-pressed=true]{background:var(--ink);color:var(--bg)}

/* grafiek */
.grafiek{display:flex;flex-direction:column;gap:8px}
.grafiek svg{width:100%;height:220px;display:block;overflow:visible}
.assen{display:flex;justify-content:space-between;font-size:12px;color:var(--zacht)}
.legenda{display:flex;gap:18px;font-size:13px;color:var(--dempt);flex-wrap:wrap}
.legenda span{display:flex;align-items:center;gap:7px}
.legenda i{width:14px;height:3px;border-radius:999px;display:block}
.lijn{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:teken 1.6s ease-out .35s forwards}
@keyframes teken{to{stroke-dashoffset:0}}
.vlak{opacity:0;animation:fade 1s ease 1.1s forwards}

/* donut */
.donut{position:relative;width:176px;height:176px;align-self:center}
.donut svg{width:176px;height:176px}
.donut circle.deel{transition:stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1)}
.donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.donut-mid b{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.donut-mid span{font-size:13px;color:var(--dempt)}
.lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.lijst li{display:flex;align-items:center;gap:10px}
.lijst li span:nth-child(2){flex:1}.lijst li b{font-weight:700}
.stip{width:9px;height:9px;border-radius:999px;flex:none;display:inline-block}

/* donkere tegel */
.donker{padding:22px;border-radius:var(--r-tegel);background:var(--ink);color:var(--bg);display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.donker .foto{flex:0 1 280px;min-width:200px;border-radius:14px;overflow:hidden;background:#F4F3EE}
.donker .foto img{display:block;width:100%;height:170px;object-fit:cover;object-position:top;transition:transform .6s}
.donker:hover .foto img{transform:scale(1.04)}
.donker .tekst{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}
.wacht{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--oker)}
.wacht i{width:8px;height:8px;border-radius:999px;background:var(--oker);animation:puls 2s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 6px rgba(232,169,60,.25)}}
.donker h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.donker p{font-size:15px;line-height:1.5;color:#D6D4C6}
.knoppen{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn{height:44px;padding:0 18px;border-radius:999px;border:1px solid transparent;font:700 14px Inter,system-ui,sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.97)}
.btn.oker{background:var(--oker);color:#1B1C18}.btn.oker:hover{background:#F0B755;color:#1B1C18}
.btn.rand{background:transparent;color:var(--bg);border-color:rgba(246,244,238,.3);font-weight:600}.btn.rand:hover{border-color:rgba(246,244,238,.7);color:var(--bg)}
.btn.licht{background:#fff;color:var(--ink);border-color:var(--lijn);font-weight:600}.btn.licht:hover{border-color:var(--olijf);color:var(--ink)}
.btn.olijf{background:var(--olijf);color:var(--bg)}.btn.olijf:hover{background:#3F4232;color:var(--bg)}
.btn.klein{height:36px;padding:0 14px;font-size:13px}

/* logboek */
.log{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--lijn2);font-size:14px}
.log span:first-child{flex:1}.log span:last-child{color:var(--zacht)}
.tegel .noot{padding-top:10px;border-top:1px solid var(--lijn2);font-size:13px;line-height:1.5;color:var(--zacht)}

/* menubalk */
.nav-wrap{position:fixed;left:0;right:0;bottom:18px;z-index:50;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
.nav-in{display:flex;align-items:center;gap:8px;max-width:100%;pointer-events:auto}
.nav{display:flex;gap:2px;padding:6px;border-radius:999px;background:var(--ink);box-shadow:0 16px 40px rgba(42,42,40,.28);overflow-x:auto;scrollbar-width:none;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{height:44px;padding:0 18px;border-radius:999px;color:var(--bg);font-size:15px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{background:rgba(246,244,238,.12);color:var(--bg)}
.nav a[aria-current=page]{background:var(--limoen);color:var(--ink);font-weight:700}
.nav .telt{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--oker);color:#1B1C18;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.plus{width:56px;height:56px;flex:none;border-radius:999px;border:0;background:var(--olijf);color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 16px 40px rgba(42,42,40,.28);transition:transform .2s,background .2s}
.plus:hover{background:#3F4232;transform:rotate(90deg) scale(1.05)}

/* uptime */
.balken{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;height:44px;align-items:end}
.balken i{display:block;height:100%;border-radius:4px;background:var(--olijf);transform-origin:bottom;transform:scaleY(0);animation:groei .5s ease-out forwards;animation-delay:calc(var(--n)*22ms + 300ms)}
.balken i.dip{background:var(--oker)}
@keyframes groei{to{transform:scaleY(1)}}
.balk-as{display:flex;justify-content:space-between;font-size:12px;color:var(--zacht)}
.feiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feit{display:flex;flex-direction:column;gap:6px}
.feit b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.feit span{font-size:13px;color:var(--dempt)}
.feit .k{font-size:13px;font-weight:600;color:var(--ink)}

/* labels */
.label{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.label.wacht-l{background:#FBEBC8;color:#6B4400}
.label.bouw{background:#E7E8DC;color:#3F4232}
.label.live{background:#DDE9D6;color:#2C4F27}
.label.open{background:#FBEBC8;color:#6B4400}
.label.betaald{background:#DDE9D6;color:#2C4F27}
.label.ja{background:#DDE9D6;color:#2C4F27}
.label.grijs{background:var(--spoor);color:var(--dempt)}

/* rijen/tabellen */
.tabel{width:100%;border-collapse:collapse;font-size:14px}
.tabel th{text-align:left;font-size:12px;font-weight:600;color:var(--zacht);padding:0 8px 10px 0;border-bottom:1px solid var(--lijn)}
.tabel td{padding:13px 8px 13px 0;border-bottom:1px solid var(--lijn2);vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel .r{text-align:right;padding-right:0}
.tabel th.r{padding-right:0}
.tabel tbody tr{transition:background .15s}
.tabel tbody tr:hover{background:#FAF9F5}
.scroll{overflow-x:auto}
.pijl{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px}
.pijl.op{color:var(--groen)}.pijl.neer{color:#9A3A1F}.pijl.gelijk{color:var(--dempt)}
.pijl svg{width:14px;height:14px}
.plek{font-size:20px;font-weight:800;letter-spacing:-.02em}
.persoon{display:flex;align-items:center;gap:12px}
.init{width:38px;height:38px;border-radius:999px;background:var(--spoor);color:var(--olijf);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.persoon b{display:block;font-size:14px;font-weight:700}
.persoon span{font-size:13px;color:var(--dempt)}
.rijlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rijlijst>li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--lijn2);flex-wrap:wrap}
.rijlijst>li:first-child{border-top:0;padding-top:4px}
.rijlijst .tx{flex:1 1 220px;min-width:0}
.rijlijst .tx b{display:block;font-size:15px;font-weight:700}
.rijlijst .tx span{font-size:13px;color:var(--dempt)}
.rijlijst .dat{font-size:13px;color:var(--zacht);min-width:52px;text-align:right}
.meter{height:8px;border-radius:999px;background:var(--spoor);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--olijf);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.kanaal{display:flex;flex-direction:column;gap:6px}
.kanaal-kop{display:flex;justify-content:space-between;font-size:14px}
.kanaal-kop b{font-weight:700}
.kanaalbalk{display:flex;height:16px;border-radius:999px;overflow:hidden;gap:3px;background:transparent}
.kanaalbalk i{display:block;height:100%;width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.leeg{background:#FAF9F5;border-style:dashed}
.leeg .groot{font-size:26px;color:var(--dempt)}
.site-groot{border-radius:16px;overflow:hidden;border:1px solid var(--lijn);background:#F4F3EE;position:relative}
.site-groot img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;object-position:top}
.site-balk{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--lijn);font-size:13px;color:var(--dempt)}
.site-balk i{width:10px;height:10px;border-radius:999px;background:var(--lijn);display:block}
.site-balk span{margin-left:8px;padding:4px 12px;border-radius:999px;background:var(--spoor);color:var(--ink);font-weight:600}
.factuurnr{font-variant-numeric:tabular-nums}
.bedrag{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.voet{margin-top:6px;font-size:12px;color:var(--zacht);line-height:1.5;display:flex;flex-direction:column;gap:4px}
.voet a{color:var(--zacht)}

/* dialogen */
.sluier{position:fixed;inset:0;background:rgba(36,36,32,.55);z-index:90;display:none;align-items:flex-end;justify-content:center;padding:16px}
.sluier.aan{display:flex;animation:fade .25s ease both}
.paneel{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;animation:op .35s cubic-bezier(.2,.8,.2,1) both}
.paneel.breed{width:min(820px,100%)}
@keyframes op{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.paneel-kop{display:flex;align-items:center;gap:12px;padding:20px 22px 12px}
.paneel-kop h2{flex:1;font-size:20px;font-weight:800;letter-spacing:-.02em}
.sluit{width:40px;height:40px;border-radius:999px;border:1px solid var(--lijn);background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sluit:hover{border-color:var(--olijf)}
.paneel-body{padding:6px 22px 22px;display:flex;flex-direction:column;gap:14px}
.chat{display:flex;flex-direction:column;gap:10px}
.bel{max-width:88%;padding:12px 16px;border-radius:20px;font-size:15px;line-height:1.45;animation:rise .4s ease both}
.bel.sys{align-self:flex-start;background:#fff;border:1px solid var(--lijn);border-bottom-left-radius:6px}
.bel.ik{align-self:flex-end;background:var(--olijf);color:var(--bg);border-bottom-right-radius:6px}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuze{height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--lijn);background:#fff;color:var(--ink);font:600 14px Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.keuze:hover{border-color:var(--olijf);background:#FAFBEF;transform:translateY(-2px)}
.veld{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:999px;background:#fff;border:1px solid var(--lijn)}
.veld input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 15px Inter,system-ui,sans-serif;color:var(--ink)}
.veld:focus-within{border-color:var(--olijf)}
.bevestig{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--lijn);animation:rise .45s ease both}
.vink{width:46px;height:46px;border-radius:999px;background:var(--limoen);display:flex;align-items:center;justify-content:center}
.vink svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:teken30 .6s ease .2s forwards}
@keyframes teken30{to{stroke-dashoffset:0}}
.bevestig h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
.bevestig p{font-size:15px;line-height:1.5;color:var(--dempt)}
.zwevend{font-size:12px;color:var(--zacht)}
.factuur-blad{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;font-size:14px}
.factuur-blad .kop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.factuur-blad .kop b{font-size:18px}
.factuur-blad table{width:100%;border-collapse:collapse}
.factuur-blad td{padding:8px 0;border-top:1px solid var(--lijn2)}
.factuur-blad td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.voorbeeld{border-radius:16px;overflow:hidden;border:1px solid var(--lijn);background:#fff}
.voorbeeld img{display:block;width:100%;height:auto}
.voorbeeld figcaption{padding:10px 14px;font-size:13px;color:var(--dempt)}

/* fotovermelding */

@media (max-width:1100px){
  .kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi.drie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feiten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pagina{padding:16px 16px 130px}
  .kpi,.kpi.drie{grid-template-columns:1fr}
  .rij{flex-direction:column}
  .held{padding:22px 20px 22px;border-radius:26px}
  .held-onder{flex-direction:column;align-items:stretch}
  .groet{font-size:32px}
  .vraag{flex:none}
  .groot{font-size:34px}
  .sluier{padding:0;align-items:flex-end}
  .paneel{border-radius:28px 28px 0 0;max-height:92vh}
  .bel{max-width:94%}
  .nav a{padding:0 14px;font-size:14px}
  .feiten{grid-template-columns:1fr 1fr}
}
@media print{
  .nav-wrap,.sluier .sluit,.noprint{display:none!important}
}
.linkknop{background:none;border:0;padding:0;font:inherit;color:var(--olijf);text-decoration:underline;cursor:pointer}
.linkknop:hover{color:var(--ink)}
.stap-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hint{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#F1F3DC;font-size:14px;line-height:1.45;color:#2F3320}
.hint svg{flex:none;margin-top:2px}
.aantal{font-size:13px;font-weight:700;color:var(--dempt)}
[hidden]{display:none!important}

#bezoekers-as span{white-space:nowrap}
.pagina>*{min-width:0}.scroll{max-width:100%}
.scroll{position:relative}