/* =========================================================
   VeendamRP — huisstijl
   Donker, filmisch, met warm goud als accent.
   ========================================================= */

:root{
  --zwart:      #06080b;
  --zwart-2:    #0a0e13;
  --zwart-3:    #0f141b;
  --paneel:     rgba(255,255,255,.035);
  --paneel-op:  rgba(255,255,255,.06);
  --rand:       rgba(255,255,255,.08);
  --rand-op:    rgba(255,255,255,.16);

  --goud:       #f0a93c;
  --goud-diep:  #ff7328;
  --goud-zacht: rgba(240,169,60,.14);
  --live:       #3ddc84;
  --rood:       #ff5b5b;

  --tekst:      #e9edf3;
  --zacht:      #97a3b3;
  --flauw:      #6b7684;

  --breed:      1220px;
  --rond:       18px;
  --rond-klein: 12px;

  --schaduw:    0 24px 60px -20px rgba(0,0,0,.9);
  --gloed:      0 0 0 1px rgba(240,169,60,.35), 0 18px 50px -18px rgba(240,169,60,.45);

  --soepel:     cubic-bezier(.22,.68,.34,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Let op: .mobielmenu en .lichtbak krijgen hieronder display:flex/grid.
   Zonder deze regel wint dat van het hidden-attribuut en staan ze altijd open. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--zwart);
  color:var(--tekst);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.merk,.knop,.telblok b,.tab{
  font-family:'Outfit','Inter',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.08;
}

h2{ font-size:clamp(1.9rem,4vw,3.1rem); margin:0 0 .5rem; }
h3{ font-size:1.22rem; margin:0 0 .45rem; letter-spacing:-.01em; }
h4{ font-size:.95rem; margin:0 0 .9rem; letter-spacing:.02em; text-transform:uppercase; color:var(--tekst); }
p{ margin:0 0 1rem; color:var(--zacht); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--goud); color:#180d02; }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--zwart); }
::-webkit-scrollbar-thumb{ background:#1d242e; border-radius:99px; border:3px solid var(--zwart); }
::-webkit-scrollbar-thumb:hover{ background:#2b3542; }

.omhulsel{ width:100%; max-width:var(--breed); margin-inline:auto; padding-inline:clamp(18px,4vw,32px); }

.overslaan{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--goud); color:#160c02; padding:.6rem 1rem; border-radius:0 0 10px 10px;
  transition:top .2s;
}
.overslaan:focus{ top:0; }

.ico{ width:22px; height:22px; flex:none; }
.ico.klein{ width:16px; height:16px; }

/* Filmkorrel over de hele site */
.korrel{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* Leesvoortgang bovenaan */
.voortgang{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:120;
  background:linear-gradient(90deg,var(--goud),var(--goud-diep));
  box-shadow:0 0 14px rgba(240,169,60,.8);
  transition:width .1s linear;
}

/* =========================================================
   Kopbalk
   ========================================================= */
.balk{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:14px 0;
  transition:padding .35s var(--soepel), background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.balk.vast{
  padding:8px 0;
  background:rgba(6,8,11,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--rand);
}
.balk-in{ display:flex; align-items:center; gap:clamp(14px,3vw,34px); }

.merk{ display:flex; align-items:center; gap:11px; }
.merk-teken{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(145deg,var(--goud),var(--goud-diep));
  color:#1b0f02; font-family:'Outfit',sans-serif; font-weight:900; font-size:1.35rem;
  box-shadow:0 8px 24px -8px rgba(255,140,50,.85);
  transition:transform .35s var(--soepel);
}
.merk:hover .merk-teken{ transform:rotate(-8deg) scale(1.06); }
.merk-tekst strong{ display:block; font-size:1.16rem; letter-spacing:-.03em; }
.merk-tekst strong span{
  background:linear-gradient(90deg,var(--goud),var(--goud-diep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.merk-tekst small{ display:block; font-size:.68rem; color:var(--flauw); letter-spacing:.14em; text-transform:uppercase; }
.merk.groot .merk-teken{ width:48px; height:48px; font-size:1.6rem; }

.menu{ display:flex; gap:4px; margin-left:auto; }
.menu a{
  position:relative; padding:.5rem .85rem; border-radius:10px;
  font-size:.93rem; font-weight:500; color:var(--zacht);
  transition:color .25s, background .25s;
}
.menu a:hover{ color:var(--tekst); background:var(--paneel); }
.menu a.aan{ color:var(--tekst); }
.menu a.aan::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.15rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--goud),var(--goud-diep));
}

.balk-rechts{ display:flex; align-items:center; gap:10px; }

.status-pil{
  display:inline-flex; align-items:center; gap:8px;
  padding:.42rem .8rem; border-radius:99px;
  border:1px solid var(--rand); background:var(--paneel);
  font-size:.85rem; font-weight:600; letter-spacing:.01em;
  transition:border-color .25s, background .25s;
}
.status-pil:hover{ border-color:var(--rand-op); background:var(--paneel-op); }
.status-pil-label{ color:var(--flauw); font-weight:500; }
.stip{
  width:8px; height:8px; border-radius:50%; background:var(--flauw); flex:none;
  box-shadow:0 0 0 0 rgba(61,220,132,.6);
}
.stip.aan{ background:var(--live); animation:klop 2.2s infinite; }
.stip.uit{ background:var(--rood); }
@keyframes klop{
  0%{ box-shadow:0 0 0 0 rgba(61,220,132,.55); }
  70%{ box-shadow:0 0 0 9px rgba(61,220,132,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); }
}

/* Knoppen */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:.7rem 1.15rem; border-radius:12px;
  font-size:.92rem; font-weight:700; letter-spacing:-.01em;
  border:1px solid var(--rand); background:var(--paneel); color:var(--tekst);
  transition:transform .25s var(--soepel), background .25s, border-color .25s, box-shadow .35s;
  white-space:nowrap;
}
.knop:hover{ transform:translateY(-2px); background:var(--paneel-op); border-color:var(--rand-op); }
.knop .ico{ width:19px; height:19px; }

.knop-vol{
  background:linear-gradient(135deg,var(--goud),var(--goud-diep));
  border-color:transparent; color:#170c02;
  box-shadow:0 14px 34px -14px rgba(255,130,45,.9);
}
.knop-vol:hover{ box-shadow:0 20px 42px -14px rgba(255,130,45,1); background:linear-gradient(135deg,#ffbc55,#ff8542); }
.knop-groot{ padding:.95rem 1.6rem; font-size:1rem; border-radius:14px; }
.knop-discord{ background:rgba(88,101,242,.14); border-color:rgba(88,101,242,.34); }
.knop-discord:hover{ background:rgba(88,101,242,.24); border-color:rgba(88,101,242,.55); }

.hamburger{ display:none; padding:.5rem; border-radius:10px; border:1px solid var(--rand); background:var(--paneel); }

.mobielmenu{
  position:fixed; inset:70px 12px auto 12px; z-index:99;
  background:rgba(10,14,19,.97); border:1px solid var(--rand); border-radius:var(--rond);
  padding:10px; display:flex; flex-direction:column; gap:2px;
  box-shadow:var(--schaduw);
  animation:invouw .3s var(--soepel);
}
.mobielmenu a{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-radius:12px; font-weight:600; }
.mobielmenu a:hover,.mobielmenu a.aan{ background:var(--paneel); }
.mobielmenu .knop{ margin-top:8px; }
@keyframes invouw{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }

/* =========================================================
   Hero
   ========================================================= */
.held{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:clamp(120px,16vh,180px) 0 clamp(60px,10vh,110px);
  overflow:hidden; isolation:isolate;
}
.held-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.held-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  animation:kenburns 38s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.16) translate3d(-1.5%,-1.5%,0); }
}

/* Als er (nog) geen screenshot is: een eigen filmische achtergrond */
.held-media.leeg{
  background:
    radial-gradient(120% 80% at 70% 18%, rgba(255,140,50,.30), transparent 58%),
    radial-gradient(90% 70% at 12% 82%, rgba(60,120,220,.22), transparent 60%),
    radial-gradient(60% 50% at 50% 0%, rgba(255,190,120,.14), transparent 70%),
    linear-gradient(180deg,#0b1220 0%,#0a0d14 45%,#06080b 100%);
}
.held-media.leeg::before{
  content:''; position:absolute; inset:auto 0 0 0; height:46%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.85) 0 22px, transparent 22px 30px, rgba(0,0,0,.7) 30px 54px, transparent 54px 66px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.9));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%);
  mask-image:linear-gradient(180deg,transparent,#000 35%);
  opacity:.55;
}
.held-media.leeg::after{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,215,160,.7), transparent),
    radial-gradient(1.6px 1.6px at 63% 24%, rgba(255,215,160,.55), transparent),
    radial-gradient(1.8px 1.8px at 82% 41%, rgba(255,215,160,.5), transparent),
    radial-gradient(1.4px 1.4px at 38% 52%, rgba(255,215,160,.45), transparent);
}

.held-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,8,11,.86) 0%, rgba(6,8,11,.42) 32%, rgba(6,8,11,.72) 68%, var(--zwart) 100%),
    radial-gradient(80% 60% at 20% 55%, rgba(6,8,11,.72), transparent 70%);
}
.held-scrim::after{
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.85);
}

.held-in{ position:relative; max-width:760px; }

.bovenkop{
  display:inline-flex; align-items:center; gap:10px;
  padding:.4rem .9rem .4rem .55rem; border-radius:99px;
  border:1px solid rgba(240,169,60,.28); background:rgba(240,169,60,.09);
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#ffd39a;
  margin-bottom:1.4rem;
}
.bovenkop .stip{ width:7px; height:7px; }

.held h1{
  font-size:clamp(3rem,9.5vw,7rem);
  font-weight:900; letter-spacing:-.045em; line-height:.92;
  margin:0 0 1.1rem;
  text-shadow:0 24px 70px rgba(0,0,0,.75);
}
.held h1 em{
  font-style:normal;
  background:linear-gradient(120deg,#ffd07a 0%,var(--goud) 40%,var(--goud-diep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.held .lood{
  font-size:clamp(1.02rem,1.9vw,1.22rem); color:#c4ccd7; max-width:56ch; margin-bottom:2rem;
  text-shadow:0 2px 20px rgba(0,0,0,.8);
}

.held-knoppen{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.verbindvak{
  margin-top:2.2rem; display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:.85rem 1rem .85rem 1.15rem; border-radius:16px;
  border:1px solid var(--rand); background:rgba(10,14,19,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.verbindvak .label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--flauw); display:block; }
.verbindvak code{
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace; font-size:1.02rem; color:#ffd8a8; letter-spacing:.02em;
}
.kopieer{
  display:inline-flex; align-items:center; gap:8px;
  padding:.5rem .85rem; border-radius:10px; border:1px solid var(--rand); background:var(--paneel);
  font-size:.85rem; font-weight:600; transition:.25s;
}
.kopieer:hover{ background:var(--paneel-op); border-color:var(--rand-op); }
.kopieer.klaar{ border-color:rgba(61,220,132,.5); color:var(--live); }
.kopieer.als-link{ border:0; background:none; padding:0; color:var(--zacht); font-weight:400; font-size:inherit; }
.kopieer.als-link:hover{ color:var(--goud); background:none; }

.omlaag{
  position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--flauw);
}
.omlaag span{ width:1px; height:44px; background:linear-gradient(180deg,transparent,var(--goud)); animation:zak 2.4s infinite; }
@keyframes zak{ 0%,100%{ opacity:.25; transform:scaleY(.5); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }

/* =========================================================
   Secties
   ========================================================= */
section{ position:relative; padding:clamp(70px,10vw,130px) 0; }
.sectie-lijn{ border-top:1px solid var(--rand); }

.kop-blok{ max-width:660px; margin-bottom:clamp(34px,5vw,60px); }
.kop-blok.midden{ margin-inline:auto; text-align:center; }
.oogje{
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--goud); margin-bottom:.9rem;
}
.oogje::before{ content:'—'; margin-right:.6rem; color:var(--flauw); }
.kop-blok p{ font-size:1.05rem; }

/* Cijferbalk */
.cijfers{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rand); border:1px solid var(--rand); border-radius:var(--rond); overflow:hidden;
  margin-top:-1px;
}
.telblok{ background:var(--zwart-2); padding:clamp(20px,3vw,34px); text-align:center; transition:background .3s; }
.telblok:hover{ background:var(--zwart-3); }
.telblok b{ display:block; font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; letter-spacing:-.04em;
  background:linear-gradient(160deg,#fff,#ffca82); -webkit-background-clip:text; background-clip:text; color:transparent; }
.telblok strong{ display:block; font-size:.95rem; margin:.2rem 0 .3rem; }
.telblok small{ color:var(--flauw); font-size:.82rem; line-height:1.4; display:block; }

/* Pijlers */
.pijlers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pijler{
  padding:clamp(22px,3vw,34px); border-radius:var(--rond);
  border:1px solid var(--rand); background:linear-gradient(180deg,var(--paneel),transparent);
  transition:transform .4s var(--soepel), border-color .35s, background .35s;
}
.pijler:hover{ transform:translateY(-5px); border-color:var(--rand-op); background:linear-gradient(180deg,var(--paneel-op),transparent); }
.pijler .doos{
  display:grid; place-items:center; width:52px; height:52px; border-radius:15px; margin-bottom:1.1rem;
  background:var(--goud-zacht); color:var(--goud); border:1px solid rgba(240,169,60,.22);
}
.pijler .doos .ico{ width:26px; height:26px; }
.pijler p{ margin:0; font-size:.96rem; }

/* =========================================================
   Systemen / banen
   ========================================================= */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tab{
  padding:.55rem 1.05rem; border-radius:99px; border:1px solid var(--rand); background:var(--paneel);
  font-size:.88rem; font-weight:600; color:var(--zacht); transition:.28s var(--soepel);
}
.tab:hover{ color:var(--tekst); border-color:var(--rand-op); }
.tab.aan{
  color:#180d02; border-color:transparent;
  background:linear-gradient(135deg,var(--goud),var(--goud-diep));
  box-shadow:0 10px 26px -12px rgba(255,130,45,.9);
}

.rooster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }

.kaart{
  position:relative; overflow:hidden;
  padding:clamp(22px,2.6vw,30px); border-radius:var(--rond);
  border:1px solid var(--rand); background:var(--zwart-2);
  transition:transform .4s var(--soepel), border-color .35s, box-shadow .4s;
}
.kaart::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(240,169,60,.16), transparent 62%);
  transition:opacity .4s;
}
.kaart:hover{ transform:translateY(-6px); border-color:rgba(240,169,60,.34); box-shadow:0 30px 60px -30px rgba(0,0,0,1); }
.kaart:hover::before{ opacity:1; }

.kaart-kop{ display:flex; align-items:flex-start; gap:14px; margin-bottom:1rem; }
.kaart .doos{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px; flex:none;
  background:var(--goud-zacht); color:var(--goud); border:1px solid rgba(240,169,60,.2);
  transition:.35s var(--soepel);
}
.kaart:hover .doos{ background:linear-gradient(135deg,var(--goud),var(--goud-diep)); color:#180d02; border-color:transparent; transform:rotate(-6deg); }
.kaart h3{ margin:.2rem 0 0; }
.kaart p{ font-size:.95rem; margin:0; }

.merkje{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto; flex:none;
  padding:.22rem .6rem; border-radius:99px; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.merkje.live{ background:rgba(61,220,132,.12); color:var(--live); border:1px solid rgba(61,220,132,.28); }
.merkje.binnenkort{ background:rgba(240,169,60,.1); color:var(--goud); border:1px solid rgba(240,169,60,.28); }

.punten{ list-style:none; margin:1.15rem 0 0; padding:0; display:grid; gap:.5rem; }
.punten li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--zacht); }
.punten .ico{ width:15px; height:15px; margin-top:4px; color:var(--goud); }

.kaart.uit{ display:none; }

/* Grote uitgelichte rij op de banenpagina */
.duo{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:stretch; }

/* =========================================================
   Galerij
   ========================================================= */
.galerij{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.galerij figure{
  position:relative; margin:0; overflow:hidden; border-radius:var(--rond-klein); cursor:zoom-in;
  border:1px solid var(--rand); background:var(--zwart-2); aspect-ratio:16/10;
}
.galerij figure:nth-child(1),.galerij figure:nth-child(6){ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.galerij img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--soepel), filter .5s; filter:saturate(.92); }
.galerij figure:hover img{ transform:scale(1.07); filter:saturate(1.06); }
.galerij figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.4rem 1rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));
  font-size:.88rem; font-weight:600; opacity:0; transform:translateY(8px); transition:.4s var(--soepel);
}
.galerij figure:hover figcaption{ opacity:1; transform:none; }

.leegmelding{
  border:1px dashed var(--rand); border-radius:var(--rond); padding:clamp(28px,5vw,50px); text-align:center;
  background:var(--paneel);
}
.leegmelding code{ color:#ffd8a8; font-family:ui-monospace,Consolas,monospace; }

/* Lichtbak */
.lichtbak{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(3,5,8,.95); backdrop-filter:blur(6px); padding:4vh 5vw;
  animation:opdoemen .25s;
}
.lichtbak img{ max-height:82vh; max-width:100%; border-radius:12px; box-shadow:var(--schaduw); }
.lichtbak p{ margin:1rem 0 0; text-align:center; color:var(--zacht); }
.lichtbak-sluit{ position:absolute; top:20px; right:22px; padding:.55rem; border-radius:10px; border:1px solid var(--rand); }
.lichtbak-sluit:hover{ background:var(--paneel); }
.lichtbak-pijl{
  position:absolute; top:50%; translate:0 -50%; font-size:2.6rem; line-height:1; color:var(--zacht);
  padding:.4rem 1rem; border-radius:12px; transition:.25s;
}
.lichtbak-pijl:hover{ color:var(--tekst); background:var(--paneel); }
.lichtbak-pijl.links{ left:1.2vw; }
.lichtbak-pijl.rechts{ right:1.2vw; }
@keyframes opdoemen{ from{ opacity:0; } to{ opacity:1; } }

/* =========================================================
   Zo begin je
   ========================================================= */
.stappen{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; }
.stappen::before{
  content:''; position:absolute; top:34px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,var(--rand-op),transparent);
}
.stap{ position:relative; }
.stap b{
  display:grid; place-items:center; width:66px; height:66px; border-radius:20px; margin-bottom:1.2rem;
  font-family:'Outfit',sans-serif; font-weight:900; font-size:1.35rem; letter-spacing:-.03em;
  background:var(--zwart-3); border:1px solid var(--rand); color:var(--goud);
  position:relative; z-index:1; transition:.4s var(--soepel);
}
.stap:hover b{ background:linear-gradient(135deg,var(--goud),var(--goud-diep)); color:#180d02; border-color:transparent; transform:translateY(-4px); }
.stap p{ font-size:.96rem; }
.stap code{ background:var(--paneel); padding:.1rem .4rem; border-radius:6px; color:#ffd8a8; font-size:.86em; }

/* Verbindstrook */
.strook{
  border-radius:var(--rond); border:1px solid rgba(240,169,60,.24);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(255,130,45,.16), transparent 62%),
    linear-gradient(180deg,var(--zwart-3),var(--zwart-2));
  padding:clamp(28px,4.5vw,52px);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.strook h2{ margin-bottom:.4rem; }
.strook p{ margin:0; max-width:46ch; }
.strook .rechts{ display:flex; flex-direction:column; gap:12px; align-items:stretch; min-width:250px; }

/* =========================================================
   Doneren
   ========================================================= */
.pakketten{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start; }
.pakket{
  position:relative; padding:clamp(24px,2.6vw,32px); border-radius:var(--rond);
  border:1px solid var(--rand); background:var(--zwart-2);
  transition:transform .4s var(--soepel), border-color .35s, box-shadow .4s;
  display:flex; flex-direction:column; height:100%;
}
.pakket:hover{ transform:translateY(-6px); border-color:var(--rand-op); }
.pakket.top{
  border-color:rgba(240,169,60,.45);
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,130,45,.14), var(--zwart-2) 62%);
  box-shadow:0 30px 70px -34px rgba(255,130,45,.65);
}
.pakket.top::after{
  content:'Meest gekozen'; position:absolute; top:-11px; left:50%; translate:-50% 0;
  padding:.25rem .8rem; border-radius:99px; font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#180d02;
  background:linear-gradient(135deg,var(--goud),var(--goud-diep));
  box-shadow:0 8px 22px -8px rgba(255,130,45,.9);
}
.pakket h3{ font-size:1.15rem; margin-bottom:.3rem; }
.pakket .prijs{ display:flex; align-items:baseline; gap:6px; margin:1rem 0 .2rem; }
.pakket .prijs b{ font-family:'Outfit',sans-serif; font-weight:900; font-size:2.6rem; letter-spacing:-.05em; }
.pakket .prijs span{ color:var(--flauw); font-size:.88rem; }
.pakket .uitleg{ font-size:.9rem; min-height:2.6em; }
.pakket .punten{ margin-top:1.2rem; flex:1; }
.pakket .knop{ margin-top:1.6rem; width:100%; }
.knop[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

.melding{
  display:flex; gap:14px; align-items:flex-start;
  padding:1.1rem 1.3rem; border-radius:var(--rond-klein);
  border:1px solid rgba(240,169,60,.26); background:rgba(240,169,60,.07);
  margin-bottom:clamp(28px,4vw,44px);
}
.melding .ico{ color:var(--goud); margin-top:3px; }
.melding p{ margin:0; font-size:.94rem; color:#dcc9a8; }
.melding strong{ color:#ffdca8; }

/* Muntbundels */
.munten{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.munt{
  position:relative; text-align:center; padding:clamp(22px,2.4vw,30px) 16px;
  border-radius:var(--rond); border:1px solid var(--rand); background:var(--zwart-2);
  transition:transform .4s var(--soepel), border-color .35s, box-shadow .4s;
}
.munt:hover{ transform:translateY(-5px); border-color:var(--rand-op); }
.munt.top{
  border-color:rgba(240,169,60,.45);
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,130,45,.14), var(--zwart-2) 62%);
  box-shadow:0 26px 60px -34px rgba(255,130,45,.6);
}
.munt .doos{
  display:grid; place-items:center; width:40px; height:40px; margin:0 auto .8rem; border-radius:12px;
  background:var(--goud-zacht); color:var(--goud); border:1px solid rgba(240,169,60,.2);
}
.munt .aantal{
  display:block; font-family:'Outfit',sans-serif; font-weight:900; font-size:clamp(1.7rem,2.6vw,2.2rem);
  letter-spacing:-.04em; line-height:1;
  background:linear-gradient(160deg,#fff,#ffca82); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.munt .eenheid{ display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--flauw); margin-top:.35rem; }
.munt .euro{ display:block; margin-top:.9rem; font-weight:700; font-size:1.05rem; }
.munt .bonus{
  position:absolute; top:10px; right:10px; padding:.16rem .48rem; border-radius:99px;
  font-size:.66rem; font-weight:800; letter-spacing:.06em;
  background:rgba(61,220,132,.12); color:var(--live); border:1px solid rgba(61,220,132,.28);
}
.munt .knop{ margin-top:1.1rem; width:100%; }

/* Prijslijsten in de catalogus */
.prijslijst{ margin:0; padding:0; list-style:none; }
.prijsrij{
  display:flex; gap:14px; align-items:baseline; justify-content:space-between;
  padding:.62rem 0; border-bottom:1px dashed rgba(255,255,255,.075); font-size:.93rem;
}
.prijsrij:last-child{ border-bottom:0; }
.prijsrij .wat{ color:var(--zacht); }
.prijsrij .kost{
  font-family:'Outfit',sans-serif; font-weight:800; color:var(--goud); white-space:nowrap; letter-spacing:-.01em;
}
.prijsrij .straks{
  display:inline-block; margin-left:8px; padding:.1rem .45rem; border-radius:99px; vertical-align:1px;
  font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(240,169,60,.1); color:var(--goud); border:1px solid rgba(240,169,60,.26);
}
.noot{ margin:1rem 0 0; font-size:.86rem; color:var(--flauw); line-height:1.55; }

/* Wat er nooit in de winkel komt */
.nietlijst{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.55rem 20px; }
.nietlijst li{ display:flex; gap:10px; align-items:flex-start; font-size:.93rem; color:var(--zacht); }
.nietlijst .ico{ color:var(--rood); opacity:.75; margin-top:3px; }

/* Bedankmuur */
.muur-groep + .muur-groep{ margin-top:clamp(28px,4vw,44px); }
.muur-kop{
  display:flex; align-items:baseline; gap:10px; margin-bottom:1rem;
  font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--flauw);
}
.muur-kop b{ font-family:'Outfit',sans-serif; color:var(--goud); letter-spacing:.06em; }
.muur{ display:flex; flex-wrap:wrap; gap:10px; }
.muur-naam{
  padding:.5rem 1rem; border-radius:99px; font-size:.93rem; font-weight:600;
  border:1px solid var(--rand); background:var(--paneel);
  transition:transform .3s var(--soepel), border-color .3s, background .3s;
}
.muur-naam:hover{ transform:translateY(-2px); border-color:var(--rand-op); background:var(--paneel-op); }
.muur-naam.vast{
  border-color:rgba(240,169,60,.34); background:rgba(240,169,60,.08); color:#ffd9a6;
}
.muur-leeg{
  border:1px dashed var(--rand); border-radius:var(--rond); background:var(--paneel);
  padding:clamp(26px,4vw,44px); text-align:center;
}
.muur-leeg p{ margin:0 auto; max-width:52ch; }
.muur-leeg .groot{
  display:block; font-family:'Outfit',sans-serif; font-weight:800; font-size:1.25rem;
  color:var(--tekst); margin-bottom:.5rem; letter-spacing:-.02em;
}

/* Regels */
.regels{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.regel{
  padding:clamp(20px,2.4vw,28px); border-radius:var(--rond);
  border:1px solid var(--rand); background:var(--zwart-2);
  transition:border-color .3s, transform .35s var(--soepel);
}
.regel:hover{ border-color:var(--rand-op); transform:translateY(-3px); }
.regel .nr{ font-family:'Outfit',sans-serif; font-weight:900; font-size:.8rem; letter-spacing:.14em; color:var(--goud); }
.regel h3{ margin:.35rem 0 .5rem; font-size:1.08rem; }
.regel p{ margin:0; font-size:.94rem; }

/* FAQ */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:10px; }
.faq details{
  border:1px solid var(--rand); border-radius:var(--rond-klein); background:var(--zwart-2);
  transition:border-color .3s, background .3s;
}
.faq details[open]{ border-color:rgba(240,169,60,.3); background:var(--zwart-3); }
.faq summary{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:1.1rem 1.3rem; cursor:pointer; font-weight:600; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ico{ color:var(--goud); transition:transform .35s var(--soepel); flex:none; }
.faq details[open] summary .ico{ transform:rotate(180deg); }
.faq .antwoord{ padding:0 1.3rem 1.2rem; }
.faq .antwoord p{ margin:0; font-size:.96rem; }

/* =========================================================
   Voettekst
   ========================================================= */
.voet{ border-top:1px solid var(--rand); background:var(--zwart-2); padding:clamp(50px,7vw,80px) 0 30px; }
.voet-boven{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px; }
.voet-merk p{ margin:1.1rem 0 1.4rem; font-size:.94rem; max-width:38ch; }
.voet-kolom{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.voet-kolom a,.voet-kolom .kopieer{ color:var(--zacht); font-size:.93rem; transition:color .25s; text-align:left; }
.voet-kolom a:hover{ color:var(--goud); }
.voet-onder{
  margin-top:clamp(36px,5vw,56px); padding-top:24px; border-top:1px solid var(--rand);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.voet-onder p{ margin:0; font-size:.85rem; color:var(--flauw); }
.voet-onder .fijn{ font-size:.78rem; color:#4e5865; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:28px; translate:-50% 0; z-index:210;
  padding:.8rem 1.3rem; border-radius:12px; font-size:.92rem; font-weight:600;
  background:rgba(12,17,23,.96); border:1px solid rgba(61,220,132,.4); color:var(--live);
  box-shadow:var(--schaduw);
  opacity:0; pointer-events:none; transform:translateY(14px); transition:.35s var(--soepel);
}
.toast.zichtbaar{ opacity:1; transform:none; }



/* =========================================================
   De stad: voorraden en cijfers
   ========================================================= */
.verversregel{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.9rem; color:var(--zacht);
}
.verversregel .fijn{ color:var(--flauw); }

.voorraden{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

.voorraad{
  padding:18px 20px 16px; border-radius:var(--rond-klein);
  border:1px solid var(--rand); background:var(--zwart-2);
  transition:border-color .3s, transform .35s var(--soepel);
}
.voorraad:hover{ border-color:var(--rand-op); transform:translateY(-3px); }
.voorraad-kop{ display:flex; align-items:center; gap:10px; margin-bottom:.7rem; }
.voorraad .teken{ font-size:1.15rem; line-height:1; }
.voorraad .naam{ font-weight:600; font-size:.98rem; }
.voorraad .stand{ margin-left:auto; font-size:.86rem; color:var(--flauw); white-space:nowrap; }
.voorraad .stand b{ color:var(--tekst); font-weight:700; }

.voorraad .meter{ height:7px; border-radius:7px; background:rgba(255,255,255,.08); overflow:hidden; }
.voorraad .vulling{
  height:100%; border-radius:7px; width:0;
  background:linear-gradient(90deg,var(--goud),var(--goud-diep));
  transition:width .9s var(--soepel);
}
.voorraad.laag .vulling{ background:linear-gradient(90deg,#ffb648,#ff5b5b); }
.voorraad.op    .vulling{ background:var(--rood); }
.voorraad.vol   .vulling{ background:linear-gradient(90deg,#5ee9a4,#3ddc84); }

.voorraad-onder{ display:flex; align-items:center; gap:10px; margin-top:.6rem; }
.voorraad .procent{ font-size:.8rem; color:var(--flauw); }
.voorraad .merkje{ margin-left:auto; }
.merkje.op  { background:rgba(255,91,91,.12);  color:var(--rood); border:1px solid rgba(255,91,91,.3); }
.merkje.laag{ background:rgba(255,182,72,.12); color:#ffb648;     border:1px solid rgba(255,182,72,.3); }
.merkje.vol { background:rgba(61,220,132,.1);  color:var(--live); border:1px solid rgba(61,220,132,.26); }

.tegels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1px;
  background:var(--rand); border:1px solid var(--rand); border-radius:var(--rond); overflow:hidden; }
.tegel{ background:var(--zwart-2); padding:22px 20px; transition:background .3s; }
.tegel:hover{ background:var(--zwart-3); }
.tegel b{
  display:block; font-family:'Outfit',sans-serif; font-weight:900;
  font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.03em; line-height:1.05;
  background:linear-gradient(160deg,#fff,#ffca82); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tegel span{ display:block; font-size:.92rem; font-weight:600; margin:.35rem 0 .15rem; }
.tegel small{ display:block; font-size:.8rem; color:var(--flauw); line-height:1.4; }

@media (max-width:560px){
  .voorraden{ grid-template-columns:1fr; }
}

/* =========================================================
   Schuine banner voor de opening
   Andere kleuren dan de rest van de site, zodat hij opvalt.
   Weghalen doe je met 'beta' => ['aan' => false] in inc/config.php.
   ========================================================= */
.betabanner{
  position:fixed; z-index:130; right:-88px; bottom:64px;
  transform:rotate(-38deg);
  pointer-events:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));
  animation:betakomt .8s var(--soepel) .6s both;
}
.betabanner-in{
  display:block; padding:.7rem 5.5rem; text-align:center;
  background:linear-gradient(100deg,#25d0ff 0%,#7b5cff 48%,#ff3d9a 100%);
  color:#0a0512;
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset, 0 0 34px rgba(123,92,255,.55);
}
.betabanner b{
  display:block; white-space:nowrap; font-family:'Outfit',sans-serif; font-weight:900;
  font-size:1.02rem; letter-spacing:.22em; text-transform:uppercase; line-height:1.1;
}
.betabanner i{
  display:block; white-space:nowrap; font-style:normal; font-weight:700;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; opacity:.78;
}
@keyframes betakomt{
  from{ opacity:0; transform:rotate(-38deg) translate(40px,40px); }
  to  { opacity:1; transform:rotate(-38deg); }
}

/* De banner glijdt mee omhoog als het scherm laag is */
@media (max-width:700px){
  .betabanner{ right:-58px; bottom:78px; }   /* de hoek zelf staat in @keyframes betakomt */
  .betabanner-in{ padding:.5rem 4.4rem; }
  .betabanner b{ font-size:.84rem; letter-spacing:.15em; }
  .betabanner i{ font-size:.7rem; }
}

/* 'binnenkort' in plaats van het adres */
.straksadres{
  color:#8ee9ff !important;
  letter-spacing:.06em;
}
.bovenkop.knalt{
  border-color:rgba(123,92,255,.45);
  background:linear-gradient(100deg, rgba(37,208,255,.14), rgba(255,61,154,.14));
  color:#d9ccff;
}
.bovenkop.knalt .stip.aan{ background:#25d0ff; animation:none; box-shadow:0 0 12px rgba(37,208,255,.9); }

/* =========================================================
   Verschijnen bij scrollen
   ========================================================= */
/* Alleen verbergen als JavaScript aanstaat — anders is de site zonder JS leeg. */
.js .komt{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--soepel), transform .75s var(--soepel); }
.js .komt.er{ opacity:1; transform:none; }

/* =========================================================
   Kleinere schermen
   ========================================================= */
@media (max-width:1040px){
  .voet-boven{ grid-template-columns:1fr 1fr; gap:30px; }
  .pakketten{ grid-template-columns:repeat(2,1fr); }
  .munten{ grid-template-columns:repeat(3,1fr); }
  .galerij{ grid-template-columns:repeat(3,1fr); }
  .duo{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .menu{ display:none; }
  .hamburger{ display:grid; }
  .status-pil-label{ display:none; }
  .pijlers,.stappen{ grid-template-columns:1fr; }
  .stappen::before{ display:none; }
  .cijfers{ grid-template-columns:repeat(2,1fr); }
  .regels{ grid-template-columns:1fr; }
  .galerij{ grid-template-columns:repeat(2,1fr); }
  .galerij figure:nth-child(1),.galerij figure:nth-child(6){ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
  .held{ min-height:92svh; }
}
@media (max-width:860px){
  .munten{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .pakketten,.galerij,.munten{ grid-template-columns:1fr; }
  .galerij figure:nth-child(1),.galerij figure:nth-child(6){ grid-column:span 1; }
  .rooster{ grid-template-columns:1fr; }
  .knop-discord span{ display:none; }
  .verbindvak{ width:100%; }
  .strook .rechts{ width:100%; }
}

/* Wie liever geen beweging heeft, krijgt geen beweging */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .js .komt{ opacity:1; transform:none; }
}

/* =========================================================
   Groeperingen (groeperingen.php) -- elke kaart in de kleur van
   zijn groep; de kleur komt als --g mee vanuit data.php.
   ========================================================= */
.groepkaart{ box-shadow:inset 0 2px 0 var(--g); }
.groepkaart .doos.groepteken{
  font-family:'Outfit',sans-serif; font-weight:900; font-size:1rem; letter-spacing:-.02em;
  background:color-mix(in srgb,var(--g) 16%,transparent);
  color:var(--g); border-color:color-mix(in srgb,var(--g) 38%,transparent);
}
.groepkaart:hover{ border-color:color-mix(in srgb,var(--g) 45%,transparent); }
.groepkaart:hover .doos.groepteken{ background:var(--g); color:#140c06; border-color:transparent; }
.groepkaart .punten .ico{ color:var(--g); }
.groep-rol{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--g);
}
.groepkaart .rangen{
  margin-top:1.2rem; padding-top:.95rem; border-top:1px solid var(--rand);
  font-size:.84rem; color:var(--flauw); line-height:1.6;
}
.groepkaart .rangen b{ color:var(--zacht); font-weight:600; margin-right:.4rem; }

.stappen.vier{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .stappen.vier{ grid-template-columns:repeat(2,1fr); } .stappen.vier::before{ display:none; } }
@media (max-width:860px){ .stappen.vier{ grid-template-columns:1fr; } }

/* Menu met zeven knoppen (sinds Groeperingen erbij kwam): nooit laten
   afbreken, iets krapper op middelgrote schermen, en eerder naar het
   hamburgermenu -- anders liepen "Banen & systemen" en "De stad" over
   twee regels. */
.menu a{ white-space:nowrap; }
@media (max-width:1280px){ .menu a{ padding:.5rem .6rem; font-size:.9rem; } }
@media (max-width:1140px){ .menu{ display:none; } .hamburger{ display:grid; } }