/* Apex Management Dashboard — huisstijl Apex Gym: zwart/wit, blauw #4E71FF, oranje alleen voor signalen, Poppins. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --zwart:#000;--wit:#fff;--blauw:#4E71FF;--blauw-d:#3a5ae6;--grijs:#98A2B3;--licht:#B7BECC;
  --oranje:#F59E0B;--kaart:#0e0e0e;--kaart2:#141414;--rand:#1f1f1f;--rand2:#2a2a2a;--rood:#ef4444;
}
html{background:var(--zwart)}
body{background:var(--zwart);color:var(--wit);font-family:'Poppins',system-ui,-apple-system,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex}
a{color:var(--blauw);text-decoration:none}
h1{font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:26px;line-height:1.15}
h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.10em;color:var(--grijs);margin:0 0 12px}
h2 .zacht,h3 .zacht{text-transform:none;letter-spacing:0;font-weight:400;color:var(--grijs)}
h2 .link{float:right;text-transform:none;letter-spacing:0;font-weight:500}
h3{font-size:14px;font-weight:600;margin-bottom:10px}
h4{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);margin:18px 0 8px}
section{margin-bottom:30px}
section.twee{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:980px){section.twee{grid-template-columns:1fr}}

/* zijbalk */
.zijbalk{width:232px;flex:none;background:var(--kaart);border-right:1px solid var(--rand);display:flex;flex-direction:column;
  padding:22px 16px;position:sticky;top:0;height:100vh}
.merk{display:flex;align-items:center;gap:10px;margin:2px 6px 26px}
.merk img{height:30px;display:block}
.hq{font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--blauw);border:1.5px solid var(--blauw);border-radius:6px;padding:1px 7px;line-height:1.4}
.hoofdmenu{display:flex;flex-direction:column;gap:2px}
.hoofdmenu .groep{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--grijs);margin:16px 10px 6px}
.hoofdmenu a,.hoofdmenu .uit{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;color:var(--licht);font-size:14px;font-weight:500}
.hoofdmenu a:hover{background:var(--kaart2);color:var(--wit)}
.hoofdmenu a.actief{background:var(--blauw);color:var(--wit)}
.hoofdmenu .uit{color:#555;cursor:default}
.bol{background:var(--oranje);color:#000;font-size:11px;font-weight:700;border-radius:999px;padding:0 7px;line-height:18px}
.hoofdmenu a.actief .bol{background:#fff;color:var(--blauw)}
.zijvoet{margin-top:auto;border-top:1px solid var(--rand);padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.wie{display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.wie span{color:var(--grijs);font-size:11.5px}

/* inhoud */
.inhoud{flex:1;min-width:0;padding:26px 30px 50px;max-width:1280px}
.kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.keuze{display:inline-flex;margin-top:12px;border:1px solid var(--rand2);border-radius:10px;overflow:hidden}
.keuze a{padding:7px 16px;font-size:13px;font-weight:600;color:var(--licht);border-right:1px solid var(--rand2)}
.keuze a:last-child{border-right:0}
.keuze a[aria-selected="true"]{background:var(--wit);color:var(--zwart)}
.stand{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--grijs);border:1px solid var(--rand);padding:6px 12px;border-radius:999px;white-space:nowrap}
.stip{width:7px;height:7px;border-radius:50%;background:var(--blauw);flex:none}
.stand.oud{color:var(--oranje);border-color:#3a2c08}.stand.oud .stip{background:var(--oranje)}

.balk{border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:16px;border:1px solid}
.balk.fout{background:#1d0b0b;border-color:#4a1d1d;color:#fca5a5}
.balk.let{background:#1b1404;border-color:#3a2c08;color:#fcd34d}
.balk.info{background:#0d1424;border-color:#1c2b4d;color:var(--licht)}
.balk code{display:block;margin-top:6px;word-break:break-all;font-size:12.5px;color:#fff;background:#000;padding:8px;border-radius:6px}

.tegels{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:12px}
@media(min-width:760px){.tegels.drie{grid-template-columns:repeat(3,1fr)}.tegels.vier{grid-template-columns:repeat(4,1fr)}.tegels.vijf{grid-template-columns:repeat(5,1fr)}}
@media(min-width:760px) and (max-width:1100px){.tegels.vijf{grid-template-columns:repeat(3,1fr)}}
.tegel,.kaart{background:var(--kaart);border:1px solid var(--rand);border-radius:12px;padding:16px 18px}
.groot{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.groot.op{color:var(--blauw)}.groot.neer{color:var(--oranje)}
.klein{font-size:12px;color:var(--grijs);margin-top:5px}
.delta{font-size:11.5px;margin-top:7px;font-weight:500;color:var(--licht)}
.delta.op{color:var(--blauw)}.delta.neer{color:var(--oranje)}
td.neer,.getal.neer{color:var(--oranje)}

.rij{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rand)}
.rij:last-child{border-bottom:0}
.rij .naam{color:var(--licht);font-size:13.5px}.rij .getal{font-weight:700;font-size:16px}

.sein{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--rand)}
.sein:last-child{border-bottom:0}
.balkje{width:3px;border-radius:3px;flex:none}
.z1 .balkje{background:var(--oranje)}.z2 .balkje{background:var(--grijs)}.z3 .balkje{background:var(--blauw)}
.plek{font-size:11px;color:var(--blauw);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:3px}
.seinkop{font-weight:600;font-size:14px;margin-bottom:3px}
.uitleg{font-size:13px;color:var(--licht)}

.grafiek{width:100%;height:auto;display:block}
.grafiek .raster{stroke:var(--rand2);stroke-width:1}
.grafiek .as{fill:var(--grijs);font-size:10px;font-family:inherit}
.leeg{color:var(--grijs);font-size:13px;padding:20px 0}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--rand2)}
td{padding:10px;border-bottom:1px solid var(--rand)}
tbody tr:last-child td{border-bottom:0}
th:not(:first-child),td:not(:first-child){text-align:right}
.tabelkaart{padding:6px 8px;overflow-x:auto}
table.strak td,table.strak th{padding:7px 6px;text-align:left}
.acties{display:flex;gap:6px;justify-content:flex-end}
.label{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--rand2);color:var(--licht);text-transform:lowercase}
.label.actief{border-color:#1d3d2a;color:#4ade80}.label.gepauzeerd{color:var(--grijs)}.label.fout{border-color:#4a1d1d;color:#fca5a5}

.let{background:#0d1424;border:1px solid #1c2b4d;border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--licht)}
.klein-tekst{font-size:12.5px;color:var(--grijs);margin-top:8px}
.groot-tekst{font-size:16px;margin-bottom:16px}
.voet{margin-top:36px;font-size:11px;color:var(--grijs);line-height:1.7}

.knop{display:inline-block;background:var(--blauw);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.knop:hover{background:var(--blauw-d)}
.knop.stil{background:transparent;border:1px solid var(--rand2);color:var(--licht);padding:6px 10px;font-size:11.5px}
.knop.stil:hover{border-color:var(--grijs);color:#fff}

.formulier,.inlogkaart form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--licht);font-weight:500}
label small{color:var(--grijs);font-weight:400}
label.vink{flex-direction:row;align-items:center;gap:8px}
input,select{background:#000;border:1px solid var(--rand2);border-radius:8px;color:#fff;padding:10px 12px;font:inherit;font-size:14px}
input:focus,select:focus{outline:2px solid var(--blauw);border-color:var(--blauw)}

/* horizontale staafjes (woonplaatsen) */
.staafjes{display:flex;flex-direction:column;gap:9px}
.staafje{display:grid;grid-template-columns:130px 1fr 110px;gap:12px;align-items:center;font-size:13px}
.staafje .naam{color:var(--licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staafje .balkvak{height:8px;background:var(--rand);border-radius:4px;overflow:hidden}
.staafje .vul{display:block;height:100%;background:var(--blauw);border-radius:4px}
.staafje .getal{text-align:right;font-weight:600}.staafje .getal small{color:var(--grijs);font-weight:400;margin-left:4px}
/* trechter */
.trechter{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border:1px solid var(--rand);border-radius:12px;overflow:hidden;background:var(--kaart)}
.trede{padding:18px;border-right:1px solid var(--rand);position:relative}
.trede:last-child{border-right:0}
.trede+.trede::before{content:"→";position:absolute;left:-8px;top:22px;color:var(--blauw);font-weight:800;background:var(--kaart);padding:0 2px}
@media(max-width:700px){.trede{border-right:0;border-bottom:1px solid var(--rand)}.trede+.trede::before{content:"↓";left:18px;top:-10px}}
/* vergelijking */
table.vergelijk td.winnaar,td.winnaar{color:var(--blauw);font-weight:700}
table.vergelijk tr.kopregel td{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--grijs);padding-top:18px;text-align:left}
table.vergelijk td.zacht{color:var(--grijs)}

/* advertentiekaarten */
.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:10px}
.adkaart{background:var(--kaart);border:1px solid var(--rand);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.adbeeld{position:relative;aspect-ratio:4/3;background:#060606;overflow:hidden}
.adbeeld img{width:100%;height:100%;object-fit:cover;display:block}
.geenbeeld{display:grid;place-items:center;height:100%;color:var(--grijs);font-size:12px}
.adsoort{position:absolute;left:10px;top:10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.7);color:#fff;padding:3px 8px;border-radius:999px}
.adtekst{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.adkop{font-weight:600;font-size:13.5px;color:var(--wit)}
.adbody{font-size:12.5px;color:var(--licht);line-height:1.5;white-space:pre-line}
.adcijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;margin-top:8px;padding-top:10px;border-top:1px solid var(--rand);font-size:11px;color:var(--grijs)}
.adcijfers strong{display:block;color:var(--wit);font-size:14px;font-weight:700}
.adcijfers .neer strong{color:var(--oranje)}

.doelbalk{height:5px;background:var(--rand);border-radius:3px;margin-top:10px;overflow:hidden}
.doelbalk span{display:block;height:100%;background:var(--oranje);border-radius:3px}
.doelbalk span.ok{background:var(--blauw)}

.filterbalk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.filterbalk .keuze{margin:0}
.filterbalk input[type=search]{min-width:260px;padding:8px 12px}
.adkaart.stil{opacity:.72}
.adstatus{position:absolute;right:10px;top:10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.7);color:var(--grijs)}
.adstatus.actief{color:#4ade80}

/* losse pagina's (inloggen) */
.los{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 16px;background:#000;position:relative;overflow:hidden}
.inlogkaart{width:100%;max-width:400px;background:var(--kaart);border:1px solid var(--rand);border-radius:14px;padding:34px 30px;position:relative;z-index:2}
.inlogkaart .logo{height:36px;margin-bottom:22px}
.inlogkaart h1{margin-bottom:18px;font-size:30px}
.inlogkaart .sub{color:var(--grijs);font-size:13.5px;margin-bottom:20px}
.inlogkaart .knop{margin-top:6px;width:100%;padding:13px;display:flex;justify-content:center;gap:10px}
.inlogkaart .knop .pijl{transition:transform .2s}
.inlogkaart .knop:hover .pijl{transform:translateX(4px)}
.inlogkaart .klein{font-size:11.5px;color:var(--grijs);margin-top:18px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blauw);margin-bottom:10px}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

/* ---- de poort: het inlogscherm. Zwart, merk, tagline, inlogvak. Meer niet. ---- */
.los{background:#000}
.poort{position:relative;z-index:2;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center}
.poort-merk{display:flex;align-items:center;gap:12px;height:34px}
.poort-merk img{height:34px;width:auto}
.poort-merk .hq{border:0;padding:0;font-size:34px;line-height:1;letter-spacing:.02em;border-radius:0;font-weight:800;color:var(--blauw)}
.poort-tagline{margin:14px 0 34px;font-size:11.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--grijs)}
.inlogkaart{width:100%;max-width:none;padding:26px 26px 24px;border-color:#1a1a1a;background:#0a0a0a}
.inlogkaart .knop{margin-top:8px;width:100%;padding:14px;display:block}
.inlogkaart form{gap:14px}
.inlogkaart label{font-size:12px;color:var(--grijs);letter-spacing:.02em}
.inlogkaart input{padding:12px 13px;background:#000;border-color:#242424}
.inlogkaart input:focus{border-color:var(--blauw)}

/* ---- intro ------------------------------------------------------------
   Tijdlijn 'vol' (eerste keer per sessie), in seconden:
     0.00  zwart
     0.10  X: scherp uit onscherpte, schaal 1.4 -> 1, zet zich (settle), kort blauw licht
     0.95  X: lost op naar voren (schaal op, onscherp)
     1.15  APEX: blur -> scherp, licht omhoog
     1.30  HQ: letters van uit elkaar naar hun plek, blur -> scherp
     1.95  het merk krimpt en reist naar zijn plek boven het inlogvak; zwart lost op
     2.15  inlogvak komt op; 2.45 merk in de pagina neemt het over
   'kort' (refresh): alleen APEX HQ scherp en reizen, klaar rond 1.2 s.
   Alleen transform / opacity / filter -> blijft op de GPU, geen layout-verschuiving.
--------------------------------------------------------------------------- */
:root{--lift:171px;--krimp:.283}
@media(max-width:600px){:root{--lift:171px;--krimp:.81}}
.intro{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-items:center;pointer-events:none;contain:strict}
.intro>*{grid-area:1/1}
.ix{height:clamp(150px,24vw,320px);width:auto;opacity:0;will-change:transform,opacity,filter;
  animation:x-in .85s cubic-bezier(.22,1,.36,1) .10s forwards, x-settle .45s cubic-bezier(.33,1,.68,1) .9s, x-glow 1s cubic-bezier(.33,1,.68,1) .5s, x-uit .5s cubic-bezier(.55,0,.85,.4) 1.35s forwards}
@keyframes x-in{from{opacity:0;transform:scale(1.6);filter:blur(18px)}60%{opacity:1}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes x-settle{0%{transform:scale(1)}50%{transform:scale(.985)}100%{transform:scale(1)}}
@keyframes x-glow{0%{filter:drop-shadow(0 0 0 rgba(78,113,255,0))}40%{filter:drop-shadow(0 0 34px rgba(78,113,255,.5))}100%{filter:drop-shadow(0 0 0 rgba(78,113,255,0))}}
@keyframes x-uit{to{opacity:0;transform:scale(1.18);filter:blur(14px)}}
.iw{display:flex;align-items:center;gap:calc(12px / var(--krimp));will-change:transform,opacity}
.iw-apex{height:clamp(42px,9vw,120px);width:auto;opacity:0;will-change:transform,opacity,filter}
.iw-hq{font-weight:800;font-size:clamp(42px,9vw,120px);line-height:1;color:var(--blauw);opacity:0;letter-spacing:.02em;will-change:transform,opacity,filter}
.intro.vol .iw-apex{animation:w-in .75s cubic-bezier(.22,1,.36,1) 1.65s forwards}
.intro.vol .iw-hq{animation:hq-in .75s cubic-bezier(.22,1,.36,1) 1.85s forwards}
.intro.vol .iw{animation:reis .8s cubic-bezier(.65,0,.35,1) 2.7s forwards, merk-weg .2s linear 3.35s forwards}
.intro.vol{animation:zwart-weg .7s ease 2.85s forwards}
.intro.kort .iw-apex{animation:w-in .45s cubic-bezier(.16,1,.3,1) .05s forwards}
.intro.kort .iw-hq{animation:hq-in .45s cubic-bezier(.16,1,.3,1) .12s forwards}
.intro.kort .iw{animation:reis .55s cubic-bezier(.76,0,.24,1) .70s forwards, merk-weg .18s linear 1.15s forwards}
.intro.kort{animation:zwart-weg .45s ease .78s forwards}
@keyframes w-in{from{opacity:0;transform:translateY(12px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes hq-in{from{opacity:0;letter-spacing:.5em;filter:blur(8px)}to{opacity:1;letter-spacing:.02em;filter:blur(0)}}
@keyframes reis{to{transform:translateY(calc(-1 * var(--lift))) scale(var(--krimp))}}
@keyframes merk-weg{to{opacity:0}}
@keyframes zwart-weg{to{background:rgba(0,0,0,0)}}
/* de pagina eronder: stil tot het merk landt, dan in één beweging op */
.poort.na-intro .poort-merk{opacity:0}
.poort.na-intro .inlogkaart,.poort.na-intro .poort-tagline{opacity:0;transform:translateY(14px);will-change:transform,opacity}
.poort.na-intro.vol .poort-merk{animation:fade .25s linear 3.35s forwards}
.poort.na-intro.vol .inlogkaart{animation:op .8s cubic-bezier(.22,1,.36,1) 3.0s forwards}
.poort.na-intro.vol .poort-tagline{animation:op .8s cubic-bezier(.22,1,.36,1) 3.2s forwards}
.poort.na-intro.kort .poort-merk{animation:fade .25s linear 1.15s forwards}
.poort.na-intro.kort .inlogkaart{animation:op .5s cubic-bezier(.16,1,.3,1) .9s forwards}
.poort.na-intro.kort .poort-tagline{animation:op .5s cubic-bezier(.16,1,.3,1) 1.05s forwards}
@keyframes op{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .intro{animation:none;background:#000;opacity:0;transition:opacity .4s ease .3s;animation:fade-uit .4s ease .3s forwards}
  .intro *{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .intro.vol .ix{display:none}
  .poort.na-intro *{animation:none!important;opacity:1!important;transform:none!important}
}
@keyframes fade-uit{from{opacity:1}to{opacity:0;visibility:hidden}}

/* tablet en kleiner: zijbalk wordt een bovenbalk */
@media(max-width:900px){
  body{flex-direction:column}
  .zijbalk{width:100%;height:auto;position:static;flex-direction:row;align-items:center;flex-wrap:wrap;padding:12px 16px;gap:8px}
  .merk{margin:0 14px 0 0}
  .merk img{height:26px}
  .hoofdmenu{flex-direction:row;flex-wrap:wrap;gap:4px}
  .hoofdmenu .groep,.hoofdmenu .uit{display:none}
  .hoofdmenu a{padding:7px 12px;font-size:13px}
  .zijvoet{margin:0 0 0 auto;border:0;padding:0}
  .inhoud{padding:18px 16px 40px}
  .groot{font-size:26px}
  .kaarten{grid-template-columns:1fr}
  .staafje{grid-template-columns:90px 1fr 90px}
}

@media print{
  body{background:#fff;color:#000}.zijbalk,.kop .keuze,.stand,.voet,.let{display:none}
  .kaart,.tegel{border-color:#ccc;background:#fff}td,th{color:#000;border-color:#ddd}.inhoud{padding:0;max-width:none}
}