/* Cookiebanner op de aftelpagina — 2026-10-15, alleen tot 1 november 16:00.

   KOPIE uit /srv/2busy/assets/styles.css (het .btn-blok en de ck-sectie),
   zodat assets/consent.js van de site hier dezelfde banner kan tonen zonder
   de hele stylesheet van de site, die de aftelpagina zou verbouwen.
   Tweede waarheid, bewust: deze pagina verdwijnt op 1 november vanzelf.
   De variabelen hangen aan .ck-overlay in plaats van :root, zodat ze de
   eigen variabelen van de aftelpagina (--text, --muted, --line) niet raken.
   Waarden = het donkere thema van de site. */
@font-face{
  font-family:'Oswald';
  src:url('/assets/fonts/oswald-var.woff2?v=1') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
.ck-overlay,.ck-keuze{
  --accent:#0066ff;
  --accent-ink:#ffffff;
  --font-stack:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Oswald','Arial Narrow',var(--font-stack);
  --font-text:'Inter',var(--font-stack);
  --bg:#050507;
  --surface:#0e0f16;
  --text:#f4f5f7;
  --muted:#8b8e9c;
  --text-soft:#c3c6d0;
  --line:rgba(255,255,255,0.12);
  --line-strong:rgba(255,255,255,0.22);
}
.ck-overlay *,.ck-overlay *::before,.ck-overlay *::after{box-sizing:border-box}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:14px 24px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--text);
  transition:background .3s ease,color .3s ease,border-color .3s ease,
             box-shadow .3s ease,transform .3s ease;
  position:relative;overflow:hidden}

/* 1. PRIMAIR — helderder blauw + blauwe gloed op hover */
.btn-fill{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-fill:hover{background:#2b7bff;border-color:#2b7bff;color:#fff;
  box-shadow:0 12px 30px rgba(0,102,255,.45)}

/* 2. SECUNDAIR — keert om op hover (vult met tekstkleur, label wordt donker) */
.btn:hover{transform:translateY(-3px);background:var(--text);color:var(--bg);
  border-color:var(--text);box-shadow:0 12px 28px rgba(0,0,0,.30)}

/* 3. TERTIAIR — kale tekstknop in accentblauw.
      Hover: lichter blauw + onderstreping (leest als "opgelicht").
      overflow:visible zodat de underline-offset niet wordt afgekapt.
      Staat ná .btn:hover, anders wint de secundaire hover. */
.btn-tertiary{border-color:transparent;background:none;color:var(--accent);
  padding-inline:0;overflow:visible}
.btn-tertiary:hover{background:none;border-color:transparent;color:#5c9dff;
  box-shadow:none;transform:translateY(-1px);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

.btn .dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  flex:none}

/* =====================================================================
   COOKIEBANNER  (2026-10-06)

   Patroon overgenomen van staging.vhc.nl op verzoek van Koraa: een
   gecentreerd paneel over een donkere overlay, met een vaste kop, een
   scrollend midden en een vaste knoppenbalk. Niet de huisstijl van VHC —
   alles hier loopt via de tokens, dus de banner volgt automatisch het
   donkere én het lichte thema.

   WAAROM EEN MODAL EN GEEN BALK ONDERAAN. Bij een balk kun je doorklikken
   zonder te kiezen, en dan weet je van een bezoeker niet of hij ja of nee
   bedoelde. Een modal dwingt één keer een keuze af en is daarna weg.

   WAAROM .btn HERGEBRUIKT. De knoppen zijn gewoon .btn / .btn-fill /
   .btn-tertiary uit deze stylesheet; .ck-btn zet alleen de maat bij. Een
   eigen knoppenfamilie zou hier een tweede waarheid worden.

   z-index 10000: boven de hoogste bestaande laag (9500, de drop-hint).
   ===================================================================== */
.ck-overlay{position:fixed;inset:0;z-index:10000;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.62)}
/* overflow:hidden op <html> i.p.v. <body>: de site zet zelf dingen op body. */
html.ck-vast{overflow:hidden}

/* Het paneel krijgt bij het openen de focus (zie consent.js). Geen ring
   eromheen: dat is de afspraak voor een dialoogvenster dat je programmatisch
   focust -- de ring hoort bij de knoppen die je daarna met Tab bereikt, en
   die houden hun eigen focusstijl. */
.ck-paneel:focus{outline:none}
.ck-paneel{display:flex;flex-direction:column;overflow:hidden;
  width:100%;max-width:560px;max-height:calc(100dvh - 40px);
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}

.ck-kop{flex:none;position:relative;z-index:1;background:var(--surface);
  padding:24px 24px 12px;transition:box-shadow .15s ease}
/* Schaduw zodra er tekst onder de kop door scrollt: anders lijkt het paneel
   afgesneden in plaats van doorlopend. consent.js zet de klas. */
.ck-kop-schaduw{box-shadow:0 6px 14px -6px rgba(0,0,0,.55)}

/* De logo-rij. Het logo staat gecentreerd; de terug-knop ligt er absoluut
   links overheen, zodat het logo in het MIDDEN van het paneel blijft en niet
   verschuift zodra die knop erbij komt. Dat is precies waarom VHC het ook zo
   doet. min-height houdt de rij even hoog met en zonder knop. */
.ck-kop-rij{position:relative;display:flex;align-items:center;
  justify-content:center;min-height:40px;margin-bottom:16px}
.ck-logo{display:block;height:32px;width:auto;max-width:60%;object-fit:contain}
.ck-terug{position:absolute;left:0;background:none;border:0;padding:4px;
  cursor:pointer;font-family:var(--font-text);font-size:14px;font-weight:600;
  color:var(--accent)}
.ck-terug:hover{color:#5c9dff;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px}
/* Over de volle breedte van het paneel, dus de padding van .ck-kop eruit
   trekken met een negatieve marge. */
.ck-streep{border-top:1px solid var(--line);margin:0 -24px 18px}
.ck-titel{font-family:var(--font-display);text-transform:uppercase;
  font-weight:600;letter-spacing:.01em;font-size:24px;line-height:1.1;margin:0;
  padding-right:32px}
.ck-kruis{position:absolute;top:14px;right:14px;
  background:none;border:0;padding:6px;cursor:pointer;
  font-family:var(--font-text);font-size:22px;line-height:1;color:var(--muted)}
.ck-kruis:hover{color:var(--text)}

.ck-body{flex:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 24px 20px}
.ck-p{font-family:var(--font-text);font-size:14px;line-height:1.65;
  color:var(--text-soft);margin:0 0 12px}
.ck-p:last-child{margin-bottom:0}
.ck-link{color:var(--accent);font-weight:600;text-decoration:underline}
.ck-link:hover{color:#5c9dff}

.ck-regel{display:flex;align-items:flex-start;gap:16px;
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  margin-bottom:12px}
.ck-regel:last-child{margin-bottom:0}
.ck-regel-mid{flex:1;min-width:0}
.ck-label{display:block;font-family:var(--font-text);font-weight:600;
  font-size:14px;margin-bottom:4px}
.ck-uitleg{display:block;font-family:var(--font-text);font-size:13px;
  line-height:1.55;color:var(--muted)}
.ck-altijd{flex:none;font-family:var(--font-text);font-size:12px;
  font-weight:600;color:var(--accent);white-space:nowrap;margin-top:2px}

/* Het schuifje. 44×24 met een knop van 20 — groot genoeg om op een telefoon
   met je duim te raken (44px is de ondergrens die Apple en WCAG aanhouden). */
.ck-schuif{flex:none;width:44px;height:24px;padding:2px;margin-top:2px;
  display:flex;justify-content:flex-start;align-items:center;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--line-strong);transition:background .2s ease}
.ck-schuif-aan{background:var(--accent);justify-content:flex-end}
.ck-knop{display:block;width:20px;height:20px;border-radius:50%;
  background:#fff}

.ck-voet{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:16px 24px 18px;border-top:1px solid var(--line)}
/* De tekstknop links, de twee echte knoppen rechts. */
.ck-txt{flex:none;margin-right:auto;font-size:14px}
.ck-btn{flex:none;padding:12px 20px;font-size:14px}

/* Weigeren en accepteren zijn even groot en staan naast elkaar: weigeren mag
   niet moeilijker zijn dan accepteren. Daarom is "Weigeren" een gewone .btn
   met een volwaardige rand en geen weggemoffelde tekstlink. */
@media (max-width:600px){
  .ck-overlay{padding:12px}
  .ck-paneel{max-height:calc(100dvh - 24px)}
  .ck-kop{padding:18px 18px 10px}
  .ck-kop-rij{min-height:34px;margin-bottom:12px}
  .ck-logo{height:26px}
  .ck-streep{margin:0 -18px 14px}
  .ck-titel{font-size:20px}
  .ck-body{padding:0 18px 16px}
  .ck-voet{gap:8px;padding:12px 18px 14px}
  .ck-btn{flex:1 1 0;text-align:center;padding:12px 10px}
  /* De tekstknop zakt naar een eigen regel ONDER de twee knoppen: op een
     telefoon is de onderste rij het dichtst bij je duim, en daar hoort de
     minst belangrijke keuze niet. Vandaar order:3 én margin-right:0. */
  .ck-txt{order:3;flex:1 0 100%;margin:2px 0 0;text-align:center}
}

/* De regel op /cookiebeleid waarmee je je keuze terugziet en kunt wijzigen —
   intrekken moet net zo makkelijk zijn als geven. */
.ck-keuze{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  /* 68ch = dezelfde maat als .tx-body hierboven, zodat het paneel exact
     onder de tekstkolom uitlijnt. Geen margin:0 auto -- die kolom is
     linksuitgelijnd in de .wrap, niet gecentreerd. */
  max-width:68ch;margin-top:28px;
  padding:16px 18px;border:1px solid var(--line);border-radius:12px}
.ck-keuze-t{flex:1;min-width:200px;font-family:var(--font-text);font-size:14px;
  line-height:1.6;color:var(--text-soft)}
.ck-keuze-btn{flex:none}