/*
  Lokaal geserveerde fonts. Gegenereerd door tools/fonts.mjs — niet met de hand
  bijwerken. De bestanden staan in src/fonts/ en worden door build.mjs naar
  dist/fonts/ gekopieerd.

  Alleen de subsets latin en latin-ext. font-display: swap zodat tekst meteen
  leesbaar is in de terugvalletter en niet onzichtbaar blijft tot het font er is.
*/
@font-face {
  font-display: swap;
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/caveat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/caveat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/karla-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/karla-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karla-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karla-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  ChargePod — publieke website
  ============================

  Eén stylesheet, geen framework, geen build-stap voor de CSS. Voor zeven
  pagina's is één bestand dat de browser ophaalt en een week cachet sneller dan
  welke bundel ook.

  Het ontwerp volgt de referentie van de eigenaar (11-09-2026): bijna-zwart als
  ondergrond, lime als enige accent, grote koppen, pillen, donkere kaarten met
  een haarlijn, en het product groot in beeld.

  Opbouw van dit bestand:

     1. tokens          waarden, en niets anders
     2. grondslag       reset, typografie, links
     3. indeling        wrap, secties, hulpklassen
     4. kop en menu
     5. knoppen
     6. hero
     7. secties         vertrouwensrij, stappen, blokken, tegels, slot
     8. componenten     kaarten, tabellen, faq, formulier, meldingen
     9. voettekst
    10. beweging
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /*
    Donker loopt van bijna-zwart naar het vlak van een kaart. Drie stappen is
    genoeg: dieper dan --nacht wordt het zwart en verliest de blauwe ondertoon
    die het merk zijn koelte geeft.
  */
  --nacht:      #05090F;
  --navy:       #0A121B;
  --navy-2:     #101A25;
  --lijn:       rgba(255, 255, 255, .08);
  --lijn-sterk: rgba(255, 255, 255, .16);

  /*
    Lime is het enige accent. Hij vult knoppen, markeert de actieve pagina en
    tilt cijfers en pictogrammen op — en verder niets.

    Op wit haalt deze lime 1,6:1 en is dus onbruikbaar als tekst. Daarvoor
    staat --lime-tekst klaar: 5,1:1 op wit, 4,6:1 op --mist.
  */
  --lime:       #A8E82F;
  --lime-licht: #C6F55F;
  --lime-diep:  #86C41B;
  --lime-tekst: #4B7A12;
  --lime-waas:  rgba(168, 232, 47, .12);
  --lime-rand:  rgba(168, 232, 47, .34);

  /* Licht */
  --wit:        #FFFFFF;
  --mist:       #F4F7FA;
  --mist-rand:  #E2E9F0;

  /* Tekst */
  --op-donker:      #FFFFFF;
  --op-donker-zacht:#93A3B5;
  --op-licht:       #0A121B;
  --op-licht-zacht: #56697E;

  --font-display: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    Karla, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand:    Caveat, "Segoe Script", cursive;

  --r-pil:   999px;
  --r-kaart: 18px;
  --r-groot: 26px;

  --wrap:   1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --sectie: clamp(60px, 8vw, 116px);
  --measure: 66ch;

  --schaduw-kaart: 0 20px 50px rgba(0, 0, 0, .35);
  --schaduw-pil:   0 10px 26px rgba(168, 232, 47, .22);
}

/* ==========================================================================
   2. GRONDSLAG
   ========================================================================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--op-licht);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

/*
  De schaal is groot en springt duidelijk. Een merkwebsite opent met een
  uitspraak; het verschil tussen h1 en h2 moet je zien zonder te meten.
*/
h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); letter-spacing: -.038em; line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 4vw, 3rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); letter-spacing: -.02em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--lime-tekst); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--op-licht); }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--lime);
  color: var(--nacht);
  font-family: var(--font-display);
  font-weight: 700;
  padding: 12px 20px;
}
.skip:focus { left: 0; }

/* ==========================================================================
   3. INDELING
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
  Een sectie zonder klasse is licht. Dat moet hier expliciet: de body is
  bijna-zwart, zodat de ruimte onder een korte pagina niet wit oplicht — maar
  dan zou elke gewone sectie donkere tekst op een donkere ondergrond krijgen.
  .dark, .soft, .hero, .slot en .vertrouwen zetten hun eigen achtergrond en
  winnen, want een klasse weegt zwaarder dan een element.
*/
section { padding-block: var(--sectie); background: var(--wit); color: var(--op-licht); }
section p { color: var(--op-licht-zacht); }
section h2, section h3 { color: var(--op-licht); }
section.tight { padding-block: clamp(40px, 5vw, 64px); }

/* Licht en donker zijn de twee werelden; alles erbinnen erft zijn kleuren. */
.dark {
  background: var(--navy);
  color: var(--op-donker-zacht);
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark b, .dark strong { color: var(--op-donker); }
/* Knoppen niet: .dark a is specifieker dan .btn en gaf een knop in een donkere
   sectie limegroene tekst op een limegroene achtergrond. Knoppen houden hun
   eigen kleuren. */
.dark a:not(.btn) { color: var(--lime); }
.dark a:not(.btn):hover { color: var(--wit); }

.soft { background: var(--mist); color: var(--op-licht); }
.licht { background: var(--wit); color: var(--op-licht); }
.soft p, .licht p { color: var(--op-licht-zacht); }
.soft h2, .licht h2, .soft h3, .licht h3 { color: var(--op-licht); }

.midden { text-align: center; }
.midden p { margin-inline: auto; }

/* Het label boven een sectiekop. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime-tekst);
  margin: 0 0 1em;
}
.dark .eyebrow { color: var(--lime); }

/* Eén woord in de merkkleur, midden in een kop. */
.lime { color: var(--lime-tekst); }
.dark .lime, .hero .lime, .slot .lime { color: var(--lime); }

.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.1;
  display: inline-block;
  transform: rotate(-7deg);
  color: var(--op-donker);
}
.hand--lime { color: var(--lime); }

.lood { font-size: clamp(1.05rem, 1.45vw, 1.2rem); }

/* Twee kolommen die op smal onder elkaar vallen. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   4. KOP EN MENU
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(5, 9, 15, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 66px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; text-decoration: none; }
.brand__teken { width: 30px; flex: none; }
.brand__woord { width: 128px; flex: none; }

.site-nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); margin-left: auto; }

.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .93rem;
  color: var(--op-donker-zacht);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--wit); }
.site-nav a[aria-current="page"] { color: var(--lime); border-bottom-color: var(--lime); }

/* Twee ingangen naast elkaar: de commerciële knop en, secundair, de
   partnerlogin. De volgorde in de markup bepaalt welke het zwaarst weegt. */
.head-cta { flex: none; display: flex; align-items: center; gap: 10px; }
.taal {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  color: var(--op-donker-zacht);
}

/* De hamburger bestaat alleen op smal. */
.menu-knop {
  display: none;
  flex: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--lijn-sterk);
  border-radius: 12px;
  color: var(--wit);
  cursor: pointer;
}
.menu-knop .ic { width: 22px; height: 22px; }

/* Tussen 960 en 1360 staat de volledige navigatie er nog naast twee knoppen.
   Met de partnerlogin erbij liep de kop 30px buiten het scherm op 1280; de
   ruimte komt uit de tussenruimtes en de knoppadding, niet uit het weglaten
   van een ingang. */
@media (max-width: 1360px) {
  .site-nav { gap: clamp(6px, 1vw, 14px); }
  .head-cta { gap: 8px; }
  .head-cta .btn--klein { padding: 10px 14px; font-size: .85rem; }
}

@media (max-width: 960px) {
  .menu-knop { display: inline-flex; }
  .taal { display: none; }

  /*
    Het menu klapt open ín de balk, onder het logo. Geen overlay over het hele
    scherm: je moet kunnen zien waar je vandaan komt. Menu en knop vallen elk
    op een eigen volle regel, zodat ze samen onder elkaar staan in plaats van
    dat de knop tussen logo en hamburger wordt geperst.
  */
  .site-head .wrap { flex-wrap: wrap; }

  .site-nav,
  .head-cta { display: none; flex-basis: 100%; margin-left: 0; }

  .site-head[data-open="ja"] .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--lijn);
  }
  .site-head[data-open="ja"] .head-cta { display: flex; flex-direction: column; padding-block: 14px 18px; }
  .site-head[data-open="ja"] .head-cta .btn { width: 100%; }

  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--lijn); font-size: 1.02rem; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--lijn); color: var(--lime); }
}

/* ==========================================================================
   5. KNOPPEN
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--r-pil);
  border: 2px solid var(--lime);
  background: var(--lime);
  color: var(--nacht);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.btn:hover {
  background: var(--lime-licht);
  border-color: var(--lime-licht);
  color: var(--nacht);
  transform: translateY(-1px);
  box-shadow: var(--schaduw-pil);
}
.btn:active { transform: translateY(0); }
.btn .ic { flex: none; }

.btn-ghost {
  background: transparent;
  border-color: var(--lijn-sterk);
  color: var(--wit);
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--wit);
  color: var(--wit);
  box-shadow: none;
}

/* Op een lichte sectie heeft de rustige knop een donkere rand nodig. */
.soft .btn-ghost, .licht .btn-ghost { border-color: rgba(10, 18, 27, .22); color: var(--op-licht); }
.soft .btn-ghost:hover, .licht .btn-ghost:hover { background: rgba(10, 18, 27, .05); border-color: var(--op-licht); color: var(--op-licht); }

.btn--klein { padding: 11px 18px; font-size: .9rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2em; }

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--nacht);
  color: var(--op-donker-zacht);
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 96px);
}

.hero h1, .hero h2, .hero h3 { color: var(--op-donker); }

/*
  Twee gloeden. De ene tilt het product van de achtergrond, de andere geeft de
  linkerbovenhoek diepte zodat de kop niet op een plat vlak ligt. Allebei ver
  uitgesmeerd en zwak — een gloed die je opmerkt is te sterk.
*/
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  right: -6%;
  top: 46%;
  width: min(760px, 96vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(168, 232, 47, .17) 0%, transparent 62%);
}
.hero::after {
  left: -18%;
  top: -28%;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(38, 84, 140, .28) 0%, transparent 64%);
}

.hero .wrap { position: relative; z-index: 1; }

/*
  Twee kolommen en een schermvullende hoogte alleen als er een product naast
  de tekst staat. Een subpagina zonder foto krijgt één kolom en een kop die zo
  hoog is als zijn tekst: een lege helft naast een kop leest als een fout, en
  74vh voor drie regels is een scherm vol niets.
*/
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.hero--met-foto .hero__grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  min-height: min(74vh, 660px);
}

.hero:not(.hero--met-foto) h1 { max-width: 20ch; }
.hero:not(.hero--met-foto) p.lead { max-width: 60ch; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* Op mobiel eerst de tekst, dan het product — zoals gevraagd. */
  .hero__tekst { order: 1; }
  .hero__product { order: 2; }
}

.hero h1 .lime { display: block; }
.hero p.lead { color: var(--op-donker-zacht); font-size: clamp(1.06rem, 1.5vw, 1.24rem); max-width: 46ch; }

/* --- de productcompositie -------------------------------------------------
   De foto's zijn niet groot: het station is 329px breed in het bestand, de
   powerbank 599. Opblazen maakt ze zacht — dus komt de schaal uit de
   compositie. Het station staat achter, de powerbank ervoor en eroverheen,
   met een ring eromheen. Samen vullen ze meer dan elk van beide.
   -------------------------------------------------------------------------- */

.hero__product { position: relative; display: grid; place-items: center; }

.hero__podium {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 1 / 1.06;
  display: grid;
  place-items: center;
}

/* De ring: het merkteken is een cirkel met een dikke lijn, dus die vorm. */
.hero__podium::before {
  content: "";
  position: absolute;
  inset: 4% 2%;
  border-radius: 50%;
  border: 1px solid var(--lime-rand);
  background: radial-gradient(circle at 50% 60%, rgba(168, 232, 47, .10) 0%, transparent 68%);
}

.hero__station {
  position: relative;
  width: 329px;
  max-width: 74%;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, .65));
}

.hero__pod {
  position: absolute;
  right: -2%;
  bottom: 2%;
  width: 250px;
  max-width: 56%;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .7));
}

/* In de stroom boven het podium, niet absoluut erover: het station dekte de tekst af. */
.hero__hand { position: relative; z-index: 1; justify-self: end; margin: 0 2% .5em 0; text-align: right; }
@media (max-width: 940px) { .hero__hand { display: none; } }

/* ==========================================================================
   7. SECTIES
   ========================================================================== */

/* --- vertrouwensrij onder de hero ---------------------------------------- */

.vertrouwen {
  background: var(--navy);
  border-block: 1px solid var(--lijn);
  padding-block: clamp(24px, 3vw, 36px);
}

.vertrouwen__rij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px);
}
@media (max-width: 720px) { .vertrouwen__rij { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

.vertrouwen__item { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; }
.vertrouwen__item .ic { grid-row: span 2; width: 26px; height: 26px; color: var(--lime); }
.vertrouwen__item b { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--op-donker); }
.vertrouwen__item span { font-size: .88rem; color: var(--op-donker-zacht); }

/* --- de drie stappen ------------------------------------------------------ */

.stappen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
  margin-top: clamp(36px, 5vw, 56px);
  text-align: left;
  counter-reset: stap;
}
@media (max-width: 820px) { .stappen { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

.stap { position: relative; }

/* Een haarlijn tussen de kolommen; niet ervoor en niet erna. */
@media (min-width: 821px) {
  .stap + .stap::before {
    content: "";
    position: absolute;
    left: calc(clamp(24px, 4vw, 52px) / -2);
    top: 4px; bottom: 4px;
    border-left: 1px solid var(--mist-rand);
  }
}

.stap__kop { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }

.stap__nr {
  counter-increment: stap;
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--nacht);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.stap__nr::before { content: "0" counter(stap); }

.stap .ic { width: 36px; height: 36px; color: var(--op-licht); opacity: .85; }
.stap h3 { margin-bottom: .4em; }
.stap p { color: var(--op-licht-zacht); max-width: 36ch; }

/* --- blokken op donker ---------------------------------------------------- */

.blokken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
@media (max-width: 540px) { .blokken { grid-template-columns: minmax(0, 1fr); } }

.blok {
  background: var(--navy-2);
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  padding: clamp(18px, 2.2vw, 26px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  transition: border-color .18s ease, transform .18s ease;
}
.blok:hover { border-color: var(--lime-rand); transform: translateY(-2px); }
.blok .ic { grid-row: span 2; width: 30px; height: 30px; color: var(--lime); }
.blok b { font-family: var(--font-display); font-weight: 700; font-size: 1.03rem; color: var(--op-donker); }
.blok span { font-size: .92rem; color: var(--op-donker-zacht); line-height: 1.55; }

/* --- categorietegels ------------------------------------------------------ */

.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
@media (max-width: 1024px) { .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .tegels { grid-template-columns: minmax(0, 1fr); } }

/*
  In de referentie staan hier vier sfeerfoto's. Die bestaan nog niet. Tot ze
  er zijn draagt elke tegel een eigen kleurverloop uit het merkpalet, een groot
  pictogram en zijn naam. Dat is een ontworpen tegel, geen lege kaart die op
  een foto wacht — en er wordt geen locatie voorgewend die er niet is.

  Zodra de foto's er zijn: zet ze als background-image op .tegel en houd het
  verloop eronder als leesbaarheidslaag.
*/
.tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: 20px;
  border-radius: var(--r-kaart);
  border: 1px solid var(--lijn);
  background:
    linear-gradient(180deg, transparent 38%, rgba(5, 9, 15, .82) 100%),
    linear-gradient(152deg, var(--tegel-a, #16232F) 0%, var(--tegel-b, #070C13) 100%);
  color: var(--op-donker);
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}

a.tegel:hover { transform: translateY(-4px); border-color: var(--lime-rand); color: var(--op-donker); }

.tegel .ic {
  position: absolute;
  top: 18px; left: 20px;
  width: 34px; height: 34px;
  color: var(--lime);
}

.tegel b { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; display: block; }
.tegel span { font-size: .88rem; color: var(--op-donker-zacht); }

/* --- partnerband ---------------------------------------------------------- */

.partner {
  background: var(--navy-2);
  border: 1px solid var(--lijn);
  border-radius: var(--r-groot);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) { .partner { grid-template-columns: minmax(0, 1fr); } }

/* De kleur staat er uitdrukkelijk bij, net als bij p: het blok is .dark maar
   staat in een .soft-sectie, en .soft h2 komt later in dit bestand dan
   .dark h2. Zonder deze regel wordt de kop donker op donker. */
.partner h2 { margin-bottom: .4em; color: var(--op-donker); }
.partner p { color: var(--op-donker-zacht); }

/* --- slotband ------------------------------------------------------------- */

.slot {
  position: relative;
  background: var(--nacht);
  color: var(--op-donker-zacht);
  overflow: hidden;
}

.slot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: min(1100px, 140vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(168, 232, 47, .22) 0%, transparent 66%);
  pointer-events: none;
}

.slot .wrap { position: relative; z-index: 1; }
.slot h2 { color: var(--op-donker); font-size: clamp(2.1rem, 5.4vw, 3.6rem); }

.slot__rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}

/* ==========================================================================
   8. COMPONENTEN
   ========================================================================== */

/* --- kaarten -------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 2em;
}

.card {
  background: var(--wit);
  border: 1px solid var(--mist-rand);
  border-radius: var(--r-kaart);
  padding: clamp(20px, 2.4vw, 28px);
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: rgba(168, 232, 47, .5); transform: translateY(-2px); }
.card h3 { margin-top: 0; }
.card p { max-width: none; color: var(--op-licht-zacht); }
.card p:last-child { margin-bottom: 0; }

.soft .card { background: var(--wit); }
.dark .card { background: var(--navy-2); border-color: var(--lijn); }
.dark .card p { color: var(--op-donker-zacht); }

.card-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime-tekst);
  margin-bottom: .7em;
}
.dark .card-num { color: var(--lime); }

/* --- cijferband ----------------------------------------------------------- */

.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(22px, 4vw, 52px);
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 2px solid var(--lime);
}

.cijfer__getal {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--op-licht);
}
.dark .cijfer__getal { color: var(--op-donker); }

.cijfer__label {
  display: block;
  margin-top: .55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime-tekst);
}
.dark .cijfer__label { color: var(--lime); }

.cijfer p { margin: .6em 0 0; max-width: 32ch; font-size: .95rem; }

/* --- lijst met stappen (subpagina's) -------------------------------------- */

ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 2em 0 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  margin-bottom: 1.8em;
  max-width: var(--measure);
}
ol.steps > li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--lime);
  color: var(--lime-tekst);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
}
.dark ol.steps > li::before { color: var(--lime); }
ol.steps h3 { margin-bottom: .25em; }
ol.steps p { margin-bottom: 0; }

/* --- foto's in de tekst --------------------------------------------------- */

.media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.media--omgekeerd { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.media--omgekeerd .media__tekst { order: 2; }
.media--omgekeerd .media__foto { order: 1; }

@media (max-width: 800px) {
  .media, .media--omgekeerd { grid-template-columns: minmax(0, 1fr); }
  .media--omgekeerd .media__tekst, .media--omgekeerd .media__foto { order: initial; }
}

.media__tekst > :first-child { margin-top: 0; }

/*
  Nooit groter dan het bestand zelf: --eigen is de werkelijke breedte in
  pixels. Uitrekken laat de browser pixels verzinnen en maakt het beeld zacht.
*/
.media__foto img,
.figuur img {
  display: block;
  margin-inline: auto;
  max-width: min(100%, var(--eigen, 100%));
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .18));
}
.dark .media__foto img, .dark .figuur img { filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .6)); }

.figuur { margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; }
.figuur figcaption, .media__foto figcaption {
  margin-top: 12px;
  font-size: .89rem;
  color: var(--op-licht-zacht);
  text-align: center;
}
.dark .figuur figcaption, .dark .media__foto figcaption { color: var(--op-donker-zacht); }

/* --- FAQ ------------------------------------------------------------------ */

.faq { margin-top: 2em; max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--mist-rand); }
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  color: var(--op-licht);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--lime-tekst); flex: none; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > *:not(summary) { padding-bottom: 14px; }

/* --- paginakop op subpagina's --------------------------------------------- */

.crumbs { font-size: .88rem; color: var(--op-donker-zacht); margin-bottom: 18px; }
.crumbs a { color: var(--op-donker-zacht); text-decoration: none; }
.crumbs a:hover { color: var(--lime); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--lime-waas);
  border: 1px solid var(--lime-rand);
  color: var(--op-donker);
  border-radius: var(--r-pil);
  padding: 8px 17px;
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }

.note { font-size: .93rem; color: var(--op-licht-zacht); max-width: var(--measure); }
.dark .note { color: var(--op-donker-zacht); }

/* --- formulier ------------------------------------------------------------ */

.form { max-width: 580px; margin-top: 2em; }
.form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 7px;
  color: var(--op-licht);
}
.form input, .form select, .form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 13px 15px;
  border: 1px solid var(--mist-rand);
  border-radius: 14px;
  background: var(--wit);
  color: var(--op-licht);
  margin-bottom: 18px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--lime-diep); outline-offset: 1px; }

.optioneel { font-weight: 400; color: var(--op-licht-zacht); text-transform: none; letter-spacing: 0; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.melding {
  border-left: 4px solid;
  padding: 15px 19px;
  margin: 0 0 1.6em;
  max-width: var(--measure);
  font-size: .97rem;
  border-radius: 0 12px 12px 0;
}
.melding-geslaagd { border-color: var(--lime-diep); background: var(--lime-waas); }
.melding-fout { border-color: #C4553D; background: rgba(196, 85, 61, .10); }

/* ==========================================================================
   9. VOETTEKST
   ========================================================================== */

.site-foot {
  background: var(--nacht);
  color: var(--op-donker-zacht);
  border-top: 1px solid var(--lijn);
  padding-block: clamp(44px, 6vw, 72px);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

.foot-logo { width: 152px; display: block; margin-bottom: 16px; }
.site-foot h2 { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--op-donker); letter-spacing: .02em; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 9px; }
.site-foot a { color: var(--op-donker-zacht); text-decoration: none; font-size: .95rem; }
.site-foot a:hover { color: var(--lime); }
.site-foot p { font-size: .95rem; }

.foot-blad { display: flex; align-items: center; gap: 9px; font-size: .88rem; margin-top: 18px; }
.foot-blad .ic { color: var(--lime); flex: none; }

.foot-base {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--lijn);
  font-size: .87rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   10. BEWEGING
   ==========================================================================

   Eén patroon: een blok komt twaalf pixels omhoog en wordt zichtbaar zodra het
   in beeld schuift. Geen parallax, geen bewegende achtergronden.

   Het beginpunt staat bewust NIET op opacity:0 in de stylesheet zelf. Zonder
   JavaScript — of bij een fout erin — zou de halve pagina dan onzichtbaar
   blijven. Het script zet de klasse pas als het zelf draait; zie app.js.
   ========================================================================== */

.js-reveal { opacity: 0; transform: translateY(12px); }
.js-reveal.is-zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal, .js-reveal.is-zichtbaar { opacity: 1; transform: none; transition: none; }
  .btn:hover, .blok:hover, .card:hover, a.tegel:hover { transform: none; }
}

/*
  Tekst op donker.

  "section p" hierboven geeft alinea's in een gewone sectie hun zachte donkere
  kleur. Die regel raakt ook alinea's in een donkere sectie, en daar wordt het
  donker op donker. Deze regels wegen zwaarder (klasse + element) en zetten de
  tekst op donker terug op zijn lichte tint.
*/
.dark p, .hero p, .slot p, .vertrouwen p, .partner p { color: var(--op-donker-zacht); }
.dark .lood, .slot .lood { color: var(--op-donker-zacht); }

/* ------------------------------------------------------------- tekstpagina
   Een lopende tekst zoals de privacyverklaring: koppen met lucht erboven,
   lijsten op dezelfde leesbreedte als de alinea's. */
.tekstblok h2 { margin-top: 1.6em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.tekstblok h2:first-child { margin-top: 0; }
.tekstblok ul { max-width: var(--measure); margin: 0 0 1.4em; padding-left: 1.2em; color: var(--op-licht-zacht); }
.tekstblok li { margin-bottom: .6em; }
.tekstblok li strong { color: var(--op-licht); }
.tekstblok__datum { margin-top: 2em; font-size: .9rem; }
.tekstblok h3 { margin: 1.4em 0 .5em; font-size: clamp(1.1rem, 2vw, 1.3rem); }
.tekstblok__adres { line-height: 1.7; }
.tekstblok .btn-row + p { margin-top: 1.2em; }
.tabel-wrap { max-width: 100%; margin: 0 0 1.6em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9rem; }
.tabel th, .tabel td { padding: .7em .8em; border-bottom: 1px solid rgba(10, 18, 27, .12); text-align: left; vertical-align: top; }
.tabel th { color: var(--op-licht); font-weight: 700; white-space: nowrap; }
.tabel td { color: var(--op-licht-zacht); }
.tabel code { font-size: .85em; white-space: nowrap; }
/* Telefoon: elke rij een kaartje met label en waarde, geen zijwaarts scrollen. */
@media (max-width: 640px) {
  .tabel { min-width: 0; }
  .tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel tr { display: block; padding: .6em 0; border-bottom: 1px solid rgba(10, 18, 27, .12); }
  .tabel td { display: grid; grid-template-columns: 7.5em 1fr; gap: .8em; padding: .3em 0; border: 0; }
  .tabel td::before { content: attr(data-label); color: var(--op-licht); font-weight: 700; }
  .tabel code { white-space: normal; word-break: break-all; }
}

.form-privacy { margin-top: 1em; font-size: .9rem; color: var(--op-licht-zacht); }

/*
  Pody — de publieke assistent van ChargePod
  ==========================================

  Voor bezoekers heet hij Pody. In de code blijft het bestand chargebot heten:
  bestandsnamen, klassen en data-attributen hernoemen voegt risico toe zonder
  dat er iets aan het gedrag verandert. Theo is en blijft de interne assistent
  van het Control Center en komt in de publieke kant nergens voor.

  Deze stijl volgt de goedgekeurde Pody-mock-up: een donker, hoog paneel met
  zachte hoeken, lime accenten en de mascotte zelf als herkenningspunt — zowel
  gesloten rechtsonder als klein in de gespreksbubbels.

  Alle waarden staan als eigen custom properties met een cb-voorvoegsel. Zo
  raakt de widget geen enkele bestaande regel van de site, en kan hij ook nooit
  per ongeluk de tokens van de pagina overschrijven.
*/

.cb {
  --cb-bg: #0B0C0E;
  --cb-vlak: #141619;
  --cb-vlak-2: #1C1F24;
  --cb-rand: #24272D;
  --cb-tekst: #FFFFFF;
  --cb-tekst-2: #9EA3AD;
  --cb-tekst-3: #6B7078;

  /* Het primaire ChargePod-groen. Eén groen, overal. */
  --cb-accent: #A8E82F;
  --cb-accent-diep: #86C41B;
  --cb-accent-waas: rgba(168, 232, 47, .14);
  --cb-accent-rand: rgba(168, 232, 47, .34);

  --cb-letter: Manrope, Poppins, ui-sans-serif, system-ui, sans-serif;

  /* De afstand tot de schermrand. Eén waarde, zodat positie, breedte en
     hoogte per schermmaat samen meeschuiven; zie de media queries onderaan. */
  --cb-marge: 22px;

  position: fixed;
  right: calc(var(--cb-marge) + env(safe-area-inset-right, 0px));
  /* --cb-toetsenbord zet het script zolang de chat openstaat: de hoogte die een
     schermtoetsenbord onderaan wegneemt. Het toetsenbord ligt al over de
     veilige zone heen, dus het is het een of het ander, nooit beide. */
  bottom: calc(var(--cb-marge) + max(env(safe-area-inset-bottom, 0px), var(--cb-toetsenbord, 0px)));
  /* Boven de vaste sitekop, die op 90 staat. */
  z-index: 100;
  font-family: var(--cb-letter);
}

/* ================================================ gesloten: één compacte pill

   Hier stonden een mascotte van 136 pixels, een lime gloed, een grondschaduw,
   een tekstballon met begroeting en een losse knop eronder — samen een blok van
   ruim 250 pixels hoog dat op elke pagina om aandacht vroeg.

   Wat overblijft is waar het om ging: één horizontale knop die zegt wat je
   ermee kunt. De mascotte is niet uit Pody verdwenen; hij staat nog in de kop
   van het gesprek en naast elk bericht. Alleen de etalage is opgeruimd.
*/

.cb-dicht {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Past altijd binnen het scherm, ook op 320 px. */
  max-width: calc(100vw - 2 * var(--cb-marge));
  padding: 7px 9px 7px 10px;
  border: 1px solid var(--cb-accent-rand);
  border-radius: 999px;
  background: #0B0C0E;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: border-color .2s ease, transform .2s ease;
}

.cb[data-open="ja"] .cb-dicht { display: none; }

/*
  De officiële Pody in de knop: hoofd en bovenlichaam uit de master, nooit
  uitgerekt (contain) en zonder kader of cirkel. Pody heeft zelf lime licht,
  dus alleen een heel zachte schaduw erachter.
*/
/* <picture> neemt geen plaats in: het beeld erin is het flex-item. */
.cb-pody-beeld { display: contents; }

.cb-dicht-pody {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(168, 232, 47, .12));
}

.cb-dicht-tekst {
  min-width: 0;
  color: var(--cb-tekst);
  font: 700 14px/1 var(--cb-letter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* De ronde groene knop met de zwarte pijl. */
.cb-dicht-pijl {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cb-accent);
  color: #0B0C0E;
}

.cb-dicht-pijl svg { display: block; }

.cb-dicht-kort { display: none; }

.cb-dicht:hover {
  border-color: var(--cb-accent);
  transform: translateY(-1px);
}

.cb-dicht:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 3px;
}

/* Het cijfer bij ongelezen berichten, nu op de pill zelf. */
.cb-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E5484D;
  color: #FFFFFF;
  font: 800 11px/20px var(--cb-letter);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.cb-badge[hidden] { display: none; }

/* ============================================================== het paneel */

.cb-paneel {
  /* De site geeft section en p eigen marges en padding mee; die regels zijn
     niet voor deze widget bedoeld maar raken hem wel. Daarom staat hier
     expliciet wat het paneel zelf wil. */
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: calc(100vw - 2 * var(--cb-marge));
  /* Tachtig procent van de hoogte, met een dak erop zodat het paneel op een
     groot scherm geen kolom van anderhalve meter wordt. dvh telt de balken van
     een mobiele browser mee; de vh-regel erboven is de terugval voor browsers
     die dvh niet kennen. */
  height: min(80vh, 700px);
  height: min(80dvh, 700px);
  /* --cb-zicht is de hoogte die werkelijk te zien is, zonder toetsenbord. Het
     script zet hem; zonder script geldt 100dvh. Zo raakt het paneel nooit de
     bovenrand, ook niet als het toetsenbord opkomt. */
  max-height: calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge));
  background: var(--cb-bg);
  border: 1px solid var(--cb-rand);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
}

.cb-paneel[hidden] { display: none; }

/* Alleen de berichtenlijst geeft hoogte af. Zonder dit krimpt alles een
   beetje mee, en valt bij weinig ruimte het invoerveld onderaan weg. */
.cb-paneel > :not(.cb-loop) { flex-shrink: 0; }

/* Het toetsenbord laat bijna niets over (een telefoon in liggende stand, of
   een heel klein scherm): dan wijkt de voettekst tot het toetsenbord weer
   weg is. Het script zet data-krap. */
.cb[data-krap="ja"] .cb-voet { display: none; }

.cb-kop {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--cb-vlak);
  border-bottom: 1px solid var(--cb-rand);
}

/* Geen ronde uitsnede of achtergrondcirkel: die zou antenne of hand van de officiële Pody afsnijden. */
.cb-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(168, 232, 47, .12));
}

.cb-kop-tekst { min-width: 0; flex: 1; }

.cb-titel { display: block; font: 800 16px/1.25 var(--cb-letter); color: var(--cb-tekst); }
.cb-onder { display: block; font: 500 12px/1.35 var(--cb-letter); color: var(--cb-tekst-2); }

.cb-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font: 600 11.5px/1 var(--cb-letter);
  color: var(--cb-accent);
}

.cb-online::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cb-accent);
}

/* Wacht het gesprek op een mens, dan zegt de kop dat ook. */
.cb-online[data-stand="wacht"] { color: var(--cb-tekst-2); }
.cb-online[data-stand="wacht"]::before { background: var(--cb-tekst-2); }

.cb-sluit {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cb-tekst-2);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.cb-sluit:hover { background: var(--cb-vlak-2); color: var(--cb-tekst); }
.cb-sluit:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }

/* ============================================================= het gesprek */

.cb-loop {
  /* 1 1 auto en niet flex: 1. Op een telefoon heeft het paneel geen vaste
     hoogte maar groeit het met het gesprek mee tot zijn max-height; een
     basis van 0 zou de lijst daar op niets laten beginnen. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Onderaan de lijst doorvegen schuift de pagina erachter niet mee. Dat
     maakt een scrollblokkade op de pagina overbodig. */
  overscroll-behavior: contain;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-rand) transparent;
}

.cb-loop::-webkit-scrollbar { width: 6px; }
.cb-loop::-webkit-scrollbar-thumb { background: var(--cb-rand); border-radius: 999px; }

/* Eén regel in het gesprek: avatar naast de bubbel, of alleen de bubbel. */
.cb-rij {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 100%;
}

.cb-rij.van-mens { flex-direction: row-reverse; }

.cb-rij-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
}

.cb-bel { min-width: 0; max-width: 86%; }

.cb-bericht {
  padding: 11px 14px;
  border-radius: 18px;
  font: 500 14px/1.55 var(--cb-letter);
  overflow-wrap: anywhere;
}

.cb-bericht.van-bot {
  background: var(--cb-vlak-2);
  border: 1px solid var(--cb-rand);
  color: var(--cb-tekst);
  border-bottom-left-radius: 6px;
}

/* De bezoeker zelf: lime, met donkere tekst voor het contrast. */
.cb-bericht.van-mens {
  background: var(--cb-accent);
  color: #0B0C0E;
  font-weight: 600;
  border-bottom-right-radius: 6px;
}

/* Een medewerker. Zelfde kant als Pody, maar duidelijk iemand anders. */
.cb-bericht.van-chargepod {
  background: var(--cb-vlak-2);
  border: 1px solid var(--cb-accent-rand);
  color: var(--cb-tekst);
  border-bottom-left-radius: 6px;
}

.cb-wie {
  display: block;
  margin-bottom: 3px;
  color: var(--cb-accent);
  font: 800 10.5px/1.2 var(--cb-letter);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cb-tijd {
  display: block;
  margin-top: 4px;
  font: 500 10.5px/1 var(--cb-letter);
  color: var(--cb-tekst-3);
}

.cb-rij.van-mens .cb-tijd { text-align: right; }

/* Een rustige systeemregel, bijvoorbeeld bij een overdracht. */
.cb-systeem {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cb-tekst-3);
  font: 600 11px/1.3 var(--cb-letter);
  text-align: center;
}

.cb-systeem::before,
.cb-systeem::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cb-rand);
}

/* ============================================================== de stand

   Eén regel die meebeweegt: "we zoeken een medewerker" wordt "je vraag staat
   klaar" wordt "Christophe is aangesloten". Vroeger waren dat drie bubbels die
   alle drie bleven staan en ongeveer hetzelfde zeiden.

   Dit is nadrukkelijk geen chatbubbel. Het is een systeemregel onder het
   gesprek, rustiger van toon en zonder afzender.
*/

.cb-stand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid var(--cb-rand);
  background: var(--cb-vlak);
  color: var(--cb-tekst-2);
  font: 600 11.5px/1.45 var(--cb-letter);
  /* Een lange medewerkersnaam breekt af in plaats van het paneel op te rekken. */
  overflow-wrap: anywhere;
}

.cb-stand[hidden] { display: none; }

/* Aangesloten is goed nieuws; dat mag het groen van ChargePod dragen. */
.cb-stand.is-aangesloten { color: var(--cb-accent); }

.cb-puntjes {
  display: inline-flex;
  gap: 3px;
  flex: 0 0 auto;
}

.cb-puntjes i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  animation: cb-puls 1.25s ease-in-out infinite;
}

.cb-puntjes i:nth-child(2) { animation-delay: .18s; }
.cb-puntjes i:nth-child(3) { animation-delay: .36s; }

@keyframes cb-puls {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

/* ================================================================= invoer */

.cb-invoer {
  display: flex;
  /* Onderaan uitlijnen: groeit het veld naar een tweede regel, dan blijft de
     verzendknop naast de regel waar je typt. */
  align-items: flex-end;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid var(--cb-rand);
  background: var(--cb-vlak);
}

/*
  Een textarea van één regel die meegroeit tot vier regels, en daarna zelf
  schuift. Een lange vraag stond eerder op één regel die horizontaal wegliep;
  op een telefoon zag je daardoor nooit wat je al getypt had.

  De hoogte zet het script; min- en max-height hier zijn de grenzen.
*/
.cb-invoer textarea {
  flex: 1;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  min-height: 48px;
  max-height: 104px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cb-rand);
  /* De helft van de minimumhoogte: op één regel een pill, op meer regels een
     afgeronde rechthoek. */
  border-radius: 24px;
  background: var(--cb-vlak-2);
  color: var(--cb-tekst);
  font: 500 14px/1.3 var(--cb-letter);
  resize: none;
  overflow-y: hidden;
}

.cb-invoer textarea::placeholder { color: var(--cb-tekst-3); }
.cb-invoer textarea:focus { outline: none; border-color: var(--cb-accent); }

/* Het paneel krijgt de focus op een aanraakscherm (zie het script); een rand
   rond het hele paneel zegt daar niets. */
.cb-paneel:focus { outline: none; }

.cb-stuur {
  flex: 0 0 auto;
  /* Achtenveertig bij achtenveertig: een duim is geen muisaanwijzer. */
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--cb-accent);
  color: #0B0C0E;
  cursor: pointer;
}

.cb-stuur:hover { background: var(--cb-accent-diep); }
.cb-stuur:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 3px; }

.cb-status {
  margin: 0;
  max-width: none;
  padding: 0 16px 8px;
  background: var(--cb-vlak);
  color: var(--cb-tekst-2);
  font: 700 11.5px/1.45 var(--cb-letter);
}

.cb-status[hidden] { display: none; }

.cb-voet {
  margin: 0;
  /* De site zet een leesbreedte op elke p; binnen dit smalle paneel zou die
     alleen maar in de weg zitten. */
  max-width: none;
  padding: 0 16px 12px;
  background: var(--cb-vlak);
  color: var(--cb-tekst-3);
  font: 500 10.5px/1.5 var(--cb-letter);
}

/* =============================================================== schermen

   Op elke maat blijft Pody een venster dat zweeft, nooit een scherm dat de
   pagina vervangt.

   - bureaublad: 420 breed, een vaste hoogte met een dak, rechtsonder;
   - tablet (tot 1023): 400 breed, hoogstens driekwart van het scherm;
   - telefoon (tot 767): hoogstens 360 breed en 70% hoog. De hoogte volgt het
     gesprek: een begroeting is een klein venster, een lang gesprek groeit tot
     het dak en schuift dan;
   - kleine telefoon (tot 379): smallere marge, strakkere binnenmaten;
   - lage schermen (tot 540 hoog, zoals een telefoon in liggende stand): daar
     is 70% te weinig om nog te kunnen typen. Alleen daar mag het paneel de
     volle zichtbare hoogte nemen, en nog steeds met een marge rondom.

   Kop en invoer staan altijd vast; alleen .cb-loop schuift.

   Hier stond eerder een schermvullend paneel voor telefoons, met een
   scrollblokkade op de pagina. Dat voelde als een app die de site overnam
   voor wat meestal één vraag is.
*/

@media (max-width: 1023px) {
  .cb { --cb-marge: 16px; }

  .cb-paneel {
    width: 400px;
    height: min(620px, 74vh);
    height: min(620px, 74dvh);
  }
}

@media (max-width: 767px) {
  .cb { --cb-marge: 12px; }

  .cb-dicht { gap: 10px; padding: 6px 7px 6px 8px; }
  .cb-dicht-pody { width: 36px; height: 36px; }
  .cb-dicht-tekst { font-size: 13.5px; }
  .cb-dicht-pijl { width: 34px; height: 34px; }
}

/*
  Telefoon: dezelfde knop, compacter. Pody blijft even groot als op de tablet, de
  tekst wordt "Vraag Pody" en de pijl iets kleiner, zodat de knop rechtsonder
  blijft en niet half over de inhoud ligt. De volledige zin staat in aria-label.
*/
@media (max-width: 480px) {
  .cb-dicht { gap: 8px; padding: 5px 5px 5px 7px; }
  .cb-dicht-pody { width: 38px; height: 38px; }
  .cb-dicht-lang { display: none; }
  .cb-dicht-kort { display: inline; }
  .cb-dicht-pijl { width: 30px; height: 30px; }
}

/*
  Op een smal scherm staat de cookiemelding over de volle breedte onderaan, precies
  waar de knop staat (en erboven: z-index 150 tegen 100). Zolang die melding open is
  (toestemming.js zet dan html.ts-melding-open), is de knop dus toch niet te zien of
  aan te tikken; nu ligt hij er ook niet meer onder. Na de keuze staat hij er gewoon.
*/
@media (max-width: 767px) {
  html.ts-melding-open .cb[data-open="nee"] .cb-dicht { visibility: hidden; }
}

@media (max-width: 767px) {

  .cb-paneel {
    width: calc(100vw - 2 * var(--cb-marge));
    max-width: 360px;
    height: auto;
    /* Een ondergrens voor het moment dat een hervat gesprek nog laadt en de
       lijst leeg is. Lager dan een paneel met alleen de begroeting, zodat daar
       geen lege strook onder komt. Nooit boven de bovengrens. */
    min-height: min(240px, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    max-height: min(70dvh, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    border-radius: 22px;
  }

  .cb-bel { max-width: 84%; }
}

@media (max-width: 379px) {
  .cb { --cb-marge: 8px; }

  .cb-dicht { padding-left: 6px; }
  .cb-dicht-tekst { font-size: 13px; }

  .cb-paneel {
    min-height: min(220px, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    max-height: min(68dvh, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    border-radius: 18px;
  }
}

@media (max-height: 540px) {
  .cb { --cb-marge: 8px; }

  .cb-paneel {
    height: auto;
    min-height: 0;
    max-height: calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge));
    border-radius: 18px;
  }
}

/* Zestien pixels is geen smaak: daaronder zoomt Safari op een iPhone of iPad
   de hele pagina in zodra je in het veld tikt, en dan past er niets meer.
   Daarom op elk aanraakscherm, niet alleen op een smal scherm. De kleinere
   padding houdt het veld op één regel even hoog als de verzendknop. */
@media (pointer: coarse) {
  .cb-invoer textarea { padding-block: 12px; font-size: 16px; }
}

/* ------------------------------------------------- compacte binnenmaten

   Op een telefoon, en op elk laag scherm, telt elke verticale pixel. Dezelfde
   inhoud, strakker gezet. */

@media (max-width: 767px), (max-height: 540px) {
  .cb-kop { gap: 9px; padding: 8px 6px 8px 12px; }
  .cb-avatar { width: 34px; height: 34px; }

  /* Twee regels in plaats van drie: de naam bovenaan, ondertitel en stand
     ernaast eronder. Is de stand lang ("Christophe helpt je"), dan breekt hij
     gewoon af naar een eigen regel. */
  .cb-kop-tekst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 1px;
  }

  .cb-titel { flex-basis: 100%; font-size: 15px; line-height: 1.2; }
  .cb-onder { font-size: 11.5px; line-height: 1.3; }
  .cb-online { margin-top: 0; font-size: 11px; }

  /* Een raakvlak van vierenveertig pixels dat de kop niet hoger maakt: de
     negatieve marge geeft de extra ruimte terug aan de rand. */
  .cb-sluit { width: 44px; height: 44px; margin-block: -6px; }

  .cb-loop { padding: 12px 10px; gap: 10px; }
  .cb-rij { gap: 7px; }
  .cb-rij-avatar { width: 26px; height: 26px; }

  .cb-bericht { padding: 9px 12px; border-radius: 16px; line-height: 1.5; }
  .cb-tijd { margin-top: 3px; }

  .cb-stand { padding: 7px 12px; font-size: 11px; }

  .cb-invoer { gap: 8px; padding: 8px 10px; }

  /* Drie regels en dan schuiven: met het toetsenbord open is elke regel van
     het veld een regel minder gesprek. */
  .cb-invoer textarea {
    min-height: 44px;
    max-height: 88px;
    padding: 10px 14px;
    border-radius: 22px;
    font-size: 16px;
    line-height: 1.35;
  }

  .cb-stuur { width: 44px; height: 44px; }

  .cb-status { padding: 0 12px 6px; }
  .cb-voet { padding: 0 12px 9px; font-size: 10px; line-height: 1.4; }
}

@media (max-width: 379px) {
  .cb-kop { gap: 8px; padding: 7px 4px 7px 10px; }
  .cb-avatar { width: 30px; height: 30px; }
  .cb-titel { font-size: 14px; }

  .cb-loop { padding: 10px 8px; gap: 8px; }
  .cb-rij { gap: 6px; }
  .cb-rij-avatar { width: 22px; height: 22px; }

  .cb-bericht { padding: 8px 11px; font-size: 13.5px; line-height: 1.45; }

  .cb-invoer { gap: 6px; padding: 7px 8px; }
  .cb-invoer textarea { padding: 10px 12px; }

  .cb-status { padding: 0 10px 6px; }
  .cb-voet { padding: 0 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb *,
  .cb *::before,
  .cb *::after { transition: none !important; animation: none !important; }
}

/* De privacylink in de voet van het paneel: zelfde kleur als de tekst, onderlijnd. */
.cb-voet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/*
  Cookietoestemming — melding onderaan en het venster "Cookievoorkeuren".

  Eigen tokens met een ts-voorvoegsel, net als de Pody-widget: dit blok komt in
  zowel site.css (homepage) als styles.css (de andere pagina's) en mag van geen
  van beide iets overnemen of overschrijven. Lettertype: dat van de pagina.

  Twee regels uit de opdracht die de vorm bepalen:
  - "Alleen noodzakelijk" is even groot en even goed leesbaar als "Alles
    accepteren". Accepteren is gevuld lime, noodzakelijk een witte rand op
    donker: allebei duidelijk, geen van beide verstopt.
  - Geen layoutsprong: de melding ligt vast over de pagina, schuift niets op.
*/

.ts-melding,
.ts-venster {
  --ts-bg: #0b0c0e;
  --ts-vlak: #141619;
  --ts-rand: rgba(255, 255, 255, 0.14);
  --ts-rand-sterk: rgba(255, 255, 255, 0.72);
  --ts-tekst: #ffffff;
  --ts-tekst-2: #b4b9c1;
  --ts-lime: #c8ff2e;
  --ts-lime-hover: #d6ff5c;
  --ts-lime-waas: rgba(200, 255, 46, 0.16);
  --ts-hoek: 20px;

  box-sizing: border-box;
  color: var(--ts-tekst);
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ts-melding *,
.ts-venster * { box-sizing: border-box; }

.ts-titel {
  margin: 0 0 6px;
  color: var(--ts-tekst);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ts-tekst { margin: 0; color: var(--ts-tekst-2); font-size: 0.9rem; }
.ts-tekst a,
.ts-klein a { color: var(--ts-tekst); text-decoration: underline; text-underline-offset: 3px; }
.ts-tekst a:hover,
.ts-klein a:hover { color: var(--ts-lime); }

/* ------------------------------------------------------------------ melding */

.ts-melding {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  /* Boven de sitekop (90–100) en Pody (100), onder de link "Naar de inhoud" (200). */
  z-index: 150;
  width: min(440px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--ts-rand);
  border-radius: var(--ts-hoek);
  background: var(--ts-bg);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  animation: ts-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes ts-in {
  from { transform: translateY(12px); opacity: 0.001; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-melding { animation: none; }
}

.ts-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.ts-knop {
  flex: 1 1 150px;
  min-height: 46px;
  padding: 11px 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ts-knop--hoofd { background: var(--ts-lime); color: #0b0c0e; }
.ts-knop--hoofd:hover { background: var(--ts-lime-hover); }

.ts-knop--rand { border-color: var(--ts-rand-sterk); background: transparent; color: var(--ts-tekst); }
.ts-knop--rand:hover { border-color: var(--ts-tekst); background: rgba(255, 255, 255, 0.06); }

.ts-knop--tekst {
  flex-basis: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ts-tekst);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ts-knop--tekst:hover { color: var(--ts-lime); }

.ts-knop:focus-visible,
.ts-sluit:focus-visible,
.ts-melding a:focus-visible,
.ts-venster a:focus-visible,
.ts-schakel input:focus-visible + .ts-schakel__baan {
  outline: 3px solid var(--ts-lime);
  outline-offset: 3px;
}

/* Telefoon: over de volle breedte onderaan, knoppen onder elkaar. */
@media (max-width: 560px) {
  .ts-melding {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 20px max(16px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--ts-hoek) var(--ts-hoek) 0 0;
  }
  .ts-knop { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ venster */

.ts-venster {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ts-rand);
  border-radius: var(--ts-hoek);
  background: var(--ts-bg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

.ts-venster[open] { display: block; }
.ts-venster::backdrop { background: rgba(0, 0, 0, 0.62); }

.ts-venster__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.ts-venster__kop .ts-titel { font-size: 1.3rem; margin: 4px 0 6px; }

.ts-sluit {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ts-rand);
  border-radius: 999px;
  background: transparent;
  color: var(--ts-tekst);
  cursor: pointer;
}
.ts-sluit:hover { border-color: var(--ts-rand-sterk); }

.ts-lijst { display: grid; gap: 10px; margin-top: 18px; }

.ts-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--ts-rand);
  border-radius: 14px;
  background: var(--ts-vlak);
}

.ts-cat__naam { display: block; color: var(--ts-tekst); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.ts-cat__tekst p { margin: 4px 0 0; color: var(--ts-tekst-2); font-size: 0.85rem; }
.ts-cat__stand {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ts-tekst);
  font-size: 0.75rem;
  font-weight: 600;
}

/* De schakelaar: een echte checkbox (role=switch), visueel een baan met bol. */
.ts-schakel { position: relative; flex: 0 0 auto; width: 48px; height: 28px; margin-top: 2px; }
.ts-schakel input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ts-schakel input:disabled { cursor: not-allowed; }
.ts-schakel__baan {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ts-rand-sterk);
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.ts-schakel__baan::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ts-tekst);
  transform: translateY(-50%);
  transition: transform 0.15s;
}
.ts-schakel input:checked + .ts-schakel__baan { border-color: var(--ts-lime); background: var(--ts-lime); }
.ts-schakel input:checked + .ts-schakel__baan::after { background: #0b0c0e; transform: translate(19px, -50%); }
.ts-schakel input:disabled + .ts-schakel__baan { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .ts-schakel__baan,
  .ts-schakel__baan::after { transition: none; }
}

.ts-venster__voet { margin-top: 20px; }
/* Drie knoppen naast elkaar zonder dat een label over twee regels breekt; past het niet, dan een rij erbij. */
.ts-venster__voet .ts-knop { flex-basis: 140px; padding-inline: 14px; white-space: nowrap; }
.ts-klein { margin: 14px 0 0; color: var(--ts-tekst-2); font-size: 0.8rem; }

@media (max-width: 560px) {
  .ts-venster { padding: 20px 16px; }
  .ts-venster__voet .ts-knop { flex-basis: 100%; }
}

/* De voetlink "Cookievoorkeuren" is een link naar /cookiebeleid/#voorkeuren die het venster opent. */